/* ==========================================================================
   Moraes Fit — versão clara e direta.
   Sem framework, sem build: um HTML, um CSS, um JS.

   A direção do outro site era escura e espacial (3D em toda seção). Esta é o
   contrário: papel off-white, tipografia grande, fotos em grade e movimento só
   onde ele explica alguma coisa — entrada de seção, troca de foto, troca de dia.
   Toda transição anima apenas transform, opacity ou clip-path.
   ========================================================================== */

/* ------------------------------- fontes --------------------------------- */
@font-face {
  font-family: Anybody;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(fontes/anybody-latin.woff2) format('woff2');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: Anybody;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(fontes/anybody-latin-ext.woff2) format('woff2');
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(fontes/martian-latin.woff2) format('woff2');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(fontes/martian-latin-ext.woff2) format('woff2');
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}

/* Figtree: sans neutra para todo o texto corrido, botões e menus.
   Anybody fica só nos títulos; Martian Mono só em números (preço, horário). */
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fontes/figtree-latin.woff2) format('woff2');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fontes/figtree-latin-ext.woff2) format('woff2');
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}

/* ------------------------------- tokens --------------------------------- */
:root {
  --f-texto: Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-titulo: Anybody, 'Arial Black', Arial, sans-serif;
  --ink: #0b0b0b;
  --ash: #151514;
  --coal: #1f1f1d;
  --paper: #f2f0ec;
  --bone: #e4e1da;
  --acid: #a6e22e;
  --acid-escuro: #4a6a10; /* verde legível sobre o off-white (AA) */

  --fio: color-mix(in srgb, var(--ink) 14%, transparent);
  --fio-claro: color-mix(in srgb, var(--paper) 15%, transparent);

  --gutter: clamp(1.15rem, 4vw, 4rem);
  --largura: 1320px;
  --topo: 72px;

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
}
/* tudo que é título continua na Anybody */
.titulo,
.oferta,
.oferta__fim,
.marca__nome,
.modalidade__nome,
.estrutura__item figcaption strong,
.aula__nome,
.plano__nome,
.sdo-titulo,
.sdo-carta h3,
.sdo-metodo figcaption strong,
.sdo-lista li {
  font-family: var(--f-titulo);
}

p {
  margin: 0;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--acid);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--acid-escuro);
  outline-offset: 3px;
}

/* texto só para leitor de tela e buscadores (não aparece na tela) */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pular {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 0.25s var(--curva);
}
.pular:focus-visible {
  transform: none;
}

.largura {
  width: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}

/* ---------------------------- tipografia -------------------------------- */
.titulo {
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.titulo--gigante {
  font-variation-settings: 'wdth' 118;
  font-size: clamp(2.9rem, 1rem + 8.4vw, 7.4rem);
  letter-spacing: -0.035em;
}

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0.82;
}

.rotulo--acid {
  color: var(--acid-escuro);
  opacity: 1;
}


.num {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-variation-settings: 'wdth' 90;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ponto--aberto {
  background: var(--acid-escuro);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acid-escuro) 60%, transparent);
  animation: pulsar 2.4s ease-out infinite;
}
.secao--escura .ponto--aberto,
.rodape .ponto--aberto,
.hero .ponto--aberto {
  background: var(--acid);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acid) 60%, transparent);
}
@keyframes pulsar {
  70% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ------------------------------- botões --------------------------------- */
.botao {
  --cor: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6ch;
  min-height: 46px;
  padding: 0.85rem 1.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform 0.4s var(--suave),
    background-color 0.3s var(--curva),
    color 0.3s var(--curva),
    border-color 0.3s var(--curva);
}
.botao span {
  transition: transform 0.4s var(--suave);
}
.botao:hover {
  transform: translateY(-2px);
}
.botao:hover span {
  transform: translate(2px, -2px);
}
.botao:active {
  transform: translateY(0);
}

.botao--grande {
  min-height: 56px;
  padding: 1rem 1.7rem;
  font-size: 1.04rem;
}

.botao--acid {
  background: var(--acid);
  color: var(--ink);
}
.botao--acid:hover {
  background: #b6f03c;
}

.botao--escuro {
  background: var(--ink);
  color: var(--paper);
}
.botao--escuro:hover {
  background: var(--coal);
}

.botao--contorno {
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
  color: var(--paper);
}
.botao--contorno:hover {
  background: var(--paper);
  color: var(--ink);
}

.botao--contorno-escuro {
  border-color: var(--fio);
  color: var(--ink);
}
.botao--contorno-escuro:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ----------------------------- cabeçalho -------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--paper);
  transition:
    background-color 0.45s var(--curva),
    color 0.45s var(--curva),
    box-shadow 0.45s var(--curva);
}
.cabecalho__interno {
  width: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
  height: var(--topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: height 0.45s var(--curva);
}
.cabecalho.compacto {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--fio);
}
/* sem JavaScript a classe .compacto nunca entra: o cabeçalho já nasce com
   fundo claro pra não sumir em cima das seções claras */
html:not(.js) .cabecalho {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--fio);
}
.cabecalho.compacto .cabecalho__interno {
  height: 62px;
}

.cabecalho__progresso {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.4s var(--curva);
}
.cabecalho.compacto .cabecalho__progresso {
  opacity: 1;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.marca__losango {
  flex: none; /* nunca espremer a marca quando o cabeçalho aperta */
  width: 30px;
  height: 30px;
  color: var(--acid);
  transition: transform 0.6s var(--suave);
}
.marca:hover .marca__losango {
  transform: rotate(90deg);
}
.marca__nome {
  white-space: nowrap;
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.navegacao {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
}
.navegacao a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s var(--curva);
}
.navegacao a i {
  font-style: normal;
  color: var(--acid);
  transition: color 0.3s var(--curva);
}
.cabecalho.compacto .navegacao a i {
  color: var(--acid-escuro);
}
.navegacao a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--suave);
}
.navegacao a:hover,
.navegacao a[aria-current] {
  opacity: 1;
}
/* seção atual: o fio fica aceso (o chip do Studio não entra — ele leva a outra página) */
.navegacao a[href^='#'][aria-current]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.navegacao a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* -------------------------------- hero ---------------------------------- */
/* Oferta à esquerda e as fotos reais da academia passando como stories à
   direita. No celular as fotos viram o fundo do topo e a oferta sobe por cima,
   no ponto em que a foto já se dissolveu no preto. */
