/* La Clave Maestra 13 — movimiento de la portada.
   Todo lo que se mueve depende de la clase .animado en <html>, que solo se pone
   si el visitante no pidio movimiento reducido. Sin ella la portada queda quieta
   y completa. Los elementos que esperan para revelarse llevan .revela, y esa
   clase solo la pone portada.js: si el script no carga, nada queda oculto. */

.telon,.progreso,.cursor-anillo,.cursor-punto,.heroe-polvo,.trece-fondo{ display: none; }

:root{ --entra: 0s; --curva: cubic-bezier(.16,1,.3,1); --curva-tela: cubic-bezier(.77,0,.18,1); }
.animado{ --entra: 2.35s; }
.animado.sin-telon{ --entra: .15s; }
.animado body{ overflow-x: clip; }

/* grano de pelicula sobre todo el sitio */
.animado body::after{
  content: ''; position: fixed; inset: -120px; z-index: 250; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grano 1.2s steps(6) infinite;
}
@keyframes grano{
  0%{ transform: translate(0,0); } 20%{ transform: translate(-40px,22px); } 40%{ transform: translate(30px,-36px); }
  60%{ transform: translate(-18px,40px); } 80%{ transform: translate(44px,12px); } 100%{ transform: translate(0,0); }
}

@keyframes trazar{ to{ stroke-dashoffset: 0; } }
@keyframes crece-x{ to{ transform: scaleX(1); } }
@keyframes aparece{ to{ opacity: 1; } }
@keyframes aparece-desenfoque{ from{ opacity: 0; filter: blur(18px); transform: scale(1.25); } to{ opacity: 1; filter: blur(0); transform: none; } }
@keyframes sube-suave{ from{ opacity: 0; transform: translateY(28px); filter: blur(6px); } to{ opacity: 1; transform: none; filter: blur(0); } }
@keyframes gira{ to{ transform: rotate(360deg); } }
@keyframes gira-inverso{ to{ transform: rotate(-360deg); } }
@keyframes brillo{ 0%{ background-position: 100% 0; } 55%,100%{ background-position: -60% 0; } }

/* --- telon de entrada ------------------------------------------------------ */
.animado .telon{
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(ellipse at center, #1a1612 0%, var(--tinta) 70%);
  animation: telon-sube 1s var(--curva-tela) 1.9s forwards;
}
.animado.sin-telon .telon{ display: none; }
@keyframes telon-sube{
  0%{ clip-path: inset(0 0 0 0); }
  100%{ clip-path: inset(0 0 100% 0); visibility: hidden; }
}
.telon-int{ display: grid; justify-items: center; gap: .9rem; color: var(--oro); animation: telon-int-sale .8s var(--curva-tela) 1.75s forwards; }
@keyframes telon-int-sale{ to{ transform: translateY(-40px); opacity: 0; } }
.telon-llave{ width: 64px; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(232,205,139,.45)); }
.telon-llave path{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.3s var(--curva) .1s forwards; }
.telon-llave path + path{ animation-delay: .45s; }
.telon-cuenta{
  font-family: var(--serif); font-size: clamp(4rem, 14vw, 7.5rem); line-height: 1; color: var(--oro-claro);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 40px rgba(232,205,139,.35);
  animation: aparece-desenfoque .9s var(--curva) both;
}
.telon-linea{ display: block; width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro), transparent); transform: scaleX(0); animation: crece-x 1.2s var(--curva) .3s forwards; }
.telon-nombre{ font-family: var(--serif); font-size: .9rem; letter-spacing: .5em; text-transform: uppercase; color: var(--marfil-tenue); padding-left: .5em; opacity: 0; animation: aparece 1s ease .6s forwards; }

