.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .slide {
            transition: opacity 1000ms ease-in-out;
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .nav-active {
            border-bottom: 1px solid #535845;
            padding-bottom: 0.25rem;
        }
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        body {
            background-color: #f9faf2;
            color: #1a1c18;
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            font-family: 'Hanken Grotesk', sans-serif;
            background-color: #FDFDFB;
            color: #1a1c18;
            -webkit-font-smoothing: antialiased;
        }
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .text-reveal {
            animation: textReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }
        @keyframes textReveal {
            0% { transform: translateY(30px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        .hover-lift {
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .hover-lift:hover {
            transform: translateY(-8px);
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .active-nav-border { position: relative; }
        .active-nav-border::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: currentColor;
        }
        .form-input-focus:focus {
            outline: none;
            border-bottom-color: #535845;
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        body {
            font-family: 'Hanken Grotesk', sans-serif;
            scroll-behavior: smooth;
        }
        .legal-content h2 {
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            color: #3F4238; /* deep-olive */
        }
        .legal-content p {
            margin-bottom: 1.25rem;
            color: #464740; /* on-surface-variant */
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            font-family: 'Hanken Grotesk', sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        /* Custom scrollbar for premium feel */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #FDFDFB;
        }
        ::-webkit-scrollbar-thumb {
            background: #B7B7A4;
            border-radius: 10px;
        }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            font-family: 'Hanken Grotesk', sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        .text-label-caps {
            text-transform: uppercase;
        }

.hero-gradient{background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 100%)}
.ghost-outline{border:1px solid rgba(183,183,164,.4)}

.page-section{min-height:100vh}

/* ── Search overlay ── */
#search-overlay{
  display:none;position:fixed;inset:0;z-index:100000;
  background:rgba(249,250,242,.97);backdrop-filter:blur(4px);
  flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:80px;
}
#search-overlay.open{display:flex}
#search-input{
  width:min(640px,90vw);font-size:28px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;border:none;border-bottom:2px solid #535845;
  background:transparent;outline:none;padding:12px 0;color:#1a1c18;
}
#search-results{width:min(640px,90vw);margin-top:32px}
.search-result-item{
  padding:16px 0;border-bottom:1px solid #e2e3db;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;
}
.search-result-item:hover{color:#535845}

/* ── Cart drawer ── */
#cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);
  background:#FDFDFB;z-index:100001;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-4px 0 32px rgba(0,0,0,.12);
}
#cart-drawer.open{transform:translateX(0)}
#cart-overlay{
  display:none;position:fixed;inset:0;z-index:100000;
  background:rgba(0,0,0,.35);
}
#cart-overlay.open{display:block}
.cart-item{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid #e2e3db;
}

/* ── Menú hamburguesa móvil ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 5px;
  z-index: 200;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #535845;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
#mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FDFDFB;
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
#mobile-nav.open {
  display: flex;
}
#mobile-nav a {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: #3F4238;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
#mobile-nav a:hover { color: #535845; }
#mobile-nav .mobile-nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
  color: #535845;
  font-family: sans-serif;
}
#mobile-nav .mobile-nav-icons {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 767px) {
  .hamburger-btn { display: flex; }
}

/* ── Tipografía un poco más grande en la página de Inicio ── */
#page-inicio .text-display-lg{ font-size:50px; }
#page-inicio .text-headline-md{ font-size:26px; }
#page-inicio .text-body-lg{ font-size:19px; }
#page-inicio .text-body-md{ font-size:17px; }
#page-inicio .text-label-caps{ font-size:13px; }

/* ── Indicador de página activa en el menú (escritorio y móvil), ── */
/* para saber siempre en qué sección estamos, también desde el móvil */
.page-section header a.nav-current,
.page-section nav a.nav-current,
.page-section footer a.nav-current {
  color:#535845 !important;
  font-weight:700 !important;
  opacity:1 !important;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
}
#mobile-nav a.nav-current {
  color:#535845 !important;
  font-weight:600 !important;
}
#mobile-nav a.nav-current::after{
  content:'';
  display:block;
  width:28px;
  height:2px;
  background:#535845;
  margin:8px auto 0;
  border-radius:2px;
}

/* ── Botón "Cargar más" en la tienda ── */
#tienda-load-more-wrap{ text-align:center; margin-top:56px; }
#tienda-load-more{
  border:1px solid #535845; color:#535845; background:transparent;
  padding:14px 44px; font-family:'Hanken Grotesk',sans-serif; font-size:11px;
  letter-spacing:.1em; font-weight:600; text-transform:uppercase; cursor:pointer;
  transition:background .3s, color .3s;
}
#tienda-load-more:hover{ background:#535845; color:#FDFDFB; }

/* ── Badges de categoría / variedad de aceituna en las fichas de producto ── */
.product-tag-row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
.product-tag{
  font-family:'Hanken Grotesk',sans-serif; font-size:9px; letter-spacing:.08em;
  font-weight:600; text-transform:uppercase; padding:3px 9px; border-radius:999px;
}
.product-tag.categoria-ecologico{ background:#e2e1c7; color:#3F4238; }
.product-tag.categoria-convencional{ background:#e5e6df; color:#535845; }
.product-tag.categoria-centenario{ background:#3F4238; color:#FDFDFB; }
.product-tag.variedad{ background:transparent; color:#77786f; border:1px solid #c7c7bd; }