/*
Theme Name: Volare
Theme URI: https://volarehub.com.br
Description: Tema da Volare Treinamento e Desenvolvimento, construido sobre o Design System Volare v1.1. Filho do Hello Elementor.
Author: Mach Brand & Growth
Author URI: https://machbrandgrowth.com.br
Template: hello-elementor
Version: 1.0.0
Text Domain: volare-child
*/

/* ============================================================
   TOKENS — Design System Volare v1.1
   Navy #1D3063 domina. Ambar #E9A937 e a assinatura: um CTA por
   vista. Azul Ceu #4FC3F7 e complementar, azul claro sobre navy,
   nunca disputando com o ambar.
   ============================================================ */
:root{
  --navy-900:#0E1730; --navy-800:#142346; --navy-700:#1B2A55;
  --navy-600:#1D3063; --navy-500:#2B4080; --navy-300:#6C7CA6;
  --navy-100:#D3D8E5; --navy-050:#EDEFF5;
  --amber-700:#B87F1C; --amber-600:#D89320; --amber-500:#E9A937;
  --amber-400:#EFBB5E; --amber-050:#FDF4E4;
  --sky-500:#4FC3F7; --sky-200:#B6E6FB;
  --white:#FFFFFF; --off-white:#F5F5F0; --gray-100:#EDEDEA;
  --gray-200:#DCDCD8; --gray-400:#A3A3A6; --gray-600:#5B5B5F;
  --gray-800:#333338; --black:#231F20;

  --surface-page:var(--white); --surface-page-alt:var(--off-white);
  --text-title:var(--navy-600); --text-body:var(--gray-600);
  --text-on-inverse:var(--white); --text-on-inverse-muted:rgba(255,255,255,.78);
  --text-accent-on-light:var(--amber-700);
  --border-hairline:var(--gray-200); --rule-accent:var(--amber-500);
  --overlay-navy:rgba(29,48,99,.86); --overlay-navy-deep:rgba(14,23,48,.92);

  --font-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Literata",Georgia,"Times New Roman",serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --fs-display:clamp(38px,4.6vw,64px); --fs-h1:clamp(32px,3.4vw,48px);
  --fs-h2:clamp(26px,2.4vw,34px); --fs-h3:22px; --fs-h4:18px;
  --fs-lead:19px; --fs-body:16px; --fs-body-sm:14px;
  --fs-caption:12px; --fs-eyebrow:12px; --fs-numeral:clamp(40px,4vw,56px);

  --lh-tight:1.08; --lh-title:1.16; --lh-snug:1.35; --lh-body:1.62;
  --ls-eyebrow:.14em; --ls-display:-.015em; --ls-title:-.01em;
  --measure-body:66ch; --measure-lead:52ch;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:72px; --space-10:96px; --space-11:128px;
  --page-margin:clamp(24px,6vw,96px); --section-gap:clamp(56px,7vw,128px);
  --stack:20px; --content-max:1240px; --content-narrow:780px;

  --radius-md:8px; --radius-lg:14px; --radius-pill:999px; --radius-block:40px;
  --radius-blob:50% 50% 50% 8% / 60% 60% 40% 40%;
  --shadow-card:0 2px 4px rgba(14,23,48,.04),0 10px 24px rgba(14,23,48,.07);
  --shadow-card-hover:0 4px 8px rgba(14,23,48,.06),0 16px 36px rgba(14,23,48,.11);

  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --lift-hover:-2px; --press-scale:.985;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--lift-hover:0px;--press-scale:1}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);font-weight:var(--fw-light);font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--text-title);font-weight:var(--fw-bold);
  line-height:var(--lh-title);letter-spacing:var(--ls-title);margin:0}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
h4{font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
p{margin:0 0 var(--stack)}
strong,b{font-weight:var(--fw-semibold);color:var(--text-title)}
.on-navy strong,.on-navy b{color:var(--white)}
a{color:var(--navy-600);text-decoration:none;border-bottom:1px solid var(--amber-500);
  transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--amber-700);border-bottom-color:var(--amber-700)}
:focus-visible{outline:2px solid var(--amber-500);outline-offset:3px;border-radius:2px}
ul,ol{margin:0 0 var(--stack);padding-left:1.15em}
li{margin-bottom:var(--space-2)}
hr{border:0;border-top:1px solid var(--border-hairline);margin:var(--space-8) 0}

