/* ==========================================================================
   Hora do Jogo — site de vendas (ehoradojogo.com.br)
   Estrutura: a súmula da partida. Cabeçalho em carcaça de placar (grafite +
   LED âmbar); o resto é a ficha: campos com moldura de 1px e rótulo no canto,
   escalação, cronologia lance a lance, placar (calculadora) e inscrição.
   Mundo herdado do painel (DESIGN.md). Tema único e deliberado: claro, com o
   topo escuro como objeto placar.
   ========================================================================== */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  /* layout: coluna única de 1180px; a ficha é uma grade de campos emoldurados */
  --papel: oklch(0.962 0.005 250);
  --campo: oklch(0.995 0.002 250);
  --campo-2: oklch(0.94 0.006 250);
  --risco: oklch(0.32 0.016 250);          /* linhas da súmula */
  --risco-fino: oklch(0.84 0.01 250);
  --tinta: oklch(0.22 0.016 250);
  --tinta-2: oklch(0.38 0.016 250);
  --apagado: oklch(0.49 0.014 250);
  --carcaca: oklch(0.2 0.012 250);
  --carcaca-2: oklch(0.255 0.013 250);
  --carcaca-linha: oklch(0.33 0.014 250);
  --carcaca-texto: oklch(0.95 0.005 250);
  --carcaca-rotulo: oklch(0.74 0.012 250);
  --led: oklch(0.83 0.165 74);
  --led-apagado: oklch(0.33 0.035 74);
  --tempo: oklch(0.6 0.15 60);
  --futebol: oklch(0.56 0.14 152);
  --beach: oklch(0.6 0.1 58);
  --volei: oklch(0.55 0.15 255);
  --tenis: oklch(0.55 0.1 195);
  --zap: oklch(0.6 0.14 152);
  --perigo: oklch(0.55 0.19 27);
  --ok: oklch(0.54 0.13 152);

  --fonte: "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Barlow", ui-sans-serif, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --largura: 1180px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1rem/1.55 var(--fonte); -webkit-font-smoothing: antialiased; caret-color: var(--tempo); accent-color: var(--tinta); }
::selection { background: oklch(0.83 0.165 74 / 0.4); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--tempo); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.miolo { width: min(var(--largura), 100% - 32px); margin-inline: auto; }

/* dígitos (SVG de ui.js) */
.digitos .seg { fill: var(--led-apagado); }
.digitos .seg.on { fill: var(--led); }
.digitos .pontos { fill: var(--led); }
.digitos.piscar .pontos { animation: piscar 1s steps(1, end) infinite; }
@keyframes piscar { 50% { opacity: 0.18; } }

