/* =============================================================
   Raja Growth · Consultoria Yantra Growth
   Design system — motion editorial contido
   Regras duras: sem branco puro, sem preto puro, raio 2px,
   sem sombra difusa, Ouro nunca é texto sobre Papel.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Paleta fixa da marca */
  --navy:        #101B33;
  --navy-deep:   #0B1426;
  --navy-step:   #16213C;   /* elevação = degrau de Navy, não sombra */
  --papel:       #F6F1E7;
  --ouro:        #C89B3C;
  --ignea:       #E15B34;
  --carvao:      #17181A;

  /* Derivadas obrigatórias por contraste WCAG */
  --ignea-ink:   #B84420;   /* Papel sobre ela = 4,80 AA — botão primário */
  --ouro-ink:    #7A5D1E;   /* Ouro como TEXTO sobre Papel = 5,47 AA */

  /* Filetes */
  --fio-ouro-20: rgba(200,155,60,.20);
  --fio-ouro-45: rgba(200,155,60,.45);
  --fio-ui:      rgba(200,155,60,.62);  /* limite de elemento interativo: 3,2:1 sobre Navy (WCAG 1.4.11) */
  --fio-carvao:  rgba(23,24,26,.14);

  /* Tipografia */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-corpo:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Grade base 8px */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;

  /* Rampas nomeadas — cada degrau tem nome, ninguém inventa opacidade no meio do caminho */
  --navy-0:#0B1426; --navy-1:#101B33; --navy-2:#16213C; --navy-3:#1F2C4A;
  --tinta-86: rgba(246,241,231,.86);   /* texto secundário sobre Navy */
  --tinta-70: rgba(246,241,231,.70);   /* apoio */
  --tinta-55: rgba(246,241,231,.55);   /* rótulo mono discreto */
  --grafite-86: rgba(23,24,26,.86);    /* texto secundário sobre Papel */
  --grafite-78: rgba(23,24,26,.78);
  --grafite-60: rgba(23,24,26,.60);

  /* Escala tipográfica declarada — desktop / mobile */
  --t-h1: clamp(2.6rem, 6vw, 4.5rem);
  --t-h2: clamp(2rem, 4vw, 3.1rem);
  --t-h3: clamp(1.3rem, 2vw, 1.6rem);
  --t-b1: 1.15rem;   /* lead — 18,4px */
  --t-b2: 1.0625rem; /* corpo — 17px */
  --t-b3: .95rem;    /* apoio — 15,2px */
  --t-mono: .72rem;

  --container:1120px;
  --raio:2px;

  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset enxuto ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--carvao);
  font-family:var(--f-corpo);
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul{padding:0; list-style:none}

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,.display{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.08;
  text-wrap:balance;
}
h1,.h1{font-size:var(--t-h1)}
h2,.h2{font-size:var(--t-h2); line-height:1.12}
h3,.h3{font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em}
p{max-width:68ch}
.lead{font-size:var(--t-b1); line-height:1.6}
.mono,.eyebrow,.num{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
}
.eyebrow{display:block; margin-bottom:var(--sp-3); color:var(--ouro)}
.s-papel .eyebrow{color:var(--ouro-ink)}
.num{letter-spacing:.04em; text-transform:none}

/* ---------- 4. Superfícies e ritmo ---------- */
.s-navy{background:var(--navy); color:var(--papel)}
.s-navy-deep{background:var(--navy-deep); color:var(--papel)}
.s-papel{background:var(--papel); color:var(--carvao)}
.s-navy a,.s-navy-deep a{color:var(--papel)}

