/* ==========================================================
   Dayrise® — hoja de estilos
   Paleta y tipografías del Manual de Identidad (Quinto Piso)
   ========================================================== */

:root{
  /* Paleta de marca (Pantone del manual) */
  --coral:   #E53E50; /* 710 C  */
  --yellow:  #FDC743; /* 1225 C */
  --cream:   #F0E7DA; /* 9224 C */
  --dark:    #402021; /* 4975 C */
  --brown:   #873B21; /* 1685 C */
  --orange:  #FB7F40; /* 164 C  */
  --blue:    #69C3E8; /* 297 C  */
  --olive:   #ACA200; /* 398 C  */
  --pink:    #E88597; /* 701 C  */
  --peach:   #FFDEB5; /* 918 C  */
  --amber:   #D68130; /* 7412 C */
  --magenta: #EC3EA8; /* 232 C  */
  --violet:  #7b6ea8;
  --lime:    #9DBF3B;

  /* Neutros: crema tibio de marca, no gris genérico */
  --paper:   var(--cream);
  --ink:     var(--dark);
  --ink-60:  rgba(64,32,33,.66);
  --ink-40:  rgba(64,32,33,.42);
  --linea:   rgba(64,32,33,.13);
  --tarjeta: #FFFCF7;

  /* Versión suave (fondo de la foto) y fuerte (texto sobre la suave)
     de cada acento. Se eligieron para dar contraste legible en ambos. */
  --peach-suave:#FBEADA;  --peach-fuerte:#8A5A2A;
  --orange-suave:#FDE1D1; --orange-fuerte:#A24E1C;
  --pink-suave:#FBE3E7;   --pink-fuerte:#A14A5A;
  --violet-suave:#E5E1F0; --violet-fuerte:#514578;
  --olive-suave:#EEF0CF;  --olive-fuerte:#6B6600;
  --lime-suave:#E9F0CE;   --lime-fuerte:#5F7714;
  --yellow-suave:#FDF0CF; --yellow-fuerte:#8A6A10;
  --coral-suave:#FBDCDF;  --coral-fuerte:#A82A38;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;
  --sombra: 0 18px 40px -18px rgba(64,32,33,.35);
  --sombra-alta: 0 26px 52px -20px rgba(64,32,33,.45);
  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  /* 'clip' y no 'hidden': recorta el desborde lateral que causaba el panel
     del menú móvil (fijo y desplazado fuera de pantalla) sin crear un
     contenedor de scroll, así el encabezado sticky sigue pegándose. */
  overflow-x:clip;
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,60px); }
.wrap-angosto{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }

h1,h2,h3,h4{
  font-family:'Fredoka','Inter',sans-serif;
  font-weight:600; line-height:1.05; margin:0;
  text-wrap:balance;
}

.script{ font-family:'Caveat',cursive; font-weight:700; }

.eyebrow{
  font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--coral); display:block;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 28px; border-radius:999px; border:none;
  background:var(--dark); color:var(--cream);
  font-weight:700; font-size:.85rem; letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:var(--sombra);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.btn:active{ transform:translateY(-1px) scale(.98); }
.btn-claro{ background:var(--cream); color:var(--dark); }
.btn-linea{ background:transparent; border:2px solid currentColor; box-shadow:none; }

/* ---------------- Encabezado ---------------- */
.encabezado{
  position:sticky; top:0; z-index:100;
  background:rgba(240,231,218,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linea);
}
.encabezado .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.logo img{ height:28px; width:auto; }

.menu ul{ display:flex; gap:30px; list-style:none; }
.menu a{
  font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; position:relative; padding:6px 0;
  color:var(--ink-60); transition:color .25s var(--ease);
}
.menu a:hover, .menu a.activo{ color:var(--ink); }
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--coral); transition:width .3s var(--ease);
}
.menu a:hover::after, .menu a.activo::after{ width:100%; }

.derecha{ display:flex; align-items:center; gap:12px; }

