/* ============================================================
   Eddy's Junk Removal — folha unica, MOBILE-FIRST.
   Base = 375px. As media queries so AMPLIAM (min-width).
   Escala fluida gerada pelo metodo Utopia: corpo 16->18px,
   razao 1.20 no celular (denso, cabe 2-3 blocos por tela)
   e 1.28 no desktop (dramatico). Sem salto no breakpoint.
   ============================================================ */

:root{
  /* --ink-faint era #8B9285, que da 2,99:1 no branco e reprova no AA (minimo 4,5:1 para
     texto normal). Ele carrega os rotulos .micro, as legendas e o "Call or text" do hero,
     ou seja, reprovava a pagina inteira. #686F64 mantem a mesma leitura de cinza discreto
     e da 5,19:1 no branco e 4,88:1 no creme. */
  --ink:#0C0F0A; --ink-soft:#4A5245; --ink-faint:#686F64;
  --green:#6E9C22; --green-deep:#4E7016; --green-lite:#8CBE3C; --green-wash:#EFF4E4;
  --paper:#FFFFFF; --paper-warm:#F7F7F4; --line:#E3E5DE; --sea:#DCE8F2;
  --r-sm:6px; --r-md:10px; --r-lg:18px;
  --shadow:0 1px 2px rgba(12,15,10,.06), 0 10px 26px -12px rgba(12,15,10,.14);
  --wrap:1180px; --gut:16px; --bar:70px;

  /* escala tipografica fluida — 375px -> 1440px */
  --t--1:clamp(0.833rem, 0.817rem + 0.07vw, 0.879rem);   /* rotulo   13.3 -> 14.1 */
  --t-0: clamp(1rem,     0.956rem + 0.19vw, 1.125rem);   /* corpo    16   -> 18   */
  --t-1: clamp(1.2rem,   1.115rem + 0.36vw, 1.44rem);    /* lede     19.2 -> 23   */
  --t-2: clamp(1.44rem,  1.298rem + 0.61vw, 1.844rem);   /* h3       23   -> 29.5 */
  --t-3: clamp(1.728rem, 1.507rem + 0.94vw, 2.356rem);   /* h2       27.6 -> 37.7 */
  --t-4: clamp(2.074rem, 1.741rem + 1.42vw, 3.019rem);   /*          33   -> 48   */
  --t-5: clamp(2.488rem, 2.003rem + 2.07vw, 3.863rem);   /* hero     39.8 -> 61.8 */

  /* espaco fluido, mesmo metodo */
  --sp-sec:clamp(2.5rem, 1.9rem + 2.6vw, 6rem);          /* 40 -> 96 */
  --sp-blk:clamp(1.5rem, 1.2rem + 1.3vw, 2.9rem);        /* 24 -> 46 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-0)/1.55 "Instrument Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;letter-spacing:-.03em;line-height:1.02;
  margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,svg{max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:0;top:0;z-index:999;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;transform:translateY(-120%);transition:transform .16s}
.skip:focus{transform:none}

/* micro-label: o espacejamento do "R E M O V A L" da logo, virado em sistema */
.micro{font-family:"Archivo";font-weight:600;font-size:var(--t--1);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);margin:0;line-height:1}
.micro.green{color:var(--green-deep)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:14px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  font-family:"Archivo";font-weight:700;font-size:var(--t-0);letter-spacing:-.01em;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;text-align:center}
.btn-primary{background:var(--green);color:var(--ink)}   /* preto sobre verde = 5,9:1, passa AA */
.btn-primary:hover{background:var(--green-deep);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:12px;min-height:56px}
.logo{display:flex;align-items:baseline;gap:6px;font-family:"Archivo";font-weight:800;
  font-size:var(--t-0);letter-spacing:-.02em;white-space:nowrap;margin:0;padding-block:10px;
  min-height:44px}   /* e link pra home, entao tambem e alvo de toque */
.logo em{font-style:normal;color:var(--green-deep);font-weight:600;
  font-size:var(--t--1);letter-spacing:.15em}
.nav nav{display:none}
.nav-cta{display:none}
/* Em 320px o logo (193px) + idioma (44) + telefone (46) + folgas estoura por ~3px.
   Quem cede e o logo, nao o alvo de toque: reduzir o botao abaixo de 44px quebraria
   acessibilidade, e diminuir a marca 12% nessa largura ninguem percebe. */
