/* =============================================================================
   KITCRED — Financiamento & Refin Veicular
   Landing page  ·  css/style.css
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* surfaces */
  --bg:            #F9FBFE;
  --surface:       #FFFFFF;
  --surface-soft:  #F5F8FC;
  --ice:           #ECF4F8;

  /* text */
  --text:          #101820;
  --text-2:        #5B6572;
  --text-3:        #7C8795;
  --text-inv:      #FFFFFF;

  /* brand */
  --red:           #E22B2B;
  --red-600:       #C91F1F;
  --red-soft:      #FDECEC;
  --green:         #1FAF72;
  --whatsapp:      #25D366;

  /* dark */
  --navy:          #071725;
  --navy-2:        #0B1D2E;
  --footer:        #06131F;

  /* lines */
  --border:        #E6EBEF;
  --border-2:      #EFF3F6;
  --border-inv:    rgba(255,255,255,.12);

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* elevation */
  --sh-card:  0 10px 28px rgba(8,25,40,.05);
  --sh-hover: 0 18px 44px rgba(8,25,40,.10);
  --sh-float: 0 18px 45px rgba(8,25,40,.08);
  --sh-form:  0 24px 60px rgba(10,29,46,.10);

  /* layout */
  --container: 1160px;
  --gutter: 24px;
  --header-h: 86px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font:inherit; color:inherit; }

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. LAYOUT PRIMITIVES ---------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(56px,7vw,104px); position:relative; }

.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;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--red); color:#fff; padding:10px 16px;
  border-radius:var(--r-sm); font-weight:700; transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ---------- 4. TYPOGRAPHY ----------------------------------------------- */
h1,h2,h3{ font-weight:800; letter-spacing:-.035em; color:var(--text); }

h1,.h1{
  font-size:clamp(31px,4.1vw,44px);
  line-height:1.08;
}
h2,.h2{
  font-size:clamp(25px,2.9vw,34px);
  line-height:1.12;
  letter-spacing:-.032em;
}
h3,.h3{
  font-size:clamp(18px,1.6vw,20px);
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.028em;
}

.eyebrow{
  color:var(--red);
  font-size:clamp(13px,1.2vw,15px);
  font-weight:700;
  letter-spacing:-.01em;
}
.lead{
  color:var(--text-2);
  font-size:clamp(14px,1.2vw,15.5px);
  line-height:1.72;
  font-weight:500;
}

/* red rule under / over a title */
.rule{
  display:block; width:44px; height:3px;
  background:var(--red); border-radius:2px;
}
.rule--center{ margin-inline:auto; }

.section-head{ text-align:center; }
.section-head h2{ margin-bottom:14px; }
.section-head .lead{ max-width:620px; margin-inline:auto; }
.section-head .rule{ margin-top:14px; }