section{padding:var(--sp-12) 0}
@media (max-width:900px){section{padding:var(--sp-8) 0}}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3)}
.container-wide{max-width:1320px}
.stack>*+*{margin-top:var(--sp-3)}
.stack-lg>*+*{margin-top:var(--sp-6)}
.grid{display:grid; gap:var(--sp-3)}
@media (min-width:760px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- 5. Botões e links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 var(--sp-3);
  border:1px solid transparent; border-radius:var(--raio);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn-primary{background:var(--ignea-ink); color:var(--papel)}      /* 4,80 AA */
.btn-primary:hover{background:var(--ignea)}
.btn-ghost{background:transparent; border-color:var(--fio-ui); color:inherit}
.btn-ghost:hover{border-color:var(--ouro)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.link-ouro{
  color:var(--ouro); text-decoration:underline;
  text-decoration-color:var(--ouro); text-underline-offset:4px; text-decoration-thickness:1px;
}
.s-papel .link-ouro{color:var(--ouro-ink); text-decoration-color:var(--ouro-ink)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ignea); outline-offset:3px; border-radius:var(--raio);
}

/* ---------- 6. Cabeçalho ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(16,27,51,.94);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--fio-ouro-20);
  transition:padding .2s var(--ease-out);
}
.header-inner{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); max-width:var(--container); margin-inline:auto;
  transition:padding .2s var(--ease-out);
}
.header.is-scrolled .header-inner{padding-block:6px}
.header{transform:translateY(0); transition:transform .32s var(--ease-out), padding .2s var(--ease-out)}
.header.is-hidden{transform:translateY(-101%)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--papel)}
.brand-mark{font-family:var(--f-display); font-size:1.15rem; letter-spacing:-.01em}
.brand-logo{height:82px; width:auto; display:block}
@media (max-width:640px){.brand-logo{height:56px}}
.brand-sub{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro)}
.nav{display:flex; gap:var(--sp-3); margin-left:auto; align-items:center}
.nav a{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--papel); text-decoration:none; opacity:.82; padding:8px 0;
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1; box-shadow:inset 0 -1px 0 var(--ouro)}
.nav .btn{margin-left:var(--sp-2)}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--fio-ui); border-radius:var(--raio); min-height:44px; min-width:44px}
@media (max-width:900px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:var(--sp-2); padding:var(--sp-3); background:var(--navy);
    border-bottom:1px solid var(--fio-ouro-20); display:none;
  }
  .nav.is-open{display:flex}
  .nav .btn{margin-left:0; width:100%}
}

/* ---------- 7. Cards e filetes ---------- */
.card{
  background:var(--navy-step);
  border:1px solid var(--fio-ouro-20);
  border-radius:var(--raio);
  padding:var(--sp-3);
  transition:border-color .18s var(--ease-out);
}
.card:hover{border-color:var(--fio-ouro-45)}   /* sem translate, sem escala, sem sombra */
.s-papel .card{background:transparent; border-color:var(--fio-carvao)}
.s-papel .card:hover{border-color:var(--ouro-ink)}
.card-fala{font-family:var(--f-display); font-size:1.28rem; line-height:1.25; letter-spacing:-.01em}
.card-pilar{margin-top:var(--sp-2); color:var(--ouro-ink)}
.s-navy .card-pilar{color:var(--ouro)}

.aviso{border-left:3px solid var(--ignea); padding:var(--sp-2) 0 var(--sp-2) var(--sp-3)}
.aviso h3{margin-bottom:8px}
.aviso p{max-width:62ch}
.regra-ouro{border-left:3px solid var(--ouro); padding:var(--sp-2) 0 var(--sp-2) var(--sp-3)}
.hr{height:1px; background:var(--fio-carvao); border:0; margin:var(--sp-6) 0}
.s-navy .hr,.s-navy-deep .hr{background:var(--fio-ouro-20)}

/* ---------- 8. Hero ---------- */
.hero{position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden}
.hero .container{position:relative; z-index:2}
.hero-mapa{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero-mapa svg{width:100%; height:100%}
.traco{stroke:var(--ouro); fill:none; stroke-width:1.5}
.traco-anim{stroke-dasharray:1; stroke-dashoffset:1}
.hero h1{margin:var(--sp-2) 0 var(--sp-3)}
.hero .apoio{color:var(--ouro); font-size:1.02rem; max-width:56ch}
.hero-ctas{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4)}
.hero-rodape{margin-top:var(--sp-6); color:rgba(246,241,231,.7)}

/* ---------- 9. Pilares com pinning ---------- */
.pilares-wrap{display:grid; gap:var(--sp-6)}
@media (min-width:901px){
  .pilares-wrap{grid-template-columns:minmax(320px,44%) 1fr; gap:var(--sp-12); align-items:start}
  .pilares-visual{position:sticky; top:120px}
  .pilar-passo{min-height:62vh; display:flex; flex-direction:column; justify-content:center}
}
@media (max-width:900px){
  .pilar-passo{padding-block:var(--sp-3); border-top:1px solid var(--fio-ouro-20)}
  .pilares-visual{margin-bottom:var(--sp-4)}
}
.pilar-passo h3{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.pilar-passo .n{color:var(--ouro); display:block; margin-bottom:12px}
.pilar-passo[data-ativo="false"]{opacity:.42; transition:opacity .3s var(--ease-out)}
.pilar-passo[data-ativo="true"]{opacity:1}
.setor{fill:transparent; stroke:var(--fio-ouro-20); stroke-width:1.5; transition:stroke .3s var(--ease-out), fill .3s var(--ease-out)}
.setor.on{stroke:var(--ouro); fill:rgba(200,155,60,.10)}
.bindu-label{font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; fill:var(--ouro)}
.setor-label{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; fill:rgba(246,241,231,.75)}
.setor-label.on{fill:var(--papel)}

/* ---------- 10. Score ---------- */
.score-bloco{display:grid; gap:var(--sp-6); align-items:center}
@media (min-width:901px){.score-bloco{grid-template-columns:1fr 1fr; gap:var(--sp-12)}}
.score-num{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(5.5rem,17vw,13rem); line-height:.9; letter-spacing:-.04em; color:var(--papel);
}
.score-de{font-size:.3em; color:var(--ouro); letter-spacing:.02em}
.barras{display:grid; gap:14px}
.barra-linha{display:grid; grid-template-columns:minmax(84px,1fr) 3fr auto; gap:12px; align-items:center}
.barra-nome{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,231,.78)}
.barra-trilho{height:10px; background:rgba(246,241,231,.10); border-radius:var(--raio); overflow:hidden}
.barra-fill{display:block; height:100%; width:0; background:var(--ouro); border-radius:var(--raio); transition:width 900ms var(--ease-out)}
.barra-linha.gargalo .barra-fill{background:var(--ignea)}
.barra-linha.gargalo .barra-nome{color:var(--ignea)}
.barra-valor{font-family:var(--f-mono); font-size:.78rem; font-variant-numeric:tabular-nums}
.faixas{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-3)}
.faixa{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--fio-ouro-20); border-radius:var(--raio)}
.faixa.on{border-color:var(--ouro); color:var(--ouro)}
.s-papel .faixa{border-color:var(--fio-carvao)}
.s-papel .faixa.on{border-color:var(--ouro-ink); color:var(--ouro-ink)}

