/* Rafaela Alcantara · página link na bio · plano-design-rafaela-alcantara.md */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Fallbacks medidos em 30/10/2026 (largura de texto em pt-BR contra Times New Roman e Arial; ascent e descent das fontes divididos pelo size-adjust) */
@font-face {
  font-family: "Bodoni fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 114.5%;
  ascent-override: 98.3%;
  descent-override: 34.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 105.5%;
  descent-override: 29.7%;
  line-gap-override: 0%;
}

:root {
  --vitrine: #140E0D;
  --balcao: #251D1C;
  --papel: #F7F2F2;
  --seda: #EDE4E3;
  --ouro: #E3B756;
  --ouro-hover: #EBC46A;
  --ouro-faixa: #C89C5E; /* ouro envelhecido para fundo grande: o ouro vivo em bloco lia como amarelo (Ana, 30/10/2026) */
  --ouro-velho: #946C25;
  --fumaca: #B7AFAE;
  --grafite: #544B4A;
  --vinho: #9A2925;
  --fio-escuro: rgb(227 183 86 / .28);
  --fio-claro: rgb(84 75 74 / .3);
  --sombra: 0 2px 4px rgb(20 14 13 / .10), 0 18px 32px -14px rgb(20 14 13 / .28);

  --display: "Bodoni Moda", "Bodoni fallback", serif;
  --corpo: "Manrope", "Manrope fallback", system-ui, sans-serif;

  --t-gigante: clamp(4rem, 3rem + 6vw, 8rem);
  --t-h1: clamp(2.25rem, 1.55rem + 3vw, 4rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2.1vw, 3rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-sub: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  --margem: clamp(20px, 5vw, 64px);
  --topo: 64px;
  --raio: 2px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 8px); }
