/* Curva Interiores · o site no sistema da Curvinha (packages/ui por baixo, o tipo e o ritmo de marketing/landing, TYPE.md de lá),
   com a identidade da Curva por cima: o papel quente do curvinha.app como base, o verde floresta dela (#2D3E2E, a cor do site
   atual) como tinta de acento e botão, e a sálvia só em fundos de destaque. No máximo uma faixa escura na página (SISTEMA.md).
   O amarelo e o oliva da Curvinha só aparecem no bloco do app (.cvh). Claro e escuro pelo sistema.
   Cada seção tem o próprio CSS em sections/<seção>.css; aqui ficam só os tokens, o tipo, o topo e o que é de todas. */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/InstrumentSerif-Italic.woff2) format("woff2"); }
:root {
  /* papel: os mesmos valores do curvinha.app, então as duas marcas parecem irmãs */
  --bg: light-dark(#F5F2EC, #131410);
  --surface: light-dark(#FCFBF8, #23241E);
  --well: light-dark(#EEE9E0, #2B2C25);
  --strong: light-dark(#1E1C19, #F1EFE8);
  --text: light-dark(#34312C, #DDD9D0);
  --body: light-dark(#4D4942, #C6C2B8);
  --muted: light-dark(#6B665D, #A3A096);
  --soft: light-dark(#8E887D, #847E73);
  --hair: light-dark(#E4DED3, #2C2B25);
  --line: light-dark(#D8D1C4, #3A3830);
  /* a Curva: floresta é a tinta de acento (itálico dos títulos, links, botão, números em destaque). A sálvia vive em fundos
     claros (--sage-tint) e em detalhes; nunca como fundo de seção inteira. Contraste: floresta no papel 10,2:1; no escuro, a
     floresta clara (#B9CBAE) no #131410 dá 10,8:1. */
  --forest: light-dark(#2D3E2E, #B9CBAE);
  --forest-em: light-dark(#2D3E2E, #C5D5BA);
  --on-forest: light-dark(#F5F2EC, #131410);
  --sage: light-dark(#A8B79C, #5E6E59);
  --sage-tint: light-dark(#E5E9DC, #20271F);
  /* a única faixa escura permitida (opcional): verde floresta nos dois temas, papel por cima, 10:1. */
  --band: light-dark(#2D3E2E, #1B261D);
  --on-band: #F2F0E8;
  --on-band-dim: rgb(242 240 232 / .76);
  --band-em: #C5D5BA;
  --ink: var(--forest);
  --sans: var(--cv-font-text);
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  /* o contorno de 1px por dentro da sombra dos cards (o --ring do curvinha.app) */
  --ring: light-dark(rgb(40 30 10 / .07), rgb(255 250 240 / .07));
  --shadow: 0 1px 2px rgb(40 34 20 / .06), 0 12px 32px -12px rgb(40 34 20 / .18);
  --shadow-lg: 0 2px 4px rgb(40 34 20 / .05), 0 30px 60px -20px rgb(40 34 20 / .28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* o tipo do curvinha.app (marketing/landing/TYPE.md), 1 para 1 */
  --fs-display: clamp(56px, 41px + 3.81vw, 96px); --lh-display: 1;   --tr-display: -.04em;
  --fs-h1: clamp(40px, 32.6px + 1.905vw, 60px);   --lh-h1: 1.04;     --tr-h1: -.03em;
  --fs-h2: clamp(36px, 30px + 1.524vw, 52px);     --lh-h2: 1.05;     --tr-h2: -.03em;
  --fs-title: 22px;   --lh-title: 1.2;   --tr-title: -.02em;
  --fs-kicker: 17px;  --lh-kicker: 1.5;  --tr-kicker: -.015em;
  --fs-lede: 18px;    --lh-lede: 1.6;    --tr-lede: -.013em;
  --fs-body: 16.5px;  --lh-body: 1.55;   --tr-body: -.01em;
  --fs-small: 15px;   --lh-small: 1.5;   --tr-small: -.01em;
  --fs-caption: 13px; --lh-caption: 1.45; --tr-caption: -.005em;
  --w-h2: 14em; --w-lede: 42.5em; --w-desc: 31em; --w-body: 21.5em;
  /* ritmo: título → lede 24, lede → botões 32, h2 → descrição 20, descrição → conteúdo 56, h3 → texto 8 */
  --gap-h1: 24px; --gap-cta: 32px; --gap-h2: 20px; --gap-content: 56px; --gap-title: 8px;
  /* cada seção usa --sec-y em cima e embaixo, então o vão entre duas é o dobro: 112 no celular, 176 em 1440 (o vão do
     curvinha.app, que põe o espaço só em cima de cada seção) */
  --sec-y: clamp(56px, 38px + 3.33vw, 88px);
  --r-card: 20px; --r-media: 20px; --r-control: 14px;
  /* os controles da Curvinha (packages/ui) no verde da Curva */
  --cv-olive: var(--forest);
  --cv-olive-ink: var(--forest);
  --cv-focus: var(--forest);
  --cv-on-primary: var(--on-forest);
}
:root[data-theme="dark"] { --grain: var(--grain-dark); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --grain: var(--grain-dark); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--grain) var(--bg); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
img { max-width: 100%; height: auto; display: block; }
img, svg, video { -webkit-user-drag: none; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); transition: color var(--cv-t-base) var(--cv-ease-out), text-decoration-color var(--cv-t-base) var(--cv-ease-out); }
a:hover { text-decoration-color: currentColor; }
:is(a, button, summary, label):focus-visible { outline-offset: 3px; border-radius: 6px; }
/* margem zero sem especificidade, senão vence os espaços entre título e texto (--gap-*) logo abaixo */
:where(p) { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; color: var(--strong); font-family: var(--sans); font-weight: 400; letter-spacing: -.03em; text-wrap: balance; }
/* o acento de serifa: mesmo tamanho do sans (o x-height já bate), na tinta da Curva */
:where(h1, h2, h3, .t-quote) em { font: italic 400 1em/.9 var(--serif); letter-spacing: -.02em; color: var(--forest-em); }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: var(--w-h2); }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); color: var(--strong); }
.t-kicker { font: 500 var(--fs-kicker)/var(--lh-kicker) var(--sans); letter-spacing: var(--tr-kicker); color: var(--forest); }
.t-lede { font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-lede); color: var(--body); max-width: var(--w-lede); text-wrap: balance; }
.t-desc { font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-lede); color: var(--body); max-width: var(--w-desc); }
.t-body { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); color: var(--muted); max-width: var(--w-body); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tr-caption); color: var(--muted); }
.t-quote { font-size: clamp(30px, 23px + 1.75vw, 48px); line-height: 1.2; letter-spacing: -.01em; color: var(--strong); text-wrap: balance; }
:where(.t-h1) + :where(.t-lede) { margin-top: var(--gap-h1); }
:where(.t-h2, h2) + :where(.t-desc) { margin-top: var(--gap-h2); }
:where(h3, .t-title) + :where(p) { margin-top: var(--gap-title); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
@media (min-width: 768px) { .wrap { padding-inline: max(40px, env(safe-area-inset-left)) max(40px, env(safe-area-inset-right)); } }
.skip { position: absolute; left: 12px; top: -80px; z-index: 40; background: var(--strong); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
/* cabeça de seção centrada (título + descrição), como no curvinha.app */
.sv-head { text-align: center; margin-bottom: var(--gap-content); }
.sv-head .t-h2, .sv-head .t-desc { margin-inline: auto; }
section { scroll-margin-top: 64px; }
/* os botões da Curvinha com a letra da Curva (Archivo) em vez da redonda, que é a voz do app */
.cv-btn { font: 600 16px/1.15 var(--sans); letter-spacing: -.01em; }
a.cv-btn { color: var(--fg); }
.cv-btn svg { width: 19px; height: 19px; }
/* o link de texto com seta (Ver os pacotes →) */
.see { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--strong); font: 500 16px/1 var(--sans); text-decoration: none; border-radius: 999px; }

/* o logo da Curva (assets/curva-*.svg) pintado com a cor do texto: o arquivo vira máscara. .curva-logo é o completo (com a
   assinatura), .wordmark só a palavra. */
.wordmark, .curva-logo { display: block; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.wordmark { --logo: url(/assets/curva-wordmark.svg); width: 104px; aspect-ratio: 326.5 / 107; color: var(--forest); }
.curva-logo { --logo: url(/assets/curva-logo.svg); aspect-ratio: 310 / 156; color: var(--forest); }

/* topo: gruda, e ao rolar ganha papel translúcido e uma linha fina (como o curvinha.app) */
.top { position: sticky; top: 0; z-index: 30; }
.top::before { content: ""; position: absolute; inset: 0; background: var(--grain) color-mix(in oklab, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--hair); opacity: 0; transition: opacity var(--cv-t-slow) var(--cv-ease-out); }
.top.scrolled::before { opacity: 1; }
.top-in { position: relative; display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; min-height: 44px; border-radius: 8px; }
.nav { display: none; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 500 var(--fs-small)/1 var(--sans); transition: color var(--cv-t-base), background-color var(--cv-t-base); }
.nav a:hover { color: var(--strong); background: color-mix(in oklab, var(--strong) 6%, transparent); }
.top-cta { margin-left: auto; min-height: 40px; }
@media (pointer: coarse) { .top-cta { min-height: 44px; } }
@media (min-width: 761px) { .nav { display: flex; } .wordmark { width: 116px; } }

/* entrada ao rolar: aqui só o "antes" (escondido até ganhar .in). O papel de cada um (data-reveal="title|lede|body|card|
   media|action"), a cascata e a tinta dos itálicos moram no main.js, numa animação que some ao terminar. Sem JS ou com
   menos movimento, nada se esconde. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.in) { opacity: 0; }
}
/* fora da tela a Curvinha pára de piscar (main.js põe .cv-off), nos dois mascotes */
.cv-curvinha.cv-off .c-eyes { animation-play-state: paused; }

.nf { padding: 96px 20px 120px; text-align: center; }
.nf .t-desc { margin: 20px auto 0; }
.nf-links { margin-top: 32px; }

/* r3 micro: botões, CTA do topo, seleção e foco. O press e o hover do packages/ui ajustados à Curva sem mexer no ui.css
   (é do curvinha.app): press em .97, hover só com mouse (no toque ele ficava grudado depois do toque), entrada do hover mais
   lenta que a saída. */
/* sálvia nos dois temas: o --sage-tint do escuro sumia contra o fundo */
::selection { background: light-dark(color-mix(in oklab, var(--sage) 55%, transparent), var(--sage)); color: var(--strong); }
/* o amarelo da seleção do ui.css sumia no card butter; lá dentro a seleção é o oliva da Curvinha */
.cvh-card ::selection { background: color-mix(in oklab, var(--cv-olive) 30%, transparent); color: var(--cvh-ink); }
:where(*) { scrollbar-color: var(--line) transparent; }
/* o foco segue a forma do controle: a regra geral de 6px acima transformava a pílula num retângulo */
:is(.cv-btn, .see):focus-visible { border-radius: 999px; }

.cv-btn { transition: transform var(--cv-t-press) var(--cv-ease-out), box-shadow var(--cv-t-press) var(--cv-ease-out), background-color var(--cv-t-fast) var(--cv-ease-out), color var(--cv-t-fast) var(--cv-ease-out); }
.cv-btn:hover { background: var(--bg); }
.cv-btn:active { transform: translateY(1px) scale(.97); }
.see { transition: transform var(--cv-t-press) var(--cv-ease-out), color var(--cv-t-fast) var(--cv-ease-out); }
.see:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cv-btn:hover { background: color-mix(in oklab, var(--bg), light-dark(black, white) 10%); transition-duration: var(--cv-t-press), var(--cv-t-press), var(--cv-t-base), var(--cv-t-base); }
  .see span { transition: translate var(--cv-t-fast) var(--cv-ease-out); }
  .see:hover { color: var(--forest); }
  .see:hover span { translate: 3px 0; transition-duration: var(--cv-t-base); }
}
/* com menos movimento nada se desloca, mas a cor continua respondendo (o ui.css zera toda transição em 1ms) */
@media (prefers-reduced-motion: reduce) {
  .cv-btn:active, .see:active { transform: none; }
  .cv-btn:active { background: color-mix(in oklab, var(--bg), light-dark(black, white) 14%); }
  :is(.cv-btn, .see) { transition-property: background-color, color, box-shadow !important; transition-duration: var(--cv-t-fast) !important; }
}

/* hero */
/* hero: no papel, centrado como o do curvinha.app (kicker, título com o itálico sozinho na 2ª linha, lede, botões), e um
   projeto real numa janela larga que aparece na dobra. */
.hero { position: relative; isolation: isolate; }
.hero-in { text-align: center; padding-top: 56px; padding-bottom: 44px; }
.hero-kick { margin-bottom: 8px; text-wrap: balance; }
/* a frase é curta: maior que o h1 comum (60) para dominar a abertura, como a do curvinha.app, sempre em 2 linhas */
.hero-t { margin-inline: auto; font-size: clamp(42px, 33.6px + 2.667vw, 72px); }
.hero-t > span, .hero-t em { display: block; }
.hero-t em { padding-bottom: .04em; }
.hero-lede { max-width: 36em; margin: var(--gap-h1) auto var(--gap-cta); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.hero-cta .cv-btn { border-radius: 999px; transition: scale .15s var(--cv-ease-out), background-color .2s, box-shadow .2s; }
.hero-cta .cv-btn:active { scale: .97; }

/* a vitrine: um brilho quente (sem amarelo) e uma sálvia bem leve atrás da janela. Clip só na horizontal: o brilho é mais
   largo que a tela, mas sobe por trás dos botões. */
.hero-show { position: relative; padding-bottom: 24px; overflow-x: clip; }
.hero-glow { position: absolute; z-index: -1; left: 50%; top: -40px; width: min(1760px, 180vw); height: 860px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, light-dark(rgb(206 166 126 / .22), rgb(150 110 70 / .12)), transparent),
    radial-gradient(38% 34% at 50% 70%, light-dark(rgb(168 183 156 / .16), rgb(94 110 89 / .12)), transparent); }

.hero-win { position: relative; margin: 0; aspect-ratio: 2 / 1; border-radius: var(--r-media); overflow: hidden; background: var(--well);
  box-shadow: 0 0 0 1px light-dark(rgb(40 34 20 / .06), rgb(255 255 255 / .06)), 0 16px 40px -24px rgb(40 34 20 / .18); }
/* o recorte: o render tem muito teto; a janela começa no ar-condicionado e mostra mesa, sofá e tapete. No celular um zoom
   leve tira o teto que o quadrado mostraria. */
.hero-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 91%); scale: var(--hero-zoom, 1); transform-origin: var(--hero-pos, 50% 91%); }

/* a chegada: kicker, as duas linhas do título, lede, botões e, depois dos botões, a janela. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.hero-kick, .hero-t > *, .hero-lede, .hero-cta) { animation: hero-in .9s var(--cv-ease-out) var(--d, 0ms) both; }
  .js .hero-t > span { --d: 70ms; }
  .js .hero-t em { --d: 150ms; }
  .js .hero-lede { --d: 240ms; }
  .js .hero-cta { --d: 320ms; }
  .js .hero-glow { animation: hero-fade 1.4s ease .4s both; }
  .js .hero-win { animation: hero-win-in 1.1s cubic-bezier(.32, .72, 0, 1) 450ms both; }
}
@keyframes hero-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }
@keyframes hero-win-in { from { opacity: 0; transform: translateY(40px) scale(.98); } }
@keyframes hero-fade { from { opacity: 0; } }

@media (min-width: 961px) { .hero-in { padding-top: 76px; } }
@media (max-width: 767px) {
  .hero-in { padding-top: 40px; padding-bottom: 40px; }
  .hero-win { --hero-pos: 66% 100%; --hero-zoom: 1.3; aspect-ratio: 1 / 1; }
}

/* proposito */
/* propósito e a Ana: a foto dela de um lado, a frase e a carta do outro. No celular a frase vem antes da foto, para a
   pessoa ler o propósito antes de rolar a foto inteira, e o nome dela vem colado na foto, antes da bio. */
.purpose { padding-block: var(--sec-y); }
.pp { display: grid; grid-template-areas: "k" "q" "photo" "sign" "bio"; }
.pp-k { grid-area: k; }
.pp-q { grid-area: q; margin: 16px 0 0; }
.pp-q .t-quote { max-width: 16em; }
.pp-nw { white-space: nowrap; }
.pp-photo { grid-area: photo; margin: 24px 0 0; max-width: 480px; }
.pp-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%; border-radius: var(--r-media); box-shadow: 0 16px 40px -24px rgb(40 34 20 / .18);
  /* no escuro a parede verde da foto some no fundo: um fio de luz marca a borda */
  outline: 1px solid light-dark(transparent, rgb(241 239 232 / .08)); outline-offset: -1px; }
.pp-bio { grid-area: bio; display: grid; gap: 16px; margin-top: 24px; max-width: 32em; font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-lede); color: var(--body); }
/* o nome na serifa da Curva, como quem assina à mão: no celular embaixo da foto, no desktop no fim da carta */
.pp-sign { grid-area: sign; display: grid; gap: 2px; margin: 16px 0 0; }
.pp-name { font: italic 400 30px/1.1 var(--serif); letter-spacing: -.01em; color: var(--forest-em); }
.pp-role { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
/* a frase acende palavra por palavra, como os depoimentos do curvinha.app (proposito.js só divide com movimento) */
@media (prefers-reduced-motion: no-preference) {
  .js .pp-q .pp-w { opacity: .14; transition: opacity var(--cv-t-standard) var(--cv-ease-out) calc(var(--i) * 45ms + 150ms); }
  .js .pp-q.in .pp-w { opacity: 1; }
}
@media (min-width: 961px) {
  /* a foto inteira (2:3) e o texto centrado na altura dela */
  .pp { grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: "photo ." "photo k" "photo q" "photo bio" "photo sign" "photo ."; column-gap: clamp(64px, 6.7vw, 96px); }
  .pp-photo { margin: 0; }
  .pp-photo img { aspect-ratio: 2 / 3; }
  .pp-q .t-quote { max-width: none; }
  .pp-bio { margin-top: 36px; }
  .pp-sign { margin-top: 28px; }
}

/* cases */
/* cases: um case por vez, em destaque (a frase do cliente em serifa como título, a imagem grande ao lado) e a conta numa
   barra: o investimento máximo é o trilho inteiro, o projeto e a transformação enchem, e o pedaço que sobra é a economia,
   na tinta da Curva. As abas trocam o case; sem JS os três aparecem um embaixo do outro. */
.cases {
  --case-r: 28px;
  --case-sh: light-dark(rgb(96 62 28 / .22), rgb(0 0 0 / .6));
  --case-obra: light-dark(#D6CEC0, #6E6B61);
  /* a economia aparece depois do último pedaço da barra (--bd de .case-b-eco) */
  --case-eco-at: 1s;
  padding-block: var(--sec-y);
}
.case-kicker { margin-bottom: 16px; }

/* as abas: um seletor em pílula, como o PT/EN do curvinha.app. Só aparecem depois que o cases.js rodou (.tabbed). A
   aba ativa é uma cópia da lista no estilo "ativa" por cima, recortada por clip-path na aba escolhida (a técnica de abas
   da emil): na troca o recorte anda, e fundo e cor do texto mudam juntos, sem duas transições de cor brigando. */
.case-tabs { display: none; }
.cases.tabbed .sv-head { margin-bottom: 40px; }
.case-switch { position: relative; width: fit-content; margin: 0 auto 32px; }
.tabbed .case-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.tabbed .case-tabs-on { position: absolute; inset: 0; z-index: 1; background: light-dark(var(--surface), #35362E); box-shadow: none; pointer-events: none; clip-path: inset(50% 50% round 999px); }
/* o anel fica em cada aba da cópia: o recorte só mostra o da escolhida (no escuro, sem ele a pílula sumia no trilho) */
.case-tabs-on .case-tab { color: var(--strong); box-shadow: inset 0 0 0 1px var(--ring); }
.case-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 var(--fs-small)/1 var(--sans); letter-spacing: var(--tr-small); white-space: nowrap; cursor: pointer; transition: color var(--cv-t-base) ease, scale var(--cv-t-press) var(--cv-ease-out); }
.case-tab[aria-selected="true"] { color: var(--strong); }
/* com menos movimento o toque não afunda: fica a cor da aba escolhida */
@media (prefers-reduced-motion: no-preference) { .case-tab:active { scale: .97; } }
@media (hover: hover) and (pointer: fine) { .case-tab:hover { color: var(--strong); } }
.case-tab:focus-visible { outline-offset: 2px; border-radius: 999px; }

.case-stage { display: grid; gap: 32px; }
.case { display: grid; overflow: hidden; border-radius: var(--case-r); background: var(--surface); box-shadow: 0 32px 64px -40px var(--case-sh), 0 10px 24px -18px var(--case-sh), 0 0 0 1px var(--ring); }
.case[hidden] { display: none; }
/* com abas, os três ocupam a mesma célula: o palco tem a altura do maior e a página não pula na troca. O escondido só
   fica invisível (visibility também o tira do leitor de tela e do Tab). */
.tabbed .case-stage > .case { grid-area: 1 / 1; }
.tabbed .case[hidden] { display: grid; visibility: hidden; }
.case:focus-visible { outline: 2px solid var(--cv-focus); outline-offset: 4px; }
.case-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--well); }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case--escritorio .case-img img { object-position: 42% 50%; }
.case--consultorio .case-img img { object-position: 50% 62%; }

.case-body { display: flex; flex-direction: column; padding: 28px 22px 26px; }
.case-cap { font: 500 var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--tr-caption); color: var(--muted); }
.case-quote { margin: 12px 0 0; }
/* a aspa de abertura fica pendurada pra fora, pra letra alinhar com a legenda */
.case-quote p { font: italic 400 clamp(32px, 26px + 1.5vw, 46px)/1.08 var(--serif); letter-spacing: -.015em; color: var(--strong); text-indent: -.36em; text-wrap: balance; }

/* a leitura da barra, em uma frase, feita dos mesmos números */
.case-read { margin-top: 16px; max-width: 24em; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); color: var(--body); }

/* a conta */
.case-bill { margin-top: 36px; }
.case-max { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; }
.case-max dt { font-size: var(--fs-small); color: var(--muted); }
.case-max dd { margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: -.02em; color: var(--strong); font-variant-numeric: tabular-nums; }
.case-bar { display: flex; gap: 3px; height: 14px; margin-top: 12px; }
.case-bar i { flex: 0 0 calc(var(--w) - 2px); border-radius: 3px; background: var(--c); transform-origin: left; }
.case-bar i:first-child { border-radius: 7px 3px 3px 7px; }
.case-bar i:last-child { border-radius: 3px 7px 7px 3px; }
.case-b-curva, .case-n-curva { --c: var(--sage); }
.case-b-obra, .case-n-obra { --c: var(--case-obra); }
.case-b-eco, .case-n-eco { --c: var(--forest); }
.case-nums { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 12px 28px; margin: 16px 0 0; }
.case-nums dt { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.case-nums dt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.case-nums dd { margin: 2px 0 0; font: 500 17px/1.2 var(--sans); letter-spacing: -.02em; color: var(--strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a economia: embaixo do pedaço que sobrou, grande e na tinta da Curva */
.case-n-eco { justify-self: end; text-align: right; }
.case-n-eco dt { justify-content: flex-end; color: var(--forest); font-weight: 600; }
.case-n-eco dd { margin-top: 0; font-size: clamp(30px, 24px + 1.2vw, 40px); line-height: 1.05; letter-spacing: -.035em; color: var(--forest); }

@media (min-width: 961px) {
  .case { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .case-img { order: 2; aspect-ratio: auto; }
  .case-body { padding: 52px 56px 48px; }
  .case-quote { margin-top: 16px; }
  .case-read { margin-top: 20px; font-size: var(--fs-body); line-height: var(--lh-body); }
  .case-quote p { font-size: clamp(44px, 20px + 2.6vw, 58px); line-height: 1.04; }
  .case-quote p { font-size: clamp(40px, 22px + 2vw, 52px); }
  .case-bill { margin-top: auto; padding-top: 32px; }
  .case-bar { height: 16px; }
}
@media (max-width: 600px) {
  .case-switch, .tabbed .case-tabs { width: 100%; }
  .case-tab { flex: 1 1 auto; padding: 0 10px; }
  .case-nums { grid-template-columns: auto 1fr; gap: 12px 24px; }
  .case-n-eco { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; justify-self: stretch; padding-top: 12px; border-top: 1px solid var(--hair); }
}

/* entrada: a barra enche da esquerda (projeto, depois a transformação) e o pedaço que sobra aparece por último. Na troca
   de aba (.swap, do cases.js) o novo já está inteiro, com os números no lugar, e o antigo fica por cima e some rápido
   (.out): uma passagem curta, sem cascata, para comparar os cases sem esperar o número. */
@media (prefers-reduced-motion: no-preference) {
  .tabbed .case-tabs-on.ready { transition: clip-path var(--cv-t-slow) var(--cv-ease-out); }
  .tabbed .case .case-bar i { scale: 0 1; }
  .tabbed .case.in .case-bar i { scale: 1; transition: scale var(--cv-t-play) var(--cv-ease-out) var(--bd); }
  .tabbed .case .case-b-curva { --bd: 250ms; }
  .tabbed .case .case-b-obra { --bd: 400ms; }
  .tabbed .case .case-b-eco { --bd: 900ms; }
  .tabbed .case .case-n-eco { opacity: 0; translate: 0 6px; }
  .tabbed .case.in .case-n-eco { opacity: 1; translate: none; transition: opacity var(--cv-t-standard) var(--cv-ease-out) var(--case-eco-at), translate var(--cv-t-sheet) var(--cv-ease-out) var(--case-eco-at); }
  /* trocado pela aba: a barra e a economia já chegam cheias, mesmo que a entrada ainda estivesse enchendo */
  .tabbed .case.swap :is(.case-bar i, .case-n-eco) { transition: none; }
  @media (hover: hover) and (pointer: fine) {
    .case-img img { transition: scale var(--cv-t-play) var(--cv-ease-out); }
    .case:hover .case-img img { scale: 1.03; }
  }
}
/* o antigo continua visível por cima enquanto some (o cases.js tira o .out depois). Com movimento reduzido também: a
   troca vira uma passagem de opacidade, sem nada andar. */
.tabbed .case[hidden].out { visibility: visible; z-index: 1; animation: case-out var(--cv-t-fast) var(--cv-ease-out) both; }
@keyframes case-out { to { opacity: 0; } }

/* entregas */
/* O que entregamos: o bento do curvinha.app (sections/bento.css de lá, 12 colunas, 7 + 5). A imagem 3D (o resultado) na
   largura toda, em cima; embaixo a lista de compras (7) e a planta (5), como documentos curtos, de se ler de relance. */
.deliver {
  --dv-lift: 0 24px 56px -28px light-dark(rgb(96 62 28 / .32), rgb(0 0 0 / .7)), 0 4px 14px -8px light-dark(rgb(96 62 28 / .1), rgb(0 0 0 / .5));
  /* papel de documento: claro também no escuro, como uma folha impressa */
  --dv-paper: light-dark(#FFFFFF, #ECE8DF);
  /* a tinta da Curva no papel: o papel é claro nos dois temas, então o verde também é o do claro */
  --dv-ink: #2D3E2E;
  /* o desenho da planta é o momento longo da seção: o dobro do --cv-t-draw */
  --dv-t-draw: calc(var(--cv-t-draw) * 2);
  padding-block: var(--sec-y);
}
/* subgrid na fileira de baixo, como no bento de lá: o cabeçalho tem a altura do mais alto, então as peças começam juntas */
.dv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 400px; gap: 16px; }
.dv--3d { grid-column: 1 / -1; grid-row: 1; } .dv--lista { grid-area: 2 / 1 / 4 / 8; } .dv--planta { grid-area: 2 / 8 / 4 / -1; }
.dv { position: relative; isolation: isolate; display: grid; grid-template-rows: subgrid; row-gap: 0; border-radius: 28px; background: var(--well); overflow: hidden; }
/* o anel de dentro, por cima da peça, então o painel parece encaixado */
.dv::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); }
.dv-hd { padding: 32px 32px 28px; }
.dv-hd p { max-width: 26rem; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); color: var(--muted); }
.dv-art { position: relative; }

/* 3D: a imagem deitada (16:9), saindo pela borda de baixo. O texto à esquerda, como um cartão largo do bento. */
.dv--3d { grid-template-rows: none; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.dv--3d .dv-hd { align-self: center; padding: 40px 0 40px 40px; }
.dv--3d .dv-art { padding: 32px 32px 0 16px; }
.dv-frame { display: block; aspect-ratio: 16 / 9; margin-bottom: -1px; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--line); box-shadow: var(--dv-lift), 0 0 0 1px var(--ring); }
.dv-frame img { width: 100%; height: 100%; object-fit: cover; }

/* documentos: a folha sai pela borda de baixo */
.dv-paper { isolation: isolate; position: absolute; inset: 0 32px -1px; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--dv-paper); box-shadow: var(--dv-lift), 0 0 0 1px var(--ring); }
/* a planta numa prancha: a margem fina da folha técnica, o desenho centrado */
.dv-sheet { padding-top: 28px; }
.dv-sheet::before { content: ""; position: absolute; inset: 14px 14px -1px; border: 1px solid rgb(40 30 10 / .1); border-bottom: 0; border-radius: 10px 10px 0 0; pointer-events: none; }
/* o branco dos arquivos dela vira a cor do papel (no escuro o papel é creme) */
.dv-sheet img, .dv-doc img { mix-blend-mode: multiply; }
.dv-draw { position: relative; display: block; width: fit-content; height: calc(100% - 24px); margin-inline: auto; overflow: hidden; }
.dv-draw img { width: auto; height: 100%; }
.dv-beam { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent 82%, color-mix(in oklab, var(--dv-ink), transparent 88%) 99%, color-mix(in oklab, var(--dv-ink), transparent 35%) 99%); }

/* a lista: o print da planilha dela, do cabeçalho para baixo; a folha corta o resto */
.dv-doc img { width: 100%; height: auto; }

/* Movimento. Cada peça se apresenta do jeito que é feita, uma vez, quando o card entra (entregas.js põe .dv-armed e
   depois .dv-on): os renders abrem de baixo como uma janela, a lista é montada item a item, a planta é desenhada de cima
   para baixo. Sem JS ou com movimento reduzido nenhuma dessas classes existe, então tudo já está no lugar. */
@media (prefers-reduced-motion: no-preference) {
  .dv-frame { transition: clip-path var(--cv-t-play) var(--cv-ease-out) var(--fd, 200ms); }
  .dv-frame + .dv-frame { --fd: 290ms; }
  .dv-armed .dv-frame { clip-path: inset(100% 0 0 0 round 20px 20px 0 0); }
  .dv-armed.dv-on .dv-frame { clip-path: inset(-80px -80px 0 -80px round 20px 20px 0 0); }
  .dv-frame img { transition: scale var(--cv-t-play) var(--cv-ease-out); }
  .dv-armed .dv-frame img { scale: 1.16; }
  .dv-armed.dv-on .dv-frame img { transition: scale calc(var(--cv-t-play) * 2) var(--cv-ease-out) var(--fd, 200ms); }
  /* com o parallax ligado a imagem fica um pouco maior que a moldura, para ter de onde andar */
  .dv-px.dv-on .dv-frame img { scale: 1.08; }
  @media (hover: hover) and (pointer: fine) {
    .dv--3d:hover .dv-frame img { scale: 1.03; transition: scale var(--cv-t-play) var(--cv-ease-out); }
    .dv-px.dv--3d:hover .dv-frame img { scale: 1.11; }
  }

  .dv-armed .dv-it { opacity: 0; translate: 0 10px; filter: blur(3px); }
  .dv-armed .dv-it-q { opacity: 0; scale: .8; }
  .dv-on .dv-it { opacity: 1; translate: none; filter: none; transition: opacity var(--cv-t-standard) var(--cv-ease-out) calc(300ms + var(--i) * 70ms), translate var(--cv-t-standard) var(--cv-ease-out) calc(300ms + var(--i) * 70ms), filter var(--cv-t-standard) var(--cv-ease-out) calc(300ms + var(--i) * 70ms); }
  .dv-on .dv-it-q { opacity: 1; scale: 1; transition: opacity var(--cv-t-base) var(--cv-ease-out) calc(480ms + var(--i) * 70ms), scale var(--cv-t-pop) var(--cv-ease-spring-pop) calc(480ms + var(--i) * 70ms); }

  .dv-armed .dv-draw img { clip-path: inset(0 0 100% 0); }
  .dv-armed .dv-beam { opacity: 1; translate: 0 -100%; }
  .dv-on .dv-draw img { clip-path: inset(0); transition: clip-path var(--dv-t-draw) var(--cv-ease-draw) 350ms; }
  .dv-on .dv-beam { opacity: 0; translate: none; transition: translate var(--dv-t-draw) var(--cv-ease-draw) 350ms, opacity var(--cv-t-slow) var(--cv-ease-out) calc(var(--dv-t-draw) + 350ms); }
  /* a lupa: com o ponteiro em cima, a planta chega mais perto de onde ele está (entregas.js move a origem) */
  @media (hover: hover) and (pointer: fine) {
    .dv-draw img { transition: scale var(--cv-t-standard) var(--cv-ease-out); }
    .dv-on .dv-draw img { transition: clip-path var(--dv-t-draw) var(--cv-ease-draw) 350ms, scale var(--cv-t-standard) var(--cv-ease-out); }
    .dv--planta:hover .dv-draw img { scale: 1.35; }
    .dv--planta .dv-draw { cursor: zoom-in; }
  }
}

@media (max-width: 1100px) {
  .dv-hd { padding: 28px 28px 24px; }
  .dv-paper { inset-inline: 28px; }
}
@media (max-width: 960px) {
  .dv-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .dv, .dv--3d, .dv--lista, .dv--planta { grid-area: auto; display: flex; flex-direction: column; }
  .dv-hd, .dv--3d .dv-hd { padding: 26px 24px 24px; }
  .dv--3d .dv-art { padding: 0 20px; }
  .dv-paper { inset-inline: 20px; }
  .dv-art { flex: none; }
  .dv-frame { aspect-ratio: 4 / 3; }
  /* no celular a folha não precisa de altura fixa: um trecho da lista e ela sai pela borda */
  .dv--lista .dv-art { aspect-ratio: 1.15; max-height: 420px; }
  .dv--planta .dv-art { aspect-ratio: 1.15; max-height: 420px; }
}

/* como */
/* como funciona: no papel, como o .how do curvinha.app. Título à esquerda, os 6 passos à direita, e o prazo (o fato mais
   forte da seção) no tamanho do display. "Tudo isso" fala dos passos, então no celular ele vem depois deles; no desktop
   fica logo embaixo da introdução, para o lado esquerdo não ficar vazio. A faixa escura ficou de fora (NOTAS.md). */
.como { padding-block: var(--sec-y); }
.como-in { display: grid; row-gap: 48px; }
.como-prazo-k { display: block; font: 500 var(--fs-kicker)/var(--lh-kicker) var(--sans); letter-spacing: var(--tr-kicker); color: var(--forest); }
.como-prazo-n { display: block; margin-top: 2px; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--strong); }
.como-prazo-n em { font: italic 400 1em/.9 var(--serif); letter-spacing: -.02em; color: var(--forest-em); }

/* os passos: número em serifa e um fio fino entre eles; o fio de cima se desenha ao entrar */
.como-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-bottom: 1px solid var(--hair); }
.como-steps li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 21px 0 22px; border-top: 1px solid var(--hair); counter-increment: s; font: 500 19px/26px var(--sans); letter-spacing: -.017em; color: var(--strong); text-wrap: pretty; }
.como-steps li::before { content: counter(s) / ""; font: italic 400 30px/26px var(--serif); color: var(--forest); }
.como-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); }

