/* landing.css */
/* landing.css: base da landing em / (spec 2026-09-27, seção 4). Fonte de verdade do contrato de classes: as seções
   (secoes/NN-*.css) só acrescentam o que é delas. Cores: só tokens de /brand/tokens.css e rgba() dessas cores (o
   teste confere). Unidades: px e rem, sem cqi. Mobile primeiro; quebras em 720 px e 1080 px. */

:root {
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --raio-card: 24px;
  --raio-hero: 32px;
  --raio-mini: 14px;
  --espaco-secao: clamp(72px, 10vw, 140px);
  --linha-clara: var(--aco-100);
  --sombra-card: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
  --nav-altura: 64px;
  --transicao: 200ms ease;
  --cor-rotulo: var(--aco-600); /* 5,0:1 sobre neve e 5,6:1 sobre branco; o aço 500 da spec dá 3,7:1 (plano, desvio D17) */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--neve); color: var(--tinta); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-altura) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* overflow-x: clip é rede de segurança; a QA mede a rolagem horizontal com ele desligado (tools/shot-landing.mjs --checar) */
body { margin: 0; overflow-x: clip; font-family: var(--fonte); font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--tinta); background: var(--neve); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--aco-600); outline-offset: 3px; }
::selection { background: var(--aco-900); color: var(--branco); }

/* contexto escuro: texto secundário e rótulo em aço 300, texto branco, anel de foco branco */
.card--escuro, .card--preto, .escuro { --texto-2: var(--aco-300); --cor-rotulo: var(--aco-300); color: var(--branco); }
/* no aço 900, a luz radial do hero e do contato clareia o fundo em até 8% de branco e o aço 300 cai para 3,9:1; o aço 100
   dá 6,9:1 ali. O .card--preto e o .escuro seguem em aço 300 (9,5:1 sobre preto) (plano, desvio D18) */
.card--escuro { --texto-2: var(--aco-100); --cor-rotulo: var(--aco-100); }
.card--escuro :focus-visible, .card--preto :focus-visible, .escuro :focus-visible { outline-color: var(--branco); }

/* ---------- tipografia ---------- */
.titulo-1 { font-size: clamp(2.75rem, 6.5vw, 5.5rem); font-weight: 500; line-height: .98; letter-spacing: -0.02em; text-wrap: balance; }
.titulo-2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.titulo-3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.texto { font-size: 1.125rem; line-height: 1.55; font-weight: 400; color: var(--texto-2); text-wrap: pretty; }
.texto--grande { font-size: 1.25rem; }
.rotulo { font-family: var(--fonte-mono); font-size: .8125rem; line-height: 1.4; font-weight: 400; letter-spacing: .08em; color: var(--cor-rotulo); }
.numero-gigante { font-size: clamp(6rem, 16vw, 13rem); font-weight: 500; line-height: .9; letter-spacing: -0.04em; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: var(--espaco-secao); }
.secao-cabeca { max-width: 56rem; margin: 0 auto clamp(40px, 6vw, 64px); display: grid; justify-items: center; gap: 16px; text-align: center; }
.secao-cabeca .texto { max-width: 42rem; }

/* ---------- cards ---------- */
.card { background: var(--branco); border: 1px solid var(--linha-clara); border-radius: var(--raio-card); box-shadow: var(--sombra-card); padding: clamp(24px, 4vw, 48px); }
.card--aco { background: var(--aco-100); box-shadow: none; --texto-2: var(--aco-700); --cor-rotulo: var(--aco-700); } /* 5,5:1; o cinza 500 daria 4,3:1 */
.card--escuro { background: var(--aco-900); border: 1px solid rgba(255, 255, 255, .08); }
.card--preto { background: var(--preto); border: 1px solid rgba(255, 255, 255, .08); }
.card--mini { padding: 16px 20px; border-radius: var(--raio-mini); }