body {
  margin: 0;
  background: var(--vitrine);
  color: var(--papel);
  font-family: var(--corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Grão fixo, sem degradê: dá temperatura ao preto e ao papel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .045;
  background-image: 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 .5 0 0 0 0 .4 0 0 0 0 .38 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
button { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.conteiner { width: 100%; max-width: calc(1200px + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.faixa-escura { background: var(--vitrine); color: var(--papel); }
.faixa-clara { background: var(--papel); color: var(--vitrine); }
.faixa-seda { background: var(--seda); color: var(--vitrine); }

/* Títulos: eixo óptico fixo em 20 e peso 600; o automático afinava demais os fios em letra grande sobre fundo escuro (Ana, 30/10/2026) */
.h1, .h2 { font-family: var(--display); font-optical-sizing: none; font-variation-settings: "opsz" 20; font-weight: 600; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.005em; max-width: 18ch; }
.h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: 0; max-width: 20ch; margin-bottom: .7em; }
.h3 { font-family: var(--display); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.enfase { color: var(--ouro); font-weight: 700; }
/* Ênfase em Bodoni: o eixo óptico automático afina demais os fios do negrito grande (o "t" de "trabalhando" sumia) */
.h1 .enfase, .h2 .enfase, .grifo, .funciona__prova .enfase { font-optical-sizing: none; font-variation-settings: "opsz" 20; }
.sinal { font-weight: 700; }
.faixa-clara .enfase, .faixa-seda .enfase { color: inherit; text-decoration: underline 2px var(--ouro-velho); text-underline-offset: .12em; }
.lacuna { background: rgb(227 183 86 / .22); outline: 1px dashed currentColor; outline-offset: 1px; padding: 0 .2em; border-radius: var(--raio); white-space: nowrap; }

.pular { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ouro); color: var(--vitrine); padding: 12px 16px; font-weight: 700; border-radius: var(--raio); text-decoration: none; }
.pular:focus { top: 12px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: var(--raio);
  font-family: var(--corpo); font-weight: 700; font-size: 1rem; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--ouro { background: var(--ouro); color: var(--vitrine); }
.btn--ouro:hover { background: var(--ouro-hover); }
.btn--ouro:focus-visible { outline-color: var(--papel); }
.btn--preto { background: var(--vitrine); color: var(--papel); }
.btn--preto:hover { background: var(--balcao); }
.btn--preto:focus-visible { outline-color: var(--vitrine); }
.btn--contorno { border-color: var(--ouro); color: var(--papel); background: transparent; min-height: 44px; padding: 0 20px; }
.btn--contorno:hover { background: var(--ouro); color: var(--vitrine); }
.btn--contorno-escuro { border-color: var(--vitrine); color: var(--vitrine); background: transparent; }
.btn--contorno-escuro:hover { background: var(--vitrine); color: var(--papel); }
.btn--grande { min-height: 56px; }
.btn--cheio { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--ouro); text-decoration: underline 2px; text-underline-offset: 4px; }
.link-seta:hover { color: var(--ouro-hover); }
.so-celular { display: none; }

/* 0. Barra do topo */
.topo { position: sticky; top: 0; z-index: 50; background: var(--vitrine); border-bottom: 1px solid var(--fio-escuro); }
.topo__in { height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: calc(1200px + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.topo__nome { font-family: var(--display); font-weight: 600; font-size: 1.375rem; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.topo__nav { display: flex; align-items: center; gap: 24px; }
.topo__link { font-weight: 600; font-size: .9375rem; text-decoration: underline 1px; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.topo__link:hover { color: var(--ouro); }
.btn--topo { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.so-estreito { display: none; }

/* Numerais: eixo óptico baixo para os fios do Bodoni não sumirem nos números grandes */
.trilha__n, .etiqueta__n, .perfil__n, .numero__valor, .hn__valor, .valor, .recibo__mes, .recibo__ano { font-optical-sizing: none; font-variation-settings: "opsz" 16; }

/* 1. Primeira dobra */
.dobra { position: relative; overflow: clip; }
.laje { position: absolute; top: 0; bottom: 0; left: 62%; right: 0; background: var(--balcao); }
.dobra__grade { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; min-height: min(calc(100svh - var(--topo)), 760px); align-items: center; padding-top: 72px; padding-bottom: 96px; }
.dobra__texto { grid-column: 1 / 8; }
.dobra__foto { grid-column: 9 / 13; position: relative; justify-self: center; width: 100%; max-width: 340px; padding-top: 96px; margin-top: -48px; }
.selo { font-weight: 600; font-size: .875rem; color: var(--ouro); margin-bottom: 20px; letter-spacing: .01em; }
.subtitulo { font-size: var(--t-sub); line-height: 1.55; max-width: 34em; margin: 24px 0 32px; color: var(--papel); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 16px; }
.chips li { display: inline-flex; align-items: center; gap: 9px; font-size: .9375rem; font-weight: 500; }
.chips li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ouro); }
.prova-curta { font-size: .875rem; color: var(--fumaca); margin: 0; }

.pendurador { position: absolute; top: 0; left: 50%; height: 96px; width: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.argola { width: 12px; height: 12px; border: 1.5px solid var(--ouro); border-radius: 50%; flex: none; }
.fio-v { width: 1px; flex: 1; background: var(--ouro); }

.etiqueta-foto { margin: 0; background: var(--papel); color: var(--vitrine); clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px); transform-origin: 50% 18px; }
.dobra__foto { filter: drop-shadow(0 16px 14px rgb(8 5 5 / .45)); }
.etiqueta-foto__papel { position: relative; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; }
.etiqueta-foto .furo { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--balcao); box-shadow: 0 0 0 1.5px var(--ouro-velho); }
.etiqueta-foto__nome { font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.etiqueta-foto__cargo { font-size: .8125rem; font-weight: 500; color: var(--grafite); margin-top: 2px; }
.etiqueta-foto__img { position: relative; }
.etiqueta-foto__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.etiqueta-foto__img::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ouro); pointer-events: none; }

/* 2. Problema */
.problema { padding: 112px 0; }
.problema__grade { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
.problema__texto { grid-column: 1 / 7; }
.problema__texto p { max-width: 62ch; }
.problema__ponte { font-weight: 600; margin-top: 1.5em; margin-bottom: 28px; }
.trilha { grid-column: 8 / 13; margin-top: 48px; position: relative; padding-left: 40px; }
.trilha::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1.5px; background: var(--ouro-velho); }
.trilha li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-bottom: 36px; }
.trilha li:last-child { padding-bottom: 0; }
.trilha li::before { content: ""; position: absolute; left: -40px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--ouro-velho); }
.trilha__n { font-family: var(--display); font-size: 3.5rem; line-height: .9; color: var(--ouro-velho); font-weight: 500; }
.trilha .h3 { font-size: 1.5rem; margin-bottom: 6px; }
.trilha p { margin: 0; color: var(--grafite); }
.so-estreito-bloco { display: none; }

/* 3. Como funciona */
.funciona { padding: 120px 0; }
.funciona__titulo { max-width: 22ch; margin-bottom: 64px; }
.arara { position: relative; }
.cordao { position: absolute; left: -24px; right: -24px; top: 0; height: 1.5px; background: var(--ouro); }
.no { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); transform: translateY(-50%); }
.no--a { left: 0; }
.no--b { right: 0; }
.etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.etapa { --fio: 32px; position: relative; padding-top: var(--fio); }
.etapa--longa { --fio: 72px; }
.etapa::before { content: ""; position: absolute; left: 50%; top: 0; height: calc(var(--fio) + 20px); width: 1px; background: var(--ouro); }
.etiqueta {
  position: relative; min-height: 330px; padding: 52px 24px 28px;
  background: var(--balcao); color: var(--papel);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
  transform-origin: 50% 20px;
}
.etiqueta::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--fio-escuro); clip-path: inherit; pointer-events: none; }
.etiqueta .furo { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--vitrine); box-shadow: 0 0 0 1.5px var(--ouro); }
.etiqueta__n { display: block; font-family: var(--display); font-size: 4.5rem; line-height: .9; color: var(--ouro); margin-bottom: 20px; }
.etiqueta__nome { font-family: var(--display); font-weight: 600; font-size: 1.625rem; line-height: 1.15; margin-bottom: 12px; }
.etiqueta p { margin: 0; font-weight: 450; color: rgb(247 242 242 / .92); font-size: 1rem; line-height: 1.6; }
.funciona__prova { display: flex; align-items: center; gap: 20px; margin: 64px 0 32px; max-width: 46ch; }
.funciona__prova p { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.3; margin: 0; }
.mini-etiqueta { flex: none; display: grid; place-items: center; width: 56px; height: 64px; background: var(--papel); color: var(--vitrine); font-weight: 700; font-size: .9375rem; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }

