/* Tonus House — Assessoria de Corrida
   Mesma casa do hub (noite, vermelho e a luz azul da academia), agora na rua:
   a página é um percurso do ponto A ao ponto B. */

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

  --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;

  --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)));
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

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

body {
  position: relative;
  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, ol, figure { margin: 0; }
ul, ol { 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, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* marco invisível: passou dele, a pessoa começou a rolar */
.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

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

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

main > section { scroll-margin-top: 8px; }

/* ---------- Largada ---------- */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero-midia { position: relative; }

.hero-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 64vh;
  max-height: 64svh;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--superficie);
}

/* o topo escurece para o logo; a base dissolve na noite, onde o título entra */
.hero-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(14 12 43 / 0.62) 0%,
    rgb(14 12 43 / 0) 24%,
    rgb(14 12 43 / 0) 60%,
    rgb(14 12 43 / 0.82) 88%,
    var(--noite) 100%);
  pointer-events: none;
}

.hero-logo {
  position: absolute;
  z-index: 1;
  top: calc(18px + var(--safe-top));
  left: var(--gutter);
  width: 112px;
}

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

.hero-titulo {
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: clamp(38px, 12.2vw, 52px);
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.hero-titulo span { display: block; }

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

.hero-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 8px;
}

.hero-atalhos a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--motion-fast) var(--ease-standard);
}

.hero-atalhos a:active { text-decoration-color: var(--branco); }
.hero-atalhos .ico { font-size: 13px; color: var(--azul-texto); }

@media (prefers-reduced-motion: no-preference) {
  .hero-titulo,
  .hero-apoio,
  .hero-atalhos { animation: entra var(--motion-emphasis) var(--ease-enter) both; }
  .hero-apoio { animation-delay: 70ms; }
  .hero-atalhos { animation-delay: 140ms; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-titulo,
  .hero-apoio,
  .hero-atalhos { animation: entra-fade var(--motion-standard) linear both; }
}

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

/* ---------- Cenas em coluna ---------- */

.origem,
.travas,
.como,
.canais,
.comunidade,
.duvidas { padding: 72px var(--lado) 0; }

.origem { padding-top: 56px; }

.origem-destaque {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
  max-width: 26em;
}

.origem .lead { margin-top: 14px; }

/* ---------- O que te trava ---------- */

.travas-lista {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.trava {
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: var(--superficie);
}

.trava:focus-visible { outline-offset: 2px; }

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

.trava-hoje,
.trava-muda { margin-top: 14px; }

.trava-hoje { color: var(--nevoa); font-size: 15.5px; }

.trava-hoje span,
.trava-muda span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.trava-muda {
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 17px;
  line-height: 1.45;
}

.trava-muda .ico { font-size: 13px; color: var(--vermelho); }

/* Com JavaScript vira seletor: um chip por trava e um painel por vez.
   Os painéis ficam empilhados na mesma célula, então a altura não pula na troca. */
.travas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.chip {
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  font: 600 15px/1.25 var(--f-texto);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.chip:active { transform: scale(0.96); border-color: var(--branco); }

.chip[aria-selected="true"] {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--noite);
}

.is-abas .travas-lista { display: grid; margin-top: 14px; }

.is-abas .trava {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--shift-sm));
  transition:
    opacity var(--motion-fast) var(--ease-exit),
    transform var(--motion-fast) var(--ease-exit),
    visibility 0s linear var(--motion-fast);
}

.is-abas .trava.is-ativa {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--motion-standard) var(--ease-enter) var(--motion-instant),
    transform var(--motion-standard) var(--ease-enter) var(--motion-instant),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .is-abas .trava,
  .is-abas .trava.is-ativa { transition: none; }
}

/* ---------- Como funciona: a rota ----------
   Uma linha tracejada liga o ponto A ao ponto B. Conforme a pessoa rola,
   o vermelho percorre a linha e cada etapa acende quando é alcançada.
   Sem suporte a scroll-driven ou com "reduzir movimento", a rota já aparece completa. */

