/* ==========================================================================
   BF Bikes — folha de estilo
   Base: clientes/BF Bikes/identidade/design-guide.md
   Laranja #F15A22 · Chumbo #1E1E1E · Branco · Petróleo #2E6E78
   Título: GC EPICPRO ExtBd · Corpo: Century Gothic
   ========================================================================== */

@font-face {
  font-family: 'GC EPICPRO';
  src: url('../fontes/GC-EPICPRO.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fontes/CenturyGothic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fontes/CenturyGothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fontes/CenturyGothic-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --laranja:        #F15A22;
  --laranja-escuro:  #C7461A;
  --chumbo:          #1E1E1E;
  --chumbo-claro:    #2B2B2B;
  --petroleo:        #2E6E78;
  --branco:          #ffffff;
  --off-white:       #F4F1EC;

  --texto:           #EDEAE4;
  --texto-suave:     #B7B2A9;

  --raio:            18px;
  --raio-pill:       999px;
  --sombra:          0 10px 30px rgba(0, 0, 0, .35);

  --secao-y:         clamp(4rem, 9vw, 7.5rem);
  --container:       1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chumbo);
  color: var(--texto);
  font-family: 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: 'GC EPICPRO', 'Century Gothic', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  color: var(--branco);
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-family: 'Century Gothic', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }

p { margin: 0 0 1.1em; color: var(--texto-suave); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--branco); }
::selection { background: var(--laranja); color: #fff; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-estreito { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

.secao { padding-block: var(--secao-y); }
.secao--clara { background: var(--off-white); color: var(--chumbo); }
.secao--clara p { color: #5a5750; }
.secao--clara h1, .secao--clara h2, .secao--clara h3 { color: var(--chumbo); }
.secao--laranja { background: var(--laranja); color: var(--branco); }
.secao--laranja h2, .secao--laranja h3 { color: var(--branco); }
.secao--laranja p { color: #fff0e8; }
.secao--suave { background: var(--chumbo-claro); }

.eyebrow {
  display: block;
  font-family: 'Century Gothic', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 1.2rem;
}
.secao--clara .eyebrow { color: var(--laranja-escuro); }
.secao--laranja .eyebrow { color: var(--chumbo); }

.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.7;
  color: var(--texto-suave);
}
.secao--clara .lead { color: #5a5750; }

.centro { text-align: center; }
.centro .eyebrow { margin-inline: auto; }
.cabecalho-secao { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.centro.cabecalho-secao { margin-inline: auto; }

/* --------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--raio-pill);
  font-family: 'Century Gothic', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
}
.btn--laranja { background: var(--laranja); color: #fff; box-shadow: 0 10px 24px rgba(241, 90, 34, .35); }
.btn--laranja:hover { transform: translateY(-2px); background: var(--laranja-escuro); box-shadow: 0 14px 30px rgba(241, 90, 34, .45); }
.btn--linha { background: transparent; border-color: var(--branco); color: var(--branco); }
.btn--linha:hover { background: var(--branco); color: var(--chumbo); transform: translateY(-2px); }
.secao--clara .btn--linha { border-color: var(--chumbo); color: var(--chumbo); }
.secao--clara .btn--linha:hover { background: var(--chumbo); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }
.grupo-btn { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.centro .grupo-btn { justify-content: center; }

/* --------------------------------------------------------- navegação */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(30, 30, 30, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.topo.rolou { border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
main [id] { scroll-margin-top: 90px; }
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; }
.topo__logo { display: flex; align-items: center; }
.topo__logo img { height: 54px; width: auto; }
.topo__nav { display: none; gap: 1.3rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.topo__nav a { text-decoration: none; color: var(--texto-suave); transition: color .2s ease; }
.topo__nav a:hover { color: var(--laranja); }
@media (min-width: 860px) { .topo__nav { display: flex; } }

/* Sem o menu (abaixo de 860px) o botão do cabeçalho não pode quebrar
   linha — vira um header gigante e cobre o começo de cada seção ao
   rolar. Esconde o "Falar no" e deixa só "WhatsApp", numa pílula menor. */
@media (max-width: 859px) {
  .topo__logo img { height: 38px; }
  .topo__interno .btn--laranja { padding: .6rem 1.2rem; font-size: .74rem; white-space: nowrap; }
  .topo__interno .btn--laranja .topo__cta-completo { display: none; }
}

/* --------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-block: 3rem clamp(3rem, 8vw, 6rem);
  background: linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,.55) 45%, rgba(18,18,18,.95) 100%),
              url('../fotos/hero-trilha.jpg') center 30% / cover no-repeat;
}
.hero__conteudo { max-width: 760px; }
.hero__tag {
  display: inline-block;
  background: var(--laranja);
  color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: var(--raio-pill);
  margin-bottom: 1.4rem;
}
.hero h1 { text-shadow: 0 4px 20px rgba(0,0,0,.4); }
.hero h1 em { font-style: italic; color: var(--laranja); }
.hero .lead { color: #f0ede6; max-width: 560px; margin-bottom: 2rem; }

/* --------------------------------------------------------- história */

.historia__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .historia__grade { grid-template-columns: 1.1fr .9fr; } }
.historia__citacao {
  font-family: 'GC EPICPRO', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  text-transform: none;
  color: var(--chumbo);
  margin-bottom: 1.4rem;
}
.historia__citacao span { color: var(--laranja); }
.linha-tempo { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.linha-tempo li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; }
.linha-tempo strong {
  font-family: 'GC EPICPRO', sans-serif;
  color: var(--laranja-escuro);
  font-size: 1.05rem;
  white-space: nowrap;
}
.historia__foto { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }

/* --------------------------------------------------------- diferenciais */

.cartoes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cartao {
  background: var(--chumbo-claro);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--raio);
  padding: 2rem 1.8rem;
}
.cartao__numero {
  font-family: 'GC EPICPRO', sans-serif;
  color: var(--laranja);
  font-size: 2.2rem;
  display: block;
  margin-bottom: .8rem;
}
.cartao h3 { margin-bottom: .6rem; }
.cartao p { margin: 0; font-size: .95rem; }

.marcas-linha {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  margin-top: 2.2rem;
}
.marcas-linha__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem; }
.marca-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.marca-logo {
  background: var(--branco);
  border-radius: var(--raio-pill);
  padding: .7rem 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.marca-logo img { height: 22px; width: auto; display: block; }

/* --------------------------------------------------------- catálogo (vitrine na home) */

.catalogo-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.catalogo-topo .eyebrow { margin-bottom: .6rem; }
.catalogo-topo h2 { margin: 0; }
.catalogo-ver-todas {
  font-family: 'Century Gothic', sans-serif;
  font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  color: var(--laranja); text-decoration: none;
  white-space: nowrap;
}
.catalogo-ver-todas:hover { color: var(--laranja-escuro); text-decoration: underline; }
.catalogo-lead { max-width: 640px; margin-bottom: 2.6rem; }

.catalogo-voltar {
  display: inline-block;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  color: var(--texto-suave); text-decoration: none;
  margin-bottom: 2rem;
}
.catalogo-voltar:hover { color: var(--laranja); }

.categoria-tiles {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.categoria-tile { text-decoration: none; color: inherit; display: block; }
.categoria-tile__foto {
  aspect-ratio: 3 / 2;
  background: #141414;
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: transform .25s ease;
}
.categoria-tile:hover .categoria-tile__foto { transform: translateY(-4px); }
.categoria-tile__foto img { width: 100%; height: 100%; object-fit: cover; }
.categoria-tile h4 { margin-bottom: .5rem; }
.categoria-tile p { font-size: .88rem; margin-bottom: 1rem; }
.categoria-tile__saiba {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 700; font-size: .84rem; letter-spacing: .03em;
  color: var(--branco);
}
.mais-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--laranja);
  color: #fff; font-size: 1rem; line-height: 1;
  transition: background-color .2s ease;
}
.categoria-tile:hover .mais-icone { background: var(--laranja-escuro); }

/* --------------------------------------------------------- catálogo (grade completa) */

.catalogo-categorias {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-bottom: 1.4rem;
}
.categoria-pill {
  font-family: 'Century Gothic', sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--texto-suave);
  background: var(--chumbo-claro);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--raio-pill);
  padding: .65rem 1.5rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.categoria-pill:hover { border-color: var(--laranja); color: var(--branco); }
.categoria-pill.ativa { background: var(--laranja); border-color: var(--laranja); color: #fff; }

.filtros {
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-bottom: 2rem;
  padding: 1.1rem 1.2rem;
  background: var(--chumbo-claro);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--raio);
}
.filtro { flex: 1 1 150px; display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; }
.filtro span { color: var(--texto-suave); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.filtro select {
  appearance: none;
  width: 100%;
  background: var(--chumbo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B7B2A9' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .6rem center / 16px;
  color: var(--texto);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: .55rem 2rem .55rem .8rem;
  font-family: 'Century Gothic', sans-serif;
  font-size: .86rem;
  cursor: pointer;
}
.filtro select:focus { outline: 2px solid var(--laranja); outline-offset: 1px; }
.catalogo-vazio { text-align: center; color: var(--texto-suave); padding: 2rem 0; }

.bikes-grade {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.bike-card {
  background: var(--chumbo-claro);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--raio);
  overflow: hidden;
}
.bike-card__foto {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #141414;
}
.bike-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.bike-card__sem-foto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-suave); font-size: .82rem; text-align: center;
  padding: 1rem;
}
.bike-card__selo {
  position: absolute; top: .8rem; left: .8rem;
  background: rgba(20,20,20,.85);
  color: var(--branco);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--raio-pill);
  border: 1px solid rgba(255,255,255,.15);
}
.bike-card__info { padding: 1.4rem 1.4rem 1.6rem; }
.bike-card__info h4 { margin-bottom: .3rem; }
.bike-card__preco { font-size: .85rem; margin-bottom: 1.1rem; }
.bike-card__preco strong { color: var(--laranja); font-weight: 700; }

/* --------------------------------------------------------- nosso espaço */

.galeria-espaco {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.galeria-espaco figure {
  margin: 0; border-radius: var(--raio); overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.galeria-espaco img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------- revisões / planos */

.oficina-fotos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 2.5rem;
}
.oficina-fotos figure { margin: 0; border-radius: var(--raio); overflow: hidden; aspect-ratio: 4 / 3; }
.oficina-fotos img { width: 100%; height: 100%; object-fit: cover; }

.planos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.plano {
  display: flex; flex-direction: column;
  background: var(--chumbo-claro);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--raio);
  padding: 2.2rem 1.9rem;
  position: relative;
}
.plano--destaque {
  background: var(--chumbo);
  border-color: var(--laranja);
  box-shadow: 0 14px 34px rgba(241,90,34,.18);
  transform: translateY(-6px);
}
.plano__tag {
  position: absolute; top: -14px; left: 1.9rem;
  background: var(--laranja); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: var(--raio-pill);
}
.plano h3 { margin-bottom: .4rem; }
.plano__preco {
  font-family: 'GC EPICPRO', sans-serif;
  color: var(--laranja);
  font-size: 2.4rem;
  margin-bottom: 1.4rem;
}
.plano__preco span { font-size: 1.2rem; }
.plano__lista { list-style: none; margin: 0 0 1.8rem; padding: 0; flex: 1; display: grid; gap: .7rem; }
.plano__lista li {
  font-size: .92rem; color: var(--texto-suave);
  padding-left: 1.4rem; position: relative;
}
.plano__lista li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--laranja);
}
.plano .btn { align-self: flex-start; }

