/* Tonus House — BIO PRIME
   Duas luzes: o azul e o vermelho que iluminam a academia e o logo. */

:root {
  --noite: #0E0C2B;
  --superficie: #18164A;
  --marinho: #231E60;
  --vermelho: #ED1C24;
  --vermelho-acao: #D3121A;
  --vermelho-press: #B30E15;
  --azul-luz: #2B3BFF;
  --azul-texto: #8C94FF;
  --branco: #FFFFFF;
  --nevoa: #B4B3D6;
  --gelo: #F2F2F8;
  --tinta-clara: #4A4775;
  --linha: rgb(255 255 255 / 0.09);

  --f-titulo: "Saira", "Arial Black", system-ui, sans-serif;
  --f-texto: "Onest", "Segoe UI", Roboto, Arial, sans-serif;

  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --shift-sm: 8px;
  --shift-md: 12px;
  --press-scale: 0.98;
  --push-in: 1.04;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --maxw: 560px;
  --gutter: 20px;
  --lado: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --cupula: 50% 50% 16px 16px / 38% 38% 16px 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --shift-md: 0px;
    --press-scale: 1;
    --push-in: 1;
    --motion-scene: 200ms;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 3px;
  border-radius: 6px;
}

a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.titulo {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(26px, 7.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead {
  margin-top: 10px;
  color: var(--nevoa);
  max-width: 34em;
}

.secao-topo { padding-inline: var(--lado); }

/* ---------- Hero ---------- */

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* A Hero ocupa a primeira tela inteira: nenhum botão de contato aparece na primeira dobra. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--maxw);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
}

.hero-foto {
  position: relative;
  height: 62vh;
  height: min(115vw, 62svh);
  min-height: 360px;
  flex: 1 0 auto;
  overflow: hidden;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 20%;
}

.hero-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgb(14 12 43 / 0) 0%, rgb(14 12 43 / 0.75) 55%, var(--noite) 100%);
  pointer-events: none;
}

.hero-texto {
  position: relative;
  z-index: 1;
  margin-top: -96px;
  padding: 0 var(--gutter) 20px;
}

.hero-logo {
  width: 148px;
  height: auto;
  margin-bottom: 18px;
}

.hero-titulo {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(30px, 9vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.hero-titulo .linha { display: block; }

.hero-apoio {
  margin-top: 14px;
  color: var(--nevoa);
  font-size: 17px;
  max-width: 30em;
}

.hero-ancoras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 12px;
}

.hero-ancoras a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast) var(--ease-standard);
}

.hero-ancoras a .ico { font-size: 13px; color: var(--azul-texto); }
.hero-ancoras a:active { color: var(--nevoa); }

@media (prefers-reduced-motion: no-preference) {
  .hero-foto img { animation: hero-push 900ms var(--ease-enter) both; }
  .hero-titulo .linha,
  .hero-apoio,
  .hero-ancoras { animation: hero-linha var(--motion-emphasis) var(--ease-enter) both; }
  .hero-titulo .linha:nth-child(1) { animation-delay: 120ms; }
  .hero-titulo .linha:nth-child(2) { animation-delay: 180ms; }
  .hero-titulo .linha:nth-child(3) { animation-delay: 240ms; }
  .hero-titulo .linha:nth-child(4) { animation-delay: 300ms; }
  .hero-apoio { animation-delay: 360ms; }
  .hero-ancoras { animation-delay: 420ms; }
}

@keyframes hero-push { from { transform: scale(var(--push-in)); } }
@keyframes hero-linha { from { opacity: 0; transform: translateY(var(--shift-md)); } }

/* ---------- Caminhos: academia (noite) ou online (dia) ---------- */

.caminhos {
  display: grid;
  gap: 14px;
  padding: 56px var(--lado) 0;
}

.caminhos .titulo { margin-bottom: 8px; }

