/* Pepper — Protocolo Capilar · VERSÃO LOCAL E PRIVADA · v4 (LAYOUT COM DADOS FICTÍCIOS)
   Tokens da marca: Pepper Brand Hub v0.1.0 (manual): #1F3241, #EB856C, #D25220.
   Papéis de cor e fonte NÃO são definidos pelo manual (lacuna D5 do Hub):
   os usos abaixo são PROPOSTAS desta versão local, sujeitas à aprovação.

   Regras de contraste (cálculo WCAG 2.x, PR #8):
   - texto: navy sobre branco, ou branco sobre navy (13,2:1);
   - coral sobre navy (5,1:1) e navy sobre coral (5,1:1): ok para texto;
   - laranja só em texto grande (>= 24px) ou detalhes decorativos;
   - nunca texto branco sobre coral ou sobre laranja.

   TEXTOS E NÚMEROS FICTÍCIOS: servem só para definir layout e design. Toda área com
   dado fictício leva a etiqueta .fict, que NUNCA é ocultada (nem no modo visitante). */

@font-face {
  font-family: "Champagne & Limousines";
  font-weight: 400; font-style: normal; font-display: swap;
  src: local("Champagne & Limousines"), local("Champagne & Limousines Regular"),
       url("../fonts/ChampagneLimousines-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Champagne & Limousines";
  font-weight: 700; font-style: normal; font-display: swap;
  src: local("Champagne & Limousines Bold"),
       url("../fonts/ChampagneLimousines-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

:root {
  --navy: #1f3241;
  --coral: #eb856c;
  --orange: #d25220;
  --white: #ffffff;

  /* Transparências e misturas das cores oficiais (não são cores novas de marca). */
  --navy-06: rgba(31, 50, 65, 0.06);
  --navy-16: rgba(31, 50, 65, 0.16);
  --navy-lift: #2b4256;            /* navy clareado, só para profundidade em fundos escuros */
  --coral-12: rgba(235, 133, 108, 0.12);
  --coral-30: rgba(235, 133, 108, 0.30);
  --white-78: rgba(255, 255, 255, 0.78);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-06: rgba(255, 255, 255, 0.06);

  --font-display: "Champagne & Limousines", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --radius: 18px;
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4.5vw, 2.2rem);
  --topbar-h: 2.4rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 7.5rem; }
body {
  margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.65;
  color: var(--navy); background: var(--white); overflow-x: hidden;
}
@media (max-width: 899px) { body { padding-bottom: 4.6rem; } }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0 0 0.55em; letter-spacing: 0.003em; }
h1 { font-size: clamp(2.5rem, 8vw, 4.6rem); }
h2 { font-size: clamp(2rem, 5.6vw, 3.3rem); }
h3 { font-size: clamp(1.25rem, 3.1vw, 1.6rem); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.6rem, 9vw, 6.8rem); position: relative; }
.section--navy { background: var(--navy); color: var(--white); }
.section--deep { background: linear-gradient(180deg, var(--navy) 0%, #182733 100%); color: var(--white); }
.section--tint { background: var(--navy-06); }
.section--coral { background: var(--coral); color: var(--navy); }
.eyebrow { display: inline-block; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
.section--navy .eyebrow, .section--deep .eyebrow, .hero .eyebrow { color: var(--coral); }
.lead { max-width: 44rem; font-size: 1.1875rem; line-height: 1.6; }
.section__head { margin-bottom: clamp(1.8rem, 5vw, 3rem); }
.split { display: grid; gap: clamp(1.8rem, 5vw, 3.2rem); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.1fr 0.9fr; } }

/* Acessibilidade */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--navy); color: var(--white); padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 700; }
.skip-link:focus { top: 0.75rem; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.section--navy :focus-visible, .section--deep :focus-visible, .hero :focus-visible, .footer :focus-visible, .topbar :focus-visible { outline-color: var(--coral); }
.form :focus-visible, .section--coral :focus-visible, .stickybar :focus-visible { outline-color: var(--navy); }
.stickybar :focus-visible { outline-offset: -5px; }
:focus:not(:focus-visible) { outline: none; }

/* Faixa de rascunho + alternador de marcas */
.topbar { position: sticky; top: 0; z-index: 90; min-height: var(--topbar-h); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1rem; background: var(--navy); color: var(--coral); text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem var(--gutter); border-bottom: 1px solid var(--white-14); }
.topbar strong { color: var(--white); }
.marks-toggle { font: inherit; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--white); border: 1px solid var(--white); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; min-height: 1.9rem; }
.marks-toggle[aria-pressed="true"] { background: var(--coral); color: var(--navy); border-color: var(--coral); }

