/* Inicio redesign (2026-10, phase 1): mobile p-01 / desktop p-07 of "Steve Academy rediseño". */
body[data-route="home"] #app.container{max-width:1120px}
.h2-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 0 18px}
.h2-date{margin:0;color:var(--mut);font-size:.86rem;font-weight:500}
.h2-hi{margin:2px 0 0;font-size:clamp(1.6rem,5.4vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.h2-pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.h2-pill{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--glass-2);border:1px solid var(--edge);box-shadow:var(--sh-sm);white-space:nowrap}
.h2-pill.fire{background:rgba(255,138,61,.16);color:#a84a00}
.h2-av{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--plum);color:#fff;font-weight:700;text-decoration:none;flex:none}
@media (max-width:600px){.h2-pill.xp{display:none}.h2-pill{padding:6px 10px;font-size:.74rem}}
.h2-grid{display:grid;gap:16px}
.h2-main,.h2-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.h2-side:empty{display:none}
@media (min-width:1100px){.h2-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.h2-kicker{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--acc-tx)}
.h2-kicker.or{color:var(--orange)}
/* hero */
.h2-hero{position:relative;display:flex;gap:20px;align-items:center;padding:24px;border-radius:28px;background:linear-gradient(150deg,var(--hero) 0%,var(--hero-2) 100%);color:#fff;
  box-shadow:0 18px 40px -18px rgba(216,27,107,.65),0 0 0 .5px rgba(255,255,255,.25) inset;overflow:hidden}
.h2-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.h2-hero .h2-kicker{color:#ffd3e5}
.h2-hero-body{flex:1;min-width:0;position:relative;z-index:1}
.h2-hero-t{margin:0 0 14px;font-size:clamp(1.55rem,5vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:#fff}
.h2-hero-art{order:2;flex:none;width:118px;height:150px;border-radius:22px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;z-index:1}
.h2-hero-art img{width:92%;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(60,0,30,.35))}
@media (min-width:700px){.h2-hero{padding:30px 32px}.h2-hero-art{order:0;width:150px;height:190px}}
@media (max-width:420px){.h2-hero{padding:20px 18px;gap:12px}.h2-hero-art{width:84px;height:108px;align-self:flex-start}}
.h2-prog{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:.8rem;font-weight:600;color:#ffe3ef}
.h2-bar{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.h2-bar i{display:block;height:100%;border-radius:inherit;background:var(--orange)}
.h2-hero-ctl{display:flex;gap:10px;flex-wrap:wrap}
.h2-btn-w{background:#fff!important;color:var(--hero-2)!important;border:0!important;font-weight:700;box-shadow:0 6px 16px -8px rgba(60,0,30,.5)}
.h2-btn-d{background:rgba(80,0,35,.38)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;font-weight:700}
@media (max-width:600px){.h2-hero-ctl .btn{flex:1 1 100%;text-align:center}.h2-btn-d{display:none}}
.h2-hero-done{display:block}
/* tiles */
.h2-tiles{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.h2-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h2-tile{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:22px;background:var(--glass);border:1px solid var(--edge);box-shadow:var(--sh-sm),0 0 0 .5px var(--ring);color:var(--on-card);text-decoration:none;min-width:0}
.h2-tile[hidden]{display:none}
a.h2-tile:hover{background:var(--glass-2)}
.h2-tk{font-size:.74rem;font-weight:600;color:var(--on-card-mut);line-height:1.25}
.h2-tv{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.h2-tv small{font-size:.8rem;font-weight:600;color:var(--on-card-mut);margin-left:2px}
.h2-tv.sm{font-size:1.05rem;line-height:1.2}
.h2-ts{font-size:.74rem;color:var(--on-card-mut)}
.h2-tile .h2-bar{flex:none;margin-top:6px;background:var(--line)}
.h2-tile .h2-bar.ok i{background:var(--ok-bar)}
.h2-tile-v{background:linear-gradient(150deg,#8b46f0,var(--tile-v));color:#fff;border-color:rgba(255,255,255,.25)}
a.h2-tile-v:hover{background:linear-gradient(150deg,#9655f5,#6d28d9)}
.h2-tile-v .h2-tk,.h2-tile-v .h2-ts{color:#ece2ff}
.h2-go{font-weight:700;color:#fff!important}
@media (max-width:420px){.h2-tile{padding:13px 12px}.h2-tv{font-size:1.35rem}}
/* path strip */
.h2-path{margin:0;padding:20px 22px}
.h2-path-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.h2-path-h h3{margin:0;font-size:1.05rem;font-weight:800}
.h2-path-h a{font-size:.85rem;font-weight:700;color:var(--acc-tx);text-decoration:none}
.h2-steps{list-style:none;margin:0 -22px;padding:0 22px 2px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(108px,1fr);gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 22px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
.h2-steps::-webkit-scrollbar{display:none}
.h2-steps li{scroll-snap-align:start}
.h2-steps li{display:flex;flex-direction:column;gap:6px;font-size:.72rem;color:var(--on-card-mut);min-width:0}
.h2-steps li i{display:block;height:6px;border-radius:99px;background:var(--line)}
.h2-steps li.done i{background:var(--ok-bar)}
.h2-steps li.cur i{background:var(--hero)}
.h2-steps li.cur{color:var(--acc-tx);font-weight:700}
.h2-steps li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;overflow-wrap:anywhere}
/* right column */
.h2-ep{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,var(--plum),var(--plum-2));color:#fff;text-decoration:none;box-shadow:var(--sh)}
.h2-ep-art{position:relative;aspect-ratio:16/9;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.h2-ep-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-play{position:relative;width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 8px 20px -6px rgba(0,0,0,.5);padding-left:3px}
.h2-ep-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px}
.h2-ep-b b{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.h2-ep-b span{font-size:.84rem;color:#e9d7e6}
@media (max-width:1099px){.h2-ep{flex-direction:row;align-items:stretch}.h2-ep-art{width:132px;aspect-ratio:auto;flex:none}.h2-ep-b{padding:14px 16px}}
.h2-read{margin:0;padding:18px}
.h2-read[hidden]{display:none}
.h2-book{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--on-card)}
.h2-cover{position:relative;flex:none;width:58px;height:78px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--ca),var(--cb));display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:var(--sh-sm)}
.h2-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-cover em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:.62rem;font-weight:800;color:#fff;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:6px}
.h2-book-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.h2-book-b b{font-weight:700;font-size:.98rem}
.h2-book-b span{font-size:.8rem;color:var(--on-card-mut)}
.h2-more{display:inline-block;margin-top:12px;font-size:.84rem;font-weight:700;color:var(--acc-tx);text-decoration:none}
/* older blocks below */
.h2-more-sec{margin-top:22px}
@media (min-width:900px){body:has(.sidenav:not([hidden])) .h2-bylevel{display:none}}
/* dark mode */
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="light"])) .h2-pill.fire{background:rgba(255,138,61,.2);color:#ffc08f}
  :where(:root:not([data-theme="light"])) .h2-av{background:#f6e2fe;color:#2a1422}}
:where(:root[data-theme="dark"]) .h2-pill.fire{background:rgba(255,138,61,.2);color:#ffc08f}
:where(:root[data-theme="dark"]) .h2-av{background:#f6e2fe;color:#2a1422}

/* Perfil: log out row */
.pf-out{margin:22px 0 8px}
.pf-out-row{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--sh);color:#c0264f;font:700 1rem var(--font);cursor:pointer;text-align:left;transition:background .2s,transform .1s}
.pf-out-row:hover{background:var(--glass-2)}.pf-out-row:active{transform:scale(.99)}
.pf-out-row small{margin-left:auto;font-weight:500;font-size:.8rem;color:var(--on-card-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.pf-out-ask{margin-top:10px;padding:16px 18px;border-radius:20px;border:1px solid rgba(192,38,79,.28);background:var(--glass-2);color:var(--on-card)}
.pf-out-ask p{margin:0 0 12px;font-weight:600}
.pf-out-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.pf-out-yes{background:#c0264f;color:#fff;border-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pf-out-row{color:#ff7a9c}}
:root[data-theme=dark] .pf-out-row{color:#ff7a9c}

/* Split screens (2026-10): sub-page menu rows, back link, Practicar duo */
.split-top{margin:0 0 6px}
.split-back{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--acc-tx);text-decoration:none;padding:6px 12px 6px 8px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);box-shadow:var(--sh);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.split-menu{display:grid;gap:10px;margin:14px 0}
.split-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--on-card);padding:14px 16px;margin:0}
.split-link:hover{transform:translateY(-1px)}
.split-ic{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,rgba(224,20,104,.14),rgba(109,40,217,.14))}
.split-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.split-b b{font-size:1rem}
.split-b small{color:var(--on-card-mut);font-size:.82rem}
.split-go{font-size:1.5rem;color:var(--acc);font-weight:700}
.p2-alllink{margin-top:14px}
.split-duo{display:grid;gap:14px;margin:14px 0}
.split-duo>.card{margin:0}
@media (min-width:900px){.split-duo{grid-template-columns:1fr 1fr;align-items:start}.split-menu{grid-template-columns:repeat(3,1fr)}}
.pf-top .avatar.has-photo{overflow:hidden;padding:0}
.pf-top .avatar.has-photo>.sala-av{width:100%;height:100%;box-shadow:none}
.pf-top .avatar.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media (min-width:900px){body:has(.sidenav:not([hidden])) #profile-levels{display:block}}