/* Leginova — folha de estilo do site.
   Tokens extraídos do design system "ipê branco"
   (leginova-designsystem-ipebranco/tokens). Não criar cores novas aqui. */

/* Fontes hospedadas no próprio domínio (subconjunto latin, licença SIL OFL 1.1,
   ver assets/fonts/LICENSE-*.txt). Nenhuma requisição a terceiros. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-300-normal.woff2') format('woff2')}

:root{
  --navy-950:#090D18;--navy-900:#0B1220;--navy-800:#10162A;--navy-600:#1E2A4A;
  --gold-500:#E7BB5C;--gold-600:#C98A28;--gold-700:#93711F;
  --teal-500:#5EEAD4;--teal-700:#1A8F7D;
  --risk-500:#E2694E;
  --paper-50:#FAF7F1;--paper-100:#F1EADC;--white:#FFFFFF;
  --text-body-light:#171B26;--text-muted-light:#5B6072;
  --text-body-dark:#EDEFF6;--text-muted-dark:#A7B0C6;
  --line-hairline:rgba(23,27,38,.12);--line-soft:rgba(167,176,198,.14);--line-strong:rgba(167,176,198,.26);

  --font-display:'EB Garamond',Garamond,Georgia,serif;
  --font-wordmark:'Space Grotesk',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  --radius-sm:6px;--radius-md:9px;--radius-lg:14px;--radius-pill:100px;
  --shadow-card:0 1px 4px rgba(9,13,24,.08);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--paper-50);color:var(--text-body-light);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;line-height:1.2}
p{margin:0}
a{color:var(--navy-900);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;border-radius:2px}

.wrap{max-width:960px;margin:0 auto;padding:0 1.25rem}
@media (min-width:600px){.wrap{padding:0 1.75rem}}

.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}
.skip:focus{left:1rem;top:1rem;position:fixed;background:var(--white);color:var(--navy-900);padding:.6rem 1rem;z-index:99;border-radius:var(--radius-sm)}

/* Cabeçalho fixo: único uso de blur, conforme o design system. */
.topo{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line-hairline);background:rgba(250,247,241,.92);backdrop-filter:blur(10px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--navy-900)}
.brand img{width:24px;height:24px}
.brand span{font-family:var(--font-wordmark);font-size:1.45rem;font-weight:300;letter-spacing:.02em;text-transform:lowercase;line-height:1}
.topo nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.topo nav a{font-size:.92rem;color:var(--text-muted-light);text-decoration:none;padding:.2rem 0}
.topo nav a:hover{color:var(--navy-900);text-decoration:underline}

.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted-light);margin-bottom:.9rem}

/* Hero */
.hero{background:var(--navy-950);color:var(--text-body-dark);padding:4.5rem 0 4.25rem;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:url('/assets/contour-field.svg') no-repeat center/900px auto;opacity:.29;mix-blend-mode:screen}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:var(--gold-500)}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);color:#FCFAF5;max-width:22ch;letter-spacing:-.01em;line-height:1.12}
.hero-sub{max-width:52ch;margin-top:1.25rem;color:var(--text-muted-dark);font-size:1.08rem}
.hero .actions{margin-top:2.25rem}
.hero-ipe{position:absolute;z-index:1;top:50%;right:-3%;width:min(40vw,430px);transform:translateY(-50%);opacity:.16;pointer-events:none}
@media (max-width:760px){.hero-ipe{display:none}}

.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--radius-md);border:0;font:500 .97rem/1.3 var(--font-body);text-decoration:none;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn-solid{background:var(--gold-500);color:var(--navy-950)}

/* Seções */
.secao{padding:4.25rem 0;border-bottom:1px solid var(--line-hairline)}
.secao-tinta{background:var(--paper-100)}
.secao h2{font-size:clamp(1.55rem,3.4vw,2.1rem);color:var(--navy-900);max-width:26ch}
.lede{max-width:var(--measure);color:var(--text-muted-light);margin-top:1rem}

.statement{max-width:var(--measure);display:grid;gap:1.1rem}
.statement p{font-family:var(--font-display);font-size:clamp(1.18rem,2.2vw,1.38rem);line-height:1.5;color:var(--text-body-light)}

.principios{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline);border-radius:var(--radius-lg);overflow:hidden;counter-reset:p}
@media (min-width:700px){.principios{grid-template-columns:1fr 1fr}}
.principios li{background:var(--paper-50);padding:1.5rem 1.5rem 1.6rem;counter-increment:p}
.principios li::before{content:counter(p,decimal-leading-zero);display:block;font-family:var(--font-mono);font-weight:500;font-size:.78rem;color:var(--text-muted-light);margin-bottom:.5rem}
.principios h3{font-size:1.25rem;color:var(--navy-900);margin-bottom:.35rem}
.principios p{color:var(--text-muted-light);font-size:.97rem}

