/* Fontes hospedadas na própria pasta (SIL OFL 1.1, fonts/OFL.txt): nenhuma chamada a terceiros. */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/wix-madefor-display-v12-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/wix-madefor-text-v17-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/wix-madefor-text-v17-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/wix-madefor-text-v17-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --masthead-h: 112px;
  --hair-on-glass: color-mix(in oklab, var(--color-light) 9%, transparent);
  --fill-on-glass: color-mix(in oklab, var(--color-light) 5%, transparent);
}

html { scroll-padding-top: calc(var(--masthead-h) + var(--space-lg)); }
h1, h2, h3 { font-weight: var(--display-weight); }
.label { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }

/* ---------- botões, os oito estados ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent); }
.btn--primary:hover { background: var(--color-accent-hi); }
.btn--quiet { border-color: color-mix(in oklab, var(--color-light) 18%, transparent); background: color-mix(in oklab, var(--color-light) 4%, transparent); }
.btn--quiet:hover { background: color-mix(in oklab, var(--color-light) 10%, transparent); }
.btn--wide { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.linkish:hover { text-decoration-color: currentColor; }
.linkish:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- vidro, a superfície do produto ---------- */
.glass { background: var(--glass); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); }

/* ---------- cabeçalho ---------- */
.masthead { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.masthead.is-retracted { transform: translateY(-100%); }
/* Teclado: com o foco dentro dele, o cabeçalho recolhido volta à tela (o Tab nunca para num link fora da janela). */
.masthead.is-retracted:focus-within { transform: none; }
.masthead.is-off-photo { background: color-mix(in oklab, var(--color-paper) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
/* Sem JavaScript o masthead não ganha o fundo ao rolar: fica no topo da página e sobe com ela. */
html:not(.js) .masthead { position: absolute; }
/* Sem JavaScript somem os controles que não fariam nada: as abas e as fontes que não estão abertas e os controles da calculadora. */
html:not(.js) .preset-btn:not(.active), html:not(.js) .source-float-Btn:not(.active-source), html:not(.js) .calc input[type="range"] { display: none; }
.masthead__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); min-height: 68px; }
.footer-note { margin-top: var(--space-md); max-width: 30ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.masthead__actions { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.masthead .btn { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.mark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; }
.mark svg { flex-shrink: 0; }
.mark__accent { fill: var(--color-accent); }
.mark__name { font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.masthead__rule { height: var(--rule-hair); background: color-mix(in oklab, var(--color-light) 16%, transparent); }
.masthead__nav { display: flex; justify-content: center; gap: var(--space-xl); min-height: 44px; align-items: center; }
.masthead__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
/* Sobre a foto os links do menu usam a tinta cheia e a sombra do texto do hero: 4,5:1 de contraste em qualquer largura. */
.masthead:not(.is-off-photo) .masthead__nav a { color: var(--color-ink); text-shadow: 0 0 14px color-mix(in oklab, var(--color-shade) 70%, transparent); }
/* TC-07: o "Sign in" do menu só aparece no celular, quando o botão do cabeçalho some (bloco de 40rem, mais abaixo). */
.masthead__nav .nav__signin { display: none; }
.masthead__nav a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.is-off-photo .masthead__rule { background: var(--color-rule); }

/* ---------- hero: cartaz sobre a foto das Keys ---------- */
.hero { position: relative; display: grid; align-items: end; min-height: 100dvh; padding-top: calc(var(--masthead-h) + var(--space-xl)); padding-bottom: var(--space-2xl); overflow: hidden; }
.hero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2), var(--color-paper-3)); }
.hero__photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.03); animation: hero-drift 48s cubic-bezier(.45, 0, .55, 1) infinite alternate; transform-origin: 50% 50%; }
@keyframes hero-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.04) translate3d(-2.5%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__photo img { animation: none; transform: none; } }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--color-shade) 62%, transparent), transparent 24%),
  radial-gradient(ellipse 50% 58% at 19% 66%, color-mix(in oklab, var(--color-shade) 80%, transparent), transparent 72%),
  linear-gradient(100deg, color-mix(in oklab, var(--color-shade) 90%, transparent) 0%, color-mix(in oklab, var(--color-shade) 74%, transparent) 25%, color-mix(in oklab, var(--color-shade) 30%, transparent) 47%, transparent 63%),
  linear-gradient(to bottom, transparent 54%, var(--color-paper)); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; }
