/* Portada: creatividades vivas del bloque «Un mismo material puede responder a toda la diversidad del aula».
 * Mismo estilo que las de /docentes y las páginas B2C: piezas pequeñas, un bucle tranquilo, solo opacidad/transform
 * (nada cambia la altura del bloque) y quietas con «reducir movimiento» o dentro del editor.
 * portada.js pone .vivo en .adapt-stage (anima) y .pausa cuando el bloque no se ve (el bucle se detiene). */

/* tamaños legibles en las tres creatividades (antes 8–10 px) */
.adapt-stage .document small{font-size:12px;letter-spacing:.06em}
.adapt-stage .document b{font-size:16px;line-height:1.5}
.adapt-stage .adapted-doc b{font-size:17px}
.adapt-stage .adapted-doc ol{line-height:1.9;font-size:16px;margin:0}
.adapt-stage .adapted-doc span{font-size:13px;margin-top:22px}
.adapt-stage .versions-ui header small{font-size:12px;letter-spacing:.04em}
.adapt-stage .versions-ui header b{font-size:15px}
.adapt-stage .versions-ui header>span{font-size:13px}
.adapt-stage .version-tabs button{font-size:13px;font-weight:600;padding:8px 11px;cursor:pointer;transition:background-color .25s,color .25s,transform .16s var(--ease-out)}
.adapt-stage .version-tabs button:active{transform:scale(.96)}
.adapt-stage .pdf-preview span{font-size:13px;letter-spacing:.02em}
.adapt-stage .version-body aside>small{font-size:12px;letter-spacing:.04em}
.adapt-stage .version-body aside b{font-size:14px}
.adapt-stage .version-body aside small{font-size:13px}
.adapt-stage .avatar{width:30px;height:30px;font-size:13px}

