@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · SISTEMA v5.1 · «Marino y papel»
   ----------------------------------------------------------------------------
   La paleta no se eligió por gusto: converge desde tres fuentes independientes.

     1. LA MARCA.      El isotipo original de Conecta —el arco— está trazado
                       en #1B3A52. Es un azul marino. La paleta lo recupera
                       en lugar de inventar un color nuevo.
     2. EL TERRITORIO. Medido sobre fotografías reales de Ticumpinía:
                       cielo húmedo #cfd1f6 (celeste opaco),
                       losa deportiva #846054 y carpetas #8d807a (beiges).
     3. EL ENCARGO.    Beige, marino, blanco y un celeste apagado.

   REGLA DE JERARQUÍA, derivada del cálculo de contraste y no de la intuición:
     · sobre papel, quien manda es el marino profundo, por VALOR (15.2:1).
       El celeste sobre papel solo llega a 3.2:1 y por eso nunca lleva texto.
     · sobre marino, quien manda es el celeste claro (9.3:1).
     · el ocre es señal, no decoración: alertas y eslabón débil. Bajo el 2%.

   Todas las parejas verificadas contra WCAG 2.1 AA por cálculo, no a ojo.
   ========================================================================== */

:root{
  /* Papel · beige cálido, de la carpeta de madera */
  --papel:      oklch(95.5% 0.014 76);   /* #f6efe6 */
  --papel-2:    oklch(91.5% 0.020 74);   /* #ebe1d5 */
  --papel-3:    oklch(86.0% 0.026 72);   /* #dccfbf */
  --blanco:     oklch(99.0% 0.004 80);   /* #fdfbf9 */

  /* Marino · la familia del isotipo, hue 244 */
  --marino:     oklch(22.0% 0.045 245);  /* #061c2e · tinta y banda profunda */
  --marino-2:   oklch(33.7% 0.056 244);  /* #1b3a52 · EL ISOTIPO, exacto */
  --marino-3:   oklch(46.0% 0.058 244);  /* #3b5c76 · texto secundario, 6.2:1 */
  --marino-mudo:oklch(48.0% 0.030 246);  /* rótulos y notas, 4.9:1 sobre papel */

  /* Celeste opaco · el cielo húmedo de Ticumpinía */
  --celeste:    oklch(62.0% 0.070 250);  /* #668aaf · relleno y estados */
  --celeste-cl: oklch(80.0% 0.048 252);  /* #a8c0dc · acento SOBRE marino */
  --celeste-pal:oklch(90.0% 0.028 254);  /* #d2dff1 · superficies frías */

  /* Ocre · única señal cálida. Alertas y eslabón débil. */
  --ocre:       oklch(52.0% 0.105 58);   /* #955822 · 5.0:1 sobre papel */
  --ocre-cl:    oklch(72.0% 0.095 62);   /* sobre marino */

  /* Texto sobre superficies oscuras */
  --sobre-marino:      oklch(94.0% 0.012 76);
  --sobre-marino-mudo: oklch(76.0% 0.022 250);

  /* Filetes */
  --filete:       oklch(83.0% 0.020 72);
  --filete-firme: oklch(68.0% 0.026 70);
  --filete-oscuro:oklch(40.0% 0.040 245);

  /* Semánticos, separados del acento */
  --alto:  oklch(48.0% 0.130 28);
  --bajo:  oklch(45.0% 0.085 155);

  /* Tipografía */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lee:  "Literata", "Iowan Old Style", Georgia, serif;

  /* Espaciado, escala de 4 */
  --e-3xs:.25rem; --e-2xs:.5rem;  --e-xs:.75rem;
  --e-sm:1rem;    --e-md:1.5rem;  --e-lg:2rem;
  --e-xl:3rem;    --e-2xl:4.5rem; --e-3xl:7rem;

  --canal: clamp(1.25rem, 5vw, 5.5rem);
  --medida: 62ch;
  --banda: clamp(3.5rem, 8vw, 8rem);

  /* Escala tipográfica */
  --t-monumento: clamp(3rem, 9.5vw, 8.5rem);
  --t-titular:   clamp(2rem, 5vw, 3.9rem);
  --t-seccion:   clamp(1.5rem, 3vw, 2.3rem);
  --t-lede:      clamp(1.12rem, 1.6vw, 1.45rem);
  --t-cuerpo:    1.0625rem;
  --t-nota:      .935rem;
  --t-rotulo:    .78rem;

  /* Alias de compatibilidad con los componentes ya escritos */
  --luz:var(--papel); --luz-2:var(--papel-2); --luz-3:var(--papel-3);
  --tinta:var(--marino); --tinta-2:var(--marino-3); --gris:var(--marino-mudo);
  --monte:var(--marino-2); --monte-2:var(--marino-3);
  --sobre-tinta:var(--sobre-marino); --sobre-tinta-mudo:var(--sobre-marino-mudo);
  --sobre-monte:var(--sobre-marino); --sobre-monte-mudo:var(--sobre-marino-mudo);
  --carmin:var(--celeste); --carmin-alt:var(--celeste-cl);
  --tierra:var(--ocre); --tierra-luz:var(--papel-3);
}