.caminho {
  display: grid;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.caminho:active { transform: scale(var(--press-scale)); }

.caminho--academia {
  background: var(--superficie);
  box-shadow: 0 18px 40px -22px rgb(43 59 255 / 0.7);
}

.caminho--online {
  background: var(--gelo);
  color: var(--marinho);
}

.caminho--online:focus-visible { outline-color: var(--branco); }

.caminho-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 40%;
}

.caminho-corpo {
  display: grid;
  gap: 6px;
  padding: 18px 18px 20px;
}

.caminho-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  fill: var(--vermelho-acao);
}

.caminho-onde {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
}

.caminho-txt { color: var(--nevoa); font-size: 15px; line-height: 1.5; }
.caminho--online .caminho-txt { color: var(--tinta-clara); }

.caminho-acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  width: fit-content;
  font-weight: 600;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: var(--azul-luz);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness var(--motion-fast) var(--ease-standard);
}

.caminho--academia .caminho-acao { text-decoration-color: var(--azul-texto); }
.caminho--online .caminho-acao { text-decoration-color: var(--vermelho-acao); }
.caminho-acao .ico { font-size: 14px; }

.caminho-url { font-size: 13px; color: var(--nevoa); }
.caminho--online .caminho-url { color: var(--tinta-clara); }

/* ---------- Modalidades: a troca de luz ---------- */

.modalidades {
  position: relative;
  padding-top: 72px;
  overflow: clip;
}

.palco {
  position: relative;
  width: min(100% - 4 * var(--gutter), 360px);
  margin: 28px auto 0;
}

.luz {
  position: absolute;
  inset: -16% -26% -10%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--motion-scene) var(--ease-standard);
  pointer-events: none;
}

.luz--vermelha { background: radial-gradient(closest-side, rgb(237 28 36 / 0.75), rgb(237 28 36 / 0.42) 52%, rgb(237 28 36 / 0.14) 76%, transparent); }
.luz--azul { background: radial-gradient(closest-side, rgb(43 59 255 / 0.8), rgb(43 59 255 / 0.45) 52%, rgb(43 59 255 / 0.15) 76%, transparent); }

.modalidades[data-luz="vermelha"] .luz--vermelha,
.modalidades[data-luz="azul"] .luz--azul { opacity: 1; }

.palco-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--cupula);
  overflow: hidden;
  background: var(--superficie);
}

.palco-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(var(--push-in));
  transition:
    opacity var(--motion-scene) var(--ease-standard),
    transform 700ms var(--ease-enter);
}

.palco-foto img.is-ativa {
  opacity: 1;
  transform: none;
}

.abas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: min(100% - 2 * var(--gutter), 400px);
  margin: 20px auto 0;
  padding: 5px;
  background: var(--superficie);
  border-radius: 14px;
}

.abas[hidden] { display: none; }

.aba {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nevoa);
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.aba:active { transform: scale(0.96); }
.aba[aria-selected="true"] { color: var(--branco); }
.aba[aria-selected="true"][data-luz="vermelha"] { background: var(--vermelho-acao); }
.aba[aria-selected="true"][data-luz="azul"] { background: var(--azul-luz); }

.paineis {
  position: relative;
  display: grid;
  gap: 28px;
  padding: 22px var(--lado) 0;
}

.painel-nome {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
}

.painel p {
  margin-top: 8px;
  color: var(--nevoa);
}

.painel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .painel:not([hidden]) { animation: painel-entra var(--motion-standard) var(--ease-enter) both; }
}

@keyframes painel-entra { from { opacity: 0; transform: translateY(var(--shift-sm)); } }

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 6px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--vermelho);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.link-acao .ico { font-size: 18px; }
.link-acao:active { color: var(--nevoa); }

/* ---------- Resultados ---------- */

.resultados { padding-top: 80px; }

.trilho,
.galeria {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-inline: var(--lado);
  scroll-padding-inline: var(--lado);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.trilho::-webkit-scrollbar,
.galeria::-webkit-scrollbar { display: none; }

.historia {
  flex: 0 0 min(80%, 340px);
  scroll-snap-align: start;
}

.historia-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
}

