/* ==========================================================================
   JOAZ PNEUS E ACESSORIOS - Design System
   Direcao: dark industrial automotivo. Tema unico (dark), 1 accent (vermelho),
   1 escala de raio (3px), 1 familia tipografica (Barlow / Barlow Condensed).
   CSS nativo. Sem build, sem framework, sem dependencia externa.
   ========================================================================== */

/* ---------- 1. Fontes (self-hosted, sem Google Fonts CDN) ---------- */
@font-face{font-family:'Barlow';src:url('../assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';src:url('../assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';src:url('../assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';src:url('../assets/fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/barlow-condensed-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens ---------- */
:root{
  /* Cor: um accent (vermelho JOAZ) sobre neutros frios de aco */
  --red:        #E11B23;   /* accent primario: botoes, marca, display */
  --red-hover:  #C4141B;
  --red-text:   #FF5058;   /* variante clara: unico uso em texto pequeno (AA) */

  --asphalt:    #0C0D0F;   /* fundo da pagina (off-black, nunca #000) */
  --graphite:   #131518;   /* superficie 1 */
  --steel-900:  #1A1D21;   /* superficie 2 */
  --steel-800:  #22262B;
  --line:       #2B3037;   /* bordas */
  --steel-400:  #A2ABB5;   /* texto secundario (5.0:1 no asfalto) */
  --steel-200:  #C3CAD2;
  --white:      #F2F4F6;

  /* Tipografia */
  --f-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Forma: uma unica escala de raio no site inteiro */
  --r: 3px;

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1240px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. Base ---------- */
/* o cabecalho e fixo: as ancoras param abaixo dele, nao debaixo */
[id]{scroll-margin-top:calc(78px + 1.75rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--asphalt);
  color:var(--white);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.015em;text-transform:uppercase}
p{margin:0}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px;border-radius:var(--r)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.icon{width:1em;height:1em;fill:currentColor;flex:none}

/* Escala de display */
.d1{font-size:clamp(2.75rem,7.5vw,5.25rem)}
.d2{font-size:clamp(2.25rem,5vw,3.75rem)}
.d3{font-size:clamp(1.5rem,2.6vw,2rem)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--steel-200);max-width:56ch;line-height:1.55}
.muted{color:var(--steel-400)}

/* ---------- 4. Faixa quadriculada (elemento de marca) ---------- */
.checker{
  height:10px;
  background-image:
    linear-gradient(45deg,var(--white) 25%,transparent 25%,transparent 75%,var(--white) 75%),
    linear-gradient(45deg,var(--white) 25%,transparent 25%,transparent 75%,var(--white) 75%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
  background-color:var(--asphalt);
}
.checker--red{background-color:var(--red)}

/* ---------- 5. Marca ---------- */
/* Logotipo vetorizado do original. Arquivos em assets/marca/, ver MARCA.md */
.brand{display:inline-flex;align-items:center}
.brand img{height:56px;width:auto;display:block}
.footer .brand img{height:64px}

/* ---------- 6. Botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;
  letter-spacing:.01em;
  padding:.8rem 1.35rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background-color .18s var(--ease),transform .12s var(--ease),border-color .18s var(--ease);
}
.btn .icon{font-size:1.15em}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--red);color:#fff}          /* 4.8:1 */
.btn--primary:hover{background:var(--red-hover)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--white);border-color:var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:#3B424B}
.btn--lg{padding:1rem 1.75rem;font-size:1.05rem}

/* ---------- 7. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:78px;
  display:flex;align-items:center;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
  border-bottom:1px solid var(--line);background:rgba(12,13,15,.96);
}
.header.is-stuck{background:rgba(12,13,15,.92);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  font-size:.9rem;font-weight:500;color:var(--steel-200);
  transition:color .16s var(--ease);
}
.nav a:hover{color:var(--white)}
.header__cta{display:flex;align-items:center;gap:.75rem}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--white);width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.navtoggle .icon{font-size:1.3rem}

/* ---------- 8. Hero (split: copy | imagem) ---------- */
.hero{position:relative;min-height:680px;display:flex;align-items:center;padding-top:10rem;padding-bottom:7rem}
.hero__media{
  position:absolute;inset:78px 0 0 42%;z-index:0;overflow:hidden;
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 34%;filter:brightness(.9) contrast(1.03)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--asphalt),rgba(12,13,15,.46) 46%,rgba(12,13,15,.08)),linear-gradient(0deg,var(--asphalt),transparent 38%)}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__copy{max-width:41rem}
.hero h1{margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--red-text)}
.hero .lead{margin-bottom:2.25rem;max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- 9. Faixa de credenciais ---------- */
.creds{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--graphite)}
.creds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding-block:2.5rem}
.cred__k{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--white)}
.cred__k span{color:var(--red)}
.cred__v{font-size:.9rem;color:var(--steel-400);margin-top:.4rem;max-width:26ch}

/* ---------- 10. Secoes ---------- */
.section{padding-block:var(--section-y)}
.section__head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__head h2{margin-bottom:1.1rem}
.section__head p{color:var(--steel-400);font-size:1.0625rem;max-width:58ch}

/* Quem somos: grid assimetrico 5/7 com imagem deslocada */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__figure{position:relative}
.about__figure img{border-radius:var(--r);filter:contrast(1.03);aspect-ratio:4/5;object-fit:cover;object-position:19% 50%;width:100%}
.about__rule{position:absolute;left:0;right:0;bottom:-1px;height:6px;background:var(--red)}
.about__body h2{margin-bottom:1.5rem}
.about__body p{color:var(--steel-200);max-width:60ch;margin-bottom:1.15rem;font-size:1.0625rem}
.about__body p:last-of-type{margin-bottom:0}
.about__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);margin-top:2.5rem;overflow:hidden}
.about__facts div{background:var(--asphalt);padding:1.25rem 1.4rem}
.about__facts dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400);margin-bottom:.35rem}
.about__facts dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1.15}