/* --- barra de progreso y cursor -------------------------------------------- */
.animado .progreso{
  display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro), #fff6dc);
  transform-origin: left; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px rgba(232,205,139,.6);
}
@media (pointer: fine){
  .animado .cursor-anillo,.animado .cursor-punto{ display: block; position: fixed; left: 0; top: 0; z-index: 280; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s ease; }
  .animado .cursor-anillo{ width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(232,205,139,.65); transition: opacity .3s ease, width .35s var(--curva), height .35s var(--curva), margin .35s var(--curva), background-color .35s ease, border-color .35s ease; }
  .animado .cursor-punto{ width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--oro-claro); }
  .animado.cursor-listo .cursor-anillo,.animado.cursor-listo .cursor-punto{ opacity: 1; }
  .animado .cursor-anillo.encima{ width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(201,164,76,.1); border-color: var(--oro-claro); }
}

/* --- cabecera -------------------------------------------------------------- */
.animado .cabecera{ animation: baja .9s var(--curva) var(--entra) both; transition: background-color .4s ease, border-color .4s ease; }
.animado .cabecera-int{ transition: min-height .4s var(--curva); }
.animado .cabecera.compacta{ background: rgba(12,11,10,.8); border-bottom-color: var(--linea); }
.animado .cabecera.compacta .cabecera-int{ min-height: 56px; }
@keyframes baja{ from{ transform: translateY(-100%); opacity: 0; } to{ transform: none; opacity: 1; } }
.animado .marca-llave{ transition: transform .8s var(--curva); }
.animado .marca:hover .marca-llave{ transform: rotate(-90deg) scale(1.1); }
.animado .nav a{ position: relative; border-bottom: 0; }
.animado .nav a::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--curva);
}
.animado .nav a:hover::after,.animado .nav a.activo::after{ transform: scaleX(1); transform-origin: left; }

/* --- heroe ----------------------------------------------------------------- */
.animado .heroe{ position: relative; overflow: hidden; isolation: isolate; }
.animado .heroe::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px circle at var(--sx, 72%) var(--sy, 42%), rgba(201,164,76,.14), transparent 60%);
}
.animado .heroe-polvo{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; animation: aparece 2s ease var(--entra) forwards; }
.animado .heroe-int{ transform: translateY(var(--hy, 0px)); opacity: var(--ho, 1); }

