/* ══════════════════════════════════════════════════════════
   Carioca's Consultoria

   Tipografia e paleta conforme as fichas de coleção (04/08/2026):
   Poppins nos títulos, Inter no corpo.

   REGRAS DE COR (validadas, identidade/design-guide.md):
   · dourado #B6893C sobre claro = 2.96:1 → SÓ linha e detalhe
   · ocre    #7E5F28 é o dourado quando precisa ser lido (5.53:1)
   · verde   #3A6B5A passa como texto (5.73:1) e como fundo
   · terra   #B76E4D só título grande (3.67:1) — nunca corpo
   · azul    #1E90FF só sobre marinho (5.37:1) — pontuação rara
   ══════════════════════════════════════════════════════════ */

:root{
  /* fundos */
  --papel:      #F9F7F5;
  --areia:      #E9E3D6;   /* a cor das peças */
  --marinho:    #0D1B2A;

  /* tinta */
  --tinta:      #0D1B2A;   /* 16.28:1 no papel */
  --tinta-med:  #4F5A64;   /*  6.60 papel · 5.51 areia */
  --tinta-leve: #5A6570;

  /* marca */
  --dourado:    #B6893C;   /* linha, borda, detalhe. NUNCA texto em claro */
  --dourado-tit:#A17935;   /* ênfase em TÍTULO grande — 3.71 papel · 3.10 areia
                              mesma matiz do dourado, 5% mais escuro só pra passar */
  --ocre:       #7E5F28;   /* o dourado legível em corpo de texto */
  --verde:      #3A6B5A;   /* Rio, mata */
  --terra:      #B76E4D;   /* barro — título grande e detalhe */
  --azul:       #1E90FF;   /* sistema ligado — só sobre marinho */

  /* sobre marinho */
  --sobre-esc:      #F9F7F5;
  --sobre-esc-med:  #C9C2B8;

  --linha:       #DCD4C8;
  --linha-forte: #C4B9A8;

  --titulo:'Poppins', 'Segoe UI', sans-serif;
  --corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max:1180px;
  --t:.4s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--papel); color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(15px,.32vw + 14.2px,17px);
  line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }

.wrap{ width:min(100% - 2.5rem, var(--max)); margin-inline:auto }

.pular{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--marinho); color:var(--papel); padding:.8rem 1.2rem; font-size:.85rem }
.pular:focus{ left:1rem; top:1rem }

/* ── tipografia ─────────────────────────────────────────── */

h1,h2,h3{ font-family:var(--titulo); font-weight:600; line-height:1.14; letter-spacing:-.02em }
h1{ font-size:clamp(2.3rem,5.4vw,4rem) }
h2{ font-size:clamp(1.75rem,3.4vw,2.65rem) }
h3{ font-size:1.02rem; letter-spacing:-.005em }

p{ color:var(--tinta-med) }

.lede{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--tinta); line-height:1.62 }
.lede--solta{ max-width:36rem; margin-top:1.2rem }

.eyebrow{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  font-size:.66rem; font-weight:600; letter-spacing:.3em;
  color:var(--ocre); text-transform:uppercase;
}
.eyebrow i{ font-style:normal; color:var(--ocre); opacity:.55 }

.citacao{
  font-family:var(--titulo);
  font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:500; line-height:1.32;
  color:var(--tinta); letter-spacing:-.022em;
  padding-left:1.5rem; border-left:2px solid var(--dourado); margin-bottom:1.6rem;
}

.coord{
  font-size:.64rem; letter-spacing:.24em; color:var(--tinta-leve);
  font-variant-numeric:tabular-nums;
}

/* ── marca ──────────────────────────────────────────────── */

