/* home.css: index.html only. Owner: home builder. Static layout first; animation start states only under
   html.motion. Uses the tokens and primitives of base.css (no token is redefined here). May be merged into
   base.css when both pages are done (SPEC §9.1 counts one stylesheet). */

/* =========================================================================================
   Stacking (deviation from base.css, see README): GSAP gives every .pin-spacer an inline
   position:relative + z-index:auto, which paints its background ABOVE a z-0 fixed canvas.
   The canvas goes to z 1: it is earlier in the DOM than <main>, so every later z-2 box
   (section children, the pinned section inside its spacer, the footer) still paints above it.
   ========================================================================================= */
.cosmos { z-index: 1; }
main > section > *, .site-footer > * { z-index: 2; }
.motion .pin-spacer > section { position: relative; z-index: 2; }

/* CLS: a pinned section must not clip its own overflow. Chrome reports a clipping box that switches to
   position:fixed as a full-viewport layout shift (measured ~1.0 per pin entry and exit, with hidden AND clip;
   0.0019 total once the clip moved inside). So pinned sections stay overflow:visible under .motion and an inner
   box clips: .impact-s__box (S2), .track-clip (S4), .problems__stage (S3). */

/* ---------- S1 Hero ---------- */
.hero { position: relative; overflow: clip; }
.hero__in {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--bar-h) + var(--s-6)) var(--s-9);
}
.hero__kicker { margin-bottom: var(--s-5); max-width: 30ch; }
.hero__h1 { max-width: 14ch; }
.hero__ati { display: inline-block; padding-right: .06em; }
.hero__sub { margin-top: var(--s-6); }
.hero__ctas { margin-top: var(--s-6); gap: var(--s-4) var(--s-6); }
.hero__more { font-weight: 600; }
.hero__hint { position: absolute; left: var(--gutter); bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); }
.hero__hint-line { display: block; width: 1px; height: 28px; background: currentColor; opacity: .6; transform-origin: 50% 0; }

.hero > .hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--star); z-index: 0; pointer-events: none; }
.hero > .hero__dot {
  position: absolute; left: 82%; top: 16%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: radial-gradient(circle, var(--star) 0 45%, transparent 72%); pointer-events: none;
}
.hero__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: radial-gradient(circle, rgb(244 241 234 / .45), rgb(244 241 234 / .08) 45%, transparent 70%);
}
.hero__flash, .hero__rings { display: none; }

