/* estilo.css  —  Álvarez Grupo Avícola.

   TERCERA VERSIÓN. Las dos anteriores se rechazaron, y las dos por lo mismo:
   una identidad que no era la de la marca.

     1ª  «no parece más que una venta de mercado libre»
     2ª  «todo está feo, la fuente no corresponde con el logo, los colores no
          son los institucionales»

   ESTA VERSIÓN NO ELIGE COLORES: LOS MIDE. Del logotipo oficial
   `Alvarez-Grupo-Avicola-Logo.jpeg` salieron `#000000` (45.8% del área) y
   `#F0902A` (27.5%). Del de Alas Libres, `#F07200` y `#90C63C`. El resto son
   derivados declarados, y están en `_AGENT/MANUAL-DE-MARCA.md`.

   LAS CUATRO REGLAS QUE NO SE ROMPEN

   1. EL NARANJA ES ACENTO, NO FONDO. Manda la tinta sobre hueso; el naranja
      aparece en el filete, el número, el subrayado y el botón. Grandes áreas
      de naranja se leen como oferta de mercado — el efecto que se rechazó.
   2. LA CABECERA VA CLARA. El logotipo oficial es negro: sobre fondo oscuro
      desaparece. Comprobado poniéndolo sobre #111. No es gusto, es la marca.
   3. TIPOGRAFÍA GEOMÉTRICA. Outfit conversa con el wordmark; Inter para texto
      y para las fichas, que son números. Fuera Bodoni: es una serif editorial
      y contradice al logotipo.
   4. LAS MAYÚSCULAS ESPACIADAS SÍ SE USAN, y sólo en las etiquetas chicas.
      Salen del «GRUPO AVÍCOLA» del propio logotipo: es un eco de la marca, no
      una costumbre de diseño.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
/* RED DE SEGURIDAD CONTRA EL DESBORDE HORIZONTAL. `clip` y no `hidden`: hidden
   convierte al elemento en contenedor de scroll y rompe el `position:sticky` de
   la cabecera. Esto NO sustituye arreglar la causa —abajo están las tres que se
   midieron— pero garantiza que la página nunca se arrastre de lado en teléfono,
   que es donde la va a ver la mayoría. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--hueso);color:var(--suave);
  font:400 1rem/1.62 'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}

/* MARCO DE FOTO. La proporción la fija el contenedor y la imagen lo llena por
   posición absoluta. Antes era al revés —aspect-ratio en la imagen y
   height:100% para llenar— y eso dejaba la altura sin resolver dentro de una
   rejilla: la foto salía en blanco sin ningún error en consola. Pasó cuatro
   veces y costó media sesión encontrarlo. */
.marco{position:relative;overflow:hidden;background:#EFEAE2}
.marco>picture{position:absolute;inset:0}
.marco>picture>img,.marco>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

h1,h2,h3{
  font-family:'Outfit','Inter',system-ui,sans-serif;font-weight:600;
  color:var(--tinta);margin:0;letter-spacing:-.015em;line-height:1.06;
}
h1{font-size:clamp(2.5rem,6.4vw,4.9rem);font-weight:700}
h2{font-size:clamp(1.85rem,4vw,3rem)}
h3{font-size:clamp(1.1rem,2vw,1.34rem);font-weight:600;letter-spacing:-.005em}
.linea{display:block}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
.entrada{font-size:clamp(1rem,1.55vw,1.14rem);color:#4A4A4A;max-width:56ch}

/* La etiqueta: mayúsculas con interletrado abierto, eco del «GRUPO AVÍCOLA».
   Lleva un filete naranja corto a la izquierda: es el acento, en su dosis. */
.etiqueta{
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dato);margin:0 0 1.05rem;
  /* `flex-wrap` y `min-width:0`: sin los dos, una etiqueta larga como
     «ÁLVAREZ GRUPO AVÍCOLA · UNIÓN AGROPECUARIA ALZE» empujaba el ancho del
     contenedor y sacaba toda la portada de la pantalla en teléfono. Medido a
     390 px: había letras en los últimos 18 px del borde. */
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;min-width:0;
}
.etiqueta::before{content:'';width:26px;height:2px;background:var(--naranja);flex:0 0 auto}
.etiqueta.clara{color:rgba(255,255,255,.82)}

.salta{
  position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
  padding:.7rem 1.1rem;z-index:200;
}
.salta:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}

/* ------------------------------------------------------------ el botón
   Relleno negro y, al pasar, naranja. No hay botón amarillo lleno: ése fue uno
   de los cuatro rasgos que hicieron que la primera versión se leyera como
   mercado. */