.hero__say h1 { max-width: 13ch; }
.hero__say .lead { margin-top: var(--space-lg); max-width: 50ch; font-size: var(--text-lg); color: var(--color-ink-2); }
.hero__actions { margin-top: var(--space-xl); }
.hero__terms { margin-top: var(--space-sm); max-width: 50ch; font-size: var(--text-sm); color: var(--color-ink-2); }
/* texto corrido sobre a foto: uma sombra larga e fraca segura o contraste onde a foto clareia (medido: 4,45 -> 4,80:1 em 1024 px) */
.hero__say .lead, .hero__terms { text-shadow: 0 0 14px color-mix(in oklab, var(--color-shade) 70%, transparent); }

/* ---------- a ficha do dossiê ---------- */
.sheet { margin: 0; }
.sheet__glass { position: relative; padding: var(--space-lg) var(--space-xl) var(--space-xl); background: var(--glass); overflow: visible; }
.sheet__tag { display: inline-block; margin-bottom: var(--space-sm); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--fill-on-glass); box-shadow: inset 0 0 0 1px var(--hair-on-glass); font: 500 var(--text-xs)/1.4 var(--font-body); color: var(--color-ink-2); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--hair-on-glass); }
.preset-btn { padding: var(--space-3xs) 0; border: 0; background: none; color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-body); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.preset-btn:hover { color: var(--color-ink); }
.preset-btn.active { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.preset-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-md); }
.sheet__top > div:first-child { min-width: 0; }
.verdict { font: 600 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0.04em; color: var(--color-accent); }
.verdict--go { color: var(--color-success); }
.verdict--caution { color: var(--color-accent-2); }
/* O vermelho do NO-GO clareado um pouco: 4,5:1 sobre o vidro também nas janelas muito largas. */
.verdict--nogo { color: color-mix(in oklab, var(--color-error) 88%, var(--color-light)); }
.sheet__address { max-width: 24ch; margin-top: var(--space-2xs); font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); font-synthesis: none; letter-spacing: var(--tracking-display); color: var(--color-ink); overflow-wrap: break-word; text-wrap: balance; }
.sheet__legend, .calc__tag { margin-top: var(--space-2xs); font-size: var(--text-xs); line-height: 1.45; color: var(--color-ink-2); }
.sheet__legend { max-width: 44ch; }
.score { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.score__fig { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.score__lab { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: var(--space-md) 0 0; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--hair-on-glass); }
.meta dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.meta dd { margin: 0; font-size: var(--text-sm); }

.vault__rows { margin: 0; }
.vault__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--hair-on-glass); }
.vault__row dt { flex: 1 1 auto; min-width: 0; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); }
.vault__row dd { flex: 0 1 auto; min-width: 0; max-width: 50%; margin: 0; font-size: var(--text-sm); line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
.vault__row--point { padding-inline: var(--space-sm); margin-inline: calc(-1 * var(--space-sm)); background: color-mix(in oklab, var(--color-accent-2) 10%, transparent); box-shadow: inset 2px 0 0 var(--color-accent-2); }
.vault__row--point dt { color: var(--color-accent-2); }
.is-locked .secret-value { visibility: hidden; position: relative; display: inline-block; max-width: 50%; white-space: nowrap; overflow: hidden; }
.is-locked .secret-value::after { content: ""; visibility: visible; position: absolute; inset: 0.08em -0.2em 0.1em; background: color-mix(in oklab, var(--color-shade) 90%, transparent); border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 11%, transparent); }
.padlock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); }
.padlock p { font-size: var(--text-sm); color: var(--color-ink-2); }
.is-unlocked .padlock p { color: var(--color-accent); }
.padlock__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.padlock .btn { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
/* O 'Peek inside' depende do site.js: sem JavaScript o botão não aparece (a ficha fica travada, com o link da prévia grátis). */
html:not(.js) [data-action="toggle-lock"] { display: none; }
.sheet figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- seções ---------- */
.section { padding-block: var(--section-gap); }
.section--l { padding-block: var(--section-gap-l); }
.section--band { padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); }
.section--ruled { border-top: var(--rule-hair) solid var(--color-rule); }
.head { margin-bottom: var(--space-2xl); }
.head .lead { margin-top: var(--space-md); color: var(--color-muted); }
.head--split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: baseline; }
.head--split .lead { margin-top: 0; }
.head--tight { margin-bottom: 0; }
.head .calc__tag { margin-top: var(--space-sm); }

