/* KORE · MODO BERRINCHE · estilos de las páginas web
   Paleta y tipografías de 02_Ilustraciones/SISTEMA_VISUAL.md, de 08 DESIGN.
   Playfair Display NO se carga: DESIGN la reserva para el kit en PDF.

   ⭐ CORREGIDA EL 9-sep-2026, 15:00, por lo mismo que la app.
      Ninguna regla de aquí vuelve a nombrar un color: nombra un PAPEL,
      y cada superficie resuelve los papeles a sus propios colores.
      Hay dos superficies: la clara (fondo crema) y la oscura (fondo
      Verde noche), y la oscura se enciende de tres maneras:
        .oscuro      un recuadro oscuro dentro de una página clara
        .pie         el pie de página
        body.oscura  una página entera oscura (el regalo y las señales)

      Lo que estaba mal: reglas como .boton.suave, .nota-boton, .sub,
      .legal, .precio y h1 fijaban Verde KORE, Bruma o Verde noche sin
      decir sobre qué fondo. Dentro de .oscuro o de una página oscura
      eso da entre 1,00:1 y 1,77:1. Estaba tapado con parches escritos
      a mano en el HTML de la página del regalo; esos parches se
      quitaron porque ya no hacen falta.

      Y una que sí estaba a la vista y nadie miró: las viñetas de
      .lista eran Arena sobre crema, 1,57:1. DESIGN lo tiene escrito
      con esas palabras, «Arena solo existe sobre fondo oscuro».
      Ahora la viñeta usa --sel: Verde KORE en claro (7,05:1) y Arena
      en oscuro (6,09:1).

      La paleta no cambió. El archivo de antes está al lado, en
      kore-web.css.bak_2026-09-09_antes-de-los-papeles-de-color */

