/* Escena exclusiva del acceso. Coordenadas independientes del formulario. */
.auth-entrada #bienvenida .carrera-marca { width: auto; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; margin: 28px 0 12px; font: italic 700 clamp(25px, 3.3vw, 40px)/1 var(--fuente-titulos); letter-spacing: -1px; color: #fff; }
.auth-entrada .carrera-marca span { color: #b7f34b; }
.auth-entrada .carrera { --zancada: .42s; margin: 18px 0 24px; }
.auth-entrada .carrera-pista { position: relative; height: 270px; overflow: hidden; isolation: isolate; border-block: 1px solid #34475c; background: radial-gradient(ellipse at 60% 80%, #b7f34b0a, transparent 65%), repeating-linear-gradient(0deg, transparent 0 88px, #7b99ba1c 89px 90px); }
.auth-entrada .carrera-pista::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0f1625, transparent 7% 93%, #0f1625); }
.auth-entrada svg.carrera-skyline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .8; }
.auth-entrada .carrera-corredor { z-index: 1; }
.auth-entrada .carrera-pista::after, .auth-entrada .carrera-meta { z-index: 2; }
.auth-entrada svg.carrera-definiciones { position: absolute; width: 0; height: 0; }
.auth-entrada svg.carrera-definiciones * { animation: none !important; }
.auth-entrada .carrera-corredor { position: absolute; left: -190px; top: 14px; width: 180px; animation: carrera-avance 8.8s linear infinite; }
.auth-entrada .carrera-corredor-dos { top: 128px; --bandana: #ff73b5; --zancada: .48s; --paso: -.13s; --premio: -2s; --sudor: -.27s; animation-duration: 10.6s; animation-delay: -5.8s; }
.auth-entrada .carrera-corredor-uno { --bandana: #ffd43b; --escala: .93; animation-delay: -2.6s; }
/* Parejas a medio ciclo: misma velocidad dentro de cada carril, sin alcances. */
.auth-entrada .carrera-corredor-tres { --bandana: #3b9dff; --escala: .89; --zancada: .45s; --paso: -.23s; --premio: -4s; --sudor: -.55s; top: 18px; animation-delay: -7s; }
.auth-entrada .carrera-corredor-cuatro { --bandana: #ff9234; --escala: .98; --zancada: .51s; --paso: -.36s; --premio: -6s; --sudor: -.82s; top: 132px; animation-duration: 10.6s; animation-delay: -11.1s; }
.auth-entrada .cerdito-bandana, .auth-entrada .cerdito-detalle { fill: var(--bandana, #dce5ef); }
.auth-entrada .carrera-corredor .carrera-nametag { border-color: var(--bandana); }
.auth-entrada .carrera-corredor .carrera-nametag svg { stroke: var(--bandana); }
.auth-entrada svg.carrera-cerdito { display: block; width: 180px; height: 123px; overflow: visible; transform: scale(var(--escala, 1)); transform-origin: 50% 80%; }
.auth-entrada .cerdito-cuerpo { animation: carrera-rebote var(--zancada) ease-in-out var(--paso, 0s) infinite; transform-origin: 115px 85px; }
.auth-entrada .cerdito-pata { transform-box: view-box; }
.auth-entrada .cerdito-pata-trasera { transform-origin: 75px 99px; animation: carrera-patada var(--zancada) ease-in-out var(--paso, 0s) infinite alternate; }
.auth-entrada .cerdito-pata-delantera { transform-origin: 128px 97px; animation: carrera-patada var(--zancada) ease-in-out calc(var(--zancada) / -1 + var(--paso, 0s)) infinite alternate-reverse; }
.auth-entrada .cerdito-pata-lejana { transform-origin: 110px 97px; animation: carrera-patada var(--zancada) ease-in-out var(--paso, 0s) infinite alternate-reverse; }
.auth-entrada .cerdito-cinta { transform-origin: 119px 49px; animation: carrera-cinta .22s ease-in-out infinite alternate; }
.auth-entrada .cerdito-sudor { animation: carrera-sudor 1.1s ease-out var(--sudor, 0s) infinite; }
.auth-entrada .carrera-nametag { position: absolute; z-index: 1; top: -4px; left: 50px; display: flex; align-items: center; gap: 5px; max-width: 125px; padding: 5px 9px; border: 1px solid #536c43; border-radius: 8px; background: #1e293b; font: 600 11px/1.2 var(--fuente-texto, sans-serif); color: #fff; white-space: nowrap; }
.auth-entrada .carrera-nombre { overflow: hidden; text-overflow: ellipsis; }
.auth-entrada .carrera-nametag svg { width: 13px; height: 13px; fill: none; stroke: #b7f34b; stroke-width: 2; }
.auth-entrada .carrera-velocidad { position: absolute; width: 34px; height: 3px; background: #b7f34b; border-radius: 3px; left: 8px; top: 53px; opacity: .5; box-shadow: -12px 12px #b7f34b70, 7px 24px #b7f34b90; animation: carrera-lineas .35s ease-out infinite; }
.auth-entrada .carrera-recompensa { position: absolute; top: 74px; left: 54px; color: #b7f34b; background: #0f1625ed; border: 1px solid #536843; border-radius: 8px; padding: 4px 7px; white-space: nowrap; font: 700 12px/1.2 var(--fuente-titulos); opacity: 0; animation: carrera-premio 8s ease-out var(--premio, 0s) infinite; }
.auth-entrada .carrera-moneda { display: inline-flex; justify-content: center; align-items: center; width: 17px; height: 17px; border: 2px solid #b7f34b; border-radius: 50%; color: #b7f34b; font: 700 10px sans-serif; margin-left: 4px; transform: rotate(-15deg); }
.auth-entrada .carrera-meta { position: absolute; bottom: 9px; right: 10px; color: #879db7; font-size: 8px; letter-spacing: 2px; }
.auth-entrada .carrera-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 10px; color: #c0cddd; text-align: left; }
.auth-entrada .carrera-pie small { display: block; margin-top: 4px; color: #98aac1; font-size: 9px; }
.auth-entrada #carrera-pausa { color: #c4d3e7; background: transparent; border: 1px solid #415570; border-radius: 8px; box-shadow: none; padding: 8px; min-height: 44px; margin: 0; font-size: 10px; }
.auth-entrada #carrera-pausa:focus-visible { outline: 3px solid #b7f34b; outline-offset: 3px; }
.auth-entrada .carrera[data-pausada="true"] *, .auth-entrada:not([data-acceso="invitado"]) .carrera * { animation-play-state: paused !important; }
@keyframes carrera-avance { from { left: -190px; } to { left: calc(100% + 10px); } }
@keyframes carrera-rebote { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes carrera-patada { from { transform: rotate(-26deg); } to { transform: rotate(24deg); } }
@keyframes carrera-cinta { from { transform: rotate(-9deg); } to { transform: rotate(10deg); } }
@keyframes carrera-sudor { 0%, 15% { opacity: 0; transform: translate(0, 3px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(-9px, -12px); } }
@keyframes carrera-lineas { from { transform: translateX(4px); opacity: .6; } to { transform: translateX(-7px); opacity: .15; } }
@keyframes carrera-premio { 0% { opacity: 0; transform: translateY(0); } 3% { opacity: 1; transform: translateY(-4px); } 16%, 18%, 100% { opacity: 0; transform: translateY(-30px); } }
@media (max-width: 760px) {
  .auth-entrada #bienvenida .carrera-marca { max-width: none; margin: 20px 0 8px; font-size: clamp(24px, 7vw, 32px); }
  .auth-entrada .carrera { margin: 12px 0 18px; }
  .auth-entrada .carrera-pista { height: 210px; background-size: auto 70px; }
  .auth-entrada svg.carrera-skyline { width: 120%; left: -10%; opacity: .72; }
  .auth-entrada .carrera-corredor { width: 140px; top: 10px; }
  .auth-entrada :is(.carrera-corredor-dos, .carrera-corredor-cuatro) { top: 99px; }
  .auth-entrada svg.carrera-cerdito { width: 140px; height: 96px; }
  .auth-entrada .carrera-nametag { font-size: 10px; left: 34px; top: -5px; padding: 4px 7px; }
  .auth-entrada .carrera-velocidad { top: 43px; width: 22px; box-shadow: -8px 12px #b7f34b70; }
  .auth-entrada .cerdito-sudor, .auth-entrada .carrera-moneda { display: none; }
  .auth-entrada .carrera-recompensa { top: 52px; left: 54px; padding: 3px 5px; font-size: 11px; }
}
/* Escena legible sin JavaScript y para quienes prefieren menos movimiento. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .auth-entrada .carrera * { animation: none !important; transition: none !important; }
  .auth-entrada :is(.carrera-corredor-uno, .carrera-corredor-dos) { left: 2%; }
  .auth-entrada :is(.carrera-corredor-tres, .carrera-corredor-cuatro) { left: calc(100% - 185px); }
  .auth-entrada .cerdito-sudor, .auth-entrada .carrera-velocidad, .auth-entrada .carrera-recompensa, .auth-entrada #carrera-pausa { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-width: 760px) and (scripting: none) {
  .auth-entrada .carrera-corredor, .auth-entrada svg.carrera-cerdito { width: 116px; }
  .auth-entrada svg.carrera-cerdito { height: 80px; }
  .auth-entrada :is(.carrera-corredor-tres, .carrera-corredor-cuatro) { left: calc(100% - 120px); }
  .auth-entrada .carrera-nametag { left: 20px; }
}