/* ==========================================================================
   Studio de Treino — folha extra da página studio.html.
   Carrega depois de estilo.css e só acrescenta: mesmos tokens, mesmas fontes,
   mesmos botões. O que muda é o clima — fundo preto, caixa alta e o grafismo
   de losango em linha + hachura que o Studio já usa nos posts.
   ========================================================================== */

body.studio {
  background: var(--ink);
  color: var(--paper);
}

/* cabeçalho escuro (na home ele clareia ao rolar; aqui a página inteira é escura) */
body.studio .cabecalho.compacto {
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  color: var(--paper);
  box-shadow: 0 1px 0 var(--fio-claro);
}
body.studio .cabecalho.compacto .navegacao a i {
  color: var(--acid);
}
body.studio .rotulo--acid {
  color: var(--acid);
}
body.studio .secao__texto {
  opacity: 0.8;
}
.marca__nome i {
  font-style: normal;
  color: var(--acid);
}
.navegacao__volta {
  color: var(--acid);
  opacity: 1;
}

/* ------------------------------ títulos --------------------------------- */
.sdo-titulo {
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  font-size: clamp(2.6rem, 1rem + 7vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.sdo-titulo em {
  font-style: normal;
  color: var(--acid);
}
.sdo-titulo--secao {
  font-size: clamp(2.1rem, 1rem + 4vw, 3.9rem);
}
.sdo-titulo--quem {
  font-size: clamp(2.8rem, 1rem + 7.5vw, 6.4rem);
}
/* o sublinhado do post: risco cheio, colado na palavra */
.sublinhado {
  display: inline-block;
  border-bottom: 0.09em solid var(--acid);
  padding-bottom: 0.02em;
}

/* ---------------------------- grafismo ---------------------------------- */
.sdo-losango,
.sdo-hachura {
  position: absolute;
  color: var(--acid);
  pointer-events: none;
  z-index: 1;
}
.sdo-losango {
  width: clamp(240px, 38vw, 560px);
  opacity: 0.22;
  right: -12%;
  top: 8%;
}
.sdo-hachura {
  width: clamp(70px, 9vw, 130px);
  opacity: 0.85;
  right: 6%;
  top: 34%;
}

/* -------------------------------- topo ---------------------------------- */
.sdo-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: calc(var(--topo) + 3rem) 0 clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.sdo-hero__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sdo-hero__foto picture {
  display: contents;
}
/* no desktop o texto fica à esquerda (sob o degradê): a foto pode aparecer mais */
@media (min-width: 1024px) {
  .sdo-hero__foto img {
    opacity: 0.7;
  }
}
.sdo-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* foto real do espaço: o corredor e a placa "Moraes Fit Studio" ficam no centro */
  object-position: 50% 45%;
  opacity: 0.55;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.1));
  transition: transform 2.2s var(--suave);
}
.sdo-hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 80%, transparent) 0%, transparent 30%),
    linear-gradient(90deg, var(--ink) 8%, color-mix(in srgb, var(--ink) 55%, transparent) 62%, transparent 100%),
    linear-gradient(0deg, var(--ink) 2%, transparent 45%);
}
body.pronto .sdo-hero__foto img {
  --ps: 1;
}
.sdo-hero__conteudo {
  position: relative;
  z-index: 2;
}
.sdo-hero__conteudo .rotulo {
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}
.sdo-hero__texto {
  max-width: 40ch;
  margin-top: clamp(1.2rem, 3vw, 1.9rem);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.sdo-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

/* ------------------------------- seções --------------------------------- */
.sdo-secao {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  scroll-margin-top: var(--topo);
  overflow: hidden;
}
.sdo-secao--fundo {
  background: var(--ash);
}
.sdo-secao .secao__topo {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------- o que muda --------------------------------- */
.sdo-comparativo {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.sdo-carta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border: 1px solid var(--fio-claro);
  background: color-mix(in srgb, var(--paper) 3%, transparent);
  transition:
    transform 0.5s var(--suave),
    border-color 0.4s var(--curva),
    background-color 0.4s var(--curva);
}
.sdo-carta:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--paper) 35%, transparent);
}
.sdo-carta h3 {
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.sdo-carta ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.4rem 0 1.4rem;
  font-size: 0.98rem;
  opacity: 0.78;
}
.sdo-carta li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.sdo-carta li::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}
.sdo-carta--acid {
  border-color: var(--acid);
  background: color-mix(in srgb, var(--acid) 7%, transparent);
}
.sdo-carta--acid .rotulo {
  color: var(--acid);
  opacity: 1;
}
.sdo-carta--acid li::before {
  background: var(--acid);
  opacity: 1;
}
.sdo-carta--acid:hover {
  border-color: var(--acid);
  background: color-mix(in srgb, var(--acid) 12%, transparent);
}
.sdo-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--acid);
}
.sdo-link span {
  transition: transform 0.4s var(--suave);
}
.sdo-link:hover span {
  transform: translateX(5px);
}

