@charset "UTF-8";
/* =====================================================================
   LIGA PATRIOTA CONSERVADORA — v2 "Documento Cívico"
   Direção: heráldica impressa. Referências de cédula, diploma e brasão.
   Nada de card genérico: os blocos têm canto chanfrado como medalha,
   as seções são numeradas em algarismo romano como artigos de estatuto,
   e a textura de guilhochê + grão tira o aspecto "chapado digital".
   ===================================================================== */

/* ===================== TOKENS ===================== */
:root{
  --ink-950:#03080f;
  --navy-950:#050d1a;
  --navy-900:#081426;
  --navy-800:#0b1c33;
  --navy-700:#102a4c;
  --navy-glass:rgba(13,32,58,0.55);

  --gold-050:#fbf3d5;
  --gold-100:#f3e3b0;
  --gold-300:#e9c766;
  --gold-500:#c9a227;
  --gold-700:#8e6f16;
  --gold-line:rgba(201,162,39,0.34);
  --gold-line-soft:rgba(201,162,39,0.16);

  --green-700:#0a4b2e;
  --green-500:#147a4c;

  --parchment:#f4f1e8;
  --parchment-soft:rgba(244,241,232,0.74);
  --parchment-mute:rgba(244,241,232,0.52);

  --font-display:'Cinzel', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-label:'Barlow Condensed', 'Arial Narrow', sans-serif;

  --container:1220px;
  --gutter:clamp(20px, 5vw, 48px);
  --chamfer:14px;

  --ease-out:cubic-bezier(.16,.84,.44,1);
}

/* ===================== BASE ===================== */
*,*::before,*::after{ box-sizing:border-box; min-width:0; }

html{
  scroll-behavior:smooth;
  max-width:100%;
  /* clip, não hidden. "overflow-x:hidden" no html JUNTO com o body transfere a
     rolagem para dentro do body: window.scrollY trava em 0 e leva junto o
     IntersectionObserver, a barra de progresso, o CTA fixo e o parallax.
     "clip" contém o transbordo horizontal sem criar contêiner de rolagem. */
  overflow-x:clip;
  /* Ancoragem folgada: o cabeçalho fixo não corta o título da seção. */
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--navy-950);
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
p{ margin:0 0 1.15em; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.16;
  margin:0 0 .5em;
  letter-spacing:.005em;
}

::selection{ background:var(--gold-500); color:var(--navy-950); }

:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:4px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:16px; top:-70px; z-index:400;
  background:var(--gold-300); color:var(--navy-950);
  padding:12px 20px; font-family:var(--font-label);
  font-size:.95rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:14px; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.gold{ color:var(--gold-300); }

