/* Cardume Academias · exemplo de estilo da Studios Prumo
   Ideia: rede de academias que treina "em cardume". Índigo, coral e água; grade de aulas viva,
   semana montada pelo aluno e comparador de planos. */

@font-face { font-family: "Saira"; src: url("fontes/saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }

:root {
  --faixa: 32px;
  --indigo: #1B1464;
  --indigo-2: #241C7A;
  --indigo-3: #2E2690;
  --coral: #FF5A4E;
  --coral-texto: #C9302A;
  --agua: #5EE6D0;
  --amarelo: #FFD84A;
  --gelo: #F3F4FA;
  --gelo-2: #E4E6F2;
  --tinta: #0E0C2A;
  --tinta-2: #4A4870;
  --claro: #FFFFFF;
  --claro-2: #C9C6F5;
  --fonte: "Saira", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --mola: cubic-bezier(0.22, 1, 0.36, 1);
  --suave: cubic-bezier(0.2, 0.7, 0.1, 1);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--faixa); background: var(--indigo); color: var(--claro); font: 400 1.0625rem/1.6 var(--fonte); overflow-x: clip; }
svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; }
.ofertas :focus-visible, .semana :focus-visible, .diferenciais :focus-visible, .perguntas :focus-visible, .chamada :focus-visible { outline-color: var(--indigo); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-weight: 800; font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.005em; }

