/* /docentes — landing para educadores (tarea: landing "efecto wow", 10/2026).
   Prefijo dx- para no chocar con el resto de la web. Colores: solo los del design system.
   Paleta viva de Nubo: morado #C426D9 (también para texto y botones: 4,5:1 sobre blanco), azul #0177E3,
   verde #01CD9D, naranja #FFA82A y rosa #FF0183 (rellenos y formas). Azul-600 #0061BC solo para letras blancas pequeñas. */

.dx{--dx-morado:#C426D9;--dx-azul:#0061BC;--dx-tenue:#666167;--dx-suave:#F8F5F9;--dx-linea:#DED6E1}
.dx section{scroll-margin-top:90px}
.dx-kicker{margin:0 0 14px;color:var(--dx-morado);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dx-cabeza{max-width:760px;margin:0 0 44px}
.dx-cabeza h2{font-size:clamp(32px,4vw,50px);margin:0}
.dx-cabeza>p:not(.dx-kicker){font-size:18px;color:var(--dx-tenue);margin:16px 0 0}
.dx-enlace{font-weight:600;color:var(--dx-morado);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dx-enlace:hover{text-decoration-thickness:2px}
.dx-micro{font-size:16px;color:var(--dx-tenue);margin:14px 0 0}
.dx-centrado{text-align:center;margin-top:40px}

/* Figuras de Nubo (círculo, rombo y hoja): decoración, nunca personajes */
.dx-figura{position:absolute;pointer-events:none}
.f-circulo{width:56px;height:56px;border-radius:50%;background:#FFA82A}
.f-rombo{width:44px;height:44px;background:#0177E3;transform:rotate(45deg)}
.f-hoja{width:52px;height:52px;background:#01CD9D;border-radius:50% 0}

/* ---------- 1. Portada: título con píldora que se escribe sola ---------- */
/* Cada tono = un color de Nubo. La palabra va en la versión legible de ese color, sin fondo (contraste AA para texto grande). */
.tono-0{--tono:#0177E3;--tinta:#0177E3;--tinte:#E5F1FC}
.tono-1{--tono:#01CD9D;--tinta:#00A57E;--tinte:#DBFFF0}
.tono-2{--tono:#C426D9;--tinta:#C426D9;--tinte:#FDF0FF}
.tono-3{--tono:#FF0183;--tinta:#FF0183;--tinte:#FFE6F2}
.dx-hero{text-align:center;padding:88px 0 48px}
.dx-hero .dx-kicker{margin-bottom:18px}
.dx-title{font-size:clamp(42px,6.2vw,82px);line-height:1.08;margin:0 auto 28px;max-width:1100px}
.dx-title-fijo{display:block}
.dx-pildora{display:inline-block;margin-top:.04em;color:var(--tinta);font-size:min(1em,8.4vw);white-space:nowrap;transition:color 400ms ease}
.dx-tecleo{display:inline}
.dx-cursor{display:inline-block;width:.06em;height:.82em;margin-left:.04em;background:currentColor;vertical-align:-.06em;animation:dx-parpadeo 1s steps(1) infinite}
@keyframes dx-parpadeo{50%{opacity:0}}
.dx-palabras{display:none}
.dx-lead{font-size:20px;line-height:1.6;color:#4F4850;max-width:640px;margin:0 auto}
.dx-acciones{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.dx-hero .dx-micro{margin-top:12px}

@media (max-width:700px){
  .dx-hero{padding:52px 0 36px}
  .dx-title{font-size:40px}
  .dx-pildora{font-size:min(1em,8.6vw)}
  .dx-lead{font-size:18px}
}

/* ---------- 2. Animación "de tu material a todas sus versiones" (docentes.js cambia data-fase) ---------- */
.dx-historia{--t:600ms;--ease:var(--ease-in-out,cubic-bezier(.77,0,.175,1));position:relative;height:460px;user-select:none}
.h-izq,.h-der{position:absolute;top:0;bottom:0;border-radius:20px;overflow:hidden;transition:left var(--t) var(--ease),width var(--t) var(--ease),opacity var(--t) ease}
.h-izq{left:0;width:38%;background:#F4F0F4}
.h-der{left:40%;width:60%;background:var(--h-color,#C426D9);transition:left var(--t) var(--ease),width var(--t) var(--ease),background-color 0s}
.dx-historia:not([data-fase^="a"]) .h-izq{width:0;opacity:0}
.dx-historia:not([data-fase^="a"]) .h-der{left:0;width:100%}
.h-chip{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:6px 12px;border-radius:8px;background:#fff;color:var(--ink);white-space:nowrap}
.h-marca svg{width:22px}
/* la ola: el color nuevo entra como un círculo que se abre desde el centro */
.h-ola{position:absolute;inset:0;background:var(--h-nuevo,#C426D9);clip-path:circle(0% at 50% 50%)}
.h-ola.abre{clip-path:circle(75% at 50% 50%);transition:clip-path 650ms var(--ease)}
/* archivos que vuelan a la caja */
.h-archivo{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--dx-linea);border-radius:10px;padding:12px 16px;
  font-weight:600;box-shadow:0 14px 30px -18px rgba(28,20,29,.45);transition:left 650ms var(--ease),top 650ms var(--ease),transform 650ms var(--ease),opacity 400ms ease}
.h-archivo b{font-size:12px;color:#fff;padding:3px 7px;border-radius:5px}
.f1{left:7%;top:24%;transform:rotate(-5deg)}.f1 b{background:#0061BC}
.f2{left:15%;top:46%;transform:rotate(4deg)}.f2 b{background:#C426D9}
.f3{left:6%;top:68%;transform:rotate(-2deg)}.f3 b{background:#FFA82A;color:var(--ink)}
.dx-historia[data-fase="a1"] .f1,.dx-historia[data-fase="a2"] .f1,.dx-historia[data-fase="a3"] .f1,
.dx-historia[data-fase="a2"] .f2,.dx-historia[data-fase="a3"] .f2,
.dx-historia[data-fase="a3"] .f3{left:62%;top:46%;transform:scale(.55);opacity:0}
.dx-historia:not([data-fase^="a"]) .h-archivo{opacity:0;transition:none}
/* la caja donde caen */
.h-caja{position:absolute;inset:70px 26px 26px;border:3px dashed rgba(255,255,255,.7);border-radius:16px;display:grid;place-items:center;transition:opacity 300ms ease}
.h-mas{width:70px;height:70px;border-radius:14px;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;font-size:34px;line-height:1}
.h-cuenta{position:absolute;top:calc(50% - 50px);left:calc(50% + 22px);min-width:30px;height:30px;border-radius:99px;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:14px;transform:scale(0);transition:transform 250ms var(--ease-out,ease)}
.dx-historia[data-fase="a1"] .h-cuenta,.dx-historia[data-fase="a2"] .h-cuenta,.dx-historia[data-fase="a3"] .h-cuenta{transform:scale(1)}
.dx-historia:not([data-fase^="a"]) .h-caja{opacity:0}
/* el nodo de Nubo */
.h-nodo{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 14px rgba(255,255,255,.14),0 0 0 30px rgba(255,255,255,.07);opacity:0;transform:scale(.4);transition:opacity 400ms ease,transform 500ms var(--ease-out,ease),top 500ms var(--ease)}
.h-nodo svg{width:46px}
.dx-historia[data-fase="b"] .h-nodo,.dx-historia[data-fase="c"] .h-nodo,.dx-historia[data-fase="e"] .h-nodo{opacity:1;transform:none}
.dx-historia[data-fase="e"] .h-nodo{top:30%}
/* Perfil Vivo alrededor del nodo */
.h-perfil{position:absolute;inset:0;opacity:0;transition:opacity 400ms ease}
.dx-historia[data-fase="c"] .h-perfil{opacity:1}
.h-perfil .h-chip{left:50%;top:auto;bottom:30px;transform:translateX(-50%)}
.h-perfil i{position:absolute;font-style:normal;font-size:14px;font-weight:600;background:#fff;color:var(--ink);padding:6px 12px;border-radius:99px;border:3px solid;transform:scale(.6);opacity:0;transition:transform 400ms var(--ease-out,ease),opacity 300ms ease}
.dx-historia[data-fase="c"] .h-perfil i{transform:none;opacity:1}
.h-perfil .p1{left:calc(50% - 230px);top:26%;border-color:#0177E3}
.h-perfil .p2{left:calc(50% + 110px);top:24%;border-color:#FF0183;transition-delay:80ms}
.h-perfil .p3{left:calc(50% - 210px);top:62%;border-color:#01CD9D;transition-delay:160ms}
.h-perfil .p4{left:calc(50% + 100px);top:64%;border-color:#C426D9;transition-delay:240ms}
/* cada versión: etiqueta + folio blanco */
.h-salida{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;transform:translateY(18px);transition:opacity 350ms ease,transform 450ms var(--ease-out,ease)}
.h-salida .h-chip{position:static;letter-spacing:.06em;text-transform:uppercase}
.h-salida::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(255,255,255,.25)}
.h-folio{position:relative;width:min(78%,420px);background:#fff;border-radius:14px;padding:22px 24px;display:grid;gap:10px;box-shadow:0 24px 40px -22px rgba(28,20,29,.5)}
.h-folio b{font-family:Sora,sans-serif;font-size:19px;line-height:1.3}
.h-folio span{height:10px;border-radius:99px;background:#EEE8EF}
.h-folio span+span{width:70%}
.h-folio em{font-style:normal;font-size:14px;font-weight:600;color:var(--dx-tenue);border-top:1px solid var(--dx-linea);padding-top:10px}
.dx-historia[data-fase="d0"] .h-salida[data-n="0"],.dx-historia[data-fase="d1"] .h-salida[data-n="1"],
.dx-historia[data-fase="d2"] .h-salida[data-n="2"],.dx-historia[data-fase="d3"] .h-salida[data-n="3"]{opacity:1;transform:none}
/* esquema final: Nubo arriba y las cuatro versiones colgando */
.h-arbol{position:absolute;left:50%;top:calc(30% + 46px);width:min(88%,560px);transform:translateX(-50%);opacity:0;transition:opacity 400ms ease}
.dx-historia[data-fase="e"] .h-arbol{opacity:1}
.h-rama{position:absolute;left:12.5%;right:12.5%;top:26px;height:30px;border:3px solid rgba(255,255,255,.55);border-bottom:0;border-radius:14px 14px 0 0}
.h-rama::before{content:"";position:absolute;left:50%;top:-29px;height:26px;border-left:3px solid rgba(255,255,255,.55)}
.h-arbol span{position:absolute;top:66px;width:25%;display:grid;justify-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:15px;transform:translateY(10px);opacity:0;transition:transform 400ms var(--ease-out,ease),opacity 300ms ease}
.h-arbol span b{width:62px;height:62px;border-radius:12px;background:#fff;display:grid;place-items:center;font-family:Sora,sans-serif;font-size:20px}
.h-arbol span i{font-style:normal;background:#fff;border-radius:99px;padding:2px 10px}
.h-arbol .r0{left:0}.h-arbol .r0 b{color:#0177E3}
.h-arbol .r1{left:25%;transition-delay:90ms}.h-arbol .r1 b{color:#00A57E}
.h-arbol .r2{left:50%;transition-delay:180ms}.h-arbol .r2 b{color:#C426D9}
.h-arbol .r3{left:75%;transition-delay:270ms}.h-arbol .r3 b{color:#FF0183}
.dx-historia[data-fase="e"] .h-arbol span{transform:none;opacity:1}
@media (max-width:700px){
  .dx-historia{height:380px}
  .h-izq{width:34%}.h-der{left:36%;width:64%}
  .h-izq .h-chip{display:none}
  .h-archivo{padding:10px;font-size:0;gap:0}
  .h-archivo b{font-size:13px;padding:6px 9px}
  .f1{left:8%}.f2{left:16%}.f3{left:6%}
  .h-caja{inset:62px 14px 14px}
  .h-perfil .p1{left:6%;top:20%}.h-perfil .p2{left:auto;right:6%;top:30%}.h-perfil .p3{left:8%;top:66%}.h-perfil .p4{left:auto;right:4%;top:72%}
  .h-perfil .h-chip{bottom:14px}
  .h-folio{width:88%;padding:16px}
  .h-folio b{font-size:17px}
  .h-arbol{width:94%}
  .h-arbol span{font-size:13px}
  .h-arbol span b{width:50px;height:50px;font-size:17px}
}
/* reducir movimiento y editor: el esquema final, quieto */
@media (prefers-reduced-motion:reduce){.dx-historia *{transition:none!important}}
.dx-editor .dx-historia{height:auto}
.dx-editor .dx-historia>*{position:relative!important;inset:auto!important;width:auto!important;opacity:1!important;transform:none!important;display:block;margin-bottom:10px}
.dx-editor .h-der{min-height:0;padding:20px}
.dx-editor .h-der>*{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;margin:8px 0}
.dx-editor .h-nodo,.dx-editor .h-ola,.dx-editor .h-caja,.dx-editor .h-rama,.dx-editor .h-salida::before{display:none}
.dx-editor .h-arbol span,.dx-editor .h-perfil i{position:static;opacity:1;transform:none;display:inline-grid;margin:4px}

/* botón para cambiar la animación por el vídeo de 2 minutos */
.h-ver{position:absolute;right:18px;bottom:18px;z-index:5;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;
  padding:8px 16px 8px 8px;border-radius:999px;box-shadow:0 10px 26px -12px rgba(28,20,29,.5);transition:transform 160ms var(--ease-out,ease)}
.h-ver .video-play{width:34px;height:34px;box-shadow:none}
.h-ver .video-play::after{left:13px;top:10px;border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
@media (hover:hover){.h-ver:hover{transform:scale(1.04)}}
.h-ver:active{transform:scale(.97)}
.h-ver.video-pendiente{display:none}
.dx-video-real{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#1C141D}
.dx-video-real iframe,.dx-video-real video{position:absolute;inset:0;width:100%;height:100%;border:0}
.dx-editor .h-ver{position:static!important;display:inline-flex!important}
@media (max-width:700px){.h-ver{right:12px;bottom:12px;font-size:14px}}

/* ---------- 2 y 5. Huecos de vídeo ---------- */
.dx-video-zona{padding-bottom:72px}
.video-hueco{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:var(--dx-suave);border:2px dashed var(--dx-linea);
  color:var(--ink);text-align:center;background-size:cover;background-position:center}
.video-play{width:76px;height:76px;border-radius:50%;background:var(--dx-morado);position:relative;box-shadow:0 10px 30px -8px rgba(196,38,217,.5);transition:transform 200ms var(--ease-out,ease)}
.video-play::after{content:"";position:absolute;left:31px;top:24px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.video-texto{font-family:Sora,sans-serif;font-weight:700;font-size:20px}
.video-estado{font-size:14px;color:var(--dx-tenue)}
@media (hover:hover){.video-hueco:hover .video-play{transform:scale(1.06)}}
.video-hueco iframe,.video-hueco video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-pendiente{cursor:default}

/* ---------- 3. Frase de confianza ---------- */
.dx-confianza{display:flex;align-items:center;gap:16px;max-width:760px;margin:30px auto 0;text-align:left}
.dx-confianza p{margin:0;font-size:16px;color:#4F4850}
.dx-sellos{display:flex;flex:none}
.dx-sellos img{width:40px;height:40px;border-radius:50%;border:3px solid #fff;margin-left:-12px;object-fit:cover;background:#F4EFF5;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.dx-sellos img:first-child{margin-left:0}
.s1{background:#FFA82A}.s2{background:#0177E3}.s3{background:#01CD9D}.s4{background:#C426D9}

/* ---------- 4. ¿Por qué elegir Nubo? ---------- */
.dx-ventajas{padding:40px 0 110px}
.dx-ventajas .dx-cabeza{text-align:center;margin-inline:auto}
.dx-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  grid-template-areas:"material perfil perfil" "tiempo justifica empieza"}
.dx-tarjeta{position:relative;overflow:hidden;background:#fff;border:1px solid var(--dx-linea);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:6px}
.dx-tarjeta h3{font-size:22px;margin:10px 0 4px}
.dx-tarjeta p{margin:0;color:#4F4850}
.t-material{grid-area:material}.t-perfil{grid-area:perfil;flex-direction:row;align-items:center;gap:28px}
.t-tiempo .dx-tiempo-caso{margin-top:auto;padding-top:14px;align-self:flex-start}
.t-tiempo{grid-area:tiempo}.t-justifica{grid-area:justifica}.t-decides{grid-area:decides;flex-direction:row;align-items:center;gap:28px}
.t-empieza{grid-area:empieza;background:var(--dx-morado);border:0;color:#fff;justify-content:flex-end}
.t-empieza h3{font-size:32px;color:#fff;margin-bottom:8px}
.t-empieza p{color:#fff;margin-bottom:22px}
.t-empieza .button{align-self:flex-start}
.t-empieza .f-circulo{top:28px;right:30px}
.t-empieza .f-rombo{top:96px;right:96px;width:34px;height:34px;background:#FFA82A;opacity:.9}
.dx-ilus{background:var(--dx-suave);border-radius:12px;padding:18px;min-height:130px;position:relative;flex:none}
/* material: un documento que se convierte en tres versiones */
.ilus-material{display:grid;grid-template-columns:auto 22px 1fr;grid-template-rows:repeat(3,auto);align-items:center;gap:6px 10px}
.ilus-material .doc{grid-row:1/4;width:54px;height:70px;border-radius:6px;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:700}
.ilus-material>i{grid-row:1/4;height:2px;background:var(--ink)}
.ilus-material .ver{font-size:13px;font-weight:600;padding:5px 10px;border-radius:6px;background:#fff;border-left:4px solid}
.v1{border-color:#0177E3!important}.v2{border-color:#01CD9D!important}.v3{border-color:#C426D9!important}
/* perfil vivo: cuatro habilidades alrededor del estudiante */
.ilus-perfil{width:260px;height:170px}
.ilus-perfil b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#C426D9;color:#fff;font-size:13px;padding:8px 12px;border-radius:999px}
.ilus-perfil .n{position:absolute;font-size:12px;font-weight:600;background:#fff;padding:4px 9px;border-radius:999px;border:2px solid}
.n1{left:10px;top:16px;border-color:#0177E3}.n2{right:10px;top:22px;border-color:#FFA82A}.n3{left:16px;bottom:18px;border-color:#01CD9D}.n4{right:8px;bottom:14px;border-color:#C426D9}
/* tiempo: 12 h → 3 h */
.ilus-tiempo{display:flex;align-items:center;justify-content:center;gap:14px;font-family:Sora,sans-serif;font-weight:700}
.ilus-tiempo s{font-size:28px;color:var(--dx-tenue)}
.ilus-tiempo span{font-size:24px}
.ilus-tiempo b{font-size:48px;color:var(--dx-morado)}
/* justificado: un PDF con sus medidas */
.ilus-justifica{display:flex;flex-direction:column;gap:7px}
.ilus-justifica .pdf{align-self:flex-start;font-size:12px;font-weight:700;background:var(--dx-azul);color:#fff;padding:3px 8px;border-radius:5px;margin-bottom:4px}
.ilus-justifica .linea{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:#fff;border-radius:6px;padding:5px 9px}
.ilus-justifica .linea i{width:9px;height:9px;border-radius:50%;background:#01CD9D}
/* tú decides: interruptor de validación */
.ilus-decides{display:flex;align-items:center;gap:12px;min-height:0;padding:22px 26px}
.ilus-decides .sw{width:52px;height:30px;border-radius:999px;background:#01CD9D;position:relative}
.ilus-decides .sw i{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff}
.ilus-decides b{font-size:15px;white-space:nowrap}

/* ---------- 5. Cómo funciona ---------- */
.dx-como{background:var(--dx-suave);padding:100px 0}
.dx-como-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.dx-como-texto h2{font-size:clamp(38px,4.6vw,58px);margin:0 0 20px}
.dx-como-texto p:not(.dx-kicker){font-size:18px;color:#4F4850;margin:0}
.dx-como .video-hueco{background-color:#fff}

/* ---------- 6. Los 3 pasos: texto que se desplaza + imagen fija ---------- */
.dx-pasos{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:40px 0 60px}
.dx-paso{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity 300ms ease}
.dx-paso.activo{opacity:1}
.dx-paso h3{font-size:clamp(34px,4vw,52px);margin:0 0 18px}
.dx-paso p:not(.dx-kicker){font-size:18px;color:#4F4850;max-width:460px;margin:0}
.dx-pasos-visual{position:sticky;top:calc(50vh - 250px);height:500px;align-self:start;margin-top:calc(36vh - 250px)}
.dx-visual{position:absolute;inset:0 0 50px;display:grid;place-items:center;opacity:0;transform:translateY(24px) scale(.97);filter:blur(6px);
  transition:opacity 500ms var(--ease-out,ease),transform 500ms var(--ease-out,ease),filter 500ms var(--ease-out,ease)}
.dx-visual.activo{opacity:1;transform:none;filter:none}
.dx-visual .app{width:min(100%,440px);background:#fff;border:1px solid var(--dx-linea);border-radius:16px;padding:22px;box-shadow:0 30px 60px -30px rgba(28,20,29,.3)}
.dx-visual:nth-child(1) .app{box-shadow:12px 12px 0 #E5F1FC}
.dx-visual:nth-child(2) .app{box-shadow:12px 12px 0 #FFF0DA}
.dx-visual:nth-child(3) .app{box-shadow:12px 12px 0 #F4E6F7}
.app header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--dx-linea);margin-bottom:14px}
.app header b{font-family:Sora,sans-serif}
.app header small{color:var(--dx-tenue);font-size:13px}
.app-pie{margin:12px 0 0;font-size:13px;color:var(--dx-tenue)}
.alumnado{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alumnado li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;padding:8px 10px;border-radius:10px;background:var(--dx-suave)}
.alumnado em{margin-left:auto;color:var(--dx-tenue);font-weight:500;font-size:13px;font-style:normal}
.av{width:26px;height:26px;border-radius:50%}
.a1{background:#0177E3}.a2{background:#FFA82A}.a3{background:#01CD9D;border-radius:50% 0}.a4{background:#C426D9;border-radius:4px;transform:rotate(45deg) scale(.8)}
.subida{border:2px dashed var(--dx-linea);border-radius:12px;padding:22px;display:grid;justify-items:center;gap:4px;text-align:center}
.subida .flecha{width:40px;height:40px;border-radius:50%;background:var(--dx-azul);color:#fff;display:grid;place-items:center;font-weight:700}
.subida small{color:var(--dx-tenue)}
.barra{display:block;width:100%;height:8px;border-radius:99px;background:var(--dx-suave);margin-top:8px;overflow:hidden}
.barra span{display:block;height:100%;width:72%;background:#01CD9D;border-radius:inherit}
.dx-visual.activo .barra span{animation:dx-carga 1.6s var(--ease-out,ease) both}
@keyframes dx-carga{from{width:8%}}
.para-quien{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:14px}
.para-quien span{color:var(--dx-tenue);margin-right:4px}
.para-quien b{padding:6px 12px;border-radius:8px;border:1px solid var(--dx-linea)}
.para-quien b.sel{border-color:var(--dx-morado);color:var(--dx-morado)}
.versiones .version{padding:10px 12px;border-radius:10px;background:var(--dx-suave);margin-top:8px}
.versiones .version p{margin:4px 0 0;font-size:14px;line-height:1.45}
.etq{font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px;color:#fff}
.e1{background:var(--dx-azul)}.e2{background:#087A60}.e3{background:var(--dx-morado)}
.dx-pasos-puntos{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:10px;list-style:none;margin:0;padding:0}
.dx-pasos-puntos li{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--dx-suave);color:var(--dx-tenue);transition:background-color 300ms ease,color 300ms ease}
.dx-pasos-puntos li.activo{background:#C426D9;color:#fff}

/* ---------- 7. Mini menú de herramientas ---------- */
.dx-herramientas{padding:80px 0 110px}
.dx-tabs-caja{background:#EFF6FF;color:var(--ink);border-radius:20px;padding:22px 22px 48px}
.dx-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border-radius:14px;padding:8px}
.dx-tab{position:relative;overflow:hidden;border:0;border-radius:10px;background:transparent;color:var(--ink);font-weight:600;font-size:15px;padding:10px 16px;cursor:pointer;transition:background-color 200ms ease}
.dx-tab:hover{background:#EFF6FF}
.dx-tab.activa{background:#EFF6FF;color:var(--ink);box-shadow:inset 0 0 0 2px #0177E3}
.dx-tab::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#0177E3;transform:scaleX(0);transform-origin:left}
.dx-tab.activa.corriendo::after{animation:dx-tiempo var(--dx-ciclo,7s) linear forwards}
.dx-tabs-caja.parado .dx-tab.activa.corriendo::after{animation-play-state:paused}
@keyframes dx-tiempo{to{transform:scaleX(1)}}
.dx-pausa{margin-left:auto;width:40px;height:40px;border-radius:10px;border:0;background:#EFF6FF;cursor:pointer;display:grid;place-items:center}
.dx-pausa span{width:12px;height:14px;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
.dx-pausa[aria-pressed="true"] span{width:0;height:0;border-right:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.dx-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;padding:44px 26px 0}
.dx-panel[hidden]{display:none}
.dx-panel.activo{animation:dx-entra 420ms var(--ease-out,ease)}
@keyframes dx-entra{from{opacity:0;transform:translateY(10px)}}
.dx-panel .dx-kicker{color:var(--dx-morado)}
.dx-panel h3{font-size:clamp(28px,3vw,40px);color:var(--ink);margin:0 0 14px}
.dx-panel p:not(.dx-kicker){font-size:18px;margin:0 0 26px;color:#4F4850}
.dx-panel-ilus{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dx-panel-ilus li{background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 10px 24px -18px rgba(1,119,227,.6);padding:14px 18px;font-weight:600;display:flex;align-items:center;gap:12px}
.dx-panel-ilus li::before{content:"";width:12px;height:12px;border-radius:50%;background:#01CD9D;flex:none}
.dx-panel-ilus li:nth-child(2)::before{background:#FFA82A;border-radius:0;transform:rotate(45deg)}
.dx-panel-ilus li:nth-child(3)::before{background:#C426D9;border-radius:50% 0}

/* ---------- 8. Repartir visitas ---------- */
.dx-perfiles{padding:0 0 110px}
.dx-perfiles-caja{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:var(--dx-suave);color:var(--ink);border-radius:20px;padding:28px}
.dx-perfiles-caja img{width:100%;height:100%;max-height:440px;object-fit:cover;border-radius:14px}
.dx-perfiles-texto{padding:20px 20px 20px 0}
.dx-perfiles-texto h2{font-size:clamp(30px,3.4vw,44px);color:var(--ink);margin:0 0 12px}
.dx-perfiles-texto>p{color:#4F4850;font-size:18px;margin:0 0 26px}
.dx-perfiles-texto ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dx-perfiles-texto a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--dx-linea);border-radius:12px;padding:14px 18px;transition:border-color 200ms ease}
.dx-perfiles-texto a::after{content:"→";margin-left:auto;font-weight:700;color:var(--dx-morado)}
.dx-perfiles-texto a:hover{border-color:var(--dx-morado)}
.dx-perfiles-texto a b{font-family:Sora,sans-serif;min-width:110px}
.dx-perfiles-texto a span{color:#4F4850}

/* ---------- 9. Casos de éxito ---------- */
.dx-casos{padding:0 0 110px}
.dx-casos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dx-caso{background:#fff;border:1px solid var(--dx-linea);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.dx-caso.destacado{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;background:var(--dx-suave);border:0}
.dx-caso-foto{position:relative;display:block;border-radius:12px;overflow:hidden}
.dx-caso-foto img{display:block;width:100%;height:auto}
.dx-caso-foto span{position:absolute;left:14px;bottom:14px;background:#fff;font-weight:600;font-size:15px;padding:7px 12px;border-radius:8px}
.dx-caso blockquote{margin:0 0 18px;font-size:19px;line-height:1.5;font-weight:500}
.dx-caso.destacado blockquote{font-size:clamp(20px,2vw,26px);line-height:1.4}
.dx-firma{margin:0 0 18px;color:var(--dx-tenue);font-size:16px}
.dx-firma b{color:var(--ink)}
.dx-caso .dx-enlace{margin-top:auto;align-self:flex-start}

/* ---------- 10. Principios del libro blanco ---------- */
.dx-principios{background:var(--dx-suave);padding:100px 0}
.dx-principios-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dx-principios-grid article,.dx-principios-mas{background:#fff;border-radius:16px;padding:28px;border:1px solid var(--dx-linea)}
.romano{font-family:Sora,sans-serif;font-weight:700;font-size:40px;color:#C426D9;line-height:1}
.dx-principios-grid h3{font-size:21px;margin:18px 0 10px}
.dx-principios-grid p{margin:0;color:#4F4850}
.dx-principios-mas{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:#C426D9;color:#fff;border:0;transition:transform 200ms var(--ease-out,ease)}
.dx-principios-mas:hover{transform:translateY(-3px)}
.dx-principios-mas .romanos{display:flex;gap:8px;margin-bottom:auto;flex-wrap:wrap}
.dx-principios-mas .romanos i{font-style:normal;font-family:Sora,sans-serif;font-weight:700;font-size:15px;border:1px solid rgba(255,255,255,.6);border-radius:8px;padding:4px 9px}
.dx-principios-mas b{font-family:Sora,sans-serif;font-size:22px;margin-top:40px}
.dx-principios-mas span:last-child{color:#fff}

/* ---------- 11. Preguntas frecuentes ---------- */
.dx-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;padding:100px 0}
.dx-faq .dx-cabeza h2{font-size:clamp(30px,3.4vw,44px)}
.dx-faq-lista details{border-bottom:1px solid var(--dx-linea)}
.dx-faq-lista summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:18px}
.dx-faq-lista summary::-webkit-details-marker{display:none}
.dx-faq-lista summary::after{content:"+";font-size:26px;line-height:1;color:var(--dx-morado);transition:transform 200ms var(--ease-out,ease)}
.dx-faq-lista details[open]:not(.cerrando) summary::after{transform:rotate(45deg)}
.dx-faq-lista details p{margin:0 0 22px;color:#4F4850;max-width:640px}
.dx-faq-lista details a{color:var(--dx-morado);text-decoration:underline;text-underline-offset:3px}

/* ---------- 12. Llamada final ---------- */
.dx-cta{position:relative;text-align:center;padding:300px 0 240px;min-height:760px}
.dx-cta>*:not(.dx-gravedad){position:relative;z-index:1}
.dx-cta h2{font-size:clamp(40px,5.4vw,70px);margin:0 0 18px}
.dx-cta>p:not(.dx-micro){font-size:20px;color:#4F4850;max-width:620px;margin:0 auto 30px}
/* piezas del logo con gravedad: la caja no recibe clics, solo las piezas (el texto y el botón siguen funcionando) */
.dx-gravedad{position:absolute;inset:0;pointer-events:none;overflow:hidden;visibility:hidden}
.dx-gravedad.lista{visibility:visible}
.dx-pieza{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;z-index:2}
.dx-pieza.cogida{cursor:grabbing;z-index:3}
.dx-cta:has(.cogida){user-select:none}
.dx-pieza svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- 13. Banner de cierre (igual que en la home) ---------- */
.dx-cierre{background:#C426D9;padding:90px 0 75px}
.dx-cierre h2{font-size:clamp(34px,4.6vw,60px);line-height:1.16;letter-spacing:-.045em;margin:0 auto;max-width:1080px}
body:has(.dx-cierre)>footer{background:#C426D9;padding-top:35px}
body:has(.dx-cierre) .footer-grid{border-top:1px solid rgba(255,255,255,.35);padding-top:44px}
body:has(.dx-cierre) .footer-grid p,body:has(.dx-cierre) .footer-grid a:not(.brand),body:has(.dx-cierre) .footer-bottom{color:#fff}
body:has(.dx-cierre) .footer-bottom{border-top-color:rgba(255,255,255,.35)}

/* ---------- Pantallas medianas y móviles ---------- */
@media (max-width:980px){
  .dx-bento{grid-template-columns:1fr 1fr;grid-template-areas:"material tiempo" "perfil perfil" "justifica empieza"}
  .dx-principios-grid{grid-template-columns:1fr 1fr}
  .dx-faq{grid-template-columns:1fr;gap:10px}
}
@media (max-width:860px){
  .dx-como-grid,.dx-perfiles-caja,.dx-caso.destacado{grid-template-columns:1fr}
  .dx-perfiles-texto{padding:6px}
  /* los pasos: sin imagen fija; cada paso lleva su imagen debajo */
  .dx-pasos{display:flex;flex-direction:column;gap:22px;padding-top:64px}
  .dx-pasos-texto,.dx-pasos-visual{display:contents}
  .dx-paso{min-height:0;opacity:1;margin-top:30px}
  .dx-paso[data-paso="0"]{order:1}.dx-visual[data-paso="0"]{order:2}
  .dx-paso[data-paso="1"]{order:3}.dx-visual[data-paso="1"]{order:4}
  .dx-paso[data-paso="2"]{order:5}.dx-visual[data-paso="2"]{order:6}
  .dx-visual{position:static;opacity:1;transform:none;filter:none}
  .dx-pasos-puntos{display:none}
  .dx-panel{grid-template-columns:1fr;gap:26px;padding:30px 6px 0}
}
@media (max-width:700px){
  .dx-cta>p:not(.dx-micro){font-size:18px}
  .dx-bento{grid-template-columns:1fr;grid-template-areas:"material" "perfil" "tiempo" "justifica" "empieza"}
  .t-perfil,.t-decides{flex-direction:column;align-items:stretch}
  .ilus-perfil{width:100%}
  .t-empieza{min-height:280px}
  .dx-principios-grid,.dx-casos-grid{grid-template-columns:1fr}
  .dx-confianza{flex-direction:column;align-items:flex-start}
  .dx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .dx-tab{flex:none}
  .dx-pausa{position:sticky;right:0;flex:none;box-shadow:-10px 0 10px #fff}
  .dx-perfiles-texto a{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
  .dx-perfiles-texto a::after{grid-row:1/3;grid-column:2;align-self:center}
  .dx-perfiles-texto a b{min-width:0}
  .dx-como,.dx-principios,.dx-faq{padding:70px 0}
  .dx-ventajas,.dx-herramientas,.dx-perfiles,.dx-casos,.dx-cta{padding-bottom:70px}
  .dx-cierre{padding:64px 0 46px}.dx-cierre h2{font-size:34px}
  .dx-cta{padding:210px 0 200px;min-height:640px}
}

/* ---------- Reducir movimiento: solo fundidos cortos ---------- */
@media (prefers-reduced-motion:reduce){
  .dx-visual{transform:none;filter:none}
  .dx-panel.activo{animation:none}
  .dx-cursor{animation:none}
  .dx-visual.activo .barra span{animation:none}
}

/* ---------- Dentro del editor (/editar/): todo a la vista para poder cambiar cada texto ---------- */
.dx-editor .dx-pildora{display:none}
.dx-editor .dx-palabras{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em .4em;font-size:.55em;color:#C426D9}
.dx-editor .dx-pasos-visual{position:relative;top:0;margin-top:0;height:auto;display:grid;gap:20px}
.dx-editor .dx-visual{position:static;opacity:1;transform:none;filter:none}
.dx-editor .dx-paso{opacity:1;min-height:0;margin-bottom:40px}
.dx-editor .dx-panel[hidden]{display:grid;border-top:1px solid #CFE2F7;margin-top:30px}
.dx-editor .dx-figura{display:none}
.dx-editor .dx-cta{padding-top:40px;min-height:0}
.dx-editor .dx-gravedad{display:none}
.h-arbol span::before{content:"";position:absolute;top:-10px;left:50%;height:10px;border-left:3px solid rgba(255,255,255,.55)}
.dx-editor .h-arbol span::before{display:none}
/* logo en blanco cuando el pie es morado (fondo de color que no es negro) */
body:has(.dx-cierre)>footer .brand svg path{fill:#fff}
body:has(.dx-cierre)>footer .brand span{color:#fff}

/* ---------- Pasos con la plataforma (13/10): más parecidos a Nubo por dentro ---------- */
.dx-visual .app.plat{padding:18px}
.plat-cab{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--dx-linea)}
.plat-cab b{font-family:Sora,sans-serif;font-size:16px;margin-right:auto}
.plat-cab small{color:var(--dx-tenue);font-size:13px}
.plat-volver{color:var(--dx-tenue);font-weight:700}
.plat-btn{border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.plat-btn.azul{background:#0177E3}.plat-btn.morado{background:#C426D9}
.plat-riesgo{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font-size:13px;color:#4F4850;margin-bottom:12px}
.plat-riesgo i{display:flex;height:8px;border-radius:99px;overflow:hidden;background:#F0EBF1}
.plat-riesgo b{width:calc(var(--v) * 1%);background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.dx-visual.activo .plat-riesgo b,.dx-editor .plat-riesgo b{transform:none}
.plat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.plat-tabs span{font-size:12px;font-weight:600;color:#9C08AE;padding:5px 10px;border-radius:99px;background:#FBF3FC}
.plat-tabs span.sel{background:#C426D9;color:#fff}
.plat-tit{margin:0 0 8px;font-family:Sora,sans-serif;font-weight:700;font-size:14px}
.plat-hab{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center;font-size:13px;margin-top:7px}
.plat-hab i{height:8px;border-radius:99px;background:#F0EBF1;position:relative;overflow:hidden}
.plat-hab i::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:inherit;background:linear-gradient(90deg,#FF0183,#FFA82A);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1) .2s}
.dx-visual.activo .plat-hab i::before,.dx-editor .plat-hab i::before{transform:none}
/* paso 2: subir «Examen Lengua» */
.subir .subida{padding:20px}
.subir .doc{position:relative;width:44px;height:54px;border-radius:6px;background:#fff;border:2px solid #0177E3;display:grid;align-content:center;gap:5px;padding:0 9px;margin-bottom:6px}
.subir .doc i{display:block;height:3px;border-radius:2px;background:#BBD8F6}
.subir.carga .doc{animation:dx-sube 900ms cubic-bezier(.22,1,.36,1) both}
@keyframes dx-sube{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.subir .barra span{width:0;transition:none}
.subir.carga[data-fase="0"] .barra span{background:#0177E3;animation:dx-llena 2.4s ease-out both}
@keyframes dx-llena{from{width:4%}to{width:100%}}
.subir[data-fase="1"] .barra span{width:100%;animation:none;background:#01CD9D}
.estado-subida .es1{display:none;color:#00624A;font-weight:700}
.subir[data-fase="1"] .estado-subida .es0{display:none}
.subir[data-fase="1"] .estado-subida .es1{display:inline}
/* paso 3: la misma lectura en cuatro niveles, cambia cada 4 s */
.dx-visual .app.niveles{position:relative;min-height:330px;padding:26px 24px 46px}
.nivel{position:absolute;inset:26px 24px 46px;opacity:0;transform:translateY(6px);transition:opacity 600ms ease,transform 600ms ease}
.niveles[data-nivel="0"] .n0,.niveles[data-nivel="1"] .n1,.niveles[data-nivel="2"] .n2,.niveles[data-nivel="3"] .n3{opacity:1;transform:none}
.nivel::before{content:"";position:absolute;left:-24px;right:-24px;top:-26px;height:6px;background:var(--c);border-radius:16px 16px 0 0}
.nivel-etq{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--c);margin-bottom:12px}
.n0 .nivel-etq{color:#4F4850}
.nivel p{margin:0 0 14px;font-size:17px;line-height:1.55;color:#1C141D}
.nivel p.serif{font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.45}
.nivel small{display:block;color:var(--dx-tenue);font-size:13px;margin-top:18px}
.n2 p.ancho{line-height:2.15}
.n2 b.m{color:#C426D9}.n2 b.a{color:#0177E3}
.n3 p.apoyo{color:#8C848E;font-size:15px;margin-top:-8px}
.caras{position:absolute;right:-6px;top:-50px;display:flex}
.caras img,.mini-caras img,.mini-yo img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid var(--c);background:#fff;margin-left:-12px}
.caras img:first-child,.mini-caras img:first-child{margin-left:0}
.niveles-puntos{position:absolute;left:24px;bottom:16px;display:flex;gap:6px;list-style:none;margin:0;padding:0}
.niveles-puntos li{width:8px;height:8px;border-radius:99px;background:#E4DDE6;transition:width 300ms ease,background-color 300ms ease}
.niveles-puntos li.sel{width:22px;background:#C426D9}
.dx-editor .nivel{position:static;opacity:1;transform:none;margin-bottom:30px}
.dx-editor .dx-visual .app.niveles{min-height:0}
@media (prefers-reduced-motion:reduce){.nivel{transition:none}}

/* ---------- «Todo en un sitio» (13/10): cada pestaña con su color y su pantalla; sin fondo azul ---------- */
.dx-tabs-caja{background:var(--dx-suave)}
.dx-tab{--t:#C426D9}
.dx-tab:hover{background:color-mix(in srgb,var(--t) 9%,#fff)}
.dx-tab.activa{background:color-mix(in srgb,var(--t) 12%,#fff);box-shadow:inset 0 0 0 2px var(--t)}
.dx-tab::after{background:var(--t)}
.dx-pausa{background:var(--dx-suave)}
.dx-panel .dx-kicker{color:var(--t,#C426D9)}
.dx-panel-ilus{display:block}
.mini{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 24px 48px -30px rgba(28,20,29,.35),0 0 0 1px rgba(28,20,29,.05);display:grid;gap:9px;border-top:5px solid var(--t,#C426D9)}
.mini-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--dx-linea);margin-bottom:2px}
.mini-cab b{font-family:Sora,sans-serif;font-size:15px}
.mini-cab small{color:var(--dx-tenue);font-size:13px;font-weight:600}
.mini-chip{display:block;border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;background:color-mix(in srgb,var(--c) 10%,#fff);border-left:4px solid var(--c)}
.mini-pie{margin:2px 0 0;font-size:14px;font-weight:700;color:#00624A}
.mini-caras{display:flex;align-items:center}
.mini-caras img{width:38px;height:38px}
.mini-caras em{margin-left:8px;font-style:normal;font-weight:700;color:#4F4850;font-size:14px}
.mini-barra{display:grid;grid-template-columns:110px 1fr 38px;gap:10px;align-items:center;font-size:14px}
.mini-barra i{height:10px;border-radius:99px;background:#F0EBF1;position:relative;overflow:hidden}
.mini-barra i::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);background:var(--c);border-radius:inherit}
.mini-barra b{text-align:right;font-family:Sora,sans-serif}
.mini-fila{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:var(--dx-suave);font-size:14px}
.mini-fila em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:#0061BC;border-radius:6px;padding:2px 8px}
.mini-yo{display:flex;align-items:center;gap:10px}
.mini-yo img{width:36px;height:36px;margin:0}
.mini-aula{display:grid;grid-template-columns:repeat(9,1fr);gap:7px}
.mini-aula i{aspect-ratio:1;border-radius:50%;border:3px solid #01CD9D;background:#E3F8F2}
.mini-aula i.o{border-color:#FFA82A;background:#FFF0DA;border-radius:30%}
.mini-aula i.r{border-color:#FF0183;background:#FFE6F2;border-radius:6px}
@media (max-width:700px){
  /* 6 pestañas en 2 columnas × 3 filas, siempre visibles */
  .dx-tabs{display:grid;grid-template-columns:1fr 1fr;flex-wrap:wrap;overflow:visible;gap:6px}
  .dx-tab{flex:initial;font-size:14px;padding:10px 8px;text-align:center;white-space:normal;line-height:1.25}
  .dx-pausa{position:static;grid-column:1/-1;width:100%;height:34px;box-shadow:none}
  .plat-hab{grid-template-columns:110px 1fr}
  .plat-btn.morado{display:none}
  .dx-visual .app.niveles{min-height:360px}
  .caras{top:-44px}
}
/* las caras: redondas y con el borde del color de su nivel (gana a la regla general de imágenes de brand-refresh.css) */
body main.dx .caras img,body main.dx .mini-caras img,body main.dx .mini-yo img{border-radius:50%;border:3px solid var(--c)}
/* paso 3 al ritmo del scroll (solo en pantallas anchas): el texto se queda fijo y la tarjeta cambia de nivel al bajar */
@media (min-width:981px){
  .dx-paso[data-paso="2"]:has(.paso-fijo){display:block;min-height:260vh}
  .dx-paso[data-paso="2"] .paso-fijo{position:sticky;top:calc(50vh - 130px)}
}
.n3 p.apoyo[dir="rtl"]{text-align:right;font-size:17px;line-height:1.7;font-family:"Geeza Pro","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif}
/* tarjetas de «Todo en un sitio»: sombra de color sólida abajo y a la derecha (como las de los pasos), sin línea arriba */
.mini{border-top:0;box-shadow:12px 12px 0 color-mix(in srgb,var(--t,#C426D9) 22%,#fff),0 0 0 1px rgba(28,20,29,.06)}

/* ---------- /docentes/adaptar-materiales: tus materiales de siempre ---------- */
.dx-formatos{padding:20px 0 110px}
.dx-formatos-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:980px}
.dx-formatos .mini-fila span{color:#4F4850}
.dx-correo{margin:4px 0 0;padding:12px;border-radius:10px;background:var(--dx-suave);font-size:15px;line-height:1.5}
.dx-correo span{display:inline-block;margin-top:6px;font-size:14px;font-weight:700;color:#0061BC}
@media (max-width:700px){.dx-formatos-grid{grid-template-columns:1fr;gap:28px}.dx-formatos{padding-bottom:70px}}
/* cierre con un solo mensaje: la franja morada queda como suelo de las piezas, sin línea sobre el pie */
.dx-cierre.dx-suelo{padding:0;height:56px}
body:has(.dx-suelo) .footer-grid{border-top:0}

/* ---------- Ventajas v2: creatividades vivas, con el estilo de las páginas B2C ---------- */
/* material: un PDF que se reparte en tres versiones */
.ilus-mat2{display:grid;grid-template-columns:auto 40px 1fr;align-items:center;gap:10px;min-height:150px}
.m2-doc{display:grid;gap:5px;width:64px;padding:10px 9px;border-radius:8px;background:#fff;border:1.5px solid #CFC6D2;box-shadow:0 10px 20px -12px rgba(28,20,29,.4);animation:m2-doc 6s ease-in-out infinite}
.m2-doc b{justify-self:start;font:700 11px Sora,sans-serif;color:#fff;background:#FF0183;border-radius:4px;padding:1px 5px}
.m2-doc i{display:block;height:5px;border-radius:5px;background:#E3DDE6}.m2-doc i:nth-of-type(2n){width:70%}
@keyframes m2-doc{0%,100%{transform:none}10%,20%{transform:translateX(6px) scale(1.04)}}
.m2-linea{position:relative;height:2px;background:#E6DEEA;border-radius:2px;overflow:hidden}
.m2-linea i{position:absolute;inset:0;background:#C426D9;transform-origin:left;animation:m2-linea 6s ease-in-out infinite}
@keyframes m2-linea{0%,15%{transform:scaleX(0)}28%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.m2-vers{display:grid;gap:7px}
.m2-vers span{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 45%,#fff);border-radius:10px;padding:6px 10px;font-size:14px;font-weight:700;box-shadow:-3px 3px 0 var(--c);opacity:0;transform:translateX(-10px);animation:m2-ver 6s cubic-bezier(.34,1.4,.64,1) infinite}
.m2-vers span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.m2-vers span:nth-child(2){animation-delay:.25s}.m2-vers span:nth-child(3){animation-delay:.5s}
@keyframes m2-ver{0%,28%{opacity:0;transform:translateX(-10px)}36%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-10px)}}
/* perfil: el mapa vivo de /perfil-vivo, en compacto */
.ilus-grafo{padding:0;background:none;min-height:0;width:min(46%,380px);flex:none}
.ilus-grafo .bx-grafo{width:100%;box-shadow:0 20px 40px -30px rgba(28,20,29,.4);border:1px solid var(--dx-linea);padding:14px 14px 6px}
.ilus-grafo .bx-grafo-pie{display:none}
.ilus-grafo .bx-grafo-ley{top:12px;right:12px}
.ilus-grafo .bx-grafo-cab b{font-size:15px}
/* tiempo: dos barras que se comparan */
.ilus-t2{display:grid;gap:12px;align-content:center;min-height:150px}
.t2-fila{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:10px}
.t2-fila small{font-size:14px;font-weight:700;color:#4F4850}
.t2-fila b{font:700 22px Sora,sans-serif;color:#6B636D}.t2-fila b.mor{color:#9C08AE}
.t2-barra{height:14px;border-radius:14px;background:#fff;overflow:hidden}
.t2-barra i{display:block;height:100%;border-radius:14px;transform-origin:left;animation:t2-crece 6s cubic-bezier(.65,0,.35,1) infinite}
.t2-barra.gris i{background:#B3A9B6;width:100%}
.t2-barra.morada i{background:linear-gradient(90deg,#C426D9,#FF0183);width:25%;animation-delay:.3s}
@keyframes t2-crece{0%{transform:scaleX(0)}25%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.t2-ahorro{margin:2px 0 0;justify-self:start;border-radius:99px;background:#E6F8F3;color:#00624A;font-weight:700;font-size:14px;padding:3px 12px;animation:t2-ahorro 6s ease infinite}
@keyframes t2-ahorro{0%,30%{opacity:0;transform:translateY(4px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}
/* justificado: el registro de la adaptación se rellena */
.ilus-j2{display:grid;gap:7px;min-height:150px;align-content:start}
.j2-cab{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#4F4850;margin-bottom:2px}
.j2-cab b{font:700 11px Sora,sans-serif;color:#fff;background:#0177E3;border-radius:4px;padding:2px 6px}
.j2-fila{display:grid;gap:1px;background:#fff;border-radius:10px;padding:7px 10px;font-size:14px;font-weight:600;border-left:4px solid #01CD9D;opacity:0;transform:translateY(6px);animation:j2-fila 7s ease infinite}
.j2-fila small{font-size:12px;font-weight:700;color:#6B636D;text-transform:uppercase;letter-spacing:.04em}
.j2-fila:nth-of-type(2){animation-delay:.6s}.j2-fila:nth-of-type(3){animation-delay:1.2s}
@keyframes j2-fila{0%,8%{opacity:0;transform:translateY(6px)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
/* tú decides: cada cambio se valida y, al final, todo */
.ilus-d2{display:grid;gap:7px;min-height:0;padding:16px 18px;width:min(50%,420px);flex:none}
.d2-fila{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:7px 10px}
.d2-fila b{font-size:14px}.d2-fila small{font-size:13px;color:#4F4850}.d2-fila em{font-style:normal;color:#9C08AE;font-weight:700}
.d2-sw{position:relative;width:34px;height:20px;border-radius:99px;background:#D9D2DA;animation:d2-sw 7s ease infinite}
.d2-sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;animation:d2-bola 7s ease infinite}
.d2-fila:nth-child(2) .d2-sw,.d2-fila:nth-child(2) .d2-sw::after{animation-delay:.8s}.d2-fila:nth-child(3) .d2-sw,.d2-fila:nth-child(3) .d2-sw::after{animation-delay:1.6s}
@keyframes d2-sw{0%,12%{background:#D9D2DA}18%,90%{background:#01CD9D}100%{background:#D9D2DA}}
@keyframes d2-bola{0%,12%{transform:none}18%,90%{transform:translateX(14px)}100%{transform:none}}
.d2-ok{justify-self:start;border-radius:99px;background:#00A57E;color:#fff;font-weight:700;font-size:14px;padding:4px 12px;animation:d2-ok 7s ease infinite}
@keyframes d2-ok{0%,40%{opacity:0;transform:scale(.8)}48%,90%{opacity:1;transform:none}100%{opacity:0}}
/* quieto (reducir movimiento o editor): estado final */
.bx-quieto :is(.m2-doc,.m2-linea i,.m2-vers span,.t2-barra i,.t2-ahorro,.j2-fila,.d2-sw,.d2-sw::after,.d2-ok){animation:none;opacity:1;transform:none}
.bx-quieto .d2-sw{background:#01CD9D}.bx-quieto .d2-sw::after{transform:translateX(14px)}
@media (max-width:1100px){.ilus-grafo{width:min(50%,360px)}}
@media (max-width:700px){.t-perfil,.t-decides{flex-direction:column;align-items:stretch}.ilus-grafo,.ilus-d2{width:100%}.ilus-mat2{grid-template-columns:auto 24px 1fr}}
.ilus-grafo .bx-grafo-ley{position:static;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
body main.dx .dx-confianza .dx-sellos img{border-radius:50%;border:3px solid #fff}
@media (max-width:700px){.t-empieza{padding-top:120px}}