/* ══════════════════════════════════════════════════════════════════════════════
   Ordane — site institucional (ordane.com.br)
   Identidade: /srv/ordane-saas/identidade/manual-identidade-doc.md
   - Fundo F4 Ambiência (entrada/capa) e F1 Preto (seções de foco); um fundo por bloco.
   - Âmbar #F5A524 é marca e ação; Verde #3DDC97 é evolução; nunca encostados.
   - Títulos em Source Serif 4; texto e números em Archivo; números tabulares.
   - Grafismo "A Contraforma": padrão G1 (tile 140, −15°, 4,5–6%), marca d'água G2
     (sangrada, ≥30% fora), divisor modulado G3 (3 px à esquerda, 2 à direita), G4.
   - Símbolo: nunca contorno, sombra, vidro ou gradiente radial; lado achatado à esquerda.
   Efeitos: primeiro o CSS (scroll-driven, com @supports); js/ordane.js completa onde
   o navegador não tem. Tudo respeita prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;src:url(fontes/Archivo-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:"Archivo";font-weight:100 900;font-display:swap;src:url(fontes/Archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-weight:400 700;font-display:swap;src:url(fontes/SourceSerif4-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:"Source Serif 4";font-weight:400 700;font-display:swap;src:url(fontes/SourceSerif4-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ambar:#F5A524; --ambar-fundo:#D97A1A; --ambar-claro:#FFD98A;
  --verde:#3DDC97; --osso:#F5F3EF; --nevoa:#B8B4AE; --tinta:#111113;
  --preto:#000; --grafite:#1C1C1E; --grafite-alto:#2C2C2E; --filete:#3A3A3C;
  --envolvente:linear-gradient(45deg,#D97A1A 0%,#F5A524 45%,#FFD98A 100%);
  --ambiencia:linear-gradient(180deg,#2C2C2E 0%,#1C1C1E 55%,#000 100%);
  --f-titulo:"Source Serif 4",Georgia,serif;
  --f-texto:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --margem:clamp(20px,5vw,72px);
  --largura:1240px;
  --curva:cubic-bezier(.22,1,.36,1);
  --curva-mola:cubic-bezier(.34,1.56,.64,1);
  /* a contraforma (grafismo G1), como textura: só o miolo do símbolo, sem o anel */
  --contraforma:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath fill='%23F5A524' d='M68 38 C70.7 28.8 75 20 91 20 A32 32 0 0 1 91 84 C75 84 70.7 75.2 68 66 A50 50 0 0 1 68 38 Z' transform='translate(-21 18)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--preto);overflow-x:clip}
body{margin:0;background:var(--preto);color:var(--osso);font-family:var(--f-texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:6px}
::selection{background:var(--ambar);color:var(--tinta)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ambar);color:var(--tinta);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.pular:focus{top:16px}

/* transição entre páginas (navegadores que suportam): o O fica, o resto dissolve */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--curva)}
.marca-o{view-transition-name:marca-o}

/* ── tipografia ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-titulo);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;color:var(--osso)}
h1{font-size:clamp(44px,7.6vw,112px)}
h2{font-size:clamp(34px,4.8vw,68px)}
h3{font-size:clamp(22px,2.1vw,28px);line-height:1.2}
p{margin:0}
.eti{font:700 12px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--ambar)}
.apoio{color:var(--nevoa);font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:62ch}
.destaque-ambar{color:var(--ambar)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ── estrutura ──────────────────────────────────────────────────────────────── */
.caixa{width:100%;max-width:var(--largura);margin:0 auto;padding-inline:var(--margem)}
.secao{position:relative;padding-block:clamp(96px,14vw,200px);isolation:isolate;overflow:clip}
.secao--ambiencia{background:var(--ambiencia)}
.secao--grafite{background:var(--grafite)}
.cabeca{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(48px,6vw,88px);max-width:900px}
/* G3 · divisor modulado: 3 px à esquerda afinando para 2 à direita */
.divisor{height:3px;width:min(220px,40%);background:var(--filete);clip-path:polygon(0 0,100% 33%,100% 100%,0 100%)}
.divisor--ambar{background:var(--ambar)}

/* G1 · padrão da contraforma (textura), com parallax próprio */
.padrao{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;opacity:.03;
  background-image:var(--contraforma);background-size:140px 140px;transform:rotate(-15deg)}
