/* ============================================================================
   ANCESTRA BONE BROTH — hoja de estilo
   Dirección visual: la etiqueta de botica. Cartela con doble filete dorado y
   banda de guilloche, papel marfil, guirnaldas de laurel, banderola terracota.
   Colores muestreados del arte original de la etiqueta.
   ========================================================================= */

:root{
  /* --- tinta --- */
  --verde:#414A2C;
  --verde-osc:#2C3219;
  --verde-prof:#232815;
  --terracota:#A9502F;
  --terracota-osc:#8C3F22;

  /* --- COLOR DE ACCIÓN (5 ago 2026) ---
     Todo lo que le pide algo al visitante va aquí —la cinta, los botones, los
     sellos de las tarjetas—; el terracota se queda para lo editorial
     —cejillas, banderolas, enlaces de texto—.
     La variable se llama por su FUNCIÓN y no por su color: ya cambió de
     terracota a turquesa y de turquesa a naranja tierra, y un nombre de color
     en el código envejece mal.
     Tono actual: naranja tierra #C2400A. Se eligió subiendo SATURACIÓN y no
     claridad: un ocre más claro se acerca al papel y el botón deja de
     recortarse — es lo que descartó a los amarillos, que se quedaban entre
     1.48 y 2.40 contra el fondo. Este da 4.85 con el texto marfil encima y
     4.72 de separación contra el papel. */
  --accion:#C2400A;
  --accion-osc:#9E3206;
  --oro:#A87F35;
  --oro-claro:#C6A461;
  --oro-palido:#E0CFA4;
  --cafe:#7A6A4F;

  /* --- papel ---
     Más claro y menos amarillo que el papel de la etiqueta (#FCECD4): a pantalla
     completa ese tono se veía apagado. Se conserva la calidez pero sube el
     brillo, y las secciones alternas mantienen una diferencia perceptible. */
  --papel:#FDFAF4;
  --papel-hondo:#F7F1E5;
  --cartela:#FFFEFA;
  --tinta:#3A3323;

  --serif:'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans:'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --ancho:1200px;
  --transicion:.45s cubic-bezier(.22,.61,.36,1);

  /* Guilloche: rayitas finas de altura variable, como el microtexto del marco.
     Hay versión horizontal y vertical para cerrar el perímetro de la cartela. */
  --gui-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='7'%3E%3Cg fill='%23A87F35'%3E%3Crect x='0' y='1' width='1' height='5'/%3E%3Crect x='2' y='2' width='1' height='3'/%3E%3Crect x='4' y='0' width='1' height='7'/%3E%3Crect x='7' y='2' width='2' height='3'/%3E%3Crect x='11' y='1' width='1' height='5'/%3E%3Crect x='13' y='3' width='1' height='2'/%3E%3Crect x='15' y='0' width='1' height='6'/%3E%3Crect x='18' y='2' width='2' height='4'/%3E%3Crect x='22' y='1' width='1' height='4'/%3E%3Crect x='24' y='3' width='1' height='3'/%3E%3Crect x='26' y='0' width='1' height='6'/%3E%3Crect x='29' y='2' width='2' height='3'/%3E%3Crect x='33' y='1' width='1' height='5'/%3E%3Crect x='35' y='3' width='1' height='2'/%3E%3Crect x='37' y='0' width='1' height='7'/%3E%3Crect x='40' y='2' width='2' height='3'/%3E%3Crect x='44' y='1' width='1' height='4'/%3E%3Crect x='46' y='3' width='1' height='3'/%3E%3Crect x='48' y='0' width='1' height='6'/%3E%3Crect x='51' y='2' width='2' height='4'/%3E%3Crect x='55' y='1' width='1' height='5'/%3E%3C/g%3E%3C/svg%3E");
  --gui-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='58'%3E%3Cg fill='%23A87F35'%3E%3Crect y='0' x='1' height='1' width='5'/%3E%3Crect y='2' x='2' height='1' width='3'/%3E%3Crect y='4' x='0' height='1' width='7'/%3E%3Crect y='7' x='2' height='2' width='3'/%3E%3Crect y='11' x='1' height='1' width='5'/%3E%3Crect y='13' x='3' height='1' width='2'/%3E%3Crect y='15' x='0' height='1' width='6'/%3E%3Crect y='18' x='2' height='2' width='4'/%3E%3Crect y='22' x='1' height='1' width='4'/%3E%3Crect y='24' x='3' height='1' width='3'/%3E%3Crect y='26' x='0' height='1' width='6'/%3E%3Crect y='29' x='2' height='2' width='3'/%3E%3Crect y='33' x='1' height='1' width='5'/%3E%3Crect y='35' x='3' height='1' width='2'/%3E%3Crect y='37' x='0' height='1' width='7'/%3E%3Crect y='40' x='2' height='2' width='3'/%3E%3Crect y='44' x='1' height='1' width='4'/%3E%3Crect y='46' x='3' height='1' width='3'/%3E%3Crect y='48' x='0' height='1' width='6'/%3E%3Crect y='51' x='2' height='2' width='4'/%3E%3Crect y='55' x='1' height='1' width='5'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

/* Texto que sólo leen los lectores de pantalla y los buscadores. Se usa cuando
   lo que se ve es una ilustración con el texto dentro: la imagen no se puede
   leer en voz alta, así que el mismo contenido va aquí. No es display:none —
   eso lo borraría también para ellos. */
.solo-lectores{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* El desplazamiento deja libre la barra superior fija (cinta + menú), para que
   al saltar a una sección su título no quede tapado. */
html{scroll-behavior:smooth; scroll-padding-top:124px}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(16px,1.02vw + 13px,18px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

h1,h2,h3,h4{
  font-family:var(--serif); font-weight:500;
  color:var(--verde); line-height:1.14; letter-spacing:.01em;
  margin:0; text-wrap:balance;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* La textura de papel multiplica, o sea oscurece: a .05 apagaba el fondo. */
.grano{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999; opacity:.03; mix-blend-mode:multiply;
}
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}
.ico,.orn{fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ======================= CARTELA (el marco de la etiqueta) =================
   Filetes concéntricos + banda de guilloche cerrando el perímetro.         */
.cartela{
  position:relative;
  background:var(--cartela);
  border:2px solid var(--oro);
  border-radius:clamp(16px,2.2vw,30px);
  box-shadow:0 40px 70px -55px rgba(60,45,20,.55);
}
.cartela__gui{
  position:absolute; inset:clamp(8px,1.1vw,13px);
  border-radius:clamp(10px,1.6vw,20px);
  pointer-events:none; opacity:.8;
  background-image:var(--gui-h), var(--gui-h), var(--gui-v), var(--gui-v);
  background-position:top center, bottom center, left center, right center;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:auto 7px, auto 7px, 7px auto, 7px auto;
}
/* Filete por fuera y por dentro de la banda de guilloche */
.cartela__gui::before,
.cartela__gui::after{
  content:''; position:absolute; border:1px solid var(--oro);
  border-radius:inherit; pointer-events:none;
}
.cartela__gui::before{inset:-4px; opacity:.6}
.cartela__gui::after{inset:8px; opacity:.34}

/* Cartela sobre fondo oscuro */
.cartela--noche{background:transparent; border-color:var(--oro-claro); box-shadow:none}
.cartela--noche .cartela__gui{opacity:.5}

/* ============================ TIPOGRAFÍA ============================ */
.cejilla{
  font-family:var(--sans); font-size:.86rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--terracota); margin:0 0 1.2rem;
}
.cejilla--oro{color:var(--oro-claro)}

/* «CALDO DE HUESO CONCENTRADO»: versalitas apretadas, como en la etiqueta */
.rotulo{
  font-family:var(--serif); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta); line-height:1.2;
}

.divisor{display:block; width:min(340px,72%); margin:1.4rem auto; opacity:.95}
.divisor--izq{margin-left:0}

/* Ilustración de montañas con sol. Va más grande que el remate de trazo que
   había antes: con tanto detalle, a 60 px no se leería. */
.remate{display:block; width:clamp(150px,17vw,230px); margin:0 auto}

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  cursor:pointer; padding:.95em 1.9em;
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:3px;
  transition:background var(--transicion), color var(--transicion),
             border-color var(--transicion), transform .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--sol{background:var(--accion); color:#FDF6EA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -12px rgba(140,63,34,.8)}
.btn--sol:hover{background:var(--accion-osc)}
.btn--linea{border-color:var(--oro); color:var(--verde); background:transparent}
.btn--linea:hover{background:rgba(168,127,53,.1); border-color:var(--verde)}
/* Texto casi negro y no #241F12: con aquel el contraste sobre el dorado se
   quedaba en 4.49, justo por debajo del mínimo de 4.5. */
.btn--oro{background:var(--oro); color:#161206; box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn--oro:hover{background:var(--oro-claro)}
.btn--fantasma{border-color:rgba(224,207,164,.5); color:#F0E7D2; background:transparent}
.btn--fantasma:hover{border-color:var(--oro-palido); background:rgba(224,207,164,.12)}

.enlace{color:var(--terracota); text-decoration:none; cursor:pointer;
  border-bottom:1px solid rgba(169,80,47,.35); transition:border-color var(--transicion)}
.enlace:hover{border-color:var(--terracota)}

/* ============================ BANDEROLA (listón) ==========================
   El listón terracota de la etiqueta, en CSS, para textos variables.       */
.banderola{
  position:relative; display:inline-block;
  background:var(--terracota); color:#FBF2E3;
  padding:.5em 2.4em;
  font-family:var(--serif); font-size:.75rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.banderola::before,
.banderola::after{
  content:''; position:absolute; top:0; bottom:0; width:14px;
  background:var(--terracota-osc);
}
.banderola::before{left:-13px; clip-path:polygon(100% 0,100% 100%,0 100%,42% 50%,0 0)}
.banderola::after{right:-13px; clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%)}
.banderola--oro{background:var(--oro); color:#241F12}
.banderola--oro::before,.banderola--oro::after{background:#8A6728}

/* ============================ BARRA SUPERIOR ============================
   La cinta y el menú se quedan pegados arriba al bajar por la página. Van
   juntos en un contenedor pegajoso en vez de pegar cada uno por su cuenta:
   así no hay que calcular a mano el desplazamiento del menú según la altura
   de la cinta, que se descuadra si cambia el tamaño del texto.           */
.barra-superior{position:sticky; top:0; z-index:100}

/* ============================ CINTA SUPERIOR ============================
   El bucle es continuo porque el contenido del HTML va duplicado y la
   animación recorre exactamente el 50% de la pista: al terminar, la segunda
   mitad queda justo donde empezaba la primera y no se ve ningún corte.    */
.cinta{
  /* Mismo color de acción del botón Comprar (.btn--sol) y su mismo color de
     texto: la cinta y la llamada a la acción se leen como una sola familia. */
  background:var(--accion);
  color:#FDF6EA;
  overflow:hidden; padding:.52rem 0;
  /* El filete de abajo vuelve a un oscuro CÁLIDO, afinado al naranja tierra.
     El frío que llevaba era para el turquesa y sobre naranja se ensucia. */
  border-bottom:1px solid rgba(84,24,4,.42);
}
.cinta__pista{
  display:flex; align-items:center; gap:1.5rem;
  width:max-content;
  animation:desliza 42s linear infinite;
}
.cinta__pista span{
  font-size:.72rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap;
}
.cinta__pista i{font-style:normal; font-size:.48rem; opacity:.55}

/* ============================ NAV ============================ */
/* No lleva 'sticky' propio: lo aporta .barra-superior, que lo envuelve junto
   con la cinta para que los dos queden fijos. */
.nav{
  background:rgba(250,243,229,.92);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid rgba(168,127,53,.28);
  transition:box-shadow var(--transicion);
}
.nav.esta-abajo{box-shadow:0 10px 28px -22px rgba(58,51,35,.7)}
.nav__caja{
  max-width:var(--ancho); margin:0 auto;
  padding:.7rem clamp(1.1rem,4vw,2.5rem);
  display:flex; align-items:center; gap:2rem;
}
.nav__logo{flex:0 0 auto; line-height:0}
.nav__logo img{width:clamp(132px,16vw,168px)}
.nav__links{display:flex; gap:2rem; margin-left:auto}
.nav__links a{
  color:var(--verde); text-decoration:none; position:relative; padding-bottom:3px;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
}
.nav__links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accion); transition:width var(--transicion)}
.nav__links a:hover::after{width:100%}
.nav__cta{padding:.68em 1.5em; font-size:.72rem}
.nav__menu{display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:40px; height:34px; padding:6px}
.nav__menu span{display:block; height:1.5px; background:var(--verde); margin:6px 0;
  transition:transform var(--transicion), opacity var(--transicion)}
.nav__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.menu-movil{display:none; flex-direction:column;
  padding:0 clamp(1.1rem,4vw,2.5rem) 1.4rem; border-top:1px solid rgba(168,127,53,.22)}
.menu-movil a{color:var(--verde); text-decoration:none; padding:.85rem 0;
  font-size:.84rem; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid rgba(168,127,53,.14)}
/* El 'color' de .menu-movil a le ganaba al del botón y dejaba el texto de
   "Comprar" en verde sobre verde-turquesa: 1.86 de contraste, ilegible.
   Venía de antes; se notó al medir con el color nuevo. */
.menu-movil .btn{margin-top:1rem; border-bottom:0}
.menu-movil .btn--sol{color:#FDF6EA}
.menu-movil.abierto{display:flex}

/* ==================== BANNER PRINCIPAL DE BIENVENIDA ====================
   A lo ancho de toda la página y SIN recorte: el alto sale de la proporción de
   la ilustración (3:1), así no se corta nada ni arriba, ni abajo, ni a los
   lados —el filete dorado que enmarca la ilustración llega completo—. El fondo
   empata con el papel de la propia ilustración para que no se note el borde
   mientras carga.
   A 3:1 la ilustración ya cabe entera en la primera pantalla en cualquier
   monitor normal, así que el tope de altura de abajo casi nunca llega a
   activarse; se deja como red de seguridad para ventanas muy anchas y bajitas
   (pantallas ultrapanorámicas) y por si algún día se cambia el arte por uno
   más alto.                                                                */
.banner{
  position:relative; line-height:0;
  background:#F7EFE0;
  border-bottom:1px solid rgba(168,127,53,.45);
}
/* Al entrar, la ilustración se ve COMPLETA sin bajar: se le pone como techo lo
   que queda de pantalla debajo de la barra fija, más un respiro para que asome
   el arranque de la sección siguiente y se note que hay más abajo.
   Con 'contain' la imagen se achica entera en vez de recortarse; si sobra
   ancho, los costados los cubre el papel del fondo de .banner.
   --alto-barra lo mide app.js: la barra no mide igual en todos los anchos.
   El 100vh de la primera línea es el respaldo para navegadores sin svh.   */
.banner img{
  display:block;
  width:100%; height:auto;
  max-height:calc(100vh  - var(--alto-barra,106px) - 2.5rem);
  max-height:calc(100svh - var(--alto-barra,106px) - 2.5rem);
  object-fit:contain;
}

/* ============================ BIENVENIDA ============================ */
.bienvenida{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(2.6rem,5vw,4.4rem) clamp(1.1rem,4vw,2.5rem);
}
.bienvenida__texto{text-align:center; max-width:66ch; margin:0 auto}
.bienvenida__h1{font-size:clamp(1.85rem,3.6vw,2.9rem); margin:.3rem 0 0; color:var(--verde)}

/* Entradilla: la primera frase va sola y un punto más grande, con un renglón de
   aire debajo antes del resto del texto. */
.bienvenida__lead{
  color:var(--verde);
  font-size:clamp(1.32rem,2vw,1.62rem);
  line-height:1.55; max-width:40ch;
  margin:1.5rem auto 0;
}
.bienvenida__sub{
  color:var(--cafe);
  font-size:clamp(1.14rem,1.5vw,1.3rem);
  line-height:1.82; max-width:56ch;
  margin:1.9em auto 0;   /* el renglón de separación */
}
.bienvenida__lead b,
.bienvenida__sub b{color:var(--verde); font-weight:500}

/* ---- Bloque del colágeno ----
   Va debajo del banner de beneficios y reutiliza .bienvenida, así que aquí
   sólo está lo que lo distingue. Sin cejilla ni título: sube un poco el aire
   de arriba para que el divisor no quede pegado al banner. */
.colageno{padding-top:clamp(2.2rem,4vw,3.4rem)}
/* La frase de cierre, con su filete dorado encima: se lee como el sello que
   remata el bloque, no como un párrafo más. */
.colageno__remate{
  margin:1.9em auto 0; max-width:44ch;
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.16rem);
  color:var(--verde); letter-spacing:.04em; line-height:1.5;
}
.colageno__remate::before{
  content:''; display:block; width:64px; height:1px;
  background:rgba(168,127,53,.55); margin:0 auto 1.15rem;
}

/* ============================ BENEFICIOS ============================
   Cada beneficio va en un círculo con filete dorado, en el mismo lenguaje de
   los sellos de la etiqueta.                                             */
.beneficios{
  background:var(--papel-hondo);
  border-top:1px solid rgba(168,127,53,.35);
  border-bottom:1px solid rgba(168,127,53,.35);
}
/* El banner va a lo ancho y sin recorte, como los otros dos de la página. */
.beneficios__banner{width:100%; height:auto; display:block}
/* La versión en texto real sólo aparece en pantallas chicas */
.beneficios__movil{display:none}

/* El bloque .beneficios__cta —el botón "Comprar aquí" bajo el banner— y su
   nota .beneficios__nota se retiraron el 5 ago 2026 junto con el botón. */

/* ================= NO TODOS LOS CALDOS SON IGUALES =================
   Bloque de diferenciación, entre el colágeno y los precios. Mismo patrón que
   beneficios: la ilustración lleva el texto dentro y en pantallas chicas se
   cambia por texto real.
   Va sobre el papel claro para que se despegue del bloque de beneficios, que
   es el papel hondo, y no se lean como una sola franja larga. */
.diferencia{
  background:var(--papel);
  padding:clamp(2.6rem,5vw,4rem) 0 0;
  border-top:1px solid rgba(168,127,53,.28);
}
.diferencia .seccion__cabeza{
  margin-bottom:clamp(1.4rem,2.6vw,2.2rem);
  padding:0 clamp(1.1rem,4vw,2.5rem);
}
.diferencia__banner{width:100%; height:auto; display:block}
.diferencia__movil{display:none}
/* Los cinco puntos en texto real, uno por renglón: los títulos son largos
   ("Sin conservadores, espesantes ni rellenos") y en dos columnas se parten
   en tiras de tres palabras. */
.diferencia__movil{list-style:none; margin:0; padding:0}
.diferencia__movil li{
  padding:1.15rem 0; border-bottom:1px solid rgba(168,127,53,.22);
  text-align:center;
}
.diferencia__movil li:last-child{border-bottom:0}
.diferencia__movil h3{
  font-size:1.02rem; color:var(--verde); margin:0 0 .3rem;
  letter-spacing:.02em;
}
.diferencia__movil p{
  margin:0; font-size:.9rem; color:var(--cafe); line-height:1.6;
}

/* ==================== CERTIFICACIONES (esferas doradas) ====================
   Portadas tal cual del sitio de HC Foods: misma esfera blanca con aro dorado
   y el mismo filtro que lleva los seis logos —de colores distintos entre sí—
   a un solo tono ocre. Sin ese filtro, el rojo de la FDA y el verde de
   SENASICA romperían la paleta de la página; con él parecen medallas de la
   misma serie, que es justo lo que se busca.
   El aro va en el dorado de Ancestra, no en el de HC Foods. */
.certificaciones{
  max-width:var(--ancho); margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding-top:clamp(2.4rem,5vw,3.4rem);
  border-top:1px solid rgba(168,127,53,.28);
  text-align:center;
}
.certificaciones__titulo{
  font-size:clamp(1.15rem,2.2vw,1.5rem); margin:0 0 .9rem;
}
.certificaciones__intro{
  max-width:52ch; margin:0 auto clamp(2rem,4vw,2.8rem);
  color:var(--cafe); font-size:.95rem;
}
.certificaciones__intro b{color:var(--verde); font-weight:500}

/* Rejilla y no flex-wrap: dejándolo fluir, en tabletas caían cinco arriba y
   uno solo abajo, que se lee como un error de maquetación. Con columnas fijas
   son seis en fila en escritorio y dos filas parejas de tres en lo demás. */
.sellos{
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(6,auto);
  justify-content:center; align-items:start;
  gap:clamp(1.4rem,3vw,2rem);
}
@media (max-width:820px){ .sellos{grid-template-columns:repeat(3,auto)} }
.sello{
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  width:6rem; text-align:center;
}
.sello__aro{
  display:grid; place-items:center;
  width:6rem; height:6rem; border-radius:50%;
  background:#FFFDF8; box-shadow:0 0 0 2px var(--oro);
  overflow:hidden;
}
.sello__img{
  width:4rem; height:4rem; object-fit:contain;
  /* Los tres logos oficiales llegan a todo color; esto los deja del mismo ocre
     que los tres sellos dibujados, sin tener que reeditar las imágenes. */
  filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.02);
}
/* El de la FDA trae mucho aire alrededor del círculo, así que se agranda para
   que ópticamente pese lo mismo que los demás. */
.sello__img--grande{width:5.25rem; height:5.25rem}
.sello__nombre{
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cafe);
  line-height:1.3;
}

/* El icono de cada beneficio en la lista de celular. Son los MISMOS de la
   ilustración, recortados de ella (ver preparar-banner.ps1): así la versión de
   celular no inventa un lenguaje visual nuevo, usa el que ya existe.
   Sólo se ven en pantallas chicas, que es donde la ilustración se oculta. */
.beneficio__ico{display:none}
/* Los óvalos completos, con su texto dentro. Sólo en pantallas chicas. */
.beneficio__ovalo{display:none}

/* Atajo a la tienda: oculto por defecto, sólo se enciende en celular (ver el
   bloque de 900 px más abajo). */
.atajo-movil{display:none}

/* Ocho beneficios CON descripción, en una sola columna. En dos columnas los
   textos quedan en tiras de siete u ocho caracteres y dejan de leerse.
   Cada uno se separa del siguiente con el filete dorado de la casa.
   Los círculos con ícono se retiraron: los cinco iconos del SVG correspondían
   a los beneficios anteriores y ninguno describe a estos. */
.beneficios__lista{
  list-style:none; padding:0;
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:34rem; margin:0 auto; text-align:left;
}
.beneficio{
  padding:1.05rem 0;
  border-bottom:1px solid rgba(168,127,53,.22);
}
.beneficio:last-child{border-bottom:0}
.beneficio p{
  margin:.3rem 0 0; font-size:.9rem; line-height:1.6; color:var(--cafe);
}
.beneficio__circulo{
  display:grid; place-items:center;
  width:clamp(94px,9vw,116px); aspect-ratio:1;
  margin:0 auto 1.3rem;
  border-radius:50%;
  background:var(--cartela);
  border:1px solid var(--oro);
  box-shadow:inset 0 0 0 5px rgba(253,247,234,.9),
             inset 0 0 0 6px rgba(168,127,53,.34),
             0 16px 28px -22px rgba(70,55,20,.6);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.beneficio:hover .beneficio__circulo{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 5px rgba(253,247,234,.9),
             inset 0 0 0 6px rgba(168,127,53,.5),
             0 22px 32px -20px rgba(70,55,20,.65);
}
.beneficio__circulo .ico{
  width:46%; height:46%;
  stroke:var(--terracota); stroke-width:1.35; fill:none;
}
.beneficio h3{font-size:1.02rem; letter-spacing:.03em; margin:0; line-height:1.35}

/* La usa la cinta dorada de arriba. NO borrar al quitar marquesinas. */
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ============================ SECCIONES ============================ */
.seccion{max-width:var(--ancho); margin:0 auto;
  padding:clamp(3.6rem,7vw,6.5rem) clamp(1.1rem,4vw,2.5rem)}
.seccion__cabeza{max-width:60ch; margin:0 auto clamp(2.4rem,4.5vw,3.6rem); text-align:center}
.seccion__cabeza h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
.seccion__intro{color:var(--cafe); margin-top:1.2rem; font-size:1.02rem}


/* ============================ FAQ ============================ */
.faq__lista{max-width:820px; margin:0 auto}
.faq__item{border-bottom:1px solid rgba(168,127,53,.32)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  cursor:pointer; list-style:none; padding:1.45rem 0;
  font-family:var(--serif); font-size:1.04rem; color:var(--verde);
  transition:color var(--transicion);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:''; flex:0 0 auto; width:11px; height:11px;
  border-right:1.5px solid var(--terracota); border-bottom:1.5px solid var(--terracota);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--transicion)}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__item summary:hover{color:var(--terracota)}
.faq__cuerpo{padding:0 0 1.6rem; max-width:66ch; color:var(--cafe); font-size:.94rem}
.faq__cuerpo b{color:var(--verde); font-weight:500}

/* ============================ CIERRE ============================ */
/* Bloque compacto a propósito (2026-07-30): antes ocupaba casi 480 px de alto en
   escritorio y se comía una pantalla entera. Todo aquí —relleno, escudo, título,
   texto y remate— está a la mitad de lo que medía. */
/* La ilustración de comentarios es de papel, así que el cierre dejó de ser
   verde oscuro (30 jul – 4 ago 2026) para que la imagen se funda con la
   sección y no se vea un recuadro claro pegado sobre el verde. */
.cierre{
  position:relative; overflow:hidden;
  background:var(--papel-hondo); color:var(--cafe); text-align:center;
  border-top:1px solid rgba(168,127,53,.3);
  padding:0 0 clamp(2.2rem,4vw,3.2rem);
}
/* El remate va más chico aquí que en el resto: si no, este bloque se alarga */
.cierre .remate{width:clamp(58px,5.6vw,80px); margin-top:.55rem !important}
/* Las guirnaldas de SVG se retiran: la ilustración de comentarios ya trae su
   propio follaje en las cuatro esquinas y encimarlas ensuciaba el bloque. */
.cierre__guirnalda{display:none}
.cierre__caja{
  position:relative; z-index:2; max-width:640px; margin:0 auto;
  padding:clamp(2rem,4vw,3rem) clamp(1.1rem,4vw,2.5rem) 0;
}
/* Sin filtros: se usa orn-wordmark-claro.png, ya en tono marfil. Invertir con
   CSS delataba el alfa residual del keying como un recuadro claro. */
.cierre__wordmark{width:min(44%,150px); margin:0 auto .5rem; opacity:.95}
.cierre__h2{color:var(--verde); font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:.03em}
.cierre__p{color:var(--cafe); margin:.45rem auto .8rem; max-width:40ch; font-size:.9rem}
.cierre__botones{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center}

/* En escritorio el título y la bajada ya van DENTRO de la ilustración, así que
   los de texto se ocultan para no leerlos dos veces. El h2 no se borra: se deja
   accesible para lectores de pantalla y buscadores, que no ven la imagen. */
@media (min-width:901px){
  .cierre__caja{padding:0}
  .cierre__wordmark,.cierre__p{display:none}
  .cierre__h2{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
}

/* ---- Caja de mensaje ----
   Ya no se esconde tras un "Escribir un mensaje": la ilustración dibuja la caja
   y esconderla dejaría una caja de adorno que no se puede escribir. */
.mensaje__form{display:flex; flex-direction:column; gap:.9rem; align-items:center}
.mensaje__etiqueta{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cafe); align-self:flex-start;
}
/* Estado base = pantallas chicas, donde la ilustración se oculta y esto vuelve
   a ser una caja de texto normal sobre papel. */
.mensaje__texto{
  width:100%; resize:vertical;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(168,127,53,.45); border-radius:3px;
  padding:.85rem 1rem;
  font-family:var(--sans); font-size:.95rem; line-height:1.6;
  color:var(--verde);
}
.mensaje__texto::placeholder{color:#9A8E77}
.mensaje__texto:focus{
  outline:none; border-color:var(--oro); background:#FFF;
}
.mensaje__enviar{align-self:center; min-width:11rem}
.mensaje__aviso{
  margin:0; min-height:1.2em;
  font-size:.82rem; color:var(--terracota-osc);
}

/* ---- Ilustración de comentarios con el campo real encima ----
   La caja de texto viene DIBUJADA en la ilustración. El <textarea> de verdad se
   monta justo dentro de ella, transparente y sin borde, para que se vea el
   filete punteado del dibujo y aun así se pueda escribir.
   Las medidas salen del original de 2172x724: la caja pintada va de x 612 a
   1595 y de y 415 a 623. En porcentaje —no en píxeles— para que el campo siga
   a la imagen a cualquier ancho de pantalla:
     izquierda 612/2172 = 28.18%      arriba 415/724 = 57.32%
     ancho     983/2172 = 45.26%      alto   208/724 = 28.73%
   Si se cambia la ilustración hay que volver a medir estos cuatro números. */
/* Sin 'line-height:0' aquí: la ilustración ya va en display:block y no deja
   hueco de línea, y ponerlo aplastaba la etiqueta "Tu mensaje" contra el
   párrafo de arriba en pantallas chicas. */
.comentarios{position:relative; width:100%}
.comentarios__arte{display:block; width:100%; height:auto}

@media (min-width:901px){
  .comentarios .mensaje__etiqueta{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
  .comentarios .mensaje__texto{
    position:absolute;
    left:28.18%; top:57.32%; width:45.26%; height:28.73%;
    margin:0; padding:.9% 1.5%;
    background:transparent; border:0; border-radius:0;
    resize:none; overflow:auto; text-align:left;
    font-size:clamp(12px,1.02vw,18px); line-height:1.55;
  }
  .comentarios .mensaje__texto:focus{background:rgba(255,255,255,.5)}
  /* El foco necesita marca visible: sin borde propio, se dibuja sobre el
     filete punteado del dibujo. */
  .comentarios .mensaje__texto:focus-visible{outline:2px solid var(--oro); outline-offset:0}
  .mensaje__enviar{margin-top:.4rem}
}
@media (max-width:900px){
  /* A este ancho el texto de la ilustración ya no se lee y la caja dibujada
     quedaría diminuta: se oculta y el formulario vuelve a ser normal. */
  .comentarios__arte{display:none}
  /* Sin la ilustración, la etiqueta y el campo se apilan solos. */
  .comentarios{display:flex; flex-direction:column; gap:.45rem; align-items:flex-start}
  .mensaje__form{
    max-width:34rem; margin:0 auto;
    padding:0 clamp(1.1rem,4vw,2.5rem);
  }
}

/* ========================== PRESENTACIONES ==========================
   Volvió la sección de precios (5 ago 2026) con las tres cajas reales. Las
   tarjetas las pinta el paso 3 de app.js desde config.js — aquí sólo va el
   aspecto. Mismo lenguaje de la etiqueta: papel, filete dorado y un sello
   terracota para la caja destacada.                                      */
/* Los aires se apretaron (5 ago 2026) para que las tres tarjetas y la
   suscripción se vean juntas sin tanto desplazamiento. */
.precios{
  background:var(--papel);
  border-top:1px solid rgba(168,127,53,.28);
  padding:clamp(2rem,3.6vw,2.9rem) clamp(1.1rem,4vw,2.5rem);
  text-align:center;
}
.precios__caja{max-width:var(--ancho); margin:0 auto}
/* Frase de entrada, encima del título. Misma tipografía que el remate del
   bloque de colágeno ("Fuente natural de péptidos…"): serif, con el mismo
   espaciado de letra, para que las dos frases de la página que rematan un
   bloque se lean como la misma voz. */
.precios__lema{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.16rem);
  color:var(--verde); letter-spacing:.04em; line-height:1.5;
  max-width:38ch; margin:0 auto .9rem;
}
/* Más chico que el divisor de las otras secciones: aquí abre un encabezado,
   no separa dos bloques distintos. */
.precios__divisor{width:min(230px,52%); margin:0 auto .85rem}
.precios__h2{
  font-size:clamp(1.55rem,2.8vw,2.1rem); color:var(--verde);
  margin:.25rem 0 .55rem;
}
/* La cejilla aquí va DEBAJO del título, como bajada: hereda el estilo de las
   etiquetas de sección pero sin su margen inferior de 1.2rem, que estaba
   pensado para separarla de un título que venía después. */
.precios__bajada{margin:0}
.precios__lista{
  display:grid; gap:clamp(1.1rem,2.4vw,1.9rem);
  grid-template-columns:repeat(3,1fr); align-items:stretch;
  /* Hueco para la parte de la foto que se sale por arriba de la tarjeta.
     Medido: sobresale 88 px en una ventana de 1440. Con 6vw (86 px) el título
     "Tres formas de empezar" quedaba tapado por 5 px. */
  margin-top:clamp(4rem,7.4vw,6.2rem);
}
.paquete{
  position:relative; display:flex; flex-direction:column; align-items:center;
  background:var(--papel-hondo);
  border:1px solid rgba(168,127,53,.35); border-radius:4px;
  /* Sin relleno arriba: ese espacio lo ocupa la foto, que sube y desborda. */
  padding:0 clamp(1rem,2vw,1.5rem) clamp(1.4rem,2.5vw,1.9rem);
  overflow:visible;
}
.paquete--destacado{
  border-color:var(--oro);
  box-shadow:0 18px 40px -30px rgba(58,51,35,.8);
}
/* El sello va montado sobre el filete de arriba, como el "Más pedido" de la
   etiqueta. Necesita el borde del papel detrás para que no se lea el filete
   cruzándolo. */
/* El sello se mudó del centro a la esquina derecha: el centro del borde
   superior lo ocupa ahora la foto que sobresale. El z-index lo mantiene por
   encima de ella. */
.paquete__sello{
  position:absolute; top:-.72rem; right:.8rem; z-index:3;
  background:var(--accion); color:#FDF6EA;
  font-family:var(--sans); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.36em 1em; border-radius:2px; white-space:nowrap;
}
/* La foto SE SALE del marco (6 ago 2026): crece por encima del ancho de la
   tarjeta y sube con margen negativo hasta romper el filete de arriba.
   La sombra proyectada no es decoración: sin ella el recorte no se lee como
   que flota, sino como que está mal pegado.
   Las tres fotos comparten encuadre, así que con darles el mismo ancho la caja
   se ve del mismo tamaño en las tres tarjetas. */
.paquete__foto{
  width:116%; max-width:none; height:auto;
  margin:-27% -8% .5rem;
  filter:drop-shadow(0 20px 22px rgba(58,51,35,.30));
}
.paquete__nombre{font-size:clamp(1.15rem,1.9vw,1.4rem); margin:.2rem 0 .15rem}
.paquete__piezas{
  font-family:var(--sans); font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--cafe); margin:0 0 .9rem;
}
.paquete__precio{
  font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.7rem);
  color:var(--verde); line-height:1; margin:0;
}
/* Sin uso desde el 17 ago 2026: se quitó el precio por pieza de las tarjetas.
   La regla se queda porque devolverlo es descomentar una línea en app.js. */
.paquete__unidad{font-size:.8rem; color:var(--oro); margin:.4rem 0 0}
/* El envío se anuncia aquí, discreto pero visible: enterarse del costo hasta
   el final es la razón número uno por la que se abandona un pedido. */
/* El envío cierra el bloque de cifras y ya no le sigue la descripción, así que
   necesita su propio aire antes del botón. */
.paquete__envio{font-size:.74rem; color:var(--cafe); margin:.25rem 0 1.3rem}
/* Cuando el envío va incluido deja de ser un costo y pasa a ser una ventaja:
   se pinta en el color de acción y con algo más de cuerpo para que se note. */
.paquete__envio--gratis{
  color:var(--accion); font-weight:500; letter-spacing:.03em;
}
/* Ahora abre la tarjeta, ya no la cierra: los márgenes se invirtieron para que
   respire por debajo y quede pegada a la foto por arriba. */
.paquete__desc{
  font-size:.86rem; color:var(--cafe); max-width:24ch;
  margin:0 0 .55rem; line-height:1.6;
}
/* 'margin-top:auto' alinea los tres botones a la misma altura aunque las
   descripciones tengan distinto número de renglones. */
.paquete__btn{margin-top:auto; min-width:9rem}
/* Deliberadamente discreto: es la salida para quien duda, no debe competir con
   el botón de compra que tiene justo encima. */
.paquete__mas{
  margin-top:.75rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cafe); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid rgba(122,106,79,.35);
  transition:color var(--transicion), border-color var(--transicion);
}
.paquete__mas:hover{color:var(--accion); border-color:var(--accion)}
/* ---- Franja de suscripción: la ILUSTRACIÓN ----
   Lleva dentro el título, las ventajas y el precio; debajo sólo va el botón.
   La imagen ya viene recortada al filete impreso (ver preparar-banner.ps1), así
   que ese filete es el borde. El radio pequeño es el mismo de las tarjetas.
   OJO: el precio "$899 al mes" y el "10% + envío gratis" están PINTADOS en la
   imagen. Si cambian los precios en config.js, la franja de texto se actualiza
   sola pero ESTA NO: hay que rehacer la ilustración. */
.suscripcion-arte{
  margin-top:clamp(.9rem,1.8vw,1.4rem);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
}
/* El tope va por ALTURA, no por ancho: el objetivo es que las tres tarjetas y
   la suscripción quepan juntas en pantalla, y eso depende de cuánto alto queda
   libre, no de cuán ancha sea la ventana. A todo lo ancho (1200 px) la
   ilustración medía 653 px, casi el doble que las tres tarjetas juntas (336),
   y se leía como un segundo bloque en lugar de como el complemento de ellas.
   Atada a 40vh se encoge sola en pantallas bajitas. El mínimo de 240 px evita
   que se haga ilegible; el máximo de 446 evita que domine en monitores altos.
   Sólo aplica en escritorio: por debajo de 900 px la ilustración no se muestra. */
/* La cartela va CALADA (6 ago 2026): su contorno ondulado es la silueta, así
   que aquí no van ni radio de esquina ni sombra de caja —dibujarían un
   rectángulo donde no lo hay—. La sombra va proyectada sobre la forma.
   Ya no hace falta el tope atado a la altura de pantalla que llevaba la
   versión anterior: aquella era 1.838:1 y a todo lo ancho medía 653 px de
   alto; esta es 3:1 y a 1100 px apenas pasa de 366, así que las tarjetas y la
   suscripción caben juntas sin recortarla. */
.suscripcion-arte img{
  width:100%; max-width:min(100%,1000px);
  height:auto;
  filter:drop-shadow(0 16px 22px rgba(58,51,35,.28));
}
.suscripcion-arte__btn{min-width:13rem}

/* ---- Franja de suscripción: la versión en TEXTO (pantallas chicas) ----
   Va DEBAJO de las tres cajas y en horizontal, no como cuarta tarjeta: no es
   otra caja, es otra forma de comprar cualquiera de las tres. En verde para
   que se lea como una oferta aparte y no compita con ellas. */
.suscripcion{
  margin-top:clamp(1.1rem,2.4vw,1.9rem);
  background:var(--verde); color:#D9D1BC;
  border-radius:4px; text-align:left;
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.3rem,3vw,2.2rem);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.2rem,3vw,2.5rem); justify-content:space-between;
}
.suscripcion__texto{flex:1 1 22rem; min-width:0}
.suscripcion__titulo{color:var(--oro-palido); font-size:clamp(1.2rem,2.1vw,1.5rem); margin:0}
.suscripcion__desc{margin:.5rem 0 .9rem; font-size:.9rem; max-width:44ch; line-height:1.65}
.suscripcion__ventajas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  font-size:.86rem; color:#EDE5D0;
}
/* La palomita va en ::before y no como carácter en el HTML: así el texto que
   se copia o lee un lector de pantalla no arrastra el adorno. */