/* ---------- Metodológicas: del original al adaptado ---------- */
.met-anim{position:relative;gap:30px}
.met-anim .document{position:relative}
.met-anim .pm{background-image:linear-gradient(var(--t),var(--t));background-repeat:no-repeat;background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--k);border-radius:3px;padding:0 2px}
.met-anim .pm:nth-of-type(1){--t:#FFF1D6;--k:#FFA82A}
.met-anim .pm:nth-of-type(2){--t:#D8F8F0;--k:#01CD9D}
.met-anim .pm:nth-of-type(3){--t:#EAF3FD;--k:#0177E3}
.met-anim .adapted-doc li{border-radius:3px;background-image:linear-gradient(var(--t),var(--t));background-repeat:no-repeat;background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--k)}
.met-anim .adapted-doc li:nth-child(1){--t:#FFF1D6;--k:#FFA82A}
.met-anim .adapted-doc li:nth-child(2){--t:#D8F8F0;--k:#01CD9D}
.met-anim .adapted-doc li:nth-child(3){--t:#EAF3FD;--k:#0177E3}
.met-anim .adapted-doc li{padding-left:4px;margin-left:-4px}
.met-barrera{position:absolute;left:23px;right:23px;bottom:23px;display:block}
.met-barrera em{position:relative;display:inline-block;font-style:normal;font-size:13px;font-weight:600;line-height:1.3;color:#2A2230;background:#FFF1D6;border-radius:99px;padding:7px 13px 7px 28px}
.met-barrera em::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#FFA82A}
.met-barrera em::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;margin-top:-1px;background:#2A2230;transform:scaleX(0);transform-origin:left}
.met-flecha{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#C426D9;color:#fff;box-shadow:0 8px 20px -8px rgba(196,38,217,.6)}
.met-sk{position:absolute;left:23px;right:23px;top:58px;display:none;gap:16px;align-content:start}
.met-sk em{display:block;height:8px;border-radius:4px;background:#DDD7DE}
.met-sk em:nth-child(2){width:80%}.met-sk em:nth-child(3){width:92%}.met-sk em:nth-child(4){width:55%}

@media (prefers-reduced-motion:no-preference){
  .vivo .met-anim{--ciclo:9s}
  .vivo .met-anim .pm,.vivo .met-anim .adapted-doc li,.vivo .met-anim .adapted-doc>b,.vivo .met-anim .adapted-doc>span:last-child,.vivo .met-anim .met-sk,.vivo .met-anim .met-barrera em::after,.vivo .met-anim .met-flecha{animation-duration:var(--ciclo);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both}
  .vivo .met-anim .met-sk{display:grid;animation-name:met-sk}
  .vivo .met-anim .adapted-doc>b{animation-name:met-sube}
  .vivo .met-anim .adapted-doc>span:last-child{animation-name:met-pop}
  .vivo .met-anim .pm:nth-of-type(1){animation-name:met-pm1}
  .vivo .met-anim .pm:nth-of-type(2){animation-name:met-pm2}
  .vivo .met-anim .pm:nth-of-type(3){animation-name:met-pm3}
  .vivo .met-anim .adapted-doc li:nth-child(1){animation-name:met-li1}
  .vivo .met-anim .adapted-doc li:nth-child(2){animation-name:met-li2}
  .vivo .met-anim .adapted-doc li:nth-child(3){animation-name:met-li3}
  .vivo .met-anim .met-barrera em::after{animation-name:met-tacha}
  .vivo .met-anim .met-flecha{animation-name:met-flecha}
  @keyframes met-sk{0%,12%{opacity:1}20%,92%{opacity:0}100%{opacity:1}}
  @keyframes met-sube{0%,12%{opacity:0;transform:translateY(8px)}20%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
  @keyframes met-pop{0%,38%{opacity:0;transform:scale(.92)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
  @keyframes met-pm1{0%,8%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}15%,88%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--k)}96%,100%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}}
  @keyframes met-pm2{0%,15%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}22%,88%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--k)}96%,100%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}}
  @keyframes met-pm3{0%,22%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}29%,88%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--k)}96%,100%{background-size:0 100%;box-shadow:inset 0 -2px 0 transparent}}
  @keyframes met-li1{0%,11%{opacity:0;transform:translateX(-10px);background-size:0 100%}16%{opacity:1;transform:none;background-size:0 100%}24%,90%{opacity:1;transform:none;background-size:100% 100%}97%,100%{opacity:0;transform:none;background-size:100% 100%}}
  @keyframes met-li2{0%,18%{opacity:0;transform:translateX(-10px);background-size:0 100%}23%{opacity:1;transform:none;background-size:0 100%}31%,90%{opacity:1;transform:none;background-size:100% 100%}97%,100%{opacity:0;transform:none;background-size:100% 100%}}
  @keyframes met-li3{0%,25%{opacity:0;transform:translateX(-10px);background-size:0 100%}30%{opacity:1;transform:none;background-size:0 100%}38%,90%{opacity:1;transform:none;background-size:100% 100%}97%,100%{opacity:0;transform:none;background-size:100% 100%}}
  @keyframes met-tacha{0%,44%{transform:scaleX(0)}52%,90%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
  @keyframes met-flecha{0%,6%{transform:scale(1);background:#8C848E}10%{transform:scale(1.14);background:#C426D9}18%{transform:scale(1)}20%{transform:scale(1.14)}28%{transform:scale(1)}30%{transform:scale(1.14)}38%,92%{transform:scale(1);background:#C426D9}100%{transform:scale(1);background:#8C848E}}
}

@media (min-width:1001px){.adapt-panel{min-height:600px}}
@media (max-width:1000px){
  .adapt-panel{grid-template-columns:minmax(0,1fr)}
  .met-anim{gap:34px}
  .met-anim .document{padding-bottom:70px}
  .met-anim .met-flecha{position:relative;left:auto;top:auto;margin:-26px auto -26px}
  .met-anim .met-flecha svg{transform:rotate(90deg)}
  .met-sk{top:52px}
}

/* ---------- Curriculares: el elefante ---------- */
.curr-vida{align-self:center;display:grid;gap:14px;min-width:0}
.curr-vida .bx-curr{border:1.5px solid var(--dx-linea);box-shadow:0 24px 50px -34px rgba(28,20,29,.45)}
.curr-vida .bx-curr-item p{color:#1C141D}
.curr-vida .bx-cara{width:var(--s,36px);height:var(--s,36px);border-radius:50%;object-fit:cover;border:3px solid var(--c,#C426D9);background:#fff;flex:none}
.curr-vida .validation{background:var(--dx-suave);color:#4F4850;border:1.5px solid var(--dx-linea);font-size:14px;font-weight:600;margin:0;padding:11px 14px;text-align:center}

/* ---------- Grupales: versiones que cambian ---------- */
.versions-ui .pdf-preview{position:relative}
.versions-ui .pdf-preview i{transform-origin:left center;transition:transform .5s var(--ease-out),background-color .5s}
.versions-ui .pdf-ver{position:absolute;right:16px;top:20px;font-style:normal;font-family:Lexend,sans-serif;font-size:13px;font-weight:600;color:#2A2230;background:var(--dx-suave);border:1.5px solid var(--dx-linea);border-radius:99px;padding:4px 10px}
.versions-ui[data-v="0"] .pdf-preview{--vc:#DFDADF}
.versions-ui[data-v="1"] .pdf-preview{--vc:#01CD9D}
.versions-ui[data-v="2"] .pdf-preview{--vc:#A9D5FC}
.versions-ui[data-v="3"] .pdf-preview{--vc:#EFA8F7}
.versions-ui[data-v="4"] .pdf-preview{--vc:#FFD89C}
.versions-ui .pdf-preview i:nth-child(2),.versions-ui .pdf-preview i:nth-child(5){background:var(--vc,#DFDADF)}
.versions-ui[data-v="1"] .pdf-preview i:nth-child(3){transform:scaleX(.78)}
.versions-ui[data-v="1"] .pdf-preview i:nth-child(6){transform:scaleX(1.2)}
.versions-ui[data-v="2"] .pdf-preview i:nth-child(2){transform:scaleX(.7)}
.versions-ui[data-v="2"] .pdf-preview i:nth-child(4){transform:scaleX(.62)}
.versions-ui[data-v="2"] .pdf-preview i:nth-child(5){transform:scaleX(.8)}
.versions-ui[data-v="3"] .pdf-preview i:nth-child(2){transform:scaleX(.56)}
.versions-ui[data-v="3"] .pdf-preview i:nth-child(3){transform:scaleX(.5)}
.versions-ui[data-v="3"] .pdf-preview i:nth-child(4){transform:scaleX(.56)}
.versions-ui[data-v="3"] .pdf-preview i:nth-child(6){transform:scaleX(.4)}
.versions-ui[data-v="4"] .pdf-preview i:nth-child(2){transform:scaleX(.9)}
.versions-ui[data-v="4"] .pdf-preview i:nth-child(3){transform:scaleX(.45)}
.versions-ui[data-v="4"] .pdf-preview i:nth-child(4){transform:scaleX(.9)}
.versions-ui[data-v="4"] .pdf-preview i:nth-child(5){transform:scaleX(.7)}
.versions-ui[data-v="4"] .pdf-preview i:nth-child(6){transform:scaleX(.4)}
.versions-ui .version-body aside>div{transition:opacity .4s,transform .4s var(--ease-out),box-shadow .4s}
.versions-ui .version-body aside:has(.on)>div:not(.on){opacity:.72}
.versions-ui .version-body aside>div.on{transform:translateX(4px);box-shadow:0 0 0 2px #C426D9}
.versions-ui header>span{transition:transform .3s var(--ease-out)}
.versions-ui .version-tabs{scrollbar-width:none}.versions-ui .version-tabs::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.versions-ui .pdf-preview i,.versions-ui .version-body aside>div{transition:none}}

/* fuera de pantalla, los bucles se detienen */
.adapt-stage.pausa .met-anim *,.adapt-stage.pausa .met-anim *::after{animation-play-state:paused!important}
.adapt-stage .versions-ui header>span{white-space:nowrap;flex-shrink:0}
.adapt-stage .versions-ui header{gap:12px}
/* el título del documento no pasa por debajo de la etiqueta de versión (en inglés se montaban) (nubo-web#78) */
.versions-ui .pdf-preview>span{display:block;padding-right:92px}