/* ============================================================
   Tipografía alojada aquí mismo, no en Google.
   Evita dos conexiones a un servidor ajeno antes de pintar el primer
   texto, y de paso el sitio deja de depender de que Google responda.
   ============================================================ */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fuentes/poppins-500.woff2') format('woff2');
  /* Solo el subconjunto latino: cubre todos los acentos del español. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fuentes/poppins-600.woff2') format('woff2');
  /* Solo el subconjunto latino: cubre todos los acentos del español. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fuentes/poppins-700.woff2') format('woff2');
  /* Solo el subconjunto latino: cubre todos los acentos del español. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fuentes/poppins-900.woff2') format('woff2');
  /* Solo el subconjunto latino: cubre todos los acentos del español. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Premios Yo Soy SST — 1ª Edición
   Paleta tomada de los degradados del logo.
   ============================================================ */

:root {
  --negro:        #050404;
  --negro-suave:  #0d0b09;
  --oro-claro:    #f9edb4;
  --oro:          #d4a96b;
  --oro-medio:    #c08a3e;
  --oro-oscuro:   #805835;
  --texto:        #f4efe6;
  --texto-tenue:  #b9ad9a;
  --borde:        #ffffff1f;

  --ancho: 1200px;
  --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* El desplazamiento suave lo maneja el JS, que además descuenta la barra
   fija. Esto queda como respaldo si el JS no carga. */
html { scroll-behavior: smooth; }

/* Sin esto la barra fija tapa el título de la sección al llegar. */
[id] { scroll-margin-top: 110px; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: 500;
  /* Tracking único de -40/1000 em para todo el texto, títulos y cuerpo por
     igual. Las etiquetas en versalitas son la excepción: en mayúsculas
     pequeñas el tracking negativo las vuelve ilegibles. */
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.contenedor {
  width: min(100% - 48px, var(--ancho));
  margin-inline: auto;
}

/* ---------- Barra superior ---------- */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 48px);
  transition: background-color .3s ease, backdrop-filter .3s ease;
}

.barra[data-desplazada] {
  background: #050404cc;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra__logo img { display: block; width: 190px; height: auto; }

.barra__enlaces {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.barra__enlaces a {
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s ease;
}

.barra__enlaces a:hover { color: var(--oro-claro); }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--oro-oscuro);
  background: linear-gradient(120deg, var(--oro-oscuro), var(--oro), var(--oro-claro));
  color: #2a1c0c;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}

.boton:hover { filter: brightness(1.12); transform: translateY(-1px); }

.boton svg { flex: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__tela,
.hero__grano {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__tela { width: 100%; height: 100%; display: block; }

.hero__grano {
  background-image: url('./assets/grano.png');
  background-size: 200px;
  background-repeat: repeat;
  opacity: .25;
  pointer-events: none;
}

/* Oscurece los bordes para que el texto siempre tenga contraste. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(110% 75% at 50% 42%, transparent 18%, #050404e6 78%, #050404 100%);
  pointer-events: none;
}

.hero__centro {
  text-align: center;
  padding: 140px 0 40px;
}

.hero__logo {
  width: min(90%, 780px);
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 6px 40px #00000080);
}

.hero__lema {
  margin: 28px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  color: var(--texto);
}

.hero__lema span { color: var(--oro-claro); font-weight: 700; }

/* Fila inferior: fecha — lugar — flecha */
.hero__datos {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(20px, 5vw, 64px) 26px;
  font-size: 15px;
}

/* Redes bajo la fila de fecha y ciudad. Van más discretas que las del pie:
   aquí acompañan, no invitan a irse del sitio nada más entrar. */
.hero__redes {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 clamp(20px, 5vw, 64px) 44px;
}

.hero__redes a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  text-decoration: none;
  background: #00000033;
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.hero__redes a:hover {
  border-color: var(--oro);
  color: var(--oro-claro);
  transform: translateY(-2px);
}

.hero__datos .linea {
  flex: 1;
  height: 1px;
  background: var(--borde);
}

.hero__bajar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.hero__bajar:hover { border-color: var(--oro); color: var(--oro-claro); }

/* ---------- Marquee ---------- */

.marquee {
  --duracion: 32s;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
  padding: 34px 0;
  border-block: 1px solid var(--borde);
  background: var(--negro-suave);
}

.marquee__pista {
  flex: none;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  /* Sin min-width: si la pista se estira más que su contenido, queda un
     hueco vacío antes de que entre la siguiente. El ancho lo da el propio
     texto, que por eso va repetido en el HTML. */
  animation: desplazar var(--duracion) linear infinite;
}

.marquee span {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--oro-oscuro), var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marquee em {
  font-style: normal;
  color: var(--oro-medio);
  font-size: clamp(20px, 3vw, 34px);
}

@keyframes desplazar {
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .barra__enlaces { display: none; }
  .barra__logo img { width: 150px; }
  .hero__datos { flex-wrap: wrap; justify-content: center; text-align: center; }
  .hero__datos .linea { display: none; }
  .hero__bajar { display: none; }
}

/* ============================================================
   Secciones de contenido
   ============================================================ */

/* Ritmo vertical. Ojo: cuando dos secciones quedan pegadas sus rellenos se
   suman, así que este valor es la MITAD del aire que se ve entre ellas. */
.seccion { padding: clamp(44px, 5.5vw, 76px) 0; }

.seccion--tela {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.seccion--tela .fondo-tela,
.seccion--tela .fondo-grano {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.seccion--tela .fondo-tela { width: 100%; height: 100%; display: block; }

.seccion--tela .fondo-grano {
  background-image: url('./assets/grano.png');
  background-size: 200px;
  background-repeat: repeat;
  opacity: .22;
}

/* La tela se apaga hacia los bordes para que empalme con el negro. */
.seccion--tela::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--negro) 0%, #05040400 22%, #05040400 78%, var(--negro) 100%);
  pointer-events: none;
}

.etiqueta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--texto-tenue);
}

.etiqueta::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--oro);
}