/* ---------- botões (antes do vidro: .botao--vidro sobrescreve a borda) ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-family: var(--fonte); font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao), background-color var(--transicao), border-color var(--transicao); }
.botao:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.botao:active { transform: none; }
.botao--tinta { background: var(--tinta); color: var(--branco); }
.botao--branco { background: var(--branco); color: var(--tinta); }
.botao--contorno { background: transparent; border-color: var(--cinza-200); color: var(--tinta); }
.botao--contorno:hover { border-color: var(--tinta); }

/* ---------- vidro (liquid glass): translúcido, desfoca o que está atrás, borda clara e reflexo especular ---------- */
.vidro, .botao--vidro { position: relative; isolation: isolate; color: var(--branco); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 20px 50px rgba(0, 0, 0, .28); }
/* rótulo em branco: o vidro (7% de branco), o reflexo de 18% no canto do rótulo e a corrente desfocada atrás derrubam o
   aço 300 para 2:1 (plano, desvio D18) */
.vidro { border-radius: var(--raio-mini); --cor-rotulo: var(--branco); }
.vidro::before, .botao--vidro::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .18), transparent 42%); pointer-events: none; }
.botao--vidro:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 20px 50px rgba(0, 0, 0, .28); }
.vidro--claro { background: rgba(241, 242, 240, .72); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(10, 10, 10, .08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro, .botao--vidro { background: rgba(53, 62, 69, .88); }
  .vidro--claro { background: rgba(241, 242, 240, .96); }
}

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 12px; border: 1px solid var(--cinza-200); border-radius: 999px; font-family: var(--fonte-mono); font-size: .75rem; font-weight: 400; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--aco-600); white-space: nowrap; }
.tag--construcao { border-color: var(--aco-300); color: var(--aco-700); }
.tag--construcao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- grade ---------- */
.grade { display: grid; gap: 24px; }
@media (min-width: 720px) { .grade--2, .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- parallax: o landing.js põe --prof (do data-parallax) no elemento e --px, --py, --sy na seção.
   Usa a propriedade translate: nunca use translate para posicionar esses elementos (use margin, left/top ou
   transform, que fica livre para rotação e flutuação). ---------- */
[data-parallax] { translate: calc(var(--px, 0) * var(--prof, 0) * 18px) calc(var(--py, 0) * var(--prof, 0) * 12px + var(--sy, 0) * var(--prof, 0) * 60px); }

/* ---------- utilitários ---------- */
.so-leitor:not(:focus) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a.so-leitor:focus { position: fixed; left: 16px; top: 12px; z-index: 120; padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--branco); font-weight: 500; text-decoration: none; }
/* imagens de corrente cortadas pelo quadro: as pontas somem num degradê de máscara em vez de acabar numa linha reta */
.pontas-suaves { -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 82%, transparent); mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 82%, transparent); }
@media (max-width: 719.98px) { .oculto-mobile { display: none !important; } }
@media (min-width: 1080px) { .oculto-desktop { display: none !important; } }

/* ---------- movimento reduzido: sem flutuação, parallax, brilho, órbitas; o preloader vira um fade (00-preloader.css) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-parallax] { translate: none; }
}

/* 00-preloader.css */
/* 00-preloader.css: preloader (spec 5.0). Aparece só com html.carregando, que o script do <head> põe antes da
   primeira pintura (sem JS, o hidden e esta regra o mantêm fora). Linha do tempo pelas classes que o landing.js põe:
   desenhar (0 s) → preencher (1,1 s) → brilhar (1,4 s) → marca (1,6 s) → sair (quando pronto, de 2 s a 3 s: MIN e MAX do landing.js). */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 28px; background: var(--neve); color: var(--tinta); }