/* Equipe: retrato 4:5 a esquerda, nome e contato a direita */
.team{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.team__head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.team__head h3{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1.1rem}
.team__head p{color:var(--steel-400);max-width:58ch}
.team__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);align-items:start}
.person{
  display:grid;grid-template-columns:clamp(9rem,16vw,13rem) minmax(0,1fr);
  gap:clamp(1.1rem,2vw,1.5rem);
  background:var(--graphite);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.person__photo{margin:0;grid-column:1;grid-row:1}
/* a foto do gerente tem o mesmo tom do card: a moldura fina define as duas */
.person__photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);filter:contrast(1.03)}
/* nome ao lado da foto; o resto do card corre na largura toda, sem vao lateral */
.person__id{grid-column:2;grid-row:1;align-self:center}
.person__body{grid-column:1/-1;grid-row:2}
.person__role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);font-weight:600;margin-bottom:.45rem}
.person__name{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.05}
.person__note{color:var(--steel-400);font-size:.95rem;max-width:46ch}
.person .infoline{padding-block:.9rem}
.person .infoline:first-of-type{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:.9rem}
.person .infoline__v{font-size:.95rem;overflow-wrap:anywhere}
.person__cta{margin-top:1.25rem}
@media (max-width:900px){
  .team__grid{grid-template-columns:1fr}
  .person{grid-template-columns:clamp(9.5rem,22vw,14rem) minmax(0,1fr)}
}
@media (max-width:520px){
  .person{grid-template-columns:minmax(0,1fr)}
  .person__photo{max-width:10.5rem}
  .person__id{grid-column:1;grid-row:2}
  .person__body{grid-column:1;grid-row:3}
}