@media (max-width:359.98px){
  .logo{font-size:calc(var(--t-0) * .88)}
  .logo em{letter-spacing:.1em}
  .nav .wrap{gap:8px}
}
/* trocador de idioma: pilula curta, cabe em 320px ao lado do logo e do telefone */
.lang{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:none;
  min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:"Archivo";font-weight:700;font-size:var(--t--1);letter-spacing:.08em;
  transition:border-color .18s,background .18s}
.lang:hover{border-color:var(--ink);background:var(--paper-warm)}
.nav-tel{flex:none;font-family:"Archivo";font-weight:700;font-size:var(--t-0);
  white-space:nowrap;min-height:46px;min-width:46px;padding:11px 0;display:flex;
  align-items:center;justify-content:center;gap:7px}
/* Abaixo de 380px sobra so o icone de 19px. Sem o min-width o alvo de toque fica
   19px de largura, metade mais fino que o minimo de 44px. O padding lateral so
   entra nesse caso, para nao empurrar o numero quando ele reaparece. */
@media (max-width:379.98px){.nav-tel{padding-inline:13px}}
.nav-tel svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--green-deep);stroke-width:2}
/* O numero por extenso so cabe na barra a partir de 480px. O limite era 380px, calibrado
   ANTES da pilula de idioma existir; com ela ocupando 44px o numero estourava em 414px.
   Abaixo disso fica so o icone, e quem quer ligar tem a barra fixa no rodape de qualquer jeito. */
.tel-num{display:none}
@media (min-width:480px){.tel-num{display:inline}}

/* ============ HERO ============ */
.hero{padding-top:22px}
.hero h1{font-size:var(--t-5);font-weight:800;margin-top:10px;letter-spacing:-.035em}
.hero h1 .u{background:linear-gradient(transparent 66%,var(--green) 66% 90%,transparent 90%)}
.sub{margin-top:12px;font-size:var(--t-0);color:var(--ink-soft);max-width:44ch}
.cta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:18px}
.tel{font-family:"Archivo";text-align:center;padding:7px 8px;line-height:1.2;
  min-height:50px;display:flex;flex-direction:column;justify-content:center}
.tel strong{display:block;font-weight:700;font-size:var(--t-0);letter-spacing:-.01em}
.tel span{display:block;font-family:"Instrument Sans";font-weight:400;
  font-size:var(--t--1);color:var(--ink-faint)}
.hero-truck{position:relative;margin:10px calc(var(--gut) * -1) 0;padding-bottom:2.5%}
.hero-truck svg{display:block;width:100%;height:auto}

.strip{margin-top:14px;background:var(--paper-warm);border-block:1px solid var(--line)}
.strip-in{display:flex;flex-wrap:wrap;gap:6px 16px;padding-block:11px}

/* ============ SECOES ============ */
.sec{padding-block:var(--sp-sec)}
.sec.warm{background:var(--paper-warm);border-block:1px solid var(--line)}
.head{margin-bottom:var(--sp-blk);max-width:56ch}
.head h2{font-size:var(--t-3);font-weight:800;margin-top:8px}
.lede{margin-top:10px;color:var(--ink-soft);font-size:var(--t-0)}

/* 2 COLUNAS ja no celular: e o que faz caber 2-3 blocos por tela */
.grid6{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 13px}
.card .ico{width:22px;height:22px;color:var(--green-deep);fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:var(--t-0);font-weight:700;margin:9px 0 4px;letter-spacing:-.015em;line-height:1.15}
.card p{font-size:var(--t--1);color:var(--ink-soft);line-height:1.45}

/* passos: numero ao lado do texto, nao acima — economiza altura */
.steps{display:grid;gap:14px;counter-reset:s}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;column-gap:12px;
  align-items:start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0;padding-bottom:0}
/* posicao explicita: sem isso o <p> escorrega pra coluna do numero e o titulo
   fica espremido num filete de 40px */
.step::before{grid-column:1;grid-row:1/3;content:counter(s,decimal-leading-zero);
  font-family:"Archivo";font-weight:800;font-size:var(--t-2);letter-spacing:-.05em;
  color:var(--green);opacity:.4;line-height:1}
