/* Kangen Water Mexico — hoja de las paginas secundarias.
   El index.html NO la usa: lleva su CSS inline y no se toca (instruccion de Ivan).
   Los tokens de abajo son una COPIA VERBATIM del :root de index.html. Duplicar esta
   permitido; DIVERGIR no. `node tools/verificar-color.mjs` compara los dos bloques y
   sale 1 si dejan de ser identicos -- que es el defecto que de otro modo aparece solo,
   el dia que alguien ajuste un color en un archivo y no en el otro. */
:root{
  --papel:        #eaeaea;
  --papel-hondo:  #e3e3e3;
  --papel-claro:  #f4f4f4;
  --tinta:        #1c1b1f;
  --tinta-media:  #545454;
  --tinta-suave:  #666666;   /* 4.77:1 sobre el papel. #6e6e6e daba 4.24 y reprobaba. */
  --cian:         #0e7fa8;   /* tinta cian: legible sobre papel */
  --cta:          #204d85;   /* 7.09:1 sobre el papel */
  --cta-hover:    #183c69;   /* 9.24:1. El hover DEBE ser mas legible que el reposo. */
  --papel-azul:   #e8edf2;   /* superficie de seccion. dE76 3.19 contra el papel: se percibe
                                como AMBIENTE en area grande y es invisible en un chip, que es
                                justo lo que se quiere. Mejora la holgura: --tinta-suave pasa
                                de 4.77 a 4.87:1. */
  --suelo-azul:   #12344d;   /* el pie. L* 20.5 -- la frontera medida para que el cian de
                                marca cumpla es L* <= 24.6. Si alguien lo aclara, el logo deja
                                de cumplir y el candado lo dice. Tono 262°: hace de PUENTE
                                entre --cian (245.5°) y --cta (278.3°), que estan a 32.9° en
                                CIELAB (no 17° -- eso era HSL, que no modela lo que ve el ojo). */
  --sobre-suelo:  #a9b5c0;   /* 6.19:1 sobre el suelo: el espejo de --tinta-media (6.29). */
  --linea-clara:  rgba(234,234,234,.12);  /* compone a #2c4a60 = 1.39:1, iguala la sobriedad
                                del filete claro (1.32:1). */
  --cian-claro:   #8fd8f5;   /* hover de enlace sobre el suelo. Medido abajo. */
  --marca-cian:   #00aeef;   /* ⛔ COLOR DE MARCA, EXENTO DE WCAG. Vive SOLO dentro del logo,
                                SOLO sobre --suelo-azul, y SOLO a 40px o mas. Sobre el papel da
                                2.10:1 y NINGUN tamanio lo rescata: rasterizado, el efectivo va
                                de 1.64 a 1.92:1 porque el antialiasing solo RESTA. El trazo del
                                isotipo es el 4.12% de su altura (medido sobre marca/iso-kangen.svg;
                                el 2.19% de una nota anterior salio del LOCKUP, otro archivo). */
  --linea:        rgba(28,27,31,.14);

  --fuente-titulo: "Quattrocento", Georgia, "Times New Roman", serif;
  --fuente-cuerpo: "Quattrocento Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --k-max: 1360px;

  /* ESCALA DE ESPACIADO — 8 peldaños, uno por relación semántica.
     Antes había 42 valores distintos nacidos de tres fuentes que no se hablaban:
     `em` de una tipografía fluida, `vw`/`vh` del viewport, y enteros a mano.
     Todo va en vw o fijo: la ALTURA de la ventana ya no toca el espaciado
     (antes la proporción del blanco variaba 54% al cambiar solo el alto). */
  --e-0: 4px;                        /* micro: sub-etiqueta pegada          */
  --e-1: 8px;                        /* dato ↔ su etiqueta · rótulo ↔ bloque */
  --e-2: 16px;                       /* párrafo ↔ párrafo                    */
  --e-3: 24px;                       /* padding interno de celda             */
  --e-4: 40px;                       /* grupo ↔ grupo                        */
  --e-5: 64px;                       /* bloque ↔ bloque · gutter lateral     */
  --e-6: clamp(96px, 10vw, 144px);   /* sección ↔ sección                    */
  --e-7: clamp(152px, 16vw, 232px);  /* sección de SOLO texto                */
  --barra-h: 60px;

  --k-gutter: var(--e-5);

  --t-xs: .72rem;
  --t-s:  .875rem;
  --t-m:  1.0625rem;
  --t-l:  clamp(1.35rem, 2.2vw, 1.9rem);
  --t-xl: clamp(1.9rem, 3vw, 2.75rem);   /* techo 44px, el maximo de la referencia */
  --t-xxl:clamp(2.2rem, 4vw, 3.5rem);    /* techo 56px */

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--fuente-cuerpo); font-size:var(--t-m); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
picture{ display:contents; }   /* que no cree caja: si la crea, los porcentajes del <img> se rompen */
a{ color:var(--cta); }
a:hover{ color:var(--cta-hover); }   /* NUNCA opacity sobre texto de color: degrada el contraste */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--cta); outline-offset:4px; border-radius:4px;
}