/* ---------- 11. Jornada ---------- */
.timeline{display:grid; gap:var(--sp-3); margin-top:var(--sp-6)}
@media (min-width:901px){
  .timeline{grid-template-columns:repeat(4,1fr); gap:var(--sp-2); position:relative}
  .timeline::before{content:""; position:absolute; left:0; right:0; top:34px; height:1px; background:var(--fio-carvao)}
  .s-navy .timeline::before{background:var(--fio-ouro-20)}
}
.marco{position:relative; padding-top:var(--sp-6)}
.marco::before{
  content:""; position:absolute; top:29px; left:0; width:11px; height:11px;
  border:1.5px solid var(--ouro-ink); border-radius:50%; background:var(--papel);
}
.marco.marco-fim::before{background:var(--ignea-ink); border-color:var(--ignea-ink)}
.marco .n{display:block; color:var(--ouro-ink); margin-bottom:6px}
.marco h3{font-size:1.15rem}
.marco p{font-size:.95rem; color:rgba(23,24,26,.78)}

/* ---------- 12. Entregas e preços ---------- */
.fase{border-top:1px solid var(--fio-carvao); padding-top:var(--sp-3); margin-top:var(--sp-6)}
.s-navy .fase{border-color:var(--fio-ouro-20)}
.entrega{display:grid; gap:4px; padding:var(--sp-2) 0; border-bottom:1px solid var(--fio-carvao)}
@media (min-width:760px){.entrega{grid-template-columns:minmax(220px,32%) 1fr; gap:var(--sp-3); align-items:baseline}}
.entrega:last-child{border-bottom:0}
.entrega h4{font-family:var(--f-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; margin:0}
.entrega p{font-size:.98rem; color:rgba(23,24,26,.8); margin:0}

.tabela{width:100%; border-collapse:collapse; margin-top:var(--sp-4)}
.tabela th,.tabela td{text-align:left; padding:var(--sp-2) var(--sp-2); border-bottom:1px solid var(--fio-carvao); vertical-align:top}
.tabela th{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ouro-ink)}
.tabela td:first-child{font-family:var(--f-display); font-size:1.05rem}
.tabela .valor{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.tabela tr.degrau-recomendado td{border-left:3px solid var(--ouro-ink)}
.tabela tr.degrau-recomendado td:first-child{padding-left:calc(var(--sp-2) - 3px + 3px)}
.tabela-nota{margin-top:var(--sp-2)}
.tabela-wrap{overflow-x:auto}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid var(--fio-carvao)}
.faq details{border-bottom:1px solid var(--fio-carvao)}
.faq summary{
  cursor:pointer; list-style:none; padding:var(--sp-3) 0;
  font-family:var(--f-display); font-size:1.12rem; letter-spacing:-.01em;
  display:flex; justify-content:space-between; gap:var(--sp-2); align-items:center; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); color:var(--ouro-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--sp-3); color:rgba(23,24,26,.82)}

