/* Portada y miniquiz del Embudo Espejo con IA. En móvil, titular y botón caben en la primera pantalla (390 × 844 y 375 × 667). */
main{width:100%;max-width:640px;margin:0 auto;padding:0 16px}

/* ── Portada ── */
.portada{padding:14px 0 0;text-align:center}
.kicker{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:13px;color:var(--gris);margin-bottom:12px}
.kicker .pildora{padding:4px 10px;border-radius:999px;background:rgba(224,70,143,.16);border:1px solid rgba(224,70,143,.45);color:#fff;font-weight:700;letter-spacing:.01em}
.kicker .sep{opacity:.6}
.p-h1{font-size:29px;line-height:1.14;letter-spacing:-.02em;font-weight:700;max-width:560px;margin:0 auto}
.p-h1 em{font-style:normal;background:var(--deg);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-sub{margin:12px auto 18px;max-width:520px;color:var(--gris);font-size:16px;line-height:1.45}
.portada .boton{max-width:420px;margin:0 auto}
.esfuerzo{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;color:var(--gris)}
.esfuerzo svg{flex:0 0 auto}

.espejo{margin:34px auto 0;max-width:520px;text-align:left;padding:16px;border:1px solid var(--linea);border-radius:var(--r);background:var(--cristal)}
.espejo-t{font-size:15.5px;line-height:1.4;color:var(--gris);margin-bottom:12px}
.espejo-t b{color:#fff}
.espejo ol{list-style:none;display:grid;gap:10px}
.espejo li{display:flex;gap:12px;align-items:flex-start}
.espejo li i{flex:0 0 28px;height:28px;border-radius:50%;background:var(--m-grad);color:#fff;font-style:normal;font-weight:700;font-size:14px;display:grid;place-items:center}
.espejo li b{display:block;font-size:15.5px;line-height:1.3}
.espejo li span{display:block;font-size:14px;line-height:1.4;color:var(--gris)}
.firma{display:flex;gap:12px;align-items:center;max-width:520px;margin:22px auto 0;text-align:left;font-size:14px;line-height:1.45;color:var(--gris)}
.firma img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px;border:2px solid rgba(224,70,143,.6)}
.firma b{color:#fff}
.honesto{max-width:520px;margin:12px auto 0;font-size:13px;color:var(--gris2)}

/* ── Preguntas ── */
.quiz{padding:8px 0 0}
.progreso{position:sticky;top:0;z-index:5;padding:8px 0 12px;background:linear-gradient(180deg,var(--fondo) 75%,rgba(12,10,17,0))}
.prog-fila{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--gris);margin-bottom:8px}
.atras{color:var(--gris);font-size:14px;padding:6px 8px 6px 0}
.atras[disabled]{visibility:hidden}
.prog-barra{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.prog-barra i{display:block;height:100%;width:25%;border-radius:999px;background:var(--deg);transition:width .3s ease}
.q-titulo{font-size:25px;line-height:1.2;letter-spacing:-.015em;margin:8px 0 16px;outline:none}
.opciones{display:grid;gap:10px}
.op{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:13px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);text-align:left;font-size:16.5px;line-height:1.35;transition:border-color .15s,background .15s,transform .1s}
.op::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.op:hover{border-color:rgba(224,70,143,.6)}
.op.elegida{border-color:var(--m);background:rgba(224,70,143,.18)}
.op.elegida::before{border-color:var(--m);background:radial-gradient(circle,var(--m) 45%,transparent 50%)}
.op:active{transform:scale(.99)}
.otro{margin-top:14px;padding:14px;border-radius:14px;border:1px solid var(--linea);background:var(--cristal)}
.otro label{display:block;font-size:15px;margin-bottom:8px}
.otro small{color:var(--gris)}
.otro-fila{display:flex;gap:8px}
.otro input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);font-size:16px}
.otro .boton{width:auto;min-height:48px;padding:12px 18px;font-size:16px}

/* ── Fin: su punto de partida y paso a su vídeo ── */
.fin{padding:60px 0 0;text-align:center}
.fin-t{font-size:14px;color:var(--gris);text-transform:uppercase;letter-spacing:.12em}
.fin-perfil{font-size:28px;line-height:1.2;font-weight:700;margin:8px 0 18px;background:var(--deg);-webkit-background-clip:text;background-clip:text;color:transparent}
.fin-carga{display:inline-flex;align-items:center;gap:10px;color:var(--gris);font-size:15px}
.gira{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--m);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.noscript{padding:20px 0;color:var(--gris)}

@media (max-width:380px){
  .p-h1{font-size:27px}
  .p-sub{font-size:15px;margin:10px auto 16px}
  .q-titulo{font-size:23px}
  .op{font-size:16px;min-height:52px;padding:12px 14px}
}
@media (min-width:760px){
  .portada{padding-top:48px}
  .p-h1{font-size:44px}
  .p-sub{font-size:18px}
  .q-titulo{font-size:30px}
  .quiz{padding-top:28px}
}