/* ============================================================
   DoceIA — Portada (index.html)
   Hero con el arco de materiales, «Hola de nuevo», franja de vídeos,
   «Así funciona» y el mosaico «Qué puedes crear».
   Se carga después de landing.css y header.css (la cabecera común), solo aquí.
   ============================================================ */

:root{
  --hm-v:#6D3BFF; --hm-v2:#5B2EF5; --hm-v3:#8B6CFF;
  --hm-lav:#F4F1FF; --hm-bg:#FBFAFF;
  --hm-ink:#111827; --hm-ink-2:#5B6475;
  --hm-ink-3:#6A7183; /* atenuado legible (AA 4.9:1). #8B93A7 solo para adornos */
  --hm-mute:#8B93A7;
  --hm-line:#E7E3F5;
  --hm-teal:#45D1C6; --hm-orange:#FF8C42; --hm-yellow:#F6B61E; --hm-pink:#FF4FA3; --hm-blue:#4B7BFF;
  --hm-sh1:0 10px 30px rgba(109,59,255,.08), 0 4px 16px rgba(17,24,39,.05);
  --hm-sh2:0 24px 60px rgba(109,59,255,.14), 0 8px 20px rgba(17,24,39,.06);
  --hm-mw:1320px;
  /* --hm-hdr-h vive en header.css (72px; 64px en móvil) */
  /* Las secciones heredadas de la portada adoptan la misma paleta */
  --p:#6D3BFF; --p2:#7C5CFF; --p3:#5B2EF5; --p-bg:#F4F1FF; --p-pal:#ECE7FF;
  --border:#E7E3F5; --ink:#111827;
}

body{ background:var(--hm-bg); background-attachment:scroll; }
.hm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-w{width:100%;max-width:var(--hm-mw);margin-inline:auto;padding-inline:2rem}


/* ── HOLA DE NUEVO (cuenta recordada, sin sesión) ─────── */
.hm-back{display:none}
.has-known .hm-back{display:block}
.has-known .hm-hero{display:none}
.hm-back{
  position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:calc(var(--hm-hdr-h) + 3rem) 1rem 3.5rem;
  background:linear-gradient(180deg,#6D3BFF 0%,#5A55F0 22%,#3E8FD8 52%,#7CD4E2 76%,#E4F7FA 100%);
  color:#fff;text-align:center;
}
.hm-back-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hm-back h1{margin:0;font-family:var(--df);font-weight:600;font-size:clamp(3rem,8vw,6.2rem);line-height:1;letter-spacing:-.045em;text-shadow:0 4px 30px rgba(40,10,120,.25)}
.hm-back-sub{margin:.9rem 0 2.4rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(255,255,255,.92)}
.hm-back-card{
  display:flex;flex-direction:column;align-items:center;width:min(25rem,100%);padding:2.1rem 2rem 2rem;border-radius:22px;
  background:#fff;color:var(--hm-ink);box-shadow:0 30px 70px rgba(30,20,90,.28);
}
.hm-back-av{display:grid;place-items:center;width:104px;height:104px;margin-bottom:1.1rem;border-radius:50%;background:linear-gradient(135deg,#8B6CFF,#5B2EF5);color:#fff;font:700 2.3rem var(--df);box-shadow:0 0 0 6px #F1ECFF}
.hm-back-name{margin:0;font:700 1.55rem/1.2 var(--df);letter-spacing:-.02em;overflow-wrap:anywhere}
.hm-back-mail{margin:.35rem 0 1.5rem;font-size:1.06rem;color:var(--hm-ink-2);overflow-wrap:anywhere}
.hm-back-go{width:100%}
.hm-back-other{
  display:inline-flex;align-items:center;gap:.6rem;min-height:48px;margin-top:2rem;padding:.7rem 1.4rem;border-radius:14px;
  background:#fff;color:var(--hm-ink);font:600 1rem var(--df);text-decoration:none;box-shadow:0 10px 26px rgba(30,20,90,.16);transition:transform .2s,box-shadow .2s;
}
.hm-back-other svg{width:20px;height:20px}
.hm-back-other:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(30,20,90,.22)}
.hm-back-forget{margin-top:1rem;padding:.4rem .6rem;border:0;border-radius:8px;background:none;color:#1B3550;font:500 .95rem var(--df);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hm-back-forget:hover{color:#0B1E33}
.hm-back-go:focus-visible,.hm-back-other:focus-visible,.hm-back-forget:focus-visible{outline:3px solid #FFC772;outline-offset:3px}
/* Formatos flotando alrededor (decorativo) */
.hm-back-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.hm-back-f{position:absolute;display:grid;place-items:center;animation:hm-float 7s ease-in-out infinite;animation-delay:var(--fd,0s)}
.hm-back-f img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(20,10,70,.28))}
.hm-back-f.f1{left:9%;top:30%;width:150px;rotate:-8deg}
.hm-back-f.f2{left:20%;top:56%;width:150px;rotate:6deg;--fd:-2s}
.hm-back-f.f3{left:5%;top:66%;--fd:-4s}
.hm-back-f.f4{right:9%;top:28%;width:165px;rotate:7deg;--fd:-1s}
.hm-back-f.f5{right:20%;top:58%;width:140px;rotate:-6deg;--fd:-3s}
.hm-back-f.f6{right:5%;top:70%;--fd:-5s}
.hm-back-kh{grid-template-columns:1fr 1fr;gap:6px;width:112px;padding:12px;border-radius:20px;background:#46178F;rotate:-10deg;box-shadow:0 18px 30px rgba(20,10,70,.3)}
.hm-back-kh{place-items:stretch}
.hm-back-kh i{height:30px;border-radius:7px}
.hm-back-g{display:flex;gap:10px;padding:12px 14px;border-radius:18px;background:#fff;rotate:8deg;box-shadow:0 18px 30px rgba(20,10,70,.25)}
.hm-back-g img{width:32px;height:32px;filter:none}
@keyframes hm-float{50%{translate:0 -14px}}
@media (max-width:1099px){
  .hm-back-f.f2,.hm-back-f.f5{display:none}
  .hm-back-f.f1{left:3%;top:22%;width:110px}
  .hm-back-f.f4{right:3%;top:20%;width:115px}
}
@media (max-width:767px){
  .hm-back{min-height:auto;padding:calc(var(--hm-hdr-h) + 1.75rem) 1rem 2.5rem}
  .hm-back-deco{display:none}
  .hm-back-sub{margin-bottom:1.6rem}
  .hm-back-card{padding:1.6rem 1.25rem 1.4rem}
  .hm-back-av{width:84px;height:84px;font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){.hm-back-f{animation:none}}

/* ── HERO ────────────────────────────────────────────── */
.hm-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--hm-hdr-h) + 2rem) 0 2rem}
.hm-hero::before,.hm-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hm-hero::before{width:980px;height:980px;right:-260px;top:-300px;background:radial-gradient(closest-side,rgba(139,108,255,.20),rgba(139,108,255,0))}
.hm-hero::after{width:720px;height:720px;left:-360px;top:160px;background:radial-gradient(closest-side,rgba(69,209,198,.10),rgba(69,209,198,0))}
.hm-hero-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:2.5rem;align-items:center}
.hm-hero-copy{min-width:0}

.hm-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem .42rem .75rem;border-radius:999px;
  background:var(--hm-lav);border:1px solid #E6DFFF;color:var(--hm-v2);
  font-family:var(--df);font-size:.9rem;font-weight:600;line-height:1.2;
}
.hm-eyebrow svg{width:16px;height:16px}
.hm-h1{
  margin:1.1rem 0 1.15rem;font-family:var(--df);font-weight:800;color:var(--hm-ink);
  font-size:clamp(2.55rem,3.95vw,4.15rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance;
}
.hm-h1 em{font-style:normal;color:var(--hm-v)}
.hm-sub{max-width:33rem;font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.6;color:var(--hm-ink-2)}
.hm-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hm-trust{display:flex;flex-wrap:wrap;gap:.6rem 1.35rem;margin-top:1.4rem;font-size:.95rem;color:var(--hm-ink-2)}
.hm-trust li{display:inline-flex;align-items:center;gap:.45rem}
.hm-trust svg{width:20px;height:20px;flex-shrink:0;color:var(--hm-v)}

/* Entrada escalonada (sin saltos: solo opacidad y un leve desplazamiento) */
.hm-in{animation:hm-rise .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0) * 80ms + 60ms)}
@keyframes hm-rise{from{opacity:0;translate:0 14px}}