html:not(.carregando) .preloader { display: none; }
.carregando body { overflow: hidden; }
.preloader-palco { position: relative; }
.preloader-gema { display: block; height: 220px; width: auto; overflow: visible; }
.preloader-gema path { fill: currentColor; fill-opacity: 0; stroke-opacity: 0; stroke-linecap: round; stroke-linejoin: round; }
/* --comprimento: maior sub-traço em px de tela (landing.js); o tracejado recomeça em cada sub-traço */
.preloader.desenhar .preloader-gema path { stroke-opacity: 1; stroke-dasharray: var(--comprimento) var(--comprimento); animation: pl-desenhar 1.1s ease-out both; }
.preloader.preencher .preloader-gema path { fill-opacity: 1; stroke-opacity: 0; transition: fill-opacity .4s ease, stroke-opacity .4s ease; }
.preloader-estrela { position: absolute; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); transform: scale(0); }
.preloader-estrela.e1 { --t: 26px; left: 3%; top: 16%; }
.preloader-estrela.e2 { --t: 34px; left: 88%; top: 2%; }
.preloader-estrela.e3 { --t: 18px; left: 16%; top: 86%; }
.preloader-estrela.e4 { --t: 22px; left: 99%; top: 60%; }
.preloader.brilhar .preloader-estrela { transform: scale(1); animation: pl-brilhar .6s ease-out both; }
.preloader.brilhar .e2 { animation-delay: 80ms; }
.preloader.brilhar .e3 { animation-delay: 160ms; }
.preloader.brilhar .e4 { animation-delay: 240ms; }
.preloader-marca { font-family: var(--fonte-display); font-size: 1.25rem; line-height: 1; opacity: 0; transform: translateY(8px); }
.preloader.marca .preloader-marca { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
.preloader.sair { transform: translateY(-100%); transition: transform .7s cubic-bezier(.77, 0, .18, 1); }
@keyframes pl-desenhar { from { stroke-dashoffset: var(--comprimento); } to { stroke-dashoffset: 0; } }
/* entra e pisca 2 vezes em 0,6 s (menos de 3 piscadas por segundo) */
@keyframes pl-brilhar { 0% { transform: scale(0); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 55% { opacity: .3; } 75% { opacity: 1; } 88% { opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 719.98px) { .preloader-gema { height: 160px; } }
/* movimento reduzido: estado final parado e saída por fade de 300 ms (vence o * do landing.css pela especificidade) */
@media (prefers-reduced-motion: reduce) {
  .preloader.sair { transform: none; opacity: 0; transition: opacity .3s ease !important; }
}

/* 01-nav.css */
/* 01-nav.css: barra do topo (spec 5.1): sticky, 64 px, vidro claro; abaixo de 1080 px os links viram painel de vidro claro. */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-altura); border-width: 0 0 1px; }
/* o vidro da barra fica num ::before: com backdrop-filter no próprio header ele vira raiz do backdrop e o painel, filho
   dele, não desfoca a página (o texto do hero apareceria nítido atrás dos links); assim o painel também é vidro claro */
.nav.vidro--claro { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(241, 242, 240, .72); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
.nav-barra { height: 100%; display: flex; align-items: center; gap: 12px; }
.nav-marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 8px; }
.nav-marca img { height: 22px; width: auto; }
.nav .botao { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.nav-links { display: none; }
.nav-links a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color var(--transicao); }
.nav-links a:hover { background: rgba(10, 10, 10, .06); }
/* ícone de duas linhas que vira X */
.nav-menu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; }
.nav-menu::before, .nav-menu::after { content: ""; grid-area: 1 / 1; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--transicao); }
.nav-menu::before { transform: translateY(-4px); }
.nav-menu::after { transform: translateY(4px); }
.nav--aberta .nav-menu::before { transform: rotate(45deg); }
.nav--aberta .nav-menu::after { transform: rotate(-45deg); }
@media (max-width: 1079.98px) {
  /* painel .vidro--claro (spec 5.1), com a sombra dos cards */
  .nav--aberta .nav-links { display: grid; gap: 2px; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-altura) + 8px); padding: 8px; border-radius: var(--raio-card); background: rgba(241, 242, 240, .72); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(10, 10, 10, .08); box-shadow: var(--sombra-card); }
  .nav--aberta .nav-links a { min-height: 48px; padding: 0 16px; border-radius: var(--raio-mini); font-size: 1.0625rem; }
}
@media (min-width: 1080px) {
  .nav-links { display: flex; align-items: center; gap: 2px; margin-right: 12px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before, .nav--aberta .nav-links { background: rgba(241, 242, 240, .96); }
}

/* 02-hero.css */
/* 02-hero.css: hero (spec 5.2): card aço 900 com luz radial; texto à esquerda, cena à direita a partir de 1080 px.
   Posições por margin/left/top: a propriedade translate é do parallax (landing.css). */
.hero { padding-top: 12px; }
.hero-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 32px; border-radius: var(--raio-hero); padding: clamp(24px, 5vw, 64px); background-image: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .08), transparent 60%); }
.hero-texto { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; }
.hero-texto .texto { max-width: 34rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-linha { margin-top: 12px; }

/* cena: 320 px no celular (spec 4), diamante de 180 px, só o primeiro mini-card */
.hero-cena { position: relative; height: 320px; }
.hero-corrente { position: absolute; z-index: 0; right: -88px; top: 8px; width: 190px; max-width: none; transform: rotate(16deg); pointer-events: none; }
.diamante { position: absolute; z-index: 1; left: 50%; top: 50%; width: 180px; margin: -82px 0 0 -90px; animation: flutuar 6s ease-in-out infinite alternate; }
/* o símbolo fica branco puro (a marca é preta ou branca, nunca cinza: brand book, seção 2) */
.diamante-img { width: 100%; }
/* luz que passa: a faixa é recortada pela forma do símbolo (máscara no ::before) e o desfoque do span leva a luz aos
   vãos do desenho; sobre o branco puro, sem o desfoque, ela não aparecia (crítica W1, achados 4 e A). O filtro fica no
   span e a máscara no ::before porque, no mesmo elemento, a máscara cortaria o desfoque de novo */
.diamante-brilho { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1139.93 / 1040; pointer-events: none; filter: blur(4px); }
.diamante-brilho::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat; -webkit-mask: url(brand/assets/logo/simbolo-branco.svg) center / contain no-repeat; mask: url(brand/assets/logo/simbolo-branco.svg) center / contain no-repeat; animation: brilhar-diamante 7s linear infinite; }
/* reflexo: a máscara fica no espaço do elemento, antes do scaleY(-1): "to top" é o lado colado no diamante */
.diamante-reflexo { width: 100%; margin-top: 6px; transform: scaleY(-1); opacity: .22; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 70%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 70%); pointer-events: none; }
.hero-mini { position: absolute; z-index: 2; display: grid; gap: 4px; width: max-content; max-width: 220px; }
.hero-mini strong { font-size: .9375rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.m1 { left: 0; top: 4px; }
.m2 { right: 0; top: 44%; }
.m3 { left: 4%; bottom: 8px; }

@keyframes flutuar { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes brilhar-diamante { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }

@media (min-width: 720px) {
  .hero-cena { height: 420px; }
  .hero-corrente { width: 300px; right: -130px; top: -16px; }
  .diamante { width: 240px; margin: -110px 0 0 -120px; }
}
@media (min-width: 1080px) {
  .hero-card { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); column-gap: 32px; min-height: 640px; }
  .hero-cena { height: auto; min-height: 480px; }
  .hero-corrente { width: 440px; right: -180px; top: -300px; transform: rotate(38deg); }
  .diamante { width: 320px; margin: -170px 0 0 -160px; }
  .m1 { left: -40px; top: 4%; }
  .m2 { right: -40px; top: auto; bottom: 14%; }
  .m3 { left: -12px; bottom: 3%; }
}
/* desktop estreito: a cena tem de 298 a 398 px e m2 e m3 lado a lado pedem 440; o diamante fica com 240 px e os
   cards descem em escada (m1, diamante, m2, m3), sem se cobrirem (medido em 1080, 1180 e 1279) */
@media (min-width: 1080px) and (max-width: 1279.98px) {
  .diamante { width: 240px; margin: -160px 0 0 -120px; }
  .m2 { bottom: 106px; }
  .m3 { left: 0; bottom: 0; }
  /* 30 px acima: a ponta de baixo da corrente saía de trás do rótulo "Clínica" (m2), que caía para 4,34:1 em 1080 px;
     assim fica em 4,65:1 no pior pixel (QA, T12). Mais alto a corrente passa atrás do texto do m1 */
  .hero-corrente { top: -330px; }
}
/* 320 px: "Competência" em 44 px (o mínimo do .titulo-1) tem 263 px e o conteúdo do card, 240; em 38 px o H1 fica em
   três linhas, dentro do recuo (crítica W1, achado 5). De 360 px para cima nada muda */
@media (max-width: 359.98px) {
  .hero .titulo-1 { font-size: 2.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .diamante-brilho { display: none; }
}

/* 03-frase.css */
/* 03-frase.css: frase de posicionamento (spec 5.3): centrada, 60rem. */
.frase-miolo { max-width: 60rem; display: grid; justify-items: center; gap: 24px; text-align: center; }
.frase-gema { width: 28px; margin-bottom: 8px; }
.frase .titulo-2 { max-width: 22ch; }
.frase .texto { max-width: 34rem; }

/* 04-produtos.css */
/* 04-produtos.css: produtos (spec 5.4): Escala GO em destaque com o iPhone do brand book, dois cards em construção. */
/* coluna minmax(0, 1fr) e trilha do iPhone centrada: em 320 px o conteúdo do card tem 238 px e o iPhone 260; uma coluna
   auto cresceria até 260 e levaria o texto até a borda do card. Assim o texto quebra dentro do card e o iPhone passa
   11 px de cada lado, sobre o recuo. */
.produto-destaque { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 24px; }
.produto-texto { display: grid; justify-items: start; gap: 20px; }
.lista-marcas { display: grid; gap: 10px; margin-bottom: 8px; }
.lista-marcas li { position: relative; padding-left: 22px; font-weight: 500; }
.lista-marcas li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; background: var(--tinta); transform: rotate(45deg); }
.produto-visual { display: grid; justify-content: center; }

/* iPhone: moldura em SVG (brand/assets/ui/iphone.svg, 430 x 880) e a tela em HTML por cima, nas medidas do #tela
   do SVG (14, 14, 402 x 852, raio 56). A ilha fica dentro da tela. */
.iphone { position: relative; width: 260px; aspect-ratio: 430 / 880; }
.iphone-moldura { position: absolute; inset: 0; width: 100%; height: 100%; }
.tela { position: absolute; left: 3.256%; top: 1.591%; width: 93.488%; height: 96.818%; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; padding: 12px 10px 16px; background: var(--branco); color: var(--tinta); }
.tela-ilha { position: absolute; left: 34.33%; top: 10px; width: 31.34%; height: 22px; border-radius: 11px; background: var(--preto); }
.tela-hora { height: 34px; padding: 6px 0 0 16px; font-size: .75rem; font-weight: 600; }
.tela-titulo { margin: 12px 4px 12px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.tela-lista { display: grid; gap: 8px; }
.tela-linha { padding: 9px 8px; border-radius: 12px; border: 1px solid var(--aco-100); background: var(--neve); font-family: var(--fonte-mono); font-size: .625rem; line-height: 1.35; }
.tela-linha--hoje { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.tela-base { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .6875rem; font-weight: 500; color: var(--cinza-500); }
.tela-base img { width: 12px; }

.produto { display: grid; align-content: start; justify-items: start; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.registro { justify-self: stretch; display: grid; gap: 8px; margin-top: 8px; font-family: var(--fonte-mono); font-size: .8125rem; }
.registro li { padding: 12px 14px; border-radius: var(--raio-mini); border: 1px solid var(--aco-100); background: var(--superficie); }
/* "Enviado ao médico" é um estado do registro, não um botão: fica como a terceira linha da lista, em aço (5,5:1) */
.registro .registro-envio { background: var(--aco-100); border-color: var(--aco-100); color: var(--aco-700); }

@media (min-width: 720px) {
  .iphone { width: 290px; }
  .tela { border-radius: 38px; padding: 14px 14px 18px; }
  .tela-ilha { top: 11px; height: 24px; border-radius: 12px; }
  .tela-linha { font-size: .6875rem; }
}
@media (min-width: 1080px) {
  .produto-destaque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 56px 64px; }
}

/* 05-numero.css */
/* 05-numero.css: número gigante (spec 5.5) com as órbitas do brand book girando atrás. O centro das órbitas no
   orbitas.svg está em (1500, 540) de 1920 x 1080, ou seja 78,125% x 50%: é a origem da rotação e o ponto que cai
   no centro do bloco de texto (rótulo, número e frase). */
/* a máscara esmaece só o recuo da seção: as órbitas tracejadas passam da borda e, cortadas pelo overflow, acabavam
   numa linha reta encostada em Produtos e em Método; o conteúdo (palco) fica fora do degradê */
.numero { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1) var(--espaco-secao), rgba(0, 0, 0, 1) calc(100% - var(--espaco-secao)), transparent); mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1) var(--espaco-secao), rgba(0, 0, 0, 1) calc(100% - var(--espaco-secao)), transparent); }
/* --r1: raio da órbita de dentro (a de traço contínuo), 1/16 da largura do SVG. Cresce com o número (--fs é o mesmo
   clamp do .numero-gigante, landing.css): passa por fora do rótulo e da frase em qualquer largura e, com os cards
   empilhados (abaixo de 1080 px), deixa o losango dessa órbita escondido no meio do primeiro card. O segundo termo do
   max() vale acima de uns 916 px: a meia largura de "1 min" é 1,19 × --fs, e a órbita passa 16 px por fora dela (antes
   ela cortava o "1" e o "n" a partir de 1080 px). */
