/* =====================================================================
   paginas.css  —  sistema visual de las paginas de contenido
   =====================================================================

   Se carga con <link> desde cada pagina de contenido. Ojo: esto funciona
   aca pero NO en index.html, donde el <link> externo no aplica reglas
   (ver CLAUDE.md, trampa 7). Las paginas de contenido son HTML limpio,
   sin CSP ni la herencia de Duda, y ahi si funciona.

   Tres roles de color, cada uno significa un estado real del contenido:
     azul   -> la marca. Bandas a sangre que cortan la lectura
     reloj  -> plazos, y lo que se pierde por esperar
     verde  -> la salida. Lo que ya esta resuelto

   Los tokens se llaman por su ROL, no por su tono. Antes el del medio se
   llamaba --ambar y era amarillo; Paris lo rechazo el 31-07-2026 y paso a
   ser terracota. El nombre viejo habria quedado mintiendo.

   Tipografia: Montserrat y Poppins ya viven en assets/emb (las trajo el
   clon de Duda para la portada). Las paginas de contenido nunca las
   declaraban y caian a la fuente del sistema: por eso se veian genericas.
   ===================================================================== */

/* ---------------------------------------------------------- tipografia */
@font-face{font-family:Montserrat;src:url(emb/a5ec54920b58.woff2) format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:Poppins;src:url(emb/ac6d71b4d5fd.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(emb/0da2d17e738f.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(emb/179f97ec0275.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(emb/cb726212d5d5.woff2) format("woff2");font-weight:700;font-display:swap}

/* -------------------------------------------------------------- tokens */
/* Los valores planos van primero para telefonos viejos; si el navegador
   entiende oklch, se reemplazan por los de gama amplia. */
:root{
  /* Paleta del logo nuevo (12-08-2026). Los tres primeros salen del archivo
     del logo medidos pixel a pixel; --verde-osc es derivado, para texto y
     bordes sobre fondo claro, donde el verde del logo da 2,26 de contraste. */
  --azul:#092544;
  --azul-hondo:#061a30;
  --azul-claro:#79BA9B;
  --verde-osc:#2E7355;
  --humo:#8FACBF;
  /* --reloj-rgb es el mismo color en canales sueltos, para los rgba() de
     las tramas translucidas. No se repite en el bloque @supports de abajo
     porque rgba() necesita numeros, no un color oklch. En tintes del 13 al
     28 % la diferencia de gama no se ve. */
  --reloj:#a94e34;
  --reloj-alto:#c9704f;
  --reloj-rgb:169,78,52;
  --reloj-papel:#f7ede9;
  --reloj-tinta:#7a3020;
  --verde:#2E7355;
  --verde-papel:#EDF5F1;
  --verde-tinta:#1F5C43;
  --papel:#fbfcfd;
  --papel-hondo:#eef3f7;
  --tinta:#16242e;
  --tinta-suave:#5b6f7d;
  --linea:#dde7ee;

  --lectura:66ch;
  --ancho:1120px;
  /* Ancho de las bandas de lectura. Es aparte de --ancho, que se quedo para
     el encabezado y el pie: esos si usan todo el espacio.

     Por que 760 y no 1120: la columna de texto mide ~705px (--lectura). En
     una caja de 1120 centrada, el texto se apoya en el borde izquierdo y
     sobran ~430px muertos a la derecha. Medido el 31-07-2026 a 1440px de
     ventana. Con 760 el sobrante baja a ~55px y la pagina se lee centrada. */
  --ancho-lectura:760px;
  --radio:14px;

  /* escala modular 1.33 */
  --t-xs:.75rem;
  --t-s:.875rem;
  --t-m:1.0625rem;
  --t-l:1.25rem;
  --t-xl:clamp(1.4rem,1.1rem + 1.5vw,1.9rem);
  --t-2xl:clamp(1.9rem,1.4rem + 2.4vw,2.7rem);
  --t-3xl:clamp(2.4rem,1.6rem + 4vw,4.2rem);

  --salida:cubic-bezier(.22,1,.36,1);
}
/* OJO: este bloque vuelve a declarar los mismos colores en gama amplia y
   GANA en cualquier navegador moderno. El 12-08-2026 se cambiaron los
   valores de arriba a la paleta del logo y las guias siguieron viendose
   azules justamente por esto: los de aca seguian siendo los viejos.
   Los colores de MARCA quedan en hexadecimal a proposito -tienen que ser
   exactos, no una aproximacion de gama- y solo los neutros siguen en
   oklch, que es donde la gama ancha se nota. */
@supports (color: oklch(0.5 0.1 250)){
  :root{
    --azul:#092544;
    --azul-hondo:#061a30;
    --azul-claro:#79BA9B;
    --verde-osc:#2E7355;
    --humo:#8FACBF;
    --reloj:oklch(.53 .131 38);
    --reloj-alto:oklch(.64 .116 41);
    --reloj-papel:oklch(.95 .014 44);
    --reloj-tinta:oklch(.39 .108 36);
    --verde:#2E7355;
    --verde-papel:#EDF5F1;
    --verde-tinta:#1F5C43;
    --papel:oklch(.99 .004 238);
    --papel-hondo:oklch(.95 .01 238);
    --tinta:oklch(.24 .022 238);
    --tinta-suave:oklch(.52 .028 238);
    --linea:oklch(.91 .012 238);
  }
}

/* --------------------------------------------------------------- base */
*{box-sizing:border-box}
/* overflow-x va en html y NO en body. Con el en body, body pasa a ser un
   contenedor de scroll, y el position:sticky del encabezado queda pegado a
   ese contenedor en vez de a la ventana: el boton "Hablar con un contador"
   no seguia el scroll. Es la trampa 3 de CLAUDE.md, aparecida de nuevo. */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Poppins,"Poppins Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-m);
  line-height:1.68;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-underline-offset:.18em;text-decoration-thickness:from-font}

/* Cada seccion es una banda a sangre; adentro, una columna centrada.
   La lectura se limita a --lectura, no la banda. */
.banda{padding:clamp(46px,7vw,86px) 22px}
.dentro{max-width:var(--ancho);margin:0 auto}
.col{max-width:var(--lectura)}

/* Las bandas de lectura van mas angostas que el encabezado y el pie. La
   banda sigue siendo a sangre: lo que se angosta es la columna de adentro. */
.hero .dentro,
.banda>.dentro,
.cierre .dentro{max-width:var(--ancho-lectura)}
/* El nav de "seguir leyendo" no tiene .dentro y quedaba a todo lo ancho,
   con dos tarjetas gigantes al lado de una columna de 760. */
.sigue{max-width:var(--ancho-lectura);margin-inline:auto}

/* ------------------------------------------------------------ cabecera */
.tope{
  position:sticky;top:0;z-index:20;
  background:rgba(251,252,253,.88);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
}
.tope .dentro{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px}
.tope img{width:148px}
.tope .volver{
  font-size:var(--t-s);font-weight:600;color:var(--azul);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--linea);white-space:nowrap;
  transition:border-color .25s var(--salida),background .25s var(--salida);
}
.tope .volver:hover,.tope .volver:focus-visible{border-color:var(--azul-claro);background:var(--papel-hondo)}
/* En telefono el boton se partia en dos lineas y se comia el encabezado. */
@media (max-width:560px){
  .tope .dentro{padding:10px 18px}
  .tope img{width:118px}
  .tope .volver{font-size:var(--t-xs);padding:8px 13px}
}

/* ---------------------------------------------------------------- hero */
/* Foto de fondo con un velo azul encima. El velo es fuerte a proposito: el
   texto va en blanco y tiene que leerse sobre cualquier foto, incluidas las
   claras. La foto aporta clima, no detalle. */
.hero{
  position:relative;overflow:hidden;
  background:var(--azul-hondo);
  color:#fff;
  padding:clamp(38px,6vw,74px) 22px clamp(48px,7vw,86px);
  isolation:isolate;
}
/* Va como <img> y no como background-image para que el navegador la
   descubra temprano: es el elemento mas grande de la pantalla inicial. */
.hero .fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
}
/* Sin el rayado de libro contable que habia antes: tenia sentido sobre el azul
   plano, pero sobre una foto se lee como lineas de escaner, como un defecto. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* Velo casi plano a proposito. Con .56 arriba y .90 abajo la foto se veia
       solo en la mitad superior y el resto quedaba azul solido: leia como
       "foto arriba, texto abajo" en vez de texto sobre la foto. */
    linear-gradient(to top,rgba(6,26,48,.76) 0%,rgba(6,26,48,.7) 50%,rgba(6,26,48,.66) 100%),
    radial-gradient(120% 90% at 88% -10%,rgba(121,186,155,.2),transparent 62%);
}
@media (min-width:900px){
  /* En pantalla ancha el texto ocupa la mitad izquierda: se puede dejar
     respirar la foto por la derecha. */
  .hero::before{
    background:
      linear-gradient(to right,rgba(6,26,48,.86) 0%,rgba(6,26,48,.74) 50%,rgba(6,26,48,.44) 100%),
      radial-gradient(120% 90% at 88% -10%,rgba(121,186,155,.18),transparent 62%);
  }
}
.hero>*{position:relative}
.miga{font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 22px;font-weight:600}
.miga a{color:rgba(255,255,255,.82)}
.hero h1{
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  font-size:var(--t-3xl);font-weight:800;letter-spacing:-.028em;line-height:1.03;
  margin:0 0 clamp(18px,2.4vw,26px);max-width:17ch;text-wrap:balance;
}
/* La respuesta directa, en grande. Es lo que la persona vino a buscar. */
/* Un punto por debajo de --t-xl: en telefono el parrafo de entrada ocupaba
   media pantalla y el hero se volvia una muralla de texto. */