.suscripcion__ventajas li{position:relative; padding-left:1.3rem}
.suscripcion__ventajas li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--oro-claro); font-size:.95em;
}
.suscripcion__precio{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  gap:.15rem; text-align:center;
}
.suscripcion__desde{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#A9A18C}
.suscripcion__monto{font-family:var(--serif); font-size:clamp(1.9rem,3.2vw,2.4rem); color:#F3ECD9; line-height:1}
.suscripcion__periodo{font-size:.78rem; color:#A9A18C; margin-bottom:.7rem}
/* Aquí el botón NO va turquesa: sobre el verde de la franja se queda en 1.86
   de contraste y se pierde. Va en dorado con texto oscuro, que salta sobre el
   verde y además es el color que la etiqueta ya usa para destacar. */
/* Se probaron los dorados de la paleta contra el verde de la franja:
   --oro (#A87F35) da 2.57 y --oro-claro (#C6A461) 3.96. Se usa un dorado un
   punto más claro, #D9B872, que llega a 4.93 y con texto oscuro a 8.63: es el
   único que de verdad salta sobre el verde sin salirse de la familia. */
.suscripcion__btn{min-width:11rem; background:#D9B872; color:#241F12}
.suscripcion__btn:hover{background:#E6CC91}

/* El interruptor entre las dos versiones va AQUÍ, después de que ambas están
   definidas: puesto antes, la regla posterior '.suscripcion{display:flex}' le
   ganaba por orden y se veían las dos a la vez.
   Por debajo de 900 px la ilustración se oculta —su texto ya no se lee— y
   aparece la franja verde en texto real, que dice exactamente lo mismo. */
@media (max-width:900px){ .suscripcion-arte{display:none} }
@media (min-width:901px){ .suscripcion{display:none} }
@media (max-width:640px){
  .suscripcion{flex-direction:column; align-items:stretch; text-align:center}
  /* Sin esto el bloque de texto conserva su 'flex-grow' del modo horizontal y,
     al apilarse, se estira dejando un hueco enorme antes del precio. */
  .suscripcion__texto{flex:0 0 auto}
  .suscripcion__desc{max-width:none}
  .suscripcion__ventajas{justify-content:center}
  .suscripcion__btn{width:100%}
}

.precios__nota{
  font-size:.8rem; color:var(--cafe); max-width:58ch;
  margin:clamp(1rem,1.8vw,1.4rem) auto 0; line-height:1.65;
}
@media (max-width:820px){
  /* Apiladas, la foto que sobresale de una tarjeta cae sobre la anterior: hay
     que abrir el hueco entre ellas. Y se reduce cuánto sobresale, porque el
     margen negativo va en porcentaje del ancho de la tarjeta y en una sola
     columna esa tarjeta es mucho más ancha. */
  .precios__lista{
    grid-template-columns:1fr; max-width:26rem;
    margin:clamp(3rem,9vw,4rem) auto 0;
    gap:clamp(3.6rem,11vw,5rem);
  }
  .paquete__foto{width:104%; margin:-14% -2% .5rem}
}

/* ======================= VENTANA EMERGENTE =======================
   El arte trae DIBUJADOS la X, el botón "Suscribirme" y el enlace "Conocer
   más"; los controles de verdad se montan encima, transparentes, en PORCENTAJE
   del arte para que sigan pegados a su dibujo a cualquier tamaño.
   Medidas tomadas sobre el recorte que produce preparar-banner.ps1 (1206x1208):
     X            aro de 66 px centrado en (1134, 75). Se le da 8% de lado —más
                  que el aro— para que el área de toque no quede diminuta.
     Suscribirme  x 314..891   y 1074..1174
     Conocer más  x 506..676   y 1179..1201. Se estira hacia arriba y hasta el
                  borde: tal cual, son 22 px imposibles de atinar con el dedo.
   Si se cambia la ilustración hay que volver a medir estos números.        */
.promo{
  padding:0; border:0; background:transparent; margin:auto;
  width:min(94vw,34rem); max-width:min(94vw,34rem);
  overflow:visible;
}
/* Se oscureció de .62 a .80: ahora la etiqueta va calada y los dos controles
   viven FUERA de ella, sobre este fondo. Medido contra el peor caso (el velo
   sobre la parte más clara de la página), el enlace "Ver las cajas" daba 2.92
   con .62 y 4.00 con .72 — los dos por debajo del mínimo. Con .80 llega a
   5.21. De paso, un velo más denso hace resaltar la etiqueta recortada. */
.promo::backdrop{background:rgba(35,40,21,.8)}
.promo__lienzo{position:relative}
/* Sin borde redondeado ni sombra de caja: la ilustración va calada y su propio
   contorno de etiqueta es el borde. Un radio aquí recortaría las esquinas del
   dibujo, y una sombra rectangular delataría que hay una caja detrás. */
.promo__arte{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 24px 34px rgba(20,24,10,.55));
}
/* La X: círculo marfil con aspa, dibujado en CSS. La ilustración anterior lo
   traía pintado y había que calzarle encima una zona de toque; ahora es un
   botón de verdad, así que se enfoca con teclado y se agranda a gusto. */
.promo__cerrar{
  position:absolute; top:-.6rem; right:-.6rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--papel); border:1px solid rgba(168,127,53,.55);
  cursor:pointer; padding:0;
  box-shadow:0 6px 16px -8px rgba(35,40,21,.8);
  transition:background var(--transicion), transform var(--transicion);
  -webkit-tap-highlight-color:transparent;
}
/* El aspa son dos barras cruzadas: evita depender de una fuente para un signo
   que tiene que verse igual en todos lados. */
.promo__cerrar::before,
.promo__cerrar::after{
  content:''; position:absolute; left:50%; top:50%;
  width:1.05rem; height:1.5px; background:var(--verde);
  transform-origin:center;
}
.promo__cerrar::before{transform:translate(-50%,-50%) rotate(45deg)}
.promo__cerrar::after {transform:translate(-50%,-50%) rotate(-45deg)}
.promo__cerrar:hover{background:#FFF; transform:scale(1.06)}
.promo__cerrar:focus-visible{outline:2px solid var(--oro-claro); outline-offset:3px}

/* Los botones van DEBAJO de la etiqueta: esta ilustración, a diferencia de la
   anterior, no trae ninguno dibujado. */
.promo__acciones{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  margin-top:1.1rem; line-height:1.5;
}
.promo__cta{min-width:13rem}
.promo__cta.es-inerte{cursor:not-allowed}
.promo__mas{
  color:var(--oro-palido); text-decoration:none;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid rgba(224,207,164,.45);
  transition:color var(--transicion), border-color var(--transicion);
}
.promo__mas:hover{color:#F2E7CD; border-color:var(--oro-palido)}
.promo__mas:focus-visible{outline:2px solid var(--oro-claro); outline-offset:3px}

/* ==================== PÁGINA "¿CUÁNTAS AL DÍA?" ====================
   Vive en plan.html, adonde llevan los botones "Pedir" de las tarjetas.
   Cada plan es una fila con la foto de un lado y el texto del otro, alternando
   el lado para que la vista no baje en línea recta.                        */
.plan-intro{padding-bottom:clamp(1.6rem,3vw,2.4rem)}

.planes{max-width:var(--ancho); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)}
.plan{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3.4rem); align-items:center;
  padding:clamp(2rem,4vw,3.2rem) 0;
  border-bottom:1px solid rgba(168,127,53,.28);
}
.plan:last-child{border-bottom:0}
/* Se invierte el orden visual, no el del HTML: así el texto sigue leyéndose
   después de la imagen para un lector de pantalla. */
.plan--invertido .plan__arte{order:2}
.plan__arte img{width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(58,51,35,.26))}

/* El número es lo primero que se ve: quien no lea nada más, entiende de qué
   plan se trata sólo por el "1", "2" o "3". */
.plan__num{
  font-family:var(--serif); font-size:clamp(2.6rem,6vw,4rem);
  color:var(--accion); line-height:1; margin:0 0 .2rem;
}
.plan__num span{
  font-family:var(--sans); font-size:.9rem; color:var(--cafe);
  letter-spacing:.16em; text-transform:uppercase; margin-left:.5rem;
}
.plan__titulo{font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 .7rem}
.plan__gancho{
  font-size:clamp(1rem,1.5vw,1.12rem); color:var(--tinta);
  line-height:1.7; max-width:44ch; margin:0 0 1.1rem;
}
/* El texto largo va guardado: quien tiene prisa lee tres renglones, quien
   quiere el detalle lo abre. */
.plan__mas{margin-bottom:1.3rem}
.plan__mas summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accion);
  padding-bottom:2px; border-bottom:1px solid rgba(194,64,10,.4);
}
.plan__mas summary::-webkit-details-marker{display:none}
.plan__mas[open] summary{margin-bottom:.9rem}
.plan__mas p{font-size:.92rem; color:var(--cafe); line-height:1.75; max-width:56ch}
.plan__btn{min-width:13rem}