.rota {
  position: relative;
  margin-top: 32px;
  view-timeline: --rota block;
}

.rota::before,
.rota::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  border-radius: 2px;
}

.rota::before {
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.28) 0 8px, transparent 8px 16px);
}

.rota::after {
  background: var(--vermelho);
  transform-origin: top;
}

.marco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--vermelho);
  border-radius: 50%;
  background: var(--vermelho);
  color: var(--branco);
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}

.rota-ponta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 17px;
}

.rota-etapas {
  display: grid;
  gap: 30px;
  margin: 30px 0;
}

.etapa {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}

.etapa-nome {
  padding-top: 7px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 116;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
}

.etapa p {
  margin-top: 6px;
  color: var(--nevoa);
  font-size: 15.5px;
}

@keyframes rota-enche { from { transform: scaleY(0); } }

@keyframes marco-acende {
  from {
    background-color: var(--noite);
    border-color: rgb(255 255 255 / 0.32);
    transform: scale(0.88);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rota::after {
      animation: rota-enche linear both;
      animation-timeline: --rota;
      animation-range: cover 40vh cover calc(100% - 60vh);
    }

    /* a etapa acende quando o centro dela cruza 60% da altura da tela */
    .etapa .marco,
    .rota-ponta--b .marco {
      animation: marco-acende linear both;
      animation-timeline: view();
      animation-range: cover calc(40vh + 6px) cover calc(40vh + 34px);
    }
  }
}

/* ---------- Dois tipos de acompanhamento ---------- */

.canais-painel {
  margin-top: 26px;
  padding: 4px 20px;
  border-radius: 20px;
  background: var(--superficie);
}

.canal {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
}

.canal + .canal { border-top: 1px solid var(--linha); }

.canal-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(43 59 255 / 0.24);
  color: var(--azul-texto);
  font-size: 20px;
}

.canal-nome {
  padding-top: 2px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 116;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
}

.canal-papel {
  margin-top: 2px;
  color: var(--azul-texto);
  font-size: 14.5px;
  font-weight: 600;
}

.canal-papel + p {
  margin-top: 8px;
  color: var(--nevoa);
  font-size: 15.5px;
}

.canal-lista {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
}

.canal-lista li { display: flex; align-items: baseline; gap: 10px; }
.canal-lista .ico { font-size: 12px; color: var(--vermelho); transform: translateY(1px); }

.canais-frase {
  margin-top: 40px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-size: clamp(24px, 6.8vw, 30px);
  line-height: 1.14;
  max-width: 15em;
  text-wrap: balance;
}

/* ---------- Comunidade: duas fotos sobrepostas ---------- */

.comunidade-fotos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-bottom: 72px;
}

.foto-podio,
.foto-bandeira {
  grid-row: 1;
  width: 100%;
  object-fit: cover;
  background: var(--superficie);
}

.foto-podio {
  grid-column: 1 / 10;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
}

.foto-bandeira {
  grid-column: 7 / 13;
  align-self: end;
  aspect-ratio: 1;
  border: 5px solid var(--noite);
  border-radius: 18px;
  transform: translateY(52px);
}

/* ---------- Planos: a cena clara, a luz do dia ---------- */

.planos {
  margin-top: 88px;
  padding: 64px var(--lado) 56px;
  background: var(--gelo);
  color: var(--noite);
}

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

.plano--destaque {
  margin-top: 28px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  background:
    radial-gradient(110% 70% at 100% 0%, rgb(43 59 255 / 0.38), rgb(43 59 255 / 0) 62%),
    var(--noite);
  color: var(--branco);
}

.plano--destaque :focus-visible { outline-color: var(--branco); }

.plano-selo {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(237 28 36 / 0.18);
  color: var(--vermelho-claro);
  font-size: 14px;
  font-weight: 600;
}

.plano-nome {
  margin-top: 12px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}

.plano-preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 10px;
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plano-moeda {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
}

.plano-periodo {
  font-family: var(--f-texto);
  font-size: 16px;
  font-weight: 600;
  color: var(--nevoa);
}