.respuesta{
  font-size:clamp(1.12rem,1rem + .9vw,1.55rem);line-height:1.5;font-weight:400;
  color:rgba(255,255,255,.94);max-width:42ch;margin:0 0 clamp(24px,3.2vw,34px);
  text-shadow:0 1px 14px rgba(3,26,42,.5);
}
.hero h1{text-shadow:0 2px 20px rgba(3,26,42,.45)}
.respuesta strong{font-weight:650;color:#fff;box-shadow:inset 0 -.42em 0 rgba(121,186,155,.32)}

.acciones{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 27px;border-radius:999px;text-decoration:none;
  font-weight:650;font-size:var(--t-s);letter-spacing:.01em;
  transition:transform .3s var(--salida),box-shadow .3s var(--salida),background .3s var(--salida);
}
.btn-1{background:var(--azul-claro);color:#04263c;box-shadow:0 10px 26px -12px rgba(121,186,155,.9)}
.btn-1:hover,.btn-1:focus-visible{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(121,186,155,.95)}
.btn-2{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn-2:hover,.btn-2:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 10px 26px -12px rgba(46,115,85,.9)}
.btn-verde:hover,.btn-verde:focus-visible{transform:translateY(-2px)}

/* ------------------------------------------------------- texto corrido */
.banda h2{
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  font-size:var(--t-2xl);font-weight:750;letter-spacing:-.02em;line-height:1.14;
  margin:0 0 18px;max-width:20ch;text-wrap:balance;color:var(--azul);
}
.banda h3{
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  font-size:var(--t-l);font-weight:700;letter-spacing:-.012em;
  margin:34px 0 10px;color:var(--tinta);
}
.banda p{margin:0 0 17px;max-width:var(--lectura)}
.banda ul,.banda ol{margin:0 0 18px;padding-left:1.15em;max-width:var(--lectura)}
.banda li{margin-bottom:10px;padding-left:.2em}
.banda li::marker{color:var(--azul-claro)}
strong{font-weight:650}

/* etiqueta de seccion: numero de folio, del mundo del formulario */
/* El rotulito de cada seccion pasa al verde (12-08-2026): es lo que
   marca el ritmo de la pagina al bajar, y en gris no aportaba color. */
.folio{
  display:inline-block;font-family:Montserrat,sans-serif;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-osc);margin:0 0 14px;
}
/* Filete verde bajo cada titulo de seccion, el mismo de la portada. */
.banda:not(.banda-azul):not(.cierre):not(.reloj) h2::after{
  content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--azul-claro);margin:14px 0 0;
}