.envoltura{ max-width:var(--k-max); margin-inline:auto; padding-inline:var(--k-gutter); }
.medida{ max-width:62ch; }   /* la medida de lectura: ~62 caracteres */

/* --- barra: identica a la del index --- */
.barra{
  position:sticky; top:0; z-index:50; height:var(--barra-h);
  display:flex; align-items:center; gap:var(--e-4);
  padding-inline:var(--k-gutter); background:rgba(234,234,234,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.barra.pegada{ border-bottom-color:var(--linea); }
.marca{ display:flex; align-items:center; gap:var(--e-1);
  font-family:var(--fuente-titulo); font-size:var(--t-s); letter-spacing:.08em; }
.marca .iso{ height:30px; width:auto; flex:none; color:var(--tinta); }
.marca__pais{ font-weight:400; color:var(--tinta-media); letter-spacing:.02em; }
.nav{ margin-left:auto; display:flex; gap:var(--e-4); }
.nav a{ text-decoration:none; color:var(--tinta); font-size:var(--t-s); }
.nav a:hover{ color:var(--cta); }
.barra__cta{ font-size:var(--t-s); font-weight:700; text-decoration:none; white-space:nowrap; }
.barra__cta::before{ content:"● "; }

/* --- cabecera de pagina --- */
.cabecera{ padding:var(--e-6) 0 var(--e-5); }
.rotulo{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-suave); margin:0 0 var(--e-2); }
h1{ font-family:var(--fuente-titulo); font-weight:400; font-size:var(--t-xxl);
  line-height:1.1; margin:0 0 var(--e-3); text-wrap:balance; }
h1 em{ font-style:italic; color:var(--tinta-media); }
/* La medida de lectura se mide en CARACTERES, no en pixeles, asi que 62ch de cuerpo
   (17px) son ~660px pero 62ch de entrada (30.4px) son ~1180px: la misma regla produce
   un renglon casi el doble de largo. La entrada lleva su propia medida. */
.entrada{ font-size:var(--t-l); line-height:1.45; color:var(--tinta-media);
  max-width:34ch; }
.entrada p{ margin:0 0 var(--e-2); }

/* --- bloques de agua / equipo --- */
.bloque{ padding:var(--e-5) 0; border-top:1px solid var(--linea); }
.bloque__ph{ font-family:var(--fuente-titulo); font-size:var(--t-xl); line-height:1;
  margin:0 0 var(--e-1); }
.bloque__marbete{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; margin:0 0 var(--e-3); }
.bloque__marbete.si{ color:var(--tinta-media); }
.bloque__marbete.no{ color:#b83c22; }   /* 4.71:1 sobre el papel — vigilado por el arnes */
.bloque p{ margin:0 0 var(--e-2); }
h2{ font-family:var(--fuente-titulo); font-weight:400; font-size:var(--t-l);
  margin:var(--e-4) 0 var(--e-2); text-wrap:balance; }
h3{ font-family:var(--fuente-cuerpo); font-weight:700; font-size:var(--t-m);
  margin:var(--e-3) 0 var(--e-1); }
ol,ul{ margin:0 0 var(--e-2); padding-left:1.4em; }
li{ margin-bottom:var(--e-1); }
.fuente{ font-size:var(--t-s); color:var(--tinta-suave); font-style:italic; }
q, .verbatim{ font-style:italic; }

/* --- comparativa --- */
.salto{ border-top:1px solid var(--linea); padding:var(--e-4) 0; }
.salto__cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e-2);
  margin-bottom:var(--e-2); }
.salto__par{ font-family:var(--fuente-titulo); font-size:var(--t-l); line-height:1.2; }
.salto__delta{ font-size:var(--t-s); font-weight:700; color:var(--tinta-media);
  font-variant-numeric:tabular-nums; }