/* Servicos: bento com variacao real de fundo */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1rem}
.tile{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--graphite);
  padding:1.6rem;min-height:200px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.tile:hover{border-color:#3B424B;transform:translateY(-2px)}
.tile__icon{font-size:1.6rem;color:var(--red);margin-bottom:auto}
.tile h3{font-size:1.35rem;margin-bottom:.45rem}
.tile p{font-size:.92rem;color:var(--steel-400);max-width:34ch}
.tile--photo{min-height:280px;border-color:transparent}
.tile--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile--photo > *{position:relative;z-index:2}
.tile--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(12,13,15,.95) 12%,rgba(12,13,15,.35) 65%,rgba(12,13,15,.15) 100%)}
.tile--photo p{color:var(--steel-200)}
.tile--red{background:var(--red);border-color:var(--red)}
.tile--red .tile__icon,.tile--red p{color:rgba(255,255,255,.88)}
.tile--red:hover{border-color:#fff}

/* Frotas: faixa full-bleed com declaracao */
.fleet{position:relative;isolation:isolate;padding-block:clamp(5rem,10vw,9rem);border-block:1px solid var(--line)}
.fleet__bg{position:absolute;inset:0;z-index:-2}
.fleet__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.fleet::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(12,13,15,.97) 30%,rgba(12,13,15,.78) 100%)}
.fleet__inner{max-width:52rem}
.fleet h2{margin-bottom:1.5rem}
.fleet p{color:var(--steel-200);font-size:1.125rem;max-width:52ch;margin-bottom:2rem}
.fleet__list{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  border-radius:var(--r);padding:.5rem .9rem;font-size:.9rem;font-weight:500;color:var(--steel-200);
}
.chip .icon{color:var(--red-text);font-size:1rem}

/* Localizacao */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.visit__panel{border:1px solid var(--line);border-radius:var(--r);background:var(--graphite);padding:clamp(1.75rem,3vw,2.5rem)}
.visit__panel h2{margin-bottom:1.75rem;font-size:clamp(1.75rem,3vw,2.5rem)}
.infoline{display:flex;gap:1rem;padding-block:1.15rem;border-top:1px solid var(--line)}
.infoline:first-of-type{border-top:0;padding-top:0}
.infoline .icon{font-size:1.25rem;color:var(--red-text);margin-top:.2rem}
.infoline__k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400);margin-bottom:.25rem}
.infoline__v{font-weight:500;line-height:1.5}
.infoline__v a:hover{color:var(--red-text)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.5rem;font-variant-numeric:tabular-nums}
.hours dt{color:var(--steel-400);font-size:.95rem}
.hours dd{margin:0;font-weight:500}
.visit__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.visit__figure img{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%;filter:contrast(1.05)}

