@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · SISTEMA v8.0 · "Piedra y noche profunda"
   ----------------------------------------------------------------------------
   Dos campos de base y un acento escaso:
     · noche     #0A1A2F  base oscura: cabecera, bandas, velos sobre foto
     · petróleo  #14504F  segunda base: bandas de método y de Conecta Lab
     · piedra    #D8CBB3  acento. Botones sobre oscuro, cifras de rótulo, filetes
     · papel     #F4F2EE  fondo de lectura
     · tinta     #0E1726  texto sobre papel
     · suave     #8FB0B4  texto secundario sobre noche

   Contraste verificado por cálculo (WCAG 2.1, AA):
     tinta / papel 16.1 · tinta-2 / papel 8.4 · mudo / papel 5.7
     petróleo / papel 8.2 · noche / niebla 14.5 · mudo / niebla 5.3
     papel / noche 15.6 · piedra / noche 10.9 · suave / noche 7.5
     papel / petróleo 8.2 · piedra / petróleo 5.7 · suave-claro / petróleo 6.0
     tinta / piedra 11.2 (botón sobre oscuro) · papel / noche (botón sobre claro)
   El suave puro sobre petróleo da 3.9: ahí se usa suave-claro.
   ========================================================================== */

:root{
  --noche:        #0A1A2F;
  --noche-2:      #11253F;   /* superficie elevada sobre noche */
  --noche-hondo:  #06111F;   /* pie de página */
  --petroleo:     #14504F;
  --petroleo-hondo:#0F3B3B;
  --piedra:       #D8CBB3;
  --piedra-2:     #E6DCC9;   /* hover del botón piedra */
  --papel:        #F4F2EE;
  --niebla:       #E6EBEB;   /* banda clara alterna, fría */
  --blanco:       #FFFFFF;
  --tinta:        #0E1726;
  --tinta-2:      #3B4757;
  --mudo:         #56606E;
  --suave:        #8FB0B4;
  --suave-claro:  #C5D3D5;

  --filete:        rgba(14,23,38,.14);
  --filete-firme:  rgba(14,23,38,.32);
  --filete-oscuro: rgba(216,203,179,.20);
  --filete-piedra: rgba(216,203,179,.42);

  --velo-90: rgba(10,26,47,.9);
  --velo-70: rgba(10,26,47,.7);
  --velo-40: rgba(10,26,47,.4);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lee:  "Literata", "Iowan Old Style", Georgia, serif;

  --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(1rem, 4.6vw, 5rem);
  --ancho: 86rem;
  --medida: 62ch;
  --banda: clamp(4.5rem, 9vw, 8.5rem);

  --t-hero:      clamp(1.28rem, .98rem + .95vw, 1.9rem);
  --t-monumento: clamp(1.8rem, 1.25rem + 1.9vw, 3rem);
  --t-titular:   clamp(1.5rem, 1.15rem + 1.25vw, 2.35rem);
  --t-seccion:   clamp(1.2rem, 1.02rem + .65vw, 1.6rem);
  --t-lede:      clamp(1.08rem, .98rem + .45vw, 1.34rem);
  --t-cuerpo:    1.0625rem;
  --t-nota:      .96rem;
  --t-rotulo:    .88rem;

  --alto-nav: 4.25rem;
  --curva: cubic-bezier(.22,.61,.36,1);

  /* Variables de contexto: claro por omisión */
  --t1:var(--tinta); --t2:var(--tinta-2); --t3:var(--mudo);
  --fl:var(--filete); --ac:var(--petroleo); --foco:var(--petroleo);
}

/* Contexto oscuro (noche, petróleo, foto con velo) */
.oscuro{
  --t1:var(--papel); --t2:#DCE3E6; --t3:var(--suave);
  --fl:var(--filete-oscuro); --ac:var(--piedra); --foco:var(--piedra);
  color:var(--t2);
}
.oscuro.banda--petroleo,.banda--petroleo .oscuro{ --t3:var(--suave-claro) }

/* Base */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-nav) + 1rem) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--lee); font-size:var(--t-cuerpo); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; height:auto }
picture{ display:contents }
h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; font-stretch:102%;
  letter-spacing:-.018em; line-height:1.14; margin:0; text-wrap:balance; color:var(--t1) }
p{ margin:0; text-wrap:pretty }
a{ color:inherit }
strong,b{ font-weight:600 }
ul,ol{ margin:0 }
figure{ margin:0 }
button{ font:inherit; color:inherit }

