/* ============================================================
   Valorexa — Patrimônio Internacional & Sucessão Global
   Design system: base Suntera (estrutura) + Valorexa (identidade)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --papel:#EDECE8;
  --osso:#FFFFFF;
  --grafite:#1A1C1B;
  --pedra:#6B706C;
  --laranja:#DE5411;
  --laranja-forte:#C24A0E;

  --linha: rgba(26,28,27,.12);
  --linha-forte: rgba(26,28,27,.22);
  --linha-clara: rgba(237,236,232,.16);
  --linha-clara-forte: rgba(237,236,232,.30);

  --sombra-suave: 0 1px 2px rgba(26,28,27,.04), 0 8px 24px -12px rgba(26,28,27,.18);
  --sombra-laranja: 0 1px 2px rgba(222,84,17,.08), 0 10px 28px -14px rgba(222,84,17,.35);

  --fs-display-xl: clamp(2.6rem, 5.6vw, 4.7rem);
  --fs-display-l: clamp(1.9rem, 3.4vw, 2.9rem);
  --fs-display-m: 1.5rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-data: .8125rem;

  --gutter: clamp(20px, 4vw, 40px);
  --respiro: clamp(72px, 9vw, 132px);
  --maxw: 1200px;

  --r-campo: 2px;
  --r-chip: 999px;

  --ease: cubic-bezier(.19,1,.22,1);
  --dur: .5s;
}

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

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--papel);
  color: var(--grafite);
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
figure{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font: inherit; color: inherit; }
table{ border-collapse: collapse; width:100%; }

::selection{ background: var(--laranja); color: var(--osso); }

:focus{ outline:none; }
:focus-visible{
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 1px;
}

.font-display{ font-family:'Bodoni Moda', ui-serif, Georgia, serif; }
.tabular{ font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid-12{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
section{ padding-block: var(--respiro); }
.section-inner{ position:relative; }

.eyebrow{
  font-family:'Archivo', sans-serif;
  font-size: .8125rem;
  color: var(--pedra);
  letter-spacing: .01em;
}

.regua{
  width: 44px;
  height: 2px;
  background: var(--laranja);
  border:0;
  margin: 0 0 20px;
}

.medida{ max-width: 62ch; }

.dark{
  background: var(--grafite);
  color: var(--papel);
}
.dark .eyebrow{ color: rgba(237,236,232,.62); }
.dark a{ color: var(--osso); }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--grafite); color:var(--osso);
  padding: 12px 18px; z-index: 200;
}
.skip-link:focus{ left: var(--gutter); top: var(--gutter); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(237,236,232,.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex; align-items:center;
}
.brand-logo{
  height: 26px;
  width: auto;
  display:block;
}
.site-header .brand-logo{ height: 34px; }
.brand-logo-plate{
  display:inline-flex; align-items:center;
  background: var(--papel);
  border-radius: var(--r-campo);
  padding: 10px 16px;
}
.brand-logo-plate .brand-logo{ height: 42px; }
.header-actions{ display:flex; align-items:center; gap: clamp(14px, 2vw, 28px); }

.lang-switch{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--linha-forte);
  border-radius: var(--r-campo);
  padding:2px;
}
.lang-switch button{
  padding: 6px 10px;
  font-size: .8125rem;
  color: var(--pedra);
  border-radius: 1px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch button[aria-pressed="true"]{
  background: var(--grafite);
  color: var(--osso);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 24px;
  font-size: .9375rem;
  border-radius: var(--r-campo);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary{
  background: var(--laranja);
  color: var(--osso);
  position: relative;
  isolation: isolate;
}
.btn-primary:hover{ background: var(--laranja-forte); box-shadow: var(--sombra-laranja); }
.btn-primary:active{ transform: translateY(1px); }

/* Moving-border ring — único acento animado permitido fora do hero,
   ligado ao próprio botão de conversão, não decorativo solto. */