/* 4. Custo */
.custo { padding: 112px 0; }
.custo__abertura { max-width: 760px; }
.custo__abertura p { max-width: 62ch; }
.custo__grade { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; margin-top: 48px; }
.recibo, .opcao-b { display: flex; flex-direction: column; }
.recibo__linhas { flex: 1; }
.opcao-b .btn { margin-top: auto; align-self: flex-start; }
.recibo { background: var(--seda); border: 1px solid var(--fio-claro); border-radius: var(--raio); overflow: hidden; }
.recibo__titulo { font-weight: 700; font-size: 1rem; padding: 24px 28px 8px; }
.recibo__linhas { margin: 0; padding: 0 28px; }
.recibo__linha { padding: 18px 0; border-bottom: 1px solid var(--fio-claro); }
.recibo__linha:last-child { border-bottom: 0; }
.recibo__linha dt { font-weight: 500; margin-bottom: 4px; }
.recibo__linha dd { margin: 0; color: var(--grafite); }
.valor { font-family: var(--display); font-weight: 600; font-size: 1.75rem; color: var(--vitrine); font-variant-numeric: lining-nums; margin-right: 4px; }
.fonte { display: inline-flex; align-items: center; min-height: 32px; font-size: .8125rem; color: var(--grafite); margin-top: 2px; text-underline-offset: 3px; }
.recibo__linha dd .fonte { display: flex; width: fit-content; }
.recibo__total { background: var(--vitrine); color: var(--papel); padding: 22px 28px; display: grid; gap: 2px; }
.recibo__total-rotulo { font-size: .875rem; font-weight: 600; color: var(--fumaca); }
.recibo__mes, .recibo__ano { font-family: var(--display); font-weight: 600; font-size: 1.625rem; line-height: 1.25; font-variant-numeric: lining-nums; }
.recibo__ano { color: var(--ouro); }
.opcao-b { background: var(--vitrine); color: var(--papel); border: 1.5px solid var(--ouro); border-radius: var(--raio); padding: 40px; box-shadow: var(--sombra); }
.opcao-b__titulo { font-family: var(--display); font-size: 2rem; line-height: 1.15; margin-bottom: 12px; }
.opcao-b__lead { color: var(--papel); max-width: 44ch; }
.vistos { display: grid; gap: 12px; margin: 24px 0; }
.vistos li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.vistos svg { color: var(--ouro); margin-top: .2em; }
.opcao-b__valor { color: var(--fumaca); font-size: .9375rem; }
.custo__fecho { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.2; max-width: 26ch; margin: 64px 0 16px; text-wrap: balance; }
.grifo { font-weight: 700; text-decoration: underline 2px var(--ouro-velho); text-underline-offset: .14em; }
.aviso { font-size: .8125rem; color: var(--grafite); max-width: 62ch; margin: 0; }