/* G2 · marca d'água sangrada: grande, ≥30% fora, uma borda só */
.dagua{position:absolute;z-index:-1;pointer-events:none;width:min(70vh,760px);aspect-ratio:57/64;opacity:.045;
  background:var(--contraforma) center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 18 57 64'%3E%3Cpath fill='%23F5A524' d='M27 36 C29.69 26.78 34 18 50 18 A32 32 0 0 1 50 82 C34 82 29.69 73.22 27 64 A50 50 0 0 1 27 36 Z'/%3E%3C/svg%3E")}
.dagua--direita{right:calc(min(70vh,760px) * -.42);top:8%}
.dagua--esquerda{left:calc(min(70vh,760px) * -.42);bottom:4%}

/* ── topo ───────────────────────────────────────────────────────────────────── */
.topo{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s var(--curva),backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.topo.rolou{background:rgba(0,0,0,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:rgba(58,58,60,.6)}
.topo__linha{display:flex;align-items:center;gap:28px;height:76px}
.marca{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--osso)}
.marca svg{width:30px;height:30px}
.marca span{font:700 19px/1 var(--f-texto);letter-spacing:.06em}
.menu{display:flex;gap:6px;margin-left:auto}
.menu a{position:relative;text-decoration:none;color:var(--nevoa);font-size:15px;font-weight:500;padding:10px 14px;border-radius:999px;transition:color .25s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--osso)}
/* G4 · marcador de item ativo: a haste, âmbar, à esquerda */
.menu a[aria-current="page"]::before{content:"";position:absolute;left:3px;top:50%;width:5px;height:18px;margin-top:-9px;border-radius:5px 2px 2px 5px;background:var(--ambar)}
.topo .botao{margin-left:6px}
.abrir-menu{display:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid var(--filete);background:transparent;color:var(--osso);cursor:pointer}
.abrir-menu svg{width:22px;height:22px;margin:auto}
.barra-progresso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--envolvente);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .barra-progresso{animation:progresso linear both;animation-timeline:scroll(root)}
}
@keyframes progresso{to{transform:scaleX(1)}}

/* ── botões ─────────────────────────────────────────────────────────────────── */
.botao{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;
  font:600 16px/1 var(--f-texto);text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--curva),border-color .3s,color .3s}
.botao--primario{background:var(--ambar);color:var(--tinta)}
.botao--primario::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--envolvente);opacity:0;transition:opacity .35s}
.botao--primario:hover::after{opacity:1}
.botao--linha{background:transparent;color:var(--osso);border-color:rgba(184,180,174,.45)}
.botao--linha:hover{border-color:var(--osso)}
.botao svg{width:20px;height:20px;transition:transform .35s var(--curva)}
.botao:hover svg{transform:translateX(4px)}
.botao--p{min-height:42px;padding:0 18px;font-size:14px}