.idioma{
  display:flex; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--linea);
  border-radius:999px; padding:5px;
  font-size:.7rem; font-weight:800; letter-spacing:.05em;
}
.idioma button{
  border:none; background:transparent; padding:6px 12px;
  border-radius:999px; color:var(--ink-40);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.idioma button.activo{ background:var(--dark); color:var(--cream); }

.hamburguesa{
  display:none; background:none; border:none;
  width:42px; height:42px; position:relative;
}
.hamburguesa span, .hamburguesa span::before, .hamburguesa span::after{
  content:""; position:absolute; left:9px; right:9px; height:2px;
  background:var(--dark); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburguesa span{ top:20px; }
.hamburguesa span::before{ top:-7px; }
.hamburguesa span::after{ top:7px; }
.hamburguesa.abierto span{ background:transparent; }
.hamburguesa.abierto span::before{ transform:translateY(7px) rotate(45deg); }
.hamburguesa.abierto span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Portada (video a todo lo ancho) ---------------- */
.portada{
  position:relative;
  min-height:min(78vh, 720px);
  display:grid; align-items:end;
  background:var(--coral); color:var(--cream);
  overflow:hidden;
}
.portada-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
/* Respaldo animado: si el video no carga, los empaques se van alternando
   para que la portada siga teniendo vida. Oculto salvo que se active. */
.portada-respaldo{
  position:absolute; inset:0; z-index:0; display:none;
  background:
    radial-gradient(120% 120% at 24% 18%, rgba(255,255,255,.22), transparent 58%),
    linear-gradient(155deg,#ff8d63,var(--coral) 62%);
}
.portada-respaldo.activo{ display:block; }
.portada-respaldo img{
  position:absolute; top:50%; right:8%;
  width:min(34%, 320px); transform:translateY(-50%) scale(.94);
  opacity:0; filter:drop-shadow(0 22px 30px rgba(0,0,0,.32));
  animation:turnarse 15s ease-in-out infinite;
}
@keyframes turnarse{
  0%,  100%{ opacity:0; transform:translateY(-50%) scale(.94); }
  6%,  18%  { opacity:1; transform:translateY(-52%) scale(1); }
  24%       { opacity:0; transform:translateY(-50%) scale(.98); }
}

/* Velo discreto: solo oscurece la franja baja donde se apoya el texto, para
   que el video se vea casi limpio en el resto del encuadre. */
.portada-velo{
  position:absolute; inset:0; z-index:1;
  /* Dos capas: una franja baja suave y otra del lado del texto. Así el
     titular se lee incluso sobre los fotogramas más claros del video, y la
     mitad derecha del encuadre queda casi sin tocar. */
  background:
    linear-gradient(to right,
      rgba(40,14,15,.66) 0%,
      rgba(40,14,15,.44) 32%,
      rgba(40,14,15,.10) 58%,
      rgba(40,14,15,0)   78%),
    linear-gradient(to top,
      rgba(40,14,15,.55) 0%,
      rgba(40,14,15,.24) 26%,
      rgba(40,14,15,0)   56%);
}
.portada-texto{
  position:relative; z-index:2;
  padding-top:clamp(120px,20vw,300px);
  padding-bottom:clamp(40px,5vw,64px);
  max-width:var(--maxw); width:100%;
}
.portada .eyebrow{
  color:rgba(255,222,181,.9);
  font-size:clamp(1.1rem,1.9vw,1.6rem); line-height:1.1;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
/* Titular contenido: tamaño moderado y sombra suave, para que acompañe al
   video en vez de taparlo. */
.portada h1{
  font-size:clamp(1.9rem,3.9vw,3.1rem);
  font-weight:500;
  color:var(--yellow); margin-top:.3em;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
  max-width:18ch; line-height:1.08;
}
.portada h1 em{
  font-style:normal; color:rgba(240,231,218,.94); display:block;
}
.portada p{
  max-width:44ch; font-size:clamp(.92rem,1.1vw,1.02rem);
  margin:16px 0 26px; color:rgba(240,231,218,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.portada-botones{ display:flex; gap:14px; flex-wrap:wrap; }

/* Botón de sonido: el autoplay solo funciona en silencio, así que se ofrece
   activarlo a mano. */
.sonido{
  position:absolute; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px);
  z-index:3;
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(40,14,15,.6); color:#fff; font-size:1.05rem;
  display:grid; place-items:center;
  backdrop-filter:blur(6px);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.sonido:hover{ background:rgba(40,14,15,.9); transform:scale(1.07); }

/* ---------------- Galería de sabores ---------------- */
.galeria{ background:var(--paper); padding:clamp(50px,6.5vw,86px) 0; }
.galeria-cabeza{ text-align:center; max-width:52ch; margin:0 auto clamp(30px,4vw,46px); }
.galeria-cabeza h2{
  font-size:clamp(1.8rem,3.8vw,2.8rem); color:var(--dark); margin:.3em 0 .35em;
}
.galeria-cabeza p{ margin:0; color:rgba(64,32,33,.72); font-size:.95rem; }
.nuevos-sello{
  font-size:.7rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(64,32,33,.55);
}

.galeria-cuerpo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px); align-items:center;
  max-width:940px; margin:0 auto;
}
.galeria-grande{
  background:var(--accent-suave, var(--peach));
  border-radius:var(--r-lg); padding:clamp(22px,3.5vw,44px);
  aspect-ratio:1/1; display:grid; place-items:center;
  transition:background .45s var(--ease);
  box-shadow:var(--sombra);
}
.galeria-grande img{
  width:100%; height:100%; object-fit:contain;
  transition:opacity .25s var(--ease);
}
.galeria-info h3{ font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--dark); }
.galeria-info p{
  margin:14px 0 24px; color:rgba(64,32,33,.75);
  font-size:.98rem; max-width:38ch;
}

.galeria-minis{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(30px,4vw,46px);
}
.mini{
  border:2px solid transparent; background:var(--accent-suave,#fff);
  border-radius:var(--r-md); padding:8px 10px 10px;
  width:104px; display:grid; gap:4px; justify-items:center;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mini img{ width:100%; aspect-ratio:1/1; object-fit:contain; }
.mini span{
  font-size:.63rem; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color:rgba(64,32,33,.7);
  line-height:1.2; text-align:center;
}
.mini:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.mini.activo{ border-color:var(--dark); transform:translateY(-3px); }

/* ---------------- Comparativa ----------------
   Reconstruye en HTML el cuadro comparativo de la marca: tarjeta crema,
   los dos empaques encabezando sus columnas y la de Dayrise resaltada.
   El verde es el del material original; es el único color de esta hoja que
   no viene del manual de identidad. */
/* ----------------------------------------------------------
   RITMO DE COLOR DE LA PORTADA

   El producto ES la paleta: ocho bolsas de ocho colores. Si las
   secciones también traen color saturado, compiten con el
   producto. La crema manda y el color entra por dosis:

     portada (video)      oscuro
     sabores              crema      <- el color lo ponen los empaques
     beneficios           ROSA 701   <- el momento de color de la página
     comparativa          rosa lavado <- calla para que el verde mande
     cintillo             amarillo   <- acento delgado, no fondo
     recetas              crema
     reseñas              durazno claro
     pie                  oscuro

   DÓNDE VA EL COLOR FUERTE. En beneficios, no en la comparativa.
   Beneficios es una sección emocional: cuatro tarjetas de texto
   corto. Un campo de color ahí no le quita nada a nadie y le da a
   la página su único momento saturado.

   POR QUÉ LA COMPARATIVA VA EN CALMA. Es la sección que sostiene
   una afirmación con números, y una tabla nutrimental se cree
   cuando se ve limpia. Además la columna verde (el verde del
   empaque de Matcha Latte, que es el producto comparado) tiene que
   ser lo más fuerte de esa sección: si el fondo grita, la
   jerarquía se invierte. Sobre un rosa lavado el verde es lo único
   saturado en pantalla, que es exactamente lo que se busca.

   Se quitó la tarjeta que envolvía la tabla: en el resto de la
   página el contenido va directo sobre la sección, y una caja
   flotando sobre color era otro idioma de diseño.

   El amarillo 1225 C queda como acento: es el color de mayor croma
   del manual y no tiene contraste de valor contra el papel, así
   que en campos grandes se come el contenido. Después de una
   sección callada, la tira amarilla por fin funciona como chispazo.
   ---------------------------------------------------------- */
.comparativa{ background:#FBF1F2; }
.comp-tarjeta{ max-width:860px; margin:0 auto; }
.comp-tarjeta h2{
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  text-transform:uppercase; letter-spacing:-.01em;
  text-align:center; margin-bottom:10px;
  color:var(--dark);
}
.comp-copy{
  text-align:center; margin:0 auto clamp(26px,3.4vw,42px);
  max-width:46ch; font-size:.92rem; line-height:1.6;
  color:var(--ink-60);
}

.tabla-comp{
  width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.tabla-comp th, .tabla-comp td{
  padding:15px 10px; text-align:center;
  border-bottom:1px solid rgba(64,32,33,.13);
}
.tabla-comp tbody th{
  text-align:left; font-family:'Inter',sans-serif;
  font-weight:600; font-size:.92rem; color:var(--ink);
  width:34%;
}
.tabla-comp tbody td{ font-weight:600; font-size:.95rem; }
/* La columna de la marca genérica se atenúa: no hace falta señalarla. */
.tabla-comp tbody td.col-otras{ color:var(--ink-40); font-weight:500; }

/* Columna Dayrise: bloque verde continuo. Sobre el café oscuro
   levanta sin necesidad de borde ni sombra. */
.col-dayrise{ background:#7E9E65; color:#fff; }
.tabla-comp tbody tr td.col-dayrise{ color:#fff; }
thead .col-dayrise{ border-radius:14px 14px 0 0; }
tbody tr:last-child .col-dayrise{ border-radius:0 0 14px 14px; }
.col-etiqueta{ border-bottom:none !important; }

.col-cabeza{ padding:18px 12px 14px !important; border-bottom:none !important; }
.col-cabeza img{
  width:min(100%, 138px); height:auto; margin:0 auto 8px;
  filter:drop-shadow(0 10px 18px rgba(64,32,33,.22));
}
.col-cabeza span{
  display:block; font-family:'Fredoka',sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.35;
}
.col-cabeza span em{
  display:block; font-style:normal; font-weight:500;
  font-size:.68rem; opacity:.75; letter-spacing:.05em;
}
.col-otras.col-cabeza img{
  filter:drop-shadow(0 8px 14px rgba(64,32,33,.28))
         drop-shadow(0 1px 0 rgba(64,32,33,.14));
}
.col-otras.col-cabeza span{ color:var(--ink-40); }

.marca{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  border:2px solid currentColor; font-size:.85rem; font-weight:700;
}
.col-dayrise .marca{ color:#fff; }
.col-otras .marca{ color:rgba(64,32,33,.34); }

.pie-tabla{
  margin-top:22px; font-size:.74rem;
  color:var(--ink-40); text-align:center; max-width:56ch;
  margin-left:auto; margin-right:auto;
}

@media (max-width: 560px){
  .tabla-comp th, .tabla-comp td{ padding:11px 6px; font-size:.85rem; }
  .tabla-comp tbody th{ width:38%; font-size:.82rem; }
  .col-cabeza img{ width:min(100%, 88px); }
}

/* ---------------- Reseñas ----------------
   Recetas y reseñas iban las dos en crema y se leían como un solo
   bloque largo. Un rosa muy claro las separa y de paso hace eco
   del rosa 701 C de la comparativa, sin meter un color nuevo. */
.resenas{ background:var(--peach-suave); }
.resenas-parrilla{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,22px);
}
.resena{
  background:var(--tarjeta); border-radius:var(--r-lg);
  padding:26px 24px; margin:0;
  box-shadow:0 14px 30px -22px rgba(64,32,33,.4);
  display:flex; flex-direction:column; gap:12px;
}
.estrellas{ color:var(--yellow); letter-spacing:.12em; font-size:.95rem; }
.resena blockquote{
  margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-60); flex:1;
}
.resena figcaption{
  font-size:.78rem; font-weight:800; letter-spacing:.03em; color:var(--coral);
}

/* ---------------- Cintillo ---------------- */
.cintillo{
  background:var(--yellow); color:var(--dark);
  border-bottom:3px solid var(--dark);
  overflow:hidden; white-space:nowrap;
}
.cintillo-tira{ display:inline-flex; animation:correr 30s linear infinite; }
.cintillo:hover .cintillo-tira{ animation-play-state:paused; }
.cintillo-tira span{
  display:inline-flex; align-items:center;
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:clamp(.82rem,1.5vw,1rem); text-transform:uppercase;
  letter-spacing:.05em; padding:13px 26px;
}
.cintillo-tira span::before{ content:"✦"; margin-right:26px; }
@keyframes correr{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------------- Secciones ---------------- */
.seccion{ padding:clamp(56px,7vw,96px) 0; }
.seccion-cabeza{ max-width:640px; margin:0 0 40px; }
.seccion-cabeza h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.2em; }
.seccion-cabeza p{ color:var(--ink-60); margin:14px 0 0; }
.centro{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------------- Productos ---------------- */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.filtros button{
  border:2px solid var(--dark); background:transparent; color:var(--dark);
  padding:9px 18px; border-radius:999px;
  font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.filtros button:hover{ background:rgba(64,32,33,.08); }
.filtros button.activo{ background:var(--dark); color:var(--cream); }

.parrilla{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,24px);
}
.tarjeta-prod{
  background:var(--tarjeta); border-radius:var(--r-lg);
  padding:16px 16px 22px; text-align:center;
  border:2px solid transparent;
  box-shadow:0 14px 30px -20px rgba(64,32,33,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column;
}
.tarjeta-prod:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-alta);
  border-color:var(--accent, var(--coral));
}
.prod-foto{
  background:var(--accent-suave,var(--peach));
  border-radius:var(--r-md); padding:14px; margin-bottom:16px;
  aspect-ratio:1/1; display:grid; place-items:center;
}
.prod-foto img{ width:100%; height:100%; object-fit:contain; }
.tarjeta-prod h3{ font-size:1.12rem; }
.tarjeta-prod p{
  font-size:.85rem; color:var(--ink-60);
  margin:8px 0 14px; line-height:1.5; flex:1;
}
.etiquetas{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; align-items:center; }
.pastilla{
  font-size:.63rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:var(--accent-suave,var(--peach)); color:var(--accent-fuerte,var(--brown));
}
.peso{
  font-size:.63rem; font-weight:700; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px; border:1px solid var(--linea);
  color:var(--ink-60); font-variant-numeric:tabular-nums;
}
.precio{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem; }

/* ---------------- Ficha de producto ---------------- */
.ficha{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; }
/* La columna izquierda de la ficha: el visor grande y, debajo, la tira
   de miniaturas. Cuando el sabor solo tiene una foto, el <img> va suelto
   y hereda la misma caja. */
.ficha-foto > img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  background:var(--accent-suave,var(--peach));
  border-radius:var(--r-lg); padding:clamp(24px,4vw,48px);
}
.ficha h1{ font-size:clamp(2rem,4vw,3rem); margin:.15em 0 0; }
.ficha .desc{ font-size:1.05rem; color:var(--ink-60); margin:20px 0 26px; }
.ficha-datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px; margin-bottom:26px;
}
.dato{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--r-md); padding:14px 16px;
}
.dato strong{
  display:block; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:1.3rem; font-variant-numeric:tabular-nums;
}
.dato span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-40); font-weight:700; }
.volver{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-60); margin-bottom:24px;
}
.volver:hover{ color:var(--coral); }

/* ---------------- Beneficios ---------------- */
.beneficios{ background:var(--pink); }
.beneficios-parrilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.beneficio{
  background:#FBF6EE; border-radius:var(--r-md);
  padding:clamp(24px,2.4vw,32px); border-top:5px solid var(--coral);
  text-align:center;
}
.beneficio-icono{
  width:clamp(78px,9vw,104px); height:auto;
  margin:0 auto clamp(12px,1.6vw,18px);
}
.beneficio h3{ font-size:clamp(1.02rem,1.4vw,1.22rem); margin-bottom:.5em; }
.beneficio p{ margin:0; font-size:.88rem; color:var(--ink-60); }

/* ---------------- Historia ---------------- */
.oscuro{ background:var(--dark); color:var(--cream); }
.oscuro .eyebrow{ color:var(--yellow); }
.oscuro .seccion-cabeza p{ color:rgba(240,231,218,.72); }
.historia-cita{
  font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--yellow); line-height:1.25; margin:0 0 28px;
  text-wrap:balance;
}
.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:36px; }
.cifra{ background:rgba(240,231,218,.08); border-radius:var(--r-md); padding:20px; }
.cifra strong{
  display:block; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:1.9rem; color:var(--yellow); font-variant-numeric:tabular-nums;
}
.cifra span{ font-size:.78rem; color:rgba(240,231,218,.7); }