/* 5. Para quem é */
.quem { padding: 104px 0; }
.perfis { border-top: 1px solid var(--fio-escuro); margin-bottom: 48px; }
.perfil { display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--fio-escuro); }
.perfil__n { font-family: var(--display); font-size: 6rem; line-height: .85; color: var(--ouro); }
.perfil__titulo { font-family: var(--display); font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.2; max-width: 20ch; }
.pontos { display: grid; gap: 10px; padding-top: 6px; }
.pontos li { position: relative; padding-left: 20px; }
.pontos li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); }
.nao-e { background: var(--balcao); border: 1px solid var(--grafite); border-radius: var(--raio); padding: 24px 28px; max-width: 720px; margin-bottom: 40px; font-size: .9375rem; color: var(--fumaca); }
.nao-e__titulo { font-weight: 700; font-size: 1rem; color: var(--papel); margin-bottom: 10px; }
.nao-e ul { display: grid; gap: 6px; }

/* 6. Provas */
.provas { padding: 96px 0; }
.numeros { display: grid; grid-template-columns: 6fr 5fr; gap: 32px 64px; align-items: center; margin-bottom: 72px; }
.numeros__par { display: grid; gap: 40px; }
.numero { display: grid; gap: 10px; }
.numero__valor { font-family: var(--display); font-weight: 500; font-size: 4.5rem; line-height: .95; letter-spacing: -.02em; padding-bottom: 14px; border-bottom: 2px solid var(--ouro-velho); font-variant-numeric: lining-nums; }
.numero--grande .numero__valor { font-size: var(--t-gigante); }
.numero__rotulo { font-weight: 500; }
.numero__quem { display: block; font-size: .875rem; font-weight: 500; color: var(--grafite); margin-top: 2px; }
.depoimento { margin: 0 0 80px; max-width: 46rem; }
.depoimento blockquote { margin: 0; }
.depoimento p { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.25; margin-bottom: 16px; text-wrap: pretty; }
.depoimento figcaption { font-size: .875rem; font-weight: 600; color: var(--grafite); }
.midia { margin-bottom: 48px; }
.midia__topo { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.midia__titulo { font-size: 1.5rem; }
.midia__titulo .lacuna { font-family: var(--corpo); font-size: .875rem; font-weight: 500; }
.midia__botoes { display: flex; gap: 8px; }
.seta { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--vitrine); background: transparent; color: var(--vitrine); border-radius: var(--raio); cursor: pointer; }
.seta:hover { background: var(--vitrine); color: var(--papel); }
.midia__trilho { margin-right: calc(-1 * var(--margem)); padding-right: var(--margem); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 0; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--ouro-velho) transparent; }
.midia__trilho:focus-visible { outline-offset: 6px; }
.midia__trilho figure { flex: none; margin: 0; scroll-snap-align: start; }
.midia__trilho img { height: 320px; width: auto; background: var(--vitrine); padding: 8px; box-shadow: var(--sombra); }
.midia__trilho figcaption { font-size: .8125rem; color: var(--grafite); max-width: 32ch; margin-top: 10px; }
.midia__progresso { display: none; height: 3px; background: var(--seda); margin-top: 8px; }
.js .midia__progresso { display: block; }
.midia__progresso span { display: block; height: 100%; background: var(--ouro-velho); transform-origin: 0 50%; transform: scaleX(.2); }

