/* =====================================================================
   APROA — Landing Page
   Paleta, tipografia e componentes. HTML/CSS/JS puros, sem framework.
   ===================================================================== */

:root{
  --navy:        #002850;   /* dominante */
  --navy-deep:   #001B38;   /* rodapé / navy escuro */
  --gold:        #C69648;   /* dourado acento (elementos gráficos) */
  --gold-text:   #D4AB6E;   /* dourado claro — texto sobre navy (AA em navy) */
  --blue:        #1A86DC;   /* só dentro do símbolo */
  --ice:         #F2F5F8;   /* fundo de seção clara */
  --graphite:    #1F2A33;   /* corpo de texto */
  --muted:       #5F6E77;   /* cinza secundário (ajustado p/ contraste AA) */
  --muted-navy:  #A9BBCC;   /* secundário sobre navy */
  --white:       #FFFFFF;
  --line-ice:    #C6D0DA;   /* fios sobre claro */

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 40px);

  --ff-title: "Cinzel", Georgia, serif;
  --ff-body:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------- reset / base ------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-weight:400;
  color:var(--graphite);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0 0 .5em; }

/* Cinzel só em títulos, números e marca — nunca em corpo */
h1,h2,h3,.stat-num,.step-num{
  font-family:var(--ff-title);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.18;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy-deep); padding:10px 16px;
  font-weight:700; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

/* ------------------------- layout ------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wrap.narrow{ max-width:820px; }

.section{ padding:clamp(56px, 8vw, 104px) 0; position:relative; }
.section-navy{ background:var(--navy); color:var(--white); }
.section-ice{ background:var(--ice); color:var(--graphite); }

/* bússola marca d'água em seções escuras (6–8% opacidade) */
.section-navy::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("img/marca/simbolo-negativo.webp") no-repeat;
  background-position:right -80px top -60px;
  background-size:min(46vw, 460px);
  opacity:.06;
}
.hero::after{ background-position:right -60px center; background-size:min(60vw, 620px); opacity:.07; }

/* fio dourado fino entre seções (alternância de ritmo) */
.section-navy + .section-ice,
.section-ice + .section-navy{ border-top:1px solid rgba(198,150,72,.55); }

/* ------------------------- tipografia utilitária ------------------------- */
.eyebrow{
  font-family:var(--ff-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.72rem; color:var(--muted);
  margin:0 0 14px; padding-bottom:12px; position:relative;
}
.eyebrow::after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:2px; background:var(--gold); }
.eyebrow-gold{ color:var(--gold-text); }

h2{ font-size:clamp(1.55rem, 3.4vw, 2.35rem); max-width:20ch; }
.section-ice h2{ color:var(--navy); }
h2.on-navy,h3.on-navy{ color:var(--white); }

.lead{ font-size:1.12rem; max-width:60ch; color:inherit; }
.section-ice .lead{ color:var(--graphite); }
.section-navy .lead{ color:var(--muted-navy); }

/* ------------------------- botões ------------------------- */
.btn{
  display:inline-block; font-family:var(--ff-body); font-weight:700;
  text-decoration:none; text-align:center; cursor:pointer;
  border:1px solid transparent; border-radius:4px;
  padding:13px 26px; font-size:1rem; letter-spacing:.01em;
  transition:background-color .18s ease, color .18s ease, transform .05s ease;
}
.btn-gold{ background:var(--gold); color:var(--navy-deep); }
.btn-gold:hover{ background:var(--gold-text); }
.btn-gold:active{ transform:translateY(1px); }
.btn-lg{ padding:16px 34px; font-size:1.06rem; }
.btn-block{ display:block; width:100%; }

/* ------------------------- header ------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(0,40,80,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(198,150,72,.35);
}
.header-inner{ display:flex; align-items:center; gap:24px; min-height:66px; }
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo{ height:30px; width:auto; }
.main-nav{ display:flex; gap:24px; margin-left:auto; }
.main-nav a{
  color:#DCE6F0; text-decoration:none; font-size:.92rem; font-weight:400;
  padding:6px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover{ color:#fff; border-bottom-color:var(--gold); }
.header-cta{ flex:0 0 auto; padding:9px 18px; font-size:.92rem; }

/* ------------------------- 1 · hero ------------------------- */
.hero{ padding-top:clamp(56px,9vw,110px); padding-bottom:clamp(56px,9vw,110px); }
.hero-inner{ position:relative; z-index:1; max-width:900px; }
.hero-title{
  font-size:clamp(2.1rem, 6vw, 4rem);
  letter-spacing:.05em; line-height:1.12; margin:.1em 0 .5em; max-width:16ch;
}
.hero-title .accent{ color:var(--gold-text); }
.hero-sub{ font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--muted-navy); max-width:62ch; }
.hero-cta{ margin:32px 0 16px; }
.hero-trust{ font-size:.92rem; color:var(--gold-text); font-weight:700; letter-spacing:.02em; margin:0; }