@font-face{ font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
            src:url(lato-400.woff2) format('woff2'); }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
            src:url(lato-700.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
            src:url(montserrat-700.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
            src:url(montserrat-800.woff2) format('woff2'); }

:root{
  /* los 7 colores de DESIGN. No se usan sueltos en ninguna regla:
     solo sirven para resolver los papeles de aquí abajo. */
  --crema:#FFF7EA; --noche:#24483A; --tinta:#333333;
  --verde:#2F5D50; --arena:#DBC69B; --bruma:#7A6244; --arcilla:#A6402F;
  --titulo:'Montserrat',Arial,sans-serif;
  --texto:'Lato',Arial,sans-serif;

  /* ── LOS PAPELES · superficie CLARA (fondo crema) ────────
     --txt      tinta   sobre crema  11,88:1
     --txt-2    bruma   sobre crema   5,40:1
     --txt-enl  verde   sobre crema   7,05:1
     --sel      verde   sobre crema   7,05:1
     --acento   arcilla sobre crema   5,81:1
     --titular  noche   sobre crema   9,08:1                      */
  --txt:var(--tinta);
  --txt-2:var(--bruma);
  --txt-enl:var(--verde);
  --sel:var(--verde);
  --acento:var(--arcilla);
  --titular:var(--noche);
  --linea:rgba(51,51,51,.12);
  --borde:rgba(51,51,51,.22);
  --fondo:var(--crema);
  --tarjeta:#FFFDF6;
}

/* ── LOS PAPELES · superficie OSCURA (fondo Verde noche) ──
   --txt      crema sobre noche  9,57:1
   --txt-2    arena sobre noche  6,09:1
   --txt-enl  crema sobre noche  9,57:1
   --sel      arena sobre noche  6,09:1
   --acento   arena sobre noche  6,09:1
   --titular  crema sobre noche  9,57:1
   ⛔ Aquí no existe Arcilla (1,65:1), ni Verde KORE (1,36:1),
      ni Tinta (1,24:1), ni Bruma (1,77:1). */
.oscuro,
.pie,
body.oscura{
  --txt:var(--crema);
  --txt-2:var(--arena);
  --txt-enl:var(--crema);
  --sel:var(--arena);
  --acento:var(--arena);
  --titular:var(--crema);
  --linea:rgba(255,247,234,.16);
  --borde:rgba(255,247,234,.30);
  --fondo:var(--noche);
  --tarjeta:rgba(255,247,234,.06);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{ background:var(--fondo); color:var(--txt);
      font:400 18px/1.6 var(--texto); -webkit-text-size-adjust:100%; }
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol{ margin:0; padding:0; }
a{ color:var(--txt-enl); text-underline-offset:3px; }

.env{ max-width:660px; margin:0 auto; padding:0 22px; }
section{ padding:44px 0; border-top:1px solid var(--linea); }
section:first-of-type{ border-top:none; }

.rotulo{ font:700 12px/1.5 var(--titulo); letter-spacing:.18em;
         text-transform:uppercase; color:var(--txt-2); }
h1{ font:700 34px/1.18 var(--titulo); color:var(--titular); margin-top:14px; }
h2{ font:700 26px/1.24 var(--titulo); color:var(--titular); }
h3{ font:700 13px/1.4 var(--titulo); letter-spacing:.14em;
    text-transform:uppercase; color:var(--txt-2); }
p+p{ margin-top:16px; }
.sub{ color:var(--txt-2); margin-top:16px; }

/* El botón principal es Arcilla con letra blanca, 6,18:1, en las dos
   superficies. Es la única pieza de la web que nombra un color: es el
   color del botón, no el color de un texto sobre un fondo heredado. */
.boton{
  display:block; width:100%; max-width:420px; margin:28px auto 0;
  background:var(--arcilla); color:#fff; text-align:center;
  border:none; border-radius:16px; padding:22px 20px;
  font:800 20px/1.2 var(--titulo); letter-spacing:.04em;
  text-decoration:none;
}
.boton.suave{ background:transparent; color:var(--txt-enl);
              border:1.5px solid var(--sel); font-weight:700; font-size:17px; }
.nota-boton{ text-align:center; color:var(--txt-2); font-size:15px; margin-top:12px; }

.lista{ margin-top:20px; }
.lista li{ list-style:none; padding-left:20px; position:relative; margin-top:12px; }
.lista li::before{ content:""; position:absolute; left:0; top:.62em;
                   width:7px; height:7px; border-radius:50%; background:var(--sel); }
.pasos li{ list-style:none; margin-top:24px; }
.pasos .n{ font:800 15px/1 var(--titulo); color:var(--acento);
           letter-spacing:.06em; display:block; margin-bottom:6px; }

.caja{ background:var(--tarjeta); border:1px solid var(--linea);
       border-radius:16px; padding:22px; margin-top:20px; }
.oscuro{ background:var(--fondo); color:var(--txt); border-radius:18px;
         padding:26px 22px; margin-top:20px; }

.par-si-no{ margin-top:22px; }
.par-si-no .no{ font-weight:700; color:var(--txt-2); }
.par-si-no .si{ margin-top:4px; }
.par-si-no .bloque+.bloque{ margin-top:22px; }

.faq .q{ font-weight:700; margin-top:26px; }
.faq .a{ margin-top:6px; }

.precio{ font:800 40px/1.1 var(--titulo); color:var(--titular); margin-top:22px; }
.precio-nota{ color:var(--txt-2); margin-top:8px; }
.legal{ font-size:14px; line-height:1.6; color:var(--txt-2); margin-top:22px; }

.captura{ border:1px dashed var(--txt-2); border-radius:14px; padding:18px;
          margin-top:18px; color:var(--txt-2); font-size:15px; line-height:1.5; }
.captura b{ display:block; font:700 12px/1.6 var(--titulo);
            letter-spacing:.14em; text-transform:uppercase; color:var(--acento); }

.pie{ background:var(--fondo); color:var(--txt); margin-top:0; padding:36px 0 48px;
      border:none; }
.pie .env{ font-size:15px; line-height:1.6; }

/* El filete de arriba de las páginas oscuras */
.tope{ height:6px; background:var(--acento); }

@media (max-width:420px){
  h1{ font-size:29px; }
  h2{ font-size:23px; }
  body{ font-size:17px; }
}

/* ── 22-sep-2026 · LAS CAPTURAS DE VERDAD ───────────────────
   Sustituyen los cuatro recuadros de linea discontinua que decian
   «falta la imagen». Salen de la app de verdad, dibujada a 390 px
   de ancho, que es lo que mide un telefono. No hay ni una foto ni
   un dibujo de una persona, que es la regla de esta marca.
   El color del pie es --txt-2, el mismo papel que ya usaba el
   recuadro que habia antes: 5,40:1 en claro y 6,09:1 en oscuro.
   La del telefono lleva fondo transparente a proposito, porque la
   pagina se ve en claro y en oscuro y el fondo tiene que ser el
   que toque en cada caso.                                       */
.telefono-hero{ display:block; width:100%; max-width:340px; height:auto;
                margin:30px auto 4px; }
.pantallazo{ margin:26px 0 0; }
.pantallazo img{ display:block; width:100%; max-width:330px; height:auto;
                 margin:0 auto; border-radius:16px;
                 border:1px solid var(--borde);
                 box-shadow:0 10px 26px rgba(51,51,51,.10); }
.pantallazo figcaption{ max-width:520px; margin:14px auto 0;
                        color:var(--txt-2); font-size:15px; line-height:1.5;
                        text-align:center; }

/* ── 23-sep-2026 · LAS ILUSTRACIONES ──────────────────────
   Vienen con fondo transparente, asi que se apoyan sobre el papel de la
   pagina, sea el claro o el oscuro. Sin marco y sin sombra a proposito:
   un marco las convierte en una foto pegada. */
.ilustracion{ display:block; width:100%; max-width:420px; height:auto;
              margin:26px auto 4px; }

/* ══════════════════════════════════════════════════════════
   23-sep-2026 · DARLE VIDA A LA PAGINA · VA AL FINAL

   Ellie, dos veces: «se me hace muy simple», «le falta vida y se ve
   demasiado simple». Y tenia razon: las CATORCE secciones eran identicas.
   Mismo fondo, mismo aire, separadas por una raya de un pixel. Leerla era
   bajar por un muro parejo.

   Lo que se hace, y por que, porque no es decoracion porque si:
     1. RITMO. Dos franjas oscuras en toda la pagina, bien separadas, para
        que el ojo tenga donde parar. Usan la clase .oscuro, que ya existia
        y ya tiene sus papeles de color medidos.
     2. AIRE. De 44 px a 64 entre secciones. Un muro de texto no se arregla
        con adornos, se arregla con espacio.
     3. JERARQUIA. El titulo grande de verdad, y los numeros de los pasos
        grandes de verdad. Antes el numero del paso era mas pequeño que el
        texto del paso.
     4. REMATES. El mismo filete de Arcilla bajo cada titulo que ya usa el
        kit. Es lo mas barato que existe y no gasta nada.

   ⛔ NO se toca ni una palabra. Esto es solo como se ve.
   ⛔ En las franjas oscuras el boton NO se queda en Arcilla: Arcilla sobre
      Verde noche da 1,65:1 y el boton se pierde como forma. Ahi va crema
      con letra noche, 9,57:1.
   ══════════════════════════════════════════════════════════ */

/* ── 1 · ritmo y aire ─────────────────────────────────── */
section{ padding:64px 0; }
section.noche{
  /* hereda los papeles oscuros ya medidos */
  --txt:var(--crema); --txt-2:var(--arena); --txt-enl:var(--crema);
  --sel:var(--arena); --acento:var(--arena); --titular:var(--crema);
  --linea:rgba(255,247,234,.16); --borde:rgba(255,247,234,.30);
  --tarjeta:rgba(255,247,234,.06);
  background:var(--noche); color:var(--crema);
  border-top:none; padding:72px 0;
}
section.franja{
  /* Un velo de Arena al 18% sobre el crema. Se nota que es otra banda sin
     cambiar de mundo. Con --tarjeta (#FFFDF6) la diferencia con el crema
     era de tres puntos y no se veia.
     Los papeles NO cambian: el fondo sigue siendo claro, asi que --txt,
     --txt-2 y --acento se quedan como estan. Se mide en la pagina de
     verdad, no aqui. */
  background:linear-gradient(rgba(219,198,155,.18),rgba(219,198,155,.18));
  border-top:none;
}
section.noche + section, section.franja + section{ border-top:none; }

/* ── 2 · jerarquia ────────────────────────────────────── */
h1{ font-size:40px; line-height:1.12; }
h2{ font-size:29px; padding-bottom:14px; position:relative; }
h2::after{ content:""; position:absolute; left:0; bottom:0;
  width:52px; height:3px; background:var(--acento); border-radius:2px; }
.sub{ font-size:19px; }

/* el numero del paso, que antes era mas chico que su propio texto */
.pasos li{ position:relative; padding-left:52px; margin-top:32px; }
.pasos .n{ font-size:16px; line-height:1.32; }  /* el titulo del paso 2 ocupa dos lineas y con /1 se tocaban */
.pasos li::before{
  content:counter(paso); counter-increment:paso;
  position:absolute; left:0; top:-6px;
  font:800 34px/1 var(--titulo); color:var(--acento); opacity:.45;
}
.pasos{ counter-reset:paso; }

/* ── 3 · la frase que abre el dolor ───────────────────── */
.noche .env > p:first-child{
  font:700 25px/1.35 var(--titulo); color:var(--titular);
  padding-bottom:6px;
}

/* ── 4 · el boton dentro de una franja oscura ─────────── */
.noche .boton{ background:var(--crema); color:var(--noche); }
.noche .boton.suave{ background:transparent; color:var(--crema);
  border-color:var(--arena); }

/* En una franja oscura, .oscuro se pintaria noche sobre noche y el recuadro
   desapareceria. Hoy no hay ninguno dentro de .noche; esto es para que siga
   sin haberlo el dia que alguien mueva un bloque. */
.noche .oscuro{ background:rgba(255,247,234,.08); }
.noche .caja{ background:rgba(255,247,234,.06); border-color:rgba(255,247,234,.16); }

/* ── 5 · el cuadro de gratis y completa ───────────────── */
.comparar{ width:100%; border-collapse:collapse; margin-top:26px;
  font-size:16px; }
.comparar th{
  font:700 12px/1.4 var(--titulo); letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-2);
  text-align:center; padding:0 6px 12px; border-bottom:2px solid var(--borde);
}
.comparar th:first-child{ text-align:left; }
.comparar td{ padding:14px 6px; border-bottom:1px solid var(--linea);
  text-align:center; line-height:1.4; }
.comparar td:first-child{ text-align:left; padding-right:14px; }
.comparar td:not(:first-child){ font-weight:700; color:var(--titular);
  white-space:nowrap; }
.comparar .si{ color:var(--sel); }
.comparar .no{ color:var(--txt-2); font-weight:400; }
.nota-tabla{ font-size:15px; line-height:1.55; color:var(--txt-2);
  margin-top:18px; }

/* ── 6 · remates ──────────────────────────────────────── */
.caja{ padding:26px; }
.oscuro{ padding:30px 24px; }
.faq .q{ margin-top:30px; }

/* ── 7 · aire donde la lista choca con la nota ────────── */
/* .precio-nota nace pegada al precio (8px). Cuando lo que tiene encima es
   la lista de lo que trae, y no el precio, 8px la dejan pegada al ultimo
   punto y parece parte de la lista. */
.lista + .precio-nota{ margin-top:26px; }

@media (max-width:420px){
  section{ padding:48px 0; }
  section.noche{ padding:54px 0; }
  h1{ font-size:33px; }
  h2{ font-size:25px; }
  .comparar{ font-size:15px; }
  .comparar td{ padding:12px 4px; }
}

/* ══════════════════════════════════════════════════════════
   23-sep-2026 · SOMBRA Y MOVIMIENTO · VA AL FINAL DEL TODO

   Ellie, despues de ver el ritmo nuevo: «mejoro mucho, pero le falta
   vida, dale movimiento a las cajitas, sombra tambien a las cajas, que
   se vea viva».

   Tres decisiones y por que:

   1. LA SOMBRA NO ES NEGRA. Es Verde noche muy diluido sobre el papel
      claro, y negro de verdad solo sobre el papel oscuro, donde una
      sombra verde no se ve. Una sombra negra sobre crema ensucia y se
      ve gris; la de aqui se ve calida porque es de la paleta.

   2. LAS IMAGENES CON FONDO TRANSPARENTE NO LLEVAN box-shadow.
      El telefono del hero y las ilustraciones vienen recortadas. Un
      box-shadow dibuja la sombra del RECTANGULO del archivo, asi que
      se veria un marco flotando alrededor del recorte. Ahi va
      filter:drop-shadow(), que sigue el contorno de verdad.
      ⛔ Y las ilustraciones siguen SIN sombra: esta escrito arriba,
         «un marco las convierte en una foto pegada».

   3. EL MOVIMIENTO NO PUEDE ESCONDER EL TEXTO SI FALLA.
      Nada se esconde desde el CSS. Es el propio script el que le pone
      la clase .anima al <html>, y solo entonces existen las reglas que
      esconden. Sin JavaScript, o si el script se rompe, la pagina se ve
      entera y quieta. Y lleva una red de seguridad de 2,5 segundos que
      lo enseña todo pase lo que pase.
      Se respeta prefers-reduced-motion: quien lo tenga puesto en el
      telefono no ve ni una animacion.
   ══════════════════════════════════════════════════════════ */

/* ── 1 · las sombras, por papel ───────────────────────── */
:root{
  --sombra:     0 1px 2px rgba(36,72,58,.05), 0 8px 22px rgba(36,72,58,.09);
  --sombra-alta:0 2px 4px rgba(36,72,58,.07), 0 18px 38px rgba(36,72,58,.14);
  --sombra-boton:0 6px 16px rgba(166,64,47,.28);
}
section.noche, .oscuro, .pie, body.oscura{
  --sombra:     0 1px 3px rgba(0,0,0,.18), 0 10px 26px rgba(0,0,0,.26);
  --sombra-alta:0 3px 8px rgba(0,0,0,.24), 0 20px 42px rgba(0,0,0,.34);
  --sombra-boton:0 8px 20px rgba(0,0,0,.30);
}

/* ── 2 · las cajas ────────────────────────────────────── */
.caja, .oscuro{ box-shadow:var(--sombra); }
.pantallazo img{ box-shadow:var(--sombra-alta); }
.boton{ box-shadow:var(--sombra-boton); }
.boton.suave{ box-shadow:none; }

/* El telefono del hero viene recortado: sombra de contorno, no de caja. */
.telefono-hero{ filter:drop-shadow(0 16px 30px rgba(36,72,58,.22)); }

/* La tabla no es una caja, pero flotaba sobre la nada. Un panel muy leve
   la agrupa y la separa de la franja que tiene debajo. */
.comparar{ background:var(--tarjeta); border-radius:14px;
           box-shadow:var(--sombra); overflow:hidden; }
.comparar th:first-child, .comparar td:first-child{ padding-left:14px; }
.comparar th:last-child,  .comparar td:last-child{ padding-right:14px; }
.comparar th{ padding-top:16px; }
.comparar tr:last-child td{ border-bottom:none; }

/* ── 3 · el movimiento que se siente al tocar ─────────── */
.boton, .caja, .oscuro, .pantallazo img, .comparar{
  transition:transform .28s ease, box-shadow .28s ease;
}
.boton:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.boton:active{ transform:translateY(1px); box-shadow:var(--sombra); }
.caja:hover, .oscuro:hover, .pantallazo img:hover{
  transform:translateY(-4px); box-shadow:var(--sombra-alta);
}
/* En el telefono no hay raton y :hover no ocurre nunca, asi que la
   pulsacion tiene que hacer algo por su cuenta. */
.pantallazo img:active{ transform:scale(.985); }

/* ── 4 · aparecer al bajar ────────────────────────────── */
/* Estas reglas NO existen hasta que el script pone .anima en el <html>. */
html.anima .revela{
  opacity:0; transform:translateY(16px);
  transition:opacity .62s ease-out, transform .62s ease-out;
}
html.anima .revela.dentro{ opacity:1; transform:none; }

/* ── 5 · quien pidió no ver movimiento, no lo ve ──────── */
@media (prefers-reduced-motion:reduce){
  html.anima .revela,
  html.anima .revela.dentro{ opacity:1; transform:none; transition:none; }
  .boton, .caja, .oscuro, .pantallazo img, .comparar{ transition:none; }
  .boton:hover, .caja:hover, .oscuro:hover, .pantallazo img:hover,
  .boton:active, .pantallazo img:active{ transform:none; }
}

/* ── 6 · el panel de la tabla en pantallas muy estrechas ──
   El fondo y los bordes redondeados de .comparar le sumaron 14px de
   aire a cada lado, y con eso la tabla se salia de la pantalla a 320px:
   el documento medía 332 de ancho y aparecia barra horizontal.
   Medido, no supuesto. A 365px o menos: menos aire, y las celdas
   dejan de ser de una sola linea. */
@media (max-width:365px){
  .comparar th:first-child, .comparar td:first-child{ padding-left:8px; }
  .comparar th:last-child,  .comparar td:last-child{ padding-right:8px; }
  .comparar td:not(:first-child){ white-space:normal; }
}

/* ══════════════════════════════════════════════════════════
   23-sep-2026 · MAS ANCHA · VA AL FINAL DEL TODO

   Ellie: «no puedes dejarla más ancha, la veo muy angosta».

   La columna medía 660px desde el 9-sep. En un monitor eso es una cinta
   estrecha en medio de la pantalla, y encima las imagenes estaban
   limitadas a 330 y 340px, mucho mas angostas que la propia columna.
   Asi que lo angosto no era solo la columna: eran las fotos dentro.

   Lo que se toca y lo que NO:
   ⛔ El telefono NO cambia de ancho. La columna de 660 en un telefono
      ya ocupa toda la pantalla; lo unico que se gana ahi son 8px de
      texto, bajando el aire de los lados de 22 a 18.
   ⛔ El texto NO se queda en 18px al ensanchar. Con 820px de columna,
      18px daban renglones de mas de 90 caracteres y se pierde la linea
      al saltar. Sube a 19.
   ══════════════════════════════════════════════════════════ */

/* ── en el telefono, 8px mas de texto ─────────────────── */
@media (max-width:400px){
  .env{ padding:0 18px; }
}

/* ── de tableta para arriba ───────────────────────────── */
@media (min-width:760px){
  .env{ max-width:820px; }
  body{ font-size:19px; }
  h1{ font-size:46px; }
  h2{ font-size:32px; }
  .telefono-hero{ max-width:400px; }
  .ilustracion{ max-width:520px; }
  .boton{ max-width:460px; }
  .comparar{ font-size:17px; }
  /* ⚠️ LAS CAPTURAS NO SE PONEN UNA AL LADO DE LA OTRA.
     Se probó y se miró: son pantallas de telefono enteras, de 780x2650
     la mas larga. Puestas al lado de su explicacion quedan imagenes de
     mil pixeles de alto con dos renglones de texto flotando en medio,
     y al lado un hueco vacio del alto de la imagen. Se ve mas vacia,
     no mas ancha.
     Lo que si funciona es que sean MAS GRANDES: de 330 a 380 de ancho,
     que es lo que las hace legibles de verdad en un monitor. */
  .pantallazo{ margin-top:38px; }
  .pantallazo img{ max-width:380px; }
  .pantallazo figcaption{ max-width:600px; font-size:16px; }
}