/* ---------------- Blog / recetas ---------------- */
.lista-notas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.nota{
  background:var(--tarjeta); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(64,32,33,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.nota:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); }
/* Si el artículo todavía no tiene su foto, el contenedor queda como un
   panel de marca con el sello ✦ — se ve deliberado, no como imagen rota. */
.nota-foto{
  aspect-ratio:16/10; overflow:hidden; position:relative;
  background:linear-gradient(140deg, var(--tono,var(--peach)), var(--cream));
  display:grid; place-items:center;
}
.nota-foto::after{
  content:"✦"; position:absolute; font-size:2.2rem;
  color:rgba(64,32,33,.16); pointer-events:none;
}
.nota-foto img{ position:relative; z-index:1; }
.nota-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.nota:hover .nota-foto img{ transform:scale(1.05); }
.nota-cuerpo{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.nota-tipo{
  font-size:.63rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--coral); margin-bottom:8px;
}
.nota h3{ font-size:1.06rem; line-height:1.2; }
.nota p{ font-size:.85rem; color:var(--ink-60); margin:10px 0 14px; flex:1; }
.nota-fecha{ font-size:.72rem; color:var(--ink-40); font-variant-numeric:tabular-nums; }

/* Artículo */
.articulo-portada{
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:32px;
  aspect-ratio:21/9; position:relative;
  background:linear-gradient(140deg, var(--tono,var(--peach)), var(--cream));
  display:grid; place-items:center;
}
.articulo-portada::after{
  content:"✦"; position:absolute; font-size:3rem;
  color:rgba(64,32,33,.14); pointer-events:none;
}
.articulo-portada img{ position:relative; z-index:1; }
.articulo-portada img{ width:100%; height:100%; object-fit:cover; }
.articulo h1{ font-size:clamp(1.9rem,3.8vw,2.9rem); margin-bottom:14px; }
.articulo-meta{ color:var(--ink-40); font-size:.82rem; margin-bottom:34px; }
.cuerpo{ font-size:1.03rem; line-height:1.75; }
.cuerpo p{ margin:0 0 1.15em; }
.cuerpo h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  margin:1.9em 0 .6em; color:var(--brown);
}
.cuerpo ul, .cuerpo ol{ margin:0 0 1.3em; padding-left:1.3em; }
.cuerpo li{ margin-bottom:.5em; }
.cuerpo ul{ list-style:none; padding-left:0; }
.cuerpo ul li{ position:relative; padding-left:1.5em; }
.cuerpo ul li::before{
  content:"✦"; position:absolute; left:0; color:var(--coral); font-size:.85em; top:.15em;
}
.cuerpo ol{ list-style:none; counter-reset:paso; padding-left:0; }
.cuerpo ol li{ position:relative; padding-left:2.2em; counter-increment:paso; }
.cuerpo ol li::before{
  content:counter(paso); position:absolute; left:0; top:.1em;
  width:1.5em; height:1.5em; border-radius:50%;
  background:var(--coral); color:var(--cream);
  display:grid; place-items:center;
  font-family:'Fredoka',sans-serif; font-size:.75em; font-weight:600;
}