.brand{ display:flex; align-items:center; gap:.8rem }
.brand__mark{ width:34px; height:34px; color:var(--dourado); flex:none; transition:transform var(--t) }
.brand:hover .brand__mark{ transform:rotate(-8deg) }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2 }
.brand__txt strong{ font-family:var(--titulo); font-size:.85rem; font-weight:600; letter-spacing:.19em; color:var(--tinta) }
.brand__txt em{ font-style:normal; font-size:.55rem; letter-spacing:.3em; color:var(--ocre) }

/* ── botões ─────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.92rem 1.9rem; background:var(--marinho); color:var(--papel);
  font-family:var(--corpo); font-size:.85rem; font-weight:500; letter-spacing:.04em;
  border:1px solid var(--marinho); border-radius:2px;
  transition:background var(--t), color var(--t);
}
.btn:hover{ background:transparent; color:var(--tinta) }
.btn--claro{ background:var(--papel); color:var(--tinta); border-color:var(--papel) }
.btn--claro:hover{ background:transparent; color:var(--papel) }

.link-seta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.88rem; font-weight:500; color:var(--tinta);
  padding-bottom:2px; border-bottom:1px solid var(--linha-forte);
  transition:border-color var(--t), gap var(--t);
}
.link-seta::after{ content:'→'; color:var(--ocre) }
.link-seta:hover{ border-bottom-color:var(--dourado); gap:.75rem }
.link-seta--claro{ color:var(--papel); border-bottom-color:rgba(249,247,245,.35) }
.link-seta--claro::after{ color:var(--dourado) }
.link-seta--claro:hover{ border-bottom-color:var(--papel) }

:where(a,button):focus-visible{ outline:2px solid var(--ocre); outline-offset:3px }

/* ── nav ────────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto; z-index:100; padding:1.4rem 0;
  border-bottom:1px solid transparent;
  transition:padding var(--t), background var(--t), border-color var(--t);
}
.nav.is-stuck{
  padding:.75rem 0; background:rgba(249,247,245,.9);
  backdrop-filter:blur(14px) saturate(120%); border-bottom-color:var(--linha);
}
.nav__inner{ display:flex; align-items:center; gap:2rem }
.nav__links{ display:flex; align-items:center; gap:2rem; margin-left:auto }
.nav__links a{ position:relative; font-size:.83rem; font-weight:500; color:var(--tinta-med); padding:.2rem 0; transition:color var(--t) }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--dourado); transition:width var(--t) }
.nav__links a:hover{ color:var(--tinta) }
.nav__links a:hover::after{ width:100% }

.nav__cta{ padding:.5rem 1.1rem !important; border:1px solid var(--linha-forte); border-radius:2px; color:var(--tinta) !important }
.nav__cta::after{ display:none }
.nav__cta:hover{ background:var(--marinho); color:var(--papel) !important; border-color:var(--marinho) }

.nav__toggle{ display:none; width:40px; height:40px; background:none;
  border:1px solid var(--linha-forte); border-radius:2px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px }
.nav__toggle span{ display:block; width:16px; height:1.5px; background:var(--tinta); transition:transform var(--t) }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg) }

/* ── hero: o fluxo que se aquieta ───────────────────────── */

.hero{ position:relative; padding:clamp(8rem,15vw,10.5rem) 0 clamp(4rem,7vw,6rem); overflow:hidden }

.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__texto{ max-width:38rem }
.hero__titulo{ margin:1.5rem 0 0; text-wrap:balance }

/* ênfase em título — só para h1/h2, nunca em corpo de texto.
   Vale porque texto grande exige 3:1, não 4.5:1. */
.ouro{ color:var(--dourado-tit) }
.hero__sub{ margin-top:1.6rem; max-width:33rem; font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.68 }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.4rem }

/* canvas das ondas — Coleção 5, "Fluxo & Movimento" */
.fluxo{ position:relative }
.fluxo canvas{ width:100%; height:clamp(240px,34vw,380px); display:block }
.fluxo__leg{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--linha);
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-leve);
}

/* ── seções ─────────────────────────────────────────────── */