.animado .heroe .etiqueta{ animation: sube-suave 1s var(--curva) calc(var(--entra) + .05s) both; }
.animado .heroe-numero{
  background: linear-gradient(110deg, var(--oro) 0%, var(--oro) 38%, #fff6dc 50%, var(--oro) 62%, var(--oro) 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aparece-desenfoque 1.4s var(--curva) var(--entra) both, brillo 5s ease-in-out calc(var(--entra) + 1.4s) infinite;
}

.heroe-titulo .palabra{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; white-space: nowrap; }
.heroe-titulo .letra{ display: inline-block; }
.animado .heroe-titulo .letra{
  transform: translateY(110%) rotate(8deg); opacity: 0;
  animation: letra-sube 1s var(--curva) calc(var(--entra) + .3s + var(--i) * 38ms) forwards;
}
@keyframes letra-sube{ to{ transform: none; opacity: 1; } }

.animado .heroe-lema{ animation: cortina-izq 1.3s var(--curva-tela) calc(var(--entra) + .85s) both; }
@keyframes cortina-izq{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
.animado .heroe-texto{ animation: sube-suave 1.1s var(--curva) calc(var(--entra) + 1.05s) both; }
.animado .heroe .llamadas .boton{ animation: sube-suave .9s var(--curva) both; }
.animado .heroe .llamadas .boton:nth-child(2){ animation-delay: calc(var(--entra) + 1.35s); }
.animado .heroe .llamadas .boton:nth-child(3){ animation-delay: calc(var(--entra) + 1.45s); }
.animado .heroe .llamadas .boton-oro{ animation: sube-suave .9s var(--curva) calc(var(--entra) + 1.25s) both, latido 3.2s ease-in-out calc(var(--entra) + 2.4s) infinite; }

/* figura: ondas, anillo de texto, disco, llave y ecualizador */
.heroe-figura{ display: grid; gap: 1.6rem; justify-items: end; }
.escena{ position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.animado .escena{
  animation: escena-entra 1.6s var(--curva) calc(var(--entra) + .2s) both;
}
@keyframes escena-entra{ from{ opacity: 0; transform: scale(.82) rotate(-25deg); } to{ opacity: 1; transform: none; } }

.disco{
  position: absolute; inset: 11%; border-radius: 50%;
  translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px);
  box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(201,164,76,.22), 0 0 60px rgba(201,164,76,.08);
  transition: translate .6s var(--curva);
}
.disco-surcos{
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(0,0,0,.5) 31.5% 32.5%, transparent 33%),
    repeating-radial-gradient(circle, #0d0c0b 0 1.5px, #1a1714 1.5px 3px);
  animation: gira 7.2s linear infinite;
}
.disco-etiqueta{
  position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--tinta) 0 6%, #e8cd8b 7%, #c9a44c 55%, #9c7a2f 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 0 18px rgba(0,0,0,.25);
}
.disco-etiqueta span{ font-family: var(--serif); font-size: clamp(1rem, 3vw, 1.6rem); color: #241b08; transform: translateY(-70%); }
.disco-brillo{
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(232,205,139,.2) 13%, transparent 20% 52%, rgba(232,205,139,.14) 60%, transparent 68%);
}

.heroe-figura .anillo-texto{ max-width: none; margin: 0;
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  translate: calc(var(--px, 0) * -4px) calc(var(--py, 0) * -4px);
  transition: translate .8s var(--curva);
  animation: gira-inverso 38s linear infinite;
}
.anillo-texto text{ font-family: var(--sans); font-size: 12.5px; letter-spacing: .38em; text-transform: uppercase; fill: var(--oro); opacity: .8; }

.ondas span{
  position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(232,205,139,.5);
  opacity: 0; animation: onda 4.2s ease-out calc(var(--entra) + 1.4s) infinite;
}
.ondas span:nth-child(2){ animation-delay: calc(var(--entra) + 2.8s); }
.ondas span:nth-child(3){ animation-delay: calc(var(--entra) + 4.2s); }
@keyframes onda{ 0%{ transform: scale(.6); opacity: .8; } 100%{ transform: scale(1.75); opacity: 0; } }

.heroe-figura .llave-grande{ max-width: none; margin: 0;
  position: absolute; left: 50%; top: 50%; width: 30%; height: auto; overflow: visible;
  transform: translate(-50%, -54%) translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 18px));
  transition: transform .5s var(--curva);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(232,205,139,.35));
  animation: flota 6s ease-in-out calc(var(--entra) + 2s) infinite;
}
@keyframes flota{ 0%,100%{ margin-top: 0; } 50%{ margin-top: -14px; } }
.llave-trazo path{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.8s var(--curva) calc(var(--entra) + .6s) forwards; }
.llave-trazo path + path{ animation-delay: calc(var(--entra) + 1s); }
.llave-relleno{ opacity: 0; animation: aparece 1.2s ease calc(var(--entra) + 1.7s) forwards; }