.step h3{grid-column:2;grid-row:1;font-size:var(--t-0);font-weight:700;margin:0 0 3px}
.step p{grid-column:2;grid-row:2;color:var(--ink-soft);font-size:var(--t--1);line-height:1.45}

/* antes / depois */
/* --- TIRA DE FOTOS REAIS ---
   Horizontal com scroll-snap em vez de grade empilhada: 7 itens em coluna unica custariam
   ~4 telas de rolagem no celular; aqui custam pouco mais que a altura de UM cartao.
   grid-auto-columns:60% deixa o segundo cartao aparecendo pela metade, que e o que avisa
   o dedo que ha mais coisa pro lado — sem precisar de setinha nem de texto explicando. */
.shots{list-style:none;margin:0 calc(var(--gut) * -1) 10px;padding:0 var(--gut) 2px;
  display:grid;grid-auto-flow:column;grid-auto-columns:60%;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none}
.shots::-webkit-scrollbar{display:none}
.shot{scroll-snap-align:start;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--line)}
.shot img,.shot video{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;background:var(--line)}
.shots-cap{margin:0 0 18px;font-size:var(--t--1);color:var(--ink-faint)}

/* --- SETAS DA TIRA ---
   Eu tinha escondido a barra de rolagem para a tira ficar limpa, e com isso quem usa MOUSE
   ficou sem nenhuma forma de avancar: roda vertical nao rola na horizontal e nao sobrava
   barra para arrastar. No dedo funcionava; no desktop a galeria virava uma foto so. As
   setas devolvem o controle sem trazer a barra de volta. Ficam ocultas ate o JS ligar
   (atributo hidden no HTML), entao sem JS ninguem ve botao que nao faz nada — e ai a
   barra de rolagem nativa volta a aparecer, pela regra logo abaixo. */
.shots-wrap{position:relative}
.shots-nav{position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);color:var(--ink);cursor:pointer;padding:0;
  transition:opacity .15s ease, transform .15s ease}
.shots-nav[hidden]{display:none}
.shots-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.shots-nav.is-prev{left:2px}
.shots-nav.is-next{right:2px}
.shots-nav:disabled{opacity:0;pointer-events:none}     /* na ponta, some em vez de ficar morta */
.shots-nav:hover{transform:scale(1.06)}
.shots-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Sem JS a tira precisa da barra de volta, senao fica sem saida nenhuma no desktop. */
html:not(.js-shots) .shots{scrollbar-width:thin}
html:not(.js-shots) .shots::-webkit-scrollbar{display:block;height:8px}

.shot-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-md);overflow:hidden}
.shot-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* --- VISOR --- */
.viewer{width:min(94vw,900px);max-width:none;max-height:92vh;padding:0;border:0;
  border-radius:var(--r-md);background:var(--ink);overflow:visible}
.viewer::backdrop{background:rgba(12,15,10,.86)}
.viewer-img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;
  border-radius:var(--r-md)}
