/* ============================================================
   Besouro Elétrico — conversão de clássicos
   Paleta e tipografia vêm do próprio carro: petróleo, marfim,
   cromo e o laranja dos cabos de alta tensão.
   ============================================================ */

@font-face{
  font-family:"Big Shoulders Display";
  src:url("../fontes/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fontes/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  --petroleo:#0C2634;
  --petroleo-2:#12384C;
  --petroleo-fundo:#081D27;
  --marfim:#F2EBDD;
  --marfim-cartao:#E9E0CE;
  --cromo:#A9B7BF;
  --laranja:#FF5A1F;
  --laranja-claro:#FF7B45;
  --laranja-tinta:#B7410E;

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --texto:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-detalhe:0.875rem;
  --t-texto:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --t-sub:clamp(1.3rem,1.15rem + 0.6vw,1.5rem);
  --t-secao:clamp(1.75rem,1.15rem + 2.4vw,2.7rem);
  --t-topo:clamp(2rem,1.3rem + 3vw,3.5rem);
  --t-cartaz:clamp(2.1rem,6.4vw,4.4rem);
  --t-marca:clamp(2.4rem,10.4vw,9.2rem);

  --largura:1180px;
  --folga:clamp(1.25rem,4vw,3.5rem);
  --gutter:max(var(--folga),calc((100vw - var(--largura)) / 2));

  --curva:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--petroleo);
  color:var(--marfim);
  font-family:var(--texto);
  font-size:var(--t-texto);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
strong,b{font-weight:700;}
a{color:inherit;}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;}

.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--laranja);color:#08202B;font-weight:700;padding:.8rem 1.2rem;text-decoration:none;}
.pular:focus{left:1rem;top:1rem;}

/* ---------- Contextos ---------- */
.escuro{
  --fundo:var(--petroleo);
  --tinta:var(--marfim);
  --suave:rgba(242,235,221,.76);
  --suave-2:rgba(242,235,221,.52);
  --linha:rgba(169,183,191,.26);
  --acento:var(--laranja);
}
.claro{
  --fundo:var(--marfim);
  --tinta:var(--petroleo);
  --suave:rgba(12,38,52,.74);
  --suave-2:rgba(12,38,52,.5);
  --linha:rgba(12,38,52,.16);
  --acento:var(--laranja-tinta);
}
section{background:var(--fundo,transparent);color:var(--tinta,inherit);}
section[id]{scroll-margin-top:4.5rem;}

/* ---------- Blocos básicos ---------- */
.faixa{
  width:100%;
  max-width:calc(var(--largura) + var(--gutter) * 2);
  margin:0 auto;
  padding:clamp(3.25rem,8vh,6.5rem) var(--gutter);
}

.etiqueta{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-texto);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--acento,var(--laranja));
}
.etiqueta::before{
  content:"";
  width:.7rem;
  height:.28rem;
  background:currentColor;
  flex:none;
}

.titulo-secao{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-secao);
  line-height:1.02;
  letter-spacing:-.005em;
  text-transform:uppercase;
  max-width:26ch;
  text-wrap:balance;
}

.texto{
  margin-top:1.1rem;
  max-width:62ch;
  color:var(--suave,currentColor);
  text-wrap:pretty;
}

.rotulo-lista{
  margin-bottom:1rem;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-texto);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--suave,currentColor);
}

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:1rem 1.5rem;
  border:0;
  border-radius:3px;
  background:var(--laranja);
  color:#08202B;
  font-family:var(--texto);
  font-size:var(--t-texto);
  font-weight:700;
  line-height:1.15;
  text-decoration:none;
  text-align:center;
  transition:background-color .18s var(--curva),transform .18s var(--curva);
}
.botao:hover{background:var(--laranja-claro);}
.botao:active{transform:translateY(1px);}

.micro{
  margin-top:.85rem;
  font-size:var(--t-detalhe);
  line-height:1.5;
  color:var(--suave-2,currentColor);
  max-width:38ch;
}

.tag-exemplo{
  display:inline-block;
  padding:.15em .55em;
  background:rgba(255,90,31,.16);
  border-radius:2px;
  font-family:var(--texto);
  font-size:var(--t-detalhe);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  vertical-align:middle;
  color:var(--tinta);
}

.lista-marcada{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.lista-marcada li{
  position:relative;
  padding-left:1.9rem;
  line-height:1.45;
}
.lista-marcada li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.95rem;
  height:.17rem;
  background:currentColor;
  opacity:.45;
}
.lista-marcada--mais li::before{background:var(--acento);opacity:1;}