.sec{ padding:clamp(4.5rem,9vw,7rem) 0; border-top:1px solid var(--linha) }
.sec--areia{ background:var(--areia); border-top-color:var(--linha-forte) }

.sec__cabeca{
  display:flex; align-items:baseline; gap:1.1rem;
  padding-bottom:1.4rem; margin-bottom:clamp(2.2rem,4vw,3.2rem);
  border-bottom:1px solid var(--linha);
}
.sec--areia .sec__cabeca{ border-bottom-color:var(--linha-forte) }
.num{ font-family:var(--titulo); font-size:.72rem; font-weight:600; letter-spacing:.1em; color:var(--ocre); font-variant-numeric:tabular-nums }
.rotulo{ font-size:.71rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-med) }

.sec__corpo h2{ max-width:22ch; text-wrap:balance }

.colunas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:clamp(1.8rem,4vw,3.4rem); margin-top:2.2rem }
.colunas > div > * + *{ margin-top:1.1rem }

.sintomas{ margin-top:1.6rem; display:grid; gap:.85rem }
.sintomas li{ position:relative; padding-left:1.7rem; color:var(--tinta-med); font-size:.96rem }
.sintomas li::before{ content:''; position:absolute; left:0; top:.7em; width:10px; height:1px; background:var(--dourado) }

/* ── pilares (os 4 das fichas) ──────────────────────────── */

.pilares{
  display:grid; gap:1.8rem; margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.pilar{ display:flex; flex-direction:column; gap:.6rem }
.pilar svg{ width:38px; height:38px; color:var(--dourado) }
.pilar b{ font-family:var(--titulo); font-size:.83rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta) }
.pilar span{ font-size:.85rem; color:var(--tinta-med); line-height:1.5 }

/* ── ginga: faixa escura ────────────────────────────────── */

.ginga{ padding:clamp(4.5rem,9vw,6.5rem) 0; background:var(--marinho); color:var(--sobre-esc) }
.ginga__inner{ max-width:44rem }
.ginga__def{ display:flex; align-items:baseline; gap:.8rem; padding-bottom:1rem; margin-bottom:1.7rem; border-bottom:1px solid rgba(249,247,245,.16) }
.ginga__def strong{ font-family:var(--titulo); font-size:1.05rem; font-weight:600; color:var(--sobre-esc) }
.ginga__def span{ font-size:.72rem; font-style:italic; color:var(--sobre-esc-med) }
.ginga__frase{ font-family:var(--titulo); font-size:clamp(1.5rem,3.3vw,2.4rem); font-weight:300; line-height:1.25; letter-spacing:-.025em; color:var(--sobre-esc); text-wrap:balance }
.ginga__nota{ margin-top:1.9rem; max-width:38rem; font-size:.95rem; line-height:1.7; color:var(--sobre-esc-med) }
.ginga__nota b{ color:var(--azul); font-weight:500 }   /* 5.37:1 — sistema ligado */

/* ── grade de entregas ──────────────────────────────────── */

.grade{ display:grid; gap:0; margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  border-top:1px solid var(--linha-forte) }
.item{ padding:1.85rem 1.6rem 1.85rem 0; border-bottom:1px solid var(--linha-forte); transition:background var(--t) }
.item h3{ margin-bottom:.6rem; position:relative; padding-left:1.1rem }
.item h3::before{ content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; background:var(--dourado); border-radius:50% }
.item p{ font-size:.92rem; line-height:1.68; padding-left:1.1rem }
.item:hover{ background:rgba(182,137,60,.06) }

/* ── método: passos + desenho de camadas ────────────────── */

.metodo__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; margin-top:2.6rem }

.passos{ border-top:1px solid var(--linha) }
.passo{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.4rem; padding:1.6rem 0; border-bottom:1px solid var(--linha); transition:padding-left var(--t) }
.passo:hover{ padding-left:.7rem }
.passo__n{ font-family:var(--titulo); font-size:.74rem; font-weight:600; letter-spacing:.08em; color:var(--ocre); font-variant-numeric:tabular-nums }
.passo h3{ align-self:baseline }
.passo p{ grid-column:2; font-size:.93rem }

