/* HOF Manager · site. Celular primeiro (393 px), depois iPad e computador (docs/Plano do site.md, seções 3 e 3.2).
   Cores e fonte do brand/tokens.css + quase branco #f8f8fa (decisão de 23/10). */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fontes/figtree-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fontes/figtree-latin-500-normal.woff2') format('woff2'); }

:root {
  --hm-fonte: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --hm-branco: #ffffff;
  --hm-quase-branco: #f8f8fa;
  --hm-gelo: #ebf0f2;
  --hm-cinza-100: #e1e7ea;
  --hm-cinza-500: #5a6266;   /* texto apagado: 5,9:1 sobre #f8f8fa */
  --hm-cinza-800: #2b3134;
  --hm-cinza-900: #171b1d;
  --hm-preto: #000000;

  --estelar: #ece7de;        /* borda do iPad estelar */
  --estelar-sombra: #d6cfc2;

  --peso-titulo: 300;
  --curva-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entra-sai: cubic-bezier(0.65, 0, 0.35, 1);
  --tempo-curto: 300ms;
  --tempo-medio: 700ms;
  --tempo-longo: 1000ms;

  --margem: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --altura-topo: 56px;
  --raio: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + 16px); }
body {
  margin: 0; background: var(--hm-branco); color: var(--hm-cinza-900);
  font-family: var(--hm-fonte); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--hm-preto); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--hm-preto); color: #fff; padding: 10px 14px; border-radius: 10px; }
.pular:focus { top: calc(env(safe-area-inset-top) + 8px); }

.limite { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--margem); }
.limite-leitura { max-width: 760px; }
.faixa-branca { background: var(--hm-branco); }
.faixa-clara { background: var(--hm-quase-branco); }
section { padding-block: 56px; }

h1, h2 { font-weight: var(--peso-titulo); letter-spacing: -0.025em; color: var(--hm-preto); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.1; }
h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 12px; font-weight: 500; font-size: 0.9375rem; text-decoration: none; letter-spacing: 0.005em;
  transition: transform var(--tempo-curto) var(--curva-suave), background-color var(--tempo-curto) var(--curva-suave);
  -webkit-tap-highlight-color: transparent;
}
.botao-cheio { background: var(--hm-preto); color: var(--hm-branco); }
.botao-cheio:active { transform: scale(0.98); }
@media (hover: hover) { .botao-cheio:hover { background: var(--hm-cinza-800); } }
.botao-pequeno { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; border-radius: 12px; background: var(--hm-preto); color: #fff; }
.link-calmo {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--hm-cinza-100);
  transition: text-decoration-color var(--tempo-curto) var(--curva-suave);
}
@media (hover: hover) { .link-calmo:hover { text-decoration-color: currentColor; } }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--tempo-curto) var(--curva-suave);
}
.topo.rolou { border-bottom-color: var(--hm-cinza-100); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--altura-topo); }
.marca img { width: 116px; height: auto; }
.menu-largo, .so-largo { display: none; }
.abrir-menu {
  min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer;
}

.gaveta {
  position: fixed; inset: 0; z-index: 15; background: var(--hm-branco);
  padding: calc(env(safe-area-inset-top) + var(--altura-topo) + 24px) var(--margem) calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column; justify-content: space-between; overscroll-behavior: contain; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); transition: opacity 400ms var(--curva-suave), transform 400ms var(--curva-suave);
}
.gaveta.aberta { opacity: 1; transform: none; }
.gaveta nav { display: grid; }
.gaveta nav a { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--hm-cinza-100); }
html.menu-aberto { overflow: hidden; }

