/* Interagir Centro de Treinamento
   Cores do brand kit: laranja #E67D1E, amarelo #FFD500, cinzas #5E6368 / #A7AAB0 / #D9D9D9 / #EDEDED */

:root {
  --laranja: #E67D1E;
  --laranja-forte: #D96A0A;
  --laranja-texto: #9A4A06;   /* laranja com contraste suficiente para texto pequeno */
  --laranja-claro: #FFF1E3;
  --amarelo: #FFD500;
  --amarelo-claro: #FFF8D6;
  --tinta: #FFF9F2;
  --texto: #1F2124;
  --cinza: #5E6368;
  --cinza-medio: #A7AAB0;
  --linha: #EEE8E0;
  --borda: #8A8F96;   /* contorno de campos e botões: 3:1 sobre o branco */
  --branco: #FFFFFF;
  --zap: #147A3E;
  --zap-forte: #0F6331;

  --fonte-titulo: "Outfit", system-ui, sans-serif;
  --fonte: "Figtree", system-ui, sans-serif;

  --raio: 24px;
  --raio-p: 14px;
  --largura: 1180px;
  --sombra: 0 1px 2px rgba(31,33,36,.04), 0 12px 32px -12px rgba(31,33,36,.14);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--laranja-texto); text-underline-offset: 3px; }
a:hover { color: var(--texto); }
:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--amarelo); color: var(--texto); }
html { accent-color: var(--laranja); caret-color: var(--laranja-texto); }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--texto); color: #fff; padding: 10px 14px; z-index: 100; border-radius: 8px; }
.pular:focus { left: 8px; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fonte); font-weight: 700; font-size: 1rem;
  padding: 15px 24px; border-radius: 999px; border: 0;
  text-decoration: none; cursor: pointer; line-height: 1.1;
  transition: transform .25s var(--mola), box-shadow .25s ease, background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.botao .seta { display: inline-block; transition: transform .25s var(--mola); }
.botao:hover .seta { transform: translateX(4px); }
.botao--laranja { background: var(--laranja); color: var(--texto); box-shadow: 0 8px 20px -10px rgba(230,125,30,.9); }
.botao--laranja:hover { background: var(--amarelo); color: var(--texto); box-shadow: 0 12px 26px -10px rgba(230,170,0,.9); }
.botao--suave { background: var(--branco); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borda), var(--sombra); }
.botao--suave:hover { color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--laranja), var(--sombra); }
.botao--zap { background: var(--zap); color: #fff; box-shadow: 0 8px 20px -10px rgba(20,122,62,.7); }
.botao--zap:hover { background: var(--zap-forte); color: #fff; }
.botao--pequeno { padding: 10px 16px; font-size: .95rem; }
.botao--grande { width: 100%; padding: 18px 24px; font-size: 1.08rem; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: box-shadow .25s ease;
}
.topo.rolou { box-shadow: 0 1px 0 var(--linha); }
.topo__in { max-width: var(--largura); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.marca__simbolo { width: 42px; transition: transform .4s var(--mola); }
.marca:hover .marca__simbolo { transform: rotate(-10deg) scale(1.06); }
.marca__nome { width: 140px; }
.menu { display: flex; gap: 4px; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .97rem; padding: 8px 14px; border-radius: 999px; transition: background-color .2s ease; }
.menu a:hover { background: var(--laranja-claro); color: var(--texto); }


/* ---------- abertura ---------- */
.abertura { background: linear-gradient(180deg, var(--tinta), var(--branco)); overflow: hidden; }
.abertura__in {
  max-width: var(--largura); margin: 0 auto; padding: 48px 20px 88px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
}
.abertura h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); font-weight: 800; }
.grifo { background: linear-gradient(transparent 58%, var(--amarelo) 58%, var(--amarelo) 92%, transparent 92%); padding: 0 .08em; border-radius: 4px; }
.abertura__sub { font-size: 1.2rem; max-width: 30em; margin: 22px 0 30px; color: #484b50; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; }
.atalhos__rotulo { font-size: .92rem; color: var(--cinza); margin-right: 4px; }
.atalho {
  border: 0; background: var(--branco); cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .93rem;
  box-shadow: inset 0 0 0 1.5px var(--borda);
  transition: transform .25s var(--mola), background-color .2s ease, box-shadow .2s ease;
}
.atalho:hover { transform: translateY(-2px); background: var(--amarelo-claro); box-shadow: inset 0 0 0 1px var(--amarelo); }
.atalho:active { transform: scale(.95); }

.abertura__visual { position: relative; }
.abertura__visual::before {
  content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--amarelo); top: -9%; right: -12%; z-index: 0; opacity: .9;
}
.abertura__foto {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 5 / 5.4; object-fit: cover; object-position: 40% 50%;
  border-radius: 36px; box-shadow: var(--sombra);
}

/* "Hoje no CT" */
.agora {
  position: absolute; z-index: 2; left: -48px; bottom: -44px; width: 300px;
  background: var(--branco); border-radius: 20px; padding: 18px 20px 16px;
  box-shadow: 0 2px 4px rgba(31,33,36,.05), 0 24px 48px -18px rgba(31,33,36,.3);
}
.agora__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.agora h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.agora__data { color: var(--cinza); font-size: .88rem; text-transform: capitalize; }
.agora__status { margin: 6px 0 10px; font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.agora__status .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cinza-medio); flex: none; }
.agora__status.aberto .ponto { background: var(--zap); animation: pulsa 2s ease-out infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.45); } 100% { box-shadow: 0 0 0 9px rgba(31,168,85,0); } }
.agora__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agora__lista li { display: flex; gap: 10px; align-items: center; font-size: .93rem; padding: 7px 10px; background: var(--tinta); border-radius: 10px; }
.agora__lista .h { font-family: var(--fonte-titulo); font-weight: 700; min-width: 46px; }
.agora__lista .vazio { color: var(--cinza); }
.agora__kid { margin: 10px 0 0; font-size: .88rem; color: var(--cinza); }

