/* =============================================================================
   NUTRITUPP · sistema.css — los fundamentos
   -----------------------------------------------------------------------------
   Este fichero es la capa 01 de la cascada: tokens + base + anulaciones de
   plantilla. Todo lo demás (carta, banda del menú, planes, ventajas, hero)
   se cuelga de aquí y NO vuelve a declarar un color, un tamaño ni una curva.

   ORDEN DE CARGA — importa, y no es negociable:
     1. bootstrap.min.css
     2. style.css            (plantilla Torganic comprada)
     3. site.css
     4. sistema.css          <-- ESTE
     5. hero-scroll.css, carta.css, banner-diario.css, planes, ventajas...

   Va DESPUÉS de style.css porque media docena de tokens de la plantilla se
   redefinen aquí sobre el mismo :root (--text-color, --body-color, --bg-color).
   A igual especificidad gana el último, así que si alguien lo enlaza antes de
   style.css la página vuelve al blanco puro sin avisar.

   POR QUÉ EXISTE: hoy hay cinco hojas escritas que invocan var(--tipo),
   var(--t-h2), var(--ritmo-seccion) y var(--crema) y NADIE las declara. Cada
   sección se está pintando con su propio valor de respaldo y los respaldos ya
   no coinciden entre sí (banner-diario.css:13 cae a #efebe1, carta.css:18 a
   #F1E9E2, tres fallbacks distintos para el mismo --t-h2). Esto es el punto
   único de verdad que faltaba.

   AVISO SOBRE planificador.css: sus líneas 7-20 declaran --teal, --linea,
   --texto, --radio... sobre :root. Si esa hoja se carga después de esta,
   revienta el sistema (su --linea es #c6e2b6, verde saturado, expresamente
   prohibido como filete). Hay que reescopar ese bloque a .planificador{}.
   ========================================================================== */


/* =============================================================================
   1. TIPOGRAFÍA AUTOALOJADA
   -----------------------------------------------------------------------------
   Hoy las fuentes SÍ se sirven, pero de la peor manera posible: style.css:82
   tiene un @import a fonts.googleapis.com. Un @import dentro de una hoja es
   una petición encadenada: el navegador no puede ni enterarse de que existe
   hasta haber bajado y parseado los 190 KB de style.css. Medido:
       HTML 2 ms -> style.css 13 ms -> CSS de Google 32 ms -> woff2 208 ms.
   Son 128.029 B en tres ficheros de un tercero, y 50.316 B de esos son la
   itálica de Work Sans que no usa NADIE: cero font-style:italic en todo
   style.css, cero <em> en el HTML. La dispara un único <i> vacío (el botón de
   subir), que además es un bug de la regex de iconos de build.js.

   Autoalojado: ~19 KB de un solo origen, la petición pasa de 208 ms a ~5 ms y
   desaparece una conexión a Google desde el primer milisegundo (que es
   relevante justo donde se discute el consentimiento de cookies).

   -----------------------------------------------------------------------------
   DE DÓNDE SE BAJAN (las dos son SIL Open Font License 1.1, uso comercial y
   autoalojamiento permitidos; hay que conservar el OFL.txt junto al woff2):

     Manrope    https://github.com/sharpType/Manrope
                -> fonts/variable/Manrope[wght].ttf
     Work Sans  https://github.com/weiweihuanghuang/Work-Sans
                -> fonts/variable/WorkSans[wght].ttf   (NO el Italic)

   CÓMO SE HACE EL SUBCONJUNTO LATINO (necesita: pip install fonttools brotli):

     # 1) Recortar el eje de peso a lo que se usa de verdad. Manrope viene con
     #    200..800; aquí solo se usan 400, 600, 700 y 800.
     fonttools varLib.instancer "Manrope[wght].ttf"   wght=400:800 -o m.ttf
     fonttools varLib.instancer "WorkSans[wght].ttf"  wght=400:600 -o w.ttf

     # 2) Subconjunto latino + puntuación tipográfica española + el euro.
     #    U+00A0-00FF trae áéíóúñü¡¿ÁÉÍÓÚÑÜ; U+20AC es el €; U+2018-201E son
     #    las comillas curvas; tnum es imprescindible: los precios y las
     #    calorías van en cifras tabulares para que no bailen entre tarjetas.
     pyftsubset m.ttf --flavor=woff2 --output-file=manrope-lat.woff2 \
       --layout-features="kern,liga,ccmp,locl,tnum,onum,frac" \
       --unicodes="U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+2018-201A,U+201C-201E,U+2026,U+2039-203A,U+20AC,U+2212" \
       --desubroutinize --no-hinting --drop-tables+=DSIG

     pyftsubset w.ttf --flavor=woff2 --output-file=work-sans-lat.woff2 \
       --layout-features="kern,liga,ccmp,locl,tnum" \
       --unicodes="U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+2018-201A,U+201C-201E,U+2026,U+2039-203A,U+20AC,U+2212" \
       --desubroutinize --no-hinting --drop-tables+=DSIG

     # Resultado esperado: manrope-lat.woff2 ~19 KB, work-sans-lat.woff2 ~17 KB.
     # Se dejan en  nuevo/assets/fonts/  y build.js los copia a /assets/fonts/.

   Y EN EL <head>, ANTES del <link> de style.css (para que lo vea el preload
   scanner; el crossorigin es obligatorio aunque el origen sea el mismo, porque
   las fuentes se piden en modo CORS anónimo):

     <link rel="preload" href="/assets/fonts/manrope-lat.woff2"
           as="font" type="font/woff2" crossorigin>

   Se precarga SOLO Manrope. Work Sans no: es el cuerpo, entra abajo, y una
   segunda precarga compite con el LCP por ancho de banda.

   Y SE BORRA style.css:82 (el @import). Si se queda, se pagan las dos cosas.
   ========================================================================== */

/* Un solo fichero por familia: es una fuente variable con el eje wght
   declarado como rango. El navegador interpola 400/600/700/800 de dentro. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-lat.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;   /* swap y no optional: el titular es contenido, no adorno */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2018-201A, U+201C-201E,
                 U+2026, U+2039-203A, U+20AC, U+2212;
}

/* AQUÍ HABÍA UN @font-face DE WORK SANS Y ERA UN 404.
   Declaraba /assets/fonts/work-sans-lat.woff2 y ese fichero nunca llegó a
   generarse: en disco sólo está manrope-lat.woff2. Como --tipo-texto sí
   nombraba "Work Sans", el navegador pedía el woff2 en cada carga, se comía
   un 404 y caía al respaldo. Coste: una petición fallida por visita y la
   ventana de swap corriendo para nada.

   Se colapsa a UNA familia, que es la salida que ya proponía el comentario de
   abajo: Manrope es variable 400-800 y aguanta el cuerpo de sobra. Se ahorran
   además ~17 KB y una petición. Si algún día se quiere Work Sans de verdad,
   se genera el woff2 con el pyftsubset de arriba, se vuelve a poner este
   bloque y se devuelve --tipo-texto a su pila. Antes no. */