/* ------------------------------------------------------- banda oscura */
.banda-azul{background:var(--azul);color:rgba(255,255,255,.9);line-height:1.72}
.banda-azul h2{color:#fff}
.banda-azul h3{color:#fff}
.banda-azul .folio{color:rgba(255,255,255,.55)}
.banda-azul strong{color:#fff}
.banda-azul a{color:var(--azul-claro)}
.banda-azul li::marker{color:var(--azul-claro)}

/* La banda suave pasa del gris azulado al verde claro de la marca
   (12-08-2026): con el gris, estas paginas se leian como "todo azul".
   Es la misma alternancia que en la portada. */
.banda-suave{background:var(--verde-papel)}

/* ---- El boton principal, igual que el de la portada ---------------
   Verde llamativo con letra azul marino (6,78 de contraste) y un aura
   CORTA: anillo pegado al borde mas un resplandor de 12px. Reemplaza la
   sombra larga y difusa que tenia, que no llamaba la atencion sino que
   ensuciaba. Sin movimiento al pasar el mouse, como en la portada. */
.btn-1,
.btn-verde{
  background:#2BB566;
  color:#fff;
  box-shadow:0 0 0 3px rgba(43,181,102,.30), 0 0 12px 2px rgba(43,181,102,.40);
}
.btn-1:hover,.btn-1:focus-visible,
.btn-verde:hover,.btn-verde:focus-visible{
  background:#249E58;
  color:#fff;
  transform:none;
  box-shadow:0 0 0 4px rgba(43,181,102,.38), 0 0 16px 3px rgba(43,181,102,.50);
}
/* Sobre las bandas oscuras el aura se ve mas: se baja un punto. */
.banda-azul .btn-1,.cierre .btn-1,
.banda-azul .btn-verde,.cierre .btn-verde{
  box-shadow:0 0 0 3px rgba(43,181,102,.24), 0 0 12px 2px rgba(43,181,102,.32);
}

/* ------------------------------------------------------- el reloj */
/* Terracota. Aparece solo cuando hay un plazo corriendo. */
.reloj{background:var(--reloj-papel);color:var(--reloj-tinta)}
.reloj h2{color:var(--reloj-tinta);max-width:24ch}
.reloj p{color:var(--reloj-tinta)}
.reloj .folio{color:var(--reloj)}
.reloj strong{color:var(--reloj-tinta)}

/* cifra grande, cuando el numero ES el argumento */
.cifra{
  font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(3.4rem,2rem + 7vw,6.4rem);line-height:.9;
  display:block;margin:0 0 6px;font-variant-numeric:tabular-nums;
}
.cifra-pie{font-size:var(--t-s);font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}

/* --------------------------------------------------------- el grafico */
/* La imagen grande de cada pagina sale del dato de esa pagina, no de un
   banco de fotos. Las barras crecen con scaleY, no con height: animar
   height es animar layout. */
.grafico{margin:0 0 30px;max-width:640px}
.grafico ol{
  list-style:none;padding:0;margin:0 0 14px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.6vw,14px);
  height:clamp(180px,34vw,240px);
}
.grafico li{position:relative;height:100%}
.grafico .barra{
  position:absolute;inset:0;border-radius:7px 7px 0 0;
  background:linear-gradient(to top,var(--reloj),var(--reloj-alto));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .95s var(--salida);
}
.grafico li:last-child .barra{
  background:none;
  box-shadow:inset 0 -2.5px 0 var(--reloj-tinta);
  border-radius:0;
}
.grafico.listo .barra{transform:scaleY(var(--s))}
.grafico li:nth-child(2) .barra{transition-delay:.09s}
.grafico li:nth-child(3) .barra{transition-delay:.18s}
.grafico li:nth-child(4) .barra{transition-delay:.27s}
.grafico li:nth-child(5) .barra{transition-delay:.36s}
.grafico .pc{
  position:absolute;left:0;right:0;bottom:calc(var(--s) * 100% + 7px);
  text-align:center;font-family:Montserrat,sans-serif;font-weight:800;
  font-size:clamp(.95rem,.7rem + 1.1vw,1.35rem);color:var(--reloj-tinta);
  font-variant-numeric:tabular-nums;line-height:1;
}
.grafico li:last-child .pc{color:var(--reloj-tinta)}
.grafico .et{
  position:absolute;left:0;right:0;top:calc(100% + 9px);text-align:center;
  font-size:var(--t-xs);font-weight:650;color:var(--reloj-tinta);opacity:.72;line-height:1.25;
}
.grafico figcaption{margin-top:46px;font-size:var(--t-s);color:var(--reloj-tinta);opacity:.85;max-width:52ch}
@media (prefers-reduced-motion:reduce){
  .grafico .barra{transform:scaleY(var(--s))}
}

/* ------------------------------------------------------- la rejilla */
/* Un cuadrito por periodo. Sirve para mostrar que la sancion se
   multiplica: doce meses sin declarar no son una multa, son doce. */
.rejilla{margin:0 0 30px;max-width:560px}
.rejilla ol{
  list-style:none;padding:0;margin:0 0 16px;
  /* 13 columnas, no 12: cada fila es un ano completo, los 12 F29 mas la
     renta anual al final. Con 12 la marca anual caia en cualquier parte. */
  display:grid;grid-template-columns:repeat(13,1fr);gap:4px;
}
.rejilla li{
  aspect-ratio:1;border-radius:4px;background:rgba(var(--reloj-rgb),.2);
  box-shadow:inset 0 0 0 1.5px var(--reloj);
  opacity:0;transform:scale(.5);
  transition:opacity .4s var(--salida),transform .4s var(--salida);
}
.rejilla.listo li{opacity:1;transform:none}
.rejilla li.anual{background:var(--reloj-tinta);box-shadow:none}
.rejilla figcaption{font-size:var(--t-s);color:var(--reloj-tinta);opacity:.85;max-width:52ch}
.rejilla .leyenda{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--t-xs);font-weight:650;margin:0 0 12px;color:var(--reloj-tinta)}
.rejilla .leyenda span{display:inline-flex;align-items:center;gap:7px}
.rejilla .leyenda i{width:13px;height:13px;border-radius:3px;background:rgba(var(--reloj-rgb),.2);box-shadow:inset 0 0 0 1.5px var(--reloj)}
.rejilla .leyenda i.anual{background:var(--reloj-tinta);box-shadow:none}
@media (prefers-reduced-motion:reduce){.rejilla li{opacity:1;transform:none}}

/* ----------------------------------------------------- el calendario */
/* La tira del mes con los dos vencimientos marcados. */
.calendario{margin:0 0 30px;max-width:560px}
.calendario ol{
  list-style:none;padding:0;margin:0 0 16px;
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
}
.calendario li{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:7px;font-size:var(--t-xs);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--tinta-suave);
  background:var(--papel-hondo);
}
.calendario li.hito{
  background:var(--azul);color:#fff;font-weight:800;
  box-shadow:0 6px 16px -8px rgba(9,37,68,.8);
}
.calendario li.hito-2{background:var(--verde);color:#fff;font-weight:800}
.calendario .leyenda{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--t-s);font-weight:600;margin:0 0 14px}
.calendario .leyenda span{display:inline-flex;align-items:center;gap:8px}
.calendario .leyenda i{width:15px;height:15px;border-radius:4px;flex:none}
.calendario .leyenda i.a{background:var(--azul)}
.calendario .leyenda i.b{background:var(--verde)}
.calendario figcaption{font-size:var(--t-s);color:var(--tinta-suave);max-width:52ch}

