/* Futsal Atlas · landing «Próximamente». Base C petróleo + motivo A · PISTA.
   Sin dependencias externas: fuente local (Space Grotesk, OFL) y fuentes del sistema.
   Compatible con CSP default-src 'self' (sin style ni script en línea). */
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --pista:#0F4C63; --pista-2:#165B75; --pista-top:#0A3242;
  --pista-line:rgba(255,255,255,.16); --on-pista:#FFFFFF; --on-pista-dim:#BFDAE4;
  --bg:#ECEFF4; --text:#14161C; --dim:#4F5563; --accent:#0B6584;
  --display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --campo:min(88vw,560px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#071F29; --text:#E8F1F5; --dim:#A9C3CE; --pista:#0C3F53; --pista-line:rgba(255,255,255,.13)}
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--body)}

/* La pista: el campo de fútbol sala dibujado con líneas, como la banda A · PISTA */
.pista{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.2vh,32px);padding:clamp(40px,8vh,96px) 24px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,var(--pista-2) 0%,var(--pista) 55%,var(--pista-top) 100%);color:var(--on-pista)}
.pista::before{content:"";position:absolute;inset:clamp(12px,3vw,28px);pointer-events:none;border:2px solid var(--pista-line);border-radius:14px;
  background:
    radial-gradient(circle at 50% 50%,transparent calc(var(--campo)*.22),var(--pista-line) calc(var(--campo)*.22),var(--pista-line) calc(var(--campo)*.22 + 2px),transparent calc(var(--campo)*.22 + 2px)),
    linear-gradient(180deg,transparent calc(50% - 1px),var(--pista-line) calc(50% - 1px),var(--pista-line) calc(50% + 1px),transparent calc(50% + 1px))}
.pista > *{position:relative}

.marca{display:flex;flex-direction:column;align-items:center;gap:10px}
.icono{width:clamp(64px,12vw,96px);height:auto;color:var(--on-pista)}
.icono .trayectoria{stroke:var(--on-pista-dim)}
.icono .balon{fill:var(--on-pista-dim)}
.nombre{margin:0;font:700 clamp(15px,2.2vw,18px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--on-pista-dim)}

.mensaje{margin:0;max-width:16ch;font:700 clamp(32px,7.2vw,68px)/1.06 var(--display);letter-spacing:-.02em;color:var(--on-pista);text-wrap:balance}

.pronto{margin:0}
.pronto span{display:inline-block;padding:10px 20px;border:2px solid var(--on-pista);border-radius:999px;
  font:700 clamp(14px,2vw,16px)/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--on-pista)}

.pie{padding:16px 24px;text-align:center;font-size:14px;color:var(--dim)}
.pie p{margin:0}

/* Pantallas bajas (móvil apaisado, plegables abiertos en horizontal): todo cabe sin desplazar */
@media (max-height:520px) and (orientation:landscape){
  .pista{gap:12px;padding:28px 24px}
  .marca{flex-direction:row;gap:12px}
  .icono{width:44px}
  .mensaje{max-width:24ch;font-size:clamp(24px,5vw,40px)}
  .pie{padding:10px 24px}
}

/* Movimiento: el balón recorre la trayectoria; nada se mueve con reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .icono .trayectoria{animation:pase 2.8s ease-in-out infinite}
  @keyframes pase{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
}