/* =========================================================================
   LOPES EXPRESS SHIPPING — design system
   Navy #09316E · Red #BC2025 · Archivo (display) + Inter (texto)
   Escala de espaco 4px. Base 17px porque o comprador nucleo tem 60+.
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  /* marca */
  --navy:#09316E;
  --navy-700:#0A2755;
  --navy-800:#0B1E42;
  --navy-900:#08152F;
  --red:#BC2025;
  --red-600:#A5171C;
  --red-100:#FCECEC;

  /* neutros */
  --ink:#111827;
  --ink-soft:#374151;
  --muted:#5B6675;
  --line:#DFE4EC;
  --line-soft:#EDF0F5;
  --canvas:#F5F7FA;
  --surface:#FFFFFF;

  /* semanticos */
  --ok:#12724A;
  --err:#B42318;
  --star:#F0A020;

  /* tipografia */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* espaco */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* forma */
  --r-sm:4px; --r:8px; --r-lg:14px;
  --shadow-sm:0 1px 2px rgba(11,30,66,.06), 0 1px 3px rgba(11,30,66,.08);
  --shadow:0 4px 12px rgba(11,30,66,.08), 0 1px 3px rgba(11,30,66,.06);
  --shadow-lg:0 18px 44px rgba(11,30,66,.16), 0 4px 12px rgba(11,30,66,.08);

  --container:1200px;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--red)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}

/* foco visivel e consistente (publico 60+, teclado e leitor de tela) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:var(--r-sm);
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:2000;
  background:var(--navy);color:#fff;padding:var(--s-3) var(--s-5);
  border-radius:var(--r);font-weight:700;text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:var(--s-4);color:#fff}

/* ---------- tipografia ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);font-weight:800;
  line-height:1.12;letter-spacing:-.022em;color:var(--navy-800);margin:0 0 var(--s-4);
}
h1{font-size:clamp(2.05rem,1.35rem + 2.7vw,3.5rem)}
h2{font-size:clamp(1.65rem,1.2rem + 1.8vw,2.6rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);letter-spacing:-.014em}
h4{font-size:1.08rem;letter-spacing:-.008em;font-weight:700}
p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--ink)}
small{font-size:.86rem}

.eyebrow{
  font-family:var(--font-display);font-weight:800;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);
  margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-3);
}
.eyebrow::after{content:"";flex:0 0 34px;height:2px;background:var(--red);opacity:.5}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 34px;height:2px;background:var(--red);opacity:.5}
.eyebrow--light{color:#FF8A8E}
.eyebrow--light::after,.eyebrow--light::before{background:#FF8A8E}

.lead{font-size:clamp(1.06rem,1rem + .35vw,1.28rem);color:var(--ink-soft);line-height:1.6}
.muted{color:var(--muted)}
.cred{font-family:var(--font-mono);font-size:.9em;letter-spacing:.02em;font-weight:600}
.nowrap{white-space:nowrap}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-5)}
.container--wide{max-width:1360px}
.container--narrow{max-width:820px}
@media (min-width:768px){.container{padding-inline:var(--s-6)}}

.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(36px,5vw,64px)}
.section--canvas{background:var(--canvas)}
.section--navy{background:var(--navy-800);color:#DDE4F0}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy .lead{color:#C6D2E6}
.section--navy a{color:#fff}
.section--rule{border-top:1px solid var(--line)}

.section-head{max-width:760px;margin-bottom:var(--s-7)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{color:var(--muted);font-size:1.08rem;margin-bottom:0}
.section--navy .section-head p{color:#B9C6DD}

.grid{display:grid;gap:var(--s-5)}
@media (min-width:640px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .grid--2\@lg{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:640px) and (max-width:899px){ .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)} }

/* a "estrada": divisor tracejado que ecoa a faixa da pista */
.road-rule{height:0;border-top:3px dashed rgba(188,32,37,.32);margin:0}
.road-rule--light{border-top-color:rgba(255,255,255,.28)}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.005em;
  padding:16px 26px;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;line-height:1.2;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .1s ease;
  min-height:54px;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--red);border-color:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-600);border-color:var(--red-600);color:#fff}
.btn--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn--outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--ghost-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--lg{font-size:1.08rem;padding:18px 32px;min-height:60px}
.btn--sm{font-size:.92rem;padding:11px 18px;min-height:44px}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn-row .btn{white-space:nowrap}
.btn-row--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