/* ---------------------------------------------------------- los hitos */
/* Linea horizontal con dos o tres marcas: sirve para un plazo legal. */
.hitos{margin:0 0 30px;max-width:600px;padding-top:6px}
.hitos ol{list-style:none;padding:0;margin:0 0 16px;position:relative;display:grid;gap:24px}
.hitos li{position:relative;padding-left:34px}
.hitos li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--papel);box-shadow:inset 0 0 0 3px var(--azul-claro);
}
.hitos li:last-child::before{background:var(--verde);box-shadow:inset 0 0 0 3px var(--verde)}
.hitos li::after{content:"";position:absolute;left:7px;top:21px;bottom:-24px;width:1.5px;background:var(--linea)}
.hitos li:last-child::after{display:none}
.hitos b{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-m);color:var(--tinta)}
.hitos span{font-size:var(--t-s);color:var(--tinta-suave)}
.hitos figcaption{font-size:var(--t-s);color:var(--tinta-suave);max-width:52ch}

/* ---------------------------------------------------------- la balanza */
/* Dos caminos enfrentados. No son tarjetas iguales: la diferencia entre
   ellos es el contenido, y por eso cada lado lleva su propio color. */
.balanza{display:grid;gap:2px;background:var(--linea);margin:0 0 30px;border-radius:var(--radio);overflow:hidden}
@media (min-width:680px){.balanza{grid-template-columns:1fr 1fr}}
.balanza>div{background:var(--papel);padding:26px 24px}
.balanza .lado-a{box-shadow:inset 0 4px 0 var(--azul)}
.balanza .lado-b{box-shadow:inset 0 4px 0 var(--verde)}
.balanza h4{
  font-family:Montserrat,sans-serif;font-size:var(--t-l);font-weight:750;margin:0 0 4px;
  letter-spacing:-.015em;
}
.balanza .lado-a h4{color:var(--azul)}
.balanza .lado-b h4{color:var(--verde-tinta)}
.balanza .sub{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--tinta-suave);margin:0 0 16px}
.balanza dl{margin:0;font-size:var(--t-s)}
.balanza dt{font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave);font-weight:700;margin-top:15px}
.balanza dd{margin:3px 0 0;line-height:1.5}
.balanza .plata{font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-xl);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.balanza .lado-a .plata{color:var(--azul)}
.balanza .lado-b .plata{color:var(--verde-tinta)}