.btn-ring{ position:relative; display:inline-block; border-radius: calc(var(--r-campo) + 3px); padding:3px; }
.btn-ring::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--ring-angle, 0deg), transparent 0 60%, var(--laranja) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ring-spin 3.4s linear infinite;
  opacity: .9;
}
@keyframes ring-spin{ to{ --ring-angle: 360deg; } }
@property --ring-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@media (prefers-reduced-motion: reduce){ .btn-ring::before{ animation:none; } }

.btn-ghost{
  border-color: var(--linha-forte);
  color: var(--grafite);
  background: transparent;
}
.btn-ghost:hover{ border-color: var(--grafite); }
.dark .btn-ghost{ border-color: var(--linha-clara-forte); color: var(--osso); }
.dark .btn-ghost:hover{ border-color: var(--osso); }

.btn-arrow{ width:16px; height:16px; flex:none; transition: transform var(--dur) var(--ease); }
.btn-ghost:hover .btn-arrow{ transform: translateX(3px); }

.header-cta{ display:none; }
@media (min-width: 860px){ .header-cta{ display:inline-flex; } }

.nav-links{ display:none; align-items:center; gap: clamp(14px, 1.8vw, 26px); }
@media (min-width: 620px){ .nav-links{ display:flex; } }
.nav-link{ font-size: .9375rem; }
.nav-link:hover{ color: var(--laranja); }

.nav-toggle{ display:none; width:40px;height:40px; }
@media (max-width: 859px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: clamp(56px, 9vw, 108px);
  padding-bottom: clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--linha);
}
.hero-canvas-wrap{
  position:absolute; inset:0;
  z-index:0;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-spotlight{
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(360px 360px at var(--mx,50%) var(--my,20%), rgba(222,84,17,.10), transparent 70%);
  opacity:0;
  transition: opacity .4s ease;
}
.hero:hover .hero-spotlight{ opacity:1; }
@media (hover:none){ .hero-spotlight{ display:none; } }

.hero .container{ position:relative; z-index:1; }
.hero-grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: var(--gutter);
}
.hero-head{ grid-column: 1 / 10; }
@media (max-width: 720px){ .hero-head{ grid-column: 1 / -1; } }

/* Bandeira do Panamá — cores reais desbotadas, com balanço sutil.
   Exceção deliberada à paleta de 5 cores: ilustração isolada no hero,
   mantida discreta pela opacidade baixa do container. */
.hero-doc{
  display:none;
  position:absolute;
  top:26%; right:0;
  transform: translateY(-50%);
  width: 100%; max-width: 260px;
  opacity: .35;
  transition: opacity .3s ease;
}
.hero-doc:hover, .hero-doc:focus-within{ opacity: .46; }
@media (min-width: 980px){ .hero-doc{ display:block; } }
.hero-doc-tilt{ display:block; }
.hero-doc-svg{ display:block; width:100%; height:auto; overflow:visible; }

.hero-eyebrow{ margin-bottom: 18px; }

.hero h1{
  font-family:'Bodoni Moda', serif;
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  letter-spacing: -0.024em;
  max-width: 16ch;
}
.hero h1 em{ font-style: normal; border-bottom: 2px solid var(--laranja); }

.hero-support{
  margin-top: 26px;
  font-size: var(--fs-body-l);
  line-height:1.6;
  color: var(--grafite);
  max-width: 52ch;
}

.hero-ctas{
  margin-top: 40px;
  display:flex; align-items:center; gap: 20px; flex-wrap:wrap;
}