/* ---------- barra de credenciais ---------- */
.topbar{background:var(--navy-900);color:#C3D0E6;font-size:.83rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:40px}
.topbar__creds{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center}
.topbar__creds span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.topbar__creds svg{flex:0 0 auto;opacity:.85}
.topbar__right{display:none;gap:var(--s-5);align-items:center}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:#fff;text-decoration:underline}
@media (min-width:1024px){.topbar__right{display:flex}}
@media (max-width:640px){
  .topbar{font-size:.76rem}
  .topbar .container{justify-content:center;padding-block:6px}
  .topbar__creds{justify-content:center;gap:var(--s-2) var(--s-4)}
}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.header.is-stuck{box-shadow:var(--shadow)}
.header__inner{display:flex;align-items:center;gap:var(--s-4);min-height:var(--header-h)}
.header__logo{flex:0 0 auto;display:block}
.header__logo img{height:38px;width:auto}
@media (min-width:1024px){.header__logo img{height:44px}}
.header__spacer{flex:1 1 auto}

.nav{display:none}
@media (min-width:1100px){
  .nav{display:flex;align-items:center;gap:var(--s-1)}
  .nav a{
    font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--navy-800);
    text-decoration:none;padding:10px 13px;border-radius:var(--r-sm);white-space:nowrap;
  }
  .nav a:hover{background:var(--canvas);color:var(--navy)}
  .nav a[aria-current="page"]{color:var(--red);box-shadow:inset 0 -3px 0 var(--red)}
}
.header__cta{display:none}
@media (min-width:1100px){.header__cta{display:flex;gap:var(--s-2);align-items:center}}
.header__cta .btn{white-space:nowrap}
.header__phone{
  display:none;font-family:var(--font-display);font-weight:800;color:var(--navy);
  text-decoration:none;font-size:1.02rem;white-space:nowrap;padding:8px 4px;
}
@media (min-width:700px){.header__phone{display:inline-flex;align-items:center;gap:8px}}

.burger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;
  background:var(--navy);color:#fff;border:0;border-radius:var(--r);
  font-family:var(--font-display);font-weight:800;font-size:.9rem;padding:12px 16px;min-height:46px;cursor:pointer;
}
@media (min-width:1100px){.burger{display:none}}
.burger__bars{display:inline-block;width:18px;height:2px;background:#fff;position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.burger__bars::before{top:-6px}.burger__bars::after{top:6px}
/* em 320px o logo + telefone + botao nao cabem: o botao vira so o icone */
@media (max-width:359px){
  .container{padding-inline:var(--s-4)}
  .header__logo img{height:32px}
  .burger{padding:11px 12px;font-size:0;gap:0}
  .burger__bars{margin:0}
}

/* menu mobile: painel de largura total, nunca 355px fixos (foi o bug do site antigo) */
.mobilenav{
  position:fixed;inset:0;z-index:1000;background:var(--navy-900);color:#fff;
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;transition:transform .28s ease,visibility .28s;
}
.mobilenav.is-open{transform:translateY(0);visibility:visible}
.mobilenav__top{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5);border-bottom:1px solid rgba(255,255,255,.14)}
.mobilenav__top img{height:34px}
.mobilenav__close{background:none;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--r);
  font-family:var(--font-display);font-weight:800;padding:10px 16px;min-height:46px;cursor:pointer}
