/* ══════════════════════════════════════════════════════════════
   alimentosyaditivos.com — hoja propia.

   Rediseño 2026-08-24: blanco + tinta casi negra + azul, todo en
   Poppins, tarjetas de borde fino con radio de 11 px y bandas de
   fondo muy tenues que separan las secciones.

   Los NOMBRES DE CLASE son los mismos de antes: el HTML lo generan
   plantillas PHP y los selectores no pueden cambiar. Lo que cambia
   es lo que hace cada uno.

   Tipografía en rem (16 px = 1rem), px solo para bordes y radios.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* fondos */
  --papel:        #ffffff;   /* fondo de página */
  --superficie:   #ffffff;   /* tarjetas */
  --banda-fria:   #f6f8fb;   /* banda de sección azulada */
  --banda-calida: #faf9f6;   /* banda de sección cálida */
  --banda-gris:   #f8f8f8;   /* banda de cifras (pie de la home) */
  --gris-suave:   #fafafa;   /* foto del modal, hover de botón */
  --relleno:      #f5f6f7;   /* pastilla neutra «6 aditivos» */

  /* tinta */
  --tinta:   #0b0b0c;
  --tinta-2: #45474b;   /* texto secundario fuerte, enlaces de nav */
  --tinta-3: #6f7175;   /* párrafos secundarios */
  --tinta-4: #9c9ea3;   /* metadatos, notas, cabeceras de tabla */
  --tinta-5: #c9cbcf;   /* guiones de lista, flechas, numerales apagados */

  /* líneas */
  --linea:   #e8e9ea;   /* borde de tarjeta y de sección */
  --linea-2: #e0e2e4;   /* borde de campo y de chip */
  --linea-3: #f1f2f3;   /* separador interno (filas de tabla, pie de foto) */
  --linea-4: #eeeff0;   /* pista de barra, filete del pie */

  /* acento */
  --azul:        #3a56d4;   /* enlaces, códigos E, barras, numerales */
  --azul-fuerte: #26379b;   /* hover de enlace */
  --azul-tenue:  #eef2fc;   /* relleno de tarjeta de aditivo */
  --azul-borde:  #e0e7f8;   /* borde de esa tarjeta */
  --azul-pill:   #e9f0ff;   /* pastilla de estado en la ficha */
  --azul-pill-b: #ccdcff;
  --azul-pill-t: #1f3fe0;   /* azul eléctrico del texto de esa pastilla */

  /* aviso: lo único cálido que queda, y solo cuando la norma lo exige */
  --aviso-texto: #a8431c;
  --aviso-fondo: #fdf1ec;
  --aviso-borde: #f4d9cd;
  /* aditivos.php marca «advertencia» con este token en un style inline;
     se conserva el nombre para no tocar aquel marcado. Es el mismo color. */
  --oxido: var(--aviso-texto);

  /* verde: solo el dato «sin aditivos» */
  --verde-tenue: #e8f5ee;
  --verde-borde: #cfe8dc;
  --verde-texto: #1c6a4d;

  /* forma */
  --radio:     11px;   /* tarjetas */
  --radio-sm:  7px;    /* pastillas de lista del modal, marcas E en ingredientes */
  --radio-lg:  14px;   /* modal */
  --env:       1280px; /* ancho del contenedor */

  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sombra-modal: 0 24px 60px rgba(11, 11, 12, .22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* las bandas de sección sangran a 100vw con márgenes negativos: sin este clip
     la barra de scroll provocaría desplazamiento horizontal. `clip` y no `hidden`
     porque `hidden` rompería el sticky de la cabecera y del índice lateral. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
input, button, select, textarea { font: inherit; }

a { color: var(--azul); text-decoration: none; transition: color .15s; }
a:hover { color: var(--azul-fuerte); }

h1, h2, h3 { font-family: var(--sans); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: break-word; }

::selection { background: #dfe5f8; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.env { max-width: var(--env); margin: 0 auto; padding: 0 1.5rem; width: 100%; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 99; border-radius: var(--radio-sm); }

/* ─── Cabecera ─────────────────────────────────────────────── */
.cab {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 40;
}
.cab__fila { display: flex; align-items: center; gap: 1.75rem; height: 4rem; }

.marca { display: flex; align-items: center; gap: .625rem; color: var(--tinta); flex: 0 0 auto; }
.marca:hover { color: var(--tinta); }
.marca__logo { flex: 0 0 auto; }
.marca__txt { font-size: .96875rem; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }

.cab__nav { display: flex; gap: 1.5rem; margin-right: auto; font-size: .84375rem; font-weight: 500; }
.cab__nav a { color: var(--tinta-2); }
.cab__nav a:hover { color: var(--tinta); }

.buscador {
  display: flex; align-items: center; gap: .5rem;
  background: var(--superficie); border: 1px solid var(--linea-2); border-radius: 9px;
  height: 38px; padding: 0 .75rem; width: 280px; flex: 0 1 280px;
  transition: border-color .15s;
}
.buscador input { flex: 1; border: 0; background: transparent; font-size: .78125rem; color: var(--tinta); min-width: 0; }
.buscador input:focus { outline: none; }
.buscador:focus-within { border-color: var(--azul); }
.buscador button { border: 0; background: transparent; color: var(--tinta-4); cursor: pointer; display: grid; place-items: center; padding: 0; }
.buscador button:hover { color: var(--tinta-2); }

/* ─── Migas ────────────────────────────────────────────────── */
.migas { font-size: .71875rem; color: var(--tinta-4); padding: .875rem 0 0; }
.migas a { color: var(--tinta-3); }
.migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.migas span { margin: 0 5px; }

/* ─── Bloques genéricos ────────────────────────────────────── */
main { flex: 1; padding-bottom: 4rem; }
/* La home termina en la banda gris de las cifras, que debe morir contra el pie. */
body.home main { padding-bottom: 0; }
section { margin-top: 2.5rem; }

/* .tit es el H2 de sección (y el H1 de los hubs, que llevan su tamaño inline).
   17px en los hubs, 19px dentro de la ficha y de la categoría, 21px en la home. */
.tit { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.cuerpo .tit { font-size: 1.1875rem; letter-spacing: -.02em; }
body.home .tit { font-size: 1.3125rem; letter-spacing: -.02em; }

.tit--linea {
  border-bottom: 1px solid var(--linea); padding-bottom: .625rem; margin-bottom: 1rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.tit__nota { font-size: .71875rem; font-weight: 400; color: var(--tinta-4); letter-spacing: 0; }
/* En la home el título va suelto y la nota, debajo (.tit__sub). */
body.home .tit--linea { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; display: block; }
.tit__sub { margin-top: .25rem; font-size: .78125rem; color: var(--tinta-4); }
body.home .tit--linea + .tit__sub { margin-bottom: 1.125rem; }
/* Cuando el título de la home no lleva nota debajo, el aire lo pone el bloque siguiente. */
body.home .tit--linea + .rejilla,
body.home .tit--linea + .carrusel,
body.home .tit--linea + .heroe__cifras { margin-top: 1.125rem; }

.sub { color: var(--tinta-3); }

.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 1.25rem 1.375rem; }
.caja h3 { font-size: .90625rem; font-weight: 600; letter-spacing: -.01em; }
.caja p { margin-top: .5rem; font-size: .78125rem; line-height: 1.65; color: var(--tinta-3); }
/* Numeral de «cómo se lee un número E»: convierte las tres cajas en infografía. */
.caja__num {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-bottom: .875rem;
  border-radius: 50%; border: 1px solid var(--azul);
  color: var(--azul); font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── Bandas de sección a sangre ───────────────────────────────
   Las secciones viven dentro de .env; el calc devuelve exactamente el padding
   del contenedor, así que el fondo llega al borde de la pantalla y el contenido
   se queda alineado con el resto de la página. */
.seccion--banda,
.seccion--banda-calida,
.seccion--banda-gris {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.seccion--banda       { background: var(--banda-fria);   padding-block: 3rem 3.25rem; }
.seccion--banda-calida{ background: var(--banda-calida); padding-block: 3rem 2.25rem; }
.seccion--banda-gris  { background: var(--banda-gris);   padding-block: 3rem; border-top: 1px solid var(--linea-4); }
/* Segundo tramo de una banda continua: mismo color, sin costura. */
.seccion--sigue { margin-top: 0; padding-block: 2.25rem 3.25rem; }

/* Cabecera de página interna (ficha, listado de productos, categoría). */
.banda-cab { background: var(--banda-fria); padding: 1.625rem 0 2rem; }
.banda-cab .chips { margin: 1.25rem 0 0; }

/* ─── Home ─────────────────────────────────────────────────── */
/* La portada comparte la banda fría con la sección que la sigue: una sola
   pieza azulada de entrada, sin costura blanca entre las dos. */
.heroe { background: var(--banda-fria); padding: 4rem 0 1.75rem; }
.heroe h1 { font-size: clamp(2.125rem, 6vw, 2.875rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; max-width: 16ch; }
.heroe__entrada { font-size: .96875rem; line-height: 1.7; color: var(--tinta-3); max-width: 64ch; margin-top: 1.25rem; }
.heroe__entrada b { color: var(--tinta); font-weight: 600; }

.heroe__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.cifra strong { display: block; font-size: 2.375rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra span { display: block; margin-top: .5rem; font-size: .78125rem; line-height: 1.5; color: var(--tinta-3); }

.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.25rem; }
.puerta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
  padding: 1.5rem 1.625rem; color: var(--tinta); transition: border-color .15s;
}
.puerta:hover { border-color: var(--tinta); color: var(--tinta); }
.puerta > * { grid-column: 1; }
.puerta h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.puerta p { margin-top: .5rem; font-size: .8125rem; line-height: 1.6; color: var(--tinta-3); }
.puerta__flecha { display: inline-block; margin-top: .875rem; font-size: .78125rem; font-weight: 500; color: var(--azul); }
.puerta__icono { grid-column: 2; grid-row: 1; align-self: start; color: var(--tinta-5); }

/* ─── Rejillas ─────────────────────────────────────────────── */
.rejilla { display: grid; gap: .75rem; }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Sin esto, un nombre largo sin cortes (categorías de alimento) ensancha su columna
   más allá de la pantalla y provoca scroll horizontal. minmax(0,1fr) + min-width:0
   dejan que la celda encoja y que .adi__nom recorte con puntos suspensivos. */
.rejilla > * { min-width: 0; }

/* ─── Tarjeta de aditivo ───────────────────────────────────────
   Variante de listado (hub, buscar): blanca. */
.adi {
  display: block; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 13px 15px; color: var(--tinta);
  transition: border-color .15s;
}
.adi:hover { border-color: var(--tinta); color: var(--tinta); }
.adi__cod { display: block; font-size: .90625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.adi__nom { display: block; margin-top: 2px; font-size: .78125rem; color: var(--tinta-2);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adi__pie { display: block; margin-top: 5px; font-size: .6875rem; color: var(--tinta-4); }
.adi__pie b { font-weight: 600; color: var(--tinta-2); }

/* Variante destacada: aditivo con protagonismo (home y relacionados de la ficha). */
body.home .adi[href^="/aditivos/"],
.cuerpo .adi[href^="/aditivos/"] {
  background: var(--azul-tenue); border-color: var(--azul-borde);
}
body.home .adi[href^="/aditivos/"]:hover,
.cuerpo .adi[href^="/aditivos/"]:hover { border-color: var(--azul); }
body.home .adi[href^="/aditivos/"] .adi__cod,
.cuerpo .adi[href^="/aditivos/"] .adi__cod { font-size: .9375rem; color: var(--azul); }
body.home .adi[href^="/aditivos/"] .adi__nom,
.cuerpo .adi[href^="/aditivos/"] .adi__nom { color: var(--tinta); }

/* «Empieza por el alimento»: el código de categoría es un numeral grande apagado
   a la izquierda y el nombre queda a la derecha. */
body.home .adi[href^="/alimentos/"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: start;
}
body.home .adi[href^="/alimentos/"] .adi__cod {
  grid-row: 1 / span 2; font-size: 1.0625rem; line-height: 1.15; color: var(--tinta-5);
}
body.home .adi[href^="/alimentos/"] .adi__nom { grid-column: 2; margin-top: 0; font-size: .78125rem; font-weight: 500; line-height: 1.35; color: var(--tinta); }
body.home .adi[href^="/alimentos/"] .adi__pie { grid-column: 2; margin-top: 3px; }

/* ─── Carrusel de productos (home) ─────────────────────────────
   En escritorio son 6 columnas iguales. En móvil se desliza con el dedo:
   el scroll vive DENTRO del carrusel, nunca en la página. */
.carrusel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .875rem; }
.carrusel > * { min-width: 0; }

@media (max-width: 900px) {
  .carrusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* el carrusel sangra hasta el borde de la pantalla para que se vea que hay más */
    margin-inline: -1.5rem;
    padding: 0 1.5rem .5rem;
  }
  .carrusel > * { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .carrusel > * { flex-basis: 60%; }
}

/* ─── Tarjeta de producto ──────────────────────────────────── */
.prod {
  position: relative; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s;
}
.prod:hover, .prod:focus-visible { border-color: var(--tinta); }
.prod__foto { aspect-ratio: 1; display: grid; place-items: center; border-bottom: 1px solid var(--linea-3); padding: 10px; }
.prod__foto img { max-height: 100%; width: auto; object-fit: contain; }
.prod__sinfoto { font-size: 2rem; font-weight: 600; color: var(--linea-2); }
.prod__cuerpo { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod__nombre { font-size: .78125rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod__meta { font-size: .6875rem; color: var(--tinta-4); }
.prod__marca { color: var(--tinta-3); }
.prod__pie { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.prod__precio { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prod__n { font-size: .65625rem; color: var(--tinta-3); background: var(--relleno); border-radius: 99px; padding: 3px 8px; }
.prod__n--limpio { background: var(--verde-tenue); color: var(--verde-texto); }
.prod__lupa {
  position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--linea);
  color: var(--tinta-3); opacity: 0; transition: opacity .15s;
}
.prod:hover .prod__lupa, .prod:focus-visible .prod__lupa { opacity: 1; }
@media (hover: none) { .prod__lupa { opacity: 1; } }

/* ─── Modal de producto ────────────────────────────────────────
   Foto a la izquierda, aditivos e ingredientes a la derecha. No hay páginas de
   producto indexables: esto es solo una capa de consulta. Se mantienen los 1.120 px
   de ancho (tres columnas en escritorio), que es una decisión medida del proyecto. */
.modal {
  width: min(1120px, calc(100vw - 3rem));
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);   /* iOS: vh cuenta la barra de direcciones y recorta el final */
  padding: 0; border: 0; border-radius: var(--radio-lg);
  background: var(--superficie); color: var(--tinta); overflow: hidden;
  box-shadow: var(--sombra-modal);
  /* el reset `* { margin: 0 }` anula el margin:auto con el que el navegador
     centra un <dialog> modal; sin esto se pega a la esquina superior izquierda */
  margin: auto;
}
.modal::backdrop { background: rgba(11, 11, 12, .5); }
.modal__x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 50%;
  background: var(--superficie); color: var(--tinta-3);
  font-size: 1.125rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s, color .15s;
}
.modal__x:hover { color: var(--tinta); border-color: var(--tinta); }
.modal__cuerpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); max-height: inherit; }
.modal__foto {
  background: var(--gris-suave); border-right: 1px solid var(--linea-3);
  display: grid; place-items: center; padding: 28px; align-self: stretch;
}
.modal__foto img { max-width: 100%; max-height: 300px; width: auto; object-fit: contain; }
.modal__sinfoto { font-size: 3.5rem; font-weight: 600; color: var(--linea-2); }
.modal__datos {
  padding: 26px 28px; overflow-y: auto; overscroll-behavior: contain;
  /* sin min-height:0 la columna no scrollea dentro del grid y se corta el final */
  min-height: 0;
  max-height: min(88vh, 720px); max-height: min(88dvh, 720px);
}

/* Ingredientes y aditivos en paralelo: aprovecha el ancho en vez de crecer hacia abajo */
.modal__cols { display: grid; gap: 1.75rem; }
@media (min-width: 880px) {
  .modal__cols--doble { grid-template-columns: 1.15fr .85fr; }
}
.modal__cols > * { min-width: 0; }
.modal__titulo { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; padding-right: 36px; }
.modal__meta { font-size: .75rem; color: var(--tinta-4); margin: .3125rem 0 0; }
.modal__h3 {
  font-size: .65625rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-4); font-weight: 600; margin: 1.375rem 0 0;
  border-bottom: 1px solid var(--linea-4); padding-bottom: 7px;
}
.modal__h3:first-child { margin-top: 0; }
.modal__aditivos { list-style: none; margin-top: .625rem; display: flex; flex-direction: column; gap: 2px; }
.modal__aditivos li { font-size: .78125rem; line-height: 1.4; }
.modal__aditivos a { color: var(--tinta); display: block; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radio-sm); transition: background-color .15s; }
.modal__aditivos a:hover { background: #f6f7f8; color: var(--tinta); }
.modal__cod { font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; }
.modal__fn { color: var(--tinta-4); font-size: .71875rem; }
.modal__aviso { color: var(--aviso-texto); font-size: .6875rem; background: var(--aviso-fondo); padding: 1px 7px; border-radius: 99px; }
.modal__ing { margin-top: .625rem; font-size: .78125rem; line-height: 1.75; color: var(--tinta-3); }
.modal__ing b { color: var(--tinta); font-weight: 600; }
.ing-e {
  background: var(--azul-tenue); color: var(--azul); font-weight: 600;
  padding: 1px 4px; border-radius: 4px; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.ing-e:hover { background: var(--azul); color: #fff; }
.modal__limpio { margin-top: .625rem; font-size: .78125rem; color: var(--verde-texto); background: var(--verde-tenue); border: 1px solid var(--verde-borde); padding: .625rem .8125rem; border-radius: var(--radio-sm); }
.modal__nota { font-size: .6875rem; color: var(--tinta-4); margin-top: 1.25rem; border-top: 1px solid var(--linea-4); padding-top: .75rem; }
.modal__cargando { padding: 3rem; text-align: center; color: var(--tinta-4); grid-column: 1 / -1; }

@media (max-width: 700px) {
  .modal {
    width: 100vw; max-width: 100vw;
    max-height: 92vh; max-height: 92dvh;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0; margin: auto auto 0;
  }
  /* En móvil scrollea el cuerpo entero (foto incluida), no la columna de datos:
     así el contenido nunca queda cortado por el overflow:hidden del <dialog>.
     overscroll-behavior evita que el gesto arrastre la página de detrás, que es
     el fallo clásico en iOS. */
  .modal__cuerpo {
    grid-template-columns: 1fr;
    max-height: 92vh; max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal__foto { border-right: 0; border-bottom: 1px solid var(--linea-3); padding: 1rem; }
  .modal__foto img { max-height: 180px; }
  .modal__datos { padding: 1.25rem 1.25rem 1.75rem; max-height: none; overflow: visible; }
  .modal__x { position: sticky; float: right; top: .5rem; margin-right: .6rem; }
}

/* Mientras el modal está abierto, la página de detrás no se mueve */
body.modal-abierto { overflow: hidden; }

/* ─── Badges ───────────────────────────────────────────────── */
.badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 1.375rem 0 0; }
.badge {
  font-size: .71875rem; font-weight: 500; padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--linea-2); background: var(--superficie); color: var(--tinta-2);
  transition: border-color .15s, color .15s;
}
a.badge:hover { border-color: var(--tinta); color: var(--tinta); }
.badge--ok  { background: var(--azul-pill); border-color: var(--azul-pill-b); color: var(--azul-pill-t); }
.badge--avi { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.badge--neutro { background: var(--banda-gris); border-color: var(--linea); color: var(--tinta-3); }

/* ─── Caja de advertencia (solo si la norma la exige) ──────── */
.aviso-legal {
  border-left: 3px solid var(--aviso-texto); background: var(--aviso-fondo);
  border-radius: 0 var(--radio) var(--radio) 0; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.aviso-legal h2 { font-size: .9375rem; font-weight: 600; color: var(--aviso-texto); margin-bottom: .3rem; }
.aviso-legal p { font-size: .8125rem; line-height: 1.7; color: #7d3616; }

.pendiente { border: 1px dashed var(--linea-2); border-radius: var(--radio); padding: 1rem 1.25rem; color: var(--tinta-4); font-size: .8125rem; line-height: 1.7; }

/* ─── Ficha y categoría ────────────────────────────────────── */
.ficha__cabecera h1 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.ficha__funcion { color: var(--tinta-4); font-weight: 400; }
.respuesta { font-size: 1rem; line-height: 1.65; border-left: 2px solid var(--tinta); padding-left: 1.125rem; margin: 1.25rem 0 0; max-width: 68ch; }
.respuesta b { color: var(--tinta); font-weight: 600; }

.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 3.5rem; align-items: start; margin-top: 2.25rem; }
.cuerpo > * { min-width: 0; }   /* deja que la columna encoja y la tabla scrollee dentro de .tabla-env */
.indice { position: sticky; top: 88px; border-left: 1px solid var(--linea); padding-left: 1.125rem; }
.indice h2 { font-size: .65625rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-4); font-weight: 600; margin-bottom: .75rem; }
.indice a { display: block; font-size: .78125rem; color: var(--tinta-2); padding: 4px 0; }
.indice a:hover { color: var(--azul); }

.prosa p { font-size: .875rem; line-height: 1.75; color: var(--tinta-2); max-width: 70ch; margin-top: .5rem; }
/* Los apartados de prosa llevan la misma regla gris bajo el título que el resto
   de secciones: sin ella el bloque de texto quedaba suelto. */
.prosa h2 {
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em;
  margin: 1.75rem 0 .5rem; padding-bottom: .625rem; border-bottom: 1px solid var(--linea);
}
.prosa h2:first-child { margin-top: 0; }
.prosa a:hover, .respuesta a:hover, .fuentes a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ─── Tablas ───────────────────────────────────────────────── */
.tabla-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .78125rem; }
thead th {
  text-align: left; background: #fafafa; border-bottom: 1px solid var(--linea);
  font-size: .65625rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-4); padding: 10px 14px; white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--linea-3); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfbfc; }
.cel-cod { font-weight: 400; color: var(--tinta-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cel-dosis { font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cel-dosis--qs { font-style: italic; font-weight: 400; color: var(--tinta-3); }
.cel-nota { font-size: .71875rem; color: var(--tinta-4); }
.cel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── Barras de frecuencia ─────────────────────────────────── */
.barras { display: flex; flex-direction: column; gap: .75rem; }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: .875rem; align-items: center; }
.barra__et { display: block; font-size: .78125rem; }
.barra__pista { display: block; height: 6px; background: var(--linea-4); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.barra__val { display: block; height: 100%; background: var(--azul); border-radius: 99px; }
.barra__n { text-align: right; font-size: .75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ─── Reparto por supermercado ─────────────────────────────── */
.reparto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.reparto__it { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.reparto__n { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.reparto__et { margin-top: 3px; font-size: .71875rem; color: var(--tinta-4); }

/* ─── FAQ ──────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--linea-3); padding: 14px 0; }
.faq summary { cursor: pointer; font-size: .84375rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--azul); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: .625rem; font-size: .8125rem; line-height: 1.7; color: var(--tinta-3); max-width: 70ch; }

/* ─── Chips / filtros ──────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 1.5rem 0 1.5rem; }
.chip {
  font-size: .75rem; padding: 6px 13px; border: 1px solid var(--linea-2); border-radius: 99px;
  background: var(--superficie); color: var(--tinta-2); font-family: inherit; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
button.chip { line-height: inherit; }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip--on { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 500; }
.chip--on:hover { color: #fff; }

/* ─── Fuentes / listas de norma ────────────────────────────── */
.fuentes { display: flex; flex-direction: column; gap: .5rem; }
.fuentes li { font-size: .78125rem; line-height: 1.65; color: var(--tinta-3); list-style: none; padding-left: 1rem; text-indent: -1rem; }
.fuentes li::before { content: "—"; color: var(--tinta-5); margin-right: .45rem; }
.fuentes li b { color: var(--tinta); font-weight: 600; }

/* ─── Pie ──────────────────────────────────────────────────── */
.pie { background: var(--banda-gris); border-top: 1px solid var(--linea); padding: 2.75rem 0 1.5rem; margin-top: auto; }
.pie__rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.pie__marca { display: flex; align-items: center; gap: 9px; font-size: .875rem; font-weight: 600; letter-spacing: -.015em; }
.pie__nota { margin-top: .75rem; font-size: .78125rem; line-height: 1.65; color: var(--tinta-3); max-width: 40ch; }
.pie h3 { font-size: .65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-4); }
.pie ul { list-style: none; margin-top: .75rem; display: flex; flex-direction: column; gap: 7px; }
.pie li a { font-size: .78125rem; color: var(--tinta-2); }
.pie li a:hover { color: var(--azul); }
/* Los dos párrafos legales van en la misma fila (atribución a la izquierda,
   copyright y enlaces a la derecha): apilados desperdiciaban alto. */
.pie__legal {
  border-top: 1px solid var(--linea-2); margin-top: 2rem; padding-top: 1.125rem;
  font-size: .6875rem; line-height: 1.7; color: var(--tinta-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap;
}
.pie__legal p { max-width: 80ch; }
.pie__legal p + p { white-space: nowrap; margin-left: auto; }
.pie__legal a { color: var(--tinta-3); }
.pie__legal a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Ver más / vacíos ─────────────────────────────────────── */
/* No hay paginación a propósito: el listado crece en la misma URL. */
.btn-mas {
  font-size: .8125rem; font-weight: 500; cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid #d5d7db; border-radius: 99px;
  padding: 11px 22px; display: inline-flex; align-items: center; gap: 10px;
  transition: border-color .15s, background-color .15s;
}
.btn-mas:hover { border-color: var(--tinta); background: var(--gris-suave); }
.btn-mas[disabled] { opacity: .6; cursor: default; }
.btn-mas__n { font-size: .71875rem; font-weight: 400; color: var(--tinta-4); font-variant-numeric: tabular-nums; }
#aviso-tope { font-size: .71875rem; line-height: 1.6; color: var(--tinta-4); max-width: 52ch; margin-inline: auto; }

.vacio { text-align: center; padding: 3rem 1rem; font-size: .8125rem; color: var(--tinta-4); }

/* Pastillas de paginación: el listado de productos no las usa (un solo bloque con
   «ver más»), pero se conservan por si quedan en algún sitio. */
.paginacion a, .paginacion span { font-size: .78125rem; padding: 6px 13px; border: 1px solid var(--linea-2); border-radius: 99px; }
.paginacion .actual { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ─── Volver arriba ────────────────────────────────────────────
   Discreto: la misma pastilla azul tenue de las cabeceras de sección.
   Lo enciende modal.js a partir de la mitad del scroll. */
.arriba {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--banda-fria); border: 1px solid var(--linea-2); border-radius: 50%;
  color: var(--tinta-2); cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s, border-color .15s, color .15s, background-color .15s;
}
.arriba--visible { opacity: 1; transform: none; }
.arriba:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-tenue); }
@media (prefers-reduced-motion: reduce) {
  .arriba { transition: opacity .2s, border-color .15s, color .15s, background-color .15s; transform: none; }
}
@media (max-width: 700px) {
  .arriba { right: 1rem; bottom: 1rem; width: 38px; height: 38px; }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .cuerpo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .indice { display: none; }
  .rejilla--6 { grid-template-columns: repeat(4, 1fr); }
  .reparto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .heroe { padding-top: 2.75rem; }
}
@media (max-width: 700px) {
  .cab__fila { height: auto; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; gap: .7rem 1rem; }
  .cab__nav { order: 3; width: 100%; margin: 0; gap: 1.1rem; }
  .buscador { width: 100%; flex: 1 1 100%; }
  .puertas { grid-template-columns: 1fr; }
  .rejilla--4, .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--6 { grid-template-columns: repeat(3, 1fr); }
  .heroe__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
  .cifra strong { font-size: 1.875rem; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 1.5rem; }
  .pie__legal p + p { margin-left: 0; white-space: normal; }
  .seccion--banda, .seccion--banda-calida { padding-block: 2.25rem; }
  .seccion--sigue { padding-block: 0 2.25rem; }
  .seccion--banda-gris { padding-block: 2.25rem; }
}
@media (max-width: 420px) {
  .rejilla--6 { grid-template-columns: repeat(2, 1fr); }
  .marca__txt { font-size: .875rem; }
}