/* ------------------------------------------------------ barras largas */
/* Rangos de precio. La barra empieza donde empieza el rango. */
.barras-h{margin:0 0 30px;max-width:600px;display:grid;gap:20px}
.barras-h .fila b{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-m);margin-bottom:3px}
.barras-h .rango{font-size:var(--t-s);color:var(--tinta-suave);font-variant-numeric:tabular-nums;margin-bottom:8px;display:block}
/* Dos arreglos que costaron una ronda cada uno:
   1. display:block es obligatorio. .pista es un <span> y, siendo inline,
      ignoraba el height: no habia barra que mostrar.
   2. La pista era var(--papel-hondo) sobre var(--papel), dos grises a un paso
      de distancia. Se veia como nada. Va tenida hacia el azul de la marca. */
.barras-h .pista{display:block;height:13px;border-radius:999px;background:rgba(9,37,68,.11);position:relative;overflow:hidden}
.barras-h .tramo{
  position:absolute;top:0;bottom:0;left:var(--de);right:var(--a);
  background:linear-gradient(90deg,var(--azul),var(--azul-claro));border-radius:999px;
  transform:scaleX(0);transform-origin:left;transition:transform .85s var(--salida);
}
.barras-h.listo .tramo{transform:scaleX(1)}
.barras-h .fila:nth-child(2) .tramo{transition-delay:.09s}
.barras-h .fila:nth-child(3) .tramo{transition-delay:.18s}
.barras-h .fila:nth-child(4) .tramo{transition-delay:.27s}
.barras-h figcaption{font-size:var(--t-s);color:var(--tinta-suave);max-width:54ch}
@media (prefers-reduced-motion:reduce){.barras-h .tramo{transform:scaleX(1)}}