/* ─────────────────────────────────────────────── Base ── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--papel); color:var(--marino);
  font-family:var(--lee); font-size:var(--t-cuerpo); line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas,video{ max-width:100%; display:block; height:auto }
picture{ display:contents }
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em;
  line-height:1.02; margin:0; text-wrap:balance }
p{ margin:0 }
a{ color:inherit }
strong,b{ font-weight:600 }

::selection{ background:var(--marino-2); color:var(--papel) }
:focus-visible{ outline:3px solid var(--ocre); outline-offset:3px; border-radius:1px }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--marino); color:var(--sobre-marino);
  padding:var(--e-xs) var(--e-md); font-family:var(--sans); font-weight:600;
}
.saltar:focus{ left:var(--e-sm); top:var(--e-sm) }

/* ─────────────────────────────────────────── Estructura ── */
.pagina{ width:min(100%, 88rem); margin-inline:auto; padding-inline:var(--canal) }
.banda{ padding-block:var(--banda) }
.banda--tinta{ background:var(--marino); color:var(--sobre-marino) }
.banda--monte{ background:var(--marino-2); color:var(--sobre-marino) }
.banda--luz2{ background:var(--papel-2) }

.banda--tinta h1,.banda--tinta h2,.banda--tinta h3,
.banda--monte h1,.banda--monte h2,.banda--monte h3{ color:var(--blanco) }

/* ─────────────────────────────────────── Tipografía útil ── */
.rotulo{
  font-family:var(--sans); font-weight:600; font-size:var(--t-rotulo);
  letter-spacing:.13em; text-transform:uppercase; color:var(--marino-mudo);
  margin:0 0 var(--e-sm);
}
.banda--tinta .rotulo,.banda--monte .rotulo{ color:var(--celeste-cl) }

.monumento{ font-size:var(--t-monumento); line-height:.92; letter-spacing:-.045em }
.titular{ font-size:var(--t-titular); color:var(--marino) }
.seccion{ font-size:var(--t-seccion); color:var(--marino) }
.banda--tinta .titular,.banda--monte .titular,
.banda--tinta .seccion,.banda--monte .seccion{ color:var(--blanco) }

.lede{
  font-size:var(--t-lede); line-height:1.55; max-width:44ch; color:var(--marino-3);
}
.banda--tinta .lede,.banda--monte .lede{ color:var(--sobre-marino); opacity:.94 }

.cuerpo{ max-width:var(--medida) }
.cuerpo + .cuerpo{ margin-top:var(--e-sm) }

.nota{
  font-family:var(--sans); font-size:var(--t-nota); line-height:1.5;
  color:var(--marino-mudo); max-width:38ch;
}
.banda--tinta .nota,.banda--monte .nota{ color:var(--sobre-marino-mudo) }

.filete{ border:0; border-top:1px solid var(--filete); margin:var(--e-lg) 0 }
.banda--tinta .filete,.banda--monte .filete{ border-top-color:var(--filete-oscuro) }

/* ────────────────────────────────────────────── Enlaces ── */
/* Sobre papel el subrayado va en MARINO: el celeste no alcanza contraste. */
.liga{
  color:var(--marino); text-decoration:none;
  border-bottom:2px solid var(--marino-3); padding-bottom:.1em;
  transition:color .18s ease, border-color .18s ease;
}
.liga:hover{ color:var(--ocre); border-bottom-color:var(--ocre) }
.banda--tinta .liga,.banda--monte .liga{ color:var(--blanco); border-bottom-color:var(--celeste-cl) }
.banda--tinta .liga:hover,.banda--monte .liga:hover{ color:var(--celeste-cl) }

.accion{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  background:var(--marino); color:var(--sobre-marino);
  padding:1.05rem 1.6rem; border:0;
  transition:background .18s ease, transform .18s ease;
}
.accion:hover{ background:var(--marino-2); transform:translateY(-1px) }
.accion svg{ transition:transform .22s ease }
.accion:hover svg{ transform:translateX(4px) }
.banda--tinta .accion,.banda--monte .accion{ background:var(--celeste-cl); color:var(--marino) }
.banda--tinta .accion:hover,.banda--monte .accion:hover{ background:var(--blanco) }

@media (prefers-reduced-motion:reduce){
  .accion,.accion svg,.liga{ transition:none }
  .accion:hover{ transform:none }
  .accion:hover svg{ transform:none }
}