.modalidades{
  margin-top: clamp(40px, 6vw, 64px);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linha-forte);
}
.modalidades li{
  display:flex; align-items:center; gap:10px;
  padding: 15px clamp(8px,1.5vw,18px) 15px 0;
  font-size: .9375rem;
  color: var(--grafite);
  border-bottom: 1px solid var(--linha);
}
.modalidades li svg{ width:18px; height:18px; flex:none; color: var(--laranja); }
@media (max-width: 620px){ .modalidades{ grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Faixa de números
   ============================================================ */
.stats{ padding-block: clamp(40px, 6vw, 64px); }
.stats-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linha-forte);
  border-bottom: 1px solid var(--linha-forte);
}
.stat{
  padding: 28px clamp(16px,2vw,28px);
  border-left: 1px solid var(--linha);
}
.stat:first-child{ border-left:0; }
.stat-num{
  font-family:'Bodoni Moda', serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -0.01em;
}
.stat-label{ margin-top:6px; font-size: .8125rem; color: var(--pedra); }
@media (max-width: 720px){
  .stats-row{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
}

/* ============================================================
   A pergunta (pivô)
   ============================================================ */
.pivo{ }
.pivo-row{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "media" "p";
  row-gap: 28px;
}
.pivo-head{ grid-area: head; }
.pivo h2{
  font-family:'Bodoni Moda', serif;
  font-size: var(--fs-display-l);
  line-height:1.15;
  max-width: 20ch;
}
.pivo-p{
  grid-area: p;
  font-size: var(--fs-body-l);
  color: var(--pedra);
  max-width: 58ch;
}
.pivo .reveal-word{ opacity:.28; transition: opacity .05s linear; }
.pivo .reveal-word.is-in{ opacity:1; }
.pivo-media{
  grid-area: media;
  width: 100%;
  max-width: 300px;
}
.pivo-media .image-slot{ border-color: var(--linha-forte); }
@media (min-width: 860px){
  .pivo-row{
    grid-template-columns: 1fr min(360px, 45%);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head media" "p media";
    align-items:start;
    column-gap: clamp(32px, 6vw, 64px);
    row-gap: 22px;
  }
  .pivo-media{ max-width:none; justify-self:end; align-self:center; }
}

/* ============================================================
   Postura
   ============================================================ */
.postura .grid-12{ align-items:start; }
.postura-title{ grid-column: 1 / -1; }
.postura-title h2{
  font-family:'Bodoni Moda', serif;
  font-size: var(--fs-display-l);
  line-height:1.14;
}
.postura-body{ grid-column: 1 / -1; margin-top: 28px; }
.postura-body > p{ font-size: var(--fs-body-l); max-width: 58ch; }
.postura-list{ margin-top: 30px; border-top:1px solid var(--linha-forte); }
.postura-list li{
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
  display:grid; grid-template-columns: 28px 1fr; gap:16px;
  max-width: 58ch;
}
.postura-list .num{ color: var(--laranja); font-family:'Bodoni Moda', serif; }

@media (min-width: 900px){
  .postura-title{ grid-column: 1/5; }
  .postura-body{ grid-column: 5/13; margin-top: 0; }
}

/* ============================================================
   Sobre nós
   ============================================================ */
.sobre .grid-12{ align-items:center; }
.sobre-media{ grid-column: 1 / 13; }
.sobre-text{ grid-column: 1 / 13; margin-top: 40px; }
.sobre-text h2{
  font-family:'Bodoni Moda', serif;
  font-size: var(--fs-display-l);
  max-width: 18ch;
}
.sobre-text > p{ margin-top: 16px; font-size: var(--fs-body-l); max-width: 56ch; }
.sobre-facts{ margin-top: 28px; display:flex; flex-direction:column; gap: 16px; }
.sobre-facts li{ display:flex; gap: 12px; align-items:flex-start; font-size: .9375rem; color: var(--pedra); max-width: 52ch; }
.sobre-facts svg{ width:20px; height:20px; flex:none; margin-top:2px; color: var(--laranja); }
@media (min-width: 900px){
  .sobre-media{ grid-column: 1/7; max-width: 460px; }
  .sobre-text{ grid-column: 7/13; margin-top:0; }
}

/* ---------- Image slot (placeholder de imagem) ---------- */
.image-slot{
  position: relative;
  border: 1px solid var(--linha-forte);
  overflow:hidden;
  background: var(--osso);
}
.dark .image-slot{ border-color: var(--linha-clara-forte); }
.image-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-slot.r-16-9{ aspect-ratio: 16/9; }
.image-slot.r-4-5{ aspect-ratio: 4/5; }
.image-slot.r-3-2{ aspect-ratio: 3/2; }
.image-slot.r-1-1{ aspect-ratio: 1/1; }
.image-slot.r-3-4{ aspect-ratio: 3/4; }

.image-caption{
  margin-top: 10px;
  font-size: .75rem;
  color: var(--pedra);
}
.dark .image-caption{ color: rgba(237,236,232,.55); }

.photo-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px 20px 16px;
  background: linear-gradient(to top, rgba(26,28,27,.82), rgba(26,28,27,0));
  color: var(--osso);
}
.photo-caption strong{
  display:block;
  font-family:'Bodoni Moda', serif;
  font-size: 1.0625rem;
}
.photo-caption span{ display:block; margin-top:2px; font-size:.8125rem; opacity:.85; }