@media (min-width: 961px) {
  /* o título encosta no primeiro fio; o prazo vem a 32px da introdução, as duas colunas a 64px */
  .como-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head steps" "prazo steps"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 32px; }
  .como-head { grid-area: head; }
  .como-steps { grid-area: steps; margin-top: 6px; }
  .como-prazo { grid-area: prazo; align-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .como-steps li::after { scale: 0 1; transform-origin: left; transition: scale var(--cv-t-play) var(--cv-ease-out) calc(var(--d, 0ms) + 280ms); }
  .js .como-steps li.in::after { scale: 1; }
}

/* r3 micro: a régua de leitura. Ao rolar, cada passo que já passou do meio da tela ganha o fio em floresta e o número
   acende; voltando, apaga. Mostra a ordem até os 30 dias sem fingir que a linha é um botão (os passos não são clicáveis,
   então não têm hover). Sem JS, os números ficam na floresta de sempre e a régua não existe. */
.como-fill { position: absolute; left: 0; right: 0; top: -1px; z-index: 1; height: 1px; background: var(--forest); scale: 0 1; transform-origin: left; transition: scale var(--cv-t-standard) var(--cv-ease-out); }
.como-steps li::before { transition: color var(--cv-t-base) var(--cv-ease-out); }
.js .como-steps li::before { color: var(--soft); }
.js .como-steps li.on::before { color: var(--forest); }
.como-steps li.on .como-fill { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .como-fill { scale: 1; opacity: 0; transition: opacity var(--cv-t-base) var(--cv-ease-out) !important; }
  .como-steps li.on .como-fill { opacity: 1; }
  .como-steps li::before { transition-duration: var(--cv-t-base) !important; }
}

/* investimento */
/* investimento: os dois pacotes lado a lado, na mesma grade (subgrid), então nome, como funciona, lista e botão ficam na
   mesma linha nos dois. Sem valores: o botão pede o orçamento no WhatsApp. A Completa não inverte a cor: papel mais
   claro, contorno sálvia, sombra mais funda e o selo. */
.invest {
  --pkg: var(--surface);
  /* no escuro a Completa sobe um degrau acima do --surface (#1F201A) */
  --pkg-rec: light-dark(#FFFFFF, #2A2B24);
  --pkg-pad: 36px;
  padding-block: var(--sec-y);
}
.pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin-inline: auto; }
.pkg {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: var(--pkg-pad); border-radius: var(--r-card); background: var(--pkg); color: var(--text); overflow: clip;
  box-shadow: inset 0 0 0 1px var(--ring), 0 24px 48px -36px rgb(60 44 20 / .24);
  transition: transform .5s var(--cv-ease-out), box-shadow .5s var(--cv-ease-out);
}
.pkg--rec {
  background: var(--pkg-rec);
  box-shadow: inset 0 0 0 1.5px var(--sage), inset 0 1px 0 light-dark(transparent, rgb(255 250 235 / .06)), 0 44px 88px -40px light-dark(rgb(60 44 20 / .36), rgb(0 0 0 / .7)), 0 14px 30px -18px light-dark(rgb(60 44 20 / .16), rgb(0 0 0 / .5));
}
/* espaço para o selo pendurado não encostar no subtítulo, nos dois cards para os títulos seguirem alinhados */
.pkgs .pkg { padding-top: calc(var(--pkg-pad) + 18px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pkg:hover { transform: translateY(-1px); }
}

.pkg-tag { font: 500 var(--fs-caption)/1.3 var(--sans); letter-spacing: .01em; color: var(--forest); }
.pkg h3 { margin-top: 8px; font: 600 22px/1.3 var(--sans); letter-spacing: -.02em; color: var(--strong); }
/* o selo da Completa pendurado na borda de cima, como a fitinha do curvinha.app, na sálvia da Curva. No escuro o
   --sage-tint some contra o card, então o selo vira a ponta do contorno sálvia (texto 4,7:1). */
.pkg-badge { position: absolute; top: 0; right: 24px; padding: 8px 14px; border-radius: 0 0 12px 12px; background: light-dark(var(--sage-tint), var(--sage)); color: light-dark(var(--forest), var(--strong)); font: 600 14px/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--forest), transparent 85%); }
.pkg-head .pkg-for { margin-top: 6px; font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); max-width: 30em; }

