/* ============================================================
   L&F — Chaveiro Automotivo · MODELO 3

   Identidade visual inspirada no site de referência que o cliente
   mandou: fundo grafite quase preto, laranja forte como cor de
   ação, títulos em Oswald (condensada) e texto em Inter.

   Paleta lida direto daquele site:
     fundo #0F1215 · superfície #212428 · borda #2B2E32
     texto #F0EEEB · texto suave #928F88 · laranja #DF6900
   ============================================================ */

:root{
  --fundo:      #0F1215;
  --fundo-2:    #16191C;
  --superficie: #212428;
  --borda:      #2B2E32;

  --texto:      #F0EEEB;
  --texto-2:    #A5A29B;
  --texto-3:    #7E7B75;

  --laranja:      #DF6900;
  --laranja-cla:  #FF8A2B;
  --laranja-esc:  #B85400;

  --largura: 1160px;
  --raio: 14px;

  --f-titulo: 'Oswald', 'Segoe UI', system-ui, sans-serif;
  --f-texto:  'Inter', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  background:var(--fundo); color:var(--texto);
  font-family:var(--f-texto); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
:focus-visible{ outline:3px solid var(--laranja); outline-offset:3px; border-radius:6px; }

/* Oswald é condensada: fica melhor em caixa alta com espaçamento aberto */
h1,h2,h3,h4{
  font-family:var(--f-titulo); font-weight:600;
  line-height:1.06; letter-spacing:.01em; text-transform:uppercase;
}

.wrap{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:22px; }
.wrap--estreito{ max-width:760px; }
.centro{ text-align:center; }
.laranja{ color:var(--laranja); }
.fraco{ color:var(--texto-3); }

.ico{ width:20px; height:20px; flex:none; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-texto); font-weight:700; font-size:.97rem;
  padding:14px 24px; border-radius:var(--raio);
  border:2px solid transparent; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--sm{ padding:10px 18px; font-size:.9rem; }
.btn--g{ padding:18px 32px; font-size:1.04rem; }
.btn--bloco{ display:flex; width:100%; }

.btn--laranja{ background:var(--laranja); color:#150A02; }
.btn--laranja:hover{ background:var(--laranja-cla); transform:translateY(-1px); }

.btn--linha{ background:transparent; color:var(--texto); border-color:var(--borda); }
.btn--linha:hover{ border-color:var(--laranja); color:var(--laranja); }

.btn--preto{ background:#150A02; color:#FFF3E6; }
.btn--preto:hover{ background:#000; transform:translateY(-1px); }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(15,18,21,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
}
.topo__linha{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px; }

.marca{ display:flex; align-items:center; gap:11px; }
.marca img{ width:46px; height:auto; }
.marca__txt{ display:flex; flex-direction:column; line-height:1.15; }
.marca__txt strong{ font-family:var(--f-titulo); font-size:1.18rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.marca__txt small{ font-size:.68rem; font-weight:600; color:var(--texto-3); text-transform:uppercase; letter-spacing:.14em; }

.topo__nav{ display:flex; gap:28px; }
.topo__nav a{ font-size:.92rem; font-weight:500; color:var(--texto-2); transition:color .18s ease; }
.topo__nav a:hover{ color:var(--laranja); }

/* ============================================================
   ABERTURA
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(70px,11vh,130px) clamp(70px,12vh,120px);
  min-height:min(88vh, 780px);
  display:flex; flex-direction:column; justify-content:center;

  /* A foto tem a chave à esquerda e o carro à direita, com o meio escuro e
     vazio — por isso o texto centralizado cai justo no vão. */
  background-image:url('../assets/hero.jpg');
  background-size:cover;
  background-position:center;
  background-color:var(--fundo);
}
/* No celular a foto em paisagem seria cortada nas laterais e sobraria só o
   fundo escuro — a chave e o carro sumiriam. Por isso o arquivo do celular é
   um recorte VERTICAL, feito em cima da chave. */
@media (max-width:820px){
  .hero{
    background-image:url('../assets/hero-mobile.jpg');
    background-position:center top;
    min-height:auto;
  }
}

/* Escurecimento por cima da foto. Sem isto o texto branco briga com os
   faróis do carro e com os riscos dourados. Mais forte embaixo, onde ficam
   os botões, e mais leve no meio, pra foto continuar aparecendo. */
.hero__brilho{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 55% at 50% 46%, rgba(15,18,21,.82), transparent 78%),
    linear-gradient(180deg, rgba(15,18,21,.78) 0%, rgba(15,18,21,.42) 38%, rgba(15,18,21,.88) 100%);
}
.hero__inner{ position:relative; text-align:center; }

.selo{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--laranja);
  border:1px solid rgba(223,105,0,.35); background:rgba(223,105,0,.08);
  padding:8px 16px; border-radius:100px;
}
.selo__ponto{ width:8px; height:8px; border-radius:50%; background:var(--laranja); }

.hero__titulo{ font-size:clamp(2.5rem,6.4vw,4.6rem); margin-top:26px; }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.14rem); color:var(--texto-2); max-width:44em; margin:22px auto 0; }