/* --------------------------- treino híbrido ------------------------------ */
/* Um vídeo real (musculação no Studio) e, ao lado, a "conta" do treino:
   Musculação + Funcional + HIIT = seu treino. Os sinais são losangos em
   linha, o mesmo grafismo dos posts; o resultado ganha o verde e a hachura. */
.sdo-mix {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sdo-mix__video {
  margin: 0;
}
.sdo-mix__video .moldura {
  aspect-ratio: 4 / 5;
  max-height: 78svh;
  background: var(--coal);
}
.sdo-mix__video figcaption {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  opacity: 0.72;
}
.sdo-conta {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sdo-conta li {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 clamp(1.1rem, 2.4vw, 1.6rem) 3.4rem;
  border-top: 1px solid var(--fio-claro);
}
/* losango em linha antes de cada linha (::before) e o sinal por cima, sem
   girar (::after): nada na primeira parcela, + nas outras, = no resultado */
.sdo-conta li::before,
.sdo-conta li::after {
  position: absolute;
  left: 0.3rem;
  top: calc(clamp(1.1rem, 2.4vw, 1.6rem) + 0.3rem);
  width: 1.9rem;
  height: 1.9rem;
}
.sdo-conta li::before {
  content: '';
  border: 1.5px solid var(--acid);
  rotate: 45deg;
}
.sdo-conta li::after {
  content: '+';
  display: grid;
  place-items: center;
  color: var(--acid);
  font-family: var(--f-texto);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.sdo-conta li:first-child::after {
  content: '';
}
.sdo-conta strong {
  font-family: var(--f-titulo);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.sdo-conta span {
  max-width: 44ch;
  font-size: 0.97rem;
  opacity: 0.78;
}
.sdo-conta__total {
  margin-top: 0.4rem;
  border-top: 2px solid var(--acid) !important;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--acid) 9%, transparent) 0 2px,
    transparent 2px 9px
  );
  padding-right: 1rem !important;
}
.sdo-conta li.sdo-conta__total::before {
  background: var(--acid);
}
.sdo-conta li.sdo-conta__total::after {
  content: '=';
  color: var(--ink);
}
.sdo-conta__total strong {
  color: var(--acid);
}
.sdo-conta__total span {
  opacity: 0.9;
}
@media (min-width: 900px) {
  .sdo-mix {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.sdo-nota {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--fio-claro);
  max-width: 60ch;
  font-size: 0.97rem;
  opacity: 0.78;
}

/* ----------------------------- para quem é ------------------------------- */
.sdo-secao--quem {
  background:
    radial-gradient(90% 70% at 85% 10%, color-mix(in srgb, var(--acid) 8%, transparent) 0%, transparent 60%),
    var(--ink);
}
.sdo-losango--quem {
  right: auto;
  left: -14%;
  top: auto;
  bottom: -18%;
  opacity: 0.16;
}
.sdo-hachura--quem {
  right: 8%;
  top: 18%;
}
.sdo-quem {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.sdo-quem .rotulo--acid {
  margin-bottom: 1rem;
}

.sdo-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
}
.sdo-lista li {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 104;
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
/* o marcador de pessoinha dos posts do Studio */
.sdo-marca {
  width: clamp(18px, 1.7vw, 23px);
  flex: none;
  margin-top: 0.22em;
  fill: var(--acid);
}
.sdo-fecho {
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.25;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}
.sdo-fecho em {
  font-style: normal;
  color: var(--paper);
  font-weight: 700;
}
.sdo-quem__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.sdo-quem__obs {
  opacity: 0.78;
}

/* assinatura do rodapé: seis letras precisam de corpo maior pra encher a linha */
body.studio .rodape__assinatura span {
  font-size: clamp(3.4rem, 19vw, 17rem);
}

/* --------------------------------- md ----------------------------------- */
/* --------------------------------- lg ----------------------------------- */
@media (min-width: 1024px) {
  .sdo-comparativo {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
  .sdo-carta--acid {
    transform: translateY(-14px);
  }
  .sdo-carta--acid:hover {
    transform: translateY(-20px);
  }
  .sdo-quem {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    row-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .sdo-quem > header {
    grid-row: span 2;
  }
  .sdo-quem__acoes {
    grid-column: 2;
  }
  .sdo-fecho {
    grid-column: 2;
  }
}

/* ------------------------- menos movimento ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sdo-hero__foto img {
    --ps: 1;
    transform: none !important;
  }
}

/* celular: com o WhatsApp e as três barras no topo não cabe "Moraes Fit Studio"
   inteiro; o losango já é a marca Moraes Fit — fica só "Studio"/"Pilates" ao lado */
@media (max-width: 599px) {
  body.studio .marca__nome {
    font-size: 0;
  }
  body.studio .marca__nome i {
    font-size: 0.95rem;
  }
}

/* ------------------------------ o espaço ------------------------------- */
.sdo-espaco__grade {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.sdo-espaco__texto .secao__texto {
  margin-top: 1.1rem;
  max-width: 44ch;
}
.sdo-espaco__foto {
  margin: 0;
}
.sdo-espaco__foto .moldura {
  box-shadow: 0 0 0 1px var(--fio-claro);
}
.sdo-espaco__foto figcaption {
  margin-top: 0.85rem;
}
@media (min-width: 1024px) {
  .sdo-espaco__grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ------------------------------- planos --------------------------------- */
.sdo-planos__abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}
.sdo-planos__abas button {
  min-height: 44px;
  padding: 0 1.2rem;
  border: 1px solid var(--fio-claro);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.sdo-planos__abas button[aria-selected='true'] {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}
.sdo-planos__painel[hidden] {
  display: none;
}
.sdo-planos__desc {
  margin-bottom: 1rem;
  opacity: 0.75;
}
.sdo-planos__grade {
  display: grid;
  gap: 0.75rem;
}
.sdo-plano {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid var(--fio-claro);
  background: color-mix(in srgb, var(--paper) 3%, transparent);
}
.sdo-plano h3 {
  font-family: var(--f-titulo);
  font-size: 1.2rem;
  font-weight: 700;
}
.sdo-plano__freq {
  font-size: 0.88rem;
  opacity: 0.7;
}
.sdo-plano__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.3rem 0 0.4rem;
}
.sdo-plano__preco .num {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--acid);
  white-space: nowrap;
}
.sdo-plano__preco small {
  font-size: 0.45em;
  font-weight: 500;
  vertical-align: 0.55em;
}
.sdo-plano__antes,
.sdo-plano__depois {
  font-size: 0.9rem;
  opacity: 0.75;
}
.sdo-plano .sdo-link {
  margin-top: 0.2rem;
}
.sdo-nota a {
  color: var(--acid);
}
@media (min-width: 720px) {
  .sdo-planos__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}