.mobilenav__links{list-style:none;margin:0;padding:var(--s-3) var(--s-5) var(--s-5)}
.mobilenav__links a{
  display:block;color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:700;
  font-size:1.28rem;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.mobilenav__links a:hover{color:#FF9095}
.mobilenav__foot{margin-top:auto;padding:var(--s-5);border-top:1px solid rgba(255,255,255,.14);background:var(--navy-800)}

/* barra fixa de contato no celular: Call | Text, padrao 50/50 */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:850;display:grid;grid-template-columns:1fr 1fr;
  background:var(--navy-900);border-top:2px solid var(--red);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px;
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  font-family:var(--font-display);font-weight:800;font-size:1rem;text-decoration:none;border-radius:var(--r);
}
.callbar a:first-child{background:var(--red);color:#fff}
.callbar a:last-child{background:#fff;color:var(--navy)}
@media (min-width:1100px){.callbar{display:none}}
@media (max-width:1099px){body{padding-bottom:74px}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-800);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,21,47,.74) 0%,rgba(8,21,47,.56) 42%,rgba(8,21,47,.88) 100%);
}
@media (min-width:960px){
  /* Escurece o bastante pra segurar texto branco e leve o bastante pra foto aparecer.
     A cabine adesivada vive entre 60% e 90% da largura da foto: e de proposito. */
  .hero__scrim{background:
    linear-gradient(100deg,rgba(8,21,47,.86) 0%,rgba(8,21,47,.66) 34%,rgba(8,21,47,.40) 60%,rgba(8,21,47,.26) 100%),
    linear-gradient(180deg,rgba(8,21,47,.30) 0%,rgba(8,21,47,0) 34%,rgba(8,21,47,.38) 100%);}
  .hero__inner{min-height:600px;display:flex;align-items:center}
  .hero__inner>.hero__grid{width:100%}
}
/* sombra sutil pro branco nunca competir com o ceu da foto */
.hero h1,.hero__sub{text-shadow:0 2px 20px rgba(6,16,36,.55)}
/* no celular o polegar agradece um alvo de largura inteira */
@media (max-width:520px){
  .hero .btn-row{display:grid;grid-template-columns:1fr}
  .hero .btn-row .btn{width:100%}
}
.hero__inner{position:relative;padding-block:clamp(40px,6vw,76px)}
.hero__grid{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(400px,468px);gap:var(--s-8)}}
.hero h1{color:#fff;margin-bottom:var(--s-4);text-wrap:balance}
.hero__sub{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);color:#D5DEEE;max-width:38ch;margin-bottom:var(--s-5)}
.hero__proof{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.hero__proof span{
  display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;color:#EAF0FA;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;
}
.hero__proof svg{flex:0 0 auto}
.hero__proof b{color:#fff;font-weight:700}
.hero__signature{margin-top:var(--s-6);opacity:.55;max-width:230px}

/* ---------- card do formulario ---------- */
.quotecard{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;color:var(--ink)}
/* O card fica DENTRO de secoes escuras (.hero, .section--navy), e aquelas secoes pintam
   os links de branco. Dentro do card o fundo e branco: sem isto, os links de Privacy e
   Terms somem — e sao justamente os que o revisor do A2P precisa clicar. */
.quotecard a{color:var(--navy);text-decoration:underline}
.quotecard a:hover{color:var(--red)}
.quotecard__head a{color:#fff}
.quotecard__head{background:var(--navy);color:#fff;padding:var(--s-5) var(--s-5) var(--s-4)}
.quotecard__head h2{color:#fff;font-size:1.32rem;margin-bottom:6px}
.quotecard__head p{font-size:.94rem;color:#C6D2E6;margin:0}
.quotecard__body{padding:var(--s-5)}
.quotecard__foot{
  background:var(--canvas);border-top:1px solid var(--line);padding:var(--s-4) var(--s-5);
  font-size:.8rem;color:var(--muted);line-height:1.55;
}
.quotecard__foot p{margin:0 0 8px}
.quotecard__foot p:last-child{margin-bottom:0}

/* ---------- formulario ---------- */
.field{margin-bottom:var(--s-4)}
.field:last-child{margin-bottom:0}
.field label,.field .label{display:block;font-size:.9rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.field .opt{font-weight:500;color:var(--muted)}
.req{color:var(--red);font-weight:800}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],
.field select,.field textarea{
  width:100%;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  transition:border-color .15s,box-shadow .15s;min-height:50px;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6675' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(9,49,110,.14);
}
.field input.is-bad,.field select.is-bad,.field textarea.is-bad{border-color:var(--err);background:#FFF7F6}
.field .err{display:none;font-size:.82rem;color:var(--err);font-weight:600;margin-top:6px}
.field .err.is-show{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

.consent{
  display:flex;gap:11px;align-items:flex-start;background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:var(--s-3);
}
.consent.is-bad{border-color:var(--err);background:#FFF7F6}
.consent input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy)}
.consent label{font-size:.82rem;font-weight:500;line-height:1.55;color:var(--ink-soft);margin:0}
.consent a{font-weight:700}
/* agrupa os 3 consentimentos e deixa explicito que nenhum e obrigatorio */
.consent-group{border:0;margin:var(--s-5) 0 0;padding:0}
.consent-group legend{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:var(--s-3);
}
.consent-note{font-size:.82rem;color:var(--muted);line-height:1.55;margin:var(--s-2) 0 0}

.steps-bar{display:flex;gap:6px;margin-bottom:var(--s-5)}
.steps-bar i{height:5px;flex:1;border-radius:99px;background:var(--line);transition:background .25s}
.steps-bar i.is-on{background:var(--red)}
.step-count{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s-2)}
.step h3{margin-bottom:4px}
.step__hint{font-size:.92rem;color:var(--muted);margin-bottom:var(--s-4)}
.step[hidden]{display:none}
.form-fail{display:none;background:#FFF7F6;border:1px solid #F1B4AF;color:var(--err);
  border-radius:var(--r);padding:12px 14px;font-size:.88rem;font-weight:600;margin-bottom:var(--s-4)}
.form-fail.is-show{display:block}
.form-done{display:none;text-align:center;padding:var(--s-6) var(--s-3)}
.form-done.is-show{display:block}
.form-done__tick{width:60px;height:60px;border-radius:50%;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-4);font-size:30px}
.hp{position:absolute;left:-9999px;width:0;height:0;opacity:0;overflow:hidden}

/* ---------- faixa de provas ---------- */
.proofbar{background:var(--canvas);border-bottom:1px solid var(--line)}
.proofbar__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media (min-width:900px){.proofbar__grid{grid-template-columns:repeat(4,1fr)}}
.proofbar__item{background:var(--canvas);padding:var(--s-5) var(--s-4);display:flex;gap:var(--s-3);align-items:flex-start}
.proofbar__item svg{flex:0 0 auto;color:var(--red);margin-top:2px}
.proofbar__item .label{display:block;font-family:var(--font-display);font-weight:800;font-size:.98rem;color:var(--navy-800);line-height:1.25}
.proofbar__item .value{display:block;font-size:.86rem;color:var(--muted);margin-top:3px}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column;
}
.card--flat{box-shadow:none}
.card__icon{
  width:46px;height:46px;border-radius:var(--r);background:var(--red-100);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4);flex:0 0 auto;
}
.card h3,.card h4{margin-bottom:var(--s-2)}
.card p{color:var(--muted);font-size:.98rem;margin-bottom:0;overflow-wrap:anywhere}
.card h3,.card h4{overflow-wrap:anywhere}
.card__link{margin-top:auto;padding-top:var(--s-4);font-weight:700;font-family:var(--font-display);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.card--dark{background:var(--navy-700);border-color:rgba(255,255,255,.14);color:#DDE4F0}
.card--dark h3,.card--dark h4{color:#fff}
.card--dark p{color:#B9C6DD}

/* numerada */
.steplist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);counter-reset:st}
@media (min-width:900px){.steplist{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:899px){.steplist{grid-template-columns:repeat(2,1fr)}}
.steplist li{counter-increment:st;position:relative;padding-top:var(--s-6)}
.steplist li::before{
  content:counter(st,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;
  color:var(--red);opacity:.28;letter-spacing:-.04em;
}
.steplist h3{font-size:1.1rem;margin-bottom:6px}
.steplist p{color:var(--muted);font-size:.96rem;margin:0}
.section--navy .steplist p{color:#B9C6DD}

/* ---------- contador e numeros ---------- */
.stats{display:grid;gap:1px;background:rgba(255,255,255,.16);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--navy-800);padding:var(--s-6) var(--s-5);text-align:center}
.stat__value{
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;
  font-size:clamp(2.4rem,1.8rem + 2.2vw,3.4rem);font-variant-numeric:tabular-nums;
}
.stat__value .plus{color:var(--red);margin-right:2px}
.stat__label{font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:#FF9095;margin-top:var(--s-3)}
.stat__note{font-size:.86rem;color:#A9B8D2;margin-top:var(--s-2);line-height:1.5}

/* ---------- tabela carrier x broker ---------- */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.98rem}
.compare th,.compare td{padding:var(--s-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{
  font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid var(--line);white-space:nowrap;
}
.compare thead th.is-us{color:var(--navy);background:var(--red-100);border-bottom-color:var(--red)}
.compare td.is-us{background:#FFF6F6;font-weight:600;color:var(--ink)}
.compare td:first-child{font-weight:700;color:var(--navy-800);width:26%}
.compare tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.table-scroll table{min-width:640px}

/* tabela de rotas */
.ratetable{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff}
.ratetable th,.ratetable td{padding:14px var(--s-4);text-align:left;border-bottom:1px solid var(--line)}
.ratetable thead th{font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--canvas)}
.ratetable td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ratetable td.total{font-family:var(--font-display);font-weight:800;color:var(--navy);font-size:1.06rem}
.ratetable tbody tr:hover{background:var(--canvas)}

/* ---------- reviews ---------- */
.reviewhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.reviewhead__badge{display:flex;align-items:center;gap:var(--s-3);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-3) var(--s-5);box-shadow:var(--shadow-sm)}
.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars svg{width:18px;height:18px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--s-3);height:100%}
.review__quote{font-size:1rem;color:var(--ink-soft);line-height:1.62;margin:0;flex:1}
.review__who{display:flex;align-items:center;gap:var(--s-3);border-top:1px solid var(--line-soft);padding-top:var(--s-3)}
.review__avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;flex:0 0 auto}
.review__name{font-weight:700;font-size:.96rem;color:var(--navy-800);line-height:1.3}
.review__meta{font-size:.82rem;color:var(--muted)}

/* widget de reputacao da GoHighLevel (avaliacoes reais do Google) */
/* O widget tem tipografia e botao proprios, e isso e de proposito: ele PRECISA parecer
   um embed do Google, nao algo que a gente desenhou. O que damos e a moldura. */
.gwidget{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--s-3) var(--s-3) 0;overflow:hidden;
}
/* O height do iframe e reserva inicial e o script da GoHighLevel sobrescreve com a altura
   real assim que o widget carrega. Por isso nada de min-height aqui: sobraria um vao fixo. */
.gwidget iframe{width:100%;border:0;display:block}
.gwidget noscript p{padding:var(--s-6) 0}

/* ---------- galeria ----------
   Bloco fechado: 4 colunas x 3 linhas no desktop, com a primeira foto ocupando 2x2.
   9 fotos = 12 celulas = retangulo exato, sem sobra na ultima linha.
   Sem legenda sobre a foto: ela vive no alt e no lightbox. */
.gallery{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery__item{margin:0}
.gallery__open{
  display:block;width:100%;height:100%;padding:0;border:0;background:var(--navy-800);
  cursor:zoom-in;position:relative;border-radius:var(--r);overflow:hidden;
}
.gallery__open img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .45s ease}
.gallery__open:hover img{transform:scale(1.05)}
/* lupa discreta no hover, ja que nao ha mais texto indicando que a foto abre */
.gallery__open::after{
  content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(8,21,47,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
  opacity:0;transition:opacity .2s ease;
}
.gallery__open:hover::after,.gallery__open:focus-visible::after{opacity:1}
/* a primeira foto e a vitrine */
@media (min-width:900px){
  .gallery__item.is-feature{grid-column:span 2;grid-row:span 2}
  .gallery__item.is-feature .gallery__open img{aspect-ratio:auto}
}
@media (max-width:899px){
  .gallery__item.is-feature{grid-column:span 2}
  .gallery__item.is-feature .gallery__open img{aspect-ratio:16/10}
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1200;background:rgba(6,16,36,.94);
  display:flex;align-items:center;justify-content:center;padding:var(--s-5);
}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;max-width:min(1200px,92vw);max-height:88vh;display:flex;
  flex-direction:column;align-items:center;gap:var(--s-4)}
.lightbox__figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lightbox__figure figcaption{color:#DDE4F0;font-size:.95rem;text-align:center;max-width:60ch}
.lightbox__close,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:50%;width:52px;height:52px;font-size:1.9rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox__close{top:var(--s-5);right:var(--s-5);font-size:2.2rem}
.lightbox__nav--prev{left:var(--s-4)}
.lightbox__nav--next{right:var(--s-4)}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--red);border-color:var(--red)}
@media (max-width:640px){
  .lightbox__nav{width:44px;height:44px;font-size:1.5rem}
  .lightbox__nav--prev{left:6px}.lightbox__nav--next{right:6px}
  .lightbox__close{top:10px;right:10px;width:44px;height:44px;font-size:1.7rem}
}

/* ---------- cupons ---------- */
.coupon{
  position:relative;background:#fff;border:2px solid var(--navy);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
}
.coupon__top{background:var(--navy);color:#fff;padding:var(--s-5);text-align:center}
.coupon__top h3{color:#fff;margin-bottom:var(--s-2)}
.coupon__amount{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1;color:#fff;letter-spacing:-.03em}
.coupon__amount small{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#FF9095;margin-top:8px;font-weight:800}
.coupon__amount--code{font-family:var(--font-mono);font-size:1.75rem;letter-spacing:.06em;word-break:break-all}
.coupon__code span{font-size:.88rem;color:var(--red-600);font-weight:600}
.coupon__notch{position:relative;height:20px;background:var(--navy)}
.coupon__notch::before,.coupon__notch::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--canvas);
}
.coupon__notch::before{left:-13px}.coupon__notch::after{right:-13px}
.coupon__body{padding:var(--s-5);flex:1;display:flex;flex-direction:column;gap:var(--s-3)}
.coupon__body p{color:var(--muted);font-size:.96rem;margin:0}
.coupon__code{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:auto;
  border:2px dashed var(--red);border-radius:var(--r);padding:12px 14px;background:var(--red-100);
}
.coupon__code b{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;letter-spacing:.08em;color:var(--red-600)}
.coupon__copy{background:var(--red);color:#fff;border:0;border-radius:var(--r-sm);font-family:var(--font-display);
  font-weight:800;font-size:.8rem;padding:8px 12px;cursor:pointer;min-height:38px;white-space:nowrap}
.coupon__copy:hover{background:var(--red-600)}
.coupon__copy.is-done{background:var(--ok)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s-5) 44px var(--s-5) 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--navy-800);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-9px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-4px}
.faq summary:hover{color:var(--red)}
.faq__answer{padding:0 var(--s-6) var(--s-5) 0;color:var(--ink-soft)}
.faq__answer p{margin-bottom:var(--s-3)}

/* ---------- destaques / faixas ---------- */
.banner{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-800);color:#fff;
  display:grid;gap:0;
}
@media (min-width:900px){.banner{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.banner__text{padding:clamp(28px,4vw,52px)}
.banner__text h2{color:#fff}
.banner__text p{color:#C6D2E6}
.banner__img{position:relative;min-height:220px}
.banner__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.banner__img::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy-800) 0%,rgba(11,30,66,0) 46%)}}

.callout{
  border-left:5px solid var(--red);background:var(--canvas);border-radius:0 var(--r) var(--r) 0;
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-5);
}
.callout h3{margin-bottom:var(--s-3)}
.callout p:last-child{margin-bottom:0}
.section--navy .callout{background:rgba(255,255,255,.06);color:#D5DEEE}

.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.ticklist li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:1rem}
.ticklist svg{flex:0 0 auto;margin-top:4px;color:var(--ok)}
.ticklist--no svg{color:var(--red)}
.ticklist b{display:block;color:var(--navy-800)}
.section--navy .ticklist b,.on-dark .ticklist b{color:#fff}
.on-dark .ticklist{color:#C6D2E6}
.on-dark .ticklist svg{color:#5FD3A0}
.section--navy .ticklist{color:#C6D2E6}
.section--navy .ticklist svg{color:#5FD3A0}

/* ---------- CTA final ---------- */
.finalcta{background:var(--navy-900);color:#fff;text-align:center;position:relative;overflow:hidden}
.finalcta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--red) 0 44px,transparent 44px 76px);
}
.finalcta h2{color:#fff;max-width:22ch;margin-inline:auto}
.finalcta p{color:#C6D2E6;max-width:56ch;margin-inline:auto}
.finalcta .btn-row{justify-content:center;margin-top:var(--s-6)}
.finalcta__note{font-size:.88rem;color:#9FB0CC;margin-top:var(--s-5)}

/* ---------- footer ---------- */
.footer{background:var(--navy-900);color:#A9B8D2;font-size:.94rem;padding-block:var(--s-8) var(--s-5)}
.footer a{color:#DDE4F0;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;gap:var(--s-6)}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.footer__logo{height:40px;width:auto;margin-bottom:var(--s-4)}
.footer h4{color:#fff;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer__social{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
.footer__social a{width:42px;height:42px;border-radius:var(--r);background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:#fff}
.footer__social a:hover{background:var(--red)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s-7);padding-top:var(--s-5);
  font-size:.83rem;line-height:1.65;display:grid;gap:var(--s-3)}
@media (min-width:900px){.footer__bottom{grid-template-columns:1fr auto;align-items:center}}
.footer__creds{font-family:var(--font-mono);font-size:.82rem;color:#8FA2C0;letter-spacing:.02em}
.footer__addr{font-style:normal;font-size:.83rem;color:#A9B8D2;margin-top:6px}

/* ---------- blog ---------- */
.postcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);height:100%}
.postcard__media{display:block;background:var(--navy-800);overflow:hidden}
.postcard__media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .45s ease}
.postcard:hover .postcard__media img{transform:scale(1.04)}
.postcard__body{padding:var(--s-5);display:flex;flex-direction:column;flex:1}
.postcard__meta{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
  font-size:.82rem;color:var(--muted);margin:0 0 var(--s-3)}
.postcard h3{font-size:1.18rem;margin:0 0 var(--s-3);line-height:1.25}
.postcard h3 a{color:var(--navy-800);text-decoration:none}
.postcard h3 a:hover{color:var(--red)}
.postcard p{color:var(--muted);font-size:.97rem;margin:0}
.postcard .card__link{margin-top:auto;padding-top:var(--s-4);color:var(--navy);font-weight:700;
  font-family:var(--font-display);display:inline-flex;gap:6px;align-items:center;font-size:.94rem}
@media (min-width:900px){
  .postcard--featured{flex-direction:row;align-items:stretch}
  .postcard--featured .postcard__media{flex:0 0 55%}
  .postcard--featured .postcard__media img{height:100%;aspect-ratio:auto;min-height:340px}
  .postcard--featured .postcard__body{padding:var(--s-7)}
  .postcard--featured h3{font-size:1.75rem;letter-spacing:-.02em}
  .postcard--featured p{font-size:1.05rem}
}

/* corpo do artigo importado do WordPress */
.post-hero{border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s-7);box-shadow:var(--shadow)}
.post-hero img{width:100%;display:block}
.post-body{font-size:1.08rem;line-height:1.75;color:var(--ink-soft)}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 var(--s-5)}
.post-body h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);margin:var(--s-8) 0 var(--s-4)}
.post-body h3{font-size:1.24rem;margin:var(--s-7) 0 var(--s-3)}
.post-body ul,.post-body ol{margin:0 0 var(--s-5);padding-left:24px}
.post-body li{margin-bottom:10px}
.post-body a{font-weight:600}
.post-body strong{color:var(--navy-800)}
.post-body img{border-radius:var(--r);margin:var(--s-5) 0}
.post-body blockquote{margin:var(--s-6) 0;padding:var(--s-4) var(--s-5);border-left:5px solid var(--red);
  background:var(--canvas);border-radius:0 var(--r) var(--r) 0;font-size:1.05rem;color:var(--ink)}
.post-note{background:var(--red-100);border:1px solid rgba(188,32,37,.28);border-radius:var(--r);
  padding:var(--s-4) var(--s-5);font-size:.95rem;color:var(--ink);margin:0 0 var(--s-6)}

.postnav{display:grid;gap:var(--s-3);margin-top:var(--s-8);border-top:1px solid var(--line);padding-top:var(--s-6)}
@media (min-width:700px){.postnav{grid-template-columns:1fr 1fr}}
.postnav__item{display:block;padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;background:#fff}
.postnav__item:hover{border-color:var(--navy);background:var(--canvas)}
.postnav__item span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:4px}
.postnav__item b{color:var(--navy-800);font-family:var(--font-display);font-size:1rem;line-height:1.3}
.postnav__item--next{text-align:right}

/* ---------- utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.center .btn-row{justify-content:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mt-8{margin-top:var(--s-8)}
.stack>*+*{margin-top:var(--s-4)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--red-100);color:var(--red-600);
  border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:700;font-family:var(--font-display);
  letter-spacing:.04em;text-transform:uppercase}
.pill--navy{background:rgba(9,49,110,.09);color:var(--navy)}

/* revelacao suave ao entrar na viewport */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* impressao */
@media print{
  .header,.topbar,.callbar,.mobilenav,.finalcta,.footer__social{display:none!important}
  body{font-size:12pt;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}