/* Marcas de rascunho (ocultáveis) */
.proposto > .marca { display: block; width: max-content; max-width: 100%; margin-bottom: 0.7rem; background: var(--coral); color: var(--navy); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 4px; }
.section--coral .proposto > .marca { background: var(--navy); color: var(--coral); }
.cta-final .proposto > .marca { margin-inline: auto; }
.reservado { border: 2px dashed var(--coral); background: var(--coral-12); border-radius: 12px; padding: 1.1rem 1.15rem 1rem; }
.reservado::before { content: "ESPAÇO RESERVADO — RASCUNHO"; display: inline-block; margin-bottom: 0.55rem; background: var(--navy); color: var(--coral); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.2rem 0.55rem; border-radius: 4px; }
.section--navy .reservado::before, .section--deep .reservado::before { background: var(--coral); color: var(--navy); }
.reservado > :last-child { margin-bottom: 0; }
body.como-visitante .proposto > .marca, body.como-visitante .nota-interna, body.como-visitante .reservado { display: none; }
.nota-interna { font-size: 0.875rem; border-left: 3px solid var(--coral); padding-left: 0.8rem; }

/* Etiqueta de dado fictício — NUNCA é ocultada */
.fict { display: inline-block; background: var(--navy); color: var(--coral); border: 1px solid var(--coral); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 4px; line-height: 1.3; }
.section--navy .fict, .section--deep .fict, .hero .fict { background: var(--coral); color: var(--navy); border-color: var(--coral); }
.fict--block { display: block; width: max-content; max-width: 100%; margin-bottom: 0.8rem; }

/* Animação de entrada */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 0.1s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.2s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* Cabeçalho */
.header { position: sticky; top: var(--topbar-h); z-index: 80; background: var(--white); border-bottom: 1px solid var(--navy-16); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; }
.brand img { height: 2.6rem; width: auto; }
.nav { display: none; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 0.5rem 0.25rem; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--coral); }
.header .header__cta { display: none; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.95rem; border: 2px solid var(--navy); border-radius: 999px; background: var(--white); color: var(--navy); font: inherit; font-weight: 700; font-size: 0.875rem; cursor: pointer; }
.nav--open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--navy-16); padding: 0.5rem var(--gutter) 1rem; }
.nav--open ul { display: grid; gap: 0.25rem; }
.nav--open a { display: block; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--navy-06); }
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav { display: block; margin-left: auto; margin-right: 1.4rem; }
  .nav ul { display: flex; gap: 1.4rem; align-items: center; }
  .header .header__cta { display: inline-flex; }
}

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.55rem; min-height: 3.1rem; padding: 0.85rem 1.7rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s ease, background-color 0.15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--coral); color: var(--navy); }
.btn--primary:hover { background: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white-14); }
.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--white); color: var(--navy); }
.btn--outline { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.2rem; font-size: 0.9375rem; }
.btn--lg { min-height: 3.6rem; padding: 1rem 2.2rem; font-size: 1.125rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.7rem; }
.cta-after { margin-top: clamp(1.8rem, 5vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.cta-after small { font-size: 0.875rem; }
.cta-after--center { justify-content: center; }

/* Abertura */
.hero { position: relative; background: radial-gradient(1200px 600px at 85% -10%, var(--navy-lift) 0%, var(--navy) 55%); color: var(--white); overflow: hidden; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 2.6rem; padding-block: clamp(3.2rem, 9vw, 6.4rem); align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } }
.hero__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__deco svg { position: absolute; right: -12%; top: -8%; width: min(90vw, 860px); height: auto; opacity: 0.5; }
.hero__deco path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3.2s var(--ease) forwards; }
.hero__deco path:nth-child(2) { animation-delay: 0.2s; } .hero__deco path:nth-child(3) { animation-delay: 0.4s; }
.hero__deco path:nth-child(4) { animation-delay: 0.6s; } .hero__deco path:nth-child(5) { animation-delay: 0.8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__brandline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--coral); letter-spacing: 0.04em; margin: 0 0 0.9rem; }
.hero h1 { max-width: 14ch; margin-bottom: 0.35em; }
.hero h1 em { display: block; font-style: normal; font-weight: 400; color: var(--coral); font-size: 0.62em; line-height: 1.12; margin-top: 0.35em; }
.hero__sub { font-size: clamp(1.08rem, 2.4vw, 1.25rem); max-width: 33rem; color: var(--white); margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; margin-top: 1.8rem; }
.chips li { border: 1px solid var(--white-14); border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.875rem; color: var(--white-78); background: var(--white-06); }
.chips li::before { content: "\2713"; color: var(--coral); margin-right: 0.45rem; font-weight: 700; }