/* ===================== TEXTURAS DE FUNDO =====================
   Grão + guilhochê. São o que separa "fundo escuro" de "papel impresso".
   Ambos ficam fixos, atrás de tudo, sem capturar clique.               */

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.guilloche{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.22;
  background:
    repeating-radial-gradient(circle at 82% 8%,
      transparent 0 46px, rgba(201,162,39,.09) 46px 47px),
    repeating-radial-gradient(circle at 8% 92%,
      transparent 0 62px, rgba(20,122,76,.07) 62px 63px);
  mask-image:radial-gradient(ellipse 88% 68% at 50% 42%, transparent 30%, #000 96%);
}

/* ===================== FAIXAS DE MULTIDÃO =====================
   Fundo ambiente, nunca protagonista: dessaturado, com máscara nas
   quatro bordas para dissolver na página e opacidade baixa.          */

.crowd{
  position:absolute; left:0; right:0; z-index:0;
  pointer-events:none; overflow:hidden;
  height:clamp(260px, 34vw, 460px);
}
.crowd::after{
  content:''; position:absolute; inset:0;
  background-image:var(--crowd-src);
  background-size:cover;
  background-position:center 62%;
  opacity:var(--crowd-opacity, .30);
  filter:saturate(.62) contrast(1.06) brightness(.86);
  transform:translate3d(0, var(--crowd-shift, 0px), 0) scale(1.08);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 46%, #000 62%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.crowd--top{ top:0; }
.crowd--bottom{ bottom:0; }
.crowd--01{ --crowd-src:url('../img/crowd-01.jpg'); }
.crowd--02{ --crowd-src:url('../img/crowd-02.jpg'); }
.crowd--flip::after{ transform:translate3d(0, var(--crowd-shift, 0px), 0) scale(1.08) scaleX(-1); }

/* ===================== PROGRESSO DE LEITURA ===================== */
.reading-bar{
  position:fixed; top:0; left:0; z-index:300;
  height:2px; width:100%;
  transform:scaleX(var(--progress, 0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold-700), var(--gold-300) 60%, var(--gold-050));
  box-shadow:0 0 14px rgba(233,199,102,.5);
}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:16px 0;
  transition:background .35s var(--ease-out), padding .35s var(--ease-out), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,13,26,.9);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--gold-line-soft);
  padding:10px 0;
}
.header-inner{ display:flex; align-items:center; gap:22px; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-emblem{
  width:46px; height:46px; object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition:transform .5s var(--ease-out);
}
.brand:hover .brand-emblem{ transform:rotate(-8deg) scale(1.06); }
.brand-name{
  font-family:var(--font-display); font-weight:600;
  font-size:.8rem; letter-spacing:.14em; line-height:1.3;
  color:var(--gold-100);
}
.brand-name em{
  display:block; font-style:normal; font-family:var(--font-label);
  font-size:.72rem; letter-spacing:.34em; color:var(--parchment-mute);
}

.main-nav{ display:flex; gap:30px; }
.main-nav a{
  font-family:var(--font-label);
  font-size:1rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--parchment-soft); position:relative; padding:6px 0;
  transition:color .25s;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-300);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover{ color:var(--gold-100); }
.main-nav a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav-toggle{
  display:none; flex-direction:column; gap:6px;
  background:none; border:0; cursor:pointer; padding:10px;
}
.nav-toggle span{ width:24px; height:1.5px; background:var(--gold-300); display:block; transition:transform .3s var(--ease-out), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ===================== BOTÕES =====================
   Chanfro em vez de raio: a silhueta lembra placa e medalha.          */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px;
  font-family:var(--font-label);
  font-size:1.02rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  text-align:center; cursor:pointer; border:0;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s, background .3s;
}
.btn-gold{
  background:linear-gradient(150deg, var(--gold-050), var(--gold-300) 42%, var(--gold-500) 100%);
  color:var(--navy-950);
  box-shadow:0 10px 30px -14px rgba(233,199,102,.85);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -14px rgba(233,199,102,.95); }
.btn-outline{
  background:transparent; color:var(--gold-100);
  box-shadow:inset 0 0 0 1px var(--gold-line);
}
.btn-outline:hover{ background:rgba(201,162,39,.1); color:var(--gold-050); transform:translateY(-2px); }
.btn-lg{ padding:18px 42px; font-size:1.08rem; }
.btn-header{ padding:12px 24px; font-size:.92rem; }

/* ===================== HERO ===================== */
.hero{
  position:relative; overflow:hidden;
  min-height:min(940px, 100svh);
  display:flex; align-items:center;
  padding:190px 0 150px;
  z-index:1;
}
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--ink-950); }
.hero-video, .hero-media > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  opacity:.55;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 74% 62% at 50% 26%, rgba(5,13,26,.28) 0%, rgba(5,13,26,.74) 60%, var(--navy-950) 100%),
    linear-gradient(180deg, rgba(3,8,15,.72) 0%, rgba(5,13,26,.58) 38%, var(--navy-950) 100%);
}
/* Fio verde-amarelo, referência da bandeira sem pintar a tela inteira. */
.hero-overlay::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--green-500) 18%, var(--gold-500) 50%, var(--green-500) 82%, transparent);
  opacity:.5;
}
.hero-inner{ position:relative; z-index:2; }
.hero-text{ max-width:900px; }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-label);
  font-size:1rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-300); margin:0 0 22px;
}
.eyebrow::before{
  content:''; width:clamp(28px, 6vw, 62px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500));
}