/* ---------- Marca ---------- */
.marca{
  font-family:var(--display);
  font-weight:800;
  line-height:.85;
  letter-spacing:-.012em;
  text-transform:uppercase;
  white-space:nowrap;
}
.marca__eletrico{color:var(--laranja);}

/* ---------- Topo do site ---------- */
.topo-site{
  position:absolute;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:clamp(1rem,2.4vh,1.55rem) var(--gutter);
  color:var(--marfim);
  transition:background-color .3s var(--curva),box-shadow .3s var(--curva),padding .3s var(--curva);
}
.topo-site--fixo{
  position:fixed;
  background:rgba(8,29,39,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(169,183,191,.18);
  padding-top:.7rem;
  padding-bottom:.7rem;
  animation:desce .35s var(--curva) both;
}
@keyframes desce{from{transform:translateY(-100%);}to{transform:translateY(0);}}

.marca--topo{font-size:var(--t-sub);text-decoration:none;}

.menu{
  display:flex;
  gap:1.35rem;
  margin-left:auto;
  font-size:var(--t-detalhe);
  font-weight:600;
}
.menu a{
  text-decoration:none;
  color:rgba(242,235,221,.72);
  padding:.25rem 0;
  transition:color .18s;
}
.menu a:hover{color:var(--marfim);}

.botao--topo{
  padding:.7rem 1.1rem;
  font-size:var(--t-detalhe);
}

/* ---------- Herói ---------- */
.heroi{
  position:relative;
  display:flex;
  min-height:100vh;
  min-height:100svh;
  background:var(--petroleo);
  color:var(--marfim);
  overflow:hidden;
}
.heroi__foto{position:absolute;inset:0;}
.heroi__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 46%;}
.heroi::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(8,25,35,.9) 0%,rgba(8,25,35,.32) 24%,rgba(8,25,35,.42) 52%,rgba(8,25,35,.95) 100%),
    linear-gradient(96deg,rgba(8,25,35,.93) 0%,rgba(8,25,35,.5) 46%,rgba(8,25,35,0) 78%);
}
.heroi__conteudo{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(2rem,7vh,5rem);
  width:100%;
  max-width:calc(var(--largura) + var(--gutter) * 2);
  margin:0 auto;
  padding:clamp(5rem,12vh,7.5rem) var(--gutter) clamp(2.5rem,8vh,4.5rem);
}
.heroi__marca{
  overflow:hidden;
  padding-top:.16em;
  margin-top:-.16em;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.marca--grande{
  display:block;
  font-size:var(--t-marca);
  letter-spacing:-.018em;
}
.heroi__bloco{max-width:44rem;}
.heroi__titulo{
  margin-top:.4rem;
  font-family:var(--texto);
  font-weight:700;
  font-size:var(--t-topo);
  line-height:1.06;
  letter-spacing:-.015em;
  max-width:24ch;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(6,20,28,.55);
}
.heroi__sub{
  margin-top:1.15rem;
  max-width:58ch;
  color:rgba(242,235,221,.84);
  text-wrap:pretty;
}
.heroi__acao{margin-top:1.9rem;}

/* ---------- A conversão ---------- */
.conversao{padding:0;}
.conversao__palco{
  display:grid;
  grid-template-columns:minmax(9rem,.9fr) minmax(0,2fr) minmax(9rem,.9fr);
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem) clamp(1rem,3vw,3rem);
  min-height:100vh;
  min-height:100svh;
  max-width:calc(var(--largura) + var(--gutter) * 2);
  margin:0 auto;
  padding:clamp(3rem,8vh,5.5rem) var(--gutter) clamp(2rem,5vh,3.5rem);
}
.conversao__cabeca{grid-column:1/-1;}
.conversao__cabeca .texto{max-width:52ch;}

.conversao__lista ul{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.conversao__lista li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-size:var(--t-texto);
  line-height:1.35;
}
.conversao__lista li::before{
  content:"";
  flex:none;
  width:.75rem;
  height:.2rem;
  margin-top:.6em;
  background:currentColor;
  opacity:.5;
}
.conversao__lista--sai li{color:var(--suave);}
.conversao__lista--sai .rotulo-lista{color:var(--suave-2);}
.conversao__lista--entra li::before{background:var(--laranja);opacity:1;}
.conversao__lista--entra .rotulo-lista{color:var(--laranja);}

