/* ============================================================================
   incluye-modal.css — «Qué incluye» (slider con voz, ficha del curso) · 2026-11-01
   Tarjeta violeta con la escena de Sygma arriba, un paso a la vez (arte alegórico + texto),
   puntos con barra de progreso de 20 s y controles. Prefijo .qi-
   ========================================================================== */
.qi-fondo{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(10,4,32,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:auto}
.qi-fondo[hidden]{display:none}
.qi{position:relative;width:min(1120px,100%);max-height:calc(100vh - 28px);overflow:hidden;display:flex;flex-direction:column;border-radius:28px;color:#fff;background:linear-gradient(150deg,#1A0B4E 0%,#2E1380 48%,#4A1FB0 100%);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.55);animation:qiEntra .35s cubic-bezier(.2,.8,.2,1)}
@keyframes qiEntra{from{opacity:0;transform:translateY(16px) scale(.98)}}
.qi-x{position:absolute;top:12px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,4,32,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.qi-x:hover{background:rgba(255,255,255,.18)}
.qi-hero{position:relative;min-height:230px;padding:26px 70px 24px 38px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:linear-gradient(0deg,rgba(26,11,78,.92) 0,rgba(26,11,78,.35) 60%,rgba(26,11,78,0) 100%),var(--qi-hero) center 20%/cover no-repeat;border-radius:28px 28px 0 0}
.qi-ceja{align-self:flex-start;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#6A1FD0,#FF6A1A);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.qi-hero h2{margin:0;font-size:clamp(26px,3.8vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.qi-escena{position:relative;padding:30px 40px 10px;flex:1 1 auto;min-height:0;overflow:auto}
.qi-hero,.qi-barra,.qi-pie,.qi-aviso{flex:none}
.qi-slide{display:grid;grid-template-columns:220px minmax(0,1fr);gap:38px;align-items:start}
.qi-slide[hidden]{display:none}
.qi-slide:not([hidden]){animation:qiPaso .55s cubic-bezier(.2,.8,.2,1)}
@keyframes qiPaso{from{opacity:0;transform:translateX(26px)}}
.qi-slide.atras:not([hidden]){animation-name:qiPasoAtras}
@keyframes qiPasoAtras{from{opacity:0;transform:translateX(-26px)}}
.qi-arte{width:220px;height:220px;border-radius:46px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(255,138,0,.38),rgba(106,31,208,.55) 62%,rgba(26,11,78,.2));border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 0 40px rgba(255,255,255,.06)}
.qi-arte svg{width:150px;height:150px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.qi-arte .s2{stroke-width:2;opacity:.75}
.qi-arte .ac{stroke:#FFA347}
.qi-arte .acf{fill:#FF8A00;stroke:#FF8A00}
.qi-num{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;color:#FFA347}
.qi-num i{font-style:normal;opacity:.6}
.qi-txt h3{margin:6px 0 4px;font-size:clamp(28px,3.6vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.qi-kick{margin:0 0 14px;font-size:18px;font-weight:700;color:#C9B6FF}
.qi-cuerpo{margin:0 0 18px;font-size:19px;line-height:1.7;color:rgba(255,255,255,.94)}
.qi-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 40px 4px}
.qi-puntos{list-style:none;margin:0;padding:0;display:flex;gap:7px;flex:1;min-width:0}
.qi-puntos li{flex:1}
.qi-puntos button{display:block;width:100%;padding:8px 0;border:0;background:none;cursor:pointer}
.qi-puntos i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.qi-puntos i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#FF8A00,#FF5320);transform:scaleX(0);transform-origin:left}
.qi-puntos .hecho i::after{transform:scaleX(1)}
.qi-puntos .act i::after{transform:scaleX(var(--p,0))}
.qi-ctl{display:flex;gap:6px;flex:none}
.qi-b{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.qi-b:hover{background:rgba(255,255,255,.2)}
.qi-play{font-size:13px}
.qi-pie{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:16px 40px 30px}
.qi-ok,.qi-cta{font:inherit;font-size:15px;font-weight:800;padding:12px 26px;border-radius:14px;cursor:pointer;text-decoration:none;color:#fff}
.qi-ok{border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.qi-ok:hover{background:rgba(255,255,255,.2)}
.qi-cta{border:0;background:linear-gradient(120deg,#6A1FD0,#C42A7E 55%,#FF8A00);box-shadow:0 8px 24px rgba(196,42,126,.4)}
.qi-cta:hover{filter:brightness(1.1)}
@media (max-width:900px){.qi-slide{grid-template-columns:150px minmax(0,1fr);gap:24px}.qi-arte{width:150px;height:150px;border-radius:34px}.qi-arte svg{width:104px;height:104px}.qi-escena{padding:26px 28px 8px}.qi-barra,.qi-pie{padding-left:28px;padding-right:28px}}
@media (max-width:640px){
  .qi-hero{min-height:120px;padding:18px 56px 16px 20px}
  .qi-escena{padding:20px 20px 4px}
  .qi-slide{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .qi-arte{width:104px;height:104px;border-radius:26px}.qi-arte svg{width:72px;height:72px}
  .qi-barra{padding:12px 20px 4px;flex-direction:column;align-items:stretch}
  .qi-ctl{justify-content:center}
  .qi-pie{padding:12px 20px 22px}
}
@media (prefers-reduced-motion:reduce){.qi,.qi-slide:not([hidden]){animation:none}}

/* puntos clave: se iluminan al ritmo de la voz */
.qi-clave{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qi-clave li{position:relative;padding:14px 16px 14px 46px;border-radius:16px;font-size:16px;line-height:1.4;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);opacity:.55;transition:opacity .5s,background .5s,transform .5s,border-color .5s}
.qi-clave li::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .5s,box-shadow .5s}
.qi-clave li.on{opacity:1;background:rgba(255,138,0,.16);border-color:rgba(255,163,71,.6);transform:translateY(-2px)}
.qi-clave li.on::before{background:linear-gradient(135deg,#FFA347,#FF5320);box-shadow:0 0 14px rgba(255,138,0,.75)}
.qi-aviso{display:block;margin:6px auto 0;padding:10px 20px;border-radius:999px;border:1.5px solid #FFA347;background:rgba(255,138,0,.18);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.qi-aviso[hidden]{display:none}
@media (max-width:900px){.qi-clave{grid-template-columns:1fr}}

@media (max-height:720px){.qi-hero{min-height:120px;padding-top:16px;padding-bottom:14px}.qi-hero h2{font-size:clamp(20px,3vw,28px)}.qi-escena{padding-top:20px}.qi-pie{padding-bottom:16px;padding-top:8px}}

/* introducción: lista numerada de los componentes, sin explicaciones */
.qi-lista{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.qi-lista li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;font-size:17px;font-weight:700;line-height:1.25;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.qi-lista b{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;letter-spacing:.04em;background:linear-gradient(135deg,#FFA347,#FF5320);color:#1A0B4E}
.qi-intro .qi-kick{font-size:19px;line-height:1.5;margin-bottom:16px}
.qi-intro h3{font-size:clamp(30px,4.2vw,46px)}
@media (max-width:900px){.qi-lista{grid-template-columns:1fr}}

/* lista de la introducción: el componente que la voz nombra se ilumina; los ya leídos quedan marcados */
.qi-lista li{transition:opacity .45s,transform .45s,background .45s,border-color .45s,box-shadow .45s}
.qi-lista.vivo li{opacity:.5}
.qi-lista.vivo li.hecho{opacity:.85}
.qi-lista li.hecho b{background:rgba(255,255,255,.22);color:#fff}
.qi-lista li.hecho b::after{content:"✓";margin-left:2px;font-size:12px}
.qi-lista.vivo li.on{opacity:1;transform:translateX(6px) scale(1.03);background:linear-gradient(100deg,rgba(255,138,0,.32),rgba(196,42,126,.28));border-color:#FFA347;box-shadow:0 8px 26px rgba(255,138,0,.35)}
.qi-lista li.on b{box-shadow:0 0 18px rgba(255,138,0,.85)}
@media (prefers-reduced-motion:reduce){.qi-lista li{transition:none}.qi-lista.vivo li.on{transform:none}}