.hero {
  position: relative;
  padding: calc(var(--topo) + 48svh) 0 clamp(2.5rem, 6vw, 4rem);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
/* brilho verde, como o neon da fachada refletindo no preto */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 30% at 20% 62%, color-mix(in srgb, var(--acid) 14%, transparent), transparent 70%);
}
.hero__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.hero__novo {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.7rem;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}
.hero__status {
  display: flex; /* linha própria: não encosta no selo "Novo" ao lado */
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.oferta {
  margin: 0;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.oferta__pre {
  display: block;
  font-size: clamp(1.9rem, 0.9rem + 5vw, 4.6rem);
}
.oferta__linha {
  display: flex;
  align-items: flex-start;
  gap: 0.18em;
  font-size: clamp(1.7rem, 0.6rem + 5.4vw, 4.6rem);
}
.oferta__so {
  padding-top: 0.42em;
}
/* o preço: verde da marca com duas sombras deslocadas, estilo cartaz */
.oferta__preco {
  display: inline-flex;
  align-items: flex-start;
  font-size: 2.35em;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--acid);
  text-shadow:
    0.035em 0.035em 0 var(--paper),
    0.07em 0.07em 0 var(--acid-escuro);
}
.oferta__rs {
  font-size: 0.3em;
  margin: 0.32em 0.12em 0 0;
  letter-spacing: 0;
}
.oferta__cent {
  font-size: 0.62em;
  align-self: flex-end;
  margin-bottom: 0.12em;
}
.oferta__preco sup {
  font-size: 0.32em;
  margin-left: 0.08em;
  line-height: 1;
}
.oferta__fim {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.9rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  line-height: 1.12;
  text-transform: uppercase;
}
.oferta__fim em {
  font-style: normal;
  color: var(--acid);
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.hero__letras {
  max-width: 62ch;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/* ----------------------------- as fotos -------------------------------- */
.hero__fotos {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: calc(var(--topo) + 72svh);
  margin: 0;
  overflow: hidden;
  background: var(--ash);
}
/* escurece em cima (cabeçalho legível) e funde no preto embaixo (oferta legível) */
.hero__fotos::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.7) 0%,
    rgba(11, 11, 11, 0.1) 22%,
    rgba(11, 11, 11, 0.05) 38%,
    rgba(11, 11, 11, 0.72) 60%,
    rgba(11, 11, 11, 0.9) 78%,
    var(--ink) 100%
  );
}
.hero__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--curva);
}
.hero__foto.ativa {
  opacity: 1;
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transform-origin: 50% 40%;
}
/* aproximação lenta enquanto a foto está no ar */
.hero__foto.ativa img {
  animation: hero-zoom 7.5s linear forwards;
}
.hero__fotos.parado .hero__foto img,
.hero__fotos.parado .hero__barras i {
  animation-play-state: paused;
}
@keyframes hero-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

/* sem JavaScript (bloqueado ou visualizador que não roda script) as fotos
   trocam só com CSS: 5 fotos x 6s, cada uma esmaece por cima da anterior */
html:not(.js) .hero__foto {
  opacity: 0;
  animation: hero-ciclo 30s linear infinite;
  animation-delay: -1.2s;
}
html:not(.js) .hero__foto:nth-of-type(2) { animation-delay: 4.8s; }
html:not(.js) .hero__foto:nth-of-type(3) { animation-delay: 10.8s; }
html:not(.js) .hero__foto:nth-of-type(4) { animation-delay: 16.8s; }
html:not(.js) .hero__foto:nth-of-type(5) { animation-delay: 22.8s; }
html:not(.js) .hero__barras,
html:not(.js) .hero__pausa,
html:not(.js) [data-topo-legenda] {
  display: none;
}
@keyframes hero-ciclo {
  0% { opacity: 0; }
  4%,
  20% { opacity: 1; }
  24%,
  100% { opacity: 0; }
}
.hero__fotos {
  cursor: pointer;
}