/* ── herói ──────────────────────────────────────────────────────────────────── */
.heroi{position:relative;min-height:100svh;display:grid;align-items:center;overflow:clip;background:var(--ambiencia);isolation:isolate}
.heroi .padrao,.pagina-topo .padrao{opacity:.022}
.heroi .caixa{position:relative;z-index:2;padding-top:120px;padding-bottom:80px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.heroi__texto{display:flex;flex-direction:column;gap:28px}
.heroi h1{font-size:clamp(42px,6.2vw,96px)}
.heroi h1 .linha{display:block;overflow:hidden;padding-bottom:.08em}
.heroi h1 .linha > span{display:inline-block;transform:translateY(105%);animation:sobe-linha 1.1s var(--curva) forwards}
.heroi h1 .linha:nth-child(2) > span{animation-delay:.12s}
.heroi h1 .linha:nth-child(3) > span{animation-delay:.24s}
@keyframes sobe-linha{to{transform:none}}
.heroi .apoio,.heroi .acoes{opacity:0;animation:aparece .9s var(--curva) .55s forwards}
.heroi .acoes{animation-delay:.7s}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* o O do herói: anéis do "limbo" pulsando + símbolo com a varredura do manual */
.olho{position:relative;justify-self:center;width:min(42vw,560px);aspect-ratio:1;display:grid;place-items:center}
.olho__aneis{position:absolute;inset:0}
.olho__aneis i{position:absolute;inset:0;border:1px solid rgba(245,165,36,.22);border-radius:50%;animation:onda 6s var(--curva) infinite}
.olho__aneis i:nth-child(2){animation-delay:2s}
.olho__aneis i:nth-child(3){animation-delay:4s}
@keyframes onda{0%{transform:scale(.42);opacity:0}25%{opacity:.9}100%{transform:scale(1.18);opacity:0}}
.olho__orbita{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(184,180,174,.18);animation:gira 60s linear infinite}
.olho__orbita::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ambar);box-shadow:0 0 18px 2px rgba(245,165,36,.7)}
.olho__orbita--2{inset:20%;animation-duration:38s;animation-direction:reverse;border-style:solid;border-color:rgba(58,58,60,.7)}
.olho__orbita--2::after{background:var(--verde);box-shadow:0 0 16px 2px rgba(61,220,151,.6);top:auto;bottom:-4px}
@keyframes gira{to{transform:rotate(360deg)}}
.olho__simbolo{position:relative;width:46%} /* sem sombra: o manual proíbe contorno, sombra, vidro e gradiente radial no símbolo */
.simbolo-varre circle.varre{stroke-dashoffset:144.513;animation:varre 1.8s cubic-bezier(.65,0,.35,1) .35s forwards}
@keyframes varre{to{stroke-dashoffset:0}}
.heroi__luz{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,70%) var(--my,40%),rgba(245,165,36,.10),transparent 60%)}
.heroi__grade{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(58,58,60,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(58,58,60,.35) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 60% at 60% 45%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 45%,#000 0%,transparent 75%)}
.rolar{position:absolute;left:50%;bottom:28px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--nevoa);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.rolar i{width:1px;height:46px;background:linear-gradient(var(--ambar),transparent);animation:desce 2.2s var(--curva) infinite;transform-origin:top}
@keyframes desce{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── faixa corrida (nomes das ferramentas) ─────────────────────────────────── */
.faixa{border-block:1px solid var(--filete);background:var(--preto);overflow:hidden;padding:22px 0}
.faixa__trilho{display:flex;width:max-content;gap:56px;animation:corre 48s linear infinite}
.faixa:hover .faixa__trilho{animation-play-state:paused}
.faixa span{display:inline-flex;align-items:center;gap:56px;font:400 clamp(22px,2.4vw,34px)/1 var(--f-titulo);color:var(--nevoa);white-space:nowrap}
.faixa span::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--ambar)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ── manifesto pinado: "gerir é enxergar" ──────────────────────────────────── */
.manifesto{position:relative;background:var(--preto);overflow-x:clip}
.manifesto__palco{position:sticky;top:0;min-height:100svh;display:grid;align-items:center;overflow:hidden}
.manifesto__grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center}
.manifesto__o{position:relative;width:min(36vw,440px);aspect-ratio:1;justify-self:center}
.manifesto__o svg{position:absolute;inset:0;width:100%;height:100%}
.manifesto__falas{position:relative;min-height:340px}
.fala{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:20px;opacity:0;transform:translateY(40px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.fala.ativa{opacity:1;transform:none}
.fala h2 em{font-style:italic;color:var(--ambar)}
.manifesto__passos{height:300vh}
.manifesto__pontos{display:flex;gap:10px;margin-top:28px}
.manifesto__pontos i{width:8px;height:8px;border-radius:4px;background:var(--filete);transition:width .4s var(--curva),background .4s}
.manifesto__pontos i.ativo{width:28px;background:var(--ambar)}
/* camadas do O que acendem com a fala: anel (processo), contraforma (pessoa), luz (tecnologia) */
.camada{transition:opacity .8s var(--curva),transform .8s var(--curva);transform-origin:50% 50%}
.manifesto[data-fala="0"] .camada--contra,.manifesto[data-fala="0"] .camada--luz{opacity:.12}
.manifesto[data-fala="1"] .camada--anel{opacity:.25}.manifesto[data-fala="1"] .camada--luz{opacity:.12}
.manifesto[data-fala="2"] .camada--anel,.manifesto[data-fala="2"] .camada--contra{opacity:1}

/* ── ferramentas: trilho horizontal pinado ─────────────────────────────────── */
.trilho-sec{position:relative;background:var(--grafite)}
.trilho-sec__palco{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:40px}
.trilho-sec__faixa{display:flex;gap:24px;padding-inline:var(--margem);width:max-content;will-change:transform}
@supports (animation-timeline: view()){
  .trilho-sec{view-timeline-name:--trilho}
  .trilho-sec__faixa{animation:desliza linear both;animation-timeline:--trilho;animation-range:contain 0% contain 100%}
}
@keyframes desliza{to{transform:translateX(calc(-100% + 100vw))}}
.cartao{position:relative;width:min(380px,78vw);min-height:440px;padding:30px;border-radius:24px;background:var(--grafite-alto);border:1px solid rgba(58,58,60,.9);
  display:flex;flex-direction:column;gap:18px;overflow:hidden;isolation:isolate;transition:transform .5s var(--curva),border-color .4s}
.cartao::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%),rgba(245,165,36,.16),transparent 55%)}
.cartao:hover{border-color:rgba(245,165,36,.5);transform:translateY(-6px)}
.cartao:hover::before{opacity:1}
.cartao__ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(245,165,36,.12);color:var(--ambar)}
.cartao__ico svg{width:28px;height:28px}
.cartao__num{position:absolute;top:26px;right:28px;font:500 13px var(--f-num);color:var(--nevoa)}
.cartao h3{margin-top:auto}
.cartao p{color:var(--nevoa);font-size:15.5px}
.cartao ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--osso)}
.cartao li{display:flex;gap:10px;align-items:flex-start}
.cartao li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--ambar)}
.cartao--novo .cartao__selo{position:absolute;top:24px;right:24px}
.selo{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;font:700 11px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(61,220,151,.45);color:var(--verde);background:rgba(61,220,151,.08)}
.selo--ambar{border-color:rgba(245,165,36,.45);color:var(--ambar);background:rgba(245,165,36,.08)}
.trilho-sec__dica{display:flex;align-items:center;gap:14px;color:var(--nevoa);font-size:14px}
.trilho-sec__dica i{flex:1;max-width:240px;height:2px;background:var(--filete);position:relative;overflow:hidden}
.trilho-sec__dica i::after{content:"";position:absolute;inset:0;background:var(--ambar);transform-origin:0 50%;transform:scaleX(var(--andou,0))}
@supports (animation-timeline: view()){
  .trilho-sec__dica i::after{animation:progresso linear both;animation-timeline:--trilho;animation-range:contain 0% contain 100%}
}

