/* Landing motion layer: editorial hero, circular question carousel, turning night sky.
   Motion runs on transform/opacity only, so it stays on the compositor. */
:root{--ease:cubic-bezier(.2,.75,.25,1);
 --reveal-t:opacity .7s var(--ease) calc(var(--i,0)*90ms),translate .7s var(--ease) calc(var(--i,0)*90ms)}
html,body{overflow-x:clip}

/* ---------- Shared rhythm, controls and motion grammar ---------- */
.masthead{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent)}
.landing-panel{padding:clamp(40px,8vh,96px) clamp(18px,5vw,64px)}
.landing-panel h1,.landing-panel h2{margin:14px 0 0}
.landing-panel .eyebrow{margin:0}
.landing-panel .intro-lead{margin-top:20px}
.entry-actions{gap:12px;margin:32px 0 0}
.question-cloud{scroll-margin-top:84px}
.landing-panel .button,.landing-panel .mini-button,.landing-panel .text-link{border-radius:999px;gap:10px;transition:transform .3s var(--ease),background .25s,border-color .25s,box-shadow .3s,color .25s}
.landing-panel .button{padding:14px 24px;min-height:52px}
.landing-panel .button.primary::after{content:"→" / "";transition:translate .3s var(--ease)}
.landing-panel .question-choice{transition:var(--reveal-t),transform .45s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
@media(hover:hover){
 .landing-panel .button:hover,.landing-panel .mini-button:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--dark) 60%,transparent)}
 .landing-panel .button.primary:hover::after{translate:5px 0}
}
.landing-panel .button:active,.landing-panel .mini-button:active{transform:scale(.97)}
.example-card{border-radius:20px;border:0;box-shadow:inset 0 0 0 1px var(--border-soft)}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--accent)}
@media(prefers-reduced-motion:no-preference){
 [data-reveal]:not(.is-in){opacity:0;translate:0 28px}
 [data-reveal]{transition:var(--reveal-t)}
 .landing-panel:not(#entry):not([hidden])>*{animation:panel-rise .7s var(--ease) both}
 .landing-panel>:nth-child(2){animation-delay:.06s}.landing-panel>:nth-child(3){animation-delay:.12s}
 .landing-panel>:nth-child(4){animation-delay:.18s}.landing-panel>:nth-child(5){animation-delay:.24s}
 .landing-panel>:nth-child(n+6){animation-delay:.3s}
 .entry-hero>*{animation:panel-rise .9s var(--ease) both}
 .entry-hero>:nth-child(2){animation-delay:.1s}.entry-hero>:nth-child(3){animation-delay:.22s}.entry-hero>:nth-child(n+4){animation-delay:.34s}
}
@keyframes panel-rise{from{opacity:0;translate:0 24px}}

/* ---------- Night sky: one static drawing that turns slowly around a zenith (compositor-only) ---------- */
/* Brightness lives on each star (opacity attribute, set in sky.js); tinted stars carry their own fill. */

/* ---------- Hero: editorial, huge type ---------- */
@supports (animation-timeline:scroll()){
 body::after{content:"";position:fixed;inset:0 0 auto;height:3px;z-index:30;pointer-events:none;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);animation:read-progress linear both;animation-timeline:scroll(root)}
}
@keyframes read-progress{to{transform:scaleX(1)}}
#entry{width:min(1240px,100%)}
.entry-hero{position:relative;min-height:calc(100svh - 78px);justify-content:flex-end;padding-bottom:14vh}
.entry-hero h1{font-size:clamp(54px,min(10.5vw,15vh),152px);max-width:9.5ch;line-height:.9;letter-spacing:-.06em}
.entry-hero::after{content:"";position:absolute;left:0;bottom:18px;width:1px;height:48px;background:linear-gradient(var(--accent),transparent);transform-origin:top}
@media(prefers-reduced-motion:no-preference){.entry-hero::after{animation:cue 2.4s var(--ease) infinite}}
@keyframes cue{0%{scale:1 0;opacity:1}60%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
.question-cloud{border-top:0}
.landing-panel .question-cloud{padding:clamp(24px,5vh,56px) 0 clamp(40px,8vh,96px)}
.question-cloud h2{font-size:clamp(38px,min(5vw,9vh),72px);max-width:14ch;line-height:.95}
@media(max-width:700px){.entry-hero{min-height:calc(100svh - 65px);padding-bottom:12vh}}

/* ---------- Question carousel: a ring of 5 cards; carousel.js writes each card's transform ---------- */
#question-list{position:relative;display:block;height:clamp(380px,48vw,440px);margin:20px 0 0;perspective:1200px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#question-list>button{
 --c1:var(--accent);--c2:var(--dark);
 position:absolute;left:50%;top:50%;width:clamp(230px,24vw,320px);min-height:310px;
 display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:28px;
 padding:24px 22px;border:0;border-radius:26px;color:var(--white);text-align:left;cursor:pointer;
 background:linear-gradient(160deg,var(--c1),var(--c2));
 font:400 clamp(20px,1.8vw,26px)/1.18 Georgia,"Times New Roman",serif;letter-spacing:-.015em;
 box-shadow:0 26px 50px -30px color-mix(in srgb,var(--dark) 80%,transparent);
 animation:none;transform:translate(-50%,-50%);will-change:transform,opacity;transition:box-shadow .3s}
