/* Sitio público. Editorial y legible: aquí se lee, no se escanea un envase.
   Comparte tokens con la aplicación para que sean el mismo producto. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--no-fuente); font-size: 1.0625rem; line-height: 1.65;
  color: var(--no-tinta); background: var(--no-fondo);
  -webkit-text-size-adjust: 100%;
}
:focus-visible { outline: 3px solid var(--no-marca); outline-offset: 2px; }
.saltar { position: absolute; left: 1rem; top: -60px; z-index: 10; background: var(--no-marca); color: var(--no-sobre-marca); padding: .75rem 1rem; border-radius: 8px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.saltar:focus { top: 1rem; }

.sitio-cabecera {
  display: flex; align-items: center; gap: var(--no-e5); flex-wrap: wrap;
  max-width: 68rem; margin: 0 auto; padding: var(--no-e4) var(--no-e5);
  border-bottom: 1px solid var(--no-borde);
}
.logo { text-decoration: none; color: var(--no-tinta); display: inline-flex; align-items: center;
        font-family: var(--no-fuente-logo); font-weight: 900; letter-spacing: -0.045em; min-height: 44px; }
.logo-no { font-size: 1.5rem; line-height: 1; }
.logo-centro { font-size: .66rem; line-height: 1; padding: 0 .04em; }
.sitio-cabecera nav { margin-left: auto; display: flex; gap: var(--no-e4); flex-wrap: wrap; }
.sitio-cabecera a:not(.logo) { color: var(--no-tinta-media); text-decoration: none; font-size: var(--no-t-s); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.sitio-cabecera a:not(.logo):hover { color: var(--no-marca); }

main { max-width: 44rem; margin: 0 auto; padding: var(--no-e6) var(--no-e5) var(--no-e8); }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--no-e4); }
h2 { font-size: 1.4rem; line-height: 1.25; margin: var(--no-e7) 0 var(--no-e3); text-wrap: balance; }
h3 { font-size: 1.1rem; margin: 0 0 var(--no-e2); }
p { margin: 0 0 var(--no-e4); }
ul { padding-left: 1.4rem; }
li { margin-bottom: var(--no-e2); }
a { color: var(--no-marca); }
code { font-family: var(--no-fuente-mono); font-size: .9em; background: var(--no-superficie); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--no-superficie); padding: var(--no-e4); border-radius: var(--no-radio); overflow-x: auto; font-size: var(--no-t-s); }
pre code { background: none; padding: 0; }
blockquote { margin: 0 0 var(--no-e4); padding: var(--no-e3) var(--no-e4); border-left: 4px solid var(--no-marca-borde); background: var(--no-marca-suave); border-radius: 0 var(--no-radio-s) var(--no-radio-s) 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--no-e4); font-size: var(--no-t-s); }
th, td { text-align: left; padding: var(--no-e2) var(--no-e3); border-bottom: 1px solid var(--no-borde); vertical-align: top; }
th { color: var(--no-tinta-media); font-weight: 600; }
/* El 34 % es para las tablas de dos columnas con la etiqueta a la izquierda. En
   una tabla con cabecera de columnas repartiría mal el ancho. */
th[scope="row"] { width: 34%; }
thead th { color: var(--no-tinta); border-bottom-width: 2px; }

/* Caja deslizable para las tablas. En móvil una tabla de tres columnas no cabe,
   y sin esto arrastra la página entera hacia los lados. */
.tabla-desliza { overflow-x: auto; margin: 0 0 var(--no-e4); }
.tabla-desliza > table { margin: 0; min-width: 100%; width: max-content; max-width: none; }


.entradilla { font-size: 1.2rem; color: var(--no-tinta-media); margin-bottom: var(--no-e5); text-wrap: balance; }
.hero { padding: var(--no-e6) 0 var(--no-e7); }
.hero-sub { font-size: 1.2rem; color: var(--no-tinta-media); }
.hero-nota { font-size: var(--no-t-s); color: var(--no-tinta-suave); }
.cta {
  display: inline-block; background: var(--no-marca); color: var(--no-sobre-marca); text-decoration: none;
  padding: var(--no-e4) var(--no-e6); border-radius: var(--no-radio); font-weight: 700; font-size: var(--no-t-l);
  min-height: 56px; line-height: 1.5;
}
.cta:hover { background: var(--no-marca-fuerte); color: var(--no-sobre-marca); }
.cierre { margin-top: var(--no-e7); }

.rejilla { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--no-e4); }
.rejilla > li { background: var(--no-superficie); border: 1px solid var(--no-borde); border-radius: var(--no-radio); margin: 0; }
.rejilla > li > * { padding-left: var(--no-e4); padding-right: var(--no-e4); }
.rejilla > li > *:first-child { padding-top: var(--no-e4); }
.rejilla > li > *:last-child { padding-bottom: var(--no-e4); }
.rejilla h2, .rejilla h3 { margin-top: 0; font-size: 1.1rem; }
/* El título de la tarjeta es su acción principal, así que el enlace ocupa la
   tarjeta entera en vez de ser una línea de texto de 21 píxeles de alto. */
.rejilla h2 a, .rejilla h3 a {
  display: block; min-height: 44px; display: flex; align-items: center;
  text-decoration: none;
}
.rejilla h2 a:hover, .rejilla h3 a:hover { text-decoration: underline; }
.rejilla p { margin: 0; font-size: var(--no-t-s); color: var(--no-tinta-media); }

/* El aviso que impide que un texto sin revisar parezca autoridad clínica. */
.revision { border-radius: var(--no-radio); padding: var(--no-e4); margin: 0 0 var(--no-e5); font-size: var(--no-t-s); border: 1px solid; }
.revision-pendiente { background: var(--no-duda-fondo); color: var(--no-tinta); border-color: var(--no-duda); }
.revision-ok { background: var(--no-ok-fondo); color: var(--no-tinta); border-color: var(--no-ok); }