/* Literata italica: a segunda voz. Uma palavra-acento por titulo. */
.accent{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-semibold);
  color:var(--text-accent-on-light)}
.on-navy .accent{color:var(--amber-500)}

.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--navy-600);margin:0 0 var(--space-4)}
.on-navy .eyebrow{color:var(--amber-500)}
.rule{border:0;border-top:3px solid var(--rule-accent);width:56px;margin:var(--space-5) 0 var(--space-6)}
.rule+.lead{margin-top:0}
.lead{font-size:var(--fs-lead);line-height:var(--lh-snug);font-weight:var(--fw-light);
  max-width:var(--measure-lead);margin-top:var(--space-5)}
.on-navy{color:var(--text-on-inverse-muted)}
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{color:var(--white)}
.measure{max-width:var(--measure-body)}

.skip{position:absolute;left:-9999px;top:0;background:var(--amber-500);color:var(--navy-600);
  padding:var(--space-3) var(--space-5);font-weight:var(--fw-semibold);z-index:99;border:0}
.skip:focus{left:var(--space-4);top:var(--space-4)}

.wrap{max-width:var(--content-max);margin-inline:auto}
.wrap-narrow{max-width:var(--content-narrow);margin-inline:auto}
.sec{padding:var(--section-gap) var(--page-margin);position:relative;overflow:hidden}
.sec--light{background:var(--white)}
.sec--alt{background:var(--surface-page-alt)}
.sec--navy{background:var(--navy-600)}
.sec--navy-deep{background:var(--navy-800)}
.sec--tight{padding-block:clamp(40px,4vw,72px)}

/* ============================================================
   BOTOES — pilula, um ambar por vista
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  letter-spacing:.01em;padding:14px 26px;border-radius:var(--radius-pill);text-decoration:none;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:scale(var(--press-scale))}
.btn svg{flex:0 0 auto;transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--amber-500);color:var(--navy-600);border-bottom:0}
.btn--primary:hover{background:var(--amber-600);color:var(--navy-600)}
.btn--inverse{background:transparent;color:var(--white);border-bottom:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.btn--inverse:hover{background:rgba(255,255,255,.08);color:var(--white)}
.btn--ghost{background:transparent;color:var(--navy-600);border-bottom:0;
  box-shadow:inset 0 0 0 1px var(--navy-100)}
.btn--ghost:hover{background:var(--navy-050);color:var(--navy-600)}
.btn--sm{padding:10px 20px;font-size:var(--fs-caption)}
.link{color:var(--navy-600);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);
  border-bottom:1px solid var(--amber-500);padding-bottom:2px;display:inline-block}
.on-navy .link{color:var(--white)}

/* ============================================================
   HEADER — nao fixo, por heranca das pecas impressas
   ============================================================ */
.vl-header{background:var(--navy-600);padding:var(--space-5) var(--page-margin);position:relative}
.vl-header__in{max-width:var(--content-max);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-6)}
.vl-header__logo{border-bottom:0;display:block}
.vl-header__logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{color:rgba(255,255,255,.82);border-bottom:2px solid transparent;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);padding-bottom:3px}
.nav a:hover,.nav .current-menu-item>a,.nav .current-page-ancestor>a{color:var(--white);
  border-bottom-color:var(--amber-500)}
.nav-toggle{display:none;background:transparent;border:0;color:var(--white);cursor:pointer;padding:var(--space-2)}
.nav li{position:relative}
.nav .sub-menu{list-style:none;margin:0;padding:var(--space-3) 0;position:absolute;left:-14px;top:100%;
  min-width:270px;background:var(--navy-700);border-radius:var(--radius-md);
  box-shadow:0 18px 48px rgba(14,23,48,.28);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),
    visibility var(--dur-base) var(--ease-standard);z-index:40}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:9px 18px;border-bottom:0;font-weight:var(--fw-light);
  color:rgba(255,255,255,.82)}
.nav .sub-menu a:hover{background:var(--navy-600);color:var(--white);border-bottom:0}
.nav .menu-item-has-children>a::after{content:;display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}

/* Elemento-assinatura: a gaivota rompendo o arco, achatada,
   superdimensionada e cortada pela borda. Vive na calha externa. */
