/* ===========================================================
   SYNCROVNIC AGENCY — base
   Tipografías tomadas del PSD original:
     · Glancyr ExtraLight   → títulos (tracking -20)
     · SF Pro Display       → textos secundarios (tracking -20)
     · Chakra Petch Medium  → navegación (tracking -60)
   =========================================================== */

@font-face{
  font-family:'Glancyr';
  src:url('../assets/fonts/glancyr-extralight.otf') format('opentype');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glancyr';
  src:url('../assets/fonts/glancyr-light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glancyr';
  src:url('../assets/fonts/glancyr-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* Chakra Petch es gratuita; se carga desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&family=Inter:wght@300;400;500&display=swap');

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

:root{
  --negro:#000000;
  --azul:#0f36e7;
  --azul-vivo:#1f57ff;
  --azul-claro:#4a8dff;
  --cian:#42d6ff;
  --azul-titular:#5c9dfb;       /* el azul del titular de la referencia */
  --titular-brillo:#42d6ff;     /* el punto alto del degradado del titular */
  --texto-suave:#eef4ff;        /* el blanco de los titulares, con una pizca de azul */
  --azul-borde:#1a45c8;
  --azul-hondo:#020a2e;

  --blanco:#ffffff;

  /* --- variables que cambian con el tema --- */
  --fondo:#070b14;              /* azul marino muy oscuro, no negro puro */
  --texto:#ffffff;
  --texto-2:rgba(178,195,222,.74);   /* gris azulado, como el cuerpo de texto de la referencia */
  --texto-3:rgba(150,172,205,.46);
  --panel-borde:#1a45c8;
  --panel-relleno:linear-gradient(104deg,#040a24 0%,#061034 42%,#08163f 70%,#0a1c52 100%);
  --boton-fondo:rgba(2,6,22,.9);
  --logo-filtro:none;
  --icono-filtro:brightness(0) invert(1);
  --vidrio-fondo:linear-gradient(155deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 58%,rgba(255,255,255,.12));
  --vidrio-borde:rgba(255,255,255,.30);
  --vidrio-brillo:rgba(255,255,255,.34);
  --vidrio-destello:rgba(255,255,255,.42);
  --vidrio-sombra:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -7px 14px -9px rgba(0,0,0,.7), 0 10px 26px -12px rgba(0,0,0,.85);
  --nav-velo:linear-gradient(180deg, rgba(7,11,20,.94) 0%, rgba(7,11,20,.62) 46%, rgba(7,11,20,0) 100%);
  --cierre-fondo:#0a0f1c;
  --cierre-linea:rgba(140,175,230,.14);
  --cierre-hover:rgba(120,165,230,.05);
  /* Tres capas: una viñeta radial que hunde los bordes y deja
     respirar la zona del personaje, la caída vertical de siempre y el
     velo lateral que protege la lectura del texto. Con esto las
     láminas dejan de ser un azul plano y claro y pasan a leerse como
     un fondo marino profundo, que es el tono de tu referencia.        */
  --velo-hero:linear-gradient(rgba(7,11,20,.56), rgba(7,11,20,.56)),
              radial-gradient(128% 96% at 70% 44%, rgba(7,11,20,0) 0%, rgba(7,11,20,.34) 38%, rgba(7,11,20,.80) 70%, rgba(7,11,20,.97) 100%),
              linear-gradient(180deg, rgba(7,11,20,.50) 0%, rgba(7,11,20,.06) 26%, rgba(7,11,20,.97) 100%),
              linear-gradient(96deg, rgba(6,10,22,.95) 0%, rgba(6,10,22,.82) 24%, rgba(6,11,26,.46) 46%, rgba(7,13,32,0) 66%);

  /* SF Pro Display se sirve nativa en Apple; Inter cubre el resto */
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',system-ui,sans-serif;
  --display:'Glancyr','Inter',var(--ui);
  --nav:'Chakra Petch','Inter',var(--ui);

  --suave:cubic-bezier(.16,1,.3,1);
  --salto:cubic-bezier(.34,1.4,.5,1);
  --ancho:1240px;
  --lado:clamp(28px,4.4vw,64px);
}

html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--fondo);
  /* ningún vuelo de los renders puede llegar a mover la página de lado */
  overflow-x:clip;
}

/* ---------- MODO CLARO ---------- */
html[data-tema="claro"]{
  --azul-titular:#1746c9;
  --titular-brillo:#2f6ff0;     /* en claro no puede subir a cian: no se leería */
  --texto-suave:#0a1020;
  --fondo:#eef1f7;
  --texto:#0a1020;
  --texto-2:rgba(10,16,32,.62);
  --texto-3:rgba(10,16,32,.38);
  --panel-borde:#2a5ae0;
  --panel-relleno:linear-gradient(104deg,#ffffff 0%,#eaf0ff 42%,#dfe9ff 70%,#d3e2ff 100%);
  --boton-fondo:rgba(255,255,255,.94);
  --logo-filtro:invert(1);
  --icono-filtro:brightness(0);
  --vidrio-fondo:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.62) 58%,rgba(255,255,255,.80));
  --vidrio-borde:rgba(255,255,255,.95);
  --vidrio-brillo:rgba(255,255,255,.85);
  --vidrio-destello:rgba(255,255,255,.9);
  --vidrio-sombra:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -7px 14px -9px rgba(20,32,80,.18), 0 10px 24px -12px rgba(20,32,80,.45);
  --nav-velo:linear-gradient(180deg, rgba(238,241,247,.96) 0%, rgba(238,241,247,.66) 46%, rgba(238,241,247,0) 100%);
  --cierre-fondo:#e2e5ee;
  --cierre-linea:rgba(10,16,32,.14);
  --cierre-hover:rgba(10,16,32,.045);
  --velo-hero:linear-gradient(180deg, rgba(238,241,247,.30) 0%, rgba(238,241,247,0) 22%, rgba(238,241,247,.96) 100%),
              linear-gradient(96deg, rgba(238,241,247,.95) 0%, rgba(238,241,247,.82) 24%, rgba(238,241,247,.46) 44%, rgba(238,241,247,0) 64%);
}