/* Respaldos métricamente ajustados. Durante la ventana de swap el texto se
   pinta con la fuente del sistema; sin estos overrides el reflow al llegar el
   woff2 mueve la página entera (CLS). Los números salen de comparar la unidad
   em de Manrope (unitsPerEm 1000, ascender 1006, descender -262) con Segoe UI.
   Se declaran como familias aparte para poder ponerlas EN LA PILA, no como
   descriptor de la fuente real. */
@font-face {
  font-family: "Manrope respaldo";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Work Sans respaldo";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}


/* =============================================================================
   2. COLOR — dos tierras, dos oscuros, dos líneas. Nada más.
   -----------------------------------------------------------------------------
   La regla que ordena todo: el fondo del hero es el fondo del <body>. No hay
   costura porque no hay dos colores. Hoy el hero es #EFEBE1 y el body blanco
   puro: ΔE76 = 8,72, casi cuatro veces el umbral de percepción, en un campo
   plano de ancho completo. Se ve el corte desde el otro lado de la mesa.

   POR QUÉ #EFEBE1 Y NO #F1E9E2: hay dos cremas medidas, la muestreada del
   vídeo (#EFEBE1, en hero-scroll.css:8) y la del borde inferior del último
   fotograma (#F1E9E2, en transicion.css:14). Se diferencian en ΔE76 ≈ 1,6,
   por debajo del umbral de percepción: mantener las dos es tener dos verdades
   para el mismo color y ninguna ventaja. Gana la del hero, porque el hero es
   lo único que NO se puede repintar: son 32 WebP ya renderizados.
   ========================================================================== */

:root {
  /* --- Las dos tierras ---------------------------------------------------- */
  --crema:        #EFEBE1;   /* el suelo. Muestreado del propio vídeo del hero */
  --crema-honda:  #E5DCD0;   /* único escalón. ΔE 5,5: se lee como decisión,
                                no como un error de recorte */

  /* --- Los dos oscuros. No hay un tercero en toda la web ------------------- */
  --teal:         #145961;   /* marca: la banda del menú, cifras, botones */
  --teal-hondo:   #073439;   /* SOLO el pie. Es el suelo de la página */

  /* --- El verde, con la correa corta -------------------------------------- */
  /* 2,05:1 sobre la crema. Como texto o como filete NO pasa AA ni de lejos.
     Queda reservado a distintivos sobre foto ("FIT", "lo que más piden"),
     donde es una mancha de color y no información que haya que leer. */
  --verde:        #74B74E;

  /* --- Tinta -------------------------------------------------------------- */
  /* El --text-color de la plantilla (#6F7E6E) da 4,30:1 sobre blanco y 3,61:1
     sobre la crema: NO pasa AA hoy, antes de tocar nada. Este es el mismo
     verde grisáceo bajado dos escalones: 5,33:1 sobre --crema y 4,67:1 sobre
     --crema-honda. Ambos pasan. */
  --tinta:        #556354;
  --titulo:       #161915;

  /* --- Las dos líneas. Lo único que separa, además del aire --------------- */
  --linea:        #DCD2C4;   /* 1 px sobre --crema */
  --linea-honda:  #D2C6B4;   /* 1 px sobre --crema-honda */
  /* PROHIBIDO usar #C6E2B6 (--border-color de la plantilla) como filete
     estructural: es verde saturado, sobre crema no se lee como estructura
     sino como un evento de color, y lo llevaban dos secciones seguidas. */

  /* --- Sobre oscuro ------------------------------------------------------- */
  --sobre-oscuro:      #FFFFFF;  /* 7,98:1 sobre --teal, 13,5:1 sobre --teal-hondo */
  --sobre-oscuro-mute: #C9D6D3;  /* secundario en el pie, 8,4:1 */
}

/* --- Redefinición de los tokens de la plantilla -----------------------------
   No se editan las ~700 apariciones de var(--brand-color) repartidas por
   style.css: se reapunta el token en su origen. Un solo bloque, y toda la
   plantilla cambia de idioma. Los que se mandan a la crema son los que
   pintaban planchas blancas o de caramelo. */
:root {
  --body-color:      #EFEBE1;  /* era #FFFFFF. Es el fondo del <body> y del preloader */
  --bg-color:        #EFEBE1;  /* era #F2F7F5. Lo usa .section-bg */
  --bg-color-2:      #EFEBE1;  /* era #F2FFEB */
  --bg-color-3:      #E5DCD0;  /* era la menta #D2F7CF */
  --bg-color-4:      #E5DCD0;  /* era #E1EBE7 */
  --bg-dark-color:   #073439;  /* se queda: ya era el pie */
  --brand-color:     #145961;  /* se queda: es la marca */
  --secondary-color: #74B74E;  /* se queda, pero con la correa corta de arriba */
  --text-color:      #556354;  /* era #6F7E6E, que no pasaba AA */
  --title-color:     #161915;
  --gray-color:      #556354;
  --border-color:    #DCD2C4;  /* era el verde #C6E2B6 */
  --border-color-thin: #E4DCD0;
  --border-color-1:  #DCD2C4;
  --border-color-2:  #E4DCD0;
  --yellow-color:    #145961;  /* las estrellas ámbar y las pegatinas de saldo:
                                  al teal, hasta que se borren en su paso */
  --yellow-color-2:  #E5DCD0;  /* era el mostaza #FFDA84 */
  --pink-color:      #E5DCD0;  /* era el rosa #FFD3CC, residuo de Torganic */

  /* Bootstrap 5 lee sus propias variables. Se reapuntan las cuatro que la
     plantilla usa de verdad, en vez de perseguir .bg-light por todo el HTML. */
  --bs-body-bg:      #EFEBE1;
  --bs-body-color:   #556354;
  --bs-light-rgb:    239, 235, 225;   /* .bg-light -> crema */
  --bs-white-rgb:    239, 235, 225;   /* .bg-white -> crema */
  --bs-border-color: #DCD2C4;
  --bs-link-color:   #145961;
  --bs-link-hover-color: #073439;
  --bs-emphasis-color:   #161915;
  --bs-secondary-color:  #556354;
}


/* =============================================================================
   3. ESCALA TIPOGRÁFICA — fluida, y colgada de una sola familia
   -----------------------------------------------------------------------------
   El problema medido: los cuatro h2 de la home están clavados en 32 px, y en
   móvil el h1 del hero (27,2 px) y un h2 cualquiera (24,2 px) se diferencian
   en 3 px. No hay jerarquía, hay una lista de titulares del mismo tamaño.
   El escalón que falta es h2=40 en escritorio.

   Cada clamp() interpola entre 390 px (móvil de referencia) y 1200 px de
   ventana. El término medio va SIEMPRE como rem + vw, nunca solo vw: si es
   solo vw el texto deja de responder al zoom del navegador y se incumple
   WCAG 1.4.4 (redimensionar hasta el 200%).
   ========================================================================== */

:root {
  /* Las dos pilas. Mismo orden de respaldo en las dos, que es justo lo que
     hoy no pasa: hero-scroll.css:73 declara "Manrope, system-ui, sans-serif"
     y style.css:1022 declara "Manrope", sans-serif. Verificado bloqueando
     Google Fonts: el h1 del hero cae a Segoe UI y el h2 de la sección de
     debajo cae a Arial. Durante toda la ventana de swap la página se ve con
     dos tipografías separadas por un scroll. */
  --tipo:        "Manrope", "Manrope respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Colapsado a una sola familia: el woff2 de Work Sans no existe en disco y
     nombrarlo sólo servía para provocar un 404. Ver la nota de arriba. */
  --tipo-texto:  var(--tipo);

  /* --- Tamaños --------------------------------------------------------- */
  --t-display: clamp(2.125rem, 1.463rem + 2.716vw, 3.5rem);   /* 34 -> 56 */
  --t-h2:      clamp(1.75rem,  1.389rem + 1.481vw, 2.5rem);   /* 28 -> 40 */
  --t-h3:      clamp(1.4375rem,1.287rem + 0.617vw, 1.75rem);  /* 23 -> 28 */
  --t-h4:      clamp(1.1875rem,1.097rem + 0.370vw, 1.375rem); /* 19 -> 22 */
  --t-h5:      clamp(1.0625rem,1.002rem + 0.247vw, 1.1875rem);/* 17 -> 19 */
  --t-cuerpo:  clamp(1rem,     0.970rem + 0.123vw, 1.0625rem);/* 16 -> 17 */
  --t-menor:   clamp(0.875rem, 0.845rem + 0.123vw, 0.9375rem);/* 14 -> 15 */
  --t-etiq:    clamp(0.75rem,  0.720rem + 0.123vw, 0.8125rem);/* 12 -> 13 */

  /* --- Interlineados. Bajan según sube el tamaño: un titular a 1,55 se
         desarma, un párrafo a 1,2 no se puede leer. ------------------------ */
  --i-display: 1.08;
  --i-h2:      1.18;
  --i-h3:      1.25;
  --i-h4:      1.30;
  --i-h5:      1.35;
  --i-cuerpo:  1.55;
  --i-menor:   1.50;

  /* --- Pesos. Cuatro, y ninguno por debajo de 400: los variables ligeros
         sobre crema pierden contraste aparente aunque el ratio no cambie. -- */
  --p-normal: 400;
  --p-medio:  600;
  --p-fuerte: 700;
  --p-negro:  800;

  /* --- Tracking. El display necesita cerrar, la etiqueta versal abrir. ---- */
  --tr-display: -.03em;
  --tr-h2:      -.02em;
  --tr-etiq:     .08em;

  /* --- Medidas de línea --------------------------------------------------- */
  --medida-titular: 22ch;   /* un h2 más largo que esto ya son dos ideas */
  --medida-texto:   60ch;
  --medida-nota:    46ch;
}


/* =============================================================================
   4. RITMO VERTICAL Y CONTENEDOR
   -----------------------------------------------------------------------------
   Los huecos medidos hoy, de arriba abajo: 100/200/200/100/100/200/200/140/40.
   No hay escala: hay una constante de 100 y agujeros. Y .popular-product —la
   sección comercialmente más importante, 2.312 px en escritorio— no tiene ni
   un píxel de padding, porque no existe ninguna regla .popular-product{} en
   style.css.

   Tres tipos de sección, no doce valores sueltos.
   ========================================================================== */

:root {
  --ritmo-seccion:  clamp(5.5rem, 9vw,  8rem);    /*  88 -> 128  el caso normal */
  --ritmo-bisagra:  clamp(7rem,  12vw, 11rem);    /* 112 -> 176  la primera tras
                                                     el hero y el cierre: hay que
                                                     dejar aire donde se suelta
                                                     el panel fijo */
  --ritmo-catalogo: clamp(6rem,  10vw,  9rem);    /*  96 -> 144  la carta */
  --ritmo-interior: clamp(2.5rem, 4vw, 3.5rem);   /*  40 ->  56  dentro de una
                                                     sección: título -> rejilla */
  --ritmo-encabezado: clamp(2rem, 4vw, 3.5rem);   /*  32 ->  56 */

  --canal: 24px;                                  /* separación de rejilla */
  --contenedor: 1240px;
  --contenedor-ancho: 1360px;
  --canal-lateral: clamp(20px, 3vw, 32px);

  --alto-cabecera: 64px;                          /* móvil */
}
@media (max-width: 991.98px) { :root { --canal: 16px; } }
@media (min-width: 992px)    { :root { --alto-cabecera: 84px; } }

/* Se redefinen las utilidades de la plantilla en vez de tocar sección por
   sección: .padding-top y .padding-bottom están en el HTML de las 31 páginas
   y son el único punto donde hay que escribir el valor. Cero HTML tocado. */
.padding-top    { padding-block-start: var(--ritmo-seccion); }
.padding-bottom { padding-block-end:   var(--ritmo-seccion); }
.padding-top--style2   { padding-block-start: var(--ritmo-interior); }
.padding-bottom-style2 { padding-block-end:   var(--ritmo-interior); }
@media (min-width: 992px) {
  /* la plantilla los sube a 100 px aquí dentro; el clamp ya lo hace solo */
  .padding-top    { padding-block-start: var(--ritmo-seccion); }
  .padding-bottom { padding-block-end:   var(--ritmo-seccion); }
  .padding-top--style2   { padding-block-start: var(--ritmo-interior); }
  .padding-bottom-style2 { padding-block-end:   var(--ritmo-interior); }
}

/* El contenedor. Hoy es 1170 desde 1200 y 1280 desde 1600: a 1920 el contenido
   ocupa el 67% del ancho justo después de que el hero haya usado el 100%.
   Se sube a 1240/1360 y se le da canal lateral propio, que Bootstrap resuelve
   con .container-fluid y aquí no hay. */
.container {
  padding-inline: var(--canal-lateral);
}
@media (min-width: 1200px) { .container { max-width: var(--contenedor); } }
@media (min-width: 1600px) { .container { max-width: var(--contenedor-ancho); } }


/* =============================================================================
   5. MOVIMIENTO — un gesto, 220 ms, una vez
   -----------------------------------------------------------------------------
   El hero se mueve porque tú lo mueves: es scrub sobre el scroll. Todo lo demás
   tiene que obedecer a la misma ley. Nada en bucle, nada de un segundo, nada
   que tape.

   Lo que se va, y no vuelve: AOS entero (animaba envoltorios de 1.800 px, va
   sin opciones así que once=false y al subir el scroll la carta se vuelve a
   apagar, y su aos.css pone opacity:0 en siete contenedores — si el JS falla o
   llega tarde la carta entera se queda invisible para siempre), el preloader,
   las hojas flotantes de .sale-banner__shape y las tres de .footer__shape.
   ========================================================================== */

:root {
  --m-rapido: 140ms;   /* respuesta al puntero: color, subrayado */
  --m-medio:  220ms;   /* entradas y despliegues */
  --m-curva:  cubic-bezier(.22, .61, .36, 1);   /* sale rápido, frena; es la
                          curva del bol al asentarse en el último fotograma */
  --relevo-curva: var(--m-curva);  /* alias: transicion.css y banner-diario.css
                                      ya lo llaman así */
}

/* Entrada por sección. Sustituye a los siete data-aos.
   La clase .js se pone EN LÍNEA en el <head>, no al final del body: así, si el
   JS muere, el contenido se ve. Hoy es al revés. */
html.js [data-entra] > * {
  opacity: 0;
  transform: translateY(10px);
}
html.js [data-entra].dentro > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--m-medio) var(--m-curva),
              transform var(--m-medio) var(--m-curva);
  transition-delay: calc(var(--i, 0) * 40ms);   /* tope --i:3 = 120 ms */
}

