/* Página da Broca Friday (v2, 03/11): preto, vermelho e osso; uma ideia por bloco. */
:root {
  --fundo: #0b0a09;
  --fundo-2: #141110;
  --linha: #2a2420;
  --texto: #f4efe8;
  --apagado: #a8a097;
  --vermelho: #e3262b;
  --vermelho-escuro: #b91c1c;
  --titulo: "Anton", Impact, sans-serif;
  --corpo: "Oswald", system-ui, sans-serif;
  --promessa: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--fundo); }
body { color: var(--texto); font-family: var(--corpo); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }

/* Topo */
.topo { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.topo-foto { position: absolute; inset: 0 0 auto 0; height: 70svh; }
.topo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: grayscale(1) contrast(1.3) brightness(.8); }
.topo-foto::before { content: ""; position: absolute; inset: 0; background: var(--vermelho); mix-blend-mode: multiply; opacity: .5; z-index: 1; }
.topo-foto::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.2) 26%, rgba(11,10,9,0) 45%, var(--fundo) 100%); }

.topo-texto { position: relative; z-index: 3; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px 32px; text-align: center; }
.marca { position: absolute; z-index: 3; top: 22px; left: 0; right: 0; text-align: center; font-family: var(--titulo); font-size: 58px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.marca b { font-weight: 400; color: var(--vermelho); }
h1 { font-family: var(--promessa); font-size: clamp(17px, 5.05vw, 26px); line-height: 1.18; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--vermelho); }
.sub { margin-top: 10px; font-size: clamp(15px, 4.1vw, 18px); line-height: 1.4; font-weight: 400; color: var(--apagado); }
.quando { margin: 20px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--linha); border-radius: 10px; background: rgba(20,17,16,.8); font-size: 14px; color: var(--apagado); white-space: nowrap; }
.quando strong { color: var(--texto); font-weight: 700; font-size: 16px; }
.abertura { margin-top: 20px; }
.abertura > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--vermelho); }
.abertura .quando { margin-top: 8px; }
.quando b { color: var(--texto); font-weight: 600; }
.quando i { width: 1px; height: 18px; background: var(--linha); }

.botao { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; min-height: 58px; margin: 20px auto 0; padding: 0 24px;
  border-radius: 12px; background: var(--vermelho); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 14px 32px -14px rgba(227,38,43,.8); transition: transform .15s ease, background .15s ease; }
.botao:hover { background: var(--vermelho-escuro); transform: translateY(-1px); }
.nota { margin-top: 12px; font-size: 13px; color: var(--apagado); }
.nota b { color: var(--texto); font-weight: 600; }

/* Blocos da versão B */
html[data-versao="A"] .so-b { display: none; }
.bloco { padding: 64px 20px; border-top: 1px solid var(--linha); }
.bloco-dentro { max-width: 560px; margin: 0 auto; }
.rotulo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--vermelho); text-align: center; }
.bloco h2 { margin-top: 10px; font-family: var(--titulo); font-weight: 400; font-size: 40px; line-height: 1; text-transform: uppercase; text-align: center; }
.bloco h2 b { font-weight: 400; color: var(--vermelho); }
.bloco-sub { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--apagado); text-align: center; }

.combo { list-style: none; margin-top: 32px; display: grid; gap: 10px; }
.combo li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo-2); }
.combo .n { font-family: var(--titulo); font-size: 28px; line-height: 1; color: var(--vermelho); text-align: center; }
.combo b { display: block; font-size: 16px; font-weight: 700; }
.combo p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--apagado); }

.carrossel { position: relative; margin-top: 28px; }
.carrossel-trilho { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho li { flex: 0 0 78%; max-width: 300px; scroll-snap-align: center; }
.carrossel-trilho img { width: 100%; border-radius: 12px; border: 1px solid var(--linha); }
.carrossel-seta { display: none; }
.carrossel-dica, .provas-nota-x { margin-top: 12px; font-size: 12px; color: var(--apagado); text-align: center; }

.final { text-align: center; }
.final .abertura { margin-top: 22px; }

@media (min-width: 900px) {
  .topo { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 100vh; }
  .topo-foto { inset: 0 0 0 auto; width: 55%; height: 100%; }
  .topo-foto img { object-position: 50% 20%; }
  .topo-foto::after { background: linear-gradient(90deg, var(--fundo) 0%, rgba(11,10,9,0) 30%), linear-gradient(180deg, rgba(11,10,9,0) 75%, var(--fundo) 100%); }
  .marca { position: static; text-align: center; font-size: clamp(84px, 7.5vw, 124px); margin-bottom: 28px; max-width: 600px; }
  .topo-conteudo { position: relative; z-index: 3; width: 50%; padding: 64px 0 64px max(56px, calc((100vw - 1240px) / 2)); }
  .topo-texto { max-width: 600px; margin: 0; padding: 0; text-align: center; }
  h1 { font-size: clamp(26px, 2.3vw, 34px); }
  .sub { font-size: clamp(18px, 1.4vw, 21px); margin-top: 14px; }
  .abertura { margin-top: 28px; }
  .quando { font-size: 15px; }
  .quando strong { font-size: 17px; }
  .botao { margin: 24px auto 0; max-width: 460px; min-height: 62px; font-size: 16px; }
  .nota { font-size: 14px; }
  .bloco { padding: 96px 40px; }
  .final .bloco-dentro { max-width: 820px; }
  .final .botao { margin: 28px auto 0; }
  .carrossel-trilho { max-width: 1180px; margin: 0 auto; justify-content: flex-start; }
  .carrossel-trilho li { flex: 0 0 260px; }
  .bloco h2 { font-size: 60px; }
}