/*
 * Social Cabin · site novo (pré-visualização, 12-Out-2026)
 * Base partilhada de todas as páginas em /site/.
 * Tokens copiados de .claude/skills/sc-marca/assets/tokens.css (não editar aqui sem mudar lá).
 * Componentes: .claude/skills/sc-marca/references/componentes.md
 */

/* ---------- 1. Tokens (sc-marca) ---------- */
:root {
  --stone: #F2EEE6; --stone-deep: #E6DFD1; --paper: #FBF9F4; --line: #C9C1B0;
  --ink: #1A1A17; --ink-soft: #45443E; --muted: #5E5A52;
  --forest: #1F2E24; --forest-soft: #2B3D31; --on-forest: #F2EEE6; --on-forest-soft: #C5CCC0;
  --sage: #8FA382; --amber: #C17D3C; --amber-deep: #8E5A24; --amber-deep-hover: #7A4C1C;
  --amber-light: #D9B48A; --on-amber: #FFFCF7; --night: #141412;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Lato", system-ui, sans-serif;

  --fs-hero: clamp(31px, 2.4vw + 18px, 60px);
  --fs-h2-big: clamp(38px, 5vw, 70px);
  --fs-h2-card: clamp(32px, 3.6vw, 46px);
  --fs-h2-finale: clamp(36px, 4.4vw, 58px);
  --fs-quote: clamp(22px, 2.2vw, 28px);

  --container: 1180px; --gutter: 24px; --section-y: 120px;

  --radius-pill: 999px; --radius-content: 36px; --radius-card: 26px; --radius-step: 24px;
  --radius-media: 22px; --radius-promise: 18px; --radius-logo: 10px; --radius-field: 14px;

  --shadow-nav: 0 12px 30px -16px rgba(31,46,36,.35);
  --shadow-card: 0 30px 60px -30px rgba(31,46,36,.4), inset 0 1px 0 #fff;
  --shadow-card-dark: 0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  --shadow-cta: 0 10px 24px -12px rgba(142,90,36,.8);
  --shadow-lift: 0 24px 40px -28px rgba(31,46,36,.45);
  --shadow-media: 0 30px 60px -36px rgba(31,46,36,.55);

  --glass-nav: rgba(250,247,241,.74); --glass-card: rgba(248,245,238,.88); --glass-card-dark: rgba(24,36,28,.86);

  --ease: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --strip-h: 30px; --nav-top: 42px;
}
@media (max-width: 980px) { :root { --gutter: 16px; --section-y: 84px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { font-family: var(--sans); background: var(--stone); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--forest); color: var(--on-forest); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 8px; }
svg.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

/* ---------- 3. Tipografia ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--forest); letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em, h3 em { color: var(--amber-deep); font-weight: 400; }
.h1 { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.025em; }
h2.big, .h2 { font-size: var(--fs-h2-big); line-height: 1; letter-spacing: -.03em; }
.h2-card { font-size: var(--fs-h2-card); line-height: 1.02; letter-spacing: -.025em; }
.h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.015em; }
.lead { font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.kicker, .eyebrow { display: inline-flex; align-items: baseline; gap: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--amber-deep); margin-bottom: 16px; }
.kicker .num, .eyebrow .num { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 15px; color: var(--forest); text-transform: none; }
.textlink { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--forest); border-bottom: 1.5px solid var(--amber); padding-bottom: 2px; }
.textlink svg { width: 16px; height: 16px; transition: transform .5s var(--spring); }
.textlink:hover svg { transform: translate(2px,-2px); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 820px; }
section.block { padding: var(--section-y) 0; }
section.block.tight { padding-top: 0; }
section.block.deep { background: var(--stone-deep); }
section.block.forest { background: var(--forest); color: var(--on-forest); }
section.block.forest h2, section.block.forest h3 { color: var(--on-forest); }
section.block.forest h2 em, section.block.forest .kicker { color: var(--amber-light); }
:where(section.block.deep) .kicker { color: var(--amber-deep-hover); } /* âmbar fundo sobre stone-deep fica abaixo de AA a 12px */
section.block.forest .kicker .num { color: var(--on-forest); }
section.block.forest p { color: var(--on-forest-soft); }
.sheet { position: relative; z-index: 5; background: var(--stone); border-radius: var(--radius-content); box-shadow: 0 -40px 80px -40px rgba(0,0,0,.45), 0 40px 80px -40px rgba(0,0,0,.45); }
.sec-head { display: grid; grid-template-columns: 5fr 4fr; gap: 48px; align-items: end; margin-bottom: 60px; }
.sec-head p { color: var(--ink-soft); max-width: 44ch; justify-self: end; font-size: 17px; }
.sec-head.solo { grid-template-columns: 1fr; }
.sec-head.solo p { justify-self: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.stack > * + * { margin-top: 16px; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Cabeçalho de página interior (sem 3D) */
.page-hero { padding: calc(var(--nav-top) + 130px) 0 72px; position: relative; }
.page-hero .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.page-hero.solo .wrap { grid-template-columns: 1fr; }
.page-hero h1 { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.025em; }
.page-hero h1 em { display: block; }
.page-hero .lead { margin-top: 20px; }
.page-hero .row { margin-top: 26px; }
.page-hero .art { border-radius: var(--radius-media); background: radial-gradient(80% 70% at 60% 45%, #EDE4D3, var(--stone-deep)); padding: 28px; box-shadow: var(--shadow-media); }
.meta-dot { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 18px; }
.meta-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

/* ---------- 5. Faixa de pré-visualização + nav ---------- */
.strip { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--strip-h); display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--forest); color: var(--on-forest-soft); font-size: 12.5px; letter-spacing: .02em; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.strip b { color: var(--on-forest); font-weight: 700; }
.strip a { color: var(--amber-light); text-decoration: underline; text-underline-offset: 3px; }
.nav { position: fixed; top: var(--nav-top); left: 16px; right: 16px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 10px; border-radius: var(--radius-pill); background: var(--glass-nav); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-nav); max-width: var(--container); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--forest); }
.brand img { width: 36px; height: 36px; border-radius: var(--radius-logo); }
.brand i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); display: inline-block; margin-left: 2px; transform: translateY(-1px); }
.nav ul { display: flex; gap: 24px; list-style: none; font-size: 14.5px; color: var(--ink-soft); }
.nav ul a { padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .3s, border-color .3s; }
.nav ul a:hover { color: var(--forest); }
.nav ul a[aria-current="page"] { color: var(--forest); font-weight: 700; border-bottom-color: var(--amber); }
.nav .end { display: flex; gap: 8px; align-items: center; }
.nav .btn { padding: 11px 16px; font-size: 14px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(31,46,36,.07); cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: var(--forest); transform: translate(-50%,-50%); transition: transform .4s var(--spring), opacity .2s; }
.menu-btn span::before, .menu-btn span::after { content: ''; }
.menu-btn span::before { transform: translate(-50%, calc(-50% - 6px)); }
.menu-btn span::after { transform: translate(-50%, calc(-50% + 6px)); }
.nav.open .menu-btn span { background: transparent; }
.nav.open .menu-btn span::before { transform: translate(-50%,-50%) rotate(45deg); }
.nav.open .menu-btn span::after { transform: translate(-50%,-50%) rotate(-45deg); }
.menu { display: none; }