/* ---- 30 · 60 · 90 ---- */
.tiempos{
  background:var(--verde); color:#D9D1BC; text-align:center;
  padding:clamp(2.8rem,6vw,4.4rem) clamp(1.1rem,4vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.tiempos__caja{max-width:60rem; margin:0 auto}
.tiempos__titulo{color:var(--oro-palido); font-size:clamp(1.4rem,2.8vw,2.1rem); margin:0 0 1.8rem}
.tiempos__lista{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem);
}
.tiempos__lista li{display:flex; flex-direction:column; gap:.35rem}
.tiempos__dia{
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); color:#F3ECD9;
}
.tiempos__que{font-size:.9rem; color:#B7AF99; line-height:1.5}
/* Dejó de ser una nota al pie gris (17 ago 2026, "usa una letra más
   llamativa"): ahora es la frase con la que cierra el bloque. Se queda en la
   Cinzel de los títulos en vez de traer una fuente nueva —una tercera familia
   se notaría como un parche en una página que sólo usa dos—; lo llamativo lo
   dan el tamaño, el oro pálido y el contraste con el texto menudo de arriba. */
.tiempos__pie{
  font-family:var(--serif);
  font-size:clamp(1.12rem,2.1vw,1.5rem);
  line-height:1.42; letter-spacing:.03em;
  color:var(--oro-palido);
  /* Sin margen abajo desde que se quitó el botón que le seguía: era el hueco
     que lo separaba, y sin él la frase quedaba descentrada en la franja. */
  max-width:30ch; margin:0 auto;
  text-wrap:balance;
}

/* ---- Ficha técnica ---- */
.ficha-tec__caja{
  max-width:var(--ancho); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);
}
.ficha-tec__bloque h3{
  font-size:1.05rem; margin:0 0 1rem; padding-bottom:.6rem;
  border-bottom:1px solid rgba(168,127,53,.3);
}
.ingredientes{list-style:none; margin:0; padding:0}
.ingredientes li{
  padding:.4rem 0 .4rem 1.2rem; position:relative;
  font-size:.92rem; color:var(--cafe);
}
.ingredientes li::before{
  content:'·'; position:absolute; left:.25rem; top:.15rem;
  color:var(--oro); font-size:1.3rem; line-height:1;
}
.ficha-datos{list-style:none; margin:0; padding:0}
.ficha-datos li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid rgba(168,127,53,.18);
  font-size:.9rem;
}
.ficha-datos li:last-child{border-bottom:0}
.ficha-datos span{color:var(--cafe)}
.ficha-datos b{color:var(--verde); font-weight:500; text-align:right}
/* ---- Tabla nutrimental: dos columnas, como en la etiqueta ----
   Las cifras van en cuerpo chico y alineadas a la derecha para que las
   unidades caigan una debajo de otra y se puedan comparar de un vistazo. El
   marco con desbordamiento lateral es el seguro: la columna de la ficha
   técnica se estrecha bastante y sin él la tabla empujaría la página a lo
   ancho, que es el defecto más feo que puede tener una página en el celular. */
