@charset "UTF-8";
/* ==========================================================================
   D.D Fit Meals — TOKENS DE MARCA
   Fuente única. La cargan la landing (styles.css) y el panel (panel.css).

   Estaba dentro de styles.css hasta que existió el panel. Se extrajo para que
   no puedan divergir: cambiar el achiote en un sitio y no en el otro haría que
   el panel dejara de parecer el mismo producto.

   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.
   ========================================================================== */

:root{
  /* ═══ FONDOS ═══ Hueso cálido = temperatura real del granito y del mármol
     de las fotos de las clientas. NO es el crema neutro de plantilla. ─── */
  --hueso:          #F4E8D9;
  --hueso-claro:    #FBF4E9;
  --hueso-hundido:  #EADCC7;

  --verde:          #0E3A2C;
  --verde-700:      #17513E;
  --verde-900:      #082419;
  --verde-wash:     #0E3A2C14;

  /* ═══ MARCA ═══ Los dos colores del logotipo. Innegociables. ─── */
  --oro:            #E9B23C;
  --oro-hover:      #F2C05A;
  --oro-tinta:      #8A6011;
  --oro-wash:       #E9B23C1F;

  /* ═══ ACENTO ═══ ACHIOTE: el pigmento del sofrito y del arroz amarillo.
     Sale de la olla, no del gimnasio. ÚNICO color de acción. ─── */
  --achiote:        #BE3A16;
  --achiote-hover:  #A22F0F;
  --achiote-tinta:  #8E2A0E;

  /* ═══ TEXTO ═══ */
  --tinta:          #17130E;
  --tinta-suave:    #5C5147;
  --tinta-tenue:    #7C6F62;
  --tinta-inv:      #F7EFE3;
  --tinta-inv-suave:#C3B7A3;

  /* ═══ ESTADO ═══ */
  --exito:          #2E7D4F;  --exito-tinta: #1F5C39;
  --error:          #B3261E;  --error-tinta: #8E1D17;
  --error-fondo:    #B3261E12;
  --error-inv:      #FFB4A8;
  --foco:           rgba(233,178,60,.32);

  /* ═══ LÍNEAS — nunca gris, siempre teñidas ═══ */
  --linea:          #DCCBB2;
  --linea-fuerte:   #C7B196;
  --linea-inv:      rgba(247,239,227,.18);
  --linea-inv-alta: rgba(247,239,227,.34);
  --filete-interior: inset 0 0 0 1px rgba(23,19,14,.09);
  --filete-verde:   color-mix(in oklab, var(--verde) 16%, transparent);

  /* ═══ SOMBRAS — cálidas, dos capas. JAMÁS rgba(0,0,0,x) ═══ */
  --sombra-1: 0 1px 2px rgba(36,22,10,.06), 0 2px 6px rgba(36,22,10,.05);
  --sombra-2: 0 2px 4px rgba(36,22,10,.05), 0 10px 24px -8px rgba(36,22,10,.18);
  --sombra-3: 0 4px 8px rgba(24,14,6,.08), 0 40px 80px -28px rgba(24,14,6,.42);
  --sombra-verde: 0 24px 60px -24px rgba(8,36,25,.55);

  /* ═══ RADIOS — casi cero es la señal de precio alto.
     Fotos, losas y filetes: radio 0 SIEMPRE. ═══ */
  --r-0:0; --r-1:2px; --r-2:4px; --r-3:10px; --r-pill:999px;

  /* ═══ TIPOGRAFÍA ═══ */
  --f-display:'Archivo','Archivo Fallback',system-ui,-apple-system,sans-serif;
  --f-texto:  'Archivo','Archivo Fallback',system-ui,-apple-system,sans-serif;
  --f-voz:    'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;

  --t-xs:  clamp(.75rem,   .725rem + .12vw,  .82rem);
  --t-sm:  clamp(.875rem,  .85rem  + .14vw,  .95rem);
  --t-base:clamp(1.0625rem,1.02rem + .2vw,   1.15rem);
  --t-md:  clamp(1.2rem,   1.12rem + .38vw,  1.45rem);
  --t-lg:  clamp(1.45rem,  1.30rem + .70vw,  1.95rem);
  --t-xl:  clamp(1.85rem,  1.55rem + 1.35vw, 2.90rem);
  --t-2xl: clamp(2.30rem,  1.75rem + 2.50vw, 4.20rem);
  --t-3xl: clamp(2.35rem,  1.70rem + 3.05vw, 3.90rem);   /* SOLO el H1 */

  --lh-mega:.92; --lh-corto:1.14; --lh-base:1.58;
  --tr-mega:-.022em; --tr-corto:-.012em; --tr-etiqueta:.18em; --tr-micro:.08em;
  --medida: 62ch;

  /* ═══ ESPACIADO — base 4 ═══ */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;    --e-5:1.5rem;
  --e-6:2rem;   --e-7:2.75rem;--e-8:3.5rem; --e-9:4.5rem;  --e-10:6rem;
  --e-11:8rem;  --e-12:10.5rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1200px;

  /* ═══ MOVIMIENTO ═══ */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1:140ms; --dur-2:280ms; --dur-3:520ms;

  /* Ritmo vertical. Solo .seccion y .seccion--losa los consumen. */
  --pad-seccion: clamp(4.5rem, 8vw, 7rem);
  --pad-losa:    clamp(5rem, 11vw, 10.5rem);
}

/* ─── FUENTES ────────────────────────────────────────────────────────────── */
/* Autoalojadas. El CDN de Google Fonts no comparte caché desde 2020: solo
   añadiría DNS + TLS de un tercer origen, que en 4G de Miami cuesta más que
   el propio archivo. */
@font-face{font-family:'Archivo';
  src:url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:400 800;font-stretch:84% 112%;font-display:swap}
@font-face{font-family:'Petrona';
  src:url('/assets/fonts/petrona-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
/* Respaldos con métricas ajustadas: el swap no mueve un píxel. */
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:100.7%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Petrona Fallback';src:local('Georgia'),local('Times New Roman');
  font-style:italic;size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}