.gull{position:absolute;pointer-events:none;opacity:.10;filter:brightness(0) invert(1);
  width:clamp(320px,46vw,660px);z-index:0}
.gull--left{left:-15%;top:50%;transform:translateY(-50%)}
.gull--right{right:-12%;bottom:-22%;width:clamp(240px,32vw,480px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--navy-600);overflow:hidden;
  min-height:min(76vh,640px);display:grid;align-items:center}
.hero--compact{min-height:0;padding-block:clamp(56px,7vw,104px)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% 50%;opacity:1}
.hero__wash{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(29,48,99,.18) 0%,rgba(29,48,99,.52) 30%,rgba(20,35,70,.88) 58%,rgba(14,23,48,.95) 100%)}
.hero__in{position:relative;z-index:1;max-width:var(--content-max);margin-inline:auto;width:100%;
  padding:var(--space-11) var(--page-margin);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,620px)}
.hero__body{grid-column:2}
.hero--compact .hero__in{padding-block:0;grid-template-columns:1fr}
.hero--compact .hero__body{grid-column:1;max-width:760px}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  color:var(--white)}
.hero .lead{margin-top:var(--space-6);max-width:46ch}
.hero__cta{display:flex;gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap}

/* ============================================================
   FAIXA DE PROVA
   ============================================================ */
.proofbar{background:var(--navy-800);padding:var(--space-7) var(--page-margin)}
.proofbar__in{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--space-8);align-items:start}
.proofbar__item{color:var(--text-on-inverse-muted);font-size:var(--fs-body-sm);line-height:var(--lh-snug);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.proofbar__ico{color:var(--amber-500);margin-bottom:var(--space-2)}
.proofbar__v{display:block;font-size:32px;font-weight:var(--fw-bold);color:var(--white);
  line-height:1;margin-bottom:var(--space-3);letter-spacing:var(--ls-display)}
.proofbar__s{display:block;margin-top:var(--space-2);font-size:var(--fs-caption);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold);
  color:var(--sky-500)}

/* ============================================================
   GRIDS E CARDS
   ============================================================ */
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-9)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-6)}
[class].mt-8{margin-top:var(--space-8)}
[class].mt-7{margin-top:var(--space-7)}

.card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-card);padding:var(--space-7);display:flex;flex-direction:column;
  transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.card--link:hover{transform:translateY(var(--lift-hover));box-shadow:var(--shadow-card-hover)}
.card__kicker{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--gray-600);margin:0 0 var(--space-3)}
.card h3{margin-bottom:var(--space-3)}
.card p{margin-bottom:var(--space-4)}
.card p:last-of-type{margin-bottom:var(--space-5)}
.card .link{margin-top:auto}
.card--navy{background:var(--navy-600);border:0;box-shadow:none;color:var(--text-on-inverse-muted)}
.card--navy h3{color:var(--white)}
.card--navy .card__kicker{color:var(--amber-500)}
.card--force{border-top:3px solid var(--navy-600)}
.card--force.is-sustain{border-top-color:var(--sky-500)}
.card--soft{border-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-block)}

.numeral{font-size:var(--fs-numeral);font-weight:var(--fw-bold);line-height:1;
  color:var(--amber-500);letter-spacing:var(--ls-display)}
.badge{display:inline-block;background:var(--navy-050);color:var(--navy-600);
  border-radius:var(--radius-pill);padding:5px 14px;font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);letter-spacing:.04em;margin:var(--space-5) 0 var(--space-4)}
.badge--amber{background:var(--amber-050);color:var(--amber-700)}

/* Lista com marcador ambar */
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.bullets li{display:flex;gap:var(--space-4);line-height:var(--lh-body);margin:0}
.bullets li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--amber-500);margin-top:11px}
.on-navy .bullets li::before{background:var(--sky-500)}

/* Lista numerada 01/02/03 — so quando ha sequencia real */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);margin:0;
  line-height:var(--lh-body)}
.steps b{font-weight:var(--fw-bold);color:var(--navy-600);font-variant-numeric:tabular-nums;
  font-size:var(--fs-h4)}
.on-navy .steps b{color:var(--amber-500)}
.steps strong{display:block;color:var(--text-title);font-weight:var(--fw-semibold);margin-bottom:4px}
.on-navy .steps strong{color:var(--white)}