/* ---------- 5. BUTTONS -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:15px; letter-spacing:-.015em;
  padding:15px 26px; min-height:52px;
  border-radius:var(--r-md);
  transition:background .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--primary{
  background:var(--red); color:#fff;
  box-shadow:0 10px 24px rgba(226,43,43,.26);
}
.btn--primary:hover{ background:var(--red-600); transform:translateY(-2px); box-shadow:0 16px 32px rgba(226,43,43,.32); }
.btn--primary:active{ transform:translateY(0); }

.btn--white{
  background:#fff; color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(8,25,40,.07);
}
.btn--white:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(8,25,40,.11); border-color:#DBE3EA; }
.btn--white .wa{ color:var(--whatsapp); }

.btn--ghost{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.34);
}
.btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.btn--ghost .wa{ color:#fff; }

.btn--sm{ min-height:44px; padding:11px 20px; font-size:14px; border-radius:10px; }
.btn--block{ width:100%; }

.btn[disabled],.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn-label{ opacity:.55; }
.btn .spinner{
  display:none; width:18px; height:18px; flex:none;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}
.btn.is-loading .spinner{ display:block; }
.btn.is-loading .arrow{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 6. HEADER --------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--border-2);
  box-shadow:0 6px 22px rgba(8,25,40,.06);
}
.header-row{
  height:var(--header-h);
  display:flex; align-items:center; gap:20px;
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:30px; width:auto; transition:height .3s var(--ease); }
.site-header.is-scrolled .brand img{ height:27px; }

.main-nav{ display:flex; align-items:center; gap:clamp(14px,2.1vw,30px); margin-inline:auto; }
.main-nav > a,
.main-nav .nav-drop > button{
  display:inline-flex; align-items:center; gap:5px;
  font-size:14.5px; font-weight:600; color:#2B3542;
  letter-spacing:-.012em; padding:8px 2px;
  position:relative; transition:color .2s var(--ease);
}
.main-nav > a::after,
.main-nav .nav-drop > button::after{
  content:""; position:absolute; left:2px; right:2px; bottom:2px; height:2px;
  background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.main-nav > a:hover, .main-nav .nav-drop > button:hover{ color:var(--red); }
.main-nav > a:hover::after, .main-nav .nav-drop > button:hover::after{ transform:scaleX(1); }
.main-nav .chev{ width:14px; height:14px; transition:transform .25s var(--ease); }

.nav-drop{ position:relative; }
.nav-drop-menu{
  position:absolute; top:calc(100% + 12px); left:-14px; min-width:246px;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 20px 44px rgba(8,25,40,.13);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop:hover .chev, .nav-drop:focus-within .chev{ transform:rotate(180deg); }
.nav-drop-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:600; color:#2B3542;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-drop-menu a:hover{ background:var(--red-soft); color:var(--red); }
.nav-drop-menu a svg{ width:17px; height:17px; color:var(--red); flex:none; }

.header-actions{ display:flex; align-items:center; gap:14px; flex:none; }
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:50%; color:var(--whatsapp);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn svg{ width:23px; height:23px; }
.icon-btn:hover{ background:rgba(37,211,102,.12); transform:scale(1.08); }

.burger{ display:none; width:44px; height:44px; place-items:center; border-radius:10px; color:var(--text); }
.burger svg{ width:24px; height:24px; }
.burger:hover{ background:var(--surface-soft); }

/* mobile drawer */
.nav-backdrop{
  position:fixed; inset:0; z-index:95; background:rgba(7,23,37,.5);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  backdrop-filter:blur(2px);
}
body.nav-open .nav-backdrop{ opacity:1; visibility:visible; }
.mobile-nav[hidden]{ display:none; }
.mobile-nav{
  position:fixed; top:0; right:0; z-index:96;
  width:min(340px,86vw); height:100dvh;
  background:#fff; padding:22px 22px 34px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(102%); transition:transform .34s var(--ease);
  overflow-y:auto; box-shadow:-16px 0 50px rgba(8,25,40,.18);
}
body.nav-open .mobile-nav{ transform:translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mobile-nav-top img{ height:26px; }
.mobile-nav a.m-link{
  padding:14px 4px; font-size:17px; font-weight:700; letter-spacing:-.02em;
  border-bottom:1px solid var(--border-2);
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.mobile-nav a.m-link:hover{ color:var(--red); padding-left:8px; }
.mobile-nav .btn{ margin-top:22px; }
.mobile-nav .m-wa{
  margin-top:10px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:14.5px; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-md); min-height:50px;
}
.mobile-nav .m-wa svg{ width:19px; height:19px; color:var(--whatsapp); }

/* ---------- 7. HERO ----------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-top:clamp(38px,5.2vw,62px);
  padding-bottom:0;
  background:
    radial-gradient(120% 88% at 50% 6%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    radial-gradient(78% 62% at 78% 34%, rgba(255,232,232,.62) 0%, rgba(255,232,232,0) 62%),
    linear-gradient(180deg, #DCE7F1 0%, #E6EEF5 34%, #EFF3F7 70%, #E9EDF2 100%);
}
/* soft reflective floor */
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%; z-index:-2;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.40) 44%, rgba(233,239,245,.86) 82%, var(--bg) 100%);
  pointer-events:none;
}
.hero-skyline{
  position:absolute; z-index:-3; left:50%; transform:translateX(-50%);
  bottom:14%; width:min(920px,88%); height:auto;
  opacity:.07; color:#3E566C; pointer-events:none; filter:blur(3.4px);
  -webkit-mask-image:radial-gradient(58% 118% at 50% 118%, #000 24%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image:radial-gradient(58% 118% at 50% 118%, #000 24%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.hero-car{
  position:absolute; z-index:-1; bottom:0; pointer-events:none;
  width:clamp(240px,28.5vw,520px); height:auto;
  filter:drop-shadow(0 26px 34px rgba(20,38,56,.14));
}
.hero-car--left{ left:0; }
.hero-car--right{ right:0; }

.hero-inner{
  position:relative; z-index:2;
  text-align:center;
  max-width:760px; margin-inline:auto;
  padding-bottom:clamp(30px,9.6vw,132px);
}
.hero-inner .eyebrow{ margin-bottom:14px; }
.hero-inner h1{ margin-bottom:18px; }
.hero-inner h1 .ln{ display:block; }
.hero-sub{
  max-width:592px; margin:0 auto 26px;
  color:#4E5967; font-size:clamp(13.5px,1.15vw,15px); line-height:1.72; font-weight:500;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* mini benefícios */
.hero-mini{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:880px; margin:0 auto;
  padding-bottom:clamp(64px,6.4vw,88px);
}
.hero-mini li{
  display:flex; align-items:center; gap:9px;
  padding-inline:9px;
  font-size:13px; font-weight:700; color:#202934; letter-spacing:-.02em;
  line-height:1.34;
  text-shadow:0 1px 10px rgba(255,255,255,.8), 0 0 3px rgba(255,255,255,.65);
}
.hero-mini li + li{ border-left:1px solid rgba(97,120,142,.18); }
.hero-mini svg{ width:22px; height:22px; flex:none; color:var(--red); }
.hero-mini li.is-green svg{ color:var(--green); }

/* stats card — straddles the hero bottom edge */
.stats-band{
  position:relative; z-index:6;
  margin-top:calc(-1 * clamp(30px,4.2vw,56px));
}
.stats-card{
  background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--sh-float);
  border:1px solid rgba(232,238,243,.9);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:clamp(20px,2.4vw,30px) clamp(14px,2vw,26px);
}
.stat{ display:flex; align-items:center; gap:14px; padding-inline:clamp(8px,1.6vw,22px); }
.stat + .stat{ border-left:1px solid var(--border-2); }
.stat svg{ width:clamp(30px,3vw,38px); height:clamp(30px,3vw,38px); flex:none; color:var(--text); stroke-width:1.6; }
.stat b{
  display:block; font-size:clamp(21px,2.3vw,29px); font-weight:800;
  letter-spacing:-.04em; line-height:1.06; color:var(--text);
}
.stat span{ display:block; font-size:12.5px; color:var(--text-3); font-weight:500; line-height:1.35; margin-top:3px; }

/* ---------- 8. BENEFÍCIOS ---------------------------------------------- */
.benefits{ padding-top:clamp(60px,6.6vw,96px); }
.benefits > .container > .rule{ margin-bottom:clamp(26px,3vw,40px); }
.benefits-panel{
  background:linear-gradient(180deg,#F4F7FC 0%, #F8FAFD 68%, var(--bg) 100%);
  border-radius:26px;
  padding:clamp(28px,3.6vw,50px) clamp(18px,2.6vw,34px) clamp(30px,3.6vw,48px);
}
.benefits-panel .section-head{ margin-bottom:clamp(26px,3.4vw,42px); }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.bcard{
  background:#fff; border:1px solid #E8EDF1; border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  padding:clamp(24px,2.6vw,32px) clamp(18px,2vw,24px);
  text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-hover); }
.icon-round{
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:50%; background:var(--red-soft); color:var(--red);
  display:grid; place-items:center;
}
.icon-round svg{ width:26px; height:26px; stroke-width:1.7; }
.bcard h3{ margin-bottom:12px; }
.bcard p{ color:var(--text-3); font-size:13.5px; line-height:1.68; font-weight:500; }

/* ---------- 9. SOLUÇÕES ------------------------------------------------- */
.solutions{ background:linear-gradient(180deg,var(--bg) 0%, #FAFCFF 100%); }
.solutions .section-head{ margin-bottom:clamp(26px,3.2vw,40px); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.scard{
  background:#fff; border:1px solid #EAEFF3; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-card);
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.scard:hover{ transform:translateY(-5px); box-shadow:var(--sh-hover); }
.scard-media{ position:relative; aspect-ratio:16/8.2; overflow:hidden; background:#DDE4EA; }
.scard-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.scard:hover .scard-media img{ transform:scale(1.055); }
.scard-badge{
  position:absolute; top:9.4%; left:5.2%;
  width:17.8%; aspect-ratio:1; border-radius:50%;
  background:var(--red); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(226,43,43,.4);
}
.scard-badge svg{ width:48%; height:48%; stroke-width:1.7; }
.scard-body{
  padding:clamp(20px,2.2vw,26px) clamp(18px,2vw,24px) clamp(16px,1.8vw,20px);
  display:flex; flex-direction:column; flex:1; gap:12px;
}
.scard-body h3{ letter-spacing:-.03em; }
.scard-body p{ color:var(--text-3); font-size:13.5px; line-height:1.68; font-weight:500; }
.scard-foot{ margin-top:auto; display:flex; justify-content:flex-end; padding-top:12px; }
.circle-arrow{
  width:40px; height:40px; border-radius:50%;
  border:1px solid #DFE6EC; color:var(--text);
  display:grid; place-items:center;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.circle-arrow svg{ width:17px; height:17px; }
.scard:hover .circle-arrow{ background:var(--red); border-color:var(--red); color:#fff; transform:translateX(3px); }

/* ---------- 10. COMO FUNCIONA + FORM ----------------------------------- */
.process{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#EEF4F9 0%, #E9F1F7 52%, #EFF5F9 100%);
}
.process-photo{
  position:absolute; z-index:0; top:0; right:0; height:100%;
  width:clamp(180px,26vw,380px); object-fit:cover; object-position:center;
  pointer-events:none;
}
.process-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,64px); align-items:start;
}
.process-left h2{ margin-bottom:14px; }
.process-left > .rule{ margin-bottom:clamp(28px,3.4vw,44px); }

.timeline{ position:relative; display:grid; gap:clamp(18px,2.4vw,30px); }
.timeline::before{
  content:""; position:absolute; left:27px; top:34px; bottom:34px;
  width:1.5px; background:linear-gradient(180deg,rgba(120,140,158,0) 0%,rgba(120,140,158,.3) 7%,rgba(120,140,158,.3) 93%,rgba(120,140,158,0) 100%);
}
.step{ position:relative; display:grid; grid-template-columns:56px 30px 1fr; gap:0 12px; align-items:start; }
.step-icon{
  width:56px; height:56px; border-radius:50%;
  background:#fff; color:var(--text);
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(14,36,56,.09);
  position:relative; z-index:1;
}
.step-icon svg{ width:25px; height:25px; stroke-width:1.7; }
.step-num{
  font-size:22px; font-weight:800; color:var(--red);
  letter-spacing:-.04em; line-height:1; padding-top:6px; text-align:center;
}
.step-text h3{ font-size:16.5px; margin-bottom:5px; letter-spacing:-.025em; }
.step-text p{ color:var(--text-3); font-size:13.5px; line-height:1.62; font-weight:500; max-width:280px; }

/* form card */
.form-card{
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-form);
  border:1px solid rgba(233,239,244,.9);
  padding:clamp(24px,2.8vw,34px);
}
.form-card h2{ font-size:clamp(21px,2.1vw,26px); margin-bottom:12px; }
.form-card > .rule{ margin-bottom:clamp(20px,2.4vw,28px); }
.field{ margin-bottom:15px; }
.field > label{
  display:block; font-size:13px; font-weight:600; color:#3B4654;
  margin-bottom:7px; letter-spacing:-.01em;
}
.field .req{ color:var(--red); }
.control{
  width:100%; height:52px; padding:0 15px;
  background:#fff; color:var(--text);
  border:1px solid #DDE4EA; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:500;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  appearance:none;
}
.control::placeholder{ color:#A7B1BC; font-weight:500; }
.control:hover{ border-color:#CBD5DE; }
.control:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,43,43,.10);
}
select.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
  padding-right:42px; cursor:pointer;
}
select.control:invalid,
select.control.is-placeholder{ color:#A7B1BC; }

.field.has-error .control{ border-color:var(--red); background:#FFFBFB; }
.field-error{
  display:none; align-items:center; gap:5px;
  margin-top:6px; font-size:12.5px; font-weight:600; color:var(--red);
}
.field.has-error .field-error{ display:flex; }
.field-error svg{ width:14px; height:14px; flex:none; }

.consent{
  display:flex; gap:10px; align-items:flex-start;
  margin:4px 0 18px; font-size:12px; line-height:1.55; color:var(--text-3); font-weight:500;
}
.consent input{
  width:17px; height:17px; margin:2px 0 0; flex:none;
  accent-color:var(--red); cursor:pointer;
}
.consent a{ color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

.form-card .btn--primary{ justify-content:space-between; }
.form-note{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:14px; font-size:12.5px; font-weight:600; color:var(--text-3);
}
.form-note svg{ width:14px; height:14px; }

.form-success{
  display:none; text-align:center; padding:clamp(14px,2vw,26px) 4px 6px;
}
.form-card.is-done .form-success{ display:block; }
.form-card.is-done form{ display:none; }
.form-success .ok{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:rgba(31,175,114,.12); color:var(--green);
  display:grid; place-items:center;
}
.form-success .ok svg{ width:32px; height:32px; stroke-width:2.2; }
.form-success h3{ font-size:20px; margin-bottom:9px; }
.form-success p{ color:var(--text-3); font-size:14px; line-height:1.66; margin-bottom:20px; }

/* ---------- 11. DEPOIMENTOS -------------------------------------------- */
.testimonials{ background:linear-gradient(180deg,#FAFCFF 0%, #F8FAFD 100%); }
.testimonials .section-head{ margin-bottom:clamp(26px,3.2vw,40px); }
.tcard{
  background:linear-gradient(180deg,#FDFDFE 0%, #F7F9FC 100%);
  border:1px solid #EBEFF3; border-radius:var(--r-lg);
  box-shadow:0 8px 22px rgba(8,25,40,.04);
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,26px);
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-hover); }
.stars{ display:flex; gap:5px; margin-bottom:16px; }
.stars svg{ width:16px; height:16px; color:var(--red); }
.tcard blockquote{
  margin:0 0 auto; color:#3D4855; font-size:13.8px; line-height:1.78; font-weight:500;
}
.tcard-author{ display:flex; align-items:center; gap:13px; margin-top:24px; }
.tcard-author img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 4px 12px rgba(8,25,40,.12);
}
.tcard-author strong{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; }

.trust-banner{
  margin-top:clamp(18px,2.4vw,30px);
  background:linear-gradient(180deg,#F2F6FB 0%, #EDF3F9 100%);
  border:1px solid #E7EDF3; border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px) clamp(18px,2.4vw,32px);
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.trust-banner svg{ width:38px; height:38px; flex:none; color:var(--red); stroke-width:1.6; }
.trust-banner p{
  font-size:clamp(14px,1.3vw,16px); font-weight:600; color:#28323E;
  line-height:1.56; max-width:520px; letter-spacing:-.015em;
}

/* ---------- 12. FAQ ----------------------------------------------------- */
.faq{ background:linear-gradient(180deg,#F8FAFD 0%, #F5F9FC 100%); }
.faq .section-head{ margin-bottom:clamp(24px,3vw,38px); }
.accordion{ display:grid; gap:12px; max-width:1000px; margin-inline:auto; }
.acc-item{
  background:#fff; border:1px solid #EAEFF3; border-radius:var(--r-md);
  box-shadow:0 4px 14px rgba(8,25,40,.035);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.acc-item:hover{ border-color:#DCE4EB; box-shadow:0 8px 22px rgba(8,25,40,.06); }
.acc-item.is-open{ box-shadow:0 10px 26px rgba(8,25,40,.07); }
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(17px,1.9vw,22px) clamp(18px,2vw,26px);
  text-align:left; font-size:clamp(14.5px,1.4vw,16px); font-weight:800;
  letter-spacing:-.025em; color:var(--text); line-height:1.4;
}
.acc-plus{ position:relative; width:20px; height:20px; flex:none; }
.acc-plus::before,.acc-plus::after{
  content:""; position:absolute; left:50%; top:50%; background:#2B3542; border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .3s var(--ease), background .2s var(--ease);
}
.acc-plus::before{ width:17px; height:2.2px; }
.acc-plus::after{ width:2.2px; height:17px; }
.acc-item.is-open .acc-plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.acc-item.is-open .acc-plus::before{ background:var(--red); }
.acc-panel{
  overflow:hidden; height:0;
  transition:height .32s var(--ease);
}
.acc-panel-inner{
  padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,22px);
  color:var(--text-3); font-size:13.8px; line-height:1.72; font-weight:500; max-width:840px;
}

/* ---------- 13. CTA FINAL ---------------------------------------------- */
.final-cta{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy);
  padding-block:clamp(46px,6.2vw,86px) 0;
}
.final-cta-skyline{
  position:absolute; z-index:0; left:-2%; bottom:16%;
  width:78%; height:auto; color:#8FB4D6; opacity:.10; pointer-events:none;
}
.final-cta-car{
  position:absolute; z-index:1; right:0; bottom:0;
  width:clamp(400px,58vw,880px); height:100%; object-fit:cover; object-position:left bottom;
  pointer-events:none;
}
.final-cta::before{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,17,29,.97) 0%, rgba(5,17,29,.92) 34%, rgba(5,17,29,.66) 56%, rgba(5,17,29,.28) 78%, rgba(5,17,29,.16) 100%);
}
.final-cta > .container{ position:relative; z-index:3; }
.final-cta-inner{ position:relative; max-width:620px; padding-bottom:clamp(40px,5.4vw,74px); }
.final-cta h2{ color:#fff; margin-bottom:16px; }
.final-cta > .container > .final-cta-inner > .rule{ margin-bottom:18px; }
.final-cta p{
  color:#B7C4D0; font-size:clamp(13.5px,1.2vw,15px); line-height:1.72;
  max-width:520px; margin-bottom:clamp(22px,2.6vw,32px); font-weight:500;
}
.final-cta-btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* contatos rápidos */
.quick-contacts{
  position:relative; z-index:3;
  background:rgba(4,13,22,.62);
  border-top:1px solid var(--border-inv);
  backdrop-filter:blur(3px);
}
.quick-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
  padding-block:clamp(22px,2.6vw,32px);
}
.qc{ display:flex; align-items:center; gap:14px; }
.qc svg{ width:34px; height:34px; flex:none; color:#fff; stroke-width:1.4; }
.qc .wa{ color:var(--whatsapp); }
.qc b{ display:block; color:#fff; font-size:14.5px; font-weight:800; letter-spacing:-.02em; line-height:1.28; }
.qc span{ display:block; color:#8797A6; font-size:12px; font-weight:500; margin-top:2px; }
a.qc:hover b{ color:var(--whatsapp); }

/* ---------- 14. FOOTER -------------------------------------------------- */
.site-footer{ background:var(--footer); color:#93A2B1; }
.footer-top{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,44px);
  padding-block:clamp(40px,5vw,64px);
}
.footer-brand img{ height:28px; width:auto; margin-bottom:18px; }
.footer-brand p{ font-size:13px; line-height:1.75; max-width:290px; margin-bottom:20px; font-weight:500; }
.socials{ display:flex; gap:10px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-inv); color:#B8C5D2;
  display:grid; place-items:center;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.socials svg{ width:17px; height:17px; }
.socials a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }

.footer-col h4{
  color:#fff; font-size:14.5px; font-weight:800; letter-spacing:-.022em; margin-bottom:16px;
}
.footer-col li + li{ margin-top:11px; }
.footer-col a{
  font-size:13px; font-weight:500;
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.footer-col a:hover{ color:#fff; }
.footer-col .with-icon{ display:flex; align-items:center; gap:10px; }
.footer-col .with-icon svg{ width:16px; height:16px; flex:none; color:#6E8091; }
.footer-col .with-icon:hover svg{ color:var(--red); }

.footer-legal{
  border-top:1px solid var(--border-inv);
  padding-block:20px 24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; font-weight:500;
}
.footer-legal .legal-links{ display:flex; align-items:center; gap:14px; }
.footer-legal .legal-links a:hover{ color:#fff; }
.footer-legal .sep{ color:#3A4B5B; }
.footer-disclaimer{
  border-top:1px solid var(--border-inv);
  padding-block:16px 26px;
  font-size:11.2px; line-height:1.7; color:#6C7C8C; font-weight:500;
}

/* ---------- 15. FLOATING WHATSAPP -------------------------------------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.44);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg{ width:31px; height:31px; }
.wa-float:hover{ transform:scale(1.07); box-shadow:0 16px 38px rgba(37,211,102,.55); }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--whatsapp); animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.65; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%);
  visibility:hidden; pointer-events:none;
  z-index:120; max-width:min(440px,92vw);
  background:var(--navy); color:#fff;
  padding:14px 20px; border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(4,13,22,.4);
  font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  transition:transform .35s var(--ease), visibility .35s;
}
.toast.is-visible{ transform:translate(-50%,0); visibility:visible; }
.toast svg{ width:19px; height:19px; flex:none; color:var(--green); }

/* ---------- 16. REVEAL ON SCROLL --------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); }
.js .reveal{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.js .hero-car--left{ opacity:0; transform:translateX(-46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .hero-car--right{ opacity:0; transform:translateX(46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .hero-car.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal,.js .hero-car{ opacity:1 !important; transform:none !important; transition:none !important; }
  .wa-float::after{ animation:none; }
}

/* =============================================================================
   17. RESPONSIVE
   ========================================================================== */

/* --- ≤1180px : tighter hero cars ---------------------------------------- */
@media (max-width:1180px){
  .hero-car{ width:clamp(260px,34vw,430px); }
  .hero-car--left{ left:-64px; }
  .hero-car--right{ right:-70px; }
  .main-nav{ gap:16px; }
  .main-nav > a, .main-nav .nav-drop > button{ font-size:13.6px; }
}

/* --- ≤1024px : tablet ---------------------------------------------------- */
@media (max-width:1024px){
  :root{ --header-h:76px; }
  .main-nav{ display:none; }
  .burger{ display:grid; }
  .header-actions{ margin-left:auto; }

  .hero{ padding-top:34px; }
  .hero-inner{ max-width:620px; padding-bottom:20px; }
  .hero-inner h1 .ln{ display:inline; }
  .hero-car{ position:relative; width:auto; bottom:auto; left:auto; right:auto; z-index:1; }
  /* composição sangra de ponta a ponta: anula o padding do container em vez de
     usar 100vw, que somaria a largura da barra de rolagem                    */
  .hero-cars-mobile{
    position:relative; z-index:1;
    display:flex; align-items:flex-end; justify-content:center;
    gap:0;
    margin:8px calc(-1 * var(--gutter)) 0;
    max-width:none; width:auto;
    /* só desvanece no topo e na base — as laterais encostam na borda da tela,
       onde as próprias imagens já têm corte reto (como no desktop)           */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);
  }
  /* 59% + 59% - 9% - 9% = 100% da largura: sem sobra branca nos lados */
  .hero-cars-mobile .hero-car{ width:59%; filter:drop-shadow(0 18px 24px rgba(20,38,56,.16)); }
  .hero-cars-mobile .hero-car--left{ margin-right:-9%; }
  .hero-cars-mobile .hero-car--right{ margin-left:-9%; }
  .hero-skyline{ bottom:34%; opacity:.1; }

  .hero-mini{ grid-template-columns:repeat(2,1fr); gap:16px 0; max-width:600px; padding-bottom:56px; }
  .hero-mini li:nth-child(odd){ border-left:0; }
  .hero-mini li:nth-child(3),.hero-mini li:nth-child(4){ padding-top:16px; border-top:1px solid rgba(97,120,142,.16); }

  .stats-card{ grid-template-columns:repeat(2,1fr); gap:20px 0; }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(3),.stat:nth-child(4){ padding-top:20px; border-top:1px solid var(--border-2); }

  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-3 > .scard:last-child{ grid-column:1 / -1; }
  .grid-3 > .scard:last-child .scard-media{ aspect-ratio:16/6.4; }

  .process-grid{ grid-template-columns:1fr; gap:34px; }
  .process-photo{ display:none; }

  .final-cta-inner{ max-width:100%; }
  .final-cta-car{ width:78%; opacity:.85; }
  .final-cta-skyline{ width:96%; bottom:26%; }
  .quick-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }

  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .footer-brand{ grid-column:1 / -1; }
}

/* --- ≤768px : mobile ----------------------------------------------------- */
@media (max-width:600px){
  .header-actions > .btn{ display:none; }
  .brand img{ height:26px; }
  .site-header.is-scrolled .brand img{ height:24px; }
  .header-actions{ gap:6px; }
}

@media (max-width:768px){
  :root{ --gutter:20px; }
  body{ font-size:15.5px; }

  .hero{
    padding-top:26px;
    background:
      radial-gradient(130% 74% at 50% 4%, #FFFFFF 0%, rgba(255,255,255,0) 56%),
      linear-gradient(180deg,#DEE9F2 0%, #E9F0F6 40%, #F1F5F8 78%, #EBEFF3 100%);
  }
  .hero-inner{ max-width:100%; }
  .hero-inner h1{ font-size:clamp(29px,8.4vw,38px); letter-spacing:-.038em; }
  .hero-sub{ max-width:100%; margin-bottom:22px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .hero-cars-mobile{ margin-top:16px; }
  .hero-mini{ padding-bottom:46px; }
  .hero-mini li{ font-size:12.8px; padding-inline:6px; gap:9px; }
  .hero-mini svg{ width:21px; height:21px; }

  .stats-card{ padding:20px 14px; }
  .stat{ padding-inline:8px; gap:11px; }

  .benefits{ padding-top:66px; }
  .benefits-panel{ border-radius:20px; padding-inline:14px; }
  .grid-4,.grid-3{ grid-template-columns:1fr; gap:16px; }
  .grid-3 > .scard:last-child .scard-media{ aspect-ratio:16/8.2; }

  .timeline::before{ left:23px; }
  .step{ grid-template-columns:48px 26px 1fr; }
  .step-icon{ width:48px; height:48px; }
  .step-icon svg{ width:22px; height:22px; }
  .step-num{ font-size:19px; padding-top:4px; }
  .step-text p{ max-width:none; }

  .form-card{ padding:22px 18px; border-radius:14px; }
  .control{ height:52px; }

  .trust-banner{ flex-direction:column; text-align:center; gap:14px; }

  .final-cta{ padding-top:44px; }
  .final-cta-car{
    width:100%; height:52%; top:auto; bottom:0;
    object-position:center bottom; opacity:.42;
  }
  .final-cta::before{
    background:linear-gradient(180deg, rgba(5,17,29,.96) 0%, rgba(5,17,29,.9) 52%, rgba(5,17,29,.8) 100%);
  }
  .final-cta-inner{ padding-bottom:150px; }
  .final-cta-btns{ flex-direction:column; align-items:stretch; }
  .final-cta-btns .btn{ width:100%; }
  .quick-grid{ grid-template-columns:1fr; gap:18px; }

  .footer-top{ grid-template-columns:1fr; gap:30px; }
  .footer-brand p{ max-width:none; }
  .footer-legal{ flex-direction:column; align-items:flex-start; gap:10px; }

  .wa-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .wa-float svg{ width:28px; height:28px; }
}

@media (max-width:420px){
  .hero-mini{ grid-template-columns:1fr; }
  .hero-mini li:nth-child(n+2){ padding-top:13px; border-top:1px solid rgba(97,120,142,.16); border-left:0; }
  .stats-card{ grid-template-columns:1fr; }
  .stat:nth-child(n+2){ padding-top:16px; border-top:1px solid var(--border-2); border-left:0; }
}

/* =============================================================================
   18. BARRA FLUTUANTE — VENDA DO TEMPLATE
   Aparece depois que o visitante rola a hero. Mobile-first: os blocos são
   declarados na ordem em que aparecem no telefone e vão se acomodando em
   linha única conforme a largura cresce.
   ========================================================================== */
:root{
  --sb-slate:  #46566C;
  --sb-slate-2:#3B4A5E;
  --sb-lime:   #A6E635;
  --sb-mute:   #A7B6C6;
  --sb-h: 100px;                 /* reserva p/ FAB e rodapé (o JS mede e ajusta) */
}

.salesbar{
  position:fixed; z-index:95;
  left:10px; right:10px; bottom:10px;
  transform:translateY(calc(100% + 18px));
  opacity:0; visibility:hidden;
  transition:transform .5s var(--ease), opacity .4s var(--ease), visibility .5s;
  pointer-events:none;
}
.salesbar.is-visible{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
.salesbar[hidden]{ display:none; }

.sb-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "copy  copy"
    "price btn";
  align-items:center;
  gap:9px 12px;
  padding:11px 12px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(78,94,116,.97) 0%, rgba(59,74,94,.97) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 -2px 0 rgba(255,255,255,.06) inset,
             0 18px 44px rgba(6,19,31,.38),
             0 4px 14px rgba(6,19,31,.24);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}

/* selo "Modelo disponível" — só a partir de 720px, onde há altura sobrando */
.sb-badge{
  grid-area:badge;
  display:none;                    /* volta como inline-flex a partir de 720px */
  align-items:center; gap:7px;
  justify-self:start;
  padding:6px 13px 6px 11px;
  border-radius:var(--r-pill);
  background:rgba(166,230,53,.14);
  border:1px solid rgba(166,230,53,.34);
  color:#C9F16E;
  font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap;
}
.sb-badge i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--sb-lime);
  box-shadow:0 0 0 3px rgba(166,230,53,.22);
  animation:sbPulse 2.2s ease-in-out infinite;
}
@keyframes sbPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(166,230,53,.22); }
  50%    { box-shadow:0 0 0 6px rgba(166,230,53,.05); }
}

/* texto */
.sb-copy{ grid-area:copy; min-width:0; }
.sb-head{
  font-size:12.5px; line-height:1.3; font-weight:600; color:#EAF1F8;
  letter-spacing:-.02em;
}
.sb-head strong{ color:var(--sb-lime); font-weight:800; }
.sb-ask{ display:none; }
.sb-sub{
  display:none;
  margin-top:3px;
  font-size:12px; line-height:1.45; color:var(--sb-mute); font-weight:500;
}

/* preço */
.sb-price{ grid-area:price; display:flex; flex-direction:column; justify-self:start; }
.sb-price-label{
  font-size:9px; font-weight:700; color:var(--sb-mute);
  letter-spacing:.1em; text-transform:uppercase; line-height:1.2;
}
.sb-price-value{
  font-size:19px; font-weight:800; color:#fff;
  letter-spacing:-.035em; line-height:1.15;
}

/* botão gradiente da marca */
.sb-btn{
  grid-area:btn;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 16px;
  border-radius:11px;
  font-size:13.5px; font-weight:800; letter-spacing:-.02em; color:#fff;
  background:linear-gradient(95deg, #1B6AE4 0%, #7B3FD4 50%, #E0359C 100%);
  box-shadow:0 8px 22px rgba(123,63,212,.42), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition:filter .25s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap;
  justify-self:end;
}
.sb-btn svg{ width:18px; height:18px; flex:none; }
.sb-btn:hover{
  filter:saturate(1.14) brightness(1.07);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(123,63,212,.55), 0 0 0 1px rgba(255,255,255,.16) inset;
}
.sb-btn:active{ transform:translateY(0); }

/* o FAB do WhatsApp sobe para não colidir com a barra */
body.sb-on .wa-float{ bottom:calc(var(--sb-h) + 14px); }
/* o rodapé reserva espaço para a barra nunca cobrir texto */
.site-footer .footer-disclaimer{ padding-bottom:calc(var(--sb-h) + 12px); }

/* ---- ≥ 440px : mais respiro no botão ------------------------------------- */
@media (min-width:440px){
  .sb-inner{ padding:13px 14px; gap:10px 14px; }
  .sb-head{ font-size:13.5px; }
  .sb-price-value{ font-size:21px; }
  .sb-btn{ padding:12px 22px; font-size:14px; }
}

/* ---- ≥ 720px (e viewport alta) : selo + texto, preço + botão em 2 linhas -- */
@media (min-width:720px) and (min-height:520px){
  :root{ --sb-h:146px; }
  .salesbar{ left:16px; right:16px; bottom:14px; }
  .sb-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "badge copy  copy"
      "badge price btn";
    gap:10px 16px;
    padding:15px 16px;
  }
  .sb-badge{ display:inline-flex; grid-area:badge; align-self:center; }
  .sb-head{ font-size:14.5px; }
  .sb-sub{ display:block; }
  .sb-price{ align-items:flex-end; text-align:right; justify-self:end; }
  .sb-price-value{ font-size:22px; }
}

/* ---- ≥ 1024px : linha única, igual ao desktop ----------------------------- */
@media (min-width:1024px) and (min-height:520px){
  :root{ --sb-h:98px; }
  .salesbar{
    left:50%; right:auto; bottom:18px;
    width:min(1160px, calc(100vw - 40px));
    transform:translate(-50%, calc(100% + 22px));
  }
  .salesbar.is-visible{ transform:translate(-50%,0); }
  .sb-inner{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"badge copy price btn";
    gap:0 22px;
    padding:13px 16px 13px 15px;
    border-radius:15px;
  }
  .sb-head{ font-size:15px; }
  .sb-head strong{ white-space:nowrap; }
  .sb-sub{ display:none; }              /* volta a aparecer a partir de 1200px */
  .sb-price-value{ font-size:24px; }
  .sb-btn{ min-height:50px; padding:13px 26px; font-size:14.5px; border-radius:12px; }
  body.sb-on .wa-float{ bottom:calc(var(--sb-h) + 20px); }
}


/* ---- ≥ 1200px : cabe a pergunta e a linha de apoio, como no layout final -- */
@media (min-width:1200px) and (min-height:520px){
  .sb-ask{ display:inline; color:#E4ECF4; }
  .sb-head strong{ margin-left:4px; white-space:normal; }
  .sb-sub{ display:block; font-size:12.5px; }
  .sb-inner{ gap:0 26px; padding-inline:18px; }
  .sb-price-value{ font-size:26px; }
}
/* ---- ≥ 1360px : sobra espaço à direita da barra — o FAB volta para o canto
        inferior direito, alinhado à mesma linha de base, sem vão embaixo ---- */
@media (min-width:1360px){
  body.sb-on .wa-float{ bottom:18px; }
}


/* ---- viewport curta (telefone deitado): só preço + botão ----------------- */
@media (max-height:500px){
  .salesbar{ left:8px; right:8px; bottom:8px; width:auto; transform:translateY(calc(100% + 16px)); }
  .salesbar.is-visible{ transform:none; }
  .sb-inner{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"price copy btn";
    gap:0 14px; padding:8px 12px; border-radius:12px;
    align-items:center;
  }
  .sb-badge{ display:none; }
  .sb-copy{ min-width:0; }
  .sb-head{ font-size:12px; line-height:1.25; }
  .sb-head strong{ margin-left:0; }
  .sb-ask, .sb-sub{ display:none; }
  .sb-price{ justify-self:start; align-items:flex-start; text-align:left; }
  .sb-price-label{ font-size:8.5px; }
  .sb-price-value{ font-size:17px; }
  .sb-btn{ min-height:40px; padding:9px 16px; font-size:13px; border-radius:10px; }
}

@media (prefers-reduced-motion:reduce){
  .salesbar{ transition:opacity .2s linear, visibility .2s; }
  .sb-badge i{ animation:none; }
}

/* =============================================================================
   19. CORREÇÕES PARA TOQUE / TELEFONE
   ========================================================================== */

/* ---- 19.1 barra e FAB saem de cena enquanto o teclado está aberto -------- */
/* Sem isso a barra fixa cobre justamente os campos que o visitante preenche. */
body.kb-open .salesbar{
  transform:translateY(calc(100% + 22px)) !important;
  opacity:0 !important; pointer-events:none !important;
}
body.kb-open .wa-float{
  transform:translateY(calc(100% + 30px)); opacity:0; pointer-events:none;
}
.wa-float{ transition:transform .25s var(--ease), opacity .25s var(--ease), box-shadow .25s var(--ease), bottom .3s var(--ease); }

/* ---- 19.2 dispositivos sem hover ---------------------------------------- */
@media (hover:none){
  /* no Android o :hover "cola" depois do toque e deixa cards deslocados */
  .bcard:hover, .scard:hover, .tcard:hover{ transform:none; box-shadow:var(--sh-card); }
  .scard:hover .scard-media img{ transform:none; }
  .btn:hover, .socials a:hover, .icon-btn:hover, .wa-float:hover{ transform:none; }
  .btn--primary:hover{ background:var(--red); box-shadow:0 10px 24px rgba(226,43,43,.26); }
  .sb-btn:hover{ filter:none; }
  .acc-item:hover{ box-shadow:0 4px 14px rgba(8,25,40,.035); }
  .mobile-nav a.m-link:hover{ padding-left:4px; color:inherit; }

  /* sem hover, a seta precisa nascer com a aparência de ação */
  .circle-arrow{ background:var(--red); border-color:var(--red); color:#fff; }

  /* feedback no toque, no lugar do hover */
  .btn:active{ transform:scale(.985); }
  .scard:active, .bcard:active{ transform:scale(.995); }
  .acc-trigger:active{ background:var(--surface-soft); }
}

/* ---- 19.3 alvos de toque ------------------------------------------------- */
@media (max-width:1024px){
  /* WCAG 2.5.8 / Material: mínimo confortável de 44px */
  .footer-col a{
    display:flex; align-items:center; min-height:44px; padding-block:2px;
  }
  .footer-col li + li{ margin-top:0; }
  .socials a{ width:46px; height:46px; }
  .socials{ gap:12px; }
  .footer-legal .legal-links a{
    display:inline-flex; align-items:center; min-height:44px; padding-inline:2px;
  }
  .qc{ min-height:56px; }
  .brand{ min-height:44px; }
  .circle-arrow{ width:46px; height:46px; }
  .circle-arrow svg{ width:19px; height:19px; }
  .icon-btn{ width:46px; height:46px; }
  .consent{ gap:12px; align-items:center; padding-block:4px; }
  .consent input{ width:24px; height:24px; margin-top:0; }
  .nav-drop-menu a{ min-height:46px; }
  .acc-trigger{ min-height:56px; }
}

/* ---- 19.4 hero mais enxuto no telefone ---------------------------------- */
@media (max-width:600px){
  .hero{ padding-top:20px; }
  .hero-inner{ padding-bottom:clamp(20px,5vw,30px); }
  .hero-inner .eyebrow{ margin-bottom:10px; font-size:12.5px; }
  .hero-inner h1{
    font-size:clamp(25px,7.1vw,31px);
    line-height:1.12; letter-spacing:-.04em; margin-bottom:14px;
  }
  .hero-sub{ font-size:13px; line-height:1.62; margin-bottom:18px; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn{ min-height:54px; }
  .hero-cars-mobile{ margin-top:10px; }
  .hero-mini{ padding-bottom:34px; gap:10px 0; }
  .hero-mini li{ font-size:12.5px; }

  .section{ padding-block:clamp(44px,10vw,60px); }
  .benefits{ padding-top:52px; }
  .benefits > .container > .rule{ margin-bottom:20px; }
  .section-head h2{ margin-bottom:10px; }
  .stats-card{ padding:16px 14px; }
  .stat{ gap:12px; }
  .stat + .stat{ padding-top:14px; }
}

/* ---- 19.5 rolagem previsível sob a barra fixa --------------------------- */
html{ scroll-padding-bottom:calc(var(--sb-h) + 12px); }

/* --- print ---------------------------------------------------------------- */
@media print{
  .site-header,.wa-float,.nav-backdrop,.mobile-nav,.hero-car,.process-photo,
  .final-cta-car,.final-cta-skyline,.salesbar{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
}