/* Fuentes oficiales de Bijou, extraídas del PDF del manual de identidad.
   Holipop no incluye vocales acentuadas (á é í ó ú) — se usa Cormorant Garamond como
   fallback automático del navegador para esos caracteres específicos. Kiona sí está completa. */
@font-face {
  font-family: 'Holipop';
  src: url('fonts/Holipop-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Kiona';
  src: url('fonts/Kiona-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Paleta real de uso de Bijou (verde rey — provisional hasta confirmar hex exacto con el cliente) */
  --green: #1F4E3D;
  --green-dark: #163A2D;
  --gold: #A08150;
  --gold-dark: #7A5613;
  --gray: #9A9A9A;
  --gray-light: #F4F4F2;
  --black: #000000;
  --white: #FFFFFF;
  --border: #E4E2DD;

  /* Tipografía oficial de Bijou (extraída del PDF del manual).
     Holipop no tiene tildes (á é í ó ú), así que mezclarla con texto en español genera un
     choque visual letra por letra. El logo ahora usa el archivo de imagen real (no texto),
     así que el texto general usa Cormorant Garamond de forma consistente. */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Kiona', 'Montserrat', 'Century Gothic', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
.media-fill { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15) saturate(0.9); }
/* Mismo problema que .footer-logo (ver más abajo): en páginas de WooCommerce (Tienda,
   producto, etc., body.woocommerce-page) el propio CSS de WooCommerce trae
   ".woocommerce-page img { height:auto }", que le gana en especificidad a ".media-fill"
   sola — la foto queda con su alto "natural" en vez de llenar la tarjeta, dejando un
   hueco en blanco debajo. Se refuerza aquí para las fotos de producto y de categoría. */
.woocommerce-page .media-fill { width: 100%; height: 100%; object-fit: cover; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-display);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  font-size: 1.05rem;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.section { padding: 110px 24px; max-width: 1400px; margin: 0 auto; }
.section-head { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto 56px; }
.section-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
  display: block;
  text-align: center;
}

.link-underline {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  position: relative;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--gold); transition: right 0.3s ease;
}
.link-underline:hover::after { right: 0; }
.link-underline:hover { color: var(--gold-dark); }

/* Botones */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 38px;
  border-radius: 1px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.btn-solid { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.btn-outline:hover { background: var(--white); color: var(--green); text-shadow: none; }
.btn-outline-white { background: transparent; color: var(--white); border: 1px solid var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--green); }

/* Header */
.header-group {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}
.header-group.is-hidden { transform: translateY(-100%); }

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.header-group.is-transparent .site-header { background: transparent; border-bottom-color: transparent; }
.header-group.is-transparent .main-nav > ul > li > a,
.header-group.is-transparent .icon-btn,
.header-group.is-transparent .locale-btn {
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  transition: color 0.4s ease;
}
.header-group.is-transparent .hamburger span { background: var(--white); }
.header-group:not(.is-transparent) .main-nav > ul > li > a,
.header-group:not(.is-transparent) .icon-btn,
.header-group:not(.is-transparent) .locale-btn { transition: color 0.4s ease; }

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 32px;
}
/* Logo real de Bijou (imagotipo: BIJOU + isotipo de corazón). Se usa un único archivo en negro
   y se invierte a blanco por CSS cuando el header está transparente sobre el hero — así se evita
   el borde verdoso que quedaba al recortar la versión blanca (quedaban pixeles del fondo turquesa
   original en el antialiasing de los bordes). En pantallas chicas se muestra solo el isotipo
   (el corazón) en vez del imagotipo completo, para ahorrar espacio en el header. */
.logo { position: relative; display: block; width: 158px; height: 52px; flex: 0 0 auto; }
.logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: filter 0.4s ease; }
.logo-mobile { display: none; }
.header-group.is-transparent .logo-img { filter: brightness(0) invert(1); }

.main-nav { flex: 1; }
.main-nav > ul { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: opacity 0.25s ease;
}
.main-nav > ul > li > a:hover { opacity: 0.6; }