.hero-text h1{
  font-size:clamp(2.4rem, 6.2vw, 4.6rem);
  line-height:1.06;
  font-weight:700;
  color:var(--parchment);
  text-shadow:0 4px 34px rgba(0,0,0,.5);
  margin-bottom:.42em;
}
.hero-text h1 .line{ display:block; }
/* Segunda linha em dourado metálico: hierarquia dentro do próprio título. */
.hero-text h1 .accent{
  color:transparent;
  background:linear-gradient(170deg, var(--gold-050), var(--gold-300) 46%, var(--gold-700));
  -webkit-background-clip:text; background-clip:text;
}
.hero-text .lead{
  font-size:clamp(1.02rem, 1.5vw, 1.2rem);
  color:var(--parchment-soft);
  max-width:640px; margin-bottom:36px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:22px; }
.microcopy{
  font-family:var(--font-label);
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--parchment-mute); margin:0;
}

.scroll-cue{
  position:absolute; left:50%; bottom:34px; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-label); font-size:.82rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--parchment-mute);
}
.scroll-cue span::after{
  content:''; display:block; width:1px; height:46px; margin:10px auto 0;
  background:linear-gradient(180deg, var(--gold-500), transparent);
  animation:cue 2.6s var(--ease-out) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%{ transform:scaleY(0); opacity:0; }
  40%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ===================== SEÇÕES ===================== */
.section{ position:relative; padding:clamp(84px, 11vw, 148px) 0; z-index:1; }
.section-alt{ background:linear-gradient(180deg, var(--navy-900), var(--navy-800) 55%, var(--navy-900)); }

.section-head{ max-width:780px; margin:0 0 clamp(44px, 6vw, 76px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::after{
  content:''; width:clamp(28px, 6vw, 62px); height:1px;
  background:linear-gradient(90deg, var(--gold-500), transparent);
}
.section-head h2{
  font-size:clamp(1.8rem, 3.6vw, 2.9rem);
  color:var(--parchment);
}

/* Algarismo romano: numera a seção como artigo de documento. */
.numeral{
  position:absolute; top:clamp(30px, 5vw, 64px); right:var(--gutter);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(4.5rem, 13vw, 11rem); line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,162,39,.2);
  pointer-events:none; user-select:none; z-index:0;
}

/* Régua dupla: uma linha grossa curta e outra fina longa. */
.rule{ display:flex; align-items:center; gap:14px; margin:0 0 30px; }
.rule::before{ content:''; width:56px; height:2px; background:var(--gold-500); }
.rule::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--gold-line), transparent); }

.divider{ position:relative; display:flex; align-items:center; justify-content:center; padding:6px 0; z-index:1; }
.divider::before,.divider::after{
  content:''; flex:1; max-width:300px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.divider span{ margin:0 18px; color:var(--gold-500); font-size:.85rem; letter-spacing:.4em; }

/* ===================== QUEM SOMOS ===================== */
.about-grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(36px, 6vw, 78px); align-items:start;
}
.about-text{ font-size:1.06rem; color:var(--parchment-soft); }
.about-text strong{ color:var(--gold-100); font-weight:600; }
/* Capitular: abre o texto como página de documento. */
.about-text > p:first-of-type::first-letter{
  float:left; font-family:var(--font-display); font-weight:700;
  font-size:4.1rem; line-height:.82; margin:6px 14px 0 0;
  color:var(--gold-300);
}

.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pillar{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:30px 14px 26px;
  background:linear-gradient(180deg, rgba(201,162,39,.07), rgba(5,13,26,.2));
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  font-family:var(--font-display); font-size:.98rem; letter-spacing:.16em;
  color:var(--gold-100);
  transition:transform .4s var(--ease-out), background .4s;
}
.pillar:hover{ transform:translateY(-5px); background:linear-gradient(180deg, rgba(201,162,39,.14), rgba(5,13,26,.2)); }
.pillar-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--gold-300); }
.pillar-icon svg{ width:30px; height:30px; }

.badge-line{
  font-family:var(--font-label);
  font-size:.98rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--parchment-mute); text-align:center; margin:clamp(36px, 5vw, 60px) 0 0;
}

