:root{
  --indigo:#4F3FD8;
  --indigo-osc:#3D2FB5;
  --indigo-suave:#EEECFC;
  --tinta:#1E1A4D;
  --papel:#fff;
  --nube:#F5F6FB;
  --linea:#E3E2F0;
  --gris:#6E6B8A;
  --verde:#7DD957;
  --bien:#2E9E55;
  --bien-fondo:#EDFBE7;
  --mal:#E5484D;
  --mal-fondo:#FDECEC;
  --amarillo:#FCE96A;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--nube); color:var(--tinta);
  font:400 17px/1.6 Poppins,system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* barra superior */
.barra{
  background:var(--papel); border-bottom:1px solid var(--linea);
  padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:5;
}
.marca{font-weight:700; letter-spacing:-.03em; font-size:24px; color:var(--indigo)}
.barra button{
  background:var(--indigo); border:0; color:#fff;
  font:600 15px Poppins,sans-serif; padding:10px 20px; border-radius:999px; cursor:pointer;
}
.barra button:hover{background:var(--indigo-osc)}

main{max-width:760px; margin:0 auto; padding:40px 24px 90px}

/* portada */
.glifos{font-size:26px; letter-spacing:10px; color:var(--verde); margin:0 0 10px; line-height:1}
h1{font-weight:700; letter-spacing:-.02em; font-size:40px; line-height:1.15; margin:0 0 10px}
.sub{color:var(--gris); margin:0 0 30px; font-size:18px}

#buscar{
  width:100%; padding:15px 20px; font:400 17px Poppins,sans-serif; color:var(--tinta);
  border:2px solid var(--linea); border-radius:999px; background:var(--papel);
}
#buscar:focus{outline:none; border-color:var(--indigo)}

.temas{margin-top:24px; display:grid; gap:10px}
.tema{
  width:100%; text-align:left; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r); padding:16px 20px; display:flex; justify-content:space-between;
  align-items:center; gap:14px; font:500 17px Poppins,sans-serif; color:var(--tinta); cursor:pointer;
}
.tema:hover{border-color:var(--indigo); transform:translateY(-1px)}
.tema:focus-visible{outline:3px solid var(--indigo-suave); border-color:var(--indigo)}
.tema .n{
  background:var(--indigo-suave); color:var(--indigo); font-weight:600; font-size:13px;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}

/* ejercicio */
.avance{color:var(--gris); font-size:15px; margin:0 0 16px; font-weight:500}
.tarjeta{
  background:var(--papel); border-radius:26px; padding:34px 32px; margin-bottom:22px;
  box-shadow:0 2px 14px rgba(30,26,77,.06);
}
.enunciado{font-size:23px; line-height:1.5; font-weight:500; margin:0}
.enunciado img{max-width:100%; height:auto; border-radius:10px}
.enunciado p:first-child{margin-top:0}
.enunciado p:last-child{margin-bottom:0}

.op{
  width:100%; text-align:left; display:flex; align-items:center; gap:16px; margin-bottom:12px;
  background:var(--papel); border:2px solid var(--linea); border-radius:var(--r); padding:14px 18px;
  font:400 17px Poppins,sans-serif; color:var(--tinta); cursor:pointer;
}
.op:hover:not(:disabled){border-color:var(--indigo)}
.op:focus-visible{outline:3px solid var(--indigo-suave)}
.op .letra{
  background:var(--indigo-suave); color:var(--indigo); font-weight:700; flex:none;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.op.bien{border-color:var(--bien); background:var(--bien-fondo)}
.op.bien .letra{background:var(--bien); color:#fff}
.op.mal{border-color:var(--mal); background:var(--mal-fondo)}
.op.mal .letra{background:var(--mal); color:#fff}
.op:disabled{cursor:default}

.aviso{margin:20px 0 0; font-weight:600; font-size:17px}
.aviso.bien{color:var(--bien)}
.aviso.mal{color:var(--mal)}

.acciones{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  font:600 17px Poppins,sans-serif; padding:14px 28px; border-radius:999px; cursor:pointer;
  background:var(--indigo); color:#fff; border:2px solid var(--indigo);
}
.btn:hover{background:var(--indigo-osc); border-color:var(--indigo-osc)}
.btn.ghost{background:var(--papel); color:var(--indigo)}
.btn.ghost:hover{background:var(--indigo-suave)}
.btn:focus-visible{outline:3px solid var(--indigo-suave)}

/* cierre */
.cierre{
  background:var(--papel); border-radius:26px; padding:38px 32px; text-align:center;
  box-shadow:0 2px 14px rgba(30,26,77,.06);
}
.cierre .marcador{
  font-size:52px; font-weight:700; color:var(--indigo); display:block; letter-spacing:-.03em; line-height:1.1;
}
.cierre p{margin:8px 0 0; color:var(--gris); font-size:17px}

.vacio{color:var(--gris); padding:26px 4px}

@media (max-width:560px){
  h1{font-size:30px}
  .enunciado{font-size:20px}
  main{padding:28px 18px 70px}
  .tarjeta{padding:26px 22px; border-radius:20px}
  .barra{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; transform:none!important}}

/* ---- portada y simulador ---- */
.opciones-inicio{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:8px}
.entrada{
  text-align:left; background:var(--papel); border:2px solid var(--linea); border-radius:26px;
  padding:28px 26px; cursor:pointer; font:inherit; color:var(--tinta);
  box-shadow:0 2px 14px rgba(30,26,77,.06);
}
.entrada:hover{border-color:var(--indigo)}
.entrada:focus-visible{outline:3px solid var(--indigo-suave)}
.entrada h2{margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-.01em}
.entrada p{margin:0; color:var(--gris); font-size:15px}
.entrada .cifra{display:block; margin-top:16px; color:var(--indigo); font-weight:700; font-size:15px}
.entrada.sim{background:var(--indigo); border-color:var(--indigo); color:#fff}
.entrada.sim p{color:rgba(255,255,255,.82)}
.entrada.sim .cifra{color:var(--amarillo)}
.entrada.sim:hover{background:var(--indigo-osc)}

.pestanas{display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap}
.pestana{
  font:600 15px Poppins,sans-serif; padding:9px 18px; border-radius:999px; cursor:pointer;
  background:var(--papel); color:var(--indigo); border:2px solid var(--linea);
}
.pestana.activa{background:var(--indigo); color:#fff; border-color:var(--indigo)}

.examen{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:18px 20px; margin-bottom:12px}
.examen-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.examen-cab h3{margin:0; font-size:19px; font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{
  font:500 14px Poppins,sans-serif; padding:7px 14px; border-radius:999px; cursor:pointer;
  background:var(--indigo-suave); color:var(--indigo); border:0;
}
.chip:hover{background:var(--indigo); color:#fff}
.chip b{font-weight:600; opacity:.7; margin-left:4px}
.btn.chico{padding:9px 18px; font-size:15px}
.tema .grupo{display:block; color:var(--gris); font-size:13px; font-weight:400}