/* ---------------------------------------------------------------
   Macchina - folha de estilo
   Cores e tipografia seguem Macchina_Guia_Identidade_Visual_V1.pdf
   Areia #e3d3c5 (7604C) - Azul #1f293e (302C) - Laranja #ef4123 (172C)
   --------------------------------------------------------------- */

@font-face{font-family:'Prompt';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/prompt-0.woff2') format('woff2')}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/prompt-1.woff2') format('woff2')}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/prompt-2.woff2') format('woff2')}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/prompt-3.woff2') format('woff2')}

:root{
  --areia:#e3d3c5;
  --azul:#1f293e;
  --tinta:#141924;
  --laranja:#ef4123;
  --areia-fraca:rgba(227,211,197,.62);
  --areia-linha:rgba(227,211,197,.16);
  --fonte:'Prompt','Segoe UI',system-ui,sans-serif;
  --largura:1180px;
  --respiro:clamp(64px,9vw,120px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--tinta);
  color:var(--areia);
  font-family:var(--fonte);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.envolt{width:100%;max-width:var(--largura);margin:0 auto;padding:0 24px}

/* ---- tipografia ---- */
.chapeu{
  font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--laranja);margin:0 0 18px;
}
h1,h2,h3{font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(38px,6.2vw,72px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:20px;letter-spacing:-.005em}
.subtitulo{
  max-width:62ch;margin:20px 0 0;font-size:clamp(17px,1.6vw,20px);
  color:var(--areia-fraca);
}

/* ---- cabecalho ---- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(20,25,36,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--areia-linha);
}
.topo .envolt{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:74px}
.topo img{height:26px;width:auto;flex:none}
.menu{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--areia-fraca);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.menu a:hover{color:var(--areia);border-bottom-color:var(--laranja)}
@media(max-width:820px){.menu{display:none}}

/* ---- botoes ---- */
.botoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.botao{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:2px;text-decoration:none;
  font-weight:600;font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .16s,background .16s,color .16s;
}
.botao:hover{transform:translateY(-2px)}
.botao--cheio{background:var(--laranja);color:#fff}
.botao--cheio:hover{background:#ff5133}
.botao--vazio{border:1px solid var(--areia-linha);color:var(--areia)}
.botao--vazio:hover{background:rgba(227,211,197,.08);border-color:var(--areia-fraca)}

/* ---- hero ----
   A foto é uma tarja limpa, sem texto por cima, colada no menu. No celular
   aparece inteira (16:9, que é o formato original); a partir de 760px vira
   faixa larga recortada por cima, onde só há mato — o carro fica inteiro.
   A altura tem teto (58vh/560px) para o título caber na primeira tela. Em
   monitor muito largo esse teto deixava a faixa fina demais e cortava a
   cabeça de quem está no carro, então a foto não passa de 3:1: dali em
   diante ela para de esticar, fica centralizada e as laterais recebem a
   mesma foto desfocada. */
.hero{background:var(--tinta);padding-top:0}
.hero__foto{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--azul)}
.hero__foto img{display:block;position:relative;width:100%;height:100%;object-fit:cover;object-position:center 88%}
.hero__foto .hero__fundo{display:none;position:absolute;inset:0;object-position:center;
  filter:blur(36px) brightness(.45);transform:scale(1.15)}
@media(min-width:760px){
  .hero__foto{aspect-ratio:5/2;max-height:min(58vh,560px)}
  .hero__foto .hero__fundo{display:block}
  .hero__foto #hero-foto{width:min(100%,calc(min(58vh,560px) * 3));margin:0 auto}
}
.hero__texto{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(46px,6vw,80px)}
.hero h1{max-width:20ch;white-space:pre-line;text-wrap:balance}

/* faixa de numeros */
.numeros{background:var(--azul);border-top:1px solid var(--areia-linha)}
.numeros .grade{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:52px 0 44px;gap:32px;
}
@media(max-width:880px){.numeros .grade{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
.numero b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:700;
  color:var(--laranja);line-height:1;letter-spacing:-.02em}
.numero span{display:block;margin-top:10px;font-size:14px;color:var(--areia-fraca);
  line-height:1.4}
.numeros .nota{
  font-size:12.5px;color:rgba(227,211,197,.45);padding-bottom:34px;
  max-width:70ch;margin:0;
}

/* ---- secoes ---- */
section{padding:var(--respiro) 0}
.secao__cabeca{max-width:64ch;margin-bottom:52px}

/* programas */
.cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.cartoes{grid-template-columns:1fr}}
.cartao{
  background:var(--azul);border:1px solid var(--areia-linha);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.cartao:hover{border-color:rgba(239,65,35,.55);transform:translateY(-3px)}
.cartao__foto{aspect-ratio:4/3;overflow:hidden;background:var(--tinta);flex:none}
.cartao__foto img{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transition:transform .4s;
}
.cartao:hover .cartao__foto img{transform:scale(1.04)}
.cartao__corpo{
  padding:26px 28px 28px;display:flex;flex-direction:column;gap:14px;flex:1
}
.cartao .tipo{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--laranja);
}
/* O logo do programa ocupa o lugar do título — altura fixa para os três
   cartões alinharem, largura livre para não distorcer a marca. */
/* Limita pela altura, não pela largura: os dois logos são deitados e de
   proporções diferentes (VR 2,2:1, Garagem 2,9:1), então travar a altura é o
   que faz os cartões alinharem sem distorcer marca nenhuma. */
.cartao__logo{max-height:58px;max-width:100%;width:auto;height:auto;
  object-fit:contain;object-position:left center;align-self:flex-start}
/* Mesma altura do logo, para a descrição começar na mesma linha nos três. */
.cartao h3{min-height:58px;display:flex;align-items:center}
.cartao p{margin:0;color:var(--areia-fraca);font-size:15.5px}
.cartao .destaque{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--areia-linha);
  font-size:13px;font-weight:600;color:var(--areia);letter-spacing:.01em;
}

/* videos */
.videos{background:var(--azul)}
.grade-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grade-videos{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grade-videos{grid-template-columns:1fr}}
.video{text-decoration:none;display:block}
.video__capa{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--tinta);
  border:1px solid var(--areia-linha);
}
.video__capa img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.video:hover .video__capa img{transform:scale(1.045)}
.video__capa .semfoto{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;font-size:13px;color:var(--areia-fraca);
  background:linear-gradient(135deg,var(--azul),var(--tinta));
}
.video__capa .play{
  position:absolute;left:16px;bottom:16px;width:40px;height:40px;border-radius:50%;
  background:var(--laranja);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.video:hover .play{opacity:1;transform:translateY(0)}
.video__capa .play::after{content:'';border-left:11px solid #fff;
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.video h3{margin-top:16px;font-size:16.5px;font-weight:600;line-height:1.4;
  letter-spacing:0}
.video time{display:block;margin-top:7px;font-size:12.5px;color:var(--areia-fraca)}
.carregando{color:var(--areia-fraca);font-size:15px;grid-column:1/-1}

/* sobre */
.sobre__grade{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:start}
@media(max-width:860px){
  .sobre__grade{grid-template-columns:1fr;gap:34px}
  .sobre__foto{max-width:300px}
}
/* O retrato é de estúdio, com fundo claro. Em vez de disfarçar, o fundo do
   quadro acompanha o da foto — vira um bloco claro de propósito no meio da
   página escura. */
.sobre__foto{margin:0;background:#e9e9e9;border:1px solid var(--areia-linha)}
.sobre__foto img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%}
.sobre__foto figcaption{
  padding:16px 18px;background:var(--azul);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--areia);border-top:2px solid var(--laranja);
}
.sobre .texto{max-width:70ch}
.sobre .texto p{margin:0 0 22px;font-size:17.5px;color:var(--areia-fraca)}
.sobre .texto p:first-of-type{
  font-size:clamp(19px,2vw,23px);font-weight:400;color:var(--areia);line-height:1.5
}
.assinatura{
  margin-top:34px;padding-top:22px;border-top:2px solid var(--laranja);
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--areia);
}