/* ------------------------- 2 · chips ------------------------- */
.chips{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  background:var(--white); border:1px solid var(--line-ice); border-radius:4px;
  padding:9px 15px; font-size:.95rem; color:var(--navy); font-weight:700;
}

/* ------------------------- 3 · números ------------------------- */
.numbers-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.stat{ text-align:left; position:relative; padding-left:20px; }
.stat + .stat{ }
.stat-num{
  display:block; color:var(--gold-text); font-size:clamp(2.5rem,6vw,3.8rem);
  letter-spacing:.05em; line-height:1; margin-bottom:12px;
}
.stat-label{ display:block; color:var(--muted-navy); font-size:.98rem; max-width:26ch; }
.numbers-support{
  margin:34px 0 0; font-size:1.05rem; color:var(--white);
  padding-top:22px; border-top:1px solid rgba(198,150,72,.45);
}
.numbers-source{ margin:14px 0 0; font-size:11px; line-height:1.5; color:var(--muted-navy); max-width:75ch; }

/* ------------------------- 4 · tabela comparativa ------------------------- */
.compare{ width:100%; border-collapse:collapse; margin-top:34px; font-size:.98rem; }
.compare th,.compare td{ text-align:left; padding:15px 18px; vertical-align:top; border-bottom:1px solid var(--line-ice); }
.compare thead th{
  font-family:var(--ff-body); font-weight:700; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); border-bottom:2px solid var(--navy);
}
.compare tbody th{ font-family:var(--ff-body); font-weight:700; color:var(--navy); width:20%; }
.compare td{ color:var(--graphite); }
.compare .col-highlight{ background:rgba(0,40,80,.045); }
.compare thead .col-highlight{ color:var(--navy); }
.compare tbody .col-highlight{ font-weight:700; color:var(--navy); box-shadow:inset 3px 0 0 var(--gold); }

/* ------------------------- 4b · constelação ------------------------- */
.constelacao .wrap{ text-align:center; }
.constelacao .eyebrow{ display:inline-block; }
.constelacao .eyebrow::after{ left:50%; transform:translateX(-50%); }
.constelacao-fig{ margin:8px auto 18px; max-width:640px; }
.constelacao-fig img{ width:100%; height:auto; }
.constelacao-cap{ color:var(--gold-text); font-weight:700; letter-spacing:.02em; margin:0; }
.logo-strip{ display:none; }

/* ------------------------- 5 · marco jurídico ------------------------- */
.juridico{ text-align:left; }
.juridico-text{ font-size:1.15rem; color:#EAF1F8; max-width:70ch; }
.juridico-text strong{ color:var(--gold-text); }
.juridico-fecho{
  font-size:1.15rem; color:var(--white); font-weight:700; max-width:70ch;
  margin-top:22px; padding-left:20px; border-left:2px solid var(--gold);
}

/* ------------------------- 6 · território ------------------------- */
.territorio-grid{
  margin-top:34px; display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
}
.ter-card{ position:relative; }
.ter-toggle{
  display:block; width:100%; padding:0; margin:0; border:0; cursor:pointer;
  background:none; position:relative; overflow:hidden; border-radius:6px;
  aspect-ratio:3/2; line-height:0;
}
.ter-toggle picture,.ter-toggle img{ width:100%; height:100%; }
.ter-toggle img{ object-fit:cover; transition:transform .4s ease; }
.ter-card:hover .ter-toggle img{ transform:scale(1.04); }
.ter-toggle::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,27,56,.78) 0%, rgba(0,27,56,.15) 45%, rgba(0,27,56,0) 70%);
}
.ter-name{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--ff-title); font-weight:700; letter-spacing:.08em;
  color:#fff; font-size:1.02rem; line-height:1;
}
.ter-reveal{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:rgba(0,27,56,.92); color:#fff; text-align:left;
  padding:16px 16px 18px; font-size:.95rem; line-height:1.45;
  transform:translateY(101%); transition:transform .28s ease;
  border-top:2px solid var(--gold);
}
.ter-reveal-label{
  display:block; font-family:var(--ff-body); text-transform:uppercase;
  letter-spacing:.14em; font-size:.66rem; color:var(--gold-text); font-weight:700; margin-bottom:5px;
}
.ter-card:hover .ter-reveal,
.ter-card:focus-within .ter-reveal,
.ter-toggle[aria-expanded="true"] + .ter-reveal{ transform:translateY(0); }