/* barrinhas de progresso, como nos stories do Instagram */
.hero__barras {
  position: absolute;
  z-index: 2;
  top: calc(var(--topo) + 0.6rem);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  gap: 5px;
}
.hero__barras li {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.hero__barras i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hero__barras .feita i {
  transform: none;
}
.hero__barras .atual i {
  animation: hero-barra var(--tempo, 6s) linear forwards;
}
@keyframes hero-barra {
  to {
    transform: none;
  }
}

.hero__legenda {
  position: absolute;
  z-index: 2;
  top: calc(var(--topo) + 1.5rem);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hero__real {
  padding: 0.2rem 0.5rem;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
}

.hero__pausa {
  position: absolute;
  z-index: 2;
  top: calc(var(--topo) + 1.15rem);
  right: var(--gutter);
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.hero__pausa:hover,
.hero__pausa:focus-visible {
  border-color: var(--paper);
}

/* selo da nota do Google, colado na moldura (só no desktop) */
.hero__selo {
  display: none;
}

@media (min-width: 900px) {
  .hero {
    min-height: min(100svh, 980px);
    display: grid;
    align-items: center;
    padding: calc(var(--topo) + 2rem) 0 clamp(2.5rem, 5vw, 4rem);
  }
  .hero::before {
    background:
      radial-gradient(36% 56% at 74% 50%, color-mix(in srgb, var(--acid) 18%, transparent), transparent 70%);
  }
  .hero__grade {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  /* no desktop as fotos ficam numa moldura em pé, do tamanho de um story */
  .hero__fotos {
    position: relative;
    z-index: 0;
    inset: auto;
    justify-self: end;
    width: min(100%, 440px, calc((100svh - var(--topo) - 5rem) * 0.75));
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: visible;
    background: none;
  }
  .hero__fotos::after {
    border-radius: 26px;
    background: linear-gradient(
      180deg,
      rgba(11, 11, 11, 0.55) 0%,
      transparent 22%,
      transparent 70%,
      rgba(11, 11, 11, 0.6) 100%
    );
  }
  .hero__foto {
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 50px 90px -30px rgba(0, 0, 0, 0.9),
      0 30px 120px -40px color-mix(in srgb, var(--acid) 50%, transparent);
  }
  .hero__barras {
    top: 0.9rem;
    left: 0.9rem;
    right: 0.9rem;
  }
  .hero__legenda {
    top: auto;
    bottom: 1rem;
    left: 1rem;
  }
  .hero__pausa {
    top: auto;
    bottom: 0.85rem;
    right: 0.9rem;
  }
  .hero__selo {
    position: absolute;
    z-index: 3;
    top: 18%;
    left: -2.6rem;
    display: grid;
    place-content: center;
    width: 112px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--acid);
    color: var(--ink);
    text-align: center;
    line-height: 1.1;
    rotate: -10deg;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  }
  .hero__selo strong {
    font-family: var(--f-titulo);
    font-size: 2rem;
    font-weight: 900;
    font-variation-settings: 'wdth' 110;
    letter-spacing: -0.03em;
  }
  .hero__selo span {
    font-size: 0.72rem;
    font-weight: 700;
  }
}

/* entrada do topo, uma peça por vez */
.js [data-entra] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.9s var(--curva),
    translate 1.1s var(--suave);
}
body.pronto [data-entra] {
  opacity: 1;
  translate: none;
}
[data-entra='1'] {
  transition-delay: 0.05s;
}
[data-entra='2'],
[data-entra='3'] {
  opacity: 1;
  translate: none;
}
[data-entra='2'] > span {
  transition-delay: 0.12s;
}
[data-entra='3'] > span {
  transition-delay: 0.22s;
}
[data-entra='4'] {
  transition-delay: 0.5s;
}
[data-entra='5'] {
  transition-delay: 0.62s;
}
[data-entra='6'] {
  transition-delay: 0.74s;
}

/* ------------------------------- prova ---------------------------------- */
.prova {
  background: var(--ink);
  color: var(--paper);
}
.marquise {
  overflow: hidden;
  background: var(--acid);
  color: var(--ink);
}
.marquise__trilho {
  display: flex;
  width: max-content;
  padding: 0.75rem 0;
  animation: correr 42s linear infinite;
}
.marquise:hover .marquise__trilho {
  animation-play-state: paused;
}
.marquise__trilho span {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquise__trilho span::after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--ink);
  transform: rotate(45deg);
}
@keyframes correr {
  to {
    transform: translateX(-50%);
  }
}

.placar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--fio-claro);
}
.placar__item {
  padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--fio-claro);
  border-bottom: 1px solid var(--fio-claro);
}
.placar__item:nth-child(-n + 2) {
  border-top: 1px solid var(--fio-claro);
}
.placar__item strong {
  display: block;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.placar__item .rotulo {
  opacity: 0.78;
}
.estrela {
  color: var(--acid);
  opacity: 1;
}

/* ------------------------------- seções --------------------------------- */
.secao {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  scroll-margin-top: var(--topo);
}
.secao--bone {
  background: var(--bone);
}
.secao--escura {
  background: var(--ink);
  color: var(--paper);
}
.secao--escura .rotulo--acid {
  color: var(--acid);
}

.secao__topo {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.secao__topo .rotulo {
  margin-bottom: 1.1rem;
}
.secao__topo .titulo {
  max-width: 15ch;
}
.secao__texto {
  margin-top: 1.1rem;
  opacity: 0.7;
  max-width: 52ch;
}

/* ---------------------------- modalidades ------------------------------- */
.modalidades {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.modalidades__painel {
  position: sticky;
  top: calc(var(--topo) - 1px);
  z-index: 2;
  padding-bottom: 0.9rem;
  background: var(--paper);
}
.modalidades__moldura {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bone);
}
.modalidades__moldura img,
.modalidades__moldura video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.75s var(--curva),
    transform 1.2s var(--suave);
}
.modalidades__moldura img.ativa,
.modalidades__moldura video.ativa {
  opacity: 1;
  transform: none;
}

.modalidades__lista {
  border-top: 1px solid var(--fio);
}
.modalidades__lista a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 0;
  border-bottom: 1px solid var(--fio);
  text-decoration: none;
  transition:
    padding-left 0.5s var(--suave),
    color 0.3s var(--curva);
}
.modalidades__lista a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--suave);
}
.modalidades__lista a:hover::before,
.modalidades__lista a:focus-visible::before {
  transform: scaleX(1);
}
.modalidades__lista a:hover,
.modalidades__lista a:focus-visible {
  padding-left: 0.7rem;
}
.modalidades__lista .num {
  font-size: 0.72rem;
  opacity: 0.72;
  transition:
    color 0.3s var(--curva),
    opacity 0.3s var(--curva);
}
.modalidades__lista a:hover .num,
.modalidades__lista a.ativa .num {
  color: var(--acid-escuro);
  opacity: 1;
}
.modalidade__nome {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.9rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.modalidade__nota {
  grid-column: 1;
  font-size: 0.92rem;
  opacity: 0.75;
}
.seta {
  align-self: center;
  font-size: 1rem;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition:
    opacity 0.45s var(--curva),
    transform 0.6s var(--suave);
}
.modalidades__lista a:hover .seta,
.modalidades__lista a:focus-visible .seta {
  opacity: 1;
  transform: none;
}

/* Celular e tablet: em vez do painel grudado, cada modalidade vira um card com
   a própria foto — 2 colunas no celular, 3 no tablet. O desktop não muda. */
.modalidade__foto {
  display: none;
}
/* selo nos cards que têm vídeo real em vez de foto */
.modalidade__video {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: rgba(11, 11, 11, 0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.modalidade__video::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid var(--acid);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
@media (max-width: 1023px) {
  .modalidades__painel {
    display: none;
  }
  .modalidades__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 0.75rem;
    border-top: 0;
  }
  .modalidades__lista li {
    min-width: 0;
  }
  .modalidades__lista a,
  .modalidades__lista a:hover,
  .modalidades__lista a:focus-visible {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 0;
    border-bottom: 0;
  }
  .modalidades__lista a::before {
    display: none;
  }
  .modalidade__foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    margin-bottom: 0.45rem;
    overflow: hidden;
    background: var(--bone);
  }
  .modalidade__foto img,
  .modalidade__foto video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--suave);
  }
  .modalidades__lista a:active .modalidade__foto img {
    transform: scale(1.04);
  }
  /* número e seta ficam por cima da foto */
  .modalidades__lista .num {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    padding: 0.2rem 0.4rem;
    background: var(--ink);
    color: var(--paper);
    opacity: 1;
  }
  .modalidades__lista a:hover .num {
    color: var(--acid);
  }
  .modalidades__lista .seta {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
    background: var(--acid);
    color: var(--ink);
    opacity: 1;
    transform: none;
  }
  .modalidade__nome {
    font-size: 1.1rem;
    line-height: 1.2;
  }
  .modalidade__nota {
    grid-column: auto;
    font-size: 0.85rem;
    line-height: 1.45;
  }
}
/* celular: estrutura em 2 colunas, no mesmo ritmo dos cards de modalidade
   (uma foto por tela deixava a seção com ~5 telas de altura) */
