/* ==========================================================
   Diseño "Veloz" · Infantil (carrera supersónica, motivos genéricos)
   mantener para cargar → estallido de velocidad → anillos = edad → frenazo → montaje
   ========================================================== */

/* Fuente display (OFL) auto-alojada */
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin.woff2) format("woff2");
  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: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --azul: #1e5bd8;
  --azul-osc: #0e2f7a;
  --azul-claro: #6fa8ff;
  --oro: #ffcc00;
  --oro-osc: #b38600;
  --rojo: #e2231a;
  --pasto: #3cb371;
  --pasto-osc: #2e9a5e;
  --veloz: "Bungee", "Fredoka", system-ui, sans-serif;

  --img-nubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140'%3E%3Cg fill='%23fff' opacity='.92'%3E%3Cellipse cx='70' cy='46' rx='38' ry='14'/%3E%3Cellipse cx='96' cy='36' rx='24' ry='15'/%3E%3Cellipse cx='290' cy='96' rx='44' ry='13'/%3E%3Cellipse cx='318' cy='86' rx='22' ry='13'/%3E%3C/g%3E%3C/svg%3E");
  --img-montes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V82l52-40 40 28 58-50 60 56 50-30 60 40 40-30 40 26v38z' fill='%2387b2f5'/%3E%3Cpath d='M150 20l18 17-10-2-8 8-8-8-10 2z' fill='%23fff' opacity='.85'/%3E%3C/svg%3E");
  --img-colinas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62Q40 22 80 50T160 46T240 54T320 62v38z' fill='%2357c785'/%3E%3C/svg%3E");

  --s-fondo: var(--azul);
  --s-tinta: #ffffff;
  --s-suave: rgba(255, 255, 255, .82);
  --s-acento: var(--oro);
  --s-acento-tinta: var(--azul-osc);
  --s-tarjeta: rgba(255, 255, 255, .11);
  --s-borde: rgba(255, 255, 255, .22);
  --s-radio: 6px;
  --s-sombra: none;
  --s-fuente: "Fredoka", system-ui, sans-serif;
  --s-titulo: var(--veloz);
  --s-titulo-tam: clamp(1.55rem, 7.4vw, 2.2rem);
  --s-etiqueta: var(--veloz);
  --s-num: var(--veloz);
  --s-num-color: var(--oro);
  --s-btn-linea-color: #ffffff;
}

