/* ESCUDERIA — hoja unica. Movil primero: casi todos los pilotos entran del telefono. */
:root{
  --fondo:#0b0d10; --panel:#141920; --panel2:#1b212b; --linea:#252d39;
  --rojo:#e8340c; --ambar:#ffc400; --verde:#22c55e;
  --texto:#f2f4f7; --tenue:#9aa4b2;
  --radio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:Anton,Impact,system-ui,sans-serif; font-weight:400;
  letter-spacing:.01em; line-height:1.02; text-transform:uppercase; margin:0 0 .4em}
h1{font-size:clamp(34px,8.5vw,68px)}
h2{font-size:clamp(24px,5.5vw,40px)}
h3{font-size:clamp(18px,4vw,24px)}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.angosto{max-width:620px}

/* Barra de cuadros, la del banderazo */
.cuadros{height:10px;background:
  repeating-conic-gradient(#fff 0 25%, #0b0d10 0 50%) 0 0/20px 20px}

header.top{position:sticky;top:0;z-index:30;background:rgba(11,13,16,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.marca{font-family:Anton,Impact,sans-serif;font-size:22px;text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;display:flex;align-items:center;gap:8px}
.marca i{width:10px;height:22px;background:var(--rojo);display:inline-block;
  transform:skewX(-14deg);border-radius:2px}
header.top nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--rojo);color:#fff;border:0;border-radius:999px;
  padding:14px 22px;font:600 16px/1 Inter,sans-serif;cursor:pointer;
  text-decoration:none;transition:transform .08s ease,filter .15s ease}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(1px)}
.btn.fantasma{background:transparent;border:1px solid var(--linea);color:var(--texto)}
.btn.claro{background:#fff;color:#0b0d10}
.btn.ancho{width:100%;padding:17px 22px;font-size:17px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.chico{padding:9px 15px;font-size:14px}

.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:22px}
.tenue{color:var(--tenue)}
.centro{text-align:center}
.pill{display:inline-block;background:var(--panel2);border:1px solid var(--linea);
  border-radius:999px;padding:6px 14px;font-size:13px;color:var(--tenue)}
.pill.viva{border-color:var(--rojo);color:#ffb3a3}

section{padding:60px 0}
.rejilla{display:grid;gap:16px}
@media(min-width:760px){ .rejilla.tres{grid-template-columns:repeat(3,1fr)}
  .rejilla.dos{grid-template-columns:repeat(2,1fr)} }

/* Formularios */
label{display:block;font-size:14px;color:var(--tenue);margin:14px 0 6px;font-weight:500}
input,select,textarea{width:100%;background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea);border-radius:10px;padding:14px;font:16px Inter,sans-serif}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rojo);outline-offset:1px}
textarea{min-height:90px;resize:vertical}
.aviso{border-radius:10px;padding:12px 14px;font-size:14px;margin-top:14px}
.aviso.mal{background:#2a1110;border:1px solid #7f1d1d;color:#fca5a5}
.aviso.bien{background:#0f2418;border:1px solid #166534;color:#86efac}

/* Numeros grandes */
.cifra{font-family:Anton,Impact,sans-serif;font-size:clamp(30px,7vw,48px);line-height:1}
.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.kpi .et{font-size:13px;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
th{color:var(--tenue);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.desliza{overflow-x:auto}

footer{border-top:1px solid var(--linea);padding:30px 0;color:var(--tenue);font-size:14px}
