/* MaquinariaAlimentaria.net — Estilo Amazon */

:root {
  --amz-dark: #131921;
  --amz-dark2: #232f3e;
  --amz-dark3: #37475a;
  --amz-orange: #ff9900;
  --amz-orange-hover: #ffad33;
  --amz-orange-dark: #e47911;
  --amz-yellow: #ffd814;
  --amz-yellow-hover: #f7ca00;
  --amz-bg: #eaeded;
  --amz-white: #ffffff;
  --amz-text: #0f1111;
  --amz-text-light: #565959;
  --amz-link: #007185;
  --amz-link-hover: #c7511f;
  --amz-border: #d5d9d9;
  --amz-star: #de7921;
}

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

body {
  font-family: 'Amazon Ember', Arial, sans-serif;
  background-color: var(--amz-bg);
  color: var(--amz-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* === HEADER (Amazon style) === */
.amz-header {
  background-color: var(--amz-dark);
  color: #fff;
}
.amz-header-bottom {
  background-color: var(--amz-dark2);
  color: #fff;
}
.amz-header a { color: #fff; text-decoration: none; }
.amz-header a:hover { color: var(--amz-orange); }
.amz-header-bottom a:hover {
  outline: 1px solid #fff;
  border-radius: 2px;
}

/* === HERO === */
.hero-gradient {
  background: linear-gradient(to bottom, var(--amz-dark2), #dce0e3);
}

/* === BUTTONS (Amazon style) === */
.btn-cta {
  background: linear-gradient(to bottom, var(--amz-yellow), var(--amz-yellow-hover));
  color: var(--amz-text) !important;
  border: 1px solid #f2c200;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s ease;
}
.btn-cta:hover {
  background: linear-gradient(to bottom, #f7ca00, #eeb900);
  border-color: #e0a800;
}

.btn-cta-orange {
  background: linear-gradient(to bottom, var(--amz-orange), var(--amz-orange-dark));
  color: #fff !important;
  border: 1px solid #c77b12;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s ease;
}
.btn-cta-orange:hover {
  background: linear-gradient(to bottom, var(--amz-orange-hover), var(--amz-orange));
}

/* === CARDS (Amazon product card style) === */
.card-product {
  background: var(--amz-white);
  border: 1px solid var(--amz-border);
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}
.card-product:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.card-product img {
  transition: transform 0.2s ease;
}
.card-product:hover img {
  transform: scale(1.03);
}

/* === SECTOR BADGES === */
.badge-carnico { background-color: #b12704; color: #fff; }
.badge-pescado { background-color: #007185; color: #fff; }
.badge-lacteos { background-color: #f0c14b; color: var(--amz-text); }
.badge-panaderia { background-color: #c7511f; color: #fff; }
.badge-frutas { background-color: #067d62; color: #fff; }
.badge-platos { background-color: #0d7377; color: #fff; }
.badge-general { background-color: var(--amz-dark3); color: #fff; }

/* === SECTOR CARDS (Amazon category card) === */
.card-sector {
  background: var(--amz-white);
  border: 1px solid var(--amz-border);
  border-radius: 4px;
  transition: box-shadow 0.15s ease;
  overflow: hidden;
}
.card-sector:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.card-sector h3 { color: var(--amz-text); }
.card-sector .sector-link {
  color: var(--amz-link);
  font-size: 0.85rem;
  font-weight: 500;
}
.card-sector .sector-link:hover { color: var(--amz-link-hover); text-decoration: underline; }

/* === SPEC TABLE (Amazon detail style) === */
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table th {
  background-color: #f0f2f2;
  padding: 0.65rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--amz-text);
  border: 1px solid var(--amz-border);
  font-size: 0.875rem;
}
.spec-table td {
  padding: 0.65rem 1rem;
  border: 1px solid var(--amz-border);
  color: var(--amz-text);
  font-size: 0.875rem;
}
.spec-table tr:nth-child(even) td {
  background-color: #f7fafa;
}

/* === FAQ (Amazon Q&A style) === */
.faq-item {
  border-bottom: 1px solid var(--amz-border);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 0;
  font-weight: 600;
  color: var(--amz-text);
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '▸';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  margin-right: 0.5rem;
  color: var(--amz-dark3);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::before {
  content: '▾';
}
.faq-item .faq-answer {
  color: var(--amz-text-light);
  padding-bottom: 0.85rem;
  padding-left: 1.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* === BREADCRUMB === */
.breadcrumb a {
  color: var(--amz-link);
  text-decoration: none;
  font-size: 0.8rem;
}
.breadcrumb a:hover {
  color: var(--amz-link-hover);
  text-decoration: underline;
}
.breadcrumb span { color: var(--amz-text-light); font-size: 0.8rem; }

/* === LINKS (Amazon style) === */
a.amz-link {
  color: var(--amz-link);
  text-decoration: none;
}
a.amz-link:hover {
  color: var(--amz-link-hover);
  text-decoration: underline;
}

/* === FORM INPUTS === */
.form-input {
  background: var(--amz-white);
  border: 1px solid var(--amz-border);
  border-radius: 4px;
  color: var(--amz-text);
  font-size: 0.9rem;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.form-input:focus {
  border-color: var(--amz-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,153,0,0.25);
}

/* === MOBILE MENU === */
.mobile-menu { display: none; }
.mobile-menu.active { display: block; }

/* === PRODUCT PAGE IMAGE === */
.product-image-container {
  background: var(--amz-white);
  border: 1px solid var(--amz-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* === PLACEHOLDER IMAGE === */
.img-placeholder {
  background: #f7fafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfc8ca;
}

/* === FOOTER (Amazon style) === */
.amz-footer {
  background-color: var(--amz-dark2);
  color: #ddd;
}
.amz-footer a {
  color: #ddd;
  text-decoration: none;
  font-size: 0.85rem;
}
.amz-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.amz-footer-bottom {
  background-color: var(--amz-dark);
  color: #999;
}

/* === AMAZON-STYLE PRICE DISPLAY === */
.price-label {
  color: #b12704;
  font-weight: 700;
}

/* === DIVIDER === */
.amz-divider {
  border-top: 1px solid var(--amz-border);
}

/* === "Cómo funciona" STEPS === */
.step-circle {
  background: var(--amz-orange);
  color: var(--amz-white);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* === AMAZON SEARCH BAR === */
.search-bar {
  background: var(--amz-white);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.search-bar input {
  border: none;
  outline: none;
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  color: var(--amz-text);
}
.search-bar button {
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
  border: 1px solid #a88734;
  padding: 0 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.search-bar button:hover {
  background: linear-gradient(to bottom, #f0c14b, #e8b225);
}

/* === COOKIE BANNER === */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--amz-dark);
  color: #ddd;
  padding: 1rem;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
.cookie-banner a { color: var(--amz-orange); text-decoration: underline; }
.cookie-banner button {
  background: linear-gradient(to bottom, var(--amz-yellow), var(--amz-yellow-hover));
  color: var(--amz-text);
  border: 1px solid #f2c200;
  border-radius: 4px;
  padding: 0.4rem 1.2rem;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.cookie-banner button:hover {
  background: linear-gradient(to bottom, #f0c14b, #e8b225);
}

/* === GRID "VER MÁS" (sector indexes) === */
.show-more-toggle { display: none; }
.hidden-card { display: none; }
.show-more-toggle:checked ~ .product-grid .hidden-card { display: block; }
.show-more-toggle:checked ~ .show-more-label { display: none; }
.show-more-label {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--amz-border);
  border-radius: 4px;
  color: var(--amz-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--amz-white);
}
.show-more-label:hover {
  background: #f7fafa;
}