/* 7. Oferta e formulário */
.oferta { padding: 120px 0; }
.oferta__grade { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; grid-template-areas: "intro form" "inclui form"; column-gap: 64px; align-items: start; }
.oferta__intro { grid-area: intro; }
.oferta__intro p { color: var(--papel); max-width: 44ch; }
.oferta__inclui { grid-area: inclui; margin-top: 16px; }
.oferta__inclui .h3 { font-size: 1.375rem; }
.cartao-form { grid-area: form; background: var(--papel); color: var(--vitrine); border-radius: var(--raio); padding: 40px; }
.form { display: grid; gap: 22px; }
.campo { display: grid; gap: 8px; }
.campo label, .escolhas legend { font-weight: 600; font-size: .9375rem; }
.opcional { font-weight: 500; color: var(--grafite); }
.campo input, .prefixo { min-height: 52px; width: 100%; font: inherit; font-size: 1rem; color: var(--vitrine); background: var(--seda); border: 1px solid var(--grafite); border-radius: var(--raio); padding: 0 14px; }
.campo input::placeholder { color: var(--grafite); }
.campo input:focus-visible, .prefixo:focus-within { outline: 2px solid var(--vitrine); outline-offset: 2px; }
.prefixo { display: flex; align-items: center; gap: 2px; padding-right: 0; }
.prefixo span { color: var(--grafite); font-weight: 600; }
.prefixo input { border: 0; background: transparent; padding-left: 0; min-height: 50px; outline: none; }
.prefixo input:focus-visible { outline: none; }
.escolhas { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas legend { padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.opcao { position: relative; flex: 1 1 170px; }
.opcao span { width: 100%; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--grafite); border-radius: var(--raio); font-size: .9375rem; background: var(--papel); cursor: pointer; transition: background-color .15s, color .15s; }
.opcao:hover span { border-color: var(--vitrine); }
.opcao input:checked + span { background: var(--vitrine); color: var(--papel); border-color: var(--vitrine); }
.opcao input:checked + span::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23E3B756' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.opcao input:focus-visible + span { outline: 2px solid var(--vitrine); outline-offset: 2px; }
.consentimento { font-size: .875rem; line-height: 1.5; }
.caixa { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.caixa input { width: 24px; height: 24px; margin: 0; accent-color: var(--vitrine); }
.erro { display: flex; gap: 6px; align-items: center; color: var(--vinho); font-size: .875rem; font-weight: 600; margin: 0; width: 100%; }
.erro[hidden] { display: none; }
[aria-invalid="true"] { border-color: var(--vinho) !important; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__falha { color: var(--vinho); font-size: .9375rem; margin: 0; }
.resposta { outline: none; }
.resposta__titulo { font-family: var(--display); font-weight: 600; font-size: 1.75rem; margin-bottom: 12px; }
.resposta__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.previa-aviso { margin: 20px 0 0; font-size: .8125rem; color: var(--grafite); }

/* 8. Perguntas */
.perguntas { padding: 88px 0; }
.perguntas__grade { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: start; }
.perguntas__titulo { position: sticky; top: 96px; }
.acordeao { border-top: 1px solid var(--ouro-velho); }
.acordeao details { border-bottom: 1px solid var(--ouro-velho); }
.acordeao summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.25; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao .mais { flex: none; transition: transform .2s var(--ease); }
.acordeao details[open] .mais { transform: rotate(45deg); }
.acordeao details p { max-width: 62ch; padding-bottom: 20px; margin: 0; color: var(--grafite); }

/* 9. História */
.historia { padding: 112px 0; }
.historia__grade { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 64px; align-items: center; }
.historia__foto { grid-column: 1 / 6; margin: 0; position: relative; }
.historia__foto::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--seda); }
.historia__foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 18px 24px -12px rgb(20 14 13 / .22); }
.historia__foto::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ouro-velho); pointer-events: none; }
.historia__texto { grid-column: 7 / 13; }
.historia__texto p { max-width: 58ch; }
.historia__numeros { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); }
.historia__numeros li { display: grid; gap: 6px; padding: 8px 28px; border-left: 1px solid var(--ouro-velho); }
.historia__numeros li:first-child { border-left: 0; padding-left: 0; }
.hn__valor { font-family: var(--display); font-size: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); line-height: 1; font-variant-numeric: lining-nums; }
.hn__rotulo { font-weight: 500; color: var(--grafite); }