body {
  background:
    repeating-linear-gradient(-14deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, var(--azul), #1748b4 60%, var(--azul-osc));
  background-attachment: fixed;
  color: #fff;
  font-family: var(--s-fuente);
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================
   INTRO · pista
   ========================================================== */
.pista {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: linear-gradient(180deg, #3f86f5, #8cc4ff 62%, #c8e6ff 76%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .7s ease;
}
.pista.sacudida { animation: sacudir .45s ease; }
.pista.fuera { opacity: 0; pointer-events: none; }
.pista::after {                       /* destello blanco del frenazo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.pista.destello::after { animation: destello .6s ease-out; }
@keyframes destello { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
@keyframes sacudir {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 2px); }
}

.fondo { position: absolute; inset: 0; }
.fondo.borroso { filter: url(#desenfoqueX); }
.capa { position: absolute; left: 0; right: 0; background-repeat: repeat-x; will-change: background-position; }
.capa--nubes { top: 6%; height: 34%; background-image: var(--img-nubes); background-size: 420px 140px; }
.capa--montes { bottom: 30%; height: 26%; background-image: var(--img-montes); background-size: 400px 100%; background-position-y: bottom; }
.capa--colinas { bottom: 22%; height: 18%; background-image: var(--img-colinas); background-size: 320px 100%; background-position-y: bottom; }
.capa--pasto {
  bottom: 0;
  height: 24%;
  /* una sola imagen (franjas de pasto podado) para que el JS la desplace; el borde claro va en sombra */
  /* periodo horizontal = 100px (90.6px · sen 115°) → el mosaico de 1000px empalma sin costura */
  background-image: repeating-linear-gradient(115deg, var(--pasto) 0 45.3px, var(--pasto-osc) 45.3px 90.6px);
  background-size: 1000px 100%;
  box-shadow: inset 0 5px 0 #7fe0a5, inset 0 9px 0 rgba(14, 47, 122, .12);
}
.pista__lienzo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }

.marcador {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(14, 47, 122, .78);
  color: #fff;
  font-family: var(--veloz);
  font-size: .72rem;
  transform: skewX(-10deg);
  box-shadow: 0 0 0 3px var(--oro);
}
.marcador__anillo { width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--oro); box-shadow: inset 0 0 0 1px var(--oro-osc), 0 0 0 1px var(--oro-osc); }
.marcador__num { min-width: 1.4em; font-weight: 400; font-size: 1.3rem; color: var(--oro); text-align: right; }
.marcador__num.suma { animation: suma .35s ease; }
.marcador small { font-size: .8rem; opacity: .85; }
@keyframes suma { from { transform: scale(1.8); color: #fff; } }

.arranque {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + max(28px, 6svh));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  text-align: center;
  transition: transform .6s cubic-bezier(.6, 0, .3, 1), opacity .5s ease;
}
.pista.carrera .arranque { transform: translateY(130%); opacity: 0; pointer-events: none; }
.arranque__t {
  margin: 0;
  font-family: var(--veloz);
  font-weight: 400;
  font-size: clamp(1.2rem, 6vw, 1.8rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 0 var(--azul-osc), 0 6px 12px rgba(0, 0, 0, .3);
  transform: skewX(-8deg);
}
.arranque__msg {
  min-height: 1.4em;
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(14, 47, 122, .72);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
}
.arranque__msg.alerta { background: var(--rojo); animation: sacudir .4s ease; }
.arranque__msg.lista { background: var(--oro); color: var(--azul-osc); animation: late .5s ease-in-out infinite alternate; }
@keyframes late { to { transform: scale(1.1); } }

.cargador {
  all: unset;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 24px;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.cargador:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.cargador__rueda {
  --carga: 0;
  position: relative;
  width: clamp(118px, 34vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 47, 122, .85) 0 62%, rgba(14, 47, 122, .5) 63%);
  box-shadow: 0 10px 24px rgba(14, 47, 122, .45), 0 0 calc(var(--carga) * 46px) calc(var(--carga) * 10px) rgba(111, 168, 255, .9);
  transition: transform .15s ease;
}
.cargador.cargando .cargador__rueda { transform: scale(.95); }
.cargador__medidor { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cargador__pista { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 10; }
.cargador__arco { fill: none; stroke: var(--oro); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.cargador.lleno .cargador__arco { stroke: #fff; }
.disco {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 4px solid var(--azul-osc);
  background:
    radial-gradient(circle, #ffffff 0 12%, var(--azul-claro) 13% 18%, transparent 19%),
    conic-gradient(from 0deg, var(--azul) 0 14%, #ffffff 20%, var(--azul) 26% 47%, var(--azul-claro) 53%, var(--azul) 59% 80%, #ffffff 86%, var(--azul) 92%);
  will-change: transform;
}
.cargador__txt {
  padding: 8px 22px;
  border-radius: 8px;
  background: var(--oro);
  color: var(--azul-osc);
  font-family: var(--veloz);
  font-size: .9rem;
  transform: skewX(-10deg);
  box-shadow: 0 5px 0 var(--oro-osc);
}

.grito {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 6;
  margin: 0;
  font-family: var(--veloz);
  font-size: clamp(2.4rem, 14vw, 5rem);
  color: var(--oro);
  text-shadow: 0 5px 0 var(--rojo), 0 10px 0 var(--azul-osc), 0 16px 26px rgba(0, 0, 0, .3);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) skewX(-10deg);
  pointer-events: none;
}
.grito.ver { animation: grito 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes grito {
  0% { opacity: 0; transform: translate(-50%, -50%) skewX(-10deg) scale(.3); }
  25% { opacity: 1; transform: translate(-50%, -50%) skewX(-10deg) scale(1.1); }
  75% { opacity: 1; transform: translate(-50%, -50%) skewX(-10deg) scale(1); }
  100% { opacity: 0; transform: translate(-70%, -50%) skewX(-24deg) scale(1); }
}

/* ==========================================================
   HERO · marco de rayo
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 34px) 16px calc(env(safe-area-inset-bottom) + 100px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .28), transparent 46%),
    repeating-conic-gradient(from -4deg at 50% 36%, var(--azul) 0 7deg, #2a6ae8 7deg 14deg);
}
.hero__lineas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__lineas i {
  position: absolute;
  right: -40%;
  height: 4px;
  width: 38%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  animation: linea-cruza 1.4s linear infinite;
}
.hero__lineas i:nth-child(1) { top: 12%; animation-delay: -.2s; }
.hero__lineas i:nth-child(2) { top: 27%; width: 24%; animation-delay: -.9s; animation-duration: 1.1s; }
.hero__lineas i:nth-child(3) { top: 44%; animation-delay: -.5s; animation-duration: 1.7s; }
.hero__lineas i:nth-child(4) { top: 61%; width: 30%; animation-delay: -1.2s; }
.hero__lineas i:nth-child(5) { top: 73%; width: 20%; animation-delay: -.3s; animation-duration: 1s; }
.hero__lineas i:nth-child(6) { top: 86%; animation-delay: -.7s; animation-duration: 1.5s; }
@keyframes linea-cruza { to { transform: translateX(-380%); } }
.hero__pasto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background:
    linear-gradient(180deg, #7fe0a5 0 5px, transparent 5px),
    repeating-linear-gradient(115deg, var(--pasto) 0 40px, var(--pasto-osc) 40px 80px);
}
.hero .desliza-c { z-index: 3; color: #fff; font-family: var(--veloz); font-weight: 400; letter-spacing: .12em; }

.hero__eyebrow, .hero__escenario, .titulo-veloz, .hero__fecha { position: relative; z-index: 2; }
.hero__eyebrow {
  margin: 0 0 14px;
  padding: 6px 16px;
  background: var(--azul-osc);
  color: var(--oro);
  font-family: var(--veloz);
  font-size: .72rem;
  letter-spacing: .06em;
  transform: skewX(-12deg);
  box-shadow: 4px 4px 0 var(--rojo);
}
.hero__escenario { filter: drop-shadow(0 18px 22px rgba(14, 47, 122, .55)); }
.marco-rayo, .marco-rayo__borde, .marco-rayo__foto {
  clip-path: polygon(7% 0, 100% 0, 96% 17%, 100% 21%, 95% 49%, 100% 53%, 93% 100%, 0 100%, 4% 83%, 0 79%, 5% 51%, 0 47%);
}
.marco-rayo {
  width: min(70vw, 320px, 43svh);
  aspect-ratio: 9 / 11;
  padding: 11px;
  background: linear-gradient(135deg, var(--oro) 0 64%, var(--rojo) 64% 74%, var(--oro) 74%);
}
.marco-rayo__borde { height: 100%; padding: 6px; background: #fff; }
.marco-rayo__foto { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--azul-claro); }
.rayo { position: absolute; z-index: 3; height: auto; animation: chispazo 2.4s steps(1, end) infinite; }
.rayo--1 { top: -30px; right: -22px; width: 62px; rotate: 14deg; }
.rayo--2 { bottom: 10%; left: -30px; width: 48px; rotate: 196deg; animation-delay: -1.2s; }
@keyframes chispazo { 0%, 80%, 88%, 100% { opacity: 1; } 84%, 92% { opacity: .2; } }
.anillo-deco {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 7px solid var(--oro);
  box-shadow: inset 0 0 0 1.5px var(--oro-osc), 0 0 0 1.5px var(--oro-osc), 0 0 14px rgba(255, 204, 0, .7);
  animation: anillo-gira 1.6s linear infinite;
}
.anillo-deco--1 { top: 14%; left: -26px; }
.anillo-deco--2 { top: -16px; left: 36%; width: 28px; height: 28px; border-width: 6px; animation-delay: -.5s; }
.anillo-deco--3 { bottom: -14px; right: 22%; animation-delay: -1s; }
@keyframes anillo-gira { 0% { transform: scaleX(1); } 50% { transform: scaleX(.18); } 100% { transform: scaleX(1); } }

/* Personaje opcional (PNG del cliente) */
.personaje {
  position: absolute;
  right: -16%;
  bottom: -4%;
  z-index: 4;
  width: 48%;
  max-width: 200px;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

.titulo-veloz {
  margin: 22px 0 0;
  max-width: 100%;
  font-family: var(--veloz);
  font-weight: 400;
  font-size: clamp(1.7rem, 8.6vw, 2.8rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  color: var(--oro);
  text-shadow: 0 4px 0 var(--rojo), 0 8px 0 var(--azul-osc), 0 14px 18px rgba(0, 0, 0, .3);
  transform: skewX(-8deg);
}
.titulo-veloz__nombre { display: block; font-size: 1.45em; color: #fff; }
.titulo-veloz b { display: inline-block; padding: 0 .2em; font-weight: 400; color: #fff; background: var(--rojo); border-radius: 6px; text-shadow: 0 3px 0 var(--azul-osc); }
.hero__fecha {
  margin: 18px 0 0;
  padding: 8px 18px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--veloz);
  font-size: .78rem;
  letter-spacing: .04em;
  transform: skewX(-12deg);
  box-shadow: 4px 4px 0 var(--azul-osc);
}

/* Entrada del hero */
.hero__eyebrow, .hero__escenario, .titulo-veloz, .hero__fecha { opacity: 0; }
.hero.listo .hero__eyebrow { animation: entra-izq .5s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.hero.listo .hero__escenario { animation: zoom-rayo .8s cubic-bezier(.2, 1.4, .4, 1) .1s forwards; }
.hero.listo .titulo-veloz { animation: entra-izq .6s cubic-bezier(.2, 1.3, .4, 1) .5s forwards; }
.hero.listo .hero__fecha { animation: entra-der .6s cubic-bezier(.2, 1.3, .4, 1) .75s forwards; }
.hero.listo .personaje { animation: personaje-llega .9s cubic-bezier(.2, 1, .3, 1) 1s forwards; }
@keyframes entra-izq { from { opacity: 0; translate: -120vw 0; } to { opacity: 1; translate: 0 0; } }
@keyframes entra-der { from { opacity: 0; translate: 120vw 0; } to { opacity: 1; translate: 0 0; } }
@keyframes zoom-rayo { from { opacity: 0; transform: scale(.2) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes personaje-llega {
  0% { opacity: 1; transform: translateX(120vw) skewX(-24deg); }
  70% { opacity: 1; transform: translateX(-8%) skewX(10deg); }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================
   Secciones
   ========================================================== */
.corredor-sec { padding-top: 84px; }
.ficha-corredor {
  width: min(100%, 360px);
  padding: 0 0 18px;
  background: #fff;
  color: var(--azul-osc);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.ficha-corredor__t {
  margin: 0;
  padding: 14px 10px 12px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--veloz);
  font-size: .9rem;
  letter-spacing: .04em;
}
.ficha-corredor__datos { margin: 0; padding: 14px 36px 0; display: grid; gap: 8px; text-align: left; }
.ficha-corredor__datos div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 3px solid rgba(30, 91, 216, .15); }
.ficha-corredor__datos dt { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: #5672a8; }
.ficha-corredor__datos dd { margin: 0; font-family: var(--veloz); color: var(--azul); }
.corredor__mensaje { margin: 26px 0 0; max-width: 22em; font-size: 1.1rem; line-height: 1.6; }

.s-titulo { color: #fff; text-shadow: 0 4px 0 var(--rojo); transform: skewX(-8deg); }
.s-titulo.aparece.visible { transform: skewX(-8deg); }
.s-cuenta__caja { border: 0; border-radius: 0; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.s-cuenta__lbl { font-family: "Fredoka", sans-serif; font-weight: 600; }
.s-cuenta__fin { color: var(--oro); }
.s-evento { border: 0; border-radius: 0; padding: 26px 34px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.s-evento__icono { border: 0; background: var(--oro); color: var(--azul-osc); }
.s-evento__titulo { font-weight: 400; letter-spacing: .06em; }
.s-evento__hora { color: var(--oro); }
.s-vestimenta__tipo { font-family: var(--veloz); font-size: 1.15rem; color: var(--oro); }
.s-paleta li { border-color: rgba(255, 255, 255, .4); }
.s-rsvp__saludo { font-family: var(--veloz); font-size: 1rem; color: var(--oro); }

.s-btn { border-radius: 6px; font-weight: 400; letter-spacing: .04em; transform: skewX(-10deg); }
.s-btn:active { transform: skewX(-10deg) scale(.96); }
.s-btn--linea, .s-btn--mini { border-width: 2px; }
.s-btn--lleno { background: var(--oro); color: var(--azul-osc); box-shadow: 0 6px 0 var(--oro-osc), 0 14px 20px rgba(0, 0, 0, .3); }
.s-btn--lleno:active { transform: skewX(-10deg) translateY(4px); box-shadow: 0 2px 0 var(--oro-osc); }
.s-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.rsvp-foto {
  width: min(58%, 220px);
  margin: 36px auto -34px;
  padding: 8px;
  background: var(--oro);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  transform: rotate(-3deg);
}
.rsvp-foto.aparece.visible { transform: rotate(-3deg); }
.rsvp-foto img { display: block; width: 100%; aspect-ratio: 9 / 11; object-fit: cover; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }

.s-pie { margin-top: 30px; background: var(--azul-osc); box-shadow: inset 0 6px 0 var(--oro); }
.s-pie__n { font-family: var(--veloz); color: var(--oro); font-size: 2rem; }
.s-pie__marca { text-decoration-color: var(--oro); }

.btn-musica { background: var(--azul-osc); color: var(--oro); border: 2px solid var(--oro); }

@media (max-height: 600px) {
  .arranque__t { display: none; }
  .cargador__rueda { width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lineas i, .rayo, .anillo-deco, .arranque__msg.lista { animation: none !important; }
  .pista.sacudida { animation: none; }
  .fondo.borroso { filter: none; }
  .hero.listo .hero__eyebrow, .hero.listo .hero__escenario, .hero.listo .titulo-veloz,
  .hero.listo .hero__fecha, .hero.listo .personaje { animation: aparece-suave .4s ease forwards; }
  @keyframes aparece-suave { from { opacity: 0; } to { opacity: 1; transform: none; translate: none; } }
}