/* Bristol: fuente autohospedada (no está en Google Fonts). Archivo y
   licencia OFL en assets/fonts/. Solo trae el estilo "Regular" — no
   pidas negritas de esta familia, se ve mal la negrita simulada. */
@font-face {
  font-family: "Bristol";
  src: url("fonts/Bristol.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ████████████████████████████████████████████████████████████████
   ZONA 1 · EL ADN VISUAL
   Cambia un valor de aquí y cambia TODO el sitio.
   Es el único lugar donde hay colores escritos a mano.
   ████████████████████████████████████████████████████████████████ */

:root {
  /* --- LA PALETA: negros, blancos y los 5 acentos del colectivo --- */
  --negro:      #F6F3FA;   /* fondo general (tono claro) */
  --carbon:     #15111C;   /* cajas y superficies levantadas */
  --blanco:     #09070D;   /* texto y bloques oscuros (tono oscuro) */
  --uva:        #170F52;   /* azul-morado profundo, para bandas grandes */
  --azul:       #3B5BFF;   /* azul: portada */
  --magenta:    #4DE8EC;   /* acento primario: botones, bordes, selección */
  --verde:      #2FE28A;   /* verde: acento de la banda de cifras */
  --morado:     #8B2BE2;   /* morado vivo: degradado de portada, banda de cifras */
  --cyan:       #E62AB0;   /* acento secundario: etiquetas, enlaces, meta */
  --violeta:    var(--magenta); /* alias: el resto del CSS usa --violeta */

  --sombra-letra: 0 1px 3px rgba(9,7,13,.3); /* letras magenta/cian sobre fondos claros */

  /* --- VARIABLES DE ROL ---
     Esto es lo importante: los componentes NO usan --negro ni --blanco
     directamente, usan estos nombres. Así, un bloque puede invertirse
     entero cambiando sólo estas 4 líneas (mira .bloque--claro más abajo). */
  --fondo:  var(--negro);
  --tinta:  var(--blanco);
  --tenue:  #8E85A0;
  --borde:  #2A2336;

  /* --- TIPOGRAFÍAS: 3 roles, 2 fuentes ---
     Bristol solo tiene un peso (Regular): no le pidas font-weight
     alto, sale con negrita falsa y se ve mal. Caveat es respaldo
     silencioso por si a Bristol le falta algún acento (á, í, ñ...). */
  --f-display: "Bristol", "Caveat", cursive;   /* títulos y logotipo */
  --f-texto:   "Raleway", sans-serif;          /* lectura */
  --f-dato:    "Raleway", sans-serif;          /* etiquetas, números, contadores */

  /* --- ESCALA DE TEXTO: clamp(mínimo, ideal, máximo) --- */
  --t-titulo:  clamp(2.2rem, 6.5vw, 5.5rem);
  --t-medio:   clamp(1.4rem, 3vw, 2.4rem);
  --t-chico:   0.78rem;

  /* --- ESPACIADO: una sola escala para todo --- */
  --e1: .5rem;  --e2: 1rem;   --e3: 1.75rem;
  --e4: 3rem;   --e5: 5rem;   --e6: 8rem;

  --ancho: 1440px;
  --radio: 20px;
  --curva: 300ms cubic-bezier(.22,.61,.36,1);
}


/* ████ RESET: apaga los estilos raros del navegador ████ */
*,*::before,*::after { box-sizing: border-box; }
body,h1,h2,h3,p,ul,figure { margin:0; padding:0; }
ul { list-style:none; }
img,iframe,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* 90px = respaldo hasta que el JS mida el nav real */

body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--f-texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word; /* ningún texto puede empujar el ancho de la página, aunque sea una palabra larga */
}

h1,h2,h3 { font-family: var(--f-display); font-weight:400; font-synthesis:none; line-height:.92; letter-spacing:-.02em; }

::selection { background: var(--magenta); color: #fff; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

/* Sombra sutil donde el magenta/cian pierde contraste, sin cambiarles el color */
.etiqueta, .marca-texto, .portada__cinta b,
.panel__aviso code, .vacio code, .contador b, .meta li,
.nav__marca span, .boton, .boton--linea:hover {
  text-shadow: var(--sombra-letra);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ████████████████████████████████████████████████████████████████
   ZONA 2 · ESTRUCTURA
   ████████████████████████████████████████████████████████████████ */

.contenedor { width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline: clamp(1.25rem, 4vw, 4rem); }

/* Cada sección grande de la página */
.bloque {
  background: var(--fondo);
  color: var(--tinta);
  padding-block: var(--e6);
  position: relative;
  scroll-margin-top: calc(-1 * var(--e6)); /* resta su propio padding al saltar aquí desde el nav */
}

/* Esta sección no tiene el padding-block de arriba: la portada controla su propio alto */
#inicio { scroll-margin-top: 0; padding-block: 0; }

/* ⬇ EL TRUCO DE LA INVERSIÓN ⬇
   Este bloque no redefine ni un solo componente: sólo cambia
   las 4 variables de rol y todo lo de adentro se adapta solo. */
.bloque--claro {
  --fondo: var(--blanco);
  --tinta: var(--negro);
  --tenue: #58506A;
  --borde: #DED7E9;
}

/* Encabezado de sección: etiqueta chica + título enorme */
.encabezado { margin-bottom: var(--e4); }

.etiqueta {
  font-family: var(--f-dato);
  font-size: var(--t-chico);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e2);
}
.etiqueta::after { content:""; flex:1; height:1px; background: var(--borde); }

.bloque--claro .etiqueta { color: var(--violeta); }

.titulo-seccion { font-size: var(--t-titulo); text-transform: uppercase; }

/* Palabras resaltadas dentro de un párrafo */
.marca-texto { color: var(--cyan); }
.bloque--claro .marca-texto { color: var(--violeta); }


/* ████ BARRA DE NAVEGACIÓN ████ */
.nav {
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--e3);
  padding: var(--e2) clamp(1.25rem, 4vw, 4rem);
  background: rgba(246,243,250,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.nav__marca {
  font-family: var(--f-display);
  font-weight:400; font-synthesis:none; font-size:1.35rem; letter-spacing:.02em;
}
.nav__marca span { color: var(--violeta); }

.nav__lista { display:flex; flex-wrap:wrap; gap: clamp(.9rem, 2.4vw, 2.4rem); }

.nav__enlace {
  font-family: var(--f-dato);
  font-size: var(--t-chico);
  letter-spacing:.16em;
  text-transform: uppercase;
  color: #8E85A0;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: color var(--curva), border-color var(--curva);
}
.nav__enlace:hover { color: var(--blanco); }

/* El JavaScript marca esto solo, según en qué sección vas scrolleando */
.nav__enlace[aria-current="true"] { color: var(--blanco); border-bottom-color: var(--violeta); }


/* ████████████████████████████████████████████████████████████████
   ZONA 3 · PORTADA  (el elemento firma del sitio)
   Las letras KOAH son una ventana: por dentro se ve un mural.
   ████████████████████████████████████████████████████████████████ */

.portada {
  min-height: calc(100svh - 65px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e5) 0 var(--e4);
  position: relative;
  overflow: hidden;
}

/* Resplandor morado de fondo, muy suave */
.portada::before {
  content:""; position:absolute; inset:-30% -10% auto -10%; height:80%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(139,43,226,.30), transparent 70%);
  pointer-events:none;
}

.portada__cinta {
  font-family: var(--f-dato);
  font-size: var(--t-chico);
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--tenue);
  display:flex; flex-wrap:wrap; gap: var(--e2) var(--e3);
  position:relative;
}
.portada__cinta b { color: var(--cyan); font-weight:400; }

.portada__marca {
  text-align:center;
  margin: var(--e2) 0;
  position:relative;
}
.portada__marca img {
  max-width: min(90%, 620px);
  width:100%;
  height:auto;
  margin-inline:auto;
}

.portada__lema {
  max-width: 46ch; margin-inline:auto;
  text-align:center; font-size: clamp(1rem,1.7vw,1.3rem);
  color: var(--tenue);
  position:relative;
}

.portada__bajar {
  margin-top: var(--e4);
  display:flex; justify-content:center;
  font-family: var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.25em; text-transform:uppercase; color:var(--tenue);
  position:relative;
}
.portada__bajar span { animation: flota 2.4s ease-in-out infinite; }
@keyframes flota { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }


/* ████████████████████████████████████████████████████████████████
   ZONA 4 · COMPONENTES REUTILIZABLES
   ████████████████████████████████████████████████████████████████ */

/* ---------- Rejilla de dos columnas (panel + texto) ---------- */
.duo {
  display:grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items:start;
}
/* Variante para dos paneles del mismo tamaño (ver #contacto) */
.duo--contacto { grid-template-columns: 1fr 1fr; }

.parrafo-grande { font-size: clamp(1.05rem,2vw,1.5rem); color: var(--tinta); max-width:60ch; }
.parrafo { color: var(--tenue); max-width:62ch; margin-top: var(--e2); }


/* ---------- PANEL: la caja redondeada (mapa, redes o foto) ---------- */
.panel {
  border:1px solid var(--borde);
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  min-height: 260px;
  padding: var(--e2);
  display:grid; place-content:center; gap:var(--e1);
  text-align:center;
  overflow:hidden;
}
.panel__mapa { width:100%; min-height:260px; border:0; border-radius:calc(var(--radio) - 8px); }
.panel__titulo {
  font-family:var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.22em; text-transform:uppercase; color:var(--tenue);
  margin-bottom:var(--e1);
}
/* Cada enlace es un logotipo de red social (ver ICONOS_REDES), no texto */
.panel__lista { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }
.panel__enlace { color:var(--tenue); transition:color var(--curva), transform var(--curva); }
.panel__enlace svg { width:26px; height:26px; }
.panel__enlace:hover { color:var(--cyan); transform:translateY(-2px); }
.panel__aviso { font-size:var(--t-chico); color:var(--tenue); line-height:1.8; }
.panel__aviso code { font-family:var(--f-dato); color:var(--cyan); }
.bloque--claro .panel__aviso code, .bloque--claro .panel__enlace:hover { color:var(--violeta); }


/* ---------- BANDA DE CIFRAS (morado a todo lo ancho) ---------- */
.cifras {
  margin-top: var(--e5);
  background: var(--uva);
  border-radius: var(--radio);
  border: 1px solid color-mix(in srgb, var(--violeta) 45%, transparent);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  overflow:hidden;
}
.cifra { padding: var(--e3); border-right:1px solid rgba(255,255,255,.09); }
.cifra:last-child { border-right:0; }
.cifra__num {
  font-family:var(--f-display); font-weight:400; font-synthesis:none;
  font-size: clamp(2.4rem,5vw,3.6rem); line-height:1.15; color:#fff; /* .cifras recorta con overflow:hidden, igual que la portada */
}
.cifra__txt {
  font-family:var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.2em; text-transform:uppercase; color:var(--verde); margin-top:.4rem;
}


/* ████ CARRUSEL ████ */
.carrusel { position:relative; }

.escenario {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--e2);
  position:relative; /* para que las flechas en celular se centren en la foto, no en todo el carrusel */
}

