/* ==========================================================================
   Campeche Cell — landing pages de orçamento (/orcamento-celular e /orcamento-notebook)
   Estrutura espelhada da LP de referência, com a paleta laranja da Campeche.

   Ordem das seções, igual no mobile e no desktop:
     topbar (só o logo) > hero (coluna única centralizada, imagem por último)
     > faixa de 4 diferenciais > 3 passos > opções > galeria > avaliações > rodapé
   ========================================================================== */

/* --------------------------------------------------------------- topbar */
.lp-topbar{
  border-bottom:1px solid var(--line-soft);
  padding:20px 0;text-align:center;background:var(--bg);
}
.lp-topbar img{height:40px;width:auto;display:inline-block}

/* --------------------------------------------------------------- pílula */
.lp-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-soft);border:1px solid rgba(242,96,12,.55);border-radius:999px;
  padding:8px 18px;font-size:.82rem;font-weight:600;color:var(--brand-bright);
}
.lp-pill .ic{width:15px;height:15px}

/* --------------------------------------------------------- hero da LP
   Coluna única centralizada em qualquer largura. A imagem do produto vem
   DEPOIS do botão, como na referência. */
.lp-hero{position:relative;overflow:hidden;padding:38px 0 20px;text-align:center}
.lp-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%,rgba(242,96,12,.20),transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,255,255,.03),transparent 60%);
}
.lp-hero .container{position:relative;z-index:1}
/* O mínimo é baixo de propósito: no celular o título tem que caber em 3 linhas.
   O 6.6vw mantém o corpo acompanhando a largura até bater no teto do desktop. */
.lp-hero h1{
  font-size:clamp(1.35rem,6.6vw,2.75rem);text-wrap:balance;
  margin:18px auto 0;max-width:900px;
}
.lp-hero h1 .hl{color:var(--brand)}
/* no celular o corpo acompanha a largura para o parágrafo fechar em 3 linhas */
.lp-hero-sub{
  font-size:clamp(.7rem,3.5vw,1rem);color:var(--body);max-width:640px;margin:16px auto 0;
}
.lp-hero-sub strong{color:var(--ink)}
/* selos de destaque logo acima do botão: sempre empilhados e centralizados */
.lp-selos{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:24px auto 0;
}
/* o texto vai dentro de um único <span>: se ficasse solto no flex, cada pedaço
   viraria um item e o rótulo se espalharia ao quebrar em duas linhas */
.lp-selo{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:60px;
  padding:9px 17px;font-size:.85rem;font-weight:600;color:var(--body);
  text-align:left;max-width:100%;
}
.lp-selo .ic{width:17px;height:17px;color:var(--brand);flex-shrink:0}
.lp-selo b{color:var(--ink);font-weight:700}

/* no celular o selo de coleta perde o ícone e cabe numa linha só */
@media(max-width:679px){
  .lp-selo--entrega .ic{display:none}
  .lp-selo--entrega{white-space:nowrap;font-size:clamp(.66rem,3.15vw,.85rem);padding:9px 15px}
}

.lp-hero-cta{margin-top:26px}
.lp-hero-cta .btn{text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}

/* CTA principal da primeira dobra: maior, com anel laranja permanente e
   contorno claro, para ganhar peso sobre o fundo escuro. */
.lp-hero-cta .btn-destaque{
  width:100%;max-width:420px;padding:20px 30px;font-size:1.06rem;letter-spacing:.05em;
  border:2px solid rgba(255,255,255,.28);border-radius:12px;
}
.lp-hero-cta .btn-destaque .ic{width:23px;height:23px}
@media(min-width:680px){
  .lp-hero-cta .btn-destaque{width:auto;padding:21px 46px;font-size:1.12rem}
}
/* pulso mais forte que o padrão: anel maior e um leve respiro de escala */
.btn-destaque.btn-pulse{animation:pulsoCtaForte 2.2s cubic-bezier(.35,0,.5,1) infinite}
.btn-destaque.btn-pulse:hover,.btn-destaque.btn-pulse:focus-visible{animation:none;transform:translateY(-2px)}
@keyframes pulsoCtaForte{
  0%  {box-shadow:0 14px 32px -10px rgba(242,96,12,1), 0 0 0 0 rgba(255,122,34,.7);transform:scale(1)}
  55% {transform:scale(1.035)}
  70% {box-shadow:0 14px 32px -10px rgba(242,96,12,1), 0 0 0 18px rgba(255,122,34,0)}
  100%{box-shadow:0 14px 32px -10px rgba(242,96,12,1), 0 0 0 0 rgba(255,122,34,0);transform:scale(1)}
}
.lp-hero-media{margin:34px auto 0;max-width:720px}
.lp-hero-media img{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.75))}