/* ============================================================
   ESTATISTICAS E PROVAS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-6)}
.stat{border-top:1px solid rgba(255,255,255,.24);padding-top:var(--space-5)}
.sec--light .stat,.sec--alt .stat{border-top-color:var(--border-hairline)}
.stat__v{font-size:clamp(36px,3.6vw,50px);font-weight:var(--fw-bold);color:var(--white);
  line-height:1;letter-spacing:var(--ls-display)}
.sec--light .stat__v,.sec--alt .stat__v{color:var(--navy-600)}
.stat__l{margin:var(--space-4) 0 var(--space-3);font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.stat__s{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--sky-500)}
.sec--light .stat__s,.sec--alt .stat__s{color:var(--navy-600)}

.prova{background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  padding:var(--space-8);box-shadow:var(--shadow-card)}
.prova+.prova{margin-top:var(--space-6)}
.prova__head{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  align-items:baseline;margin-bottom:var(--space-5)}
.prova__cliente{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--navy-600)}
.prova__setor{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--gray-600)}
.prova dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-6);margin:0}
.prova dt{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--navy-600);padding-top:3px}
.prova dd{margin:0;line-height:var(--lh-snug)}
.prova__limite{margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);font-size:var(--fs-body-sm);color:var(--gray-600)}

.quote{max-width:52ch;border-left:3px solid var(--amber-500);padding-left:var(--space-6)}
.quote p{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-h2);
  line-height:var(--lh-snug);color:var(--navy-600);margin:0 0 var(--space-4);font-weight:var(--fw-regular)}
.on-navy .quote p{color:var(--white)}
.quote cite{font-style:normal;font-size:var(--fs-body-sm)}
.quote cite b{font-weight:var(--fw-semibold)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:var(--content-narrow);margin-top:var(--space-8)}
.faq details{border-bottom:1px solid var(--border-hairline);padding:var(--space-5) 0}
.faq summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--navy-600);
  font-size:var(--fs-h4);list-style:none;display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--space-5)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;color:var(--amber-500);font-weight:var(--fw-bold);
  font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding-top:var(--space-4);max-width:var(--measure-body)}
.faq details>div p:last-child{margin-bottom:0}

/* ============================================================
   FUNDADOR / RETRATO
   ============================================================ */
.figure-blob{position:relative;margin:0}
.figure-blob::before{content:"";position:absolute;right:-20px;bottom:-20px;width:82%;height:82%;
  background:var(--navy-600);border-radius:var(--radius-blob);z-index:0}
.figure-blob img{position:relative;z-index:1;width:100%;aspect-ratio:.8;object-fit:cover;
  object-position:50% 20%;border-radius:var(--radius-blob)}

/* ============================================================
   PENDENCIA — marcador visivel de dado que falta
   ============================================================ */
.pendencia{display:inline-block;background:repeating-linear-gradient(45deg,#FDF4E4,#FDF4E4 8px,#F7DDA8 8px,#F7DDA8 16px);
  color:#7A5310;border:1px dashed var(--amber-700);border-radius:var(--radius-md);
  padding:2px 10px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);font-style:normal}
.on-navy .pendencia{background:rgba(233,169,55,.16);color:var(--amber-400);border-color:var(--amber-500)}

/* ============================================================
   FORMULARIO
   ============================================================ */
.form{display:grid;gap:var(--space-5)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--navy-600)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:var(--fs-body);
  font-weight:var(--fw-light);color:var(--gray-800);padding:12px 14px;border-radius:var(--radius-md);
  border:1px solid var(--gray-200);background:var(--white);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-600);outline:none;
  box-shadow:0 0 0 3px rgba(233,169,55,.35)}
.field textarea{resize:vertical;min-height:96px}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:var(--space-3)}
.field--check input{width:18px;height:18px;margin-top:3px}
.field--check label{font-weight:var(--fw-light);color:var(--text-body)}
.form__note{font-size:var(--fs-caption);color:var(--gray-600)}

/* ============================================================
   CONTATO
   ============================================================ */