/* 10. Última chamada */
.chamada { background: var(--ouro-faixa); color: var(--vitrine); padding: 72px 0; }
.chamada__grade { display: grid; grid-template-columns: 7fr 4fr; gap: 32px 80px; align-items: end; }
.chamada .h2 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); max-width: 18ch; font-optical-sizing: none; font-variation-settings: "opsz" 24; }
.chamada__texto p { font-size: 1.125rem; max-width: 52ch; }
.chamada__texto p:last-child { margin-bottom: 0; }
.chamada .lacuna { background: rgb(20 14 13 / .1); }
.chamada__acoes { display: grid; gap: 12px; }
.chamada .btn--preto:focus-visible, .chamada .btn--contorno-escuro:focus-visible { outline-color: var(--vitrine); }

/* 11. Outros caminhos */
.caminhos { padding: 88px 0; }
.caminhos__intro { color: var(--fumaca); margin-top: -.4em; margin-bottom: 40px; }
.caminhos__grupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.grupo { display: grid; gap: 16px; }
.grupo__rotulo { font-family: var(--corpo); font-weight: 600; font-size: .875rem; color: var(--ouro); }
.caminho { position: relative; background: var(--balcao); padding: 44px 24px 24px; display: grid; gap: 10px; justify-items: start; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); transform-origin: 50% 18px; }
.caminho::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(227 183 86 / .24); clip-path: inherit; pointer-events: none; }
.caminho .furo { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--vitrine); box-shadow: 0 0 0 1.5px var(--ouro); }
.caminho__titulo { font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.caminho p { margin: 0 0 6px; font-size: .9375rem; color: var(--fumaca); }
.selo-mini { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--raio); font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--vitrine); }
.selo-mini--ouro { background: var(--ouro); }
.selo-mini--papel { background: var(--papel); }
.ajuda { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--fio-escuro); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.ajuda p { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.3; max-width: 32ch; }

/* 12. Rodapé */
.rodape { background: var(--balcao); color: var(--papel); padding: 48px 0; }
.rodape__grade { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.rodape__nome { font-family: var(--display); font-weight: 600; font-size: 1.75rem; margin: 0; }
.rodape__linha { color: var(--fumaca); margin: 0; font-size: .9375rem; }
.redes { display: flex; gap: 4px; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ouro); }
.redes a:hover { color: var(--papel); }
.rodape__direitos { grid-column: 1 / -1; font-size: .8125rem; color: var(--fumaca); margin: 0; padding-top: 24px; border-top: 1px solid var(--fio-escuro); }