.sitio-pie { border-top: 1px solid var(--no-borde); max-width: 68rem; margin: 0 auto; padding: var(--no-e5); font-size: var(--no-t-s); color: var(--no-tinta-suave); }
.sitio-pie nav { display: flex; flex-wrap: wrap; gap: var(--no-e4); margin-bottom: var(--no-e3); }
.sitio-pie a { min-height: 44px; display: inline-flex; align-items: center; }
.sitio-atribucion { font-size: var(--no-t-xs); }
.doc h2 { border-top: 1px solid var(--no-borde); padding-top: var(--no-e5); }

/* ── Pauta visual del cliente ──────────────────────────────────────────── */
body { background: var(--no-lienzo); }
main { max-width: 62rem; }

.hero { padding: var(--no-e8) 0 var(--no-e7); }
.hero-sub { font-size: 1.25rem; color: var(--no-tinta-media); max-width: 34rem; }
.hero-nota { font-size: var(--no-t-s); color: var(--no-tinta-suave); margin-top: var(--no-e4); }

.seccion-titulo {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
  margin: var(--no-e8) 0 0; border: 0; padding: 0;
}
.pasos { counter-reset: paso; }
.cierre-hero {
  margin-top: var(--no-e8); padding: var(--no-e8) 0;
  border-top: 2px dashed var(--no-borde);
}
.cierre-hero .display { font-size: clamp(1.9rem, 6vw, 3rem); }

/* Las tarjetas necesitan aire por arriba: la insignia asoma por la esquina. */
.rejilla-tarjetas > li { padding-top: var(--no-e5); }

/* Las tarjetas de la rejilla antigua heredan el nuevo lenguaje. */
.rejilla > li {
  background: var(--no-fondo); border: 0; border-radius: var(--no-radio);
  box-shadow: var(--no-sombra);
}
.rejilla h2 a, .rejilla h3 a { color: var(--no-marca-texto); }
a { color: var(--no-marca-texto); }
.doc h2 { border-top-color: var(--no-borde); }

/* Mismo motivo que en la aplicación: texto de tamaño normal sobre el degradado
   no llega a 4.5:1. El sólido sí. */
.saltar { background: var(--no-marca); }

/* El aviso de uso en el pie: con peso suficiente para que se lea, no escondido
   entre los enlaces legales. */
.pie-aviso-destacado {
  background: var(--no-fondo); border-radius: var(--no-radio-s);
  padding: var(--no-e4); box-shadow: var(--no-sombra);
  border-left: 4px solid var(--no-marca); color: var(--no-tinta-media);
  font-size: var(--no-t-s); margin: var(--no-e4) 0;
}
.pie-aviso-destacado strong { color: var(--no-tinta); }

/* El zigzag necesita más aire por arriba: la insignia asoma 26 px. */
.pasos-zigzag > li { padding-top: var(--no-e6); }

/* Cierre a dos columnas, con el titular pesado a la izquierda como en la pauta. */
.cierre-hero {
  display: grid; gap: var(--no-e7); align-items: center;
  border-top: 2px dashed var(--no-borde); margin-top: var(--no-e8); padding: var(--no-e8) 0;
}
@media (min-width: 900px) {
  .cierre-hero { grid-template-columns: 1.15fr 1fr; }
}
.cierre-tarjeta p { color: var(--no-tinta-media); }
.cierre-tarjeta p:first-child { color: var(--no-tinta); font-size: 1.1rem; }

blockquote p:last-child { margin-bottom: 0; }

/* ── Alertas oficiales ───────────────────────────────────────────────────
   El único sitio del sitio público donde se usa la escala semafórica, porque
   el único donde hay un hecho que avisar. El rojo aquí no es decorativo: es el
   mismo `--no-peligro` del motor, y por eso el degradado de marca no aparece
   en ninguna parte de esta sección. Ver `docs/adr/ADR-009`.                */

.alerta-frescura {
  font-size: var(--no-t-s); color: var(--no-tinta-media);
  background: var(--no-superficie); border-left: 3px solid var(--no-borde);
  padding: var(--no-e3) var(--no-e4); border-radius: 0 var(--no-radio-s) var(--no-radio-s) 0;
  margin: 0 0 var(--no-e6);
}
/* Cuando la copia está vieja se dice con el color del aviso, no en letra
   pequeña: quien lee un listado de alertas asume que está al día. */
.alerta-frescura-mal {
  color: var(--no-aviso); background: var(--no-aviso-fondo);
  border-left-color: var(--no-aviso);
}
.alerta-frescura a { color: inherit; }

.alertas-lista { list-style: none; padding: 0; margin: var(--no-e5) 0 0; display: grid; gap: var(--no-e4); }

.alerta-ficha {
  background: var(--no-fondo); border: 1px solid var(--no-borde);
  border-left: 4px solid var(--no-borde);
  border-radius: var(--no-radio); padding: var(--no-e4) var(--no-e5);
}
.alerta-ficha h3 { font-size: var(--no-t-l); margin: var(--no-e2) 0 var(--no-e3); line-height: 1.3; }
.alerta-ficha h3 a { color: var(--no-tinta); text-decoration: none; }
.alerta-ficha h3 a:hover { text-decoration: underline; }
.alerta-ficha-grave { border-left-color: var(--no-peligro); background: var(--no-peligro-fondo); }

.alerta-meta { font-size: var(--no-t-xs); color: var(--no-tinta-suave); margin: 0; }
.alerta-productos { font-size: var(--no-t-s); color: var(--no-tinta-media); margin: var(--no-e2) 0 0; }

