/* ============================================================
   YGOR BEZERRA MOTORSPORT — componentes
   ============================================================ */

/* ---------------- Botões ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid transparent;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.btn-primario {
  background: var(--azul);
  color: var(--branco);
}
.btn-primario:hover { background: var(--azul-escuro); }

.btn-secundario {
  border-color: var(--borda);
  color: var(--texto);
  background: var(--branco);
}
.btn-secundario:hover { border-color: var(--cinza-400); }

/* variante para uso sobre foto escura */
.btn-claro {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--branco);
  background: transparent;
}
.btn-claro:hover { border-color: var(--branco); background: rgba(255, 255, 255, 0.1); }

.btn svg { width: 18px; height: 18px; }

/* ---------------- Cabeçalho ---------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 68px;
}

/* marca: texto até o logo real entrar */
.marca { display: flex; align-items: center; gap: 0.6rem; }
.marca img { height: 42px; width: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto b {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--preto);
}
.marca-texto span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
}

/* menu com hover discreto, linha inferior e estado ativo */
.menu { display: flex; gap: var(--e-4); }
.menu a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
  transition: color var(--transicao);
}
.menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--azul);
  opacity: 0;
  transition: opacity var(--transicao);
}
.menu a:hover { color: var(--texto); }
.menu a:hover::after { opacity: 1; }
.menu a.ativo { color: var(--texto); font-weight: 600; }
.menu a.ativo::after { opacity: 1; }

.topo-acao { display: flex; align-items: center; gap: var(--e-2); }
.topo-tel {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
}
.topo-tel:hover { color: var(--azul); }

/* hambúrguer */
.hamb { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.hamb span {
  width: 22px; height: 2px;
  background: var(--preto);
  transition: transform var(--transicao), opacity var(--transicao);
}
.hamb.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb.aberto span:nth-child(2) { opacity: 0; }
.hamb.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  display: none;
  border-top: 1px solid var(--borda);
  background: var(--branco);
  padding: var(--e-2) 0 var(--e-3);
}
.menu-mobile.aberto { display: block; }
.menu-mobile a {
  display: block;
  padding: 0.85rem 0;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--texto);
  border-bottom: 1px solid var(--cinza-100);
}
.menu-mobile .btn { width: 100%; margin-top: var(--e-2); }

/* ---------------- Hero ---------------- */
/* Um único efeito: a foto + um degradê para leitura do texto. Nada mais. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 74vh;
  padding-block: var(--e-6);
  background: var(--preto);
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 14, 17, 0.9) 0%, rgba(12, 14, 17, 0.72) 42%, rgba(12, 14, 17, 0.25) 100%);
}

.hero-conteudo { position: relative; max-width: 620px; }

.hero .rotulo { color: rgba(255, 255, 255, 0.72); margin-bottom: var(--e-2); }

.hero h1 {
  font-size: var(--t-hero);
  font-weight: 700;
  color: var(--branco);
  margin-bottom: var(--e-2);
  text-wrap: balance;
}

.hero p {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin-bottom: var(--e-4);
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* métricas: número + rótulo, alinhados numa linha só */
.metricas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
  max-width: 620px;
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.metrica b {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--branco);
  line-height: 1.2;
}
.metrica span {
  display: block;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0.15rem;
}

/* ---------------- Seções ---------------- */
.secao { padding-block: var(--e-secao); }
.secao-cinza { background: var(--superficie); border-block: 1px solid var(--borda); }

.secao-cabeca { max-width: 620px; margin-bottom: var(--e-5); }
.secao-cabeca h2 {
  font-size: var(--t-h2);
  margin: 0.4rem 0 0.6rem;
}
.secao-cabeca p { color: var(--texto-suave); }

/* ---------------- Serviços ---------------- */
.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  overflow: hidden;
}

.servico {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--e-3);
  background: var(--branco);
  transition: background var(--transicao);
}
.servico:hover { background: var(--cinza-50); }

/* ícones originais da oficina: arte clara → invertida para traço escuro */
.servico img {
  width: 44px; height: 44px;
  object-fit: contain;
  filter: invert(1) grayscale(1) contrast(1.05);
  opacity: 0.85;
}

.servico h3 { font-size: var(--t-h3); font-weight: 600; }
.servico p { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------------- Faixa de contato ---------------- */
.faixa {
  background: var(--preto);
  color: var(--branco);
}
.faixa-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-4);
}
.faixa h2 { font-size: 1.375rem; color: var(--branco); margin-bottom: 0.25rem; }
.faixa p { color: rgba(255, 255, 255, 0.7); font-size: var(--t-sm); }

