/* Kart Clube Passo Fundo — página provisória "em reforma" (SPEC › Manutenção), no visual do
   site em aprovação: cabeçalho de asfalto com o selo pendurado, foto da pista, a zebra da
   curva e o rodapé de asfalto. Sem JS. tokens → base → layout → componentes. Mobile-first.
   Paleta fixa, sem prefers-color-scheme: o conceito são as faixas de cor do antigo. */

/* ---------- fontes (Montserrat local, OFL — assets/fonts/LICENSE-montserrat) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

/* ---------- tokens (SPEC › Design, copiados iguais; contrastes medidos com bin/contraste) ---------- */
:root {
  /* identidade + ação */
  --vermelho: #C22127;        /* ação (botões, link no claro) e faixas vermelhas · branco 5,93 · sobre névoa 5,44 */
  --vermelho-escuro: #A51B21; /* hover da ação · branco 7,56 */
  --asfalto: #111113;         /* faixas pretas, cabeçalho, rodapé, camada do hero · branco 18,86 */
  --grafite: #36353A;         /* faixa do preço (o grafite do antigo) · branco 12,16 */
  --nevoa: #F5F5F5;           /* faixas claras · asfalto 17,30 */
  --branco: #FFFFFF;
  --coral: #F0656A;           /* só realce de TEXTO sobre asfalto (6,08); sobre grafite 3,92 → só ≥ 24px */
  --apoio-escuro: #B9B8BE;    /* texto secundário no asfalto 9,58 / no grafite 6,17 */
  --apoio-claro: #5C5B61;     /* texto secundário na névoa 6,17 / no branco 6,72 */
  --borda-clara: #D9D8DC;     /* divisória decorativa no claro */
  --borda-escura: #2A2A2E;    /* divisória decorativa no escuro */

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem;
  --h1: clamp(2rem, 1.1rem + 4vw, 3.75rem);
  --h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --h3: 1.125rem;
  --num: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);   /* faixa de números e "R$ 100" */

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  --max: 71.25rem;            /* ~1140px, a grade do antigo */
  --gutter: 1.25rem;          /* 2rem a partir de 768px */

  --zebra-bloco: 2.5rem;      /* 3.5rem a partir de 768px; 1.25rem na zebra curta */
  --zebra-altura: .75rem;     /* .875rem a partir de 768px */

  --cab-altura: 4rem;         /* 5.5rem a partir de 1024px */
  --selo: 5.25rem;            /* 7rem a partir de 1024px: o selo pendurado */

  /* breakpoints: 480px, 768px, 1024px — mobile-first */
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --zebra-bloco: 3.5rem; --zebra-altura: .875rem; }
}
@media (min-width: 1024px) {
  :root { --cab-altura: 5.5rem; --selo: 7rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* a página é curta: o corpo ocupa a tela inteira e o hero (ou a 404) cresce para o rodapé
   assentar na base, sem faixa vazia embaixo */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--branco);
  background: var(--asfalto);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1 {
  margin: 0;
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
p { margin: 0 0 var(--space-4); max-width: 65ch; }
/* todo fundo da página é escuro: link branco, realce coral (vermelho no asfalto é 3,18) */
a { color: var(--branco); text-underline-offset: .18em; }
a:hover { color: var(--coral); }
:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; }
address { font-style: normal; }

.pular {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--branco); color: var(--asfalto); font-weight: 700;
  padding: var(--space-3) var(--space-4);
}
.pular:focus { top: var(--space-4); }
.pular:focus-visible { outline-color: var(--vermelho); }

/* ---------- layout ---------- */
.miolo { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ---------- componentes ---------- */

/* a zebra da curva — faixa larga onde a foto termina e na borda de cima do rodapé; curta
   (6 blocos) sob o título. Blocos retos vermelho/branco, nunca inclinada, nunca de fundo. */
.zebra {
  display: block;
  background-image: repeating-linear-gradient(90deg,
    var(--vermelho) 0 var(--zebra-bloco),
    var(--branco) var(--zebra-bloco) calc(2 * var(--zebra-bloco)));
}
.zebra--faixa { flex: none; height: var(--zebra-altura); }
.zebra--curta {
  --zebra-bloco: 1.25rem;
  width: 7.5rem;          /* seis blocos */
  height: .5rem;
}

/* botões: retangulares como no antigo, caixa alta 700, vermelho da ação */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--vermelho);
  color: var(--branco);
  font: 700 .9375rem/1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.botao:hover { background: var(--vermelho-escuro); color: var(--branco); }
@media (min-width: 768px) {
  .botao { gap: var(--space-3); padding-inline: var(--space-6); font-size: var(--text-base); letter-spacing: .04em; }
}
/* a saída da 404: no celular da largura da coluna, do tamanho do texto a partir de 480px */
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.acoes .botao { flex: 1 1 100%; }
@media (min-width: 480px) {
  .acoes { gap: var(--space-3) var(--space-4); }
  .acoes .botao { flex: 0 0 auto; }
}