/* rótulo de campo: o canto escrito da súmula */
.rot { display: block; font-family: var(--display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 7px; border: 1px solid var(--risco); background: var(--campo); color: var(--tinta); font: 600 1rem var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.18s var(--ease), transform 0.08s; }
.btn:hover { background: var(--campo-2); }
.btn:active { transform: translateY(1px); }
.btn.led { background: var(--led); color: var(--carcaca); border-color: transparent; font-weight: 700; }
.btn.led:hover { background: oklch(0.87 0.15 80); }
.btn.tinta { background: var(--tinta); color: var(--campo); border-color: transparent; }
.btn.tinta:hover { background: oklch(0.3 0.016 250); }
.btn.contorno-claro { background: transparent; color: var(--carcaca-texto); border-color: var(--carcaca-linha); }
.btn.contorno-claro:hover { background: var(--carcaca-2); }
.btn.pequeno { height: 38px; padding: 0 14px; font-size: 0.9375rem; }
.btn svg { width: 18px; height: 18px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* ---------- cabeçalho fixo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--carcaca); color: var(--carcaca-texto); border-bottom: 1px solid var(--carcaca-linha); }
.topo .miolo { display: flex; align-items: center; gap: 20px; height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--carcaca-texto); }
.marca-selo { width: 34px; height: 34px; flex: none; }
.marca-nome { font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.marca-nome small { font-size: 0.72em; margin: 0 0.12em; color: var(--carcaca-rotulo); }
.topo nav { display: flex; gap: 22px; margin-left: 12px; font-weight: 500; font-size: 0.9375rem; color: var(--carcaca-rotulo); }
.topo nav a { text-decoration: none; }
.topo nav a:hover { color: var(--carcaca-texto); }
.topo .acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- abertura (cabeçalho da súmula em carcaça) ---------- */
.abertura { background: var(--carcaca); color: var(--carcaca-texto); padding-block: 28px 56px; }
/* a abertura ocupa a primeira dobra inteira (tela menos a barra do topo, ~65px): a Escalação começa na segunda */
@media (min-width: 861px) { .abertura { min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: center; } .abertura > .miolo { align-self: stretch; } }
.ficha-topo { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 1fr; border: 1px solid var(--carcaca-linha); border-radius: 10px; overflow: hidden; }
.ficha-topo > div { padding: 10px 14px 12px; border-right: 1px solid var(--carcaca-linha); min-width: 0; }
.ficha-topo > div:last-child { border-right: 0; }
.ficha-topo .rot { color: var(--carcaca-rotulo); }
.ficha-topo b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-topo .digitos { height: 22px; width: auto; display: block; margin-top: 2px; }
.esportes-linha { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.esportes-linha span { display: inline-flex; align-items: center; gap: 6px; }
.esportes-linha svg { width: 16px; height: 16px; }
.esportes-linha .futebol { color: oklch(0.74 0.15 152); }
.esportes-linha .beach_tenis { color: oklch(0.8 0.1 70); }
.esportes-linha .volei { color: oklch(0.74 0.13 255); }
.esportes-linha .tenis { color: oklch(0.76 0.1 195); }
.abertura-corpo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 48px; }
.abertura h1 { font-size: clamp(2.75rem, 6.4vw, 5.25rem); }
.abertura h1 em { font-style: normal; color: var(--led); }
.abertura .lead { margin-top: 22px; font-size: 1.1875rem; line-height: 1.55; color: oklch(0.86 0.008 250); max-width: 52ch; }
.abertura .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.abertura .letra-miuda { margin-top: 14px; font-size: 0.875rem; color: var(--carcaca-rotulo); }

/* demonstração: celular + agenda sincronizados */
.demo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: end; }
.celular { background: oklch(0.12 0.01 250); border-radius: 30px; padding: 10px; box-shadow: 0 30px 60px -20px oklch(0 0 0 / 0.6), inset 0 0 0 1px var(--carcaca-linha); }
.celular-tela { background: oklch(0.93 0.012 110); border-radius: 22px; overflow: hidden; height: 540px; display: flex; flex-direction: column; }
.zap-topo { background: oklch(0.36 0.06 165); color: #fff; padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-size: 0.875rem; }
.zap-topo .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--carcaca); display: grid; place-items: center; flex: none; }
.zap-topo .avatar svg { width: 26px; height: 26px; }
.zap-topo small { display: block; opacity: 0.8; font-size: 0.75rem; }
.zap-msgs { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; justify-content: flex-end; }
.msg { max-width: 86%; padding: 6px 9px 4px; border-radius: 9px; font-size: 0.8125rem; line-height: 1.4; color: oklch(0.2 0.01 250); background: #fff; box-shadow: 0 1px 0 oklch(0 0 0 / 0.12); white-space: pre-line; }
.msg.cli { align-self: flex-end; background: oklch(0.92 0.07 140); }
.msg small { display: block; text-align: right; font-size: 0.625rem; color: oklch(0.5 0.01 250); margin-top: 1px; }
.msg.entrando { animation: msg-entra 0.32s var(--ease) both; }
@keyframes msg-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.digitando { align-self: flex-start; background: #fff; border-radius: 9px; padding: 8px 10px; display: flex; gap: 3px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.6 0.01 250); animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pula { 30% { transform: translateY(-3px); } }
.agenda-mini { background: var(--carcaca-2); border: 1px solid var(--carcaca-linha); border-radius: 12px; padding: 12px; }
.agenda-mini-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.agenda-mini-cab b { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; }
.agenda-mini-cab .digitos { height: 16px; width: auto; }
.agenda-mini-grade { position: relative; display: grid; grid-template-columns: 38px 1fr; }
.agenda-mini-grade .horas div { height: 46px; font-size: 0.6875rem; color: var(--carcaca-rotulo); transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.agenda-mini-grade .trilho { position: relative; border-left: 1px solid var(--carcaca-linha); background-image: linear-gradient(to bottom, var(--carcaca-linha) 0 1px, transparent 1px); background-size: 100% 46px; }
.jogo { position: absolute; left: 6px; right: 6px; height: 40px; border-radius: 7px; padding: 5px 9px; font-size: 0.75rem; line-height: 1.3; color: var(--carcaca-texto); border: 1px solid; transition: top 0.7s var(--ease), background 0.3s; }
.jogo b { display: block; font-size: 0.8125rem; }
.jogo.futebol { background: color-mix(in oklab, oklch(0.72 0.15 152) 22%, var(--carcaca-2)); border-color: oklch(0.72 0.15 152 / 0.6); }
.jogo.beach_tenis { background: color-mix(in oklab, oklch(0.78 0.1 70) 22%, var(--carcaca-2)); border-color: oklch(0.78 0.1 70 / 0.6); }
.jogo.destaque { box-shadow: 0 0 0 2px var(--led); }
.legenda-demo { margin-top: 10px; font-size: 0.75rem; color: var(--carcaca-rotulo); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.legenda-demo button { background: none; border: 0; color: var(--led); font: 600 0.8125rem var(--fonte); cursor: pointer; padding: 4px 0; }

/* ---------- a súmula (corpo) ---------- */
.secao { padding-block: 88px 0; }
.secao-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: end; margin-bottom: 32px; }
.secao-cab p { color: var(--tinta-2); font-size: 1.125rem; max-width: 56ch; }
.folha { background: var(--campo); border: 1px solid var(--risco); border-radius: 10px; overflow: hidden; }

/* escalação */
.escalacao { width: 100%; border-collapse: collapse; }
.escalacao th { text-align: left; padding: 10px 18px; border-bottom: 1px solid var(--risco); background: var(--campo-2); }
.escalacao td { padding: 18px; border-bottom: 1px solid var(--risco-fino); vertical-align: top; }
.escalacao tr:last-child td { border-bottom: 0; }
.escalacao .camisa { width: 72px; }
.camisa-num { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: var(--carcaca); color: var(--led); font-family: var(--display); font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.escalacao .posicao { width: 26%; }
.escalacao .posicao b { display: block; font-size: 1.125rem; }
.escalacao .posicao span { color: var(--apagado); font-size: 0.875rem; }
.escalacao td:last-child { color: var(--tinta-2); }

/* cronologia lance a lance */
.cronologia { display: grid; grid-template-columns: minmax(0, 1fr); }
.lance { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 330px); gap: 24px; padding: 22px 22px; border-bottom: 1px solid var(--risco-fino); align-items: start; }
.lance:last-child { border-bottom: 0; }
.lance-hora { display: flex; flex-direction: column; gap: 6px; }
.lance-hora .relogio { background: var(--carcaca); border-radius: 6px; padding: 6px 8px; width: max-content; }
.lance-hora .relogio .digitos { height: 20px; width: auto; display: block; }
.lance-hora span { font-weight: 600; font-size: 0.9375rem; color: var(--tinta-2); }
.lance h3 { margin-bottom: 6px; }
.lance p { color: var(--tinta-2); }
.lance .quem { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--apagado); }
.lance .quem svg { width: 15px; height: 15px; }
.lance .msg { max-width: 100%; border: 1px solid var(--risco-fino); box-shadow: none; }
.lance .msgs { display: flex; flex-direction: column; gap: 6px; background: oklch(0.95 0.01 110); border-radius: 10px; padding: 10px; }
.lance.equipe .msgs { background: var(--campo-2); }

/* placar: calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.calc-entradas { padding: 24px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--risco); }
.controle label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-weight: 600; }
.controle output { font-family: var(--display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.controle input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--tinta); height: 28px; }
.controle small { color: var(--apagado); }
.calc-placar { background: var(--carcaca); color: var(--carcaca-texto); padding: 24px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.calc-placar .rot { color: var(--carcaca-rotulo); }
.calc-linha { display: flex; justify-content: space-between; align-items: end; gap: 16px; border-bottom: 1px solid var(--carcaca-linha); padding-bottom: 14px; }
.calc-linha:last-of-type { border-bottom: 0; }
.valor-led { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--led); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-placar p { color: oklch(0.86 0.008 250); }
.calc-placar p b { color: var(--led); }

/* regulamento: preço + dúvidas */
.regulamento { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.preco { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.preco-valor { display: flex; align-items: baseline; gap: 8px; }
.preco-valor { flex-wrap: wrap; }
.preco-valor b { white-space: nowrap; font-family: var(--display); font-size: 5rem; line-height: 0.9; font-weight: 700; letter-spacing: -0.01em; }
.preco-valor span { color: var(--apagado); font-weight: 600; }
.preco ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.preco li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--risco-fino); }
.preco li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok); }
.duvidas { display: flex; flex-direction: column; }
.duvidas details { border-bottom: 1px solid var(--risco-fino); }
.duvidas details:last-child { border-bottom: 0; }
.duvidas summary { cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--apagado); transition: transform 0.2s var(--ease); }
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas details p { padding: 0 22px 18px; color: var(--tinta-2); max-width: 68ch; }