/* ---------------- Sobre ---------------- */
.sobre {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--e-6);
  align-items: start;
}
.sobre-texto p { color: var(--texto-suave); margin-bottom: var(--e-2); }
.sobre-texto p strong { color: var(--texto); font-weight: 600; }

/* lista de compromissos: substitui os antigos "selos" decorativos */
.compromissos { display: grid; gap: 0.85rem; }
.compromissos li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.compromissos svg { width: 20px; height: 20px; color: var(--azul); margin-top: 1px; }
.compromissos b { color: var(--texto); font-weight: 600; display: block; }

.sobre-lateral {
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: var(--e-3);
  background: var(--branco);
}
.sobre-lateral h3 { font-size: var(--t-h3); margin-bottom: 0.75rem; }
.sobre-lateral p { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-3); }

/* ---------------- Perguntas frequentes ---------------- */
.faq { max-width: 780px; border-top: 1px solid var(--borda); }

.faq-item { border-bottom: 1px solid var(--borda); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 2px solid var(--cinza-400);
  border-bottom: 2px solid var(--cinza-400);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] summary h3 { color: var(--texto); }

.faq-resposta { padding-bottom: 1.35rem; max-width: 68ch; }
.faq-resposta p { color: var(--texto-suave); margin-bottom: 0.75rem; }
.faq-resposta p:last-child { margin-bottom: 0; }
.faq-resposta strong { color: var(--texto); font-weight: 600; }
.faq-resposta ul { margin: 0 0 0.75rem; padding-left: 1.1rem; list-style: disc; color: var(--texto-suave); }
.faq-resposta li { margin-bottom: 0.3rem; }

/* ---------------- Localização ---------------- */
.local {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--e-4);
  align-items: start;
}

.dados { display: grid; gap: var(--e-3); }
.dado h3 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.4rem;
}
.dado address, .dado p { font-style: normal; color: var(--texto); }
.dado a:hover { color: var(--azul); }

.horarios li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
}
.horarios li:last-child { border-bottom: 0; }
.horarios span { color: var(--texto-suave); }
.horarios b { font-weight: 600; }

.mapa {
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 380px;
}
.mapa iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ---------------- Rodapé ---------------- */
.rodape {
  background: var(--preto);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--e-5);
  font-size: var(--t-sm);
}
.rodape-grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
}
.rodape h3 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 0.85rem;
}
.rodape .marca-texto b { color: var(--branco); }
.rodape p { margin-top: 0.85rem; max-width: 36ch; }
.rodape li { margin-bottom: 0.5rem; }
.rodape a:hover { color: var(--branco); }

.rodape-fim {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: var(--e-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------- WhatsApp fixo ---------------- */
.zap {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-2);
  transition: background var(--transicao);
}
.zap:hover { background: var(--azul-escuro); }
.zap svg { width: 18px; height: 18px; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 900px) {
  .sobre, .local { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .menu, .topo-acao .btn { display: none; }
  .hamb { display: flex; }

  .hero { min-height: 0; padding-block: var(--e-5); }
  .hero-scrim { background: linear-gradient(180deg, rgba(12, 14, 17, 0.78) 0%, rgba(12, 14, 17, 0.88) 100%); }
  .hero-acoes .btn { flex: 1 1 100%; }

  .metricas { gap: var(--e-2); }
  .metrica b { font-size: 1.25rem; }

  .faixa-linha { flex-direction: column; align-items: flex-start; }
  .faixa .btn { width: 100%; }

  .rodape-grade { grid-template-columns: 1fr; gap: var(--e-3); }

  .zap span { display: none; }
  .zap { padding: 0.85rem; border-radius: 50%; }
  .zap svg { width: 22px; height: 22px; }
}

@media (max-width: 420px) {
  .metricas { grid-template-columns: 1fr; gap: 0.85rem; }
  .metrica { display: flex; align-items: baseline; gap: 0.6rem; }
  .metrica b { font-size: 1.125rem; }
  .metrica span { margin-top: 0; }

  /* cabeçalho não pode quebrar em telas estreitas */
  .topo-linha { gap: var(--e-2); }
  .marca-texto b { font-size: 0.9375rem; }
  .marca-texto span { font-size: 0.625rem; letter-spacing: 0.12em; }
  .topo-tel { font-size: var(--t-xs); white-space: nowrap; }

  .faq-item summary h3 { font-size: var(--t-base); }
}