.numero-palco { --fs: clamp(6rem, 16vw, 13rem); --r1: max(calc(var(--fs) * .46 + 123px), calc(var(--fs) * 1.19 + 16px)); position: relative; display: grid; justify-items: center; gap: 40px; text-align: center; }
/* grid-area 1 / 1 / 2 / 2: o bloco de conter é a célula do texto (com as linhas finais em auto, seria a borda do
   palco), então left/top 50% é o centro do bloco de texto. A máscara é centrada na origem da rotação, então não muda
   ao girar: apaga o que passa dentro do raio do texto (a reta diagonal cruza o centro) e some antes da borda direita
   do SVG (3,5 × r1 do centro), que cortaria as órbitas de fora numa linha reta. rotate: 13.5deg é o ângulo parado
   (movimento reduzido e prints): os losangos ficam longe dos cards. */
.numero-orbitas { --w: calc(var(--r1) * 16); grid-area: 1 / 1 / 2 / 2; position: absolute; z-index: 0; left: 50%; top: 50%; width: var(--w); max-width: none; margin: calc(var(--w) * -0.28125) 0 0 calc(var(--w) * -0.78125); transform-origin: 78.125% 50%; rotate: 13.5deg; opacity: .5; -webkit-mask-image: radial-gradient(circle at 78.125% 50%, transparent calc(var(--r1) * .9), rgba(0, 0, 0, 1) calc(var(--r1) * .93), rgba(0, 0, 0, 1) calc(var(--r1) * 3.04), transparent calc(var(--r1) * 3.44)); mask-image: radial-gradient(circle at 78.125% 50%, transparent calc(var(--r1) * .9), rgba(0, 0, 0, 1) calc(var(--r1) * .93), rgba(0, 0, 0, 1) calc(var(--r1) * 3.04), transparent calc(var(--r1) * 3.44)); animation: girar 90s linear infinite; pointer-events: none; }
.numero-centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
/* 17rem quebra em "da alteração da coordenação / à escala no ar." (263,6 px na primeira linha) */
.numero-centro .texto { max-width: 17rem; }
.numero-cards { position: relative; z-index: 1; display: grid; gap: 12px; width: 100%; max-width: 360px; }
.numero-card { font-family: var(--fonte-mono); font-size: .8125rem; letter-spacing: .02em; text-align: left; text-wrap: balance; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (min-width: 1080px) {
  .numero-palco { min-height: 600px; align-content: center; }
  .numero-cards { position: absolute; inset: 0; max-width: none; display: block; pointer-events: none; }
  .numero-card { position: absolute; width: max-content; }
  .n1 { left: 6%; top: 12%; }
  .n2 { right: 4%; top: 42%; }
  .n3 { left: 14%; bottom: 10%; }
}

/* 06-metodo.css */
/* 06-metodo.css: método (spec 5.6): seção preta de borda a borda, corrente grande à direita com cópia desfocada
   atrás e carrossel de 5 cards de vidro. Cor do texto pelo .escuro (landing.css). */
/* overflow: clip corta sem virar contêiner de rolagem: com hidden, a busca do navegador (scrollIntoView no centro)
   rolava a seção por dentro, 156 px em 390, e mostrava a corrente que fica abaixo dela. hidden fica para Safari < 16 */
.metodo { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: var(--preto); }
/* A corrente nunca fica atrás de título, texto ou seta, e o rótulo 0N fica legível em toda parada do carrossel (medido
   de 320 a 2560 px). Abaixo de 1080 px fica na faixa das setas, presa pelas mesmas medidas que posicionam as setas
   (gutter e --espaco-secao): elas caem sempre no vão escuro acima do terceiro elo (ponto 580, 172 da imagem). A partir
   de 1080 px tem tamanho fixo, começa 531 px depois da borda esquerda dos cards e entra 40 px na metade de cima deles:
   abaixo dos cards a seção mede sempre 84 px (vão e setas) mais --espaco-secao, e os cards medem 340 px. A máscara
   apaga a ponta esquerda, a borda de baixo (onde a imagem corta a corrente) e a direita (que aparece acima de 1960 px). */
.metodo-corrente, .metodo-corrente-sombra { position: absolute; z-index: -1; right: calc(var(--gutter) - 256px); top: calc(100% - var(--espaco-secao) - 130px); width: 640px; max-width: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 88%, transparent), linear-gradient(to top, transparent, rgba(0, 0, 0, 1) 10%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 88%, transparent), linear-gradient(to top, transparent, rgba(0, 0, 0, 1) 10%); mask-composite: intersect; }
.metodo-corrente-sombra { filter: blur(28px); opacity: .5; transform: translate(-40px, 36px) scale(1.04); }
.metodo-miolo { position: relative; display: grid; gap: 40px; }
.metodo-cabeca { display: grid; gap: 16px; max-width: 36rem; }
/* scroll-padding igual ao padding, e card no máximo da largura do trilho: o snap do primeiro card para em 0 (e não em
   6 px), e a seta Anterior fica desabilitada no início */