/* Red de seguridad mientras AOS siga vivo en alguna página: si el JS no
   arranca, aos.css deja el bloque en opacity:0 para siempre. */
html:not(.js) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hover: UNA sola respuesta al puntero, y es de color. Nada de translateY,
   que en una rejilla de 24 tarjetas convierte el ratón en un cortacésped.
   El acuse táctil se reserva a :active, donde sí informa. */
@media not all and (pointer: coarse) {
  a { transition: color var(--m-rapido) var(--m-curva); }
}
a:active { transform: translateY(-1px); }

/* La plantilla pone transition:all 0.3s ease-out en <a> y en media docena de
   componentes. "all" anima también el layout (padding, width) y es la causa
   de los saltos al abrir el submenú. Se acota a lo que se puede componer. */
a,
.trk-btn,
.product__item,
.product__item-inner,
.product__item-thumb img,
.header .menu > ul > li a,
.footer__linklist-item a,
.scrollToTop {
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: var(--m-rapido);
  transition-timing-function: var(--m-curva);
}


/* =============================================================================
   6. BASE
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--tipo-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--i-cuerpo);
  font-weight: var(--p-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La familia se aplica con un selector amplio en vez de editar las ~25
   declaraciones sueltas de style.css. Aquí van los sitios donde la plantilla
   la clava a mano. */