.territorio-nota{ margin:26px 0 0; color:var(--muted); font-size:.98rem; max-width:78ch; }

/* ------------------------- 7 · plataforma ------------------------- */
.plataforma h2.on-navy{ max-width:26ch; }
.feat{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:center;
  margin-top:44px;
}
.feat-rev .feat-text{ order:2; }
.feat-text h3{ font-size:1.35rem; letter-spacing:.05em; }
.feat-text p{ color:var(--muted-navy); margin:0; max-width:42ch; }
.shot{
  margin:0; border:1px solid var(--line-ice); background:#E8ECF1;
  border-radius:6px; padding:10px; overflow:hidden;
}
.shot img{ width:100%; height:auto; border-radius:3px; }

/* ------------------------- 8 · método ------------------------- */
.steps{ list-style:none; counter-reset:none; padding:0; margin:36px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:34px 44px; }
.step{ position:relative; padding-left:0; }
.step-num{
  display:block; color:var(--gold); font-size:2.6rem; letter-spacing:.05em;
  line-height:1; margin-bottom:12px;
}
.step h3{ color:var(--navy); font-size:1.22rem; letter-spacing:.05em; }
.step p{ color:var(--graphite); margin:0; max-width:44ch; }

/* ------------------------- 9 · modelo comercial ------------------------- */
.modelo-grid{
  margin-top:38px; display:grid; align-items:start;
  grid-template-columns:1fr auto 1fr auto 1fr; gap:0 34px;
}
.modelo-item{ padding:0 4px; }
.modelo-item h3{ font-size:1.4rem; letter-spacing:.06em; color:var(--gold-text); }
.modelo-item p{ color:var(--muted-navy); margin:0; }
.modelo-rule{ width:1px; align-self:stretch; background:rgba(198,150,72,.45); }