/* Painel de indicadores do hero */
.panel { background: var(--white-06); border: 1px solid var(--white-14); border-radius: 22px; padding: clamp(1.2rem, 3vw, 1.7rem); backdrop-filter: blur(2px); }
.panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.stat { padding: 0.9rem 1rem; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--white-14); }
.stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 1; color: var(--white); }
.stat__num small { font-size: 0.55em; color: var(--coral); margin-left: 0.15em; }
.stat__lab { display: block; font-size: 0.8125rem; margin-top: 0.4rem; color: var(--white-78); line-height: 1.35; }
.spark { width: 100%; height: auto; display: block; margin-top: 0.4rem; }
.spark path.line { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: var(--coral-30); stroke: none; }
.draw-line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 2s var(--ease) 0.2s; }
.is-in .draw-line, .draw-line.is-in { stroke-dashoffset: 0; }

/* Faixa de indicadores */
.strip { background: var(--coral); color: var(--navy); padding-block: clamp(1.8rem, 4vw, 2.6rem); }
.strip__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .strip__grid { grid-template-columns: repeat(4, 1fr); } }
.strip .big { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 5.2vw, 3.2rem); line-height: 1; }
.strip .lab { display: block; margin-top: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.strip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1.2rem; }
.strip .fict { background: var(--navy); color: var(--coral); }

/* Cartões e grades */
.card { background: var(--white); border: 1px solid var(--navy-16); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); }
.section--navy .card, .section--deep .card { background: var(--white-06); border-color: var(--white-14); }
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Dores */
.dores { display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .dores { grid-template-columns: repeat(2, 1fr); } }
.dor { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--navy-16); border-radius: 14px; padding: 1.15rem 1.2rem; }
.dor__n { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: var(--coral); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.dor p { margin: 0; font-weight: 600; }
.bridge { margin-top: clamp(1.6rem, 4vw, 2.4rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.2; max-width: 30ch; }
.bridge em { font-style: normal; color: var(--orange); }

/* Protocolo: fases */
.phases { counter-reset: ph; display: grid; gap: 1rem; position: relative; }
.phase { position: relative; padding: 1.1rem 1.2rem 1.1rem 4.2rem; border-radius: 14px; background: var(--white-06); border: 1px solid var(--white-14); }
.phase::before { counter-increment: ph; content: counter(ph); position: absolute; left: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--coral); color: var(--navy); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.phase h3 { font-size: 1.2rem; margin-bottom: 0.2em; }
.phase p { margin: 0; font-size: 0.9375rem; color: var(--white-78); }

/* Gráfico */
.chart { background: var(--white-06); border: 1px solid var(--white-14); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.6rem); }
.chart__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.2rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--white-14); stroke-width: 1; }
.chart .axis-t { fill: var(--white-78); font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.chart .line { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: var(--coral-30); }
.chart .dot { fill: var(--navy); stroke: var(--coral); stroke-width: 3; }
.chart__cap { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--white-78); }