/* inscrição */
.inscricao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); }
.form-col { padding: 26px; border-right: 1px solid var(--risco); }
.passos { display: flex; gap: 0; margin-bottom: 22px; border: 1px solid var(--risco); border-radius: 8px; overflow: hidden; }
.passos li { list-style: none; flex: 1; padding: 9px 12px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; color: var(--apagado); border-right: 1px solid var(--risco-fino); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passos li:last-child { border-right: 0; }
.passos li.atual { background: var(--carcaca); color: var(--led); }
.passos li.feito { color: var(--tinta); background: var(--campo-2); }
.passos { padding: 0; margin-top: 0; }
.etapa { display: none; flex-direction: column; gap: 16px; }
.etapa.atual { display: flex; animation: msg-entra 0.28s var(--ease); }
.etapa h3 { font-size: 1.375rem; }
.etapa > p { color: var(--tinta-2); }
.grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; } .c1 { grid-column: span 1; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo small { color: var(--apagado); font-size: 0.8125rem; }
.entrada { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--risco-fino); border-bottom-color: var(--risco); border-radius: 7px; background: var(--campo); font: 500 1rem var(--fonte); color: var(--tinta); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.entrada:focus { border-color: var(--tempo); box-shadow: 0 0 0 3px oklch(0.83 0.165 74 / 0.3); }
.entrada.erro { border-color: var(--perigo); box-shadow: 0 0 0 3px oklch(0.55 0.19 27 / 0.15); }
.entrada::placeholder { color: var(--apagado); }
.quadra-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 150px); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--risco-fino); }
.quadra-linha:first-of-type { border-top: 1px solid var(--risco-fino); }
.quadra-linha .esp { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; }
.quadra-linha .esp svg { width: 22px; height: 22px; }
.quadra-linha .esp.futebol { color: var(--futebol); } .quadra-linha .esp.beach_tenis { color: var(--beach); } .quadra-linha .esp.volei { color: var(--volei); } .quadra-linha .esp.tenis { color: var(--tenis); }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--risco); border-radius: 8px; overflow: hidden; }
.contador button { width: 40px; height: 40px; border: 0; background: var(--campo-2); font: 700 1.25rem var(--fonte); cursor: pointer; color: var(--tinta); }
.contador button:hover { background: oklch(0.9 0.008 250); }
.contador output { width: 46px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.preco-hora { display: flex; align-items: center; gap: 6px; }
.preco-hora span { color: var(--apagado); font-weight: 600; }
.preco-hora .entrada { height: 40px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--tinta-2); }
.aceite input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.navegacao { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.aviso { padding: 10px 14px; border-radius: 7px; font-size: 0.9375rem; border: 1px solid oklch(0.55 0.19 27 / 0.35); background: oklch(0.55 0.19 27 / 0.06); color: var(--perigo); }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.resumo { padding: 26px; display: flex; flex-direction: column; gap: 16px; background: var(--campo-2); }
.resumo dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.resumo dl div { padding: 12px 0; border-bottom: 1px solid var(--risco-fino); }
.resumo dl div:last-child { border-bottom: 0; }
.resumo dd { margin: 2px 0 0; font-weight: 700; font-size: 1.0625rem; }
.resumo .total { background: var(--carcaca); color: var(--carcaca-texto); border-radius: 9px; padding: 14px 16px; }
.resumo .total .rot { color: var(--carcaca-rotulo); }
.resumo .total b { display: block; font-family: var(--display); font-size: 2rem; color: var(--led); line-height: 1.05; }
.sucesso { display: none; flex-direction: column; gap: 14px; padding: 8px 0; }
.sucesso.ativo { display: flex; animation: msg-entra 0.3s var(--ease); }
.sucesso h3 { font-size: 1.75rem; font-family: var(--display); text-transform: uppercase; }

/* rodapé: assinaturas */
.rodape { margin-top: 96px; background: var(--carcaca); color: var(--carcaca-rotulo); padding-block: 40px; font-size: 0.875rem; }
.rodape .miolo { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: end; }
.assinatura { border-top: 1px solid var(--carcaca-linha); padding-top: 8px; }
.assinatura b { color: var(--carcaca-texto); display: block; }
.chamada-final { padding-block: 72px 0; }
.chamada-final .folha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; }
.chamada-final h2 { font-size: clamp(2rem, 4vw, 3rem); }