.contact-list{display:grid;gap:var(--space-4);list-style:none;padding:0;margin:var(--space-7) 0 0}
.contact-list li{display:flex;gap:var(--space-3);align-items:center;margin:0}
.contact-list svg{flex:0 0 auto;color:var(--navy-600)}
.on-navy .contact-list svg{color:var(--amber-500)}

/* ============================================================
   RODAPE
   ============================================================ */
.vl-footer{background:var(--navy-800);padding:var(--space-10) var(--page-margin) var(--space-7);
  position:relative;overflow:hidden}
.vl-footer__in{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--space-8);position:relative;z-index:1}
.vl-footer img{height:36px;width:auto;margin-bottom:var(--space-5)}
.vl-footer h4{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--amber-500);margin-bottom:var(--space-4)}
.vl-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.vl-footer li{margin:0}
.vl-footer a{color:rgba(255,255,255,.78);border-bottom:0;font-size:var(--fs-body-sm)}
.vl-footer a:hover{color:var(--amber-500)}
.vl-footer p{color:rgba(255,255,255,.72);font-size:var(--fs-body-sm);max-width:34ch;margin:0}
.vl-footer__base{max-width:var(--content-max);margin:var(--space-9) auto 0;padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:var(--space-5);flex-wrap:wrap;font-size:var(--fs-caption);color:rgba(255,255,255,.55);
  position:relative;z-index:1}
.vl-footer__base .tagline{font-family:var(--font-serif);font-style:italic;color:rgba(255,255,255,.72)}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{font-size:var(--fs-caption);letter-spacing:.04em;color:rgba(255,255,255,.62);
  margin-bottom:var(--space-5)}
.breadcrumb a{color:rgba(255,255,255,.62);border-bottom:0}
.breadcrumb a:hover{color:var(--amber-500)}

/* ============================================================
   BLOG
   ============================================================ */
.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}
.post-card__meta{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--gray-400);margin-bottom:var(--space-3)}
.entry-content{max-width:var(--measure-body)}
.entry-content h2{margin:var(--space-8) 0 var(--space-4)}
.entry-content h3{margin:var(--space-7) 0 var(--space-3)}

/* ============================================================
   TABELA
   ============================================================ */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.tbl th,.tbl td{text-align:left;padding:var(--space-4) var(--space-4);
  border-bottom:1px solid var(--border-hairline);vertical-align:top}
.tbl th{font-weight:var(--fw-semibold);color:var(--navy-600);font-size:var(--fs-caption);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.tbl-scroll{overflow-x:auto}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;padding-block:var(--space-10)}
  .hero__body{grid-column:1}
  .grid-2{grid-template-columns:1fr;gap:var(--space-8)}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figure-blob{order:-1;max-width:340px;margin-inline:auto}
  .vl-footer__in{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .gull--left{left:-38%;width:520px}
  .prova dl{grid-template-columns:1fr;gap:var(--space-2)}
  .prova dt{padding-top:var(--space-3)}
}
@media (max-width:640px){
  .vl-footer__in{grid-template-columns:1fr;gap:var(--space-7)}
  .hero__cta .btn{width:100%;justify-content:center}
  .form__row{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .proofbar__in{grid-template-columns:1fr;gap:var(--space-7)}
  .vl-footer__base{flex-direction:column;gap:var(--space-3)}
}

/* ============================================================
   AJUSTES DE COMPOSICAO — set/2026
   ============================================================ */

/* Gaivota do hero: marca d'agua a esquerda do bloco de texto. */
.gull--hero{left:4%;top:50%;transform:translateY(-50%);
  width:clamp(260px,32vw,540px);opacity:.16;z-index:1}

/* Faixa de prova: nota centralizada sob as tres colunas. */
.proofbar__nota{max-width:var(--content-max);margin:var(--space-6) auto 0;text-align:center;
  font-size:var(--fs-caption);color:rgba(255,255,255,.55)}

/* Bloco "A conta que ninguem fez": largura total, duas colunas. */
.custo{max-width:none}
.custo__head{margin-bottom:var(--space-6)}
.custo__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.custo__rot{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--navy-600);margin:0 0 var(--space-3);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--border-hairline)}
.custo__fecho{margin:var(--space-7) 0 0;padding-top:var(--space-5);
  border-top:3px solid var(--rule-accent);max-width:var(--measure-body)}