.camadas{ position:sticky; top:7rem }
.camadas svg{ width:100%; height:auto; color:var(--dourado) }
.camadas figcaption{ margin-top:1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-leve) }

/* ── jornada ────────────────────────────────────────────── */

.jornada{ padding:clamp(3.5rem,7vw,5rem) 0; background:var(--areia); border-block:1px solid var(--linha-forte) }
.jornada__lista{ display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr)) }
.jornada__item{ display:flex; flex-direction:column; gap:.5rem }
.jornada__linhas{ display:block; height:32px; margin-bottom:.5rem; --c:var(--dourado) }
.jornada__linhas--caos{
  background:linear-gradient(var(--c),var(--c)) 0 3px/38% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 22% 11px/54% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 6% 20px/30% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 45% 28px/46% 1px no-repeat;
  opacity:.42 }
.jornada__linhas--meio{
  background:linear-gradient(var(--c),var(--c)) 0 4px/58% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 10% 12px/62% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 4% 20px/54% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 14% 28px/60% 1px no-repeat;
  opacity:.6 }
.jornada__linhas--quase{
  background:linear-gradient(var(--c),var(--c)) 0 4px/78% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 0 12px/72% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 2% 20px/76% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 0 28px/74% 1px no-repeat;
  opacity:.8 }
.jornada__linhas--ordem{
  background:linear-gradient(var(--c),var(--c)) 0 4px/100% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 0 12px/100% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 0 20px/100% 1px no-repeat,
             linear-gradient(var(--c),var(--c)) 0 28px/100% 1px no-repeat }
.jornada__nome{ font-family:var(--titulo); font-size:.98rem; font-weight:600; color:var(--tinta) }
.jornada__item:last-child .jornada__nome{ color:var(--ocre) }
.jornada__leg{ font-size:.82rem; color:var(--tinta-med); line-height:1.5 }

/* ── é / não é ──────────────────────────────────────────── */

.duo{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)) }
.duo__col h3{ padding-bottom:.9rem; margin-bottom:1.3rem; border-bottom:1px solid var(--linha-forte);
  font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-med) }
.lista{ display:grid; gap:.9rem }
.lista li{ position:relative; padding-left:1.6rem; font-size:.93rem; color:var(--tinta-med); line-height:1.6 }
.lista--sim li::before{ content:''; position:absolute; left:0; top:.42em; width:8px; height:4px; rotate:-45deg;
  border-left:1.5px solid var(--verde); border-bottom:1.5px solid var(--verde) }
.lista--nao li::before{ content:''; position:absolute; left:0; top:.68em; width:9px; height:1.5px; background:var(--linha-forte) }

/* ── sobre: topografia e coordenadas ────────────────────── */

.sobre__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(2rem,5vw,4rem); align-items:center; margin-top:2.4rem }
.sobre__arte{ position:relative }
.sobre__arte img{ width:100%; opacity:.9 }
.sobre__arte figcaption{ margin-top:.8rem; text-align:center }
.sobre__texto > * + *{ margin-top:1.1rem }

.assinatura{
  font-family:var(--titulo);
  margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.9rem;
  border-top:1px solid var(--linha-forte);
  font-size:clamp(1.2rem,2.3vw,1.75rem); font-weight:300; line-height:1.3;
  letter-spacing:-.025em; color:var(--tinta); text-wrap:balance;
}

/* ── manifesto ──────────────────────────────────────────── */

.manifesto{ padding:clamp(5rem,10vw,7.5rem) 0; background:var(--verde); color:var(--sobre-esc) }
.manifesto__inner{ max-width:46rem }
.manifesto__rot{ font-size:.7rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(249,247,245,.72); padding-bottom:1rem; margin-bottom:1.8rem;
  border-bottom:1px solid rgba(249,247,245,.22); display:block }