.conversao__quadro{
  position:relative;
  overflow:hidden;
  border:1px solid var(--linha);
  background:#06161E;
}
.conversao__quadro img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  max-height:50vh;
  object-fit:cover;
  will-change:filter;
}
.fita{
  position:absolute;
  top:-12%;bottom:-12%;left:0;
  width:34%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,rgba(255,90,31,0) 0%,rgba(255,123,69,.5) 42%,rgba(255,238,220,.95) 50%,rgba(255,123,69,.5) 58%,rgba(255,90,31,0) 100%);
  mix-blend-mode:screen;
  filter:blur(1.5px);
}
.conversao__selos{
  position:absolute;
  left:50%;bottom:clamp(.8rem,2vh,1.4rem);
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}
.selo{
  grid-area:1/1;
  padding:.16em .5em;
  border:1px solid rgba(169,183,191,.35);
  background:rgba(6,22,30,.78);
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.3rem,3vw,2.1rem);
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.selo--gas{visibility:hidden;color:var(--suave);}
.selo--ele{color:var(--laranja);box-shadow:0 0 34px rgba(255,90,31,.35);}

/* ---------- O que muda ---------- */
.muda__listas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,4vw,4rem);
  margin-top:clamp(2rem,6vh,3.5rem);
}
.muda__fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.25rem,3vw,2.75rem);
  margin-top:clamp(2.25rem,7vh,4.5rem);
}
.foto-legenda img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.foto-legenda figcaption{
  margin-top:.9rem;
  max-width:38ch;
  font-size:var(--t-detalhe);
  line-height:1.55;
  color:var(--suave);
}

/* ---------- Como funciona ---------- */
.como__grade{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  margin-top:clamp(2rem,6vh,3.5rem);
}
.como__passos{position:relative;}
.cabo{
  position:absolute;
  left:0;top:1.7rem;
  width:3.75rem;
  height:calc(100% - 3.4rem);
}
.cabo path{
  fill:none;
  stroke:var(--laranja);
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.9;
}
.passos{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(1.75rem,5vh,3rem);
}
.passos li{position:relative;padding-left:6rem;min-height:3.4rem;}
.passos__num{
  position:absolute;
  left:1.875rem;top:0;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:3.4rem;height:3.4rem;
  border:5px solid var(--petroleo);
  border-radius:50%;
  background:var(--laranja);
  color:#08202B;
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-sub);
  line-height:1;
}
.passos h3{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-sub);
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.passos p{
  margin-top:.6rem;
  color:var(--suave);
  font-size:var(--t-texto);
  max-width:46ch;
}
.como__foto img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.como__foto figcaption{
  margin-top:.9rem;
  font-size:var(--t-detalhe);
  line-height:1.55;
  color:var(--suave);
  max-width:36ch;
}

/* ---------- Quanto custa ---------- */
.preco__grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.preco__texto .botao{margin-top:1.9rem;}
.preco__cartao{
  padding:clamp(1.5rem,3.2vw,2.6rem);
  border:1px solid var(--linha);
  border-top:6px solid var(--laranja);
  background:var(--marfim-cartao);
}
.preco__rotulo{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-texto);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--suave);
}
.preco__valor{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.45rem;
  margin-top:.6rem;
  font-family:var(--texto);
  font-weight:700;
  font-size:var(--t-topo);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.preco__de{
  flex-basis:100%;
  font-size:var(--t-detalhe);
  font-weight:600;
  letter-spacing:0;
  color:var(--suave);
}
.preco__moeda{font-size:var(--t-sub);font-weight:600;color:var(--suave);}
.preco__obs{
  margin:.7rem 0 1.8rem;
  font-size:var(--t-detalhe);
  color:var(--suave);
}

/* ---------- De volta à rua ---------- */
.rua__foto{
  position:relative;
  height:clamp(20rem,64vh,38rem);
  overflow:hidden;
}
.rua__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;}
.rua__foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,25,35,.5) 0%,rgba(8,25,35,0) 32%,rgba(8,25,35,.88) 100%);
}
.rua__frase{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(1.5rem,5vh,3rem);
  z-index:2;
  max-width:16ch;
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-cartaz);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-shadow:0 2px 40px rgba(4,16,22,.6);
}
.rua__frase span{display:block;}
.rua__depoimentos{padding-top:clamp(2.5rem,6vh,4rem);}
.rua__vozes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  margin-top:clamp(1.75rem,5vh,2.75rem);
}
.voz{padding-top:1.4rem;border-top:1px solid var(--linha);}
.voz p{font-size:var(--t-sub);line-height:1.4;font-weight:600;}
.voz footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem;
  margin-top:1.1rem;
  font-size:var(--t-detalhe);
  color:var(--suave);
}

