/* =============================================================
   LOQUIFY — Página /promofan (promoção Honda Fan 0km)
   Depende de styles.css, aquisicao.css e promocao.css
   (reaproveita .acq-dev, .promo-porque, .promo-etapas, .btn-wpp…).
   ============================================================= */

/* cabeçalho sem menu: só a marca */
.pf-header .header-inner{ justify-content:flex-start; }

/* =============================================================
   HERO
   ============================================================= */
.pf-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:26px 0 0;
  background:
    radial-gradient(72% 55% at 78% 26%,rgba(240,124,31,.26),transparent 64%),
    radial-gradient(90% 70% at 20% 10%,rgba(29,74,124,.34),transparent 62%),
    linear-gradient(180deg,#07121f 0%,var(--bg) 100%);
}
.pf-hero-inner{ position:relative; z-index:auto; }

/* selo redondo 0KM no canto */
.pf-selo{
  position:absolute;
  top:-2px; right:0;
  z-index:3;
  width:86px; height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  border-radius:50%;
  border:2px solid var(--orange);
  background:rgba(9,20,34,.92);
  box-shadow:0 0 0 6px rgba(240,124,31,.1);
}
.pf-selo b{
  font-size:7.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
}
.pf-selo strong{
  margin:3px 0;
  font-size:23px; font-weight:900;
  letter-spacing:-.03em; color:var(--orange);
}
.pf-selo i{ font-size:8.5px; font-style:normal; font-weight:700; color:var(--muted); }

.pf-tag{ margin-right:96px; }

.pf-h1{
  margin-top:13px;
  font-size:clamp(27px,8vw,40px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.07;
}
.pf-lead{ margin-top:14px; max-width:40ch; }

.pf-foto{
  margin:14px -18px 0;
}
.pf-foto img{
  display:block;
  width:100%;
  height:auto;
}

/* =============================================================
   SEÇÕES
   ============================================================= */
.pf-sec{
  padding:28px 0;
  background:var(--bg);
}
.pf-sec--alt{ background:linear-gradient(180deg,var(--bg-2),#091a30); }

.pf-h2{
  font-size:clamp(21px,6.2vw,30px);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.12;
}
.pf-sub{
  margin-top:9px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* =============================================================
   RESUMO DO MODELO
   ============================================================= */
.pf-resumo{
  display:grid;
  gap:16px;
  padding:18px 16px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line);
}
.pf-resumo-nome h2{
  margin-top:5px;
  font-size:clamp(19px,5.4vw,24px);
  font-weight:900;
  letter-spacing:-.025em;
}
.pf-resumo-nome > p:last-child{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.pf-resumo-lista{
  display:grid;
  gap:11px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.pf-resumo-lista li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted-2);
}
.pf-resumo-lista .ico{ width:19px; height:19px; flex:none; margin-top:1px; }

.pf-oferta{ margin-top:14px; }

/* botão que leva à âncora dos planos */
.pf-ver-planos{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:12px;
  font-size:15px;
  text-align:left;
}
.pf-ver-seta{ width:20px; height:20px; }

/* =============================================================
   QUANTO CUSTA
   ============================================================= */
.pf-conta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:15px 14px;
  border-radius:var(--r);
  border:1px solid rgba(240,124,31,.45);
  background:rgba(240,124,31,.07);
}
.pf-conta .ico{ width:26px; height:26px; flex:none; color:var(--orange); }
.pf-conta p{
  font-size:13px;
  line-height:1.5;
  color:var(--muted-2);
}
.pf-conta b{ color:var(--orange); font-weight:800; }

.pf-nota{
  margin-top:11px;
  text-align:center;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.pf-varejo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:13px;
  padding:12px 14px;
  border-radius:var(--r-sm);
  background:var(--card);
  border:1px solid var(--line);
  font-size:12.5px;
  color:var(--muted);
}
.pf-varejo .ico{ width:18px; height:18px; flex:none; }
.pf-varejo b{ color:#fff; font-weight:800; }

/* =============================================================
   PLANOS
   ============================================================= */
.pf-planos{
  display:grid;
  gap:13px;
  margin-top:18px;
}
.pf-plano{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:16px 14px 15px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line);
}
.pf-plano--destaque{
  border-color:var(--orange);
  background:var(--card-2);
  box-shadow:0 20px 44px -28px rgba(240,124,31,.9);
}
.pf-plano-badge{
  position:absolute;
  top:-11px; left:50%;
  translate:-50% 0;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pf-plano-badge .ico{ width:12px; height:12px; }
.pf-plano--destaque .pf-plano-rot{ margin-top:6px; }

.pf-plano-rot{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.pf-plano-n{
  margin-top:2px;
  font-size:clamp(21px,6vw,25px);
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--orange);
}
.pf-plano-moto{
  margin-top:7px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--line-2);
  font-size:11.5px;
  line-height:1.45;
  color:var(--muted);
}
.pf-plano-moto b{ color:var(--muted-2); font-weight:700; }

.pf-plano-linhas{
  display:grid;
  gap:11px;
  margin-top:12px;
}
.pf-plano-linhas li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.pf-plano-linhas .ico{ width:19px; height:19px; flex:none; margin-top:2px; }
.pf-plano-linhas span{
  display:flex;
  flex-direction:column;
  min-width:0;
  font-size:11px;
  color:var(--muted);
}
.pf-plano-linhas b{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--orange);
}
.pf-plano-linhas i{ font-style:normal; font-size:10.5px; }

.pf-plano-total{
  margin-top:auto;
  padding-top:13px;
  margin-bottom:12px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--muted);
}
.pf-plano-total strong{
  display:block;
  margin-top:1px;
  font-size:clamp(25px,7vw,30px);
  font-weight:900;
  letter-spacing:-.035em;
  color:#fff;
}
.pf-plano--destaque .pf-plano-total strong{ color:var(--orange); }