.tabla-nut__marco{overflow-x:auto}
.tabla-nut{width:100%; border-collapse:collapse; font-size:.82rem}
.tabla-nut th, .tabla-nut td{
  padding:.42rem 0; border-bottom:1px solid rgba(168,127,53,.18);
  vertical-align:baseline;
}
.tabla-nut thead th{
  font-family:var(--sans); font-weight:500; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terracota);
  text-align:right; white-space:nowrap; padding-left:.8rem;
}
.tabla-nut thead td{border-bottom:1px solid rgba(168,127,53,.18)}
.tabla-nut tbody th{
  font-family:var(--sans); font-weight:300; text-align:left;
  color:var(--cafe); padding-right:.5rem;
}
.tabla-nut tbody td{
  text-align:right; white-space:nowrap; padding-left:.8rem;
  color:var(--verde); font-weight:500;
}
/* Los que cuelgan de otro: saturadas y trans bajo las grasas, azúcares bajo
   los hidratos. Sangrados y un punto más chicos, para que se vea de un
   vistazo qué es total y qué es desglose. */
.tabla-nut tbody tr.es-sub th{padding-left:1.05rem; font-size:.94em}
/* El colágeno no es un dato más de la lista: es el argumento del producto. */
.tabla-nut tbody tr.es-destacado th{color:var(--verde); font-weight:500}
.tabla-nut tbody tr.es-destacado th,
.tabla-nut tbody tr.es-destacado td{border-bottom:0; padding-top:.6rem}
.nota-nutricion{font-size:.9rem; color:var(--cafe); line-height:1.7}