/* ── ARCO DE MATERIALES ──────────────────────────────── */
/* Lienzo de diseño de 720×560: todo lo de dentro se mide en em y escala
   con el ancho de la columna (1em = 16 px de diseño). */
.hm-orbit{position:relative;min-width:0}
.hm-stage{position:relative;width:100%;max-width:720px;margin-inline:auto;aspect-ratio:720/560;container-type:inline-size}
.hm-stage-in{position:absolute;inset:0;font-size:calc(100cqw / 45)}

.hm-glow{position:absolute;left:50%;top:60%;width:36em;height:30em;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,108,255,.24),rgba(139,108,255,.08) 55%,rgba(139,108,255,0));pointer-events:none}
.hm-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hm-arc-line{fill:none;stroke:url(#hm-arc-grad);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:hm-draw 1.2s .2s cubic-bezier(.65,0,.35,1) forwards}
.hm-arc-inner{fill:none;stroke:#D8CEFF;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:2 7;opacity:0;animation:hm-fade .8s .9s ease forwards}
.hm-link{stroke:var(--hm-v);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.45;stroke-dasharray:1;stroke-dashoffset:0}
.hm-link.is-drawing{animation:hm-draw .45s ease-out}
.hm-link-dot{fill:var(--hm-v);transition:opacity .2s}
.hm-link-halo{fill:rgba(109,59,255,.18)}
@keyframes hm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hm-fade{to{opacity:1}}

/* Nodos: un botón por tipo de material sobre el arco */
.hm-nodes{position:absolute;inset:0;z-index:4;pointer-events:none}
.hm-node{
  position:absolute;left:calc(var(--x) / 7.2 * 1%);top:calc(var(--y) / 5.6 * 1%);
  width:5.5em;height:5.25em;margin:-2.625em 0 0 -2.75em;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;pointer-events:auto;border-radius:1.3em;
  rotate:var(--tilt,0deg);transition:translate .25s ease,scale .25s ease;
  animation:hm-pop .55s cubic-bezier(.2,.8,.2,1.15) backwards;animation-delay:calc(var(--i,0) * 60ms + 450ms);
}
@keyframes hm-pop{from{opacity:0;scale:.82}}
.hm-node-in{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.42em;
  width:100%;height:100%;padding:.45em .3em;background:#fff;border:1px solid var(--hm-line);border-radius:1.3em;
  box-shadow:var(--hm-sh1);transition:border-color .2s,box-shadow .2s;
  animation:hm-float 5.6s ease-in-out infinite alternate;animation-delay:calc(var(--f,0) * -.7s);
}
@keyframes hm-float{from{translate:0 0}to{translate:0 -4px}}
.hm-node:hover{translate:0 -5px;scale:1.03}
.hm-node:focus{outline:none}
.hm-node:focus-visible .hm-node-in{outline:3px solid var(--hm-v);outline-offset:3px}
.hm-node[aria-pressed="true"]{scale:1.04}
.hm-node[aria-pressed="true"] .hm-node-in{border-color:var(--hm-v);box-shadow:0 0 0 .28em rgba(109,59,255,.13),0 1.1em 2.4em rgba(109,59,255,.26)}
.hm-node[aria-pressed="true"] .hm-node-lbl{color:var(--hm-v2)}
/* Marca de seleccionado: el estado no depende solo del color */
.hm-node-in::after{
  content:"";position:absolute;top:-.45em;right:-.45em;width:1.25em;height:1.25em;border-radius:50%;
  background:var(--hm-v) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:0 0 0 .15em #fff;opacity:0;scale:.4;transition:opacity .2s,scale .25s cubic-bezier(.2,.8,.2,1.3);
}
.hm-node[aria-pressed="true"] .hm-node-in::after{opacity:1;scale:1}

.hm-ic{
  --acc:var(--hm-v);
  display:grid;place-items:center;flex-shrink:0;width:2.5em;height:2.5em;border-radius:.8em;color:#fff;
  background:var(--acc);background:linear-gradient(145deg,var(--acc),color-mix(in srgb,var(--acc) 72%,#1d1145));
  box-shadow:0 .35em .9em color-mix(in srgb,var(--acc) 30%,transparent);
}
.hm-ic svg{width:1.3em;height:1.3em}
.hm-ic--brand{background:#fff;border:1px solid var(--hm-line);box-shadow:none}
.hm-ic--brand img{width:1.55em;height:1.55em;object-fit:contain}
.hm-node-lbl{font-family:var(--df);font-size:.82em;font-weight:600;line-height:1.12;color:var(--hm-ink);text-align:center;transition:color .2s}

/* Segundo nivel: «Vídeos IA» agrupa los dos formatos audiovisuales */
.hm-vgroup{
  position:absolute;left:80.5%;top:71.4%;width:8.6em;padding:.6em;border-radius:1.25em;pointer-events:auto;
  background:rgba(255,255,255,.92);border:1px dashed #F3A9CF;box-shadow:var(--hm-sh1);
  animation:hm-pop .55s cubic-bezier(.2,.8,.2,1.15) backwards;animation-delay:1s;
}
.hm-vgroup-h{display:flex;align-items:center;gap:.45em;margin:0 0 .5em .1em;font-family:var(--df);font-size:.78em;font-weight:700;color:var(--hm-ink)}
.hm-vgroup-h .hm-ic{width:1.9em;height:1.9em;border-radius:.6em}
.hm-vgroup-h .hm-ic svg{width:1.05em;height:1.05em}
.hm-vgroup-list{display:flex;flex-direction:column;gap:.35em}
.hm-node--sub{
  position:relative;left:auto;top:auto;width:100%;height:auto;margin:0;rotate:none;animation:none;border-radius:.8em;
}
.hm-node--sub .hm-node-in{
  flex-direction:row;justify-content:flex-start;gap:.45em;height:auto;min-height:2.4em;padding:.35em .55em;
  border-radius:.8em;box-shadow:none;animation:none;
}
.hm-node--sub .hm-node-in svg{width:1em;height:1em;flex-shrink:0;color:var(--hm-pink)}
.hm-node--sub .hm-node-lbl{font-size:.8em;text-align:left}
.hm-node--sub .hm-node-in::after{top:-.35em;right:-.35em;width:1em;height:1em}
.hm-node--sub:hover{translate:0 -2px;scale:1}
.hm-node--sub[aria-pressed="true"]{scale:1}

/* Tarjeta de apoyo (decorativa) */
.hm-support{
  position:absolute;left:2.5%;top:66.4%;width:10.75em;height:10em;padding:.75em;z-index:2;rotate:-7deg;
  background:rgba(255,255,255,.94);border:1px solid var(--hm-line);border-radius:1.2em;box-shadow:var(--hm-sh1);
  animation:hm-rise .7s .7s cubic-bezier(.2,.7,.2,1) backwards;
}
.hm-support-h{display:flex;align-items:center;gap:.4em;font-family:var(--df);font-size:.72em;font-weight:700;color:var(--hm-ink)}
.hm-support-h .hm-ic{width:1.6em;height:1.6em;border-radius:.5em}
.hm-support-h .hm-ic svg{width:.95em;height:.95em}
.hm-support-lines{display:grid;gap:.38em;margin:.75em 0 .6em}
.hm-support-lines i{display:block;height:.38em;border-radius:99px;background:#ECE8F8}
.hm-support-lines i:nth-child(2){width:86%}.hm-support-lines i:nth-child(4){width:64%}
.hm-support svg.hm-ill{display:block;width:100%;height:3.7em;border-radius:.6em}

/* Pausa del recorrido automático */
.hm-orbit-pause{
  position:absolute;top:0;right:0;z-index:5;display:inline-flex;align-items:center;gap:.4rem;
  min-height:36px;padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.85);
  border:1px solid var(--hm-line);color:var(--hm-ink-2);font-family:var(--df);font-size:.8rem;font-weight:600;cursor:pointer;
}
.hm-orbit-pause:hover{color:var(--hm-v2);border-color:#D9D0FF}
.hm-orbit-pause svg{width:14px;height:14px}
.hm-orbit-pause[hidden]{display:none}

/* ── VISTA PREVIA ────────────────────────────────────── */
.hm-pv{
  position:absolute;left:20.83%;top:33.9%;width:26.25em;height:20.6em;z-index:3;
  display:flex;flex-direction:column;padding:.95em 1.05em;
  background:#fff;border:1px solid var(--hm-line);border-radius:1.5em;box-shadow:var(--hm-sh2);
  animation:hm-rise .7s .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.hm-pv-inner{display:flex;flex-direction:column;min-height:0;flex:1;transition:opacity .2s ease,translate .2s ease}
.hm-pv-inner.is-out{opacity:0;translate:0 5px}
.hm-pv-head{display:flex;align-items:center;gap:.5em;padding-bottom:.7em;margin-bottom:.75em;border-bottom:1px solid #F0EDF9}
.hm-pv-head .hm-ic{width:1.9em;height:1.9em;border-radius:.6em}
.hm-pv-head .hm-ic svg{width:1.05em;height:1.05em}
.hm-pv-head .hm-ic--brand img{width:1.2em;height:1.2em}
.hm-pv-title{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--df);font-size:.95em;font-weight:700;color:var(--hm-ink);white-space:nowrap}
.hm-pv-chip{padding:.22em .55em;border-radius:.5em;border:1px solid var(--hm-line);font-size:.66em;font-weight:600;color:var(--hm-ink-2);white-space:nowrap}
.hm-pv-demo{padding:.25em .6em;border-radius:99px;background:#FFF4E5;color:#8A4B00;font-size:.64em;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.hm-pv-body{flex:1;min-height:0;font-size:.8em;line-height:1.5;color:var(--hm-ink-2)}
.hm-pv-foot{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.7em;padding-top:.7em;border-top:1px solid #F0EDF9}
.hm-pv-note{font-size:.68em;color:var(--hm-ink-3);line-height:1.35}
.hm-mini-btn{
  display:inline-flex;align-items:center;gap:.35em;min-height:2.4em;padding:.4em .9em;border-radius:.7em;
  border:1px solid #D9D0FF;background:#fff;color:var(--hm-v2);font-family:var(--df);font-size:.72em;font-weight:600;cursor:pointer;
}
.hm-mini-btn svg{width:1.1em;height:1.1em}
.hm-mini-btn--p{background:var(--hm-v);border-color:var(--hm-v);color:#fff}
.hm-mini-btn:disabled{opacity:.45;cursor:default}
.hm-mini-btn:not(:disabled):hover{border-color:var(--hm-v)}
.hm-mini-btn--p:not(:disabled):hover{background:var(--hm-v2)}

/* Test */
.hm-test{display:grid;grid-template-columns:minmax(0,1fr) 7.6em;gap:.9em;height:100%}
.hm-q-n{font-size:.82em;color:var(--hm-ink-3)}
.hm-q-t{margin:.2em 0 .65em;font-family:var(--df);font-size:1.08em;font-weight:600;line-height:1.3;color:var(--hm-ink)}
.hm-opts{display:grid;gap:.32em}
.hm-opts li{display:flex;align-items:center;gap:.55em;padding:.32em .55em;border:1px solid #EEEAF8;border-radius:.65em;color:var(--hm-ink);font-size:.95em;background:#FCFBFF}
.hm-opts li.is-ok{border-color:var(--hm-v);background:#F6F2FF;font-weight:600}
.hm-opt-k{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;border:1px solid var(--hm-line);background:#fff;font-size:.8em;font-weight:700;color:var(--hm-ink-2);flex-shrink:0}
.hm-opt-ok{margin-left:auto;display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--hm-v);color:#fff}
.hm-opt-ok svg{width:.85em;height:.85em}
.hm-test-fig{margin:0;border-radius:.9em;overflow:hidden;align-self:stretch;background:#EEE8FF}
.hm-test-fig svg{display:block;width:100%;height:100%}

/* Documentos (resumen, guía, Docs) */
.hm-doc-h{margin:0 0 .45em;font-family:var(--df);font-size:1.12em;font-weight:700;color:var(--hm-ink)}
.hm-doc p{margin:0 0 .5em;line-height:1.48}
.hm-tags{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.15em}
.hm-tags span{padding:.18em .6em;border-radius:99px;background:#E9FBF8;color:#0F6F67;font-size:.86em;font-weight:600}
.hm-guide{display:grid;grid-template-columns:1fr 1fr;gap:.55em .9em}
.hm-guide h5{margin:0 0 .25em;font-family:var(--df);font-size:.8em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#3554C7}
.hm-guide ul{display:grid;gap:.25em}
.hm-guide li{position:relative;padding-left:.85em;line-height:1.38}
.hm-guide li::before{content:"";position:absolute;left:0;top:.55em;width:.35em;height:.35em;border-radius:50%;background:var(--hm-blue)}
.hm-guide dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.hm-guide dt{font-weight:700;color:var(--hm-ink)}
.hm-guide dd{margin:0;line-height:1.32}
.hm-guide-wide{grid-column:1/-1}

/* Presentación (esquema) */
.hm-outline{display:grid;gap:.4em}
.hm-outline article{display:grid;grid-template-columns:5.6em 1fr;gap:.65em;align-items:center;padding:.3em;border:1px solid #F0EDF9;border-radius:.8em;line-height:1.35}
.hm-slide-th{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:.35em .45em;border-radius:.5em;color:#fff;
  font-family:var(--df);font-size:.7em;font-weight:700;line-height:1.1;background:linear-gradient(140deg,#FF9F5A,#E8662A)}
.hm-slide-th small{font-size:.8em;font-weight:500;opacity:.9}
.hm-outline article:nth-child(2) .hm-slide-th{background:linear-gradient(140deg,#8B6CFF,#5B2EF5)}
.hm-outline article:nth-child(3) .hm-slide-th{background:linear-gradient(140deg,#45D1C6,#1E9A90)}
.hm-outline ul{display:flex;flex-wrap:wrap;gap:.1em .8em;color:var(--hm-ink)}
.hm-outline li::before{content:"• ";color:var(--hm-orange)}
.hm-outline em{display:block;margin-top:.15em;font-style:normal;font-size:.9em;color:var(--hm-ink-3)}

/* Ventanas de Google (Slides, Docs, Forms) */
.hm-gwin{display:flex;flex-direction:column;height:100%;border:1px solid #ECE9F5;border-radius:.8em;overflow:hidden;background:#F6F5FB}
.hm-gbar{display:flex;align-items:center;gap:.45em;padding:.4em .6em;background:#fff;border-bottom:1px solid #ECE9F5;font-size:.88em;color:var(--hm-ink)}
.hm-gbar img{width:1.2em;height:1.2em}
.hm-gbar b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-gbar span{margin-left:auto;padding:.1em .5em;border-radius:99px;background:#E8F5EC;color:#17663A;font-size:.85em;font-weight:600;white-space:nowrap}
.hm-gslides{flex:1;display:grid;grid-template-columns:3.6em 1fr;gap:.6em;padding:.6em}
.hm-gthumbs{display:grid;gap:.4em;align-content:start}
.hm-gthumbs i{display:block;aspect-ratio:16/10;border-radius:.3em;background:#fff;border:1px solid #E3DFF1}
.hm-gthumbs i:first-child{border:2px solid #F6B61E;background:linear-gradient(140deg,#7C5CFF,#4B2BD8)}
.hm-gslide{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/9;padding:.8em;border-radius:.45em;overflow:hidden;
  background:linear-gradient(140deg,#7C5CFF,#4B2BD8);color:#fff;align-self:start}
.hm-gslide b{position:relative;z-index:1;font-family:var(--df);font-size:1.25em;line-height:1.1}
.hm-gslide small{position:relative;z-index:1;font-size:.82em;opacity:.92}
.hm-gslide svg{position:absolute;right:-.4em;top:-.2em;width:58%;height:auto;opacity:.95;border-radius:0 0 0 .6em}
.hm-gdoc{flex:1;padding:.6em .8em 0}
.hm-gpage{height:100%;padding:.8em 1em;background:#fff;border-radius:.3em .3em 0 0;box-shadow:0 0 0 1px #ECE9F5}
.hm-gpage h6{margin:0 0 .4em;font-family:var(--df);font-size:1.02em;font-weight:700;color:#1A56DB}
.hm-gpage p{margin:0 0 .35em;font-size:.9em;line-height:1.42}
.hm-gpage strong{color:var(--hm-ink)}
.hm-gform{flex:1;display:grid;gap:.45em;align-content:start;padding:.55em}
.hm-gcard{padding:.55em .75em;background:#fff;border-radius:.5em;border:1px solid #ECE9F5}
.hm-gcard--top{border-top:.3em solid #673AB7}
.hm-gcard b{display:block;color:var(--hm-ink);font-family:var(--df);font-size:1em}
.hm-gcard small{font-size:.85em;color:var(--hm-ink-3)}
.hm-radio{display:grid;grid-template-columns:1fr 1fr;gap:.25em .8em;margin-top:.35em}
.hm-radio span{display:flex;align-items:center;gap:.4em;font-size:.9em;color:var(--hm-ink)}
.hm-radio span::before{content:"";width:.85em;height:.85em;border-radius:50%;border:2px solid #9AA0B3;flex-shrink:0}
.hm-radio span.is-on::before{border-color:#673AB7;background:radial-gradient(circle,#673AB7 45%,#fff 50%)}

/* Kahoot! */
.hm-kahoot{display:flex;flex-direction:column;gap:.5em;height:100%;padding:.6em;border-radius:.8em;background:linear-gradient(160deg,#4B1D96,#2E0F66);color:#fff}
.hm-k-q{display:flex;align-items:center;gap:.6em;padding:.55em .7em;background:#fff;border-radius:.5em;color:var(--hm-ink);font-family:var(--df);font-weight:700;font-size:1em;line-height:1.25}
.hm-k-t{display:grid;place-items:center;flex-shrink:0;width:2.1em;height:2.1em;border-radius:50%;background:#2E0F66;color:#fff;font-size:.9em}
.hm-k-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.4em}
.hm-k-grid span{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:.45em;font-weight:700;font-size:.92em;line-height:1.2}
.hm-k-grid span svg{width:1.05em;height:1.05em;flex-shrink:0}
.hm-k-grid .k1{background:#E21B3C}.hm-k-grid .k2{background:#1368CE}.hm-k-grid .k3{background:#C98B00}.hm-k-grid .k4{background:#26890C}
.hm-k-grid .is-ok{box-shadow:0 0 0 .2em #fff inset}
.hm-k-grid .hm-opt-ok{background:#fff;color:#26890C}

/* Vídeo (póster ilustrativo, sin reproductor) */
.hm-poster{position:relative;height:11em;border-radius:.8em;overflow:hidden;background:#EEE8FF}
.hm-poster svg.hm-ill{display:block;width:100%;height:100%}
.hm-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,12,40,0) 35%,rgba(17,12,40,.72))}
.hm-poster-t{position:absolute;left:.75em;right:.75em;bottom:.6em;z-index:1;color:#fff;font-family:var(--df);font-weight:700;font-size:1.08em;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hm-poster-tag{position:absolute;left:.6em;top:.6em;z-index:1;padding:.2em .55em;border-radius:99px;background:rgba(255,255,255,.92);color:#8A4B00;font-size:.78em;font-weight:700}
.hm-poster-fmt{position:absolute;right:.6em;top:.6em;z-index:1;padding:.2em .5em;border-radius:.4em;background:rgba(17,12,40,.6);color:#fff;font-size:.74em;font-weight:600}
.hm-scenes{display:grid;grid-template-columns:1fr 1fr;gap:.25em .8em;margin-top:.55em}
.hm-scenes li{display:flex;gap:.4em;color:var(--hm-ink);line-height:1.3}
.hm-scenes b{color:var(--hm-pink);font-weight:700;flex-shrink:0}

/* Paletas de la ilustración: aula (por defecto), cartoon y documental */
.hm-ill{--ill-sky:#EEE8FF;--ill-glow:#FFF0E3;--ill-sun:#FFC772;--ill-hill:#DCD3FB;--ill-smoke:#FFFFFF;--ill-wall:#6D3BFF;--ill-wall2:#8B6CFF;
  --ill-roof:#4B22C9;--ill-brick:#7D5BF5;--ill-win:#FFD98A;--ill-ground:#CDBFFA;--ill-rail:#8273B8;--ill-train:#2D2363;--ill-accent:#FF8C42}
.hm-ill--cartoon{--ill-sky:#CDEFFF;--ill-glow:#FFF6D8;--ill-sun:#FFCF3F;--ill-hill:#9BE3B4;--ill-wall:#FF8C42;--ill-wall2:#FFB46B;
  --ill-roof:#D9572A;--ill-brick:#E0662A;--ill-ground:#7FD69E;--ill-rail:#5D7F67;--ill-train:#2C3E8F;--ill-accent:#FF4FA3}
.hm-ill--doc{--ill-sky:#F3DFC4;--ill-glow:#F9EBD8;--ill-sun:#F0A35A;--ill-hill:#D7B48F;--ill-smoke:#FBF3E8;--ill-wall:#8C5A3C;--ill-wall2:#A9714C;
  --ill-roof:#5E3A26;--ill-brick:#7A4A30;--ill-win:#FFE2A8;--ill-ground:#C69A6E;--ill-rail:#6B4A35;--ill-train:#3A2A22;--ill-accent:#C0492B}

/* ── FRANJA DE VÍDEOS ────────────────────────────────── */
.hm-vids{padding:.5rem 0 1.5rem}
.hm-vids-box{position:relative;padding:1rem 1rem 1.15rem;border-radius:28px;background:rgba(255,255,255,.8);border:1px solid var(--hm-line);box-shadow:var(--hm-sh1)}
.hm-vids-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;padding:.2rem .35rem .85rem}
.hm-vids-head h2{font-family:var(--df);font-size:1.15rem;font-weight:700;color:var(--hm-ink);letter-spacing:-.01em}
.hm-vids-head p{font-size:.87rem;color:var(--hm-ink-3)}
.hm-vids-all{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--df);font-weight:600;font-size:.92rem;color:var(--hm-v2);text-decoration:none;border-radius:8px}
.hm-vids-all svg{width:16px;height:16px;transition:translate .2s}
.hm-vids-all:hover svg{translate:3px 0}
.hm-track-wrap{position:relative}
.hm-track{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:.3rem .25rem .45rem;scroll-padding-inline:.25rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
.hm-track::-webkit-scrollbar{display:none}
.hm-vcard{
  --acc:var(--hm-v);position:relative;flex:0 0 17.5rem;display:grid;grid-template-columns:minmax(0,1fr) 6.9rem;gap:.7rem;
  min-height:9.4rem;padding:.85rem;border-radius:20px;scroll-snap-align:start;text-align:left;text-decoration:none;color:inherit;font:inherit;cursor:pointer;
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 13%,#fff),#fff 78%);border:1px solid color-mix(in srgb,var(--acc) 22%,#fff);
  transition:translate .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.hm-vcard:hover{translate:0 -3px;box-shadow:var(--hm-sh1);border-color:color-mix(in srgb,var(--acc) 45%,#fff)}
.hm-vcard:focus-visible{outline:3px solid var(--hm-v);outline-offset:3px}
.hm-vcard-txt{display:flex;flex-direction:column;min-width:0}
.hm-vtag{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:99px;font-family:var(--df);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.hm-vtag--tutorial{background:#EEE9FF;color:#4B22C9}
.hm-vtag--audiovisual{background:#FFE6F2;color:#A3135A}
.hm-vtag svg{width:12px;height:12px}
.hm-vcard-t{margin:.5rem 0 .4rem;font-family:var(--df);font-size:.97rem;font-weight:600;line-height:1.25;color:var(--hm-ink)}
.hm-vstat{margin-top:auto;font-size:.78rem;color:var(--hm-ink-3)}
.hm-vlink{display:inline-flex;align-items:center;gap:.25rem;margin-top:.1rem;font-family:var(--df);font-size:.8rem;font-weight:600;color:var(--hm-v2)}
.hm-vlink svg{width:14px;height:14px;transition:translate .2s}
.hm-vcard:hover .hm-vlink svg{translate:2px 0}
.hm-vplay{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--acc);color:#fff;margin-bottom:.4rem}
.hm-vplay svg{width:1rem;height:1rem;margin-left:2px}
.hm-vthumb{position:relative;align-self:stretch;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(17,24,39,.06);box-shadow:0 6px 16px rgba(17,24,39,.07)}
.hm-vthumb svg.hm-ill{display:block;width:100%;height:100%}
.hm-vthumb--poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(17,12,40,.6))}
.hm-vthumb-cap{position:absolute;left:.4rem;right:.4rem;bottom:.35rem;z-index:1;color:#fff;font-family:var(--df);font-size:.62rem;font-weight:700;line-height:1.15}
/* Miniaturas dibujadas con CSS (interfaz de DoceIA, sin capturas falsas) */
.hm-mk{position:absolute;inset:.45rem;display:flex;flex-direction:column;gap:.28rem}
.hm-mk b{display:block;height:.34rem;border-radius:99px;background:#E4DEF7}
.hm-mk .w6{width:60%}.hm-mk .w8{width:80%}.hm-mk .w4{width:45%}
.hm-mk-opt{display:flex;align-items:center;gap:.25rem;padding:.18rem .25rem;border:1px solid #EEEAF8;border-radius:.3rem}
.hm-mk-opt i{width:.42rem;height:.42rem;border-radius:50%;border:1px solid #CFC6EE;flex-shrink:0}
.hm-mk-opt b{flex:1;height:.26rem}
.hm-mk-opt.ok{border-color:var(--hm-v);background:#F6F2FF}
.hm-mk-opt.ok i{background:var(--hm-v);border-color:var(--hm-v)}
.hm-mk-sl{flex:1;border-radius:.35rem;background:linear-gradient(140deg,#FF9F5A,#E8662A);position:relative}
.hm-mk-sl:nth-child(2){background:linear-gradient(140deg,#8B6CFF,#5B2EF5);margin-left:.6rem;margin-top:-1.3rem}
.hm-mk-sl::after{content:"";position:absolute;left:.3rem;bottom:.3rem;width:55%;height:.3rem;border-radius:99px;background:rgba(255,255,255,.85)}
.hm-mk-g{display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:.3rem;height:100%}
.hm-mk-g img{width:1.6rem;height:1.6rem;object-fit:contain}
.hm-mk-g span{grid-column:1/-1;font-size:.58rem;font-weight:700;color:#17663A;background:#E8F5EC;padding:.1rem .4rem;border-radius:99px}
.hm-track-btn{
  position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border-radius:50%;
  background:#fff;border:1px solid var(--hm-line);box-shadow:var(--hm-sh1);color:var(--hm-v2);cursor:pointer;transition:opacity .2s,scale .2s;
}
.hm-track-btn:hover{scale:1.06}
.hm-track-btn svg{width:18px;height:18px}
.hm-track-btn[disabled]{opacity:0;pointer-events:none}
.hm-track-btn--prev{left:-10px}.hm-track-btn--next{right:-10px}

/* Reproductor (solo se usa cuando una tarjeta tiene un vídeo real) */
.hm-player{width:min(960px,calc(100vw - 2rem));padding:0;border:0;border-radius:20px;background:#0E0B1F;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.hm-player::backdrop{background:rgba(17,12,40,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hm-player-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem}
.hm-player-h h2{font-family:var(--df);font-size:1rem;font-weight:600}
.hm-player-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.hm-player-x svg{width:18px;height:18px}
.hm-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* ── ASÍ FUNCIONA ────────────────────────────────────── */
.hm-how{padding:4.5rem 0 5rem}
.hm-how-head{max-width:40rem;margin:0 auto 2.75rem;text-align:center}
.hm-how-head h2{margin:.9rem 0 .6rem;font-family:var(--df);font-weight:800;color:var(--hm-ink);font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.hm-how-head p{font-size:1.05rem;color:var(--hm-ink-2)}
.hm-steps{--gap:1.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);counter-reset:none}
.hm-step{position:relative;padding:1.5rem 1.5rem 1.6rem;background:#fff;border:1px solid var(--hm-line);border-radius:24px;box-shadow:var(--hm-sh1)}
.hm-step:not(:last-child)::after{
  content:"";position:absolute;top:calc(1.5rem + 22px);left:calc(1.5rem + 44px + 12px);right:calc(-1 * var(--gap) + 10px);
  border-top:2px dashed #D9D0FF;
}
.hm-step-top{display:flex;align-items:center;margin-bottom:1.1rem}
.hm-step-n{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hm-v);color:#fff;
  font-family:var(--df);font-weight:700;font-size:1.05rem;box-shadow:0 0 0 6px var(--hm-lav)}
.hm-step h3{display:flex;align-items:center;gap:.65rem;margin-bottom:.55rem;font-family:var(--df);font-size:1.2rem;font-weight:700;color:var(--hm-ink);letter-spacing:-.01em}
.hm-step h3 .hm-ic{width:36px;height:36px;border-radius:11px;font-size:14px}
.hm-step p{font-size:.97rem;line-height:1.6;color:var(--hm-ink-2)}
.hm-how-note{display:flex;align-items:flex-start;gap:.75rem;max-width:46rem;margin:1.75rem auto 0;padding:1rem 1.2rem;border-radius:18px;
  background:#F0FBF9;border:1px solid #BFEDE7;color:#0F4F4A;font-size:.95rem;line-height:1.55}
.hm-how-note svg{width:22px;height:22px;flex-shrink:0;margin-top:1px;color:#119C90}
.hm-how-cta{display:flex;justify-content:center;margin-top:2rem}

/* ── QUÉ PUEDES CREAR (mosaico) ──────────────────────── */
.hm-bento-sec{padding:1rem 0 4.5rem}
.hm-bento-box{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(2.25rem,4.5vw,4rem) clamp(1rem,3.2vw,3rem) clamp(1.5rem,3vw,2.25rem);
  border-radius:40px;color:#fff;
  background:
    radial-gradient(55% 45% at 88% 0%,rgba(139,108,255,.5),transparent 70%),
    radial-gradient(45% 40% at 0% 100%,rgba(69,209,198,.22),transparent 70%),
    radial-gradient(40% 30% at 50% 45%,rgba(255,79,163,.12),transparent 70%),
    linear-gradient(165deg,#1E1147 0%,#140B33 55%,#0F0828 100%);
  box-shadow:0 40px 80px -30px rgba(43,20,110,.55);
}
/* Retícula de puntos que se desvanece hacia abajo */
.hm-bento-box::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000,transparent 75%);
}
.hm-bento-head{max-width:46rem;margin:0 auto 2.5rem;text-align:center}
.hm-eyebrow--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#DCD0FF}
.hm-bento-head h2{margin:1rem 0 .8rem;font-family:var(--df);font-weight:800;color:#fff;font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.hm-bento-head h2 em{font-style:normal;background:linear-gradient(90deg,#B9A3FF 0%,#FF8FC8 52%,#FFC772 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-bento-head p{max-width:38rem;margin-inline:auto;font-size:1.06rem;line-height:1.6;color:rgba(255,255,255,.76)}
.hm-bento-foot{margin-top:1.6rem;text-align:center;font-size:.88rem;color:rgba(255,255,255,.62)}

.hm-bento{
  display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(16.5rem,auto);
  grid-template-areas:
    "test   test   video   video"
    "test   test   kahoot  pres"
    "google google resumen guia";
}
.hm-bt--test{grid-area:test}.hm-bt--video{grid-area:video}.hm-bt--kahoot{grid-area:kahoot}.hm-bt--pres{grid-area:pres}
.hm-bt--google{grid-area:google}.hm-bt--resumen{grid-area:resumen}.hm-bt--guia{grid-area:guia}

/* Tarjeta base: color de fondo propio (--bg) con un brillo en la esquina (--hi) */
.hm-bt{
  --bg:#5B2EF5;--hi:#9B7BFF;
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  padding:1.35rem 1.4rem;border-radius:28px;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(110% 85% at 100% 100%,var(--hi),transparent 62%),var(--bg);
  color:#fff;font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -18px rgba(0,0,0,.55);
  transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
/* Foco de luz que sigue al puntero (las coordenadas las pone home.js) */
.hm-bt::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 65%);
}
button.hm-bt:hover{translate:0 -6px;border-color:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 60px -20px rgba(0,0,0,.65)}
button.hm-bt:hover::after{opacity:1}
.hm-bt:focus-visible,.hm-gapp:focus-visible{outline:3px solid #FFC772;outline-offset:3px}

.hm-bt-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;margin-bottom:.55rem}
.hm-bt-ic{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.hm-bt-ic svg{width:22px;height:22px}
.hm-bt-cr{padding:.3rem .72rem;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-family:var(--df);font-size:.8rem;font-weight:700;white-space:nowrap}
.hm-bt-t{display:block;font-family:var(--df);font-weight:800;font-size:1.32rem;line-height:1.15;letter-spacing:-.02em}
.hm-bt-d{display:block;max-width:30rem;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.9)}

/* Ilustración 3D que asoma por la esquina */
.hm-bt-3d{
  position:absolute;right:-.5rem;bottom:-.9rem;z-index:-1;width:min(52%,9.5rem);height:auto;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.3));
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
button.hm-bt:hover .hm-bt-3d{transform:translate(-4px,-10px) rotate(-5deg) scale(1.07)}
.hm-bt--pres{--bg:#C2410C;--hi:#FF9A4D}
.hm-bt--resumen{--bg:#2347C9;--hi:#5F8DFF}
.hm-bt--guia{--bg:#0F766E;--hi:#3DD9C4}
.hm-bt--pres .hm-bt-d,.hm-bt--resumen .hm-bt-d,.hm-bt--guia .hm-bt-d{max-width:15rem}
@media (min-width:1100px){
  /* La última fila crece con el bloque de Google: la ilustración aprovecha el alto */
  .hm-bt--resumen .hm-bt-3d,.hm-bt--guia .hm-bt-3d{width:min(68%,12rem)}
}

/* Test y examen: la tarjeta grande, con una hoja de examen de ejemplo */
.hm-bt--test{--bg:#5B2EF5;--hi:#A78BFF;padding-bottom:0}
.hm-bt--test .hm-bt-t{font-size:clamp(1.6rem,2.3vw,2.15rem)}
.hm-bt--test .hm-bt-d{font-size:1rem}
.hm-bt-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.hm-bt-tags span{padding:.28rem .72rem;border-radius:99px;border:1px solid rgba(255,255,255,.34);font-size:.8rem;font-weight:600}
.hm-bt-go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;padding:.6rem 1.05rem;border-radius:13px;
  background:#fff;color:var(--hm-v2);font-family:var(--df);font-weight:700;font-size:.94rem;box-shadow:0 10px 24px rgba(20,8,60,.28);
}
.hm-bt-go svg{width:17px;height:17px;transition:translate .2s}
button.hm-bt:hover .hm-bt-go svg{translate:3px 0}
.hm-paper{
  order:2;position:relative;align-self:center;flex:1 0 13.5rem;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:.42rem;width:min(100%,23rem);margin-top:1.4rem;
  padding:1.05rem 1.15rem 1rem;border-radius:16px 16px 0 0;
  background:#fff;color:var(--hm-ink);text-align:left;
  box-shadow:0 30px 50px -10px rgba(20,8,60,.55);
  rotate:-2.5deg;transform-origin:50% 100%;translate:0 .6rem;
  transition:rotate .5s cubic-bezier(.34,1.56,.64,1),translate .5s cubic-bezier(.34,1.56,.64,1);
}
button.hm-bt--test:hover .hm-paper{rotate:0deg;translate:0 -.2rem}
.hm-paper-tag,.hm-story-tag{
  position:absolute;top:.7rem;right:.8rem;z-index:3;padding:.16rem .5rem;border-radius:99px;
  background:#FFF1CC;color:#7A4E00;font-family:var(--df);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.hm-paper-h{display:flex;flex-direction:column;padding:0 4.5rem .55rem 0;border-bottom:2px solid #EEE9FB}
.hm-paper-h b{font-family:var(--df);font-size:.95rem;font-weight:800}
.hm-paper-h span{font-size:.78rem;color:var(--hm-ink-3)}
.hm-paper-name{display:flex;align-items:flex-end;gap:.4rem;font-size:.78rem;color:var(--hm-ink-3)}
.hm-paper-name i{flex:1;height:.8rem;border-bottom:1.5px dotted #C9C2DE}
.hm-paper-q{display:block;margin-top:.3rem;font-family:var(--df);font-size:.88rem;font-weight:700;line-height:1.3}
.hm-paper-o{display:flex;align-items:center;gap:.5rem;padding:.32rem .6rem;border:1.5px solid #ECE8F7;border-radius:10px;font-size:.84rem}
.hm-paper-o::before{content:"";flex-shrink:0;width:.8rem;height:.8rem;border-radius:50%;border:1.5px solid #C9C2DE}
.hm-paper-o.is-ok{border-color:#2BB673;background:#EAF8F0;color:#0F5C37;font-weight:600}
.hm-paper-o.is-ok::before{border-color:#2BB673;background:#2BB673;box-shadow:inset 0 0 0 2px #EAF8F0}
.hm-paper-l{display:block;height:0;margin-top:.55rem;border-bottom:1.5px solid #ECE8F7}
.hm-paper-l.is-s{width:60%}

/* Vídeo: storyboard de tres escenas en abanico */
.hm-bt--video{
  flex-direction:row;align-items:stretch;gap:1rem;border-color:rgba(255,143,200,.32);
  background:
    radial-gradient(80% 110% at 100% 0%,rgba(255,79,163,.4),transparent 60%),
    radial-gradient(70% 90% at 75% 100%,rgba(255,140,66,.3),transparent 60%),
    linear-gradient(160deg,#2C1868,#170C3C);
}
.hm-bt-body{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;flex:1 1 50%;min-width:0}
.hm-bt-note{display:inline-flex;margin-top:auto;padding:.32rem .75rem;border-radius:99px;background:rgba(255,199,114,.16);box-shadow:inset 0 0 0 1px rgba(255,199,114,.3);color:#FFD9A0;font-size:.8rem;font-weight:600}
.hm-story{position:relative;flex:1 1 50%;min-width:0;min-height:12rem}
.hm-frame{
  position:absolute;left:50%;top:50%;width:min(78%,14rem);aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#0E0824;border:2px solid rgba(255,255,255,.92);box-shadow:0 16px 32px rgba(0,0,0,.45);
  translate:-50% -50%;transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.hm-frame svg{display:block;width:100%;height:100%}
.hm-frame > span{position:absolute;left:.4rem;bottom:.35rem;padding:.12rem .45rem;border-radius:6px;background:rgba(15,8,40,.75);color:#fff;font-size:.68rem;font-weight:700}
.hm-frame:nth-child(1){transform:translate(-16%,-30%) rotate(-7deg)}
.hm-frame:nth-child(2){z-index:1;transform:translate(10%,-2%) rotate(4deg)}
.hm-frame:nth-child(3){z-index:2;transform:translate(-8%,28%) rotate(-2deg)}
button.hm-bt--video:hover .hm-frame:nth-child(1){transform:translate(-19%,-36%) rotate(-10deg)}
button.hm-bt--video:hover .hm-frame:nth-child(2){transform:translate(18%,-4%) rotate(7deg)}
button.hm-bt--video:hover .hm-frame:nth-child(3){transform:translate(-10%,34%) rotate(-1deg)}
.hm-story-tag{top:0;right:0}

/* Kahoot: las cuatro respuestas de colores */
.hm-bt--kahoot{--bg:#46178F;--hi:#8A4DF0}
.hm-kh{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;width:100%;margin-top:auto;padding-top:.9rem}
.hm-kh > span{display:grid;place-items:center;height:2.6rem;border-radius:9px;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:translate .35s cubic-bezier(.34,1.56,.64,1)}
.hm-kh svg{width:1.2rem;height:1.2rem;color:#fff}
.hm-kh-a{background:#E21B3C}.hm-kh-b{background:#1368CE}.hm-kh-c{background:#D89E00}.hm-kh-d{background:#26890C}
button.hm-bt--kahoot:hover .hm-kh > span{translate:0 -4px}
button.hm-bt--kahoot:hover .hm-kh > span:nth-child(2){transition-delay:.05s}
button.hm-bt--kahoot:hover .hm-kh > span:nth-child(3){transition-delay:.1s}
button.hm-bt--kahoot:hover .hm-kh > span:nth-child(4){transition-delay:.15s}

/* Google: un bloque blanco con sus tres formatos, cada uno con su botón */
.hm-bt--google{
  cursor:default;color:var(--hm-ink);border-color:rgba(255,255,255,.9);
  background:radial-gradient(80% 120% at 100% 0%,#EEF3FF,transparent 60%),#fff;
}
.hm-bt--google .hm-bt-d{color:var(--hm-ink-2);max-width:34rem}
.hm-bt-ic--g{background:#F1F3F8;box-shadow:none}
.hm-gapps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;width:100%;margin-top:auto;padding-top:.85rem}
.hm-gapp{
  --g:var(--hm-v);display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;min-width:0;
  padding:.8rem .85rem .85rem;border-radius:16px;border:1.5px solid #ECEAF3;background:#FAFAFD;
  font:inherit;text-align:left;color:var(--hm-ink);cursor:pointer;
  transition:translate .25s ease,border-color .25s,box-shadow .25s,background-color .25s;
}
.hm-gapp:hover{translate:0 -4px;border-color:var(--g);background:#fff;box-shadow:0 14px 28px -12px color-mix(in srgb,var(--g) 60%,transparent)}
.hm-gapp img{width:28px;height:28px;object-fit:contain;margin-bottom:.4rem}
.hm-gapp-t{font-family:var(--df);font-weight:700;font-size:.96rem}
.hm-gapp-d{font-size:.8rem;line-height:1.35;color:var(--hm-ink-3)}
.hm-gapp-cr{margin-top:.5rem;padding:.16rem .55rem;border-radius:99px;background:var(--hm-lav);color:var(--hm-v2);font-family:var(--df);font-size:.75rem;font-weight:700}

/* Entrada al hacer scroll (home.js pone is-armed y luego is-in) */
.hm-bento.is-armed:not(.is-in) > *{opacity:0}
.hm-bento.is-in > *{animation:hm-pop .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0) * 75ms)}
@keyframes hm-pop{from{opacity:0;translate:0 28px;scale:.97}}

@media (max-width:1099px){
  .hm-bento{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"test test" "video video" "kahoot pres" "google google" "resumen guia";
  }
  /* El test, a lo ancho: texto a la izquierda y la hoja a la derecha */
  .hm-bt--test{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:1.5rem;align-items:start}
  .hm-bt--test > :not(.hm-paper){grid-column:1}
  .hm-bt--test .hm-bt-go{align-self:end;justify-self:start;margin-bottom:1.35rem}
  .hm-paper{grid-column:2;grid-row:1 / -1;align-self:end;margin-top:0;height:21rem;width:100%}
}
@media (max-width:767px){
  .hm-bento-sec{padding:.5rem 0 3.25rem}
  .hm-bento-box{margin-inline:-.25rem;border-radius:30px;padding-inline:.85rem}
  .hm-bento-head{margin-bottom:1.75rem}
  .hm-bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;grid-template-areas:"test" "video" "kahoot" "pres" "google" "resumen" "guia";gap:.85rem}
  .hm-bt{padding:1.15rem 1.15rem;border-radius:24px}
  .hm-bt--test{display:flex;padding-bottom:0}
  .hm-paper{height:auto;flex-basis:15rem;width:min(100%,21rem);margin-top:1.25rem}
  .hm-bt--test .hm-bt-go{align-self:flex-start;margin-bottom:0}
  .hm-bt--video{flex-direction:column}
  .hm-story{min-height:11.5rem}
  .hm-frame{width:min(68%,14rem)}
  .hm-bt--pres,.hm-bt--resumen,.hm-bt--guia{min-height:11.5rem}
  .hm-bt--pres .hm-bt-d,.hm-bt--resumen .hm-bt-d,.hm-bt--guia .hm-bt-d{max-width:60%}
  .hm-bt-3d{width:8rem}
  .hm-kh > span{height:2.3rem}
  .hm-gapps{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .hm-gapp{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;padding:.7rem .8rem}
  .hm-gapp img{grid-row:1 / span 2;margin:0}
  .hm-gapp-t,.hm-gapp-d{grid-column:2}
  .hm-gapp-cr{grid-column:3;grid-row:1 / span 2;margin:0}
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:1239px){
  .hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .hm-hero-copy{max-width:44rem}
  .hm-h1{font-size:clamp(2.4rem,6.4vw,3.9rem)}
}
@media (max-width:900px){
  .hm-steps{grid-template-columns:1fr;gap:1rem}
  /* Número a la izquierda y la línea baja hasta el paso siguiente */
  .hm-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:1rem;padding:1.25rem}
  .hm-step-top{grid-row:1 / span 2;align-self:start;margin:0}
  .hm-step h3,.hm-step p{grid-column:2}
  .hm-step h3{margin-top:.35rem}
  .hm-step:not(:last-child)::after{top:auto;bottom:calc(-1rem - 2px);left:calc(1.25rem + 21px);right:auto;height:1rem;border-top:0;border-left:2px dashed #D9D0FF}
}
@media (max-width:767px){
  .hm-w{padding-inline:1rem}
  .hm-hero{padding:calc(var(--hm-hdr-h) + 1.4rem) 0 1.5rem}
  .hm-h1{margin:.9rem 0 1rem;font-size:clamp(2.15rem,9.6vw,2.9rem)}
  .hm-ctas{flex-direction:column;align-items:stretch;margin-top:1.6rem}
  .hm-ctas .hm-btn{width:100%}
  .hm-trust{gap:.5rem 1rem;font-size:.9rem}

  /* Móvil: el arco se convierte en un selector deslizante y la vista previa va debajo */
  .hm-stage{aspect-ratio:auto;max-width:none;container-type:normal}
  .hm-stage-in{position:static;font-size:16px;display:flex;flex-direction:column}
  .hm-glow,.hm-arc,.hm-support,.hm-orbit-pause{display:none !important}
  .hm-nodes{
    position:relative;inset:auto;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin:0 -1rem;padding:.35rem 1rem .6rem;scroll-padding-inline:1rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 2rem),transparent);
  }
  .hm-nodes::-webkit-scrollbar{display:none}
  .hm-node,.hm-node--sub{position:relative;left:auto;top:auto;flex:0 0 auto;width:auto;height:auto;margin:0;rotate:none;scroll-snap-align:start;border-radius:14px}
  .hm-node-in,.hm-node--sub .hm-node-in{flex-direction:row;gap:.5rem;min-height:48px;padding:.4rem .85rem .4rem .45rem;border-radius:14px;animation:none}
  .hm-node .hm-ic{width:34px;height:34px;border-radius:10px}
  .hm-node .hm-ic svg{width:18px;height:18px}
  .hm-node .hm-ic--brand img{width:20px;height:20px}
  .hm-node-lbl,.hm-node--sub .hm-node-lbl{font-size:.9rem;white-space:nowrap;text-align:left}
  .hm-node--sub .hm-node-in svg{width:18px;height:18px;margin-left:.35rem}
  .hm-node:hover{translate:none;scale:none}
  .hm-node[aria-pressed="true"]{scale:none}
  .hm-node-in::after,.hm-node--sub .hm-node-in::after{top:-5px;right:-5px;width:18px;height:18px}
  .hm-vgroup{display:contents}
  .hm-vgroup-h{display:none}
  .hm-vgroup-list{display:contents}
  .hm-pv{position:relative;left:auto;top:auto;width:auto;height:25rem;margin-top:.5rem;font-size:16px;padding:1rem}
  .hm-poster{height:9.5rem}
  .hm-pv-chip{display:none}
  .hm-test{grid-template-columns:1fr}
  .hm-test-fig{display:none}
  .hm-guide{grid-template-columns:1fr}
  .hm-guide dl{grid-template-columns:1fr;gap:.3em}
  .hm-scenes{grid-template-columns:1fr}

  .hm-vids-box{padding:.85rem .6rem .9rem;border-radius:22px}
  .hm-vcard{flex-basis:16.25rem}
  .hm-track-btn{display:none}
  .hm-how{padding:3.25rem 0 3.5rem}
}
@media (max-width:420px){
  .hm-pv{height:27rem}
}

/* Movimiento reducido: nada flota, nada se dibuja, nada rota solo */
@media (prefers-reduced-motion:reduce){
  .hm-in,.hm-node,.hm-node-in,.hm-vgroup,.hm-support,.hm-pv{animation:none !important}
  .hm-arc-line{animation:none;stroke-dashoffset:0}
  .hm-arc-inner{animation:none;opacity:1}
  .hm-link.is-drawing{animation:none}
  .hm-pv-inner,.hm-node,.hm-vcard,.hm-btn{transition:none}
  .hm-bt,.hm-bt *,.hm-gapp{transition:none !important}
  .hm-bento > *{animation:none !important;opacity:1 !important}
}