/* ---------------- Puntos de venta / contacto ---------------- */
.contacto-parrilla{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.datos-lista{ display:grid; gap:12px; list-style:none; }
.datos-lista li{
  background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--r-md); padding:16px 20px;
  display:flex; gap:14px; align-items:flex-start;
}
.datos-lista .et{
  font-size:.66rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-40); display:block; margin-bottom:3px;
}
.datos-lista a{ font-weight:600; }
.datos-lista a:hover{ color:var(--coral); }
.icono{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--coral); color:var(--cream);
  display:grid; place-items:center; font-size:.85rem; font-weight:700;
}

.aviso{
  background:var(--dark); color:var(--cream);
  border-radius:var(--r-md); padding:18px 22px;
  font-size:.86rem; display:flex; gap:14px; align-items:flex-start;
  margin-top:26px;
}
.aviso strong{ color:var(--yellow); }

/* ---------------- Pie ---------------- */
.pie{ background:var(--dark); color:rgba(240,231,218,.75); padding:52px 0 30px; }
.pie-parrilla{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px; padding-bottom:34px; border-bottom:1px solid rgba(240,231,218,.14);
}
.pie h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--cream); margin-bottom:14px;
}
.pie ul{ list-style:none; display:grid; gap:9px; }
.pie a{ font-size:.86rem; }
.pie a:hover{ color:var(--yellow); }
.pie-logo img{ height:26px; margin-bottom:14px; }
.pie-abajo{
  display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:22px; font-size:.76rem;
}