/* Prova compacta da home. */
.prova-mini{border-top:3px solid var(--amber-500)}
.prova-mini__v{font-size:clamp(32px,3.2vw,44px);font-weight:var(--fw-bold);color:var(--navy-600);
  line-height:1;letter-spacing:var(--ls-display);display:block;margin-bottom:var(--space-4)}
.prova-mini__l{font-size:var(--fs-body-sm);line-height:var(--lh-snug);margin-bottom:var(--space-6)}
.prova-mini__pe{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--border-hairline)}
.prova-mini__cliente{display:block;font-weight:var(--fw-semibold);color:var(--navy-600)}
.prova-mini__setor{display:block;font-size:var(--fs-caption);letter-spacing:.04em;color:var(--gray-600);
  margin-top:2px}

/* Perguntas frequentes ao lado do titulo: acordeao nao herda largura estreita. */
.grid-2>.faq{margin-top:0}

@media (max-width:900px){
  .custo__cols{grid-template-columns:1fr;gap:var(--space-6)}
  .gull--hero{left:-24%;width:clamp(240px,60vw,420px);opacity:.12}
}

/* Redes sociais na pagina de contato. */
.social__rot{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--navy-600);margin:var(--space-8) 0 var(--space-4)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-3);flex-wrap:wrap}
.social li{margin:0}
.social a{display:inline-flex;align-items:center;gap:var(--space-3);border-bottom:0;
  padding:10px 18px 10px 14px;border-radius:var(--radius-pill);background:var(--navy-050);
  color:var(--navy-600);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.social a:hover{background:var(--navy-600);color:var(--white);border-bottom:0}
.social svg{flex:0 0 auto}

/* ============================================================
   COMPONENTES — revisao de conteudo 17/09/2026
   ============================================================ */

/* Terceiro nivel do hero: reforco da proposta, abaixo do lead. */
.hero__sub{margin-top:var(--space-5);max-width:52ch;font-size:var(--fs-body);
  color:var(--text-on-inverse-muted)}

/* Destaque em caixa larga, para as frases de enfase do documento. */
.quote--wide{max-width:var(--measure-body)}

/* Frase de destaque dentro de coluna de texto. */
.destaque-inline{margin:var(--space-6) 0 0;padding-left:var(--space-5);
  border-left:3px solid var(--rule-accent);font-family:var(--font-serif);font-style:italic;
  font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--navy-600)}
.on-navy .destaque-inline{color:var(--white)}

/* Escala da nota (o "/5" ao lado do indicador). */
.stat__esc{font-size:.42em;font-weight:var(--fw-semibold);letter-spacing:0;
  color:var(--text-on-inverse-muted);margin-left:2px}
.sec--light .stat__esc,.sec--alt .stat__esc{color:var(--gray-600)}

/* Nota de fonte e limite da evidencia. */
.nota-fonte{margin-top:var(--space-6);max-width:var(--measure-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-snug);color:var(--text-on-inverse-muted);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.16)}
.sec--light .nota-fonte,.sec--alt .nota-fonte{color:var(--gray-600);border-top-color:var(--border-hairline)}

/* Lista de competencias em duas colunas. */
.cols-2{columns:2;column-gap:var(--space-8)}
.cols-2 li{break-inside:avoid}
@media (max-width:640px){.cols-2{columns:1}}

/* ------------------------------------------------------------
   Hero da home: o titulo do documento tem quatro linhas em
   desktop. Sem compactar, o CTA cai abaixo da dobra em telas
   de 900px de altura, que e o notebook tipico.
   ------------------------------------------------------------ */
:root{--fs-display:clamp(36px,3.9vw,54px)}
.hero__in{padding-block:clamp(56px,6vw,88px)}
.hero .lead{margin-top:var(--space-5)}
.hero__sub{margin-top:var(--space-4)}
.hero__cta{margin-top:var(--space-7)}


/* ------------------------------------------------------------
   Navegacao: com sete itens mais o botao, a barra so cabe em
   tela larga. Abaixo de 1024px o menu vira sanfona, senao
   "Como trabalhamos" e o CTA quebram em duas linhas.
   ------------------------------------------------------------ */
.nav > li > a{white-space:nowrap}
.vl-header__cta{white-space:nowrap}