.hero__acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

.hero__marcas{ display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:center; margin-top:40px; padding-top:30px; border-top:1px solid var(--borda); }
.hero__marcas li{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; font-weight:500; color:var(--texto-2); }
.hero__marcas .ico{ color:var(--laranja); }

.hero__role{ text-align:center; margin-top:46px; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--texto-3); }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{ padding-block:clamp(60px,9vh,110px); }
.secao--alt{ background:var(--fundo-2); border-block:1px solid var(--borda); }

.rotulo{ font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--laranja); margin-bottom:14px; }
.secao__titulo{ font-size:clamp(1.9rem,4vw,3rem); }
.secao__sub{ color:var(--texto-2); margin-top:16px; max-width:46em; }

/* Blocos centrados: o rótulo e o título acompanham */
.secao > .wrap > .rotulo,
.secao > .wrap > .secao__titulo,
.secao > .wrap > .secao__sub{ text-align:center; }
.secao > .wrap > .secao__sub{ margin-inline:auto; }
.secao__sub--esq{ text-align:left !important; margin-inline:0 !important; }

/* ---- Cards de serviço ---- */
.grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.grade--dois{ grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto; }

.card{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:28px;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--laranja); transform:translateY(-3px); }
.card__ico{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:rgba(223,105,0,.12); color:var(--laranja); margin-bottom:20px;
}
.card__ico svg{ width:26px; height:26px; }
.card h3{ font-size:1.24rem; }
.card p{ color:var(--texto-2); font-size:.96rem; margin-top:10px; }
.card__link{
  margin-top:auto; padding-top:20px;
  font-size:.9rem; font-weight:700; color:var(--laranja); cursor:pointer;
  display:inline-flex; gap:7px; align-items:center;
}
.card__link span{ transition:transform .2s ease; }
.card:hover .card__link span{ transform:translateX(4px); }

