/* Design system do site — deriva de motor-pdf/style-apresentacao.css
   (mesmos tokens de cor e tipografia do material apresentável em PDF).
   Layout: one-pager com seções em faixas escura/clara alternadas,
   ritmo dado por altura/densidade variável + transição de entrada
   (sem scroll-snap — testado e descartado, ver nota abaixo) e
   trilho de posição lateral para saltar direto a uma seção (script.js). */

:root{
  --ink:#15191F;
  --ink2:#1F2530;
  --paper:#F4F1EA;
  --paper2:#ECE8DF;
  --offwhite:#ECE8DF;
  --inktext:#1B2026;
  --gold:#C2A35A;
  --gold-soft:#D9C48F;
  --slate-paper:#6B6456;
  --slate-ink:#7C8591;
  --hairline:#D8D2C4;
  --hairline-dark:#2A313B;

  /* multiplicador de tipografia + largura de coluna — todo font-size
     e max-width de coluna de texto do arquivo usa calc(valor * este
     número); margens/gaps/padding ficam de fora de propósito.
     Objetivo (Cezar, 05/08): texto e caixa de texto maiores "enchendo
     mais a tela", sem a página ficar mais longa/precisar rolar mais —
     por isso as seções continuam com padding e min-height:100vh fixos,
     só o conteúdo cresce dentro delas.
     `zoom` foi testado e descartado: interage mal com min-height:100vh
     (o zoom nativo do navegador recalcula vh de um jeito que o `zoom`
     do CSS não replica, esticando as seções verticalmente ao invés de
     preencher a tela).
     TESTE (05/08): 1.25 = +25%. Voltar para 1 antes de publicar, a
     menos que ele aprove manter maior. */
  --type-scale:1.25;
}

*{ box-sizing:border-box; }

html{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}

html,body{ margin:0; padding:0; }

body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--inktext);
  background:var(--paper);
  line-height:1.6;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- ESTRUTURA DE SEÇÃO ---------- */