#question-list>button:nth-child(2){--c1:var(--accent-soft);--c2:var(--active-surface);color:var(--ink)}
#question-list>button:nth-child(3){--c1:var(--amber);--c2:var(--dark)}
#question-list>button:nth-child(4){--c1:var(--surface-warm);--c2:var(--graph-halo);color:var(--ink)}
#question-list>button:nth-child(5){--c1:var(--dark);--c2:var(--accent)}
#question-list>button::before{content:attr(data-n) / "";font:650 12px/1 system-ui,sans-serif;letter-spacing:.14em;opacity:.75}
#question-list>button::after{content:"→" / "";display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;font:400 20px/1 system-ui,sans-serif;align-self:flex-end;transition:transform .35s var(--ease),background .3s,color .3s}
#question-list>button:is(:hover,:focus-visible){box-shadow:0 40px 60px -26px color-mix(in srgb,var(--dark) 90%,transparent)}
#question-list>button:is(:hover,:focus-visible)::after{transform:rotate(-45deg);background:var(--white);color:var(--dark)}
@media(max-width:700px){
 #question-list{height:360px;margin-inline:calc(-1*clamp(18px,5vw,64px))}
 #question-list>button{width:min(64vw,260px);min-height:280px;font-size:20px}
}
/* Reduced motion: a plain, static grid instead of a moving ring. */
@media(prefers-reduced-motion:reduce){
 #question-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;height:auto;margin-inline:0;perspective:none}
 #question-list>button{position:static;width:auto;min-height:200px;transform:none!important;opacity:1!important;pointer-events:auto!important}
}
@media(max-width:480px){.masthead .palette-picker select{max-width:118px}}