/* --------------------------------------------------------- checklist */
/* Lista con casilla dibujada. Del mundo del formulario, no del icono. */
.checklist{list-style:none;padding:0;margin:0 0 26px;max-width:var(--lectura);display:grid;gap:3px}
.checklist li{
  position:relative;padding:15px 0 15px 42px;border-bottom:1px solid var(--linea);
}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:"";position:absolute;left:0;top:17px;width:21px;height:21px;border-radius:5px;
  box-shadow:inset 0 0 0 2px var(--azul-claro);
}
.checklist li::after{
  content:"";position:absolute;left:6.5px;top:22px;width:8px;height:4.5px;
  border-left:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);
  transform:rotate(-45deg);
}
.checklist b{display:block;font-weight:650;margin-bottom:2px}
.checklist span{font-size:var(--t-s);color:var(--tinta-suave);line-height:1.5}
.banda-azul .checklist li{border-bottom-color:rgba(255,255,255,.14)}
.banda-azul .checklist span{color:rgba(255,255,255,.75)}
.banda-azul .checklist li::after{border-color:#fff}

/* ---------------------------------------------------------- la tabla */
/* Se lee como un formulario: etiquetas chicas arriba, cifras alineadas. */
.tabla-caja{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--t-s);min-width:min(100%,420px)}
caption{text-align:left;font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave);font-weight:700;padding-bottom:12px}
th{
  text-align:left;font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-suave);padding:0 16px 10px 0;
  border-bottom:2px solid var(--azul);white-space:nowrap;
}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--linea);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}
td:last-child,th:last-child{padding-right:0}
.num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;font-size:var(--t-m)}
tr.destacar td{background:rgba(var(--reloj-rgb),.13)}
tr.apagar td{color:var(--tinta-suave)}
.reloj th{border-bottom-color:var(--reloj);color:var(--reloj-tinta)}
.reloj td{border-bottom-color:rgba(var(--reloj-rgb),.28)}
.banda-azul th{border-bottom-color:var(--azul-claro);color:rgba(255,255,255,.7)}
.banda-azul td{border-bottom-color:rgba(255,255,255,.16)}

/* ---------------------------------------------------------- los pasos */
/* Linea de tiempo vertical. El orden importa de verdad: son pasos. */
.pasos{list-style:none;padding:0;margin:0;counter-reset:p;max-width:var(--lectura)}
.pasos li{
  counter-increment:p;position:relative;
  padding:0 0 30px 62px;margin:0;
}
.pasos li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute;left:0;top:-2px;
  font-family:Montserrat,sans-serif;font-size:var(--t-s);font-weight:800;
  color:var(--azul);background:var(--papel);
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px var(--azul-claro);
  font-variant-numeric:tabular-nums;
}
/* el hilo que une los pasos */
.pasos li::after{
  content:"";position:absolute;left:20.5px;top:42px;bottom:-2px;width:2px;
  background:linear-gradient(to bottom,var(--azul-claro),rgba(121,186,155,.12));
}
.pasos li:last-child{padding-bottom:0}
.pasos li:last-child::after{display:none}
.pasos b{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-l);margin-bottom:4px;color:var(--tinta)}
.pasos p{margin:0;color:var(--tinta-suave)}
.banda-azul .pasos li::before{background:var(--azul);color:#fff}
.banda-azul .pasos b{color:#fff}
.banda-azul .pasos p{color:rgba(255,255,255,.78)}

/* --------------------------------------------------------- la foto */
.foto{position:relative;margin:0;padding:0}
.foto img{width:100%;object-fit:cover;aspect-ratio:16/9;border-radius:var(--radio)}
.foto figcaption{
  font-size:var(--t-s);color:var(--tinta-suave);padding-top:12px;max-width:52ch;
}
.foto-ancha img{border-radius:0;aspect-ratio:21/9}
@media (max-width:640px){.foto-ancha img{aspect-ratio:4/3}}

/* ------------------------------------------------------------ el faq */
.faq{max-width:var(--lectura)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:Montserrat,sans-serif;font-weight:650;font-size:var(--t-l);
  line-height:1.35;color:var(--azul);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--azul-claro);border-bottom:2.5px solid var(--azul-claro);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--salida);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:4px}