.has-mega { position: relative; }
.mega-menu {
  display: flex;
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  min-width: 420px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(30px) saturate(2);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 34px 44px;
  gap: 60px;
  z-index: 250;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.has-mega:hover .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(10px);
}
.mega-col { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.mega-col h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
.mega-col a { font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); }
.mega-col a:hover { text-decoration: underline; }
/* Los enlaces del menú desplegable siempre en negro sobre blanco, sin importar
   si el header está en modo transparente (sobre el hero) */
.header-group.is-transparent .mega-col a,
.header-group.is-transparent .mega-col h4 { text-shadow: none; }
.header-group.is-transparent .mega-col a { color: var(--black); }

.header-icons { display: flex; align-items: center; gap: 18px; }
.icon-btn { position: relative; font-size: 1.1rem; display: flex; align-items: center; }
.icon-btn svg { display: block; }
.locale-btn { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.06em; text-decoration: underline; }
.cart-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--green); color: var(--white);
  font-size: 0.6rem; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hamburger { display: none; flex-direction: column; gap: 5px; }
.hamburger span { width: 22px; height: 1.5px; background: var(--black); }

/* Hero */
/* Hero: varios slides superpuestos con crossfade automático — el texto y el CTA de cada
   slide corresponden a lo que se ve en su imagen (joyas o perfumes) */
.hero { position: relative; height: 100vh; min-height: 700px; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.4s ease, visibility 1.4s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-media { width: 100%; height: 100%; overflow: hidden; background: var(--gray-light); }
.hero-media img { animation: kenBurns 26s ease-out infinite alternate; }
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--white); padding: 0 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}
.hero-eyebrow {
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.4em;
  text-transform: uppercase; margin-bottom: 18px; opacity: 0.9;
}
.hero-title {
  font-family: var(--font-display); font-weight: 500; font-size: 3.4rem; line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35); margin-bottom: 18px; max-width: 720px;
}
.hero-sub {
  font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.03em;
  max-width: 480px; margin-bottom: 32px; opacity: 0.95;
}
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Trust bar — minimalista, sin relleno de color, inspirado en Andorra Park */
.trust-bar {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8%;
  padding: 90px 5%; background: var(--white);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 22px; width: 200px; color: var(--black); opacity: 0.85; transition: opacity 0.3s ease;
}
.trust-item:hover { opacity: 1; }
.trust-item svg { stroke-width: 1; color: var(--black); }
.trust-item span {
  font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; color: var(--black); line-height: 1.7;
}

/* Descuento por pagar en divisas — ribete angosto, más discreto que .ca-strip */
.divisas-strip { background: var(--gold-dark); text-align: center; padding: 12px 24px; }
.divisas-strip p { font-family: var(--font-sans); font-size: 0.8rem; color: var(--white); letter-spacing: 0.02em; }
.divisas-strip strong { font-weight: 700; }

/* Category split */
.category-split { display: grid; grid-template-columns: 1fr 1fr; }
.cat-card { position: relative; display: block; overflow: hidden; height: 560px; }
.cat-media { position: absolute; inset: 0; overflow: hidden; }
.cat-media img { transition: transform 0.8s cubic-bezier(.2,.7,.3,1); }
.cat-card:hover .cat-media img { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45)); }
.cat-label { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; color: var(--white); z-index: 2; }
.cat-eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.9; }
.cat-label h2 { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; margin: 6px 0 10px; }

/* Carrusel de productos destacados */
.carousel-row + .carousel-row { margin-top: 70px; }
.carousel-row-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 24px; }
.carousel-row-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin-bottom: 4px; }
.carousel-row-desc { font-family: var(--font-sans); font-size: 0.8rem; color: var(--gray); }
.carousel-controls { display: flex; align-items: center; gap: 12px; }
.control-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.control-btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }

.product-carousel {
  display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 10px; scrollbar-width: none;
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-card { text-align: center; flex: 0 0 260px; scroll-snap-align: start; position: relative; }
.product-card .card-link { position: absolute; inset: 0; z-index: 2; }
.product-media { position: relative; height: 300px; overflow: hidden; background: var(--gray-light); margin-bottom: 18px; }
.product-media img { transition: transform 0.8s cubic-bezier(.2,.7,.3,1), opacity 0.5s ease; }
/* Joyas: cambio de imagen al pasar el cursor */
.product-media .img-default { transform: scale(1); }
.product-media .img-hover { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); }
.product-card:hover .img-default { opacity: 0; }
.product-card:hover .img-hover { opacity: 1; }
/* Perfumes: solo zoom sutil, sin cambio de imagen */
.product-media > img:not(.img-default):not(.img-hover) { transform: scale(1); }
.product-card:hover .product-media > img:not(.img-default):not(.img-hover) { transform: scale(1.06); }
.product-tag {
  display: block; font-family: var(--font-sans); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px;
}
.product-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; }
.product-meta { font-family: var(--font-sans); font-size: 0.75rem; color: var(--gray); }
.bijou-bs-equivalent { display: block; font-family: var(--font-sans); font-size: 0.72rem; color: var(--gray); margin-top: 2px; }

/* Quiénes Somos (teaser en el Home): mosaico de fotos escalonado a la izquierda + texto
   a la derecha — evita tanto el hueco de altura desigual como el parecido con el banner
   de Empresas, dándole un aire más editorial/artístico. */
.home-story {
  padding: 40px 24px 130px;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 0.8fr; gap: 70px; align-items: center;
}
/* Mosaico con superposición real: una foto tapa la esquina de otra, con sombra para
   dar sensación de profundidad, como fotos apiladas */
.home-story-collage { position: relative; height: 560px; }
.collage-item { position: absolute; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.18); }
.collage-main { top: 0; left: 0; width: 72%; height: 460px; z-index: 1; }
.collage-accent-1 {
  top: -30px; right: 0; width: 46%; height: 260px; z-index: 2;
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}
.collage-accent-2 {
  bottom: 0; left: 34%; width: 48%; height: 220px; z-index: 3;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.home-story-text h2 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; margin-bottom: 18px; }
.home-story-text p { font-family: var(--font-display); font-size: 1rem; color: var(--gray); line-height: 1.7; margin-bottom: 20px; }
@media (max-width: 900px) {
  .home-story { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .home-story-collage { height: 420px; }
  .collage-main { height: 340px; }
  .collage-accent-1 { height: 190px; }
  .collage-accent-2 { height: 160px; }
}

/* Business banner */
.business-banner { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.business-media { position: absolute; inset: 0; }
.business-media img { filter: grayscale(0.3) brightness(0.55); }
.business-content { position: relative; z-index: 2; text-align: center; color: var(--white); max-width: 640px; padding: 0 24px; }
.business-content .eyebrow {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.8rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.business-content h2 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; margin-bottom: 16px; }
.business-sub { font-family: var(--font-sans); font-size: 0.95rem; margin-bottom: 28px; opacity: 0.95; }

/* Rich text */
.rich-text { text-align: center; max-width: 780px; }
.rich-quote { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; font-weight: 400; margin-bottom: 20px; line-height: 1.45; }

/* Caja de Ahorro — banda compacta (no una sección grande como .business-banner). Fondo
   claro a propósito: justo arriba está el banner oscuro de Empresas con su propio botón,
   así que esta banda se distingue en vez de sumarse como "otro banner oscuro con botón". */
.ca-strip {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--white); color: var(--black);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 34px 40px; max-width: 1400px; margin: 0 auto;
}
.ca-strip-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-light); color: var(--gold-dark);
}
.ca-strip-text { flex: 1 1 auto; min-width: 220px; }
.ca-strip-text .eyebrow { text-align: left; margin-bottom: 4px; }
.ca-strip-text h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 4px; }
.ca-strip-text p { font-family: var(--font-sans); font-size: 0.85rem; color: var(--gray); }
.ca-strip-btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .ca-strip { flex-direction: column; text-align: center; padding: 34px 24px; }
  .ca-strip-text .eyebrow { text-align: center; }
}