.veredicto{ font-size:var(--t-s); text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; margin-bottom:var(--e-1); }
.veredicto.vale{ color:#2a7344; }     /* 4.80:1 */
.veredicto.no-vale{ color:#8f5c0c; }  /* 4.71:1 */
.tabla-envoltura{ overflow-x:auto; margin:var(--e-3) 0; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:var(--t-s); }
th,td{ text-align:left; padding:var(--e-1) var(--e-2); border-bottom:1px solid var(--linea);
  vertical-align:top; }
th{ font-weight:700; color:var(--tinta-media); font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.1em; }
td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --- cierre y CTA --- */
.cierre{ border-top:1px solid var(--linea); padding:var(--e-6) 0 var(--e-5); }
.boton{
  display:inline-block; background:var(--cta); color:#fff; text-decoration:none;
  font-weight:700; font-size:var(--t-s); letter-spacing:.04em;
  padding:var(--e-2) var(--e-4); border-radius:2px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.boton:hover{ background:var(--cta-hover); }
.boton:active{ background:var(--cta-hover); transform:translateY(1px); }

/* --- pie: identico al del index --- */
.pie{ padding:var(--e-6) 0 var(--e-5); }

.pie__marca{ display:flex; align-items:center; gap:var(--e-2);
  padding-bottom:var(--e-4); margin-bottom:var(--e-4); border-bottom:1px solid var(--linea); }
.pie__marca .iso{ height:52px; width:auto; flex:none; color:var(--tinta); }

.pie__marca__nombre{ font-family:var(--fuente-titulo); font-size:var(--t-m);
  letter-spacing:.06em; color:var(--tinta); line-height:1.2; }
.pie__marca__lema{ font-size:var(--t-s); color:var(--tinta-media);
  letter-spacing:.03em; margin-top:var(--e-0); }
.pie__reja{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e-5); }
.pie__linea{ margin:0 0 var(--e-1); font-size:var(--t-s); }
.pie__enlace{ font-weight:700; text-decoration:none; }
.pie__enlace:hover{ text-decoration:underline; }
.pie__legal{ margin-top:var(--e-5); padding-top:var(--e-3); border-top:1px solid var(--linea);
  max-width:62ch; font-size:var(--t-xs); line-height:1.6; color:var(--tinta-suave); }

@media (max-width:860px){
  .nav{ display:none; }
  .marca__pais{ display:none; }
  .marca .iso{ height:26px; }
  .pie__marca .iso{ height:42px; }
  .barra{ gap:var(--e-2); }
  .barra__cta{ margin-left:auto; }
}

/* ⛔ NO ES OPCIONAL. Copiado del `@media (max-width:560px)` de index.html. Sin el, por
   debajo de 560px estas paginas usaban los tokens de ESCRITORIO mientras la portada
   encogia: --e-5 a 64px en vez de 20px (3.2x) y la barra a 60px en vez de 54. El candado
   no lo veia porque comparaba solo el PRIMER :root de cada archivo. */
@media (max-width:560px){
  :root{
    --t-xs:.75rem; --t-s:.8125rem;
    --e-3:16px; --e-4:28px; --e-5:20px; --e-6:64px; --e-7:96px; --barra-h:54px;
  }
  :root{ --t-xxl:clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ⛔ ESTE BLOQUE VA AL FINAL A PROPOSITO. Estuvo ANTES de las reglas originales del
   pie y, con la misma especificidad, ganaba la ultima: el sitio salio a produccion
   con el pie navy y los enlaces en --cta a 1.52:1, la direccion a 1.71 y el isotipo
   a 1.28. Ilegible. Y el candado dijo TODO PASA porque leia la PRIMERA declaracion
   y en CSS gana la ULTIMA. Si mueves esto hacia arriba, lo rompes otra vez. */
/* El pie en suelo oscuro. NO es capricho: el logo oficial del cliente
   (kangen-logo-claro.svg) es una version EN NEGATIVO -- letras KANGEN en cian, icosaedro y
   WATER en blanco -- y sin una superficie oscura en el sitio era inservible. Aqui la marca
   por fin puede ser ella misma, que es lo que Ivan pidio.
   ⚠️ Volver el pie oscuro OBLIGA a cambiar 5 tokens de texto: sobre este navy,
   --cta da 1.52:1, --cta-hover 1.16, --tinta-media 1.71, --tinta-suave 2.25 y --cian 2.84.
   Los cinco ILEGIBLES. Hacerlo a medias sale EN VERDE con el candado viejo. */
.pie{ background:var(--suelo-azul); border-top:none; color:var(--papel); }
.pie .rotulo{ color:var(--sobre-suelo); }
.pie__linea{ color:var(--papel); }
.pie__enlace{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.pie__enlace:hover{ color:var(--cian-claro); }   /* NO el cian de MARCA: un hover de enlace
   es INTERFAZ, no logo, y el candado lo caza. Este es un tinte claro medido. */
.pie__nota, .pie__legal{ color:var(--sobre-suelo); }
.pie__legal{ border-top-color:var(--linea-clara); }
.pie__marca{ border-bottom-color:var(--linea-clara); }
.pie__marca .iso{ color:var(--marca-cian); }   /* 52px escritorio / 42px movil: sobre el piso de 40 */
.pie__marca__nombre{ color:#fff; }
.pie__marca__lema{ color:var(--sobre-suelo); }
.pie__linea strong{ color:#fff; }   /* iba en --tinta = 1.28:1 sobre el navy */