/* ---------- 6. Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; min-height: 44px; border-radius: var(--radius-pill); font: 700 15px/1.1 var(--sans);
  border: 0; cursor: pointer; transition: transform .5s var(--spring), background .3s, box-shadow .3s; text-align: center; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .5s var(--spring); }
.btn:hover svg { transform: translate(2px,-2px); }
.btn-amber { background: var(--amber-deep); color: var(--on-amber); box-shadow: var(--shadow-cta); }
.btn-amber:hover { background: var(--amber-deep-hover); }
.btn-forest { background: var(--forest); color: var(--on-forest); }
.btn-forest:hover { background: var(--forest-soft); }
.btn-ghost { background: rgba(31,46,36,.07); color: var(--forest); }
.btn-ghost:hover { background: rgba(31,46,36,.12); }
.btn-light { background: rgba(242,238,230,.12); color: var(--on-forest); border: 1px solid rgba(242,238,230,.22); }
.btn-light:hover { background: rgba(242,238,230,.2); }
.btn-block { width: 100%; }

/* Etiqueta de CTA por ligar (data-todo) */
.todo-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.todo-wrap.block { display: flex; align-items: stretch; }
.todo-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-deep); background: rgba(193,125,60,.1); border: 1px dashed rgba(142,90,36,.45); padding: 3px 9px; border-radius: var(--radius-pill); }
.todo-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.dark .todo-tag, .forest .todo-tag, .price.dark .todo-tag { color: var(--amber-light); background: rgba(217,180,138,.1); border-color: rgba(217,180,138,.4); }