.titulo {
  margin: 0 0 18px;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  max-width: 18ch;
}

.titulo span {
  background: linear-gradient(100deg, var(--oro-oscuro), var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Tarjetas de "para quién" ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 210px;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--borde);
  border-radius: 22px;
  background: #ffffff05;
  cursor: default;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.tarjeta:hover,
.tarjeta[data-activa] {
  border-color: var(--oro-oscuro);
  background: linear-gradient(160deg, #c08a3e1f, #ffffff05);
  transform: translateY(-3px);
}

/* La luz que recorre las tarjetas se enciende más despacio de lo que se
   apaga: así se siente que llega, no que parpadea. */
.tarjeta { transition: border-color .5s ease, background-color .5s ease, transform .5s ease; }
.tarjeta[data-activa] { transition-duration: .9s; }

.tarjeta[data-activa] svg { color: var(--oro-claro); }
.tarjeta svg { transition: color .9s ease; }

.tarjeta svg { color: var(--oro); }
.tarjeta b { font-size: 17px; font-weight: 600; }
.tarjeta small { font-size: 13px; color: var(--texto-tenue); line-height: 1.5; }

.nota {
  margin-top: 20px;
  padding: 26px 30px;
  border: 1px solid var(--borde);
  border-radius: 22px;
  color: var(--texto-tenue);
  line-height: 1.7;
  max-width: 78ch;
}

/* ---------- Anfitriones ---------- */

.personas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 52px;
}

.persona__retrato {
  position: relative;   /* ancla de la inicial de detrás */
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, #241a10, #0d0b09);
  border: 1px solid var(--borde);
  display: grid;
  place-items: center;
  padding: 0;
}

/* Inicial de cada persona: pequeña, arriba a la izquierda, detrás de la
   foto. Es una firma discreta, no un elemento gráfico. */
.persona__retrato span {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  padding: 14px 0 0 14px;
  pointer-events: none;
}

/* Stefanni es la única con la cabeza a la izquierda del encuadre: su
   inicial va al otro lado para no quedar encima. */
.persona__retrato span.inicial--derecha {
  justify-content: flex-end;
  padding: 14px 14px 0 0;
}

.persona__retrato span i {
  font-style: normal;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(140deg, var(--oro), var(--oro-claro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .8;
}

.persona__retrato img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Recortadas al contorno de la persona y encuadradas para llenar la
     tarjeta: si no, las de medio cuerpo se ven más pequeñas que las de
     cuerpo entero. */
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05);
  transition: filter .4s ease;
}

.persona:hover .persona__retrato img { filter: grayscale(0); }

.persona b { display: block; margin-top: 14px; font-size: 16px; font-weight: 600; }
.persona small { color: var(--texto-tenue); font-size: 13px; }

@media (max-width: 1000px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .personas { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .tarjetas { grid-template-columns: 1fr; }
  .personas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Estelas de luz (recurso de marca de la invitación) ----------
   La imagen ya viene compuesta a pantalla completa, con las estelas en
   las esquinas. Va como una sola capa que cubre la sección: repetirla o
   voltearla se nota mucho.
   Es un JPEG sobre negro, no un PNG con transparencia: en modo "screen"
   el negro desaparece igual, y así pesa 120 KB en vez de 588.
   ------------------------------------------------------------------ */

.seccion--estelas {
  position: relative;
  overflow: hidden;
}

.seccion--estelas > .contenedor { position: relative; z-index: 1; }

.estelas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .75;
  /* En "screen" el negro del recurso desaparece y solo queda la luz. */
  mix-blend-mode: screen;
  /* Sin esto la imagen se corta en seco en el borde de la sección y se
     ve una línea horizontal. La máscara la disuelve arriba y abajo. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}

/* ---------- Agenda ---------- */

.dia { margin-top: 46px; }

.dia__cabecera {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--borde);
}

.dia__marca {
  padding: 16px 26px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: #2a1c0c;
  background: linear-gradient(120deg, var(--oro-oscuro), var(--oro), var(--oro-claro));
  white-space: nowrap;
}

.dia__titulo {
  flex: 1;
  padding: 16px 26px;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  background: var(--negro-suave);
}

.bloque {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #ffffff12;
}

.bloque:last-child { border-bottom: 0; }

.bloque__hora {
  color: var(--oro);
  font-size: 14px;
  font-weight: 600;
  padding-top: 2px;
}

.bloque__cuerpo {
  padding: 20px 24px;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: #ffffff05;
  transition: border-color .25s ease, background-color .25s ease;
}

.bloque:hover .bloque__cuerpo {
  border-color: var(--oro-oscuro);
  background: #c08a3e14;
}

/* Encabezado de un grupo de bloques dentro de un día. */
.bloque__grupo {
  margin: 22px 0 4px;
  padding-left: 144px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oro);
}

@media (max-width: 700px) {
  .bloque__grupo { padding-left: 0; }
}

.bloque__cuerpo b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.bloque__cuerpo small { color: var(--texto-tenue); font-size: 14px; line-height: 1.6; }

@media (max-width: 700px) {
  .bloque { grid-template-columns: 1fr; gap: 10px; }
  .dia__cabecera { flex-direction: column; align-items: stretch; }
  .dia__marca { text-align: center; }
}

/* ---------- Pie de página ---------- */

.pie {
  position: relative;
  /* Poco relleno arriba: el bloque de vestuario ya aporta el suyo por debajo
     y sumados dejaban 190 px de vacío. */
  padding-top: clamp(44px, 5.5vw, 70px);
  border-top: 1px solid var(--borde);
  overflow: hidden;
}

.pie__cierre {
  margin: 0 0 clamp(40px, 6vw, 72px);
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  max-width: 16ch;
  background: linear-gradient(100deg, var(--oro-oscuro), var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pie__medio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 34px;
}

.pie__redes { display: flex; align-items: center; gap: 12px; }

.pie__redes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.pie__redes a:hover {
  border-color: var(--oro);
  color: var(--oro-claro);
  transform: translateY(-2px);
}

.pie__enlaces { display: flex; flex-wrap: wrap; gap: 10px; }

.pie__enlaces a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 13px;
  transition: border-color .2s ease, color .2s ease;
}

.pie__enlaces a:hover { border-color: var(--oro-oscuro); color: var(--oro-claro); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 0 34px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-tenue);
}