body{
  font-family:var(--ui);
  background:var(--fondo);
  color:var(--texto);
  transition:background .5s var(--suave), color .5s var(--suave);
  min-height:100svh;
  line-height:1.45;
  letter-spacing:-.02em;          /* el tracking -20 del PSD */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
ul{ list-style:none }
a{ color:inherit; text-decoration:none }

main{ position:relative; z-index:2 }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--lado) }

/* ===========================================================
   NAVEGACIÓN
   =========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:clamp(18px,2.6vh,30px) var(--lado);
  pointer-events:none;
}
/* El menú va fijo y pasa por encima de todo. Sin nada detrás, en modo
   claro sus letras (oscuras) quedaban sobre los cuadros oscuros y no
   se leían. Este velo, del color de la página y desvanecido hacia
   abajo, garantiza el contraste en los dos temas sin taparlo todo. */
.nav::before{
  content:''; position:absolute; inset:0 0 auto 0; height:190%;
  z-index:-1; pointer-events:none;
  background:var(--nav-velo);
}
.nav__lista{
  display:flex; justify-content:center; gap:clamp(40px,13vw,190px);
  pointer-events:auto;
}
.nav__enlace{
  /* Glancyr, la misma familia de los títulos, como pediste */
  font-family:var(--display); font-weight:400;
  font-size:clamp(11.5px,1.12vw,15px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--texto-2);
  padding:6px 2px; display:inline-block;
  transition:color .35s var(--suave), transform .45s var(--suave);
}
/* Con el puntero del sistema, los enlaces del menú necesitan decir
   por sí mismos que se pueden pulsar. */
.nav__enlace{ cursor:pointer }
.nav__enlace:hover,
.nav__enlace:focus-visible{ color:var(--texto); transform:translateY(-2px) }
.nav__enlace:active{ transform:translateY(0) scale(.97) }
.nav__enlace:focus-visible{ outline:1px solid var(--azul-claro); outline-offset:4px }

@media (max-width:760px){
  /* el botón de tema ya no vive aquí: la lista dispone de todo el ancho */
  .nav__lista{ gap:clamp(16px,6vw,30px) }
  .nav__enlace{ font-size:11.5px; letter-spacing:0 }
}

/* ===========================================================
   APARICIÓN AL ENTRAR EN PANTALLA
   Una sola animación para toda la página, como pediste.
   =========================================================== */
