/* Shorts de AprendePlay: pantalla completa, se desliza hacia arriba; colores vivos y la profe abajo */
@font-face{font-family:'Andika';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/andika-400.woff2) format('woff2')}
@font-face{font-family:'Andika';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/andika-700.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(fuentes/fredoka.woff2) format('woff2')}
:root{--ui:'Fredoka','Andika',system-ui,sans-serif;--letra:'Andika','Fredoka',system-ui,sans-serif;--tinta:#1f2a44}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#111;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--ui);color:var(--tinta);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

/* ===== el muro ===== */
/* el muro no usa el scroll del navegador: lo mueve el dedo (shorts.js), así cada short queda exacto en la pantalla */
#feed{position:fixed;inset:0;overflow:hidden;touch-action:none;overscroll-behavior:none}
.pista{will-change:transform}
.short{position:relative;height:var(--alto,100dvh);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:min(2dvh,16px);padding:max(14px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:var(--fondo);max-width:none}
.short>*{width:100%;max-width:560px}
.c-azul{--fondo:radial-gradient(120% 80% at 50% 0%,#7fd3ff 0%,#3a86ff 55%,#2453c9 100%);--fuerte:#2453c9}
.c-verde{--fondo:radial-gradient(120% 80% at 50% 0%,#b9f6ca 0%,#2ec4b6 55%,#0f8f82 100%);--fuerte:#0f8f82}
.c-naranja{--fondo:radial-gradient(120% 80% at 50% 0%,#ffe29a 0%,#ff9f43 55%,#e3631f 100%);--fuerte:#d2551a}
.c-morado{--fondo:radial-gradient(120% 80% at 50% 0%,#d7c4ff 0%,#8f5cff 55%,#5b2fd1 100%);--fuerte:#5b2fd1}
.c-rosa{--fondo:radial-gradient(120% 80% at 50% 0%,#ffd1e1 0%,#ff6fa0 55%,#d63c77 100%);--fuerte:#c73670}
.c-rojo{--fondo:radial-gradient(120% 80% at 50% 0%,#ffd0c4 0%,#ff6b6b 55%,#d23f4d 100%);--fuerte:#c23545}

/* cabecera */
.cab{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center;padding-right:0}
.cab .area{font-size:14px;font-weight:600;background:rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;letter-spacing:.2px}
.cab h2{font-size:clamp(24px,6.6vw,34px);line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.15)}

/* ===== la escena ===== */
.escena{position:relative;flex:1 1 auto;min-height:0;max-height:42dvh;aspect-ratio:1/1;width:auto!important;max-width:min(100%,560px)!important;border-radius:30px;overflow:hidden;
  box-shadow:0 10px 0 rgba(0,0,0,.12),0 18px 34px rgba(0,0,0,.18);border:4px solid rgba(255,255,255,.75)}
.f-cielo{background:linear-gradient(#bfe9ff,#eaf8ff)}
.f-lago{background:linear-gradient(#bfe9ff 0%,#e6f7ff 42%,#7fd3ff 42%,#3aa7e8 100%)}
.f-lago .agua{position:absolute;left:0;right:0;top:42%;height:10px;background:repeating-radial-gradient(circle at 12px -6px,transparent 0 10px,rgba(255,255,255,.7) 10px 12px,transparent 12px 24px);background-size:24px 12px}
.f-bosque{background:linear-gradient(#d9f7ff,#f2fff4)}
.f-campo{background:linear-gradient(#cdefff,#f4fbff)}
.loma{position:absolute;left:-10%;right:-10%;bottom:-38%;height:70%;border-radius:50%;background:linear-gradient(#7ed957,#4caf50)}
.f-casa{background:linear-gradient(#fff4e3 0%,#ffe9cc 70%,#e9b77f 70%,#d99a5b 100%)}
.f-noche{background:radial-gradient(90% 70% at 50% 20%,#3b3f8f,#1d1f4f 70%,#121338)}
.f-pared{background:linear-gradient(#fff7ec 0%,#ffeede 72%,#f2c79a 72%,#e4ad78 100%)}
/* los dibujos crecen con la escena: --t es su tamaño en una escena de 400 px de ancho */
.escena{container-type:size}
.pz{position:absolute;translate:-50% -50%;line-height:1;font-size:calc(var(--t)*.25cqw);transition:opacity .3s}
.pz.oculto{opacity:0;pointer-events:none}
.pz.voltea{transform:scaleX(-1)}
.pz.entra{animation:entra .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes entra{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.pz.se-va{animation:seVa .4s ease-in forwards}
@keyframes seVa{to{scale:.3;opacity:0}}
.pz.brilla,.pz.contado{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 16px #ffe066)}
.pz.baila{animation:baila .6s ease-in-out 3 alternate}
@keyframes baila{0%{rotate:0deg;scale:1}50%{rotate:-8deg;scale:1.12}100%{rotate:8deg;scale:1.05}}
.cuenta{position:absolute;left:50%;top:-6px;translate:-50% -100%;min-width:max(30px,8.5cqw);height:max(30px,8.5cqw);border-radius:50%;color:#fff;font-family:var(--ui);font-weight:700;font-size:max(19px,5.5cqw);
  display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.2);animation:entra .35s cubic-bezier(.3,1.6,.5,1)}
.pz-txt,.pz-pal{font-family:var(--letra);font-weight:700;color:var(--tinta);background:#fff;border-radius:22px;padding:4px 22px 10px;box-shadow:0 6px 0 rgba(0,0,0,.12);letter-spacing:2px;font-size:calc(var(--t)*.225cqw);white-space:nowrap}
.f-noche .pz-pal{background:#fffbe6}
.pz-txt .marca,.pz-pal .marca{color:#e63973}
.sil{display:inline-block;padding:0 4px}
.sil.hueco{min-width:1.6em;color:#b9c2d6;border-bottom:6px dashed #b9c2d6;border-radius:4px;text-align:center}
.sil.entra{animation:entra .5s cubic-bezier(.3,1.6,.5,1)}
.suma{position:absolute;left:50%;top:14%;translate:-50% 0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:22px;padding:6px 18px;box-shadow:0 6px 0 rgba(0,0,0,.12);font-family:var(--ui);font-weight:700;font-size:11cqw;line-height:1.1}
.suma i{font-style:normal;color:#8a96ad}
.suma.oculto{display:none}
.suma.entra{animation:entra .5s cubic-bezier(.3,1.6,.5,1)}

/* ===== las respuestas ===== */
.ops{display:flex;justify-content:center;gap:clamp(10px,3vw,18px);min-height:clamp(86px,13dvh,120px);opacity:0;transition:opacity .3s}
.ops.ve{opacity:1}
.op{flex:0 1 120px;min-width:84px;height:clamp(86px,13dvh,120px);background:#fff;border-radius:26px;box-shadow:0 7px 0 rgba(0,0,0,.18),0 12px 20px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;transition:translate .1s,opacity .3s}
.op:active{translate:0 4px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.op-n{font-family:var(--ui);font-weight:700;font-size:clamp(52px,14vw,72px);line-height:1}
.op-t{font-family:var(--letra);font-weight:700;font-size:clamp(44px,12vw,62px);line-height:1;color:var(--tinta)}
.op-e{font-size:clamp(50px,13vw,68px);line-height:1}
.op-g{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:clamp(36px,10vw,50px);line-height:1.1;max-width:170px}
.op:has(.op-g){flex-basis:160px}
.pz.se-vuela{animation:seVuela 1s ease-in forwards}
@keyframes seVuela{to{translate:-50% -320%;rotate:-14deg;opacity:0}}
.op.bien{box-shadow:0 0 0 6px #22c55e,0 0 0 13px rgba(34,197,94,.3);animation:salta .5s}
.op.apaga{opacity:.35}
.op.mal{animation:tiembla .45s}
.op.espera{animation:espera .5s}
@keyframes espera{30%{rotate:-6deg}70%{rotate:6deg}}
.op.mira,.op.llama{animation:mira .8s ease-in-out infinite}
@keyframes salta{40%{scale:1.15}}
@keyframes tiembla{20%,60%{translate:-8px 0}40%,80%{translate:8px 0}}
@keyframes mira{50%{scale:1.08;box-shadow:0 0 0 6px #ffe066,0 7px 0 rgba(0,0,0,.18)}}

/* ===== la profe y lo que dice ===== */
.pie{display:flex;align-items:flex-end;gap:10px;min-height:84px}
.profe-caja{flex:0 0 auto;width:80px;height:80px;border-radius:50%;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.15);padding:0;display:flex;align-items:center;justify-content:center}
/* la profe como retrato: todo el dibujo (también los hombros) queda dentro del círculo blanco */
.profe-caja,.profe-grande{overflow:hidden;position:relative;isolation:isolate}
.profe-caja svg,.profe-grande svg{width:100%;height:100%;display:block;overflow:hidden;transform-origin:50% 100%;translate:0 7%;scale:.98}
.instructora .boca-a{opacity:0}
.instructora.habla{animation:cabeza .45s ease-in-out infinite alternate}
.instructora.habla .boca-a{animation:bocaA .3s steps(1) infinite}
.instructora.habla .boca-c{animation:bocaC .3s steps(1) infinite}
@keyframes cabeza{to{transform:rotate(-4deg) translateY(-1px)}}
@keyframes bocaA{0%{opacity:1}50%{opacity:0}}
@keyframes bocaC{0%{opacity:0}50%{opacity:1}}
.instructora .ojos{transform-box:view-box;transform-origin:60px 62px;animation:parpadea 4.6s infinite}
@keyframes parpadea{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.globo{position:relative;flex:1;min-width:0;background:#fff;border-radius:22px 22px 22px 6px;padding:12px 16px;font-size:clamp(16px,4.3vw,20px);font-weight:600;line-height:1.25;
  box-shadow:0 6px 0 rgba(0,0,0,.12);opacity:0;translate:0 8px;transition:opacity .25s,translate .25s;margin-bottom:12px}
.globo.ve{opacity:1;translate:0 0}

/* ===== abajo, como en las redes: me gusta, compartir, otra vez y el libro ===== */
.riel{display:flex;justify-content:space-around;align-items:center;max-width:420px!important;margin-top:auto}
.riel-bt{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-decoration:none;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.riel-bt span{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:23px}
.riel-bt small{font-size:12px;font-weight:600}
.gusta .si,.gusta.si .no{display:none}
.gusta.si .si{display:inline}
.gusta.late span{animation:late .5s cubic-bezier(.3,1.6,.5,1)}

/* ===== al ganar: "¿te gustó?" con caritas y pasa solo al siguiente ===== */
.caritas{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;animation:entra .45s cubic-bezier(.3,1.6,.5,1)}
.caritas .filas{display:flex;justify-content:center;gap:clamp(10px,3vw,18px)}
.carita{display:flex;flex-direction:column;align-items:center;gap:2px;width:clamp(86px,24vw,112px);padding:8px 4px 10px;background:#fff;border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:opacity .2s,scale .2s}
.carita span{font-size:clamp(40px,11vw,54px);line-height:1}
.carita small{font-size:13px;font-weight:700;color:var(--tinta)}
.carita.elegida{scale:1.1;box-shadow:0 0 0 5px #ffe066,0 6px 0 rgba(0,0,0,.15)}
.caritas:has(.elegida) .carita:not(.elegida){opacity:.4}
.cuenta-atras{display:block;width:min(240px,60%);height:6px;border-radius:9px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.cuenta-atras::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.cuenta-atras.corre::after{transition:transform 4.5s linear;transform:scaleX(1)}
.cuenta-atras.ya::after{transition:transform .6s;transform:scaleX(1)}
.sube{position:absolute;left:50%;bottom:max(6px,env(safe-area-inset-bottom));translate:-50% 0;width:auto!important;display:flex;flex-direction:column;align-items:center;color:#fff;font-weight:700;font-size:14px;
  text-shadow:0 2px 4px rgba(0,0,0,.35);opacity:0;transition:opacity .4s;pointer-events:none;z-index:4}
.sube.ve{opacity:1}
.sube .flecha{font-size:34px;animation:subeMano 1.3s ease-in-out infinite}
@keyframes subeMano{0%{translate:0 14px;opacity:0}30%{opacity:1}100%{translate:0 -22px;opacity:0}}

/* ===== la manita y el confeti ===== */
.mano{position:absolute;z-index:6;translate:-50% 0;font-size:46px;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:toca .7s ease-in-out infinite alternate}
.mano.arriba{rotate:180deg}
@keyframes toca{to{translate:-50% -10px}}
.confeti{position:absolute;z-index:7;font-size:24px;pointer-events:none;translate:-50% -50%;animation:confeti 1.1s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes confeti{to{translate:calc(-50% + var(--dx)) calc(-50% + var(--dy));opacity:0;rotate:200deg}}

/* ===== portada ===== */
.portada{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#ffe29a 0%,#ff6fa0 45%,#8f5cff 100%);transition:opacity .45s}
.portada.se-va{opacity:0;pointer-events:none}
.portada .marca{font-size:26px;font-weight:700}.portada .marca b{color:#fff3a6}
.portada h1{font-size:clamp(34px,9vw,52px);line-height:1.05;text-shadow:0 4px 0 rgba(0,0,0,.15)}
.portada p{font-size:18px;opacity:.95;max-width:340px}
.profe-grande{width:min(46vw,220px);height:min(46vw,220px);background:#fff;border-radius:50%;padding:0;box-shadow:0 10px 0 rgba(0,0,0,.12)}
.empezar{margin-top:8px;background:#fff;color:#d63c77;font-weight:700;font-size:24px;border-radius:999px;padding:16px 38px;box-shadow:0 8px 0 rgba(0,0,0,.15);animation:late 1.2s ease-in-out infinite}
@keyframes late{50%{scale:1.06}}
.portada .volver{color:#fff;font-weight:600;font-size:15px;opacity:.9}
.aviso{position:fixed;left:50%;bottom:30px;translate:-50% 0;z-index:30;background:#1f2a44;color:#fff;border-radius:14px;padding:10px 16px;font-size:15px;max-width:90vw;word-break:break-all}

/* tableta y computadora: el short queda al centro como un teléfono grande */
@media (min-width:700px){
  .short{padding-top:24px}
  .escena{max-height:50dvh}
}