/* CTA final */
.close{background:var(--red);text-align:center;padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.close h2{color:#fff;margin-bottom:1rem;font-size:clamp(2rem,4.5vw,3.25rem)}
.close p{color:rgba(255,255,255,.9);font-size:1.125rem;max-width:44ch;margin:0 auto 2rem}
.close .btn{background:var(--asphalt);color:#fff;border-color:var(--asphalt)}
.close .btn:hover{background:#000}

/* Footer */
.footer{background:var(--asphalt);padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem var(--gutter)}
.footer h3{font-size:.72rem;letter-spacing:.18em;color:var(--steel-400);margin-bottom:1rem;font-weight:600}
.footer li{margin-bottom:.6rem;font-size:.95rem;color:var(--steel-200)}
.footer li a:hover{color:var(--red-text)}
.footer__brandcol p{color:var(--steel-400);font-size:.92rem;max-width:34ch;margin-top:1rem}
.footer__social{display:flex;gap:.6rem;margin-top:1.25rem}
.footer__social a{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--steel-200);font-size:1.15rem;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.footer__social a:hover{border-color:var(--red);color:var(--red-text)}
.footer__legal{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.82rem;color:var(--steel-400);
}

/* WhatsApp flutuante (mobile) */
.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:90;display:none;
  align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--red);color:#fff;font-size:1.6rem;
  box-shadow:0 6px 24px rgba(12,13,15,.7);
}
.fab:hover{background:var(--red-hover)}

/* ---------- 11. Reveal (MOTION_INTENSITY 4) ---------- */
.reveal{opacity:1;transform:none}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 12. Responsivo ---------- */
@media (max-width:1024px){
  .nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(12,13,15,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.5rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding-block:.9rem;border-bottom:1px solid var(--line);font-size:1.05rem}
  .navtoggle{display:flex}
  .header__cta .btn{display:none}
  .about{grid-template-columns:1fr}
  .about__figure{max-width:22rem}
  .visit{grid-template-columns:1fr}
  .visit__figure{max-width:26rem}
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:1rem}
  .hero{min-height:auto;padding-top:8.5rem;padding-bottom:4rem}
  .hero__media img{object-position:70% 50%}
  .hero__scrim{background:linear-gradient(0deg,var(--asphalt) 18%,rgba(12,13,15,.8) 55%,rgba(12,13,15,.62) 100%)}
  .hero__actions .btn{flex:1 1 100%}
  .creds__grid{grid-template-columns:1fr;gap:1.75rem;padding-block:2rem}
  .cred__v{max-width:none}
  .about__facts{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:.75rem}
  .tile{min-height:auto;padding:1.4rem}
  .tile__icon{margin-bottom:1.15rem}
  .tile--photo{min-height:230px}
  .tile--photo .tile__icon{margin-bottom:auto}
  .footer__grid{grid-template-columns:1fr}
  .fab{display:flex}
  .footer{padding-bottom:6rem}   /* espaco para o botao flutuante do WhatsApp */
  .visit__actions .btn{flex:1 1 100%}
}

/* ---------- 13. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 14. Impressao ---------- */
@media print{
  .header,.fab,.hero__media,.close{display:none}
  body{background:#fff;color:#000}
}

/* Seção que segue outra sem respiro duplicado */
.section--tight{padding-top:0}

/* ---------- 15. Paginas de texto (privacidade, 404) ---------- */
.doc{padding-block:calc(78px + clamp(3rem,6vw,5rem)) clamp(4rem,8vw,6rem)}
.doc__inner{max-width:none}
.doc h1{margin-bottom:.5rem}
.doc__meta{color:var(--steel-400);font-size:.9rem;margin-bottom:3rem}
.doc h2{
  font-size:1.15rem;letter-spacing:.02em;color:var(--white);
  margin-top:2.5rem;margin-bottom:.75rem;
}
.doc p{color:var(--steel-200);max-width:68ch;margin-bottom:1rem;line-height:1.7}
.doc__back{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc__back a{color:var(--red-text);font-weight:600}
.doc__back a:hover{text-decoration:underline}

.oops{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:6rem var(--gutter)}
.oops h1{font-size:clamp(4rem,16vw,10rem);color:var(--red);line-height:.9;margin-bottom:1rem}
.oops p{color:var(--steel-200);font-size:1.125rem;max-width:42ch;margin:0 auto 2rem}
.oops__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* ==========================================================================
   17. DECODIFICADOR DE MEDIDA - o centro da pagina
   Instrumento, nao cartao. Fundo grafite, numeros tabulares, sem raio grande.
   ========================================================================== */
.decoder{background:var(--graphite);border-block:1px solid var(--line);padding-block:var(--section-y)}
.decoder__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.decoder__head h2{margin-bottom:1.1rem}
.decoder__head p{color:var(--steel-400);max-width:58ch}

.dec__form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch;margin-bottom:1rem}
.dec__field{flex:1 1 20rem;position:relative;display:flex}
.dec__input{
  width:100%;
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.35rem,3vw,1.9rem);
  letter-spacing:.02em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--white);background:var(--asphalt);
  border:1px solid var(--line);border-radius:var(--r);
  padding:.75rem 1rem;
  transition:border-color .18s var(--ease);
}
.dec__input::placeholder{color:#4A525C}
.dec__input:focus{outline:none;border-color:var(--red)}
.dec__input:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}