.pedir{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--tinta);color:var(--hueso);text-decoration:none;
  padding:.82rem 1.6rem;font:600 .88rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:.02em;border:1.5px solid var(--tinta);cursor:pointer;
  transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.pedir:hover{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.pedir:active{transform:translateY(1px)}
.pedir.grande{padding:1rem 1.9rem;font-size:.95rem}
.pedir.plano{background:none;color:var(--tinta)}
.pedir.plano:hover{background:var(--tinta);color:var(--hueso);border-color:var(--tinta)}
.pedir.claro{border-color:rgba(255,255,255,.7);color:#fff;background:none}
.pedir.claro:hover{background:#fff;color:var(--tinta);border-color:#fff}

/* El botón flotante: sólo en teléfono, y sólo después del primer pliegue. */
.pedir.fijo{
  position:fixed;right:1rem;bottom:1rem;z-index:90;display:none;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

/* --------------------------------------------------------- la cabecera
   Clara siempre, y con el logotipo oficial. */
.cabecera{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:1.6rem;
  background:rgba(250,247,242,.95);backdrop-filter:blur(10px);
  padding:.7rem clamp(1rem,4vw,3rem);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.marca{display:block;flex:0 0 auto;text-decoration:none}
.marca img,.marca picture{width:clamp(132px,15vw,186px);height:auto}
.marca-texto{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.3rem}
.navegacion{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.navegacion a{
  text-decoration:none;color:var(--suave);font-size:.93rem;font-weight:500;
  padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .2s;
}
.navegacion a:hover{border-bottom-color:var(--naranja)}
.navegacion a[aria-current="page"]{border-bottom-color:var(--naranja)}
/* `.navegacion a` tiene mas especificidad que `.pedir` y le imponia color
   oscuro sobre fondo negro: el boton salia como un recuadro negro con el texto
   invisible. Se declara aqui, donde gana. */
.navegacion a.pedir{color:var(--hueso);border-bottom:1.5px solid var(--tinta)}
.navegacion a.pedir:hover{color:var(--tinta);border-bottom-color:var(--naranja)}
.cortina-btn{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto}
.cortina-btn span{display:block;width:24px;height:2px;background:var(--tinta);margin:5px 0}

/* ----------------------------------------------------------- la portada */
.portada{
  position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  background:var(--tinta);overflow:hidden;
}
.portada.corta{min-height:min(56svh,470px)}
.portada-foto{position:absolute;inset:0}
.portada-foto img,.portada-foto picture{width:100%;height:100%;object-fit:cover}
/* El único movimiento no pedido de la página: la foto entra creciendo muy
   despacio. Es el momento de apertura y no se repite en ninguna otra sección. */
.portada-foto img{animation:respira 20s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes respira{from{transform:scale(1.08)}to{transform:scale(1)}}
.portada-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.52) 46%,rgba(0,0,0,.14) 82%),
    linear-gradient(to right,rgba(0,0,0,.5),transparent 66%);
}
.portada-texto{
  position:relative;color:#fff;
  padding:clamp(7rem,14vh,10rem) clamp(1.2rem,5vw,4rem) clamp(2.6rem,6vw,4.4rem);
  /* Es un flex item: con `width:auto` se dimensionaba por su contenido y no por
     la pantalla, así que los botones no envolvían y el texto salía cortado en
     el borde derecho. `width:100%` + `min-width:0` lo obligan a caber. */
  width:100%;max-width:min(1200px,100%);min-width:0;
}
.portada h1{color:#fff}
.portada h1 .linea:last-child{color:var(--naranja)}
.portada .entrada{color:rgba(255,255,255,.9);margin-top:1.1rem}
.portada-botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
/* La promesa de tiempo debajo del boton: chica, clara y sin competir con el
   boton. Es el reductor de ansiedad clasico, y va donde se toma la decision. */
.portada-promesa{
  margin:.9rem 0 0;font-size:.86rem;color:rgba(255,255,255,.78);
}
.portada-pie{
  display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  margin-top:2.3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.22);
}
.portada-sello{background:#fff;padding:.5rem .65rem;flex:0 0 auto}
.portada-sello img{width:clamp(78px,9vw,102px)}
.portada-plazas{
  margin:0;font-size:.86rem;letter-spacing:.06em;color:rgba(255,255,255,.86);
  min-width:0;overflow-wrap:anywhere;
}
.portada-plazas span{
  display:block;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:.25rem;
}

/* ------------------------------------------------------ la certificación
   Se presenta como documento: sello, ficha campo por campo y enlace. Es lo
   único de la página que el comprador puede ir a verificar afuera. */
.cert{
  background:#fff;padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
  border-top:3px solid var(--naranja);
}
.cert-cuerpo{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.cert-decir .entrada{margin-bottom:1.9rem}
.cert-decir h2{margin-bottom:1rem}

/* La ficha: lista de definiciones de verdad, no una tabla dibujada con divs.
   Un lector de pantalla dice «Norma aplicada: HFAC», que es el contenido. */
.ficha{
  display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.6rem;
  margin:0 0 2rem;padding:1.35rem 0;font-size:.94rem;
  border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);
}
.ficha dt{margin:0;color:var(--dato)}
.ficha dd{margin:0;color:var(--tinta);font-weight:600}

.cert-lado{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.cert-sello{
  grid-column:1/-1;margin:0;background:var(--hueso);padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1.1rem;border:1px solid rgba(0,0,0,.08);
}
.cert-sello img,.cert-sello picture{width:clamp(96px,11vw,124px);flex:0 0 auto}
.cert-sello figcaption{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dato);
  line-height:1.5;
}
.cert-foto{margin:0}
.cert-foto .marco{width:100%}
/* Dos alturas distintas a propósito: una rejilla de fotos iguales es lo que
   hace que una página se lea como catálogo. */
.cert-foto.f0 .marco{aspect-ratio:4/3}
.cert-foto.f1 .marco{aspect-ratio:3/4;margin-top:1.7rem}
.cert-foto figcaption{
  font-size:.76rem;color:var(--dato);margin-top:.5rem;line-height:1.45;
}

.cita{
  max-width:830px;margin:clamp(2.6rem,5vw,4rem) auto 0;padding-top:2rem;
  border-top:1px solid rgba(0,0,0,.1);text-align:center;
}
.cita p{
  font-family:'Outfit',sans-serif;font-size:clamp(1.14rem,2.3vw,1.5rem);
  font-weight:300;line-height:1.44;color:var(--tinta);margin:0 0 .9rem;
}
.cita p::before{content:'«'}
.cita p::after{content:'»'}
.cita footer{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dato)}
.cita footer span{letter-spacing:.04em;text-transform:none}

/* ------------------------------------------------------------- la prueba
   Sustituye a la calculadora de gramos. Le enseña al comprador cómo
   auditarnos, y termina en la petición de muestra. */
.prueba{
  background:var(--hueso);padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
}
.prueba-intro{max-width:760px;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.prueba-intro .etiqueta{justify-content:center}
.prueba-intro h2 .linea:last-child{color:var(--naranja)}
.prueba-intro .entrada{margin:1.1rem auto 0}

.chequeos{
  max-width:1200px;margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--tinta);
}
/* Tres columnas separadas por filete, no tres tarjetas con sombra: la tarjeta
   idéntica en rejilla fue uno de los rasgos de marketplace que se rechazaron. */
.chequeos li{
  padding:1.9rem 1.6rem 2rem 0;border-right:1px solid rgba(0,0,0,.12);
}
.chequeos li:last-child{border-right:0;padding-right:0}
.chequeo-n{
  display:block;font-family:'Outfit',sans-serif;font-size:2.6rem;font-weight:300;
  color:var(--naranja);line-height:1;margin-bottom:.7rem;
}
.chequeos h3{margin-bottom:.5rem}
.chequeos p{font-size:.94rem;color:#4A4A4A;margin:0}

.prueba-cierre{
  max-width:1200px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
}
.prueba-figura{margin:0}
.prueba-foto{aspect-ratio:16/10}
/* El credito de una foto prestada: obligatorio cuando la licencia lo pide,
   y lo mas discreto posible para que no compita con el argumento. */
.credito{margin:.5rem 0 0;font-size:.72rem;color:var(--dato)}
.prueba-remate p{font-size:clamp(1.06rem,2.1vw,1.3rem);color:var(--tinta);margin-bottom:1.5rem}

/* --------------------------------------------- las cuatro presentaciones
   Dos tamanos por dos colores. Antes eran los cuatro calibres de la industria
   —Jumbo, Extra grande, Grande, Mediano—: la nomenclatura del gremio, no la
   del vendedor. ALZE vende Extra y Linea, en blanco y en rojo. */
.presenta{
  background:#fff;padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
}
.presenta-intro{max-width:1200px;margin:0 auto clamp(1.9rem,4vw,2.8rem)}
.presenta-intro h2{margin-bottom:1rem}
/* Con foto, el texto y el producto van lado a lado. La foto pesa poco menos
   que el texto: es el producto, no la portada. */
.presenta-intro.con-foto{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
}
.presenta-foto{margin:0}
.presenta-foto .marco{aspect-ratio:4/3}
.presenta-foto figcaption{
  margin-top:.6rem;font-size:.78rem;color:var(--dato);line-height:1.5;
}

.rejilla-pres{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--tinta);
}
.pres{
  padding:1.5rem 1.4rem 1.6rem 0;border-right:1px solid rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.pres:last-child{border-right:0;padding-right:0}
/* La destacada lleva el filete naranja, el mismo recurso que ya marca la
   puerta de casa y la logistica de Puebla. Cual es la destacada NO esta
   escrito aqui: sale del contenido, y por eso se cambia sin tocar CSS. */
.pres.destacada{border-top:3px solid var(--naranja);margin-top:-2px;padding-top:1.4rem}
.pres-color{
  display:flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dato);margin:0 0 .7rem;
}
/* El cuadro de color dice de que cascaron se habla. Es informacion, no adorno:
   ahorra la pregunta «rojo es el moreno, verdad». */
.pres-punto{
  width:11px;height:11px;flex:0 0 auto;border:1px solid rgba(0,0,0,.35);
}
.c-blanco .pres-punto{background:#F7F3EC}
.c-rojo   .pres-punto{background:#C4783F;border-color:rgba(0,0,0,.25)}
.pres h3{font-size:clamp(1.3rem,2.6vw,1.72rem);margin-bottom:.35rem}
/* EL PESO ES EL ARGUMENTO, no un dato de ficha: es lo unico de esta pagina
   que le cambia el costo por plato a un chef. Va mas grande que el nombre del
   tamano, que antes lo dominaba. */
.pres-peso{
  font-family:'Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.12rem,2.2vw,1.34rem);color:var(--tinta);margin:0 0 .7rem;
  letter-spacing:-.01em;
}
.pres-peso span{display:block;font-weight:400;font-size:.84rem;color:var(--dato)}
/* Las piezas por caja: es con lo que el comprador saca su costo, asi que va
   junto al peso y no escondido en una nota. */
.pres-caja{
  font-size:.82rem;color:var(--dato);margin:-.35rem 0 .7rem;
  font-variant-numeric:tabular-nums;
}
.pres-uso{font-size:.88rem;color:#4A4A4A;margin:0 0 1rem}
.pres-sello{
  margin:auto 0 0;font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--naranja);
}

/* La diferencia entre blanco y rojo, contestada de frente. Va sobre hueso para
   separarla de la ficha: es una respuesta, no una especificacion. */
.aclara{
  max-width:1200px;margin:clamp(2rem,4vw,3rem) auto 0;
  background:var(--hueso);padding:clamp(1.4rem,3vw,2.1rem);
  border-left:3px solid var(--naranja);
}
.aclara.con-foto{
  display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(1.2rem,3vw,2.2rem);
  align-items:center;
}
.aclara-foto{aspect-ratio:4/3}
.aclara h3{font-size:clamp(1.02rem,2vw,1.2rem);margin-bottom:.55rem}
.aclara p{font-size:.93rem;color:#4A4A4A;margin:0;max-width:78ch}
/* La nota de lo que falta por confirmar va alineada a la izquierda como todo
   lo demas del bloque. Centrada -que es como sale `.nota-pie` por defecto- se
   veia colgada de la nada debajo de un bloque alineado a la izquierda. */
.presenta > .nota-pie{max-width:1200px;margin-left:auto;margin-right:auto;width:100%}
.tabla-envoltura{max-width:1200px;margin:0 auto;overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
.tabla thead th{
  text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dato);padding:0 1.2rem .8rem 0;
  border-bottom:2px solid var(--tinta);
}
.tabla tbody th{
  text-align:left;font-weight:600;color:var(--tinta);padding:.95rem 1.2rem .95rem 0;
  border-bottom:1px solid rgba(0,0,0,.1);white-space:nowrap;
}
.tabla tbody td{
  padding:.95rem 1.2rem .95rem 0;border-bottom:1px solid rgba(0,0,0,.1);color:#4A4A4A;
}
.por-confirmar{color:var(--dato);font-style:italic}
.nota-pie{
  max-width:70ch;margin:1.1rem auto 0;font-size:.83rem;color:var(--dato);line-height:1.6;
}
.nota-pie.claro{color:rgba(255,255,255,.72)}

.lineas{
  max-width:1200px;margin:clamp(2.2rem,5vw,3.4rem) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);
}
.linea-prod{border-top:2px solid var(--naranja);padding-top:1.3rem}
.linea-sello{width:clamp(128px,15vw,168px);margin-bottom:1rem}
.linea-prod h3{margin-bottom:.5rem}
.linea-prod p{font-size:.94rem;color:#4A4A4A;margin:0}

/* ------------------------------------------------------------- la entrega
   Único bloque sobre tinta. Es el que contesta «¿llegas a mi cocina?», que es
   la primera pregunta del comprador, y el contraste lo separa del resto. */
.entrega{
  background:var(--tinta);color:#fff;
  padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
}
.entrega h2{color:#fff}
.entrega h2 .linea:last-child{color:var(--naranja)}
.entrega .entrada{color:rgba(255,255,255,.82)}
.entrega-cuerpo{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,3.6rem);
  align-items:center;
}
.entrega-foto{aspect-ratio:4/3}
.plazas{
  list-style:none;margin:1.7rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem .7rem;
}
.plazas li{
  border:1px solid rgba(255,255,255,.34);padding:.46rem 1.05rem;
  font-size:.92rem;letter-spacing:.03em;
}
/* La primera plaza es la casa: se marca con el filete naranja, no con relleno. */
.plazas li:first-child{border-color:var(--naranja);color:var(--naranja)}

.bodegas{
  max-width:1200px;margin:clamp(2.4rem,5vw,3.4rem) auto 0;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.2);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);
}
.bodega h3{color:#fff;margin-bottom:.5rem}
.bodega p{font-size:.92rem;color:rgba(255,255,255,.74);margin:0 0 .35rem}
.bodega-tel a{color:var(--naranja);text-decoration:none;margin-right:.9rem}
.bodega-tel a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- la casa */
.casa{
  background:var(--hueso);padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
}
.casa-intro{max-width:1200px;margin:0 auto clamp(2.2rem,5vw,3.2rem)}
.casa-logo{width:clamp(186px,22vw,260px);margin-bottom:1.7rem}
.casa h2 .linea:last-child{color:var(--naranja)}

/* Las cifras: composición tipográfica sobre filete, no tres tarjetas. */
.cifras{
  max-width:1200px;margin:0 auto clamp(2.4rem,5vw,3.4rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);
}
.cifra{border-top:1px solid rgba(0,0,0,.16);padding-top:1.1rem}
.cifra strong{
  display:block;font-family:'Outfit',sans-serif;font-weight:300;
  font-size:clamp(2.5rem,5.6vw,4rem);line-height:.98;color:var(--tinta);
  letter-spacing:-.03em;
}
.cifra-pie{
  display:block;font-size:1rem;font-weight:600;color:var(--naranja);margin:.5rem 0 .35rem;
}
.cifra-nota{display:block;font-size:.83rem;color:var(--dato);line-height:1.55}

/* La cadena: cinco etapas en un riel horizontal. Es una secuencia real —del
   grano al reparto— y por eso va numerada. */
.cadena{
  max-width:1200px;margin:0 auto;padding:0 0 1rem;list-style:none;
  display:flex;gap:clamp(1rem,2.4vw,1.8rem);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.etapa{flex:0 0 min(300px,72vw);scroll-snap-align:center}
.etapa-foto{aspect-ratio:3/4;margin-bottom:1rem}
.etapa-n{
  display:block;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;
  color:var(--naranja);margin-bottom:.3rem;
}
.etapa h3{margin-bottom:.45rem}
.etapa p{font-size:.9rem;color:#4A4A4A;margin:0}
.pista{
  max-width:1200px;margin:.6rem auto 0;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dato);
}

/* ---------------------------------------------------------- las preguntas */
.preguntas{
  background:#fff;padding:clamp(3.4rem,7vw,5.4rem) clamp(1.2rem,5vw,4rem);
  max-width:900px;margin:0 auto;
}
.preguntas h2{margin-bottom:1.9rem}
.lista-preguntas details{border-bottom:1px solid rgba(0,0,0,.11)}
.lista-preguntas summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-weight:600;color:var(--tinta);font-size:1.01rem;
}
.lista-preguntas summary::-webkit-details-marker{display:none}
.lista-preguntas summary::after{
  content:'+';position:absolute;right:.2rem;top:1rem;
  font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:300;
  color:var(--naranja);line-height:1;transition:transform .25s;
}
.lista-preguntas details[open] summary::after{content:'–'}
.lista-preguntas p{
  margin:0 0 1.3rem;color:#4A4A4A;font-size:.96rem;max-width:70ch;
}

/* ------------------------------------------------------------- la muestra */
.muestra{
  background:var(--tinta);color:#fff;
  padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
}
.muestra h2{color:#fff}
.muestra .entrada{color:rgba(255,255,255,.82)}
.muestra-cuerpo{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.forma{display:flex;flex-direction:column;gap:1.15rem}
.forma-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.forma label{display:block}
.forma label span{
  display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.45rem;
}
.forma input,.forma select,.forma textarea{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff;font:1rem 'Inter',system-ui,sans-serif;padding:.5rem .1rem;
}
.forma select option{color:var(--tinta)}
.forma textarea{resize:vertical;border:1px solid rgba(255,255,255,.3);padding:.7rem}
.forma input:focus,.forma select:focus,.forma textarea:focus{
  outline:0;border-color:var(--naranja);
}
.forma .pedir{align-self:flex-start;background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.forma .pedir:hover{background:#fff;border-color:#fff}
.lejos{position:absolute;left:-9999px}

/* ------------------------------------------------------------------ el pie */
.pie{background:#0A0A0A;color:rgba(255,255,255,.72);padding:clamp(2.6rem,6vw,4.2rem) clamp(1.2rem,5vw,4rem) 1.6rem}
.pie-alto{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr .7fr 1.1fr;gap:clamp(1.6rem,4vw,3rem);
}
/* El logotipo en el pie va en pastilla clara: es negro y sobre este fondo
   desaparecería. Mientras no exista versión invertida, ésta es la única forma
   correcta de ponerlo sobre oscuro. */
.pie-logo{background:var(--hueso);padding:.75rem .95rem;width:clamp(160px,19vw,208px);margin-bottom:1.1rem}
.pie-marca p{font-size:.9rem;margin:0 0 .3rem}
.pie-giro{color:var(--naranja)}
.pie-nav{display:flex;flex-direction:column;gap:.55rem}
.pie-nav a{text-decoration:none;font-size:.92rem}
.pie-nav a:hover{color:var(--naranja)}
.pie-suc{margin-bottom:1rem}
.pie-suc b{color:#fff;font-size:.92rem;display:block;margin-bottom:.2rem}
.pie-datos p{font-size:.85rem;margin:0 0 .25rem;line-height:1.5}
.pie-datos a{color:var(--naranja);text-decoration:none}
.pie-bajo{
  max-width:1200px;margin:2.4rem auto 0;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:.74rem;letter-spacing:.1em;color:rgba(255,255,255,.42);
}

/* ------------------------------------------------ las apariciones, medidas
   Sólo en los elementos marcados, y sólo si están debajo del pliegue. Un
   fundido por sección es lo que hace que una página se lea como plantilla. */
[data-entra]{opacity:0;transform:translateY(16px)}
[data-entra].dentro{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   LA PANTALLA DE «YA QUEDÓ» del formulario
   ========================================================================== */
.recibido{min-height:100svh;display:grid;place-items:center;background:var(--tinta);padding:clamp(1.4rem,5vw,4rem)}
.recibido-caja{background:var(--hueso);padding:clamp(2rem,5vw,3.6rem);max-width:44rem;border-top:3px solid var(--naranja)}
.recibido.malo .recibido-caja{border-top-color:#B3261E}
.recibido-caja h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 0 .9rem}
.recibido-caja p{color:#4A4A4A;max-width:46ch;margin:0 0 2rem}

/* ==========================================================================
   EL CALLBOX Y EL CHAT DEL ASESOR
   En la paleta de la casa, no en una burbuja verde de widget: si el bot parece
   un plugin pegado, se lleva de paso la marca que costó construir.
   ========================================================================== */
.callbox{
  position:fixed;right:clamp(.9rem,2.5vw,1.8rem);bottom:clamp(.9rem,2.5vw,1.8rem);
  z-index:120;width:min(366px,calc(100vw - 1.8rem));
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1);
}
.callbox.vive{opacity:1;transform:none;pointer-events:auto}
.callbox.chico{width:auto}
.callbox-burbuja{
  position:relative;background:#fff;color:var(--suave);padding:1.5rem 1.5rem 1.35rem;
  box-shadow:0 20px 54px rgba(0,0,0,.26);border-top:3px solid var(--naranja);
}
.callbox-x{
  position:absolute;top:.3rem;right:.45rem;background:none;border:0;
  font-size:1.5rem;line-height:1;color:#9A9A9A;cursor:pointer;padding:.2rem .4rem;
}
.callbox-x:hover{color:var(--tinta)}
.callbox-gancho{
  font-family:'Outfit',sans-serif;font-size:1.32rem;font-weight:600;line-height:1.16;
  color:var(--tinta);margin:0 0 .5rem;padding-right:1.2rem;
}
.callbox-apoyo{font-size:.9rem;color:#5A5A5A;margin:0 0 1.15rem;line-height:1.5}
.callbox-si{width:100%}
.callbox-tirador{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;
  background:var(--tinta);color:var(--hueso);border:0;
  padding:.85rem 1.35rem;font:600 .84rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:.05em;box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.callbox-tirador::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 0 rgba(240,144,42,.7);animation:latido 2.4s infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(240,144,42,.7)}
  70%{box-shadow:0 0 0 11px rgba(240,144,42,0)}
  100%{box-shadow:0 0 0 0 rgba(240,144,42,0)}
}
.callbox-tirador:hover{background:var(--naranja);color:var(--tinta)}

.chat{display:flex;flex-direction:column;background:#fff;box-shadow:0 24px 64px rgba(0,0,0,.3);max-height:min(620px,82vh)}
.chat-cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--tinta);color:#fff;padding:.95rem 1.15rem;
}
.chat-cabeza b{font-family:'Outfit',sans-serif;font-size:1.02rem;display:block}
.chat-cabeza span{font-size:.71rem;letter-spacing:.09em;color:var(--naranja);display:block;margin-top:.1rem}
.chat-x{background:none;border:0;color:rgba(255,255,255,.65);font-size:1.6rem;line-height:1;cursor:pointer}
.chat-x:hover{color:#fff}
.chat-hilo{flex:1;overflow-y:auto;padding:1.15rem;display:flex;flex-direction:column;gap:.6rem;scroll-behavior:smooth}
.chat-dice,.chat-contesta{
  margin:0;font-size:.92rem;line-height:1.5;padding:.7rem .95rem;max-width:86%;
  animation:asoma .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes asoma{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-dice{background:var(--hueso);color:var(--suave);align-self:flex-start;border-left:2px solid var(--naranja)}
.chat-contesta{background:var(--tinta);color:#fff;align-self:flex-end;text-align:right}
.chat-cierre{background:var(--hueso);border-top:3px solid var(--verde-alas);padding:1rem;margin-top:.4rem}
.chat-cierre b{font-family:'Outfit',sans-serif;font-size:1.12rem;color:var(--tinta)}
.chat-cierre p{margin:.35rem 0 0;font-size:.9rem;color:#5A5A5A;line-height:1.5}
.chat-pie{padding:.9rem 1.15rem 1.1rem;background:#fff;border-top:1px solid rgba(0,0,0,.09);display:flex;flex-wrap:wrap;gap:.5rem}
.chat-op{
  background:none;border:1px solid var(--tinta);color:var(--tinta);cursor:pointer;
  padding:.6rem .95rem;font:500 .86rem/1.2 'Inter',system-ui,sans-serif;
  transition:background .2s,color .2s;
}
.chat-op:hover,.chat-op.marcada{background:var(--tinta);color:#fff}
.chat-op.marcada::before{content:'✓ ';font-weight:700}
.chat-ok{
  background:var(--naranja);border:1px solid var(--naranja);color:var(--tinta);cursor:pointer;
  padding:.62rem 1.2rem;font:600 .84rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.03em;
}
.chat-ok:hover:not(:disabled){background:var(--tinta);border-color:var(--tinta);color:#fff}
.chat-ok:disabled{opacity:.4;cursor:not-allowed}
.chat-salta{background:none;border:0;color:#9A9A9A;cursor:pointer;text-decoration:underline;font:.82rem 'Inter',system-ui,sans-serif}
.chat-campo{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}
.chat-campo input{
  flex:1 1 12rem;border:0;border-bottom:1px solid rgba(0,0,0,.26);background:none;
  padding:.55rem .1rem;font:1rem 'Inter',system-ui,sans-serif;color:var(--tinta);
}
.chat-campo input:focus{outline:0;border-bottom-color:var(--naranja)}
.chat-campo input.malo{border-bottom-color:#B3261E}
.chat-malo{width:100%;margin:.15rem 0 0;font-size:.8rem;color:#B3261E}
.chat-esperando{margin:0;font-size:.86rem;color:#9A9A9A}
.letra-chica{font-size:.82rem;color:var(--dato);margin:0}


/* ==========================================================================
   LAS TRES PUERTAS
   La corrección de venta más importante. La versión anterior ofrecía «Pedir una
   muestra» cuatro veces y nada más: una muestra le sirve a un chef, a un
   mayorista no le mueve y a un consumidor de clase alta menos.
   No son tres tarjetas iguales en rejilla —ése fue uno de los rasgos que se
   rechazaron—: son tres columnas separadas por filete, y la tercera, que es la
   de casa, lleva el filete naranja porque es el canal que nadie más ofrece.
   ========================================================================== */
.caminos{
  background:var(--hueso);padding:clamp(3rem,6vw,5rem) clamp(1.2rem,5vw,4rem);
  border-top:1px solid rgba(0,0,0,.09);
}
.caminos-intro{max-width:1200px;margin:0 auto clamp(2rem,4vw,3rem)}
.caminos-intro h2{margin-bottom:.9rem}
.puertas{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--tinta);
}
.puerta{
  padding:1.7rem 1.7rem 1.9rem 0;border-right:1px solid rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.puerta:last-child{border-right:0;padding-right:0}
/* La puerta que lleva el filete naranja es la de HORECA: es el mercado
   número uno y la jerarquía tiene que decirlo sin escribirlo. Antes lo
   llevaba la de casa, cuando esa puerta ofrecía un canal que no existe. */
.puerta.p-horeca{border-top:3px solid var(--naranja);margin-top:-2px;padding-top:1.6rem}
.puerta-punta{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja);margin:0 0 .8rem;
}
.puerta h3{font-size:clamp(1.16rem,2.2vw,1.44rem);margin-bottom:.6rem}
.puerta-texto{font-size:.93rem;color:#4A4A4A;margin-bottom:1.1rem}
.puerta-lista{list-style:none;margin:0 0 1.4rem;padding:0}
.puerta-lista li{
  font-size:.87rem;color:var(--suave);padding:.28rem 0 .28rem 1.15rem;position:relative;
}
.puerta-lista li::before{
  content:'';position:absolute;left:0;top:.86rem;width:7px;height:7px;
  background:var(--naranja);
}
.puerta-botones{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem}
.puerta-botones .pedir{font-size:.84rem;padding:.7rem 1.15rem}

/* El botón de WhatsApp lleva su ícono dibujado, no una imagen: una imagen más
   es una petición más, y esto es un contorno de dos trazos. */
.wasap::before{
  content:'';width:15px;height:15px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--icono-wa) center/contain no-repeat;
          mask:var(--icono-wa) center/contain no-repeat;
}
:root{
  --icono-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.97L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.79 14.1c-.24.68-1.4 1.3-1.93 1.35-.53.05-1.02.24-3.45-.72-2.93-1.15-4.76-4.2-4.9-4.39-.14-.19-1.15-1.53-1.15-2.92 0-1.39.73-2.07 1-2.35.26-.29.57-.36.76-.36.19 0 .38 0 .55.01.18.01.41-.07.64.49.24.58.79 1.97.86 2.11.07.14.12.31.02.5-.1.19-.15.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.29-.12.57.17.29.75 1.24 1.61 2.01 1.11.99 2.04 1.3 2.33 1.44.29.14.46.12.63-.07.17-.19.72-.84.91-1.13.19-.29.38-.24.65-.14.26.1 1.66.78 1.95.93.29.14.48.22.55.34.07.12.07.7-.17 1.38z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- cómo se entrega */
.caja-envio{
  max-width:1200px;margin:clamp(2rem,4vw,3rem) auto 0;
  display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(1.2rem,3vw,2.2rem);
  align-items:center;
}
.caja-foto{aspect-ratio:3/2}
.caja-decir h3{font-size:clamp(1.02rem,2vw,1.2rem);margin-bottom:.55rem}
.caja-decir p{font-size:.93rem;color:#4A4A4A;margin:0 0 1rem;max-width:62ch}
.caja-cifras{
  display:grid;grid-template-columns:auto auto;gap:.35rem 1.2rem;
  margin:0;justify-content:start;
}
.caja-cifras dt{font-size:.86rem;color:var(--dato)}
.caja-cifras dd{
  margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinta);
}

/* ------------------------------------------------------- la zona y su día */
.zonas{
  background:var(--hueso);padding:clamp(2.6rem,5vw,4rem) clamp(1.2rem,5vw,4rem);
  border-top:1px solid rgba(0,0,0,.09);
}
.zonas-cuerpo{max-width:760px;margin:0 auto;text-align:center}
.zonas-cuerpo h2{margin-bottom:.9rem}
.zonas-cuerpo .entrada{margin:0 auto 1.5rem;max-width:60ch}
.zonas-busca{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;justify-content:center;
}
.zonas-busca label{display:flex;flex-direction:column;gap:.3rem;text-align:left}
.zonas-busca span{
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dato);
}
.zonas-busca input{
  border:0;border-bottom:1.5px solid var(--tinta);background:none;
  padding:.55rem .2rem;font:inherit;font-size:1.1rem;width:9rem;
  font-variant-numeric:tabular-nums;
}
.zonas-busca input:focus{outline:2px solid var(--naranja);outline-offset:3px}
.zonas-respuesta{
  margin:1.3rem auto 0;max-width:56ch;font-size:.97rem;color:var(--tinta);min-height:1.4em;
}
.zonas-respuesta b{color:var(--naranja)}
/* El boton sale CON la respuesta, no antes: antes compite con el campo, que
   es lo unico que hay que llenar primero. */
.zonas-accion{margin:1.1rem 0 0;display:none}
.zonas-accion.vive{display:block}

/* ==========================================================================
   LAS TRES VERTIENTES DE COMPRA
   WhatsApp, dejar los datos, o agendar una visita. NO van numeradas aunque se
   dictaron como a) b) c): no son una secuencia, son alternativas, y numerar
   alternativas hace creer que hay que pasar por las tres. Lo que las separa es
   a quien le sirve cada una.
   ========================================================================== */
.vias{
  background:var(--hueso);padding:clamp(3rem,6vw,5rem) clamp(1.2rem,5vw,4rem);
  border-top:1px solid rgba(0,0,0,.09);
}
.vias-intro{max-width:1200px;margin:0 auto clamp(2rem,4vw,3rem)}
.vias-intro h2{margin-bottom:.9rem}
.via-lista{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--tinta);
}
.via{
  padding:1.7rem 1.7rem 1.9rem 0;border-right:1px solid rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.via:last-child{border-right:0;padding-right:0}
/* WhatsApp lleva el filete: en Mexico es donde se cierra, y es la via que a la
   vez captura el contacto sin pedirselo a nadie. */
.via.v-whatsapp{border-top:3px solid var(--naranja);margin-top:-2px;padding-top:1.6rem}
.via h3{font-size:clamp(1.16rem,2.2vw,1.44rem);margin-bottom:.6rem}
.via-texto{font-size:.93rem;color:#4A4A4A;margin-bottom:1rem}
.via-para{font-size:.85rem;color:var(--suave);margin-bottom:1.3rem}
.via-para span{
  display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dato);margin-bottom:.2rem;
}
.via .pedir{margin-top:auto;align-self:flex-start;font-size:.84rem;padding:.7rem 1.15rem}

/* --------------------------------------------------- el telefono, con clic
   El numero no se pinta: se pide. El boton se ve como un enlace y no como una
   llamada a la accion, porque no compite con «pedir muestra» — es la salida
   para quien de todos modos va a llamar. */
.tel-oculto{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.9rem;color:inherit;
  border-bottom:1px dashed currentColor;line-height:1.5;
}
.tel-oculto:hover{color:var(--naranja);border-bottom-style:solid}
.tel{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   LAS DOS LOGÍSTICAS
   Puebla es entrega a domicilio; los otros cuatro estados son mayoreo. Son dos
   negocios y la versión anterior los tenía como una sola lista de plazas.
   ========================================================================== */
.modos{
  max-width:1200px;margin:clamp(2.2rem,5vw,3.2rem) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
}
.modo{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.24)}
/* Puebla lleva el filete naranja: es la plaza con logística propia a domicilio
   y la jerarquía tiene que decirlo sin explicarlo. */
.modo.m-puebla{border-top:3px solid var(--naranja)}
.modo-punta{
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--naranja);margin:0 0 .7rem;
}
.modo h3{color:#fff;margin-bottom:.6rem}
.modo p{font-size:.93rem;color:rgba(255,255,255,.76);margin:0 0 .7rem}
.modo-para{font-size:.85rem;color:rgba(255,255,255,.6)}
.modo-para span{
  display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:.2rem;
}
.nota-pie.centro{text-align:center;max-width:64ch}
.forma-botones{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}


/* ==========================================================================
   LAS COLUMNAS
   Un solo patron para «para quien es ALZE», los pilares del desempeño y el
   recorrido de la frescura. Mismo filete superior que el resto del sitio:
   la pagina ya tiene un idioma y no hace falta inventarle otro.
   ========================================================================== */
.cols{
  background:#fff;padding:clamp(3rem,6vw,5rem) clamp(1.2rem,5vw,4rem);
  border-top:1px solid rgba(0,0,0,.09);
}
.cols.c-cocinas{background:var(--hueso)}
.cols-intro{max-width:1200px;margin:0 auto clamp(2rem,4vw,3rem)}
.cols-intro h2{margin-bottom:.9rem}
.cols-lista{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-top:2px solid var(--tinta);
}
.col{
  padding:1.5rem 1.5rem 1.6rem 0;border-right:1px solid rgba(0,0,0,.12);
}
.col:last-child{border-right:0;padding-right:0}
/* El primero lleva el filete naranja, como en las puertas y en la logistica:
   la jerarquia se dice con el mismo recurso en toda la pagina. */
.col:first-child{border-top:3px solid var(--naranja);margin-top:-2px;padding-top:1.4rem}
.col h3{font-size:clamp(1.04rem,2vw,1.24rem);margin-bottom:.5rem}
.col p{font-size:.9rem;color:#4A4A4A;margin:0}
/* El numero SOLO aparece donde el contenido es una secuencia de verdad. */
.col-n{
  font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.16em;color:var(--naranja);margin:0 0 .5rem;
}

/* ==========================================================================
   EL PRECIO Y EL VALOR
   Sobre tinta, como la cobertura: son los dos bloques que contestan una
   objecion, y el contraste los separa del resto.
   ========================================================================== */
.valor{
  background:var(--tinta);color:#fff;
  padding:clamp(3.2rem,6vw,5.2rem) clamp(1.2rem,5vw,4rem);
}
.valor h2{color:#fff}
.valor h2 .linea:last-child{color:var(--naranja)}
.valor .entrada{color:rgba(255,255,255,.82)}
.valor-cuerpo{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,3.6rem);
  align-items:start;
}
.valor-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.valor-col h3{
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:.9rem;
}
.valor-col ul{list-style:none;margin:0;padding:0}
.valor-col li{
  font-size:.9rem;color:rgba(255,255,255,.8);padding:.34rem 0 .34rem 1.1rem;
  position:relative;
}
.valor-col li::before{
  content:'';position:absolute;left:0;top:.82rem;width:6px;height:6px;
  background:var(--naranja);
}
/* La columna de la cocina es la que importa: se marca con el filete. */
.valor-col:last-child{border-left:2px solid var(--naranja);padding-left:clamp(1rem,2vw,1.6rem)}
.centro{text-align:center}
.valor .centro{margin-top:1.6rem}

/* ------------------------------------------------------------- el cierre */
.cierre{
  background:var(--hueso);text-align:center;
  padding:clamp(3.4rem,7vw,5.6rem) clamp(1.2rem,5vw,4rem);
  border-top:1px solid rgba(0,0,0,.09);
}
.cierre h2{font-size:clamp(1.7rem,4.4vw,3rem);margin-bottom:1rem}
.cierre h2 .linea:last-child{color:var(--naranja)}
.cierre .entrada{max-width:54ch;margin:0 auto 1.8rem}

/* ------------------------------------- el titular que rota, sin brincos */
.portada-texto h1,.portada-texto .entrada{transition:opacity .55s ease}
.portada-texto.mudando h1,.portada-texto.mudando .entrada{opacity:0}

/* ------------------------------------------ la aplicacion, antes que la ficha */
.pres-cuando{
  font-size:.88rem;color:var(--tinta);font-weight:500;margin:-.2rem 0 .55rem;
}

/* ------------------------------------------------- la jerarquia de publicos
   HORECA es el mercado principal y la pagina tiene que decirlo sin escribirlo:
   su puerta va a tamaño completo y las otras dos, que son negocio real pero
   secundario, se leen un punto mas abajo. */
.puerta.n-principal h3{font-size:clamp(1.3rem,2.7vw,1.7rem)}
.puerta.n-segundo,.puerta.n-tercero{opacity:.9}
.puerta.n-segundo h3,.puerta.n-tercero h3{font-size:clamp(1.04rem,1.9vw,1.2rem)}
.puerta.n-segundo .puerta-texto,.puerta.n-tercero .puerta-texto{font-size:.88rem}

/* ---------------------------------------- «Quiero probarlo» es la via que manda */
.via.manda h3{font-size:clamp(1.3rem,2.7vw,1.66rem)}
.via.manda .pedir{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.via.manda .pedir:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}


/* ------------------------------------------------- el paso siguiente
   Cierra una seccion que ya explico algo. Va centrado y con aire arriba para
   que se lea como un final de capitulo y no como un anuncio metido a media
   lectura: el encargo pide conducir, no perseguir. */
.paso-siguiente{
  margin:clamp(2rem,4vw,3rem) auto 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.paso-pregunta{
  font-size:clamp(1rem,1.8vw,1.14rem);color:var(--tinta);font-weight:500;
  max-width:46ch;line-height:1.45;
}
/* Sobre seccion oscura. Sin esto el texto hereda la tinta y queda NEGRO SOBRE
   NEGRO: ahi estaba, se servia en el HTML, y no lo leia nadie. */
.paso-pregunta.claro{color:rgba(255,255,255,.84)}


/* ==========================================================================
   LAS MEDIA QUERIES VAN AL FINAL, Y NO ES ESTILO: ES QUE FUNCIONEN

   Una media query tiene la MISMA especificidad que la regla base que
   corrige, asi que gana la que se escribe despues. Mientras estos bloques
   vivieron a media hoja, cada regla base agregada mas abajo las anulaba en
   silencio: 19 reglas de movil se leian como vivas y no se aplicaban
   nunca. En la pantalla eso era las tres vias apretadas en tres columnas
   dentro de 390 px, saliendose de la pantalla.

   Aqui abajo se agrega lo nuevo que sea de movil. Arriba, nunca.
   ========================================================================== */

/* --------------------------------------------------------------- pantallas */
@media (max-width:980px){
  .cert-cuerpo,.prueba-cierre,.entrega-cuerpo,.muestra-cuerpo,.pie-alto{grid-template-columns:1fr}
  .cert-lado{grid-template-columns:1fr 1fr}
  .chequeos{grid-template-columns:1fr}
  .chequeos li{border-right:0;border-bottom:1px solid rgba(0,0,0,.12);padding-right:0}
  .chequeos li:last-child{border-bottom:0}
  .cifras{grid-template-columns:1fr}
  .lineas,.bodegas{grid-template-columns:1fr}
  /* Las cuatro presentaciones pasan a dos columnas: en tableta, cuatro
     columnas dejan el peso «65 g mínimo» partido en dos renglones. */
  .presenta-intro.con-foto{grid-template-columns:1fr}
  .valor-cuerpo{grid-template-columns:1fr}
  .valor-col:last-child{border-left:0;padding-left:0;border-top:2px solid var(--naranja);padding-top:1rem}
  .aclara.con-foto{grid-template-columns:1fr}
  .caja-envio{grid-template-columns:1fr}
  .rejilla-pres{grid-template-columns:1fr 1fr}
  .pres:nth-child(2n){border-right:0;padding-right:0}
  .pres:nth-child(n+3){border-top:1px solid rgba(0,0,0,.12);padding-top:1.4rem}
  .via-lista{grid-template-columns:1fr}
  .via{border-right:0;border-bottom:1px solid rgba(0,0,0,.12);padding-right:0}
  .via:last-child{border-bottom:0}
  .via.v-whatsapp{margin-top:0}
}

@media (max-width:560px){
  /* La ficha pasa a una columna: con `auto 1fr` la etiqueta «Organismo
     certificador» se come el ancho y el valor se desborda. */
  .ficha{grid-template-columns:1fr;gap:.1rem}
  .ficha dd{margin-bottom:.75rem}
  .puerta-botones{flex-direction:column;align-items:stretch}
  .puerta-botones .pedir{width:100%}
  .portada-botones{flex-direction:column;align-items:flex-start}
  .portada-botones .pedir{width:100%}
  /* En celular las cuatro presentaciones van una debajo de otra: a dos
     columnas de 160 px el tamaño y el peso se encimaban. */
  .rejilla-pres{grid-template-columns:1fr}
  .valor-cols{grid-template-columns:1fr}
  .cols-lista{grid-template-columns:1fr}
  .col{border-right:0;border-bottom:1px solid rgba(0,0,0,.12);padding-right:0}
  .col:last-child{border-bottom:0}
  .col:first-child{margin-top:0}
  .pres{border-right:0;border-bottom:1px solid rgba(0,0,0,.12);padding-right:0}
  .pres:last-child{border-bottom:0}
  .pres:nth-child(n+3){border-top:0}
  .pres.destacada{margin-top:0}
  .via .pedir{width:100%;text-align:center;justify-content:center}
}

@media (max-width:760px){
  .cortina-btn{display:block}
  .navegacion{
    position:fixed;inset:0;background:var(--hueso);flex-direction:column;
    justify-content:center;gap:1.5rem;transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,.61,.36,1);margin:0;
  }
  .navegacion.abierta{transform:none}
  .navegacion a{font-size:1.3rem}
  .pedir.fijo{display:inline-flex;left:1rem;right:1rem;text-align:center}
  .cert-lado{grid-template-columns:1fr}
  .cert-foto.f1 .marco{margin-top:0}
  .forma-rejilla{grid-template-columns:1fr}
  .portada-texto{padding-top:clamp(5rem,12vh,7rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portada-foto img{animation:none}
  [data-entra],[data-entra].dentro{opacity:1;transform:none;transition:none}
  .cadena{scroll-behavior:auto}
  .pedir{transition:none}
}

@media (max-width:560px){
  .callbox{right:.7rem;left:.7rem;bottom:.7rem;width:auto}
  .chat{max-height:78vh}
  .callbox.vive ~ .pedir.fijo{display:none}
}

@media (prefers-reduced-motion:reduce){
  .callbox{transition:none}
  .callbox-tirador::before{animation:none}
  .chat-dice,.chat-contesta{animation:none}
  .chat-hilo{scroll-behavior:auto}
}

@media (max-width:980px){
  .puertas{grid-template-columns:1fr}
  .puerta{border-right:0;border-bottom:1px solid rgba(0,0,0,.12);padding-right:0}
  .puerta:last-child{border-bottom:0}
  .puerta.p-horeca{margin-top:0}
  .modos{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .portada-texto h1,.portada-texto .entrada{transition:none}
}