/* Logo de cierre del pie: pequeño, centrado y sin efectos.
   Nada de máscaras, degradados de opacidad ni grano: se ve tal cual. */
.pie__marca {
  display: block;
  width: min(100%, 380px);
  height: auto;
  margin: 8px auto 0;
  padding-bottom: 56px;
  pointer-events: none;
}

@media (max-width: 700px) {
  .pie__medio { flex-direction: column; align-items: flex-start; }
  .pie__marca { width: min(100%, 280px); padding-bottom: 44px; }
}

/* ---------- Bloque de vestuario ---------- */

#vestuario.seccion { padding-block: 0; }

.vestuario {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(28px, 3.5vw, 46px);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.vestuario p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.75;
  color: var(--texto-tenue);
}

.vestuario p strong { color: var(--texto); font-weight: 600; }

.vestuario .titulo { margin-bottom: 0; }

@media (max-width: 800px) {
  .vestuario { grid-template-columns: 1fr; }
}

/* ---------- Frase de apertura ---------- */

/* Poco relleno abajo a propósito: la sección siguiente ya aporta el suyo,
   y sumados dejaban un hueco de 280 px. */
.apertura { padding: clamp(36px, 4.5vw, 60px) 0 clamp(8px, 2vw, 20px); }

.apertura__reja {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  /* Arriba, no centrado: el mapa es mucho más alto que el texto y al
     centrarlo empujaba el titular 150 px hacia abajo. */
  align-items: start;
}