.alerta-etiquetas { margin: 0; display: flex; flex-wrap: wrap; gap: var(--no-e2); }
.etiqueta-alergeno {
  display: inline-block; font-size: var(--no-t-xs); font-weight: 700;
  color: var(--no-peligro); background: var(--no-peligro-fondo);
  border: 1px solid var(--no-peligro); border-radius: 999px;
  padding: 2px var(--no-e3);
}

.alerta-grave { font-size: var(--no-t-s); color: var(--no-peligro); margin: var(--no-e3) 0 0; }
.alerta-grave-caja {
  border: 2px solid var(--no-peligro); background: var(--no-peligro-fondo);
  color: var(--no-peligro); border-radius: var(--no-radio);
  padding: var(--no-e4) var(--no-e5); margin: var(--no-e5) 0;
}
.alerta-grave-caja p { margin: 0 0 var(--no-e2); }
.alerta-grave-caja p:last-child { margin-bottom: 0; }

.alerta-detalle h1 { margin-top: var(--no-e2); }
.alerta-productos-lista { list-style: none; padding: 0; margin: var(--no-e4) 0 0; display: grid; gap: var(--no-e4); }
.alerta-producto {
  border: 1px solid var(--no-borde); border-radius: var(--no-radio);
  padding: var(--no-e4); background: var(--no-superficie);
}
.alerta-producto-nombre { margin: 0 0 var(--no-e3); }
.alerta-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--no-e2) var(--no-e4); margin: 0; font-size: var(--no-t-s); }
.alerta-datos dt { color: var(--no-tinta-suave); }
.alerta-datos dd { margin: 0; }
/* Los lotes van en monoespaciada y bien separados: se leen comparándolos, uno a
   uno, contra lo impreso en un envase. */
.alerta-datos code { font-family: var(--no-fuente-mono); background: var(--no-fondo); border: 1px solid var(--no-borde); border-radius: 4px; padding: 1px 6px; margin-right: 4px; display: inline-block; }
.alerta-original { margin: var(--no-e5) 0; }
.alerta-pie { font-size: var(--no-t-s); color: var(--no-tinta-suave); border-top: 1px solid var(--no-borde); padding-top: var(--no-e4); margin-top: var(--no-e6); }

/* Las fotos del envase. Es lo que de verdad reconoce quien está delante de la
   despensa: un código de barras no se lee a simple vista, un bote sí. */
.alerta-ficha-con-foto {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--no-e4); align-items: start;
}
.alerta-miniatura {
  width: 96px; height: 96px; object-fit: contain;
  background: var(--no-fondo); border: 1px solid var(--no-borde);
  border-radius: var(--no-radio-s); padding: 4px;
}
.alerta-ficha-texto > :first-child { margin-top: 0; }

.alerta-galeria { margin: var(--no-e5) 0; }
.alerta-galeria-fotos { display: flex; flex-wrap: wrap; gap: var(--no-e3); }
.alerta-foto {
  display: block; border: 1px solid var(--no-borde); border-radius: var(--no-radio-s);
  background: var(--no-fondo); padding: var(--no-e2); line-height: 0;
}
.alerta-foto img { width: 180px; height: 180px; object-fit: contain; }
.alerta-galeria figcaption {
  font-size: var(--no-t-xs); color: var(--no-tinta-suave); margin-top: var(--no-e3);
}

.alerta-compartir { margin: var(--no-e4) 0 0; }
.alerta-ficha .alerta-compartir { margin-top: var(--no-e3); }
.alerta-acciones { display: flex; flex-wrap: wrap; gap: var(--no-e3); align-items: center; margin-top: var(--no-e3); }

/* ============================================================================
   PAUTA 19/09/2026 — lienzo negro, hoja blanca, acentos planos.

   Lo que la define, mirando el original:
     · un marco negro que no se toca nunca con texto encima salvo cabecera y pie
     · una hoja blanca de esquina muy redondeada donde vive todo lo que se lee
     · manchas de color planas, sin degradado: violeta, lima y rosa
     · distintivos y botones NEGROS con forma de cápsula
     · botones de icono redondos, negros
     · titulares muy pesados y muy apretados
   ========================================================================= */

body {
  background: var(--no-lienzo);
  color: var(--no-sobre-lienzo);
}

/* ── Cabecera y pie: van SOBRE el negro ─────────────────────────────────── */
.sitio-cabecera {
  max-width: 76rem; border-bottom: 0;
  padding: var(--no-e5) var(--no-e5) var(--no-e4);
}
.logo { color: var(--no-sobre-lienzo); }
.sitio-cabecera a:not(.logo) { color: var(--no-sobre-lienzo-2); }
.sitio-cabecera a:not(.logo):hover { color: var(--no-lima); }

.sitio-pie {
  max-width: 76rem; border-top: 0; color: var(--no-sobre-lienzo-2);
  padding: var(--no-e6) var(--no-e5) var(--no-e8);
}
.sitio-pie a { color: var(--no-sobre-lienzo); }
/* OJO: este aviso NO va sobre el lienzo negro, va dentro de su propia caja
   BLANCA. Le puse la tinta clara del lienzo y lo dejé en 2.01:1 sobre blanco.
   Mantiene su tinta oscura, y se le pone el borde de la pauta. */
.pie-aviso-destacado {
  color: var(--no-tinta-media);
  border-left-color: var(--no-violeta);
  border-radius: var(--no-radio-s);
  box-shadow: none;
}

/* ── La hoja ────────────────────────────────────────────────────────────── */
main { max-width: 76rem; padding: 0 var(--no-e5) var(--no-e5); }
.hoja {
  background: var(--no-fondo); color: var(--no-tinta-pauta);
  border-radius: var(--no-radio-hoja);
  padding: clamp(var(--no-e5), 5vw, var(--no-e8));
  box-shadow: var(--no-sombra-hoja);
}
/* Dentro de la hoja se vuelve a leer en negro sobre blanco. */
.hoja a { color: var(--no-violeta-texto); }
.hoja h1, .hoja h2, .hoja h3 { color: var(--no-tinta-pauta); }