.section{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  view-timeline:--section;
  padding:9vh 8vw;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.section.dark{ background:var(--ink); color:var(--offwhite); }
.section.light{ background:var(--paper); color:var(--inktext); }

.section-inner{ max-width:calc(920px * var(--type-scale)); margin:0 auto; width:100%; }
.section-inner.wide{ max-width:calc(1080px * var(--type-scale)); }

.kicker{
  font-size:calc(.7rem * var(--type-scale));
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 1.4rem 0;
}

.gold-rule{
  width:56px;
  height:3px;
  background:var(--gold);
  margin:0 0 1.6rem 0;
  border:0;
}

h2{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:clamp(calc(1.6rem * var(--type-scale)), calc(3.4vw * var(--type-scale)), calc(2.4rem * var(--type-scale)));
  line-height:1.22;
  margin:0 0 1.4rem 0;
}
.dark h2{ color:var(--offwhite); }
.light h2{ color:var(--inktext); }

.lead{
  font-size:clamp(calc(1rem * var(--type-scale)), calc(1.5vw * var(--type-scale)), calc(1.15rem * var(--type-scale)));
  line-height:1.65;
  max-width:64ch;
  margin:0 0 1.6rem 0;
}
.dark .lead{ color:#C9C2B2; }
.light .lead{ color:var(--slate-paper); }

.synthesis{
  font-family:'Lora',Georgia,serif;
  font-style:italic;
  font-size:clamp(calc(1.05rem * var(--type-scale)), calc(1.6vw * var(--type-scale)), calc(1.3rem * var(--type-scale)));
  line-height:1.5;
}

/* revelação de entrada — CSS puro, sem JS, via scroll-driven animation
   amarrada à view-timeline nomeada da própria SEÇÃO (--section, definida
   acima em .section), não à entrada do elemento centralizado — preso a
   este último, o efeito terminava cedo demais (o conteúdo já nasce
   centralizado na tela) e ficava indistinguível de rolagem normal.
   Amarrado à seção, o "pop" acontece perto do momento em que o snap
   termina de encaixar — é isso que dá a leitura de troca de "slide".
   Onde `view()`/timelines nomeadas não são suportadas, animation-timeline
   cai no default `auto` e a animação roda uma vez no load — nunca fica
   presa em opacity:0. */
.reveal{
  animation:reveal-in .7s cubic-bezier(.22,.61,.36,1) both;
  animation-timeline:--section;
  animation-range:entry 25% entry 100%;
}
@keyframes reveal-in{
  from{ opacity:0; transform:translateY(80px) scale(.75); filter:blur(25px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; }
}

/* ---------- BARRA DE PROGRESSO ---------- */

.progress-rail{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:var(--gold);
  z-index:60;
  transition:width .1s linear;
}

/* ---------- TRILHO DE POSIÇÃO (dots) ---------- */

.section-nav{
  position:fixed;
  right:1.6rem;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:center;
}

.section-nav a{
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(123,120,105,.35);
  display:block;
  transition:background .2s ease, transform .2s ease;
}
.section-nav a:hover,
.section-nav a:focus-visible{
  background:var(--gold);
  transform:scale(1.25);
}
.section-nav a.active{
  background:var(--gold);
  transform:scale(1.35);
}

.section-nav a .label{
  position:absolute;
  right:1.1rem;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:calc(.72rem * var(--type-scale));
  letter-spacing:.06em;
  color:var(--offwhite);
  background:var(--ink);
  padding:.3rem .6rem;
  border-radius:3px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.section-nav a:hover .label,
.section-nav a:focus-visible .label{ opacity:1; }

@media (max-width:820px){
  .section-nav{ display:none; }
}

/* botão flutuante de índice (mobile) */
.mobile-index-toggle{
  display:none;
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:55;
  width:2.7rem;
  height:2.7rem;
  border-radius:50%;
  background:var(--ink);
  color:var(--gold);
  border:1px solid var(--hairline-dark);
  font-size:calc(1.2rem * var(--type-scale));
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
@media (max-width:820px){
  .mobile-index-toggle{ display:block; }
}

.mobile-index-sheet{
  display:none;
  position:fixed;
  right:1.1rem;
  bottom:4.2rem;
  z-index:55;
  background:var(--ink);
  border:1px solid var(--hairline-dark);
  border-radius:8px;
  padding:.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.mobile-index-sheet.open{ display:flex; flex-direction:column; }
.mobile-index-sheet a{
  color:var(--offwhite);
  font-size:calc(.85rem * var(--type-scale));
  padding:.5rem .7rem;
  text-decoration:none;
  border-radius:4px;
  white-space:nowrap;
}
.mobile-index-sheet a:hover,
.mobile-index-sheet a:active{ background:var(--ink2); color:var(--gold); }

/* ---------- HERO ---------- */

.hero{ position:relative; }

.hero-layout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4rem;
  width:100%;
}

.hero-inner{ max-width:calc(620px * var(--type-scale)); flex:1 1 380px; }

.hero-photo{
  flex:0 0 auto;
  width:min(28vw, 300px);
  min-width:0;
  max-width:100%;
}
.hero-photo .frame{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--hairline-dark);
  border-top:3px solid var(--gold);
}
.hero-photo .frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  mix-blend-mode:multiply;
  opacity:.22;
  pointer-events:none;
}
.hero-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 25%;
  filter:grayscale(55%) sepia(.08) contrast(1.08) brightness(.94);
}

@media (max-width:820px){
  .hero-layout{
    flex-direction:column;
    align-items:flex-start;
    gap:2rem;
  }
  .hero-photo{ width:min(45vw, 200px); }
}

.hero-name{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:clamp(calc(2.6rem * var(--type-scale)), calc(7vw * var(--type-scale)), calc(4.6rem * var(--type-scale)));
  line-height:1.05;
  color:var(--offwhite);
  margin:0 0 .6rem 0;
}

.hero-role{
  font-size:clamp(calc(.85rem * var(--type-scale)), calc(1.4vw * var(--type-scale)), calc(1rem * var(--type-scale)));
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 1.8rem 0;
}

.hero-declaration{
  font-family:'Lora',Georgia,serif;
  font-weight:500;
  font-size:clamp(calc(1.15rem * var(--type-scale)), calc(2.3vw * var(--type-scale)), calc(1.55rem * var(--type-scale)));
  line-height:1.4;
  color:var(--offwhite);
  max-width:46ch;
  margin:0 0 1.2rem 0;
}

.hero-subtitle{
  font-family:'Lora',Georgia,serif;
  font-style:italic;
  font-size:clamp(calc(.95rem * var(--type-scale)), calc(1.3vw * var(--type-scale)), calc(1.1rem * var(--type-scale)));
  line-height:1.55;
  color:#C9C2B2;
  max-width:48ch;
  margin:0;
}

.hero-lockup{
  margin-top:3.5rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.hero-lockup .handle{
  font-size:calc(.78rem * var(--type-scale));
  letter-spacing:.1em;
  color:var(--gold);
}

.scroll-cue{
  position:absolute;
  left:8vw;
  bottom:6vh;
  background:none;
  border:0;
  color:var(--slate-ink);
  font-size:calc(.75rem * var(--type-scale));
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0;
}
.scroll-cue:hover{ color:var(--gold); }
.scroll-cue .arrow{
  display:inline-block;
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue .arrow{ animation:none; }
}

/* ---------- PROBLEMA ---------- */

.problem-list{
  list-style:none;
  margin:0 0 2.2rem 0;
  padding:0;
  display:grid;
  gap:1rem;
}
.problem-list li{
  padding:1.1rem 1.3rem;
  background:var(--paper2);
  border-left:3px solid var(--gold);
  font-size:calc(1rem * var(--type-scale));
  line-height:1.55;
}

.pull-question{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(calc(1.3rem * var(--type-scale)), calc(2.6vw * var(--type-scale)), calc(1.9rem * var(--type-scale)));
  line-height:1.4;
  color:var(--inktext);
  border-top:1px solid var(--hairline);
  padding-top:1.6rem;
  margin:0;
}

/* ---------- POR QUE ACONTECE ---------- */

.reason-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin:0 0 2.2rem 0;
}
@media (max-width:700px){
  .reason-grid{ grid-template-columns:1fr; }
}
.reason-grid .card{
  background:var(--ink2);
  border-top:2px solid var(--gold);
  padding:1.3rem 1.4rem;
  font-size:calc(.96rem * var(--type-scale));
  line-height:1.55;
  color:#DAD5C6;
}

.closing-line{
  font-family:'Lora',Georgia,serif;
  font-style:italic;
  font-size:clamp(calc(1.1rem * var(--type-scale)), calc(2vw * var(--type-scale)), calc(1.35rem * var(--type-scale)));
  line-height:1.5;
  color:var(--gold-soft);
  border-top:1px solid var(--hairline-dark);
  padding-top:1.6rem;
  margin:0;
}

/* ---------- MÉTODO ---------- */

.method-steps{
  list-style:none;
  margin:2.2rem 0 0 0;
  padding:0;
  display:flex;
  align-items:flex-start;
  position:relative;
}
.method-steps::before{
  content:"";
  position:absolute;
  top:calc(22px * var(--type-scale));
  left:6%;
  right:6%;
  height:1px;
  background:var(--hairline);
  z-index:0;
}

.method-step{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 .5rem;
  position:relative;
  z-index:1;
}

.method-step .num{
  width:calc(44px * var(--type-scale));
  height:calc(44px * var(--type-scale));
  border-radius:50%;
  background:var(--paper);
  border:calc(2px * var(--type-scale)) solid var(--gold);
  color:var(--gold);
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:calc(.9rem * var(--type-scale));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
  flex-shrink:0;
}

.method-text{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.method-step .title{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:calc(1.02rem * var(--type-scale));
  color:var(--inktext);
  margin-bottom:.5rem;
}

.method-step .question{
  font-size:calc(.8rem * var(--type-scale));
  line-height:1.5;
  color:var(--slate-paper);
}

@media (max-width:820px){
  .method-steps{
    flex-direction:column;
    align-items:stretch;
    gap:1.6rem;
  }
  .method-steps::before{ display:none; }
  .method-step{
    flex-direction:row;
    text-align:left;
    align-items:flex-start;
    padding:0;
  }
  .method-step .num{ margin-bottom:0; margin-right:1rem; }
  .method-step .title{ margin-bottom:.3rem; }
  .method-text{ align-items:flex-start; }
}

/* ---------- JORNADA + SERVIÇOS ---------- */

.journey-tag{
  display:inline-block;
  font-size:calc(.72rem * var(--type-scale));
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate-ink);
  margin:0 0 2.2rem 0;
}

.service-track{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.service-card{
  background:var(--ink2);
  border:1px solid var(--hairline-dark);
  border-left:3px solid var(--gold);
  border-radius:2px;
}
.service-card.side{
  border-left:3px solid var(--slate-ink);
  opacity:.94;
}

.service-card summary{
  cursor:pointer;
  list-style:none;
  padding:1.1rem 1.4rem;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.4rem .9rem;
}
.service-card summary::-webkit-details-marker{ display:none; }

.service-card summary .name{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:calc(1.08rem * var(--type-scale));
  color:var(--offwhite);
  flex:1 1 220px;
}
.service-card summary .duration{
  font-size:calc(.72rem * var(--type-scale));
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.service-card summary .synthesis{
  display:block;
  width:100%;
  color:#B9C2CE;
  font-size:calc(.92rem * var(--type-scale));
  margin-top:.2rem;
}
.service-card summary::after{
  content:"+";
  font-size:calc(1.2rem * var(--type-scale));
  color:var(--gold);
  margin-left:.6rem;
}
.service-card[open] summary::after{ content:"–"; }

.service-body{
  padding:0 1.4rem 1.4rem 1.4rem;
  border-top:1px solid var(--hairline-dark);
  padding-top:1.1rem;
}
.service-body h4{
  font-size:calc(.72rem * var(--type-scale));
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .6rem 0;
}
.service-body ul{
  margin:0 0 1.2rem 0;
  padding-left:1.1rem;
  color:#C9C2B2;
  font-size:calc(.92rem * var(--type-scale));
  line-height:1.55;
}
.service-body ul:last-child{ margin-bottom:0; }
.service-body .footnote{
  font-size:calc(.85rem * var(--type-scale));
  color:var(--slate-ink);
  margin:0;
  font-style:italic;
}

/* ---------- FRONTEIRA ---------- */

.boundary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  margin:0 0 1.8rem 0;
}
@media (max-width:700px){
  .boundary-grid{ grid-template-columns:1fr; }
}
.boundary-grid h3{
  font-family:'Lora',Georgia,serif;
  font-size:calc(1.05rem * var(--type-scale));
  margin:0 0 .6rem 0;
  color:var(--inktext);
}
.boundary-grid p{
  font-size:calc(.95rem * var(--type-scale));
  line-height:1.6;
  color:var(--slate-paper);
  margin:0;
}

.boundary-note{
  border-top:1px solid var(--hairline);
  padding-top:1.4rem;
  font-size:calc(.9rem * var(--type-scale));
  line-height:1.6;
  color:var(--slate-paper);
}
.boundary-note strong{ color:var(--inktext); }

/* ---------- CREDIBILIDADE ---------- */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
  margin:0 0 2rem 0;
}
@media (max-width:820px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
}
.stat-grid .stat-number{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  font-size:clamp(calc(1.8rem * var(--type-scale)), calc(4vw * var(--type-scale)), calc(2.6rem * var(--type-scale)));
  color:var(--gold);
  line-height:1;
  margin:0 0 .5rem 0;
}
.stat-grid .stat-label{
  font-size:calc(.85rem * var(--type-scale));
  line-height:1.45;
  color:#C9C2B2;
}

/* ---------- CTA / PRÓXIMO PASSO ---------- */

.cta-card{
  background:var(--ink);
  color:var(--offwhite);
  padding:2.4rem 2.2rem;
  margin-top:.6rem;
}
.cta-card p{
  color:#C9C2B2;
  font-size:calc(1rem * var(--type-scale));
  line-height:1.6;
  max-width:60ch;
  margin:0 0 1.6rem 0;
}
.cta-button{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--gold);
  color:var(--ink);
  font-weight:600;
  font-size:calc(.9rem * var(--type-scale));
  letter-spacing:.02em;
  padding:.85rem 1.5rem;
  border-radius:3px;
  text-decoration:none;
}
.cta-button:hover{ background:var(--gold-soft); }

.site-footer{
  text-align:center;
  padding:2.2rem 8vw 3vh 8vw;
  font-size:calc(.78rem * var(--type-scale));
  letter-spacing:.06em;
  color:var(--slate-paper);
}

/* ---------- RESPONSIVO GERAL ---------- */

@media (max-width:600px){
  .section{ padding:8vh 6vw; }
}