/* ===================== MANIFESTO (faixa full-bleed) ===================== */
.manifesto{
  position:relative; overflow:hidden; z-index:1;
  padding:clamp(90px, 12vw, 160px) 0;
  background:var(--ink-950);
  border-top:1px solid var(--gold-line-soft);
  border-bottom:1px solid var(--gold-line-soft);
}
.manifesto .crowd{ height:100%; top:0; }
.manifesto-inner{ position:relative; z-index:2; text-align:center; max-width:960px; margin:0 auto; }
.manifesto blockquote{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem, 4.2vw, 3.1rem); line-height:1.22;
  color:var(--parchment); text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.manifesto cite{
  display:block; margin-top:26px; font-style:normal;
  font-family:var(--font-label); font-size:1rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-300);
}

/* ===================== MOLDURA CHANFRADA =====================
   box-shadow inset é cortado pelo clip-path e deixa os cantos abertos.
   Aqui a moldura é desenhada por um pseudo com o MESMO clip-path e uma
   máscara que preserva só 1px de borda: o fio dourado acompanha o
   chanfro em toda a volta.                                            */
.edge, .card, .pillar, .pillar-card, .cta-card{ position:relative; }
.edge::before, .card::before, .pillar::before, .pillar-card::before, .cta-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  padding:1px; pointer-events:none;
  background:linear-gradient(155deg, rgba(201,162,39,.62), rgba(201,162,39,.26) 45%, rgba(201,162,39,.52));
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:background .45s var(--ease-out);
}
.edge > *, .card > *, .pillar > *, .pillar-card > *, .cta-card > *{ position:relative; z-index:1; }
.edge:hover::before, .card:hover::before, .pillar:hover::before, .pillar-card:hover::before{
  background:linear-gradient(155deg, var(--gold-300), rgba(201,162,39,.3) 45%, var(--gold-500));
}

/* ===================== CARDS ===================== */
.cards-grid{ display:grid; gap:20px; }
.cards-grid.four{ grid-template-columns:repeat(4,1fr); }
.cards-grid.three{ grid-template-columns:repeat(3,1fr); }

.card{
  position:relative; padding:34px 28px 32px;
  background:var(--navy-glass);
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .45s;
}
.card:hover{ transform:translateY(-7px); background:rgba(16,42,76,.62); }
.card-index{
  display:block; font-family:var(--font-label);
  font-size:.92rem; letter-spacing:.3em; color:var(--gold-500); margin-bottom:16px;
}
.card h3{ font-size:1.12rem; color:var(--gold-100); letter-spacing:.03em; }
.card p{ font-size:.98rem; color:var(--parchment-soft); margin:0; }

/* ===================== BENEFÍCIOS ===================== */
.benefits-list{ max-width:820px; display:grid; gap:2px; }
.benefits-list li{
  position:relative; padding:20px 20px 20px 62px;
  border-bottom:1px solid var(--gold-line-soft);
  color:var(--parchment-soft); font-size:1.04rem;
  transition:background .35s, padding-left .35s var(--ease-out);
}
.benefits-list li:first-child{ border-top:1px solid var(--gold-line-soft); }
.benefits-list li::before{
  content:'✦'; position:absolute; left:24px; top:20px;
  color:var(--gold-500); font-size:.9rem;
  transition:color .35s, transform .35s var(--ease-out);
}
.benefits-list li:hover{ background:rgba(201,162,39,.05); padding-left:70px; }
.benefits-list li:hover::before{ color:var(--gold-300); transform:rotate(90deg); }

.statement{
  margin:clamp(40px, 6vw, 64px) 0 0;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.25rem, 2.6vw, 1.85rem);
  color:var(--gold-100); text-align:center; letter-spacing:.02em;
}

/* ===================== ESTRUTURA / STATS ===================== */
.structure{ position:relative; overflow:hidden; }
/* Brasão girando muito devagar ao fundo: presença, não distração. */
.seal-bg{
  position:absolute; top:50%; left:50%; z-index:0;
  width:min(720px, 92vw); aspect-ratio:1; margin:-1px;
  translate:-50% -50%;
  background:url('../img/brasao-web.png') center/contain no-repeat;
  opacity:.05; pointer-events:none;
  animation:seal 90s linear infinite;
}
@keyframes seal{ to{ rotate:360deg; } }

.stats-bar{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-bottom:clamp(44px, 6vw, 68px);
}
.stat{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:30px 18px; text-align:center; border-left:1px solid var(--gold-line-soft);
}
.stat:first-child{ border-left:0; }
.stat-number{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem, 2.6vw, 2rem); color:var(--gold-300); margin-bottom:10px;
  letter-spacing:.02em; text-wrap:balance; min-height:2.2em;
  display:flex; align-items:center; justify-content:center;
}
.stat-label{
  font-family:var(--font-label); font-size:.98rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-mute);
}