.dec__presets{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.dec__preset{
  font-family:var(--f-body);font-weight:600;font-size:.82rem;
  font-variant-numeric:tabular-nums;
  color:var(--steel-200);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--r);
  padding:.42rem .75rem;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease),background-color .16s var(--ease);
}
.dec__preset:hover{border-color:#3B424B;color:var(--white);background:rgba(255,255,255,.07)}
.dec__preset[aria-pressed="true"]{border-color:var(--red);color:var(--white);background:rgba(225,27,35,.12)}

/* Painel de leitura: diagrama | grade de valores */
.dec__panel{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
}
.dec__panel[hidden]{display:none}

.dec__diagram{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--asphalt);padding:1.25rem;
}
.dec__diagram svg{width:100%;height:330px;display:block}
.dec__figcap{
  font-size:.72rem;color:var(--steel-400);margin-top:.9rem;line-height:1.45;
  padding-top:.9rem;border-top:1px solid var(--line);
}

.dec__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dec__cell{background:var(--asphalt);padding:1.1rem 1.2rem;min-width:0}
.dec__cell dt{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-400);margin-bottom:.4rem;
}
.dec__cell dd{
  margin:0;font-family:var(--f-display);font-weight:700;
  font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums;
}
.dec__cell dd small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.8rem;
  color:var(--steel-400);letter-spacing:0;text-transform:none;margin-top:.25rem;line-height:1.4;
}
.dec__cell--wide{grid-column:span 2}
.dec__cell--hi dd{color:var(--red-text)}

.dec__foot{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  margin-top:1.25rem;
}
.dec__foot .btn{white-space:normal;text-align:center;max-width:100%}
.dec__zaptxt{overflow-wrap:anywhere}
.dec__note{font-size:.8rem;color:var(--steel-400);max-width:46ch;line-height:1.5}

/* Erro de leitura */
.dec__erro{
  border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--r);background:var(--asphalt);
  padding:1.1rem 1.25rem;font-size:.95rem;color:var(--steel-200);max-width:52ch;
}
.dec__erro[hidden]{display:none}
.dec__erro strong{color:var(--white);font-weight:600}

/* ==========================================================================
   18. TEMPO DE SERVICO - a informacao que o motorista realmente procura
   ========================================================================== */
