/* Carrera MVS Radio — reproducción fiel del PSD sobre un lienzo escalable.
 *
 * Cómo funciona:
 *  - Cada lienzo (.canvas) lleva de fondo el arte del PSD con los textos borrados.
 *  - Cada texto es texto real (seleccionable y editable), colocado en las
 *    coordenadas exactas medidas en el PSD.
 *  - Todas las medidas van en cqw (1cqw = 1% del ancho del lienzo), de modo que
 *    el diseño escala completo y sin deformarse a cualquier ancho de pantalla.
 *
 * Para editar un texto: cambia el contenido del <span> en index.html.
 * Para moverlo o redimensionarlo: ajusta --x, --y (posición) y --s (tamaño).
 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;font-family:"Arial Black","Arial Bold",Arial,sans-serif}

.canvas{
  position:relative;
  width:100%;
  margin:0 auto;
  container-type:inline-size;
}
.patros{container-type:inline-size}

/* Escritorio: el diseño se ajusta a la altura de la ventana para que quepa
 * completo sin scroll (el botón de inscripción siempre queda a la vista).
 *   - calc(100dvh * 4/3)  → ancho con el que el alto del lienzo = alto de ventana
 *                            (el lienzo del PSD es 1920x1440, proporción 4:3)
 *   - max(..., 1000px)    → suelo: en ventanas muy bajas deja de encoger y la
 *                            página vuelve a hacer scroll, para no perder legibilidad
 *   - min(..., 100vw, 1920px) → nunca más ancho que la ventana ni que el diseño */
/* El .marco agrupa el póster y la tira de patrocinios: ambos comparten ancho.
 * El póster se ajusta a la altura de la ventana para caber sin scroll. */
.marco{margin:0 auto}
.marco-desktop{width:min(100vw, 1920px, max(1000px, calc(100dvh * 4 / 3)))}
.marco-mobile{width:100%;max-width:1125px}

.canvas-desktop{
  aspect-ratio:1920 / 1440;
  background:url("../img/plate-desktop.webp") center/100% 100% no-repeat;
}
.canvas-mobile{
  aspect-ratio:1125 / 2956;
  background:url("../img/plate-mobile.webp") center/100% 100% no-repeat;
}

/* ---------- Tira de patrocinios y emisoras ----------
 * Carrusel continuo: el JS clona el set las veces necesarias para llenar
 * el ancho, así sirve con 3 logos o con 30. Para agregar uno nuevo basta
 * con sumar un <img> dentro de .patros-set en index.html. */
.patros{
  position:absolute;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  width:calc(var(--w) * 1cqw);
  height:calc(var(--h) * 1cqw);
  overflow:hidden;
  display:flex;
  align-items:center;
  animation:aparece .6s ease both 1.25s;
}
/* La máscara se generó del propio arte: los logos sólo se ven donde el fondo
   es realmente negro y se desvanecen al llegar a la catedral y al corredor. */
.canvas-desktop .patros{
  -webkit-mask:url("../img/mascara-patros-desktop.webp") center/100% 100% no-repeat;
          mask:url("../img/mascara-patros-desktop.webp") center/100% 100% no-repeat;
}
.canvas-mobile .patros{
  -webkit-mask:url("../img/mascara-patros-mobile.webp") center/100% 100% no-repeat;
          mask:url("../img/mascara-patros-mobile.webp") center/100% 100% no-repeat;
}
.canvas-desktop .patros img{height:70%;max-height:70%}
.canvas-mobile  .patros img{height:30%;max-height:30%}
.canvas-desktop .patros .patros-pista,
.canvas-desktop .patros .patros-set{gap:4cqw}
.canvas-mobile  .patros .patros-pista,
.canvas-mobile  .patros .patros-set{gap:10cqw}

.patros-pista{
  display:flex;
  align-items:center;
  height:100%;
  gap:6cqw;
  flex:0 0 auto;
  animation:desliza var(--dur, 24s) linear infinite;
  will-change:transform;
}
.patros-set{display:flex;align-items:center;height:100%;gap:6cqw;flex:0 0 auto}
.patros img{
  width:auto;
  object-fit:contain;
  opacity:.94;
  transition:opacity .2s ease, transform .2s ease;
}
.patros img:hover{opacity:1;transform:scale(1.06)}
.patros:hover .patros-pista{animation-play-state:paused}
@keyframes desliza{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(var(--set, 0px) * -1))}
}

.t{
  position:absolute;
  white-space:nowrap;
  line-height:1;
  font-weight:900;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  font-size:calc(var(--s) * 1cqw);
  letter-spacing:calc(var(--ls) * 1cqw);
}

/* ---------- Producto que rota (medalla y playeras) ---------- */
.slot{
  position:absolute;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  width:calc(var(--w) * 1cqw);
  height:calc(var(--h) * 1cqw);
  padding:calc(var(--w) * 0.05cqw);
}
.pz{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:scale(.94) translateY(1.2%);
  transition:opacity .85s ease, transform .85s cubic-bezier(.22,.9,.3,1);
  will-change:opacity, transform;
}
.pz.is-on{opacity:1;transform:none}