/* Bloque de dudas: mismo aspecto que el FAQ de la portada, sobre papel hondo
   para separarlo de la ficha técnica que tiene encima. */
.dudas{background:var(--papel-hondo); border-top:1px solid rgba(168,127,53,.28)}

/* En el cierre de plan.html las tarjetas son las mismas de la portada, pero
   sobra el enlace "Conocer más": el visitante ya está en esa página. */
.precios--cierre .paquete__mas{display:none}

@media (max-width:820px){
  .plan{grid-template-columns:1fr; gap:1.4rem}
  .plan--invertido .plan__arte{order:0}
  .plan__arte{max-width:22rem; margin:0 auto}
  .tiempos__lista{grid-template-columns:1fr; gap:1.4rem}
  .ficha-tec__caja{grid-template-columns:1fr}
}

/* ============================ PIE ============================ */
/* El pie DEJÓ DE SER VERDE (5 ago 2026). Venía en verde casi negro; primero se
   probó con el verde de marca —un paso más claro— pero seguía siendo un bloque
   oscuro cortando el final de una página que es de papel. Ahora va en el mismo
   papel que la sección de cierre —que es lo que hace que "combine"— y lo que
   los separa es el filete dorado de arriba, no un cambio de color.
   Al invertir el fondo hay que invertir el TEXTO: los tonos claros de antes
   estaban calculados contra un fondo oscuro y sobre papel desaparecen. */