/* ---------- 14. Rodapé ---------- */
.footer{background:var(--navy); color:var(--papel); padding:var(--sp-8) 0 var(--sp-6)}
.footer-grid{display:grid; gap:var(--sp-4)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer a{color:var(--papel); text-decoration:none; opacity:.82}
.footer a:hover{opacity:1; box-shadow:inset 0 -1px 0 var(--ouro)}
.footer h4{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ouro); margin-bottom:var(--sp-2)}
.footer li+li{margin-top:8px}
.footer-fim{margin-top:var(--sp-6); padding-top:var(--sp-3); border-top:1px solid var(--fio-ouro-20); color:rgba(246,241,231,.62)}

/* ---------- 15. Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- 16. Parallax ---------- */
.plano{will-change:transform}

/* ---------- 17. Utilidades ---------- */
[hidden]{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; background:var(--papel); color:var(--carvao); padding:12px 16px; z-index:100}
.skip:focus{left:8px; top:8px}
.medida{max-width:68ch}
.centro{margin-inline:auto; text-align:center}
.centro p{margin-inline:auto}
.mt-6{margin-top:var(--sp-6)} .mt-4{margin-top:var(--sp-4)} .mt-3{margin-top:var(--sp-3)}

/* ---------- 18. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .traco-anim{stroke-dashoffset:0}
  .plano{transform:none !important}
  .pilar-passo[data-ativo="false"]{opacity:1}
}

/* =============================================================
   19. Camada de scroll v2 — o que veio da leitura de Advisora e Advitex
   Regra mantida: todo efeito revela um número, uma posição ou um caminho.
   ============================================================= */