/* ---------- Corredor recorriendo la ruta del mapa ---------- */
.runner{
  position:absolute;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  width:calc(var(--d) * 1cqw);
  height:calc(var(--d) * 1cqw);
  margin-left:calc(var(--d) * -0.5cqw);
  margin-top:calc(var(--d) * -0.5cqw);
  border-radius:50%;
  background:#fff;
  box-shadow:
     0 0 0 calc(var(--d) * .22cqw) #f2831e,
     0 0 calc(var(--d) * 1.4cqw) calc(var(--d) * .2cqw) rgba(242,131,30,.85);
  animation-duration:7s;
  animation-delay:1.5s;
  animation-timing-function:cubic-bezier(.45,0,.55,1);
  animation-iteration-count:infinite;
  pointer-events:none;
}
@keyframes runX{
  0%   {transform:translateX(0);              opacity:0}
  8%   {opacity:1}
  92%  {opacity:1}
  100% {transform:translateX(calc(var(--len) * 1cqw)); opacity:0}
}
@keyframes runY{
  0%   {transform:translateY(calc(var(--len) * 1cqw)); opacity:0}
  8%   {opacity:1}
  92%  {opacity:1}
  100% {transform:translateY(0);              opacity:0}
}

/* ---------- Zonas clicables sobre el arte ----------
   Bloques del póster (5K, 10K, categorías, kit, mapa, fecha…) que llevan al
   registro. Son transparentes y se iluminan apenas al pasar el mouse. */
.hot{
  position:absolute;
  display:block;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  width:calc(var(--w) * 1cqw);
  height:calc(var(--h) * 1cqw);
  border-radius:.35cqw;
  transition:background-color .18s ease, box-shadow .18s ease;
}
.hot:hover{
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 .12cqw rgba(242,131,30,.55);
}

/* ---------- Botón de inscripción ----------
   Área clicable sobre el botón dibujado en el arte, con un latido suave
   para atraer la mirada sin competir con el diseño. */
.cta{
  position:absolute;
  display:block;
  left:calc(var(--x) * 1cqw);
  top:calc(var(--y) * 1cqw);
  width:calc(var(--w) * 1cqw);
  height:calc(var(--h) * 1cqw);
  border-radius:.4cqw;
  animation:apareceCta .5s ease both 1.02s, ctaLatido 3.2s ease-in-out 1.7s infinite;
  transition:background-color .18s ease, transform .18s ease;
}
@keyframes apareceCta{from{opacity:0}to{opacity:1}}
@keyframes ctaLatido{
  0%,100%{box-shadow:0 0 0 0 rgba(242,131,30,0)}
  50%    {box-shadow:0 0 0 .45cqw rgba(242,131,30,.38)}
}
.cta:hover,.cta:focus-visible{
  background:rgba(255,255,255,.16);
  transform:scale(1.015);
  animation-play-state:paused;
}
.cta:focus-visible{outline:3px solid #f2831e;outline-offset:3px}

/* ---------- Entrada escalonada al cargar ----------
   El arte de fondo aparece primero y luego cada bloque de contenido entra
   en orden de lectura (--d = retardo en segundos, puesto en cada elemento). */
.canvas{animation:aparece .45s ease-out both}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.t{
  animation:entra .5s cubic-bezier(.2,.85,.3,1) both;
  animation-delay:calc(var(--d, 0) * 1s);
}
.t.slide{animation-name:entraSlide}
.t.pop{animation-name:entraPop;animation-duration:.6s}

@keyframes entra{
  from{opacity:0;transform:translateY(1.1cqw)}
  to  {opacity:1;transform:none}
}
@keyframes entraSlide{
  from{opacity:0;transform:translateX(-1.6cqw)}
  to  {opacity:1;transform:none}
}
@keyframes entraPop{
  0%  {opacity:0;transform:scale(.84)}
  62% {opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:none}
}

.slot{animation:entraZoom .75s cubic-bezier(.2,.85,.3,1) both;animation-delay:.55s}
@keyframes entraZoom{
  from{opacity:0;transform:scale(.9)}
  to  {opacity:1;transform:none}
}

/* Cambio de versión: móvil por debajo de 900px, escritorio a partir de 900px */
.marco-mobile{display:none}
@media (max-width:899px){
  .marco-desktop{display:none}
  .marco-mobile{display:block}
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .canvas,.pz,.runner,.cta,.t,.slot{animation:none!important;transition:none!important}
  .t,.slot{opacity:1;transform:none}
  .pz{opacity:0;transform:none}
  .pz.is-on{opacity:1}
  .runner{display:none}
  .patros-pista{animation:none!important;flex-wrap:wrap;justify-content:center;width:100%}
}

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