/* ---------- as fontes: lista ao lado de um painel fixo ---------- */
.pinned { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.source-float-Btn { position: relative; display: block; width: 100%; padding: var(--space-lg) 0 var(--space-lg) var(--space-lg); border: 0; border-top: var(--rule-hair) solid var(--color-rule); background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.source-float-Btn:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.source-float-Btn::before { content: ""; position: absolute; left: 0; top: var(--space-lg); bottom: var(--space-lg); width: 2px; background: transparent; }
.source-float-Btn:hover { background: color-mix(in oklab, var(--color-light) 4%, transparent); }
.source-float-Btn.active-source::before { background: var(--color-accent); }
.source-float-Btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.source-float-Btn b { display: block; font-weight: 500; }
.source-float-Btn span { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.source-float-Btn.active-source span { color: var(--color-ink-2); }
.pinned__pane { position: sticky; top: calc(var(--masthead-h) + var(--space-xl)); }
.record { padding: var(--space-2xl); transition: opacity var(--dur-short) var(--ease-out); }
.record h3 { max-width: 24ch; }
.record__quote { margin-top: var(--space-lg); font-size: var(--text-xl); line-height: 1.45; color: var(--color-ink-2); text-indent: -0.4em; }
.record__src { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.record__why { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--hair-on-glass); font-size: var(--text-sm); color: var(--color-ink-2); }
.record__why b { font-weight: 500; color: var(--color-ink); }

/* ---------- o que faz: linhas com filete ---------- */
.rows { margin: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.rows > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: var(--display-weight) var(--text-title)/1.25 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.rows dd { margin: 0; color: var(--color-ink-2); }

/* ---------- o que a classificação lê: quadro claro ao lado da lista de números ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.well { margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-well); color: var(--color-well-ink); }
.well__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-inner); background: var(--color-well-2); }
.well__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.03); }
.well__frame > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-shade) 10%, transparent); outline-offset: -1px; }
.well figcaption { margin-top: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-well-ink); }
/* K-06: a nota é um <span> dentro do <figcaption>; display, peso e text-wrap (que o <p> herdava do base.css)
   seguram a aparência que ela tinha como parágrafo, sem palavra órfã na última linha. */
.well__note { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; color: var(--color-well-muted); text-wrap: pretty; }
.why { margin-top: var(--space-lg); max-width: 46ch; color: var(--color-ink-2); }
.why b { font-weight: 500; color: var(--color-ink); }
.tally { margin: var(--space-xl) 0 0; }
.tally > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.tally > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.tally dt { flex: 0 0 auto; max-width: 50%; font-size: var(--text-sm); color: var(--color-muted); }
.tally dd { min-width: 0; margin: 0; font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.tally .is-word { font-size: var(--text-md); line-height: 1.3; }

/* ---------- calculadora do lance máximo ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.calc__controls { padding: var(--space-xl); }
.slider-group + .slider-group { margin-top: var(--space-xl); }
.slider-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); }
.slider-header label { font: 500 var(--text-md)/1.4 var(--font-body); }
.slider-header .num { font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 24px; background: linear-gradient(to bottom, transparent calc(50% - 1.5px), var(--hair-on-glass) calc(50% - 1.5px), var(--hair-on-glass) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.calc input[type="range"]::-moz-range-track { height: 3px; background: var(--hair-on-glass); border-radius: var(--radius-pill); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--color-accent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 40%, transparent); }
.calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--color-accent); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc__out { align-self: center; }
.calc__fig { margin-top: var(--space-xs); font: var(--display-weight) clamp(2.25rem, 3vw, 2.75rem)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-accent); }
.calc__note { margin-top: var(--space-md); max-width: 60ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.calc__out .btn { margin-top: var(--space-lg); }

/* ---------- planos ---------- */
.plans { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.plans th, .plans td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; vertical-align: top; border-top: var(--rule-hair) solid var(--color-rule); }
.plans thead th { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.plans thead th.p2 { box-shadow: inset 0 2px 0 var(--color-accent); }
.plans thead th:first-child { width: 12%; }
.plans__rowhead { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.plans__pick { display: block; margin-top: var(--space-xs); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-accent); }
.plans__name { display: block; font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.plans__for { display: block; margin-top: var(--space-2xs); font: 400 var(--text-sm)/1.45 var(--font-body); color: var(--color-muted); }
.plans__price { display: block; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.plans__price .c { color: var(--color-muted); }
.plans__unit { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.plans__terms { margin-top: var(--space-lg); max-width: 90ch; font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted); }
.plans__terms a, .colophon a, .disclaimer a { color: var(--color-ink-2); }
.plans__terms a:hover, .colophon a:hover, .disclaimer a:hover { color: var(--color-ink); }
.plans .btn { min-height: 48px; padding: var(--space-xs) var(--space-md); line-height: 1.2; white-space: normal; text-align: center; }
.plans ul { margin: 0; padding-left: var(--space-md); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.plans li + li { margin-top: var(--space-2xs); }

/* ---------- fechamento ---------- */
.close__line { max-width: 20ch; font: var(--display-weight) var(--text-section)/1.1 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; }
.close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.close__act p { font-size: var(--text-sm); color: var(--color-muted); }
.close__btns { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* ---------- rodapé ---------- */
.site-footer { padding-block: var(--section-gap-s) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.mark--mast .mark svg { width: 44px; height: 44px; }
.mark--mast .mark__name { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); max-width: 36rem; margin-top: var(--space-2xl); }
.footer-col h2 { font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: normal; color: var(--color-muted); }
.footer-col ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: var(--space-xs); }
.footer-col a, .footer-col .linkish { font-size: var(--text-md); color: var(--color-ink-2); text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklab, var(--color-ink-2) 42%, transparent); }
.footer-col a:hover, .footer-col .linkish:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.disclaimer { margin-top: var(--space-2xl); max-width: 90ch; font-size: var(--text-xs); line-height: 1.55; color: var(--color-muted); }
.colophon { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.credits { margin-top: var(--space-xs); max-width: 58ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }

/* ---------- a revelação ao rolar, visível sem script ---------- */
[data-reveal] { --i: 0; }
[data-reveal][data-i="1"] { --i: 1; }
[data-reveal][data-i="2"] { --i: 2; }
[data-reveal][data-i="3"] { --i: 3; }
[data-reveal][data-i="4"] { --i: 4; }
[data-reveal][data-i="5"] { --i: 5; }
[data-reveal][data-i="6"] { --i: 6; }
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.22, 1, .36, 1), transform 900ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Teclado: o bloco que tem o foco aparece na hora, sem o atraso em escada, para o anel de foco nunca ficar invisível. */
.js [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }
/* TEC-04: ao imprimir ou salvar em PDF tudo aparece e o cabeçalho não se repete em cada folha. */
@media print {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .masthead { position: absolute; }
  .hero__photo img { animation: none; }
}

/* ---------- telas mais estreitas ---------- */
@media (max-width: 82rem) {
  .hero__grid { gap: var(--space-xl); }
  .sheet__glass { padding: var(--space-md) var(--space-lg) var(--space-lg); }
  /* TC-04: só o padding vertical encolhe; a linha destacada (.vault__row--point) mantém o recuo lateral */
  .vault__row { padding-block: var(--space-xs); }
  .hero__actions { margin-top: var(--space-lg); }
}
@media (max-width: 60rem) {
  :root { --masthead-h: 104px; }
  .masthead__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); justify-items: start; }
  .masthead__actions { justify-self: end; }
  .masthead__nav { justify-content: flex-start; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
  .hero { min-height: auto; padding-top: calc(var(--masthead-h) + var(--space-lg)); padding-bottom: var(--section-gap-s); }
  .hero__scrim { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-shade) 84%, transparent) 0%, color-mix(in oklab, var(--color-shade) 60%, transparent) 34%, color-mix(in oklab, var(--color-shade) 26%, transparent) 62%, var(--color-paper) 100%); }
  .hero__grid { gap: var(--space-lg); }
  .hero__say .lead { margin-top: var(--space-md); }
  .hero__actions { margin-top: var(--space-md); }
  .tabs { gap: var(--space-xs) var(--space-md); }
  .hero__grid, .pinned, .split, .calc, .head--split, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__say { order: -1; }
  .pinned__pane { position: static; }
  .record { padding: var(--space-lg); }
  .split .well { order: 1; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .footer-cols { max-width: none; }
  .plans { display: grid; grid-template-columns: minmax(0, 1fr); width: auto; }
  .plans thead, .plans tbody, .plans tr { display: contents; }
  .plans th, .plans td { display: block; width: auto; padding: var(--space-sm) 0; border-top: 0; }
  .plans thead th:first-child, .plans tbody th { display: none; }
  .plans .p1 { order: 1; } .plans .p2 { order: 2; } .plans .p3 { order: 3; } .plans .p4 { order: 4; }
  .plans thead th { padding-top: var(--space-lg); border-bottom: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .plans tbody tr:last-child td { padding-bottom: var(--space-lg); }
  /* T-14: vidro mais opaco quando a ficha fica sobre a parte clara da foto (os rótulos do vidro já são ink-2 em toda largura) */
  .sheet__glass { background: oklch(20% 0.018 268 / 0.8); }
  .sheet figcaption { color: var(--color-ink-2); }
}
/* T-14 no tablet (641 a 960 px): o texto do hero desce até a parte clara da foto; o véu segura o escuro até mais abaixo */
@media (min-width: 40.01rem) and (max-width: 60rem) {
  .hero__scrim { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-shade) 84%, transparent) 0%, color-mix(in oklab, var(--color-shade) 72%, transparent) 44%, color-mix(in oklab, var(--color-shade) 26%, transparent) 70%, var(--color-paper) 100%); }
}
@media (max-width: 40rem) {
  .masthead__nav { gap: var(--space-sm); }
  .hero { padding-top: calc(var(--masthead-h) + var(--space-sm)); }
  .tabs { gap: var(--space-sm) var(--space-sm); padding-bottom: var(--space-sm); }
  .preset-btn { font-size: var(--text-xs); }
  /* TC-09: a área de toque de cada aba cresce 6 px para cima e para baixo (34 px), sem mudar o desenho do sublinhado */
  .preset-btn { position: relative; }
  .preset-btn::after { content: ""; position: absolute; inset: -6px 0; }
  .meta { gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .sheet__address { max-width: none; font-size: var(--text-md); }
  .score__fig { font-size: var(--text-2xl); }
  .padlock__actions, .close__btns { width: 100%; }
  .padlock__actions .btn, .close__btns .btn { flex: 1 1 auto; }
  .vault__row { flex-wrap: wrap; }
  .vault__row dd, .is-locked .secret-value { flex: 1 1 100%; max-width: 100%; text-align: left; }
  .vault__row--point { margin-inline: 0; padding-inline: var(--space-sm); }
  .is-locked .vault__row--point .secret-value::after { inset: 0.08em 0 0.1em; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* ---------- ajustes medidos no navegador ---------- */
/* T-08: em janela com até 1088 px de altura o botão principal fica na primeira tela. A ficha ficou mais alta que a
   janela, então o texto do hero alinha pelo topo; em janela com até 800 px de altura o título encolhe. */
@media (min-width: 60rem) and (max-height: 68rem) {
  .hero { min-height: auto; align-items: start; }
  .hero__grid { align-items: start; }
}
@media (min-width: 60rem) and (max-height: 50rem) {
  .hero__say h1 { max-width: 16ch; font-size: var(--text-display-s); }
}
/* T-06: os botões da ficha empilham no celular */
@media (max-width: 40rem) { .padlock__actions .btn { flex: 1 1 100%; white-space: normal; } }
/* masthead no celular: marca à esquerda e um botão à direita, numa linha só. O <span> vazio que
   centraliza a marca no desktop sai da grade; fica só o "Free preview". TC-07: o "Sign in" que sai
   dos botões aparece como último link do menu, encostado à direita (e continua no rodapé). */
@media (max-width: 60rem) { .masthead__inner > span:empty { display: none; } }
@media (max-width: 40rem) {
  .masthead__actions .btn:first-child { display: none; }
  .masthead__nav .nav__signin { display: inline-flex; margin-left: auto; color: var(--color-ink); }
  .hero__say .lead { font-size: var(--text-lead); }
}
/* T-07: o menu cabe sem rolagem escondida. Abaixo de 432 px sai o primeiro link ("Example dossier":
   a ficha é o bloco logo abaixo do texto do hero no celular, e o link continua no rodapé); os outros
   quatro e o "Sign in" (TC-07) cabem inteiros até 320 px. */
@media (max-width: 27rem) { .masthead__nav a:first-child { display: none; } }
@media (max-width: 22.5rem) {
  .masthead__inner { gap: var(--space-xs); }
  .masthead__nav { gap: var(--space-xs); }
  .masthead__nav a { font-size: var(--text-xs); }
  .mark__name { font-size: var(--text-lg); }
  .mark svg { width: 22px; height: 22px; }
  .masthead .btn { padding: 0 var(--space-sm); font-size: var(--text-xs); }
}