.pillar-card{
  position:relative; z-index:1;
  padding:36px 28px; text-align:center;
  background:var(--navy-glass);
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:transform .45s var(--ease-out), box-shadow .45s;
}
.pillar-card:hover{ transform:translateY(-7px); }
.pillar-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; margin-bottom:18px;
  color:var(--gold-300);
  box-shadow:inset 0 0 0 1px var(--gold-line);
  background:linear-gradient(180deg, rgba(201,162,39,.12), transparent);
  clip-path:polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.pillar-card-icon svg{ width:26px; height:26px; }
.pillar-card h3{ font-size:1.06rem; color:var(--gold-100); }
.pillar-card p{ font-size:.96rem; color:var(--parchment-soft); margin:0; }

/* ===================== OBJEÇÕES (formato documento) ===================== */
.objections{ max-width:940px; }
.objection{
  display:grid; grid-template-columns:minmax(200px, 1fr) 1.5fr;
  gap:clamp(14px, 3vw, 44px);
  padding:28px 0;
  border-bottom:1px solid var(--gold-line-soft);
}
.objection:first-child{ border-top:1px solid var(--gold-line-soft); }
.objection h3{
  margin:0; font-size:1.06rem; color:var(--gold-100);
  font-style:italic; font-weight:400; letter-spacing:.01em;
}
.objection p{ margin:0; color:var(--parchment-soft); font-size:1rem; }

/* ===================== CTA ===================== */
.section-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--navy-900), var(--ink-950));
}
.cta-inner{ position:relative; z-index:2; text-align:center; }
.cta-card{
  --chamfer:22px;
  max-width:620px; margin:0 auto 26px; text-align:left;
  padding:clamp(30px, 5vw, 46px);
  background:rgba(8,20,38,.72);
  backdrop-filter:blur(6px);
  clip-path:polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.cta-card .benefits-list{ margin-bottom:34px; }
.cta-card .benefits-list li{ padding:16px 0 16px 40px; font-size:1rem; }
.cta-card .benefits-list li::before{ left:6px; top:16px; }
.cta-card .benefits-list li:hover{ padding-left:46px; background:transparent; }
.btn-form{ width:100%; }
.form-security{
  font-family:var(--font-label); font-size:.98rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-mute); text-align:center; margin:18px 0 0;
}
.cta-alt{ color:var(--parchment-mute); font-size:.98rem; }
.cta-alt a{ color:var(--gold-300); border-bottom:1px solid var(--gold-line); padding-bottom:2px; }
.cta-alt a:hover{ color:var(--gold-050); border-color:var(--gold-300); }

/* ===================== FAQ (índice de documento) ===================== */
.faq-list{ max-width:880px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--gold-line-soft);
  transition:background .35s;
}
.faq-item:first-child{ border-top:1px solid var(--gold-line-soft); }
.faq-item[open]{ background:rgba(201,162,39,.04); }
.faq-item summary{
  cursor:pointer; padding:24px 16px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--font-display); font-size:1.02rem; font-weight:600;
  color:var(--gold-100); transition:color .3s;
}
.faq-item summary:hover{ color:var(--gold-300); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; flex:none; width:13px; height:13px;
  border-right:1px solid var(--gold-300); border-bottom:1px solid var(--gold-300);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .35s var(--ease-out);
}
.faq-item[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq-item p{
  margin:0; padding:0 16px 26px; max-width:74ch;
  color:var(--parchment-soft); font-size:1rem;
  animation:faq .45s var(--ease-out) both;
}
@keyframes faq{ from{ opacity:0; transform:translateY(-8px); } }

/* ===================== FOOTER ===================== */
.site-footer{
  position:relative; overflow:hidden; z-index:1;
  background:var(--ink-950);
  padding:clamp(64px, 8vw, 96px) 0 0;
  border-top:1px solid var(--gold-line-soft);
}
.footer-grid{
  position:relative; z-index:2;
  /* 3 colunas: marca + navegação + contato. Era 4 enquanto existia a coluna
     "Redes"; ao recolocá-la, voltar para 1.5fr 1fr 1fr 1fr. */
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr;
  gap:36px; padding-bottom:clamp(44px, 6vw, 64px);
}
.footer-brand{ display:flex; align-items:center; gap:16px; }
.footer-brand img{ width:64px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.6)); }
.footer-brand p{
  font-family:var(--font-display); font-size:.88rem; letter-spacing:.12em;
  color:var(--gold-100); margin:0;
}
.footer-brand span{
  display:block; margin-top:6px;
  font-family:var(--font-label); font-size:.9rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parchment-mute);
}
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col h4{
  font-family:var(--font-label); font-size:.94rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-300);
  margin:0 0 6px;
}
.footer-col a, .footer-col span{ font-size:.96rem; color:var(--parchment-soft); transition:color .25s; }
.footer-col a:hover{ color:var(--gold-300); }
.footer-bottom{
  position:relative; z-index:2;
  border-top:1px solid rgba(244,241,232,.07);
  padding:22px var(--gutter); text-align:center;
}
.footer-bottom p{
  margin:0; font-family:var(--font-label);
  font-size:.92rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,241,232,.42);
}