/* Newsletter */
.newsletter-block { text-align: center; background: var(--gray-light); padding: 110px 24px; }
.subscribe-title { font-family: var(--font-display); max-width: 560px; margin: 0 auto 24px; font-size: 1.3rem; }
.subscribe-form { display: flex; justify-content: center; gap: 10px; max-width: 420px; margin: 0 auto; border-bottom: 1px solid var(--black); padding-bottom: 8px; }
.subscribe-form input { flex: 1; border: none; background: transparent; font-family: var(--font-sans); font-size: 0.9rem; }
.subscribe-form button { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); }
.subscribe-form button:hover { color: var(--gold-dark); }
.subscribe-notice { font-family: var(--font-sans); font-size: 0.85rem; color: var(--green); max-width: 420px; margin: 0 auto; }
.subscribe-notice.is-error { color: #a53030; margin-top: 12px; }

/* Footer */
.site-footer { background: var(--black); color: var(--gray-light); padding: 60px 24px 40px; }
.footer-nav { max-width: 1300px; margin: 0 auto 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h3 { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 16px; }
.footer-col a { font-family: var(--font-sans); font-size: 0.85rem; color: var(--gray-light); padding: 5px 0; opacity: 0.85; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
/* Selector reforzado (.site-footer .footer-logo, no solo .footer-logo): en las páginas
   de WooCommerce (Tienda, producto, carrito, checkout, Mi Cuenta) el body lleva la clase
   "woocommerce-page", y su propio CSS (".woocommerce-page img { height:auto; }") tiene
   más especificidad que un solo ".footer-logo" — sin este refuerzo el logo del footer se
   ve gigante (a tamaño natural de la imagen) en esas páginas. */
.site-footer .footer-logo { display: block; height: 64px; width: auto; margin: 0 auto 18px; object-fit: contain; }
.footer-guarantee { text-align: center; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--gold); margin: 0 auto 30px; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; }
.footer-social { display: flex; gap: 20px; }
.footer-social a { font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.copyright { font-family: var(--font-sans); font-size: 0.72rem; color: var(--gray); }

/* Botón flotante de WhatsApp — visible en toda la web, incluido el checkout, porque en
   la práctica la mayoría de las ventas se terminan cerrando por WhatsApp. */
.wa-float-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float-btn:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(0,0,0,0.3); }
@media (max-width: 560px) {
  .wa-float-btn { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(50px); transition: opacity 1.1s cubic-bezier(.165,.84,.44,1), transform 1.1s cubic-bezier(.165,.84,.44,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .cat-media img, .product-media img, .btn, .link-underline { transition: none !important; }
}

/* Responsive */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  /* El botón de hamburguesa solo alterna la clase .open en JS (ver home.js) — hacía
     falta esta regla para que el menú realmente aparezca en móvil, antes no pasaba nada
     al tocarlo. */
  .main-nav.open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .main-nav.open > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  /* El panel del menú móvil siempre tiene fondo blanco opaco (a diferencia de la barra
     transparente sobre el hero), así que el texto debe ser siempre oscuro aquí — se
     iguala la especificidad de la regla ".header-group.is-transparent .main-nav > ul > li
     > a" (3 clases + 3 elementos) para que esta gane por orden en la cascada, sin
     necesidad de !important. */
  .header-group .main-nav.open > ul > li > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--black); }
  .main-nav.open .mega-menu { display: none; }
  .hamburger { display: flex; }
  .category-split { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 2.4rem; }
}
@media (max-width: 560px) {
  .product-card { flex-basis: 220px; }
  .hero { height: 620px; min-height: 0; }
  .hero-title { font-size: 1.9rem; }
  .trust-bar { gap: 28px; }
  .logo { width: 34px; height: 34px; }
  .logo-full { display: none; }
  .logo-mobile { display: block; }
}