.practica{background:var(--soft);border-block:1px solid var(--line);text-align:center}
.practica-in{max-width:880px}
.practica-sub{max-width:48ch;margin:18px auto 0;font-size:1.05rem;color:var(--muted)}
.practica .actions{margin-top:26px}
.practica-nota{margin:12px 0 0;font-size:.85rem;color:var(--muted)}

.pr-tarjeta{max-width:660px;margin-inline:auto;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 40px #04336b14}
.pr-q{margin:0;font:650 clamp(1.35rem,2.6vw,1.9rem)/1.3 var(--display);letter-spacing:-.02em;color:var(--navy)}

.pr-var{color:var(--cobalt);font-weight:700}
.pr-var>[hidden],.pr-consejo>[hidden]{display:none}
.pr-junto{white-space:nowrap}
.pr-junto>.pr-var{white-space:normal}
.pr-real{display:inline-flex;align-items:center;min-height:36px;margin:0 0 0 6px;padding:4px 14px;border-radius:999px;background:var(--cobalt);color:#fff;font:700 1.05rem/1.2 var(--display);letter-spacing:-.01em;vertical-align:.1em;transform:rotate(-3deg);white-space:nowrap}
.pr-consejo{margin:18px 0 0;font-weight:600;color:var(--navy)}

.pr-pista{position:relative;display:flow-root;--h:clamp(210px,30vw,270px);--x:16.67%;margin-top:20px}
.practica-escena[data-lectura="1"] .pr-pista{--x:50%}
.practica-escena[data-lectura="2"] .pr-pista{--x:83.33%}
.pr-foto{position:relative;height:var(--h);overflow:hidden;border-radius:18px;background:#eef4fc;box-shadow:inset 0 0 0 1px #c6d6ec}
.practica-escena[data-sit="1"] .pr-foto{background:#e8f6ff}
.practica-escena[data-sit="2"] .pr-foto{background:#f3f0ff}
.practica-escena[data-sit="3"] .pr-foto{background:#eef7f2}
.pr-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pr-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

.pr-cara{position:absolute;left:50%;top:44.6%;width:calc(var(--h) * .48);height:calc(var(--h) * .58);transform:translate(-50%,-50%);font-size:46px;pointer-events:none}
.pr-esq{position:absolute;inset:0;pointer-events:none}
.pr-esq>span{position:absolute;width:.45em;height:.45em;border:0 solid var(--cyan)}
.pr-esq>span:nth-child(1){left:0;top:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:5px}
.pr-esq>span:nth-child(2){right:0;top:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:5px}
.pr-esq>span:nth-child(3){left:0;bottom:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:5px}
.pr-esq>span:nth-child(4){right:0;bottom:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:5px}

.pr-tramos{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pr-tramo{display:grid;place-items:center;min-height:64px;padding:10px 8px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #c6d6ec;font:700 .95rem/1.2 var(--body);color:#33496b;transition:background-color .3s,box-shadow .3s,color .3s}
.pr-tramo.t0{border-radius:999px 14px 14px 999px}
.pr-tramo.t2{border-radius:14px 999px 999px 14px}
.practica-escena[data-lectura="0"] .t0{background:#d7f0ff;color:#03305e;box-shadow:inset 0 0 0 2px #2aadfc}
.practica-escena[data-lectura="1"] .t1{background:#e3eefc;color:#04336b;box-shadow:inset 0 0 0 2px #04336b}
.practica-escena[data-lectura="2"] .t2{background:#ffedc7;color:#6b3f00;box-shadow:inset 0 0 0 2px #c77c00}

.pr-hoja{position:absolute;z-index:3;left:var(--x);top:calc(var(--h) + 30px);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 5px #fff,0 6px 16px #0351a666;transform:translate(-50%,-50%)}
.pr-hoja>svg{width:24px;height:24px}
.pr-linea{position:absolute;left:var(--x);top:calc(var(--h) + 52px);width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--navy)}

.practica-escena.is-paused *{animation-play-state:paused!important}

.practica-escena.anima .pr-hoja{left:50%;top:calc(var(--h) / 2);opacity:0}
.practica-escena.anima[data-fase~="entra"] .pr-hoja{opacity:1}
.practica-escena.anima[data-fase="entra"] .pr-hoja{animation:pr-obturador 1.8s var(--ease-out) both}
.practica-escena.anima[data-fase="entra"] .pr-flash{animation:pr-destello 1.8s both}
.practica-escena.anima[data-fase="entra"] .pr-base{animation:pr-aparece 1.8s both}
.practica-escena.anima[data-fase~="entra"] .pr-q .pr-var{animation:pr-revela .7s var(--ease-out) both}
@keyframes pr-obturador{0%{left:88%;top:34px;opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(.78)}40%,55%{left:88%;top:34px;transform:translate(-50%,-50%) scale(1)}100%{left:50%;top:calc(var(--h) / 2);opacity:1;transform:translate(-50%,-50%)}}
@keyframes pr-destello{0%,28%{opacity:0}34%{opacity:.95}70%,100%{opacity:0}}
@keyframes pr-aparece{0%,30%{opacity:0}36%,100%{opacity:1}}
@keyframes pr-revela{0%{opacity:.2;filter:blur(6px)}100%{opacity:1;filter:none}}

.practica-escena.anima .pr-cara .pr-esq{opacity:0;transform:scale(1.2)}
.practica-escena.anima[data-fase~="baja"] .pr-cara .pr-esq{opacity:1;transform:none;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.practica-escena.anima[data-fase~="baja"] .pr-hoja{left:4%;top:calc(var(--h) + 30px)}
.practica-escena.anima[data-fase="entra baja"] .pr-hoja{transition:left .8s var(--ease-move),top .8s var(--ease-move)}

.practica-escena.anima[data-fase~="mide"][data-lectura="0"] .pr-hoja{animation:pr-mide-0 2s ease-in-out both}
.practica-escena.anima[data-fase~="mide"][data-lectura="1"] .pr-hoja{animation:pr-mide-1 2s ease-in-out both}
.practica-escena.anima[data-fase~="mide"][data-lectura="2"] .pr-hoja{animation:pr-mide-2 2s ease-in-out both}
@keyframes pr-mide-0{0%{left:4%}35%{left:90%}65%{left:30%}85%{left:12%}100%{left:16.67%}}
@keyframes pr-mide-1{0%{left:4%}35%{left:90%}65%{left:28%}85%{left:56%}100%{left:50%}}
@keyframes pr-mide-2{0%{left:4%}35%{left:70%}65%{left:40%}85%{left:92%}100%{left:83.33%}}

.practica-escena.anima[data-fase~="lee"] .pr-hoja{left:var(--x)}
.practica-escena.anima .pr-linea{opacity:0}
.practica-escena.anima[data-fase~="lee"] .pr-linea{opacity:1;transition:opacity .3s}
.practica-escena.anima:not([data-fase~="lee"]) .pr-tramo{background:#fff;color:#33496b;box-shadow:inset 0 0 0 1px #c6d6ec}
.practica-escena.anima .pr-consejo{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease-out)}
.practica-escena.anima[data-fase~="lee"] .pr-consejo{opacity:1;transform:none;transition-delay:.3s}

.practica-escena.anima[data-fase="sale"] .pr-foto>*,.practica-escena.anima[data-fase="sale"] .pr-hoja{opacity:0;transition:opacity .3s}

@media(max-width:560px){
 .pr-pista{--h:200px}
 .pr-tramo{min-height:58px;font-size:.8rem}
 .pr-tramo.t0{border-radius:22px 12px 12px 22px}
 .pr-tramo.t2{border-radius:12px 22px 22px 12px}
}
@media(prefers-reduced-motion:reduce){
 .pr-flash{opacity:0}
}