.apertura h2 {
  margin: 0;
  /* Los cortes de línea van forzados con <br> en el HTML.
     Sin ancho máximo, para que el navegador no meta cortes propios encima. */
  max-width: none;
  /* Tope bajado de 68 a 58: al darle más ancho al mapa, la columna del
     texto se estrechó y "Volver a casa." se partía, rompiendo los cinco
     cortes decididos. */
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.08;
}

.apertura h2 span {
  background: linear-gradient(100deg, var(--oro-oscuro), var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.apertura p {
  margin: clamp(20px, 3vw, 32px) 0 0;
  max-width: 32ch;
  font-size: clamp(16px, 2vw, 21px);
  color: var(--texto-tenue);
  line-height: 1.6;
}

/* ---------- Mapa de ciudades ---------- */

.mapa {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
}

/* El lienzo ya viene con la proporción del país, así que mandamos por
   el alto: si mandáramos por el ancho, se estiraría verticalmente. */
.mapa svg {
  display: block;
  height: clamp(420px, 66vh, 700px);
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* Contorno del país: un trazo tenue, siempre visible. */
.mapa .contorno {
  fill: none;
  stroke: var(--oro-oscuro);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0;
}

.mapa[data-visible] .contorno {
  animation: aparecer 1.4s ease-out .2s forwards;
}

@keyframes aparecer { to { opacity: .3; } }

/* La estrella que recorre el borde, con su estela.
   Tres trazos del mismo camino: punta, medio y cola. Cada uno arranca
   desplazado para que las cabezas coincidan, y los tres avanzan la misma
   distancia, así viajan pegados. La cola lleva desenfoque real. */
.mapa .estela {
  fill: none;
  stroke: var(--oro-claro);
  stroke-linecap: round;
  opacity: 0;
}

.mapa .estela--punta {
  stroke-width: 1.5;
  stroke-dasharray: 14 var(--total);
  stroke-dashoffset: 0;
}

.mapa .estela--medio {
  stroke-width: 2.2;
  stroke: var(--oro);
  stroke-dasharray: 74 var(--total);
  stroke-dashoffset: 60px;
}

.mapa .estela--cola {
  stroke-width: 5;
  stroke: var(--oro-medio);
  stroke-dasharray: 210 var(--total);
  stroke-dashoffset: 196px;
  filter: url(#difuminar);
}

.mapa[data-visible] .estela--punta {
  animation: recorrer-punta 13s cubic-bezier(.5,0,.5,1) 1s infinite;
}
.mapa[data-visible] .estela--medio {
  animation: recorrer-medio 13s cubic-bezier(.5,0,.5,1) 1s infinite;
}
.mapa[data-visible] .estela--cola {
  animation: recorrer-cola 13s cubic-bezier(.5,0,.5,1) 1s infinite;
}

@keyframes recorrer-punta {
  0%   { opacity: 0;   stroke-dashoffset: 0; }
  6%   { opacity: .85; }
  88%  { opacity: .85; }
  100% { opacity: 0;   stroke-dashoffset: calc(-1 * var(--total)); }
}
@keyframes recorrer-medio {
  0%   { opacity: 0;   stroke-dashoffset: 60px; }
  8%   { opacity: .3; }
  88%  { opacity: .3; }
  100% { opacity: 0;   stroke-dashoffset: calc(60px - var(--total)); }
}
@keyframes recorrer-cola {
  0%   { opacity: 0;   stroke-dashoffset: 196px; }
  10%  { opacity: .14; }
  88%  { opacity: .14; }
  100% { opacity: 0;   stroke-dashoffset: calc(196px - var(--total)); }
}

.mapa .enlace {
  stroke: var(--oro);
  stroke-width: .7;
  opacity: 0;
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
}

.mapa[data-visible] .enlace {
  animation: trazar 1s ease-out forwards;
  animation-delay: calc(700ms + var(--i) * 40ms);
}

@keyframes trazar {
  to { opacity: .16; stroke-dashoffset: 0; }
}

/* El destello que sube de cada ciudad hasta Bogotá. */
.mapa .viaje {
  stroke: var(--oro-claro);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 30 var(--largo);
  stroke-dashoffset: 30;
}

.mapa[data-visible] .viaje {
  animation: viajar 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: calc(1600ms + var(--i) * 210ms);
}

@keyframes viajar {
  0%        { opacity: 0;   stroke-dashoffset: 30; }
  10%       { opacity: 1; }
  60%       { opacity: 1;   stroke-dashoffset: calc(-1 * var(--largo)); }
  61%, 100% { opacity: 0;   stroke-dashoffset: calc(-1 * var(--largo)); }
}

/* Las ciudades se suben a su sitio en vez de solo aparecer. */
.mapa .ciudad {
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  transform-origin: center;
}

.mapa[data-visible] .ciudad {
  animation: subir .7s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: calc(var(--i) * 55ms);
}

@keyframes subir {
  to { opacity: 1; transform: translateY(0); }
}

/* Bogotá late, porque es el destino.
   transform-box: fill-box es obligatorio: sin eso el círculo escala desde
   el origen del SVG y se va volando fuera del mapa. */
.mapa .sede .halo {
  transform-box: fill-box;
  transform-origin: center;
}

.mapa[data-visible] .sede .halo {
  animation: latir 2.6s ease-in-out 1.8s infinite;
}

@keyframes latir {
  0%, 100% { opacity: .28; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.45); }
}

.mapa .punto { fill: var(--oro); }
.mapa .halo  { fill: var(--oro); opacity: .16; }

.mapa .sede .punto { fill: var(--oro-claro); }
.mapa .sede .halo  { fill: var(--oro-claro); opacity: .28; }

.mapa text {
  fill: var(--texto-tenue);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

.mapa .sede text { fill: var(--oro-claro); font-weight: 700; font-size: 24px; }

.mapa__pie {
  margin: 26px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--texto-tenue);
}

@media (prefers-reduced-motion: reduce) {
  .mapa .enlace { opacity: .16; stroke-dashoffset: 0; animation: none; }
  .mapa .ciudad { opacity: 1; transform: none; animation: none; }
  .mapa .viaje  { display: none; }
  .mapa .estela { display: none; }
  .mapa .contorno { opacity: .3; animation: none; }
  .mapa[data-visible] .sede .halo { animation: none; opacity: .28; }
}

/* ------------------------------------------------------------------
   Esta media query va AL FINAL a propósito: los estilos de .apertura__reja
   están más abajo en el archivo, y con la misma especificidad gana la
   última regla. Si se sube, el mapa deja de apilarse en el celular.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .apertura__reja {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .apertura h2,
  .apertura p { margin-inline: auto; }
  .mapa svg { height: clamp(300px, 46vh, 420px); }

  /* A este tamaño el mapa se dibuja a la mitad, y los nombres quedarían a
     4 px. Se ocultan todos menos Bogotá, que se agranda. Los puntos y las
     líneas siguen contando la historia sin necesidad de leerlos. */
  .mapa text { display: none; }
  .mapa .sede text { display: block; font-size: 34px; }
}

/* ---------- "Para quién" va centrada ----------
   Solo esta sección: las tarjetas ya están centradas entre sí, así que un
   encabezado alineado a la izquierda quedaba descolgado. */
#quienes .etiqueta { justify-content: center; }

#quienes .titulo {
  margin-inline: auto;
  text-align: center;
}

#quienes .nota {
  margin-inline: auto;
  text-align: center;
  max-width: 68ch;
}

/* La nota de la agenda también centrada. El resto de la sección se queda
   alineada a la izquierda: solo se centra este cierre. */
#agenda .nota {
  margin-inline: auto;
  text-align: center;
  max-width: 62ch;
}

/* Firma del patrocinador en el pie. Va como imagen, no como texto: el
   archivo trae el logo K&C con sus degradados. */
.pie__patrocinador {
  display: block;
  height: 46px;
  width: auto;
  opacity: .82;
  transition: opacity .25s ease;
}

.pie__patrocinador:hover { opacity: 1; }

@media (max-width: 700px) {
  .pie__patrocinador { height: 34px; }
}