/* ---------- blocos ---------- */
.bloco { padding: 96px 0; }
.bloco--tinta { background: var(--tinta); }
.bloco__in { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.bloco__cab { max-width: 640px; margin-bottom: 40px; }
.bloco__cab h2, .exp h2, .chegar h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; }
.bloco__cab p:not(.selo) { margin: 12px 0 0; color: #484b50; font-size: 1.15rem; }
.nota { font-size: .95rem; color: var(--cinza); margin-top: 20px; max-width: 60em; }

.cartao { background: var(--branco); border-radius: var(--raio); padding: 28px; box-shadow: var(--sombra); }
.cartao h3 { font-size: 1.45rem; font-weight: 700; margin-bottom: 8px; }

/* entrada suave ao rolar */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.aparece.visivel { opacity: 1; transform: none; }

/* ---------- chips ---------- */
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span {
  display: block; padding: 12px 18px; border-radius: var(--raio-p);
  background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--borda);
  font-weight: 600; line-height: 1.2; position: relative;
  transition: transform .25s var(--mola), box-shadow .2s ease, background-color .2s ease;
}
.chip small { display: block; font-weight: 500; color: var(--cinza); font-size: .84rem; margin-top: 3px; }
.chip:hover span { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--cinza-medio); }
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--laranja-claro); box-shadow: inset 0 0 0 2px var(--laranja-texto); }
.chip input:checked + span::after {
  content: ""; position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--laranja); color: var(--branco); font-size: .75rem; font-weight: 800;
  animation: pop .35s var(--mola);
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.chip input:focus-visible + span { outline: 3px solid var(--texto); outline-offset: 3px; }

/* ---------- achador de plano ---------- */
.achador { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
.achador fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.achador legend { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--amarelo); color: var(--texto);
  display: inline-grid; place-items: center; font-size: .95rem; font-weight: 800;
}
.achador .nota { margin: 0; }