/* ---- Duas colunas ---- */
.dupla{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.dupla .rotulo, .dupla .secao__titulo{ text-align:left; }

.checks{ margin-top:26px; display:grid; gap:13px; }
.checks li{ position:relative; padding-left:32px; color:var(--texto-2); font-size:.97rem; }
.checks li::before{
  content:''; position:absolute; left:0; top:.36em;
  width:8px; height:14px;
  border:solid var(--laranja); border-width:0 2.6px 2.6px 0;
  transform:rotate(45deg);
}
.dupla .btn{ margin-top:30px; }

.beneficios{ margin-top:28px; display:grid; gap:18px; }
.beneficios li{ display:flex; gap:15px; align-items:flex-start; }
.beneficios__ico{
  width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(223,105,0,.12); color:var(--laranja);
}
.beneficios__ico svg{ width:23px; height:23px; }
.beneficios strong{ display:block; font-weight:700; }
.beneficios span{ display:block; color:var(--texto-2); font-size:.93rem; }

.caixa{
  background:var(--superficie); border:1px solid var(--borda); border-radius:18px;
  padding:32px; text-align:center;
}
.caixa h3{ font-size:1.5rem; }
.caixa p{ color:var(--texto-2); margin:12px 0 22px; }
.caixa__ou{ font-size:.9rem; margin:14px 0 0; }
.caixa__ou a{ color:var(--laranja); font-weight:700; }

/* ---- Marcas e modelos atendidos ----
   Atenção ao nome da classe: o cartão da montadora é `.montadora`, e não
   `.marca` — `.marca` já é o logotipo do cabeçalho e do rodapé, então usar o
   mesmo nome aqui vazava fundo, borda e padding para dentro do logo. */
.marcas__intro{ text-align:center; margin-inline:auto; }

.marcas__grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px; margin-top:44px;
}
.montadora{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:22px; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.montadora:hover{ border-color:var(--laranja); transform:translateY(-3px); }
.montadora__nome{ font-size:1.02rem; display:flex; align-items:center; gap:10px; }
.montadora__bandeira{ font-size:1.2rem; line-height:1; }
.montadora__modelos{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.montadora__modelos li{
  font-family:var(--f-texto); font-size:.82rem; font-weight:500; color:var(--texto-2);
  background:rgba(223,105,0,.08); border:1px solid var(--borda); border-radius:100px;
  padding:5px 12px;
}
.montadora__ver{
  margin-top:auto; padding-top:18px;
  font-size:.86rem; font-weight:700; color:var(--laranja);
  display:inline-flex; align-items:center; gap:7px;
}
.montadora__ver span{ transition:transform .2s ease; }
.montadora:hover .montadora__ver span{ transform:translateX(4px); }

.marcas__fim{ margin-top:44px; color:var(--texto-2); }
.marcas__fim .btn{ margin-top:16px; }

/* ---- Páginas de montadora (/toyota, /ford…) ----
   Reaproveitam tudo do site: mesmas cores, mesmas fontes, mesmos botões.
   O topo é uma versão compacta da abertura, sem a foto — a foto é da home. */
.pag-topo{
  background:linear-gradient(180deg, var(--fundo-2) 0%, var(--fundo) 100%);
  border-bottom:1px solid var(--borda);
  padding-block:clamp(34px,5vh,60px) clamp(48px,7vh,84px);
  text-align:center;
}
.pag-topo__titulo{ font-size:clamp(2.1rem,5vw,3.6rem); }
.pag-topo .rotulo{ margin-top:26px; }
.pag-topo .secao__sub{ margin-top:20px; }
.pag-topo__acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }
.pag-topo .hero__marcas{ margin-top:38px; }

/* Trilha (Início / Marcas e modelos / Toyota) */
.trilha{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px;
  font-size:.82rem; color:var(--texto-3);
}
.trilha a{ color:var(--texto-2); transition:color .18s ease; }
.trilha a:hover{ color:var(--laranja); }
.trilha strong{ color:var(--texto); font-weight:600; }

/* Lista dos modelos atendidos */
.modelos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px; margin-top:44px;
}
.modelos--poucos{ grid-template-columns:repeat(auto-fill,250px); justify-content:center; }
.modelos__item{
  display:flex; align-items:center; gap:13px;
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px 20px; font-weight:600; font-size:.97rem;
  transition:border-color .2s ease;
}
.modelos__item:hover{ border-color:var(--laranja); }
.modelos__ico{ width:24px; height:24px; flex:none; color:var(--laranja); }
.modelos + .secao__sub{ margin-top:34px; }

/* Voltar para a seção de marcas da home */
.voltar{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:.97rem; color:var(--laranja);
  border:2px solid var(--borda); border-radius:var(--raio);
  padding:14px 24px;
  transition:border-color .18s ease, background-color .18s ease;
}
.voltar:hover{ border-color:var(--laranja); background:rgba(223,105,0,.08); }

/* Links para as outras 17 montadoras */
.outras__titulo{ font-size:clamp(1.4rem,3vw,2rem); margin-top:52px; }
.outras__lista{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px;
}
.outras__lista a{
  display:block; font-size:.9rem; font-weight:600; color:var(--texto-2);
  background:var(--superficie); border:1px solid var(--borda); border-radius:100px;
  padding:10px 18px;
  transition:color .18s ease, border-color .18s ease;
}
.outras__lista a:hover{ color:var(--laranja); border-color:var(--laranja); }

/* ---- Passos ---- */
.passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.passos li{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:28px;
}
.passos__n{
  display:block; font-family:var(--f-titulo); font-size:2.2rem; font-weight:600;
  color:var(--laranja); line-height:1; margin-bottom:14px;
}
.passos h3{ font-size:1.16rem; }
.passos p{ color:var(--texto-2); font-size:.95rem; margin-top:8px; }
.secao .centro .btn{ margin-top:40px; }

