/* ===== Ser Agente FIFA · estilos compartidos ===== */
:root{
  --navy-900:#040b1d; --navy-800:#071431; --navy-700:#0b1d45; --navy-600:#112a5e;
  --azul:#1b4892; --azul-claro:#2f6fe0; --cian:#3fd0ff; --oro:#ffcf3f; --oro-osc:#e8b100;
  --verde:#22c47a; --rojo:#ff5a6a;
  --texto:#eaf0ff; --texto-2:#a9b6d6; --texto-3:#7484ab;
  --borde:rgba(255,255,255,.10); --vidrio:rgba(255,255,255,.05);
  --radio:16px; --radio-s:10px;
  --sombra:0 20px 60px -20px rgba(0,0,0,.6);
  --f-titulo:'Bebas Neue','Impact',sans-serif; --f-texto:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);background:var(--navy-900);color:var(--texto);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px;border-radius:6px}
.contenedor{width:min(1180px,100% - 32px);margin-inline:auto}
.titulo{font-family:var(--f-titulo);font-weight:400;letter-spacing:.02em;line-height:.95;text-transform:uppercase}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cian)}
.etiqueta::before{content:"";width:22px;height:2px;background:currentColor}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.98rem;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-oro{background:var(--oro);color:#0a1430;box-shadow:0 10px 30px -8px rgba(255,207,63,.55)}
.btn-oro:hover{background:#ffd95f;box-shadow:0 14px 36px -8px rgba(255,207,63,.7)}
.btn-azul{background:var(--azul-claro);color:#fff;box-shadow:0 10px 30px -10px rgba(47,111,224,.8)}
.btn-azul:hover{background:#3d7cf0}
.btn-borde{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn-borde:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Tarjeta vidrio */
.tarjeta{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--borde);border-radius:var(--radio);backdrop-filter:blur(8px)}

/* Opciones de pregunta (landing demo + app) */
.preg-enunciado{font-size:1.06rem;font-weight:500;margin-bottom:6px}
.preg-tipo{font-size:.78rem;color:var(--texto-3);margin-bottom:16px}
.opciones{display:grid;gap:10px}
.opcion{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;padding:14px 16px;border-radius:var(--radio-s);border:1.5px solid var(--borde);background:var(--vidrio);transition:border-color .15s,background .15s;font-size:.95rem;line-height:1.45}
.opcion:hover{border-color:rgba(63,208,255,.5)}
.opcion .letra{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:rgba(255,255,255,.08)}
.opcion.sel{border-color:var(--cian);background:rgba(63,208,255,.08)}
.opcion.sel .letra{background:var(--cian);color:#04122b}
.opcion.ok{border-color:var(--verde);background:rgba(34,196,122,.12)}
.opcion.ok .letra{background:var(--verde);color:#04122b}
.opcion.ko{border-color:var(--rojo);background:rgba(255,90,106,.10)}
.opcion.ko .letra{background:var(--rojo);color:#fff}
.opcion.falta{border-style:dashed;border-color:var(--verde)}
.opciones.bloqueadas .opcion{pointer-events:none}
.explicacion{margin-top:16px;padding:14px 16px;border-radius:var(--radio-s);background:rgba(63,208,255,.07);border-left:3px solid var(--cian);font-size:.92rem;color:var(--texto-2)}
.explicacion strong{color:var(--texto)}
.veredicto{font-weight:700;margin-top:14px}
.veredicto.ok{color:var(--verde)} .veredicto.ko{color:var(--rojo)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}