.resultado {
  position: sticky; top: 96px;
  background: var(--branco); border-radius: var(--raio); padding: 28px;
  box-shadow: var(--sombra); border: 1.5px solid var(--linha);
  transition: border-color .3s ease;
}
.resultado.cheio { border-color: var(--laranja); }
.resultado h3 { font-size: 1.7rem; font-weight: 800; }
.resultado .vazio-msg { color: var(--cinza); margin: 6px 0 0; }
.resultado__vazio { display: grid; justify-items: center; text-align: center; padding: 20px 0; }
.resultado__vazio img { width: 96px; margin-bottom: 14px; opacity: .9; }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.resultado .bonus { background: var(--laranja-claro); padding: 12px 14px; border-radius: 12px; font-size: .95rem; margin: 0 0 18px; }
.resultado .botao { width: 100%; }
.resultado .pagto { font-size: .85rem; color: var(--cinza); margin: 12px 0 0; text-align: center; }

.tabela-completa { margin-top: 44px; }
.tabela-completa summary {
  cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; background: var(--tinta); list-style: none;
  transition: background-color .2s ease;
}
.tabela-completa summary::-webkit-details-marker { display: none; }
.tabela-completa summary::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M7 2v10M2 7h10%27 stroke=%27%231F2124%27 stroke-width=%272%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--mola); }
.tabela-completa[open] summary::after { transform: rotate(45deg); }
.tabela-completa summary:hover { background: var(--laranja-claro); }
.tabela-rolagem { overflow-x: auto; margin-top: 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linha); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .98rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: .85rem; color: var(--cinza); font-weight: 600; background: var(--tinta); }
td:nth-child(n+3), th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--tinta); }