.tile .tile__time{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.85rem;padding-top:.75rem;
  border-top:1px solid var(--line);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-400);font-variant-numeric:tabular-nums;
  width:100%;max-width:none;
}
.tile .tile__time .icon{font-size:.95rem;color:var(--red-text)}
.tile--red .tile__time,
.tile--red p.tile__time{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82)}
.tile--red .tile__time .icon{color:#fff}
.tile--photo .tile__time,
.tile--photo p.tile__time{border-top-color:rgba(255,255,255,.2);color:var(--steel-200)}

/* ---------- Responsivo dos blocos novos ---------- */
@media (max-width:900px){
  .dec__panel{grid-template-columns:minmax(0,1fr)}
  .dec__diagram{max-width:22rem}
}
@media (max-width:720px){
  .dec__grid{grid-template-columns:minmax(0,1fr)}
  .dec__cell--wide{grid-column:span 1}
  .dec__diagram{max-width:none}
}

/* Refinamento visual: fotografia, tipografia e localiza??o real. */
.eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--f-body);font-size:.875rem!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-200)!important;margin-bottom:1.4rem!important;line-height:1.5}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
.hero .d1{font-size:clamp(3.4rem,6.6vw,5.8rem);line-height:1.02;letter-spacing:-.02em}
.hero .lead{max-width:29rem}
.hero__location{display:flex;align-items:center;gap:1rem;margin-top:3rem;width:fit-content;max-width:100%;padding-top:1.25rem;border-top:1px solid #3b4149;font-size:.875rem;color:var(--steel-200)}
.hero__location>.icon:first-child{color:var(--red-text);font-size:1.4rem}
.hero__location strong{display:block;color:var(--white);font-weight:600;font-size:1rem}
.hero__location span span{display:block}
.hero__location:hover strong{color:var(--red-text)}
.creds__grid{gap:0;padding-block:2.25rem}
.creds__grid>div{padding-inline:2rem;border-left:1px solid var(--line)}
.creds__grid>div:first-child{padding-left:0;border-left:0}
.cred__k{font-size:clamp(1.8rem,3vw,2.5rem)}
.cred__v{font-size:1rem;max-width:30ch;line-height:1.5;margin-top:.65rem}
.cred__k br{display:none}
.nav{gap:1.4rem}
.nav a{font-size:.9375rem}
.btn{min-height:46px;white-space:normal;text-align:center}
.tile{padding:1.8rem;min-height:255px}
.tile h3{font-size:1.7rem;margin-top:1.75rem}
.tile p{font-size:1rem;line-height:1.55}
.tile--photo{min-height:320px}
.tile--photo img{position:absolute;z-index:0}
.tile__icon{color:var(--red-text)}
.about__facts dt,.infoline__k,.footer h3,.dec__cell dt{font-size:.875rem;letter-spacing:.08em}
.dec__preset,.dec__note,.dec__cell dd small,.tile .tile__time{font-size:.875rem}
.dec__figcap{font-size:.8125rem}
.dec__field{min-width:0}
.dec__grid{margin-top:0}
.fleet__inner{max-width:var(--maxw)}
.fleet h2{max-width:16ch}
.fleet::before{background:linear-gradient(90deg,rgba(12,13,15,.96) 20%,rgba(12,13,15,.7) 65%,rgba(12,13,15,.4))}
.footer{padding-bottom:5rem}
.sr-only:focus{position:fixed;top:1rem;left:1rem;width:auto;height:auto;margin:0;padding:1rem;clip:auto;z-index:200;background:var(--asphalt);color:var(--white)}
@media(min-width:1025px){.hero__copy{max-width:44rem}.about__figure img{aspect-ratio:4/5}.nav a{position:relative}.nav a::after{content:"";position:absolute;bottom:-.65rem;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s}.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}}
@media(max-width:1024px){.nav{visibility:hidden}.nav.is-open{visibility:visible}.about__figure{max-width:none}.about__figure img{aspect-ratio:16/9}.visit__figure{max-width:none}.visit__figure img{aspect-ratio:16/10}}
@media(max-width:720px){
  .hero{padding-top:8rem;padding-bottom:2.5rem;min-height:auto}
  .hero__media{inset:78px 0 0 0}
  .hero__media img{object-position:62% center;filter:brightness(.7)}
  .hero__scrim{background:linear-gradient(90deg,rgba(12,13,15,.9),rgba(12,13,15,.6)),linear-gradient(0deg,var(--asphalt),transparent)}
  .hero .d1{font-size:clamp(2.75rem,10.8vw,4.5rem)}
  .hero__location{margin-top:2rem;gap:.75rem}
  .creds__grid{gap:1.25rem}
  .creds__grid>div{border-left:0;border-top:1px solid var(--line);padding:1.25rem 0 0}
  .creds__grid>div:first-child{border-top:0;padding-top:0}
  .cred__v{max-width:none}
  .tile{min-height:auto;padding:1.5rem}
  .tile h3{margin-top:0}
  .tile--photo{min-height:290px}
  .eyebrow{letter-spacing:.08em}
  .hours{grid-template-columns:1fr;gap:.2rem}
  .hours dd{margin-bottom:.65rem}
}

/* Serviços reais e registros enviados pela JOAZ. */
.tile--featured{grid-column:span 2}
.tile--featured .btn{align-self:flex-start;margin-top:1.25rem;white-space:normal}

/* Acesso ao perfil de avaliações confirmado pelo cliente. */
.google-reviews{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(1.5rem,4vw,3rem);background:var(--graphite);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:var(--r)}
.google-reviews__text{max-width:60ch;margin-top:1.25rem;color:var(--steel-200)}
.google-reviews .btn{flex-shrink:0;white-space:normal}
@media(max-width:900px){.google-reviews{align-items:flex-start;flex-direction:column}}