/* ── grades de conteúdo ─────────────────────────────────────────────────────── */
.grade{display:grid;gap:24px}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bloco{position:relative;padding:32px;border-radius:24px;background:var(--grafite-alto);border:1px solid rgba(58,58,60,.9);display:flex;flex-direction:column;gap:14px;overflow:hidden;isolation:isolate}
.bloco p{color:var(--nevoa)}
.bloco__n{font:600 14px var(--f-num);color:var(--ambar)}
.bloco--inclina{transform-style:preserve-3d;transition:transform .5s var(--curva)}

/* instâncias: "cada empresa, o seu próprio Ordane" */
.instancias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.instancia{position:relative;aspect-ratio:1;border-radius:28px;border:1px solid var(--filete);display:grid;place-items:center;overflow:hidden;background:var(--grafite)}
.instancia svg{width:42%}
.instancia::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--ambar);opacity:0;animation:acende 4.8s var(--curva) infinite}
.instancia:nth-child(2)::after{animation-delay:1.2s}.instancia:nth-child(3)::after{animation-delay:2.4s}.instancia:nth-child(4)::after{animation-delay:3.6s}
@keyframes acende{0%,100%{opacity:0}12%{opacity:1}40%{opacity:0}}
.instancia small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:500 12px var(--f-num);color:var(--nevoa)}

/* linha do tempo */
.tempo{position:relative;display:grid;gap:0;padding-left:34px}
.tempo::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--filete)}
.tempo__marco{position:relative;padding:0 0 46px}
.tempo__marco::before{content:"";position:absolute;left:-32px;top:6px;width:16px;height:16px;border-radius:50%;border:3px solid var(--ambar);background:var(--preto)}
.tempo__marco time{font:600 14px var(--f-num);color:var(--ambar)}
.tempo__marco h3{margin:6px 0 8px}
.tempo__marco p{color:var(--nevoa);max-width:58ch}