/* Linha do tempo */
.timeline { position: relative; display: grid; gap: 1.4rem; padding-left: 2.2rem; }
.timeline::before { content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 3px; background: var(--navy-16); border-radius: 3px; }
.timeline__fill { list-style: none; position: absolute; left: 0.55rem; top: 0.4rem; width: 3px; height: 0; background: var(--coral); border-radius: 3px; transition: height 1.6s var(--ease); }
.timeline.is-in .timeline__fill { height: calc(100% - 0.8rem); }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: -2.2rem; top: 0.35rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--white); border: 3px solid var(--coral); }
.tl__when { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); border-bottom: 3px solid var(--coral); padding-bottom: 0.15rem; }
.tl h3 { font-size: 1.25rem; margin: 0.2em 0 0.2em; }
.tl p { margin: 0; font-size: 0.9375rem; }
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(5, 1fr); padding-left: 0; padding-top: 2.4rem; gap: 1rem; }
  .timeline::before { left: 0; right: 0; top: 0.55rem; bottom: auto; width: auto; height: 3px; }
  .timeline__fill { left: 0; top: 0.55rem; height: 3px; width: 0; transition: width 1.8s var(--ease); }
  .timeline.is-in .timeline__fill { width: 100%; height: 3px; }
  .tl::before { left: 0; top: -2.4rem; }
}

/* Para quem é */
.fit { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .fit { grid-template-columns: repeat(2, 1fr); } }
.fit .card h3 { display: flex; align-items: center; gap: 0.6rem; }
.fit .ok h3::before { content: "\2713"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: var(--coral); font-size: 1rem; }
.fit .nao h3::before { content: "!"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--coral); color: var(--navy); font-size: 1.1rem; }
.fit ul { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.fit li { padding-left: 1.3rem; position: relative; }
.fit li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--coral); }

/* Prova social */
.proofs { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(3, 1fr); } }
.ba { width: 100%; }
.ba__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--navy-16); background: var(--navy); isolation: isolate; touch-action: pan-y; }
.ba__panel { position: absolute; inset: 0; display: grid; align-content: center; padding: 1rem clamp(1rem, 4vw, 1.6rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 4vw, 1.8rem); }
.ba__panel--antes { background: linear-gradient(135deg, var(--navy-lift) 0%, var(--navy) 100%); color: var(--white); justify-items: start; text-align: left; }
.ba__panel--depois { background: linear-gradient(135deg, var(--coral) 0%, #f3a592 100%); color: var(--navy); clip-path: inset(0 0 0 var(--pos, 50%)); justify-items: end; text-align: right; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: var(--white); z-index: 3; transform: translateX(-50%); pointer-events: none; }
.ba__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--white); color: var(--navy); display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba__range:focus-visible + .ba__handle::after { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--navy); }
.ba__label { position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 5; background: var(--navy); color: var(--coral); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.3rem 0.5rem; border-radius: 4px; border: 1px solid var(--coral); text-transform: uppercase; max-width: calc(100% - 1.2rem); }
.ba__cap { margin: 0.7rem 0 0; font-size: 0.875rem; font-weight: 600; }