/* como funciona: a diferença entre os dois, numa faixa recuada até a borda do card */
.pkg-how { margin: 24px calc(-1 * var(--pkg-pad)) 0; padding: 18px var(--pkg-pad); background: var(--well); border-block: 1px solid var(--hair); font-size: 15px; line-height: 1.5; letter-spacing: -.01em; color: var(--body); text-wrap: pretty; }

.pkg-list { list-style: none; margin: 0; padding: 24px 0 0; display: grid; align-content: start; gap: 12px; font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: var(--text); }
.pkg-list li { display: flex; gap: 12px; align-items: flex-start; }
.pkg-list svg, .pkg-all li svg { flex: none; box-sizing: content-box; width: 10px; height: 10px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--sage-tint); color: var(--forest); stroke-width: 3.5; }
.pkg > .cv-btn { align-self: end; margin-top: 28px; min-height: 52px; }
/* o secundário em contorno: o preenchido acinzentado parecia desabilitado */
.pkg .cv-btn--secondary { --bg: transparent; box-shadow: inset 0 0 0 1px var(--forest); color: var(--forest); }
.pkg .cv-btn--secondary:hover { background: color-mix(in oklab, var(--forest), transparent 92%); }

/* o que vale para os dois: os bônus, uma vez só */
.pkg-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 40px; text-align: center; }
.pkg-all-h { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--strong); }
.pkg-all-h svg { width: 18px; height: 18px; color: var(--forest); }
.pkg-all ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: var(--fs-small); color: var(--text); }
.pkg-all li { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  .pkgs { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 16px; }
}
@media (max-width: 520px) {
  .invest { --pkg-pad: 24px; }
  .pkg-all { justify-content: flex-start; text-align: left; }
  .pkg-all ul { flex-direction: column; justify-content: flex-start; gap: 10px; }
}