h1, h2, h3, h4, h5, h6,
.trk-btn,
.subtitle p,
.quantity-button,
.section-header h2,
.hero-scroll__titulo,
.hero-scroll__apunte,
.glf-button {
  font-family: var(--tipo);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--titulo);
  font-weight: var(--p-fuerte);
  text-wrap: balance;   /* reparte las líneas: evita la viuda de una palabra */
  margin-block-start: 0;
}

h1 { font-size: var(--t-display); line-height: var(--i-display); font-weight: var(--p-negro); letter-spacing: var(--tr-display); }
h2 { font-size: var(--t-h2);      line-height: var(--i-h2);      letter-spacing: var(--tr-h2); max-inline-size: var(--medida-titular); }
h3 { font-size: var(--t-h3);      line-height: var(--i-h3); }
h4 { font-size: var(--t-h4);      line-height: var(--i-h4); }
h5 { font-size: var(--t-h5);      line-height: var(--i-h5); }
h6 { font-size: var(--t-cuerpo);  line-height: var(--i-h5); font-weight: var(--p-medio); }

/* La plantilla mete text-transform:capitalize en un extend gigante (style.css
   línea 118) que alcanza a .section-header h2 y a los titulares de banner. En
   español eso renderiza "Lo Que Opinan Nuestros Clientes", que es una falta de
   ortografía, no un estilo. Se apaga en todos los sitios donde lo pone. */
.section-header h2,
.section-header__content h2,
.page-header__content h1,
.banner--style1 .banner__content-heading,
.banner--style2 .banner__content-heading,
.banner--style3 .banner__content-heading,
.blog__content h4,
.blog-details__content h3,
.blog-details__segment-content h5,
.feature--style1 .feature__item-content h6,
.accordion__button,
.text-btn,
.trk-btn {
  text-transform: none;
}