/* --------------------------------------------------------- equipe */

.equipe__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 960px) {
  .equipe__grade { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

.fundador {
  background: var(--chumbo);
  border-radius: var(--raio);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1.4rem;
}
.fundador .pessoa__cargo { color: var(--laranja); }
.fundador h3 { color: var(--branco); margin-bottom: .3rem; }
.fundador p.fundador__citacao {
  font-family: 'GC EPICPRO', sans-serif;
  text-transform: none;
  color: var(--laranja);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin: .6rem 0 1rem;
}
.fundador p:not(.fundador__citacao) { color: var(--texto-suave); max-width: 640px; }

.equipe__foto {
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  height: 100%;
  min-height: 320px;
}
.equipe__foto img { height: 100%; width: 100%; object-fit: cover; }

.equipe {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
.pessoa {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 1.8rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.pessoa__cargo {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--laranja-escuro);
  margin-bottom: .5rem;
}
.pessoa h4 { color: var(--chumbo); margin-bottom: .4rem; }
.pessoa p { font-size: .92rem; margin: 0; }

/* --------------------------------------------------------- comunidade */

.comunidade {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.comunidade img { width: 100%; }
/* --------------------------------------------------------- contato */

.contato__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) { .contato__grade { grid-template-columns: 1fr 1fr; } }
.contato__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.contato__lista li { display: flex; align-items: flex-start; gap: .9rem; }
.contato__lista svg { flex: none; width: 22px; height: 22px; color: var(--branco); margin-top: .15rem; }
.contato__lista a { text-decoration: none; }
.contato__lista a:hover { color: var(--laranja); }
.mapa { border-radius: var(--raio); overflow: hidden; border: 0; width: 100%; min-height: 320px; filter: grayscale(.15) contrast(1.05); }

/* --------------------------------------------------------- rodapé */

.rodape { background: #141414; padding-block: 2.6rem; }
.rodape__interno { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }
.rodape img { height: 54px; width: auto; }
.rodape small { color: #7a766e; font-size: .8rem; }
.rodape__redes { display: flex; gap: 1rem; }
.rodape__redes a { color: #a39e93; transition: color .2s ease; }
.rodape__redes a:hover { color: var(--laranja); }
.rodape__redes svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- botão flutuante WhatsApp */

.flutuante-wa {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  text-decoration: none;
  transition: transform .2s ease;
}
.flutuante-wa:hover { transform: scale(1.08); }
.flutuante-wa svg { width: 28px; height: 28px; }

/* --------------------------------------------------------- animações de entrada */

.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visivel { opacity: 1; transform: none; }
.escalonar > * { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.escalonar.visivel > * { opacity: 1; transform: none; }
.escalonar.visivel > *:nth-child(2) { transition-delay: .08s; }
.escalonar.visivel > *:nth-child(3) { transition-delay: .16s; }
.escalonar.visivel > *:nth-child(4) { transition-delay: .24s; }