/* ============================================================
   ECOS DE HUMANIDADE — A Sala que Acordas
   Design system + secções + responsivo + reduced-motion
   ============================================================ */

:root{
  /* temperatura global 0 (frio/isolamento) → 1 (quente/ligação) */
  --warmth: 0;

  /* paleta fria */
  --bg-0:#05070D; --bg-1:#0A1024; --bg-2:#0E121C;
  --cold-1:#10204A; --cold-2:#163B6E; --cold-3:#2E5E8C; --cold-4:#5A7E9E;
  /* paleta quente */
  --warm-1:#7A3D17; --warm-2:#C2762B; --warm-3:#E8A24C;
  --gold:#F5B841; --gold-soft:#F6D08A; --cream:#FFF4E0;
  --red:#C25B3A; --ice:#9FE1FF;
  /* neutros */
  --text:#C9CDD6; --muted:#7C8596; --muted-2:#8A93A3;
  --line:#1A1F2B; --glass:rgba(18,24,38,.42);

  /* títulos migram de frio→quente com --warmth (com fallback) */
  --title: #E8EDF6;
  --title-warm: var(--gold-soft);

  --maxw: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.78;
  font-size:clamp(1rem, 0.9rem + 0.4vw, 1.12rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fundo que aquece subtilmente com a temperatura */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in oklab, var(--bg-0), var(--warm-1) calc(var(--warmth)*16%)) 0%,
      var(--bg-0) 60%);
  pointer-events:none;
}

#field{ position:fixed; inset:0; z-index:-2; display:block; }

.vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(130% 130% at 50% 42%, transparent 52%, rgba(2,3,8,.62) 100%);
}

/* ---------- acessibilidade ---------- */
.skip-link{
  position:fixed; left:14px; top:-60px; z-index:100;
  background:var(--gold); color:#10100a; padding:.55rem .9rem; border-radius:8px;
  font-weight:500; text-decoration:none; transition:top .25s var(--ease);
}
.skip-link:focus{ top:14px; }
.sr-title, .sr-only{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }

/* ============================================================
   LAYOUT DE SECÇÕES
   ============================================================ */
main{ position:relative; z-index:1; }

.chapter{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,5rem);
}
.chapter-inner{ width:100%; max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; }
/* Secções "quentes": uma leve aura dourada, presente mesmo sem JS */
.chapter.warm::after, .chapter.climax::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 55% at 50% 0%, rgba(232,162,76,.06), transparent 65%);
}
.chapter.climax::after{ background:radial-gradient(90% 65% at 50% 45%, rgba(245,184,65,.07), transparent 60%); }
.chapter-inner.narrow{ max-width:660px; }
.chapter-inner.wide{ max-width:var(--maxw); }
.chapter-inner.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* plaquinha de catálogo / kicker */
.kicker{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.72rem; font-weight:500;
  color:var(--muted-2);
  margin:0 0 1.5rem;
}
.center .kicker{ letter-spacing:.32em; }

/* títulos */
.chapter-title{
  font-family:var(--font-display);
  font-weight:300;
  font-optical-sizing:auto;
  font-size:clamp(2.1rem, 1rem + 4.4vw, 4.2rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 1.6rem;
  color:var(--title);
  max-width:18ch;
}
.center .chapter-title{ max-width:22ch; }
.chapter-title em{ font-style:italic; font-weight:400; color:var(--gold-soft); }

/* corpo */
.lede{
  font-size:clamp(1.05rem, 0.98rem + 0.55vw, 1.34rem);
  line-height:1.66;
  color:#D7DBE3;
  font-weight:300;
  max-width:46ch;
  margin:0 0 1.5rem;
}
.center-lede{ max-width:54ch; margin-inline:auto; }
/* :where() mantém a especificidade baixa (0,0,0,1) para não derrotar
   .lede (46ch), .pull (24ch) ou .center-lede (54ch), que têm classe própria. */
:where(.chapter) p{ max-width:50ch; }
.center p{ margin-inline:auto; }

.pull{
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height:1.32;
  color:var(--gold-soft);
  margin:2rem 0;
  max-width:24ch;
}
.center .pull{ margin-inline:auto; }

.side-note{
  font-size:.86rem; color:var(--muted-2); margin-top:1.4rem; max-width:52ch;
}
.mono{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:var(--muted-2);
}

/* listas de pontos */
.points{ list-style:none; padding:0; margin:1.4rem 0 0; max-width:52ch; }
.points li{
  position:relative; padding-left:1.5rem; margin:.62rem 0;
  color:#C2C8D2; font-size:1rem;
}
.points li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--cold-3); /* fallback se não houver color-mix() */
  background:color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%));
  box-shadow:0 0 10px var(--cold-3);
  box-shadow:0 0 10px color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%));
}
.points.compact li{ margin:.4rem 0; font-size:.95rem; }
.center .points{ margin-inline:auto; text-align:left; }