/* Vídeos */
.videos { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .videos { grid-template-columns: 1fr 1fr 1.6fr; align-items: start; } }
.video { position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--navy-lift) 0%, var(--navy) 100%); color: var(--white); text-align: left; font: inherit; border: 1px solid var(--white-14); isolation: isolate; }
.video--v { aspect-ratio: 9 / 14; }
.video--h { aspect-ratio: 16 / 9; }
.video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--coral); color: var(--navy); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease; z-index: 2; }
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }
.video__play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.15rem; }
.video__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.2rem 1rem 0.9rem; background: linear-gradient(0deg, rgba(24,39,51,0.92) 0%, rgba(24,39,51,0) 100%); }
.video__meta strong { display: block; font-size: 0.9375rem; }
.video__meta span { font-size: 0.8125rem; color: var(--white-78); }
.video__deco { position: absolute; inset: 0; z-index: 1; opacity: 0.35; background: radial-gradient(circle at 30% 20%, var(--coral-30) 0%, transparent 55%); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; background: #000; }
.video-note { margin-top: 0.8rem; font-size: 0.875rem; min-height: 1.3rem; }

/* Avaliações */
.reviews { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { color: var(--navy); background: var(--white); border: 1px solid var(--navy-16); border-radius: var(--radius); padding: 1.5rem; }
.stars { color: var(--orange); font-size: 1.6rem; letter-spacing: 0.1em; line-height: 1; margin-bottom: 0.6rem; }
.review p { font-weight: 600; margin-bottom: 0.8rem; }
.review footer { font-size: 0.875rem; }

/* Autoridade */
.autoridade { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 860px) { .autoridade { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; } }
.retrato { aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(160deg, var(--navy-lift) 0%, var(--navy) 100%); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--white); border: 1px solid var(--white-14); }
.retrato__mark { width: 5rem; height: 5rem; border-radius: 50%; background: var(--coral); color: var(--navy); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; margin: 0 auto 0.9rem; }
.retrato span { display: block; font-size: 0.8125rem; color: var(--white-78); }

/* Passos */
.steps { display: grid; gap: 1.3rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-top: 3px solid var(--coral); padding-top: 1.1rem; }
.step__n { display: block; font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; color: var(--orange); margin-bottom: 0.5rem; }
.section--navy .step__n, .section--deep .step__n { color: var(--coral); }
.step p { opacity: 0.92; }

/* FAQ */
.faq { max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--navy-16); padding: 0.2rem 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 3.4rem; font-weight: 700; font-size: 1.0625rem; padding: 0.6rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--coral); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .resposta { padding: 0 0 1.1rem; }
.faq .resposta p { margin: 0 0 0.6rem; }

/* CTA final e contato */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 20ch; margin-inline: auto; }
.cta-final .lead { margin-inline: auto; }
.contact { display: grid; gap: 2.2rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.facts { display: grid; gap: 1.1rem; }
.facts dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--coral); }
.facts dd { margin: 0.15rem 0 0; font-size: 1.0625rem; }
.facts a { text-decoration-color: var(--coral); text-underline-offset: 4px; }
.form { display: grid; gap: 1rem; background: var(--white); color: var(--navy); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.8rem); }
.form h3 { margin-bottom: 0.2em; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field input, .field textarea { font: inherit; font-weight: 500; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: 10px; padding: 0.75rem 0.9rem; min-height: 3rem; width: 100%; }
.field textarea { min-height: 6rem; resize: vertical; }
.form__aviso { font-size: 0.875rem; }
.form__retorno { min-height: 1.5rem; font-weight: 700; margin: 0; }

/* Barra fixa de contato (celular) */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr; background: var(--coral); border-top: 1px solid var(--navy); padding-bottom: env(safe-area-inset-bottom); }
.stickybar a { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.6rem; padding: 0.7rem 1rem; color: var(--navy); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
@media (min-width: 900px) { .stickybar { display: none; } }

/* Rodapé */
.footer { background: var(--navy); color: var(--white); padding-block: 2.6rem; border-top: 1px solid var(--white-14); }
.footer__inner { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .footer__inner { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; } }
.footer img { height: 2.4rem; width: auto; }
.footer p { margin: 0; font-size: 0.875rem; color: var(--white-78); }

/* ===== v4 — barra de links institucionais =====
   Não fica fixa: rola junto com a página, para não pesar no topo. */
.sitebar { background: #eef1f3; border-bottom: 1px solid var(--navy-16); }
.sitebar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.7rem; padding-block: 0.55rem; }
.sitebar__label { display: none; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-right: auto; }
@media (min-width: 720px) { .sitebar__inner { justify-content: flex-end; } .sitebar__label { display: inline; } }
.pill { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.4rem 1.05rem 0.4rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s ease, color 0.18s ease; }
.pill svg { width: 1.15rem; height: 1.15rem; flex: none; }
.pill__arrow { width: 0.95rem !important; height: 0.95rem !important; transition: transform 0.2s var(--ease); }
.pill:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 50, 65, 0.22); }
.pill:hover .pill__arrow { transform: translate(2px, -2px); }
.pill--light { background: var(--white); color: var(--navy); border: 2px solid var(--navy); }
.pill--light svg:first-child { color: var(--orange); }
.pill--light:hover { background: var(--navy); color: var(--white); }
.pill--light:hover svg:first-child { color: var(--coral); }
.pill--aura { background: linear-gradient(135deg, var(--navy-lift) 0%, var(--navy) 100%); color: var(--white); border: 2px solid var(--navy); }
.pill--aura strong { color: var(--coral); letter-spacing: 0.08em; }
.pill--aura:hover { background: var(--coral); color: var(--navy); }
.pill--aura:hover strong { color: var(--navy); }
.pill__scan { position: relative; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--coral); overflow: hidden; }
.pill__scan svg { width: 1.35rem; height: 1.35rem; }
.pill__scan i { position: absolute; left: 0.1rem; right: 0.1rem; top: 0; height: 2px; border-radius: 2px; background: var(--coral); box-shadow: 0 0 6px var(--coral); animation: scan 2.4s ease-in-out infinite; }
.pill--aura:hover .pill__scan { color: var(--navy); }
.pill--aura:hover .pill__scan i { background: var(--navy); box-shadow: none; }
@keyframes scan { 0%, 100% { top: 0.1rem; } 50% { top: calc(100% - 0.2rem); } }
@media (max-width: 420px) { .pill { flex: 1 1 100%; justify-content: center; } }