.ecualizador{
  display: flex; align-items: flex-end; justify-content: space-between; width: min(100%, 420px); height: 84px;
  border-bottom: 1px solid rgba(243,236,224,.28); padding: 0 6px;
}
.ecualizador span{
  width: 6px; height: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(to top, rgba(201,164,76,.35), var(--oro));
  transform-origin: bottom; transform: scaleY(var(--h));
  animation: eq-entra .9s var(--curva) calc(var(--entra) + 1.2s + var(--i) * 45ms) both, eq var(--d) ease-in-out calc(var(--entra) + 2.2s + var(--i) * 70ms) infinite alternate;
}
.ecualizador span:last-child{ background: linear-gradient(to top, #c9a44c, #fff1c7); box-shadow: 0 0 14px rgba(232,205,139,.6); }
@keyframes eq-entra{ from{ transform: scaleY(0); } }
@keyframes eq{ 0%{ transform: scaleY(calc(var(--h) * .25)); } 100%{ transform: scaleY(var(--h)); } }

/* --- cinta corrida --------------------------------------------------------- */
.cinta{ overflow: hidden; border-bottom: 1px solid var(--linea-tenue); padding: 1.3rem 0; background: linear-gradient(180deg, var(--tinta-alta), var(--tinta)); }
.cinta--inversa{ border-top: 1px solid var(--linea-tenue); }
.cinta-pista{ display: flex; width: max-content; align-items: center; }
.cinta-pista span{ font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; padding: 0 1.6rem; white-space: nowrap; color: var(--marfil); }
.cinta-pista span:nth-of-type(even){ color: transparent; -webkit-text-stroke: 1px var(--oro); }
.cinta-pista i{ font-style: normal; color: var(--oro); font-size: 1.1rem; }
.animado .cinta-pista{ animation: corre 42s linear infinite; }
.animado .cinta--inversa .cinta-pista{ animation-direction: reverse; animation-duration: 50s; }
.animado .cinta:hover .cinta-pista{ animation-play-state: paused; }
.animado .cinta-pista i{ display: inline-block; animation: gira 6s linear infinite; }
@keyframes corre{ to{ transform: translateX(-50%); } }

/* --- revelados al hacer scroll --------------------------------------------- */
.animado .revela{
  opacity: 0; translate: 0 44px; filter: blur(8px);
  transition: opacity 1.1s var(--curva), translate 1.1s var(--curva), filter 1.1s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.animado .revela.visto{ opacity: 1; translate: 0 0; filter: blur(0); }

.animado .seccion .etiqueta{ display: flex; align-items: center; gap: .8rem; }
.animado .seccion .etiqueta::before{
  content: ''; width: 2.2rem; height: 1px; background: var(--oro); flex: none;
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--curva) .15s;
}
.animado .seccion .etiqueta.visto::before{ transform: scaleX(1); }

/* titulos por palabra, con mascara */
.titulo-partido .palabra{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.titulo-partido .palabra > span{ display: inline-block; }
.animado .titulo-partido .palabra > span{ transform: translateY(110%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--p, 0) * 70ms); }
.animado .titulo-partido.visto .palabra > span{ transform: none; }

/* tarjetas: inclinacion 3D y luz que sigue al cursor */
.animado .tarjeta{
  position: relative; overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity 1.1s var(--curva), translate 1.1s var(--curva), filter 1.1s var(--curva), transform .5s var(--curva), border-color .4s ease, background-color .4s ease;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.animado .tarjeta::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(232,205,139,.16), transparent 45%);
}
.animado .tarjeta::after{
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--oro-claro), transparent);
  transform: scaleX(0); transition: transform .9s var(--curva) calc(var(--i, 0) * 90ms + .3s);
}
.animado .tarjeta.visto::after{ transform: scaleX(1); }
.animado .tarjeta:hover{ border-color: var(--linea); background-color: #171412; }
.animado .tarjeta:hover::before{ opacity: 1; }
.animado .tarjeta-num{ transition: transform .6s var(--curva), color .4s ease, letter-spacing .6s var(--curva); transform-origin: left; }
.animado .tarjeta:hover .tarjeta-num{ transform: translateX(6px) scale(1.08); color: var(--oro-claro); letter-spacing: .08em; }
.animado .tarjeta h3{ transition: transform .6s var(--curva); }
.animado .tarjeta:hover h3{ transform: translateX(4px); }

/* el hilo que une los tres pasos */
.animado .pasos{ position: relative; }
.animado .pasos::before{
  content: ''; position: absolute; left: 0; right: 0; top: -1.3rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), var(--oro-claro), var(--oro), transparent);
  transform: scaleX(0); transition: transform 2s var(--curva-tela);
}
.animado .pasos.visto::before{ transform: scaleX(1); }