.carrossel { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; padding: 6px 6px 24px; margin: -6px -6px -24px; border-radius: var(--raio-card); }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel-card { flex: 0 0 min(300px, 100%); min-height: 340px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: var(--raio-card); }
.carrossel-card .rotulo { margin-bottom: auto; }
/* o parágrafo reserva cinco linhas (o mais longo tem cinco em 320 px): os títulos dos cinco cards ficam na mesma altura */
.carrossel-card .texto { font-size: 1rem; min-height: calc(1.55em * 5); }
.carrossel-setas { display: flex; justify-content: flex-end; gap: 12px; }
.carrossel-seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.carrossel-seta[hidden] { display: none; }
@media (hover: hover) { .carrossel-seta:not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, .14); } }
.carrossel-seta[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (min-width: 720px) {
  .metodo-corrente, .metodo-corrente-sombra { right: calc(var(--gutter) - 308px); top: calc(100% - var(--espaco-secao) - 150px); width: 760px; }
}
@media (min-width: 1080px) {
  .metodo-corrente, .metodo-corrente-sombra { right: calc(100% - var(--gutter) - 1539px); top: calc(100% - var(--espaco-secao) - 1061px); width: 1008px; }
}
/* a partir de 1200 px o container para de crescer e fica no centro: a corrente acompanha a borda esquerda dos cards */
@media (min-width: 1200px) {
  .metodo-corrente, .metodo-corrente-sombra { right: calc(50% - var(--gutter) - 939px); }
}

/* 07-origem.css */
/* 07-origem.css: origem (spec 5.7): texto num card aço claro e a frase num card aço escuro com um elo no canto. */
.origem-texto, .origem-frase { display: flex; flex-direction: column; gap: 20px; }
.origem-texto .titulo-2 { margin-bottom: 4px; }
/* o texto fica embaixo; o elo ocupa o canto de cima e não passa atrás do texto. A largura do elo acompanha a do card
   (% do card): com 210 e 260 px fixos ele passava atrás de "A SULEIMAN não deixa" de 720 a 860 px e abaixo de 340 px
   de tela (medido). De 390 a 719 px e a partir de 1080 px a largura continua a do plano (210 e 260 px). */
.origem-frase { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; min-height: 440px; }
.origem-elo { position: absolute; z-index: -1; right: -64px; top: -64px; width: min(210px, 60%); max-width: none; opacity: .6; transform: rotate(-14deg); pointer-events: none; }
@media (min-width: 720px) {
  .origem-frase { min-height: 380px; }
  .origem-elo { right: -56px; top: -48px; width: min(260px, 54%); opacity: .7; }
}
.origem-frase .titulo-3 { max-width: 16ch; }

/* 08-perguntas.css */
/* 08-perguntas.css: perguntas (spec 5.8): <details> nativo em cards; "+" desenhado em CSS que gira para "×". */
.perguntas-miolo { max-width: 880px; }
.perguntas-lista { display: grid; gap: 12px; }
.pergunta { padding: 0; }
.pergunta summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 20px clamp(20px, 3vw, 32px); border-radius: var(--raio-card); cursor: pointer; list-style: none; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cinza-200); background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform var(--transicao), border-color var(--transicao); }
.pergunta summary:hover::after { border-color: var(--tinta); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta .titulo-3 { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.3; }
.pergunta > .texto { max-width: 44rem; padding: 0 clamp(20px, 3vw, 32px) 24px; }

/* 09-contato.css */
/* 09-contato.css: contato (spec 5.9): card aço escuro centrado, luz radial e um elo discreto ao fundo. */
.contato-card { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: clamp(56px, 8vw, 104px); background-image: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .08), transparent 60%); }
/* o elo nunca passa atrás de texto, botão ou símbolo (medido de 320 a 1920 px). Celular: o texto ocupa a largura toda,
   então só um quarto do anel aparece, no canto de cima à direita, na faixa acima do título e à direita do símbolo */