@media (max-width:1024px){
  .nav{display:none}
  .nav.is-open{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--navy-700);
    padding:var(--space-5) var(--page-margin);gap:var(--space-4);z-index:30;
    max-height:calc(100vh - 90px);overflow-y:auto}
  .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;
    box-shadow:none;min-width:0;padding:var(--space-3) 0 0 var(--space-4);
    border-left:2px solid rgba(255,255,255,.18);margin-top:var(--space-3)}
  .nav .sub-menu a{padding:6px 0;white-space:normal}
  .nav .menu-item-has-children > a::after{display:none}
  .nav-toggle{display:block}
}
@media (max-width:420px){
  .vl-header__cta{display:none}
}


/* ============================================================
   AJUSTES DE LAYOUT — 18/09/2026
   ============================================================ */

/* Bloco de texto alinhado na mesma coluna que o resto da pagina.
   O wrap-narrow com margin-inline:0 encostava na borda da secao
   e saia da grade em telas largas. */
.wrap-start>*{max-width:var(--content-narrow)}
.wrap-start>.lead{max-width:var(--measure-lead)}

/* CTA final: texto e botao sob o titulo; gaivota centralizada na
   coluna da direita. */
.cta-final__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--space-9);align-items:center;position:relative;z-index:1}
.cta-final__txt>p{max-width:var(--measure-lead)}
.cta-final__txt>p:last-child{margin-bottom:0}
.cta-final__txt .lead{margin-top:0}
.cta-final__txt>p:has(>.btn){margin-top:var(--space-7)}
.cta-final__txt .hero__cta{margin-top:var(--space-7)}
.cta-final__mark{display:flex;justify-content:center;align-items:center}
.cta-final__mark img{width:min(340px,80%);opacity:.14;filter:brightness(0) invert(1)}

/* Home, "A dor": citacao ocupa a coluna da direita, centrada. */
.dor{align-items:center}
.dor__quote .quote{max-width:none}

/* Metodologia: cinco etapas em caixas lado a lado. */
.steps--boxes{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-5)}
.steps--boxes li{grid-template-columns:1fr;gap:var(--space-4);align-content:start;
  padding:var(--space-6) var(--space-5);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-top:3px solid var(--amber-500)}
.steps--boxes b{font-size:var(--fs-h3)}
.steps--boxes span{font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.steps--boxes strong{font-size:var(--fs-body);margin-bottom:var(--space-2)}

/* Home, Resultados: texto a esquerda, indicadores a direita. */
.resultados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-9);align-items:start}
.resultados__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.stat-box{padding:var(--space-6);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.stat-box .stat__l{margin-bottom:0}
.resultados__dados .nota-fonte{margin-top:var(--space-6)}
.stat__esc{font-size:.55em}

/* Sobre: certificacoes em caixas compactas. */
.cred{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-4)}
.cred li{margin:0;padding:var(--space-5);background:var(--white);border:1px solid var(--border-hairline);
  border-top:3px solid var(--amber-500);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  font-weight:var(--fw-semibold);color:var(--navy-600);line-height:var(--lh-snug);
  display:flex;align-items:center;min-height:84px}

/* Como trabalhamos: galeria de fotos. */
.galeria{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.galeria li{margin:0;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-050)}
.galeria a{display:block;height:100%;border-bottom:0}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard)}
.galeria a:hover img{transform:scale(1.03)}
.galeria--vazia li{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--navy-100);color:var(--gray-600);font-size:var(--fs-body-sm)}
.galeria__zoom{border:0;padding:0;background:transparent;max-width:min(1100px,92vw);max-height:90vh}
.galeria__zoom::backdrop{background:rgba(14,23,48,.88)}
.galeria__zoom img{max-height:86vh;width:auto;border-radius:var(--radius-md)}
.galeria__fechar{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(14,23,48,.7);color:var(--white);font-size:24px;cursor:pointer}

/* Rodape: WhatsApp com icone e redes como icones. */
.vl-footer__wa{display:inline-flex;align-items:center;gap:var(--space-2)}

.vl-footer ul.vl-footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.vl-footer__social a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.vl-footer__social a:hover{background:var(--amber-500);color:var(--navy-600);box-shadow:none}