/* ---- Perguntas (details nativo, sem JavaScript) ---- */
.q{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  margin-top:12px; overflow:hidden;
}
.q summary{
  cursor:pointer; list-style:none; position:relative;
  padding:18px 56px 18px 20px; font-weight:600;
  transition:color .18s ease;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--laranja); }
.q summary::after{
  content:''; position:absolute; right:22px; top:50%; margin-top:-7px;
  width:14px; height:14px;
  background:
    linear-gradient(var(--laranja),var(--laranja)) center/14px 2.5px no-repeat,
    linear-gradient(var(--laranja),var(--laranja)) center/2.5px 14px no-repeat;
  transition:transform .2s ease;
}
.q[open] summary::after{
  background:linear-gradient(var(--laranja),var(--laranja)) center/14px 2.5px no-repeat;
  transform:rotate(180deg);
}
.q[open] summary{ color:var(--laranja); }
.q p{ padding:0 20px 20px; color:var(--texto-2); font-size:.96rem; }
.q__fim{ margin-top:34px; color:var(--texto-2); }
.q__fim .btn{ margin-top:14px; }

/* ============================================================
   CHAMADA FINAL — único bloco em laranja cheio
   ============================================================ */
.final{ background:var(--laranja); color:#150A02; padding-block:clamp(56px,8vh,90px); }
.final__inner{ text-align:center; }
.final__selo{ font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.final__titulo{ font-size:clamp(2rem,4.6vw,3.2rem); margin-top:16px; }
.final__sub{ margin:16px auto 0; max-width:40em; opacity:.85; }
.final .btn{ margin-top:30px; }
.final__ou{ margin-top:16px; font-size:.92rem; opacity:.8; }
.final__ou a{ font-weight:700; border-bottom:1px solid currentColor; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{ background:#0A0C0E; border-top:1px solid var(--borda); padding-top:52px; }
.rodape__grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; padding-bottom:40px; }
.rodape__sobre{ color:var(--texto-3); font-size:.94rem; margin-top:16px; max-width:30em; }
.rodape__col h4{ font-size:.76rem; letter-spacing:.18em; color:var(--texto-3); margin-bottom:16px; }
.rodape__col a, .rodape__col span{
  display:block; font-size:.94rem; color:var(--texto-2);
  padding:7px 0; transition:color .18s ease;
}
.rodape__col a{ cursor:pointer; }
.rodape__col a:hover{ color:var(--laranja); }
.rodape__col b{ color:var(--texto); }
.rodape__base{ border-top:1px solid var(--borda); padding-block:20px; font-size:.84rem; color:var(--texto-3); }

/* ============================================================
   BOTÃO FLUTUANTE
   ============================================================ */
.flutua{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:60;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#04240F;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6);
  transition:transform .2s ease;
}
.flutua:hover{ transform:scale(1.06); }
.flutua svg{ width:30px; height:30px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:960px){
  .grade{ grid-template-columns:repeat(2,1fr); }
  .passos{ grid-template-columns:1fr; }
  .dupla{ grid-template-columns:1fr; }
  .dupla .rotulo, .dupla .secao__titulo, .secao__sub--esq{ text-align:left; }
  .rodape__grade{ grid-template-columns:1fr 1fr; }
  .topo__nav{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .grade, .grade--dois{ grid-template-columns:1fr; }
  .hero__acoes .btn{ width:100%; }
  .pag-topo__acoes .btn{ width:100%; }
  .modelos, .modelos--poucos{ grid-template-columns:1fr; }
  .hero__marcas{ flex-direction:column; align-items:center; gap:12px; }
  .rodape__grade{ grid-template-columns:1fr; }
  .marca img{ width:40px; }
  .marca__txt strong{ font-size:1.04rem; }
  /* alvo de toque de 44px no dedo */
  .rodape__col a, .rodape__col span{ padding:11px 0; }
  /* folga pro botão flutuante não cobrir a última linha do rodapé */
  .rodape__base{ padding-bottom:calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  html{ scroll-behavior:auto; }
}