/* ---------- 7. Etiquetas e badges ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; list-style: none; }
.tags li { font-size: 13px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(31,46,36,.07); color: var(--forest); }
.dark .tags li { background: rgba(242,238,230,.1); color: var(--on-forest); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(31,46,36,.07); color: var(--forest); }
.badge.amber { background: rgba(193,125,60,.14); color: var(--amber-deep); }
.badge.on-dark { background: rgba(217,180,138,.16); color: var(--amber-light); }
.adds { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(31,46,36,.18); font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.adds b { color: var(--forest); font-weight: 700; }
.adds i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 7px; }

/* ---------- 8. Cartões ---------- */
.card { max-width: 450px; padding: 32px 32px 28px; border-radius: var(--radius-card); background: var(--glass-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.85); box-shadow: var(--shadow-card); }
.card.dark { background: var(--glass-card-dark); border-color: rgba(242,238,230,.14); color: var(--on-forest); box-shadow: var(--shadow-card-dark); }
.card.wide { max-width: none; }
.card h2 { font-size: var(--fs-h2-card); line-height: 1.02; letter-spacing: -.025em; margin-bottom: 14px; }
.card p { color: var(--ink-soft); font-size: 16px; max-width: 40ch; }
.card p + p { margin-top: 10px; }
.card.dark h2, .card.dark .eyebrow .num, .card.dark .kicker .num { color: var(--on-forest); }
.card.dark h2 em, .card.dark .eyebrow, .card.dark .kicker { color: var(--amber-light); }
.card.dark p { color: var(--on-forest-soft); }
.card .row { margin-top: 22px; }

/* Cartão plano (sem vidro), para grelhas */
.tile { background: var(--paper); border: 1px solid rgba(201,193,176,.7); border-radius: var(--radius-step); padding: 28px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .6s var(--spring), box-shadow .6s var(--ease); }
a.tile:hover, .tile.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile > .badge { align-self: flex-start; }
.tile > svg.i { width: 32px; height: 32px; color: var(--amber-deep); }
.tile h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.015em; }
.tile p { color: var(--ink-soft); font-size: 16px; }
.tile .foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed rgba(31,46,36,.18); }
.tile .price-tag { font: 500 34px/1 var(--serif); letter-spacing: -.03em; color: var(--forest); }
.tile .price-tag small { font: 400 13px var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.tile.dark { background: var(--forest); color: var(--on-forest); border-color: transparent; box-shadow: var(--shadow-card-dark); }
.tile.dark h3, .tile.dark .price-tag { color: var(--on-forest); }
.tile.dark p, .tile.dark .price-tag small { color: var(--on-forest-soft); }
.tile.dark > svg.i { color: var(--amber-light); }
.tile.dark .foot { border-top-color: rgba(242,238,230,.18); }

/* Promessa */
.promises { display: grid; gap: 10px; }
.promise { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-promise); background: var(--paper); border: 1px solid rgba(201,193,176,.7); }
.promise svg { flex: none; width: 22px; height: 22px; color: var(--amber-deep); margin-top: 2px; }
.promise b { display: block; color: var(--forest); font-size: 16.5px; }
.promise span { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- 9. Passos e linha do tempo ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { background: var(--paper); border: 1px solid rgba(201,193,176,.7); border-radius: var(--radius-step); padding: 30px 28px 28px; position: relative; overflow: hidden;
  transition: transform .6s var(--spring), box-shadow .6s var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.step b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 54px; line-height: 1; color: var(--amber); display: block; margin-bottom: 26px; }
.step h3 { font-size: 26px; margin-bottom: 8px; letter-spacing: -.015em; }
.step p { color: var(--ink-soft); font-size: 16px; }
.step small { display: inline-block; margin-top: 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.steps-after { margin-top: 64px; display: grid; grid-template-columns: 3fr 7fr; gap: 48px; }
.steps-after h3 { font-size: 32px; line-height: 1.05; }
.steps-after aside p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
.timeline { list-style: none; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 28px 30px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--stone); border: 2px solid var(--forest); }
.timeline li:not(:first-child):not(:last-child)::before { border-color: var(--amber); }
.timeline span { display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--amber-deep); }
.timeline p { color: var(--ink-soft); font-size: 16.5px; max-width: 60ch; }
.timeline p strong { color: var(--forest); }