/* Faixa da Studios Prumo (igual em todos os exemplos) */
.faixa-prumo { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: var(--faixa); padding: 4px 16px; background: #0E0E10; color: #F2F0EB; font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-stretch: 100%; letter-spacing: 0.01em; text-align: center; text-decoration: none; }
.faixa-prumo:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-prumo:focus-visible { outline: 2px solid #6875FF; outline-offset: -4px; }
@media (max-width: 480px) { :root { --faixa: 40px; } .faixa-prumo { font-size: 11px; } }

/* Topo */
.topo { position: sticky; top: var(--faixa); z-index: 50; overflow-x: clip; display: flex; align-items: center; gap: 28px; padding: 12px var(--margem); background: rgba(27, 20, 100, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.marca-sinal { width: 44px; height: 32px; flex: none; fill: none; stroke: var(--agua); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.marca-sinal path { stroke-dasharray: none; }
.marca-nome { font-weight: 800; font-stretch: 70%; font-size: 1.875rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.marca-nome small { font-size: 0.75rem; font-weight: 600; font-stretch: 100%; font-style: normal; text-transform: none; color: var(--claro-2); margin-left: 2px; letter-spacing: 0.02em; }
.topo nav { display: flex; gap: 24px; margin-left: auto; }
.topo nav a { font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--claro-2); padding: 8px 0; }
.topo nav a:hover { color: var(--claro); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 6px; text-decoration-thickness: 2px; }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 6px; font-weight: 800; font-stretch: 80%; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: transform 200ms var(--mola); }
.botao:hover { transform: translateY(-2px) skewX(-4deg); }
.botao:active { transform: scale(0.97); }
.botao-coral { background: var(--coral); color: var(--indigo); }
.botao-contorno { border-color: var(--claro-2); color: var(--claro); background: transparent; }
.botao-escuro { background: var(--indigo); color: var(--claro); }
.botao-linha { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.topo .botao { min-height: 44px; padding: 0 18px; flex: none; }

/* Cabeças */
.cabeca { max-width: var(--largura); margin: 0 auto 44px; }
.cabeca h2 { font-weight: 800; font-stretch: 68%; text-transform: uppercase; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.88; max-width: 16ch; }
.cabeca p { margin-top: 16px; max-width: 58ch; color: var(--tinta-2); font-size: 1.125rem; }
.cabeca-clara p { color: var(--claro-2); }

/* Abertura */
.abertura { position: relative; display: grid; align-items: center; min-height: min(880px, calc(100svh - var(--faixa) - 69px)); padding: clamp(40px, 6vw, 80px) var(--margem); overflow: hidden; background: radial-gradient(90% 80% at 75% 50%, #2E2690 0%, var(--indigo) 65%); }
.cardume { position: absolute; inset: 0; width: 100%; height: 100%; animation: surgir-cardume 1.6s ease 0.2s both; }
@keyframes surgir-cardume { from { opacity: 0; } to { opacity: 1; } }
.abertura-texto { position: relative; z-index: 2; max-width: var(--largura); width: 100%; margin: 0 auto; pointer-events: none; }
.abertura-texto a, .abertura-texto .ao-vivo { pointer-events: auto; }
.ao-vivo { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: rgba(14, 12, 42, 0.55); font-size: 0.9375rem; animation: entra-esq 0.6s var(--mola) 0.2s both; }
.ao-vivo b { font-weight: 800; color: var(--agua); font-variant-numeric: tabular-nums; }
.ao-vivo small { color: var(--claro-2); }
.pulso { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.pulso::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--coral); animation: pulso 1.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
h1 { margin-top: 24px; font-weight: 800; font-stretch: 64%; text-transform: uppercase; font-size: clamp(4.25rem, 13vw, 12rem); line-height: 0.82; }
h1 span { display: block; animation: entra-esq 0.8s var(--suave) both; }
h1 span + span { color: var(--agua); animation-delay: 0.12s; padding-left: 0.4em; }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-60px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lead { margin-top: 26px; max-width: 46ch; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: #E8E6FF; animation: surgir 0.8s ease 0.45s both; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; animation: surgir 0.8s ease 0.6s both; }
.pausado, .pausado * { animation-play-state: paused !important; }

/* Ofertas */
.ofertas { padding: 0 0 clamp(72px, 9vw, 120px); background: var(--gelo); color: var(--tinta); overflow: hidden; }
.letreiro { padding: 26px 0; white-space: nowrap; }
.letreiro p { font-weight: 800; font-stretch: 62%; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px var(--indigo); }
.ofertas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.ofertas-lista li { padding: 30px 28px; border-radius: 8px; color: var(--indigo); }
.ofertas-lista li:nth-child(1) { background: var(--coral); }
.ofertas-lista li:nth-child(2) { background: var(--agua); }
.ofertas-lista li:nth-child(3) { background: var(--amarelo); }
.oferta-topo { font-weight: 700; font-size: 0.9375rem; }
.oferta-preco, .oferta-grande { margin: 8px 0 12px; font-weight: 800; font-stretch: 66%; font-size: 3.5rem; line-height: 0.95; text-transform: uppercase; }
.oferta-preco small { display: block; font-size: 0.875rem; font-stretch: 100%; font-style: normal; font-weight: 600; text-transform: none; }

/* Aulas ao vivo */
.aulas { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--indigo); }
.grade-filtros { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px 28px; max-width: var(--largura); margin: 0 auto 20px; padding: 20px 22px; border-radius: 14px; background: var(--indigo-2); }
.filtro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.filtro-largo { grid-column: 1 / -1; }
.filtro label, .filtro-rotulo { font-weight: 700; font-size: 0.8125rem; color: var(--claro-2); }
.filtro select { min-height: 46px; padding: 0 14px; border: 1px solid #5A52B8; border-radius: 8px; background: var(--indigo); color: var(--claro); }
.dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.dia { flex: none; min-width: 58px; min-height: 46px; padding: 4px 10px; border: 1px solid #5A52B8; border-radius: 8px; background: transparent; color: var(--claro); font-weight: 700; cursor: pointer; line-height: 1.1; }
.dia small { display: block; font-weight: 500; font-size: 0.6875rem; color: var(--claro-2); }
.dia[aria-selected="true"] { background: var(--agua); border-color: var(--agua); color: var(--indigo); }
.dia[aria-selected="true"] small { color: var(--indigo); }
.modalidades { display: flex; flex-wrap: wrap; gap: 6px; }
.mod { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #5A52B8; border-radius: 999px; background: transparent; color: var(--claro); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.mod::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--claro-2)); }
.mod[aria-pressed="true"] { background: var(--claro); color: var(--indigo); border-color: var(--claro); }
.grade-resumo { max-width: var(--largura); margin: 0 auto 18px; font-weight: 800; font-stretch: 75%; font-size: 1.5rem; text-transform: uppercase; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; max-width: var(--largura); margin: 0 auto; }
.aula { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; background: var(--indigo-2); border: 1px solid rgba(255, 255, 255, 0.08); animation: aula-entra 0.45s var(--mola) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes aula-entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.aula.agora { border-color: var(--coral); background: #2B1F86; }
.aula.passou { background: #1F1870; border-color: transparent; }
.aula.passou h3, .aula.passou .aula-hora { color: #B3AEEB; }
.aula.passou h3::before, .aula.passou .lotacao i { opacity: 0.45; }
.aula-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aula-hora { font-weight: 800; font-stretch: 70%; font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.aula-hora small { font-size: 0.875rem; font-stretch: 100%; font-style: normal; font-weight: 600; color: var(--claro-2); margin-left: 4px; }
.aula-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 0.75rem; background: rgba(255, 255, 255, 0.1); white-space: nowrap; }
.aula.agora .aula-estado { background: var(--coral); color: var(--indigo); }
.aula.agora .aula-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); animation: piscar 1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0.2; } }
.aula h3 { display: flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 78%; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.aula h3::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cor); }
.aula-sala { font-size: 0.875rem; color: var(--claro-2); }
.lotacao { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-size: 0.8125rem; }
.lotacao i { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lotacao i b { position: absolute; inset: 0; border-radius: inherit; background: var(--agua); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--suave), background-color 400ms ease; }
.lotacao[data-nivel="medio"] i b { background: var(--amarelo); }
.lotacao[data-nivel="alto"] i b { background: var(--coral); }
.lotacao span { color: var(--claro-2); }
.lotacao em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.aula-acoes { display: flex; gap: 8px; margin-top: 2px; }
.aula-acoes button { flex: 1; min-height: 42px; padding: 0 10px; border-radius: 8px; font-weight: 700; font-size: 0.875rem; cursor: pointer; }
.reservar { border: 0; background: var(--coral); color: var(--indigo); }
.reservar[disabled] { background: rgba(255, 255, 255, 0.12); color: var(--claro-2); cursor: default; }
.reservar.feita { background: var(--agua); }
.por-semana { border: 1px solid #6F68D0; background: transparent; color: var(--claro); }
.por-semana[aria-pressed="true"] { background: var(--claro); color: var(--indigo); border-color: var(--claro); }
.grade-vazia { grid-column: 1 / -1; padding: 40px; border-radius: 14px; background: var(--indigo-2); text-align: center; color: var(--claro-2); }

/* Monte sua semana */
.semana { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--gelo); color: var(--tinta); }
.semana-painel { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 2.2fr); gap: 24px; max-width: var(--largura); margin: 0 auto; align-items: start; }
.semana-resumo { position: sticky; top: calc(var(--faixa) + 84px); padding: 26px; border-radius: 16px; background: var(--claro); }
.semana-total { font-weight: 800; font-stretch: 70%; font-size: 2.25rem; line-height: 1; text-transform: uppercase; }
.semana-total b { font-size: 4rem; color: var(--coral-texto); }
.semana-total span { display: block; margin-top: 6px; font-size: 1.25rem; color: var(--tinta-2); }
.mistura { display: flex; height: 14px; margin: 18px 0; border-radius: 999px; overflow: hidden; background: var(--gelo-2); }
.mistura span { background: var(--cor); animation: brota 0.4s var(--mola) both; transform-origin: left; }
@keyframes brota { from { transform: scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.semana-aviso { font-size: 0.9375rem; color: var(--tinta-2); min-height: 3em; }
.semana-aviso.conflito { color: #B3261E; font-weight: 600; }
.semana-acoes { display: grid; gap: 10px; margin-top: 16px; }
.semana-acoes .botao { min-height: 46px; font-size: 0.9375rem; }
.semana-nota { margin-top: 10px; font-size: 0.8125rem; color: var(--tinta-2); }
.semana-nota:empty { display: none; }
.semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.semana-dia { min-height: 260px; padding: 10px; border-radius: 12px; background: var(--claro); }
.semana-dia h3 { font-weight: 800; font-stretch: 75%; font-size: 1.125rem; text-transform: uppercase; }
.semana-dia h3 small { display: block; font-weight: 500; font-stretch: 100%; font-size: 0.6875rem; color: var(--tinta-2); text-transform: none; }
.semana-dia.hoje h3 { color: var(--coral-texto); }
.semana-dia ul { display: grid; gap: 6px; margin-top: 10px; }
.bloco { position: relative; padding: 8px 30px 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--cor) 26%, white); font-size: 0.75rem; line-height: 1.3; animation: aula-entra 0.4s var(--mola) both; }
.bloco b { display: block; font-size: 0.8125rem; }
.bloco.choca { outline: 2px solid #B3261E; }
.bloco button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(14, 12, 42, 0.08); color: var(--tinta); cursor: pointer; font-size: 0.875rem; line-height: 1; }
.descanso { margin-top: 10px; font-size: 0.8125rem; color: var(--tinta-2); }

/* Planos */
.planos { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--indigo); }
.planos-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--largura); margin: 0 auto 20px; }
.alternador { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--indigo-2); }
.alternador button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--claro-2); font-weight: 800; font-stretch: 80%; text-transform: uppercase; cursor: pointer; }
.alternador button[aria-checked="true"] { background: var(--agua); color: var(--indigo); }
.so-dif { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.so-dif input { width: 20px; height: 20px; accent-color: var(--coral); }
.tabela-planos { max-width: var(--largura); margin: 0 auto; }
.tabela-planos table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tabela-planos thead th { padding: 22px 16px; vertical-align: bottom; text-align: left; }
.tabela-planos thead th:first-child { width: 34%; }
.plano { background: var(--indigo-2); border-radius: 16px 16px 0 0; }
.plano-destaque { background: var(--indigo-3); box-shadow: inset 0 4px 0 var(--coral); }
.plano-nome { display: block; font-weight: 800; font-stretch: 70%; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.plano-preco { display: block; margin-top: 10px; font-weight: 800; font-stretch: 72%; font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.plano-preco.virou { animation: virar 0.45s var(--mola) both; }
@keyframes virar { from { opacity: 0; transform: translateY(-14px) rotateX(60deg); } to { opacity: 1; transform: none; } }
.plano-per { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--claro-2); }
.tabela-planos tbody th { padding: 14px 16px 14px 0; text-align: left; font-weight: 500; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tabela-planos tbody td { padding: 14px 16px; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); background: var(--indigo-2); font-weight: 600; font-size: 0.9375rem; }
.tabela-planos tbody td:nth-child(3) { background: var(--indigo-3); }
.tabela-planos tbody tr { transition: opacity 300ms ease; }
.so-diferencas .igual { display: none; }
.so-diferencas tbody tr:not(.igual) { animation: surgir 0.35s ease both; }
td.sim::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--agua) url("check.svg") center / 14px no-repeat; vertical-align: middle; }
td.nao::before { content: ""; display: inline-block; width: 16px; height: 2px; background: #6F68D0; vertical-align: middle; }
.tabela-planos tfoot td { padding: 18px 12px; background: var(--indigo-2); border-radius: 0 0 16px 16px; }
.tabela-planos tfoot td:first-child { background: none; }
.tabela-planos tfoot td:nth-child(3) { background: var(--indigo-3); }
.escolher { width: 100%; min-height: 46px; padding: 0 10px; font-size: 0.9375rem; }
.planos-nota { max-width: var(--largura); margin: 18px auto 0; font-size: 0.875rem; color: var(--claro-2); }

/* Diferenciais */
.diferenciais { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--gelo); color: var(--tinta); }
.dif-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: var(--largura); margin: 0 auto; }
.dif-marca { display: block; margin-bottom: 14px; font-weight: 800; font-stretch: 62%; font-size: 4rem; line-height: 0.9; color: var(--coral-texto); }
.dif-lista h3 { font-weight: 800; font-stretch: 80%; font-size: 1.375rem; text-transform: uppercase; line-height: 1.05; }
.dif-lista p { margin-top: 8px; color: var(--tinta-2); }

/* Como funciona */
.como { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--indigo-2); }
.passos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: var(--largura); margin: 0 auto; padding-top: 30px; counter-reset: passo; }
.passos::before, .passos::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.passos::after { background: linear-gradient(90deg, var(--agua), var(--coral)); transform-origin: left; }
.passos li { counter-increment: passo; }
.passos li::before { content: counter(passo); display: block; font-weight: 800; font-stretch: 62%; font-size: 4rem; line-height: 1; color: var(--agua); }
.passos h3 { margin-top: 6px; font-weight: 800; font-stretch: 80%; font-size: 1.375rem; text-transform: uppercase; }
.passos p { margin-top: 8px; color: var(--claro-2); }

/* Unidades */
.unidades { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--indigo); }
.unidades-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: var(--largura); margin: 0 auto; }
.unidade { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 14px; background: var(--indigo-2); border-top: 4px solid var(--agua); }
.unidade h3 { font-weight: 800; font-stretch: 72%; font-size: 1.75rem; text-transform: uppercase; line-height: 1; }
.unidade address { font-style: normal; font-size: 0.875rem; }
.unidade p { font-size: 0.875rem; color: var(--claro-2); }
.lotacao-mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: auto; font-size: 0.75rem; }
.lotacao-mini span { color: var(--claro-2); }
.lotacao-mini i { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.lotacao-mini b { position: absolute; inset: 0; background: var(--agua); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--suave); }
.lotacao-mini em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Perguntas */
.perguntas { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--gelo); color: var(--tinta); }
.perguntas .cabeca, .faq { max-width: 880px; }
.faq { margin: 0 auto; }
.faq details { border-bottom: 2px solid var(--gelo-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 800; font-stretch: 78%; font-size: 1.375rem; text-transform: uppercase; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--indigo); color: var(--claro); font-size: 1.5rem; transition: transform 260ms var(--mola); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--coral); color: var(--indigo); }
.resposta { padding: 0 52px 20px 0; color: var(--tinta-2); }
.faq details[open] .resposta { animation: surgir 0.35s ease both; }

