/* =============================================================
   LOQUIFY — Contrato Aquisição
   Estilos exclusivos da página aquisicao.html
   (depende dos tokens e componentes de styles.css)
   ============================================================= */

/* ---------- Chips do header ---------- */
.header-chips{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 1 auto;   /* pode encolher: com flex:none ele transborda a marca */
  min-width:0;
}
.chip{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
}
.chip b{ color:var(--orange); font-weight:800; }
.chip .ico{ width:15px; height:15px; }
.chip-sep{
  width:1px; height:22px;
  background:var(--line-2);
}
/* Mobile/tablet: só a marca + "Contrato Aquisição", colado nela.
   O selo "Seguro e confiável" some — no desktop os dois voltam. */
@media (max-width:767px){
  .chip-sep,
  .header-chips .chip:last-child{ display:none; }
  .header-chips{
    margin-right:auto;                       /* encosta na marca */
    padding-left:12px;
    border-left:1px solid var(--line-2);
  }
  .chip{ font-size:9.5px; letter-spacing:.05em; gap:6px; }
  .chip .ico{ width:14px; height:14px; }
}
/* muito estreito: só a marca */
@media (max-width:359px){
  .header-chips{ display:none; }
}

/* =============================================================
   HERO
   ============================================================= */
.acq-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:30px 0 34px;
  background:
    radial-gradient(90% 70% at 78% 22%,rgba(29,74,124,.42),transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
/* z-index:auto de propósito: o .wrap traz z-index:2, que criaria um
   contexto de empilhamento e isolaria o "screen" da foto (o fundo
   preto do JPEG voltaria a aparecer). */
.acq-hero-inner{ position:relative; z-index:auto; }

/* mobile: a foto entra como fundo, atrás do texto */
.acq-hero-photo{
  position:absolute;
  right:-14%;
  top:44%;
  translate:0 -50%;
  width:86%;
  max-width:640px;
  z-index:-1;
  opacity:.38;
}
.acq-hero-photo::after{ display:none; }
.acq-hero-photo img{ mask-image:linear-gradient(90deg,transparent,#000 34%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%); }

/* selo circular 0KM */
.acq-seal{
  position:absolute;
  top:-6px;
  right:0;
  width:82px; height:82px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  border:2px solid var(--orange);
  background:rgba(9,26,46,.9);
  box-shadow:0 0 0 5px rgba(240,124,31,.1);
}
.acq-seal b{ font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.acq-seal strong{ font-size:24px; font-weight:900; letter-spacing:-.02em; margin:3px 0; color:var(--orange); }
.acq-seal i{ font-size:8px; font-style:normal; font-weight:600; color:var(--muted); }

/* título */
.acq-title{
  display:flex;
  flex-direction:column;
  margin-right:92px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:1;
}
.acq-title span:first-child{ font-size:clamp(18px,5.6vw,26px); }
.acq-title-mid{ font-size:clamp(22px,6.8vw,34px); margin-top:5px; }
.acq-title-big{ font-size:clamp(30px,9.6vw,45px); margin-top:5px; }

.acq-hero .lead{ margin-top:16px; max-width:27ch; }

/* selos do hero */
.acq-badges{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 10px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.acq-badges li{
  display:flex;
  align-items:center;
  gap:9px;
}
.acq-badge-ico{
  width:32px; height:32px;
  flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--orange);
  border:1px solid rgba(240,124,31,.5);
  background:rgba(240,124,31,.08);
}
.acq-badge-ico .ico{ width:16px; height:16px; }
.acq-badges span span,
.acq-badges li > span:last-child{
  display:flex;
  flex-direction:column;
  font-size:10.5px;
  line-height:1.3;
  color:var(--muted);
}
.acq-badges b{ font-size:11.5px; font-weight:700; color:#fff; }

/* =============================================================
   SEÇÃO PRINCIPAL
   ============================================================= */
.acq-section{
  padding:30px 0 0;
  background:linear-gradient(180deg,var(--bg-2),#091a30);
}

/* ---------- Três fatos ---------- */
.acq-facts{
  display:grid;
  gap:11px;
}
.acq-facts .card{ padding:15px 14px; }
.acq-fact-ico{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  color:var(--orange);
  background:rgba(240,124,31,.1);
  border:1px solid rgba(240,124,31,.35);
  margin-bottom:11px;
}
.acq-fact-ico .ico{ width:19px; height:19px; }
/* :is(h2,h3) — a página usa h2; dentro da home o mesmo bloco usa h3 */
.acq-facts :is(h2,h3){
  margin-top:0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--orange);
  line-height:1.3;
}
.acq-facts p{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.acq-fact-value{
  font-size:26px !important;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--orange) !important;
  margin-top:4px !important;
}

/* ---------- A conta ---------- */
.acq-math{
  margin-top:18px;
  padding:16px 14px;
  border-radius:var(--r);
  border:1px solid rgba(240,124,31,.35);
  background:rgba(240,124,31,.05);
}
.acq-math > :is(h2,h3){
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  color:var(--orange);
  line-height:1.4;
}
.acq-math-grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.acq-math-col{
  padding:12px;
  border-radius:var(--r-sm);
  background:rgba(4,14,26,.55);
  border:1px solid var(--line);
}
.acq-math-tag{
  display:block;
  width:fit-content;
  margin-inline:auto;
  padding:4px 10px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.acq-math-col{ text-align:center; }
.acq-math-col p{
  margin-top:9px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
}
.acq-math-col b{ color:#fff; font-weight:700; }
.acq-math-col mark{
  background:rgba(240,124,31,.16);
  color:var(--orange);
  font-weight:800;
  padding:2px 7px;
  border-radius:6px;
}
.acq-math-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(240,124,31,.22);
  text-align:center;
  font-size:12px;
  line-height:1.4;
  color:var(--muted-2);
}
.acq-math-foot .ico{ width:17px; height:17px; }

/* ---------- Título de bloco ---------- */
.acq-h2{
  margin-top:30px;
  font-size:clamp(16px,4.8vw,20px);
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.3;
}

/* ---------- Planos ---------- */
.acq-plans{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.acq-plan{
  display:block;
  padding:14px;
  border-radius:var(--r);
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.acq-plan:hover{
  border-color:rgba(240,124,31,.55);
  background:var(--card-2);
  transform:translateY(-2px);
}
.acq-plan-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.acq-plan-n{
  display:flex;
  flex-direction:column;
  line-height:.9;
  flex:none;
}
.acq-plan-n b{
  font-size:40px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--orange);
}
.acq-plan-n i{
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:4px;
}
.acq-plan-img{
  width:auto;
  max-height:88px;
  margin-left:auto;
  mix-blend-mode:screen;
  filter:contrast(1.06) saturate(1.05);
}

.acq-plan-lines{
  display:grid;
  gap:9px;
  padding:12px 0;
}
.acq-plan-lines > span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.acq-plan-lines .ico{ width:16px; height:16px; }
.acq-plan-lines b{ color:var(--muted-2); font-weight:700; }
.acq-plan-total{ align-items:baseline !important; }
.acq-plan-total strong{
  font-size:21px;
  font-weight:900;
  letter-spacing:-.025em;
  color:var(--orange);
  margin-left:2px;
}

.acq-plan-caucao{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(240,124,31,.35);
  background:rgba(240,124,31,.07);
}
.acq-plan-caucao > span{ display:flex; flex-direction:column; }
.acq-plan-caucao b{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--orange);
}
.acq-plan-caucao span span,
.acq-plan-caucao > span{
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
}

/* ---------- CTA ---------- */
.acq-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:20px;
  padding:15px 16px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#f68a2a,#e0700f);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 32px -16px rgba(240,124,31,.95);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.acq-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.acq-cta:active{ transform:translateY(0); }
.acq-cta-ico{
  width:46px; height:46px;
  flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  color:var(--orange);
}
.acq-cta-ico .ico{ width:27px; height:27px; }
.acq-cta-text{ display:flex; flex-direction:column; gap:3px; }
.acq-cta-text strong{
  font-size:clamp(14px,4.4vw,18px);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1.15;
}
.acq-cta-text small{
  font-size:11.5px;
  line-height:1.35;
  color:rgba(255,255,255,.9);
}

/* ---------- Encerramento ---------- */
.acq-closer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:22px;
  padding:13px 14px;
  border-radius:var(--r);
  border:1px solid rgba(240,124,31,.35);
  background:rgba(240,124,31,.06);
  font-size:clamp(11.5px,3.4vw,14px);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  color:var(--orange);
  line-height:1.35;
}

.acq-back{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  padding:12px;
  border-radius:var(--r);
  border:1px solid var(--line-2);
  font-size:13px;
  font-weight:600;
  color:var(--muted-2);
  transition:border-color .18s ease,color .18s ease;
}
.acq-back:hover{ border-color:var(--orange); color:#fff; }

/* =============================================================
   BANNER — IPVA E SEGURO DE BRINDE
   ============================================================= */
.acq-banner{
  margin-top:22px;
  padding:20px 16px;
  border-radius:var(--r-lg);
  border:1px solid rgba(240,124,31,.6);
  background:linear-gradient(180deg,#060f1c,#03090f);
}
.acq-banner-lead :is(h2,h3){
  font-size:clamp(28px,8.6vw,40px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.acq-banner-lead > p{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted-2);
}

.acq-banner-items{
  display:grid;
  gap:18px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
}
.acq-banner-item{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.acq-banner-item :is(h3,h4){
  margin-top:0;
  font-size:clamp(13px,4vw,16px);
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--orange);
  line-height:1.2;
}
.acq-banner-item > div > p{
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted-2);
}
.ico-shield{
  width:46px; height:46px;
  flex:none;
  color:var(--orange);
  stroke-width:3.1;
}
.acq-banner-note{
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* =============================================================
   TELAS MAIORES
   ============================================================= */
@media (min-width:640px){
  .chip{ font-size:11px; }
  .acq-badges{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .acq-math-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .acq-plans{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .acq-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .acq-seal{ width:104px; height:104px; }
  .acq-seal strong{ font-size:31px; }
  .acq-seal b,.acq-seal i{ font-size:9px; }
  .acq-title{ margin-right:120px; }

}

@media (min-width:900px){
  /* Desktop: mesma lógica do hero principal — a moto vira coluna de
     verdade, inteira e sem transparência, ao lado do texto. */
  .acq-hero{ padding:64px 0 46px; }
  .acq-hero-inner{
    max-width:var(--wrap);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    grid-template-areas:
      "titulo moto"
      "texto  moto"
      "selos  selos";
    column-gap:44px;
    align-items:center;
  }
  .acq-title{ grid-area:titulo; margin-right:0; }
  .acq-hero .lead{ grid-area:texto; align-self:start; }
  .acq-selos{ grid-area:selos; }

  .acq-hero-photo{
    grid-area:moto;
    position:static;
    translate:none;
    width:100%;
    max-width:none;
    opacity:1;
    z-index:auto;
    align-self:center;
  }
  .acq-hero-photo img{ mask-image:none; -webkit-mask-image:none; }
  .acq-title span:first-child{ font-size:34px; }
  .acq-title-mid{ font-size:46px; }
  .acq-title-big{ font-size:60px; }
  .acq-hero .lead{ font-size:16px; max-width:40ch; }
  .acq-badges{ max-width:760px; }
  .acq-seal{ top:10px; width:126px; height:126px; }
  .acq-seal strong{ font-size:38px; }
  .acq-seal b,.acq-seal i{ font-size:10px; }

  .acq-section{ padding:52px 0 0; }
  .acq-math{ padding:24px; }
  .acq-math > h2{ font-size:15px; }
  .acq-h2{ margin-top:52px; font-size:26px; }
  .acq-plan{ padding:18px; }
  .acq-plan-n b{ font-size:52px; }
  .acq-plan-img{ max-height:110px; }
  .acq-plan-lines > span{ font-size:13px; }
  /* banner IPVA: texto à esquerda, os dois itens à direita */
  .acq-banner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
    align-items:center;
    gap:38px;
    max-width:1040px;
    margin:44px auto 0;
    padding:34px 38px;
  }
  .acq-banner-lead > p{ font-size:15px; }
  .acq-banner-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
    margin-top:0;
    padding-top:0;
    padding-left:38px;
    border-top:0;
    border-left:1px solid rgba(255,255,255,.12);
  }
  .acq-banner-item > div > p{ font-size:14px; }
  .ico-shield{ width:58px; height:58px; }
  .acq-banner-note{ grid-column:1 / -1; margin-top:-10px; }

  /* banner incluso x sua conta */

  .acq-cta{ max-width:760px; margin-inline:auto; padding:20px 26px; gap:18px; }
  .acq-cta-ico{ width:58px; height:58px; }
  .acq-cta-ico .ico{ width:34px; height:34px; }
  .acq-closer{ max-width:760px; margin-inline:auto; }
  .acq-back{ max-width:340px; margin-inline:auto; }
}

/* =============================================================
   SELO "MAIS ESCOLHIDO"
   ============================================================= */
.acq-plan-featured{ padding-top:11px; }
.acq-plan-featured .acq-plan{
  position:relative;
  border-color:var(--orange);
  box-shadow:0 18px 42px -26px rgba(240,124,31,.9);
}
.acq-plan-flag{
  position:absolute;
  top:0;
  left:50%;
  translate:-50% -50%;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 13px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(240,124,31,.95);
}
.acq-plan-flag .ico{ width:13px; height:13px; stroke-width:2.2; }

/* =============================================================
   GARANTIA DE DEVOLUÇÃO
   ============================================================= */
.acq-dev{
  --dev:#3fd07a;
  --dev-dim:#27405a;
  display:grid;
  gap:18px;
  margin-top:20px;
  padding:20px 16px;
  border-radius:var(--r-lg);
  border:1px solid rgba(63,208,122,.55);
  background:linear-gradient(180deg,#061a12,#04120d);
  box-shadow:0 0 34px -14px rgba(63,208,122,.45);
}

.acq-dev-main{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.acq-dev-shield{
  flex:none;
  color:var(--dev);
  filter:drop-shadow(0 0 12px rgba(63,208,122,.5));
}
.acq-dev-shield .ico{ width:58px; height:58px; stroke-width:3.1; }
.acq-dev-copy{ min-width:0; }

.acq-dev-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
}
.acq-dev-q{
  font-size:clamp(15px,4.6vw,19px);
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--dev);
}
.acq-dev-title{
  margin-top:10px;
  font-size:clamp(19px,5.8vw,26px);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1.12;
  color:#fff;
}
.acq-dev-title span{ color:var(--dev); }
.acq-dev-sub{
  margin-top:9px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted-2);
}
.acq-dev-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:fit-content;
  margin-top:14px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid rgba(63,208,122,.5);
  background:rgba(63,208,122,.1);
  font-size:12px;
  font-weight:800;
  color:var(--dev);
}
.acq-dev-pill .ico{ width:17px; height:17px; }

/* ---------- Exemplo ---------- */
.acq-dev-example{
  padding-top:18px;
  border-top:1px solid rgba(63,208,122,.28);
}
.acq-dev-tag{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(63,208,122,.16);
  border:1px solid rgba(63,208,122,.5);
  color:var(--dev);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.acq-dev-example > p{
  margin-top:11px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted-2);
}
.acq-dev-example b{ color:var(--dev); font-weight:800; }

.acq-dev-bar{
  margin-top:14px;
  padding:14px 16px 12px;
  border-radius:var(--r);
  background:rgba(4,14,26,.6);
  border:1px solid var(--line);
}
.acq-dev-bar-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
}
.acq-dev-track{
  position:relative;
  height:20px;
  margin:14px 8px 0;
}
.acq-dev-line,
.acq-dev-line-on{
  position:absolute;
  top:50%;
  height:7px;
  translate:0 -50%;
  border-radius:99px;
}
.acq-dev-line{
  left:0; right:0;
  background:repeating-linear-gradient(90deg,var(--dev-dim) 0 7px,transparent 7px 18px);
}
.acq-dev-line-on{
  left:0; right:50%;
  background:repeating-linear-gradient(90deg,var(--dev) 0 7px,transparent 7px 18px);
}
.acq-dev-node{
  position:absolute;
  top:50%;
  width:13px; height:13px;
  translate:-50% -50%;
  border-radius:50%;
  background:var(--dev);
}
.acq-dev-node.n0{ left:0; }
.acq-dev-node.n50{
  left:50%;
  width:17px; height:17px;
  box-shadow:0 0 0 4px rgba(63,208,122,.22);
}
.acq-dev-node.n100{ left:100%; background:var(--dev-dim); }

.acq-dev-labels{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:9.5px;
  color:var(--muted);
}
.acq-dev-labels span{ display:flex; flex-direction:column; align-items:center; }
.acq-dev-labels span:first-child{ align-items:flex-start; }
.acq-dev-labels span:last-child{ align-items:flex-end; }
.acq-dev-labels b{ font-size:14px; font-weight:900; color:#fff; }
.acq-dev-labels span:first-child b{ color:var(--muted-2); }
.acq-dev-labels span:nth-child(2) b{ color:var(--dev); }

@media (min-width:768px){
  .acq-dev{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:30px;
    max-width:1040px;
    margin-inline:auto;
    padding:28px 30px;
    align-items:center;
  }
  .acq-dev-shield .ico{ width:76px; height:76px; }
  .acq-dev-example{
    padding-top:0;
    padding-left:30px;
    border-top:0;
    border-left:1px solid rgba(63,208,122,.28);
  }
  .acq-dev-sub{ font-size:13.5px; }
}

/* imagem já recortada (alfa): sem o blend usado nas fotos de fundo preto */
.acq-plan-img--cutout{ mix-blend-mode:normal; filter:none; }

/* =============================================================
   GALERIA DA FAN
   ============================================================= */
.fan-galeria{ margin-top:38px; }
.fan-galeria-titulo{
  font-size:clamp(17px,5vw,24px);
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.25;
}
.fan-galeria-sub{
  margin-top:7px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

.fan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.fan-item{
  display:block;
  position:relative;
  width:100%;
  padding:0;
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--card);
  cursor:zoom-in;
  transition:border-color .2s ease;
}
.fan-item:hover{ border-color:rgba(240,124,31,.6); }
.fan-item img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  transition:transform .4s ease;
}
.fan-item:hover img{ transform:scale(1.06); }
.fan-cap{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 11px 9px;
  background:linear-gradient(180deg,transparent,rgba(3,10,19,.94));
  font-size:10.5px;
  font-weight:700;
  line-height:1.25;
  color:#fff;
}

/* CTA com seta */
.acq-cta--seta{ margin-top:20px; }
.acq-cta-arrow{
  width:24px; height:24px;
  flex:none;
  margin-left:6px;
  opacity:.9;
}

@media (min-width:768px){
  .fan-galeria{ margin-top:56px; }
  .fan-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    max-width:1040px;
    margin-inline:auto;
  }
    .fan-cap{ font-size:12px; padding:30px 14px 11px; }
  .fan-galeria-sub{ font-size:14px; }
}

/* =============================================================
   LIGHTBOX
   ============================================================= */
body.lbx-aberto{ overflow:hidden; }

.lbx{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  background:rgba(3,10,19,.95);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* [hidden] precisa vencer o display:flex acima */
.lbx[hidden]{ display:none; }

.lbx-palco{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:min(1100px,100%);
  min-width:0;
}
.lbx-palco img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  border-radius:var(--r);
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px -30px #000;
}
.lbx-palco figcaption{
  font-size:13px;
  font-weight:700;
  color:var(--muted-2);
  text-align:center;
}

.lbx-fechar,
.lbx-nav{
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.lbx-fechar:hover,
.lbx-nav:hover{ background:rgba(240,124,31,.85); border-color:transparent; }

.lbx-nav{ width:44px; height:44px; }
.lbx-nav .ico{ width:22px; height:22px; }
.lbx-fechar{
  position:absolute;
  top:14px; right:14px;
  width:42px; height:42px;
  z-index:2;
}
.lbx-fechar .ico{ width:20px; height:20px; }

@media (max-width:559px){
  /* em tela estreita as setas descem para não roubar largura da foto */
  .lbx{ flex-wrap:wrap; align-content:center; }
  .lbx-palco{ order:1; flex:0 0 100%; }
  .lbx-ant{ order:2; }
  .lbx-prox{ order:3; }
  .lbx-palco img{ max-height:66vh; }
}

@media (min-width:768px){
  .lbx{ gap:18px; padding:26px; }
  .lbx-nav{ width:52px; height:52px; }
  .lbx-fechar{ top:22px; right:22px; width:46px; height:46px; }
}

/* =============================================================
   HERO COM FOTO RECORTADA (página da Fan)
   Só no mobile: a foto com alfa entra como imagem de verdade,
   abaixo dos selos, em vez de fundo a 38% atrás do texto — que
   deixava o recorte nítido com cara de borrão.
   No desktop as regras de grid de >=900px continuam valendo.
   ============================================================= */

/* ---------- Complementos do bloco de devolução ---------- */
.acq-dev-raios{
  display:block;
  width:40px; height:14px;
  margin:0 auto 4px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
}
.acq-dev-q{
  padding-bottom:12px;
  border-bottom:1px solid rgba(63,208,122,.35);
}
.acq-dev-title{ margin-top:12px; }
.acq-dev-sub b{ color:var(--dev); font-weight:800; }

/* "Ficou 24 meses ou mais?" + caixa de resposta, dentro do cartão */
.acq-dev-check{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--dev);
}
.acq-dev-check .ico{ width:22px; height:22px; }
.acq-dev-check i{ font-style:normal; color:#fff; }

.acq-dev-box{
  margin-top:11px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(63,208,122,.6);
  background:rgba(63,208,122,.12);
  text-align:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.25;
  color:#fff;
}
.acq-dev-box span{ color:var(--dev); }

/* faixa de fecho, cruzando as duas colunas */
.acq-dev-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding-top:16px;
  border-top:1px solid rgba(63,208,122,.28);
  text-align:center;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted-2);
}
.acq-dev-foot .ico{ width:19px; height:19px; color:var(--dev); }
.acq-dev-foot b{ color:var(--dev); font-weight:800; }

@media (min-width:768px){
  .acq-dev-foot{ grid-column:1 / -1; font-size:13.5px; }
  .acq-dev-check{ font-size:13.5px; }
  .acq-dev-box{ font-size:14px; }
}

/* ---------- Rótulo acima dos selos do hero ---------- */
.acq-selos-titulo{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
}
/* o rótulo assume a linha divisória, então a lista perde a dela */
.acq-selos-titulo + .acq-badges{
  margin-top:14px;
  padding-top:0;
  border-top:0;
}

/* destaque no card do preço */
.acq-facts .card:first-child{
  border-color:rgba(240,124,31,.5);
  background:rgba(240,124,31,.05);
}

@media (min-width:768px){
  .acq-selos-titulo{ font-size:11.5px; }
}

/* nota dentro do card do preço (CNPJ Frotista) */
.acq-fact-nota{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.18);
}
.acq-fact-nota-ico{
  width:38px; height:38px;
  flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
}
.acq-fact-nota-ico .ico{ width:19px; height:19px; }
.acq-fact-nota p{
  margin-top:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted-2);
}
.acq-fact-nota b{ color:var(--orange); font-weight:800; }


/* Mobile da página da Fan: sem a linha divisória cruzando a moto, e a
   foto sobe na ordem de empilhamento. Os textos ficam acima dela para
   continuarem legíveis onde houver sobreposição. */
@media (max-width:899px){
  .acq-hero--recorte .acq-selos-titulo{
    margin-top:20px;
    padding-top:0;
    border-top:0;
  }
  .acq-hero--recorte .acq-title,
  .acq-hero--recorte .lead,
  .acq-hero--recorte .acq-selos{
    position:relative;
    z-index:2;
  }
  /* o selo JÁ é absolute: aqui vai só o z-index, senão o position:relative
     anula o posicionamento e ele volta para o canto superior esquerdo */
  .acq-hero--recorte .acq-seal{ z-index:3; }
}