/* Cards de projeto */
.cards{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.card{background:var(--white);border:1px solid var(--line-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column}
.card-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.9rem}
.card h3{font-size:1.4rem;color:var(--navy-900);margin-bottom:.75rem}
.card h3 a{color:inherit}
.card dl{margin:0;font-size:.95rem}
.card dt{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted-light);margin-top:.85rem}
.card dt:first-child{margin-top:0}
.card dd{margin:.2rem 0 0;color:var(--text-body-light)}
.ente{font-size:.82rem;color:var(--text-muted-light)}
.status{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .65rem;border:1px solid var(--line-hairline);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--text-body-light);background:var(--paper-50)}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-muted-light)}
.status-implantacao::before{background:var(--teal-700)}
.status-desenvolvimento::before{background:var(--gold-600)}
.status-prototipo::before{background:var(--navy-600)}
.status-planejado::before{background:transparent;border:1px solid var(--text-muted-light)}
.stack{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.stack li{font-family:var(--font-mono);font-weight:500;font-size:.74rem;padding:.12rem .55rem;border-radius:var(--radius-pill);background:var(--paper-100);color:var(--text-body-light)}

.credencial{font-family:var(--font-mono);font-weight:500;font-size:.88rem;color:var(--text-body-light);margin-top:.75rem}

/* Contato (fundo escuro) */
.contato{background:var(--navy-900);color:var(--text-body-dark);border-bottom:0}
.contato .eyebrow{color:var(--gold-500)}
.contato h2{color:#FCFAF5}
.contato .lede{color:var(--text-muted-dark)}
.contato a{color:var(--gold-500)}
.alternativa{margin-top:1.75rem;color:var(--text-muted-dark)}

.rodape{padding:2.25rem 0 3rem;font-size:.85rem;color:var(--text-muted-light)}
.rodape p{margin:.3rem 0;max-width:var(--measure)}

/* Páginas de documento (Política de Privacidade, confirmação do contato) */
.documento h1{font-size:clamp(1.9rem,4.4vw,2.6rem);color:var(--navy-900);max-width:24ch}
.documento h2{font-size:1.35rem;margin-top:2.25rem;margin-bottom:.5rem}
.documento p,.documento ul{max-width:var(--measure)}
.documento p+p{margin-top:.75rem}
.documento ul{padding-left:1.25rem;margin:.75rem 0}
.documento li{margin:.35rem 0}
.documento .atualizacao{margin-top:2.5rem;font-size:.88rem;color:var(--text-muted-light)}

/* Formulário de contato (fundo escuro) */
.form{margin-top:2rem;max-width:40rem;display:grid;gap:1.1rem}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.92rem;font-weight:500;color:var(--text-body-dark)}
.opcional{font-weight:400;color:var(--text-muted-dark)}
.form input,.form select,.form textarea{width:100%;font:400 1rem/1.5 var(--font-body);color:var(--text-body-dark);background:var(--navy-950);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:.65rem .8rem}
.form textarea{resize:vertical;min-height:8rem}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted-dark) 50%),linear-gradient(135deg,var(--text-muted-dark) 50%,transparent 50%);background-position:calc(100% - 1.1rem) 55%,calc(100% - .8rem) 55%;background-size:.3rem .3rem;background-repeat:no-repeat;padding-right:2.2rem}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--gold-500);outline-offset:1px;border-color:transparent}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6;cursor:wait}
.contato :focus-visible{outline-color:var(--gold-500)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.aviso{font-size:.88rem;color:var(--text-muted-dark);max-width:var(--measure)}
.form-status:empty{display:none}
.form-status{padding:.75rem 1rem;border-radius:var(--radius-md);border:1px solid var(--line-strong);color:var(--text-body-dark)}
.form-status.sucesso{border-color:var(--teal-500)}
.form-status.erro{border-color:var(--risk-500)}
.form.enviado .campo,.form.enviado .cf-turnstile,.form.enviado .btn{display:none}
.actions-doc{margin-top:2rem}

.perfis{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.perfis a{font-weight:500;padding:.2rem 0}

/* ---------------------------------------------------------------
   Ícones próprios (icones/*.svg, inseridos em linha pelo build).
   Sistema geométrico: traço 2,1 com cantos vivos, octógono do miolo
   do ipê como nó, curvas de nível finas como camada cartográfica.
   Traço em currentColor (navy); ouro e teal já vêm no SVG.
   --------------------------------------------------------------- */
.icone{display:block;width:100%;height:100%}

.card-icone,.etapa-icone{color:var(--navy-900);background:var(--paper-100);border:1px solid var(--line-hairline);border-radius:var(--radius-lg)}
.card-icone{width:64px;height:64px;padding:10px;margin-bottom:1rem;transition:border-color .3s}
.card:hover .card-icone{border-color:rgba(201,138,40,.55)}

/* Pulso do status "Em implantação" */
.status-implantacao::before{animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------------------------------------------------------------
   Pipeline do Quipu
   --------------------------------------------------------------- */
.pipeline{margin:2.5rem 0 0;background:var(--white);border:1px solid var(--line-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.6rem 1.4rem 1.8rem}
@media (min-width:760px){.pipeline{padding:2rem 2rem 2.2rem}}
.pipeline figcaption h3{font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--navy-900);max-width:30ch}
.pipeline figcaption p:not(.eyebrow){color:var(--text-muted-light);max-width:var(--measure);margin-top:.5rem;font-size:.97rem}
.pipeline .eyebrow{margin-bottom:.5rem}

.etapas{--gap:1.75rem;list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:var(--gap);counter-reset:etapa}
.etapa{position:relative;display:grid;grid-template-columns:64px 1fr;column-gap:1rem;align-content:start;counter-increment:etapa}
.etapa-icone{grid-row:1/span 2;width:64px;height:64px;padding:10px;position:relative;z-index:1}
.etapa h4{font:500 1rem/1.3 var(--font-body);color:var(--navy-900);margin:.35rem 0 .2rem}
.etapa h4::before{content:counter(etapa,decimal-leading-zero) ' ';font-family:var(--font-mono);font-weight:500;font-size:.72rem;color:var(--text-muted-light);margin-right:.35rem}
.etapa p{margin:0;font-size:.92rem;color:var(--text-muted-light)}

/* Conectores: linha tracejada com um ponto que percorre o fluxo */
.etapa:not(:last-child)::after{content:'';position:absolute;left:31.5px;top:70px;bottom:calc(-1 * var(--gap) + 6px);width:1px;background:linear-gradient(180deg,rgba(23,27,38,.28) 50%,transparent 0) 0 0/1px 6px repeat-y}
.etapa:not(:last-child)::before{content:'';position:absolute;left:29px;top:70px;width:6px;height:6px;border-radius:50%;background:var(--teal-700);z-index:2;animation:fluxo-v 3.2s linear infinite;opacity:0}
@keyframes fluxo-v{0%{top:70px;opacity:0}15%,85%{opacity:1}100%{top:calc(100% + var(--gap) - 12px);opacity:0}}

@media (min-width:760px){
  .etapas{grid-template-columns:repeat(4,1fr);--gap:1.25rem}
  .etapa{grid-template-columns:1fr}
  .etapa-icone{grid-row:auto;margin-bottom:.6rem}
  .etapa:not(:last-child)::after{left:72px;right:calc(-1 * var(--gap) + 6px);top:31.5px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(23,27,38,.28) 50%,transparent 0) 0 0/6px 1px repeat-x}
  .etapa:not(:last-child)::before{left:72px;top:29px;animation-name:fluxo-h}
  @keyframes fluxo-h{0%{left:72px;opacity:0}15%,85%{opacity:1}100%{left:calc(100% + var(--gap) - 12px);opacity:0}}
}
.etapa:nth-child(2)::before{animation-delay:.8s}
.etapa:nth-child(3)::before{animation-delay:1.6s}

/* ---------------------------------------------------------------
   Revelação ao rolar (ativada por assets/movimento.js)
   --------------------------------------------------------------- */
.movimento .reveal,.movimento .reveal-grupo>*{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.movimento .reveal.visivel,.movimento .reveal-grupo>.visivel{opacity:1;transform:none}
.movimento .reveal-grupo>:nth-child(2){transition-delay:.12s}
.movimento .reveal-grupo>:nth-child(3){transition-delay:.24s}

/* Hero: deriva lenta do ipê e do campo topográfico */
.hero-ipe{animation:ipe-deriva 12s ease-in-out infinite}
@keyframes ipe-deriva{0%,100%{transform:translateY(-50%) rotate(0deg)}50%{transform:translateY(calc(-50% - 6px)) rotate(4deg)}}
.hero::after{animation:campo 40s ease-in-out infinite alternate}
@keyframes campo{from{background-position:50% 50%}to{background-position:46% 54%}}