/* ---------- 10. Cartões de preço ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.price { display: flex; flex-direction: column; gap: 14px; background: var(--paper); border: 1px solid rgba(201,193,176,.7); border-radius: var(--radius-step); padding: 30px 28px; min-width: 0; }
.price.dark { background: var(--forest); color: var(--on-forest); border-color: transparent; box-shadow: var(--shadow-card-dark); }
.price .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.price h3 { font-size: 26px; line-height: 1.1; }
.price.dark h3 { color: var(--on-forest); }
.price .for { color: var(--ink-soft); font-size: 15.5px; }
.price.dark .for { color: var(--on-forest-soft); }
.price .amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.price .amount .from { font-size: 14px; color: var(--muted); width: 100%; }
.price .amount b { font: 500 56px/1 var(--serif); letter-spacing: -.03em; color: var(--forest); }
.price .amount span { font-size: 14px; color: var(--muted); }
.price .vat { font-size: 13.5px; color: var(--muted); margin-top: -6px; }
.price.dark .amount b { color: var(--on-forest); }
.price.dark .amount span, .price.dark .amount .from, .price.dark .vat { color: var(--on-forest-soft); }
.price ul { list-style: none; display: grid; gap: 10px; font-size: 15.5px; }
.price li { display: flex; gap: 10px; }
.price li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--amber-deep); }
.price.dark li svg { color: var(--amber-light); }
.price li.no { color: var(--muted); }
.price li.no svg { color: var(--muted); }
.price.dark li.no { color: var(--on-forest-soft); }
.price .group { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-top: 4px; }
.price.dark .group { color: var(--amber-light); }
.price .note { margin-top: auto; font-size: 13.5px; color: var(--muted); border-top: 1px dashed rgba(31,46,36,.18); padding-top: 12px; }
.price.dark .note { color: var(--on-forest-soft); border-top-color: rgba(242,238,230,.18); }
.price .btn { width: 100%; }
.price .todo-wrap { width: 100%; }

/* Tabela de comparação / condições */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-step); border: 1px solid rgba(201,193,176,.7); background: var(--paper); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 620px; }
table.cmp th, table.cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid rgba(201,193,176,.6); vertical-align: top; }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp thead th { font: 500 20px/1.2 var(--serif); color: var(--forest); background: var(--stone-deep); }
table.cmp tbody th { font-weight: 700; color: var(--forest); width: 30%; }
table.cmp td { color: var(--ink-soft); }
table.cmp td.yes::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 8px; transform: translateY(-1px); }
table.cmp td.none { color: var(--muted); }
dl.terms { display: grid; grid-template-columns: minmax(160px, 3fr) 7fr; border-top: 1px solid var(--line); }
dl.terms dt, dl.terms dd { padding: 18px 0; border-bottom: 1px solid var(--line); }
dl.terms dt { font-weight: 700; color: var(--forest); padding-right: 24px; }
dl.terms dd { color: var(--ink-soft); }

/* ---------- 11. Prova ---------- */
.proof { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.ba { position: relative; border-radius: var(--radius-media); overflow: hidden; aspect-ratio: 900 / 1195; max-height: 680px; background: var(--stone-deep); box-shadow: var(--shadow-media); --x: 50%; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after-img { clip-path: inset(0 0 0 var(--x)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--on-amber); transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ba .handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--amber-deep);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.ba .lab { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(26,26,23,.72); color: var(--on-forest); pointer-events: none; }
.ba .lab.l { left: 14px; } .ba .lab.r { right: 14px; background: var(--forest); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 26px 0 30px; font-size: 15.5px; }
.facts dt { color: var(--muted); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding-top: 3px; }
.facts dd { color: var(--ink); }
blockquote.quote { border-top: 2px solid var(--forest); padding-top: 26px; }
blockquote.quote p { font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.5; color: var(--forest); letter-spacing: -.01em; }
blockquote.quote footer { margin-top: 18px; font-size: 15px; color: var(--muted); }
blockquote.quote footer b { color: var(--ink); display: block; }

/* Equipa */
.team { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
.faces { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.faces figure { border-radius: var(--radius-media); overflow: hidden; background: var(--stone-deep); position: relative; }
.faces figure:first-child { transform: translateY(-28px); }
.faces img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.faces figure:hover img { transform: scale(1.04); }
.faces figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(248,245,238,.88); font-size: 13.5px; font-weight: 700; color: var(--forest); }

/* ---------- 12. Perguntas frequentes ---------- */
.faq { display: grid; grid-template-columns: 4fr 6fr; gap: 64px; }
.faq aside p { color: var(--ink-soft); margin-top: 18px; max-width: 34ch; }
.faq aside a { color: var(--amber-deep); font-weight: 700; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 700; color: var(--forest); line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(31,46,36,.07); position: relative; transition: transform .5s var(--spring), background .3s; }
.faq-list summary .plus::before, .faq-list summary .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--forest); transform: translate(-50%,-50%); border-radius: 2px; }
.faq-list summary .plus::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-list details[open] summary .plus { transform: rotate(45deg); background: var(--amber-light); }
.faq-list details > div, .faq-list details > p { color: var(--ink-soft); padding: 0 46px 24px 0; font-size: 16.5px; }
.faq-list details > div p + p { margin-top: 10px; }

/* ---------- 13. Formulários ---------- */
.field { display: grid; gap: 8px; }
.field label, .label { font-weight: 700; font-size: 14px; color: var(--forest); }
.field .hint { font-size: 13.5px; color: var(--muted); }
.input, .select, .textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-field); border: 1px solid var(--line); background: #FFFFFF; font-size: 16px; color: var(--ink);
  transition: border-color .3s; }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { font-style: italic; color: #8A857A; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--forest); outline: 2px solid var(--amber); outline-offset: 2px; }
.field .error { display: flex; gap: 6px; align-items: center; color: var(--amber-deep); font-size: 14px; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper); color: var(--forest);
  font-weight: 700; font-size: 15px; transition: background .3s, color .3s, border-color .3s, transform .4s var(--spring); }