::selection{ background:var(--petroleo); color:var(--papel) }
:focus-visible{ outline:3px solid var(--foco); outline-offset:3px }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--piedra); color:var(--tinta);
  padding:var(--e-xs) var(--e-md); font-family:var(--sans); font-weight:650; text-decoration:none;
}
.saltar:focus{ left:var(--e-sm); top:var(--e-sm) }
.vo{ position:absolute !important; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap }
.nw{ white-space:nowrap }

/* Estructura */
.pagina{ width:min(100%, var(--ancho)); margin-inline:auto; padding-inline:var(--canal) }
.banda{ padding-block:var(--banda) }
.banda--niebla{ background:var(--niebla) }
.banda--noche{ background:var(--noche) }
.banda--hondo{ background:var(--noche-hondo) }
.banda--petroleo{ background:var(--petroleo) }

/* Tipografía útil
   El rótulo de sección es una etiqueta corta en el color de acento, sin filete
   ni versalitas: lo marcan el color y el aire. */
.rotulo{
  font-family:var(--sans); font-weight:600; font-size:var(--t-rotulo);
  letter-spacing:.02em; color:var(--ac);
  margin:0 0 var(--e-xs);
}

.monumento{ font-size:var(--t-monumento); line-height:1.08; letter-spacing:-.024em }
.titular{ font-size:var(--t-titular); letter-spacing:-.022em; line-height:1.15 }
.seccion{ font-size:var(--t-seccion); letter-spacing:-.02em }
.lede{ font-size:var(--t-lede); line-height:1.55; max-width:48ch; color:var(--t2) }
.cuerpo{ max-width:var(--medida); color:var(--t2) }
.cuerpo + .cuerpo{ margin-top:var(--e-sm) }
.cuerpo strong{ color:var(--t1) }
.nota{ font-family:var(--sans); font-size:var(--t-nota); line-height:1.55; color:var(--t3); max-width:56ch }
.sans{ font-family:var(--sans) }

.mt-xs{ margin-top:var(--e-xs) } .mt-sm{ margin-top:var(--e-sm) } .mt-md{ margin-top:var(--e-md) }
.mt-lg{ margin-top:var(--e-lg) } .mt-xl{ margin-top:var(--e-xl) } .mt-2xl{ margin-top:var(--e-2xl) }

/* Enlaces */
.liga{
  color:var(--t1); text-decoration:none; font-family:var(--sans); font-weight:600;
  background-image:linear-gradient(var(--ac),var(--ac)); background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:.12em; transition:background-size .3s var(--curva), color .2s ease;
}
.liga:hover{ background-size:100% 2px }
.liga--flecha::after{ content:"\2192"; display:inline-block; margin-left:.45em; transition:transform .25s var(--curva) }
.liga--flecha:hover::after{ transform:translateX(4px) }

/* Botones. Sobre oscuro: piedra con tinta. Sobre claro: noche con papel. */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.75em;
  font-family:var(--sans); font-weight:650; font-size:.96rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  background:var(--noche); color:var(--papel); border:1px solid var(--noche);
  padding:.95rem 1.5rem; min-height:3.2rem; border-radius:2px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.boton:hover{ background:var(--petroleo); border-color:var(--petroleo) }
.oscuro .boton{ background:var(--piedra); color:var(--tinta); border-color:var(--piedra) }
.oscuro .boton:hover{ background:var(--piedra-2); border-color:var(--piedra-2) }
.boton svg{ flex:0 0 auto; transition:transform .25s var(--curva) }
.boton:hover svg{ transform:translateX(4px) }
.boton--linea,.oscuro .boton--linea{ background:transparent; color:var(--t1); border-color:currentColor }
.boton--linea:hover{ background:var(--noche); color:var(--papel); border-color:var(--noche) }
.oscuro .boton--linea:hover{ background:var(--papel); color:var(--tinta); border-color:var(--papel) }
.acciones{ display:flex; flex-wrap:wrap; gap:var(--e-xs) var(--e-sm) }

.estado{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-size:.74rem; font-weight:650;
  letter-spacing:.12em; text-transform:uppercase; color:var(--t1) }
.estado::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--suave); box-shadow:0 0 0 3px rgba(143,176,180,.25) }
.estado--pronto::before{ background:transparent; border:1px solid var(--t3); box-shadow:none }

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