/* Aviso rápido (link ainda não existente) */
.toast { position: fixed; left: 50%; bottom: 5.4rem; z-index: 120; transform: translate(-50%, 1rem); max-width: min(92vw, 30rem); background: var(--navy); color: var(--white); border: 1px solid var(--coral); border-radius: 14px; padding: 0.85rem 1.1rem; font-size: 0.9375rem; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: 2rem; } }

/* Menu: seção ativa + barra de progresso da leitura */
.nav a.is-active { border-bottom-color: var(--orange); }
.header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--coral), var(--orange)); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ===== v4 — movimento ===== */
/* Entrada do texto da abertura */
html.js .hero .proposto > *:not(.marca) { animation: rise 0.9s var(--ease) both; }
html.js .hero .hero__brandline { animation-delay: 0.05s; } html.js .hero h1 { animation-delay: 0.15s; }
html.js .hero .hero__sub { animation-delay: 0.35s; } html.js .hero .btn-row { animation-delay: 0.5s; } html.js .hero .chips { animation-delay: 0.65s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Manchas de luz que flutuam devagar no fundo da abertura */
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: 0.5; animation: drift 14s ease-in-out infinite; }
.orb--1 { width: 22rem; height: 22rem; right: 4%; top: -5rem; background: rgba(235, 133, 108, 0.32); }
.orb--2 { width: 16rem; height: 16rem; left: -4rem; bottom: -3rem; background: rgba(235, 133, 108, 0.18); animation-duration: 18s; animation-delay: -6s; }
.orb--3 { width: 12rem; height: 12rem; right: 38%; bottom: 8%; background: rgba(210, 82, 32, 0.22); animation-duration: 22s; animation-delay: -11s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-28px, 22px) scale(1.08); } 66% { transform: translate(24px, -18px) scale(0.94); } }