.plano-detalhes {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  color: var(--nevoa);
  font-size: 15px;
}

.plano-detalhes b { color: var(--branco); }
.plano-detalhes b,
.plano-detalhes s { white-space: nowrap; }
.plano-detalhes s { margin-left: 4px; }

.plano--destaque .btn { margin-top: 20px; }

.plano:not(.plano--destaque) {
  margin-top: 12px;
  padding: 18px 20px 20px;
  border: 1px solid rgb(14 12 43 / 0.1);
  border-radius: 18px;
  background: var(--branco);
}

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

.plano-topo .plano-nome { margin-top: 0; font-size: 20px; }

.plano-preco--linha {
  display: block;
  margin-top: 0;
  font-size: 20px;
}

.plano-txt {
  margin-top: 6px;
  color: var(--tinta-clara);
  font-size: 15px;
}

.planos-aluno {
  margin-top: 24px;
  padding: 16px 20px 8px;
  border-radius: 16px;
  background: rgb(43 59 255 / 0.08);
  color: var(--tinta-clara);
  font-size: 15px;
}

.planos-aluno b { color: var(--noite); }

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

.link-acao .ico { font-size: 19px; }

.planos-garantia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  color: var(--tinta-clara);
  font-size: 14.5px;
}

.planos-garantia .ico { font-size: 20px; margin-top: 1px; color: var(--azul-luz); }
.planos-garantia b { color: var(--noite); }

/* ---------- Dúvidas ---------- */

.faq {
  margin-top: 20px;
  border-top: 1px solid var(--linha);
}

.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .ico {
  font-size: 15px;
  color: var(--azul-texto);
  transition: rotate var(--motion-standard) var(--ease-standard);
}

.faq details[open] summary .ico { rotate: 45deg; }

.faq-resposta {
  display: grid;
  gap: 10px;
  max-width: 34em;
  padding-bottom: 20px;
  color: var(--nevoa);
}

.faq-resposta a {
  color: var(--branco);
  font-weight: 600;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq-resposta { animation: entra var(--motion-standard) var(--ease-enter); }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary .ico { transition: none; }
}

/* ---------- Botões ---------- */

.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-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:active { background: var(--vermelho-press); }
.btn-principal .ico { font-size: 22px; }

.btn-contorno {
  width: 100%;
  margin-top: 14px;
  border: 2px solid var(--noite);
  background: transparent;
  color: var(--noite);
  font-family: var(--f-titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 17px;
}

.btn-contorno:active { background: rgb(14 12 43 / 0.07); }

/* ---------- Chegada: a luz vermelha fecha a página ---------- */

.final {
  display: grid;
  justify-items: start;
  margin-top: 8px;
  padding: 64px 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 .lead { margin-bottom: 24px; }

.final-nota {
  margin-top: 14px;
  color: var(--nevoa);
  font-size: 14px;
}

/* O botão final 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)); }
}

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

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

.rodape-hub {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 10px;
  color: var(--branco);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 5px;
}

.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; }
}

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

/* ---------- Barra que aparece ao rolar ----------
   Escondida no topo; surge depois do primeiro scroll, some enquanto os planos
   estão na tela e de vez quando o botão final aparece. */

.barra {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 20;
  display: flex;
  gap: 10px;
  width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter));
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard);
}

.barra.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--motion-emphasis) var(--ease-enter),
    translate var(--motion-emphasis) var(--ease-enter),
    visibility 0s;
}

.barra-planos {
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  box-shadow: 0 14px 34px -12px rgb(211 18 26 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.barra-planos span {
  margin-top: 3px;
  font-family: var(--f-texto);
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
}

.barra-whats {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--superficie);
  color: var(--branco);
  font-size: 24px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 12px 28px -12px rgb(0 0 0 / 0.7);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.barra-whats:active { transform: scale(0.94); background: var(--marinho); }

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

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

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

@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: rgb(255 255 255 / 0.6); }
  .chip[aria-selected="true"]:hover { border-color: var(--branco); }
  .btn-contorno:hover { background: rgb(14 12 43 / 0.05); }
}