.marco {
  position:relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  border:1px solid var(--borde);
  background: var(--carbon);
  overflow:hidden;
  display:grid; place-items:center;
}
.bloque--claro .marco { background:#EFEAF6; }

.marco__img { width:100%; height:100%; object-fit:cover; }

/* Se desvanece al cambiar de diapositiva */
.marco__contenido { position:absolute; inset:0; display:grid; place-items:center; animation: entra var(--curva) both; }
@keyframes entra { from{opacity:0; transform:scale(1.02)} to{opacity:1; transform:none} }

/* Marcador de posición mientras no subes la foto real */
.vacio {
  display:grid; place-content:center; gap:.4rem; text-align:center; padding:var(--e3);
  width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(139,43,226,.07) 14px 28px);
}
.vacio strong { font-family:var(--f-display); font-weight:400; font-synthesis:none; font-size:var(--t-medio); text-transform:uppercase; }
.vacio code { font-family:var(--f-dato); font-size:var(--t-chico); color:var(--cyan); word-break:break-all; }
.vacio span { font-family:var(--f-dato); font-size:var(--t-chico); color:var(--tenue); }

/* --- Flechas triangulares (las de tu diagrama) --- */
.flecha {
  color: var(--tenue); padding: var(--e2);
  transition: color var(--curva), transform var(--curva);
}
.flecha:hover { color: var(--tinta); transform: scale(1.12); }
.flecha svg { width: clamp(24px,3.4vw,46px); height:auto; }