/* Hero */
.hero { padding-top: 24px; padding-bottom: 48px; overflow: clip; }
.hero-grade { display: grid; gap: 32px; }
.titulo-hero { font-size: clamp(2.125rem, 1.45rem + 3.6vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 13ch; }
.hero-apoio { margin-top: 16px; color: var(--hm-cinza-800); max-width: 36ch; }
.hero-acoes { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.hero-acoes .botao { flex: 1 1 100%; }
.hero-palco { margin-right: calc(-1 * var(--margem) - 18%); }   /* o iPad sai pela borda direita no celular */

/* Aparelho: iPad estelar (provisório até as molduras oficiais) */
.aparelho { position: relative; }
.ipad {
  position: relative; aspect-ratio: 1180 / 820; border-radius: 4.4% / 6.3%;
  padding: 1.15%; background: linear-gradient(145deg, #f3efe8, var(--estelar) 45%, var(--estelar-sombra));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 30px 60px -28px rgb(23 27 29 / 0.32), 0 12px 24px -16px rgb(23 27 29 / 0.18);
}
.ipad::before { /* vidro frontal fino */
  content: ""; position: absolute; inset: 1.15%; border-radius: 3.4% / 4.9%; background: #1d1f21;
}
.ipad-tela {
  position: absolute; inset: 2.1%; border-radius: 2.6% / 3.8%; overflow: hidden; background: var(--hm-quase-branco);
  container-type: inline-size;
}

/* Peça solta: o detalhe legível, flutuando sobre o iPad */
.peca {
  position: absolute; left: 0; bottom: -28px; z-index: 2; display: grid; gap: 2px; min-width: 196px; max-width: 76%;
  padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgb(23 27 29 / 0.06), 0 18px 40px -18px rgb(23 27 29 / 0.35);
}
.peca-rotulo { font-size: 0.8125rem; color: var(--hm-cinza-500); }
.peca strong, .peca-numero { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.peca-linha { font-size: 0.875rem; color: var(--hm-cinza-800); }
.peca-alerta .peca-rotulo { color: #8a4b12; }
.peca-hero { left: 6px; }

/* Vantagens */
.vantagens h2 { max-width: 16ch; }
.lista-vantagens { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.vantagem { padding: 24px 0; border-top: 1px solid var(--hm-cinza-100); }
.vantagem:last-child { border-bottom: 1px solid var(--hm-cinza-100); }
.vantagem p { margin-top: 8px; color: var(--hm-cinza-800); max-width: 44ch; }
.vantagem h3 { margin-top: 16px; }
.fragmento { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; }
.ficha-chip { font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.assinatura { font-size: 1.5rem; font-weight: 300; font-style: italic; letter-spacing: -0.02em; padding: 0 8px 2px; border-bottom: 1px solid var(--hm-cinza-900); line-height: 1.1; }
.assinatura-legenda { font-size: 0.8125rem; color: var(--hm-cinza-500); flex-basis: 100%; }
.fragmento-valor { gap: 14px; }
.fragmento-valor span { font-size: 0.875rem; color: var(--hm-cinza-500); }
.fragmento-valor strong { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fragmento-pasta { gap: 0; font-size: 0.875rem; }
.fragmento-pasta span { padding: 6px 12px; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.fragmento-pasta span:first-child { border-radius: 10px 0 0 10px; }
.fragmento-pasta span:last-child { border-radius: 0 10px 10px 0; font-weight: 500; }
.fragmento-pasta span + span { margin-left: 1px; }

/* Um dia na clínica */
.dia-cabeca p { margin-top: 16px; color: var(--hm-cinza-800); max-width: 40ch; }
.momentos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 56px; }
.hora { display: block; font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--hm-cinza-500); margin-bottom: 10px; }
.momento h3 { font-size: 1.3125rem; font-weight: 400; letter-spacing: -0.02em; }
.momento p { margin-top: 10px; color: var(--hm-cinza-800); max-width: 40ch; }
.selo { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: var(--hm-gelo); color: var(--hm-cinza-800); }
.aparelho-momento { margin-top: 24px; margin-right: calc(-1 * var(--margem) - 10%); margin-bottom: 28px; }
.dia-palco { display: none; }
.dia, .vantagens, .depoimentos, .faq, .final { overflow-x: clip; }  /* clip não quebra o iPad parado (sticky) */
.dia-mais { margin-top: 48px; }

/* Depoimentos */
.lista-depoimentos { margin-top: 32px; display: grid; gap: 20px; }
.depoimento { margin: 0; padding: 24px 20px; border-radius: var(--raio); background: var(--hm-branco); }
.depoimento blockquote { margin: 0; }
.depoimento p { font-size: 1.0625rem; line-height: 1.5; font-weight: 400; color: var(--hm-cinza-900); }
.depoimento figcaption { margin-top: 20px; display: grid; font-size: 0.9375rem; }
.depoimento figcaption span { color: var(--hm-cinza-500); }

/* FAQ */
.perguntas { margin-top: 24px; border-top: 1px solid var(--hm-cinza-100); }
.perguntas details { border-bottom: 1px solid var(--hm-cinza-100); }
.perguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 0; font-weight: 500; font-size: 1rem; -webkit-tap-highlight-color: transparent;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg);
  transition: transform 450ms var(--curva-entra-sai);
}
.perguntas details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.resposta { overflow: hidden; }
.resposta p { padding-bottom: 20px; color: var(--hm-cinza-800); max-width: 60ch; }

/* Chamada final */
.final { padding-block: 64px 72px; }
.final-grade { display: grid; gap: 16px; justify-items: start; }
.final h2 { max-width: 14ch; }
.final p { color: var(--hm-cinza-800); max-width: 38ch; }
.final .botao { margin-top: 10px; width: 100%; }

/* Rodapé */
.rodape { padding: 48px 0 calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hm-cinza-100); font-size: 0.875rem; }
.rodape-grade { display: grid; gap: 32px; }
.rodape-marca img { width: 116px; }
.rodape-marca p { margin-top: 12px; color: var(--hm-cinza-500); max-width: 30ch; }
.rodape-links, .rodape-contato { display: grid; }
.rodape a { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
@media (hover: hover) { .rodape a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.rodape-direitos { color: var(--hm-cinza-500); }

/* Barra fixa do celular */
.barra-orcamento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  padding: 8px var(--margem) calc(8px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--hm-cinza-100);
  transform: translateY(110%); transition: transform 500ms var(--curva-suave);
}
.barra-orcamento .botao { width: 100%; }
.barra-orcamento.visivel { transform: none; }

/* Telas fictícias (dentro do iPad). Tudo em cqw: a tela escala junto com o aparelho. */
.tl { display: grid; grid-template-columns: 19cqw 1fr; height: 100%; font-size: 1.45cqw; line-height: 1.35; color: var(--hm-cinza-900); }
.tl-menu { display: grid; align-content: start; gap: 0.4cqw; padding: 2.4cqw 1.6cqw; background: var(--hm-branco); border-right: 1px solid var(--hm-cinza-100); }
.tl-menu span { padding: 0.9cqw 1.2cqw; border-radius: 1cqw; color: var(--hm-cinza-800); }
.tl-menu .ativo { background: var(--hm-gelo); color: var(--hm-preto); font-weight: 500; }
.tl-menu .tl-marca { font-weight: 500; color: var(--hm-preto); padding-bottom: 2cqw; font-size: 1.6cqw; }
.tl-corpo { padding: 2.4cqw 2.8cqw; display: grid; align-content: start; gap: 1.8cqw; min-width: 0; }
.tl-topo { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.tl-topo b { display: block; font-size: 2.3cqw; font-weight: 500; letter-spacing: -0.02em; }
.tl-topo small { color: var(--hm-cinza-500); font-size: 1.3cqw; }
.tl-botao { padding: 1cqw 1.8cqw; border-radius: 1cqw; background: var(--hm-preto); color: #fff; font-weight: 500; white-space: nowrap; }

.tl-agenda { display: grid; grid-template-columns: 5.5cqw 1fr; gap: 0.9cqw 1.4cqw; align-items: stretch; }
.tl-agenda .h { color: var(--hm-cinza-500); font-variant-numeric: tabular-nums; padding-top: 1cqw; }
.ag { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5cqw; padding: 1cqw 1.6cqw; border-radius: 1.1cqw; border-left: 0.45cqw solid var(--cor-forte); background: var(--cor); }
.ag b { font-weight: 500; }
.ag small { grid-column: 1; color: var(--hm-cinza-800); font-size: 1.25cqw; }
.ag i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 1.15cqw; color: var(--hm-cinza-800); padding: 0.4cqw 1cqw; border-radius: 99px; background: rgb(255 255 255 / 0.7); }
.c1 { --cor: #e8eff5; --cor-forte: #9fb6c9; }
.c2 { --cor: #f4e9ea; --cor-forte: #cfa4aa; }
.c3 { --cor: #e9f0ea; --cor-forte: #9fbca6; }
.c4 { --cor: #f1ece3; --cor-forte: #c9b796; }
.ag.livre { background: none; border: 1px dashed var(--hm-cinza-100); border-left-width: 1px; color: var(--hm-cinza-500); }

.tl-pessoa { display: flex; align-items: center; gap: 1.4cqw; }
.tl-avatar { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--hm-gelo); font-weight: 500; }
.tl-abas { display: flex; gap: 0.6cqw; border-bottom: 1px solid var(--hm-cinza-100); }
.tl-abas span { padding: 0.8cqw 1.4cqw; color: var(--hm-cinza-500); }
.tl-abas .ativo { color: var(--hm-preto); font-weight: 500; box-shadow: 0 2px 0 var(--hm-preto); }
.tl-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.tl-painel { background: var(--hm-branco); border-radius: 1.3cqw; padding: 1.6cqw; display: grid; gap: 0.8cqw; align-content: start; box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.tl-painel b { font-weight: 500; }
.tl-painel small { color: var(--hm-cinza-500); font-size: 1.25cqw; }
.tl-largo { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
.tl-largo small { grid-column: 1; }
.tl-assinado { grid-row: 1 / span 2; grid-column: 2; font-size: 1.2cqw; padding: 0.6cqw 1.2cqw; border-radius: 99px; background: #e9f0ea; color: #2f5a3a; }
.tl-linhas { display: grid; gap: 0.7cqw; margin-top: 0.4cqw; }
.tl-linhas span { height: 0.9cqw; border-radius: 1cqw; background: var(--hm-gelo); }
.tl-linhas .curta { width: 60%; }
.tl-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; }
.tl-fotos span { aspect-ratio: 3 / 4; border-radius: 0.8cqw; background: linear-gradient(160deg, #efe6df, #e2d6cc 60%, #d8cabd); }

.tl-tabela { background: var(--hm-branco); border-radius: 1.3cqw; box-shadow: 0 0 0 1px var(--hm-cinza-100); overflow: hidden; }
.tr { display: grid; grid-template-columns: 1fr 9cqw 9cqw 5cqw; gap: 1cqw; padding: 1.15cqw 1.8cqw; border-top: 1px solid var(--hm-cinza-100); font-variant-numeric: tabular-nums; }
.tr.th { border-top: 0; color: var(--hm-cinza-500); font-size: 1.25cqw; }
.tr.alerta { background: #fbf3e8; }
.tr.alerta span:last-child { color: #8a4b12; font-weight: 500; }

.tl-slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.tl-slide { aspect-ratio: 4 / 3; border-radius: 1.3cqw; padding: 1.6cqw; display: grid; align-content: end; gap: 0.3cqw; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.tl-slide:first-child { background: linear-gradient(160deg, #f4ede6, #ebe1d6); }
.tl-slide small { color: var(--hm-cinza-500); font-size: 1.2cqw; }
.tl-slide b { font-size: 1.8cqw; font-weight: 500; letter-spacing: -0.01em; }
.tl-slide span { color: var(--hm-cinza-800); font-size: 1.25cqw; }
.tl-total { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 1.8cqw 2cqw; border-radius: 1.3cqw; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.tl-total b { grid-row: 1 / span 2; grid-column: 2; font-size: 2.6cqw; font-weight: 400; letter-spacing: -0.02em; }
.tl-total small { color: var(--hm-cinza-500); font-size: 1.2cqw; }

.tl-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.tl-numeros div { padding: 1.6cqw; border-radius: 1.3cqw; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.tl-numeros small { display: block; color: var(--hm-cinza-500); font-size: 1.25cqw; }
.tl-numeros b { font-size: 2.5cqw; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tl-grafico { display: flex; align-items: end; gap: 1.2cqw; height: 22cqw; padding: 2cqw; border-radius: 1.3cqw; background: var(--hm-branco); box-shadow: 0 0 0 1px var(--hm-cinza-100); }
.tl-grafico span { flex: 1; height: var(--a); border-radius: 0.6cqw 0.6cqw 0.2cqw 0.2cqw; background: var(--hm-gelo); }
.tl-grafico .atual { background: var(--hm-cinza-900); }

/* Movimento. Entrada: opacidade + subida curta; desfoque só nas palavras do título. */
.js .revelar { opacity: 0; transform: translateY(20px); transition: opacity var(--tempo-medio) var(--curva-suave), transform var(--tempo-medio) var(--curva-suave); }
.js .revelar.visivel { opacity: 1; transform: none; }
.js .titulo-hero .palavra { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(8px); transition: opacity 900ms var(--curva-suave), transform 900ms var(--curva-suave), filter 900ms var(--curva-suave); transition-delay: calc(var(--i) * 60ms + 80ms); }
.js .carregado .titulo-hero .palavra { opacity: 1; transform: none; filter: none; }
.js .hero-apoio, .js .hero-acoes { opacity: 0; transform: translateY(14px); transition: opacity var(--tempo-medio) var(--curva-suave), transform var(--tempo-medio) var(--curva-suave); }
.js .carregado .hero-apoio { opacity: 1; transform: none; transition-delay: 450ms; }
.js .carregado .hero-acoes { opacity: 1; transform: none; transition-delay: 580ms; }
.js .hero-palco .aparelho { opacity: 0; transform: translateY(32px) scale(0.985); transition: opacity var(--tempo-longo) var(--curva-suave), transform 1400ms var(--curva-suave); transition-delay: 300ms; }
.js .carregado .hero-palco .aparelho { opacity: 1; transform: none; }
.js .peca-hero { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--curva-suave), transform 800ms var(--curva-suave); transition-delay: 1100ms; }
.js .carregado .peca-hero { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
  .js .revelar, .js .titulo-hero .palavra, .js .hero-apoio, .js .hero-acoes, .js .hero-palco .aparelho, .js .peca-hero { opacity: 1; transform: none; filter: none; }
}

/* iPad e celular deitado: 700 px ou mais */
@media (min-width: 700px) {
  :root { --margem: max(40px, env(safe-area-inset-left), env(safe-area-inset-right)); --altura-topo: 68px; }
  section { padding-block: 96px; }
  body { font-size: 17px; }
  .botao { min-height: 52px; font-size: 1rem; }
  .hero { padding-top: 56px; padding-bottom: 96px; }
  .hero-acoes .botao { flex: 0 0 auto; }
  .hero-palco { margin-right: calc(-1 * var(--margem) - 8%); }
  .lista-vantagens { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .vantagem:nth-last-child(2) { border-bottom: 1px solid var(--hm-cinza-100); }
  .lista-depoimentos { grid-template-columns: 1fr 1fr; }
  .final .botao { width: auto; }
  .rodape { padding-bottom: 56px; }
  .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .rodape-direitos { grid-column: 1 / -1; }
  .barra-orcamento { display: none; }
  .peca { bottom: -36px; }
}

/* Computador e iPad deitado: o iPad do "dia" fica parado e as telas trocam */
@media (min-width: 1024px) {
  .menu-largo { display: flex; gap: 32px; font-size: 0.9375rem; }
  .menu-largo a { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .so-largo { display: inline-flex; }
  .abrir-menu { display: none; }
  .marca img { width: 150px; }
  .hero { padding-top: 72px; }
  .hero-grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; }
  .hero-palco { margin-right: calc(-1 * var(--margem) - 14%); }
  .dia-grade { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; margin-top: 24px; }
  .momentos { gap: 0; margin-top: 0; }
  .momento { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; }
  .momento .hora { transition: color var(--tempo-medio) var(--curva-suave); }
  .momento.ativo .hora { color: var(--hm-preto); }
  .aparelho-momento { display: none; }
  .dia-palco { display: block; position: relative; }
  .aparelho-palco { position: sticky; top: calc(50svh - 18vw); margin-right: calc(-1 * var(--margem) - 6%); }
  .aparelho-palco .ipad-tela > .tl { position: absolute; inset: 0; opacity: 0; transition: opacity var(--tempo-longo) var(--curva-entra-sai); }
  .aparelho-palco .ipad-tela > .tl.ativa { opacity: 1; }
  .aparelho-palco .peca { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--curva-suave), transform 600ms var(--curva-suave); }
  .aparelho-palco .peca.ativa { opacity: 1; transform: none; transition-delay: 250ms; }
}

/* Páginas legais (privacidade, termos, 404) */
.legal { padding-top: 32px; padding-bottom: 64px; }
.legal h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); line-height: 1.08; }
.legal-data { margin-top: 8px; color: var(--hm-cinza-500); font-size: 0.875rem; }
.legal > p, .legal ul { margin-top: 16px; color: var(--hm-cinza-800); }
.legal h1 + .legal-data + p { margin-top: 24px; }
.legal h2 { margin-top: 40px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.legal h2 + h2 { margin-top: 16px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal a { text-underline-offset: 3px; }
.tabela-legal { margin-top: 16px; }
.tabela-legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabela-legal th, .tabela-legal td { text-align: left; vertical-align: top; padding: 12px 0; border-top: 1px solid var(--hm-cinza-100); }
.tabela-legal th { color: var(--hm-cinza-500); font-weight: 500; font-size: 0.8125rem; }
.tabela-legal td:first-child { font-weight: 500; padding-right: 16px; width: 38%; }
@media (max-width: 599px) {
  .tabela-legal thead { display: none; }
  .tabela-legal tr { display: block; padding: 12px 0; border-top: 1px solid var(--hm-cinza-100); }
  .tabela-legal td { display: block; border: 0; padding: 0; width: auto; }
  .tabela-legal td + td { margin-top: 4px; color: var(--hm-cinza-800); }
  .tabela-legal td:first-child { width: auto; padding-right: 0; }
}
.pagina-legal .rodape { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.nao-encontrada { min-height: 70svh; display: grid; align-content: center; justify-items: start; gap: 16px; padding-block: 64px; }
.nao-encontrada h1 { font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.05; max-width: 14ch; }
.nao-encontrada p { color: var(--hm-cinza-800); max-width: 36ch; }
.nao-encontrada .acoes { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; margin-top: 8px; }
@media (min-width: 700px) { .legal { padding-top: 64px; padding-bottom: 96px; } }