/* ── Titulares de la pauta: pesados y apretados ─────────────────────────── */
h1, .display, .seccion-titulo {
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
}
.display { font-size: clamp(2.4rem, 7.5vw, 4.25rem); }
.seccion-titulo { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
h2 { font-weight: 700; letter-spacing: -0.025em; }

/* ── Botón principal: cápsula negra, como en la pauta ───────────────────── */
/* `.hoja a` gana a `.cta` por especificidad y dejaba el boton con la letra
   violeta sobre la capsula negra: 1.6:1, ilegible. Se nombran los dos. */
.cta, .boton-marca, .hoja .cta, .hoja .boton-marca {
  display: inline-flex; align-items: center; gap: var(--no-e2);
  background: var(--no-tinta-pauta); color: #FFFFFF;
  border: 0; border-radius: var(--no-radio-pill);
  padding: var(--no-e4) var(--no-e6); font-weight: 600; font-size: var(--no-t-m);
  text-decoration: none; min-height: var(--no-toque);
  box-shadow: none; transition: transform var(--no-transicion), background var(--no-transicion);
}
.cta:hover, .boton-marca:hover, .hoja .cta:hover, .hoja .boton-marca:hover { background: var(--no-violeta); color: #FFFFFF; transform: translateY(-1px); }

/* ── Tarjetas: color plano, sin degradado ──────────────────────────────── */
.rejilla > li, .rejilla-tarjetas > li, .tarjeta {
  background: var(--no-superficie); border: 0;
  border-radius: var(--no-radio); box-shadow: none;
}
/* La tarjeta destacada es VIOLETA, como los bloques de dato de la pauta. */
.tarjeta-marca, .rejilla-tarjetas > li.destacada {
  background: var(--no-violeta); color: #FFFFFF;
}
.tarjeta-marca h2, .tarjeta-marca h3, .tarjeta-marca p,
.tarjeta-marca strong, .tarjeta-marca a { color: #FFFFFF; }

/* ── Cápsulas de etiqueta, como la lista de «Benefits» del original ────── */
.pildora {
  display: inline-flex; align-items: center; min-height: 40px;
  background: var(--no-tinta-pauta); color: #FFFFFF;
  border-radius: var(--no-radio-pill); padding: var(--no-e2) var(--no-e4);
  font-size: var(--no-t-s); font-weight: 500;
}

/* ── Pasos numerados, con el disco negro del original ──────────────────── */
.pasos-numerados { list-style: none; padding: 0; counter-reset: paso; }
.pasos-numerados > li {
  counter-increment: paso; position: relative;
  padding: 0 0 var(--no-e5) calc(var(--no-e6) + var(--no-e3));
  margin: 0;
}
.pasos-numerados > li::before {
  content: counter(paso); position: absolute; left: 0; top: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--no-tinta-pauta); color: #FFFFFF;
  display: grid; place-items: center;
  font-size: var(--no-t-s); font-weight: 700;
}

/* ── Franja de acento, para romper la hoja como hace el original ───────── */
.franja-lima  { background: var(--no-lima);       color: var(--no-tinta-pauta); }
.franja-rosa  { background: var(--no-rosa-pauta); color: var(--no-tinta-pauta); }
.franja-violeta { background: var(--no-violeta);  color: #FFFFFF; }
.franja-lima, .franja-rosa, .franja-violeta {
  border-radius: var(--no-radio); padding: clamp(var(--no-e5), 4vw, var(--no-e7));
  margin: var(--no-e6) 0;
}
.franja-lima a, .franja-rosa a { color: var(--no-tinta-pauta); }
.franja-violeta a { color: #FFFFFF; }

/* El foco, sobre negro y sobre blanco: el violeta se pierde en el lienzo. */
:focus-visible { outline: 3px solid var(--no-lima); outline-offset: 3px; }
.hoja :focus-visible { outline-color: var(--no-violeta); }

/* ── Retratos en la composición ─────────────────────────────────────────────
   En el original la persona es una COLUMNA al lado del texto, no una banda
   debajo. A pantalla ancha el encabezado se parte en dos; en móvil el retrato
   cae debajo y se achata, porque un vertical 4:5 a 380 px de ancho empuja el
   botón de escanear fuera de la pantalla.                                   */
@media (min-width: 900px) {
  /* El titular lleva <br> fijos. En una columna mas estrecha, a 4.25rem se
     partia en sitios absurdos («SABER QUÉ / COMES»). Se reduce el maximo. */
  .hero .display { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }

  .cierre-hero .retrato { max-width: 22rem; }
}

/* ── La portada ya no es una hoja: es el mosaico ────────────────────────── */
.portada { display: block; }
/* Los titulares de sección van dentro de su panel, sin el margen gigante que
   tenían cuando todo colgaba de una sola hoja. */
.panel .seccion-titulo { margin-top: 0; }
.panel-nota { font-size: var(--no-t-xs); opacity: .82; margin: var(--no-e4) 0 0; }
/* Sobre un panel de color, el botón se invierte: cápsula blanca, letra oscura.
   La cápsula negra sobre el violeta se hunde. */
.boton-claro, .hoja .boton-claro { background: #FFFFFF; color: var(--no-tinta-pauta); }
.boton-claro:hover, .hoja .boton-claro:hover { background: var(--no-lima); color: var(--no-tinta-pauta); }
/* Dentro de un panel de color las tarjetas son blancas, no del hueso de antes. */
.panel-lima .tarjeta, .panel-rosa .tarjeta, .panel-violeta .tarjeta { background: #FFFFFF; border-color: transparent; }
.panel-lima .rejilla-tarjetas > li, .panel-rosa .rejilla-tarjetas > li { background: transparent; border: 0; }

/* El botón perdía OTRA VEZ por especificidad: `.panel-claro a` le ponía tinta
   oscura y la cápsula negra se quedaba con la letra negra dentro. Invisible,
   1:1. Es el mismo fallo que ya tuve con `.hoja a`, así que esta vez se ataja
   en un sitio: cualquier enlace que sea un botón manda sobre el color del
   panel que lo contiene, sea cual sea. */
.panel a.cta, .panel a.boton-marca,
.hoja a.cta, .hoja a.boton-marca { color: #FFFFFF; }
.panel a.boton-claro, .hoja a.boton-claro { color: var(--no-tinta-pauta); }

/* El encabezado solo se parte en dos columnas SI hay retrato. Sin él, la
   segunda columna quedaba vacía y el texto salía separado por huecos enormes
   que parecían un fallo de maquetación. */

/* Bloque editorial: foto a un lado, texto al otro. La foto va PRIMERO en el
   HTML —antes del titular— solo en el orden de lectura visual de escritorio;
   en móvil cae encima del texto, que es lo que pide la orden de entrega. */
.bloque-foto { display: grid; gap: var(--no-e5); align-content: start; }
@media (min-width: 720px) {
  .bloque-foto { grid-template-columns: 1fr; }
}
.bloque-foto .seccion-titulo { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.bloque-foto p:last-child { margin-bottom: 0; }

/* ── El encabezado con fotografía ───────────────────────────────────────────
   UNA sola definición. Antes hubo tres, repartidas por el fichero y
   contradiciéndose: una fijaba la proporción, otra centraba, otra convertía la
   rejilla en bloque. El resultado era una foto pequeña flotando entre huecos.

   La foto ocupa la columna derecha ENTERA, de arriba abajo, y se recorta con
   `object-fit: cover` por su punto de interés. Sin proporción fija: la manda la
   altura del texto, que es lo que hace que las dos columnas terminen a la vez.

   Solo se parte en dos si HAY foto. Sin ella la segunda columna quedaba vacía y
   el texto salía separado por huecos que parecían un fallo de maquetación.  */
@media (min-width: 900px) {
  .hero:has(.retrato) {
    display: grid; grid-template-columns: 1.1fr .9fr;
    gap: var(--no-e7); align-items: stretch;
  }
  /* Dos celdas y ya está: texto y foto. Sin filas implícitas que abarcar. */
  .hero:has(.retrato) > .retrato { aspect-ratio: auto; min-height: 30rem; }
  .hero .display { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
}
.hero-texto { display: flex; flex-direction: column; justify-content: center; }
.hero-texto > :last-child { margin-bottom: 0; }
/* En móvil la foto va DEBAJO del texto y del botón, como pide la orden de
   entrega, y apaisada para no empujar el botón fuera de la pantalla. */
@media (max-width: 899px) {
  .hero > .retrato { margin-top: var(--no-e5); }
}

/* La foto de apoyo de «Cómo funciona». La orden de entrega es explícita: «es un
   refuerzo, no un reemplazo». A ancho completo y proporción 3:2 se comía el
   bloque y los tres pasos quedaban de pie de foto. Se contiene y se achata. */
.apoyo-foto { margin: var(--no-e6) 0 0; }
.apoyo-foto .retrato { aspect-ratio: 21 / 8; }
.apoyo-foto figcaption {
  margin-top: var(--no-e3); font-size: var(--no-t-s); color: var(--no-tinta-media);
}

/* ── La llamada a la acción: verde flúor, grande y ancha ────────────────────
   Encargo del cliente. La letra va NEGRA: sobre este verde, el blanco da
   1.34:1 y desaparece.

   «Más largo» se resuelve con `min-width`, no con `width: 100%`: a ancho
   completo dentro de la hoja el botón mide 900 px en escritorio y deja de
   parecer un botón. Con un mínimo generoso llena la columna en móvil y en
   escritorio se queda en una barra ancha y reconocible.                     */
.cta, .boton-marca, .panel a.cta, .panel a.boton-marca,
.hoja a.cta, .hoja a.boton-marca {
  background: var(--no-verde-fluor);
  color: var(--no-sobre-fluor);
  min-width: min(100%, 22rem);
  min-height: 64px;
  justify-content: center;
  font-size: var(--no-t-l);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: var(--no-e4) var(--no-e7);
}
.cta:hover, .boton-marca:hover,
.panel a.cta:hover, .panel a.boton-marca:hover,
.hoja a.cta:hover, .hoja a.boton-marca:hover {
  background: var(--no-verde-fluor-alto);
  color: var(--no-sobre-fluor);
}

/* El del encabezado es el principal de todo el sitio: va más grande aún. */
.hero .boton-marca { min-height: 72px; min-width: min(100%, 26rem); font-size: 1.25rem; }

/* Sobre el panel violeta y sobre el lima, el flúor sigue leyéndose y sigue
   siendo el elemento más brillante de la pantalla, que es lo que se busca. */
.boton-claro, .hoja .boton-claro { background: var(--no-verde-fluor); color: var(--no-sobre-fluor); }
.boton-claro:hover, .hoja .boton-claro:hover { background: var(--no-verde-fluor-alto); color: var(--no-sobre-fluor); }

/* «Largo»: el del encabezado llena su columna. No la hoja entera —ahí serían
   900 px y dejaría de leerse como un botón— sino la columna de texto, que en
   escritorio son unos 570 px y en móvil el ancho de la pantalla. */
.hero-texto .boton-marca { align-self: stretch; width: 100%; }

/* ── Guía de la aplicación ──────────────────────────────────────────────── */
.eti {
  font-size: var(--no-t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--no-lima); margin: 0 0 var(--no-e4);
}
.guia-portada .hero-sub { color: var(--no-sobre-lienzo-2); max-width: 38rem; }

.pasos-guia { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--no-e7); }
@media (min-width: 860px) { .pasos-guia { grid-template-columns: repeat(2, 1fr); gap: var(--no-e8) var(--no-e7); } }
.paso-guia { margin: 0; }
.paso-guia-cabecera { display: flex; align-items: center; gap: var(--no-e3); margin: 0 0 var(--no-e3); }
.paso-guia-cabecera h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.paso-guia p { margin: 0 0 var(--no-e3); }
.paso-guia-nota { font-size: var(--no-t-s); color: var(--no-tinta-media); }
.paso-guia .movil { margin-top: var(--no-e5); }

/* Cápsulas a dos columnas cuando hay muchas y son cortas. */
@media (min-width: 720px) { .capsulas-2 { grid-template-columns: repeat(2, 1fr); } }

/* ── Ancho: el encargo pide aprovechar mucho mejor la pantalla ──────────────
   Se pasa de 76 rem (1216 px) a `--ancho-max` (1560) y los canales laterales a
   `clamp(24px, 4vw, 72px)`. La MEDIDA DE LECTURA no sube con ellos: un párrafo
   a 1560 px de ancho son 200 caracteres por línea y el ojo pierde el renglón.
   Por eso el texto de las páginas de documentación sigue acotado a 78ch.    */
main { max-width: var(--ancho-max); padding: 0 var(--canal) var(--space-5); }
.sitio-cabecera, .sitio-pie { max-width: var(--ancho-max); padding-inline: var(--canal); }
.hoja > * { max-width: var(--ancho-texto); }
.hoja > .mosaico, .hoja > figure, .hoja > .tabla-desliza { max-width: none; }
/* Ritmo entre secciones grandes. */
.mosaico + .mosaico, .panel + .panel-todo { margin-top: var(--space-4); }

/* ════════════════════════════════════════════════════════════════════════════
   FASE 4 — HOME. El patrón visual del resto del sitio.

   Todo lo de aquí está pensado para escalar a las otras 136 páginas: nada
   depende de la portada. Los nombres son de componente, no de sección.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero asimétrico 55/45 ─────────────────────────────────────────────── */
.hero-nuevo { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) {
  .hero-nuevo { grid-template-columns: 55fr 45fr; gap: var(--space-8); }
}
.hero-nuevo .display { font-size: var(--t-h1); margin-bottom: var(--space-5); }
.hero-nuevo .hero-sub { font-size: var(--t-body-l); max-width: var(--ancho-entrada); }

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
.hero-acciones .cta { min-width: 0; }

/* Botón secundario: mismo tamaño, sin relleno. El encargo pide dos CTA y el
   segundo no puede competir con el primero. */
.cta-fantasma, .panel a.cta-fantasma, .hoja a.cta-fantasma {
  background: transparent; color: var(--text-primary);
  box-shadow: inset 0 0 0 2px currentColor;
}
.cta-fantasma:hover, .panel a.cta-fantasma:hover {
  background: var(--text-primary); color: var(--surface-primary);
}
.panel-negro .cta-fantasma, .panel-violeta .cta-fantasma { color: #FFFFFF; }
.panel-negro .cta-fantasma:hover, .panel-violeta .cta-fantasma:hover { background: #FFFFFF; color: var(--text-primary); }
.cta-negro, .panel a.cta-negro { background: var(--text-primary); color: #FFFFFF; }
.cta-negro:hover, .panel a.cta-negro:hover { background: var(--accent-purple); color: #FFFFFF; }

/* Microinformación: hechos comprobables, no métricas de uso. */
.micro {
  list-style: none; padding: 0; margin: var(--space-5) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--no-t-s); color: var(--text-secondary);
}
.micro > li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.micro > li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lime); flex: none; }

/* El visual del hero: el móvil delante y la foto detrás, superpuestos. */
.hero-visual { position: relative; display: grid; justify-items: center; }
.hero-visual .retrato { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-5); }
@media (min-width: 1000px) {
  .hero-visual { justify-items: end; }
  .hero-visual .retrato { aspect-ratio: 4 / 4.2; }
  .hero-visual .movil {
    position: absolute; left: 0; bottom: -4%; z-index: 1;
    max-width: 44%; box-shadow: 0 0 0 2px #2A2A31, 0 30px 70px rgba(0,0,0,.5);
  }
}
@media (max-width: 999px) {
  .hero-visual .movil { margin-top: var(--space-5); max-width: 220px; }
}

/* ── Cuatro pasos ──────────────────────────────────────────────────────── */
.pasos-4 { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
@media (min-width: 680px)  { .pasos-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pasos-4 { grid-template-columns: repeat(4, 1fr); } }
.pasos-4 > li { margin: 0; }
.pasos-4 h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--no-t-xl); }
.pasos-4 p  { margin: 0; color: var(--text-on-dark-2); }

/* ── Vitrina de capturas ───────────────────────────────────────────────── */
.vitrina { list-style: none; padding: 0; margin: var(--space-7) 0 0; display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .vitrina { grid-template-columns: repeat(3, 1fr); } }
.vitrina > li { margin: 0; display: grid; justify-items: center; gap: var(--space-4); }
.vitrina p { margin: 0; font-size: var(--no-t-s); color: var(--text-secondary); text-align: center; max-width: 24ch; }

/* ── Comparativas ──────────────────────────────────────────────────────── */
.comparativas { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .comparativas { grid-template-columns: repeat(3, 1fr); } }
.comparativa {
  margin: 0; background: var(--surface-primary); color: var(--text-primary);
  border-radius: var(--radius-4); padding: var(--space-5);
  display: grid; gap: var(--space-2); align-content: start;
}
.comparativa-a, .comparativa-b { font-weight: 700; font-size: var(--no-t-l); line-height: 1.25; }
.comparativa-vs {
  justify-self: start; font-weight: 700; font-size: 1.4rem; line-height: 1;
  color: var(--accent-purple);
}
.comparativa p { margin: var(--space-2) 0 0; font-size: var(--no-t-s); color: var(--text-secondary); }

/* ── Recorrido del dato ────────────────────────────────────────────────── */
.recorrido { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); display: grid; gap: var(--space-4); }
.recorrido > li { margin: 0; display: flex; gap: var(--space-4); align-items: flex-start; }
.recorrido-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--no-t-s);
  background: var(--accent-purple); color: #FFFFFF;
}
.recorrido strong { display: block; }
.recorrido p { margin: 2px 0 0; font-size: var(--no-t-s); color: var(--text-secondary); }

/* ── Privacidad a dos listas ───────────────────────────────────────────── */
.dos-listas { display: grid; gap: var(--space-6); margin: var(--space-6) 0; }
@media (min-width: 760px) { .dos-listas { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }
.lista-eti { font-size: var(--no-t-s); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--space-3); }
.lista-eti-si { color: var(--accent-lime); }
.lista-eti-no { color: var(--accent-pink); }
.lista-privacidad { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.lista-privacidad > li { margin: 0; padding-left: var(--space-6); position: relative; color: var(--text-on-dark-2); }
.lista-privacidad > li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 2px; background: currentColor; opacity: .6;
}

/* ── Cierre ────────────────────────────────────────────────────────────── */
.cierre-nuevo { text-align: center; padding-block: var(--seccion); }
.cierre-nuevo .display { font-size: var(--t-h2); }
.cierre-nuevo .hero-acciones { justify-content: center; }

/* ── Cabecera fija y ligera ────────────────────────────────────────────── */
.sitio-cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(10px)) { .sitio-cabecera { background: var(--bg-primary); } }

/* Los dos CTA del hero van EN LÍNEA. `.cta` lleva `min-width: 22rem` para que
   el botón suelto se lea como una barra ancha; aquí son dos y cada uno se
   ajusta a su texto. Y el del encabezado no arrastra el `width: 100%` que
   tenía el botón único. */
.hero-acciones .cta { min-width: 0; width: auto; }
.hero-nuevo .hero-texto .boton-marca { width: auto; align-self: start; }

/* El CTA de la cabecera: compacto, que no es el protagonista de la barra. */
.cta-cabecera, .sitio-cabecera a.cta {
  min-width: 0; min-height: 44px; font-size: var(--no-t-s);
  padding: var(--space-2) var(--space-5);
}
.sitio-cabecera nav { align-items: center; }

/* El título de sección necesita aire antes de los pasos: el primer número se
   pegaba al titular y parecía formar parte de él. */
.pasos-4 { margin-top: var(--space-6); }
.seccion-titulo + .pasos-4 { margin-top: var(--space-7); }

/* El CTA de la cabecera heredaba `color` del enlace de navegación —gris claro,
   pensado para el fondo carbón— y acababa con letra gris sobre la cápsula
   lima: 1.72:1. La letra de un botón la manda el botón, no la barra. */
.sitio-cabecera a.cta { color: var(--no-sobre-fluor); }
.sitio-cabecera a.cta:hover { color: var(--no-sobre-fluor); }

/* ── El logotipo, más grande ────────────────────────────────────────────────
   Es lo que dice dónde estás. A 1.5rem quedaba por debajo de los enlaces de
   navegación en peso visual y la cabecera no decía de quién era la página.

   Sube a `clamp(1.75rem, 2.6vw, 2.25rem)`: crece con la pantalla sin llegar a
   competir con el titular. La proporción interna se conserva —«alerge» al
   44 % de la altura de los NO— porque es lo que hace que se lea como una sola
   palabra y no como tres piezas pegadas. */
.logo-no { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.logo-centro { font-size: .44em; }
.sitio-cabecera .logo { gap: 0; }
/* El pie también lo lleva, y ahí basta con el tamaño de siempre. */
.sitio-pie .logo-no { font-size: 1.5rem; }

/* ══ MENÚ DE HAMBURGUESA ════════════════════════════════════════════════════
   Antes, a 390 px, la cabecera medía 272 px: el logotipo en una fila, seis
   enlaces repartidos en dos más y el botón de escanear en una cuarta. Un
   tercio de la pantalla gastado en navegación antes de leer nada.

   TODO lo de aquí abajo cuelga de `.js-menu`, que pone el guion al arrancar.
   Sin JavaScript no se aplica ninguna de estas reglas y los enlaces se ven
   como se veían: peor repartidos, pero todos ahí. Un sitio sin navegación
   porque un fichero no cargó no es una opción. */

.menu-boton { display: none; }

@media (max-width: 899px) {
  .js-menu .sitio-cabecera {
    flex-wrap: nowrap;
    gap: var(--no-e3);
    /* SIN `backdrop-filter` EN MÓVIL, y esta es la línea que hace que el menú
       funcione.

       Un `backdrop-filter` convierte al elemento en BLOQUE CONTENEDOR de sus
       descendientes con `position: fixed`. Con el desenfoque puesto, el panel
       —`fixed; inset: 0`— no se medía contra la pantalla sino contra la barra,
       así que ocupaba 76 px de alto y el resto de la página se veía encima. El
       síntoma era un menú translúcido con el contenido atravesándolo.

       En escritorio el desenfoque se conserva: allí no hay panel. */
    backdrop-filter: none;
    /* El MISMO fondo que ya tenía, no blanco.
       Le puse `--no-fondo` y quedó una barra blanca con el logotipo blanco
       encima: invisible. El lienzo del sitio es oscuro y la tinta de la
       cabecera está pensada para eso. */
    background: var(--bg-primary);
    /* La muesca del teléfono. Sin esto el logotipo se mete debajo del reloj. */
    padding-top: max(var(--no-e3), env(safe-area-inset-top));
    padding-left: max(var(--no-e4), env(safe-area-inset-left));
    padding-right: max(var(--no-e4), env(safe-area-inset-right));
  }

  .js-menu .menu-boton {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    /* 48 y no 44: es el objetivo que más se pulsa del sitio y se pulsa con el
       pulgar, en la esquina, a veces con una sola mano. */
    width: 48px; height: 48px; flex: 0 0 auto;
    padding: 0; border: 0; border-radius: 12px;
    background: transparent; color: var(--no-sobre-lienzo); cursor: pointer;
  }
  .js-menu .menu-boton:focus-visible { outline: 3px solid var(--no-marca); outline-offset: 2px; }

  /* El logotipo y el botón, POR ENCIMA del panel.
     Los tres viven dentro de la cabecera, así que compiten en su contexto de
     apilamiento. Sin esto el panel tapaba la X y el menú solo se podía cerrar
     con Escape: en un móvil, sin teclado, no se podía cerrar. */
  .js-menu .sitio-cabecera .logo,
  .js-menu .menu-boton { position: relative; z-index: 2; }

  .menu-barras { display: grid; gap: 5px; width: 24px; }
  .menu-barras i {
    display: block; height: 2.5px; border-radius: 2px; background: currentColor;
    transition: transform var(--dur-rapida, .18s) ease, opacity var(--dur-rapida, .18s) ease;
  }
  /* Abierto, las tres barras se convierten en una X. El icono dice en qué
     estado estás, no solo qué va a pasar si lo pulsas. */
  .menu-abierto .menu-barras i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-abierto .menu-barras i:nth-child(2) { opacity: 0; }
  .menu-abierto .menu-barras i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* El panel. Cuelga de la barra y llega hasta abajo: con seis enlaces sobra
     sitio, y ocupar la pantalla entera evita que se vea contenido a medias
     detrás, que es lo que hace dudar de si el menú está abierto o no. */
  /* `z-index` dentro del contexto que crea la cabecera —`sticky` con
     `z-index: 20`—, no en el de la raiz. Da igual el numero mientras supere al
     del boton: lo que decide si tapa la pagina es el 20 de la cabecera. */
  .js-menu .sitio-cabecera nav {
    position: fixed; inset: 0; z-index: 1;
    margin: 0; display: flex; flex-direction: column; align-items: stretch;
    gap: 0; flex-wrap: nowrap; overflow-y: auto;
    /* El panel sigue la pauta del sitio: lienzo oscuro, tinta clara. Con fondo
       blanco el logotipo y la X —que son blancos porque la cabecera va sobre
       el lienzo— desaparecían. */
    background: var(--bg-primary);
    padding: calc(max(var(--no-e3), env(safe-area-inset-top)) + 68px)
             max(var(--no-e5), env(safe-area-inset-right))
             calc(var(--no-e6) + env(safe-area-inset-bottom))
             max(var(--no-e5), env(safe-area-inset-left));
    /* Cerrado no ocupa, no se puede tabular y no lo lee un lector de pantalla:
       `visibility` hace las tres cosas, `opacity` sola no haría ninguna. */
    visibility: hidden; opacity: 0;
    transform: translateY(-8px);
    /* `visibility` con RETARDO al cerrar y sin retardo al abrir.
       Si se interpolara como las demás, al abrir el panel seguiría oculto
       durante los 220 ms de la animación y `focus()` sobre un enlace invisible
       no hace nada: el foco se quedaba en el `body`. Se vio probándolo. */
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .js-menu.menu-abierto .sitio-cabecera nav {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }

  .js-menu .sitio-cabecera nav a:not(.cta) {
    min-height: 56px; font-size: 1.125rem; font-weight: 600;
    color: var(--no-sobre-lienzo);
    border-bottom: 1px solid rgb(255 255 255 / .14);
    padding: var(--no-e2) 0;
  }
  /* Dónde estás, sin depender solo del color: barra a la izquierda y negrita. */
  /* Dónde estás. Sobre el lienzo oscuro el rosa de marca no llega al contraste
     que pide la norma para texto, así que la página actual va en LIMA, que sí,
     y además es el color que el producto usa para «esto es lo tuyo». */
  .js-menu .sitio-cabecera nav a[aria-current="page"] {
    color: var(--no-lima); font-weight: 800;
    border-left: 4px solid var(--no-lima); padding-left: var(--no-e3);
  }

  /* El escaneo es a lo que viene la gente. Va primero, grande y separado. */
  .js-menu .sitio-cabecera nav a.cta {
    order: -1; margin-bottom: var(--no-e5);
    min-height: 56px; width: 100%; font-size: 1.05rem;
    justify-content: center; border-bottom: 0;
  }

  /* Con el panel abierto, el fondo no se mueve. Nada peor que cerrar el menú y
     encontrarte en otro punto de la página. */
  .menu-abierto body { overflow: hidden; }
  .menu-abierto { overflow: hidden; }
}

/* En escritorio la barra vuelve a la normalidad: los enlaces se ven, el botón
   no existe y ninguna de las reglas de arriba aplica. */
@media (min-width: 900px) {
  .js-menu .menu-boton { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-menu .sitio-cabecera nav, .menu-barras i { transition-duration: .01ms; }
}