.faq .r{padding:0 0 22px;margin:0;color:var(--tinta-suave)}

/* ------------------------------------------------------------ cierre */
.cierre{background:var(--azul-hondo);color:#fff;position:relative;overflow:hidden}
/* El resplandor verde del cierre sube bastante: es la banda que cierra
   la pagina y con .34 el verde no se veia (12-08-2026). */
.cierre::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 12% 108%,rgba(121,186,155,.42),transparent 62%),
    radial-gradient(70% 90% at 95% -10%,rgba(46,115,85,.32),transparent 60%);
}
.cierre>*{position:relative}
/* El cierre va centrado entero: es una llamada a la accion, no texto de
   lectura. Los dos max-width son angostos a proposito, y sin margen
   automatico dejaban el bloque colgando del borde izquierdo. */
.cierre .dentro{text-align:center}
.cierre h2{color:#fff;max-width:16ch;font-size:var(--t-2xl);margin-inline:auto}
.cierre p{color:rgba(255,255,255,.8);max-width:48ch;margin-bottom:28px;margin-inline:auto}
.cierre .acciones{justify-content:center}

/* --------------------------------------------------------- relacionadas */
.sigue{display:grid;gap:2px;background:var(--linea);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
@media (min-width:720px){.sigue{grid-template-columns:1fr 1fr}}
.sigue a{
  background:var(--papel);padding:26px 24px;text-decoration:none;color:inherit;
  display:block;transition:background .28s var(--salida);
}
.sigue a:hover,.sigue a:focus-visible{background:var(--papel-hondo)}
.sigue .et{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);font-weight:700;display:block;margin-bottom:8px}
.sigue .tt{font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-l);color:var(--azul);line-height:1.3;display:block}