/* marcas */
.marcas{background:var(--azul)}
.marcas .lista{
  display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0;padding:0;list-style:none
}
.marcas .lista li{
  border:1px solid var(--areia-linha);padding:11px 20px;font-size:13.5px;
  font-weight:600;letter-spacing:.08em;color:var(--areia-fraca);
}
.marcas .rotulo{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--areia-fraca);margin:44px 0 0
}

/* contato */
.contato .email{
  display:inline-block;margin-top:26px;
  font-size:clamp(20px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;
  color:var(--areia);text-decoration:none;
  border-bottom:3px solid var(--laranja);padding-bottom:6px;
  transition:color .18s;word-break:break-word;
}
.contato .email:hover{color:var(--laranja)}

/* rodape */
.rodape{border-top:1px solid var(--areia-linha);padding:44px 0 52px;background:var(--tinta)}
.rodape .envolt{display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  justify-content:space-between}
/* width:auto + flex:none: sem os dois, o flex encolhe a largura do logo com a
   altura travada em 22px e a marca sai achatada. */
.rodape img{height:22px;width:auto;flex:none;opacity:.85}
.redes{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.redes a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--areia-fraca);transition:color .18s}
.redes a:hover{color:var(--laranja)}
.rodape small{display:block;width:100%;margin-top:26px;font-size:12.5px;
  color:rgba(227,211,197,.4)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}