.contato-elo { position: absolute; z-index: -1; right: -166px; top: -180px; width: 340px; max-width: none; opacity: .35; pointer-events: none; }
/* tablet: o anel entra pela borda direita, centrado na altura. Ele começa a 24% da imagem, então a borda esquerda dele
   fica a 246 px do centro do card; o texto tem de 205 px (o parágrafo) a 234 px (o título em 1079) de meia largura */
@media (min-width: 720px) { .contato-elo { right: auto; left: calc(50% + 145px); top: 50%; width: 420px; margin-top: -210px; } }
/* desktop: anel inteiro à direita, cortado pela borda (em 1080 px, com right -16%, ele encostava no título) */
@media (min-width: 1080px) { .contato-elo { left: auto; right: -18%; width: 560px; margin-top: -280px; } }
.contato-simbolo { width: 72px; margin-bottom: 8px; }
.contato-card .titulo-2 { max-width: 18ch; }
.contato-card .texto { max-width: 32rem; }
.contato-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 12px; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 8px; font-weight: 500; text-decoration: none; }
.link-seta::after { content: "→"; content: "→" / ""; transition: transform var(--transicao); }
.link-seta:hover::after { transform: translateX(3px); }

/* 10-rodape.css */
/* 10-rodape.css: rodapé (spec 5.10): wordmark em Gasoek One, três colunas, linha final em mono. */
.rodape { padding-block: clamp(56px, 8vw, 96px) 32px; border-top: 1px solid var(--linha-clara); }
.rodape-topo { display: grid; gap: 12px; padding-bottom: 40px; border-bottom: 1px solid var(--linha-clara); }
.rodape-marca { font-family: var(--fonte-display); font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; color: var(--tinta); }
.rodape-colunas { display: grid; gap: 32px; padding-block: 40px; }
.rodape-col { display: grid; align-content: start; gap: 12px; }
.rodape-col a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; font-weight: 500; text-decoration: none; }
.rodape-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* uma frase por linha até 1079 px (com wrap e space-between, de 600 a 1079 px ficava 1 + 2, com uma frase solta na
   ponta); numa linha só a partir de 1080 px, onde as três cabem */
.rodape-base { display: flex; flex-direction: column; gap: 8px 32px; padding-top: 24px; border-top: 1px solid var(--linha-clara); }
@media (min-width: 720px) {
  .rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .rodape-base { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}