/* --------------------------------------------------------------- pie */
.pie{background:#14202a;color:rgba(255,255,255,.62);font-size:var(--t-s);padding:34px 22px;text-align:center}
.pie a{color:#fff}
.pie .dentro{display:flex;flex-direction:column;align-items:center;gap:10px}
/* El cierre legal iba pegado a la izquierda y quedaba como un resto suelto.
   Centrado y con la medida de lectura, cierra la pagina.

   OJO con el selector: tiene que ser .banda p.fecha (0,2,1). Con .fecha a
   secas (0,1,0) pierde contra .banda p (0,1,1), que trae margin:0 0 17px y
   le anula el margin:0 auto. Estuvo asi hasta el 31-07-2026: el texto se
   veia centrado dentro de su caja, pero la caja seguia pegada a la
   izquierda, y por eso no se notaba que el arreglo no habia funcionado. */
.banda p.fecha{
  font-size:var(--t-s);color:var(--tinta-suave);
  max-width:62ch;margin-inline:auto;text-align:center;text-wrap:pretty;
}

/* ------------------------------------------- paginas legales */
/* Portada sin foto. En privacidad y terminos una foto de stock seria
   decorado vacio: no hay nada que ilustrar y ademas sumaria 100 KB al
   elemento mas grande de la primera pantalla. El degradado de marca da
   color sin fingir contenido. */
.hero.plano{
  background:linear-gradient(158deg,var(--azul-hondo) 0%,var(--azul) 58%,#092544 100%);
  min-height:auto;padding-block:clamp(44px,7vw,74px);
}
.hero.plano::before{
  background:radial-gradient(120% 95% at 88% -12%,rgba(121,186,155,.3),transparent 62%);
}

/* Tarjetas de resumen: lo mismo que dice el texto legal, pero en el
   lenguaje del visitante y antes de la letra chica. Es lo que hace que
   la pagina se lea en vez de solo cumplir. */
.resumen{display:grid;gap:13px;list-style:none;padding:0;margin:0}
@media (min-width:640px){.resumen{grid-template-columns:1fr 1fr}}
.resumen li{
  background:var(--papel);border:1px solid var(--linea);
  border-left:3px solid var(--verde);border-radius:0 var(--radio) var(--radio) 0;
  padding:17px 19px;margin:0;
}
.resumen b{
  display:block;font-family:Montserrat,sans-serif;font-weight:700;
  font-size:var(--t-m);color:var(--azul);margin-bottom:3px;line-height:1.3;
}
.resumen span{display:block;font-size:var(--t-s);color:var(--tinta-suave);line-height:1.55}
/* En la banda azul las tarjetas se invierten */
.banda-azul .resumen li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);border-left-color:var(--azul-claro)}
.banda-azul .resumen b{color:#fff}
.banda-azul .resumen span{color:rgba(255,255,255,.78)}

/* Ficha de datos de la sociedad: la tabla de dos columnas queda muy
   angosta en telefono, asi que se apila. */
.ficha{max-width:560px;margin:0 0 8px}
.ficha table{width:100%}
.ficha th{width:38%;color:var(--tinta-suave);font-weight:650;font-size:var(--t-s)}

/* --------------------------------------------------- redes sociales */
/* Los iconos van en su version blanca sin circulo: el pie y el cierre son
   azul oscuro y un disco azul ahi no se distingue del fondo. */
.redes{display:inline-flex;align-items:center;gap:15px}
.redes a{
  display:inline-flex;opacity:.7;
  transition:opacity .22s var(--salida),transform .22s var(--salida);
}
.redes a:hover,.redes a:focus-visible{opacity:1;transform:translateY(-2px)}
.redes a:focus-visible{outline:2px solid var(--azul-claro);outline-offset:4px;border-radius:3px}
.redes img{width:19px;height:19px;display:block}
@media (prefers-reduced-motion:reduce){.redes a{transition:none}}

/* Mencion en el cierre: discreta, debajo de los botones, para que no le
   compita al llamado a la accion que es lo que importa ahi. */
.cierre .social{
  margin:26px 0 0;font-size:var(--t-s);color:rgba(255,255,255,.62);
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}

/* ------------------------------------------------- boton flotante */
/* Acompana el scroll en telefono y en PC. Aparece recien pasados los
   primeros 560px: arriba seria redundante, porque el hero ya tiene su
   propio boton justo ahi. Y se esconde al llegar al cierre, para no
   taparle el boton de verdad al que ya llego abajo. */
.flotante{
  position:fixed;right:16px;bottom:16px;z-index:40;
  display:inline-flex;align-items:center;
  padding:13px 21px;border-radius:999px;
  background:var(--azul);color:#fff;text-decoration:none;
  font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-s);
  line-height:1;white-space:nowrap;
  box-shadow:0 12px 28px -10px rgba(6,26,48,.75);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transition:opacity .35s var(--salida),transform .35s var(--salida),
             background .25s var(--salida);
}
.flotante.ver{opacity:1;transform:none;pointer-events:auto}
.flotante:hover,.flotante:focus-visible{background:var(--azul-hondo);color:#fff}
.flotante:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px}
@media (max-width:560px){
  .flotante{right:12px;bottom:12px;padding:12px 17px;font-size:var(--t-xs)}
}
@media (prefers-reduced-motion:reduce){
  .flotante{transition:opacity .01s}
}

/* ------------------------------------------------------------ motion */
/* Revelado escalonado al entrar en pantalla. Se activa por JS agregando
   .listo; sin JS todo queda visible igual. */
@media (prefers-reduced-motion:no-preference){
  .sube{opacity:0;transform:translateY(22px);transition:opacity .7s var(--salida),transform .7s var(--salida)}
  .sube.listo{opacity:1;transform:none}
  .sube:nth-child(2){transition-delay:.07s}
  .sube:nth-child(3){transition-delay:.14s}
  .sube:nth-child(4){transition-delay:.21s}
  .hero .miga,.hero h1,.hero .respuesta,.hero .acciones{animation:entra .8s var(--salida) both}
  .hero h1{animation-delay:.06s}
  .hero .respuesta{animation-delay:.14s}
  .hero .acciones{animation-delay:.22s}
  @keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================================
   PALETA DEL LOGO NUEVO (12-08-2026)
   --azul-claro paso de celeste a ser el VERDE del logo (#79BA9B). Sobre las
   bandas azules se lee perfecto (6,85), pero sobre el papel claro da 2,26 y
   deja de verse: los anillos, las flechas y sobre todo los aros de foco se
   volvian invisibles. Todo eso pasa al verde oscuro derivado.
   Las bandas azules NO entran aca: ahi el verde del logo queda como estaba.
   ========================================================================== */
.tope .volver:hover,
.tope .volver:focus-visible{border-color:var(--verde-osc)}
.banda li::marker{color:var(--verde-osc)}
.checklist li::before{box-shadow:inset 0 0 0 2px var(--verde-osc)}
.pasos li::before{box-shadow:inset 0 0 0 2px var(--verde-osc)}
.hitos li::before{box-shadow:inset 0 0 0 3px var(--verde-osc)}
.faq summary::after{border-right-color:var(--verde-osc);border-bottom-color:var(--verde-osc)}
.faq summary:focus-visible{outline-color:var(--verde-osc)}
.redes a:focus-visible{outline-color:var(--verde-osc)}
.flotante:focus-visible{outline-color:var(--verde-osc)}
/* En las bandas azules se vuelve al verde del logo, que ahi si contrasta. */
.banda-azul li::marker{color:var(--azul-claro)}
.banda-azul .resumen li{border-left-color:var(--azul-claro)}