/* Página do produto Treinali (treinali.com.br). Identidade "Força" (ADR 0078): preto e amarelo, Barlow, cantos retos.
   Sem estilo inline e sem nada de fora (a CSP só aceita o próprio site). */

@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(/fontes/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/fontes/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/fontes/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url(/fontes/barlow-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/fontes/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fontes/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/fontes/barlow-condensed-latin-800-normal.woff2) format('woff2'); }

:root {
  color-scheme: light dark;
  --fundo: #f2f1ec;
  --superficie: #ffffff;
  --superficie-2: #faf9f5;
  --texto: #111111;
  --texto-suave: #55534d;
  --borda: #dad8d0;
  --amarelo: #facc15;
  --amarelo-forte: #fde047;
  --amarelo-suave: #fef9c3;
  --preto: #111111;
  --escuro: #0b0b0a;
  --escuro-2: #161614;
  --escuro-3: #22211e;
  --escuro-borda: #2e2d29;
  --escuro-texto: #f2f1ec;
  --escuro-suave: #a3a099;
  --verde: #1a7f37;
  --verde-suave: #e6f4ea;
  --vermelho: #d92d20;
  --vermelho-suave: #fef3f2;
  --sombra: 0 1px 2px rgb(17 17 17 / 6%), 0 12px 32px -12px rgb(17 17 17 / 22%);
  --sombra-grande: 0 30px 80px -24px rgb(0 0 0 / 55%);
  --raio: 4px;
  --raio-grande: 6px;
  --fonte-titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fonte-texto: Barlow, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largura: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b0b0a;
    --superficie: #1a1a18;
    --superficie-2: #141412;
    --texto: #f2f1ec;
    --texto-suave: #a3a099;
    --borda: #2e2d29;
    --amarelo-suave: #3a3410;
    --verde: #6fd08c;
    --verde-suave: #16301f;
    --vermelho: #ff6b5e;
    --vermelho-suave: #3a1d1b;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -12px rgb(0 0 0 / 70%);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.05; margin: 0; letter-spacing: 0.005em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }

.largura { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.largura-estreita { max-width: 860px; }
@media (max-width: 599px) { .largura { padding: 0 16px; } }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--amarelo); color: var(--preto); font-weight: 700; border-radius: var(--raio);
}
.pular:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--raio);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.botao:active { transform: translateY(1px); }
.botao-amarelo { background: var(--amarelo); color: var(--preto); }
.botao-amarelo:hover { background: var(--amarelo-forte); }
.botao-contorno { border-color: #45433d; color: var(--escuro-texto); background: transparent; }
.botao-contorno:hover { border-color: var(--amarelo); color: var(--amarelo); }
.botao-pequeno { min-height: 42px; padding: 0 18px; font-size: 1rem; }
.botao-largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }
.icone-whats { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--escuro);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.topo.rolou { border-bottom-color: var(--escuro-borda); background: rgb(11 11 10 / 92%); }
.topo-dentro { max-width: var(--largura); margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; gap: 16px; }

.marca {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--escuro-texto);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.01em; text-transform: uppercase;
}
.marca-icone { width: 36px; height: 36px; }
.icone-fundo { fill: #111111; stroke: #45433d; stroke-width: 1.5; }
.icone-barra { fill: var(--amarelo); }

.navegacao { display: flex; gap: 4px; margin-left: auto; }
.navegacao a { white-space: nowrap;
  padding: 8px 10px; border-radius: var(--raio); text-decoration: none; color: #d6d4cd;
  font-weight: 500; font-size: 0.98rem; transition: color .15s ease, background-color .15s ease;
}
.navegacao a:hover { color: #fff; background: var(--escuro-3); }
.topo-acao, .topo-entrar { flex-shrink: 0; }
/* O link para o sistema: botão no topo; nas telas estreitas, onde não cabe, vira o último item do menu. */
.navegacao-entrar { display: none; }

.abrir-menu {
  display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--escuro-borda);
  border-radius: var(--raio); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.abrir-menu span { display: block; width: 20px; height: 2px; background: var(--escuro-texto); transition: transform .2s ease, opacity .2s ease; }
.abrir-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
  .topo-dentro { gap: 12px; padding: 0 16px; height: 64px; }
  .abrir-menu { display: flex; }
  .topo-entrar { order: 2; margin-left: auto; }
  .topo-acao { order: 2; }
  .abrir-menu { order: 3; margin-left: 0; }
  .navegacao {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: 8px 16px 16px; background: var(--escuro); border-bottom: 1px solid var(--escuro-borda);
    display: none;
  }
  .navegacao.aberta { display: flex; }
  .navegacao a { padding: 14px 8px; font-size: 1.1rem; border-bottom: 1px solid var(--escuro-3); border-radius: 0; }
}
@media (max-width: 599px) {
  .topo-entrar { display: none; }
  .topo-acao { margin-left: auto; }
  .navegacao .navegacao-entrar { display: block; color: var(--amarelo); font-weight: 700; border-bottom: 0; }
}
@media (max-width: 419px) {
  .marca { font-size: 1.45rem; }
  .marca-icone { width: 32px; height: 32px; }
  .topo-acao { padding: 0 12px; font-size: 0.92rem; }
}

/* ---------- Sobretítulos e títulos ---------- */
.sobretitulo {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amarelo);
}
.sobretitulo::before { content: ''; width: 28px; height: 3px; background: currentColor; }
.sobretitulo .ponto { display: none; }
.sobretitulo-escuro { color: var(--texto); }
.sobretitulo-escuro::before { background: var(--amarelo); }