@media (max-width: 639px) {
  .estrutura {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 0.75rem;
  }
  .estrutura__item figcaption {
    padding-top: 0.6rem;
  }
  .estrutura__item figcaption strong {
    font-size: 0.95rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  /* foto pequena: o parallax só abriria um vão embaixo da imagem */
  .estrutura /* <picture> só pra servir WebP: não ocupa caixa, a <img> segue mandando no layout */
.foto-webp {
  display: contents;
}
.moldura img {
    transform: scale(var(--ps, 1.12));
  }
  .estrutura__item figcaption span {
    font-size: 0.85rem;
    line-height: 1.45;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .modalidades__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .modalidade__nome {
    font-size: 1.25rem;
  }
}

/* ----------------------------- estrutura -------------------------------- */
.estrutura {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.estrutura__item {
  margin: 0;
}
.moldura {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 4 / 5;
}
.moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.12));
  transition: transform 1.6s var(--suave);
}
.moldura video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moldura--mapa {
  aspect-ratio: auto;
  height: 100%;
  border: 0;
}
.moldura--capa {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: none;
}

.estrutura__item figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.9rem;
}
.estrutura__item figcaption strong {
  font-size: 1.05rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 104;
}
.estrutura__item figcaption span {
  font-size: 0.92rem;
  opacity: 0.78;
}
.estrutura__convite {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ------------------------------- grade ---------------------------------- */
.grade__dias {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--fio-claro);
  width: fit-content;
  max-width: 100%;
}
.grade__pilula {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--acid);
  transform: translate(var(--x, 0px), var(--y, 0px));
  width: var(--w, 0px);
  height: var(--h, 0px);
  transition:
    transform 0.55s var(--suave),
    width 0.55s var(--suave);
}
.grade__dias label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  opacity: 0.75;
  transition:
    opacity 0.3s var(--curva),
    color 0.3s var(--curva),
    background-color 0.3s var(--curva);
}
.grade__dias label:hover {
  opacity: 1;
}
/* o rádio fica escondido mas continua no teclado (setas trocam o dia) */
.grade__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#r-1:checked ~ .grade__dias label[for="r-1"],
#r-2:checked ~ .grade__dias label[for="r-2"],
#r-3:checked ~ .grade__dias label[for="r-3"],
#r-4:checked ~ .grade__dias label[for="r-4"],
#r-5:checked ~ .grade__dias label[for="r-5"],
#r-6:checked ~ .grade__dias label[for="r-6"],
#r-0:checked ~ .grade__dias label[for="r-0"] {
  color: var(--ink);
  opacity: 1;
}
/* sem JS não tem a pílula animada: o dia escolhido ganha o fundo direto */
html:not(.js) .grade__pilula {
  display: none;
}
html:not(.js) #r-1:checked ~ .grade__dias label[for="r-1"],
html:not(.js) #r-2:checked ~ .grade__dias label[for="r-2"],
html:not(.js) #r-3:checked ~ .grade__dias label[for="r-3"],
html:not(.js) #r-4:checked ~ .grade__dias label[for="r-4"],
html:not(.js) #r-5:checked ~ .grade__dias label[for="r-5"],
html:not(.js) #r-6:checked ~ .grade__dias label[for="r-6"],
html:not(.js) #r-0:checked ~ .grade__dias label[for="r-0"] {
  background: var(--acid);
}
#r-1:focus-visible ~ .grade__dias label[for="r-1"],
#r-2:focus-visible ~ .grade__dias label[for="r-2"],
#r-3:focus-visible ~ .grade__dias label[for="r-3"],
#r-4:focus-visible ~ .grade__dias label[for="r-4"],
#r-5:focus-visible ~ .grade__dias label[for="r-5"],
#r-6:focus-visible ~ .grade__dias label[for="r-6"],
#r-0:focus-visible ~ .grade__dias label[for="r-0"] {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.grade__quadro {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 15rem;
}
.grade__painel {
  display: none;
}
#r-1:checked ~ .grade__quadro #dia-1,
#r-2:checked ~ .grade__quadro #dia-2,
#r-3:checked ~ .grade__quadro #dia-3,
#r-4:checked ~ .grade__quadro #dia-4,
#r-5:checked ~ .grade__quadro #dia-5,
#r-6:checked ~ .grade__quadro #dia-6,
#r-0:checked ~ .grade__quadro #dia-0 {
  display: block;
}
.aula {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.8rem, 1.6vw, 1.15rem) 0;
  border-bottom: 1px solid var(--fio-claro);
}
.grade__painel .aula {
  opacity: 0;
  transform: translateY(12px);
  animation: sobe 0.65s var(--suave) forwards;
}
.grade__painel .aula:nth-child(1) {
  animation-delay: 0.04s;
}
.grade__painel .aula:nth-child(2) {
  animation-delay: 0.1s;
}
.grade__painel .aula:nth-child(3) {
  animation-delay: 0.16s;
}
.grade__painel .aula:nth-child(4) {
  animation-delay: 0.22s;
}
.grade__painel .aula:nth-child(n + 5) {
  animation-delay: 0.28s;
}
@keyframes sobe {
  to {
    opacity: 1;
    transform: none;
  }
}
.aula .hora {
  font-size: 0.95rem;
  color: var(--acid);
}
.aula__nome {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 650;
  font-variation-settings: 'wdth' 104;
}
.aula__nome small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--f-texto);
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.6;
}
.aula__turno {
  margin: 1.4rem 0 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acid);
}
.aula__turno:first-child {
  margin-top: 0;
}
.grade__vazio {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--fio-claro);
  font-size: 1.05rem;
  opacity: 0.85;
}
.aula--proxima,
.aula--agora {
  background: color-mix(in srgb, var(--acid) 8%, transparent);
  box-shadow:
    inset 3px 0 0 var(--acid),
    0 0 0 0 transparent;
  padding-inline: 0.9rem;
}
.aula--proxima::after,
.aula--agora::after {
  content: 'Próxima';
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--acid);
}
.aula--agora::after {
  content: 'Agora';
}
.grade__aviso {
  margin-top: 1.6rem;
  font-size: 0.88rem;
  opacity: 0.75;
}
.grade__aviso a {
  color: var(--acid);
  text-underline-offset: 3px;
}