/* sobretítulo coral: realce de texto no asfalto (6,08; 4,69 no pior ponto do degradê) */
.sobre {
  margin-bottom: var(--space-2);
  font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--coral);
}
@media (min-width: 768px) {
  .sobre { margin-bottom: var(--space-3); font-size: var(--text-sm); letter-spacing: .08em; }
}

/* cabeçalho: só a barra de asfalto com o selo pendurado — não há menu nem âncoras */
.cabecalho { position: relative; z-index: 30; flex: none; background: var(--asfalto); }
.cabecalho-miolo { position: relative; min-height: var(--cab-altura); }
.selo {
  position: absolute; top: var(--space-2); left: 50%;
  width: var(--selo); height: var(--selo);
  transform: translateX(-50%);
  border-radius: 50%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.selo img { width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .selo { left: 0; transform: none; }
}

/* hero: a foto da pista. No celular: foto numa faixa própria → zebra → texto no asfalto.
   No desktop: texto à esquerda sobre a camada de asfalto; a zebra larga do rodapé vira a
   borda da foto (duas zebras coladas seriam uma faixa só, mais grossa). */
.hero {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  background: var(--asfalto);
}
.hero-quadro { position: relative; flex: none; height: clamp(13.5rem, 60vw, 24rem); overflow: hidden; }
.hero-foto { width: 100%; height: 100%; object-fit: cover; object-position: 32% 74%; }
.hero-miolo { padding-block: var(--space-6) var(--space-10); }
.hero .zebra--curta { margin-block: var(--space-4) var(--space-5); }
.hero-aviso, .erro-texto { text-wrap: pretty; }
.hero-aviso {
  margin-bottom: 0;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.45;
}

@media (min-width: 768px) {
  .hero-miolo { padding-block: var(--space-10) var(--space-12); }
  .hero .zebra--curta { margin-block: var(--space-5) var(--space-6); }
  .hero-aviso { font-size: var(--text-xl); line-height: 1.35; }
  /* na medida da primeira frase do aviso: "Em breve retornaremos." quebra inteiro */
  .hero-aviso { max-width: 32rem; }
}
@media (min-width: 1024px) {
  .hero { flex-direction: row; align-items: center; min-height: 30rem; }
  .hero-quadro { position: absolute; inset: 0; height: auto; z-index: -1; }
  .hero-quadro::after {
    content: ""; position: absolute; inset: 0;
    background:
      /* as paradas seguem a coluna de texto (começa na margem do miolo, tem até 40rem),
         e não a largura da tela: o texto fica sempre sobre o escuro */
      linear-gradient(90deg,
        rgba(17, 17, 19, .94) 0,
        rgba(17, 17, 19, .9) calc(max(var(--gutter), (100% - var(--max)) / 2) + 34rem),
        rgba(17, 17, 19, .4) calc(max(var(--gutter), (100% - var(--max)) / 2) + 44rem),
        rgba(17, 17, 19, 0) calc(max(var(--gutter), (100% - var(--max)) / 2) + 54rem)),
      linear-gradient(0deg, rgba(17, 17, 19, .55) 0%, rgba(17, 17, 19, 0) 32%);
  }
  .hero-foto { object-position: center 62%; }
  .hero-zebra { display: none; }
  .hero-miolo { padding-block: var(--space-12); }
  .hero-texto { max-width: 40rem; }
}

/* 404: a faixa de asfalto com o título e a volta ao início (sem zebra curta — SPEC › Proibido) */
.erro { flex: 1 0 auto; display: flex; align-items: center; padding-block: var(--space-16) var(--space-12); }
.erro h1 { margin-bottom: var(--space-4); }
.erro-texto { font-size: var(--text-lg); margin-bottom: var(--space-8); }
@media (min-width: 1024px) {
  .erro { padding-block: var(--space-20) var(--space-16); }
}

/* rodapé enxuto, com a zebra na borda de cima: só o selo — sem contato durante a reforma */
.rodape { flex: none; background: var(--asfalto); color: var(--branco); }
.rodape-grade {
  display: grid; justify-items: center; gap: var(--space-4);
  padding-block: var(--space-10) var(--space-6);
  text-align: center;
}
.rodape-selo { display: block; width: 5rem; border-radius: 50%; }
.rodape-base {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-6);
  padding-block: var(--space-3);
  border-top: 1px solid var(--borda-escura);
  font-size: var(--text-sm); color: var(--apoio-escuro);
}
.rodape-base p { margin: 0; }
.feito { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; color: var(--apoio-escuro); text-decoration: none; }
.feito:hover { color: var(--branco); }
@media (min-width: 1024px) {
  .rodape-grade {
    grid-template-columns: auto 1fr auto; justify-items: start; align-items: center;
    gap: var(--space-8); padding-block: var(--space-6); text-align: left;
  }
  .rodape-base { justify-content: space-between; }
}