/* 19.1 Trilho de seções — posição na página, não decoração */
.trilho{
  position:fixed; left:20px; top:50%; transform:translateY(-50%);
  z-index:50; display:none; flex-direction:column; gap:14px;
}
@media (min-width:1280px){ .trilho{display:flex} }
.trilho a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-55); opacity:.55; transition:opacity .2s var(--ease-out), color .2s var(--ease-out);
}
.trilho a::before{
  content:""; width:14px; height:1px; background:currentColor; flex:none;
  transition:width .24s var(--ease-out);
}
.trilho a span{opacity:0; transition:opacity .2s var(--ease-out)}
.trilho a:hover,.trilho a[aria-current="true"]{opacity:1}
.trilho a[aria-current="true"]::before{width:30px}
.trilho a:hover span,.trilho a[aria-current="true"] span{opacity:1}
.trilho.sobre-papel a{color:var(--grafite-60)}
.trilho.sobre-papel a[aria-current="true"]{color:var(--ouro-ink)}
.trilho.sobre-navy a[aria-current="true"]{color:var(--ouro)}

/* 19.2 Jornada com pin horizontal — a posição na linha do tempo é a informação */
.pin-jornada{position:relative; padding:0}
.pin-palco{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; gap:var(--sp-6);
}
.pin-palco::before,.pin-palco::after{content:""; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none}
.pin-palco::before{left:0; background:linear-gradient(90deg, var(--papel), rgba(246,241,231,0))}
.pin-palco::after{right:0; background:linear-gradient(270deg, var(--papel), rgba(246,241,231,0))}
@media (max-width:900px){ .pin-palco::before,.pin-palco::after{display:none} }
.pin-cabecalho{max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3); width:100%}
.pin-trilha{
  display:flex; gap:var(--sp-8); align-items:stretch; will-change:transform;
  padding-inline:max(var(--sp-3), calc((100vw - var(--container)) / 2));
}
.pin-trilha .marco{
  flex:0 0 min(360px, 78vw); padding-top:var(--sp-6); border-top:1px solid var(--fio-carvao);
}
.pin-trilha .marco::before{top:-6px; left:0}
.pin-regua{
  position:relative; height:1px; background:var(--fio-carvao);
  max-width:var(--container); margin-inline:auto; width:calc(100% - var(--sp-6));
}
.pin-regua span{position:absolute; inset:0 auto 0 0; width:0; background:var(--ouro-ink); height:1px}
.pin-legenda{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3); width:100%;
  display:flex; justify-content:space-between; color:var(--grafite-60);
}
@media (max-width:900px), (prefers-reduced-motion:reduce){
  .pin-jornada{height:auto !important; padding:var(--sp-8) 0}
  .pin-palco{position:static; height:auto; overflow:visible}
  .pin-trilha{flex-direction:column; gap:var(--sp-3); transform:none !important; padding-inline:var(--sp-3)}
  .pin-trilha .marco{flex:none; width:100%}
  .pin-regua{display:none}
}

/* 19.3 Revelação palavra a palavra ligada ao scroll — o texto acende na velocidade da leitura */
.scrub-palavras span{opacity:.5; transition:opacity .18s linear}  /* estado apagado: 4,70:1 — passa AA mesmo antes de acender. Some com prefers-reduced-motion e sem JS */
@media (prefers-reduced-motion:reduce){ .scrub-palavras span{opacity:1} }

/* 19.4 Split de linha nos títulos — sem rotação 3D, só opacidade e deslocamento */
.split-linhas .linha{display:block; overflow:hidden}
.split-linhas .linha > span{
  display:block; opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.split-linhas.is-in .linha > span{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .split-linhas .linha > span{opacity:1; transform:none}
}

/* 19.5 Revelação de desenho por clip — o diagrama se desenha da esquerda para a direita */
.revela-desenho{clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease-out)}
.revela-desenho.is-in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){ .revela-desenho{clip-path:none !important} }