.viewer-x,.viewer-nav{position:absolute;z-index:2;display:flex;align-items:center;
  justify-content:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;
  background:rgba(12,15,10,.62);color:#fff}
.viewer-x svg,.viewer-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.viewer-x{top:8px;right:8px}
.viewer-nav{top:calc(50% - 22px)}
.viewer-nav.is-prev{left:8px}
.viewer-nav.is-next{right:8px}
.viewer-x:focus-visible,.viewer-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.viewer-count{position:absolute;left:0;right:0;bottom:-30px;margin:0;text-align:center;
  font-family:"Archivo";font-weight:600;font-size:var(--t--1);color:rgba(255,255,255,.85)}

@media (min-width:760px){
  .shots{grid-auto-columns:23%;margin-inline:0;padding-inline:0;scroll-padding-left:0}
  .shots-cap{margin-bottom:22px}
  .shots-nav.is-prev{left:-14px}
  .shots-nav.is-next{right:-14px}
}
@media (prefers-reduced-motion:reduce){.shots-nav{transition:none}.shots-nav:hover{transform:none}}

/* Os dois casos tambem viram tira, pelo mesmo motivo da galeria: empilhados eles davam
   UM item por tela e eram metade da queixa de "scroll infinito". A 88% o par antes/depois
   continua grande o bastante pra comparar (cada foto ~168px, igual ao que era em pilha) e
   ainda sobra a beirada do segundo caso aparecendo, que e o que avisa que ha mais. */
.cases{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;
  margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 2px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none}
.cases::-webkit-scrollbar{display:none}
.case{scroll-snap-align:start}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ba figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--line)}
.ba img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{position:absolute;left:6px;top:6px;background:rgba(12,15,10,.82);color:#fff;
  padding:4px 8px;border-radius:3px;font-family:"Archivo";font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.ba figure.is-after figcaption{background:var(--green);color:var(--ink)}
.case-cap{margin-top:7px;font-size:var(--t--1);color:var(--ink-faint)}
.disclosure{margin-top:16px;font-size:var(--t--1);color:var(--ink-faint)}

/* areas: mapa + lista lado a lado ja no celular */
/* celular: texto em cima, mapa embaixo num tamanho legivel.
   As chips saem — o mapa ja nomeia as mesmas cidades, repetir e desperdicio de tela. */
.areas-grid{display:grid;grid-template-columns:1fr;gap:18px}
.areas-grid h2{font-size:var(--t-3);font-weight:800;margin-top:8px}
.areas-grid>div{order:1}
.mapa{order:2;max-width:296px;margin-inline:auto}
.areas-grid .chips{display:none}
.mapa{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips li{border:1px solid var(--line);background:var(--paper);border-radius:99px;
  padding:6px 11px;font-size:var(--t--1)}

/* ============ AVALIACOES DO GOOGLE ============ */
/* Faixa, nao cartao. Isto e prova de apoio: se ganhar peso de secao, rouba a atencao
   do preco e do orcamento, que sao o que fecham venda. Por isso a nota desceu de 37px
   para o tamanho de subtitulo, e o botao virou contorno em vez de verde solido. */
/* Tres faixas finas empilhadas (nota, depoimentos, rodape) em vez de um cartao unico e
   alto. Cada faixa tem altura propria e pequena, entao o bloco nunca vira "aquele quadrado
   gigante" no meio da pagina: ele cresce em largura, nao em altura. */
.google{margin-top:26px;display:grid;gap:12px}
.g-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 16px}
.g-mark{width:20px;height:20px;flex:none}
.g-num{font-family:"Archivo";font-weight:800;font-size:var(--t-1);line-height:1;margin:0;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.g-stars{color:#A16610;letter-spacing:1px;font-size:var(--t--1);margin:0}
.g-lbl{font-size:var(--t--1);color:var(--ink-soft);margin:0}
.g-all{margin-left:auto;font-size:var(--t--1);color:var(--green-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center}

/* Os depoimentos sao copiados palavra por palavra do perfil, inclusive os erros de
   digitacao. Corrigir o texto de um cliente e o comeco de inventar o depoimento. */
.g-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.g-rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px}
.g-s{color:#A16610;letter-spacing:1px;font-size:var(--t--1);margin:0 0 7px}
.g-rev blockquote{margin:0;font-size:var(--t--1);color:var(--ink-soft);line-height:1.55}
.g-who{margin:9px 0 0;font-family:"Archivo";font-weight:700;font-size:var(--t--1)}
.g-foot{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:0;
  font-size:var(--t--1);color:var(--ink-soft)}
.g-foot a{color:var(--green-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.g-all:focus-visible,.g-foot a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:760px){
  .g-list{grid-template-columns:1fr 1fr;gap:12px}
}

/* ============ PRECOS ============ */
.loads{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* grid-template-rows aqui e o que resolve o desalinhamento: as 3 faixas (medidor,
   rotulo, preco+conta) recebem a mesma altura em TODOS os cartoes, entao um rotulo
   mais longo nao empurra so o cartao dele. */
/* As 5 faixas (cacamba, nivel, total, exemplo, conta) recebem a mesma altura em TODOS os
   cartoes. E o exemplo que leva o 1fr: e a linha que mais varia de tamanho entre ingles e
   espanhol, entao e ela que absorve a folga e mantem a conta alinhada na base. */
.load{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 12px 18px;text-align:center;
  display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8px}
.load.is-full{border-color:var(--ink);box-shadow:var(--shadow)}
/* A cacamba vista de lado, com as duas rodas embaixo. Um retangulo enchendo era lido como
   copo ou tanque; com as rodas ninguem precisa da legenda pra entender que aquilo e a
   caçamba da picape, e o desenho diz o mesmo em qualquer idioma. */
.bed{display:block;width:100%;max-width:150px;height:auto;margin:0 auto}
.bed-wall{stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round}
.bed-floor{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round}
.bed-cab,.bed-chassis,.bed-tire{fill:var(--ink)}
.bed-hub{fill:var(--paper)}
/* A CAPACIDADE VAZIA precisa ser visivel, senao o medidor nao mede nada: sem ela o ¼ e o
   ½ viravam duas barrinhas verdes soltas no ar, de alturas parecidas, e so o texto dizia
   qual era qual. Com o cinza atras, a fracao se le de relance — que era o unico trabalho
   desse desenho. */
.bed-empty{fill:var(--line)}
/* Verde igual nos quatro. O verde escuro so no "full" fazia o cartao parecer OUTRA coisa
   em vez do fim da mesma escala; o destaque dele ja vem da borda preta do .is-full. */
.bed-fill{fill:var(--green)}
/* Sem nowrap: em espanhol os rotulos sao mais longos e o nowrap estourava a largura
   do cartao em ate 222px. O alinhamento entre cartoes ja vem do grid-template-rows
   la em cima, entao quebrar linha aqui nao desalinha nada. */
.load .lvl{font-family:"Archivo";font-weight:700;font-size:var(--t-0);margin:0;
  text-wrap:balance}
.load .total{font-family:"Archivo";font-weight:800;font-size:var(--t-2);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1;margin:0}
.load .eg{margin:0;font-size:var(--t--1);color:var(--ink-soft);line-height:1.4;
  text-wrap:balance}
.load .calc{font-size:calc(var(--t--1) * .93);color:var(--ink-soft);margin:0;line-height:1.35;
  padding-top:8px;border-top:1px solid var(--line);text-wrap:balance}
.load .calc span{color:var(--green-deep);font-weight:600}
.incl{margin:16px 0 0;font-size:var(--t--1);color:var(--ink-soft);text-align:center}
.incl strong{color:var(--ink)}
.pricebar{margin-top:18px;background:var(--green-wash);border:1px solid #D9E4C2;
  border-radius:var(--r-md);padding:20px;display:grid;gap:16px}
.pricebar p{margin:0;font-size:var(--t-0);color:var(--ink-soft)}
.pricebar strong{color:var(--ink)}
/* A letra miuda vira sanfona fechada. O texto continua na pagina inteiro (o Google le, e
   quem quiser conferir abre), mas para de custar meia tela de leitura a quem so quer o preco. */
.fine{margin:14px 0 0;border-top:1px solid var(--line);padding-top:4px}
.fine summary{cursor:pointer;list-style:none;font-size:var(--t--1);color:var(--green-deep);
  font-weight:600;min-height:44px;display:flex;align-items:center;gap:8px}
.fine summary::-webkit-details-marker{display:none}
.fine summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease}
.fine[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.fine summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fine p{margin:0 0 10px;font-size:var(--t--1);color:var(--ink-soft);line-height:1.6;max-width:78ch}
@media (prefers-reduced-motion:reduce){.fine summary::after{transition:none}}
@media (min-width:760px){
  .loads{grid-template-columns:repeat(4,1fr);gap:16px}
  .load{padding:20px 16px 22px}
  .bed{max-width:158px}
  .load .total{font-size:var(--t-3)}
  .pricebar{grid-template-columns:1fr auto;align-items:center;gap:26px;padding:22px 26px}
}

/* ============ CTA FINAL ============ */
.final{background:var(--ink);color:#fff;padding-block:var(--sp-sec)}
.final .micro{color:var(--green)}
.final h2{font-size:var(--t-3);font-weight:800;margin-top:8px}
.fgrid{display:grid;gap:20px}
.ticks{display:grid;gap:8px;margin-top:16px;font-size:var(--t--1)}
.ticks li{display:flex;gap:9px;align-items:flex-start;color:#D7DCD2;line-height:1.45}
.ticks svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green);
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.big-text{margin-top:16px;width:100%}

.form{background:#fff;border-radius:var(--r-lg);padding:16px;color:var(--ink)}
.row{display:grid;gap:0}   /* 2 colunas so a partir do tablet: em 375px o telefone corta */
.field{margin:0 0 9px}
.field label{display:block;font-family:"Archivo";font-weight:600;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;font:inherit;font-size:16px;background:var(--paper-warm);color:var(--ink)}
/* 16px e obrigatorio: abaixo disso o iOS da zoom sozinho ao focar */
.field textarea{resize:vertical;min-height:72px}
.form .btn{width:100%;margin-top:2px}
.form-note{margin-top:9px;font-size:var(--t--1);color:var(--ink-faint);line-height:1.4}
.form-note.is-warn{color:var(--green-deep);font-weight:500}

/* ============ RODAPE ============ */
.f{background:#070906;color:#8B9285;padding:34px 0 26px;font-size:var(--t--1)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cols>:first-child{grid-column:1 / -1}
.f h2{font-family:"Archivo";font-weight:600;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin:0 0 8px;line-height:1.4}
.f a{display:inline-block;padding-block:12.5px}   /* fecha 46px de alvo de toque */
.f .logo{color:#fff;padding-block:0}
/* No rodape o fundo e quase preto, e o verde-escuro da marca cai para 3,48:1 ali. O
   verde-claro da mesma paleta da 9:1 no preto e mantem a logo com a cor da marca. */
.f .logo em{color:var(--green-lite)}
.f-about{margin-top:8px;max-width:38ch}
.bot{border-top:1px solid #1B1F18;margin-top:24px;padding-top:14px;font-size:11.5px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ============ BARRA FIXA DE ACAO (mobile) ============ */
.callbar{position:fixed;inset:auto 0 0 0;z-index:150;display:grid;grid-template-columns:1fr 1fr;gap:9px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom));transition:transform .22s ease}
.callbar .btn{min-height:48px;padding:12px 6px}
.callbar.is-hidden{transform:translateY(115%)}

/* ============================================================
   RAM 1500 — desenho e movimento
   chao y=140 | eixos cy=116 r=24 (cx 90 e 254) | friso da cacamba y=65..73
   A carga fica ENTRE o interior da cacamba e o flanco externo,
   por isso ela aparece dentro do carro e nao boiando em cima.
   ============================================================ */
/* ARMADILHA: em <use>, transform-box:fill-box resolve o centro no viewBox INTERNO do
   simbolo (24,24), nao no lugar onde a peca foi colocada (66,92). A roda entao ORBITA
   a origem em vez de girar no proprio eixo, e o carro parece desmontar. Origem sempre
   absoluta, em coordenadas do viewBox, uma por roda. */
.tk-wheel{transform-box:view-box}
.tk-wheel.w-a{transform-origin:83px 118px}    /* eixo traseiro */
.tk-wheel.w-b{transform-origin:277px 118px}   /* eixo dianteiro */
.tk-body,.tk-load,.tk-dash{transform-box:fill-box;transform-origin:center}

/* --- HERO com a FOTO REAL da picape ---
   Nao da pra girar a roda de uma foto, entao quem carrega o movimento passa a ser a
   estrada correndo por baixo, mais uma suspensao minima na carroceria. O olho le
   "andando" pelo cenario que passa, nao pela roda: e o mesmo truque de animacao 2D
   antiga, e aqui e o unico honesto. */
/* A picape parou de flutuar (bob) quando ganhou chao de verdade embaixo. Corpo balancando
   sobre asfalto PARADO lia como erro, nao como movimento: sem a estrada correndo junto, o
   olho so via a picape tremer. Picape parada sobre asfalto solido e a leitura honesta. */
.hero-photo{display:block;width:100%;height:auto;position:relative;z-index:2}
/* Sombra de contato ELIPTICA, nao drop-shadow no recorte: o drop-shadow segue o contorno
   do PNG e acende um halo claro em volta do pneu, justo onde a borda do recorte e mais
   suja. A elipse resolve o halo e ainda apoia a picape no chao, escondendo a base dos
   pneus que o removedor de fundo comeu. */
/* As medidas abaixo saem do recorte: os pneus encostam na borda DE BAIXO do arquivo, e o
   .hero-truck tem 18px de padding embaixo. Logo o ponto de contato fica a 18px do fundo do
   bloco, e e nele que a sombra e a estrada precisam cair. Quando o recorte tinha folga
   inferior, a estrada corria uns 30px abaixo da roda e a picape parecia flutuar. */
/* GEOMETRIA DO CHAO — tudo em % da LARGURA, porque a picape escala com ela.
   O recorte tem 1600x648 e os pneus encostam na borda de baixo do arquivo. A faixa de
   asfalto tem 1600x190, dos quais 40px ficam ABAIXO da linha de contato. Logo:
     padding-bottom da caixa = 40/1600 = 2.5% da largura  -> e onde o pneu toca
     .road com bottom:0                                   -> sobra exatamente esses 2.5%
   Percentagem de padding e de margin resolve contra a LARGURA; a de bottom/height resolve
   contra a ALTURA. Por isso a sombra usa margin-bottom (largura) + aspect-ratio, e nao
   bottom/height: com bottom em % ela desgrudava do pneu a cada breakpoint. */
.hero-truck::after{content:"";position:absolute;z-index:1;left:9%;right:9%;bottom:0;
  margin-bottom:1.4%;aspect-ratio:36/1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(12,15,10,.30) 0%,rgba(12,15,10,.13) 45%,transparent 72%)}
.hero-truck .road{position:absolute;z-index:0;left:0;right:0;bottom:0;
  display:block;width:100%;height:auto}

/* --- FAIXA DO RODAPE: a historia certa do negocio ---
   o lixo esta no chao > a picape chega VAZIA > a carga SOBE pra dentro
   dela > ela vai embora carregada. (Basculante despejando lixo contava
   a historia ao contrario: parecia largar entulho na rua do cliente.) */
.haul{position:relative;background:var(--paper-warm);border-top:1px solid var(--line);
  height:clamp(126px,38vw,176px);overflow:hidden}
.haul-road{position:absolute;left:0;right:0;bottom:20px;height:2px;background:var(--line)}
.haul-road::after{content:"";position:absolute;inset:0;height:2px;opacity:.35;
  background:repeating-linear-gradient(90deg,var(--ink-faint) 0 20px,transparent 20px 44px)}
.haul-tag{position:absolute;left:var(--gut);top:12px}
.haul-truck{position:absolute;left:0;bottom:8px;width:clamp(178px,54vw,250px);
  will-change:transform;animation:drive 7s infinite}
.haul-truck svg{display:block;width:100%;height:auto}
.haul-truck .tk-wheel{animation:roll 7s linear infinite}
.haul-truck .tk-body {animation:susp 7s infinite}
.haul-truck .tk-load {animation:load 7s infinite}

/* Sem JS o ciclo roda sozinho: a pagina nunca depende de script.
   Com JS, pausa fora da tela e reinicia do quadro 0 a cada entrada. */
.js-motion .haul:not(.is-live) .haul-truck,
.js-motion .haul:not(.is-live) .haul-pile,
.js-motion .haul:not(.is-live) .haul-truck *{animation-play-state:paused}

@keyframes drive{
  0%      {transform:translateX(-72vw);animation-timing-function:cubic-bezier(.15,.62,.3,1)}
  26%     {transform:translateX(20vw);animation-timing-function:linear}
  62%     {transform:translateX(20vw);animation-timing-function:cubic-bezier(.65,0,.9,.4)}
  88%,100%{transform:translateX(122vw)}
}
@keyframes roll{                    /* gira so andando: mesmos 26% e 62% do drive */
  0%{transform:rotate(0)} 26%{transform:rotate(680deg)}
  62%{transform:rotate(680deg)} 88%,100%{transform:rotate(1360deg)}
}
@keyframes susp{
  0%,22%  {transform:translateY(0)}
  27%     {transform:translateY(2.5px)}   /* mergulho da freada */
  32%     {transform:translateY(0)}
  47%     {transform:translateY(3px)}     /* peso da carga caindo na cacamba */
  53%     {transform:translateY(0)}
  60%,100%{transform:translateY(0)}
}
@keyframes load{                    /* a carga cai DENTRO da cacamba e assenta */
  0%,34%  {transform:translateY(-46px) scaleY(1);opacity:0;animation-timing-function:cubic-bezier(.5,0,.85,.4)}
  35%     {transform:translateY(-46px);opacity:1}
  45%     {transform:translateY(0)     scaleY(1);animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
  50%     {transform:translateY(1px)   scaleY(.94)}   /* amassa no impacto */
  56%,100%{transform:translateY(0)     scaleY(1);opacity:1}
}
/* pilha no chao: espera a picape, depois some conforme e carregada */
.haul-pile{position:absolute;bottom:18px;left:24vw;width:clamp(50px,15vw,70px);
  animation:pile 7s infinite;transform-origin:bottom center}
.haul-pile svg{display:block;width:100%;height:auto}
@keyframes pile{
  0%,30%  {opacity:1;transform:translateY(0) scale(1)}
  44%     {opacity:0;transform:translateY(-10px) scale(.8)}
  92%     {opacity:0;transform:translateY(-10px) scale(.8)}
  96%,100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (min-width:768px){
  :root{--gut:26px}
  .grid6{grid-template-columns:repeat(3,1fr);gap:14px}
  .card{padding:20px 18px}
  .steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .step{border-bottom:0;padding-bottom:0;grid-template-columns:1fr;row-gap:6px}
  .step::before{grid-row:1;font-size:var(--t-3)}
  .step h3{grid-column:1;grid-row:2}
  .step p{grid-column:1;grid-row:3}
  .row{grid-template-columns:1fr 1fr;gap:9px}
  .areas-grid{grid-template-columns:1fr 1.05fr;gap:24px;align-items:center}
  .areas-grid>div{order:2}
  .mapa{order:1;max-width:none}
  .areas-grid .chips{display:flex}
  /* no desktop a tira volta a ser grade: cabem os dois casos lado a lado sem arrastar */
  .cases{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;gap:20px;
    margin-inline:0;padding-inline:0;overflow-x:visible}
  .ba{gap:10px}
  .cols{grid-template-columns:1.6fr 1fr 1fr}
  .cols>:first-child{grid-column:auto}
  .strip-in{justify-content:space-between;padding-block:15px}
  .form{padding:26px}
  .fgrid{gap:32px}
}

/* ============================================================
   DESKTOP — 1024px. A barra fixa sai de cena.
   ============================================================ */
@media (min-width:1024px){
  :root{--gut:32px;--bar:0px}
  .callbar{display:none}
  .nav-in{min-height:72px;gap:28px}
  .nav-tel{display:none}
  .nav nav{display:block;margin-left:auto}
  .nav nav ul{display:flex;gap:24px;font-size:var(--t-0);font-weight:500}
  .nav nav a{display:inline-block;padding-block:10px}
  .nav-cta{display:inline-flex;min-height:44px;padding:11px 20px}
  .hero{padding-top:64px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
  .hero h1{margin-top:14px}
  .sub{font-size:var(--t-1);margin-top:20px;max-width:36ch}
  .cta{display:flex;align-items:center;gap:20px;margin-top:30px}
  .tel{text-align:left;padding:0}
  .tel strong{font-size:var(--t-1)}
  .hero-truck{margin:0}
  .strip{margin-top:44px}
  .head{margin-bottom:var(--sp-blk)}
  .head h2{font-size:var(--t-4)}
  .final h2{font-size:var(--t-4)}
  .card h3{font-size:var(--t-1)}
  .card p,.step p,.ticks{font-size:var(--t-0)}
  .card .ico{width:26px;height:26px}
  .areas-grid{grid-template-columns:1fr 1.3fr;gap:44px}
  .areas-grid h2{font-size:var(--t-4)}
  .fgrid{grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .form{padding:30px}
  .big-text{width:auto}
  .haul{height:clamp(150px,19vw,200px)}
  .haul-truck{width:clamp(230px,28vw,340px);bottom:10px}
  .haul-pile{width:clamp(66px,8vw,94px);bottom:16px;left:22vw}
  .haul-road{bottom:24px}
}

/* ============================================================
   MOVIMENTO REDUZIDO — pose-poster, sem movimento nenhum
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .haul-truck{transform:translateX(20vw)}
  .haul-pile{opacity:0}
}