/* ------------------------------- planos --------------------------------- */
/* Alternância "Só musculação / Musculação + aulas": o JS troca os valores
   (data-musc / data-aulas). Sem JS, ficam os valores de musculação. */
.planos__opcoes {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  padding: 0.3rem;
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: var(--paper);
  max-width: 100%;
}
.planos__opcoes button {
  min-height: 44px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.3s var(--curva),
    color 0.3s var(--curva);
}
.planos__opcoes button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.planos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(1.1rem, 2.6vw, 2rem);
  border: 1px solid var(--fio);
  background: var(--paper);
  transition:
    transform 0.5s var(--suave),
    border-color 0.4s var(--curva),
    box-shadow 0.5s var(--curva);
}
.plano:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  box-shadow: 0 18px 40px -28px rgba(11, 11, 11, 0.5);
}
.plano--destaque {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.plano__selo {
  position: absolute;
  top: 0;
  left: clamp(1.1rem, 2.6vw, 2rem);
  transform: translateY(-50%);
  padding: 0.25rem 0.6rem;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.plano__nome {
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 110;
}
.plano__preco {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
}
.plano__parcelas {
  font-size: 0.85rem;
  opacity: 0.7;
}
.plano__preco .num {
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}
.plano__preco small {
  font-size: 0.45em;
  font-weight: 500;
  vertical-align: 0.6em;
}
.plano--destaque .plano__preco .num {
  color: var(--acid);
}
.plano__total {
  font-size: 0.82rem;
  opacity: 0.65;
}
.plano__chamada {
  margin-bottom: 0.9rem;
  font-size: 0.92rem;
  opacity: 0.78;
}
.plano .botao {
  margin-top: auto;
  padding-inline: 0.8rem;
}

/* plano só de aulas: faixa escura logo abaixo dos cartões */
.plano-aulas {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--ink);
  color: var(--paper);
}
.plano-aulas__novo {
  justify-self: start;
  padding: 0.25rem 0.6rem;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.plano-aulas__texto p {
  margin-top: 0.4rem;
  max-width: 52ch;
  opacity: 0.8;
}
.plano-aulas__preco {
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--acid);
  white-space: nowrap;
}
.plano-aulas__preco small {
  font-size: 0.38em;
  font-weight: 500;
  color: var(--paper);
}
.planos__gympass {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--fio);
  font-size: 0.97rem;
  opacity: 0.8;
}
.planos__gympass a {
  color: var(--acid-escuro);
  font-weight: 600;
}
@media (min-width: 900px) {
  .planos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .plano-aulas {
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.6rem;
  }
}

/* ----------------------------- avaliações -------------------------------- */
/* ------------------------------ onde fica ------------------------------- */
.onde {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.horarios {
  border-top: 1px solid var(--fio);
  max-width: 28rem;
}
.horarios div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fio);
}
.horarios dt {
  opacity: 0.78;
  font-size: 0.95rem;
}
.horarios dd {
  margin: 0;
  font-size: 0.95rem;
}
.onde__aberto {
  margin-top: 1.4rem;
  color: var(--acid-escuro);
  opacity: 1;
}
.onde__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.8rem;
}
.onde__mapa {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fio);
  aspect-ratio: 4 / 3;
  background: var(--bone);
}
.onde__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s var(--curva);
}
.onde__mapa:hover iframe {
  filter: grayscale(0);
}

/* ----------------------------- fechamento ------------------------------- */
/* A foto da equipe entra inteira (os fiscais do CREF1 ficam nas pontas, então
   ela não pode ser cortada nem escurecida). No celular: foto em cima, texto
   embaixo; no desktop: lado a lado. */