/* conceito: três âncoras */
.three-anchor li{ padding-left:0; }
.three-anchor li::before{ display:none; }
.three-anchor strong{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:1.25rem; letter-spacing:.02em; color:var(--gold-soft); margin-bottom:.1rem;
}
.three-anchor span{ color:var(--muted-2); font-size:.96rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ text-align:center; }
.hero-title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(3rem, 1.5rem + 8vw, 7rem);
  line-height:0.96;
  letter-spacing:-0.03em;
  margin:0 0 1.8rem;
  color:#EAF0FA;
}
.hero-title em{
  font-style:italic; font-weight:400;
  color:color-mix(in oklab, #EAF0FA, var(--gold-soft) calc(40% + var(--warmth)*60%));
}
.hero-meta{
  list-style:none; padding:0; margin:2.4rem 0 0;
  display:flex; flex-direction:column; gap:.5rem;
  font-size:.84rem; color:var(--muted-2); letter-spacing:.02em;
}
.hero-meta .mono{ color:var(--gold-soft); }

.floor-mark{
  position:absolute; left:50%; bottom:13%; width:min(46vw,360px); height:60px;
  transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 100%,
     color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%)) 0%, transparent 70%);
  opacity:.4; filter:blur(2px);
  animation:floorPulse 4.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes floorPulse{ 0%,100%{opacity:.22;} 50%{opacity:.5;} }

.scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  text-decoration:none; color:#A6AEBC; text-shadow:0 1px 10px rgba(2,3,8,.9);
}
.scroll-cue-line{
  width:1px; height:42px;
  background:linear-gradient(var(--muted), transparent);
  animation:cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{transform:scaleY(.3);transform-origin:top;opacity:.3;} 50%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(.3);transform-origin:bottom;opacity:.3;} }
.scroll-cue-text{ text-transform:uppercase; letter-spacing:.28em; font-size:.62rem; }

/* ============================================================
   EPÍGRAFE
   ============================================================ */
.epigraph{ min-height:90vh; }
.epigraph-text{
  font-family:var(--font-display);
  font-style:italic; font-weight:300;
  font-size:clamp(1.5rem, 1rem + 2.6vw, 3rem);
  line-height:1.4; letter-spacing:-0.01em;
  color:var(--gold-soft);
  max-width:20ch; margin:1rem auto 0; border:0; padding:0;
}
.js .epigraph-text .word{ display:inline-block; opacity:0; filter:blur(8px); transform:translateY(8px); }
.in .epigraph-text .word{ animation:wordIn 1s var(--ease) forwards; }
@keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }

/* ============================================================
   DIMENSÕES — palavra-âncora gigante
   ============================================================ */
.dimension{ overflow:hidden; }
.anchor-word{
  position:absolute; right:clamp(-1rem,2vw,3rem); top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(4rem, 6rem + 12vw, 20rem);
  line-height:.8; letter-spacing:-0.04em;
  color:#16243f; /* fallback se não houver color-mix() */
  color:color-mix(in oklab, #0f1830, var(--warm-2) calc(var(--warmth)*55%));
  opacity:.5; z-index:0; pointer-events:none; user-select:none;
  white-space:nowrap;
}
.dimension .chapter-inner{ position:relative; z-index:1; }
.hint{ color:var(--gold-soft); font-size:.92rem; margin-top:1.4rem; opacity:.9; }

/* ============================================================
   ZONAS INTERATIVAS — voz e toque
   ============================================================ */
.zone{
  appearance:none; border:0; background:transparent; cursor:pointer;
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:2.6rem auto 1.4rem; color:var(--text);
  touch-action:none;
}
.zone-label{
  position:absolute; text-align:center; pointer-events:none;
  text-transform:uppercase; letter-spacing:.22em; font-size:.66rem; color:#A6AEBC;
  line-height:1.5; text-shadow:0 1px 12px rgba(2,3,8,.92);
}
.zone-label small{ letter-spacing:.12em; text-transform:none; font-size:.62rem; opacity:.8; }

/* voz */
.zone-voice{ width:min(58vw,260px); height:min(58vw,260px); border-radius:50%; }
.zone-voice .zone-core{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%));
  box-shadow:inset 0 0 50px color-mix(in oklab, var(--cold-2), var(--warm-2) calc(var(--warmth)*100%));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.zone-voice:hover .zone-core, .zone-voice:focus-visible .zone-core{ transform:scale(1.04); }
