@charset "UTF-8";
/* ==========================================================================
D.D Fit Meals — Miami, FL
Meal prep latino. Landing de captación.
El sistema sale del logotipo (verde bosque + mostaza dorada) y de la olla:
el achiote del sofrito es el único color de acción. Hueso cálido de fondo
porque es la temperatura real del granito de las fotos de las clientas.
========================================================================== */
/* ─── 1 · TOKENS ─────────────────────────────────────────────────────────── */
/* Los tokens ya NO están en este fichero. Se sacaron cuando apareció el panel
para que la landing y el panel no puedan divergir de marca.
Quién los define, según la página:
· index.php → el bloque de CSS crítico en línea del . Esta hoja se
carga diferida (media="print" + onload), así que los tokens tienen que
estar ya en el documento antes de que llegue. NO añadas aquí un @import
de tokens.css: reintroduciría el bloqueo de render que ese truco evita.
· /panel/ →
Las custom properties se resuelven al calcular el valor, no al parsear, así
que a esta hoja le basta con que alguien las haya declarado en :root.
Si tocas un color, hay que tocarlo en tokens.css Y en el crítico de
index.php. Son los dos únicos sitios. */
/* ─── 3 · BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
margin:0;
background:var(--hueso);
color:var(--tinta);
font-family:var(--f-texto);
font-variation-settings:'wght' 400,'wdth' 100;
font-size:var(--t-base);
line-height:var(--lh-base);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* Grano: textura de lona de toldo. Mata el banding del verde y le da al papel
una superficie. Va sobre el papel y sobre el verde, NUNCA sobre la comida. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
opacity:.045;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Las fotos se aíslan por encima del grano. Las barras de UI, por encima de
las fotos: si no, la foto del hero taparía la barra fija al hacer scroll. */
.marco,.hero__foto{isolation:isolate;position:relative;z-index:61}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);text-wrap:balance}
h1{font-variation-settings:'wght' 780,'wdth' 112;font-size:var(--t-3xl);
line-height:var(--lh-mega);letter-spacing:var(--tr-mega);text-indent:-.045em}
h2{font-variation-settings:'wght' 760,'wdth' 108;font-size:var(--t-2xl);
line-height:var(--lh-corto);letter-spacing:var(--tr-mega);text-indent:-.04em}
h3{font-variation-settings:'wght' 680,'wdth' 104;font-size:var(--t-md);
line-height:var(--lh-corto);letter-spacing:var(--tr-corto)}
p{margin:0;text-wrap:pretty;max-width:var(--medida)}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote,dl,dd{margin:0}
::selection{background:var(--oro);color:var(--verde-900)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--oro);outline-offset:3px;border-radius:var(--r-1)}
.salto{position:absolute;left:var(--gutter);top:-100px;z-index:99;
background:var(--verde);color:var(--tinta-inv);padding:var(--e-3) var(--e-5);
border-radius:0 0 var(--r-2) var(--r-2);text-decoration:none;
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-sm);
transition:top var(--dur-1) var(--ease)}
.salto:focus{top:0}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ─── 4 · REJILLA DE SECCIÓN ─────────────────────────────────────────────── */
/* Exactamente dos selectores tocan padding-block en todo el proyecto. */
.seccion{padding-block:var(--pad-seccion)}
.seccion--losa{padding-block:var(--pad-losa);
background:var(--verde);color:var(--tinta-inv)}
.seccion--hundido{background:var(--hueso-hundido)}
.seccion--noche{background:var(--verde-900);color:var(--tinta-inv)}
.seccion--banda{border-top:1px solid var(--filete-verde);
border-bottom:1px solid var(--filete-verde)}
.seccion__interior{max-width:var(--shell);margin-inline:auto;
padding-inline:var(--gutter)}
.seccion--losa :is(h1,h2,h3),.seccion--noche :is(h1,h2,h3){color:var(--tinta-inv)}
/* Cadencia común, sin una sola excepción:
eyebrow → 14px → H2 → 20px → entradilla → 48px → contenido */
.eyebrow{display:block;margin:0;font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;
font-size:clamp(.6875rem,.66rem + .1vw,.8125rem);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);
color:var(--tinta-tenue);text-wrap:balance}
.seccion--losa .eyebrow,.seccion--noche .eyebrow{color:var(--oro)}
.eyebrow + h2,.eyebrow + h1{margin-top:14px}
h2 + .entradilla,h1 + .entradilla{margin-top:20px}
.entradilla{font-size:var(--t-md);line-height:1.36;color:var(--tinta-suave);
letter-spacing:var(--tr-corto);max-width:44ch}
.seccion--losa .entradilla,.seccion--noche .entradilla{color:var(--tinta-inv-suave)}
.cabecera + *{margin-top:48px}
.firma{font-family:var(--f-voz);font-style:italic;font-size:var(--t-lg);
line-height:1.3;max-width:34ch}
/* ─── 5 · BOTONES ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
font-family:var(--f-display);font-variation-settings:'wght' 650,'wdth' 100;
font-size:var(--t-base);letter-spacing:var(--tr-micro);
padding:1.05rem 1.9rem;border:1px solid transparent;border-radius:var(--r-2);
cursor:pointer;text-decoration:none;text-align:center;
transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease)}
.btn--primario{background:var(--achiote);color:var(--hueso-claro)}
.btn--primario:hover{background:var(--achiote-hover);transform:translateY(-1px);
box-shadow:var(--sombra-2)}
.btn--primario:active{transform:translateY(0);box-shadow:var(--sombra-1)}
.btn--oro{background:var(--oro);color:var(--verde)}
.btn--oro:hover{background:var(--oro-hover);transform:translateY(-1px);
box-shadow:0 8px 24px -10px rgba(233,178,60,.55)}
.btn--oro:active{transform:translateY(0)}
.btn--fantasma{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.btn--fantasma:hover{background:var(--verde-wash);border-color:var(--verde)}
.seccion--losa .btn--fantasma,.seccion--noche .btn--fantasma{
color:var(--tinta-inv);border-color:var(--linea-inv-alta)}
.seccion--losa .btn--fantasma:hover,.seccion--noche .btn--fantasma:hover{
background:rgba(247,239,227,.08)}
.btn--sm{padding:.62rem 1.1rem;font-size:var(--t-sm)}
.btn--ancho{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed;
transform:none!important;box-shadow:none}
.btn[aria-busy="true"]::after{content:"";width:1em;height:1em;border:2px solid currentColor;
border-right-color:transparent;border-radius:50%;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
/* Enlace de texto con filete: el subrayado es del achiote, el texto no. */
.enlace{color:inherit;text-decoration:none;
border-bottom:1px solid var(--achiote);padding-bottom:1px;
transition:border-color var(--dur-1) var(--ease)}
.enlace:hover{border-color:var(--achiote-hover)}
.seccion--losa .enlace,.seccion--noche .enlace{border-bottom-color:var(--oro)}
/* ─── 6 · TARJETAS ───────────────────────────────────────────────────────── */
.tarjeta{background:var(--hueso-claro);border-radius:var(--r-3);
box-shadow:var(--sombra-1),var(--filete-interior);padding:var(--e-6)}
.tarjeta--plana{background:transparent;box-shadow:none;
border-top:1px solid var(--linea);padding-inline:0}
.tarjeta--inv{background:var(--verde-700);color:var(--tinta-inv);
box-shadow:inset 0 0 0 1px var(--linea-inv)}
/* ─── 7 · BARRA SUPERIOR ─────────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:70;background:var(--hueso);
border-bottom:1px solid var(--linea)}
.barra__interior{max-width:var(--shell);margin-inline:auto;
padding:var(--e-3) var(--gutter);
display:flex;align-items:center;gap:var(--e-5)}
.marca{display:flex;align-items:center;gap:var(--e-3);text-decoration:none;
margin-right:auto}
.marca img{height:34px;width:auto}
.marca__nombre{font-family:var(--f-display);
font-variation-settings:'wght' 700,'wdth' 100;font-size:var(--t-sm);
letter-spacing:var(--tr-corto);white-space:nowrap}
.barra__nav{display:none;gap:var(--e-5)}
.barra__nav a{font-family:var(--f-display);
font-variation-settings:'wght' 500,'wdth' 100;font-size:var(--t-sm);
color:var(--tinta-suave);text-decoration:none;
transition:color var(--dur-1) var(--ease)}
.barra__nav a:hover{color:var(--tinta)}
.barra__acciones{display:flex;align-items:center;gap:var(--e-4)}
/* Aquí vivía `.barra__wa`, el enlace directo a WhatsApp de la barra superior.
Se quitó el 5/8/2026 junto con los otros dos atajos al chat: el negocio se
cierra por WhatsApp, pero se llega por el formulario. Quien entraba por el
enlace directo no dejaba nombre, teléfono, dirección ni zona — ni lead que
recuperar, ni nada que mandarle a Meta. En móvil la barra se queda solo con
la marca, que es correcto: el botón está en el hero y en la barra inferior. */
@media (min-width:1024px){.barra__nav{display:flex}}
@media (max-width:1023px){.barra .btn{display:none}}
/* ─── 8 · HERO ───────────────────────────────────────────────────────────── */
/* Móvil primero: el hero entero es la losa verde y la foto sangra de lado a
lado justo bajo el pliegue. La losa recortada de escritorio solo aparece
cuando hay dos columnas que la justifiquen. */
.hero{position:relative;background:var(--verde);overflow:hidden}
.hero__losa{display:none}
.hero__interior{position:relative;max-width:var(--shell);margin-inline:auto;
padding-inline:var(--gutter);display:flex;flex-direction:column;gap:var(--e-8)}
.hero__texto{color:var(--tinta-inv)}
.hero__regla{display:block;width:28px;height:2px;background:var(--oro);
margin-bottom:var(--e-4);border:0}
.hero h1{margin-top:14px}
/* Cada frase del titular es un bloque. Tres frases, tres líneas, sin un solo
: si una frase no cabe, se parte dentro de su bloque y el sentido
sigue leyéndose por grupos. */
.hero h1 .linea{display:block}
.hero h1 .oro{color:var(--oro);font-style:normal}
.hero__sub{font-family:var(--f-voz);font-style:italic;font-size:var(--t-md);
line-height:1.38;color:var(--tinta-inv);max-width:34ch;margin-top:var(--e-5)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--e-4);margin-top:var(--e-7)}
.hero__micro{margin-top:var(--e-4);font-size:var(--t-xs);
color:var(--tinta-inv-suave);max-width:46ch;line-height:1.5}
/* Línea de prueba: la miniatura es un recorte de la misma foto del hero.
Es la única prueba de macros de la parte alta de la página. */
.prueba{display:flex;align-items:center;gap:var(--e-3);margin-top:var(--e-6);
padding-top:var(--e-4);border-top:1px solid var(--linea-inv);max-width:none}
.prueba__mini{width:34px;height:34px;border-radius:50%;object-fit:cover;
flex:0 0 34px;box-shadow:inset 0 0 0 1px rgba(247,239,227,.28)}
.prueba__txt{font-size:var(--t-xs);color:var(--tinta-inv-suave);
font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.4}
.hero__foto{position:relative}
.hero__foto picture{display:block;height:100%}
.hero__foto img{width:100%;height:100%;object-fit:cover;
filter:saturate(1.07) contrast(1.05) brightness(1.02)}
/* Sin velo negro. Nunca. Velo cálido que unifica las cuatro fotos. */
.hero__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,rgba(233,178,60,.10),rgba(14,58,44,.14));
mix-blend-mode:multiply;opacity:.7}
.hero__credito{position:absolute;right:var(--e-4);bottom:var(--e-4);z-index:2;
font-size:var(--t-xs);color:var(--tinta-inv);letter-spacing:var(--tr-micro);
background:rgba(8,36,25,.62);padding:.35rem .7rem;border-radius:var(--r-1);
backdrop-filter:blur(3px)}
@media (max-width:1023px){
.hero__interior{gap:var(--e-6)}
.hero__foto{width:100vw;margin-inline:calc(50% - 50vw)}
/* La caja móvil es 4:5 sobre una imagen 1:2: solo se ve el 62,5 % del alto,
empezando en el 16,5 %. Al cambiar la foto del hero hay que recalcular este
porcentaje y mirarlo a ancho de móvil.
ESTA REGLA ESTÁ DUPLICADA en el CSS crítico de index.php. Las dos. */
.hero__foto img{aspect-ratio:4/5;object-position:50% 44%;border-radius:0}
.hero__ctas{flex-direction:column;align-items:stretch;gap:var(--e-3)}
.hero__ctas .btn--oro{width:100%;min-height:52px}
.hero__ctas .btn--fantasma{background:none;border:0;padding:0;
color:var(--tinta-inv);justify-content:flex-start;
text-decoration:underline;text-underline-offset:4px;
text-decoration-color:var(--oro)}
.hero__ctas .btn--fantasma:hover{background:none}
/* La línea de macros baja bajo la foto. */
.prueba{margin-top:0;padding-top:var(--e-5)}
}
@media (min-width:1024px){
.hero{min-height:min(92svh,900px);background:var(--hueso);
display:grid;align-items:stretch}
/* La losa sangra arriba, a la izquierda y a la DERECHA; solo deja asomar el
hueso en una banda de 40 px abajo, que es la repisa contra la que se
recorta la foto.
Antes también dejaba 40 px a la derecha y era un error de juicio: a
1600 px esa banda es el 2,5 % del ancho —demasiado fina para leerse como
intención y demasiado ancha para pasar desapercibida— y encima chocaba
con los 272 px de margen que el texto respeta a la izquierda. La foto
ahora sale por el borde: la asimetría deja de parecer un descuadre y pasa
a ser lo que siempre quiso ser, una imagen que se sale de la página. */
.hero__losa{display:block;position:absolute;inset:0 0 40px 0;
background:var(--verde);pointer-events:none}
/* El texto respeta el ancho del shell; la columna de la foto se come todo
lo que quede hasta el borde derecho de la ventana. */
.hero__interior{display:grid;max-width:none;width:100%;
padding-left:max(var(--gutter), calc((100vw - var(--shell))/2 + var(--gutter)));
padding-right:0;
grid-template-columns:minmax(0,1fr) minmax(0,34vw);
grid-template-rows:auto auto;
column-gap:clamp(2rem,4vw,4.5rem);row-gap:var(--e-6);
align-items:center}
.hero__texto{grid-column:1;grid-row:1}
.prueba{grid-column:1;grid-row:2;margin-top:0}
/* Sin redondeo a la derecha ni sombra por ese lado: la foto ya no flota
dentro de la losa, se va por el borde de la ventana. */
.hero__foto{grid-column:2;grid-row:1/3;align-self:stretch;
margin-top:calc(-1 * var(--pad-losa));
height:calc(100% + 2 * var(--pad-losa) - 40px);
box-shadow:var(--sombra-3);
border-radius:var(--r-1) 0 0 var(--r-1)}
}
/* Secuencia de carga — la ÚNICA animada de toda la página. */
@media (prefers-reduced-motion:no-preference){
.entra{opacity:0;transform:translateY(14px);
animation:entra var(--dur-3) var(--ease) forwards}
.entra-1{animation-delay:.06s}.entra-2{animation-delay:.12s}
.entra-3{animation-delay:.18s}.entra-4{animation-delay:.24s}
.entra-5{animation-delay:.30s}.entra-6{animation-delay:.36s}
@keyframes entra{to{opacity:1;transform:none}}
}
/* ─── 9 · FRANJA DE OPERACIÓN ────────────────────────────────────────────── */
.operacion{display:grid;grid-template-columns:repeat(2,1fr)}
.operacion__celda{padding:var(--e-5) var(--e-5) var(--e-5) 0}
.operacion__celda + .operacion__celda{border-left:1px solid var(--linea);
padding-left:var(--e-5)}
.operacion__celda h3{font-variation-settings:'wght' 680,'wdth' 104;
font-size:var(--t-base);letter-spacing:var(--tr-corto)}
.operacion__celda p{margin-top:var(--e-2);font-size:var(--t-sm);
color:var(--tinta-suave);line-height:1.45}
@media (min-width:768px){
.operacion{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
.operacion__celda:nth-child(odd){border-left:0;padding-left:0}
.operacion__celda:nth-child(n+3){border-top:1px solid var(--linea)}
}
.tira-prueba{margin-top:var(--e-6);padding-top:var(--e-5);
border-top:1px solid var(--filete-verde);text-align:center;
font-family:var(--f-display);font-variation-settings:'wght' 620,'wdth' 90;
font-size:var(--t-xs);text-transform:uppercase;
letter-spacing:var(--tr-etiqueta);color:var(--tinta-tenue);
font-variant-numeric:tabular-nums;max-width:none}
/* ─── 10 · EL TABLERO DE LA SEMANA (elemento firma) ──────────────────────── */
.menu__cabecera{display:grid;gap:var(--e-5);align-items:end}
@media (min-width:900px){
.menu__cabecera{grid-template-columns:1fr auto;gap:var(--e-8)}
}
.menu__cierre{font-size:var(--t-sm);color:var(--tinta-tenue);
font-variant-numeric:tabular-nums;letter-spacing:-.01em;
text-align:left;max-width:22ch}
@media (min-width:900px){.menu__cierre{text-align:right;padding-bottom:.3rem}}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
background:var(--linea);border:1px solid var(--linea)}
.semana__dia{background:var(--hueso-claro);padding:var(--e-4) var(--e-2);
text-align:center;font-family:var(--f-display);
font-variation-settings:'wght' 700,'wdth' 84;font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-micro);color:var(--tinta-tenue)}
.semana__dia[data-entrega]{background:var(--oro);color:var(--verde)}
.semana__dia[data-entrega]::after{content:"ENTREGA";display:block;margin-top:var(--e-1);
font-size:.625rem;letter-spacing:.1em}
.semana__dia[data-cierre]::after{content:"cierre";display:block;margin-top:var(--e-1);
font-size:.625rem;color:var(--achiote-tinta);font-variation-settings:'wght' 600,'wdth' 90}
@media (max-width:600px){
.semana__dia{padding:var(--e-3) 2px;font-size:.7rem}
.semana__dia[data-entrega]::after{font-size:.5rem;letter-spacing:.01em}
.semana__dia[data-cierre]::after{font-size:.5rem;letter-spacing:.01em}
}
.rotulo{margin-top:var(--e-8);text-align:center;font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);
color:var(--tinta-tenue)}
.platos{margin-top:var(--e-5);
border-bottom:1px solid var(--filete-verde)}
/* La columna del nombre era de 7rem y «Albóndigas» (127px) y «Camarones»
(130px) se salían: son palabras sueltas, no pueden partirse, y se metían
encima de la descripción. 9rem las mete con holgura.
El `overflow-wrap` es el cinturón: el catálogo se edita desde el panel, así
que el nombre más largo no lo decide este CSS — lo decide Dilano. */
/* 12rem y no 9: con 9 partían en dos líneas «Carne molida» (9.25rem), «Pescado
blanco» (11.19) y «Picadillo de pavo» (11.75), que son tres de las ocho del
catálogo actual. La columna es fija —y no `max-content`— porque cada fila es
su propia rejilla: sin un ancho común, la descripción bailaría de fila en
fila. Si Dilano da de alta un nombre más largo que esto, `overflow-wrap` de
abajo lo parte sin desbordar, que es el comportamiento correcto. */
.plato{display:grid;grid-template-columns:minmax(0,12rem) 1fr auto;gap:var(--e-4);
align-items:baseline;padding-block:var(--e-4);
border-top:1px solid color-mix(in oklab, var(--verde) 16%, transparent);
transition:background-color var(--dur-1) var(--ease)}
.plato:hover{background:var(--hueso-hundido)}
.plato__nombre{font-family:var(--f-display);
font-variation-settings:'wght' 680,'wdth' 104;font-size:var(--t-md);
letter-spacing:var(--tr-corto);color:var(--tinta);overflow-wrap:anywhere}
.plato__origen{font-family:var(--f-voz);font-style:italic;font-size:var(--t-base);
color:var(--tinta-suave);max-width:none}
@media (max-width:720px){
.plato{grid-template-columns:1fr;gap:var(--e-1);padding-inline:var(--e-2)}
.plato .precio{text-align:left;min-width:0}
}
/* ─── MENÚ ROTULADO: cada proteína con SU bandeja ────────────────────────────
Con foto la fila deja de ser una fila y pasa a ser una tarjeta: la imagen
manda y el texto la acompaña. Es lo que pidió el cliente —ver el plato— y
además convierte mejor que una lista de nombres, porque quien compra comida
compra con los ojos.
El borde superior de `.plato` desaparece aquí: en rejilla dibujaría líneas
sueltas entre tarjetas que no significan nada. */
.platos--foto{display:grid;gap:var(--e-5);
grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.platos--foto .plato{grid-template-columns:1fr;gap:var(--e-2);
border-top:0;padding:0;align-items:start}
.platos--foto .plato:hover{background:transparent}
.plato__foto{display:block;overflow:hidden;border-radius:var(--r-2);
box-shadow:var(--sombra-1);background:var(--hueso-hundido)}
.plato__foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;
object-fit:cover;transition:transform var(--dur-2) var(--ease)}
/* RANURA SIN FOTO — la proteína existe y se vende igual, solo falta la toma.
Se marca en vez de esconderse: ocultar la fila hacía que el menú publicado
enseñara seis de ocho y pareciera incompleto. Ocupa exactamente el mismo
hueco que una bandeja (4/5) para que la rejilla no se descuadre cuando
llegue la foto y sustituya a esta caja. */
.plato__foto--pendiente{display:grid;place-items:center;aspect-ratio:4/5;
background:var(--hueso-hundido);box-shadow:var(--filete-interior);
border:1px dashed var(--linea-fuerte)}
.plato__foto--pendiente span{font-family:var(--f-voz);font-style:italic;
font-size:var(--t-sm);color:var(--tinta-tenue);text-align:center;
padding-inline:var(--e-3)}
.platos--foto .plato--agotado .plato__foto--pendiente{opacity:.55}
.platos--foto .plato:hover .plato__foto img{transform:scale(1.03)}
.platos--foto .plato__nombre{font-size:var(--t-base)}
.platos--foto .plato .precio{text-align:left;min-width:0;
font-size:var(--t-base);color:var(--achiote-tinta)}
/* Agotado: la foto baja de intensidad, no se esconde. Enseñar el catálogo
completo vende mejor que ocultar media carta sin explicación. */
.platos--foto .plato--agotado .plato__foto img{filter:grayscale(.7) opacity(.55)}
/* RANURA DE PRECIO — hoy vacía, mañana llena, el layout no se mueve un píxel.
Las filas cargan a la izquierda y dejan la derecha en blanco a propósito:
ese vacío es lo que hace que la columna exista antes que los precios. */
.precio{font-family:var(--f-display);
font-variation-settings:'wght' 600,'wdth' 100;font-variant-numeric:tabular-nums;
letter-spacing:-.01em;min-width:8.5rem;text-align:right}
.precio:not(:empty){color:var(--achiote-tinta);font-size:var(--t-md)}
.plato .precio:empty::before{content:""}
.plan .precio:empty::before{content:"Precio por WhatsApp";
font-variation-settings:'wght' 500,'wdth' 92;font-size:var(--t-sm);color:var(--tinta-tenue)}
.menu__notas{margin-top:var(--e-7);display:grid;gap:var(--e-5)}
@media (min-width:820px){.menu__notas{grid-template-columns:1fr 1fr;gap:var(--e-8)}}
.menu__cierre-frase{grid-column:1/-1;font-family:var(--f-voz);font-style:italic;
font-size:var(--t-lg);line-height:1.3;max-width:32ch}
.nota h4{font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);color:var(--tinta-tenue)}
.nota p{margin-top:var(--e-2);color:var(--tinta-suave);font-size:var(--t-sm)}
#precio-espera{margin-top:var(--e-6);font-size:var(--t-sm);color:var(--tinta-tenue)}
.filetes{margin-top:var(--e-8);border-bottom:1px solid var(--linea)}
.filete{display:grid;gap:var(--e-2);padding-block:var(--e-4)}
@media (min-width:720px){
.filete{grid-template-columns:minmax(0,12rem) 1fr;gap:var(--e-5);
align-items:baseline}
}
.filete h4{font-family:var(--f-display);
font-variation-settings:'wght' 680,'wdth' 104;font-size:var(--t-base);
letter-spacing:var(--tr-corto)}
.filete p{color:var(--tinta-suave);font-size:var(--t-sm)}
.pie-nota{margin-top:var(--e-6);font-size:var(--t-sm);color:var(--tinta-suave);
max-width:56ch}
.menu__cta{margin-top:var(--e-7)}
/* ─── 11 · PLANES ────────────────────────────────────────────────────────── */
.planes{display:grid;gap:var(--e-5)}
@media (min-width:900px){.planes{grid-template-columns:repeat(3,1fr);gap:var(--e-5)}}
.plan{display:flex;flex-direction:column;gap:var(--e-3);position:relative;
border-top:3px solid transparent}
.plan--destacado{box-shadow:var(--sombra-2),var(--filete-interior);
border-top:3px solid var(--oro)}
.plan__chip{align-self:flex-start;background:var(--oro-wash);color:var(--oro-tinta);
border-radius:var(--r-pill);padding:.28rem .8rem;
font-family:var(--f-display);font-variation-settings:'wght' 620,'wdth' 90;
font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--tr-micro)}
.plan__nombre{font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);color:var(--tinta-tenue)}
.plan__cifra{font-family:var(--f-display);
font-variation-settings:'wght' 760,'wdth' 104;font-size:var(--t-xl);
line-height:1;letter-spacing:var(--tr-mega);font-variant-numeric:tabular-nums}
.plan__reparto{font-family:var(--f-voz);font-style:italic;
font-size:var(--t-base);color:var(--tinta-suave)}
.plan__cuerpo{font-size:var(--t-sm);color:var(--tinta-suave);
padding-top:var(--e-3);border-top:1px solid var(--linea)}
.plan .precio{text-align:left;min-width:0;margin-top:auto;padding-top:var(--e-3)}
.plan .btn{margin-top:var(--e-3)}
.planes__pie{margin-top:var(--e-7);display:grid;gap:var(--e-5)}
.planes__ajustes{font-size:var(--t-sm);color:var(--tinta-suave)}
/* El aviso de la mensajería no puede leerse como letra pequeña: es una
condición de precio, y el cliente pidió expresamente que se diga en la web.
Mismo cuerpo que los ajustes, pero en tinta plena y con el filete de achiote
que en esta página significa «esto va en serio». */
.planes__envio{font-size:var(--t-sm);color:var(--tinta);
border-left:2px solid var(--achiote);padding-left:var(--e-4)}
/* Anclaje de precio: se queda siempre, con precio o sin él. */
.anclaje{border-left:2px solid var(--oro);padding-left:var(--e-5);
font-family:var(--f-voz);font-style:italic;font-size:var(--t-md);
line-height:1.42;color:var(--tinta);max-width:52ch}
#planes-espera{font-size:var(--t-sm);color:var(--tinta-tenue)}
/* ─── 12 · LA CUENTA + CÓMO FUNCIONA ─────────────────────────────────────── */
.cuenta{display:grid;gap:var(--e-6)}
@media (min-width:820px){
.cuenta{grid-template-columns:1fr 1fr;gap:var(--e-8)}
.cuenta__col + .cuenta__col{border-left:1px solid var(--linea-inv);
padding-left:var(--e-8)}
}
.cuenta__col h3{font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);color:var(--oro)}
.cuenta__col ul{margin-top:var(--e-5);display:grid;gap:var(--e-4)}
.cuenta__col li{font-size:var(--t-base);line-height:1.4}
.cuenta__ahora li{color:var(--tinta-inv-suave)}
.cuenta__con li{color:var(--tinta-inv);display:grid;
grid-template-columns:14px 1fr;gap:var(--e-3);align-items:baseline}
.cuenta__con li::before{content:"";display:block;width:14px;height:1px;
background:var(--oro);transform:translateY(-.4em)}
.cuenta__firma{margin-top:var(--e-8);color:var(--tinta-inv)}
.pasos{margin-top:var(--e-10);border-bottom:1px solid var(--linea-inv)}
.pasos__cabecera h2{font-size:var(--t-xl)}
.pasos__sub{margin-top:var(--e-3);color:var(--tinta-inv-suave);
font-family:var(--f-voz);font-style:italic;font-size:var(--t-md)}
.pasos__lista{margin-top:var(--e-7)}
.paso{display:grid;gap:var(--e-2);padding-block:var(--e-5);
border-top:1px solid var(--linea-inv)}
@media (min-width:720px){
.paso{grid-template-columns:3.5rem minmax(0,16rem) 1fr;gap:var(--e-5);
align-items:baseline}
}
.paso__n{font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-sm);
letter-spacing:var(--tr-etiqueta);color:var(--oro);
font-variant-numeric:tabular-nums}
.paso h3{color:var(--tinta-inv);font-size:var(--t-base);
font-variation-settings:'wght' 680,'wdth' 104}
.paso p{color:var(--tinta-inv-suave);font-size:var(--t-sm)}
.como__cta{margin-top:var(--e-8)}
/* ─── 13 · BENEFICIOS ────────────────────────────────────────────────────── */
.beneficios{border-bottom:1px solid var(--linea)}
.beneficio{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--e-4);
align-items:baseline;padding-block:var(--e-4);
border-top:1px solid var(--linea)}
.beneficio__n{font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 90;font-size:var(--t-sm);
letter-spacing:var(--tr-etiqueta);color:var(--oro-tinta);
font-variant-numeric:tabular-nums}
.beneficio p{font-size:var(--t-md);letter-spacing:var(--tr-corto);
line-height:1.28;max-width:38ch}
.beneficios__firma{margin-top:var(--e-6)}
/* ─── 14 · LA MESA DE LAS CLIENTAS (UGC) ─────────────────────────────────── */
.rail{display:flex;gap:var(--e-5);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-padding-inline:var(--gutter);scrollbar-width:none;
padding-bottom:var(--e-5)}
.rail::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 clamp(240px,66vw,320px);scroll-snap-align:start;
display:flex;flex-direction:column}
.rail__progreso{height:2px;background:var(--linea-fuerte);margin-top:var(--e-2)}
.rail__progreso i{display:block;height:100%;background:var(--oro);width:30%;
transition:width var(--dur-2) var(--ease)}
/* Un solo marco para las tres fotos: mismos márgenes en los cuatro lados,
rotación cero, contramarco de hueso. Eso solo mata el efecto collage. */
.marco{overflow:hidden;background:var(--hueso);padding:8px;
box-shadow:var(--sombra-1)}
.marco__ventana{position:relative;overflow:hidden;border-radius:var(--r-1);
box-shadow:inset 0 0 0 1px rgba(247,239,227,.14)}
.marco img{aspect-ratio:4/5;width:100%;object-fit:cover;
filter:saturate(1.07) contrast(1.05) brightness(1.02);
transition:transform .5s var(--ease)}
.marco__ventana::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,rgba(233,178,60,.10),rgba(14,58,44,.14));
mix-blend-mode:multiply;opacity:.7}
.marco:hover img,.marco:focus-within img{transform:scale(1.035)}
.ugc__handle{display:flex;align-items:center;gap:6px;margin-top:var(--e-4);
font-family:var(--f-display);font-variation-settings:'wght' 620,'wdth' 100;
font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--tr-micro);
color:var(--tinta-suave)}
.ugc__check{width:12px;height:12px;flex:0 0 12px;color:var(--oro-tinta)}
.ugc__cita{margin-top:var(--e-3);font-family:var(--f-voz);font-style:italic;
font-size:var(--t-lg);line-height:1.28;hanging-punctuation:first;
color:var(--tinta)}
.ugc__macros{margin-top:var(--e-4);padding-top:var(--e-3);
border-top:1px solid var(--filete-verde);
font-family:var(--f-display);font-variation-settings:'wght' 600,'wdth' 100;
font-variant-numeric:tabular-nums;letter-spacing:-.01em;
font-size:var(--t-sm);color:var(--achiote-tinta)}
.ugc__fuente{margin-top:var(--e-1);font-size:var(--t-xs);color:var(--tinta-tenue)}
/* La segunda tarjeta del raíl no es una foto: es una losa tipográfica.
Rompe el ritmo del carrusel y evita que tres fotos parezcan una cuadrícula. */
.rail__losa{background:var(--verde);color:var(--tinta-inv);
padding:var(--e-6);display:flex;align-items:center;
aspect-ratio:4/5;box-shadow:var(--sombra-verde)}
.rail__losa p{font-family:var(--f-voz);font-style:italic;font-size:var(--t-lg);
line-height:1.3;color:var(--tinta-inv)}
.rail__mandos{display:flex;align-items:center;gap:var(--e-3);
margin-top:var(--e-4)}
.rail__btn{width:40px;height:40px;display:grid;place-items:center;
background:transparent;border:1px solid var(--linea-fuerte);
border-radius:var(--r-2);cursor:pointer;
transition:background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease)}
.rail__btn:hover{background:var(--verde-wash);border-color:var(--verde)}
.rail__btn svg{width:14px;height:14px}
.rail__mandos .rail__progreso{flex:1;margin-top:0}
.clientas__fuente{margin-top:var(--e-5);font-size:var(--t-xs);
color:var(--tinta-tenue)}
.clientas__cierre{margin-top:var(--e-8);display:flex;flex-wrap:wrap;
align-items:center;gap:var(--e-6);justify-content:space-between}
/* ─── 15 · QUIÉN COCINA ──────────────────────────────────────────────────── */
.cocina{display:grid;gap:var(--e-8)}
@media (min-width:900px){.cocina{grid-template-columns:1.15fr .85fr;gap:var(--e-10)}}
.cocina p{color:var(--tinta-suave)}
.cocina__firma{margin-top:var(--e-5);color:var(--tinta)}
.sello{display:inline-block;margin-top:var(--e-5);padding:.4rem .9rem;
background:var(--oro-wash);color:var(--oro-tinta);border-radius:var(--r-1);
font-size:var(--t-xs);letter-spacing:var(--tr-micro);
font-variation-settings:'wght' 620,'wdth' 90}
.sello[hidden]{display:none}
.zonas h3{margin-bottom:var(--e-4)}
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-block:var(--e-4)}
.chips li{background:var(--oro-wash);color:var(--oro-tinta);
border-radius:var(--r-pill);padding:.34rem .85rem;font-size:var(--t-sm);
font-variation-settings:'wght' 550,'wdth' 100}
.zonas p{font-size:var(--t-sm);color:var(--tinta-suave);margin-top:var(--e-4)}
/* ─── 16 · FORMULARIO ────────────────────────────────────────────────────── */
.pedido{display:grid;gap:var(--e-8)}
@media (min-width:1024px){
.pedido{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--e-10);
align-items:start}
}
.pedido__escasez{margin-top:var(--e-6);font-size:var(--t-sm);
color:var(--tinta-inv);padding-left:var(--e-4);
border-left:2px solid var(--oro)}
.pedido__ref{margin-top:var(--e-5);font-size:var(--t-xs);
color:var(--tinta-inv-suave);font-variant-numeric:tabular-nums;
letter-spacing:var(--tr-micro)}
.formulario{display:grid;gap:var(--e-5)}
.fila{display:grid;gap:var(--e-5)}
@media (min-width:600px){.fila--2{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:var(--e-2)}
.campo__label{font-family:var(--f-display);font-size:var(--t-xs);
text-transform:uppercase;letter-spacing:var(--tr-etiqueta);
font-variation-settings:'wght' 620,'wdth' 90;color:var(--oro)}
.campo input,.campo select,.campo textarea{
font-family:var(--f-texto);font-size:var(--t-base);color:var(--tinta);
background:var(--hueso-claro);border:1px solid transparent;border-radius:var(--r-2);
padding:.95rem 1rem;width:100%;
transition:box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.campo textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
.campo select{appearance:none;cursor:pointer;padding-right:2.6rem;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C5147' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 1rem center;
background-size:12px 8px}
.campo input:hover{box-shadow:0 0 0 1px var(--linea-fuerte)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
outline:none;border-color:var(--oro);box-shadow:0 0 0 3px var(--foco)}
.campo--ok input{border-color:var(--exito)}
.campo--ok .campo__label::after{content:" ✓";color:var(--exito)}
.campo--error input,.campo--error select{border-color:var(--error);background:var(--error-fondo)}
.campo__error{font-size:var(--t-sm);color:var(--error-inv);display:flex;gap:var(--e-2);
align-items:flex-start;margin:0}
.campo__error:empty{display:none}
.campo__ayuda{font-size:var(--t-xs);color:var(--tinta-inv-suave);margin:0}
/* «(opcional)» dentro de la etiqueta: en minúscula y sin el tracking de la
etiqueta, para que se lea como una aclaración y no como parte del rótulo. */
.campo__opcional{font-family:var(--f-texto);text-transform:none;letter-spacing:0;
font-variation-settings:'wght' 400;color:var(--tinta-inv-suave)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consentimiento{display:grid;grid-template-columns:1.25rem 1fr;gap:var(--e-3);
align-items:start;font-size:var(--t-sm);color:var(--tinta-inv-suave);
line-height:1.45;cursor:pointer}
.consentimiento input{width:1.25rem;height:1.25rem;margin:.18rem 0 0;
accent-color:var(--oro);cursor:pointer}
.campo--error .consentimiento{color:var(--error-inv)}
#pedido-err{margin:0;font-size:var(--t-sm);color:var(--error-inv);
font-variation-settings:'wght' 550,'wdth' 100}
#pedido-err:empty{display:none}
#pedido-err a{color:var(--oro)}
.pedido__nota{font-size:var(--t-sm);color:var(--tinta-inv-suave)}
.pedido__legal{font-size:var(--t-xs);color:var(--tinta-inv-suave)}
.pedido__legal a{color:var(--tinta-inv)}
.exito{background:var(--hueso-claro);color:var(--tinta);padding:var(--e-7);
border-radius:var(--r-3);box-shadow:var(--sombra-2)}
.exito h3{font-size:var(--t-lg)}
.exito p{margin-top:var(--e-4);color:var(--tinta-suave);font-size:var(--t-sm)}
.exito .btn{margin-top:var(--e-6)}
/* ─── 17 · PREGUNTAS ─────────────────────────────────────────────────────── */
.preguntas{border-bottom:1px solid var(--linea);max-width:56rem}
.pregunta{border-top:1px solid var(--linea)}
.pregunta summary{display:flex;align-items:flex-start;gap:var(--e-4);
justify-content:space-between;padding-block:var(--e-4);cursor:pointer;
list-style:none;font-family:var(--f-display);
font-variation-settings:'wght' 620,'wdth' 100;font-size:var(--t-base);
letter-spacing:var(--tr-corto);
transition:color var(--dur-1) var(--ease)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{color:var(--achiote-tinta)}
.pregunta summary::after{content:"+";flex:0 0 1rem;text-align:center;
font-variation-settings:'wght' 400,'wdth' 100;font-size:var(--t-md);
line-height:1;color:var(--tinta-tenue)}
.pregunta[open] summary::after{content:"−"}
.pregunta p{padding-bottom:var(--e-5);color:var(--tinta-suave);
font-size:var(--t-sm);max-width:60ch}
/* ─── 18 · CIERRE + PIE ──────────────────────────────────────────────────── */
.cierre__ctas{margin-top:var(--e-7);display:flex;flex-wrap:wrap;gap:var(--e-4)}
.pie{background:var(--verde-900);color:var(--tinta-inv-suave);
padding-bottom:calc(var(--e-8) + env(safe-area-inset-bottom))}
.pie__interior{max-width:var(--shell);margin-inline:auto;
padding-inline:var(--gutter)}
.pie__fila{padding-block:var(--e-4);border-top:1px solid var(--linea-inv);
font-size:var(--t-sm);display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5)}
.pie__fila a{color:var(--tinta-inv-suave);text-decoration:none;
transition:color var(--dur-1) var(--ease)}
.pie__fila a:hover{color:var(--tinta-inv)}
.pie__tel{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pie__firma{margin-top:var(--e-6);text-align:center;font-family:var(--f-voz);
font-style:italic;font-size:var(--t-lg);color:var(--oro)}
.pie [data-pend="NOMBRE_LEGAL"][hidden],.pie [data-pend="DIRECCION_COCINA"][hidden]{display:none}
/* ─── 19 · BARRA MÓVIL ───────────────────────────────────────────────────── */
/* Barra, no burbuja. */
.barra-movil{position:fixed;inset-inline:0;bottom:0;z-index:80;display:none;
gap:var(--e-3);align-items:center;padding:var(--e-3) var(--gutter);
padding-bottom:calc(var(--e-3) + env(safe-area-inset-bottom));
background:rgba(14,58,44,.94);backdrop-filter:blur(8px);
border-top:1px solid var(--linea-inv);
transform:translateY(100%);transition:transform var(--dur-2) var(--ease)}
@media (max-width:768px){.barra-movil{display:flex}}
.barra-movil.visible{transform:none}
/* Un solo botón, a todo el ancho. Antes compartía la barra con un icono de
WhatsApp que se quitó el 5/8/2026: en la pantalla más pequeña, dos acciones
compitiendo es una de más, y la que ganaba era la que no dejaba ni un dato. */
.barra-movil .btn{flex:1;padding-block:.85rem}
@media (max-width:768px){body{padding-bottom:4.75rem}}
/* ─── 20 · PÁGINAS SECUNDARIAS ───────────────────────────────────────────── */
.pagina{max-width:44rem;margin-inline:auto;padding-inline:var(--gutter)}
.pagina h2{font-size:var(--t-xl);margin-top:var(--e-8)}
.pagina h3{margin-top:var(--e-6)}
.pagina p,.pagina li{margin-top:var(--e-4);color:var(--tinta-suave);
font-size:var(--t-sm);max-width:none}
.pagina ul{list-style:none}
.pagina ul li{padding-left:var(--e-5);position:relative}
.pagina ul li::before{content:"";position:absolute;left:0;top:.7em;
width:10px;height:1px;background:var(--achiote)}
.pagina .volver{display:inline-block;margin-top:var(--e-8)}
.gracias{min-height:100svh;display:grid;place-items:center;text-align:center;
background:var(--verde);color:var(--tinta-inv)}
.gracias__caja{max-width:36rem;padding:var(--gutter)}
.gracias h1{font-size:var(--t-2xl);margin-top:14px}
.gracias p{margin-top:20px;margin-inline:auto;color:var(--tinta-inv-suave)}
.gracias .btn{margin-top:var(--e-7)}
.gracias .firma{margin-top:var(--e-9);margin-inline:auto;color:var(--oro)}
.gracias .volver{display:inline-block;margin-top:var(--e-6);font-size:var(--t-sm);
color:var(--tinta-inv-suave)}
/* ─── 21 · MOVIMIENTO REDUCIDO ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
html{scroll-behavior:auto}
}
/* ═══ MOSAICO DE BANDEJAS ══════════════════════════════════════════════════
Rejilla asimétrica: una pieza manda y el resto la acompañan. Simétrico
sería una galería de stock; asimétrico lee como una carta compuesta. */
.mosaico{margin-top:var(--e-8)}
.mosaico__rejilla{display:grid;gap:var(--e-3);
grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaico__pieza{display:block;overflow:hidden;background:var(--verde-900);
border-radius:var(--r-2);box-shadow:var(--sombra-2)}
.mosaico__pieza img{width:100%;height:100%;object-fit:cover;
aspect-ratio:4/5;filter:saturate(1.06) contrast(1.04);
transition:transform .6s var(--ease)}
.mosaico__pieza:hover img{transform:scale(1.04)}
.mosaico__pieza--alta{grid-column:span 2}
.mosaico__pieza--alta img{aspect-ratio:16/10}
.mosaico__pie{margin-top:var(--e-3);font-size:var(--t-sm);
color:var(--tinta-tenue);max-width:var(--medida)}
@media (min-width:720px){
.mosaico__rejilla{grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:1fr}
.mosaico__pieza--alta{grid-column:span 2;grid-row:span 2}
.mosaico__pieza--alta img{aspect-ratio:auto;height:100%}
.mosaico__pieza img{aspect-ratio:1}
}
/* ═══ BANDA A SANGRE ═══════════════════════════════════════════════════════
Ancho de ventana completo sin provocar scroll horizontal: 100vw incluye la
barra de scroll, así que se descuenta con el ancho real del documento. */
.banda{position:relative;width:100%;background:var(--verde-900);
overflow:hidden}
.banda img{width:100%;height:clamp(220px,42vw,520px);object-fit:cover;
object-position:50% 55%;filter:saturate(1.05) contrast(1.03)}
.banda__pie{position:absolute;left:var(--gutter);bottom:var(--e-4);margin:0;
max-width:min(30ch,70vw);color:var(--tinta-inv);
font-family:var(--f-voz);font-style:italic;
font-size:var(--t-md);line-height:var(--lh-corto);
text-shadow:0 2px 18px rgba(8,36,25,.9),0 1px 3px rgba(8,36,25,.8)}
/* ═══ TIRA DE ESTILO DE VIDA ═══════════════════════════════════════════════ */
.tira{display:grid;gap:var(--e-4);margin:var(--e-8) 0 0;padding:0;
list-style:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.tira li{margin:0}
.tira picture{display:block;overflow:hidden;border-radius:var(--r-2);
box-shadow:var(--sombra-2);background:var(--verde-900)}
.tira img{width:100%;aspect-ratio:3/4;object-fit:cover;
filter:saturate(1.05) contrast(1.03)}
@media (max-width:719px){
/* En móvil no caben tres a lo ancho sin quedar en miniaturas: se desliza. */
.tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));
padding-inline:var(--gutter)}
.tira::-webkit-scrollbar{display:none}
.tira li{flex:0 0 min(72vw,300px);scroll-snap-align:start}
}
/* ═══ BENEFICIOS CON RETRATO ═══════════════════════════════════════════════ */
.beneficios__bloque{display:grid;gap:var(--e-7);align-items:center}
.retrato{overflow:hidden;border-radius:var(--r-2);
box-shadow:var(--sombra-2);background:var(--verde-900)}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;
filter:saturate(1.05) contrast(1.03)}
@media (min-width:900px){
.beneficios__bloque{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.retrato img{aspect-ratio:3/4}
}
/* En pantallas anchas los tres testimonios caben enteros: el carril deja de
ser carril y pasa a rejilla. Deslizar con tres piezas visibles y la tercera
cortada leía como un fallo de maquetación, no como un carrusel. */
@media (min-width:1000px){
.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
overflow:visible;padding-bottom:0}
.rail__item{flex:none}
.rail__progreso{display:none}
}
/* ─── 22 · REPARTO DE PROTEÍNAS Y MENÚ DE LA SEMANA ─────────────────────────
Añadido cuando la landing pasó a leer del catálogo. Vive dentro de la losa
verde del formulario, así que todo el color va invertido. */
/* Menú de la semana, bajo la lista de proteínas de la sección menú. */
.semana-viva{margin-top:var(--e-6);padding:var(--e-5);
background:var(--hueso-hundido);border-radius:var(--r-3);
box-shadow:var(--filete-interior)}
.semana-viva .eyebrow{margin-bottom:var(--e-3)}
.semana-viva__linea{font-size:var(--t-sm);color:var(--tinta-suave);
margin-bottom:var(--e-2);max-width:none}
.semana-viva__linea b{font-variation-settings:'wght' 660;color:var(--tinta)}
.semana-viva__nota{font-family:var(--f-voz);font-style:italic;
font-size:var(--t-base);color:var(--tinta);margin-top:var(--e-3)}
/* Proteína agotada: se sigue viendo, pero se dice. Esconderla haría pensar
que el menú encogió. */
.plato--agotado .plato__nombre{opacity:.55}
.plato__aviso{display:block;font-size:var(--t-xs);color:var(--achiote);
font-variation-settings:'wght' 600;letter-spacing:var(--tr-micro)}
/* Reparto dentro del formulario (losa verde). */
.reparto-comidas{margin-bottom:var(--e-5);padding:var(--e-4);
border:1px solid var(--linea-inv);border-radius:var(--r-2);
background:rgba(247,239,227,.045)}
.reparto-comidas[hidden]{display:none}
.reparto-comidas__cab{display:flex;align-items:baseline;gap:var(--e-3);
margin-bottom:var(--e-4);max-width:none}
.reparto-comidas__cuenta{margin-left:auto;font-family:var(--f-display);
font-variation-settings:'wght' 700,'wdth' 100;font-size:var(--t-sm);
font-variant-numeric:tabular-nums;color:var(--tinta-inv-suave);
white-space:nowrap;transition:color var(--dur-1) var(--ease)}
.reparto-comidas__cuenta.esta-completo{color:var(--oro)}
.reparto-comidas__cuenta.esta-pasado{color:var(--error-inv)}
.reparto-comidas__lista{display:flex;flex-direction:column;gap:var(--e-2)}
.reparto-comidas__fila{display:flex;align-items:center;gap:var(--e-3);
padding:var(--e-2) 0;border-bottom:1px solid var(--linea-inv)}
.reparto-comidas__fila:last-child{border-bottom:0}
.reparto-comidas__fila.esta-agotado{opacity:.5}
.reparto-comidas__nombre{flex:1;min-width:0;line-height:1.3}
.reparto-comidas__nombre b{display:block;font-size:var(--t-sm);
font-variation-settings:'wght' 620;color:var(--tinta-inv)}
.reparto-comidas__nombre span{font-size:var(--t-xs);color:var(--tinta-inv-suave)}
.reparto-comidas__contador{display:flex;align-items:center;gap:var(--e-2);
flex:0 0 auto}
/* 44px: se pulsa con el pulgar en un móvil, que es donde entra casi todo. */
.reparto-comidas__contador button{width:44px;height:44px;flex:0 0 44px;
display:flex;align-items:center;justify-content:center;
background:transparent;color:var(--tinta-inv);
border:1px solid var(--linea-inv-alta);border-radius:var(--r-2);
font-size:1.25rem;line-height:1;cursor:pointer;
transition:background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.reparto-comidas__contador button:hover:not([disabled]){
background:rgba(247,239,227,.1);border-color:var(--oro)}
.reparto-comidas__contador button[disabled]{opacity:.28;cursor:not-allowed}
.reparto-comidas__contador input{width:3.2rem;height:44px;text-align:center;
background:rgba(247,239,227,.06);color:var(--tinta-inv);
border:1px solid var(--linea-inv);border-radius:var(--r-2);
font-family:var(--f-display);font-variation-settings:'wght' 700;
font-size:var(--t-base);font-variant-numeric:tabular-nums;
-moz-appearance:textfield}
.reparto-comidas__contador input::-webkit-outer-spin-button,
.reparto-comidas__contador input::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0}
.reparto-comidas__contador input:focus{outline:2px solid var(--oro);outline-offset:1px}
.reparto-comidas__pie{margin-top:var(--e-4);font-size:var(--t-xs);
color:var(--tinta-inv-suave);line-height:1.5}
@media (max-width:479px){
.reparto-comidas__nombre span{display:none}
.reparto-comidas__contador input{width:2.8rem}
}