/* Respiro após a foto de frotas; a seção seguinte fornece o espaço inferior. */
.reviews-section{padding-bottom:0}
.google-reviews__action{display:flex;flex-direction:column;align-items:center;gap:1.25rem;flex-shrink:0;max-width:100%}
.google-reviews__rating{text-align:center}
.google-reviews__rating p{display:flex;align-items:baseline;justify-content:center;gap:.5rem;flex-wrap:wrap}
.google-reviews__rating strong{font-family:var(--f-display);font-size:3rem;line-height:1.1;color:var(--white)}
.google-reviews__rating p span{font-size:1rem;color:var(--steel-200)}
.google-reviews__stars{display:inline-block;position:relative;font-family:Arial,sans-serif;font-size:1.75rem;line-height:1.4;letter-spacing:.12em;white-space:nowrap;color:var(--steel-400);margin-top:.35rem}
.google-reviews__stars-fill{position:absolute;inset:0 auto 0 0;width:92%;overflow:hidden;color:#F5BD45}
@media(max-width:900px){.google-reviews__action{align-self:center}}

@media(max-width:600px){.tile--featured{grid-column:auto}}

/* Cartões da equipe com a mesma altura e ações alinhadas. */
.team__grid{align-items:stretch}
.person{grid-template-rows:auto 1fr}
.person__body{display:flex;flex-direction:column}
.person__body .infoline:last-of-type{margin-bottom:1.25rem}
.person__cta{margin-top:auto;width:100%}
@media(min-width:901px){.person__note{min-height:4.8em}}
@media(max-width:520px){.person{grid-template-rows:auto auto 1fr}}

/* Exemplos de medidas organizados por aplicação. */
.dec__options{margin-bottom:2rem}
.dec__group{margin:0 0 .9rem;min-width:0}
.dec__group:last-child{margin-bottom:0}
.dec__glabel{margin:0 0 .5rem;font-weight:600;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-400)}
.dec__group .dec__presets{margin-bottom:0}
/* No desktop os chips de cada grupo ja cabem em uma linha, entao o rotulo vai
   ao lado e nao acima: tres legendas empilhadas custavam 102px de altura entre
   o campo de digitacao e a resposta. No celular volta a empilhar, porque a
   coluna de rotulo espremeria os chips em mais linhas do que economiza. */
@media(min-width:901px){
  .dec__group{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.9rem;align-items:start}
  .dec__glabel{margin-bottom:0;padding-top:.48rem}
}

/* Botão de orçamento do decodificador ampliado em 20%. */
#dec-zap{font-size:1.14rem;padding:.96rem 1.62rem;gap:.6rem;min-height:55.2px}

/* Nota técnica ao lado do botão, com colunas que acomodam medidas longas. */
.dec__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center}
.dec__foot .btn{min-width:0;width:100%}
.dec__foot .dec__note{min-width:0;max-width:none}
@media(max-width:520px){.dec__foot{grid-template-columns:1fr}}

#dec-zap{gap:.7rem}
#dec-zap .icon{font-size:2.1rem;width:1em;height:1em;flex-shrink:0}

/* Onde estamos: no desktop a foto acompanha a altura do painel, em vez de uma
   proporcao fixa. O desencontro variava com a largura da tela (+22px em 1440,
   +7px em 1100), entao nenhum valor fixo servia para todas. A imagem sai do
   fluxo, o painel passa a ditar a altura da linha e a foto preenche por cover. */
@media(min-width:1025px){
  .visit{align-items:stretch}
  .visit__figure{position:relative}
  .visit__figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* Estilos declarados em arquivo para compatibilidade com CSP restrita. */
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.reveal-delay-0{transition-delay:0ms}
.reveal-delay-1{transition-delay:70ms}
.reveal-delay-2{transition-delay:140ms}
.reveal-delay-3{transition-delay:210ms}