/* ============================================================
   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;
}

/* El hero va partido en dos: la marca a la izquierda, el album a la derecha.
   Debajo de 860px se apila y vuelve a quedar centrado, como estaba antes. */
.hero__centro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: 140px clamp(20px, 5vw, 64px) 40px;
  max-width: var(--ancho);
  margin-inline: auto;
  width: 100%;
}

.hero__logo {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 40px #00000080);
}

.hero__lema {
  margin: 26px 0 0;
  max-width: 460px;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  color: var(--texto);
}

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

/* ---------- El album, a la derecha ---------- */

.hero__album-titulo {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--texto);
  text-wrap: balance;
}

.hero__album-titulo span { color: var(--oro-claro); }

/* Abanico y boton comparten eje: el bloque mide lo que mide el abanico
   y el boton se centra debajo de el. */
.hero__muestra {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Aviso pequeno bajo el boton: las fotos de la primera noche. Las muestras
   son retratos de cuerpo entero; el recorte cuadrado se sube hacia la cara. */
.noche {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 7px 16px 7px 7px;
  border-radius: 16px;
  border: 1px solid var(--borde);
  background: #05040480;
  backdrop-filter: blur(6px);
  color: var(--texto);
  text-decoration: none;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease;
}

.noche:hover { border-color: var(--oro-oscuro); background: #050404b3; }

.noche__fotos { display: flex; gap: 4px; flex: none; }

.noche__fotos img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

.noche__texto {
  font-size: 12.5px;
  line-height: 1.35;
  max-width: 190px;
}

.noche__texto strong { display: block; color: var(--oro-claro); font-weight: 700; }

/* Las tiras de muestra, abiertas como un abanico de cartas. El ancho se
   limita tambien por la altura de la pantalla: cada tira mide tres veces
   su ancho y en un portatil bajo empujaria el boton fuera de la vista. */
.tiras {
  --ancho-tira: clamp(70px, min(8.5vw, 12.5vh), 120px);
  display: flex;
  margin-top: 30px;
  padding-top: 12px;
}

.tira {
  width: var(--ancho-tira);
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid #ffffff26;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  transform-origin: 50% 100%;
  transition: transform .3s ease;
}

.tira + .tira { margin-left: calc(var(--ancho-tira) * -.28); }

.tira:nth-child(1) { transform: rotate(-11deg) translateY(10px); }
.tira:nth-child(2) { transform: rotate(-3.5deg); }
.tira:nth-child(3) { transform: rotate(3.5deg); }
.tira:nth-child(4) { transform: rotate(11deg) translateY(10px); }

.tiras:hover .tira:nth-child(1) { transform: rotate(-15deg) translate(-8px, 10px); }
.tiras:hover .tira:nth-child(2) { transform: rotate(-5deg) translateY(-6px); }
.tiras:hover .tira:nth-child(3) { transform: rotate(5deg) translateY(-6px); }
.tiras:hover .tira:nth-child(4) { transform: rotate(15deg) translate(8px, 10px); }

/* Mas grande que el boton de la barra: aqui es lo unico que se toca.
   Las mayusculas las pone el CSS y no van escritas en el HTML, para que
   un lector de pantalla lea la palabra en vez de deletrearla. */
.hero__descargar {
  margin-top: 30px;
  padding: 16px 34px;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* 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; }
  /* Apilado: la marca arriba, el album abajo, todo centrado. */
  .hero__centro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-top: 118px;
    gap: 34px;
  }
  .hero__logo { max-width: min(90%, 560px); margin-inline: auto; }
  .hero__lema { margin-inline: auto; }
  .hero__descargar { padding: 15px 30px; font-size: 14px; }
  .tiras { justify-content: center; --ancho-tira: clamp(64px, 19vw, 110px); }

  .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; }
}