/* Gráfico do hero: área aparece, ponto final pulsa */
.spark path.area { opacity: 0; transition: opacity 1.4s ease 1.1s; }
.is-in .spark path.area { opacity: 1; }
.pulse-dot { fill: var(--white); opacity: 0; transition: opacity 0.4s ease 2s; }
.pulse-ring { fill: none; stroke: var(--coral); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-in .pulse-dot { opacity: 1; }
.is-in .pulse-ring { opacity: 1; animation: pulse 2s ease-out 2.2s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }

/* Gráfico do protocolo: área surge e pontos "estouram" em sequência */
.chart .area { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.is-in .chart .area, .chart.is-in .area { opacity: 1; }
.chart .dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.chart.is-in .dot { opacity: 1; transform: none; }
.chart.is-in .dot:nth-of-type(1) { transition-delay: 0.4s; } .chart.is-in .dot:nth-of-type(2) { transition-delay: 0.65s; }
.chart.is-in .dot:nth-of-type(3) { transition-delay: 0.9s; } .chart.is-in .dot:nth-of-type(4) { transition-delay: 1.15s; }
.chart.is-in .dot:nth-of-type(5) { transition-delay: 1.4s; } .chart.is-in .dot:nth-of-type(6) { transition-delay: 1.65s; }
.chart.is-in .dot:nth-of-type(7) { transition-delay: 1.9s; }

/* Faixa de indicadores: traço que cresce acima de cada número */
.strip__grid > div { position: relative; padding-top: 0.9rem; }
.strip__grid > div::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 3px; background: var(--navy); transition: width 1.1s var(--ease) 0.3s; }
.strip__grid > div.is-in::before { width: 3.2rem; }

/* Cartões reagem ao toque do mouse */
.dor, .card, .review, .phase, .video { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
html.js .dor.reveal, html.js .review.reveal, html.js .phase.reveal, html.js .card.reveal, html.js .video.reveal { transition-property: opacity, transform, box-shadow; }
@media (hover: hover) {
  .dor:hover, .review:hover, .card:hover, html.js .dor.reveal.is-in:hover, html.js .review.reveal.is-in:hover, html.js .card.reveal.is-in:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(31, 50, 65, 0.16); }
  .phase:hover, html.js .phase.reveal.is-in:hover { transform: translateX(4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
}
.spark { overflow: visible; }
.hero .btn--lg { padding: 1rem 1.7rem; font-size: 1.0625rem; }
.video-col { display: grid; gap: 1.2rem; }
.video-cta { border: 1px solid var(--white-14); border-radius: var(--radius); background: var(--white-06); padding: 1.3rem 1.4rem; }
.video-cta p { margin: 0 0 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }

/* Linha do tempo: pontos acendem conforme a linha passa */
.tl::before { transition: background-color 0.4s ease, transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.timeline.is-in .tl::before { background: var(--coral); transform: scale(1.15); }
.timeline.is-in .tl:nth-child(2)::before { transition-delay: 0.2s; } .timeline.is-in .tl:nth-child(3)::before { transition-delay: 0.55s; }
.timeline.is-in .tl:nth-child(4)::before { transition-delay: 0.9s; } .timeline.is-in .tl:nth-child(5)::before { transition-delay: 1.25s; }
.timeline.is-in .tl:nth-child(6)::before { transition-delay: 1.6s; }
html.js .tl { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .timeline.is-in .tl { opacity: 1; transform: none; }
html.js .timeline.is-in .tl:nth-child(2) { transition-delay: 0.2s; } html.js .timeline.is-in .tl:nth-child(3) { transition-delay: 0.55s; }
html.js .timeline.is-in .tl:nth-child(4) { transition-delay: 0.9s; } html.js .timeline.is-in .tl:nth-child(5) { transition-delay: 1.25s; }
html.js .timeline.is-in .tl:nth-child(6) { transition-delay: 1.6s; }

/* Estrelas das avaliações: varrem da esquerda para a direita */
html.js .review .stars { clip-path: inset(-4px 100% -4px 0); transition: clip-path 0.9s var(--ease) 0.35s; }
html.js .review.is-in .stars { clip-path: inset(-4px 0 -4px 0); }

/* Botão com brilho que passa */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: skewX(-18deg); animation: shine 4.5s ease-in-out 2s infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { left: -40%; } 100% { left: 140%; } }

/* ===== v4 — painel de indicadores ===== */
.dash { display: grid; gap: 1.4rem; }
.dash > * { min-width: 0; }
@media (max-width: 480px) { .cols { gap: 0.3rem; } .col b { font-size: 0.6875rem; } .rings { gap: 0.3rem; } .ring__lab { font-size: 0.75rem; } }
@media (min-width: 960px) { .dash { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; } }
.colchart .chart__title { color: var(--navy); }
.chart__cap--dark { color: var(--navy); font-size: 0.8125rem; margin: 0.9rem 0 0; }
.cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.4rem, 2vw, 1rem); margin-top: 1rem; }
.col { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.col__track { position: relative; height: clamp(11rem, 30vw, 15rem); display: flex; align-items: flex-end; background: repeating-linear-gradient(to top, var(--navy-16) 0 1px, transparent 1px 25%); border-radius: 6px 6px 0 0; }
.col__track i { display: block; width: 100%; height: calc(var(--h) * 1%); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--orange) 0%, var(--coral) 100%); transform-origin: bottom; }
.col__v { position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 1% + 0.3rem); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.35rem); line-height: 1; }
.col b { text-align: center; font-size: 0.75rem; font-weight: 700; }
html.js .col__track i { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
html.js .col__v { opacity: 0; transition: opacity 0.5s ease; }
html.js .colchart.is-in .col__track i { transform: none; }
html.js .colchart.is-in .col__v { opacity: 1; }
.colchart.is-in .col:nth-child(1) i { transition-delay: 0.15s; } .colchart.is-in .col:nth-child(2) i { transition-delay: 0.3s; }
.colchart.is-in .col:nth-child(3) i { transition-delay: 0.45s; } .colchart.is-in .col:nth-child(4) i { transition-delay: 0.6s; }
.colchart.is-in .col:nth-child(5) i { transition-delay: 0.75s; } .colchart.is-in .col:nth-child(6) i { transition-delay: 0.9s; }
.colchart.is-in .col:nth-child(1) .col__v { transition-delay: 0.9s; } .colchart.is-in .col:nth-child(2) .col__v { transition-delay: 1.05s; }
.colchart.is-in .col:nth-child(3) .col__v { transition-delay: 1.2s; } .colchart.is-in .col:nth-child(4) .col__v { transition-delay: 1.35s; }
.colchart.is-in .col:nth-child(5) .col__v { transition-delay: 1.5s; } .colchart.is-in .col:nth-child(6) .col__v { transition-delay: 1.65s; }

.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.4rem; }
.ringbox { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.ring { position: relative; width: min(100%, 8.2rem); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring__bg { stroke: var(--navy-16); }
.ring__fg { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 263.89; stroke-dashoffset: var(--off, 0); }
html.js .ring__fg { stroke-dashoffset: 263.89; transition: stroke-dashoffset 1.8s cubic-bezier(.2, .8, .2, 1) 0.3s; }
html.js .is-in .ring__fg { stroke-dashoffset: var(--off, 0); }
.ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.ring__lab { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.pbars { display: grid; gap: 1rem; margin-top: 1.6rem; }
.pbar__top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.4rem; }
.pbar__top strong { font-family: var(--font-display); font-size: 1.15rem; }
.pbar__track { height: 0.75rem; border-radius: 999px; background: var(--navy-16); overflow: hidden; }
.pbar__track i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--orange)); }
html.js .pbar__track i { width: 0; transition: width 1.5s cubic-bezier(.2, .8, .2, 1) 0.5s; }
html.js .is-in .pbar__track i { width: var(--w); }
.is-in .pbar:nth-child(2) .pbar__track i { transition-delay: 0.7s; } .is-in .pbar:nth-child(3) .pbar__track i { transition-delay: 0.9s; }

/* Modo estático (?estatico) e preferência por menos movimento: tudo já no estado final */
html.estatico { scroll-behavior: auto; }
html.estatico *, html.estatico *::before, html.estatico *::after { animation: none !important; transition: none !important; }
html.estatico .hero__deco path { stroke-dashoffset: 0; }
html.estatico .pulse-ring { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__deco path { stroke-dashoffset: 0; }
  .pulse-ring { opacity: 0; }
  .btn--shine::after { display: none; }
}