.pf-plano-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg,#f68a2a,#e0700f);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  transition:filter .18s ease,transform .18s ease;
}
.pf-plano-btn .ico{ width:17px; height:17px; flex:none; }
.pf-plano-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* =============================================================
   FECHAMENTO
   ============================================================= */
.pf-fim{
  padding:24px 0 30px;
  background:linear-gradient(180deg,#0a1c33,#07121f);
}
.pf-fim-inner{
  padding:20px 16px;
  border-radius:var(--r-lg);
  border:1px solid rgba(240,124,31,.5);
  background:
    linear-gradient(135deg,rgba(240,124,31,.14),rgba(240,124,31,.04));
}
.pf-fim-txt h2{
  font-size:clamp(21px,6vw,28px);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.12;
}
.pf-fim-txt p{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted-2);
}
.pf-fim-cta .btn-wpp{ margin-top:16px; }

.pf-legal{
  display:block;
  padding-top:16px;
  padding-bottom:4px;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}

/* =============================================================
   DESKTOP
   ============================================================= */
@media (min-width:768px){
  .pf-hero{ padding-top:34px; }
  .pf-hero .wrap,
  .pf-sec .wrap,
  .pf-fim .wrap,
  .pf-legal{ max-width:900px; }

  .pf-foto{ margin-inline:0; max-width:620px; }

  .pf-resumo{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;
    gap:24px;
    padding:22px 24px;
  }
  .pf-resumo-lista{
    padding-top:0;
    padding-left:24px;
    border-top:0;
    border-left:1px solid var(--line);
  }

  .pf-planos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .pf-plano{ padding:18px 16px 16px; }

  .pf-conta p{ font-size:14px; }
  .pf-sub{ font-size:13.5px; }

  .pf-fim-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    align-items:center;
    gap:28px;
    padding:26px 28px;
  }
  .pf-fim-cta .btn-wpp{ margin-top:0; }
}

@media (min-width:1024px){
  .pf-hero .wrap,
  .pf-sec .wrap,
  .pf-fim .wrap,
  .pf-legal{ max-width:1040px; }

  /* hero em duas colunas: texto à esquerda, moto à direita */
  .pf-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
    grid-template-areas:
      "tag   foto"
      "h1    foto"
      "lead  foto";
    column-gap:40px;
    align-items:center;
    padding-bottom:10px;
  }
  .pf-tag{ grid-area:tag; margin-right:0; align-self:end; }
  .pf-h1{ grid-area:h1; margin-top:10px; }
  .pf-lead{ grid-area:lead; align-self:start; }
  .pf-foto{
    grid-area:foto;
    margin:0;
    max-width:none;
  }
  .pf-selo{ width:100px; height:100px; top:4px; }
  .pf-selo strong{ font-size:27px; }
}

/* "sem juros" em verde ao lado do valor da aquisição */
.acq-semjuros{
  font-style:normal;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  color:#3fd07a;
  white-space:nowrap;
}

/* destaque do lucro, abaixo dos três cards */
.pf-lucro{ margin-top:16px; }

/* selo de local, logo abaixo da tag "Locação + aquisição" */
.pf-local{ margin-top:10px; }
@media (min-width:1024px){
  .pf-hero-inner{
    grid-template-areas:
      "tag   foto"
      "local foto"
      "h1    foto"
      "lead  foto";
  }
  .pf-local{ grid-area:local; margin-top:8px; }
}