/* ---------- responsivo ---------- */
@media (max-width: 1020px) {
  .abertura-corpo, .secao-cab, .regulamento, .inscricao, .calc { grid-template-columns: 1fr; }
  .inscricao { grid-template-columns: minmax(0, 1fr); } /* 1fr não deixa a coluna ficar menor que a barra de passos */
  .calc-entradas, .form-col { border-right: 0; border-bottom: 1px solid var(--risco); }
  .lance { grid-template-columns: 130px minmax(0, 1fr); }
  .lance .msgs { grid-column: 2; }
  .topo nav { display: none; }
}
@media (max-width: 640px) {
  .ficha-topo { grid-template-columns: 1fr 1fr; }
  .ficha-topo > div:nth-child(2) { border-right: 0; }
  .ficha-topo > div:nth-child(-n+2) { border-bottom: 1px solid var(--carcaca-linha); }
  .demo { grid-template-columns: 1fr; }
  .celular { max-width: 320px; margin-inline: auto; width: 100%; }
  .lance { grid-template-columns: 1fr; gap: 12px; }
  .lance .msgs { grid-column: auto; }
  .escalacao .camisa { width: 56px; }
  .escalacao td, .escalacao th { padding: 12px; }
  .escalacao .posicao { width: auto; }
  .escalacao tr { display: grid; grid-template-columns: 56px 1fr; }
  .escalacao td:last-child { grid-column: 2; padding-top: 0; }
  .escalacao thead { display: none; }
  .grade { grid-template-columns: 1fr 1fr; }
  .c1, .c2, .c3, .c4, .c6 { grid-column: span 2; }
  .grade .meia { grid-column: span 1; }
  .quadra-linha { grid-template-columns: 1fr auto; }
  .quadra-linha .preco-hora { grid-column: 1 / -1; }
  .topo .acoes .btn:not(.led) { display: none; }
  .rodape .miolo, .chamada-final .folha { grid-template-columns: 1fr; }
  .preco-valor b { font-size: 4rem; }
  .secao { padding-block: 64px 0; }
  /* inscrição no celular: passos compactos e respiro menor, sem cortar a tela */
  .form-col, .resumo { padding: 18px 16px; }
  .passos li { min-width: 0; padding: 8px 4px; font-size: 0.6875rem; letter-spacing: 0.03em; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}