.historia-foto img { width: 100%; height: 100%; object-fit: cover; }

.tag {
  position: absolute;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(14 12 43 / 0.78);
  font-size: 13px;
  font-weight: 600;
}

.tag--antes { left: 10px; }
.tag--depois { left: calc(50% + 10px); }

.historia figcaption {
  display: grid;
  gap: 6px;
  padding-top: 14px;
}

.historia-nome {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 20px;
}

.historia-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.historia-numeros b {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 19px;
  color: var(--vermelho);
}

.historia q {
  color: var(--nevoa);
  font-size: 15px;
}

/* Apresentação automática: o ponto ativo enche no tempo de cada história e,
   ao encher, o carrossel passa para a próxima. Pausar o carrossel pausa a barra. */
.trilho-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-inline: var(--lado);
}

.trilho-controles[hidden] { display: none; }

.pontos { display: flex; }

.ponto {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width var(--motion-standard) var(--ease-standard);
}

.ponto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.28);
  transition: width var(--motion-standard) var(--ease-standard);
}

.ponto[aria-current="true"] { width: 52px; }
.ponto[aria-current="true"]::before {
  width: 38px;
  background:
    linear-gradient(var(--vermelho), var(--vermelho)) left / var(--progresso) 100% no-repeat,
    rgb(255 255 255 / 0.28);
}

@property --progresso {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.ponto.is-contando::before { animation: ponto-enche var(--intervalo, 4500ms) linear both; }
.trilho-controles.is-pausado .ponto.is-contando::before { animation-play-state: paused; }

@keyframes ponto-enche {
  from { --progresso: 0%; }
  to { --progresso: 100%; }
}

.trilho-pausa {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.trilho-pausa[hidden] { display: none; }
.trilho-pausa:active { transform: scale(0.94); border-color: var(--branco); }
.trilho-pausa .ico-play,
.trilho-pausa[aria-pressed="true"] .ico-pausa { display: none; }
.trilho-pausa[aria-pressed="true"] .ico-play { display: block; }

/* ---------- Casa ---------- */

.casa { padding-top: 80px; }

.galeria li {
  flex: 0 0 min(86%, 380px);
  scroll-snap-align: start;
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--superficie);
}

.galeria figcaption {
  padding-top: 10px;
  font-size: 14px;
  color: var(--nevoa);
}

.comodidades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-top: 28px;
  padding-inline: var(--lado);
  font-size: 15px;
  line-height: 1.35;
}

.comodidades li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.comodidades .ico {
  font-size: 18px;
  color: var(--azul-texto);
  margin-top: 1px;
}

/* ---------- Visita (estática de propósito) ---------- */

.visita {
  display: grid;
  gap: 20px;
  margin-top: 80px;
  padding: 40px var(--lado) 48px;
  border-top: 1px solid var(--linha);
}

.visita-bloco {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}

.visita-ico {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  fill: var(--azul-texto);
}

.visita address { font-style: normal; font-size: 17px; line-height: 1.5; }

.horarios { display: grid; gap: 6px; font-size: 16px; }
.horarios div { display: flex; justify-content: space-between; gap: 12px; }
.horarios dt { color: var(--nevoa); }
.horarios dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.visita-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.btn:active { transform: scale(var(--press-scale)); }