.pie{background:var(--papel-hondo); color:#6E5F47;
  border-top:1px solid rgba(168,127,53,.3);
  padding:clamp(2rem,4vw,3rem) clamp(1.1rem,4vw,2.5rem) 1.4rem}
.pie__caja{max-width:var(--ancho); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(1.5rem,3vw,3rem);
  padding-bottom:1.9rem; border-bottom:1px solid rgba(168,127,53,.28)}
.pie__marca img{width:150px; margin-bottom:.9rem; opacity:.9}
.pie__marca p{font-size:.8rem; line-height:1.7; margin-bottom:.3em}
.pie__dir{font-size:.75rem; color:#77684F; max-width:34ch}
.pie__col h4{color:var(--terracota-osc); font-family:var(--sans); font-weight:500;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.85rem}
.pie__col a{display:block; color:var(--verde); text-decoration:none; font-size:.82rem;
  padding:.26rem 0; cursor:pointer; transition:color var(--transicion)}
.pie__col a:hover{color:var(--terracota-osc)}
.pie__legal{max-width:var(--ancho); margin:0 auto; padding-top:1.2rem;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-size:.7rem; color:#77684F}
.pie__aviso{max-width:56ch}

/* ============================ WHATSAPP ============================ */
.wa-flota{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:120;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; background:var(--verde-osc); color:var(--oro-palido);
  border:1px solid rgba(198,164,97,.45);
  box-shadow:0 14px 30px -12px rgba(25,30,12,.75);
  transition:transform var(--transicion), background var(--transicion);
}
.wa-flota svg{width:28px; height:28px; fill:currentColor}
.wa-flota:hover{background:var(--accion); transform:scale(1.07)}

/* ============================ VISTA PREVIA ============================ */
.aviso-previa{
  position:fixed; left:50%; bottom:clamp(1rem,3vw,2rem); transform:translateX(-50%);
  z-index:130; max-width:min(92vw,560px);
  background:var(--verde-prof); color:var(--oro-palido);
  border:1px solid rgba(198,164,97,.45); border-radius:4px;
  padding:.8rem 1.1rem; text-align:center; font-size:.79rem; line-height:1.55;
  box-shadow:0 18px 40px -20px rgba(18,22,8,.8);
}
.aviso-previa b{color:var(--oro-claro); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; font-size:.71rem}
.btn.es-inerte,a.es-inerte{opacity:.5; cursor:not-allowed}
.wa-flota.es-inerte{opacity:.42}

/* ============================ REVELADO ============================ */
.reveal{opacity:0; transform:translateY(16px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1; transform:none}

/* ============================ RESPONSIVO ============================ */
@media (max-width:1040px){
  .pie__caja{grid-template-columns:1fr 1fr}
  .pie__marca{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:block}
  /* El texto del banner de beneficios ya no se lee a este ancho: se cambia por
     el mismo contenido en texto real. */
  .beneficios__banner{display:none}
  .beneficios__movil{
    display:block;
    padding:clamp(3rem,7vw,4.2rem) clamp(1.1rem,4vw,2.5rem);
    max-width:var(--ancho); margin:0 auto;
  }
  /* Mismo relevo en el bloque de diferenciación. */
  .diferencia__banner{display:none}
  .diferencia__movil{
    display:block;
    padding:0 clamp(1.1rem,4vw,2.5rem) clamp(2.4rem,6vw,3.4rem);
    max-width:34rem; margin:0 auto;
  }
  /* El atajo a la tienda, sólo aquí. Va sobre el papel hondo para leerse como
     una franja aparte y no como parte del bloque de bienvenida. */
  .atajo-movil{
    display:block; text-align:center;
    background:var(--papel-hondo);
    border-top:1px solid rgba(168,127,53,.3);
    border-bottom:1px solid rgba(168,127,53,.3);
    padding:clamp(1.6rem,5vw,2.2rem) clamp(1.1rem,4vw,2.5rem);
  }
  /* Sólo el botón, sin texto encima (13 ago 2026). */
  .atajo-movil .btn{min-width:13rem}

  /* Los óvalos completos, DE DOS EN DOS (10 ago 2026). Cada uno ya trae su
     icono, su título y su texto dentro, así que el texto de la lista se oculta
     —pero NO con display:none: se deja accesible para lectores de pantalla y
     buscadores, que no pueden leer lo que dice una imagen. */
  .beneficios__lista{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(.6rem,2.5vw,1.1rem); align-items:start;
  }
  .beneficio{padding:0; border-bottom:0}
  .beneficio__ovalo{display:block; width:100%; height:auto}
  .beneficio__ico{display:none}
  .beneficio h3, .beneficio p{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .cierre__guirnalda{display:none}
}
@media (max-width:620px){
  .pie__caja{grid-template-columns:1fr}
  .pie__legal{flex-direction:column}
  .cinta__pista{animation-duration:30s}
  .aviso-previa{bottom:calc(clamp(1rem,3vw,2rem) + 68px)}
  .banderola{padding-left:1.5em; padding-right:1.5em; letter-spacing:.15em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cinta__pista{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.beneficio__circulo,.wa-flota{transition:none}
}