.manifesto p{
  font-family:var(--titulo); font-size:clamp(1.35rem,2.9vw,2.05rem);
  font-weight:300; line-height:1.36; letter-spacing:-.022em; color:var(--sobre-esc); text-wrap:balance;
}

/* ── cta ────────────────────────────────────────────────── */

.cta{ padding:clamp(5rem,10vw,7.5rem) 0; background:var(--marinho); color:var(--sobre-esc) }
.cta__inner{ max-width:40rem }
.cta h2{ color:var(--sobre-esc); max-width:16ch; text-wrap:balance }
.cta p{ margin-top:1.4rem; max-width:32rem; color:var(--sobre-esc-med); font-size:1.02rem }
.cta__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.4rem }

/* ── rodapé ─────────────────────────────────────────────── */

.rodape{ padding:2.6rem 0; background:var(--papel) }
.rodape__inner{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between }
.rodape__marca{ display:flex; align-items:center; gap:.8rem }
.rodape__frase{ font-family:var(--titulo); font-size:.85rem; color:var(--ocre); font-weight:500 }
.rodape__legal{ font-size:.77rem; color:var(--tinta-leve) }
.rodape__legal a{ border-bottom:1px solid var(--dourado); transition:color var(--t) }
.rodape__legal a:hover{ color:var(--tinta) }

/* ── página legal (privacidade) ─────────────────────────── */

.legal{ padding:clamp(6rem,12vw,9rem) 0 clamp(3rem,6vw,5rem) }
.legal__inner{ max-width:44rem }
.legal h1{ font-size:clamp(1.9rem,4vw,3rem); margin-top:1rem }
.legal h2{ font-size:clamp(1.15rem,1.8vw,1.4rem); margin:2.4rem 0 .7rem }
.legal p{ margin-bottom:1rem }
.legal ul{ margin:0 0 1rem 1.2rem; list-style:disc; color:var(--tinta-med) }
.legal li{ margin-bottom:.5rem; padding-left:.2rem }
.legal li::marker{ color:var(--dourado) }
.legal a:not(.brand){ color:var(--ocre); border-bottom:1px solid var(--dourado); transition:color var(--t) }
.legal a:not(.brand):hover{ color:var(--tinta) }
.legal__volta{ margin-top:3rem; font-size:.85rem }

/* ── entrada ────────────────────────────────────────────── */

.vem{ opacity:0; transform:translateY(12px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--d,0) * 70ms) }
.vem.is-in{ opacity:1; transform:none }

/* ── responsivo ─────────────────────────────────────────── */

@media (max-width:960px){
  .hero__grid,.metodo__grid,.sobre__grid{ grid-template-columns:1fr; gap:2.6rem }
  .camadas{ position:static; max-width:24rem }
  .sobre__arte{ max-width:22rem; margin-inline:auto }
}

@media (max-width:760px){
  .nav__links{
    position:fixed; inset:0 0 auto; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:5.5rem 1.6rem 2rem; background:var(--papel); border-bottom:1px solid var(--linha);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s, visibility .3s;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible }
  .nav__links a{ font-size:1.05rem; padding:.85rem 0; border-bottom:1px solid var(--linha) }
  .nav__cta{ margin-top:1.2rem; text-align:center; padding:.85rem !important; border:0; background:var(--marinho); color:var(--papel) !important }
  .nav__toggle{ display:flex; order:3; z-index:2 }
  .item{ padding-right:0 }
  .passo:hover{ padding-left:0 }
}

/* ── acessibilidade e impressão ─────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
  .vem{ opacity:1; transform:none }
}

@media print{
  .nav,.fluxo,.jornada,.camadas{ display:none }
  .ginga,.cta,.manifesto{ background:#fff; color:#000 }
  .ginga__frase,.cta h2,.manifesto p{ color:#000 }
  body{ background:#fff }
}