/* ------------------------- 10 · FAQ ------------------------- */
.accordion{ margin-top:30px; border-top:1px solid var(--line-ice); }
.acc-item{ border-bottom:1px solid var(--line-ice); }
.acc-h{ margin:0; font-family:var(--ff-body); letter-spacing:normal; }
.acc-btn{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; text-align:left;
  font-family:var(--ff-body); font-weight:700; font-size:1.08rem; color:var(--navy);
}
.acc-icon{ position:relative; flex:0 0 18px; width:18px; height:18px; }
.acc-icon::before,.acc-icon::after{
  content:""; position:absolute; background:var(--gold); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.acc-icon::before{ top:8px; left:0; width:18px; height:2px; }
.acc-icon::after{ left:8px; top:0; width:2px; height:18px; }
.acc-btn[aria-expanded="true"] .acc-icon::after{ transform:scaleY(0); opacity:0; }
.acc-panel{ overflow:hidden; height:0; transition:height .26s ease; }
.acc-panel p{ margin:0 4px 22px; color:var(--graphite); max-width:70ch; }
@media (prefers-reduced-motion:reduce){ .acc-panel{ transition:none; } }

/* ------------------------- 11 · formulário ------------------------- */
.form-lead{ color:var(--muted-navy); max-width:58ch; }
.diag-form{ margin-top:28px; }
.hp-field{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; pointer-events:none; }
.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.diag-form label{ display:block; font-weight:700; font-size:.92rem; color:#EAF1F8; margin-bottom:7px; }
.diag-form label .req{ color:var(--gold-text); margin-left:2px; }
.diag-form label .opt{ font-weight:400; color:var(--muted-navy); }
.diag-form input,.diag-form textarea{
  width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--graphite);
  background:var(--white); border:1px solid transparent; border-radius:4px;
  padding:13px 14px;
}
.diag-form textarea{ resize:vertical; }
.diag-form input:focus,.diag-form textarea:focus{ outline:none; box-shadow:0 0 0 3px rgba(212,171,110,.55); }
.diag-form input[aria-invalid="true"]{ box-shadow:0 0 0 2px #E7A0A0; }
.field-err{ min-height:0; margin:6px 2px 0; font-size:.85rem; color:#FFC9C9; font-weight:700; }
.field-err:empty{ margin:0; }

.field-consent{ display:flex; align-items:flex-start; gap:11px; margin-top:6px; }
.field-consent input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--gold); }
.field-consent label{ font-weight:400; font-size:.9rem; color:var(--muted-navy); margin:0; }
.field-consent a{ color:var(--gold-text); }
#err-lgpd{ margin-top:2px; }

.form-note{ text-align:center; color:var(--muted-navy); font-size:.88rem; margin:14px 0 0; }
.form-success{
  margin:18px 0 0; padding:16px; border:1px solid var(--gold);
  border-radius:4px; background:rgba(198,150,72,.12); color:#fff; font-weight:700; text-align:center;
}

/* ------------------------- 12 · rodapé ------------------------- */
.site-footer{ background:var(--navy-deep); color:#C9D6E3; padding:56px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.footer-grid > *{ min-width:0; }
.footer-logo{ height:30px; width:auto; }
.footer-tag{ margin:14px 0 0; font-size:.92rem; color:#9BB0C6; max-width:34ch; }
.footer-h{ font-family:var(--ff-body); font-weight:700; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--gold-text); margin:0 0 14px; }
.footer-list{ list-style:none; padding:0; margin:0; }
.footer-list li{ margin-bottom:10px; }
.footer-list a{ color:#C9D6E3; text-decoration:none; font-size:.95rem; }
.footer-list a:hover{ color:#fff; text-decoration:underline; }
.footer-legal{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.footer-company{ font-size:.85rem; color:#8FA6BC; margin:0 0 8px; }
.footer-marks{ font-size:.8rem; color:#7C93AA; margin:0; max-width:80ch; line-height:1.5; }

/* ------------------------- foco visível ------------------------- */
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:3px; }
.section-ice :focus-visible{ outline-color:var(--navy); }
.ter-toggle:focus-visible{ outline-offset:-3px; }

/* ------------------------- reveal (IntersectionObserver) ------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   RESPONSIVO — breakpoints 1280 / 1024 / 768 / 640
   ===================================================================== */
@media (max-width:1024px){
  .territorio-grid{ grid-template-columns:repeat(2,1fr); }   /* tablet: 2 col */
  .feat{ gap:28px; }
}

@media (max-width:768px){
  body{ font-size:16px; }
  .main-nav{ display:none; }
  .header-inner{ gap:12px; }
  .brand-logo{ height:26px; }
  .header-cta{ margin-left:auto; padding:9px 14px; font-size:.82rem; }

  /* rodapé: brand em cima, contato/institucional lado a lado */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px 24px; }
  .footer-brand{ grid-column:1 / -1; }

  .numbers-grid{ grid-template-columns:1fr; gap:26px; }
  .stat{ padding-left:16px; border-left:2px solid rgba(198,150,72,.5); }

  /* constelação -> faixa de logos mono em 2 linhas */
  .constelacao-fig{ display:none; }
  .logo-strip{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px;
    align-items:center; justify-items:center; list-style:none;
    padding:6px 0 4px; margin:6px 0 18px;
  }
  .logo-strip li{ display:flex; align-items:center; justify-content:center;
    max-width:100%; max-height:34px; }
  .logo-strip img{
    max-height:34px; max-width:100%; width:auto; height:auto; object-fit:contain;
    filter:brightness(0) invert(1); opacity:.82;
  }

  .feat{ grid-template-columns:1fr; gap:16px; margin-top:38px; }
  .feat-rev .feat-text{ order:0; }

  .steps{ grid-template-columns:1fr; gap:28px; }

  /* modelo: empilha e remove réguas verticais */
  .modelo-grid{ grid-template-columns:1fr; gap:0; }
  .modelo-item{ padding:22px 0; }
  .modelo-item:not(:last-child){ border-bottom:1px solid rgba(198,150,72,.4); }
  .modelo-rule{ display:none; }

  /* ---- tabela comparativa -> cards empilhados por critério ---- */
  .compare thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td{ display:block; width:auto; }
  .compare tr{
    background:var(--white); border:1px solid var(--line-ice); border-radius:6px;
    margin-bottom:16px; padding:6px 16px 4px; box-shadow:none;
  }
  .compare tbody th{
    width:auto; font-family:var(--ff-title); letter-spacing:.05em; font-size:1.05rem;
    color:var(--navy); padding:12px 0 8px; border-bottom:1px solid var(--line-ice);
  }
  .compare td{
    border:0; padding:11px 0; padding-left:44%; position:relative; color:var(--graphite);
  }
  .compare td + td{ border-top:1px dashed var(--line-ice); }
  .compare td::before{
    content:attr(data-label); position:absolute; left:0; top:11px; width:40%;
    font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
    font-weight:700; color:var(--muted); line-height:1.3;
  }
  .compare td.col-highlight{ background:transparent; box-shadow:none; font-weight:700; color:var(--navy); }
  .compare td.col-highlight::before{ color:var(--gold); }
}

@media (max-width:640px){
  .territorio-grid{ grid-template-columns:1fr; }             /* mobile: 1 col */
  .field-row{ grid-template-columns:1fr; gap:0; }
  .chips li{ font-size:.9rem; }
  .logo-strip{ grid-template-columns:repeat(4,1fr); gap:20px 14px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }       /* rodapé em coluna única */
  h2{ max-width:100%; }
  .hero-title{ max-width:100%; }
}