/* =============================================================
   LOQUIFY — Página /promocao
   Estilos exclusivos da promocao.html.
   Depende dos tokens e componentes de styles.css e aquisicao.css
   (.plan, .plan-badge, .plan-price, .btn-wpp, .hint, .mod-* …).
   ============================================================= */

/* =============================================================
   1 · HERO — alugue sua moto
   ============================================================= */
.promo-hero{
  position:relative;
  isolation:isolate;            /* protege o blend da foto no rodapé */
  overflow:hidden;
  padding:26px 0 0;
  background:
    radial-gradient(90% 70% at 80% 16%,rgba(29,74,124,.38),transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

.promo-h1{
  font-size:clamp(30px,8.6vw,44px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.04;
}
.promo-hero .lead{ margin-top:14px; }

/* linha "Planos a partir de 30 dias" */
.promo-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  font-size:13px;
  font-weight:600;
  color:var(--muted-2);
}
.promo-eyebrow .ico{ width:18px; height:18px; flex:none; }
.promo-eyebrow strong{ font-weight:800; }

/* tag laranja "Locação + aquisição" da 2ª seção */
.promo-eyebrow--tag{
  width:fit-content;
  margin-top:0;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(240,124,31,.45);
  background:rgba(240,124,31,.08);
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--orange);
}
.promo-eyebrow--tag .ico{ width:15px; height:15px; }

/* ---------- Planos de locação ---------- */
.promo-planos{
  display:grid;
  gap:10px;
  margin-top:12px;
}
/* seta discreta à direita de cada plano */
.plan-arrow{
  width:18px; height:18px;
  flex:none;
  margin-left:auto;
  color:var(--muted);
  transition:color .18s ease,translate .18s ease;
}
.plan:hover .plan-arrow{ color:var(--orange); translate:3px 0; }

.promo-caucao-linha{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-size:13px;
  color:var(--muted-2);
}
.promo-caucao-linha .ico{ width:18px; height:18px; flex:none; }
.promo-caucao-linha strong{ color:#fff; font-weight:800; }

/* ---------- Faixa da promoção de entrada ---------- */
.promo-oferta{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:16px;
  padding:15px 14px;
  border-radius:var(--r);
  border:1px solid rgba(240,124,31,.5);
  background:
    linear-gradient(135deg,rgba(240,124,31,.16),rgba(240,124,31,.05));
  transition:border-color .18s ease,transform .18s ease;
}
.promo-oferta:hover{ border-color:var(--orange); transform:translateY(-2px); }
.promo-oferta-ico{
  width:42px; height:42px;
  flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  color:var(--orange);
  background:rgba(240,124,31,.14);
  border:1px solid rgba(240,124,31,.45);
}
.promo-oferta-ico .ico{ width:22px; height:22px; }
.promo-oferta-txt{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.promo-oferta-txt b{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
}
.promo-oferta-txt > span{
  font-size:13px;
  line-height:1.42;
  color:var(--muted-2);
}
.promo-oferta-txt strong{ color:#fff; font-weight:800; }
.promo-oferta-seta{
  width:19px; height:19px;
  flex:none;
  margin-left:auto;
  color:var(--orange);
}

/* variante dentro do card de valor: sem clique, sem seta */
.promo-oferta--interna{
  margin-top:16px;
  text-align:left;
}
.promo-oferta--interna:hover{ transform:none; }

/* ---------- O que está incluso ---------- */
.promo-inclusos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.promo-inclusos li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:13px 12px;
  border-radius:var(--r-sm);
  background:var(--card);
  border:1px solid var(--line);
}
.promo-inclusos .ico{ width:19px; height:19px; flex:none; margin-top:1px; }
.promo-inclusos span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  font-size:10.5px;
  line-height:1.35;
  color:var(--muted);
}
.promo-inclusos b{ font-size:11.5px; font-weight:800; color:#fff; }

/* ---------- Foto do rodapé do hero ---------- */
.promo-foto{
  margin:22px -18px 0;
}
.promo-foto img{ width:100%; height:auto; display:block; }

/* =============================================================
   2 · LOCAÇÃO + AQUISIÇÃO
   ============================================================= */
.promo-aq{
  padding:30px 0 34px;
  background:linear-gradient(180deg,var(--bg-2),#091a30);
}

.promo-h2{
  margin-top:14px;
  font-size:clamp(25px,7.4vw,36px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.06;
}
.promo-h2--sm{
  margin-top:34px;
  font-size:clamp(20px,5.8vw,27px);
  line-height:1.15;
}
.promo-aq .lead{ margin-top:12px; }
.promo-aq .mod-grade{ margin-top:18px; }

/* lista de benefícios dentro do card de valor */
.promo-aq-lista{
  display:grid;
  gap:9px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid rgba(240,124,31,.25);
  text-align:left;
}
.promo-aq-lista li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted-2);
}
.promo-aq-lista .ico{ width:17px; height:17px; flex:none; margin-top:1px; }

.promo-aq-obs{
  margin-top:12px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--muted);
  text-align:left;
}

/* ---------- Linha do tempo: quanto mais tempo ---------- */
/* Lista vertical com um trilho ligando os ícones, como no mockup.
   Sempre em uma coluna: a leitura é uma linha do tempo. */
.promo-etapas{
  display:grid;
  gap:0;
  margin-top:18px;
}
.promo-etapas li{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "ico quando"
    "ico titulo"
    "ico texto";
  column-gap:14px;
  padding:0 0 22px 0;
}
.promo-etapas li:last-child{ padding-bottom:0; }
/* trilho vertical entre um ícone e o próximo */
.promo-etapas li:not(:last-child)::before{
  content:"";
  position:absolute;
  left:21px;
  top:46px;
  bottom:4px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(240,124,31,.5),rgba(240,124,31,.12));
}
.promo-etapa-ico{
  grid-area:ico;
  position:relative;
  z-index:1;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(180deg,#f68a2a,#e0700f);
  box-shadow:0 10px 20px -12px rgba(240,124,31,.9);
}
.promo-etapa-ico .ico{ width:21px; height:21px; }
.promo-etapas b{
  grid-area:quando;
  align-self:center;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--orange);
}
.promo-etapas strong{
  grid-area:titulo;
  margin-top:3px;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.015em;
  line-height:1.2;
  color:#fff;
}
.promo-etapas li > span:last-child{
  grid-area:texto;
  margin-top:5px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
}

.promo-aq .btn-wpp{ margin-top:20px; }

/* =============================================================
   DESKTOP
   ============================================================= */
@media (min-width:768px){
  .promo-hero{ padding-top:36px; }
  .promo-hero .wrap,
  .promo-aq .wrap{ max-width:760px; }

  .promo-planos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .promo-inclusos{ gap:12px; }
  .promo-inclusos span{ font-size:11.5px; }
  .promo-inclusos b{ font-size:12.5px; }

  .promo-oferta{ padding:18px 18px; }
  .promo-oferta-txt > span{ font-size:14px; }

  .promo-foto{
    margin-inline:0;
    max-width:560px;
  }

  .promo-aq-lista li{ font-size:13px; }
}

@media (min-width:1150px){
  .promo-hero .wrap,
  .promo-aq .wrap{ max-width:1040px; }

  /* hero em duas colunas: texto à esquerda, foto à direita */
  .promo-hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    grid-template-areas:
      "titulo  foto"
      "lead    foto"
      "eyebrow foto"
      "planos  foto"
      "caucao  foto"
      "oferta  oferta"
      "inclusos inclusos"
      "cta     cta"
      "hint    hint";
    column-gap:50px;
    align-items:start;
  }
  .promo-h1{ grid-area:titulo; }
  .promo-hero .lead{ grid-area:lead; max-width:42ch; }
  .promo-hero .promo-eyebrow{ grid-area:eyebrow; }
  .promo-planos{ grid-area:planos; }
  .promo-caucao-linha{ grid-area:caucao; }
  .promo-hero .promo-oferta{ grid-area:oferta; }
  .promo-inclusos{ grid-area:inclusos; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .promo-hero .btn-wpp{ grid-area:cta; max-width:420px; margin-inline:auto; }
  .promo-hero .hint{ grid-area:hint; }
  .promo-foto{
    grid-area:foto;
    margin:0;
    max-width:none;
    align-self:center;
  }

  .promo-aq .btn-wpp{ max-width:460px; margin-inline:auto; }
}

/* =============================================================
   GARANTIA DE DEVOLUÇÃO (variante da /promocao)
   Herda tudo de .acq-dev em aquisicao.css. Aqui só o que muda:
   os três selos e o rodapé em duas colunas.
   ============================================================= */
.promo-dev{ margin-top:30px; }

/* ---------- Três selos sob o texto principal ---------- */
.promo-dev-selos{
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:14px;
  border-radius:var(--r);
  border:1px solid rgba(63,208,122,.3);
  background:rgba(4,20,12,.4);
}
.promo-dev-selos li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.promo-dev-selos .ico{
  width:26px; height:26px;
  flex:none;
  padding:4px;
  border-radius:50%;
  color:var(--dev,#3fd07a);
  border:1px solid rgba(63,208,122,.5);
  background:rgba(63,208,122,.12);
}
.promo-dev-selos span{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  font-size:11.5px;
  line-height:1.35;
  color:var(--muted);
}
.promo-dev-selos b{
  font-size:12.5px;
  font-weight:800;
  color:#fff;
}

/* ---------- Rodapé em duas colunas ---------- */
.promo-dev-foot{
  display:grid;
  gap:13px;
  text-align:left;
}
.promo-dev-foot p{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.promo-dev-foot .ico{
  width:22px; height:22px;
  flex:none;
  margin-top:1px;
  color:var(--dev,#3fd07a);
}
.promo-dev-foot span{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}
.promo-dev-foot b{
  font-size:13px;
  font-weight:800;
  color:var(--dev,#3fd07a);
}

@media (min-width:768px){
  .promo-dev-selos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
  .promo-dev-selos li{ padding:0 14px; }
  .promo-dev-selos li + li{ border-left:1px solid rgba(63,208,122,.25); }
  .promo-dev-foot{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}

/* Cores por etapa, como no mockup: o que você paga em laranja,
   o que volta para você em verde. */
.promo-etapas li:nth-child(2) .promo-etapa-ico,
.promo-etapas li:nth-child(3) .promo-etapa-ico{
  background:linear-gradient(180deg,#45d884,#28a862);
  box-shadow:0 10px 20px -12px rgba(63,208,122,.9);
}
.promo-etapas li:nth-child(2) b,
.promo-etapas li:nth-child(3) b{ color:#3fd07a; }
.promo-etapas li:nth-child(2):not(:last-child)::before,
.promo-etapas li:nth-child(3):not(:last-child)::before{
  background:linear-gradient(180deg,rgba(63,208,122,.5),rgba(63,208,122,.12));
}

/* ---------- Linha do tempo horizontal no desktop ----------
   No mobile continua vertical (regras acima). A partir de 1024px
   vira 4 colunas com o ícone em cima e o trilho na horizontal. */
@media (min-width:1024px){
  .promo-etapas{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 18px;
    margin-top:24px;
  }
  .promo-etapas li{
    grid-template-columns:1fr;
    grid-template-areas:
      "ico"
      "quando"
      "titulo"
      "texto";
    justify-items:center;
    text-align:center;
    padding:0;
  }
  .promo-etapas .promo-etapa-ico{ margin-bottom:12px; }

  /* o trilho passa a ser horizontal, do ícone até o próximo */
  .promo-etapas li:not(:last-child)::before{
    left:calc(50% + 30px);
    right:calc(-50% + 30px);
    top:21px;
    bottom:auto;
    width:auto;
    height:2px;
    background:linear-gradient(90deg,rgba(240,124,31,.5),rgba(240,124,31,.18));
  }
  .promo-etapas li:nth-child(2):not(:last-child)::before,
  .promo-etapas li:nth-child(3):not(:last-child)::before{
    background:linear-gradient(90deg,rgba(63,208,122,.5),rgba(63,208,122,.18));
  }

  .promo-etapas b{ align-self:auto; }
  .promo-etapas strong{ margin-top:4px; }
  .promo-etapas li > span:last-child{ margin-top:6px; }
}

/* =============================================================
   POR QUE ESCOLHER A LOQUIFY
   ============================================================= */
.promo-porque{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.promo-porque li{
  display:flex;
  flex-direction:column;
  padding:16px 14px 17px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line);
}
.promo-porque-ico{
  width:44px; height:44px;
  margin-bottom:14px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--orange);
  background:rgba(240,124,31,.1);
  border:1px solid rgba(240,124,31,.45);
}
.promo-porque-ico .ico{ width:22px; height:22px; }
.promo-porque b{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.22;
  color:#fff;
}
.promo-porque li > span:last-child{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}

@media (min-width:768px){
  .promo-porque{ gap:14px; }
  .promo-porque li{ padding:20px 18px; }
}
@media (min-width:1024px){
  .promo-porque{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}