.choice input:checked + span { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
.choice input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.choices.stacked { flex-direction: column; }
.choices.stacked .choice span { width: 100%; border-radius: var(--radius-field); justify-content: flex-start; text-align: left; }
.progress { height: 4px; border-radius: 4px; background: rgba(31,46,36,.12); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--amber)); border-radius: 4px; transform-origin: left; transition: transform .5s var(--ease); }
.form-card { background: var(--paper); border: 1px solid rgba(201,193,176,.7); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 20px; }
.dark .input, .dark .select, .dark .textarea, .forest .input { background: rgba(242,238,230,.08); border-color: rgba(242,238,230,.22); color: var(--on-forest); }
.dark .field label, .forest .field label { color: var(--on-forest); }

/* ---------- 14. Faixa de CTA e texto longo ---------- */
.cta-band { background: var(--forest); color: var(--on-forest); border-radius: var(--radius-card); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end; box-shadow: var(--shadow-card-dark); }
.cta-band h2 { color: var(--on-forest); font-size: var(--fs-h2-finale); line-height: 1.02; }
.cta-band h2 em { color: var(--amber-light); }
.cta-band p { color: var(--on-forest-soft); margin-top: 14px; max-width: 44ch; }
.cta-band .row { justify-content: flex-end; }
.lines { margin-top: 24px; display: grid; }
.lines a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(242,238,230,.14); font-size: 16px; color: var(--on-forest); transition: transform .5s var(--ease); }
.lines a:hover { transform: translateX(6px); }
.lines svg { width: 20px; height: 20px; color: var(--amber-light); flex: none; }
.lines small { display: block; font-size: 13px; color: var(--on-forest-soft); }
.prose { max-width: 68ch; color: var(--ink-soft); font-size: 17px; }
.prose h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin: 48px 0 14px; }
.prose h3 { font-size: 22px; margin: 32px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--forest); font-weight: 700; border-bottom: 1.5px solid var(--amber); }
.prose strong { color: var(--forest); }
.note-box { padding: 18px 20px; border-radius: var(--radius-promise); background: var(--paper); border: 1px dashed rgba(142,90,36,.45); color: var(--ink-soft); font-size: 15.5px; }
.note-box b { color: var(--forest); }

/* ---------- 15. Rodapé ---------- */
footer.site { position: relative; z-index: 5; background: var(--night); color: rgba(242,238,230,.62); padding: 72px 0 40px; font-size: 14.5px; }
footer.site a:hover { color: var(--on-forest); }
.foot-grid { display: grid; grid-template-columns: 4fr 2fr 3fr 2fr; gap: 40px; }
.foot-brand .brand { color: var(--on-forest); }
.foot-brand p { margin-top: 16px; max-width: 34ch; color: rgba(242,238,230,.62); }
.foot-col h4, .foot-col h2 { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 16px; }
.foot-col ul { list-style: none; display: grid; gap: 2px; }
.foot-col li a { display: inline-block; padding: 7px 0; }
.foot-col small { color: rgba(242,238,230,.5); margin-left: 4px; }
.foot-news { margin-top: 26px; padding: 20px; border-radius: var(--radius-promise); background: rgba(242,238,230,.06); border: 1px solid rgba(242,238,230,.12); }
.foot-news b { display: block; color: var(--on-forest); font-family: var(--serif); font-weight: 500; font-size: 20px; }
.foot-news p { margin: 6px 0 14px; }
.foot-news .textlink { white-space: nowrap; }
.foot-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(242,238,230,.12); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.foot-legal nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- 16. Revelação ao descer ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .grid-3 > .rv:nth-child(2), .js .steps > .rv:nth-child(2), .js .prices > .rv:nth-child(2) { transition-delay: .1s; }
.js .grid-3 > .rv:nth-child(3), .js .steps > .rv:nth-child(3), .js .prices > .rv:nth-child(3) { transition-delay: .2s; }