/* ---------- "Muéstrame cómo funciona": always a dark night sky ---------- */
body.is-night{--paper:#0a0f24;--ink:#eef1fb;--muted:#aab3cf;--border-soft:#26304f;--surface-soft:#121a36;--night-accent:color-mix(in srgb,var(--accent) 45%,#fff)}
body.is-night .sky-bg{color:#dfe6ff}
/* While Apolo asks or a constellation is open, the background almost disappears; only a few bright stars remain. */
body.is-night .sky-layer{opacity:.4}
body.is-night select{color-scheme:dark;background:#121a36;color:var(--ink)}
/* Flow controls live in the footer, next to "Pregunta X de 3", and stay reachable at the bottom of the screen. */
body.is-night .footer{position:sticky;bottom:0;z-index:15;background:color-mix(in srgb,var(--paper) 92%,transparent)}
.flow-nav{display:flex;gap:4px;margin:0 auto 0 18px}
.flow-nav .text-link{min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 14px/1 system-ui,sans-serif}
.flow-nav .text-link:hover{color:var(--ink);background:rgb(255 255 255 / .07)}
.night-panel{width:min(1240px,100%)}
.trail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:360px;height:4px;margin:0 0 28px}
.trail span{border-radius:4px;background:rgb(255 255 255 / .14);overflow:hidden}
.trail span.is-done{background:var(--night-accent)}
.trail span.is-current{background:linear-gradient(90deg,var(--night-accent) 35%,rgb(255 255 255 / .14) 35%)}
.night-panel h2{font-size:clamp(34px,min(4.6vw,8vh),64px);max-width:20ch;line-height:1}
.night-panel .intro-lead{color:var(--muted);max-width:56ch}
/* The stage fits the screen under the heading and above the sticky footer. */
.night-stage{position:relative;height:clamp(420px,calc(100svh - 400px),620px);margin-top:20px}
.night-stage>*{position:absolute}

/* Astro: centered while it asks, just under the two paths while they are open, then it sinks out of view. */
.nebula-slot{--nebula-low:97%;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:50% 0;transition:top .9s var(--ease),transform .9s var(--ease),opacity .7s var(--ease),visibility 0s}
[data-stage="paths"] .nebula-slot{top:52%;transform:translate(-50%,0) scale(.8)}
[data-stage="sky"] .nebula-slot,[data-stage="profile"] .nebula-slot{top:var(--nebula-low);transform:translate(-50%,-40%) scale(.6);opacity:0;visibility:hidden;pointer-events:none;transition:top .9s var(--ease),transform .9s var(--ease),opacity .6s var(--ease),visibility 0s .9s}

/* Paths: two small live constellations. */
.path-pair{display:none;inset:0 0 auto;height:50%;grid-template-columns:1fr 1fr;gap:clamp(12px,4vw,64px);transition:opacity .5s var(--ease)}
[data-stage="paths"] .path-pair,[data-stage="sky"] .path-pair{display:grid}
[data-stage="sky"] .path-pair{opacity:0;pointer-events:none}
[data-stage="sky"] .path-choice.is-chosen .path-sky{visibility:hidden}
.path-choice{display:grid;grid-template-rows:1fr auto;justify-items:center;gap:10px;min-height:44px;padding:10px;border:0;border-radius:24px;background:none;color:var(--muted);font:400 clamp(22px,2.6vw,32px)/1 Georgia,"Times New Roman",serif;cursor:pointer;
 transition:color .3s,background .3s}
.path-sky{width:min(100%,260px);height:100%;min-height:150px;transition:scale .6s var(--ease)}
.path-choice.is-previewed{color:var(--ink);background:rgb(255 255 255 / .05)}
.path-choice.is-previewed .path-sky{scale:1.06}
@media(prefers-reduced-motion:no-preference){[data-stage="paths"] .path-choice{animation:path-grow .8s var(--ease) calc(var(--i)*.15s) both}}
@keyframes path-grow{from{opacity:0;translate:0 60px}}

/* Open constellation: the field zooms in from the path drawing; ring, labels and hint fade in after. */
.sky-field,.star-card,.pick-ring,.sky-hint{display:none}
/* The field is a square centered left of the card, so the pick ring is a true circle around the stars. */
.night-stage{container-type:size;--field:min(100cqh - 44px,100cqw - 340px)}
[data-stage="sky"] .sky-field,[data-stage="profile"] .sky-field{display:block}
[data-stage="sky"] .pick-ring{display:block;overflow:visible;pointer-events:none}
:is(.sky-field,.pick-ring){top:calc((100cqh - 44px - var(--field)) / 2);left:calc((100cqw - 340px - var(--field)) / 2);width:var(--field);height:var(--field)}
[data-stage="sky"] .sky-hint{display:block}
[data-stage="sky"] .star-card,[data-stage="profile"] .star-card{display:grid}
.pick-ring circle{fill:none;stroke:rgb(255 255 255 / .1);stroke-width:2}
.pick-ring .pick-ring-fill{stroke:var(--night-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s var(--ease)}
.pick-ring,.sky-hint,.sky-field .cst-label,.sky-field .cst-ring{transition:opacity .5s var(--ease)}
.night-stage.is-zooming :is(.pick-ring,.sky-hint,.cst-label,.cst-ring){opacity:0}
.sky-field{will-change:transform}
/* The final constellation holds up to 9 stars in the same square: narrower, smaller labels. */
[data-stage="profile"] .sky-field{--cst-w:min(118px,27vw)}
[data-stage="profile"] .sky-field .cst-label{font-size:12px;padding:2px 6px}
.sky-hint{left:0;right:340px;bottom:0;margin:0;text-align:center;color:var(--muted);font:500 14px/1.4 system-ui,sans-serif}
.star-card{right:0;top:50%;width:300px;transform:translateY(-50%);gap:10px;align-content:start;padding:22px;border-radius:22px;background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);
 opacity:0;transition:opacity .45s var(--ease)}
.star-card.is-on{opacity:1}
.star-card h3{margin:0;font:400 26px/1.1 Georgia,"Times New Roman",serif}
.star-card p{margin:0;color:var(--muted);line-height:1.5}
.star-kind{justify-self:start;padding:4px 10px;border-radius:999px;font:650 11px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#f5b860;color:#1a1430}
.star-kind[data-kind="habilidad"]{background:#8fb3ff}.star-kind[data-kind="forma"]{background:#c9a6ff}
.reading{max-width:720px;margin-top:28px;transition:opacity .9s var(--ease)}
.reading.is-waiting{opacity:0}
.reading h3{margin:8px 0 12px;font:400 clamp(30px,3.6vw,46px)/1 Georgia,"Times New Roman",serif}
.reading ul{display:grid;gap:10px;margin:20px 0;padding:0;list-style:none}
.reading li{padding:12px 16px;border-radius:14px;background:rgb(255 255 255 / .05);color:var(--muted)}
.reading li strong{color:var(--ink)}
.reading-question{font:400 clamp(20px,2vw,24px)/1.3 Georgia,"Times New Roman",serif}
@media(max-width:760px){
 .night-stage{height:auto;min-height:520px}
 .path-pair{height:270px}
 .path-sky{min-height:120px}
 [data-stage="sky"] .night-stage,[data-stage="profile"] .night-stage{display:grid;grid-template-rows:auto auto auto;gap:14px;min-height:0}
  .night-stage{container-type:normal}
 [data-stage="sky"] :is(.sky-field,.pick-ring),[data-stage="profile"] .sky-field{position:relative;grid-area:1/1;inset:auto;justify-self:center;width:min(100%,60svh,430px);height:auto;aspect-ratio:1}
 .sky-hint{position:static;right:auto}
 .star-card{position:static;width:auto;transform:none}
 .flow-nav{margin-left:8px}
 body.is-night .footer>span:last-child{display:none}
 .flow-nav .text-link{padding:8px 10px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.nebula-slot,.path-choice,.path-sky,.star-card,.pick-ring-fill,.reading{transition:none}}
/* "Antes de empezar": the nebula asks the name, then the age, with one short field below it. */
:is([data-stage="name"],[data-stage="age"]) .night-stage{height:clamp(240px,34svh,320px);min-height:0}
.intro-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px;max-width:420px}
.intro-form[hidden]{display:none}
.intro-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro-form input{flex:1 1 180px;min-width:0;min-height:48px;box-sizing:border-box;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:18px}
.intro-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.intro-form input[aria-invalid="true"]{border-color:#f0a3c4}
.intro-error{flex-basis:100%;margin:0;min-height:1.4em;color:#f0a3c4;font-size:15px}

/* ---------- "Empieza con una duda": Astro stands between two paths and sums up the chosen one ---------- */
.duda-panel{width:min(1100px,100%);margin:0 auto}
.duda-panel h2{font-size:clamp(32px,min(5vw,8vh),62px);line-height:1.02;max-width:20ch;letter-spacing:-.03em}
.duda-steps{display:flex;flex-wrap:wrap;gap:8px 30px;margin:22px 0 0;padding:0;list-style:none;counter-reset:step}
.duda-steps li{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);counter-increment:step}
.duda-steps li::before{content:counter(step);display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 11px/1 system-ui,sans-serif}
.duda-steps li+li::after{content:"";position:absolute;left:-24px;top:50%;width:18px;height:1px;background:var(--border-strong)}
.fork{display:grid;grid-template-columns:1fr minmax(220px,290px) 1fr;grid-template-areas:"a guide b";align-items:center;gap:clamp(14px,3vw,36px);margin-top:clamp(28px,5vh,52px)}
.fork-paths{display:contents}
.fork-card:nth-child(1){grid-area:a}.fork-card:nth-child(2){grid-area:b}
.fork .duda-guide{grid-area:guide}
.duda-guide.nebula{position:relative;width:100%;justify-self:center}
.duda-guide .nebula-body{width:min(160px,40vw)}
.duda-guide .nebula-bubble{background:var(--white);color:var(--ink);box-shadow:0 16px 34px -20px color-mix(in srgb,var(--dark) 60%,transparent),inset 0 0 0 1px var(--border-soft)}
.duda-guide .nebula-say{min-height:3.9em;font-size:clamp(15px,1.5vw,18px)}
.fork-card{display:grid;gap:10px;align-content:start;align-self:stretch;min-height:190px;padding:22px;border:0;border-radius:22px;text-align:left;background:var(--white);color:var(--ink);
 box-shadow:inset 0 0 0 1px var(--border-soft),0 12px 30px -26px var(--dark);transition:transform .4s var(--ease),box-shadow .3s,background .3s,opacity .3s}
.fork-card strong{font:400 clamp(19px,1.9vw,24px)/1.2 Georgia,"Times New Roman",serif}
.fork-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.fork-tags{font-size:13px;line-height:1.4;color:var(--muted)}
.fork-card::after{content:"Elegir este camino →";font-size:13px;font-weight:650;color:var(--accent);opacity:0;translate:0 6px;transition:opacity .3s,translate .3s var(--ease)}
.fork-card.is-previewed{transform:translateY(-6px);background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent),0 22px 40px -24px var(--dark)}
.fork-card.is-previewed::after{opacity:1;translate:0}
.fork:has(.is-previewed) .fork-card:not(.is-previewed){opacity:.6}
.duda-from{margin:14px 0 0;font-size:13px;color:var(--muted)}
.ending-grid{display:grid;grid-template-columns:minmax(200px,270px) 1fr;align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(24px,4vh,44px)}
.ending-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ending-card{display:grid;gap:10px;align-content:start;padding:20px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--border-soft)}
.landing-panel .ending-card .demo-label{margin:0}
.ending-card p{margin:0;line-height:1.45}
.ending-card small{font-size:11px;color:var(--muted)}
.ending-card.is-chat{grid-column:1/-1;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--active-surface)}
.ending-card.is-chat p{font:400 clamp(19px,2vw,24px)/1.25 Georgia,"Times New Roman",serif}
.ending-card.is-chat .button{justify-self:start;margin-top:4px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tag-list li{padding:6px 12px;border-radius:999px;background:var(--surface-soft);font-size:13px;font-weight:600;color:var(--active-ink)}
@media(max-width:760px){
 .fork{grid-template-columns:1fr;grid-template-areas:"guide" "a" "b"}
 .fork-card{min-height:0}
 .duda-steps{flex-direction:column}
 .duda-steps li+li::after{display:none}
 .duda-guide .nebula-body{width:110px}
 .ending-grid,.ending-cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.fork-card,.fork-card::after{transition:none}.fork-card.is-previewed{transform:none}}