.bento-item.is-image{ padding:0; overflow:hidden; }
.bento-item.is-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   Diagnóstico — bento
   ============================================================ */
.bento{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--linha-forte);
  border: 1px solid var(--linha-forte);
}
.bento-item{
  background: var(--papel);
  padding: clamp(22px,3vw,34px);
  grid-column: span 6;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.bento-item::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 220px at var(--sx,50%) var(--sy,50%), rgba(222,84,17,.14), transparent 70%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.bento-item:hover::before{ opacity:1; }
@media (min-width: 720px){
  .bento-item{ grid-column: span 3; }
  .bento-item.is-wide{ grid-column: span 4; }
  .bento-item.is-narrow{ grid-column: span 2; }
  .bento-item.is-image{ grid-column: span 2; padding:0; }
}
.bento-item:hover{
  background: var(--osso);
  box-shadow: inset 0 0 0 1px var(--laranja);
  z-index:1;
}
.bento-item .bi-icon{
  width: 26px; height: 26px;
  color: var(--laranja);
  position:relative;
}
.bento-item h3{
  margin-top:14px;
  font-family:'Bodoni Moda', serif;
  font-size: 1.25rem;
  line-height:1.2;
  position:relative;
}
.bento-item p{
  margin-top: 10px;
  color: var(--pedra);
  font-size: .9375rem;
  max-width: 34ch;
  position:relative;
}

/* ============================================================
   Quando faz sentido
   ============================================================ */
.qualifica .grid-12{ gap: 1px; background: var(--linha-forte); border:1px solid var(--linha-forte); margin-top:48px; }
.qualifica-col{ grid-column: span 12; background: var(--papel); padding: clamp(28px,3vw,40px); }
@media (min-width:760px){ .qualifica-col{ grid-column: span 6; } }
.qualifica-col h3{ font-family:'Bodoni Moda', serif; font-size:1.4rem; }
.qualifica-col ul{ margin-top:22px; }
.qualifica-col li{
  display:grid; grid-template-columns: 22px 1fr; gap:12px;
  padding: 14px 0; border-top:1px solid var(--linha);
  font-size: .9375rem;
}
.qualifica-col li:first-child{ border-top:0; }
.qualifica-col svg{ width:18px; height:18px; margin-top:2px; }
.qualifica-sim svg{ color: var(--laranja); }
.qualifica-nao svg{ color: var(--pedra); }

/* ============================================================
   Vantagens do Panamá (faixa escura) — reaproveita o bento
   ============================================================ */
.vantagens{ border-top: 1px solid var(--linha-clara); border-bottom: 1px solid var(--linha-clara); }
.vantagens-head{ display:grid; grid-template-columns: repeat(12,1fr); gap: var(--gutter); align-items:end; }
.vantagens-text{ grid-column: 1/8; }
.vantagens-media{ grid-column: 8/13; }
.vantagens-media .image-slot{ border-color: var(--linha-clara-forte); }
.vantagens-intro{ margin-top:16px; color: rgba(237,236,232,.7); }
@media (max-width: 900px){
  .vantagens-text, .vantagens-media{ grid-column: 1/-1; }
  .vantagens-media{ margin-top:32px; }
}

/* Tilt 3D (Aceternity "3D Card") — inclinação sutil ligada ao cursor */
.tilt-card{
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.tilt-card img{ transform: translateZ(0); }

/* Fotos do Panamá — preto e branco, colorem ao hover/foco */
.photo-mono img{ filter: grayscale(50%) saturate(1); transition: filter .6s ease; }
.photo-mono:hover img, .photo-mono:focus-within img{ filter: grayscale(0%); }

/* Colorização controlada por scroll (não hover) — ver stickyScrollPhoto em main.js */
.scroll-photo{ filter: grayscale(100%); }

/* ============================================================
   CTA intermediário — reforço de conversão entre seções
   ============================================================ */
.cta-strip{ padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); }
.cta-strip-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 20px 32px;
}
.cta-strip-text{
  font-family:'Bodoni Moda', serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  max-width: 34ch;
}
.dark .cta-strip{ border-color: var(--linha-clara); }