/* ------------------------------------------- faixa dos 4 diferenciais */
.lp-strip{padding:44px 0 56px}
.lp-strip-grid{display:grid;grid-template-columns:1fr;gap:18px}
.lp-strip-card{
  position:relative;overflow:hidden;
  background:linear-gradient(#17181C,#101114);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  padding:28px 24px 26px;
}
/* risquinho laranja no topo, como na referência */
.lp-strip-card::before{
  content:"";position:absolute;top:0;left:24px;width:64px;height:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
}
.lp-strip-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.lp-strip-ic{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  display:flex;align-items:center;justify-content:center;
}
.lp-strip-ic .ic{width:22px;height:22px;color:var(--brand)}
.lp-strip-head h3{font-size:1.02rem;font-weight:700;color:var(--brand);margin:0}
.lp-strip-card p{font-size:.93rem}

/* --------------------------------------------------------------- 3 passos */
.lp-passos{display:grid;grid-template-columns:1fr;gap:18px}
.lp-passo{
  position:relative;overflow:hidden;
  background:#1A1B1F;border:1px solid rgba(255,255,255,.06);
  border-radius:20px;padding:36px 28px;
}
.lp-passo::before{
  content:"";position:absolute;top:0;left:28px;width:56px;height:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
}
.lp-passo-num{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.4);color:#fff;
  font-size:1.05rem;font-weight:700;margin-bottom:18px;
}
.lp-passo h3{font-size:1.08rem;margin-bottom:8px}
.lp-passo p{font-size:.93rem}

/* ------------------------------------------------- cards de escolha (opções) */
.lp-mini-logo{display:block;height:40px;width:auto;margin:0 auto 18px}
.lp-opcoes{display:grid;grid-template-columns:1fr;gap:20px}
.lp-opcao{
  background:linear-gradient(#17181C,#101114);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  padding:26px 22px 24px;text-align:center;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease;
}
.lp-opcao:hover{border-color:var(--brand-line);transform:translateY(-3px)}
.lp-opcao-media{display:flex;align-items:center;justify-content:center;height:190px;margin-bottom:20px}
.lp-opcao-media img{max-height:100%;width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.lp-opcao h3{font-size:1.02rem;line-height:1.45;margin-bottom:18px;flex:1}
.lp-opcao .btn{width:100%;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem}

/* --------------------------------------------------------------- galeria */
.lp-galeria{display:grid;grid-template-columns:1fr;gap:14px}
.lp-galeria figure{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
}
.lp-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.lp-galeria figure:hover img{transform:scale(1.05)}
.lp-galeria figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:.82rem;font-weight:600;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
}

/* --------------------------------------------------------------- rodapé */
.lp-footer{background:#08080A;border-top:1px solid var(--line-soft);padding:46px 0 0}
.lp-footer-topo{text-align:center;padding-bottom:36px;border-bottom:1px solid var(--line-soft)}
.lp-footer-topo .btn{margin:0 auto}
.lp-footer-grid{display:grid;grid-template-columns:1fr;gap:30px;padding:34px 0}
.lp-footer h4{font-size:.95rem;margin-bottom:14px}
.lp-footer ul li{margin-bottom:12px;font-size:.88rem;display:flex;align-items:flex-start;gap:9px}
.lp-footer ul li .ic{width:17px;height:17px;color:var(--brand);margin-top:3px;flex-shrink:0}
.lp-footer ul li b{display:block;font-size:.8rem;color:var(--muted);font-weight:600}
.lp-footer a:hover{color:var(--brand-bright)}
.lp-mapa{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.lp-mapa iframe{display:block;width:100%;height:230px;border:0;filter:grayscale(.25) contrast(1.05)}
.lp-footer-legal{
  border-top:1px solid var(--line-soft);padding:20px 0;
  font-size:.78rem;line-height:1.7;color:var(--muted);
}
.lp-footer-legal strong{color:var(--body);font-weight:600}
.lp-footer-bar{
  border-top:1px solid var(--line-soft);padding:18px 0;display:flex;flex-direction:column;
  gap:10px;align-items:center;text-align:center;font-size:.8rem;color:var(--muted);
}
.lp-footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}

/* --------------------------------------------------------------- breakpoints */
@media(min-width:680px){
  .lp-hero{padding:48px 0 30px}
  .lp-strip{padding:56px 0 70px}
  .lp-strip-grid{grid-template-columns:repeat(2,1fr)}
  .lp-passos{grid-template-columns:repeat(3,1fr)}
  .lp-opcoes{grid-template-columns:repeat(2,1fr)}
  .lp-galeria{grid-template-columns:repeat(3,1fr)}
  .lp-footer-grid{grid-template-columns:1fr 1fr 1.1fr;gap:34px}
  .lp-footer-bar{flex-direction:row;justify-content:space-between;text-align:left}
}
@media(min-width:1000px){
  .lp-strip-grid{grid-template-columns:repeat(4,1fr)}
  .lp-topbar{padding:24px 0}
  .lp-topbar img{height:44px}
}