/* Pré-lançamento MachineCuts: cartaz, cortes somados e uma jornada real.
   Escala e agrupamento: https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
   Reorganização em 320px: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html */
[hidden] { display: none !important; }
main > section { padding-inline: max(24px, calc((100% - 1200px) / 2)); }
main > section > *, .abertura-side > *, .abertura-lado > *, .lote-grid > *, .metas-grade > * { min-width: 0; }
section[id] { scroll-margin-top: 84px; }
h2 { line-height:1.04; }
.btn, .topo-cta { min-height: 44px; overflow-wrap: anywhere; }
.btn { white-space: normal; line-height: 1.25; padding-block: 12px; }
.abertura { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 44px; padding-top: 56px; padding-bottom: 72px; min-height: min(920px, calc(100svh - 62px)); }
.abertura .ceu { background: linear-gradient(90deg, rgba(23,10,43,.35), transparent 70%), linear-gradient(180deg, #170A2B 0%, #2A1450 30%, #6E1E73 58%, #FF4F8B 79%, #FF8A1F 94%, #FFD60A); }
.abertura h1 { font-size: clamp(58px, 6vw, 96px); line-height: .96; max-width: none; text-shadow: 0 4px 0 rgba(23,10,43,.3); }
.abertura .sub { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 51ch; margin-top: 24px; }
.abertura .sub strong { font-weight: 600; }
.hero-diferencial { max-width:44ch; margin-top:22px; font:700 clamp(17px,1.5vw,21px)/1.45 Rubik,sans-serif; color:var(--ouro); }
.abertura .hero-diferencial + .sub { margin-top:16px; }
.selo-temporada { font-size: 20px; margin-bottom: 20px; }
.abertura-side, .abertura-lado { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; align-self: center; }
.abertura-side .maq-gigante, .abertura-lado .maq-gigante { width: min(300px, 23vw); border-width: 4px; box-shadow: 0 12px 0 rgba(23,10,43,.45); }
.contagem { gap: 8px; max-width: 440px; }
.contagem > div { flex: 1; min-width: 0; border-width: 1px; border-radius: 8px; background: rgba(23,10,43,.68); padding: 12px 8px 10px; }
.contagem strong { font-size: clamp(42px, 4.4vw, 62px); }
.contagem span { font-size: 12px; }
.abertura .miudo-claro { max-width: 58ch; font-size: 12px; opacity: 1; color: #FFF4E2; }
.abertura .acoes { gap: 12px; margin-bottom: 18px; }
.abertura .acoes .btn { font-size: 16px; min-height: 54px; padding-inline: 22px; }
.faixa-trilho { font-size: 26px; }
.nota-faixa { margin:0; padding:12px max(24px,calc((100% - 1200px)/2)); background:#FFD60A; color:#111; font-size:12px; line-height:1.6; border-bottom:2px solid #111; }
.soma-total .soma-legenda { font:700 18px/1.4 Rubik,system-ui,sans-serif; letter-spacing:0; }
.stats-presenca { font-size:12px; line-height:1.5; margin:12px 0 20px; }
.stats-presenca small { display:block; font-size:11px; }
.sinal-ativo { display:inline-block; width:7px; height:7px; background:currentColor; border-radius:50%; margin-right:5px; }
.lote-estatisticas { padding-block:18px; border-block:1px solid #111; margin-block:14px; }
.lote-estatisticas progress { width:100%; accent-color:#111; }
.topo { flex-wrap:wrap; }
.topo-cta { max-width:100%; }
.topo-acoes { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.controle-animacoes { background:transparent; border:1px solid #8D7DA1; border-radius:8px; padding:10px 12px; min-height:44px; color:var(--areia); font:500 12px/1.4 Rubik,sans-serif; cursor:pointer; }
.animacoes-pausadas *, .animacoes-pausadas *::before, .animacoes-pausadas *::after { animation-play-state:paused !important; scroll-behavior:auto !important; }
.comparativo { background:#100B19; color:var(--areia); }
.comparativo .sobretitulo { color:var(--ouro); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.comparativo h2 { max-width:none; font-size:clamp(42px,4.5vw,66px); line-height:1.06; }
.comparativo-intro { max-width:65ch; margin:22px 0 32px; color:#DED4EA; font-size:18px; }
.comparativo-nosso { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:34px; align-items:center; background:var(--ouro); color:#111; padding:32px; border-radius:10px; }
.comparativo-marca { display:block; font-size:12px; font-weight:700; line-height:1.5; }
.comparativo-valor { font:900 clamp(66px,7vw,104px)/1 'Big Shoulders Display',sans-serif; margin:12px 0; }
.comparativo-valor span { font-size:.48em; white-space:nowrap; }
.comparativo-nosso ul { margin:0; padding-left:20px; display:grid; gap:16px; font-size:14px; line-height:1.6; }
.comparativo-nosso b { display:block; }
.comparativo-contexto { margin-top:32px; margin-bottom:16px; font:600 18px/1.5 Rubik,sans-serif; }
.comparativo-grade { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.comparativo-grade article { padding:24px; border:1px solid #5A496B; border-radius:10px; display:flex; flex-direction:column; gap:12px; }
.comparativo-grade h3 { font:900 36px/1 'Big Shoulders Display',sans-serif; }
.comparativo-programa { font-size:12px; color:#D0C3DD; }
.comparativo-grade p { font-size:14px; line-height:1.6; }
.comparativo-grade a { color:var(--ouro); font-size:12px; min-height:44px; display:flex; align-items:center; margin-top:auto; text-underline-offset:4px; }
.comparativo .letra-miuda { color:#D0C3DD; opacity:1; max-width:100ch; margin-bottom:24px; }
@media(max-width:860px) { .comparativo-nosso,.comparativo-grade { grid-template-columns:minmax(0,1fr); } .comparativo-nosso { padding:24px; } .comparativo-intro { font-size:16px; } }
@media(max-width:480px) { .topo { gap:8px; } .topo-acoes { width:auto; } .topo-acoes .topo-cta { flex:1; font-size:12px; } .controle-animacoes { font-size:10px; padding-inline:8px; } .comparativo-nosso { padding:22px 18px; } .comparativo-grade article { padding:22px 18px; } }
main, section, article, .soma-controles > *, .lote-grid > *, .metas-grade > * { min-width:0; }
h1,h2,h3,p,li { overflow-wrap:anywhere; }
@media(max-width:359px) { .topo { padding-inline:12px; } .marca { font-size:16px; } .marca img { width:28px; height:28px; } .topo-cta { font-size:12px; padding-inline:10px; } }
.dor, .poderes, .acumulo, .regras { background: var(--papel); color: var(--preto); }
.dor h2, .poderes h2, .acumulo h2, .escada-metas h2, .lote h2, .regras h2 { max-width: 18ch; }
.dor-lista li, .grade-poderes li { border-width: 1px; border-radius: 10px; padding: 24px; }
.dor-lista strong { font-size: 42px; }

/* Exemplo didático: dez cortes, uma soma. Não é resultado de cliente. */
.acumulo { position: relative; border-top: 1px solid var(--linha); }
.acumulo > p, .acumulo .sub-escuro { max-width: 64ch; color: #41413F; margin-top: 18px; font-size: 18px; }
.soma-cortes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 32px 0 24px; padding: 0; list-style: none; }
.soma-corte { position: relative; background: #fff; color: var(--preto); border: 1px solid #BDBDB5; border-radius: 8px; padding: 20px 14px 16px; min-width: 0; text-align: left; }
.soma-corte::before { content: ""; display: block; width: 18px; height: 24px; margin-bottom: 16px; border: 2px solid var(--preto); border-radius: 4px; background: linear-gradient(140deg, transparent 45%, #E7E7E0 45%); }
.soma-corte b, .soma-corte strong { font: 900 35px/1 'Big Shoulders Display', Rubik, sans-serif; display: block; }
.soma-corte span, .soma-corte small { display: block; font-size: 12px; color: var(--texto2); line-height: 1.5; margin-top: 6px; }
.soma-total { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; border-top: 3px solid var(--preto); padding: 20px 0 0; font-size: 18px; line-height: 1.4; }
.soma-total strong, .soma-total b { font: 900 clamp(56px, 6vw, 86px)/.9 'Big Shoulders Display', Rubik, sans-serif; letter-spacing: -.02em; }
.soma-total span { max-width: 36ch; }
.soma-total output { font: 900 clamp(56px, 6vw, 86px)/.9 'Big Shoulders Display', Rubik, sans-serif; }
.soma-controles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 24px 0; padding: 22px 0; border-block: 1px solid var(--linha); }
.soma-controles label { display: grid; gap: 8px; font-weight: 600; font-size: 14px; }
.soma-controles input[type="range"] { width: 100%; min-width: 0; height: 44px; accent-color: var(--preto); }
.soma-controles input[type="number"] { min-height: 44px; width: 100%; border: 1px solid var(--preto); border-radius: 8px; padding: 10px; font: inherit; color: var(--preto); background: #fff; }
.acumulo .letra-miuda, .acumulo .nota { color: #555550; opacity: 1; font-size: 13px; }

/* Oito marcos legíveis. A cor acende no destino, não em todos os cartões. */
.escada-metas { background: var(--noite); color: var(--areia); }
.escada-metas > p { max-width: 66ch; margin-top: 18px; color: #DED4EA; }
.metas-grade { list-style: none; padding: 0; margin: 36px 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.meta-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border: 1px solid #5A496B; border-top: 4px solid var(--areia); border-radius: 4px 4px 10px 10px; background: #241335; color: var(--areia); }
.meta-card h3 { font: 900 48px/.95 'Big Shoulders Display', Rubik, sans-serif; letter-spacing: -.015em; }
.meta-card > strong, .meta-card .meta-numero, .meta-card .data-grande { font: 900 clamp(42px, 4.2vw, 58px)/.95 'Big Shoulders Display', Rubik, sans-serif; letter-spacing: -.015em; }
.meta-card p { margin: 0; font-size: 15px; line-height: 1.5; }
.meta-card small { display: block; margin-top: auto; font-size: 12px; line-height: 1.5; color: #D0C3DD; }
.meta-card .tag { font: 600 11px/1.35 Rubik, sans-serif; border: 1px solid #8A789A; border-radius: 6px; padding: 4px 7px; }
.meta-card.destaque, .meta-card[data-grande="true"] { background: var(--ouro); color: var(--preto); border-color: var(--ouro); border-top-color: #fff; }
.meta-card.destaque small, .meta-card[data-grande="true"] small { color: #3B3400; }
.meta-card.destaque .tag { border-color: var(--preto); }
.meta-card .meta-maq { width: 70px; height: 70px; align-self: center; margin: 2px 0 8px; }
.meta-card .meta-maq svg, .meta-card .meta-maq img { display: block; width: 100%; height: 100%; }
.escada-metas .letra-miuda { opacity: 1; color: #CFC1DE; }

/* Lote confirmado: 300 vagas é capacidade, não um contador de compras. */
.lote { background: var(--areia); color: var(--preto); }
.lote-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px 60px; align-items: center; }
.lote-grid p { max-width: 51ch; margin-top: 20px; font-size: 18px; }
.lote-grid ul { padding-left: 22px; margin: 22px 0; display: grid; gap: 10px; }
.lote-cartaz { background: var(--preto); color: #fff; border-radius: 12px; padding: 34px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; border: 3px solid var(--preto); box-shadow: 8px 8px 0 var(--sol); }
.lote-numero { font: 900 clamp(130px, 15vw, 220px)/.8 'Big Shoulders Display', Rubik, sans-serif; letter-spacing: -.025em; color: var(--ouro); margin: 12px 0 14px; }
.lote-cartaz h3 { font: 900 38px/1 'Big Shoulders Display', Rubik, sans-serif; }
.lote-cartaz p { font-size: 14px; margin: 10px 0 0; max-width: 27ch; }
.lote-cartaz .btn { margin-top: 24px; width: 100%; }
.lote-estatisticas, .stats-presenca { display: flex; gap: 10px 20px; flex-wrap: wrap; padding: 16px 0; margin-top: 22px; border-top: 1px solid #9E8D78; font-size: 13px; font-variant-numeric: tabular-nums; }
.lote-estatisticas strong, .stats-presenca strong { font-weight: 800; }
.lote .letra-miuda { color: #494039; opacity: 1; margin-top: 20px; font-size: 13px; }
.lote .btn:focus-visible, .acumulo :focus-visible, .regras :focus-visible { outline-color: var(--preto); }

.regras h2 { margin-bottom: 30px; }
.regras details { color: var(--preto); border-bottom: 1px solid #BEBEB6; max-width: 900px; padding: 10px 0; }
.regras summary { font-size: 18px; line-height: 1.4; min-height: 48px; padding: 8px 32px 8px 0; position: relative; display: block; list-style: none; }
.regras summary::-webkit-details-marker { display: none; }
.regras summary::after { content: "+"; position: absolute; top: 8px; right: 4px; font: 600 24px/1.3 Rubik, sans-serif; }
.regras details[open] summary::after { content: "−"; }
.regras details p { color: #454540; font-size: 15px; line-height: 1.65; max-width: 72ch; padding-top: 4px; }
.regras details a { color: var(--preto); font-weight: 600; text-underline-offset: 3px; }
.rodape a { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 6px; text-underline-offset: 4px; }
@media (max-width: 1000px) {
  .abertura { gap: 24px; }
  .abertura h1 { font-size: clamp(58px, 7vw, 88px); }
  .metas-grade { gap: 12px; }
  .meta-card { padding: 20px 14px; }
  .lote-grid { gap: 36px; }
}
@media (max-width: 860px) {
  main > section { padding: 64px 20px; }
  .abertura { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; padding-bottom: 48px; }
  .abertura h1 { font-size: clamp(58px, 10vw, 90px); max-width: 14ch; }
  .abertura .sub { margin-top: 20px; max-width: 52ch; font-size: 17px; }
  .abertura-side, .abertura-lado { order: initial; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; max-width: 440px; margin: 16px auto 0; width: 100%; align-items: center; }
  .abertura-side .maq-gigante, .abertura-lado .maq-gigante { width: 100%; max-width: 160px; padding: 10%; }
  .abertura .acoes { margin-top: 20px; }
  .abertura .acoes .btn { width: 100%; min-height: 54px; }
  .contagem { max-width: 440px; gap: 7px; }
  .contagem strong { font-size: clamp(40px, 10vw, 54px); }
  .contagem > div { padding: 10px 4px 8px; }
  .soma-cortes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .soma-corte { padding: 14px 8px 12px; }
  .soma-corte::before { width: 14px; height: 20px; margin-bottom: 12px; }
  .soma-corte b, .soma-corte strong { font-size: 30px; }
  .soma-corte span, .soma-corte small { font-size: 10px; }
  .metas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .meta-card { padding: 22px 18px; }
  .lote-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lote-cartaz { max-width: 460px; width: calc(100% - 8px); padding: 30px 22px; justify-self: start; }
  .lote-numero { font-size: clamp(140px, 30vw, 200px); }
  .soma-controles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .regras summary { font-size: 16px; }
  .escada-metas > p, .acumulo > p, .lote-grid p { font-size: 16px; }
}
@media (max-width: 480px) {
  main > section { padding-inline: 18px; }
  .topo { padding-inline: 18px; }
  .marca { font-size: 19px; }
  .selo-temporada { font-size: 18px; }
  .abertura h1 { font-size: clamp(42px, 12.5vw, 54px); }
  .abertura .sub { font-size: 16px; }
  .contagem { gap: 6px; }
  .contagem span { font-size: 11px; }
  .soma-cortes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .soma-corte { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 14px 12px; }
  .soma-corte::before { grid-row: 1 / span 2; margin: 4px 0 0; }
  .soma-corte span, .soma-corte small { grid-column: 2; font-size: 11px; margin: 0; }
  .soma-corte b, .soma-corte strong { font-size: 32px; }
  .soma-total { flex-direction: column; align-items: flex-start; gap: 12px; }
  .soma-total strong, .soma-total b, .soma-total output { font-size: 64px; }
  .metas-grade { gap: 12px; }
  .meta-card { padding: 18px 12px; gap: 9px; }
  .meta-card h3, .meta-card > strong, .meta-card .meta-numero, .meta-card .data-grande { font-size: 39px; }
  .meta-card p { font-size: 13px; }
  .meta-card small { font-size: 11px; }
  .meta-card .tag { font-size: 10px; padding: 4px 5px; }
  .lote-cartaz { padding: 28px 20px; }
  .rodape { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ouro:hover { transform: none; }
}