@media (max-width: 767px) {
  .hero > .hero__dot { left: 86%; top: max(18%, calc(var(--bar-h) + 40px)); }
  .hero__in { justify-content: flex-start; padding-top: 96px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .hero__ctas .btn { width: 100%; }
  .hero__more { justify-content: center; }
  .hero__hint-line { display: none; }
}
@media (min-width: 768px) { .hero__sub { max-width: 34ch; } }
/* short and landscape screens: the whole hero (kicker, H1, sub, CTAs) fits in 100svh, so the pin never hides it */
@media (max-height: 700px) {
  .hero__in { padding-block: calc(var(--bar-h) + var(--s-4)) var(--s-8); }
  .hero__kicker { margin-bottom: var(--s-3); }
  .hero__h1 { font-size: min(var(--t-display), 13svh); }
  .hero__sub, .hero__ctas { margin-top: var(--s-4); }
}
@media (max-height: 500px) {
  .hero__in { padding-block: calc(var(--bar-h) + var(--s-2)) var(--s-5); }
  .hero__kicker { max-width: none; }
  .hero__h1 { font-size: min(var(--t-display), 12svh); max-width: 22ch; }
  .hero__sub { font-size: 1rem; max-width: 62ch; margin-top: var(--s-3); }
  .hero__ctas { flex-direction: row; align-items: center; }
  .hero__ctas .btn { width: auto; }
  .hero__hint { display: none; }
}

/* motion: canvas + flash + shock rings; the point breathes until the first scroll */
.motion .hero > .hero__sky { opacity: .5; }
/* nudge.js: while the stars are being played with they light up over the dimmed sky (beats GSAP's inline opacity) */
.motion .hero > .hero__sky { overflow: visible; }
.hero__sky stop { stop-color: var(--star); }   /* nudge.js star glow */
.motion .hero > .hero__sky.is-fading { transition: opacity .8s; }
.motion .hero > .hero__sky.is-live { opacity: .85 !important; }
.motion .hero__dot::before { animation: dot-breathe var(--d-pulse) ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { opacity: .7; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.motion .hero > .hero__flash { display: block; position: absolute; inset: 0; background: var(--star); opacity: 0; pointer-events: none; z-index: 4; }
.motion .hero > .hero__rings {
  display: block; position: absolute; left: 50%; top: 70%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax;
  pointer-events: none; z-index: 1;
}
.hero__rings .ring { fill: none; stroke: var(--star); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform: scale(0); opacity: 0; }
.motion .hero__hint-line { animation: hint 2.4s var(--ease) infinite; }
@keyframes hint {
  0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ---------- S2 Impact ---------- */
.impact-s { position: relative; overflow: clip; min-height: 100svh; display: flex; align-items: center; padding-block: var(--section-y); }
.impact-s > .impact-s__burst { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--star); z-index: 0; pointer-events: none; }
.burst__ring { fill: none; stroke: var(--star-2); stroke-width: 1; opacity: .45; }
.burst__ring--2 { opacity: .2; }
.burst__words text { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; fill: var(--star-2); opacity: .75; }
.impact-s__box { display: flex; justify-content: center; }
.impact { max-width: 22ch; }
.impact .phrase { display: block; }
.impact .phrase + .phrase { margin-top: .7em; }
/* «Eso se acabó.» stands alone at headline size (DIRECCION §5 S2): the turn of the story */
.impact .phrase--big { font-size: clamp(2.75rem, 1.2rem + 6.4vw, 7rem); font-weight: 700; letter-spacing: -.045em; line-height: .95; }

.motion .impact-s { display: block; height: 100svh; min-height: 0; padding: 0; overflow: visible; }
.motion .impact-s > .impact-s__burst { display: none; }
.motion .impact-s__box { height: 100%; align-items: flex-start; padding-top: 50svh; overflow: clip; }
.motion .impact .phrase + .phrase { margin-top: 1.1em; }

/* ---------- S3 Problems ---------- */
.problems { padding-block: var(--section-y); }
.problems__in > * { max-width: 54rem; margin-inline: auto; }
.problems__h { margin-bottom: var(--s-8); }
.problems__h em { color: var(--ink-2); }
.problems__list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.problems__list li + li { margin-top: var(--s-6); }
/* centred on the first line of its statement (the em of the <li> is not the statement size) */
.problems__star { --star-size: 14px; margin-top: calc(var(--t-statement) * 1.08 / 2 - var(--star-size) / 2); }
@media (min-width: 768px) { .problems__star { --star-size: 20px; } }
.problems__t { display: block; }
.problems__coda { margin-top: var(--s-7); font-size: var(--t-lead); color: var(--star-2); padding-left: calc(var(--s-4) + 12px); }
.problems__coda em { font-size: 1.35em; }

.motion .problems { height: 100svh; padding: 0; }
.motion .problems__in { height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--bar-h) + var(--s-6)); }
.motion .problems__h { margin-bottom: var(--s-4); flex: none; width: 100%; }
.motion .problems__stage {
  position: relative; flex: 1; width: 100%; overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, transparent 7%, #000 26%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, transparent 7%, #000 26%, #000 88%, transparent);
}
.motion .problems__move { position: absolute; left: 0; right: 0; top: 50%; transform-origin: 0 0; }
.motion .problems__list li + li { margin-top: var(--s-7); }
.motion .problems__coda { font-size: calc(var(--t-statement) * .62); }  /* read after the .6 compaction */

/* ---------- Strips ---------- */
.dawn { height: 60svh; background: linear-gradient(var(--void), var(--paper)); }
.dusk { height: 40svh; background: linear-gradient(var(--paper), var(--void)); }

/* ---------- S4 What we do ---------- */
.services { position: relative; padding-top: var(--section-y); }
.services__head { margin-bottom: var(--s-7); }
.services__head .kicker { margin-bottom: var(--s-4); }
.panel { padding-block: var(--s-8); }  /* no hairline between stacked panels: on phones it read as a stray grey line (Carlos 2026-10-31) */
.panel__in { display: grid; gap: var(--s-6); align-items: center; }
.panel__num { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .08em; color: var(--solved-ink); font-variant-numeric: tabular-nums; }
.panel__text h3 { margin-top: var(--s-3); }
.panel__value { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.panel__link { margin-top: var(--s-5); }
.panel__art { display: flex; justify-content: center; }
.const { width: 100%; max-width: 320px; aspect-ratio: 1; overflow: visible; }
@media (min-width: 600px) { .const { max-width: 420px; } }
.const__line { fill: none; stroke: var(--ink); stroke-width: .35; opacity: .16; }
.const__dots { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0 4.2; }
.const__mask { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cstar__core { fill: var(--solved); stroke: var(--solved); stroke-width: .8; }
.cstar__glow { fill: var(--solved); opacity: .25; }
.cstar__ring { fill: none; stroke: var(--solved); stroke-width: .5; opacity: 0; }
.cstar__core, .cstar__glow { transition: fill var(--d-ui) var(--ease), stroke var(--d-ui) var(--ease), opacity var(--d-ui) var(--ease); }
.track-ind { display: none; }
@media (min-width: 900px) {
  .panel__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .panel__text { grid-column: 1 / span 5; }
  .panel__art { grid-column: 7 / -1; }
}

/* motion, any width: stars start unlit (JS lights them); stacked constellations draw once on entry */
.motion .cstar:not(.is-on) .cstar__core { fill: transparent; stroke: var(--field); }
.motion .cstar:not(.is-on) .cstar__glow { opacity: 0; }

/* motion track (>=900 wide and >=640 tall, = Motion.conditions.track): one pinned 100svh stage, 4 panels of 100%
   in a 400% row. Shorter landscape screens keep the stacked panels: the absolute head would cover the panel text. */
@media (min-width: 900px) and (min-height: 640px) {
  .motion .services { height: 100svh; padding: 0; overflow: visible; }
  .motion .track-clip { height: 100%; overflow: clip; }
  .motion .services__head { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + var(--s-6)); margin: 0; }
  .motion .track { display: flex; width: 400%; height: 100%; }
  .motion .panel { width: 25%; height: 100%; border: 0; padding: 0; display: flex; align-items: center; }
  .motion .panel__in { padding-top: 7rem; }
  .motion .const { max-width: min(46vmin, 460px); }
  .motion .const__dots, .motion .const__line { opacity: 0; }
  .motion .services > .track-ind {
    display: flex; gap: var(--s-3); position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
    z-index: 5; align-items: center;
  }
  .track-ind__seg { display: flex; align-items: center; gap: var(--s-2); }
  .track-ind .star { --star-size: 10px; }
  .track-ind__bar { position: relative; width: 56px; height: 2px; background: var(--rule); overflow: hidden; border-radius: 1px; }
  .track-ind__bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
}

/* ---------- S5 How ---------- */
.steps { padding-block: var(--section-y); }
.steps__h { margin-bottom: var(--s-8); }
.steps__body { position: relative; padding-left: var(--s-6); }
.steps__rail { position: absolute; left: 0; top: .4em; bottom: .4em; width: 2px; background: var(--rule); border-radius: 1px; overflow: hidden; }
.steps__fill { position: absolute; inset: 0; background: var(--solved); transform-origin: 50% 0; }
.step { display: grid; gap: var(--s-3); }
.step + .step { margin-top: var(--s-8); }
.step__num { -webkit-text-stroke-width: 1.25px; user-select: none; }
.step__text { font-size: clamp(1.375rem, 1rem + 1.9vw, 2.75rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 450; max-width: 24ch; }
.step__text strong { display: block; font-weight: 700; margin-bottom: .2em; }
@media (min-width: 768px) {
  .steps__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-left: 0; }
  .steps__rail { position: relative; grid-column: 1; justify-self: center; top: 0; bottom: 0; height: auto; }
  .steps__list { grid-column: 2 / -1; }
  .step { grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .step__num { grid-column: 1 / span 4; }
  .step__text { grid-column: 5 / span 7; }
}

.motion .steps { height: 100svh; padding: 0; }
.motion .steps__in { height: 100%; display: flex; flex-direction: column; padding-block: calc(var(--bar-h) + var(--s-6)) var(--s-7); }
.motion .steps__h { flex: none; margin-bottom: var(--s-5); }
.motion .steps__body { flex: 1; min-height: 0; }
.motion .steps__list { display: grid; align-items: center; height: 100%; }
.motion .step { grid-area: 1 / 1; margin: 0; }
.motion .step + .step { opacity: 0; } /* opacity only: steps 2-3 stay in the accessibility tree (SPEC §5.7) */

/* ---------- S6 Who ---------- */
.who__h { max-width: 20ch; margin-bottom: var(--s-8); }
.who__cards { display: grid; gap: var(--s-4); }
.card {
  background: var(--surface); border-radius: var(--r-m); padding: var(--s-6); box-shadow: var(--shadow-1);
  border: 1px solid var(--elev-border); transition: transform var(--d-ui) var(--ease);
}
.card h3 { margin-top: 0; }
.card p { margin-top: var(--s-3); color: var(--ink-2); }
.card:hover { transform: translateY(-2px); }
@media (min-width: 768px) {
  .who__cards { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .who__cards > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .who__cards { grid-template-columns: repeat(3, 1fr); }
  .who__cards > :last-child { grid-column: auto; }
}

/* ---------- S7 Proof ---------- */
.proof__in { display: grid; gap: var(--s-7); align-items: center; }
.proof__lead { margin-top: var(--s-5); color: var(--ink-2); }
.pmap { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; margin-inline: auto; overflow: visible; }
.pmap__line { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap__lit { fill: none; stroke: var(--solved); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: .152; }
.pmap__dot { fill: var(--paper); stroke: var(--field); stroke-width: 1.5; transition: fill var(--d-ui) var(--ease), stroke var(--d-ui) var(--ease); }
.pmap__glow { fill: var(--solved); opacity: 0; transition: opacity var(--d-ui) var(--ease); }
.pmap__node text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; fill: var(--ink-2); }
.pmap__node.is-on .pmap__dot { fill: var(--solved); stroke: var(--solved); }
.pmap__node.is-here .pmap__dot { r: 5px; }
.pmap__node.is-here .pmap__glow { opacity: .25; }
.pmap__node.is-here text { fill: var(--solved-ink); font-weight: 600; }
.pmap__here { display: none; }
.pmap__node.is-here .pmap__here { display: inline; }
.pmap__node.is-here .pmap__lbl { display: none; }
@media (min-width: 768px) {
  .proof__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .proof__text { grid-column: 7 / -1; grid-row: 1; }
  .pmap { grid-column: 1 / span 6; grid-row: 1; max-width: 520px; }
}
@media (min-width: 1280px) { .pmap { grid-column: 1 / span 5; } }

/* ---------- S8 Close ---------- */
.close { min-height: 100svh; display: flex; align-items: center; }
.close__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close__h { font-size: clamp(2.25rem, 7vw, 6.5rem); line-height: .95; letter-spacing: -.04em; font-weight: 700; max-width: 18ch; }
.close__sub { margin-top: var(--s-5); max-width: 34ch; }
.close__ctas { margin-top: var(--s-7); justify-content: center; gap: var(--s-4) var(--s-6); }
.close .cluster a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 599px) {
  .close__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .close__btn { width: 100%; }
  .close .cluster a:not(.btn) { justify-content: center; }
}