/* ---------- Perguntas ---------- */
.duvidas__grade{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.pergunta{border-top:1px solid var(--linha);}
.pergunta:last-child{border-bottom:1px solid var(--linha);}
.pergunta summary{
  position:relative;
  padding:1.2rem 2.8rem 1.2rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-sub);
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.pergunta summary::-webkit-details-marker{display:none;}
.pergunta summary::after{
  content:"";
  position:absolute;
  right:.35rem;top:50%;
  width:.7rem;height:.7rem;
  border-right:2px solid var(--acento);
  border-bottom:2px solid var(--acento);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s var(--curva);
}
.pergunta[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.pergunta p{
  margin:-.3rem 0 1.5rem;
  padding-right:1rem;
  max-width:62ch;
  color:var(--suave);
  font-size:var(--t-texto);
  line-height:1.6;
}

/* ---------- Onde e quando ---------- */
.onde__grade{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.onde__cabeca .botao{margin-top:1.9rem;}
.onde__dados{display:grid;gap:1.6rem;}
.dado h3{
  margin-bottom:.45rem;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-texto);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--laranja);
}
.dado p{line-height:1.55;}
.ligacao{
  text-decoration:underline;
  text-decoration-color:var(--laranja);
  text-underline-offset:.25em;
  text-decoration-thickness:2px;
}
.ligacao:hover{color:var(--laranja);}
.aviso-exemplo{
  margin-top:clamp(2.25rem,6vh,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--linha);
  max-width:65ch;
  font-size:var(--t-texto);
  line-height:1.6;
  color:var(--suave-2);
}

/* ---------- Rodapé ---------- */
.rodape{background:var(--petroleo-fundo);color:var(--marfim);}
.rodape .faixa{
  padding-top:clamp(2.5rem,7vh,4rem);
  padding-bottom:clamp(6rem,12vh,5rem);
}
.marca--rodape{display:block;font-size:var(--t-marca);letter-spacing:-.018em;}
.rodape__linha{margin-top:1.1rem;color:var(--suave);max-width:40ch;}
.rodape__miudo{
  margin-top:1.75rem;
  max-width:64ch;
  font-size:var(--t-detalhe);
  line-height:1.6;
  color:rgba(242,235,221,.42);
}

/* ---------- Barra fixa do celular ---------- */
.barra-fixa{display:none;}

/* ============================================================
   Celular
   ============================================================ */
@media (max-width:899px){
  .menu,.botao--topo{display:none;}

  .heroi::before{
    background:linear-gradient(180deg,rgba(8,25,35,.82) 0%,rgba(8,25,35,.1) 18%,rgba(8,25,35,.42) 30%,rgba(8,25,35,.94) 42%,rgba(8,25,35,.99) 58%,rgba(8,25,35,1) 100%);
  }
  .heroi__foto img{object-position:34% 38%;}
  .heroi__conteudo{padding-bottom:6.5rem;}
  .heroi__bloco{max-width:none;}
  .heroi__sub{font-size:1rem;}

  .conversao__palco{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1.9rem;
    min-height:0;
    padding-top:clamp(2.5rem,7vh,4rem);
  }
  .conversao__cabeca{order:1;}
  .conversao__quadro{order:2;}
  .conversao__lista--sai{order:3;}
  .conversao__lista--entra{order:4;}
  .conversao__quadro img{max-height:none;aspect-ratio:4/3;}

  .muda__listas,.muda__fotos{grid-template-columns:1fr;}
  .muda__fotos{gap:2.25rem;}

  .como__grade,.preco__grade,.rua__vozes,.duvidas__grade,.onde__grade{grid-template-columns:1fr;}
  .como__grade{gap:2.5rem;}
  .cabo{width:3rem;}
  .passos li{padding-left:4.75rem;min-height:3rem;}
  .passos__num{left:1.5rem;width:3rem;height:3rem;font-size:1.4rem;border-width:4px;}

  .rua__foto{height:clamp(18rem,52vh,26rem);}

  .barra-fixa{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:80;
    align-items:center;
    justify-content:center;
    padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    background:var(--laranja);
    color:#08202B;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    box-shadow:0 -8px 26px rgba(4,16,22,.4);
    transform:translateY(130%);
    transition:transform .3s var(--curva);
  }
  body.passou-topo .barra-fixa{transform:translateY(0);}
}

/* ============================================================
   Menos movimento
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .fita{display:none;}
  .conversao__quadro img{filter:none !important;}
}