/* frase grande */
.frase{font-family:var(--f-titulo);font-weight:400;font-size:clamp(30px,4.4vw,64px);line-height:1.15;letter-spacing:-.01em;max-width:20ch}
.frase .pal{opacity:.18;transition:opacity .4s}
@supports (animation-timeline: view()){
  .frase .pal{animation:acende-pal linear both;animation-timeline:view();animation-range:cover 20% cover 45%}
}
.frase .pal.acesa{opacity:1}
@keyframes acende-pal{to{opacity:1}}

/* chamada final */
.chamada{position:relative;overflow:hidden;background:var(--ambiencia);text-align:center}
.chamada .caixa{display:flex;flex-direction:column;align-items:center;gap:28px}
.chamada h2{max-width:16ch}

/* ── revelar ao rolar (CSS primeiro; JS cuida de quem não suporta) ─────────── */
.revela{opacity:0;transform:translateY(48px)}
.revela.vista{opacity:1;transform:none;transition:opacity 1s var(--curva),transform 1s var(--curva)}
@supports (animation-timeline: view()){
  .revela{opacity:1;transform:none;animation:entra linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@keyframes entra{from{opacity:0;transform:translateY(56px) scale(.98)}to{opacity:1;transform:none}}
/* parallax por velocidade: --vel (−1 a 1) */
@supports (animation-timeline: scroll()){
  .plx{animation:plx linear both;animation-timeline:scroll(root)}
}
@keyframes plx{from{transform:translateY(calc(var(--vel,.2) * 12vh))}to{transform:translateY(calc(var(--vel,.2) * -48vh))}}
.padrao.plx{transform:none}
@keyframes plx-padrao{from{transform:rotate(-15deg) translateY(0)}to{transform:rotate(-15deg) translateY(-30vh)}}
@supports (animation-timeline: scroll()){
  .padrao.plx{animation-name:plx-padrao}
}
/* recorte em O: a seção "abre" como o anel */
.abre-o{clip-path:circle(18% at 50% 50%)}
@supports (animation-timeline: view()){
  .abre-o{animation:abre-o linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}
.abre-o.vista{clip-path:circle(150% at 50% 50%);transition:clip-path 1.4s var(--curva)}
@keyframes abre-o{to{clip-path:circle(150% at 50% 50%)}}

/* ── páginas internas ───────────────────────────────────────────────────────── */
.pagina-topo{position:relative;padding:clamp(150px,18vw,230px) 0 clamp(70px,9vw,120px);background:var(--ambiencia);overflow:hidden;isolation:isolate}
.pagina-topo .caixa{display:flex;flex-direction:column;gap:26px}
.pagina-topo h1{font-size:clamp(44px,6.4vw,96px);max-width:16ch}
.indice{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.indice a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--filete);color:var(--nevoa);text-decoration:none;font-size:14px;font-weight:500;transition:border-color .3s,color .3s}
.indice a:hover{border-color:var(--ambar);color:var(--osso)}

/* ferramenta detalhada */
.ferramenta{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start;padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--filete);scroll-margin-top:80px}
.ferramenta__lado{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
.ferramenta__lado .cartao__ico{width:72px;height:72px;border-radius:20px}
.ferramenta__lado .cartao__ico svg{width:34px;height:34px}
.ferramenta__corpo{display:flex;flex-direction:column;gap:28px}
.ferramenta__lado h2{font-size:clamp(32px,3.4vw,48px)}
.ferramenta__lado .selo{align-self:flex-start}
.lista-feita{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lista-feita li{padding:20px;border-radius:18px;background:var(--grafite-alto);border:1px solid rgba(58,58,60,.9);font-size:15.5px;color:var(--osso);line-height:1.5}
.lista-feita li b{display:block;margin-bottom:4px;font-family:var(--f-titulo);font-weight:600;font-size:18px}
.lista-feita li span{color:var(--nevoa)}
.nota{display:flex;gap:14px;padding:18px 20px;border-radius:16px;border:1px dashed rgba(184,180,174,.4);color:var(--nevoa);font-size:15px}
.nota svg{flex:none;width:22px;height:22px;color:var(--ambar)}
.dep{padding-block:clamp(64px,8vw,110px)}
.dep__cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}

/* citação de tom de voz: certo × errado */
.voz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.voz div{padding:22px;border-radius:18px;font-size:16px;line-height:1.5}
.voz .nao{border:1px solid rgba(255,123,114,.35);color:var(--nevoa);text-decoration:line-through;text-decoration-color:rgba(255,123,114,.6)}
.voz .sim{border:1px solid rgba(61,220,151,.4);background:rgba(61,220,151,.05)}
.voz small{display:block;margin-bottom:8px;font:700 11px var(--f-texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.voz .nao small{color:#FF7B72}.voz .sim small{color:var(--verde)}

/* contato */
.canais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.canal{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:24px;border:1px solid var(--filete);background:var(--grafite-alto);text-decoration:none;transition:border-color .3s,transform .4s var(--curva)}
.canal:hover{border-color:var(--ambar);transform:translateY(-4px)}
.canal b{font-family:var(--f-titulo);font-weight:500;font-size:24px}
.canal span{color:var(--nevoa)}

/* ── rodapé ─────────────────────────────────────────────────────────────────── */
.rodape{position:relative;background:var(--preto);border-top:1px solid var(--filete);padding:72px 0 40px;overflow:hidden;isolation:isolate}
.rodape__grade{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.rodape h4{margin:0 0 14px;font:700 12px var(--f-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--nevoa)}
.rodape ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.rodape a{color:var(--osso);text-decoration:none;opacity:.85}
.rodape a:hover{opacity:1;color:var(--ambar)}
.rodape__frase{font-family:var(--f-titulo);font-size:22px;line-height:1.35;max-width:26ch;margin-top:20px;color:var(--osso)}
.rodape__pe{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--filete);color:var(--nevoa);font-size:13px}
.rodape__gigante{margin-top:56px;font:400 clamp(56px,11.5vw,180px)/.95 var(--f-titulo);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px rgba(58,58,60,.9);white-space:nowrap;user-select:none;text-align:center}

/* ── cursor (só com mouse) ─────────────────────────────────────────────────── */
.cursor{position:fixed;left:0;top:0;z-index:300;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid rgba(245,165,36,.75);pointer-events:none;
  transition:width .35s var(--curva),height .35s var(--curva),margin .35s var(--curva),background .35s,opacity .3s;opacity:0;mix-blend-mode:normal}
.cursor.sobre{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(245,165,36,.10)}
@media (hover:hover) and (pointer:fine){.cursor.ligado{opacity:1}}

/* ── celular ───────────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .heroi .caixa,.manifesto__grade,.ferramenta{grid-template-columns:minmax(0,1fr)}
  .olho{width:min(78vw,420px);order:-1;margin-top:10px}
  .manifesto__o{width:min(60vw,320px)}
  .ferramenta__lado{position:static}
  .grade--3,.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .instancias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .canais{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .menu,.topo .botao{display:none}
  .abrir-menu{display:grid}
  .topo.menu-aberto .menu{display:flex;position:fixed;inset:76px 0 auto;flex-direction:column;gap:4px;padding:16px var(--margem) 28px;
    background:rgba(0,0,0,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--filete)}
  .topo.menu-aberto .menu a{font-size:20px;padding:14px 16px}
  .grade--2,.grade--3,.grade--4,.lista-feita,.voz{grid-template-columns:minmax(0,1fr)}
  /* o trilho vira lista vertical: no celular, rolar para o lado não é natural */
  .trilho-sec__palco{position:static;height:auto;padding-block:96px}
  .trilho-sec__faixa{flex-direction:column;width:auto;animation:none!important;transform:none!important}
  .cartao{width:100%;min-height:0}
  .trilho-sec__dica{display:none}
  .manifesto__palco{position:relative;min-height:0;padding-block:96px}
  .manifesto__passos{display:none}
  .fala{position:relative;opacity:1;transform:none;margin-bottom:56px}
  .manifesto__falas{min-height:0}
  .manifesto__pontos{display:none}
  .manifesto .camada{opacity:1!important}
  .rodape__grade{grid-template-columns:minmax(0,1fr)}
  .rolar{display:none}
}

/* ── menos movimento ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .revela,.abre-o,.frase .pal{opacity:1!important;transform:none!important;clip-path:none!important}
  .heroi h1 .linha > span{transform:none}
  .heroi .apoio,.heroi .acoes{opacity:1}
  .faixa__trilho{animation:none}
  .trilho-sec__palco{position:static;height:auto}
  .trilho-sec__faixa{flex-wrap:wrap;width:auto}
  .cursor{display:none}
}