.titulo-secao {
  font-weight: 800; font-size: clamp(2.1rem, 4.2vw, 3.4rem); text-transform: uppercase; max-width: 20ch; text-wrap: balance;
}
.introducao { margin-top: 16px; max-width: 60ch; color: var(--texto-suave); font-size: 1.15rem; }

/* ---------- Abertura ---------- */
.abertura {
  position: relative; overflow: hidden; background: var(--escuro); color: var(--escuro-texto);
  padding: 72px 0 96px; isolation: isolate;
}
.faixa-grade {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
}
.abertura::after {
  content: ''; position: absolute; z-index: -1; right: -12%; top: -20%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgb(250 204 21 / 16%), transparent);
}
.abertura-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.abertura h1 {
  font-weight: 800; font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: .95; text-transform: uppercase; letter-spacing: 0;
}
.abertura h1 em { display: block; font-style: normal; color: var(--amarelo); }
.abertura-resumo { margin-top: 24px; max-width: 54ch; font-size: 1.2rem; color: #c9c6bc; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.abertura-garantias {
  list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px;
  color: var(--escuro-suave); font-size: 0.98rem;
}
.abertura-garantias li { display: inline-flex; align-items: center; gap: 8px; }
.abertura-garantias li::before {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: var(--amarelo);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abertura-telas { position: relative; padding: 0 96px 72px 0; }
@media (max-width: 599px) { .abertura-telas { padding: 0 56px 96px 0; } }

@media (max-width: 999px) {
  .abertura { padding: 48px 0 64px; }
  .abertura-dentro { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .abertura-telas { max-width: 640px; }
}

/* ---------- Telas desenhadas (dados de exemplo) ---------- */
.janela {
  border-radius: 8px; overflow: hidden; background: #f2f1ec; color: #111;
  box-shadow: var(--sombra-grande), 0 0 0 1px rgb(255 255 255 / 8%);
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center;
  font-size: 11px; line-height: 1.35;
}
.janela-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1a1a18; }
.janela-barra span { width: 9px; height: 9px; border-radius: 50%; background: #45433d; }
.janela-barra b {
  margin-left: 10px; padding: 3px 12px; border-radius: 4px; background: #0b0b0a; color: #a3a099;
  font-weight: 500; font-size: 10px; flex: 1; max-width: 220px;
}
.janela-corpo { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-height: 330px; }

.m-menu { background: #111; color: #d6d4cd; padding: 12px 8px; }
.m-marca { display: flex; align-items: center; gap: 6px; padding: 0 6px 10px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 15px; text-transform: uppercase; color: #fff; }
.m-icone {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0; border-radius: 3px; background: #111 center / 70% no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 12 26 20'%3E%3Cpath fill='%23FACC15' d='M9 12h6v20H9zM29 12h6v20h-6zM9 19h26v6H9z'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px #45433d;
}
.m-grupo { margin: 10px 6px 3px; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #a3a099; }
.m-item { padding: 4px 8px; border-radius: 3px; }
.m-ativo { background: var(--amarelo); color: #111; font-weight: 700; }

.m-conteudo { padding: 14px 16px; min-width: 0; }
.m-titulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
.m-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-numero { background: #fff; border: 1px solid #dad8d0; border-radius: 5px; padding: 8px 10px; min-width: 0; }
.m-numero span { display: block; color: #55534d; font-size: 9.5px; }
.m-numero b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; }
.m-numero i { font-style: normal; font-size: 9px; font-weight: 600; }
.m-sobe { color: #1a7f37; }
.m-desce { color: #d92d20; }
.m-grafico { margin-top: 8px; background: #fff; border: 1px solid #dad8d0; border-radius: 5px; padding: 8px 10px; }
.m-grafico p { font-size: 9.5px; color: #55534d; }
.m-barras { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 4px; }
.m-barras i { flex: 1; background: #111; border-radius: 2px 2px 0 0; }
.m-barras .b1 { height: 42%; } .m-barras .b2 { height: 55%; } .m-barras .b3 { height: 48%; } .m-barras .b4 { height: 70%; }
.m-barras .b5 { height: 62%; } .m-barras .b6 { height: 78%; } .m-barras .b7 { height: 74%; } .m-barras .b8 { height: 96%; background: var(--amarelo); }
.m-lista { margin-top: 8px; background: #fff; border: 1px solid #dad8d0; border-radius: 5px; padding: 6px 10px; }
.m-lista-titulo { font-weight: 700; font-size: 10px; padding: 2px 0 4px; }
.m-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid #ecebe5; }
.m-linha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-linha span:nth-child(2) { color: #55534d; }
.m-selo {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 9px; font-weight: 700;
  background: #e9e7e0; color: #3f3d38; white-space: nowrap;
}
.m-selo-pago { background: #e6f4ea; color: #1a7f37; }
.m-selo-pix { background: #fef9c3; color: #5c4a00; }
.m-selo-atraso { background: #fef3f2; color: #b42318; }

.celular {
  position: relative; width: 214px; padding: 9px; border-radius: 34px; background: #050505;
  box-shadow: var(--sombra-grande), inset 0 0 0 1.5px #3f3d38;
}
.celular::before {
  content: ''; position: absolute; top: 16px; left: 50%; width: 62px; height: 18px; margin-left: -31px;
  border-radius: 10px; background: #050505; z-index: 2;
}
.celular-tela {
  height: 410px; border-radius: 26px; overflow: hidden; background: #f2f1ec; color: #111;
  padding: 42px 12px 12px; font-size: 11px; line-height: 1.35; display: grid; align-content: start; gap: 9px;
}
.celular-abertura { position: absolute; right: 0; bottom: 0; width: 196px; transform: rotate(3deg); }
.celular-abertura .celular-tela { height: 360px; }
@media (max-width: 599px) {
  .celular-abertura { width: 150px; padding: 6px; border-radius: 26px; }
  .celular-abertura .celular-tela { height: 290px; border-radius: 21px; padding: 32px 8px 8px; font-size: 9px; gap: 6px; }
  .celular-abertura::before { top: 11px; width: 44px; margin-left: -22px; height: 13px; }
  .celular-abertura .c-cartao-destaque b { font-size: 17px; }
  .janela-corpo { grid-template-columns: 92px minmax(0, 1fr); min-height: 260px; }
  .janela { font-size: 9px; }
  .m-conteudo { padding: 10px; }
  .m-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-numero:nth-child(3) { display: none; }
}
.c-topo { display: flex; align-items: center; gap: 7px; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 800; text-transform: uppercase; }
.c-topo .m-icone { width: 22px; height: 22px; }
.c-cartao { background: #fff; border: 1px solid #dad8d0; border-radius: 6px; padding: 10px; display: grid; gap: 2px; }
.c-cartao span { color: #55534d; font-size: 10px; }
.c-cartao b { font-size: 14px; }
.c-cartao small { color: #55534d; font-size: 10px; }
.c-cartao-destaque { background: #111; border-color: #111; color: #fff; }
.c-cartao-destaque span, .c-cartao-destaque small { color: #c9c6bc; }
.c-cartao-destaque b { font-size: 22px; font-family: var(--fonte-titulo); font-weight: 800; }
.c-cartao-destaque small { color: var(--amarelo); font-weight: 700; }
.c-botao {
  margin-top: 6px; padding: 7px; border-radius: 4px; background: var(--amarelo); color: #111; text-align: center;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.c-linha {
  height: 38px; margin: 4px 0 2px; border-bottom: 1px solid #dad8d0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 38' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23111111' stroke-width='2.5' vector-effect='non-scaling-stroke' points='0,6 25,12 50,20 75,26 100,33'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- Seções ---------- */
.secao { padding: 112px 0; }
@media (max-width: 799px) { .secao { padding: 72px 0; } }
.secao-clara { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.secao-escura { background: var(--escuro); color: var(--escuro-texto); }
.secao-escura .introducao { color: #c9c6bc; }

/* Dores */
.secao-dores { background: var(--amarelo); color: var(--preto); padding: 88px 0; }
.secao-dores .titulo-secao { max-width: 24ch; }
.dores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.dor { background: var(--preto); color: var(--escuro-texto); padding: 26px 24px 28px; border-radius: var(--raio-grande); display: grid; align-content: start; gap: 14px; }
.dor-antes {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.4rem; line-height: 1.1; text-transform: uppercase;
  color: #fff; padding-bottom: 14px; border-bottom: 2px solid var(--amarelo);
}
.dor-depois { color: #c9c6bc; font-size: 1rem; }
@media (max-width: 999px) { .dores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .dores { grid-template-columns: minmax(0, 1fr); } .secao-dores { padding: 64px 0; } }

/* Funções */
.funcoes { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio-grande); overflow: hidden; }
.funcao { background: var(--superficie); padding: 30px 26px 32px; transition: background-color .2s ease; }
.funcao:hover { background: var(--superficie-2); }
.funcao-icone { width: 44px; height: 44px; padding: 10px; border-radius: var(--raio); background: var(--preto); fill: var(--amarelo); margin-bottom: 20px; }
.funcao h3 { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.funcao p { color: var(--texto-suave); font-size: 1rem; }
@media (prefers-color-scheme: dark) { .funcao-icone { background: var(--escuro-3); } }
@media (max-width: 1099px) { .funcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .funcoes { grid-template-columns: minmax(0, 1fr); } .funcao { padding: 26px 20px; } }

/* Destaques (texto + imagem) */
.destaque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.destaque-invertido .destaque-texto { order: 2; }
.vantagens { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.vantagens li { position: relative; padding-left: 36px; color: var(--texto-suave); }
.vantagens li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 3px; background: var(--amarelo) center / 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z'/%3E%3C/svg%3E");
}
.vantagens b { color: var(--texto); font-weight: 700; }
.vantagens-claras li { color: #c9c6bc; }
.vantagens-claras b { color: #fff; }
@media (max-width: 999px) {
  .destaque { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .destaque-invertido .destaque-texto { order: 0; }
}

.destaque-imagem { position: relative; }
.cartao-tela {
  background: #fff; color: #111; border: 1px solid #dad8d0; border-radius: 8px; padding: 22px; box-shadow: var(--sombra);
  font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) { .cartao-tela { border-color: #2e2d29; box-shadow: var(--sombra-grande); } }
.ct-cabeca { display: flex; justify-content: space-between; align-items: center; }
.ct-cabeca b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; }
.ct-filtro { padding: 4px 12px; border: 1px solid #dad8d0; border-radius: 4px; font-size: .85rem; font-weight: 600; }
.ct-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ct-resumo div { background: #f2f1ec; border-radius: 5px; padding: 10px 12px; min-width: 0; }
.ct-resumo span { display: block; font-size: .8rem; color: #55534d; }
.ct-resumo b { display: block; font-size: 1.2rem; font-weight: 800; white-space: nowrap; }
.ct-vermelho { color: #d92d20; }
.ct-progresso { height: 8px; margin: 16px 0 6px; border-radius: 4px; background: #e9e7e0; overflow: hidden; }
.ct-progresso i { display: block; width: 92%; height: 100%; background: #111; }
.ct-linhas { list-style: none; padding: 0; margin: 10px 0 0; }
.ct-linhas li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 84px; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #ecebe5; }
.ct-linhas .m-selo { font-size: .75rem; text-align: center; }
.ct-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-forma { color: #55534d; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  .cartao-tela { padding: 16px; font-size: .85rem; }
  .ct-linhas li { grid-template-columns: minmax(0, 1fr) auto 72px; }
  .ct-forma { display: none; }
  .ct-resumo b { font-size: 1rem; }
}

.notificacao {
  position: absolute; left: -28px; bottom: -28px; display: flex; gap: 12px; align-items: center; max-width: 320px;
  padding: 14px 16px; border-radius: 10px; background: #111; color: #fff; box-shadow: var(--sombra-grande);
  border: 1px solid #2e2d29;
}
.notificacao .m-icone { width: 34px; height: 34px; border-radius: 6px; }
.notificacao b { display: block; font-size: .95rem; }
.notificacao span { display: block; font-size: .85rem; color: #a3a099; }
@media (max-width: 599px) { .notificacao { position: relative; left: 0; bottom: 0; margin: -18px 12px 0; } }

.destaque-celulares { display: flex; justify-content: center; gap: 24px; padding: 20px 0; }
.celular-ficha { transform: rotate(-3deg) translateY(16px); }
.celular-evolucao { transform: rotate(3deg) translateY(-16px); }
.c-subtitulo { color: #55534d; font-size: 11px; margin-top: -4px; }
.c-exercicios { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.c-exercicios li { background: #fff; border: 1px solid #dad8d0; border-left: 4px solid var(--amarelo); border-radius: 5px; padding: 8px 10px; display: grid; gap: 1px; }
.c-exercicios b { font-size: 12px; }
.c-exercicios span { color: #55534d; font-size: 10.5px; }
.c-grafico { width: 100%; height: auto; background: #fff; border: 1px solid #dad8d0; border-radius: 6px; }
.c-meta { stroke: #1a7f37; stroke-width: 1.5; stroke-dasharray: 5 4; }
.c-curva { fill: none; stroke: #111; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.c-ponto { fill: #fff; stroke: #111; stroke-width: 2; }
.c-ponto-final { fill: var(--amarelo); }
.c-legenda { display: flex; align-items: center; gap: 6px; color: #55534d; font-size: 10.5px; }
.c-legenda i { width: 16px; border-top: 2px dashed #1a7f37; }
.c-medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.c-medidas div { background: #fff; border: 1px solid #dad8d0; border-radius: 5px; padding: 6px 7px; display: grid; }
.c-medidas span { color: #55534d; font-size: 9px; }
.c-medidas b { font-size: 13px; }
.c-medidas i { font-style: normal; font-size: 9px; font-weight: 700; color: #1a7f37; }
.c-conquista { padding: 10px; border-radius: 6px; background: #111; color: var(--amarelo); font-weight: 700; font-size: 11.5px; text-align: center; }
@media (max-width: 519px) {
  .destaque-celulares { gap: 10px; }
  .celular { width: 168px; padding: 7px; border-radius: 28px; }
  .celular-tela { height: 340px; border-radius: 22px; padding: 36px 9px 9px; font-size: 10px; gap: 7px; }
  .celular::before { top: 12px; width: 50px; margin-left: -25px; height: 15px; }
  .c-exercicios li:nth-child(n+5) { display: none; }
  .c-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-medidas div:nth-child(3) { display: none; }
  .c-medidas b { font-size: 11px; white-space: nowrap; }
}

/* Segurança */
.seguranca { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seguranca li { padding: 28px 26px; border: 1px solid var(--borda); border-radius: var(--raio-grande); background: var(--superficie); }
.seguranca svg { width: 32px; height: 32px; fill: var(--texto); margin-bottom: 18px; }
.seguranca li:first-child { background: var(--preto); border-color: var(--preto); color: var(--escuro-texto); }
.seguranca li:first-child svg { fill: var(--amarelo); }
.seguranca li:first-child p { color: #c9c6bc; }
.seguranca h3 { font-size: 1.45rem; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.seguranca p { color: var(--texto-suave); font-size: 1rem; }
@media (prefers-color-scheme: dark) { .seguranca li:first-child { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); } .seguranca li:first-child svg { fill: var(--preto); } .seguranca li:first-child p { color: #3f3d38; } }
@media (max-width: 999px) { .seguranca { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .seguranca { grid-template-columns: minmax(0, 1fr); } }

/* Como funciona */
.passos { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: passo; }
.passo { position: relative; padding: 30px 28px 32px; border-top: 4px solid var(--preto); background: var(--fundo); border-radius: 0 0 var(--raio-grande) var(--raio-grande); }
@media (prefers-color-scheme: dark) { .passo { border-top-color: var(--amarelo); } }
.passo-numero { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--amarelo); -webkit-text-stroke: 1.5px var(--preto); margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .passo-numero { -webkit-text-stroke: 0; } }
.passo h3 { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.passo p { color: var(--texto-suave); }
@media (max-width: 799px) { .passos { grid-template-columns: minmax(0, 1fr); } }

/* Perguntas */
.perguntas { margin-top: 40px; border-top: 1px solid var(--borda); }
.perguntas details { border-bottom: 1px solid var(--borda); }
.perguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-weight: 600; font-size: 1.15rem;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--raio); background: var(--superficie) center / 16px no-repeat;
  border: 1px solid var(--borda); transition: transform .2s ease, background-color .2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E");
}
.perguntas details[open] summary::after { transform: rotate(45deg); background-color: var(--amarelo); border-color: var(--amarelo); }
.perguntas summary:hover { color: var(--texto-suave); }
.perguntas details p { padding: 0 48px 24px 0; color: var(--texto-suave); }

/* Contato */
.secao-contato { position: relative; overflow: hidden; }
.secao-contato::before {
  content: ''; position: absolute; left: -10%; bottom: -40%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgb(250 204 21 / 10%), transparent);
}
.contato { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.contato-canais { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; }
.contato-canais a {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--escuro-borda); border-radius: var(--raio-grande);
  text-decoration: none; background: var(--escuro-2); transition: border-color .15s ease;
  overflow-wrap: anywhere;
}
.contato-canais a:hover { border-color: var(--amarelo); }
.contato-canais svg { width: 40px; height: 40px; padding: 9px; flex-shrink: 0; border-radius: var(--raio); background: var(--amarelo); fill: var(--preto); }
.contato-canais small { display: block; color: var(--escuro-suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.contato-canais span { font-weight: 600; font-size: 1.1rem; min-width: 0; }
@media (max-width: 999px) { .contato { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.formulario {
  padding: 32px; border-radius: 8px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-grande);
  border: 1px solid var(--borda);
}
@media (max-width: 599px) { .formulario { padding: 22px 18px; } }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599px) { .campos { grid-template-columns: minmax(0, 1fr); } }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo > span { font-weight: 600; font-size: .95rem; }
.campo small { color: var(--texto-suave); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input::placeholder, .campo textarea::placeholder { color: #8a877f; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 3px rgb(250 204 21 / 55%); }
.campo [aria-invalid="true"] { border-color: var(--vermelho); }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.concordo { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; font-size: .95rem; color: var(--texto-suave); }
.concordo input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--amarelo); }
.concordo a { color: var(--texto); font-weight: 600; }
.formulario-aviso { margin-top: 14px; font-weight: 600; min-height: 1.6em; }
.formulario-aviso.erro { color: var(--vermelho); }
.formulario-aviso.ok { color: var(--verde); }
.formulario-enviado { text-align: center; padding: 48px 24px; }
.formulario-enviado h3 { font-size: 2rem; text-transform: uppercase; font-weight: 800; margin: 16px 0 8px; }
.formulario-enviado p { color: var(--texto-suave); }
.formulario-enviado .marca-icone { width: 56px; height: 56px; margin: 0 auto; }

/* Rodapé */
.rodape { background: #050505; color: var(--escuro-suave); padding: 56px 0 40px; border-top: 1px solid var(--escuro-3); }
.rodape-dentro { display: grid; gap: 12px; }
.marca-rodape { font-size: 1.5rem; }
.icone-fundo-rodape { fill: #111; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.rodape-links a { color: #d6d4cd; text-decoration: none; overflow-wrap: anywhere; }
.rodape-links a:hover { color: var(--amarelo); }
.rodape-pequeno { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--escuro-3); font-size: .88rem; }

/* Entrada suave ao rolar (só quando o JavaScript liga, e nunca com movimento reduzido). */
/* O sistema por dentro: vídeo e telas de verdade (academia de exemplo). */
.moldura {
  border-radius: 8px; overflow: hidden; background: #1a1a18;
  box-shadow: var(--sombra-grande), 0 0 0 1px rgb(255 255 255 / 8%);
}
.moldura .janela-barra b { font-size: 11px; }
.moldura img, .moldura video { display: block; width: 100%; height: auto; }
.video-sistema { margin-top: 48px; }
.video-sistema video { aspect-ratio: 16 / 9; background: #000; }
.telas { margin-top: 64px; }
.telas-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
html:not(.js) .telas-abas { display: none; }
.telas-abas button {
  min-height: 44px; padding: 10px 18px; border: 1px solid #45433d; border-radius: var(--raio);
  background: transparent; color: var(--escuro-texto); font: inherit; font-weight: 600; cursor: pointer;
}
.telas-abas button:hover { border-color: var(--amarelo); color: var(--amarelo); }
.telas-abas button[aria-selected="true"] { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); }
.telas-titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.9rem; text-transform: uppercase; letter-spacing: .01em; }
.telas-dica { margin: 4px 0 20px; color: var(--escuro-suave); }
html:not(.js) .telas-dica { display: none; }
.telas-abas small { margin-left: 4px; font-size: .8em; opacity: .7; }
.telas-grupo { display: none; }
html:not(.js) .telas-grupo { display: block; margin: 40px 0 16px; font-size: 1.3rem; }
.js .tela-painel[data-oculta] { display: none; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.galeria-celular { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tela-cartao {
  display: grid; gap: 4px; height: 100%; padding: 10px 10px 16px; border: 1px solid var(--escuro-borda); border-radius: var(--raio-grande);
  background: var(--escuro-2); color: var(--escuro-texto); text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.tela-cartao:hover { border-color: var(--amarelo); transform: translateY(-3px); }
.tela-cartao img { display: block; width: 100%; height: auto; margin-bottom: 10px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(255 255 255 / 6%); }
.tela-cartao b { font-size: 1.05rem; }
.tela-cartao span { color: var(--escuro-suave); font-size: .92rem; line-height: 1.4; }
@media (max-width: 599px) {
  .galeria { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .galeria-celular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ampliar {
  width: min(1240px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--escuro-borda); border-radius: var(--raio-grande); background: var(--escuro); color: var(--escuro-texto);
}
.ampliar[open] { display: flex; flex-direction: column; }
.ampliar::backdrop { background: rgb(0 0 0 / 80%); }
.ampliar-topo { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; }
.ampliar-topo b { display: block; font-size: 1.15rem; }
.ampliar-topo span { color: var(--escuro-suave); font-size: .95rem; }
.ampliar-fechar {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--escuro-borda); border-radius: var(--raio);
  background: transparent; color: var(--escuro-texto); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.ampliar-fechar:hover { border-color: var(--amarelo); color: var(--amarelo); }
.ampliar-imagem { flex: 1; min-height: 0; overflow: auto; padding: 0 16px; }
.ampliar-imagem img { display: block; max-width: 100%; max-height: calc(100vh - 200px); width: auto; height: auto; margin: 0 auto; border-radius: 4px; }
.ampliar-arraste { display: none; }
@media (max-width: 599px) {
  .ampliar-imagem img.larga { width: 960px; max-width: none; max-height: none; margin: 0; }
  .ampliar-arraste:not([hidden]) { display: block; padding: 0 16px 8px; color: var(--escuro-suave); font-size: .85rem; }
}
.ampliar-navegar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: var(--escuro-suave); }
.celular-real { margin: 0; }
.celular-real .celular-tela { height: auto; padding: 0; display: block; background: #000; }
.celular-real img { display: block; width: 100%; height: auto; }

/* Depoimentos. */
/* Todos do mesmo tamanho: as linhas da grade têm a altura do maior; o último, sozinho na linha, fica no meio. */
.depoimentos {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px;
}
.depoimento:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 999px) {
  .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depoimento:last-child:nth-child(3n + 1) { grid-column: auto; }
  .depoimento:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2); }
}
.depoimento {
  display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 26px 24px 22px; border: 1px solid var(--escuro-borda);
  border-top: 4px solid var(--amarelo); border-radius: var(--raio-grande); background: var(--escuro-2);
}
.depoimento blockquote { margin: 0; }
.depoimento blockquote p { font-size: 1.08rem; line-height: 1.55; color: var(--escuro-texto); }
.depoimento-quem { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.depoimento-inicial {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amarelo); color: var(--preto);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem;
}
.depoimento-quem b { font-size: 1.05rem; }
@media (max-width: 599px) {
  .depoimentos { grid-template-columns: minmax(0, 1fr); }
  .depoimento:last-child:nth-child(2n + 1) { grid-column: auto; width: auto; }
}

.js .surgir { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .surgir.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .surgir { opacity: 1; transform: none; transition: none; } }

/* Página de texto (política de privacidade) */
.texto-legal { padding: 64px 0 96px; }
.texto-legal h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform: uppercase; margin-bottom: 8px; }
.texto-legal h2 { font-weight: 700; font-size: 1.6rem; text-transform: uppercase; margin: 40px 0 10px; }
.texto-legal p, .texto-legal li { color: var(--texto-suave); }
.texto-legal p + p { margin-top: 12px; }
.texto-legal ul { padding-left: 22px; }
.texto-legal a { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.texto-legal .atualizado { color: var(--texto-suave); font-size: .95rem; }
.voltar { display: inline-flex; margin-bottom: 32px; color: var(--texto-suave); text-decoration: none; font-weight: 600; }
.voltar:hover { color: var(--texto); }

/* Preço: dois planos lado a lado, o mesmo conteúdo; muda só o tamanho da academia. */
.abertura-preco { margin-top: 20px; color: #c9c6bc; font-size: 1.05rem; }
.abertura-preco strong { color: var(--amarelo); font-weight: 700; }
.abertura-preco a { color: var(--escuro-texto); text-underline-offset: 3px; white-space: nowrap; }
.abertura-preco a:hover { color: var(--amarelo); }
.planos { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plano {
  display: flex; flex-direction: column; min-width: 0; padding: 32px 30px; background: var(--superficie);
  border: 1px solid var(--borda); border-top: 4px solid var(--amarelo); border-radius: 0 0 var(--raio-grande) var(--raio-grande);
  box-shadow: var(--sombra);
}
.plano h3 { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.plano-valor { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 22px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 4.4rem; line-height: 1; }
.plano-moeda { align-self: flex-start; margin-top: 6px; font-size: 1.8rem; }
.plano-mes { margin-left: 6px; }
.plano-mes { font-family: var(--fonte-texto); font-weight: 500; font-size: 1.05rem; color: var(--texto-suave); }
.plano-inclui { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; flex-grow: 1; color: var(--texto-suave); }
.plano-inclui li { display: flex; gap: 10px; }
.plano-inclui li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; border-radius: 2px; background: var(--amarelo)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z' fill='%23111'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.teste-gratis {
  display: flex; align-items: center; gap: 28px; margin-top: 16px; padding: 26px 30px; border-radius: var(--raio-grande);
  background: var(--amarelo); color: var(--preto);
}
.teste-gratis-numero { flex-shrink: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 3.6rem; line-height: .9; text-transform: uppercase; }
.teste-gratis-numero span { display: block; font-size: 1.1rem; font-weight: 700; }
.teste-gratis p:last-child { max-width: 62ch; font-size: 1.08rem; }
@media (max-width: 799px) { .planos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .plano { padding: 26px 20px; }
  .plano-valor { font-size: 3.8rem; }
  .teste-gratis { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; }
}

/* Páginas de erro (404 e as outras): o Caddy as devolve no lugar da página em branco. Escuras como a abertura, com o
   código grande e a anilha no lugar do zero. Os endereços são absolutos: a página aparece em qualquer caminho. */
.pagina-erro { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--escuro); color: var(--escuro-texto); }
.pagina-erro .topo { position: static; background: transparent; border-bottom-color: var(--escuro-borda); }
.erro { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; padding: 64px 0 96px; isolation: isolate; }
.erro::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; max-width: 140%; aspect-ratio: 1;
  transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgb(250 204 21 / 13%), transparent);
}
.erro-dentro { text-align: center; }
.erro-codigo {
  display: flex; align-items: center; justify-content: center; gap: .06em; margin: 0 auto 28px;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(6.5rem, 26vw, 13rem); line-height: .8; color: var(--amarelo);
}
.erro-palavra { font-size: clamp(5rem, 18vw, 9rem); line-height: 1; margin-bottom: 16px; }
.erro-anilha { width: .78em; height: .78em; flex-shrink: 0; }
.erro-anilha .disco { fill: var(--amarelo); }
.erro-anilha .sulco { fill: none; stroke: var(--escuro); stroke-width: 2.5; }
.erro-anilha .furo { fill: var(--escuro); }
.erro h1 { font-weight: 800; font-size: clamp(2.1rem, 6vw, 3.4rem); text-transform: uppercase; text-wrap: balance; }
.erro-texto { max-width: 46ch; margin: 16px auto 0; color: #c9c6bc; font-size: 1.15rem; }
.erro-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.erro-endereco { margin-top: 28px; color: var(--escuro-suave); font-size: .92rem; overflow-wrap: anywhere; }
.erro-endereco code { color: var(--escuro-texto); }
@media (prefers-reduced-motion: no-preference) {
  .erro-anilha { animation: anilha-girar 1.1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes anilha-girar { from { transform: rotate(-200deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 599px) {
  .erro { padding: 40px 0 64px; }
  .erro-acoes .botao { width: 100%; }
}