/* curvinha */
/* Curvinha, o nosso app: o único lugar com o amarelo e o oliva da Curvinha (os tokens dela, de volta ao original).
   No claro, o card é butter. No escuro, o butter escuro vira marrom sujo, então o card fica num quase-preto quente e o
   amarelo aparece só puro e pequeno: o brilho atrás do celular, o kicker, a régua do mascote. */
.cvh { padding-block: var(--sec-y); }
.cvh-card {
  --cv-olive: light-dark(#6F7B40, #AEB679); --cv-olive-ink: light-dark(#4A5526, #C0C890); --cv-focus: light-dark(#4A5526, #C0C890);
  --cvh-ink: light-dark(#2B2618, #F1EFE8); --cvh-body: light-dark(#4F4732, #CFCABB); --cvh-em: light-dark(#4A5526, #D3DA9E);
  --cvh-k: light-dark(#5A652C, #FFE17A);
  position: relative; overflow: hidden; display: grid; border-radius: 32px; color: var(--cvh-ink);
  background:
    radial-gradient(50% 60% at 80% 35%, light-dark(rgb(255 255 255 / .55), rgb(255 225 122 / .06)), transparent 70%),
    linear-gradient(165deg, light-dark(#FFF6D2, #1B1A15), light-dark(#FFEAA3, #1B1A15));
  box-shadow: var(--shadow), inset 0 0 0 1px light-dark(rgb(160 120 20 / .14), rgb(255 225 122 / .12));
}
.cvh-copy { padding: 40px 24px 8px; }
.cvh-k { font: 500 var(--fs-kicker)/var(--lh-kicker) var(--sans); letter-spacing: var(--tr-kicker); color: var(--cvh-k); }
.cvh h2 { margin-top: 12px; max-width: 11em; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: inherit; }
.cvh h2 em { color: var(--cvh-em); }
.cvh-p { margin-top: var(--gap-h2); max-width: 30em; font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-lede); color: var(--cvh-body); }
.cvh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: var(--gap-cta); }
/* inline-block: quebrando em duas linhas, a seta vai junto com a última palavra */
.cvh-link { display: inline-block; padding-block: 10px; font-weight: 500; color: var(--cvh-em); text-decoration: none; text-wrap: balance; }
.cvh-link::after { content: "→"; display: inline-block; margin-left: 6px; transition: translate var(--cv-t-base) var(--cv-ease-out); }
.cvh-link:hover { text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.cvh-link:hover::after { translate: 3px 0; }
.cvh-link:focus-visible, .appstore:focus-visible { outline: 2.5px solid var(--cv-focus); outline-offset: 3px; }
.appstore { display: inline-flex; flex: none; border-radius: 10px; }
.appstore img { height: 52px; width: auto; }

/* o celular pousado no card e cortado pela borda de baixo, com a Curvinha sentada em cima olhando a proposta (o hero do curvinha.app) */
.cvh-stage { position: relative; height: 340px; }
.cvh-phone { --bezel: light-dark(#1E1C19, #0C0B09); position: absolute; left: 50%; top: 84px; translate: -50% 0; width: 236px; height: 514px; padding: 8px; border-radius: 42px; background: var(--bezel);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .1), inset 0 0 0 1.5px rgb(255 255 255 / .1), 0 1px 2px rgb(90 70 40 / .1), 0 24px 40px -22px light-dark(rgb(110 80 0 / .35), rgb(0 0 0 / .6)); }
.cvh-screen { height: 100%; overflow: hidden; border-radius: 34px; background: light-dark(#F4F6F8, #111518); }
.cvh-screen img { width: 100%; height: auto; }
.cvh-perch { position: absolute; z-index: 1; right: 22px; top: -70px; width: 80px; height: 80px; transform-origin: 50% 100%; }
.cvh-perch svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgb(30 20 5 / .22)); }
.cvh-perch-shadow { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 9px; border-radius: 50%; background: rgb(0 0 0 / .35); filter: blur(4px); }
/* olhando para baixo, para a tela; com mouse, segue o cursor (curvinha.js) */
.cvh-perch .c-eyes { translate: var(--ex, 0px) var(--ey, 12px); transition: translate var(--cv-t-standard) var(--cv-ease-out); }

@media (min-width: 900px) {
  .cvh-card { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; }
  .cvh-copy { padding: 72px 0 72px 72px; }
  .cvh-stage { align-self: stretch; height: auto; min-height: 460px; }
  .cvh-phone { top: 112px; width: 264px; height: 574px; border-radius: 44px; }
  .cvh-screen { border-radius: 36px; }
  .cvh-perch { width: 92px; height: 92px; top: -80px; right: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* só pisca, sem o olhar do mood-look, que brigaria com o cursor. Com menos movimento vale o animation: none do ui.css */
  .cvh-perch .c-eyes { animation: cv-blink 5.2s infinite; }
  .js .cvh-card:not(.in) .cvh-perch { opacity: 0; }
  .js .cvh-card.in .cvh-perch { animation: cvh-perch-in var(--cv-t-play) var(--cv-ease-out) .45s backwards; }
}
/* no toque o :hover gruda depois do toque: o celular ficaria levantado */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cvh-phone { transition: translate var(--cv-t-sheet) var(--cv-ease-out); }
  .cvh-card:hover .cvh-phone { translate: -50% -6px; }
  .cvh-perch:hover svg { animation: cvh-hop var(--cv-t-sheet) var(--cv-ease-out); }
}
@keyframes cvh-hop { 18% { scale: 1.06 .9; } 45% { translate: 0 -12px; scale: .96 1.05; } 75% { translate: 0 0; scale: 1.04 .95; } }
@keyframes cvh-perch-in { 0% { opacity: 0; transform: translateY(-40px) scale(.9); } 40% { opacity: 1; } 62% { transform: translateY(3px) scale(1.08, .88); } 82% { transform: translateY(-4px) scale(.97, 1.03); } 100% { opacity: 1; transform: none; } }

/* fecho */
/* fechamento: a Curva retoma a última palavra depois do bloco da Curvinha. No lugar do mascote do fechamento do
   curvinha.app, o rosto de quem responde do outro lado: a Ana. O título é a frase do site dela (“realizar o seu sonho de casa”) virada em convite. */
.fch { padding-block: var(--sec-y); text-align: center; }
/* a foto é a mesma do Propósito (retrato de corpo inteiro): o recorte puxa o rosto para o centro do círculo */
.fch-ana { position: relative; width: 112px; height: 112px; margin-inline: auto; overflow: hidden; border-radius: 50%; background: var(--well); box-shadow: 0 0 0 1px var(--ring), var(--shadow); }
.fch-ana img { position: absolute; width: 250px; max-width: none; height: auto; left: -65px; top: -38px; }
.fch h2 { margin: 40px auto 0; max-width: 11em; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--strong); text-wrap: balance; }
.fch h2 em { color: var(--forest-em); }
.fch-p { margin: var(--gap-h1) auto 0; max-width: var(--w-desc); font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-lede); color: var(--body); text-wrap: balance; }
.fch-cta { margin-top: var(--gap-cta); }

/* foot */
/* rodapé: o fundo recuado (--well), aberto por um fio reto de 1px. O fechamento logo acima já termina a página. */
.foot { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--well); border-top: 1px solid var(--hair); }
.foot-cols { display: grid; grid-template-columns: 1.5fr .9fr 1fr 1.3fr; gap: 32px; }
.foot-home { display: block; width: max-content; border-radius: 8px; }
.foot-logo { width: 176px; color: var(--forest); }
.foot-desc { margin-top: 20px; max-width: 24em; color: var(--body); font-size: var(--fs-small); line-height: 1.6; letter-spacing: var(--tr-small); text-wrap: pretty; }
.foot-nav { display: grid; align-content: start; gap: 2px; }
.foot-nav h2 { margin: 6px 0 12px; font: 400 var(--fs-caption)/1 var(--sans); letter-spacing: var(--tr-caption); color: var(--muted); }
.foot-nav a { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text); text-decoration: none; font-size: 14.5px; letter-spacing: var(--tr-small); transition: color var(--cv-t-base); }
.foot-nav svg { width: 17px; height: 17px; flex: none; color: var(--forest); }
.foot-cvh svg { width: 22px; height: 22px; transition: translate var(--cv-t-standard) var(--cv-ease-spring-play); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tr-caption); color: var(--muted); }
.foot-copy { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover { color: var(--strong); }
  .foot-cvh:hover svg { translate: 0 -2px; }
}
@media (max-width: 960px) {
  .foot-cols { grid-template-columns: .9fr 1fr 1.3fr; row-gap: 40px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot { padding-top: 48px; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 36px; column-gap: 20px; }
  .foot-cols > :last-child { grid-column: 1 / -1; }
  .foot-legal { display: block; margin-top: 40px; }
  .foot-fine { margin-top: 4px; }
}
@media (pointer: coarse) { .foot-nav a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .foot :is(a, svg) { transition: none; } }

/* decor */
/* decor: os itens de decoração no fundo (decor.js injeta). Mobiliário em elevação, como a Ana desenha: vetor exato, traço
   de 1,5 px, sem sombra nem perspectiva. O SVG é máscara, então a cor vem daqui e segue o tema, como o logo (.wordmark).
   A camada fica atrás do conteúdo (z-index -1 no contexto da página) e corta só na horizontal, para nunca criar rolagem
   lateral. */
.dc-layer { position: relative; z-index: -1; height: 0; overflow-x: clip; pointer-events: none; user-select: none; }
.dc {
  --s: 1;
  /* a floresta misturada ao papel: bem abaixo de qualquer texto, e o traço é fino */
  --dc-ink: color-mix(in oklab, var(--forest) 30%, var(--bg));
  position: absolute; display: none; width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px);
  background: var(--dc-ink);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  transform-origin: var(--o, 50% 100%);
}
:root[data-theme="dark"] .dc { --dc-ink: color-mix(in oklab, var(--forest) 20%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .dc { --dc-ink: color-mix(in oklab, var(--forest) 20%, var(--bg)); } }

/* o fio da pendente some para cima em vez de terminar no meio do vão (a mesma máscara com degradê da faixa de papel
   quadriculado no rodapé do curvinha.app) */
.dc--pendente {
  -webkit-mask: var(--m) center / 100% 100% no-repeat, linear-gradient(transparent, #000 45%); -webkit-mask-composite: source-in;
  mask: var(--m) center / 100% 100% no-repeat, linear-gradient(transparent, #000 45%); mask-composite: intersect;
}

/* como cada coisa se mexe: o que pende balança do ponto de fixação (o ease-in-out é rápido no meio e lento nas pontas,
   como um pêndulo), a planta e a luminária de arco do pé, o resto quase não sai do lugar. Durações diferentes e metade
   adiantada, para não andarem juntos. */
/* não há token de loop no packages/ui (o maior é --cv-t-play, 720 ms); pedido em r3/decor/TOKENS.md */
.dc { --dc-t-swing: 9s; --dc-t-sway: 11s; --dc-t-slow: 13s; --dy: 2px; --dr: .3deg; --t: var(--dc-t-slow); }
.dc--pendente { --o: 50% 0; --dy: 0px; --dr: 1.4deg; --t: var(--dc-t-swing); }
.dc--quadro { --o: 50% 3%; --dy: 0px; --dr: .6deg; --t: var(--dc-t-sway); }
.dc--planta { --dy: 0px; --dr: 1deg; --t: var(--dc-t-sway); }
.dc--arco { --o: 82% 100%; --dy: 0px; --dr: .5deg; --t: var(--dc-t-slow); }
.dc:nth-child(2n) { --dl: -4s; }

@media (prefers-reduced-motion: no-preference) {
  .dc { opacity: 0; transition: opacity var(--cv-t-sheet) var(--cv-ease-out); animation: dc-drift var(--t) var(--cv-ease-draw) var(--dl, 0s) infinite alternate both paused; }
  .dc-seen .dc { opacity: 1; }
  .dc.dc-run { animation-play-state: running; }
  .dc-hidden .dc { animation-play-state: paused; }
}
@keyframes dc-drift {
  from { transform: translateY(calc(var(--dy) * -1)) rotate(calc(var(--dr) * -1)); }
  to { transform: translateY(var(--dy)) rotate(var(--dr)); }
}

/* Onde fica cada um. Na camada de cima, y 0 é o começo do conteúdo da seção (depois do --sec-y); na de baixo, o fim. */
/* celular e tablet: poucos, nas sobras ao lado de linhas curtas (o rótulo do Propósito, o "30 dias", os bônus, a foto do fecho) */
@media (max-width: 1023px) {
  .dc-pp, .dc-cm, .dc-iv-fim, .dc-fc, .dc-fc-planta { display: block; }
  .dc-pp { --s: .8; right: 34px; top: calc(var(--sec-y) * -1 - 52px); }
  .dc-cm { --s: .7; right: 18px; top: -98px; }
  .dc-iv-fim { --s: .7; right: 16px; top: -130px; }
  .dc-fc { --s: .55; left: calc(50% + 70px); top: -40px; }
  .dc-fc-planta { --s: .5; left: calc(50% - 160px); top: -2px; }
}
/* desktop: ao lado das cabeças centradas e no vazio embaixo do "30 dias" */
@media (min-width: 1024px) {
  .dc-cs, .dc-dv, .dc-cm, .dc-iv, .dc-fc, .dc-fc-planta-fim { display: block; }
  .dc-cs { left: calc(50% + 300px); top: calc(var(--sec-y) * -1); }
  .dc-dv { left: calc(50% - 470px); top: -10px; }
  .dc-cm { left: max(40px, calc(50% - 560px)); top: -140px; }
  .dc-iv { left: calc(50% - 480px); top: -50px; }
  .dc-fc { left: calc(50% + 190px); top: -90px; }
  .dc-fc-planta-fim { left: calc(50% - 400px); top: -220px; }
}
/* a planta do Propósito vive na margem de fora do conteúdo: só com margem de verdade */
@media (min-width: 1300px) {
  .dc-pp-margem { display: block; right: calc(50% - 700px); top: -220px; }
}