/* Movimento: o conteúdo nasce visível; só se oculta depois que o JS confirma */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--atraso, 0ms); }
.js .reveal.visivel { opacity: 1; transform: none; }
.js .assenta { opacity: .001; transform: rotate(4deg); transition: opacity .6s var(--ease), transform 1.1s var(--ease); transition-delay: var(--atraso, 0ms); }
.js .etiqueta-foto.assenta { opacity: 1; transform: rotate(3deg); }
.js .assenta.visivel { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .etiqueta, .etiqueta-foto, .caminho { transition: transform .3s var(--ease); }
  .btn--ouro:hover, .btn--preto:hover { transform: translateY(-1px); }
  .js .assenta.visivel:hover { transform: rotate(-1.5deg); transition-delay: 0ms; transition-duration: .6s, .3s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .assenta { opacity: 1; transform: none; transition: none; }
  .js .assenta.visivel:hover { transform: none; }
  .btn, .btn:active { transition: none; transform: none; }
}

/* Responsivo */
@media (max-width: 1100px) {
  .etapas { gap: 16px; }
  .etiqueta { padding: 52px 18px 24px; }
}
@media (max-width: 899px) {
  .dobra__grade, .problema__grade, .historia__grade { grid-template-columns: 1fr; }
  .dobra__grade { min-height: 0; padding-top: 40px; padding-bottom: 0; }
  .dobra__texto, .dobra__foto, .problema__texto, .trilha, .historia__foto, .historia__texto, .historia__numeros { grid-column: 1 / -1; }
  .laje { left: 0; top: auto; height: 300px; }
  .dobra__foto { justify-self: center; max-width: 300px; margin: 32px 0 0; padding-top: 72px; padding-bottom: 40px; }
  .pendurador { height: 72px; }
  .problema, .custo, .quem, .historia { padding: 64px 0; }
  .funciona, .oferta { padding: 72px 0 64px; }
  .provas, .perguntas, .caminhos { padding: 56px 0; }
  .chamada { padding: 56px 0; }
  .trilha { margin: 40px 0 36px; }
  .trilha li { grid-template-columns: 44px 1fr; }
  .trilha__n { font-size: 2.75rem; }
  .so-largo-bloco { display: none; }
  .so-estreito-bloco { display: inline-flex; grid-column: 1 / -1; justify-self: start; }

  .funciona__titulo { margin-bottom: 40px; }
  .cordao { left: 10px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .no { left: 50%; transform: translateX(-50%); }
  .no--a { top: 0; }
  .no--b { top: auto; bottom: 0; }
  .etapas { grid-template-columns: 1fr; gap: 20px; padding: 16px 0; }
  .etapa { --fio: 30px; padding-top: 0; padding-left: calc(10px + var(--fio)); }
  .etapa--longa { --fio: 54px; }
  .etapa::before { left: 10px; top: 50%; height: 1px; width: calc(var(--fio) + 20px); }
  .etiqueta { min-height: 0; padding: 22px 20px 22px 48px; clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); transform-origin: 20px 50%; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .etiqueta .furo { top: 50%; left: 20px; transform: translateY(-50%); }
  .etiqueta__n { font-size: 3rem; margin: 0; grid-row: 1 / 3; }
  .etiqueta__nome { font-size: 1.375rem; margin-bottom: 6px; }
  .funciona__prova { margin: 40px 0 28px; }

  .custo__grade { grid-template-columns: 1fr; }
  .opcao-b { padding: 28px 24px; }
  .opcao-b .btn { width: 100%; }
  .perfil { grid-template-columns: 56px 1fr; gap: 12px 16px; padding: 28px 0; }
  .perfil__n { font-size: 3.5rem; }
  .pontos { grid-column: 1 / -1; }
  .numeros { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
  .numero__valor { font-size: 3.25rem; }
  .depoimento { margin-bottom: 56px; }
  .midia__trilho img { height: 300px; }

  .oferta__grade { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "inclui"; }
  .oferta__inclui { margin-top: 40px; }
  .cartao-form { padding: 28px 20px; }
  .perguntas__grade { grid-template-columns: 1fr; gap: 16px; }
  .perguntas__titulo { position: static; }
  .historia__grade { row-gap: 40px; }
  .historia__foto { max-width: 480px; margin-right: 16px; }
  .historia__numeros li { padding: 4px 12px; }
  .hn__valor { font-size: 2.25rem; }
  .hn__rotulo { font-size: .8125rem; }
  .chamada__grade { grid-template-columns: 1fr; }
  .caminhos__grupos { grid-template-columns: 1fr; gap: 40px; }
  .ajuda .btn { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .acoes .btn { width: 100%; }
  .topo__link { display: none; }
  .so-celular { display: inline-flex; }
}
@media (max-width: 479px) {
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .topo__nome { font-size: 1.25rem; }
}

@media (max-width: 639px) {
  .dobra__foto { justify-self: start; margin-top: 8px; padding-top: 56px; }
  .pendurador { height: 56px; }
}
@media (max-width: 479px) {
  .historia__numeros { grid-template-columns: 1fr; }
  .historia__numeros li { grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--ouro-velho); }
  .historia__numeros li:first-child { border-top: 0; padding-left: 0; }
  .hn__valor { white-space: nowrap; }
  .etapa { --fio: 18px; }
  .etapa--longa { --fio: 34px; }
  .etapa::before { width: calc(var(--fio) + 16px); }
  .etiqueta { padding: 20px 16px 20px 40px; column-gap: 12px; }
  .etiqueta .furo { left: 16px; }
  .etiqueta__n { font-size: 2.5rem; }
}