/* Chamada */
.chamada { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 150px) var(--margem); background: var(--coral); color: var(--indigo); }
.chamada-cardume { position: absolute; inset: -10% -30%; background: url("cardume-fundo.svg") 0 0 / 240px auto repeat; }
.chamada-texto { position: relative; max-width: var(--largura); margin: 0 auto; }
.chamada h2 { font-weight: 800; font-stretch: 66%; text-transform: uppercase; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.9; max-width: 14ch; }
.chamada p { margin-top: 14px; font-size: 1.125rem; font-weight: 500; }
.chamada-numero { font-weight: 800; font-stretch: 72%; font-size: clamp(2.5rem, 6vw, 4rem) !important; line-height: 1; margin-top: 22px !important; }
.chamada .botao { margin-top: 22px; background: var(--indigo); color: var(--claro); }
.aviso-whats { font-size: 0.9375rem !important; font-weight: 600 !important; }
.aviso-whats:empty { display: none; }

/* Rodapé */
.rodape { padding: 72px var(--margem) 40px; background: var(--tinta); color: var(--claro-2); font-size: 0.9375rem; }
.rodape-colunas { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; max-width: var(--largura); margin: 0 auto; }
.rodape h2 { margin-bottom: 14px; font-weight: 800; font-stretch: 80%; font-size: 1rem; text-transform: uppercase; color: var(--claro); }
.rodape li + li, .rodape-colunas p + p { margin-top: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--claro); text-decoration: underline; }
.rodape-nome { font-weight: 800; font-stretch: 66%; font-size: 2.75rem; line-height: 1; text-transform: uppercase; color: var(--claro); margin-bottom: 12px; }
.rodape-legal { max-width: var(--largura); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; }
.rodape-legal p + p { margin-top: 6px; }