@media (max-width:1100px){
  .steps--boxes{grid-template-columns:1fr;gap:var(--space-4)}
  .steps--boxes li{grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-5)}
  .cred{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .cta-final__in{grid-template-columns:1fr}
  .cta-final__mark{display:none}
  .resultados{grid-template-columns:1fr;gap:var(--space-8)}
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .resultados__stats{grid-template-columns:1fr}
  .cred{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:1fr}
}


/* ============================================================
   AJUSTES DE LAYOUT — 18/09/2026, segunda rodada
   ============================================================ */

/* Heros: texto a esquerda, na mesma coluna dos demais blocos.
   O hero__in soma as margens ao max-width para que a borda do texto
   coincida com a borda do .wrap das secoes. */
.hero__in{max-width:calc(var(--content-max) + 2 * var(--page-margin));
  grid-template-columns:minmax(0,640px) minmax(0,1fr)}
.hero__body{grid-column:1}
.hero--compact .hero__in{grid-template-columns:1fr}
.hero--compact .hero__body{max-width:760px}

/* Home: foto e lavagem invertidas. Escuro atras do texto, a esquerda;
   a foto aparece mais clara a direita. */
.hero__bg{object-position:70% 50%}
.hero__wash{background:linear-gradient(90deg,rgba(14,23,48,.95) 0%,rgba(20,35,70,.88) 40%,
  rgba(29,48,99,.5) 68%,rgba(29,48,99,.14) 100%)}

/* Gaivota dos heros: a direita, 70% da altura, centrada na vertical,
   alinhada a borda direita do conteudo. */
.gull--hero{left:auto;right:max(var(--page-margin),calc((100% - var(--content-max)) / 2));
  top:15%;height:70%;width:auto;max-width:none;transform:none;opacity:.12;z-index:0}

/* CTA final: gaivota com 70% da altura do bloco azul. A coluna estica
   por cima do padding da secao para medir a altura do bloco inteiro. */
.cta-final__mark{align-self:stretch;margin-block:calc(-1 * var(--section-gap))}
.cta-final__mark{position:relative}
.cta-final__mark img{position:absolute;top:15%;left:50%;transform:translateX(-50%);
  height:70%;width:auto;max-width:none}

/* Etapas em caixas sobre fundo claro. */
.sec--light .steps--boxes li,.sec--alt .steps--boxes li{background:var(--white);
  border:1px solid var(--border-hairline);border-top:3px solid var(--amber-500);box-shadow:var(--shadow-card)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Comentarios anonimos no bloco Resultados. */
.depo{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.depo__item{margin:0;padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left:3px solid var(--amber-500);background:rgba(255,255,255,.04);
  border-radius:0 var(--radius-md) var(--radius-md) 0}
.depo__item p{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-regular);
  font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--white);margin:0 0 var(--space-2)}
.depo__item cite{font-style:normal;font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-on-inverse-muted)}

/* Galeria em carrossel. */
.carrossel{position:relative}
.carrossel__trilho{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--space-4)) / 3);column-gap:var(--space-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__item{margin:0;scroll-snap-align:start;aspect-ratio:4/5;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--navy-050)}
.carrossel__item a{display:block;height:100%;border-bottom:0}
.carrossel__item img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-standard)}
.carrossel__item a:hover img{transform:scale(1.03)}
.carrossel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;
  border-radius:50%;border:0;background:var(--white);color:var(--navy-600);box-shadow:var(--shadow-card-hover);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.carrossel__nav:hover{background:var(--amber-500)}
.carrossel__nav:disabled{opacity:.35;cursor:default;background:var(--white)}
.carrossel__nav--prev{left:-24px}
.carrossel__nav--next{right:-24px}

@media (max-width:1100px){
  .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps--3 li{grid-template-columns:1fr;gap:var(--space-4)}
}
@media (max-width:900px){
  .gull--hero{opacity:.08}
  .steps--3{grid-template-columns:1fr}
  .steps--3 li{grid-template-columns:auto 1fr;gap:var(--space-5)}
  .carrossel__trilho{grid-auto-columns:calc((100% - var(--space-4)) / 2)}
  .carrossel__nav--prev{left:8px}
  .carrossel__nav--next{right:8px}
}
@media (max-width:640px){
  .carrossel__trilho{grid-auto-columns:85%}
  .carrossel__nav{width:40px;height:40px}
}