/* ---------- horários ---------- */
.grade__dias {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  background: var(--branco); padding: 6px; border-radius: 20px; box-shadow: var(--sombra);
}
.dia {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.1rem;
  padding: 12px 4px; border-radius: 14px; position: relative;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--mola);
  -webkit-tap-highlight-color: transparent;
}
.dia small { display: block; font-family: var(--fonte); font-size: .72rem; font-weight: 600; color: var(--laranja-texto); }
.dia:hover { background: var(--tinta); }
.dia:active { transform: scale(.94); }
.dia[aria-pressed="true"] { background: var(--laranja); color: var(--texto); box-shadow: inset 0 0 0 2px var(--laranja-texto); }
.dia[aria-pressed="true"] small { color: var(--texto); }
.grade__filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
.filtro {
  border: 0; background: var(--branco); border-radius: 999px; cursor: pointer;
  padding: 8px 16px; font-weight: 600; font-size: .95rem;
  box-shadow: inset 0 0 0 1.5px var(--borda);
  transition: transform .25s var(--mola), background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.filtro:hover { transform: translateY(-2px); }
.filtro:active { transform: scale(.95); }
.filtro[aria-pressed="true"] { background: var(--laranja); color: var(--texto); box-shadow: inset 0 0 0 2px var(--laranja-texto); }
.grade__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grade__lista li {
  display: grid; grid-template-columns: 112px 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 14px 14px 22px; background: var(--branco); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,33,36,.04);
  transition: transform .25s var(--mola), box-shadow .2s ease;
}
.grade__lista .h { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.grade__lista .mod { font-weight: 600; }
.grade__lista .tag { font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #F1F1F2; color: var(--cinza); }
.grade__lista .tag--agua { background: #E5F2FB; color: #1F5C86; }
.grade__lista .tag--salao { background: var(--laranja-claro); color: var(--laranja-texto); }
.grade__lista .tag--kids { background: var(--amarelo-claro); color: #6B5800; }
.grade__lista .h small { display: block; font-family: var(--fonte); font-size: .78rem; font-weight: 500; color: var(--cinza); letter-spacing: 0; }
.grade__lista .mod small { display: block; font-size: .82rem; font-weight: 500; color: var(--cinza); }
.grade__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -6px 0 18px; }
.grade__turnos { display: inline-flex; gap: 4px; padding: 4px; background: var(--branco); border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--borda); }
.turno {
  border: 0; background: transparent; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font-weight: 600; font-size: .92rem; transition: background-color .2s ease, color .2s ease, transform .25s var(--mola);
}
.turno:hover { background: var(--tinta); }
.turno:active { transform: scale(.95); }
.turno[aria-pressed="true"] { background: var(--laranja); color: var(--texto); box-shadow: inset 0 0 0 2px var(--laranja-texto); }
.grade__resumo { margin: 0; font-size: .92rem; color: var(--cinza); font-weight: 600; }
.grade__lista .quero {
  font-size: .88rem; font-weight: 700; text-decoration: none; color: var(--zap-forte);
  padding: 8px 14px; border-radius: 999px; background: #E7F7EE;
  transition: background-color .2s ease, color .2s ease, transform .25s var(--mola);
}
.grade__lista .quero:hover { background: var(--zap); color: #fff; transform: scale(1.05); }
.grade__lista .passou > span { color: var(--cinza); }
.grade__lista .passou .h { text-decoration: line-through; text-decoration-thickness: 2px; }
.grade__lista .vazio { grid-template-columns: 1fr; color: var(--cinza); }
.grade__lista .destacar { animation: brilha 1.4s ease; }
@keyframes brilha { 0%, 60% { box-shadow: 0 0 0 3px var(--amarelo); } 100% { box-shadow: 0 1px 2px rgba(31,33,36,.04); } }

/* ---------- aulas ---------- */
.aulas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.aulas__lado { display: grid; gap: 24px; }
.cartao--agua { background: linear-gradient(180deg, #F0F7FC, var(--branco) 40%); }
.lista-aulas { margin: 8px 0 0; }
.lista-aulas > div { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.lista-aulas > div:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-aulas dt { font-weight: 700; font-size: 1.08rem; }
.lista-aulas dd { margin: 2px 0 0; color: #484b50; }
.idade { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--laranja-texto); background: var(--laranja-claro); padding: 1px 8px; border-radius: 999px; margin-right: 8px; }
.cartao--kid { background: var(--amarelo); box-shadow: 0 16px 32px -18px rgba(200,160,0,.8); }
.cartao--kid p { margin: 6px 0 0; }
.kid__hora { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.kid__hora span { background: rgba(255,255,255,.65); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .93rem; }

/* ---------- o que levar ---------- */
.levar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.levar .cartao { transition: transform .3s var(--mola); }
.check { margin: 10px 0 0; padding: 0; list-style: none; }
.check li { padding: 7px 0 7px 32px; position: relative; }
.check li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--laranja-claro); color: var(--laranja-texto); font-size: .75rem; font-weight: 800;
}

/* ---------- aula experimental ---------- */
.exp {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
  background: var(--laranja-claro); border-radius: 36px; padding: 56px;
}
.exp__texto p:not(.selo) { font-size: 1.15rem; color: #484b50; max-width: 26em; margin: 14px 0 0; }

.exp__form { background: var(--branco); border-radius: var(--raio); padding: 28px; display: grid; gap: 20px; box-shadow: var(--sombra); }
.exp__form > label, .campo { display: grid; gap: 8px; font-weight: 700; }
.exp__form input[type="text"], .exp__form select {
  font: 500 1.05rem var(--fonte); padding: 14px 16px; border-radius: var(--raio-p);
  border: 0; box-shadow: inset 0 0 0 1.5px var(--borda); background: var(--branco); color: var(--texto); width: 100%;
  transition: box-shadow .2s ease;
  appearance: none; -webkit-appearance: none;
}
.exp__form select { background-image: linear-gradient(45deg, transparent 50%, var(--cinza) 50%), linear-gradient(135deg, var(--cinza) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.exp__form input[type="text"]:focus, .exp__form select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--texto); }
.exp__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.exp__grupo legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.exp__grupo .chip span { padding: 10px 16px; }


/* ---------- como chegar ---------- */
.chegar { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: stretch; }
.chegar__bairro { font-size: 1.15rem; margin: 8px 0 24px; color: #484b50; }
.chegar__botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.contatos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.contatos dt { font-size: .88rem; color: var(--cinza); font-weight: 600; }
.contatos dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.contatos > div:nth-child(1), .contatos > div:nth-child(3) { grid-column: 1 / -1; }
.contatos > div:nth-child(3) { order: 4; }
.chegar__mapa { min-height: 400px; border-radius: var(--raio); overflow: hidden; background: var(--linha); box-shadow: var(--sombra); }
.chegar__mapa iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

/* ---------- rodapé ---------- */
.rodape { padding: 56px 0 110px; border-top: 1px solid var(--linha); }
.rodape__in { max-width: var(--largura); margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.rodape__logo { width: 150px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.rodape nav a { color: var(--texto); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: background-color .2s ease; }
.rodape nav a:hover { background: var(--tinta); }
.rodape__copy { font-size: .9rem; color: var(--cinza); margin: 0; width: 100%; }

/* ---------- barra fixa no celular ---------- */
.barra-celular { display: none; }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .abertura__in, .achador, .aulas, .exp, .chegar { grid-template-columns: 1fr; }
  .abertura__in { gap: 40px; padding-top: 28px; padding-bottom: 48px; }
  .abertura__foto { aspect-ratio: 16 / 10; border-radius: 28px; }
  .abertura__visual::before { width: 50%; top: -6%; right: -8%; }
  .agora { position: relative; }
  .resultado { position: static; }
  .exp { padding: 36px 28px; gap: 32px; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .topo__in { padding: 10px 16px; }
  .marca__simbolo { width: 36px; }
  .marca__nome { width: 118px; }
  .topo__zap { display: none; }
  .abertura__in, .bloco__in, .rodape__in { padding-left: 16px; padding-right: 16px; }
  .abertura__sub { font-size: 1.08rem; }
  .abertura__acoes .botao { flex: 1 1 100%; }
  .atalhos { margin-top: 26px; }
  .atalhos__rotulo { width: 100%; }
  .bloco { padding: 64px 0; }
  .cartao { padding: 22px 18px; }
    .resultado { padding: 22px 16px; }
  .grade__dias { gap: 2px; padding: 4px; border-radius: 16px; }
  .dia { font-size: 1rem; padding: 10px 2px; border-radius: 12px; }
  .grade__lista .h { white-space: nowrap; }
  .grade__filtros { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .grade__filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
  .grade__turnos { width: 100%; }
  .turno { flex: 1; padding: 8px 4px; }
  .grade__lista li { grid-template-columns: 58px 1fr auto; gap: 10px; padding: 8px 8px 8px 12px; }
  .grade__lista .tag { display: none; }
  .grade__lista .h { font-size: 1.1rem; }
  .grade__lista .h small { font-size: .72rem; }
  .grade__lista .mod { font-size: .95rem; line-height: 1.25; }
  .grade__lista .mod::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--cor-tipo, var(--cinza-medio)); }
  .grade__lista .quero { padding: 8px 12px; font-size: .85rem; }
  .exp { padding: 28px 16px; border-radius: 28px; margin: 0 -4px; }
  .exp__form { padding: 22px 16px; }
  .chegar__botoes .botao { flex: 1 1 100%; }
  .contatos { grid-template-columns: 1fr; }
  .chegar__mapa, .chegar__mapa iframe { min-height: 300px; }

  .barra-celular {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linha);
  }
  .barra-celular a { text-align: center; padding: 14px 10px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .15s ease; }
  .barra-celular a:active { transform: scale(.96); }
  .barra-celular__chegar { box-shadow: inset 0 0 0 1.5px var(--borda); color: var(--texto); background: var(--branco); }
  .barra-celular__zap { background: var(--zap); color: #fff; }
}

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

.exp__aviso { font-size: 1rem !important; background: var(--branco); padding: 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- ícones de check desenhados ---------- */
.chip input:checked + span::after { background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231F2124' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.check li::before { background: var(--laranja-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%239A4A06' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- área de toque de 44px ---------- */
.atalho, .filtro, .turno { min-height: 44px; }
.grade__lista .quero { min-height: 44px; display: inline-flex; align-items: center; }
.chip span { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.rodape nav a { min-height: 44px; display: inline-flex; align-items: center; }
.topo .botao--zap { min-height: 44px; }
.marca { padding-block: 9px; }
.tabela-completa summary { min-height: 44px; }

/* ---------- Hoje no CT ---------- */
.agora__sub { font-family: var(--fonte); font-size: .8rem; font-weight: 700; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }

/* ---------- grade: aulas que já passaram e sugestões ---------- */
.grade__passadas {
  border: 0; background: transparent; cursor: pointer; min-height: 44px; padding: 0 4px; margin-bottom: 6px;
  font-weight: 600; font-size: .93rem; color: var(--laranja-texto); text-decoration: underline; text-underline-offset: 3px;
}
.grade__passadas:hover { color: var(--texto); }
.grade__lista .vazio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 18px 20px; color: var(--texto); }
.vazio__dica { width: 100%; color: var(--cinza); font-size: .93rem; }
.vazio__dia {
  border: 0; cursor: pointer; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--laranja-claro); color: var(--texto); font-weight: 600; font-size: .93rem;
  transition: transform .25s var(--mola), background-color .2s ease;
}
.vazio__dia:hover { background: var(--amarelo-claro); transform: translateY(-2px); }

/* ---------- formulário da aula experimental ---------- */
.campo__erro { margin: 0; color: #B3261E; font-weight: 600; font-size: .95rem; }
.campo__erro:empty, .exp__ok:empty { display: none; }
.exp__form input[aria-invalid="true"], .exp__form input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px #B3261E; }
.exp__ok { margin: 0; padding: 12px 14px; border-radius: 12px; background: #E3F4EA; color: #0F4F27; font-weight: 600; }
.exp__ok a { color: #0F4F27; }

/* ---------- menu ---------- */
.menu-botao { display: none; }
@media (max-width: 1024px) {
  .menu { display: none; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--tinta); font-weight: 700; cursor: pointer;
  }
  .menu-botao[aria-expanded="true"] { background: var(--laranja); }
  .menu.aberto {
    display: grid; position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px max(16px, env(safe-area-inset-left, 0px)) 16px;
    background: var(--branco); box-shadow: 0 18px 32px -18px rgba(31,33,36,.35); border-bottom: 1px solid var(--linha);
  }
  .menu.aberto a { min-height: 48px; display: flex; align-items: center; font-size: 1.05rem; padding: 0 12px; }
  .topo__in { position: relative; }
  .menu.aberto .menu__zap { display: flex; color: var(--zap-forte); font-weight: 700; }
}
@media (max-width: 760px) {
  /* a faixa de filtros desliza: as bordas esmaecem para mostrar que tem mais */
  .grade__filtros { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}

/* títulos com quebras de linha equilibradas; o grifo não se parte */
h1, h2, h3 { text-wrap: balance; }
.grifo { white-space: nowrap; }

/* ---------- resultado do plano: mensal em destaque ---------- */
.resultado__escolha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; color: var(--cinza); font-size: .93rem; font-weight: 600; }
.resultado__trocar { border: 0; background: none; padding: 0 2px; min-height: 44px; color: var(--laranja-texto); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.selos span { font-size: .85rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #F1F1F2; color: var(--texto); }
.mensal { margin: 0 0 18px; font-size: 1.05rem; color: var(--cinza); font-weight: 600; }
.mensal .valor { font-family: var(--fonte-titulo); font-size: 2.6rem; font-weight: 800; color: var(--texto); letter-spacing: -.02em; line-height: 1; }
.outros__tit { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--texto); }
.outros { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linha); }
.outros li { display: grid; grid-template-columns: 92px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .93rem; }
.outros .per { font-weight: 700; }
.outros .det small { color: var(--cinza); font-size: .82rem; }
.outros .eco { font-size: .78rem; font-weight: 700; color: #0F4F27; background: #E3F4EA; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 420px) { .outros li { grid-template-columns: 1fr auto; } .outros .det { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- "Pra quem é?" em duas colunas ---------- */
#op-quem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- grade: barra de dias fixa, avisos e estados ---------- */
.grade__fixa { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 5; display: grid; gap: 6px; }
@media (max-width: 760px) { .grade__fixa { top: calc(env(safe-area-inset-top, 0px) + 64px); } }
.grade__abertos { display: grid; gap: 6px; margin-bottom: 8px; }
.grade__aberto { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--branco); font-size: .93rem; color: var(--cinza); box-shadow: inset 0 0 0 1px var(--linha); }
.grade__aberto strong { color: var(--texto); }
.tipo--agua { --cor-tipo: #2A7AB8; }
.tipo--salao { --cor-tipo: var(--laranja); }
.tipo--kids { --cor-tipo: #C9A400; }
.quero--agora, .quero--passou { background: transparent !important; color: var(--cinza) !important; font-weight: 600 !important; transform: none !important; }
.quero--agora { color: var(--texto) !important; background: #F1F1F2 !important; }

/* ---------- formulário: períodos sem aula ficam desativados ---------- */
.exp__dica { width: 100%; font-size: .88rem; color: var(--cinza); }
.exp__dica:empty { display: none; }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; box-shadow: inset 0 0 0 1.5px var(--linha); }
.chip input:disabled { cursor: not-allowed; }

/* ---------- celular: a barra fixa sai da frente de outro botão de WhatsApp ---------- */
@media (max-width: 760px) {
  .barra-celular { transition: transform .25s ease; }
  body.sem-barra .barra-celular { transform: translateY(110%); }
}

/* o atributo hidden sempre vence o layout */
[hidden] { display: none !important; }

/* ---------- filtro ativo na barra fixa ---------- */
.grade__ativo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 14px; background: var(--amarelo-claro); box-shadow: 0 6px 16px -10px rgba(31,33,36,.35); font-size: .93rem; }
.grade__ativo:empty { display: none; }
.grade__limpar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--borda); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.grade__limpar:hover { background: var(--tinta); }

/* ---------- aula experimental visível onde a pessoa decide ---------- */
.gratis {
  display: inline-flex; align-items: center; min-height: 24px; margin-left: 8px; padding: 0 8px; border-radius: 999px;
  background: #E3F4EA; color: #0F4F27; font-size: .76rem; font-weight: 700; text-decoration: none; vertical-align: 1px;
}
.gratis:hover { background: #C9EBD6; color: #0F4F27; }
.grade__aberto a { color: #0F4F27; font-weight: 700; }
.resultado__gratis {
  display: flex; align-items: center; min-height: 44px; margin: -6px 0 14px; padding: 0 14px; border-radius: 12px;
  background: #E3F4EA; color: #0F4F27; font-weight: 700; font-size: .93rem; text-decoration: none;
}
.resultado__gratis:hover { background: #C9EBD6; color: #0F4F27; }

/* ---------- "trocar" só no celular, onde as perguntas ficam longe ---------- */
@media (min-width: 961px) { .resultado__trocar { display: none; } }

/* ---------- legenda das cores da grade (só no celular, onde as etiquetas somem) ---------- */
.grade__legenda { display: none; }
@media (max-width: 760px) {
  .grade__legenda { display: flex; gap: 12px; margin: 0; font-size: .82rem; color: var(--cinza); }
  .grade__legenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--cor-tipo); }
  .gratis { margin-left: 0; margin-top: 4px; }
  .grade__lista .mod .gratis { display: flex; width: max-content; }
}
.vazio__dia--claro { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--borda); }
.quero--passou { color: var(--cinza) !important; }

/* a barra fixa cobre o que rola por baixo dela, de ponta a ponta */
.grade__fixa { background: var(--tinta); margin-inline: -20px; padding: 6px 20px; }
@media (max-width: 760px) { .grade__fixa { margin-inline: -16px; padding-inline: 16px; } }

/* ---------- "aula experimental" ganha o amarelo da marca; verde fica só para WhatsApp ---------- */
.gratis { position: relative; background: var(--amarelo-claro); color: #5C4A00; box-shadow: inset 0 0 0 1px #E5C200; }
.gratis:hover { background: var(--amarelo); color: var(--texto); }
.gratis::after { content: ""; position: absolute; inset: -10px -6px; } /* área de toque de 44px sem aumentar a etiqueta */
.grade__aberto a { color: #5C4A00; }
.resultado__gratis { background: var(--amarelo-claro); color: #5C4A00; box-shadow: inset 0 0 0 1px #E5C200; justify-content: space-between; gap: 10px; }
.resultado__gratis::after { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%235C4A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--mola); }
.resultado__gratis:hover { background: var(--amarelo); color: var(--texto); }
.resultado__gratis:hover::after { transform: translateX(4px); }

/* ---------- do plano para os horários ---------- */
.resultado__horarios {
  width: 100%; min-height: 44px; margin: 0 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--borda); font-weight: 700; font-size: .95rem; color: var(--texto);
  transition: background-color .2s ease;
}
.resultado__horarios:hover { background: var(--tinta); }

/* ---------- "Hoje no CT": cada aula leva à grade ---------- */
.agora__lista li { padding: 0; background: none; }
.agora__item {
  width: 100%; display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 7px 10px; border: 0; border-radius: 10px;
  background: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease;
}
.agora__item:hover { background: var(--amarelo-claro); }

/* ---------- menu e filtros no celular ---------- */
.menu__zap { display: none; }
.grade__deslize { display: none; }
@media (max-width: 760px) {
  .grade__deslize { display: flex; align-items: center; gap: 6px; margin: 14px 0 -10px; font-size: .85rem; color: var(--cinza); }
}

/* ---------- celular: "Hoje no CT" logo abaixo dos botões, antes dos atalhos e da foto ---------- */
@media (max-width: 960px) {
  .abertura__in { display: flex; flex-direction: column; gap: 0; }
  .abertura__texto, .abertura__visual { display: contents; }
  .agora { order: 1; margin: 26px 0 0; }
  .atalhos { order: 2; }
  .abertura__visual picture { order: 3; display: block; margin-top: 28px; }
}

/* ---------- rodapé com endereço, horário e WhatsApp ---------- */
.rodape__nap { font-style: normal; display: grid; gap: 4px; width: 100%; color: var(--cinza); font-size: .95rem; }
.rodape__nap a { color: var(--zap-forte); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 960px) {
  .agora { width: auto; align-self: stretch; left: auto; bottom: auto; }
  .abertura__visual::before { display: none; }
}

/* ---------- acabamento ---------- */
.menu a { white-space: nowrap; }

/* botões da grade com a mesma largura: as etiquetas Piscina/Área fitness ficam alinhadas */
.grade__lista .quero { min-width: 112px; justify-content: center; }
@media (max-width: 760px) { .grade__lista .quero { min-width: 96px; } }

/* empilhado (tablet e celular): conteúdo alinhado à esquerda, sem centralizar */
@media (max-width: 960px) {
  .abertura__in { align-items: stretch; }
  .abertura__sub, .abertura__acoes, .atalhos { align-self: flex-start; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .abertura__acoes .botao { flex: 0 0 auto; }
}

/* rodapé no celular: logo, links, endereço e direitos um embaixo do outro */
@media (max-width: 760px) {
  .rodape__in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rodape nav { flex: none; margin-inline: -12px; }
}

/* ---------- robustez ---------- */
/* nomes de aula longos quebram linha em vez de empurrar a grade para fora da tela */
.grade__lista li > * { min-width: 0; }
.grade__lista .mod { overflow-wrap: anywhere; }
/* se a foto não carregar, fica um bloco neutro no lugar */
.abertura__foto { background: var(--linha); }
/* aviso para quem está sem JavaScript */
.semjs { margin: 0 0 24px; padding: 14px 16px; border-radius: 14px; background: var(--amarelo-claro); font-weight: 600; }
/* alto contraste do Windows: sombras somem, então o estado vira borda de verdade */
@media (forced-colors: active) {
  .chip span, .filtro, .turno, .dia, .atalho, .botao, .grade__limpar, .resultado__horarios, .exp__form input[type="text"], .exp__form select { border: 1px solid CanvasText; }
  .chip input:checked + span, .filtro[aria-pressed="true"], .turno[aria-pressed="true"], .dia[aria-pressed="true"] { border: 3px solid Highlight; }
  .chip input:disabled + span { border-style: dashed; }
  .gratis, .tag, .selos span, .resultado__gratis { border: 1px solid CanvasText; }
}
.botao[aria-disabled="true"] { opacity: .7; cursor: progress; }

/* ---------- área Redes sociais (o item do menu leva até aqui) ---------- */
.redes { width: 100%; display: grid; gap: 10px; scroll-margin-top: 90px; }
.redes h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.redes__icones { display: flex; gap: 8px; margin-left: -8px; }
.redes__link {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  color: var(--cinza); transition: color .2s ease, background-color .2s ease, transform .25s var(--mola);
}
.redes__link:hover { color: var(--laranja-texto); background: var(--tinta); transform: translateY(-2px); }
.redes__arroba { margin: 0; font-weight: 600; color: var(--texto); }