/* ============================================================
   QUBIKO — Portada
   Limpia y juguetona: mucho blanco, titulares redondos y gruesos,
   botones "gorditos" que se hunden al presionarlos y la familia de
   robots Qubiko como personajes. Una idea por sección.
   ============================================================ */

@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;
  src:url(../fonts/text/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;
  src:url(../fonts/text/nunito-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#2459eb; --blue-edge:#1a3fb8; --blue-soft:#e9f0ff; --blue-mist:#f5f8ff;
  --navy:#13234c; --navy-edge:#0a1430;
  --lime:#bfe3ff; --lime-edge:#8fc9ff; --sky:#38a8ff; --sky-soft:#e8f5ff;
  --ink:#13234c; --text:#52607f; --muted:#7c89a6;
  --line:#e3eaf7; --line-2:#eef2fa;
  --font:'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wrap:1040px; --nav-h:72px;
  --spring:linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 100%);
  --bounce:linear(0, .2 8%, .6 18%, 1.08 32%, 1.12 38%, 1.04 48%, .98 58%, 1.01 72%, 1);
  --ease:cubic-bezier(.16,1,.3,1);
  --tone:#ffffff;
}
.d-hero{--aura:#b9d0ff}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body.d-page{font-family:var(--font);font-size:17px;line-height:1.55;font-weight:600;color:var(--text);background-color:var(--tone);transition:background-color .9s ease;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:where(.d-page) :is(h1,h2,h3,h4){font-weight:800;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
:where(.d-page) p{text-wrap:pretty}
:where(.d-page) img{display:block;max-width:100%;height:auto}
:where(.d-page) a{color:inherit;text-decoration:none}
:where(.d-page) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.d-page) :is(ul,ol){list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
.d-wrap{width:100%;max-width:calc(var(--wrap) + 48px);margin-inline:auto;padding-inline:24px}
.d-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px;padding:0}
.d-skip{position:absolute;left:16px;top:-60px;z-index:2000;background:var(--blue);color:#fff;padding:10px 18px;border-radius:12px;font-weight:800}
.d-skip:focus{top:12px}
.d-defs{position:absolute;width:0;height:0;overflow:hidden}
.marca{display:inline-block;flex:none;aspect-ratio:1;background:currentColor;-webkit-mask:url(../logo.svg) center/contain no-repeat;mask:url(../logo.svg) center/contain no-repeat}
.d-wordmark{display:inline-block;width:108px;height:25px;background:currentColor;-webkit-mask:url(../logo-wordmark.svg) center/contain no-repeat;mask:url(../logo-wordmark.svg) center/contain no-repeat}
.d-logo{display:inline-flex;align-items:center;gap:8px;color:var(--blue)}
.d-logo .marca{width:40px;transition:rotate .5s var(--bounce)}
.d-logo:hover .marca{rotate:-12deg}

/* ---------- Botones gorditos ---------- */
.d-btn{
  --edge:var(--blue-edge);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:12px 24px;border-radius:16px;border:2px solid transparent;
  font:800 15px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 4px 0 var(--edge);cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, filter .2s ease, background-color .2s;
}
.d-btn i{font-size:18px}
.d-btn:hover{filter:brightness(1.07)}
.d-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--edge)}
.d-btn-blue{background:var(--blue);color:#fff}
.d-btn-white{--edge:var(--line);background:#fff;color:var(--blue);border-color:var(--line)}
.d-btn-white:hover{background:var(--blue-mist);filter:none}
.d-btn-navy{--edge:var(--navy-edge);background:var(--navy);color:#fff}
.d-btn-lime{--edge:var(--lime-edge);background:var(--lime);color:var(--navy)}
.d-btn-sm{min-height:40px;padding:8px 16px;font-size:13px;border-radius:12px;box-shadow:0 3px 0 var(--edge)}
.d-btn-sm:active{transform:translateY(3px)}
.d-btn-lg{min-height:58px;padding:16px 40px;font-size:17px}
.d-btn-block{width:100%}
.d-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.d-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.d-link i{transition:translate .35s var(--bounce)}
.d-link:hover i{translate:5px 0}

/* ---------- Navegación ---------- */
.d-nav{position:sticky;top:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;background-color:color-mix(in srgb, var(--tone) 86%, transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:2px solid transparent;transition:border-color .3s, background-color .35s ease, backdrop-filter .35s ease}
.d-nav.scrolled{border-bottom-color:rgba(19,35,76,.06)}
/* Arriba de todo la barra es transparente y deja ver el cielo del héroe;
   al bajar aparece el cristal blanco (la clase la pone nav() en portada.js). */
.d-nav:not(.scrolled){background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.d-nav-in{display:flex;align-items:center;gap:28px}
.d-links{display:flex;gap:26px;margin-left:auto}
.d-links .nav-item{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.d-links .nav-item:hover,.d-links .nav-item.active{color:var(--blue)}
.d-only-menu{display:none}
.d-nav-act{display:flex;align-items:center;gap:10px}
.d-js .d-nav-cta{opacity:0;translate:0 6px;pointer-events:none;transition:opacity .3s, translate .4s var(--ease)}
.d-nav.is-past .d-nav-cta{opacity:1;translate:0 0;pointer-events:auto}
.d-burger{display:none;width:44px;height:44px;border-radius:12px;border:2px solid var(--line)!important;box-shadow:0 3px 0 var(--line);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.d-burger span{display:block;width:16px;height:2.5px;border-radius:2px;background:var(--ink);transition:translate .3s, rotate .3s, opacity .2s}
.d-burger.active span:nth-child(1){translate:0 6.5px;rotate:45deg}
.d-burger.active span:nth-child(2){opacity:0}
.d-burger.active span:nth-child(3){translate:0 -6.5px;rotate:-45deg}

/* ---------- Hero ---------- */
.d-hero{margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 24px) 0 56px}
.d-hero-in{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:48px;min-height:calc(100svh - var(--nav-h) - 80px)}
/* El héroe llena la primera pantalla: la cinta de aliados queda debajo, sin taparlo. */
.d-hero-art{position:relative;width:100%;max-width:480px;margin-inline:auto}
.d-hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.d-hero h1{max-width:16ch;font-size:clamp(32px, 3.6vw, 44px);line-height:1.15}
.d-hero-copy>p{max-width:40ch;margin-top:16px;font-size:19px;color:var(--text)}
.d-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.d-hero-btns .d-btn{width:auto}
.d-hero-copy>[data-rise]{animation:d-rise .9s var(--ease) both}
.d-hero [data-rise]:nth-child(2){animation-delay:.1s}
.d-hero [data-rise]:nth-child(3){animation-delay:.2s}
.d-hero [data-rise]:nth-child(4){animation-delay:.3s}
@keyframes d-rise{from{opacity:0;transform:translateY(22px)}}
.d-hero-art{animation:d-pop-in 1.1s var(--spring) .1s both}
@keyframes d-pop-in{from{opacity:0;transform:scale(.8)}}

/* Robot que se transmuta */
.d-morph{display:block;width:100%;aspect-ratio:1;overflow:visible}
.d-shadow{fill:#1a4aa0;opacity:.12}
.d-m-glow{transform-box:fill-box;transform-origin:center;animation:d-breathe 6s ease-in-out infinite}
@keyframes d-breathe{50%{transform:scale(1.05);opacity:.85}}
.d-m-bob{animation:d-bob 5s ease-in-out infinite}
@keyframes d-bob{50%{transform:translateY(-7px)}}
.d-m-ring{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:3 9;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
.d-m-ring-2{stroke:#8fb3ff;stroke-dasharray:18 10;stroke-width:2}
.d-m-pulse{fill:none;stroke:#fff;stroke-width:3;opacity:0}
.d-m-scan,.d-m-flash{opacity:0}
.d-m-scan{filter:drop-shadow(0 0 6px #6f9bff) drop-shadow(0 0 14px #b9d0ff)}
.d-m-flash,.d-m-sparks>*{transform-origin:200px 215px}
.d-m-lean{transform-origin:200px 360px;transition:transform .9s var(--ease)}
.d-m-squash{transform-origin:200px 360px}
.d-art{opacity:0;transition:opacity .28s ease}
.d-art.is-on{opacity:1}
.d-m-parts{opacity:0}
.d-m-name{position:absolute;left:50%;bottom:-6px;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;transition:opacity .25s, translate .4s var(--ease)}
.d-m-name i{color:var(--blue)}
.d-m-name{transform-origin:50% 0;transition:opacity .25s, translate .4s var(--ease), transform .5s var(--spring)}
.d-m-name.is-swap{opacity:0;translate:-50% 6px;transform:perspective(300px) rotateX(-70deg)}
.d-m-dots{display:inline-flex;gap:4px;margin-left:2px}
.d-m-dots i{width:7px;height:7px;border-radius:50%;background:#dbe5fb;transition:width .4s var(--ease), background-color .3s}
.d-m-dots i.is-on{width:18px;border-radius:4px;background:var(--blue)}
/* Transformación: el plano punteado del siguiente robot y los rayos que
   llevan cada pieza a su lugar (los dibuja heroMorph en portada.js). */
.d-m-ghost{opacity:0;pointer-events:none}
.d-m-ghost rect{fill:rgba(143,216,255,.1);stroke:#38a8ff;stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round;animation:d-ghost .9s linear infinite}
@keyframes d-ghost{to{stroke-dashoffset:-22}}
.d-m-beams line{stroke:#8fd8ff;stroke-width:2.5;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 4px #8fd8ff)}
/* Los robots nuevos también se mueven */
.d-wag{animation:d-wag .9s ease-in-out infinite alternate}
@keyframes d-wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.d-paw{animation:d-paw .8s ease-in-out infinite}
.d-paw-1{animation-delay:-.4s}
@keyframes d-paw{0%,100%{transform:rotate(0)}25%{transform:rotate(9deg) translateY(-4px)}50%{transform:rotate(0)}75%{transform:rotate(-7deg)}}
.d-crawl{animation:d-crawl .9s ease-in-out infinite}
.d-crawl-1{animation-delay:-.45s}
@keyframes d-crawl{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translateY(-5px)}}
.d-bubble{animation:d-bubble 2.4s ease-in infinite}
.d-bubble-1{animation-delay:-.8s}.d-bubble-2{animation-delay:-1.6s}
@keyframes d-bubble{0%{transform:translateY(20px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-50px) scale(1.1);opacity:0}}
.d-laser{animation:d-laser 1.6s ease-in-out infinite}
@keyframes d-laser{50%{transform:scaleX(1.8);opacity:.6}}

/* Gestos de los robots (arte plano) */
.d-spin{animation:d-spin 2.6s linear infinite}
@keyframes d-spin{to{transform:rotate(360deg)}}
.d-wave{animation:d-wave 1.6s ease-in-out infinite}
@keyframes d-wave{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}}
.d-fl{animation:d-grip-l 2.4s ease-in-out infinite}
.d-fr{animation:d-grip-r 2.4s ease-in-out infinite}
@keyframes d-grip-l{50%{transform:rotate(12deg)}}
@keyframes d-grip-r{50%{transform:rotate(-12deg)}}
.d-reach{animation:d-reach 4.8s ease-in-out infinite}
@keyframes d-reach{50%{transform:rotate(-6deg)}}
.d-prop{animation:d-prop .18s linear infinite}
@keyframes d-prop{50%{transform:scaleX(.2)}}
.d-hover{animation:d-hover 2.6s ease-in-out infinite}
@keyframes d-hover{50%{transform:translateY(-10px)}}
.d-rumble{animation:d-rumble .12s linear infinite}
@keyframes d-rumble{50%{transform:translateX(.8px)}}
.d-eye{animation:d-blink 4.6s ease-in-out infinite}
@keyframes d-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.d-eyes{transition:transform .4s var(--ease)}
.d-logo-ant{transform-origin:131px 84px;animation:d-ant 3.2s ease-in-out infinite}
@keyframes d-ant{30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
.d-logo-spark{transform-origin:300px 130px;animation:d-spark 4s ease-in-out infinite}
@keyframes d-spark{50%{transform:rotate(14deg) scale(1.06)}}

/* ---------- Aliados ---------- */
/* Aliados: solo la cinta «Con el apoyo de», a color y sobre aura de
   cielo con grano (NVIDIA Inception y Claude for Startups van en ella). */
.d-allies{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 32px}
.d-allies-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);background:linear-gradient(180deg,#ffffff 0%,#eef7ff 42%,#f5faff 100%)}
.d-allies-sky i{position:absolute;border-radius:50%}
.d-allies-sky i:nth-child(1){width:46vmax;aspect-ratio:1;left:-14vmax;top:-18vmax;background:radial-gradient(closest-side,rgba(126,196,255,.55),rgba(126,196,255,0));animation:d-sky-a 18s ease-in-out infinite alternate}
.d-allies-sky i:nth-child(2){width:42vmax;aspect-ratio:1;right:-12vmax;top:10%;background:radial-gradient(closest-side,rgba(170,216,255,.65),rgba(170,216,255,0));animation:d-sky-b 21s ease-in-out -5s infinite alternate}
.d-allies-sky i:nth-child(3){width:30vmax;aspect-ratio:1;left:34%;bottom:-16vmax;background:radial-gradient(closest-side,rgba(92,178,255,.35),rgba(92,178,255,0));animation:d-sky-c 14s ease-in-out infinite alternate}
.d-allies-sky::after{content:"";position:absolute;inset:0;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .32 0 0 0 0 .68 0 0 0 .55 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
/* Sin contenedor: la etiqueta arriba y la cinta de borde a borde. */
.d-allies .d-allies-in{display:block;max-width:none;margin:0;padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.d-allies .d-allies-label{display:block;margin:0 0 16px;text-align:center}
.d-allies .d-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.d-allies .d-marquee-track>li{margin-right:64px}
.d-allies .d-marquee .aliado-enlace{opacity:.95;filter:none}
.d-allies .d-marquee .aliado-enlace:hover,.d-allies .d-marquee .aliado-enlace:focus-visible{opacity:1;transform:scale(1.06)}
.d-allies .d-marquee .aliado-enlace{transition:opacity .3s,transform .4s var(--ease)}
@media (max-width:720px){
  .d-allies{padding:20px 0}
  .d-allies .d-marquee-track>li{margin-right:40px}
}
@media (prefers-reduced-motion:reduce){.d-allies-sky i{animation:none}}
.d-allies-in{display:flex;align-items:center;gap:24px;max-width:1200px;margin-inline:auto;padding:14px 24px}
.d-allies-label{flex:none;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.d-marquee{position:relative;overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.d-marquee-track{display:flex;align-items:center;width:max-content}
.d-marquee-track>li{flex:none;margin-right:52px}
.d-marquee .aliado-enlace{display:flex;align-items:center;height:60px;opacity:.75;filter:grayscale(1);transition:opacity .3s, filter .3s}
.d-marquee .aliado-enlace:hover,.d-marquee .aliado-enlace:focus-visible{opacity:1;filter:none}
.d-marquee img{height:calc(var(--h,44px) * .82);width:auto;max-width:var(--wmax,200px);object-fit:contain}
.d-logo-texto{gap:8px;color:var(--ink);font-size:13px;line-height:1.15;white-space:nowrap}
.d-logo-texto i{font-size:26px}
.d-logo-texto b{display:block;font-weight:800}
.d-marquee.is-running .d-marquee-track{animation:d-marquee var(--dur,50s) linear infinite}
.d-marquee:hover .d-marquee-track,.d-marquee.is-paused .d-marquee-track{animation-play-state:paused}
@keyframes d-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- Secciones de característica ---------- */
.d-feature{padding:clamp(72px, 10vw, 128px) 0;overflow-x:clip}
.d-feat-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px, 7vw, 96px)}
.d-flip .d-feat-copy{order:2}
.d-feat-copy h2{font-size:clamp(34px, 4.4vw, 52px);line-height:1.08;color:var(--blue)}
.d-feat-copy p{margin-top:18px;font-size:19px;line-height:1.55;max-width:42ch}
.d-feat-copy strong{color:var(--ink);font-weight:800}
.d-feat-art{position:relative;width:100%;max-width:460px;margin-inline:auto}
.d-rig{display:block;width:100%;overflow:visible}

/* Escena 1: idea → proyecto → robot */
.d-idea{aspect-ratio:1}
.d-card{background:#fff;border:2px solid var(--line);border-radius:20px;box-shadow:0 4px 0 var(--line)}
.d-idea-bubble{position:absolute;left:0;top:4%;max-width:74%;padding:16px 20px;border-radius:20px 20px 20px 6px;background:var(--blue);color:#fff;font-weight:800;font-size:17px;line-height:1.35;box-shadow:0 4px 0 var(--blue-edge)}
.d-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-3px;background:#fff;animation:d-caret .8s steps(1) infinite}
@keyframes d-caret{50%{opacity:0}}
.d-idea-card{position:absolute;right:0;top:30%;width:58%;padding:16px 18px;background:#fff;border:2px solid var(--line);border-radius:20px;box-shadow:0 4px 0 var(--line);transition:opacity .4s, transform .6s var(--spring)}
.d-idea-card b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--ink)}
.d-idea-card b i{color:var(--blue)}
.d-idea-card ul{margin-top:10px;display:grid;gap:6px}
.d-idea-card li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text);transition:opacity .3s, transform .4s var(--spring)}
.d-idea-card li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2313234c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.d-idea-bot{position:absolute;left:-2%;bottom:-2%;width:62%;transition:transform 1s var(--spring), opacity .3s}
.d-js .d-idea:not(.is-card) .d-idea-card{opacity:0;transform:scale(.85) translateY(14px)}
.d-js .d-idea:not(.is-card) .d-idea-card li{opacity:0;transform:translateX(-8px)}
.d-idea.is-card .d-idea-card li:nth-child(2){transition-delay:.1s}.d-idea.is-card .d-idea-card li:nth-child(3){transition-delay:.2s}.d-idea.is-card .d-idea-card li:nth-child(4){transition-delay:.3s}
.d-js .d-idea:not(.is-bot) .d-idea-bot{transform:translateX(-60%) scale(.9);opacity:0}

/* Escena 2: laptop con simuladores */
.d-laptop{position:relative}
.d-laptop-screen{position:relative;aspect-ratio:16/10;border:12px solid var(--navy);border-bottom-width:16px;border-radius:22px;background:var(--navy);overflow:hidden}
.d-laptop-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:8px;opacity:0;transform:scale(1.04);transition:opacity .6s ease, transform 1.2s var(--ease)}
.d-laptop-screen img.is-on{opacity:1;transform:none}
.d-laptop-base{height:16px;margin:0 -7%;border-radius:0 0 18px 18px;background:#c9d4ea;box-shadow:inset 0 4px 0 #e3e9f6}
.d-sim-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.d-sim-pills button{font:inherit;cursor:pointer;background:none;padding:7px 14px;border-radius:12px;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-weight:800;font-size:13px;color:var(--muted);transition:all .3s}
.d-sim-pills button.is-on{background:var(--blue);border-color:var(--blue);box-shadow:0 3px 0 var(--blue-edge);color:#fff}


/* Escena 4: hardware */
.d-hw{aspect-ratio:1.1;display:grid;place-items:center}
.d-hw-board{width:92%;filter:drop-shadow(0 26px 30px rgba(23,60,156,.22));animation:d-hover 5s ease-in-out infinite}
.d-hw-bot{position:absolute;right:-8%;top:-8%;width:46%}
.d-hw-mx{position:absolute;left:2%;bottom:6%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:16px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);font-weight:800;font-size:14px;color:var(--ink)}
.d-hw-mx i{color:var(--blue);font-size:17px}

/* Escena 5: clase */
.d-class{aspect-ratio:1.05}
.d-class-card{position:relative;z-index:1;width:88%;padding:22px;background:#fff;border:2px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line)}
.d-class-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.d-class-head b{font-size:20px;font-weight:800;color:var(--ink)}
.d-class-head span{font-size:13px;color:var(--muted)}
.d-class-list li{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:12px;padding:10px 0;border-top:2px solid var(--line-2);font-weight:800;font-size:14px;color:var(--ink)}
.d-class-list i{height:14px;border-radius:8px;background:var(--line-2);position:relative;overflow:hidden}
.d-class-list i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--blue);transition:width 1.4s var(--ease)}
.d-class-list li:nth-child(2) i::after{background:#6f8ff5;transition-delay:.15s}
.d-class-list li:nth-child(3) i::after{background:var(--lime-edge);transition-delay:.3s}
.d-class-list li:nth-child(4) i::after{background:#8fb3ff;transition-delay:.45s}
.d-js .d-class:not(.is-live) .d-class-list i::after{width:0}
.d-class-list b{font-size:14px;color:var(--muted);text-align:right}
.d-class-bot{position:absolute;right:-10%;bottom:-6%;width:56%;z-index:2}

/* ---------- Banda: aprende donde sea ---------- */
.d-band{position:relative;color:#dbe6ff;padding:clamp(80px, 10vw, 128px) 0;overflow:hidden;isolation:isolate}
.d-band-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 85% 10%, #52b4ff, transparent 70%),radial-gradient(50% 70% at 10% 100%, #1a3fb8, transparent 70%),linear-gradient(135deg,#2459eb,#2f7df5)}
.d-band-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px, 7vw, 96px)}
.d-band h2{font-size:clamp(34px, 4.4vw, 52px);line-height:1.08;color:#fff}
.d-band p{margin-top:18px;font-size:19px;max-width:38ch;color:#dbe6ff}
.d-band-art{position:relative;max-width:460px;width:100%;margin-inline:auto}
.d-band .d-laptop-screen{border-color:#0e1d45}
.d-band .d-laptop-base{background:#9fbaf8;box-shadow:inset 0 4px 0 #c3d4fb}
.d-phone{position:absolute;right:-6%;bottom:-10%;width:30%;aspect-ratio:9/18;border:7px solid #0e1d45;border-radius:22px;background:#0e1d45;overflow:hidden;box-shadow:0 18px 30px -10px rgba(5,15,50,.5)}
/* Captura real de Qubiko a tamaño de celular (1:2, igual que el marco). */
.d-phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:14px}
/* El celular se turna con la laptop: vertical para Robótica y Bloques;
   para Circuitos y Diseño 3D gira a horizontal, como se usan en el
   teléfono. La captura va contra-girada dentro del marco girado. */
.d-phone{transition:transform .9s var(--spring, cubic-bezier(.34,1.56,.64,1))}
.d-phone.is-land{transform:translate(-38%, -22%) rotate(-90deg)}
.d-phone img{position:absolute;inset:0;opacity:0;transition:opacity .45s ease .15s}
.d-phone img.is-on{opacity:1}
.d-phone img.is-land{max-width:none;inset:auto;top:50%;left:50%;width:200%!important;height:50%!important;object-position:50% 50%;translate:-50% -50%;rotate:90deg}
.d-band .d-btn-white{--edge:#c9d8fb;border-color:#fff}

/* ---------- Escuelas ---------- */
.d-school{aspect-ratio:1}
.d-blob{position:absolute;inset:4%;overflow:hidden;border-radius:42% 58% 60% 40% / 45% 45% 55% 55%;animation:d-blob 12s ease-in-out infinite;background:var(--blue-soft)}
.d-blob img{width:100%;height:100%;object-fit:cover}
@keyframes d-blob{50%{border-radius:58% 42% 40% 60% / 55% 50% 50% 45%}}
.d-sticker{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:16px;font-weight:800;font-size:15px;box-shadow:0 4px 0 var(--lime-edge);background:var(--lime);color:var(--navy)}
.d-st-1{left:-2%;top:10%;rotate:-6deg;animation:d-hover 4s ease-in-out infinite}
.d-st-2{right:-2%;bottom:10%;rotate:4deg;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);animation:d-hover 4.6s ease-in-out -1.5s infinite}
.d-st-2 i{color:var(--blue)}

/* ---------- Preguntas ---------- */
.d-faq-sec{padding:clamp(72px, 9vw, 112px) 0}
.d-faq-wrap{max-width:820px}
.d-faq-sec h2{font-size:clamp(32px, 4vw, 46px);color:var(--blue);text-align:center;margin-bottom:36px}
.d-faq{display:flex;flex-direction:column;gap:14px}
.d-faq-item{background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line);transition:border-color .2s}
.d-faq-item.is-open{border-color:#c9d8fb}
.d-faq-item h3{font-size:inherit}
.d-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;text-align:left;font-weight:800;font-size:17px;color:var(--ink)}
.d-faq-icon{position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue-soft);transition:rotate .5s var(--bounce), background-color .3s}
.d-faq-icon::before,.d-faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;margin:-1.5px 0 0 -7px;border-radius:2px;background:var(--blue)}
.d-faq-icon::after{rotate:90deg}
.d-faq-item.is-open .d-faq-icon{rotate:45deg;background:var(--blue)}
.d-faq-item.is-open .d-faq-icon::before,.d-faq-item.is-open .d-faq-icon::after{background:#fff}
.d-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.d-faq-item.is-open .d-faq-a{grid-template-rows:1fr}
.d-faq-a>div{overflow:hidden}
.d-faq-a p{padding:0 22px 22px;font-size:16px;color:var(--text);opacity:0;transition:opacity .3s}
.d-faq-item.is-open .d-faq-a p{opacity:1;transition-delay:.1s}
.d-faq-a a{color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ---------- Cierre con la familia de robots ---------- */
.d-final{padding:clamp(80px, 10vw, 128px) 0 clamp(64px, 8vw, 96px);text-align:center}
.d-final h2{font-size:clamp(36px, 5vw, 60px);line-height:1.05;color:var(--blue)}
.d-crew{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:8px;max-width:980px;margin:40px auto 32px}
.d-crew .d-rig{cursor:pointer;transition:transform .5s var(--bounce)}
.d-crew .d-rig:hover{transform:translateY(-14px) rotate(-3deg)}
.d-crew-q{transform-origin:50% 100%}
.d-js .d-crew:not(.is-in) .d-rig{opacity:0;transform:translateY(40px) scale(.8)}
.d-crew.is-in .d-rig{animation:d-jump .9s var(--spring) both}
.d-crew.is-in .d-rig:nth-child(2){animation-delay:.08s}.d-crew.is-in .d-rig:nth-child(3){animation-delay:.16s}.d-crew.is-in .d-rig:nth-child(4){animation-delay:.24s}.d-crew.is-in .d-rig:nth-child(5){animation-delay:.32s}
@keyframes d-jump{0%{opacity:0;transform:translateY(40px) scale(.8)}60%{opacity:1;transform:translateY(-16px) scale(1.03)}100%{opacity:1;transform:none}}
.d-final-btns{display:flex;flex-direction:column;align-items:center;gap:6px}

/* ---------- Pie ---------- */
.d-footer{background:var(--blue);color:#dbe6ff;padding:72px 0 36px}
.d-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.d-footer h4{color:#fff;font-size:18px;font-weight:800;margin-bottom:16px}
.d-footer li+li{margin-top:10px}
.d-footer li a,.d-footer li span{font-weight:700;font-size:15px;color:#dbe6ff;transition:color .2s;overflow-wrap:anywhere}
.d-footer li a:hover{color:#fff}
.d-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:56px;padding-top:28px;border-top:2px solid rgba(255,255,255,.18)}
.d-logo-white{color:#fff}
.d-socials{display:flex;gap:8px}
.d-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:19px;transition:background-color .2s, transform .3s var(--bounce)}
.d-socials a:hover{background:#fff;color:var(--blue);transform:translateY(-3px)}
.d-footer-bottom p{margin-left:auto;font-size:14px;color:#c9d8fb}
.d-footer-bottom .ph-heart{color:#8fd8ff}
.d-effects{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;border:2px solid rgba(255,255,255,.3)!important;font-weight:800;font-size:13px;color:#fff!important}
.d-effects:hover{background:rgba(255,255,255,.12)!important}

/* ---------- Entradas al hacer scroll ---------- */
[data-unveil]{transition:clip-path 1.3s var(--ease)}
.d-js [data-unveil].is-pending{clip-path:inset(100% -20% -20% -20% round 32px)}
[data-reveal],[data-pop]{transition:opacity .7s var(--ease), transform 1s var(--spring)}
.d-js .is-pending[data-reveal]{opacity:0;transform:translateY(28px)}
.d-js .is-pending[data-pop]{opacity:0;transform:translateY(60px) scale(.88) rotate(-2deg)}
/* La copia de cada sección entra por partes */
.d-feat-copy[data-reveal],.d-band-copy[data-reveal]{transition:none}
.d-js :is(.d-feat-copy,.d-band-copy).is-pending{opacity:1;transform:none}
:is(.d-feat-copy,.d-band-copy)>:not(h2){transition:opacity .7s var(--ease) .35s, transform 1s var(--spring) .35s}
:is(.d-feat-copy,.d-band-copy)>:not(h2):last-child{transition-delay:.5s}
.d-js :is(.d-feat-copy,.d-band-copy).is-pending>:not(h2){opacity:0;transform:translateY(24px)}

/* ---------- Transición entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:d-vt-out .22s ease both}
::view-transition-new(root){animation:d-vt-in .32s var(--ease) both}
@keyframes d-vt-out{to{opacity:0}}
@keyframes d-vt-in{from{opacity:0;transform:translateY(10px)}}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:900px){
  .d-links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;padding:12px 24px 24px;background:#fff;border-bottom:2px solid var(--line-2);opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .3s, translate .4s var(--ease), visibility .3s}
  .d-links.open{opacity:1;visibility:visible;translate:0 0}
  .d-links li{border-bottom:2px solid var(--line-2)}
  .d-links .nav-item{display:block;padding:16px 4px;font-size:16px}
  .d-only-menu{display:block}
  .d-burger{display:inline-flex}
  .d-nav-act{margin-left:auto}
  .d-nav-cta{opacity:1;translate:none;pointer-events:auto}
}
@media (max-width:820px){
  .d-hero-in,.d-feat-in,.d-band-in{grid-template-columns:1fr;gap:40px}
  .d-hero-in{min-height:0}
  .d-hero-art{max-width:380px}
  .d-hero-copy{align-items:center;text-align:center}
  .d-hero-btns{justify-content:center}
  .d-flip .d-feat-copy{order:0}
  .d-feat-copy,.d-band-copy{text-align:center}
  .d-feat-copy p,.d-band p{margin-inline:auto}
  .d-btn-row{justify-content:center}
  .d-feat-art{max-width:400px}
  .d-band-art{order:2}
  .d-footer-grid{grid-template-columns:1fr 1fr}
  .d-footer-bottom p{margin-left:0}
  .d-crew{grid-template-columns:repeat(3,1fr)}
  .d-crew .d-rig:nth-child(n+4){display:none}
  .d-allies-label{display:none}
}
@media (max-width:520px){
  .d-hw-bot{right:-2%}
  .d-class-bot{right:-2%}
  .d-phone{right:-1%}
  body.d-page{font-size:16px}
  .d-wrap{padding-inline:16px}
  .d-nav-in{gap:12px}
  .d-logo .marca{width:34px}.d-logo .d-wordmark{width:88px;height:21px}
  .d-nav-cta{padding:8px 12px;font-size:12px}
  .d-hero{padding-top:calc(var(--nav-h) + 8px)}
  .d-hero-copy>p{font-size:17px}
  .d-feat-copy p,.d-band p{font-size:17px}
  .d-idea-bubble{font-size:15px}
  .d-idea-card{width:64%}
  .d-class-list li{grid-template-columns:92px 1fr 38px;font-size:13px}
  .d-footer-grid{grid-template-columns:1fr}
  .d-btn-row .d-btn{width:100%}
}

/* ---------- Movimiento reducido o pausado ---------- */
/* ============================================================
   Capa de movimiento
   ============================================================ */
/* Barra de avance */
.d-progress{position:fixed;left:0;top:0;z-index:1001;width:100%;height:4px;background:linear-gradient(90deg,var(--blue),var(--sky) 60%,#9fdcff);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Titulares: palabra por palabra y marcador lima */
.d-w{display:inline-block;vertical-align:top;overflow:clip;overflow-clip-margin:.12em;padding-bottom:.06em;margin-bottom:-.06em}
.d-w>span{display:inline-block;transition:transform 1s var(--spring) calc(var(--i) * 55ms), opacity .5s ease calc(var(--i) * 55ms)}
.d-js [data-split].is-pending .d-w>span{transform:translateY(110%) rotate(8deg);opacity:0}
:where(.d-page) :is(h1,h2) em{position:relative;z-index:0;font-style:normal;background:linear-gradient(100deg,#1f4fe0 10%,#38a8ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:where(.d-page) :is(h1,h2) em::after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;bottom:.04em;height:.26em;border-radius:6px;background:linear-gradient(90deg,#cfe8ff,#e3f2ff);transform-origin:0 50%;transition:transform .9s var(--ease) .45s}
.d-js [data-split].is-pending em::after{transform:scaleX(0)}
.d-hero h1 em::after{animation:d-mark 1s var(--ease) .7s both}
@keyframes d-mark{from{transform:scaleX(0)}}
.d-mani-text em::after{display:none}
.d-mani-text .d-sw{-webkit-text-fill-color:currentColor}
.d-mani-text em .d-sw.is-lit{-webkit-text-fill-color:transparent}
.d-band h2 em{background:none;color:#aee0ff;-webkit-text-fill-color:#aee0ff}
.d-band h2 em::after{background:rgba(255,255,255,.18)}

/* Auras vivas detrás de cada ilustración */
.d-feat-art,.d-band-art,.d-hero-art{isolation:isolate}
.d-feat-art::before,.d-feat-art::after,.d-band-art::before,.d-hero-art::before{content:"";position:absolute;z-index:-2;pointer-events:none;border-radius:50%}
.d-feat-art::before{inset:-14% -10% -6% -18%;background:radial-gradient(closest-side, color-mix(in srgb, var(--a1, #9fbcff) 55%, transparent), transparent);animation:d-aura-a 14s ease-in-out infinite alternate}
.d-feat-art::after{width:60%;aspect-ratio:1;right:-14%;top:-10%;background:radial-gradient(closest-side, color-mix(in srgb, var(--a2, #bfe3ff) 60%, transparent), transparent);animation:d-aura-b 11s ease-in-out infinite alternate}
.d-band-art::before{inset:-20%;background:radial-gradient(closest-side, rgba(143,179,255,.55), transparent);animation:d-aura-a 12s ease-in-out infinite alternate}
.d-hero-art::before{display:none}
.d-hero-glow{position:absolute;inset:-12%;z-index:-2;border-radius:50%;pointer-events:none;color:#b9d0ff;transition:color 1.4s ease;background:radial-gradient(closest-side, color-mix(in srgb, currentColor 70%, transparent), transparent 75%);animation:d-aura-a 10s ease-in-out infinite alternate}
@keyframes d-aura-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.08)}100%{transform:translate(-5%,5%) scale(.96)}}
@keyframes d-aura-b{0%{transform:translate(0,0) scale(.9)}100%{transform:translate(-18%,26%) scale(1.15)}}
#software{--a1:#9fd3ff;--a2:#bfe3ff}
#crear{--a1:#a9c4ff;--a2:#bfe3ff}
#software{--a1:#8fb3ff;--a2:#bfe0ff}
#hardware{--a1:#9fbcff;--a2:#bfe3ff}
#docentes{--a1:#b9d0ff;--a2:#dff1ff}
#escuelas{--a1:#cfe0ff;--a2:#bfe3ff}
.d-hero{position:relative;isolation:isolate;overflow-x:clip}
.d-hero::after{content:"";position:absolute;z-index:-1;left:var(--mx, 30%);top:var(--my, 45%);width:520px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side, rgba(143,201,255,.4), transparent);pointer-events:none;transition:left .6s var(--ease), top .6s var(--ease)}

/* Decoraciones que flotan a distinta velocidad */
.d-deco{position:absolute;z-index:-1;pointer-events:none}
.d-deco>i{display:block;animation:d-float 6s ease-in-out infinite;animation-delay:var(--d, 0s)}
.d-deco-ring>i{width:44px;height:44px;border-radius:50%;border:7px solid #c9dafe}
.d-deco-dot>i{width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:0 3px 0 var(--lime-edge)}
.d-deco-plus>i{width:26px;height:26px;background:linear-gradient(var(--blue),var(--blue)) center/100% 7px no-repeat,linear-gradient(var(--blue),var(--blue)) center/7px 100% no-repeat;border-radius:3px;animation:d-float 6s ease-in-out infinite,d-spin 9s linear infinite}
.d-deco-pill>i{width:44px;height:14px;border-radius:8px;background:#9fbcff;rotate:-24deg}
.d-deco-tri>i{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid #8fb3ff;animation:d-float 7s ease-in-out infinite,d-spin 12s linear infinite reverse}
@keyframes d-float{50%{transform:translateY(-14px)}}

/* Parallax suave */


/* Gestos extra de los robots */
.d-head{animation:d-head 4.2s ease-in-out infinite}
@keyframes d-head{0%,100%{transform:rotate(0)}22%{transform:rotate(-4deg)}48%{transform:rotate(0) translateY(-2px)}72%{transform:rotate(3.5deg)}}
.d-ant{animation:d-antw 1.9s ease-in-out infinite}
@keyframes d-antw{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.d-led{animation:d-led 1.6s steps(1) infinite}
.d-led-1{animation-delay:-.8s}
@keyframes d-led{50%{opacity:.25}}
.d-core{animation:d-spin 7s linear infinite}
.d-core-glow{transform-box:fill-box;transform-origin:center;animation:d-glow 2.2s ease-in-out infinite}
@keyframes d-glow{50%{transform:scale(1.35);opacity:0}}
.d-susp{animation:d-susp 1.1s ease-in-out infinite}
@keyframes d-susp{50%{transform:translateY(2.5px)}}
.d-breathe{animation:d-breath 3.4s ease-in-out infinite}
@keyframes d-breath{50%{transform:translateY(-4px) scaleY(1.01)}}
.d-swing{animation:d-swing 3.4s ease-in-out infinite}
@keyframes d-swing{50%{transform:rotate(5deg)}}
.d-lens{animation:d-lens 3.2s ease-in-out infinite}
@keyframes d-lens{0%,70%,100%{transform:scale(1)}80%{transform:scale(.6)}}
.d-turn{animation:d-spin 6s linear infinite}
.d-cam{animation:d-cam 5s ease-in-out infinite}
@keyframes d-cam{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.d-blur{animation:d-blurp .24s linear infinite}
@keyframes d-blurp{50%{opacity:.08}}
.d-flag{animation:d-flag 1s ease-in-out infinite}
@keyframes d-flag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.82) skewY(-8deg)}}
.d-dust{animation:d-dust 1.4s ease-out infinite}
.d-dust-1{animation-delay:-.45s}.d-dust-2{animation-delay:-.9s}
@keyframes d-dust{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(-26px,-12px) scale(1.5);opacity:0}}
.d-tread{animation:d-tread .5s linear infinite}
@keyframes d-tread{to{transform:translateX(-24px)}}
.d-cable{stroke-dasharray:6 6;animation:d-cable 1.2s linear infinite}
@keyframes d-cable{to{stroke-dashoffset:-24}}
.d-rig .d-eyes{animation:d-look 7s ease-in-out infinite}
@keyframes d-look{0%,30%,100%{transform:translateX(0)}38%,52%{transform:translateX(-4px)}60%,74%{transform:translateX(4px)}}
.d-crew.is-in .d-rig>g{animation:d-hop 7.5s var(--ease) infinite;animation-delay:calc(1.4s + var(--k, 0) * 1.5s)}
@keyframes d-hop{0%,14%,100%{transform:translateY(0)}5%{transform:translateY(-26px)}9%{transform:translateY(0) scaleY(.94)}}
.d-crew .d-rig>g{transform-origin:200px 372px}


/* ============================================================
   Auras azul cielo que se transforman detrás de toda la página
   ============================================================ */
.d-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.d-field i{position:absolute;width:58vmax;aspect-ratio:1;border-radius:50%;opacity:.5;transition:translate 1.2s var(--ease)}
.d-field i:nth-child(1){left:-18vmax;top:-12vmax;background:radial-gradient(circle at 45% 45%, #9fd3ff, rgba(159,211,255,0) 70%);animation:d-amoeba 17s ease-in-out infinite alternate}
.d-field i:nth-child(2){right:-22vmax;top:20vh;background:radial-gradient(circle at 50% 50%, #7fb4ff, rgba(127,180,255,0) 68%);opacity:.38;animation:d-amoeba 21s ease-in-out -6s infinite alternate-reverse}
.d-field i:nth-child(3){left:20vw;bottom:-30vmax;background:radial-gradient(circle at 50% 50%, #c4e6ff, rgba(196,230,255,0) 70%);animation:d-amoeba 19s ease-in-out -3s infinite alternate}
@keyframes d-amoeba{0%{transform:rotate(0) scale(1,1)}33%{transform:rotate(50deg) scale(1.22,.82)}66%{transform:rotate(-30deg) scale(.86,1.18)}100%{transform:rotate(20deg) scale(1.1,.95)}}

/* ---------- Piezas comunes ---------- */
.d-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--sky-soft);color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.d-sec-head{text-align:center;max-width:760px;margin-inline:auto}
.d-sec-head h2{margin-top:18px;font-size:clamp(34px, 4.6vw, 56px);line-height:1.06;color:var(--blue)}
.d-sec-head>p{margin:18px auto 0;max-width:46ch;font-size:19px}
.d-step-n{align-self:flex-start;justify-self:start;display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:10px;background:var(--sky-soft);color:var(--blue);font-weight:900;font-size:14px;letter-spacing:.04em}

/* ---------- Manifiesto que se enciende con el scroll ---------- */
.d-manifesto{padding:clamp(96px, 13vw, 170px) 0 clamp(40px, 6vw, 80px);text-align:center}
.d-mani-text{max-width:24ch;margin:26px auto 0;font-size:clamp(30px, 4.8vw, 62px);line-height:1.12;color:var(--ink)}
.d-mani-text em{color:var(--blue)}
.d-sw{transition:color .35s ease, opacity .35s ease}
.d-js [data-scrub] .d-sw:not(.is-lit){color:#c7d7f2}
.d-js [data-scrub] em .d-sw:not(.is-lit){color:#b9d3fb}
/* ── Palabras con textura en el manifiesto ─────────────────────────
   Al encenderse, la letra se rellena con su material y se mueve un poco:
   circuito, metal, bloques, placa con remaches y cartón reciclado. */
.d-tex .d-sw{display:inline-block}
.d-tex .d-sw.is-lit{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 3px 0 rgba(19,35,76,.14))}
.d-tex-circuito .d-sw.is-lit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' fill='none' stroke='%23bfe9ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 20h28l10 10h22M60 30v24l10 10h20M0 62h18l10-10h14M42 52v38M74 0v16'/%3E%3Cg fill='%23ffffff' stroke='none'%3E%3Ccircle cx='60' cy='30' r='4.5'/%3E%3Ccircle cx='42' cy='52' r='4.5'/%3E%3Ccircle cx='74' cy='16' r='4.5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,#1a3fb8,#2459eb 45%,#38a8ff);background-size:.9em .9em,100% 100%;animation:d-tex-pan 7s linear infinite}
.d-tex-metal .d-sw.is-lit{background-image:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.95) 48%,transparent 58%),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,#a9bad8 0%,#6f84ad 40%,#2f4470 52%,#8499c0 76%,#3e5282 100%);background-size:260% 100%,100% 100%,100% 100%;animation:d-tex-brillo 3.2s ease-in-out infinite}
.d-tex-bloques .d-sw.is-lit{background-image:radial-gradient(circle at 50% 42%,#8fd0ff 0 22%,#2f6fe8 24% 30%,transparent 32%),linear-gradient(180deg,#3a7cf2,#1a3fb8);background-size:.34em .34em,100% 100%;animation:d-tex-pan 5s linear infinite}
.d-tex-robot .d-sw.is-lit{background-image:linear-gradient(110deg,transparent 40%,rgba(143,216,255,.85) 50%,transparent 60%),radial-gradient(circle at 50% 50%,#8fb3ff 0 14%,#0b1733 16% 22%,transparent 24%),linear-gradient(180deg,#2b4ea8,#13234c);background-size:260% 100%,.42em .42em,100% 100%;animation:d-tex-brillo 3.8s ease-in-out -1.2s infinite}
.d-tex-carton .d-sw.is-lit{background-image:repeating-linear-gradient(90deg,rgba(101,60,24,.28) 0 2px,transparent 2px 6px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .06 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E"),linear-gradient(180deg,#dcae72,#b98147 60%,#a06b36);background-size:100% 100%,120px 120px,100% 100%;filter:drop-shadow(0 3px 0 rgba(101,60,24,.22));animation:d-tex-carton 2.6s ease-in-out infinite;transform-origin:50% 90%}
.d-tex-carton .d-sw.is-lit+.d-sw,.d-tex-carton .d-sw:nth-child(2){animation-delay:-1.3s}
@keyframes d-tex-pan{to{background-position:.9em -.9em,0 0}}
@keyframes d-tex-brillo{0%{background-position:120% 0,0 0,0 0}60%,100%{background-position:-20% 0,0 0,0 0}}
@keyframes d-tex-carton{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.d-tex .d-sw.is-lit{animation:none}}

/* ---------- Lo que construye la IA: escenario fijo y pasos ---------- */
.d-story-sec{padding:clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 80px)}
.d-story{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px, 6vw, 88px);margin-top:clamp(40px, 6vw, 72px)}
.d-stage-wrap{position:sticky;top:calc(var(--nav-h) + 36px);align-self:start;isolation:isolate}
.d-stage-wrap::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side, rgba(143,201,255,.55), transparent);animation:d-aura-a 12s ease-in-out infinite alternate}
.d-stage{background:#fff;border:2px solid var(--line);border-radius:28px;box-shadow:0 40px 70px -40px rgba(36,89,235,.45), 0 4px 0 var(--line);overflow:hidden}
.d-stage-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:2px solid var(--line-2)}
.d-stage-dots{display:flex;gap:6px}
.d-stage-dots i{width:10px;height:10px;border-radius:50%;background:#dbe8fb}
.d-stage-tabs{position:relative;flex:1;display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border-radius:12px;background:#f1f6ff}
.d-stage-tabs b{position:relative;z-index:1;padding:7px 2px;text-align:center;font-size:12.5px;font-weight:800;color:var(--muted);transition:color .3s}
.d-stage-tabs b.is-on{color:var(--blue)}
.d-stage-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);border-radius:9px;background:#fff;box-shadow:0 2px 0 var(--line);transform:translateX(calc(var(--s, 0) * 100%));transition:transform .7s var(--spring)}
.d-stage-views{position:relative;aspect-ratio:4/3;background:#fbfdff}
.d-view{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .45s ease, clip-path .9s var(--ease)}
.d-view.is-on{opacity:1;clip-path:inset(0)}
.d-view.is-left{clip-path:inset(0 100% 0 0)}
.d-view svg{display:block;width:100%;height:100%}
.d-iso{animation:d-float 5s ease-in-out infinite}
.d-dash-spin{animation:d-dash 6s linear infinite}
@keyframes d-dash{to{stroke-dashoffset:-160}}
.d-dim{stroke-dasharray:none;opacity:0;transform:translateY(8px);transition:opacity .6s .5s, transform .8s var(--spring) .5s}
.d-view.is-on .d-dim{opacity:1;transform:none}
.d-tool{opacity:0;transition:opacity .5s .3s}
.d-view.is-on .d-tool{opacity:1}
/* código */
.d-code{display:flex;flex-direction:column;padding:18px;background:#0f1d44}
.d-code-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font:700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#8fa9dc}
.d-code-sw{display:flex;padding:3px;border-radius:9px;background:#1a2c5c}
.d-code-sw b{padding:6px 10px;border-radius:7px;font-family:var(--font);font-weight:800;font-size:12px;color:#8fa9dc}
.d-code-sw b.is-on{background:#2459eb;color:#fff}
.d-code ol{list-style:none;counter-reset:ln;font:600 clamp(11.5px, 1.25vw, 15px)/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#dbe7ff}
.d-code li{white-space:pre;counter-increment:ln;opacity:0;transform:translateX(-10px);transition:opacity .35s ease calc(var(--i, 0) * 70ms), transform .5s var(--ease) calc(var(--i, 0) * 70ms)}
.d-code li::before{content:counter(ln);display:inline-block;width:2.4em;margin-right:.8em;text-align:right;color:#4b6297}
.d-code.is-on li{opacity:1;transform:none}
.d-code s{text-decoration:none;color:#7cc7ff}
.d-code em{font-style:normal;color:#fff}
.d-code u{text-decoration:none;color:#b9d6ff}
.d-code q{color:#6f86b8}.d-code q::before,.d-code q::after{content:none}
/* diagrama */
.d-wires path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.d-wires path:nth-child(2){transition-delay:.12s}.d-wires path:nth-child(3){transition-delay:.24s}.d-wires path:nth-child(4){transition-delay:.36s}.d-wires path:nth-child(5){transition-delay:.48s}.d-wires path:nth-child(6){transition-delay:.6s}
.d-view.is-on .d-wires path{stroke-dashoffset:0}
.d-flow{opacity:0;transition:opacity .5s 1.2s}
.d-view.is-on .d-flow{opacity:.9;animation:d-flow .9s linear infinite}
@keyframes d-flow{to{stroke-dashoffset:-17}}
.d-gear{animation:d-spin 1.4s linear infinite}
/* ruta */
.d-route{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.d-view.is-on .d-route{stroke-dashoffset:0}
.d-node{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.4);transition:opacity .3s, transform .6s var(--bounce)}
.d-view.is-on .d-node{opacity:1;transform:none}
.d-view.is-on .d-node:nth-child(4){transition-delay:.15s}.d-view.is-on .d-node:nth-child(5){transition-delay:.35s}.d-view.is-on .d-node:nth-child(6){transition-delay:.55s}.d-view.is-on .d-node:nth-child(7){transition-delay:.7s}.d-view.is-on .d-node:nth-child(8){transition-delay:.85s}
.d-ping{transform-box:fill-box;transform-origin:center;animation:d-glow 1.8s ease-out infinite}
.d-hop-bot{animation:d-float 1.6s ease-in-out infinite}
/* pasos */
.d-steps{position:relative;list-style:none;padding-left:34px}
.d-steps::before,.d-steps-fill{content:"";position:absolute;left:0;top:10vh;bottom:10vh;width:4px;border-radius:2px;background:var(--line)}
.d-steps-fill{display:block;background:linear-gradient(var(--blue),var(--sky));transform-origin:0 0;transform:scaleY(0)}
.d-step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s ease, transform .6s var(--ease)}
.d-js .d-step:not(.is-on){opacity:.28;transform:scale(.97)}
.d-step h3{margin-top:14px;font-size:clamp(28px, 3vw, 38px);line-height:1.1;color:var(--blue)}
.d-step p{margin-top:12px;font-size:18px;max-width:34ch}

/* ---------- Con lo que tengas: galería horizontal ---------- */
.d-hs{position:relative;padding:clamp(80px, 10vw, 120px) 0}
.d-hs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.d-hs-head h2{margin-top:18px;font-size:clamp(34px, 4.6vw, 56px);line-height:1.06;color:var(--blue)}
.d-hs-head>p{max-width:30ch;font-size:18px}
.d-hs-bar{display:block;width:100%;height:6px;margin-top:18px;border-radius:3px;background:var(--line);overflow:hidden}
.d-hs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--sky));transform-origin:0 50%;transform:scaleX(.12)}
.d-hs-view{margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.d-hs-view::-webkit-scrollbar{display:none}
.d-hs-track{display:flex;gap:24px;width:max-content;padding:10px max(24px, calc((100vw - var(--wrap)) / 2)) 24px}
.d-mat{width:clamp(270px, 28vw, 350px);flex:none;scroll-snap-align:center;padding:14px 14px 24px;background:#fff;border:2px solid var(--line);border-radius:28px;box-shadow:0 4px 0 var(--line), 0 30px 50px -40px rgba(36,89,235,.5);transition:transform .6s var(--spring)}
.d-mat:nth-child(even){transform:translateY(28px)}
.d-mat:hover{transform:translateY(-8px) rotate(-1deg)}
.d-mat-art{aspect-ratio:16/11;border-radius:20px;background:radial-gradient(120% 90% at 30% 20%, #ffffff, #dcefff);display:grid;place-items:center;overflow:hidden}
.d-mat-art svg{width:100%;height:100%}
.d-mat-photo img{width:88%;height:auto;animation:d-float 5s ease-in-out infinite;filter:drop-shadow(0 14px 16px rgba(23,60,156,.22))}
.d-mat .d-step-n{margin-top:18px}
.d-mat h3{margin-top:10px;font-size:23px;color:var(--ink)}
.d-mat p{margin-top:6px;font-size:15.5px;line-height:1.5}
.d-bob-s{animation:d-float 3.6s ease-in-out infinite}
.d-roll{animation:d-spin 2.4s linear infinite}
.d-blinker{animation:d-blink 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.d-chip-glow{animation:d-led 2s steps(1) infinite}
.d-armwave{animation:d-swing 1.4s ease-in-out infinite}
.d-hs.is-pinned{padding:0;height:var(--hs-h, 300vh)}
.d-hs.is-pinned .d-hs-pin{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.d-hs.is-pinned .d-hs-view{overflow:visible;scroll-snap-type:none}


/* ---------- Docentes: tarjetas que se apilan ---------- */
.d-stack-sec{padding:clamp(80px, 10vw, 130px) 0}
.d-stack{display:flex;flex-direction:column;gap:32px;margin-top:clamp(40px, 6vw, 64px)}
.d-card-s{position:sticky;top:calc(var(--nav-h) + 30px + var(--k, 0) * 20px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:430px;padding:clamp(28px, 4vw, 52px);border-radius:34px;border:2px solid var(--line);background:#fff;box-shadow:0 40px 70px -50px rgba(36,89,235,.55);transform-origin:50% 0}
.d-card-2{background:linear-gradient(135deg,#eaf5ff,#ffffff 70%)}
.d-card-3{background:linear-gradient(135deg,#2459eb,#3a8cff);border-color:transparent;color:#dbe9ff}
.d-card-3 .d-card-copy h3,.d-card-3 .d-link{color:#fff}
.d-card-3 .d-step-n{background:rgba(255,255,255,.18);color:#fff}
.d-card-copy h3{margin-top:14px;font-size:clamp(28px, 3vw, 40px);line-height:1.08;color:var(--blue)}
.d-card-copy p{margin-top:12px;font-size:18px;max-width:36ch}
.d-card-vis{position:relative}
.d-plan{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:22px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);rotate:2deg;animation:d-float 6s ease-in-out infinite}
.d-plan b{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--ink)}
.d-plan b i{color:var(--blue)}
.d-plan span{height:12px;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#dcebff,#eef6ff)}
.d-plan em{font-style:normal;font-weight:800;font-size:13px;color:var(--blue);padding:8px 12px;border-radius:10px;background:var(--sky-soft);align-self:flex-start}
.d-screen{position:relative;aspect-ratio:16/10;padding:18px;border-radius:22px;background:#0f1d44;border:10px solid #13234c;display:grid;place-items:center}
.d-screen .d-rig{width:62%}
.d-screen-tag{position:absolute;left:14px;top:12px;padding:6px 10px;border-radius:9px;background:#2459eb;color:#fff;font-weight:800;font-size:12px}
.d-screen-bar{position:absolute;left:14px;right:14px;bottom:12px;height:6px;border-radius:3px;background:#22356b}
.d-screen-bar i{display:block;width:50%;height:100%;border-radius:inherit;background:var(--sky);animation:d-grow 4s ease-in-out infinite}
@keyframes d-grow{0%{width:33%}60%,100%{width:50%}}
.d-card-3 .d-class{aspect-ratio:auto;padding-bottom:18%}
.d-card-3 .d-class-card{width:92%}
.d-card-3 .d-class-bot{right:-8%;bottom:-8%;width:48%}

/* El trabajo que no se ve se pausa */
.is-off,.is-off *,.is-off ::before,.is-off ::after{animation-play-state:paused!important}

@media (max-width:820px){
  .d-hero::after{display:none}
  .d-story{grid-template-columns:1fr;gap:12px}
  .d-stage-wrap{top:calc(var(--nav-h) + 8px);z-index:2}
  .d-stage-views{aspect-ratio:16/11}
  .d-stage-tabs b{font-size:11px}
  .d-steps{padding-left:22px}
  .d-step{min-height:58vh;justify-content:flex-end;padding-bottom:6vh}
  .d-step p{font-size:17px}
  .d-hs-head{flex-direction:column;align-items:center;text-align:center}
  .d-hs-head>p{max-width:none}
  .d-mat:nth-child(even){transform:none}
  .d-card-s{grid-template-columns:1fr;gap:24px;min-height:0;top:calc(var(--nav-h) + 12px + var(--k, 0) * 12px);text-align:center}
  .d-card-copy p{margin-inline:auto}
  .d-card-copy .d-step-n{align-self:center;justify-self:center}
  .d-field i{width:90vmax}
}

@media (prefers-reduced-motion:reduce){
  [data-par],.d-deco{translate:none}
  .d-field i{translate:none}
  .d-card-s{scale:none}
  .d-hero-art{translate:none;scale:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
[data-effects="paused"] *,[data-effects="paused"] ::before,[data-effects="paused"] ::after{animation-play-state:paused!important}

/* Ajustes de la banda y el manifiesto */

.d-sim-dev{position:relative}
.d-band .d-sim-pills{justify-content:flex-start;flex-wrap:nowrap;margin-top:clamp(44px, 6vw, 64px)}
.d-band .d-sim-pills button{font:inherit;cursor:pointer;background:none;border-color:rgba(255,255,255,.35);box-shadow:0 3px 0 rgba(8,22,70,.18);color:#e3eeff}
.d-band .d-sim-pills button.is-on{background:#fff;border-color:#fff;color:var(--blue);box-shadow:0 3px 0 #b9d3fb}
.d-manifesto,.d-story-sec,.d-hs,.d-stack-sec,.d-faq-sec,.d-final{overflow-x:clip}

/* ============================================================
   Foto: el marco se abre al hacer scroll
   ============================================================ */
.d-photo-sec{padding:clamp(24px, 4vw, 48px) 0 clamp(60px, 8vw, 100px);overflow-x:clip}
.d-photo{position:relative;isolation:isolate}
.d-photo::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side, rgba(111,182,255,.45), transparent);animation:d-aura-a 12s ease-in-out infinite alternate}
.d-photo-frame{overflow:hidden;border-radius:36px;aspect-ratio:1200/797;box-shadow:0 50px 90px -50px rgba(36,89,235,.6)}
.d-photo-frame{position:relative;background:radial-gradient(60% 70% at 50% 105%, #8fc9ff, transparent 70%),repeating-radial-gradient(circle at 50% 100%, transparent 0 70px, rgba(255,255,255,.55) 71px 73px),linear-gradient(165deg,#f1f8ff 10%,#cfe8ff 70%,#a9d5ff)}
.d-photo-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%, rgba(56,168,255,.25), transparent 22%),radial-gradient(circle at 88% 26%, rgba(36,89,235,.18), transparent 20%);pointer-events:none}
.d-photo-frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 100%;padding-top:4%;transform-origin:50% 100%}
.d-photo-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:18px;font-weight:800;font-size:16px;box-shadow:0 5px 0 var(--blue-edge), 0 20px 30px -16px rgba(36,89,235,.6);background:var(--blue);color:#fff;white-space:nowrap}
.d-pc-1{left:2%;top:-4%;rotate:-4deg;animation:d-float 5s ease-in-out infinite}
.d-pc-2{right:3%;bottom:-5%;rotate:3deg;background:#fff;color:var(--blue);box-shadow:0 5px 0 #cfe0fb, 0 20px 30px -16px rgba(36,89,235,.5);animation:d-float 5.6s ease-in-out -2s infinite}


/* ---------- Notas de Qubiko ---------- */
.d-news{padding:clamp(80px, 10vw, 120px) 0;overflow-x:clip}
.d-news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.d-news-head h2{margin-top:18px;font-size:clamp(34px, 4.6vw, 56px);line-height:1.06;color:var(--blue)}
.d-news-head>div:last-child{max-width:34ch}
.d-news-head>div:last-child p{font-size:18px}
.d-news-head .d-link{margin-top:14px}
.d-news-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:24px;margin-top:clamp(36px, 5vw, 56px)}
.d-note-big{grid-row:span 2}
.d-note>a{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;border:2px solid var(--line);border-radius:28px;box-shadow:0 4px 0 var(--line), 0 30px 50px -40px rgba(36,89,235,.55);transition:transform .5s var(--spring), border-color .3s, box-shadow .3s}
.d-note>a:hover{transform:translateY(-6px);border-color:#b9d3fb;box-shadow:0 6px 0 #cfe0fb, 0 40px 60px -40px rgba(36,89,235,.7)}
.d-note:not(.d-note-big)>a{flex-direction:row}
.d-note-cover{position:relative;overflow:hidden;flex:none}
.d-note-big .d-note-cover{aspect-ratio:16/10}
.d-note:not(.d-note-big) .d-note-cover{width:38%;min-height:100%}
.d-note-photo img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease)}
.d-note>a:hover .d-note-photo img{scale:1.06}
.d-note-art{display:grid;place-items:center;color:#fff;font-size:54px}
.d-note-art-1{background:radial-gradient(circle at 30% 20%, #52b4ff, transparent 60%),linear-gradient(135deg,#2459eb,#1a3fb8)}
.d-note-art-2{background:radial-gradient(circle at 70% 80%, #8fd8ff, transparent 55%),linear-gradient(135deg,#2f7df5,#2459eb)}
.d-note-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.28) 1.5px, transparent 1.6px);background-size:16px 16px;mask-image:linear-gradient(180deg,#000,transparent)}
.d-note-art i{position:relative;transition:transform .6s var(--bounce)}
.d-note>a:hover .d-note-art i{transform:translateY(-6px) rotate(-8deg) scale(1.08)}
.d-note-tag{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.92);color:var(--blue);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.d-note-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.d-note-meta{display:flex;gap:14px;font-size:13px;font-weight:800;color:var(--muted)}
.d-note-meta span{display:inline-flex;align-items:center;gap:6px}
.d-note h3{font-size:20px;line-height:1.25;color:var(--ink)}
.d-note-big h3{font-size:clamp(22px, 2.2vw, 28px)}
.d-note-body>p:not(.d-note-meta){font-size:15.5px;line-height:1.5}
.d-note-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.d-note-more i{transition:translate .35s var(--bounce)}
.d-note>a:hover .d-note-more i{translate:3px -3px}

/* ---------- Más azul en los detalles ---------- */
.d-wave-top{display:block;width:100%;height:clamp(60px, 8vw, 120px);margin-bottom:-2px}
.d-wave-1{animation:d-wave-x 9s ease-in-out infinite alternate}
.d-wave-2{animation:d-wave-x 7s ease-in-out -2s infinite alternate-reverse}
@keyframes d-wave-x{to{transform:translateX(-40px)}}
.d-footer{background:linear-gradient(180deg,#2459eb,#1f4fe0 60%,#1a3fb8)}
.d-final{position:relative;isolation:isolate}
.d-final::before{content:"";position:absolute;left:50%;top:58%;width:min(900px, 120vw);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;background:repeating-radial-gradient(circle, transparent 0 58px, rgba(143,201,255,.28) 59px 61px),radial-gradient(closest-side, rgba(191,227,255,.6), transparent);mask-image:radial-gradient(closest-side, #000 40%, transparent);animation:d-breathe 8s ease-in-out infinite}
.d-faq-item{position:relative;overflow:hidden}
.d-faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--blue),var(--sky));transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.d-faq-item.is-open::before,.d-faq-item:hover::before{transform:scaleY(1)}
.d-btn-blue{background:linear-gradient(180deg,#2d63f0,#2459eb)}
.d-kicker{background:linear-gradient(90deg,#e3f1ff,#eef7ff);box-shadow:inset 0 0 0 1.5px #d3e7ff}
.d-idea-bubble{background:linear-gradient(135deg,#2459eb,#2f7df5)}

@media (max-width:820px){
  .d-news-head{flex-direction:column;align-items:center;text-align:center}
  .d-news-grid{grid-template-columns:1fr}
  .d-note-big{grid-row:auto}
  .d-note:not(.d-note-big)>a{flex-direction:column}
  .d-note:not(.d-note-big) .d-note-cover{width:auto;min-height:0;aspect-ratio:16/7}
  .d-photo-chip{font-size:13px;padding:9px 12px}
  .d-pc-1{top:-8%}
}
@media (prefers-reduced-motion:reduce){
  .d-photo-frame{clip-path:none}
  .d-photo-frame img{scale:none}
}
.d-news-grid>*{min-width:0}

/* ============================================================
   Hero: cielo claro que se mueve, con grano tipo arena
   ============================================================ */
.d-hero-sky{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#eef7ff 0%,#f7fbff 55%,#ffffff 100%);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.d-hero-sky i{position:absolute;border-radius:50%}
.d-hero-sky i:nth-child(1){width:68vmax;aspect-ratio:1;left:-22vmax;top:-30vmax;background:radial-gradient(closest-side, rgba(126,196,255,.62), rgba(126,196,255,.22) 55%, rgba(126,196,255,0));animation:d-sky-a 16s ease-in-out infinite alternate}
.d-hero-sky i:nth-child(2){width:58vmax;aspect-ratio:1;right:-20vmax;top:-12vmax;background:radial-gradient(closest-side, rgba(170,216,255,.7), rgba(170,216,255,.2) 60%, rgba(170,216,255,0));animation:d-sky-b 19s ease-in-out -4s infinite alternate}
.d-hero-sky i:nth-child(3){width:60vmax;aspect-ratio:1;left:18%;bottom:-40vmax;background:radial-gradient(closest-side, rgba(191,227,255,.8), rgba(191,227,255,0));animation:d-sky-a 22s ease-in-out -9s infinite alternate-reverse}
.d-hero-sky i:nth-child(4){display:none;width:26vmax;aspect-ratio:1;left:46%;top:18%;background:radial-gradient(closest-side, rgba(92,178,255,.4), rgba(92,178,255,0));animation:d-sky-c 12s ease-in-out infinite alternate}
.d-hero-sky::after{content:"";position:absolute;inset:0;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .32 0 0 0 0 .68 0 0 0 .55 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
@keyframes d-sky-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,5vh) scale(1.12,.94)}100%{transform:translate(-4vw,9vh) scale(.95,1.08)}}
@keyframes d-sky-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-12vw,8vh) scale(1.15)}}
@keyframes d-sky-c{0%{transform:translate(0,0)}100%{transform:translate(-14vw,10vh) scale(1.3)}}

/* ============================================================
   Rendimiento en móvil
   ============================================================ */
@media (max-width:820px), (hover:none){
  .d-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:color-mix(in srgb, var(--tone) 96%, transparent)}
  .d-field i{animation:none;transition:none;translate:none}
  .d-field i:nth-child(3){display:none}
  .d-feat-art::before,.d-feat-art::after,.d-stage-wrap::before,.d-photo::before,.d-band-art::before{animation:none}
  .d-deco{display:none}
  .d-photo-frame{clip-path:none}
  .d-photo-frame img{scale:none}
  .d-hero-sky i:nth-child(4){display:none}
}
/* Los robots del hero que no se ven no se animan */
.d-art:not(.is-on),.d-art:not(.is-on) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.d-wag,.d-paw,.d-crawl,.d-bubble,.d-laser,.d-m-ghost rect{animation:none}}
.d-final-sub{max-width:46ch;margin:16px auto 0;font-size:19px}
@media (max-width:520px){.d-final-sub{font-size:17px}}

/* ============================================================
   Un solo estilo en todas las secciones, igual que el inicio
   ============================================================ */
.d-hero h1{max-width:20ch;font-size:clamp(36px, 4.2vw, 54px);line-height:1.08;letter-spacing:-.02em}

:is(.d-feat-copy,.d-sec-head,.d-hs-head,.d-news-head,.d-final,.d-band-copy) h2{font-size:clamp(32px, 4vw, 50px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.d-band-copy h2{color:#fff}
:is(.d-feat-copy,.d-band-copy) .d-kicker{margin-bottom:18px}
.d-sec-head h2,.d-hs-head h2,.d-news-head h2,.d-final h2{margin-top:18px}
.d-faq-sec .d-sec-head{margin-bottom:36px}
.d-faq-sec .d-sec-head h2{margin-bottom:0}
.d-step h3,.d-card-copy h3,.d-mat h3,.d-note h3{color:var(--ink)}
.d-card-3 .d-card-copy h3{color:#fff}
.d-band .d-kicker{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);color:#fff}
.d-feature,.d-stack-sec,.d-news,.d-faq-sec,.d-band,.d-final{padding-block:clamp(80px, 10vw, 128px)}
.d-story-sec{padding-top:clamp(80px, 10vw, 128px)}
.d-hs:not(.is-pinned){padding-block:clamp(80px, 10vw, 128px)}
.d-manifesto{padding:clamp(80px, 10vw, 128px) 0 clamp(40px, 6vw, 72px)}
/* El grano tipo arena del hero, en toda la página */
.d-field::after{content:"";position:absolute;inset:0;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .32 0 0 0 0 .68 0 0 0 .55 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
@media (max-width:820px){
  .d-feat-copy .d-kicker,.d-band-copy .d-kicker{margin-inline:auto}
}

/* ---------- Planes y precios ---------- */
.d-plans-sec{padding:clamp(80px, 10vw, 120px) 0}
.d-period{position:relative;display:flex;width:max-content;max-width:100%;margin:32px auto 0;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.d-period button{min-height:44px;padding:8px 20px;border-radius:999px;font-weight:800;font-size:15px;color:var(--text);transition:background-color .2s,color .2s}
.d-period button[aria-pressed="true"]{background:var(--blue);color:#fff}
.d-period button span{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--sky-soft);color:var(--blue);font-size:12px}
.d-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;align-items:start}
.d-tier{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 24px 24px;border-radius:28px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.d-tier-star{border-color:var(--blue);box-shadow:0 4px 0 var(--blue-edge),0 28px 50px -30px rgba(36,89,235,.6)}
.d-tier-badge{position:absolute;top:-14px;left:50%;translate:-50% 0;padding:5px 14px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.d-tier h3{display:flex;align-items:center;gap:8px;font-size:24px}
.d-tier h3 i{color:var(--blue)}
.d-tier-hook{font-size:15px;color:var(--muted)}
.d-price{margin-top:10px;color:var(--ink)}
.d-price b{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}
.d-price small{font-size:14px;color:var(--muted);font-weight:700}
.d-price-note{font-size:13px;color:var(--muted);min-height:1.5em}
.d-gift{margin-top:8px;padding:10px 12px;border-radius:14px;background:linear-gradient(90deg,#eef2ff,#f5f0ff);color:#4b3bb5;font-size:14px;line-height:1.35}
.d-gift i{color:#6d4ee8}
.d-ai{display:grid;gap:8px;margin-top:12px;padding:14px;border-radius:18px;background:var(--blue-mist);box-shadow:inset 0 0 0 1.5px var(--line)}
.d-ai>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.d-ai dt{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}
.d-ai dd{text-align:right;font-size:14px;font-weight:800;color:var(--ink);line-height:1.3}
.d-ai dd small,.d-school-ai small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.d-ai-off{color:var(--muted)!important;font-weight:700!important}
.d-tier-list{display:grid;gap:8px;margin:14px 0 20px;font-size:15px}
.d-tier-list li{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.d-tier-list i{color:var(--blue);margin-top:2px}
.d-tier .d-btn{margin-top:auto;width:100%;white-space:normal;text-align:center}
.d-schools{margin-top:48px;padding:28px;border-radius:28px;background:#fff;border:2px solid var(--line)}
.d-schools-head h3{display:flex;align-items:center;gap:8px;font-size:24px}
.d-schools-head h3 i{color:var(--blue)}
.d-schools-head p{margin-top:6px;max-width:60ch}
.d-schools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.d-school-plan{position:relative;padding:22px 18px 18px;border-radius:20px;background:var(--blue-mist);border:2px solid var(--line-2)}
.d-school-plan.d-tier-star{background:#fff}
.d-school-plan h4{font-size:20px}
.d-school-plan .d-price{margin-top:4px}
.d-school-plan .d-price b{font-size:32px}
.d-school-cap{margin-top:6px;font-size:14px}
.d-school-cap b{color:var(--ink)}
.d-school-ai{margin-top:10px;font-size:14px;font-weight:800;color:var(--blue)}
.d-schools-foot{margin-top:18px;font-size:15px}
.d-schools-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:800}
.d-compare-note{margin-top:32px;text-align:center;font-size:14px;color:var(--muted)}
@media (max-width:900px){
  .d-tiers{grid-template-columns:1fr;max-width:480px;margin-inline:auto;gap:28px}
  .d-tiers .d-tier-star{order:-1}
  .d-schools-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .d-schools{padding:22px 16px}
  .d-period button{padding:8px 14px;font-size:14px}
  .d-price b{font-size:38px}
}

/* Héroe limpio: la mascota se transforma sin etiqueta debajo. */
.d-hero .d-m-name{display:none}

/* ============================================================
   Héroe con elenco y línea dibujada (al estilo de MindMarket)
   El héroe mide más que la pantalla y su escenario se queda fijo:
   mientras bajas, heroMorph/frame en portada.js escribe --hp (0 → 1).
   Con --hp la línea azul se dibuja uniendo a los robots, el elenco se
   abre hacia los lados, la mascota se achica y el título sube y se va.
   ============================================================ */
.d-hero[data-hero-story]{padding:0;height:190svh}
.d-hero-stage{position:sticky;top:0;height:100svh;min-height:640px;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden;isolation:isolate}
.d-hero[data-hero-story] .d-hero-in{display:flex;flex-direction:column;align-items:center;gap:0;min-height:0;text-align:center}
.d-hero[data-hero-story] .d-hero-art{max-width:clamp(170px, 27vh, 270px);margin-bottom:6px;translate:0 calc(var(--hp,0) * -50px);scale:calc(1 - var(--hp,0) * .22)}
.d-hero[data-hero-story] .d-hero-copy{align-items:center;text-align:center;translate:0 calc(var(--hp,0) * -110px);opacity:calc(1 - max(0, (var(--hp,0) - .45) * 2.4))}
.d-hero[data-hero-story] h1{max-width:17ch;font-size:clamp(40px, 5.4vw, 78px);line-height:1.02;letter-spacing:-.035em}
.d-hero[data-hero-story] .d-hero-copy>p{max-width:46ch;margin-inline:auto}
.d-hero[data-hero-story] .d-hero-btns{justify-content:center}

/* La línea: se dibuja con el scroll (arranca con un trazo que invita a bajar) */
.d-hero-path{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.d-hero-path path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(.93 - var(--hp,0) * .93)}
.d-hero-path-sombra{stroke:#bfe3ff;stroke-width:22;opacity:.75}
.d-hero-path-linea{stroke:#2459eb;stroke-width:7}

/* El elenco: flotan quietos y se abren con el scroll */
.d-cast{position:absolute;inset:0;z-index:-1;pointer-events:none}
.d-cast-bot{position:absolute;width:clamp(120px, 14vw, 220px);
  translate:calc(var(--hp,0) * var(--dx) * 150px) calc(var(--hp,0) * var(--dy) * 90px);
  rotate:calc(var(--hp,0) * var(--rot) * 1deg);scale:calc(1 + var(--hp,0) * .14)}
.d-cast-bot svg{display:block;width:100%;height:auto;overflow:visible}
.d-cast-flota{animation:d-cast-flota 6s ease-in-out infinite alternate}
.d-cast-dron{left:6%;top:15%}
.d-cast-arana{right:6%;top:13%}
.d-cast-brazo{left:5%;bottom:8%}
.d-cast-perro{right:5%;bottom:8%}
.d-cast-arana .d-cast-flota{animation-delay:-1.5s}
.d-cast-brazo .d-cast-flota{animation-delay:-3s}
.d-cast-perro .d-cast-flota{animation-delay:-4.5s}
@keyframes d-cast-flota{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-14px) rotate(2deg)}}

/* Celular, pantallas táctiles y «menos movimiento»: sin anclar, sin línea */
@media (max-width:819px), not all and (hover:hover) and (pointer:fine){
  .d-hero[data-hero-story]{height:auto}
  .d-hero-stage{position:relative;height:auto;min-height:100svh;padding:calc(var(--nav-h) + 24px) 0 56px}
  .d-hero-path{display:none}
  .d-cast-bot{width:clamp(78px, 20vw, 130px);translate:none;rotate:none;scale:none}
  .d-cast-dron{left:2%;top:calc(var(--nav-h) + 4px)}
  .d-cast-arana{right:2%;top:calc(var(--nav-h) + 10px)}
  .d-cast-brazo,.d-cast-perro{display:none}
}
@media (prefers-reduced-motion:reduce){
  .d-hero[data-hero-story]{height:auto}
  .d-hero-stage{position:relative;height:auto;min-height:100svh}
  .d-hero-path{display:none}
  .d-cast-flota{animation:none}
}

/* Escritorio con más presencia: mascota protagonista con halo y un elenco
   más grande y cercano. En celular se queda como está (ya se ve bien). */
@media (min-width:820px) and (hover:hover) and (pointer:fine){
  .d-hero[data-hero-story] .d-hero-art{max-width:clamp(240px, 40vh, 400px);margin-bottom:-6px}
  .d-hero[data-hero-story] h1{font-size:clamp(40px, 4.6vw, 70px)}
  .d-hero[data-hero-story] .d-hero-art::after{content:"";position:absolute;left:50%;top:52%;z-index:-3;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(214,236,255,.7) 45%,rgba(214,236,255,0) 72%);
    box-shadow:0 0 0 1.5px rgba(143,201,255,.25) inset}
  .d-cast-bot{width:clamp(150px, 15vw, 250px)}
  .d-cast-dron{left:9%;top:17%}
  .d-cast-arana{right:9%;top:15%}
  .d-cast-brazo{left:8%;bottom:11%}
  .d-cast-perro{right:8%;bottom:11%}
}
/* La mascota se puede tocar para pasar al siguiente robot */
.d-hero-art.is-tocable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.d-hero-art.is-tocable .d-morph{transition:scale .45s var(--spring)}
.d-hero-art.is-tocable:hover .d-morph{scale:1.04}
.d-hero-art.is-tocable:active .d-morph{scale:.96;transition-duration:.12s}
.d-hero-art.is-tocable:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:32px}
.d-sim-pills button{white-space:nowrap}
@media (max-width:520px){
  .d-band .d-sim-pills{justify-content:center;gap:6px}
  .d-band .d-sim-pills button{padding:6px 10px;font-size:12px}
}

/* ── Tacto (auditoría 2026-10): enlaces del pie y del menú más fáciles de tocar. ── */
.d-footer li a{display:inline-block;padding-block:8px;margin-block:-8px}
@media(min-width:901px){.d-links .nav-item,body.d-tema .d-links .nav-item{display:inline-block;padding-block:10px;margin-block:-10px}}