/* Focus Cards — ao passar o mouse em um card do bento, os outros esmaecem */
.bento.has-focus .bento-item{ opacity: .45; filter: saturate(.7); transition: opacity .3s ease, filter .3s ease; }
.bento.has-focus .bento-item.is-focused{ opacity: 1; filter:none; }
.bento-item{ transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity .3s ease, filter .3s ease; }

/* ============================================================
   Sticky Scroll Reveal — Como funciona, estilo Aceternity
   ============================================================ */
.sticky-scroll{
  margin-top: 56px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.ss-content{ display:flex; flex-direction:column; }
.ss-item{
  min-height: 0;
  display:flex; flex-direction:column; justify-content:center;
  padding-block: 32px;
  border-bottom: 1px solid var(--linha);
  opacity: .55;
  transition: opacity .4s ease;
}
.ss-item:first-child{ padding-top:0; }
.ss-item:last-child{ border-bottom:0; padding-bottom:0; }
.ss-item.is-active{ opacity: 1; }
.ss-item .processo-num{ margin-bottom:20px; }
.ss-item h3{ font-family:'Bodoni Moda', serif; font-size:1.5rem; }
.ss-item p{ margin-top:10px; color:var(--pedra); max-width:52ch; }
.ss-item .processo-dur{ display:inline-block; margin-top:14px; font-size:.8125rem; color:var(--laranja); border-top:1px solid var(--linha); padding-top:8px; }

.ss-sticky{
  position: sticky;
  top: 116px;
  height: 380px;
  border: 1px solid var(--linha-forte);
  background: var(--grafite);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ss-visual{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  opacity:0; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  position:absolute;
}
.ss-visual.is-active{ opacity:1; transform:none; }
.ss-visual .ss-icon-ring{
  width:88px; height:88px; border-radius:50%;
  border:1px solid var(--linha-clara-forte);
  display:flex; align-items:center; justify-content:center;
}
.ss-visual .ss-icon-ring svg{ width:36px; height:36px; color: var(--laranja); }
.ss-visual .ss-step-num{ font-family:'Bodoni Moda', serif; font-size:1.5rem; color: var(--osso); }
.ss-visual .ss-step-label{ font-size:.875rem; color: rgba(237,236,232,.65); text-align:center; max-width:26ch; }

@media (min-width: 860px){
  .sticky-scroll{ grid-template-columns: 1.1fr .9fr; align-items:start; }
  .ss-item{ min-height: 62vh; padding-block: 24px; border-bottom:0; opacity:.35; }
  .ss-item:last-child{ min-height: 40vh; padding-bottom:24px; }
}

/* Sticky visual não faz sentido empilhado no mobile — vira lista numerada simples */
@media (max-width: 859px){
  .ss-sticky{ display:none; }
}

.dark .bento{ background: var(--linha-clara); border-color: var(--linha-clara); }
.dark .bento-item{ background: var(--grafite); }
.dark .bento-item h3{ color: var(--osso); }
.dark .bento-item p{ color: rgba(237,236,232,.68); }
.dark .bento-item:hover{ background: rgba(255,255,255,.03); }

/* ============================================================
   Como funciona
   ============================================================ */
.processo-list{
  margin-top: 56px;
  position: relative;
}
.processo-list::before{
  content:"";
  position:absolute; left: 27px; top:10px; bottom:10px;
  width:1px; background: var(--linha-forte);
}
.processo-list .linha-progresso{
  position:absolute; left:27px; top:10px; width:1px; height:0;
  background: var(--laranja);
}
.processo-item{
  position:relative;
  display:grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding-bottom: 44px;
}
.processo-item:last-child{ padding-bottom:0; }
.processo-num{
  width:56px; height:56px; border-radius:50%;
  border:1px solid var(--linha-forte);
  background: var(--papel);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bodoni Moda', serif; font-size:1.125rem;
  position:relative; z-index:1;
}
.processo-body h3{ font-family:'Bodoni Moda', serif; font-size:1.3rem; }
.processo-body p{ margin-top:8px; color:var(--pedra); max-width:58ch; }
.processo-dur{
  display:inline-block; margin-top:12px;
  font-size:.8125rem; color: var(--laranja);
  border-top: 1px solid var(--linha); padding-top:8px;
}

/* ============================================================
   Perguntas
   ============================================================ */
.faq-list{ margin-top: 40px; border-top: 1px solid var(--linha-forte); }
.faq-item{ border-bottom: 1px solid var(--linha-forte); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding: 24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size: var(--fs-body-l);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{
  flex:none; width:20px; height:20px; position:relative;
}
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; background: var(--grafite);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-plus::before{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.faq-plus::after{ top:0; left:50%; width:1px; height:100%; transform:translateX(-50%); }
.faq-item[open] .faq-plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-answer{
  overflow:hidden;
  height:0;
}
.faq-answer-inner{
  padding-bottom: 26px;
  color: var(--pedra);
  max-width: 62ch;
  font-size: var(--fs-body);
}

/* ============================================================
   Conversão
   ============================================================ */
.conversao{ border-top:1px solid var(--linha-clara); }
.conversao .grid-12{ gap: var(--gutter); }
.conversao-intro{ grid-column: 1/13; margin-bottom: 40px; }
.conversao-intro h2{ font-family:'Bodoni Moda', serif; font-size: var(--fs-display-l); max-width:18ch; }
.conversao-intro p{ margin-top:16px; color: rgba(237,236,232,.7); max-width:58ch; }

.conversao-form-col{ grid-column: 1/8; }
.conversao-side{ grid-column: 8/13; }
@media (max-width: 900px){
  .conversao-form-col, .conversao-side{ grid-column: 1/-1; }
  .conversao-side{ margin-top:40px; }
}

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom:22px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-size:.8125rem; color: rgba(237,236,232,.65); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%;
  background: rgba(237,236,232,.05);
  border:1px solid var(--linha-clara-forte);
  border-radius: var(--r-campo);
  padding: 13px 14px;
  color: var(--osso);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(237,236,232,.35); }
.field select{
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23EDECE8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.field select option{ color: var(--grafite); background: var(--osso); }
.field textarea{ resize: vertical; min-height:88px; }
.field-legend{ font-size:.8125rem; color: rgba(237,236,232,.65); margin-bottom:10px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-row label{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--linha-clara-forte);
  border-radius: var(--r-campo);
  padding: 10px 14px;
  font-size: .875rem;
  color: rgba(237,236,232,.85);
  cursor:pointer;
}
.radio-row input{ accent-color: var(--laranja); }

.form-note{ margin-top: 18px; font-size:.75rem; color: rgba(237,236,232,.5); max-width:52ch; }

.form-success{
  border:1px solid var(--linha-clara-forte);
  padding: clamp(28px,4vw,44px);
  text-align:left;
}
.form-success h3{ font-family:'Bodoni Moda', serif; font-size:1.5rem; }
.form-success p{ margin-top:12px; color: rgba(237,236,232,.75); max-width:52ch; }
.form-success[hidden]{ display:none; }

.side-card{ border:1px solid var(--linha-clara-forte); overflow:hidden; }
.side-card .image-slot{ border:0; border-bottom:1px solid var(--linha-clara-forte); }
.side-card-body{ padding: clamp(24px,3vw,34px); }
.side-card h3{ font-family:'Bodoni Moda', serif; font-size:1.25rem; }
.side-card p{ margin-top:10px; color: rgba(237,236,232,.7); font-size:.9375rem; }
.side-wa{
  margin-top:22px; display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--linha-clara-forte);
  border-radius: var(--r-campo);
  padding: 14px 18px;
  width:100%;
}
.side-wa svg{ flex:none; width:22px;height:22px; }
.side-wa strong{ display:block; font-size:.9375rem; }
.side-wa span{ display:block; font-size:.8125rem; color: rgba(237,236,232,.6); }
.side-prazo{ margin-top:16px; font-size:.8125rem; color: rgba(237,236,232,.55); }

/* ============================================================
   Rodapé
   ============================================================ */
.site-footer{ padding-block: clamp(48px,6vw,72px); }
.footer-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: var(--gutter); }
.footer-brand{ grid-column: 1/5; }
.footer-brand .brand{ margin-bottom: 14px; }
.footer-disclaimer{ grid-column: 5/13; }
.footer-disclaimer p{ color: rgba(237,236,232,.62); font-size:.875rem; max-width:62ch; }
.footer-disclaimer p + p{ margin-top:12px; }
@media (max-width:760px){
  .footer-brand, .footer-disclaimer{ grid-column: 1/-1; }
  .footer-disclaimer{ margin-top:24px; }
}
.footer-meta{
  margin-top: 40px; padding-top:24px; border-top:1px solid var(--linha-clara);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.75rem; color: rgba(237,236,232,.5);
}
@media (max-width: 640px){
  /* Reserva espaço para o botão flutuante do WhatsApp não cobrir o texto */
  .footer-meta{ padding-right: 76px; }
}

/* ============================================================
   WhatsApp flutuante
   ============================================================ */
.wa-float{
  position: fixed;
  right: 20px; bottom: 22px;
  z-index: 150;
  display:inline-flex; align-items:center; gap:10px;
  background: var(--grafite); color: var(--osso);
  border-radius: var(--r-chip);
  padding: 14px 16px;
  min-width:56px; min-height:56px;
  box-shadow: var(--sombra-suave);
  opacity:0; transform: translateY(14px) scale(.96);
  pointer-events:none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
}
.wa-float.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover, .wa-float:focus-visible{ background: var(--laranja); }
.wa-float.is-collapsed{ opacity:0; transform: translateY(14px) scale(.96); pointer-events:none; }
.wa-float svg{ width:24px; height:24px; flex:none; }
.wa-float span{ font-size:.875rem; white-space:nowrap; }
@media (max-width:900px){ .wa-float span{ display:none; } .wa-float{ padding:14px; } }

/* ============================================================
   Utilities
   ============================================================ */
.visually-hidden{
  position:absolute !important; width:1px;height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
[data-i18n] .n{ font-variant-numeric: tabular-nums; }