/* nove às nove · landing. Mesma linguagem do kit Zerokit: Manrope nos títulos, Inter no texto, JetBrains Mono nos
   rótulos, vermelho #E41E26 e marinho #0F172A. Fontes locais (OFL), nada de terceiros. */
@font-face { font-family: "Manrope"; src: url("fontes/Manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fontes/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/Inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fontes/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --vermelho: #E41E26;        /* o relógio; texto só em tamanho de título sobre marinho (3,84:1) */
  --vermelho-texto: #C71820;  /* vermelho para texto pequeno (5,87:1 sobre branco) */
  --marinho: #0F172A;
  --branco: #FFFFFF;
  --cinza: #475569;           /* 7,58:1 sobre branco */
  --nevoa: #F4F4F5;
  --linha: #0F172A1F;
  --claro-sobre-marinho: #CBD5E1; /* 12,0:1 sobre marinho */
  --titulo: "Manrope", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
  --rotulo: "JetBrains Mono", ui-monospace, monospace;
  --largura: 1200px;
  --margem: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; color: var(--marinho); background: var(--branco); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; border-radius: 2px; }

.caixa { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }

.pular { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--branco); color: var(--marinho);
  padding: 10px 16px; font-weight: 600; border-radius: 6px; }
.pular:focus { top: 12px; }

.rotulo { font-family: var(--rotulo); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cinza); }

h1, h2, h3 { font-family: var(--titulo); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); margin: 18px 0 24px; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 14px 0 36px; max-width: 18ch; }
h3 { font-family: var(--titulo); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 10px; }
h1 span, h2 span { color: var(--vermelho); }
.lide { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--cinza); max-width: 34em; }

/* Topo e abertura (marinho, como a fachada à noite) */
.topo { background: var(--marinho); color: var(--branco); }
.topo-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 22px;
  border-bottom: 1px solid #FFFFFF1F; }
.topo .marca { display: block; }
.topo .marca img { width: 128px; height: auto; }
.topo .rotulo, .abertura .rotulo, .horario .rotulo, .breve .rotulo { color: var(--claro-sobre-marinho); }

.abertura { background: var(--marinho); color: var(--branco); padding: 64px 0 88px; overflow: hidden;
  background-image: radial-gradient(#FFFFFF14 1px, transparent 1.2px); background-size: 24px 24px; }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.abertura .lide { color: var(--claro-sobre-marinho); }
.abertura-figura img { border-radius: 10px; box-shadow: 0 30px 60px #00000059; }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.botao { display: inline-block; font-weight: 600; text-decoration: none; padding: 14px 22px; border-radius: 8px;
  background: var(--vermelho); color: var(--branco); border: 2px solid var(--vermelho); }
.botao:hover { background: var(--vermelho-texto); border-color: var(--vermelho-texto); }
.botao-linha { background: transparent; border-color: #FFFFFF59; }
.botao-linha:hover { background: #FFFFFF14; border-color: var(--branco); }

/* Seções claras */
.secao { padding: 104px 0; }
.secao + .horario, .horario + .secao { margin-top: 0; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cartao { border: 1px solid var(--linha); border-radius: 12px; padding: 28px 28px 30px; background: var(--branco); }
.cartao p { color: var(--cinza); }
.cartao .numero { font-family: var(--rotulo); font-weight: 500; font-size: .85rem; color: var(--vermelho-texto);
  letter-spacing: .1em; margin-bottom: 28px; }
.nota { margin-top: 20px; font-size: .95rem; color: var(--cinza); }
.figura { margin-top: 56px; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }

/* O diferencial: o relógio às 9 */
.horario { background: var(--marinho); color: var(--branco); padding: 96px 0; }
.horario-grade { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.horario .relogio { width: clamp(140px, 22vw, 260px); }
.horario h2 { font-size: clamp(3rem, 8vw, 6.5rem); margin-bottom: 24px; }
.horario .lide { color: var(--claro-sobre-marinho); }

/* Em breve + contato */
.breve { background: var(--nevoa); padding: 104px 0; }
.breve .rotulo { color: var(--cinza); }
.breve .lide { margin-bottom: 32px; }
.breve-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; }
.breve-selo { width: clamp(180px, 22vw, 280px); }
.email { display: inline-block; font-family: var(--titulo); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3.4vw, 2.4rem); color: var(--marinho); text-decoration: none;
  border-bottom: 4px solid var(--vermelho); padding-bottom: 4px; overflow-wrap: anywhere; }
.email:hover { color: var(--vermelho-texto); }

.rodape { background: var(--marinho); color: var(--claro-sobre-marinho); font-size: .9rem; }
.rodape-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 32px; padding-bottom: 32px; }
.rodape img { width: 140px; height: auto; }

@media (max-width: 900px) {
  .abertura { padding: 40px 0 64px; }
  .abertura-grade, .horario-grade, .breve-grade { grid-template-columns: 1fr; gap: 40px; }
  .breve-selo { display: none; }
  .grade-3 { grid-template-columns: 1fr; gap: 14px; }
  .secao, .breve { padding: 72px 0; }
  .horario { padding: 72px 0; }
  .figura { margin-top: 36px; }
  .cartao .numero { margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .topo .marca img { width: 112px; }
  .topo .rotulo { font-size: .68rem; letter-spacing: .1em; text-align: right; }
  .acoes .botao { flex: 1 1 100%; text-align: center; }
}