/*
 * O sistema visual das páginas novas (home, turma, coach, preços), 21/09/2026.
 * A home passou a usá-lo em 23/09/2026.
 *
 * Tirado da home do fundador (index.html): as mesmas cores, a mesma escala de
 * títulos em Plus Jakarta Sans, o texto em Inter, o botão cor de tinta com
 * seta, o link sublinhado, o aparelho e os painéis brancos de canto 6 px. O
 * cabeçalho e o rodapé ficam em casca.css. O que é só de uma página fica no
 * <style> dela.
 */

:root {
  --ink: #2F3338; --ink-2: #474C52; --muted: #5D6268; --paper: #F2F2F7;
  --panel: #E5E5ED; --coral: #F72F64; --line: #D7D8DE;
  /* As reservas (fonts.css) seguram o layout enquanto as fontes chegam. */
  --display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Reserva', sans-serif; --body: 'Inter', 'Inter Reserva', sans-serif;
  --marca: linear-gradient(135deg, #EF3963 0%, #FE7A57 58%, #FEB35E 100%);
  --treinador:
    radial-gradient(circle at 82% 24%, rgba(254,179,94,.58) 0 18%, rgba(254,179,94,0) 44%),
    radial-gradient(circle at 18% 88%, rgba(254,122,87,.48) 0 20%, rgba(254,122,87,0) 52%),
    linear-gradient(135deg, #EF3963 0%, #F72F64 48%, #FE5F67 100%);
  /*
   * A mola do site, uma só (23/09/2026): criticamente amortecida
   * (amortecimento 1.0, nada passa do alvo), amostrada em linear(). A curva
   * serve a qualquer "resposta" desde que a duração seja ~1,47 × a resposta:
   * 440 ms = resposta .3 (toque, seletor, menu, perguntas) e 590 ms =
   * resposta .4 (a barra compacta). Nenhum overshoot no site: nada aqui vem
   * de um gesto com momento.
   */
  --mola: linear(0, .115, .321, .517, .671, .783, .86, .911, .945, .966, .979, .987, .992, .995, .997, .998, 1);
  --mola-curta: 440ms;
  --mola-media: 590ms;
}
* { box-sizing: border-box; }
/* 84 px = a barra compacta (60) + folga: âncora e "pular para o conteúdo" não param debaixo dela. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
img, svg { max-width: 100%; height: auto; display: block; }
p, h1, h2, h3, figure, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
p { max-width: 58ch; }

.shell { width: min(1440px, 100% - 96px); margin-inline: auto; }
.skip { position: absolute; top: -100px; left: 8px; background: #fff; padding: 12px; z-index: 10; }
.skip:focus { top: 8px; }

/* ── Tipografia ─────────────────────────────────────────────────────────── */
/*
 * Tracking por tamanho (23/09/2026), em em para acompanhar o clamp() sozinho:
 * aperta no grande, zero no texto corrido, abre um pouco no miúdo. Antes o
 * título estava a -.055em e as palavras colavam ("Seutreino temturma.").
 *   título (até 84 px)  -.025em, entrelinha 1,05   (o guia de marca pede -2%)
 *   h2 (30 a 56 px)     -.018em
 *   h3 (22 a 26 px)     -.01em
 *   17 a 20 px          -.005em
 *   texto corrido       0
 *   rótulos de 12-13 px +.01em;  selos de 10 px +.02em
 */
.rotulo { font-size: 15px; font-weight: 600; margin-bottom: 22px; }
/* 5.2vw/76 px, e não 5.6vw/84 px: com o tracking novo, "Sua mesa inteira."
   não cabia mais na coluna de 623 px e o título do /coach ia a 4 linhas. */
.titulo { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.lede { font-size: 17px; line-height: 1.55; margin-top: 25px; max-width: 34ch; }
.h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -.018em; }
.h3 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.apoio { color: var(--muted); font-size: 17px; margin-top: 22px; }
.miudo { font-size: 12px; color: var(--muted); margin-top: 11px; max-width: 46ch; letter-spacing: .01em; }

/* ── Ações ──────────────────────────────────────────────────────────────── */
/*
 * Resposta ao toque (23/09/2026): o botão cede no pointer-down (escala .97 em
 * 100 ms) e volta com a mola. O empurrão da seta e o fundo do hover só onde
 * existe hover de verdade, para não ficarem "presos" depois de um toque.
 */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--ink); color: #fff; border: 1px solid var(--ink); padding: 14px 19px; border-radius: 4px; font-size: 14px; font-weight: 600; transition: transform var(--mola-curta) var(--mola), background-color .18s; }
.button span { font-size: 21px; line-height: 1; transition: transform .18s; }
.textlink { display: inline-flex; align-items: center; gap: 20px; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-weight: 600; font-size: 14px; transition: transform var(--mola-curta) var(--mola), gap .18s; }

.store-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.store-badge { min-width: 132px; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 0 12px 28px rgba(47,51,56,.12); transition: transform var(--mola-curta) var(--mola), background-color .18s; }
/* "Em breve" diz o que é em vez de parecer um botão apagado: selo cheio,
   contorno tracejado (o mesmo "em breve" dos planos) e o rótulo legível. */
.store-badge.is-soon { background: #fff; color: var(--ink); border: 1px dashed #A9ADB3; box-shadow: none; cursor: default; }
.store-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.store-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.05; }
.store-copy small { font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.store-copy strong { font-family: var(--display); font-size: 14px; font-weight: 700; }

@media (hover: hover) {
  .button:hover, a.store-badge:hover { background: var(--ink-2); }
  .button:hover span { transform: translateX(4px); }
  .textlink:hover { gap: 27px; }
  a.store-badge:hover { transform: translateY(-1px); }
}
.button:active, a.store-badge:active, .textlink:active { transform: scale(.97); transition: transform 100ms ease-out, background-color .18s; }

/* ── Abertura: texto à esquerda, palco com as telas à direita ───────────── */
.abertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: stretch; padding: 30px 0 18px; }
.abertura .texto { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
/* overflow: clip, e não hidden: um hidden vira contêiner de rolagem, e aí o
   view() dos aparelhos mediria este palco, que nunca rola, em vez da página. */
.palco { position: relative; min-height: 600px; border-radius: 6px; overflow: hidden; overflow: clip; }
.palco.marca { background: var(--marca); }
.palco.treinador { background: var(--treinador); }
.palco.cinza { background: var(--panel); }

/* ── O aparelho: um só no site inteiro (23/09/2026) ─────────────────────── */
/*
 * Uma moldura CSS única, com borda e raio proporcionais à largura (--w), para
 * valer em qualquer tamanho, e SEM ilha em CSS: os prints do iPhone 17 Pro já
 * trazem a Ilha Dinâmica. Três camadas, cada uma com um trabalho:
 *
 *   .aparelho        a largura e a sombra no chão. O filter fica neste
 *                    invólucro de fora para não achatar o 3D de dentro.
 *   .aparelho-corpo  a moldura, e é quem inclina. O perspective() vai dentro
 *                    do transform, e não num pai: independe dos invólucros.
 *   .aparelho-tela   a tela: proporção do iPhone 17 Pro (1206 x 2622), canto
 *                    e recorte. A proporção reserva o espaço antes da imagem
 *                    chegar (nada de CLS).
 *
 * O print-01 (check-in) e o print-03 (alunos) vêm com uma moldura fotografada
 * dentro da própria imagem. Até a recaptura sem moldura, só a tela deles entra
 * aqui (.recorte-01 e .recorte-03, medidos em pixels da imagem): a moldura de
 * dentro e a auréola clara em volta dela ficam de fora do recorte.
 *
 * Em cena (hero, portas, palcos) o aparelho descansa num ângulo só, legível:
 * perspective(1400px) rotateY(-8deg). Os pares de telas ficam de frente.
 */
.aparelho { --w: 220px; position: relative; flex: 0 1 var(--w); width: var(--w); min-width: 0; margin: 0; filter: drop-shadow(0 22px 36px rgba(47,51,56,.26)); }
.aparelho-corpo { position: relative; padding: 4.1%; border-radius: 17% / 8%; background: linear-gradient(135deg, #11151a, #050609); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 3px #0b0d10; }
.aparelho-corpo::after { content: ""; position: absolute; inset: 1.1% 2.3%; border-radius: 15.4% / 7.1%; border: 1px solid rgba(255,255,255,.09); pointer-events: none; }
.aparelho-tela { position: relative; aspect-ratio: 1206 / 2622; overflow: hidden; border-radius: 14% / 6.3%; background: #000; }
.aparelho-tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* print-01: tela em x 67-818 e y 62-1717 de 886 x 1776 */
.aparelho-tela img.recorte-01 { position: absolute; left: -8.92%; top: -4.5%; width: 117.98%; max-width: none; height: auto; }
/* print-03: tela em x 52-795 e y 45-1680 de 848 x 1733 */
.aparelho-tela img.recorte-03 { position: absolute; left: -6.99%; top: -3.34%; width: 113.98%; max-width: none; height: auto; }
.aparelho.em-cena .aparelho-corpo { transform: perspective(1400px) rotateX(0deg) rotateY(-8deg) rotateZ(0deg) scale(1); }

/*
 * O ângulo segue a rolagem (Alternativa B da proposta): o aparelho entra
 * inclinado e endireita até o repouso enquanto sobe na tela, parando reto
 * antes do meio (cover 40%). Rolar de volta inclina de novo, do ponto em que
 * está. Sem JavaScript; roda no compositor. Sem suporte (Firefox, Safari
 * antigo) ou com movimento reduzido, fica o repouso.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aparelho[data-entra] .aparelho-corpo {
      animation: endireita linear both;
      animation-timeline: view();           /* depois do shorthand, que o zera */
      animation-range: entry 15% cover 40%;
    }
  }
}
@keyframes endireita {
  from { transform: perspective(1400px) rotateX(14deg) rotateY(-22deg) rotateZ(4deg) scale(.94); }
  to   { transform: perspective(1400px) rotateX(0deg) rotateY(-8deg) rotateZ(0deg) scale(1); }
}

/* ── Faixa de uma linha, como a da home ─────────────────────────────────── */
.strap { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); gap: 24px; padding: 24px 0; font-size: 13px; letter-spacing: .01em; }
.strap a { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.secao { padding: 100px 0 0; }
.cabeca { display: grid; grid-template-columns: 1fr 1.65fr; gap: 70px; margin-bottom: 40px; }
.cabeca .nota { font-size: 15px; max-width: 230px; padding-top: 8px; }
.cabeca p:not(.nota) { color: var(--muted); font-size: 17px; margin-top: 24px; }

/* Grade de cartões brancos, em larguras diferentes de propósito */
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cartao { background: #fff; border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.cartao .num { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.cartao p { color: var(--muted); }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }

/* Painel branco com duas telas num fundo cinza (o `.product` da home) */
.produto { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border-radius: 6px; overflow: hidden; }
.produto.inverte { grid-template-columns: 1fr 1.1fr; }
.produto.inverte .copia { order: 2; }
.produto .copia { padding: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.produto .copia p { margin: 22px 0 0; color: var(--muted); }
.produto .copia .textlink { margin-top: 26px; }
.telas { min-height: 520px; display: flex; gap: 30px; padding: 44px 34px 0; overflow: hidden; background: var(--panel); align-items: flex-start; justify-content: center; }
.telas .aparelho { --w: 230px; }
.telas .aparelho:nth-child(2) { margin-top: 58px; }

/* Colunas com fio de tinta em cima (os `.detail` da home) */
.colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 70px; padding: 56px 0 0; }
.colunas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coluna { border-top: 1px solid var(--ink); padding-top: 22px; }
.coluna p { margin-top: 14px; color: var(--muted); }
.coluna .h3 { font-size: 22px; }

/* Painel escuro, para o que merece peso */
.escuro { background: var(--ink); color: #fff; border-radius: 6px; padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.escuro p { color: rgba(255,255,255,.78); margin-top: 20px; }
.escuro .rotulo { color: rgba(255,255,255,.78); }

/* Fecho */
.finish { border-top: 1px solid var(--line); padding: 48px 0 0; margin-top: 100px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.finish h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.018em; line-height: 1.15; font-weight: 800; }
.finish .direita { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Perguntas. A resposta abre deslizando (block-size até auto, com a mola) e
   o "+" gira 45° até virar "×" em vez de trocar de caractere: o ícone aponta
   o que vai acontecer. Onde ::details-content ou interpolate-size não
   existem, abre seco, como antes. */
.perguntas { border-top: 1px solid var(--ink); interpolate-size: allow-keywords; }
.perguntas details { border-bottom: 1px solid var(--line); }
.perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.005em; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-family: var(--body); font-weight: 400; font-size: 26px; line-height: 1; transition: transform var(--mola-curta) var(--mola); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--mola-curta) var(--mola), content-visibility var(--mola-curta) allow-discrete; }
.perguntas details[open]::details-content { block-size: auto; }
.perguntas details p { color: var(--muted); padding: 0 0 24px; max-width: 70ch; }

@media (max-width: 1050px) {
  .shell { width: calc(100% - 48px); }
  .abertura { grid-template-columns: 1fr; gap: 28px; }
  .palco { min-height: 520px; }
  .cabeca { gap: 35px; }
  .produto .copia { padding: 34px; }
  .telas { min-height: 460px; gap: 22px; padding-inline: 22px; }
  .telas .aparelho { --w: 190px; }
  .escuro { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
  .colunas.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c7, .c5, .c4, .c8, .c6 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .shell { width: calc(100% - 36px); }
  .abertura { padding-top: 16px; }
  .titulo { font-size: clamp(38px, 12.3vw, 48px); }
  .lede { font-size: 15px; margin-top: 18px; }
  .palco { min-height: 440px; }
  .secao { padding-top: 64px; }
  .cabeca { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .cabeca .nota { max-width: none; }
  .cabeca p:not(.nota), .apoio { font-size: 15px; }
  .h2 { font-size: 34px; }
  .grade { grid-template-columns: 1fr; gap: 12px; }
  .c7, .c5, .c4, .c8, .c6, .c12 { grid-column: auto; }
  .cartao { padding: 26px; }
  .produto, .produto.inverte { grid-template-columns: 1fr; }
  .produto.inverte .copia { order: 0; }
  .produto .copia { padding: 30px 26px; }
  /* No celular, uma tela por vez, a ~64vw, num carrossel com scroll-snap: a
     rolagem nativa projeta o momento e o snap escolhe a tela, sem JavaScript.
     A segunda aparece na borda, para dizer que há mais. */
  .telas { --tela: min(64vw, 260px); min-height: 0; height: auto; justify-content: flex-start; gap: 16px; padding: 26px calc((100% - var(--tela)) / 2) 36px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .telas::-webkit-scrollbar { display: none; }
  .telas .aparelho { --w: var(--tela); flex: 0 0 var(--w); scroll-snap-align: center; }
  .telas .aparelho:nth-child(2) { margin-top: 0; }
  .colunas, .colunas.tres { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .escuro { padding: 30px 26px; }
  .strap { align-items: flex-start; font-size: 12px; }
  .finish { flex-direction: column; align-items: flex-start; margin-top: 64px; }
  .perguntas summary { font-size: 17px; }
}
/*
 * Movimento reduzido, componente por componente (23/09/2026), no lugar do
 * antigo `* { transition: none !important }`. Nada desliza nem muda de escala;
 * cor e opacidade, que ajudam a entender, continuam.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .textlink, a.store-badge { transition: background-color .18s, color .18s, opacity .18s; }
  .button span { transition: none; }
  .button:hover span { transform: none; }
  .textlink:hover { gap: 20px; }
  a.store-badge:hover { transform: none; }
  .button:active, a.store-badge:active, .textlink:active { transform: none; transition: none; }
  .button:active, a.store-badge:active { background: var(--ink-2); }
  .textlink:active { opacity: .6; }
  .perguntas summary::after, .perguntas details::details-content { transition: none; }
}