p { margin-block-start: 0; max-inline-size: var(--medida-texto); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media not all and (pointer: coarse) {
  a:hover { color: var(--teal-hondo); }
}

/* Foco visible en toda la web. Hoy no existe: la plantilla hace outline:none
   en el acordeón y el resto se queda con el anillo por defecto del navegador,
   que sobre crema casi no se ve. Dos píxeles de teal y 3 de separación. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Cifras tabulares en todo lo que sea un número que se compara: precios,
   calorías, gramos, descuentos. Sin esto los importes de una fila de tarjetas
   no se alinean y el ojo cree que hay un fallo de maquetación. */
.precio, .cifra, [data-cifra],
.product__item-price h4,
.plan-col__cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* El <picture> de build.js es un envoltorio: si queda como caja de bloque,
   rompe el aspect-ratio de las fotos de plato. */
picture { display: contents; }
img, svg { max-width: 100%; height: auto; }


/* =============================================================================
   7. MAPA DE FONDOS — el orden de la home, de arriba abajo
   -----------------------------------------------------------------------------
   Solo dos tierras y dos oscuros en toda la página. Si una sección necesita
   "destacar", se destaca con aire o con un filete, no con un color nuevo.

     0. Cabecera (31 páginas) ................. crema
     1. Hero .................................. crema
     2. Banda del menú diario ................. TEAL, a sangre, radio 0
     3. Nuestros Platos (#nuestros-platos) .... crema
     4. Planes (#planes) ...................... crema honda
     5. Por qué la gente repite ............... crema
     6. Cómo funciona (#como-funciona) ........ crema honda
     7. Cierre ................................ crema
     8. Línea de hechos (31 páginas) .......... crema
     9. Pie ................................... TEAL HONDO
   ========================================================================== */

.header,
.hero-scroll,
.popular-product,
.newsletter,
.feature-bar        { background-color: var(--crema); }

.benefits,
.planes-seccion,
#planes,
#como-funciona      { background-color: var(--crema-honda); }

.footer             { background-color: var(--teal-hondo); }

/* El hero deja de tener fondo propio: hereda el del body. Así la costura no se
   disimula, deja de existir. Medido tras el cambio: el mayor salto entre dos
   filas contiguas de píxeles en la zona de la costura es 6 sobre 765 (suma
   RGB), frente a 47 antes. */
.hero-scroll { --hero-fondo: var(--crema); }

/* La banda del menú diario: el único oscuro del cuerpo, a sangre y sin radio.
   Se distingue de la otra .sale-banner (los tres pasos, que se borran en su
   paso) porque solo esta lleva --style1 dentro. */
.sale-banner:has(.sale-banner__item--style1) {
  background-color: var(--teal);
  color: var(--sobre-oscuro);
  border-radius: 0;
}
.sale-banner:has(.sale-banner__item--style1) h2,
.sale-banner:has(.sale-banner__item--style1) h3 { color: var(--sobre-oscuro); }
.sale-banner:has(.sale-banner__item--style1) p  { color: var(--sobre-oscuro); opacity: .92; }

/* .section-bg y .bg-light tienen !important en la plantilla y en Bootstrap.
   Hay que igualar la fuerza o no entran. */
.section-bg { background-color: var(--crema) !important; }
.bg-light,
.bg-white   { background-color: var(--crema) !important; }


/* =============================================================================
   8. LA TARJETA — no hay tarjeta
   -----------------------------------------------------------------------------
   Hoy conviven TRES tratamientos para lo mismo:
     .product__item--style1  -> radio 16 + borde transparente que aparece al hover
     .product__item--style2  -> border:1px solid #EBF8E4 !important + radio 12 !important
     .product__item--style3  -> radio 12 + un filete vertical de 70% de alto
   Son 43 cajitas blancas sobre fondo blanco con un borde que solo dibuja la
   retícula que la rejilla ya dibuja. Y además la caja no es gratis: obliga a
   un padding interior que se come 32 px de ancho útil por tarjeta.

   Receta única, para las 24 fichas de plato, las 4 ventajas, los 3 planes y
   los 4 hechos: el contenedor desaparece, la FOTO es lo único con forma
   (radio 12 y la sombra del bol del hero), el texto va debajo, sin caja.
   ========================================================================== */

:root {
  --radio-foto:  12px;
  --radio-boton:  8px;   /* el de .hero-scroll__enlace (hero-scroll.css:99).
                            Es el único radio de botón de toda la web: son 42
                            botones a 8 contra 6 a 999. Gana el hero. */
  --radio-menor:  4px;   /* distintivos y píldoras de dato */
  --sombra-foto: 0 18px 30px -18px rgba(22, 25, 21, .25);  /* la del bol */
}

/* --- El contenedor se apaga ------------------------------------------------ */
.product__item-inner,
.product__item--style1 .product__item-inner,
.product__item--style2 .product__item-inner,
.product__item--style3 .product__item-inner,
.product__item--style11 .product__item-inner {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-inline: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* el borde que aparecía al pasar el ratón: era la cuarta forma de decir
   "aquí hay una caja" en una página que ya no tiene cajas */
.product__item--style1 .product__item-inner:hover,
.product__item--style2 .product__item-inner:hover,
.product__item--style3 .product__item-inner:hover,
.product__item--style11 .product__item-inner:hover { border: 0 !important; }

/* --- La foto: lo único con forma ------------------------------------------- */
.product__item-thumb {
  border: 0;
  border-bottom: 0;
  border-right: 0;
  border-radius: var(--radio-foto);
  overflow: hidden;
  background: var(--crema-honda);   /* el hueco, en la misma tierra: si una foto
                                       tarda o falla, no aparece un rectángulo
                                       blanco en mitad de la crema */
  box-shadow: var(--sombra-foto);
}
.product__item-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* el filete vertical decorativo de --style3 */
.product__item--style3 .product__item-thumb::after { display: none; }
/* el zoom al 105% del hover: mueve la comida y no dice nada */
.product__item.active .product__item-thumb img,
.product__item:hover .product__item-thumb img { transform: none; }

/* --- El texto, debajo y sin caja ------------------------------------------- */
.product__item-content {
  padding: 12px 0 0 !important;
  margin-left: 0 !important;
  text-align: left;
}

/* El nombre del plato pesa MÁS que el importe. Hoy es al revés: el precio es
   un h4 a 20/700 y el nombre un h5 a 18/500. Se vende comida, no se vende un
   número. */
.product__item-content h5,
.feature--style2 .feature__item-content h5 {
  font-family: var(--tipo);
  font-size: var(--t-h5) !important;
  font-weight: var(--p-fuerte) !important;
  line-height: var(--i-h5);
  color: var(--titulo);
  margin-bottom: 4px;
  /* la plantilla clava -webkit-line-clamp:1 (style.css:441), y eso corta 12 de
     los 24 nombres en escritorio y 14 en móvil: "Lentejas con verduras y..." */
  -webkit-line-clamp: 2;
  min-height: calc(2 * var(--t-h5) * var(--i-h5));  /* reserva las dos líneas:
                                                       así los precios de una
                                                       fila caen a la misma Y */
}
.product__item-content p.small {
  font-size: var(--t-menor);
  line-height: var(--i-menor);
  color: var(--tinta);
  margin-bottom: 10px;
}

.product__item-price h4,
.product__item-price h4 span {
  font-size: 1.0625rem;          /* 17 px: por debajo del nombre, a propósito */
  font-weight: var(--p-medio);
  color: var(--teal);
  margin-bottom: 0;
  line-height: 1.2;
}

/* El pie de la tarjeta se pega abajo: con auto, todas las acciones de una fila
   comparten Y aunque los nombres ocupen distinto. Hoy los botones bailan hasta
   40 px entre columnas. */
.product__item-footer,
.product__item-action { margin-top: auto; }
.product__item-footer { gap: 8px; }

/* Las estrellas de valoración: no hay ni un dato estructurado que las respalde
   (cero aggregateRating en el JSON-LD de las 31 páginas). Fuera. */
.product__item-rating { display: none; }

/* El distintivo. Único uso del verde en toda la página, y va SOBRE la foto,
   donde es una mancha y no un texto que haya que leer sobre crema. */
.product__item-badge {
  background-color: var(--verde);
  color: #0E2A0A;
  border-radius: var(--radio-menor);
  font-family: var(--tipo);
  font-size: var(--t-etiq);
  font-weight: var(--p-fuerte);
  letter-spacing: var(--tr-etiq);
  text-transform: uppercase;
  padding: 3px 8px;
  top: 10px;
  left: 10px;
}
.product__item-badge--new { background-color: var(--teal); color: var(--sobre-oscuro); }

/* --- La misma receta para lo que NO es un plato ---------------------------- */
/* Las cuatro ventajas y los tres pasos usan .sale-banner__item-inner, que la
   plantilla pinta como plancha de caramelo con radio 24. Mismo tratamiento:
   sin caja. El bloque queda aquí para que ninguna sección tenga que inventarse
   el suyo. */
.benefits .sale-banner__item-inner,
.planes-seccion .plan-col,
.feature-bar__item {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 !important;
}

/* La rejilla propia de la carta. Bootstrap reparte por columnas fijas
   (row-cols-xl-5) y a 1240 px eso da tarjetas de anchos raros; auto-fill con
   un mínimo real da 24 tarjetas de 395 px exactas. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: var(--canal);
  align-items: start;
}


/* =============================================================================
   9. BOTONES — dos formas, y una de ellas es un enlace subrayado
   -----------------------------------------------------------------------------
   Una acción primaria por bloque: sólido teal, radio 8. La secundaria NUNCA es
   un segundo botón: es un enlace subrayado de 13-15 px.

   GloriaFood (límite del encargo: se puede reestilar, no sustituir). Su hoja
   www.fbgcdn.com/embedder/css/order-online.css se inyecta al FINAL del <head>
   en tiempo de ejecución y gana por orden a igual especificidad (0-1-0). Hay
   que atacar con doble clase + !important o no entra. Con esto el naranja
   #EF8B17 desaparece de los ~56 botones de la home, incluido el del hero, que
   hoy sale naranja en Arial sobre la crema.
   ========================================================================== */

.trk-btn,
span.glf-button.glf-button-custom,
.glf-button.trk-btn,
.boton-solido {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal) !important;
  color: var(--sobre-oscuro) !important;
  border: 0 !important;
  border-radius: var(--radio-boton) !important;
  box-shadow: none !important;
  font-family: var(--tipo) !important;
  font-size: var(--t-menor) !important;
  font-weight: var(--p-fuerte) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 12px 22px !important;
  cursor: pointer;
  min-height: 44px;              /* área táctil mínima */
}
.trk-btn:hover, .trk-btn.active,
span.glf-button.glf-button-custom:hover,
.boton-solido:hover, .boton-solido:focus-visible {
  background: var(--teal-hondo) !important;
  color: var(--sobre-oscuro) !important;
  transform: none !important;    /* el translateY(-3px) de style.css:5711 */
}
/* El destello: un rectángulo blanco de 155 px rotado 35° que cruza el botón en
   550 ms. Es el gesto más de plantilla comprada que tiene la página. */
.trk-btn::after,
.text-btn::after { display: none !important; content: none !important; }

/* Las variantes de color de la plantilla se colapsan: no hay botón verde, ni
   gris, ni amarillo. Hay un botón. */
.trk-btn--primary,
.trk-btn--secondary,
.trk-btn--gray,
.trk-btn--yellow,
.trk-btn--sm,
.trk-btn--md,
.trk-btn--large { background-color: var(--teal) !important; color: var(--sobre-oscuro) !important; padding: 12px 22px !important; }

/* La secundaria: enlace subrayado. Es la forma que toma GloriaFood dentro de
   una tarjeta de plato, donde la primaria ya es "Añadir a mi plan". */
.trk-btn--outline,
.product__item-action span.glf-button.glf-button-custom,
.product__item-action .glf-button.trk-btn {
  background: none !important;
  color: var(--teal) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  min-height: 0;
  font-size: var(--t-etiq) !important;
  font-weight: var(--p-medio) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.trk-btn--outline:hover,
.product__item-action span.glf-button.glf-button-custom:hover { color: var(--teal-hondo) !important; }

/* El icono de dentro del botón: la plantilla lo fuerza a blanco con !important
   (style.css:5632), lo que en la variante subrayada dejaba una flecha
   invisible sobre crema. */
.trk-btn svg, .trk-btn i, .glf-button svg {
  color: currentColor !important;
  fill: currentColor;
  width: 1em; height: 1em;
}
.trk-btn--outline svg,
.product__item-action .glf-button svg { color: var(--teal) !important; }

/* "Añadir a mi plan": pasa de píldora verde de 999 px a la acción primaria de
   la tarjeta, sólida y a ancho completo. El verde ahí abajo era el único texto
   de la página en 2,05:1. */
.anadir-plan {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  background: var(--teal);
  color: var(--sobre-oscuro);
  text-align: center;
  font-family: var(--tipo);
  font-size: var(--t-menor);
  font-weight: var(--p-fuerte);
  padding: 11px 16px;
  border-radius: var(--radio-boton);
  text-decoration: none;
  min-height: 44px;
}
.anadir-plan:hover { background: var(--teal-hondo); color: var(--sobre-oscuro); }
.anadir-plan[data-anadido] { background: var(--crema-honda); color: var(--teal); }


/* =============================================================================
   10. ENCABEZADOS DE SECCIÓN
   -----------------------------------------------------------------------------
   Hoy conviven cuatro variantes: mb=40 a la izquierda, mb=24 a la izquierda,
   mb=48 centrada (dos veces). Una sola: a la izquierda SIEMPRE. El texto
   centrado obliga al ojo a buscar el principio de cada línea, y en una página
   que es una columna de crema el borde izquierdo es la única guía que hay.
   ========================================================================== */

.section-header {
  margin-bottom: var(--ritmo-encabezado);
  gap: 16px 24px;
  text-align: left;
  justify-content: space-between;
  align-items: end;
}
.section-header.text-center,
.section-header.text-center * { text-align: left; }   /* mata el .text-center
                            que la plantilla trae en el HTML de dos secciones */
.section-header h2,
.section-header__content h2,
.section-title {
  max-inline-size: var(--medida-titular);
  margin-bottom: 0;
}
.section-header p,
.section-header__content p {
  max-inline-size: var(--medida-texto);
  color: var(--tinta);
  margin-bottom: 0;
}
/* Los modificadores de ancho de la plantilla centraban con margin:auto */
.section-header--max50,
.section-header--max57,
.section-header--max65 { margin-inline: 0; margin-bottom: var(--ritmo-encabezado); }
.section-header--max20 h2 { margin: 0; }

/* La etiqueta versal que abre cada sección: 12 px, tracking abierto, teal.
   Es lo que sustituye al icono suelto de la plantilla. */
.etiqueta {
  display: block;
  font-family: var(--tipo);
  font-size: var(--t-etiq);
  font-weight: var(--p-fuerte);
  letter-spacing: var(--tr-etiq);
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}

/* Las pestañas de la carta. La plantilla las descuelga con margin-left:-20%
   a partir de 1200 px, lo que las saca del contenedor y las deja flotando
   sobre nada. */
.popular-product__filters .nav-pills { gap: 24px; }
@media (min-width: 1200px) {
  .popular-product__filters .nav-pills { gap: 32px; margin-left: 0; }
}
.popular-product__filters .nav-pills .nav-link {
  font-family: var(--tipo);
  font-size: var(--t-menor);
  font-weight: var(--p-medio);
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 0;
}
.popular-product__filters .nav-pills .nav-link:hover,
.popular-product__filters .nav-pills .nav-link.active {
  color: var(--teal);
  border-color: var(--teal);
  background: none;
}


/* =============================================================================
   11. ANULACIONES SOBRE BOOTSTRAP 5
   -----------------------------------------------------------------------------
   Solo lo que la plantilla usa de verdad en las 31 páginas. Bootstrap no se
   toca por dentro: se le reapuntan sus variables (arriba, bloque 2) y se
   neutralizan las cuatro utilidades que contradicen el sistema.
   ========================================================================== */

:root {
  --bs-border-radius:    var(--radio-boton);
  --bs-border-radius-sm: var(--radio-menor);
  --bs-border-radius-lg: var(--radio-foto);
  --bs-gutter-x: var(--canal);
  --bs-gutter-y: var(--canal);
  --bs-font-sans-serif: var(--tipo-texto);
  --bs-body-font-family: var(--tipo-texto);
  --bs-body-font-size: var(--t-cuerpo);
  --bs-body-line-height: var(--i-cuerpo);
}

/* .border + .rounded + .shadow-sm es exactamente el vocabulario de "aquí hay
   una tarjeta", y lo llevan los tres testimonios (.testimonial-item p-4 border
   rounded shadow-sm). Mientras ese HTML siga vivo, que al menos no dibuje una
   caja: se acota a las secciones donde la plantilla lo puso, para no romper
   formularios ni tablas del área de cliente. */
.testimonials .border,
.testimonials .rounded,
.testimonials .shadow-sm,
.benefits .border,
.benefits .rounded,
.benefits .shadow-sm,
.popular-product .border,
.popular-product .rounded,
.popular-product .shadow-sm {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* .text-warning son las quince estrellas ámbar de los testimonios */
.text-warning { color: var(--teal) !important; }

/* .border-top de la línea de hechos: el filete de la página, no el de Bootstrap */
.border-top { border-top: 1px solid var(--linea) !important; }

/* Los pills de Bootstrap fuera de la carta (área de cliente, ficha de plato) */
.nav-pills {
  --bs-nav-pills-link-active-bg: transparent;
  --bs-nav-pills-link-active-color: var(--teal);
  --bs-nav-pills-border-radius: 0;
}

/* La plantilla usa .fs-7, que Bootstrap 5 no define: cae al tamaño heredado y
   por eso la línea de hechos se ve del mismo cuerpo que el titular. */
.fs-7 { font-size: var(--t-menor) !important; line-height: var(--i-menor); }
.small { font-size: var(--t-menor); }

/* El modal de configuración de cookies bloquea el scroll del body y encima
   monta modal sobre modal. Mientras exista, que al menos no oscurezca. */
.modal-backdrop { display: none; }


/* =============================================================================
   12. LIMPIEZA DE LA PLANTILLA — lo que se apaga y por qué
   ========================================================================== */

/* --- El preloader --------------------------------------------------------- */
/* z-index 99999, 1.500 ms tapando el LCP, y dentro un logo con
   "floating 1s infinite alternate". Tapa exactamente el hero, que es lo único
   que hay que ver. Y si el JS falla, se queda para siempre. */
.preloader { display: none !important; }

/* --- Todo lo que se mueve solo, en bucle ---------------------------------- */
/* .sale-banner__shape: dos hojas con animaciones floating y left-right de 3 s
   infinitas. .footer__shape: tres imágenes con tres animaciones más. Cinco
   elementos animándose para siempre en una página cuyo hero solo se mueve si
   tú lo mueves. */
.sale-banner__shape,
.sale-banner__shape-item,
.footer__shape,
.footer__shape-item,
.banner__shape-item,
.blog__shape-item,
.widget__shape-item,
.feature__shape-item { display: none !important; }

/* --- Los adornos de la banda del menú diario ------------------------------ */
/* El arco blanco de 700x800 px hecho con border:10px + border-radius:50%, la
   pegatina circular de descuento de supermercado (que en móvil queda fuera del
   recorte: se paga el DOM y no se ve) y la marca de agua vegs-banner, que
   además es un rectángulo blanco vacío de 1160 px. */
.sale-banner__item-inner::before,
.sale-banner__item-content::before { display: none !important; content: none !important; }
.sale-banner__item-discount-badge { display: none !important; }
.sale-banner__item-inner {
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* --- El cierre: la trama de garabatos ------------------------------------- */
/* assets/images/cta/bg-shape.webp son 133.412 B que se descargan SIN
   condiciones en móvil y en escritorio para no verse. Y suscripcion.webp son
   fichas de Scrabble que deletrean SUBSCRIBE, en inglés, en el cierre de una
   web en español de comida casera de Torrejón. */
.newsletter__wrapper {
  background-image: none !important;
  background-color: var(--crema) !important;
  border-radius: 0 !important;
}
.newsletter__image { display: none !important; }
.newsletter__title { color: var(--titulo) !important; }
.newsletter__description { color: var(--tinta) !important; }
.newsletter__content { padding: 0 !important; max-width: none; }
.newsletter__form { background: none; padding: 0; border-radius: 0; }
.newsletter__input {
  border: 1px solid var(--linea);
  border-radius: var(--radio-boton) 0 0 var(--radio-boton);
  background: var(--crema);
}
.newsletter__button {
  background: var(--teal);
  border-radius: 0 var(--radio-boton) var(--radio-boton) 0;
}
.newsletter__button:hover { background: var(--teal-hondo); }

/* --- La cabecera ---------------------------------------------------------- */
/* Era una plancha blanca con box-shadow en flujo, y trk-menu.js le ponía
   .fixed al pasar de 140 px: la página entera pegaba un salto medido de
   140 px (CLS gratuito). Sticky desde el principio: no sale del flujo, no hay
   salto, y crema sobre crema no dibuja ninguna línea.
   NO puede ser transparente sobre el hero, aunque sea lo que suele hacerse:
   muestreando la banda superior de los 32 fotogramas, en los intermedios
   (f012, f020) la desviación respecto a la crema en la zona del logo llega a
   264 de media y 564 en p95 — hay boniato y lechuga volando justo ahí. */
.header {
  position: sticky;
  top: 0;
  padding-block: 0;
  min-height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  background: var(--crema);
  box-shadow: none;
}
.header.fixed {
  position: sticky;          /* trk-menu.js sigue poniendo la clase; que no haga
                                nada más que encender el filete */
  box-shadow: 0 1px 0 #E3D9CE;   /* pintura pura: no mueve un píxel de layout */
}
@media (min-width: 576px) { .header { padding-block: 0; } }
@media (min-width: 992px) { .header { padding-block: 0; } }

/* El logo: 172 px de ancho para una barra de 84. Baja a 90 y deja de competir
   en la cola de descargas con las imágenes del pie (hay que quitarle también
   el loading="lazy" y ponerle fetchpriority="high": es el primer elemento
   pintado de la página). */
.header__brand a img { max-width: 90px; }
@media (min-width: 1200px) { .header__brand a img { max-width: 104px; } }

.header .menu > ul > li a {
  font-family: var(--tipo);
  font-size: var(--t-menor);
  font-weight: var(--p-medio);
  text-transform: none;      /* se acabó el "Cómo Funciona" con eme mayúscula */
  color: var(--titulo);
}
.header .menu > ul > li a:hover { color: var(--teal); }   /* el verde daba 2,36:1 */

/* EL MENÚ ESTABA ESTRANGULADO (Andrés, 09-09-2026: «eso queda feote»).
   Al entrar «Calculadora» el menú se partía en dos filas ya en 1440 px, y no
   era por llevar muchos enlaces: `style.css` clava
   `.header__navbar { flex: 0 0 60% }`, que en un envoltorio de 1176 px son
   706 px de tope. Los enlaces piden 885 px con sus márgenes... y a la derecha
   quedaban 366 px VACÍOS, porque `.header__action` (la hamburguesa) mide 0 en
   escritorio.

   O sea: no sobraban enlaces, faltaba permiso para ocupar el hueco que ya
   había. Con `flex: 1 1 auto` el menú crece hasta donde necesita y sigue
   pegado a la derecha (el `justify-content: flex-end` de la plantilla).
   Medido: dos filas -> una, y con 291 px de sobra.

   Solo de 1200 px para arriba: por debajo el menú es el cajón de la
   hamburguesa y esta regla no pinta nada. */
@media (min-width: 1200px) {
  .header__navbar { flex: 1 1 auto; }
}

/* El cajón móvil: crema entera, no blanco */
.header .menu { background: var(--crema); }
.header .menu-mobile-header { background: var(--crema); }

/* LOS PRECIOS NO SE PARTEN NUNCA (Andres, 11-09-2026, con captura: el titular
   del hero dejaba el «€» solo en la linea de abajo). Un importe separado de su
   moneda se lee como un importe distinto, y en una web que vende comida eso es
   de lo poco que no se puede permitir. Cinturon general, ademas del espacio
   duro en el HTML: asi vale tambien para lo que se pinte por JavaScript. */
.plan-col__precio, .plan-col__antes,
.plan__cifra, .plan__tachado, .plan__leyenda-pago b,
.pcard__precio, .ped__pie b, .res__kcal, .miplato__precio {
  white-space: nowrap;
}

/* --- El pie --------------------------------------------------------------- */
.footer { border-radius: 0; color: var(--sobre-oscuro); }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: var(--sobre-oscuro); }
.footer p, .footer__about-moto { color: var(--sobre-oscuro-mute); }
.footer__linklist-item a { color: var(--sobre-oscuro-mute); }
.footer__linklist-item a:hover { color: var(--sobre-oscuro); }
.footer__top { padding-block: var(--ritmo-seccion); }
/* Un solo logotipo en todo el sitio: el de la cabecera, invertido. 13,5:1
   sobre el fondo del pie. Así no hay dos ficheros que mantener. */
.footer__logo img,
.footer .header__brand img { filter: brightness(0) invert(1); }

/* --- La línea de hechos --------------------------------------------------- */
.feature-bar { padding-block: var(--ritmo-interior); border-radius: 0; }
.feature-bar__title { font-family: var(--tipo); font-size: var(--t-menor) !important; }
.feature-bar__description { color: var(--tinta); }
/* Los cuatro iconos (un dólar y un carrito de descuentos, 3.336 B en las 31
   páginas) sobran: el dato es el texto. */
.feature-bar__item img,
.feature-bar__item svg { display: none; }

/* --- El botón de subir ---------------------------------------------------- */
/* Era un cuadrado de 40 px con radio 5 y un <i> vacío dentro, y ese <i> vacío
   es italic por defecto del navegador: es LO ÚNICO que dispara la descarga de
   los 50 KB de Work Sans itálica. Redondo, 44 px (área táctil) y con el icono
   del sprite. Las variables --subir dejan sitio al aviso de cookies y a la
   cinta inferior, que hoy se le montan encima. */
.scrollToTop {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px;
  border-radius: 999px !important;
  background-color: var(--teal) !important;
  bottom: var(--subir, 5%) !important;
  box-shadow: var(--sombra-foto);
}
.scrollToTop:hover { transform: none; background-color: var(--teal-hondo) !important; }
html.con-aviso { --subir: calc(5% + 108px); }
html.con-cinta { --subir: calc(5% + 76px); }


/* =============================================================================
   13. MOVIMIENTO REDUCIDO — la guarda global
   -----------------------------------------------------------------------------
   Hoy solo lo respetan tres sitios: hero-scroll.js:30, hero-scroll.css:184 y
   planificador.css:310. El resultado es perverso: quien pide menos movimiento
   pierde lo único bueno de la página (el hero, que pasa a póster estático) y
   conserva TODO el ruido — el preloader flotando, las cinco hojas en bucle y
   los siete AOS.

   Se usa 0.01ms y no "none" a propósito: con animation:none los eventos
   transitionend y animationend no se disparan nunca, y de eso dependen los
   pills de Bootstrap y el colapso del menú móvil. Con 0.01ms se disparan al
   instante y todo sigue funcionando, sin movimiento.

   Va al final del fichero para ganar por orden a cualquier regla de arriba.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Sin transición, la entrada por sección tiene que nacer ya visible: si no,
     se queda en opacity:0 para siempre. */
  html.js [data-entra] > * { opacity: 1 !important; transform: none !important; }
  html.js [data-entra].dentro > * { opacity: 1 !important; transform: none !important; }
  a:active { transform: none; }
}