/* ===================== WHATSAPP + CTA MÓVEL ===================== */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:210;
  width:56px; height:56px;
  background:var(--green-500); color:#fff;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:transform .3s var(--ease-out);
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); }

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:205;
  display:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(5,13,26,.86), var(--ink-950));
  border-top:1px solid var(--gold-line);
  backdrop-filter:blur(10px);
  transform:translateY(110%);
  transition:transform .45s var(--ease-out);
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; }

/* ===================== ÍNDICE LATERAL ===================== */
.side-index{
  position:fixed; right:22px; top:50%; translate:0 -50%; z-index:150;
  display:flex; flex-direction:column; gap:14px; align-items:flex-end;
}
.side-index a{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:.76rem; letter-spacing:.1em;
  color:rgba(244,241,232,.3); transition:color .3s;
}
.side-index a::after{ content:''; width:16px; height:1px; background:currentColor; transition:width .35s var(--ease-out); }
.side-index a:hover, .side-index a.is-active{ color:var(--gold-300); }
.side-index a.is-active::after{ width:30px; }

/* ===================== REVEAL =====================
   Cortina em vez do fade-up padrão: o conteúdo é descoberto,
   não empurrado.                                                      */
.js .reveal{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translateY(14px);
  transition:opacity .9s var(--ease-out), clip-path 1.05s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js .reveal.is-visible{ opacity:1; clip-path:inset(0 0 0 0); transform:none; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1100px){
  .side-index{ display:none; }
}

@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; }
  .cards-grid.four{ grid-template-columns:repeat(2,1fr); }
  .cards-grid.three{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:1fr; gap:0; }
  .stat{ border-left:0; border-top:1px solid var(--gold-line-soft); }
  .stat:first-child{ border-top:0; }
  .objection{ grid-template-columns:1fr; gap:10px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; inset:74px 14px auto 14px; z-index:99;
    flex-direction:column; gap:0;
    background:rgba(3,8,15,.97);
    box-shadow:inset 0 0 0 1px var(--gold-line);
    padding:10px;
    clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ padding:16px 14px; border-bottom:1px solid rgba(244,241,232,.07); }
  .main-nav a:last-child{ border-bottom:0; }
  .nav-toggle{ display:flex; }
  .btn-header{ display:none; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .cards-grid.four{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding:150px 0 120px; min-height:0; }
  .scroll-cue{ display:none; }
  .sticky-cta{ display:block; }
  .whatsapp-float{ bottom:86px; }
  .about-text > p:first-of-type::first-letter{ font-size:3.2rem; }
}

/* ===================== MOVIMENTO REDUZIDO =====================
   Quem pede menos movimento recebe a página inteira, estática.        */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Precisa bater a especificidade de ".js .reveal", senão quem pede menos
     movimento recebe uma página em branco em vez de uma página estática. */
  .js .reveal, .reveal{ opacity:1 !important; clip-path:none !important; transform:none !important; }
  .crowd::after{ transform:none !important; }
  .seal-bg{ animation:none; }
}