/* --- Barra inferior: contador + miniaturas --- */
.tira {
  display:flex; align-items:center; gap:var(--e3);
  margin-top:var(--e3); flex-wrap:wrap;
}
.contador {
  font-family:var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.24em; color:var(--tenue); white-space:nowrap;
}
.contador b { color:var(--cyan); font-weight:700; }
.bloque--claro .contador b { color:var(--violeta); }

.miniaturas { display:flex; gap:.6rem; flex-wrap:wrap; }
.mini {
  width:74px; height:52px; border-radius:9px; overflow:hidden;
  border:1px solid var(--borde); background:var(--carbon);
  display:grid; place-items:center;
  font-family:var(--f-dato); font-size:.7rem; color:var(--tenue);
  opacity:.5; transition: opacity var(--curva), border-color var(--curva), transform var(--curva);
}
.bloque--claro .mini { background:#EFEAF6; }
.mini img { width:100%; height:100%; object-fit:cover; }
.mini:hover { opacity:.85; transform:translateY(-2px); }
.mini[aria-current="true"] { opacity:1; border-color:var(--violeta); box-shadow:0 0 0 2px var(--violeta); }

/* --- Ficha de información bajo la imagen --- */
.ficha { margin-top: var(--e4); }
.ficha__titulo { font-size: var(--t-medio); text-transform:uppercase; margin-bottom:var(--e2); }
.ficha__texto { color: var(--tenue); max-width:62ch; }

/* Datos sueltos tipo lugar / año, en mono */
.meta { display:flex; flex-wrap:wrap; gap:var(--e1) var(--e3); margin-bottom:var(--e2); }
.meta li {
  font-family:var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.bloque--claro .meta li { color:var(--violeta); }


/* ████ BOTÓN ████ */
.boton {
  display:inline-block;
  font-family:var(--f-dato); font-size:var(--t-chico);
  letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 2rem; border-radius:999px;
  background: var(--violeta); color:#fff;
  border:1px solid var(--violeta);
  transition: background var(--curva), color var(--curva), transform var(--curva);
}
.boton:hover { background:transparent; color:var(--violeta); transform:translateY(-2px); }

.boton--linea { background:transparent; color:var(--tinta); border-color:var(--borde); }
.boton--linea:hover { background:var(--violeta); color:#fff; border-color:var(--violeta); }


/* ████ CONTACTO ████ */
.panel__icono { display:flex; justify-content:center; margin-bottom:.75rem; }
.panel__icono svg { width:34px; height:34px; color:var(--violeta); }

.correo-grande {
  font-family:var(--f-texto); font-weight:700;
  font-size: clamp(1.2rem,3vw,1.6rem);
  letter-spacing:-.02em; word-break:break-word;
  border-bottom:3px solid var(--violeta); display:inline-block;
  transition: color var(--curva);
}
.correo-grande:hover { color: var(--violeta); }

/* Los dos ajustes de espacio que antes eran style="" sueltos en el HTML/JS */
#contacto .parrafo-grande { margin-bottom: 2rem; }
#contacto .panel__aviso { margin-top: 1rem; }


/* ████ PIE ████ */
.pie { background:var(--negro); color:var(--blanco); border-top:1px solid #2A2336; padding: var(--e4) 0 var(--e5); }
.pie__redes {
  display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:1.5rem;
  border:1px solid #2A2336; border-radius:var(--radio); padding:var(--e3);
}
/* Cada enlace es un logotipo de red social (ver ICONOS_REDES), no texto */
.pie__red { color:var(--tenue); transition:color var(--curva), transform var(--curva); }
.pie__red svg { width:24px; height:24px; }
.pie__red:hover { color:var(--cyan); transform:translateY(-2px); }
.pie__nota { text-align:center; margin-top:var(--e3); font-size:var(--t-chico); color:#8E85A0; font-family:var(--f-dato); }


/* ████ APARICIÓN AL HACER SCROLL ████ */
.aparece { opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.aparece.visible { opacity:1; transform:none; }


/* ████████████████████████████████████████████████████████████████
   ZONA 5 · PANTALLAS CHICAS
   ████████████████████████████████████████████████████████████████ */
@media (max-width: 820px) {
  :root { --e6: 5rem; --e5: 3.5rem; }
  .duo { grid-template-columns: 1fr; }
  .nav { flex-direction:column; gap:.6rem; padding-block:.75rem; }
  .nav__lista { justify-content:center; }
  .cifra { border-right:0; border-bottom:1px solid rgba(255,255,255,.09); }

  /* Las flechas se salen de la rejilla y se montan sobre la imagen */
  .escenario { grid-template-columns:1fr; }
  .flecha {
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    background: rgba(9,7,13,.55); border-radius:50%; backdrop-filter:blur(6px);
    color: #F6F3FA; /* fijo: siempre va sobre fondo oscuro, no depende de --blanco */
  }
  .flecha:hover { transform:translateY(-50%) scale(1.1); }
  .flecha[data-dir="-1"] { left:.4rem; }
  .flecha[data-dir="1"]  { right:.4rem; }
  .marco { aspect-ratio: 4/3; }

  .portada__cinta { padding-left: .75rem; } /* que no quede pegada al borde de la pantalla */
}