.fechamento {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.fechamento::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(45% 55% at 30% 50%, color-mix(in srgb, var(--acid) 14%, transparent), transparent 70%);
}
.fechamento__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.fechamento__foto {
  margin: 0;
}
.moldura--equipe {
  aspect-ratio: 911 / 907;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.moldura--equipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none; /* sem o zoom das outras molduras: as pontas não podem sumir */
}
.fechamento__foto figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}
.fechamento__selo {
  padding: 0.2rem 0.5rem;
  background: #2f4fc4;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.fechamento__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
.fechamento__conteudo p {
  max-width: 34ch;
  opacity: 0.8;
}
@media (min-width: 900px) {
  .fechamento__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ------------------------------- rodapé --------------------------------- */
.rodape {
  position: relative;
  background: var(--ash);
  color: var(--paper);
  overflow: hidden;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.rodape__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.marca--rodape .marca__losango {
  width: 34px;
  height: 34px;
}
.rodape__sobre {
  margin-top: 1.1rem;
  max-width: 30ch;
  opacity: 0.78;
  font-size: 0.95rem;
}
.rodape__aberto {
  margin-top: 1.4rem;
  color: var(--acid);
  opacity: 1;
}
.rodape .rotulo {
  opacity: 0.75;
}
.horarios--rodape {
  margin-top: 1rem;
  border-color: var(--fio-claro);
}
.horarios--rodape div {
  border-color: var(--fio-claro);
}
.rodape__contato {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
}
.rodape__contato a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  text-decoration: none;
  opacity: 0.72;
  transition:
    opacity 0.3s var(--curva),
    color 0.3s var(--curva);
}
.rodape__contato a:hover {
  color: var(--acid);
  opacity: 1;
}
.rodape__base {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--fio-claro);
  font-size: 0.8rem;
  opacity: 0.75;
}
.rodape__base a {
  text-decoration: none;
  transition: color 0.3s var(--curva);
}
.rodape__base a:hover {
  color: var(--acid);
}
.rodape__assinatura {
  overflow: hidden;
  line-height: 0.74;
}
.rodape__assinatura span {
  display: block;
  padding-inline: var(--gutter);
  font-size: clamp(2.4rem, 11.2vw, 10rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 150;
  letter-spacing: -0.03em;
  color: var(--coal);
  white-space: nowrap;
  transform: translateY(0.14em);
}

/* ---------------------------- botão flutuante --------------------------- */
.flutuante {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(11, 11, 11, 0.6);
  opacity: 0;
  transform: scale(0.6) translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.5s var(--curva),
    transform 0.6s var(--suave);
}
.flutuante svg {
  width: 28px;
  height: 28px;
}
.flutuante.visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .flutuante {
    display: none;
  }
}



/* -------------------------- menu do celular ---------------------------- */
/* com o menu aberto a página de trás não rola */
html.menu-aberto,
html.menu-aberto body {
  overflow: hidden;
}
/* Abaixo de 900px o menu do topo não cabe: as três barras abrem um painel
   escuro de tela cheia, com links grandes e o WhatsApp no fim. */
.menu-cel {
  display: none;
}
.menu-cel__botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  color: inherit;
}
.menu-cel__fechar {
  display: none;
}
.menu-cel__barras {
  display: grid;
  gap: 5px;
  width: 22px;
}
.menu-cel__barras i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
/* o botão de fechar: as três barras viram um X */
.menu-cel__barras--x i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-cel__barras--x i:nth-child(2) {
  opacity: 0;
}
.menu-cel__barras--x i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* menu aberto: pelo alvo #menu-cel (sem JS) ou pela classe (com JS) */
.menu-cel:has(.menu-cel__painel:target) .menu-cel__abrir,
.menu-cel.aberto .menu-cel__abrir {
  display: none;
}
.menu-cel:has(.menu-cel__painel:target) .menu-cel__fechar,
.menu-cel.aberto .menu-cel__fechar {
  display: grid;
}
.menu-cel__painel:target,
.menu-cel.aberto .menu-cel__painel {
  display: flex;
}
.menu-cel__painel {
  scroll-margin-top: 100vh; /* abrir pelo #menu-cel não faz a página pular */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100svh - 100%);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  padding: 1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--fio-claro);
  animation: menu-entra 0.35s var(--suave);
}
@keyframes menu-entra {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.menu-cel__painel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-cel__painel li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-bottom: 1px solid var(--fio-claro);
  font-family: var(--f-titulo);
  font-size: 1.45rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.menu-cel__painel li a[aria-current] {
  color: var(--acid);
}
/* links que levam a outra página: verde, com a seta */
.menu-cel__outra {
  color: var(--acid);
}
.menu-cel__wa {
  margin-top: auto;
  width: 100%;
}
.menu-cel__painel .menu-cel__wa {
  margin-top: 2rem;
}

/* --------------------------- chamada do studio --------------------------- */
/* Faixa escura entre "Onde fica" e o fechamento: leva pra studio.html. */
.chamada {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.chamada__losango {
  position: absolute;
  z-index: 0;
  width: clamp(260px, 34vw, 520px);
  color: var(--acid);
  opacity: 0.18;
  left: -10%;
  top: -22%;
  pointer-events: none;
}
.chamada__grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.chamada__texto .rotulo--acid {
  color: var(--acid);
  margin-bottom: 1.1rem;
}
.chamada__texto .titulo {
  max-width: 18ch;
}
.chamada__texto .titulo em {
  font-style: normal;
  color: var(--acid);
}
.chamada__texto p {
  margin-top: 1.2rem;
  max-width: 46ch;
  opacity: 0.72;
}
.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.chamada__foto {
  position: relative;
  display: block;
  text-decoration: none;
}
.chamada__foto .moldura {
  aspect-ratio: 4 / 3;
  background: var(--coal);
}
.chamada__foto img {
  filter: grayscale(0.3);
  transition:
    transform 1.6s var(--suave),
    filter 0.6s var(--curva);
}
.chamada__foto:hover img {
  filter: none;
}
/* foto real do Studio: quadrada, sem dessaturar, sem zoom que corte o teto e o tapete */
.moldura--studio {
  aspect-ratio: 1 / 1;
}
.chamada__foto .moldura--studio {
  aspect-ratio: 1 / 1;
}
.moldura--studio picture {
  display: contents;
}
.moldura--studio img,
.chamada__foto .moldura--studio img {
  filter: none;
}
.chamada__selo {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--acid);
  color: var(--ink);
  opacity: 1;
  padding: 0.7rem 1rem;
  transition: transform 0.5s var(--suave);
}
.chamada__foto:hover .chamada__selo {
  transform: translateY(-4px);
}

/* ---------------------------- chamada pilates ---------------------------- */
/* Cartão compacto logo depois da faixa do Studio: leva pra pilates.html.
   A foto tem só 740px de largura, então fica pequena e sem zoom. */
/* TH Pilates na home: tom quente da madeira dos aparelhos (a foto manda na cor),
   título sem caixa alta como na identidade do TH, e uma régua do dia mostrando
   onde caem as aulas — informação de verdade no lugar de selinhos. */
.pil-chamada {
  --madeira: #8a5a2b; /* texto/realce sobre o areia (AA) */
  --madeira-clara: #c8955c;
  --areia: #ebe3d6;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--areia);
  color: var(--ink);
}
.pil-chamada__grade {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}
.pil-chamada__foto {
  position: relative;
  display: block;
  text-decoration: none;
}
.pil-chamada__foto .moldura {
  display: block;
  aspect-ratio: 4 / 3;
}
.pil-chamada__foto img {
  object-position: 50% 62%;
}
.pil-chamada__legenda {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.45rem 0.8rem;
  background: var(--areia);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--madeira);
}
.pil-chamada__marca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.pil-chamada__marca span {
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  color: var(--madeira);
}
.pil-chamada__titulo {
  max-width: 14ch;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 100;
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.pil-chamada__sobre {
  max-width: 44ch;
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

/* régua 6h–21h: cada hora vale 1/15 da largura */
.pil-horario {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  max-width: 520px;
}
.pil-horario figcaption {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--madeira);
}
.pil-horario__regua {
  position: relative;
  height: 44px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  /* um traço por hora */
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 16%, transparent) 0 1px,
    transparent 1px calc(100% / 15)
  );
}
.pil-horario__bloco {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: calc((var(--de) - 6) / 15 * 100%);
  width: calc((var(--ate) - var(--de)) / 15 * 100%);
  display: grid;
  place-items: center;
  background: var(--madeira);
  color: #fff;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: clamp(0.66rem, 0.58rem + 0.3vw, 0.8rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
}
.pil-horario__horas {
  position: relative;
  height: 1.4rem;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.pil-horario__horas span {
  position: absolute;
  left: calc((var(--h) - 6) / 15 * 100%);
  translate: -50% 0;
}
.pil-horario__horas span:first-child {
  translate: 0 0;
}
.pil-horario__horas span:last-child {
  translate: -100% 0;
}

.pil-chamada__rodape {
  display: grid;
  gap: 1.2rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.4rem, 2.6vw, 1.8rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.pil-chamada__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.pil-chamada__preco strong {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.pil-chamada__preco strong small {
  margin-right: 0.25em;
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: 0.6em;
}
.pil-chamada .chamada__acoes {
  margin: 0;
}

@media (min-width: 960px) {
  .pil-chamada__grade {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .pil-chamada__foto .moldura {
    aspect-ratio: 4 / 5;
    max-height: 640px;
  }
  .pil-chamada__rodape {
    grid-template-columns: auto 1fr;
    align-items: end;
  }
  .pil-chamada .chamada__acoes {
    justify-content: flex-end;
  }
  .pil-chamada__preco {
    display: grid;
    gap: 0.15rem;
  }
}

/* Botão do Studio no menu, ao lado de "Onde fica".
   Os cantos são chanfrados em 45° — o mesmo corte do losango da marca. Como
   `clip-path` cortaria a borda no chanfro, a moldura é uma camada acid atrás
   (::before) com o miolo 1px menor por cima (::after); no hover o miolo acende. */
.navegacao a.navegacao__studio {
  --corte: 10px;
  --moldura: var(--acid);
  --miolo: color-mix(in srgb, var(--ink) 88%, transparent);
  position: relative;
  isolation: isolate;
  gap: 0.55rem;
  margin-left: 0.7rem;
  padding: 0.6rem 1.05rem;
  color: var(--acid);
  opacity: 1;
  transition:
    color 0.35s var(--curva),
    transform 0.45s var(--suave);
}
.navegacao a.navegacao__studio::before,
.navegacao a.navegacao__studio::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: auto;
  transform: none;
  clip-path: polygon(
    var(--corte) 0,
    100% 0,
    100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%,
    0 100%,
    0 var(--corte)
  );
  transition: background-color 0.4s var(--curva);
}
.navegacao a.navegacao__studio::before {
  inset: 0;
  background: var(--moldura);
}
.navegacao a.navegacao__studio::after {
  inset: 1px;
  background: var(--miolo);
}
.navegacao__studio svg {
  width: 10px;
  height: 10px;
  transition: transform 0.55s var(--suave);
}
.navegacao a.navegacao__studio:hover,
.navegacao a.navegacao__studio:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}
.navegacao a.navegacao__studio:hover::after,
.navegacao a.navegacao__studio:focus-visible::after {
  background: var(--acid);
}
.navegacao a.navegacao__studio:hover svg {
  transform: rotate(45deg);
}

/* no cabeçalho claro a moldura escurece e o miolo some */
.cabecalho.compacto .navegacao a.navegacao__studio {
  --moldura: var(--acid-escuro);
  --miolo: var(--paper);
  color: var(--acid-escuro);
}
.cabecalho.compacto .navegacao a.navegacao__studio:hover,
.cabecalho.compacto .navegacao a.navegacao__studio:focus-visible {
  color: var(--paper);
}
.cabecalho.compacto .navegacao a.navegacao__studio:hover::after,
.cabecalho.compacto .navegacao a.navegacao__studio:focus-visible::after {
  background: var(--acid-escuro);
}

@media (min-width: 1024px) {
  .chamada__grade {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* ------------------------- revelação no scroll -------------------------- */
.js [data-reveal] {
  opacity: 0;
  /* `translate` em vez de `transform`: assim a revelação não apaga o transform
     dos componentes (elevação no hover, cartão em destaque). */
  translate: 0 26px;
  transition:
    opacity 0.9s var(--curva) var(--d, 0ms),
    translate 1.1s var(--suave) var(--d, 0ms);
}
[data-reveal].visivel {
  opacity: 1;
  translate: none;
}
.js [data-reveal='foto'] {
  opacity: 1;
  translate: none;
}
/* Quem recorta é sempre um filho: um elemento 100% recortado não conta como
   visível para o IntersectionObserver e nunca seria revelado. */
.js [data-reveal='foto'] .moldura,
.js [data-reveal='foto'] .modalidades__moldura {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--suave);
}
.js [data-reveal='foto'].visivel .moldura,
.js [data-reveal='foto'].visivel .modalidades__moldura {
  clip-path: inset(0);
}
[data-reveal='foto'].visivel img {
  --ps: 1;
}

/* --------------------------------- md ----------------------------------- */
@media (min-width: 640px) {
  .placar {
    grid-template-columns: repeat(4, 1fr);
  }
  .placar__item {
    border-top: 1px solid var(--fio-claro);
  }
  .estrutura {
    grid-template-columns: repeat(2, 1fr);
  }
  .rodape__base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .modalidades__lista a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 2rem;
    align-items: center;
  }
  .modalidade__nota {
    grid-column: auto;
  }
}

/* --------------------------------- lg ----------------------------------- */
@media (min-width: 1024px) {
  .secao__topo {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .secao__topo .rotulo {
    grid-column: 1;
    grid-row: 1;
  }
  .secao__topo .titulo,
  .secao__topo .sdo-titulo {
    grid-column: 1;
    grid-row: 2;
  }
  .secao__topo .secao__texto {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
    padding-bottom: 0.4em;
    max-width: 42ch;
  }
  /* estas duas seções já são de duas colunas por fora: a de dentro apertaria */
  #grade .secao__topo,
  #onde-fica .secao__topo {
    display: block;
  }
  #grade .secao__topo .secao__texto,
  #onde-fica .secao__topo .secao__texto {
    margin-top: 1.1rem;
    padding-bottom: 0;
  }
  .modalidades {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
  .modalidades__painel {
    top: calc(var(--topo) + 2rem);
    padding-bottom: 0;
    background: none;
  }
  .modalidades__moldura {
    aspect-ratio: 4 / 5;
  }
  .estrutura {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .estrutura__item--alto {
    margin-top: clamp(2rem, 4vw, 4rem);
  }
  .estrutura__item--alto .moldura {
    aspect-ratio: 3 / 4;
  }
  #grade .largura {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  #grade .secao__topo {
    margin-bottom: 0;
  }
  .onde {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
  .rodape__grade {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* --------------------------- telas pequenas ----------------------------- */
@media (max-width: 1199px) {
  .navegacao a i {
    display: none;
  }
}

@media (max-width: 899px) {
  .navegacao {
    display: none;
  }
  /* no celular o menu de três barras assume o lugar do menu do topo,
     e o WhatsApp fica no botão do cabeçalho (sem o botão flutuante) */
  .menu-cel {
    display: block;
  }
  .flutuante {
    display: none;
  }
  .cabecalho__cta {
    flex: none;
    min-height: 40px;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    transition:
      opacity 0.3s var(--curva),
      visibility 0.3s var(--curva),
      transform 0.4s var(--suave);
  }
  .cabecalho__cta {
    margin-left: auto;
  }
  /* com o menu aberto o cabeçalho fica escuro, colado no painel */
  .cabecalho:has(.menu-cel__painel:target),
  .cabecalho:has(.menu-cel.aberto) {
    background: var(--ink);
    color: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* celular estreito */
@media (max-width: 379px) {
  /* grade: coluna da hora mais estreita pra "Próxima" caber na linha */
  .aula {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    gap: 0.6rem;
  }
}

@media (max-width: 479px) {
  .cabecalho__interno {
    gap: 0.75rem;
  }
  .marca {
    min-width: 0;
  }
  /* botão nunca passa da largura da tela: se não couber, quebra a linha */
  .botao {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .botao--grande {
    padding-inline: 1.25rem;
  }
  .cabecalho__cta {
    white-space: nowrap;
  }
}

/* rótulo do botão do topo: versão curta onde a longa não cabe
   (celular estreito e a faixa em que o menu do topo divide espaço com ele) */
.cta__curto {
  display: none;
}
@media (max-width: 479px), (min-width: 900px) and (max-width: 1199px) {
  .cta__longo {
    display: none;
  }
  .cta__curto {
    display: inline;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .navegacao {
    gap: 0.9rem;
  }
  .navegacao a {
    font-size: 0.86rem;
  }
}
@media (max-width: 374px) {
  .marca {
    gap: 0.5rem;
  }
  .marca__losango {
    flex: none;
    width: 24px;
    height: 24px;
  }
  .marca__nome {
    font-size: 0.82rem;
  }
  .cabecalho__cta {
    padding-inline: 0.75rem;
  }
}

@media (max-width: 599px) {
  /* os 7 dias numa linha só, dividindo a largura toda */
  .grade__dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.25rem;
    width: 100%;
  }
  .grade__dias label {
    min-width: 0;
    padding: 0;
    letter-spacing: 0.04em;
  }
}

/* ------------------------- menos movimento ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal],
  [data-entra] {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
  [data-reveal='foto'] .moldura,
  [data-reveal='foto'] .modalidades__moldura {
    clip-path: none !important;
  }
  .moldura img {
    --ps: 1;
    transform: none !important;
  }
}

/* --------------------- botão de play dos vídeos --------------------------- */
/* Só aparece quando o navegador não deixou o vídeo tocar sozinho. */
.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(11, 11, 11, 0.18);
  color: var(--ink);
  cursor: pointer;
}
.video-play svg {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.85rem;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}
.video--parado .video-play {
  display: grid;
}