/* --- la lista de trece: suena una pista tras otra -------------------------- */
.animado .pistas li{
  position: relative; isolation: isolate;
  transition: opacity 1s var(--curva), translate 1s var(--curva), filter 1s var(--curva), padding-left .5s var(--curva);
  transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s;
}
.animado .pistas li.revela{ translate: -36px 0; }
.animado .pistas li.revela.visto{ translate: 0 0; }
.animado .pistas li::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(201,164,76,.16), rgba(201,164,76,.03) 60%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva-tela);
}
.animado .pistas li::after{
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro)); box-shadow: 0 0 10px rgba(232,205,139,.7);
  transform: scaleX(0); transform-origin: left;
}
.animado .pistas li:hover::before,.animado .pistas li.sonando::before{ transform: scaleX(1); }
.animado .pistas li:hover,.animado .pistas li.sonando{ padding-left: 1rem; }
.animado .pistas li.sonando::after{ animation: avance 2.4s linear forwards; }
@keyframes avance{ to{ transform: scaleX(1); } }
.animado .pista-num,.animado .pista-nombre,.animado .pista-estado{ transition: color .4s ease, letter-spacing .5s var(--curva), text-shadow .4s ease; }
.animado .pistas li:hover .pista-num,.animado .pistas li.sonando .pista-num{ color: var(--oro-claro); text-shadow: 0 0 14px rgba(232,205,139,.6); }
.animado .pistas li:hover .pista-nombre,.animado .pistas li.sonando .pista-nombre{ color: var(--marfil); }
.animado .pistas li.sonando .pista-estado{ color: var(--oro-claro); letter-spacing: .24em; }

/* trece gigante de fondo, con paralaje */
.animado .seccion-trece{ position: relative; overflow: hidden; isolation: isolate; }
.animado .trece-fondo{
  display: block; position: absolute; z-index: -1; right: -4vw; top: 50%; pointer-events: none;
  font-family: var(--serif); font-size: clamp(16rem, 44vw, 38rem); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(201,164,76,.18);
  transform: translateY(calc(-50% + var(--ty, 0px))) rotate(var(--tr, 0deg));
}

/* --- botones --------------------------------------------------------------- */
.animado .boton{ position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s ease, border-color .3s ease, color .3s ease, translate .4s var(--curva), box-shadow .4s ease; }
.animado .boton::after{
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,246,220,.42), transparent); transform: skewX(-22deg);
  transition: left .8s var(--curva);
}
.animado .boton:hover::after{ left: 135%; }
.animado .boton:hover{ box-shadow: 0 10px 30px rgba(201,164,76,.18); }
.animado .boton-oro{ animation: latido 3.2s ease-in-out infinite; }
@keyframes latido{ 0%,100%{ box-shadow: 0 0 0 0 rgba(201,164,76,.45); } 60%{ box-shadow: 0 0 0 14px rgba(201,164,76,0); } }

/* --- pie ------------------------------------------------------------------- */
.animado .pie-marca{
  background: linear-gradient(110deg, var(--marfil) 0%, var(--marfil) 40%, var(--oro-claro) 50%, var(--marfil) 60%, var(--marfil) 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 6s ease-in-out infinite;
}
.animado .pie a{ transition: color .3s ease, padding-left .4s var(--curva); }
.animado .pie li a:hover{ padding-left: .4rem; }

/* --- adaptable ------------------------------------------------------------- */
@media (max-width: 900px){
  .heroe-figura{ justify-items: start; }
  .escena,.ecualizador{ width: min(100%, 340px); }
}
@media (max-width: 560px){
  .anillo-texto text{ font-size: 14px; letter-spacing: .3em; }
  .animado .trece-fondo{ right: -12vw; }
}