/* ---------- 17. Responsivo ---------- */
@media (max-width: 980px) {
  .nav ul, .nav .end .btn { display: none; }
  .menu-btn { display: block; }
  .menu { display: block; position: fixed; top: calc(var(--nav-top) + 70px); left: 10px; right: 10px; z-index: 49; padding: 10px; border-radius: var(--radius-card);
    background: #FAF7F1; border: 1px solid rgba(201,193,176,.6); box-shadow: var(--shadow-card);
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
  .nav.open + .menu { opacity: 1; transform: none; pointer-events: auto; }
  .menu ul { list-style: none; display: grid; }
  .menu li a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; font-weight: 700; color: var(--forest); font-size: 17px; }
  .menu li a[aria-current="page"] { background: rgba(31,46,36,.07); }
  .menu li a[aria-current="page"]::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
  .menu .btn { width: 100%; margin-top: 8px; }
  .sec-head, .faq, .proof, .team, .steps-after, .split, .page-hero .wrap, .cta-band { grid-template-columns: 1fr; gap: 28px; }
  .sec-head p { justify-self: start; }
  .sec-head { margin-bottom: 40px; }
  .steps, .grid-3, .prices { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--nav-top) + 104px) 0 48px; }
  .page-hero .art { max-width: 520px; }
  .ba { max-height: none; }
  .faces figure:first-child { transform: none; }
  .cta-band .row { justify-content: flex-start; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .strip { font-size: 11.5px; gap: 8px; }
  .strip .long { display: none; }
  .nav { left: 10px; right: 10px; }
  .nav .brand span { display: none; }
  .btn { padding: 13px 17px; font-size: 14.5px; }
  .faq-list details > div, .faq-list details > p { padding-right: 0; }
  .faq-list summary { font-size: 17.5px; }
  .card, .tile, .price, .form-card { padding: 24px 22px; }
  .price .amount b { font-size: 48px; }
  dl.terms { grid-template-columns: 1fr; }
  dl.terms dt { padding-bottom: 4px; border-bottom: 0; }
  dl.terms dd { padding-top: 0; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- Produção (scripts/site-publish.mjs) ---------- */
/* Sem a faixa de pré-visualização, a nav sobe para o topo. */
html[data-site="prod"] { --strip-h: 0px; --nav-top: 14px; }

/* Banner de cookies, igual ao de src/components/cookie-banner.tsx */
.scb { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100; animation: scb-in .3s ease-out; }
.scb-in { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--stone);
  box-shadow: 0 24px 48px -24px rgba(31,46,36,.45); }
.scb h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scb p { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.scb p a { font-weight: 700; color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.scb .scb-long { display: none; }
.scb-btns { display: flex; gap: 8px; }
.scb-btns button { flex: 1; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--forest); background: transparent; color: var(--forest);
  font: 700 14px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.scb-btns button:hover { background: var(--forest); color: var(--on-forest); }
.scb-btns button.on { background: var(--forest); color: var(--on-forest); }
.scb-btns button.on:hover { background: var(--forest-soft); border-color: var(--forest-soft); }
.scb-btns button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (min-width: 768px) {
  .scb { left: 50%; right: auto; bottom: 16px; width: min(672px, calc(100% - 32px)); transform: translateX(-50%); }
  .scb-in { flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
  .scb h2 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: 600 14px/1.2 var(--serif); color: var(--forest); margin-bottom: 4px; }
  .scb p { font-size: 14px; }
  .scb .scb-short { display: none; }
  .scb .scb-long { display: inline; }
  .scb-txt { flex: 1; min-width: 0; }
  .scb-btns { flex: none; }
  .scb-btns button { flex: none; }
}
@keyframes scb-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .scb { animation: none; } }

/* Quiz em produção: botão a enviar */
#q-submit[aria-busy="true"] { opacity: .7; cursor: progress; }