/* Movimento ligado à rolagem (igual no celular). Sem suporte, o JS usa IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .abertura-texto { animation: texto-sai linear forwards; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes texto-sai { to { transform: translateY(-14%) skewY(-3deg); opacity: 0.2; } }
    .letreiro p { animation: letreiro linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes letreiro { from { transform: translateX(4%); } to { transform: translateX(-38%); } }
    .ofertas-lista li { animation: oferta-entra linear forwards; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .ofertas-lista li:nth-child(2) { animation-range: entry 8% entry 95%; }
    .ofertas-lista li:nth-child(3) { animation-range: entry 16% entry 100%; }
    @keyframes oferta-entra { from { transform: translateY(80px) rotate(3deg); opacity: 0; } to { transform: none; opacity: 1; } }
    .semana-dia { animation: dia-sobe linear forwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .semana-dia:nth-child(2n) { animation-range: entry 6% entry 90%; }
    @keyframes dia-sobe { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
    .plano, .tabela-planos tfoot td:not(:first-child) { animation: plano-sobe linear forwards; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes plano-sobe { from { transform: translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
    .dif-marca { animation: marca-entra linear forwards; animation-timeline: view(); animation-range: entry 10% entry 100%; }
    @keyframes marca-entra { from { transform: translateX(-40px) skewX(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
    .passos::after { animation: trilho linear forwards; animation-timeline: view(); animation-range: entry 30% cover 60%; }
    @keyframes trilho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .unidade { animation: oferta-entra linear forwards; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .unidade:nth-child(2n) { animation-range: entry 8% entry 95%; }
    .chamada-cardume { animation: nado linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes nado { from { transform: translateX(-8%); } to { transform: translateX(14%); } }
    .faq details { animation: marca-entra linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
.sem-timeline [data-revela] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.8s var(--suave); }
.sem-timeline [data-revela].visto { opacity: 1; transform: none; }
.sem-timeline .passos::after { transform: scaleX(0); transition: transform 1.2s var(--suave) 0.2s; }
.sem-timeline .passos.visto::after { transform: scaleX(1); }

/* Responsivo */
@media (max-width: 1140px) {
  .topo nav { display: none; }
  .topo .botao { margin-left: auto; }
  .unidades-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .semana-painel { grid-template-columns: 1fr; }
  .semana-resumo { position: static; }
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ofertas-lista, .dif-lista { grid-template-columns: 1fr; }
  .dif-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .semana-dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .unidades-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-filtros { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .marca-nome { font-size: 1.5rem; }
  .marca-nome small { display: none; }
  .topo { gap: 12px; }
  .topo .botao { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; }
  .ao-vivo { font-size: 0.8125rem; }
  .grade { grid-template-columns: 1fr; }
  .semana-dias { grid-template-columns: 1fr 1fr; }
  .semana-dia { min-height: 0; }
  .dif-lista, .passos, .unidades-lista { grid-template-columns: 1fr; }
  .tabela-planos thead th { padding: 14px 6px; }
  .tabela-planos thead th:first-child { width: 31%; }
  .plano-nome { font-size: 1.375rem; }
  .plano-preco { font-size: 1.375rem; }
  .plano-per { font-size: 0.6875rem; }
  .tabela-planos tbody th { font-size: 0.8125rem; padding-right: 6px; }
  .tabela-planos tbody td { padding: 12px 4px; font-size: 0.75rem; }
  .escolher { font-size: 0.75rem; padding: 0 4px; min-height: 42px; }
  .tabela-planos tfoot td { padding: 12px 4px; }
  .rodape-colunas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}