.btn-claro { background: var(--branco); color: var(--marinho); }
.btn-claro:active { background: #DCDCEA; }

.btn-contorno { border: 1.5px solid rgb(255 255 255 / 0.4); }
.btn-contorno:active,
.btn-contorno[aria-expanded="true"] { border-color: var(--branco); background: rgb(255 255 255 / 0.06); }

.mapa {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
}

.mapa[hidden] { display: none; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Online: a cena de dia ---------- */

.online {
  padding: 64px var(--lado) 56px;
  background: var(--gelo);
  color: var(--marinho);
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
}

.online .lead { color: var(--tinta-clara); }
.online :focus-visible { outline-color: var(--marinho); }

.pilares {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.pilares li {
  padding-left: 16px;
  border-left: 3px solid var(--vermelho-acao);
  line-height: 1.45;
}

.pilares strong {
  display: block;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 18px;
}

.online-mods {
  margin-top: 22px;
  color: var(--tinta-clara);
}

.planos-titulo {
  margin-top: 36px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 22px;
}

.planos {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.plano {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 16px;
  background: var(--branco);
  border-radius: 14px;
  border: 2px solid transparent;
}

.plano--destaque { border-color: var(--marinho); }

.plano-info { display: grid; gap: 2px; }

.plano-nome {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}

.plano-selo {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--vermelho-acao);
}

.plano-detalhe { font-size: 14px; color: var(--tinta-clara); line-height: 1.4; }

.plano-preco {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}

.plano-preco small {
  font-family: var(--f-texto);
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 13px;
}

.plano-link {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 10px;
  border-radius: 12px;
  background: var(--marinho);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.plano-link:active { transform: scale(var(--press-scale)); background: #16123F; }

.garantia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 15px;
}

.garantia .ico { font-size: 18px; color: var(--vermelho-acao); }

.online-links {
  display: grid;
  margin-top: 20px;
}

.online-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  width: fit-content;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.online-links .ico { font-size: 15px; }

/* ---------- CTA final: a luz vermelha fecha a visita ---------- */

.final {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 72px var(--lado) 64px;
  background:
    radial-gradient(120% 70% at 50% 110%, rgb(237 28 36 / 0.38), rgb(237 28 36 / 0.08) 55%, transparent 75%),
    var(--noite);
}

.final-marca {
  width: 112px;
  margin-bottom: 22px;
  opacity: 0.92;
}

.final .lead { margin-bottom: 24px; }

.btn-principal {
  width: 100%;
  min-height: 56px;
  background: var(--vermelho-acao);
  color: var(--branco);
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 14px 32px -14px rgb(237 28 36 / 0.7);
}

.btn-principal .ico { font-size: 22px; }

/* O botão de agendar só existe aqui, no fim, e entra quando a pessoa chega até ele. */
@media (prefers-reduced-motion: no-preference) {
  .js .btn-principal[data-revela] {
    opacity: 0;
    transform: translateY(var(--shift-md));
    transition:
      opacity var(--motion-emphasis) var(--ease-enter),
      transform var(--motion-emphasis) var(--ease-enter),
      background-color var(--motion-fast) var(--ease-standard);
  }
  .js .btn-principal[data-revela].is-in { opacity: 1; transform: none; }
  .js .btn-principal[data-revela].is-in:active { transform: scale(var(--press-scale)); }
}
.btn-principal:active { background: var(--vermelho-press); }

.final-sec {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 8px;
  color: var(--nevoa);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 24px var(--lado) calc(28px + var(--safe-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--nevoa);
  border-top: 1px solid var(--linha);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: #D9D8EE;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--vermelho);
  --seal-ring: 0;
  --seal-font: var(--f-texto);
  flex: none;
  width: 68px;
  height: 68px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* ---------- Botão de agendar que aparece ao rolar ----------
   Escondido no topo, surge depois do primeiro scroll e some quando o botão final entra na tela. */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 20;
  width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter));
  translate: -50% 18px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 14px 34px -12px rgb(211 18 26 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08);
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    visibility 0s linear var(--motion-standard);
}

.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--motion-emphasis) var(--ease-enter),
    translate var(--motion-emphasis) var(--ease-enter),
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
}

/* ---------- Telas largas: a coluna continua sendo a do celular ---------- */

@media (min-width: 600px) {
  .hero-foto { border-radius: 0 0 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

@media (hover: hover) and (pointer: fine) {
  .caminho:hover .caminho-acao { text-decoration-thickness: 3px; }
  .aba:hover { color: var(--branco); }
  .plano-link:hover { background: #2D2778; }
}