.revelar{
  opacity:0;
  transform:translateY(30px);
  filter:blur(12px);
  transition:opacity .95s var(--suave), transform .95s var(--suave), filter .95s var(--suave);
}
.revelar.visible{ opacity:1; transform:none; filter:blur(0) }

/* Sin JS todo se ve igualmente */
html.sin-js .revelar{ opacity:1; transform:none; filter:none }

/* destinos del menu: el encabezado flota encima, asi que se apartan
   para que el titulo de la seccion no quede debajo de el */
#disciplina,#evolucion,#respecto{ scroll-margin-top:clamp(74px,9vh,112px) }

@media (prefers-reduced-motion:reduce){
  .revelar{ transition-duration:.01ms }
  html{ scroll-behavior:auto }
}

/* ===========================================================
   BOTÓN DE MODO CLARO / OSCURO — vidrio líquido
   =========================================================== */
.nav{ display:flex; align-items:center; justify-content:center; gap:16px }
.nav > nav{ flex:1 1 auto; pointer-events:auto }

/* Flota suelto en la esquina inferior derecha, siempre a mano y sin
   competir con el menú, como en tu referencia. */
.tema{
  position:fixed; z-index:9000;
  right:clamp(16px,2.6vw,34px);
  bottom:clamp(16px,2.6vw,34px);
  pointer-events:auto; flex:0 0 auto;
  width:clamp(46px,4.4vw,54px); height:clamp(46px,4.4vw,54px); border-radius:50%;
  border:1px solid var(--vidrio-borde);
  background:var(--vidrio-fondo);
  -webkit-backdrop-filter:blur(20px) saturate(200%);
  backdrop-filter:blur(20px) saturate(200%);
  box-shadow:var(--vidrio-sombra);
  color:var(--texto); cursor:pointer;
  display:grid; place-items:center;
  isolation:isolate; overflow:hidden;
  transition:transform .55s var(--salto), border-color .4s var(--suave),
             box-shadow .4s var(--suave), background .4s var(--suave);
}
/* brillo especular superior, el reflejo del cristal */
.tema::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, var(--vidrio-brillo), transparent 52%);
}
/* destello que recorre el canto al pasar el cursor */
.tema::after{
  content:""; position:absolute; inset:-40%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, var(--vidrio-destello) 50%, transparent 60%);
  translate:-120% 0;
  transition:translate .8s var(--suave);
}
.tema:hover::after{ translate:120% 0 }

.tema:hover{
  transform:translate(0,0) scale(1.07);
  border-color:var(--cian);
  box-shadow:var(--vidrio-sombra), 0 0 22px -4px rgba(66,214,255,.6);
}
.tema:active{ transform:scale(.94) }
.tema:focus-visible{ outline:2px solid var(--cian); outline-offset:3px }

.tema__cara{ position:relative; z-index:2; width:21px; height:21px; display:block }
.tema__icono{
  position:absolute; inset:0; width:19px; height:19px; fill:currentColor;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition:opacity .4s var(--suave), transform .55s var(--suave);
}
html:not([data-tema="claro"]) .tema__icono--sol { opacity:0; transform:rotate(-90deg) scale(.4) }
html:not([data-tema="claro"]) .tema__icono--luna{ opacity:1 }
html[data-tema="claro"]      .tema__icono--luna{ opacity:0; transform:rotate(90deg) scale(.4) }
html[data-tema="claro"]      .tema__icono--sol { opacity:1; color:var(--azul) }

/* flotando en la esquina conviene que no baje de 46: es el tamano
   minimo comodo para el pulgar */
@media (max-width:560px){ .tema{ width:46px; height:46px } }

/* ===========================================================
   ACENTO
   La palabra que se resalta en azul dentro de un texto, como en
   los titulares de tu referencia.
   =========================================================== */
.acento{ color:var(--azul-titular) }


/* backdrop-filter en un elemento fijo vuelve a leer lo que hay
   detrás en CADA fotograma de scroll. En táctil se cambia por un
   fondo plano: en un círculo de 46 px no se aprecia la diferencia. */
@media (pointer:coarse){
  .tema{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(30,42,74,.92);
  }
  html[data-tema="claro"] .tema{ background:rgba(255,255,255,.94) }
}