/* ---------------- Utilidades ---------------- */
.oculto{ display:none !important; }
.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Aparición al hacer scroll: visible por defecto; solo se esconde si el
   JavaScript confirma que está vivo (clase .js en <html>). Así la página
   nunca queda en blanco si el script no corre. */
.revela{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .revela:not(.visto){ opacity:0; transform:translateY(22px); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .revela:not(.visto){ opacity:1; transform:none; }
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 1080px){
  .parrilla{ grid-template-columns:repeat(3,1fr); }
  .resenas-parrilla{ grid-template-columns:repeat(2,1fr); }
  .beneficios-parrilla{ grid-template-columns:repeat(2,1fr); }
  .pie-parrilla{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .portada{ min-height:min(70vh, 560px); }
  .galeria-cuerpo{ grid-template-columns:1fr; }
  .galeria-info{ text-align:center; }
  .galeria-info p{ margin-left:auto; margin-right:auto; }
  .comp-cuerpo{ grid-template-columns:1fr; }
  .lista-notas{ grid-template-columns:repeat(2,1fr); }
  .ficha{ grid-template-columns:1fr; }
  .contacto-parrilla{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .hamburguesa{ display:block; }
  /* El panel se desvanece en su sitio en lugar de entrar deslizándose.
     Un elemento position:fixed desplazado fuera de pantalla escapa del
     recorte del body y ensanchaba la página en móvil. */
  .menu{
    position:fixed; inset:76px 0 0 0; background:var(--cream);
    opacity:0; visibility:hidden;
    transition:opacity .28s var(--ease), visibility 0s linear .28s;
    padding:32px clamp(20px,6vw,40px); overflow-y:auto;
  }
  .menu.abierto{
    opacity:1; visibility:visible;
    transition:opacity .28s var(--ease), visibility 0s;
  }
  .menu li{
    opacity:0; transform:translateY(10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .menu.abierto li{ opacity:1; transform:none; }
  .menu.abierto li:nth-child(2){ transition-delay:.04s; }
  .menu.abierto li:nth-child(3){ transition-delay:.08s; }
  .menu.abierto li:nth-child(4){ transition-delay:.12s; }
  .menu.abierto li:nth-child(5){ transition-delay:.16s; }
  .menu.abierto li:nth-child(6){ transition-delay:.20s; }
  .menu ul{ flex-direction:column; gap:22px; }
  .menu a{ font-size:1.05rem; }
  .parrilla{ grid-template-columns:repeat(2,1fr); }
  .lista-notas{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .parrilla{ grid-template-columns:1fr; }
  .mini{ width:84px; }
  .resenas-parrilla{ grid-template-columns:1fr; }
  .beneficios-parrilla{ grid-template-columns:1fr; }
  .pie-parrilla{ grid-template-columns:1fr; }
  .articulo-portada{ aspect-ratio:16/10; }
}

/* ==========================================================
   Ficha de producto: galería de fotos, ingredientes y
   declaración nutrimental.
   ========================================================== */

/* --- Visor de fotos, dentro de la ficha --- */
.fotos-visor{
  width:100%; aspect-ratio:1/1;
  border-radius:var(--r-lg);
  background:var(--accent-suave, var(--cream));
  padding:clamp(20px,3vw,38px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.fotos-visor img{
  width:100%; height:100%; object-fit:contain;
  transition:opacity .22s var(--ease);
}
/* Una sola fila que se desliza. Envolviéndose a dos renglones dejaba
   miniaturas huérfanas cuando el sabor tiene 7 u 8 fotos. */
.fotos-tira{
  display:flex; gap:10px; flex-wrap:nowrap;
  overflow-x:auto; scroll-snap-type:x proximity;
  margin:14px 0 0; padding-bottom:6px;
  scrollbar-width:thin;
}
.fotos-tira::-webkit-scrollbar{ height:6px; }
.fotos-tira::-webkit-scrollbar-thumb{
  background:rgba(64,32,33,.22); border-radius:3px;
}
.foto-mini{
  width:70px; height:70px; padding:0; flex:0 0 auto;
  scroll-snap-align:start;
  border:2px solid transparent; border-radius:var(--r-sm);
  background:var(--accent-suave, #FFFCF7); cursor:pointer; overflow:hidden;
  padding:4px;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
/* Los PNG del empaque son transparentes: 'contain' sobre un fondo tenue
   los muestra completos en vez de recortar el centro vacío. */
.foto-mini img{ width:100%; height:100%; object-fit:contain; display:block; }
.foto-mini:hover{ transform:translateY(-2px); }
.foto-mini.activo{ border-color:var(--ink); }

/* --- Acordeón de ingredientes / declaración --- */
.nt-seccion{ background:var(--peach); }
.wrap-medio{
  width:100%; max-width:940px; margin:0 auto; padding:0 clamp(18px,4vw,32px);
}
.nt-caja{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  margin-bottom:14px;
  overflow:hidden;
}
.nt-caja summary{
  list-style:none; cursor:pointer;
  padding:20px clamp(18px,3vw,28px);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--titulo, inherit);
  font-size:clamp(1.05rem,2vw,1.3rem);
  font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em;
}
.nt-caja summary::-webkit-details-marker{ display:none; }
/* El signo + gira a × al abrir. Es puro CSS: no depende del JS. */
.nt-caja summary::after{
  content:"+"; font-size:1.5rem; line-height:1; color:var(--ink-40);
  transition:transform .25s var(--ease);
}
.nt-caja[open] summary::after{ transform:rotate(45deg); }
.nt-cuerpo{ padding:0 clamp(18px,3vw,28px) 24px; }
.nt-ingredientes{
  margin:0; font-size:.9rem; line-height:1.75; color:var(--ink);
  letter-spacing:.01em;
}
.nt-alergenos{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--linea);
  font-size:.82rem; color:var(--ink-60);
}
.nt-cuerpo-tabla{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(20px,3vw,34px); align-items:start;
}
.nt-tabla-envoltura{ overflow-x:auto; }

.tabla-nt{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tabla-nt thead th{
  text-align:right; padding:0 0 10px; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-60);
}
.tabla-nt th, .tabla-nt td{
  padding:9px 0; border-bottom:1px solid var(--linea);
  text-align:left; font-weight:400; color:var(--ink);
}
.tabla-nt td{ text-align:right; white-space:nowrap; padding-left:14px; }
.tabla-nt tr.sangria th{ padding-left:20px; color:var(--ink-60); }
.tabla-nt tr.fuerte th, .tabla-nt tr.fuerte td{ font-weight:700; }
.tabla-nt tr.total th, .tabla-nt tr.total td{
  border-bottom:none; border-top:2px solid var(--ink); padding-top:13px;
}
.tabla-nt tr.grupo th{
  padding-top:20px; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-60);
  border-bottom:2px solid var(--linea);
}

.nt-arte{ margin:0; }
.nt-arte img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-sm); border:1px solid var(--linea);
}
.nt-arte figcaption{
  margin-top:8px; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-40); text-align:center;
}
.nt-aviso{
  margin:0; padding:14px clamp(18px,3vw,28px) 20px;
  font-size:.78rem; color:var(--ink-40);
}

/* La parrilla de sabores vive dentro de la sección de la galería. */
.galeria-parrilla{ margin-top:clamp(36px,5vw,58px); }

@media (max-width:900px){
  .nt-cuerpo-tabla{ grid-template-columns:1fr; }
  .nt-arte{ max-width:420px; margin:0 auto; }
  .foto-mini{ width:56px; height:56px; }
}

/* ==========================================================
   Redes sociales
   Cierra la página antes del pie. Va en crema porque el color
   lo ponen las fotos: seis piezas de la propia marca, cada una
   enlazada al perfil. No se simulan publicaciones ni cifras de
   seguidores; es una invitación a seguir la cuenta.
   ========================================================== */
.redes{ background:var(--paper); padding:clamp(52px,6.5vw,88px) 0; }
.redes-cabeza{ text-align:center; max-width:46ch; margin:0 auto clamp(30px,4vw,44px); }
.redes-cabeza .eyebrow{ color:var(--coral); }
.redes-cabeza h2{
  font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.15em 0 .4em;
  text-transform:uppercase; letter-spacing:-.01em;
}
.redes-cabeza p{ margin:0 0 22px; color:var(--ink-60); font-size:.95rem; }

.btn-ig{ display:inline-flex; align-items:center; gap:9px; }
.btn-ig svg{ flex:0 0 auto; }

.redes-parrilla{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1.2vw,14px);
}
.redes-foto{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-md); background:var(--cream);
  position:relative;
}
.redes-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s var(--ease), filter .3s var(--ease);
}
.redes-foto:hover img{ transform:scale(1.06); }
/* Al pasar el cursor aparece el glifo de Instagram encima. */
.redes-foto::after{
  content:""; position:absolute; inset:0;
  background:rgba(64,32,33,0); transition:background .3s var(--ease);
}
.redes-foto:hover::after{ background:rgba(64,32,33,.22); }

@media (max-width:900px){
  .redes-parrilla{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px){
  .redes-parrilla{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   Puntos de venta — cadenas
   Tarjetas tipográficas, no logotipos: no tenemos los oficiales
   con permiso y no se dibujan imitaciones de una marca ajena.
   El acento de cada tarjeta sale de la paleta Dayrise, así que
   la sección se lee como parte del sitio y no como un mosaico
   de marcas prestadas.
   ========================================================== */
.cadenas{ margin:clamp(28px,3.5vw,40px) 0 clamp(34px,4.5vw,54px); }
.cadenas h2{
  font-size:clamp(1.35rem,2.6vw,1.9rem); margin:0 0 .35em;
  text-transform:uppercase; letter-spacing:-.01em;
}
.cadenas-copy{ margin:0 0 26px; color:var(--ink-60); font-size:.95rem; }
.cadenas-parrilla{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,18px);
}
.cadena{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:26px; min-height:150px;
  padding:24px 22px;
  background:var(--accent-suave); border-radius:var(--r-md);
  border:1px solid transparent;
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease);
}
.cadena:hover{
  transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 16px 32px -20px rgba(64,32,33,.5);
}
.cadena-nombre{
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.15;
  color:var(--ink);
}
.cadena-cta{
  font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-60);
}
.cadena:hover .cadena-cta{ color:var(--ink); }
.cadenas-nota{
  margin:18px 0 0; font-size:.76rem; color:var(--ink-40); max-width:62ch;
}

@media (max-width:700px){
  .cadenas-parrilla{ grid-template-columns:1fr; }
  .cadena{ min-height:0; gap:16px; }
}