.zone-voice.active .zone-core{ box-shadow:inset 0 0 70px var(--warm-2), 0 0 40px rgba(232,162,76,.35); }

/* toque / pedestal */
.zone-touch{ width:min(58vw,240px); height:min(58vw,240px); }
.pedestal-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%));
  opacity:.5;
}
.pedestal-core{
  position:absolute; left:50%; top:50%; width:46%; height:46%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--gold-soft), var(--warm-2) 55%, transparent 72%);
  box-shadow:0 0 50px rgba(232,162,76,.4);
  animation:beat 1.15s ease-in-out infinite;
}
@keyframes beat{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.78; } 18%{ transform:translate(-50%,-50%) scale(1.06); opacity:1; } 36%{ transform:translate(-50%,-50%) scale(.96);} }
.zone-touch .zone-label{ bottom:-1.8rem; left:50%; transform:translateX(-50%); }

.mic-status{ font-size:.72rem; min-height:1.1em; margin:.4rem 0 0; color:#A6AEBC; text-shadow:0 1px 10px rgba(2,3,8,.9); }

/* ============================================================
   A SALA — split + planta SVG
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-top:1rem; }
.split-text .lede{ max-width:42ch; }
.split-visual{ margin:0; }
.planta{ width:100%; height:auto; }
.planta-room{ fill:rgba(12,20,40,.5); stroke:var(--line); stroke-width:1; }
.planta .wall{ stroke:color-mix(in oklab, var(--cold-3), var(--gold) calc(var(--warmth)*100%)); stroke-width:2.5; opacity:.55; }
.planta-link line{ stroke:color-mix(in oklab, var(--cold-2), var(--gold) calc(var(--warmth)*80%)); stroke-width:1; opacity:.4; stroke-dasharray:3 5; }
.planta .node circle{ fill:var(--cold-4); }
.planta .node.pedestal circle{ fill:var(--gold); filter:drop-shadow(0 0 8px rgba(245,184,65,.8)); }
.planta .node.participant circle{ fill:var(--gold-soft); }
.planta .node text{ fill:var(--muted-2); font-family:var(--font-body); font-size:9px; text-anchor:middle; text-transform:uppercase; letter-spacing:.12em; }
figcaption{ font-size:.78rem; color:var(--muted); margin-top:.8rem; text-align:center; }

/* ============================================================
   DIAGRAMAS TÉCNICOS — placas claras sobre o fundo escuro
   ============================================================ */
.diagrams{
  display:flex; flex-direction:column;
  gap:clamp(1.6rem,4vw,2.8rem);
  margin:clamp(2.4rem,5vw,3.4rem) 0 0;
}
.diagram-figure{
  margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  max-width:880px; width:100%;
}
.diagrams .diagram-figure{ margin-top:0; }   /* o espaçamento já vem do gap */
.diagram-plate{
  background:#FAFBFD;                          /* combina com o fundo claro dos diagramas */
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(.7rem,2vw,1.4rem);
  box-shadow:0 18px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(245,184,65,.08);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.diagram-figure:hover .diagram-plate{
  transform:translateY(-4px);
  border-color:color-mix(in oklab,var(--line),var(--gold) 45%);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(245,184,65,.16);
}
.diagram-plate img{ display:block; width:100%; height:auto; border-radius:8px; }
.diagram-figure figcaption{ max-width:62ch; margin-inline:auto; }

/* ============================================================
   JORNADA
   ============================================================ */
.journey{ list-style:none; padding:0; margin:2.5rem 0 0; position:relative; counter-reset:none; }
.journey::before{
  content:""; position:absolute; left:18px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(var(--cold-3), var(--gold) , var(--warm-3));
  opacity:.5;
}
.journey-stop{ position:relative; padding:0 0 2.4rem 3.6rem; }
.journey-num{
  position:absolute; left:0; top:-2px;
  font-family:var(--font-display); font-weight:400; font-size:1.4rem;
  color:var(--gold-soft);
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--bg-0); border:1px solid var(--line); border-radius:50%;
}
.journey-stop h3{ font-family:var(--font-display); font-weight:400; font-size:1.5rem; margin:0 0 .4rem; color:var(--title); }
.journey-stop p{ margin:0; color:#BCC2CD; max-width:50ch; }

/* ============================================================
   ESTADO DA ARTE — galeria
   ============================================================ */
.gallery{ list-style:none; padding:0; margin:2.6rem 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.ref-card{
  background:var(--glass);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.ref-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; filter:saturate(.92) brightness(.92); }
.ref-meta{ padding:.9rem 1rem 1.1rem; }
.ref-meta h3{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; margin:0; color:var(--title); }
.ref-author{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin:.15rem 0 .55rem; }
.ref-meta p{ font-size:.84rem; line-height:1.5; color:#B4BAC6; margin:0; max-width:none; }
.ref-card:hover, .ref-card:focus-within{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--line), var(--gold) 50%);
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(245,184,65,.12);
}
.distinction{
  margin:2.4rem auto 0; text-align:center; max-width:40ch;
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1rem+.8vw,1.5rem); color:var(--gold-soft);
}
.distinction strong{ font-style:normal; font-weight:500; color:var(--cream); }

/* ============================================================
   PILARES + PÚBLICO
   ============================================================ */
.pillars{ list-style:none; padding:0; margin:2.4rem 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.pillar{
  background:var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.3rem; transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.pillar:hover{ transform:translateY(-3px); border-color:color-mix(in oklab,var(--line),var(--gold) 45%); }
.pillar-word{ font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--gold-soft); display:block; margin-bottom:.5rem; }
.pillar p{ font-size:.9rem; line-height:1.55; color:#B4BAC6; margin:0; }
.audience{ margin:2.4rem auto 0; max-width:62ch; text-align:center; color:#C6CCD6; }
.audience strong{ color:var(--cream); }

/* ============================================================
   TECNOLOGIA — pipeline, máquina de estados, stacks
   ============================================================ */
.pipeline{ list-style:none; padding:0; margin:2.4rem 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:none; }
.pipe-step{ position:relative; background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.2rem; }
.pipe-step::after{ content:"→"; position:absolute; right:-0.85rem; top:50%; transform:translateY(-50%); color:var(--warm-3); opacity:.6; z-index:2; }
.pipe-step:last-child::after{ display:none; }
.pipe-n{ font-family:var(--font-display); font-size:1.6rem; color:var(--warm-3); display:block; line-height:1; }
.pipe-step h3{ font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:.01em; margin:.6rem 0 .5rem; color:var(--title); }
.pipe-step p{ font-size:.85rem; line-height:1.5; color:#AFB6C2; margin:0; }

.statemachine{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .7rem; margin:2.6rem 0; }
.sm-node{
  font-family:var(--font-body); font-weight:500; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.18em;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid var(--line); color:var(--muted-2);
  background:rgba(10,16,36,.5);
  transition:all .4s var(--ease);
}
.sm-node.lit{ color:#10100a; background:var(--gold); border-color:var(--gold); box-shadow:0 0 22px rgba(245,184,65,.45); }
.sm-arrow{ color:var(--muted); opacity:.6; }

.techstack{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1rem; }
.stack-col h4{ font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--muted); margin:0 0 1rem; }
.pills{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pills li{
  font-size:.82rem; padding:.4rem .8rem; border-radius:8px;
  background:#12182680; border:1px solid var(--line); color:#C2C8D2;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   PLANO & ORÇAMENTO
   ============================================================ */
.phases{ list-style:none; padding:0; margin:2.4rem 0 3rem;
  display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.phases li{ position:relative; text-align:center; padding-top:1.6rem; }
.phases li::before{ content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:var(--line); }
.phases li::after{ content:""; position:absolute; left:50%; top:1px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--bg-0); border:1px solid color-mix(in oklab,var(--cold-3),var(--gold) calc(var(--warmth)*100%)); }
.phases li:first-child::before{ left:50%; }
.phases li:last-child::before{ right:50%; }
.ph-n{ display:block; font-family:var(--font-display); font-size:1.2rem; color:var(--gold-soft); }
.ph-t{ font-size:.74rem; line-height:1.35; color:var(--muted-2); display:block; margin-top:.2rem; }

.budget{ background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:clamp(1.4rem,3vw,2.2rem); }
.budget h3{ font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--muted); margin:0 0 1.5rem; }
.budget-bars{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.85rem; }
.budget-bars li{ display:grid; grid-template-columns:minmax(110px,1.1fr) 3fr minmax(92px,auto); gap:1rem; align-items:center; }
.b-name{ font-size:.86rem; color:#C2C8D2; }
.b-track{ position:relative; height:8px; background:#0c121f; border-radius:6px; overflow:hidden; }
.b-fill{ position:absolute; top:0; bottom:0; border-radius:6px;
  background:linear-gradient(90deg, var(--cold-3), var(--warm-3)); opacity:.92;
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
.in .b-fill{ transform:scaleX(1); }
.b-val{ font-size:.8rem; color:var(--muted-2); font-variant-numeric:tabular-nums; text-align:right; }
.budget-total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid var(--line); max-width:none; }
.budget-total span{ text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--muted); }
.budget-total strong{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,1rem+1.4vw,2rem); color:var(--gold-soft); }

/* ============================================================
   DESAFIOS
   ============================================================ */
.challenges{ list-style:none; padding:0; margin:2.4rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.challenges li{
  display:grid; grid-template-columns:1fr auto 1.2fr; align-items:center; gap:1rem;
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.3rem;
}
.ch-problem{ color:#C8CDD7; font-size:.95rem; }
.ch-arrow{ color:var(--warm-3); }
.ch-solution{ color:var(--gold-soft); font-size:.95rem; }

/* ============================================================
   FLUXO E LÓGICA — pseudocódigo
   ============================================================ */
.pseudocode{ margin:2.4rem 0 0; background:rgba(8,12,24,.55); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.pseudocode figcaption{ text-align:left; margin:0; padding:.7rem 1.2rem; border-bottom:1px solid var(--line); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); background:rgba(255,255,255,.02); }
.pseudocode pre{ margin:0; padding:1.3rem 1.4rem; overflow-x:auto; }
.pseudocode code{ font-family:ui-monospace,"Cascadia Code","Consolas",monospace; font-size:.82rem; line-height:1.85; color:#AEB6C4; white-space:pre; }
.c-key{ color:var(--ice); }
.c-state{ color:var(--gold); font-weight:600; letter-spacing:.04em; }
.c-arrow{ color:var(--muted); }

/* ============================================================
   COMPONENTES — visual / som / evolução cromática
   ============================================================ */
.comp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; margin-top:1rem; }
.comp-block h3{ font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:var(--title); margin:0 0 .6rem; }
.comp-block p{ color:#BCC2CD; margin:0; max-width:44ch; }
.chroma{ margin:2.8rem 0 0; }
.chroma figcaption{ text-align:left; margin:0 0 .9rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.chroma-bar{ height:18px; border-radius:999px;
  background:linear-gradient(90deg,#10204A 0%,#3A3D47 17%,#05070D 33%,#7A3D17 54%,#E8A24C 73%,#FFF4E0 88%,#C25B3A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.chroma-labels{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.7rem; font-size:.8rem; color:var(--muted-2); }
.chroma-arrow{ color:var(--warm-3); }

/* ============================================================
   REFERÊNCIAS — bibliografia
   ============================================================ */
.biblio{ list-style:none; padding:0; margin:2rem 0 0; }
.biblio li{ padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.94rem; line-height:1.55; color:#BCC2CD; max-width:none; }
.biblio li:last-child{ border-bottom:0; }
.biblio-a{ color:var(--text); font-weight:500; }
.biblio em{ color:var(--gold-soft); font-style:italic; }

/* ============================================================
   ELEMENTOS DE APRESENTAÇÃO (citação, tabela, fases, fecho)
   ============================================================ */
.quote{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,1rem+1.4vw,2rem); line-height:1.4; color:var(--gold-soft);
  border:0; border-left:2px solid rgba(245,184,65,.4);
  margin:0 0 2rem; padding:.2rem 0 .2rem 1.4rem; max-width:30ch;
}

.spec-table{ width:100%; border-collapse:collapse; margin-top:1.6rem; font-size:.95rem; }
.spec-table th, .spec-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table thead th{ font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--muted); }
.spec-table tbody td:first-child{ color:var(--text); font-weight:500; white-space:nowrap; width:34%; }
.spec-table tbody td:last-child{ color:#BCC2CD; }
.spec-table tbody tr:last-child td{ border-bottom:0; }

.stack-col h3{ font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--muted); margin:0 0 1rem; }

.plan-list{ list-style:none; padding:0; margin:2rem 0 0; }
.plan-list li{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; padding:1rem 0; border-bottom:1px solid var(--line); }
.plan-list li:last-child{ border-bottom:0; }
.pl-n{ font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:var(--gold-soft); min-width:2.2rem; }
.plan-list h3{ font-family:var(--font-body); font-weight:500; font-size:1rem; margin:0 0 .25rem; color:var(--title); }
.plan-list p{ margin:0; color:#B4BAC6; font-size:.92rem; max-width:60ch; }

.end-mark{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.78rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }

/* ============================================================
   EPÍLOGO & CRÉDITOS
   ============================================================ */
.epilogue{ text-align:center; }
.cool-cue{ font-size:.74rem; color:#A6AEBC; margin:.4rem auto 2.2rem; min-height:1.2em; transition:color .6s var(--ease); text-shadow:0 1px 10px rgba(2,3,8,.9); }
.cool-cue.cooling{ color:var(--ice); }
.epilogue-epigraph{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,1rem+1.3vw,1.9rem); line-height:1.45;
  color:var(--gold-soft); border:0; padding:0; margin:0 auto 3rem; max-width:30ch;
}
.future{ margin:0 auto 3rem; max-width:54ch; }
.future-label{ text-transform:uppercase; letter-spacing:.26em; font-size:.7rem; color:var(--muted); margin:0 0 .6rem; }
.future p:last-child{ color:#C6CCD6; }
.credits{ border-top:1px solid var(--line); padding-top:2.4rem; max-width:560px; margin:0 auto; }
.authors{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.2rem,1rem+1vw,1.7rem); color:var(--cream); margin:0 0 .8rem; }
.credit-line{ font-size:.82rem; color:var(--muted-2); margin:.2rem 0; }
.isla{ width:74px; height:74px; object-fit:contain; opacity:.7; margin:1.6rem auto .4rem; display:block; filter:grayscale(.2) brightness(1.15); mix-blend-mode:screen; }
.restart{ display:inline-block; margin-top:1.6rem; color:var(--gold-soft); text-decoration:none; font-size:.85rem; letter-spacing:.04em; border-bottom:1px solid transparent; transition:border-color .3s; }
.restart:hover{ border-color:var(--gold-soft); }

/* ============================================================
   NAV — pontos-presença + filamento + chip de estado
   ============================================================ */
.dots{
  position:fixed; right:clamp(.7rem,1.6vw,1.6rem); top:50%; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:.62rem; align-items:flex-end;
}
/* Alvo de toque ≥24px com um ponto visual pequeno desenhado via ::before */
.dots a{
  position:relative; width:24px; height:20px;
  display:grid; place-items:center; text-decoration:none;
}
.dots a::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--muted); opacity:.4;
  transition:all .35s var(--ease);
}
.dots a::after{
  content:attr(data-label);
  position:absolute; right:26px; top:50%; transform:translateY(-50%) translateX(6px);
  font-size:.66rem; letter-spacing:.08em; color:var(--gold-soft); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
  text-transform:uppercase; text-shadow:0 1px 8px rgba(2,3,8,.9);
}
.dots a:hover::before, .dots a:focus-visible::before{ opacity:1; background:var(--gold-soft); }
.dots a:hover::after, .dots a:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.dots a.active::before{ opacity:1; background:var(--gold); box-shadow:0 0 12px rgba(245,184,65,.6); width:9px; height:9px; }

.filament{
  position:fixed; left:0; top:0; bottom:0; width:2px; z-index:40;
  background:rgba(255,255,255,.04);
}
.filament-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(var(--cold-3), var(--warm-3), var(--gold));
  box-shadow:0 0 10px rgba(245,184,65,.4);
}

.state-chip{
  position:fixed; left:clamp(.9rem,2vw,1.6rem); top:clamp(.9rem,2vw,1.4rem); z-index:40;
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem; border-radius:999px;
  background:rgba(8,12,24,.72); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.chip-dot{ width:7px; height:7px; border-radius:50%; background:var(--cold-3); box-shadow:0 0 8px var(--cold-3); animation:chipPulse 2s ease-in-out infinite; }
.chip-label{ font-size:.66rem; font-weight:500; text-transform:uppercase; letter-spacing:.22em; color:var(--muted-2); transition:color .4s; }
.state-chip.hot .chip-dot{ background:var(--gold); box-shadow:0 0 12px var(--gold); }
.state-chip.hot .chip-label{ color:var(--gold-soft); }
@keyframes chipPulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* ============================================================
   REVELAÇÃO POR SCROLL
   ============================================================ */
/* As animações de revelação só escondem o conteúdo quando o JS está ativo
   (classe .js no <html>). Sem JS, todo o conteúdo permanece visível.
   Sem blur — texto sempre nítido, só fade + deslize suave. */
.js .reveal{ opacity:0; transform:translateY(16px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.in .reveal{ opacity:1; transform:none; }
.in .reveal:nth-child(1){ transition-delay:.04s; }
.in .reveal:nth-child(2){ transition-delay:.13s; }
.in .reveal:nth-child(3){ transition-delay:.22s; }
.in .reveal:nth-child(4){ transition-delay:.31s; }
.in .reveal:nth-child(5){ transition-delay:.40s; }
.in .reveal:nth-child(6){ transition-delay:.49s; }
.in .reveal:nth-child(7){ transition-delay:.58s; }

/* títulos: sem blur — apenas o fade/deslize de .reveal */

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1000px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .pillars, .pipeline{ grid-template-columns:repeat(2,1fr); }
  .pipe-step::after{ display:none; }
  .split{ grid-template-columns:1fr; }
  .comp-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .split-visual{ max-width:460px; margin:1rem auto 0; }
  .phases{ grid-template-columns:repeat(4,1fr); gap:1.2rem .5rem; }
  .phases li::before{ display:none; }
  .techstack{ grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:620px){
  body{ line-height:1.7; }
  .chapter{ padding:clamp(4rem,10vh,6rem) 1.3rem; min-height:auto; }
  .hero, .epigraph, .verb, .epilogue{ min-height:100vh; }
  .gallery{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .ref-meta{ padding:.7rem .75rem .9rem; }
  .ref-meta p{ font-size:.78rem; }
  .pillars{ grid-template-columns:1fr; }
  .phases{ grid-template-columns:repeat(2,1fr); }
  .chroma-labels{ flex-direction:column; gap:.35rem; text-align:center; }
  .chroma-arrow{ transform:rotate(90deg); }
  .spec-table th, .spec-table td{ padding:.65rem .5rem; }
  .spec-table tbody td:first-child{ white-space:normal; width:42%; }
  .plan-list li{ gap:.8rem; }
  .challenges li{ grid-template-columns:1fr; gap:.3rem; text-align:left; }
  .ch-arrow{ display:none; }
  .ch-solution{ padding-left:0; }
  .budget-bars li{ grid-template-columns:1fr; gap:.3rem; }
  .b-track{ order:3; }
  .b-val{ text-align:left; }
  .anchor-word{ font-size:clamp(3.4rem,18vw,6rem); opacity:.35; top:auto; bottom:6%; right:-0.5rem; transform:none; }
  /* Em mobile, os pontos passam a barra horizontal fixa no fundo (índice + salto) */
  .dots{
    flex-direction:row; right:auto; left:50%; top:auto; bottom:10px;
    transform:translateX(-50%); gap:0;
    padding:5px 8px; border-radius:999px;
    background:rgba(8,12,24,.66); border:1px solid var(--line);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    max-width:94vw;
  }
  .dots a{ width:20px; height:26px; }
  .dots a::after{ display:none; }
  .dots a::before{ width:5px; height:5px; }
  .dots a.active::before{ width:7px; height:7px; }
  .statemachine{ gap:.35rem .4rem; }
  .sm-node{ font-size:.6rem; padding:.35rem .6rem; letter-spacing:.12em; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; }
  .reveal{ transition:opacity .25s ease; transform:none; filter:none!important; }
  .chapter-title.reveal{ filter:none!important; }
  .epigraph-text .word{ opacity:1; filter:none; transform:none; }
  .pedestal-core, .floor-mark, .scroll-cue-line, .chip-dot{ animation:none!important; }
  .b-fill{ transition:none; }
}