html{--stage-bg:#ff7ab6;--blob-now:#3d5afe;--hd:#1b1f4b}
/* Chispa: nivel 3. Una mascota 3D recortada vive en una columna fija; la sección que lees cambia su expresión, el color de la mancha y el fondo. */
@font-face{font-family:'Bricolage Grotesque';src:url('assets/bricolage.woff2') format('woff2');font-weight:400 800;font-display:swap}
.chispa{--ch:'Bricolage Grotesque',Inter,Arial,sans-serif;font-family:var(--ch);background:#1b1f4b}
.chispa .demo-header{position:absolute;left:0;right:0;top:48px;z-index:20;background:transparent;color:var(--hd,#1b1f4b);transition:color .4s}
.chispa .wordmark{font-family:var(--ch);font-weight:800;font-size:30px;letter-spacing:-.02em;color:inherit}
.chispa .demo-header nav a{color:inherit;font-weight:600;font-size:14px}
.ch-flow{position:relative;isolation:isolate;overflow:clip}
.ch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ch-stage{position:sticky;top:48px;z-index:5;height:calc(100svh - 48px);width:46vw;margin-bottom:calc(-100svh + 48px);pointer-events:none;overflow:hidden}
.ch-blob{position:absolute;left:50%;bottom:-8vh;width:min(40vw,640px);aspect-ratio:1;translate:-50% 0;background:var(--blob-now,#3d5afe);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;transition:background-color .7s ease;animation:ch-morph 9s ease-in-out infinite alternate}
@keyframes ch-morph{50%{border-radius:42% 58% 46% 54%/58% 44% 56% 42%}100%{border-radius:55% 45% 60% 40%/42% 58% 42% 58%}}
.ch-cut{position:absolute;left:50%;bottom:-3vh;width:min(38vw,600px);aspect-ratio:1;translate:-50% 0;transform:translate(calc(var(--px,0px) + var(--mx,0px)),calc(var(--py,0px) + var(--my,0px))) rotate(calc(var(--rot,0deg) + var(--mr,0deg))) scale(var(--ms,1));transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.ch-pose{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.ch-pose.is-on{opacity:1;animation:ch-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ch-pop{0%{transform:scale(.94,1.04)}60%{transform:scale(1.03,.97)}100%{transform:none}}
@media(prefers-reduced-motion:no-preference){.ch-cut{animation:ch-float 5s ease-in-out infinite}@keyframes ch-float{50%{margin-bottom:12px}}}
@media(prefers-reduced-motion:reduce){.ch-blob{animation:none}.ch-pose,.ch-pose.is-on{animation:none;transition:none}}
.ch-sec{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px 6vw 90px calc(46vw + 2vw);background:var(--bg);color:var(--ink);transition:background-color .5s}
.ch-hero{padding-top:150px}
.ch-copy{max-width:640px}
.ch-kicker{font-weight:700;font-size:13px;letter-spacing:.16em;color:inherit!important;margin-bottom:18px}
.chispa h1,.chispa h2{font-family:var(--ch);font-weight:800;letter-spacing:-.035em;line-height:.92;color:inherit}
.chispa h1{font-size:clamp(70px,10.5vw,170px)}
.chispa h2{font-size:clamp(46px,6.4vw,100px)}
.ch-lead{font-size:clamp(18px,1.6vw,23px);line-height:1.4;max-width:520px;margin-top:26px;color:inherit!important}
.ch-actions{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:32px}
.ch-btn{display:inline-block;margin-top:0;background:#1b1f4b;color:#fff!important;font-weight:700;font-size:17px;padding:16px 26px;border-radius:16px;box-shadow:5px 5px 0 #1b1f4b55;text-decoration:none;transition:transform .2s}
.ch-btn:hover,.ch-btn:focus-visible{transform:translateY(-3px) rotate(-1.5deg)}
.ch-last .ch-btn{background:#c6f432;color:#1b1f4b!important;margin-top:32px}
.ch-link{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:5px}
.ch-card{margin-top:34px;max-width:480px;padding:22px 24px;border-radius:26px;background:#fff;color:#1b1f4b;box-shadow:0 10px 0 #1b1f4b22}
.ch-card p{color:inherit!important;font-size:16px}
.ch-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.ch-row strong{font-size:20px}.ch-row span{font-weight:800;font-size:20px;white-space:nowrap}
.ch-bar{height:16px;border-radius:99px;background:#1b1f4b1a;margin:16px 0 12px;overflow:hidden}.ch-bar i{display:block;height:100%;width:var(--w);background:#ff7ab6;border-radius:99px;transform-origin:left;animation:ch-fill 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes ch-fill{from{transform:scaleX(0)}}
.ch-avatars{list-style:none;display:flex;margin:16px 0 0;padding:0}.ch-avatars li{width:38px;height:38px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;border:3px solid #fff;margin-left:-8px}.ch-avatars li:first-child{margin-left:0}.ch-avatars li:nth-child(3){color:#1b1f4b}
.ch-streak ol{list-style:none;display:flex;gap:8px;margin:16px 0;padding:0}.ch-streak li{flex:1;aspect-ratio:1;max-width:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;background:#1b1f4b14}.ch-streak li.on{background:#1b1f4b;color:#c6f432}.ch-streak{background:#c6f432;border-radius:14px}.ch-streak li{background:#1b1f4b22}
.ch-chat{background:none;box-shadow:none;padding:0;display:grid;gap:12px;max-width:440px}.ch-chat p{padding:14px 18px;border-radius:22px;background:#fff;font-size:17px;box-shadow:0 6px 0 #1b1f4b22}.ch-chat b{margin-right:6px}.ch-chat .b2{background:#c6f432;margin-left:36px}.ch-chat .b3{margin-left:12px}
.ch-badge{display:flex;gap:18px;align-items:center}.ch-medal{flex:none;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:#ffd84d;border:4px solid #1b1f4b}.ch-badge strong{font-size:21px}
.chispa .demo-note,.chispa .demo-end,.chispa footer{position:relative;z-index:6}
@media(max-width:900px){
 .chispa .demo-header{position:sticky;top:48px;z-index:21;background:var(--stage-bg,#ff7ab6);transition:background-color .5s;padding:10px 20px;align-items:center}.chispa .demo-header nav a:first-child{display:none}.chispa .demo-header nav{gap:14px}.chispa .wordmark{font-size:26px}
 .ch-stage{width:100%;height:128px;top:100px;margin:0;background:var(--stage-bg,#ff7ab6);transition:background-color .5s}
 .ch-blob{width:112px;bottom:-26px}.ch-cut{width:128px;bottom:-14px}
 .ch-sec{padding:36px 22px 70px;min-height:0;display:block}.ch-hero{padding-top:30px}.ch-last{padding-bottom:110px;min-height:0}
 .chispa h1{font-size:clamp(64px,19vw,96px)}.chispa h2{font-size:clamp(42px,12.5vw,60px)}
}

.chispa .demo-end{background:#c6f432;color:#1b1f4b;border-top:0}.chispa .demo-end h2,.chispa .demo-end p,.chispa .demo-end .eyebrow{color:#1b1f4b!important}.chispa .demo-end .button{background:#1b1f4b;color:#fff;border-radius:16px}.chispa footer,.chispa footer a{background:#1b1f4b;color:#dfe2ee}
.ch-last .ch-btn{box-shadow:5px 5px 0 #c6f43255}

.ch-badge{background:#ffd84d;border-radius:44px 14px 44px 14px}.ch-medal{background:#fff}
.ch-mid{display:inline-block;margin-top:30px}

.chispa .demo-note{position:relative;z-index:10;background:#080c14}.chispa .demo-note h2{color:#dfe2ee}.chispa .demo-note p{color:#aab4c8}.chispa .demo-note .eyebrow{color:#25d4a0}

@media(min-width:901px){.ch-last{min-height:62svh}}