/* =========================================================
   Daniela Faria, psicóloga
   Folha de estilos única: tokens, base, componentes, seções
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Fundos claros */
  --c-nevoa: #FAF6FB;
  --c-lilas: #F1E8F4;
  --c-lavanda: #DCC6E3;

  /* Roxos da marca (o roxo principal vem do fundo do logo) */
  --c-roxo-claro: #9A5BA3;
  --c-roxo: #573067;
  --c-roxo-escuro: #3F1F4B;
  --c-roxo-noite: #251029;

  /* Texto */
  --c-tinta: #2A1530;
  --c-texto-suave: #5E4A64;
  --c-texto-claro: #F6EEF8;
  --c-texto-claro-suave: #D8C4DD;

  /* Acento (o logo não tem acento próprio: valor provisório do briefing) */
  --c-acento: #E2366E;
  --c-acento-texto: #B01E50;

  /* Linhas e sombras */
  --c-linha: rgba(42, 21, 48, 0.12);
  --c-linha-clara: rgba(246, 238, 248, 0.18);
  --sombra-suave: 0 1px 2px rgba(63, 31, 75, 0.06), 0 16px 40px -16px rgba(63, 31, 75, 0.22);
  --sombra-flutuante: 0 2px 6px rgba(63, 31, 75, 0.10), 0 28px 56px -20px rgba(63, 31, 75, 0.35);

  /* Degradês, sempre na mesma família */
  --g-luz: linear-gradient(165deg, #FAF6FB 0%, #F1E8F4 55%, #E7D7EC 100%);
  --g-roxo: linear-gradient(150deg, #6E3F7C 0%, #573067 45%, #3F1F4B 100%);
  --g-noite: radial-gradient(120% 90% at 20% 0%, #573067 0%, #3F1F4B 45%, #251029 100%);
  --g-brilho: radial-gradient(55% 50% at 75% 30%, rgba(154, 91, 163, 0.22), transparent 70%);

  /* Grão (feTurbulence) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Tipografia */
  --f-titulo: "Gloock", Georgia, "Times New Roman", serif;
  --f-escrita: "Newsreader", Georgia, serif;
  --f-corpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1: clamp(2.75rem, 1.4rem + 4.8vw, 5.75rem);
  --t-h2: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --t-escrita: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-corpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-pequeno: 0.875rem;

  /* Espaço */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;

  /* Raios */
  --r-pill: 999px;
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-hero: 240px 240px 32px 32px;

  /* Movimento */
  --e-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --e-traco: cubic-bezier(0.65, 0, 0.35, 1);
  --e-cortina: cubic-bezier(0.76, 0, 0.24, 1);

  --header-h: 64px;
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
}

@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-nevoa);
  color: var(--c-tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.015em; }
h3 {
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { text-wrap: pretty; max-width: 62ch; }

::selection { background: var(--c-lavanda); color: var(--c-tinta); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: 4px;
}
.sobre-roxo :focus-visible { outline-color: var(--c-texto-claro); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-link {
  position: fixed;
  top: var(--s-3); left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-roxo);
  color: var(--c-texto-claro);
  border-radius: var(--r-pill);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--e-saida);
}
.pular-link:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  .grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Grão: camada no pseudo-elemento */
.com-grao { position: relative; isolation: isolate; }
.com-grao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grao);
  background-size: 220px 220px;
  opacity: 0.04;
  mix-blend-mode: multiply;
}
.com-grao.sobre-roxo::after { opacity: 0.06; mix-blend-mode: soft-light; }

/* ---------- 3. Componentes ---------- */

/* Marca (logo redesenhado em vetor a partir de Logo.png) */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--c-roxo);
  text-decoration: none;
  line-height: 1;
}
.marca__simbolo { height: 2.5em; width: auto; flex: none; }
.marca__texto { display: flex; flex-direction: column; }
.marca__nome {
  font-family: var(--f-titulo);
  font-size: 1.12em;
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--c-tinta);
}
.marca__profissao {
  font-family: var(--f-corpo);
  font-size: 0.5em;
  letter-spacing: 0.02em;
  margin-top: 0.7em;
  color: var(--c-texto-suave);
}
.marca--clara, .marca--clara .marca__nome { color: var(--c-texto-claro); }
.marca--clara .marca__profissao { color: var(--c-texto-claro-suave); }

/* Botões */
.botao {
  --botao-fundo: var(--c-roxo);
  --botao-fundo-hover: var(--c-roxo-escuro);
  --botao-texto: var(--c-texto-claro);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 250ms ease;
}
.botao::after {
  content: "";
  position: absolute;
  left: 28px; right: 28px; bottom: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 350ms var(--e-traco);
}
.botao:hover { background: var(--botao-fundo-hover); }
.botao:hover::after { transform: scaleX(1); }
.botao--compacto { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.botao--compacto::after { left: 20px; right: 20px; bottom: 9px; }
.botao--invertido {
  --botao-fundo: var(--c-nevoa);
  --botao-fundo-hover: var(--c-lilas);
  --botao-texto: var(--c-roxo-escuro);
}
.botao--secundario {
  background: transparent;
  color: var(--c-roxo);
  box-shadow: inset 0 0 0 1px var(--c-roxo);
}
.botao--secundario:hover { background: var(--c-lilas); }
.botao--secundario::after { display: none; }

.link-texto {
  color: var(--c-roxo);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, var(--c-roxo) 45%, transparent);
  transition: text-decoration-color 200ms ease;
}
.link-texto:hover { text-decoration-color: var(--c-acento); }

/* Rasura: traço de caneta sobre o texto */
.riscavel {
  position: relative;
  display: inline;
  text-decoration: none;
}
.rasura {
  position: absolute;
  left: -5%;
  width: 114%;
  top: 34%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--c-acento);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  clip-path: inset(-50% -2% -50% -2%);
}
.sublinhado {
  position: absolute;
  left: -2%;
  width: 104%;
  bottom: -0.3em;
  height: 0.45em;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--c-acento);
  stroke-width: 2.25;
  stroke-linecap: round;
  clip-path: inset(-50% -2% -50% -2%);
}
/* Rasura para textos que podem quebrar linha (frases e nota):
   o mesmo traço, desenhado em cada linha do texto */
.risco-fundo {
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 450ms var(--e-traco), color 300ms ease;
}
.risco-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.2C28 11.4 52 12.6 84 10.9S140 9.6 168 9.4C182 9.3 191 8.4 197 5.8' fill='none' stroke='%23E2366E' stroke-width='2.25' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.risco-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 11.4C35 12.8 70 9.2 104 10.4S160 10.8 184 8.9C190 8.3 194 7.2 198 5.2' fill='none' stroke='%23E2366E' stroke-width='2.25' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.risco-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C30 10.6 58 11.8 92 10.2C124 8.8 150 10.6 176 8.6C186 7.8 192 6.6 196 4.8' fill='none' stroke='%23E2366E' stroke-width='2.25' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.risco-fundo.riscado { background-size: 100% 0.5em; color: color-mix(in srgb, var(--c-texto-suave) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .risco-fundo { transition: none; } }

/* Estado "a desenhar": usado só com JS e movimento permitido */
@media (prefers-reduced-motion: no-preference) {
  .js .traco-oculto { clip-path: inset(-50% 102% -50% -2%); }
  .js .traco-desenha {
    clip-path: inset(-50% -2% -50% -2%);
    transition: clip-path 450ms var(--e-traco);
  }
}

/* Fotos e placeholder */
.foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--g-luz);
}
.foto img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent; /* esconde o texto alternativo enquanto carrega */
}
.foto--vazia img { visibility: hidden; }
.foto__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--s-6);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-texto-suave);
  border-radius: inherit;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(220, 198, 227, 0.55), transparent 75%),
    var(--g-luz);
}
.foto__placeholder::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--c-roxo) 40%, transparent);
  border-radius: var(--r-interno, 18px);
}
.foto--hero { --r-interno: 226px 226px 18px 18px; }
.foto__placeholder svg { width: 32px; height: 32px; color: var(--c-roxo); margin-bottom: var(--s-3); }
.foto__placeholder-titulo { font-weight: 500; color: var(--c-tinta); }

/* Ícones em traço */
.icone {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Ícone ao lado de um título ou texto curto */
.com-icone { display: flex; align-items: center; gap: 10px; }
.com-icone .icone { width: 22px; height: 22px; color: var(--c-roxo); }

/* Revelação ao rolar */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--e-saida), transform 600ms var(--e-saida);
    transition-delay: calc(var(--atraso, 0) * 60ms);
  }
  .js [data-revelar].revelado { opacity: 1; transform: none; }
}

/* Linhas com máscara (H1 do Hero, interlúdio) */
.linha { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linha > span { display: block; }

/* ---------- 4. Preloader ---------- */
.preloader { display: none; }
.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--g-luz);
  clip-path: inset(0 0 0 0);
}
.preloader__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preloader .marca { font-size: clamp(22px, 3.6vw, 31px); }
.preloader__traco {
  width: 180px;
  height: 18px;
  margin-top: 32px;
  overflow: visible;
  fill: none;
  stroke: var(--c-acento);
  stroke-width: 2.25;
  stroke-linecap: round;
}
.preloader__frase {
  margin-top: 20px;
  font-family: var(--f-escrita);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--c-texto-suave);
}
html.js:not(.preloader-fim) body { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .js .preloader .marca { animation: pre-logo 500ms var(--e-saida) both; }
  .js .preloader__traco { animation: pre-traco 2000ms var(--e-traco) 400ms both; }
  .js .preloader__frase { animation: aparece 500ms ease 700ms both; }
  .preloader-saindo .preloader {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 600ms var(--e-cortina);
  }
  .preloader-saindo .preloader__conteudo {
    opacity: 0;
    transform: translateY(-24px);
    transition: opacity 380ms ease, transform 450ms var(--e-cortina);
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-saindo .preloader { opacity: 0; transition: opacity 400ms ease 200ms; }
}

@keyframes pre-logo { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pre-traco { from { clip-path: inset(-50% 102% -50% -2%); } to { clip-path: inset(-50% -2% -50% -2%); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 5. Header ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  margin-bottom: calc(var(--header-h) * -1);
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}
.cabecalho.rolou {
  background: rgba(250, 246, 251, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--c-linha);
}
.cabecalho__barra {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.cabecalho .marca { font-size: 13.6px; }
@media (min-width: 1024px) { .cabecalho .marca { font-size: 16px; } }

.nav { display: none; }
.cabecalho__acao { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav ul { display: flex; gap: 32px; }
  .nav a {
    position: relative;
    display: inline-block;
    padding-block: var(--s-2);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    color: var(--c-tinta);
    text-decoration: none;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 14px;
    height: 6px;
    margin-left: -7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 4.2C3.2 2 5 1.6 7 3s3.8 1.6 6-1' fill='none' stroke='%23E2366E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 350ms var(--e-traco);
  }
  .nav a[aria-current="true"]::after { clip-path: inset(0 0 0 0); }
  .nav a:hover { color: var(--c-roxo); }
  .cabecalho__acao { display: inline-flex; }
}

.menu-botao {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  color: var(--c-tinta);
}
.menu-botao span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--e-saida), top 300ms var(--e-saida);
}
.menu-botao span:first-child { top: 18px; }
.menu-botao span:last-child { top: 25px; }
.menu-aberto .menu-botao { color: var(--c-texto-claro); }
.menu-aberto .menu-botao span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-aberto .menu-botao span:last-child { top: 21.5px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .menu-botao { display: none; } }

.menu-aberto .cabecalho { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-aberto .cabecalho .marca,
.menu-aberto .cabecalho .marca__nome { color: var(--c-texto-claro); }
.menu-aberto .cabecalho .marca__profissao { color: var(--c-texto-claro-suave); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 32px) var(--gutter) 32px;
  background: var(--g-roxo);
  color: var(--c-texto-claro);
  overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { display: flex; flex-direction: column; gap: var(--s-2); }
.menu-mobile ul a {
  display: inline-block;
  padding-block: var(--s-1);
  font-family: var(--f-titulo);
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--c-texto-claro);
  text-decoration: none;
}
.menu-mobile__rodape { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-4); }
.menu-mobile__rodape .botao { width: 100%; }
.menu-mobile__insta { color: var(--c-texto-claro-suave); text-decoration: none; font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .menu-mobile ul li,
  .menu-mobile__rodape { animation: menu-item 400ms var(--e-saida) both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes menu-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .menu-mobile { display: none !important; } }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 64px));
  padding-bottom: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(40% 40% at 5% 95%, rgba(220, 198, 227, 0.6), transparent 70%),
    var(--g-luz);
}
.hero__brilho {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: var(--g-brilho);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__brilho { animation: deriva 40s ease-in-out infinite alternate; }
  .fora-da-tela .hero__brilho,
  .fora-da-tela .contato__brilho { animation-play-state: paused; }
}
@keyframes deriva {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6%, 4%, 0); }
}

.hero__texto h1 { color: var(--c-tinta); }
.hero__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-texto-suave);
  max-width: 44ch;
}
.hero__acoes {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.hero__apoio {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-pequeno);
  color: var(--c-texto-suave);
}
.hero__apoio .icone { width: 16px; height: 16px; color: var(--c-roxo); }

.hero__visual { position: relative; }
.hero__arco {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--c-roxo-claro) 45%, transparent);
  border-radius: var(--r-hero);
  transform: translate(20px, -20px);
}
.foto--hero {
  border-radius: var(--r-hero);
  box-shadow: var(--sombra-suave);
}
.foto--hero img { object-position: 50% 20%; }

.papel {
  position: absolute;
  z-index: 3;
  padding: 24px 28px;
  background: rgba(250, 246, 251, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-flutuante);
}
.papel__lista {
  display: grid;
  gap: 10px;
  font-family: var(--f-escrita);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.papel__lista li { color: var(--c-tinta); }
.papel__lista .riscada { color: color-mix(in srgb, var(--c-texto-suave) 70%, transparent); }
.papel__lista .nova { color: var(--c-roxo); }

.cartao-nome {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-nevoa);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-flutuante);
  line-height: 1.3;
}
.cartao-nome svg { height: 26px; width: auto; color: var(--c-roxo); }
.cartao-nome strong { display: block; font-weight: 600; font-size: 1.0625rem; color: var(--c-tinta); }
.cartao-nome span { display: block; font-size: 0.875rem; color: var(--c-texto-suave); }

/* Hero mobile */
@media (max-width: 899.98px) {
  .hero__acoes .botao { width: 100%; }
  .hero__visual {
    width: min(86vw, 420px);
    margin: var(--s-7) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__arco { bottom: auto; aspect-ratio: 4 / 5; height: auto; transform: translate(12px, -12px); }
  .foto--hero { width: 100%; }
  .papel {
    position: relative;
    width: min(80vw, 340px);
    margin-top: -40px;
    padding: 20px 22px;
  }
  .papel__lista { white-space: normal; }
  .cartao-nome { position: relative; margin-top: var(--s-4); }
}

/* Hero desktop e tablet */
@media (min-width: 900px) {
  .hero { min-height: min(100svh, 960px); display: flex; align-items: center; }
  .hero > .container { width: 100%; }
  .hero__grade { align-items: center; }
  .hero__texto { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; }
  .hero__visual {
    grid-column: 7 / -1;
    grid-row: 1;
    justify-self: end;
    width: clamp(300px, 38vw, 400px);
    margin-right: 8px;
  }
  .papel {
    top: 54%;
    left: 0;
    transform: translate(-62%, -50%);
    padding: 18px 22px;
  }
  .papel__lista { font-size: 1.05rem; }
  .cartao-nome { left: 0; bottom: 0; transform: translate(-32px, 24px); }
}
/* Entre 900 e 1279px o papel entra mais na foto, para não encostar no texto */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .hero__lead { max-width: 30ch !important; }
  .papel { top: 64%; transform: translate(-34%, -50%); }
}
@media (min-width: 1024px) {
  .hero__texto { grid-column: 1 / span 7; }
  .hero__lead { max-width: 34ch; }
  .hero__visual { width: clamp(380px, 34vw, 500px); margin-right: calc(var(--gutter) * -0.5); }
  .papel { padding: 24px 28px; }
  .papel__lista { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); }
}

/* Hero: entrada orquestrada (só com JS e movimento permitido) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__texto h1 .linha > span { transform: translateY(105%); }
  .js .hero [data-hero-sobe] { opacity: 0; transform: translateY(12px); }
  .js .hero .foto--hero { clip-path: inset(100% 0 0 0 round 240px 240px 32px 32px); }
  .js .hero__arco { opacity: 0; transform: translate(28px, -12px); }
  .js .hero .papel { opacity: 0; }
  .js .hero .cartao-nome { opacity: 0; }
  .js .papel .rasura,
  .js .papel .sublinhado { clip-path: inset(-50% 102% -50% -2%); }
  .js .papel .nova { color: var(--c-tinta); }

  .site-pronto .hero__texto h1 .linha > span { animation: linha-sobe 700ms var(--e-saida) both; animation-delay: calc(var(--i) * 90ms); }
  .site-pronto .hero [data-hero-sobe] { animation: sobe-12 800ms var(--e-saida) both; animation-delay: calc(200ms + var(--i) * 80ms); }
  .site-pronto .hero .foto--hero { animation: foto-revela 1100ms var(--e-traco) 100ms both; }
  .site-pronto .hero__arco { animation: arco-entra 700ms var(--e-saida) 600ms both; }
  .site-pronto .hero .papel { animation: aparece 400ms ease 1100ms both; }
  .site-pronto .papel li:nth-child(1) .rasura { animation: traco 450ms var(--e-traco) 1600ms both; }
  .site-pronto .papel li:nth-child(2) .rasura { animation: traco 450ms var(--e-traco) 2200ms both; }
  .site-pronto .papel li:nth-child(3) .rasura { animation: traco 450ms var(--e-traco) 2800ms both; }
  .site-pronto .papel .riscada { animation: risca-cor 300ms ease both; }
  .site-pronto .papel li:nth-child(1).riscada { animation-delay: 1750ms; }
  .site-pronto .papel li:nth-child(2).riscada { animation-delay: 2350ms; }
  .site-pronto .papel li:nth-child(3).riscada { animation-delay: 2950ms; }
  .site-pronto .papel .nova { animation: nova-cor 500ms ease 3400ms both; }
  .site-pronto .papel .sublinhado { animation: traco 500ms var(--e-traco) 3400ms both; }
  .site-pronto .hero .cartao-nome { animation: cartao-sobe 500ms var(--e-saida) 1400ms both; }
  .site-pronto .papel { will-change: auto; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .site-pronto .hero .cartao-nome { animation-name: cartao-sobe-desk; }
  .js .hero .cartao-nome { transform: translate(-32px, 36px); }
}

@keyframes linha-sobe { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sobe-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes foto-revela {
  from { clip-path: inset(100% 0 0 0 round 240px 240px 32px 32px); }
  to { clip-path: inset(0 0 0 0 round 240px 240px 32px 32px); }
}
@keyframes arco-entra { from { opacity: 0; transform: translate(28px, -12px); } to { opacity: 1; transform: translate(20px, -20px); } }
@keyframes traco { from { clip-path: inset(-50% 102% -50% -2%); } to { clip-path: inset(-50% -2% -50% -2%); } }
@keyframes risca-cor { from { color: var(--c-tinta); } to { color: color-mix(in srgb, var(--c-texto-suave) 70%, transparent); } }
@keyframes nova-cor { from { color: var(--c-tinta); } to { color: var(--c-roxo); } }
@keyframes cartao-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cartao-sobe-desk { from { opacity: 0; transform: translate(-32px, 36px); } to { opacity: 1; transform: translate(-32px, 24px); } }

/* ---------- 7. Frases ---------- */
.frases {
  padding-block: clamp(96px, 12vw, 176px);
  background: var(--c-nevoa);
}
.frases__topo p { margin-top: var(--s-5); color: var(--c-texto-suave); }
@media (min-width: 900px) {
  .frases__topo { align-items: end; }
  .frases__topo h2 { grid-column: 1 / span 6; }
  .frases__topo p { grid-column: 8 / -1; margin-top: 0; }
}
.frases__lista {
  margin-top: var(--s-8);
  border-top: 1px solid var(--c-linha);
}
.frase { border-bottom: 1px solid var(--c-linha); }
.frase summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 28px 0;
  cursor: pointer;
  font-family: var(--f-escrita);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-tinta);
}
.frase summary::-webkit-details-marker { display: none; }
.frase summary::marker { content: ""; }
.frase__texto {
  display: inline-block;
  transition: transform 250ms var(--e-saida), color 300ms ease;
}
/* Sem JS, o próprio [open] desenha a rasura */
html:not(.js) .frase[open] .risco-fundo { background-size: 100% 0.5em; color: color-mix(in srgb, var(--c-texto-suave) 70%, transparent); }

.frase__mais {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--c-roxo);
  transition: transform 350ms var(--e-saida);
}
.frase__mais::before,
.frase__mais::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  margin: -0.75px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
}
.frase__mais::after { transform: rotate(90deg); }
.frase[open] .frase__mais { transform: rotate(45deg); }
.frase__resposta { overflow: hidden; }
.frase__resposta p {
  max-width: 56ch;
  padding-bottom: 32px;
  color: var(--c-tinta);
}
@media (min-width: 900px) {
  .frase__resposta p { margin-left: 15%; }
  .frase summary:hover .frase__texto { transform: translateX(8px); }
}
.frases__fecho {
  margin-top: var(--s-7);
  margin-left: auto;
  text-align: right;
  font-family: var(--f-escrita);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--c-roxo);
}

/* ---------- 8. Temas ---------- */
.temas {
  padding-block: clamp(80px, 10vw, 144px);
  background: var(--c-lilas);
}
.temas__intro { margin-top: var(--s-5); max-width: 52ch; color: var(--c-texto-suave); }
.temas__lista { margin-top: var(--s-8); display: grid; gap: 12px; }
.tema {
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(28px, 5vw, 44px);
  overflow: hidden;
}
.tema--carreira { background: linear-gradient(170deg, #F1E8F4, #E4D3EA); box-shadow: inset 0 0 0 1px var(--c-linha); }
.tema--relacionamentos { background: linear-gradient(170deg, #E4D3EA, #CDB0D6); }
.tema--identidade { background: var(--g-roxo); color: var(--c-texto-claro); }
.tema__icone {
  position: absolute;
  top: clamp(28px, 5vw, 44px);
  right: clamp(28px, 5vw, 44px);
  width: 30px;
  height: 30px;
  color: var(--c-roxo);
  opacity: 0.85;
}
.tema--identidade .tema__icone { color: var(--c-texto-claro); }
.tema .tema__titulo { padding-right: 44px; }
.temas.com-abas .tema:not(.ativo) .tema__titulo { padding-right: 0; }
@media (min-width: 1024px) {
  .temas.com-abas .tema__icone { top: 40px; right: 40px; transition: opacity 300ms ease; }
  .temas.com-abas .tema:not(.ativo) .tema__icone { right: auto; left: 40px; opacity: 0.6; }
}
.tema__titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-tinta);
}
.tema--identidade .tema__titulo { color: var(--c-texto-claro); }
.tema__aba {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: inherit;
}
.tema__corpo p { margin-top: var(--s-4); color: var(--c-tinta); }
.tema--identidade .tema__corpo p { color: var(--c-texto-claro-suave); }
.tema__corpo ul { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.tema__corpo li {
  position: relative;
  padding-left: 26px;
  color: var(--c-tinta);
}
.tema--identidade .tema__corpo li { color: var(--c-texto-claro); }
.tema__corpo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 13px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 4.4C3 2.4 5 1.4 7 2.9s4 1.6 6-.9' fill='none' stroke='%23E2366E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tema--identidade .tema__corpo li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 4.4C3 2.4 5 1.4 7 2.9s4 1.6 6-.9' fill='none' stroke='%23F6EEF8' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Painéis que se expandem (desktop, com JS) */
@media (min-width: 1024px) {
  .temas.com-abas .temas__lista {
    display: flex;
    gap: 12px;
    height: clamp(460px, 48vw, 560px);
  }
  .temas.com-abas .tema {
    flex: 22 1 0;
    min-width: 0;
    padding: 40px;
    transition: flex-grow 500ms var(--e-saida);
  }
  .temas.com-abas .tema.ativo { flex-grow: 56; }
  .temas.com-abas .tema__corpo { width: min(460px, 32vw); }
  .temas.com-abas .tema__corpo[hidden] { display: none; }
  .temas.com-abas .tema.ativo .tema__corpo { animation: aparece 450ms ease 180ms both; }
  .temas.com-abas .tema:not(.ativo) { cursor: pointer; }
  .temas.com-abas .tema__aba { cursor: pointer; border-radius: 6px; }
  .temas.com-abas .tema--identidade .tema__aba:focus-visible { outline-color: var(--c-texto-claro); }
  .temas.com-abas .tema:not(.ativo) .tema__titulo {
    position: absolute;
    left: 36px;
    bottom: 40px;
    font-size: 2rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
  .temas.com-abas .tema:not(.ativo):hover { filter: brightness(0.985); }
}

/* ---------- 9. Carga mental ---------- */
.carga {
  padding-block: clamp(96px, 12vw, 176px);
  background:
    radial-gradient(45% 40% at 92% 6%, rgba(154, 91, 163, 0.45), transparent 70%),
    var(--g-roxo);
  color: var(--c-texto-claro);
}
.carga h2 { color: var(--c-texto-claro); }
.carga__texto p { margin-top: var(--s-5); color: var(--c-texto-claro-suave); }
.carga__fecho {
  margin-top: var(--s-6) !important;
  font-family: var(--f-escrita);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--c-texto-claro) !important;
}
.carga__nota-area { margin-top: var(--s-8); }
@media (min-width: 900px) {
  .carga__grade { align-items: center; }
  .carga__texto { grid-column: 1 / span 5; }
  .carga__nota-area { grid-column: 7 / span 5; margin-top: 0; }
  .nota { transform: rotate(-2deg); }
}
.nota {
  max-width: 380px;
  margin-inline: auto;
  padding: 28px;
  border-radius: var(--r-md);
  background: #FFFDF6;
  color: var(--c-tinta);
  box-shadow: 0 2px 6px rgba(20, 6, 24, 0.18), 0 36px 64px -24px rgba(20, 6, 24, 0.6);
}
.nota__app { font-weight: 600; font-size: 0.8125rem; color: var(--c-texto-suave); }
.nota__titulo { margin-top: var(--s-1); font-family: var(--f-corpo); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--c-tinta); }
.nota__lista { margin-top: var(--s-5); display: grid; gap: 14px; }
.nota__item { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.nota__item input {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  margin: 0;
}
.nota__caixa {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c-roxo) 55%, transparent);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.nota__caixa svg {
  position: absolute;
  inset: 3px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--c-nevoa);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 250ms var(--e-traco) 80ms;
}
.nota__item label {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--c-tinta);
  -webkit-tap-highlight-color: transparent;
}
.nota__item input { z-index: 1; cursor: pointer; }
.nota__item input:checked ~ .nota__caixa { background: var(--c-roxo); border-color: var(--c-roxo); }
.nota__item input:checked ~ .nota__caixa svg { clip-path: inset(0 0 0 0); }
.nota__item input:checked ~ label .risco-fundo { background-size: 100% 0.5em; color: color-mix(in srgb, var(--c-texto-suave) 70%, transparent); }
.nota__item input:focus-visible ~ .nota__caixa { outline: 2px solid var(--c-acento); outline-offset: 3px; }
.nota__rodape {
  position: relative;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-linha);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-texto-suave);
  min-height: 3.6em;
}
.nota__rodape span { display: block; transition: opacity 300ms ease; }
.nota__rodape .nota__alivio { position: absolute; left: 0; right: 0; top: var(--s-4); opacity: 0; color: var(--c-roxo); font-weight: 500; }
.nota.toda-riscada .nota__contagem { opacity: 0; }
.nota.toda-riscada .nota__alivio { opacity: 1; }
.carga__legenda {
  max-width: 380px;
  margin: var(--s-6) auto 0;
  font-size: 0.875rem;
  color: var(--c-texto-claro-suave);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .js .nota__item { opacity: 0; transform: translateY(6px); }
  .js .nota.revelada .nota__item {
    opacity: 1;
    transform: none;
    transition: opacity 400ms ease, transform 400ms var(--e-saida);
    transition-delay: calc(var(--i) * 120ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nota__item .rasura, .nota__caixa svg { transition: none; }
}

/* ---------- 10. Interlúdio ---------- */
.interludio {
  padding-block: clamp(120px, 16vw, 240px);
  background: var(--c-nevoa);
}
.interludio__frase {
  font-family: var(--f-titulo);
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-tinta);
  max-width: 18ch;
  text-wrap: balance;
}
.interludio__frase .linha,
.interludio__frase .linha > span { display: inline; }
.interludio__resposta {
  margin-top: var(--s-6);
  margin-left: auto;
  text-align: right;
  font-family: var(--f-escrita);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--c-texto-suave);
}
@media (min-width: 900px) {
  .interludio__miolo { grid-column: 2 / span 10; }
  .interludio__frase .linha { display: block; }
  .interludio__frase .linha > span { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .interludio__frase { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--e-saida), transform 700ms var(--e-saida); }
  .js .interludio__frase.revelado { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .interludio__frase { opacity: 1; transform: none; transition: none; }
  .js .interludio__frase .linha > span { transform: translateY(105%); transition: transform 800ms var(--e-saida); transition-delay: calc(var(--i) * 90ms); }
  .js .interludio__frase.revelado .linha > span { transform: none; }
}

/* ---------- 11. Sobre ---------- */
.sobre {
  padding-block: clamp(96px, 12vw, 176px);
  background: var(--g-luz);
}
.sobre__foto-area { position: relative; max-width: 460px; margin-inline: auto; }
.sobre__eco {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--c-roxo-claro) 45%, transparent);
  border-radius: var(--r-lg);
  transform: translate(-18px, 18px);
}
.foto--sobre { border-radius: var(--r-lg); box-shadow: var(--sombra-suave); }
.foto--sobre img { object-position: 50% 30%; }
.sobre__titulo {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: -32px auto 0;
  padding: 20px 28px;
  background: var(--c-nevoa);
  border-radius: var(--r-md);
}
.sobre__texto { margin-top: var(--s-7); }
.sobre__texto > p + p { margin-top: var(--s-4); }
.sobre__texto > p:first-child { font-size: var(--t-lead); line-height: 1.6; }
.sobre__assinatura { margin-top: var(--s-6); width: auto; height: 48px; color: var(--c-roxo); }
.credenciais {
  margin-top: 40px;
  border-top: 1px solid var(--c-linha);
}
.credenciais div {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-linha);
}
.credenciais dt { font-weight: 500; font-size: 0.875rem; color: var(--c-texto-suave); }
.credenciais dd { color: var(--c-tinta); }
.sobre__acao { margin-top: var(--s-7); }
@media (min-width: 640px) {
  .credenciais div { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-4); align-items: baseline; }
}
@media (min-width: 900px) {
  .sobre__grade { grid-template-rows: auto 1fr; align-items: start; }
  .sobre__foto-area { grid-column: 1 / span 6; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .sobre__titulo {
    grid-column: 5 / -1;
    grid-row: 1;
    margin: clamp(48px, 7vw, 96px) 0 0;
    justify-self: start;
    max-width: min(100%, 10em);
    padding: 24px 32px;
    box-shadow: var(--sombra-suave);
  }
  .sobre__texto { grid-column: 7 / -1; grid-row: 2; margin-top: var(--s-7); padding-left: var(--s-4); }
}

/* ---------- 12. Como funciona ---------- */
.como {
  padding-block: clamp(80px, 10vw, 144px);
  background: var(--c-nevoa);
}
.como__topo p { margin-top: var(--s-5); color: var(--c-texto-suave); }
@media (min-width: 900px) {
  .como__topo { align-items: end; }
  .como__topo h2 { grid-column: 1 / span 7; }
  .como__topo p { grid-column: 9 / -1; margin-top: 0; }
}
.passos { position: relative; margin-top: var(--s-8); }
.passos__linha { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke: var(--c-roxo-claro); stroke-width: 1.5; stroke-linecap: round; }
.passos ol { position: relative; display: grid; gap: var(--s-7); }
.passo__numero {
  display: inline-block;
  font-family: var(--f-titulo);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-roxo);
  background: var(--c-nevoa);
}
.passo h3 { margin-top: var(--s-4); color: var(--c-tinta); }
.passo p { margin-top: var(--s-2); color: var(--c-texto-suave); }

/* Mobile: linha vertical à esquerda */
@media (max-width: 899.98px) {
  .passos__linha--h { display: none; }
  .passos__linha--v { left: 22px; top: 8px; bottom: 8px; width: 16px; height: calc(100% - 16px); }
  .passos ol { padding-left: 0; }
  .passo { display: grid; grid-template-columns: 60px 1fr; column-gap: var(--s-4); }
  .passo__numero { grid-row: 1 / span 2; justify-self: center; align-self: start; padding: 6px 4px; text-align: center; min-width: 48px; }
  .passo h3 { margin-top: 6px; }
}
/* Desktop: linha horizontal atravessando os números */
@media (min-width: 900px) {
  .passos__linha--v { display: none; }
  .passos__linha--h { left: 0; top: 0; width: 100%; height: 80px; }
  .passos ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .passo:nth-child(1) { margin-top: 0; }
  .passo:nth-child(2) { margin-top: 24px; }
  .passo:nth-child(3) { margin-top: 8px; }
  .passo:nth-child(4) { margin-top: 32px; }
  .passo__numero { padding: 0 14px 0 10px; margin-left: -10px; }
  .passo p { max-width: 30ch; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .passos__linha { clip-path: inset(0 100% 0 0); }
  .js .passos__linha--v { clip-path: inset(0 0 100% 0); }
  .js .passos.revelado .passos__linha { clip-path: inset(-10% -1% -10% -1%); transition: clip-path 1400ms var(--e-traco); }
}

.praticas {
  margin-top: 80px;
  display: grid;
  gap: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-linha);
}
.praticas p { margin-top: var(--s-3); color: var(--c-texto-suave); }
.praticas .praticas__nota { font-size: var(--t-pequeno); }
@media (min-width: 900px) {
  .praticas { grid-template-columns: 1fr 1fr; gap: 0; }
  .praticas > div { padding-right: var(--s-8); }
  .praticas > div + div { padding-right: 0; padding-left: var(--s-8); border-left: 1px solid var(--c-linha); }
}

/* ---------- 13. Dúvidas ---------- */
.duvidas {
  padding-block: clamp(96px, 11vw, 160px);
  background: var(--c-lilas);
}
.duvidas__lado p { margin-top: var(--s-5); color: var(--c-texto-suave); }
.duvidas__lado .link-texto { display: inline-block; margin-top: var(--s-4); }
.acordeao { margin-top: var(--s-7); border-top: 1px solid var(--c-linha); }
@media (min-width: 900px) {
  .duvidas__grade { align-items: start; }
  .duvidas__lado { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); }
  .acordeao { grid-column: 6 / -1; margin-top: 0; }
}
.pergunta { border-bottom: 1px solid var(--c-linha); }
.pergunta summary {
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding: 24px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--c-tinta);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::marker { content: ""; }
.pergunta summary:hover { color: var(--c-roxo); }
.pergunta__icone { position: relative; flex: none; width: 20px; height: 20px; color: var(--c-roxo); transition: transform 300ms var(--e-saida); }
.pergunta__icone::before,
.pergunta__icone::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background: currentColor;
}
.pergunta__icone::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__icone { transform: rotate(45deg); }
.pergunta__resposta { overflow: hidden; }
.pergunta__resposta p { max-width: 60ch; padding-bottom: 24px; color: var(--c-texto-suave); }
@media (prefers-reduced-motion: reduce) {
  .pergunta__icone, .frase__mais { transition: none; }
}

/* ---------- 14. Contato ---------- */
.contato {
  position: relative;
  overflow: clip;
  padding-block: clamp(96px, 12vw, 176px);
  background: var(--g-noite);
  color: var(--c-texto-claro);
  text-align: center;
}
.contato__brilho {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40% 35% at 70% 30%, rgba(154, 91, 163, 0.28), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .contato__brilho { animation: deriva 40s ease-in-out infinite alternate; }
}
.contato__miolo { max-width: 600px; margin-inline: auto; }
.contato h2 { color: var(--c-texto-claro); }
.contato__lead { margin: var(--s-5) auto 0; color: var(--c-texto-claro-suave); max-width: 48ch; }
.contato__lead .chave { position: relative; display: inline; color: var(--c-texto-claro); }
.contato__lead .sublinhado { bottom: -0.35em; }
.formulario {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-5);
  text-align: left;
}
.campo { display: grid; gap: var(--s-2); }
.campo label,
.campo legend { font-weight: 500; font-size: 0.9375rem; color: var(--c-texto-claro); }
.campo .opcional { font-weight: 400; color: var(--c-texto-claro-suave); }
.campo input[type="text"],
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(246, 238, 248, 0.32);
  border-radius: var(--r-sm);
  background: rgba(246, 238, 248, 0.06);
  color: var(--c-texto-claro);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(216, 196, 221, 0.75); }
.campo input:hover, .campo textarea:hover { border-color: rgba(246, 238, 248, 0.5); }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--c-texto-claro);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(246, 238, 248, 0.1);
}
.campo__erro { font-size: 0.875rem; color: #FFC9DA; }
.campo__erro:empty { display: none; }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: var(--s-2); }
.pilulas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pilula { position: relative; }
.pilula input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pilula span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(246, 238, 248, 0.32);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  color: var(--c-texto-claro);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pilula:hover span { border-color: rgba(246, 238, 248, 0.6); }
.pilula input:checked + span { background: var(--c-nevoa); border-color: var(--c-nevoa); color: var(--c-roxo-escuro); }
.pilula input:focus-visible + span { outline: 2px solid var(--c-texto-claro); outline-offset: 3px; }
.formulario .botao { width: 100%; margin-top: var(--s-2); }
.formulario__privacidade { font-size: 0.875rem; color: var(--c-texto-claro-suave); text-align: center; margin-inline: auto; }
.formulario__privacidade .icone { display: inline-block; width: 16px; height: 16px; margin: -3px 6px 0 0; vertical-align: middle; }
.contato__outros {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-linha-clara);
  font-size: 0.9375rem;
  color: var(--c-texto-claro-suave);
}
.contato__outros ul { margin-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.contato__outros a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.contato__outros .icone { width: 18px; height: 18px; color: var(--c-texto-claro-suave); }
.contato__outros a { color: var(--c-texto-claro); text-underline-offset: 0.3em; text-decoration-thickness: 1px; text-decoration-color: rgba(246, 238, 248, 0.4); }
.contato__outros a:hover { text-decoration-color: var(--c-acento); }

/* ---------- 15. Rodapé ---------- */
.rodape {
  padding-block: clamp(64px, 8vw, 96px) var(--s-6);
  background: var(--c-roxo-noite);
  color: var(--c-texto-claro-suave);
  font-size: 0.9375rem;
}
.rodape .marca { font-size: 18px; color: var(--c-texto-claro); }
.rodape .marca:hover { text-decoration: none; }
.rodape__grade { display: grid; gap: var(--s-7); }
.rodape__sobre p { margin-top: var(--s-4); max-width: 34ch; }
.rodape h2 {
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--c-texto-claro);
}
.rodape ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.rodape a { color: var(--c-texto-claro-suave); text-decoration: none; }
.rodape a:hover { color: var(--c-texto-claro); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--c-acento); }
.rodape__aviso {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--c-linha-clara);
  border-radius: var(--r-md);
  max-width: none;
}
.rodape__aviso strong { color: var(--c-texto-claro); font-weight: 600; }
.rodape__base {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-linha-clara);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.875rem;
}
@media (min-width: 900px) {
  .rodape__grade { grid-template-columns: 5fr 3fr 4fr; }
}

/* ---------- 16. Botão flutuante ---------- */
.flutuante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-roxo);
  color: var(--c-texto-claro);
  box-shadow: 0 0 0 1px rgba(246, 238, 248, 0.35), var(--sombra-flutuante);
  text-decoration: none;
  transition: opacity 300ms ease, transform 300ms var(--e-saida), background-color 200ms ease, visibility 0s linear 300ms;
}
.flutuante:hover { background: var(--c-roxo-escuro); }
.flutuante svg { width: 26px; height: 26px; }
.flutuante:focus-visible { outline-offset: 4px; }
.js .flutuante { opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; }
.js .flutuante.visivel {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, transform 300ms var(--e-saida), background-color 200ms ease, visibility 0s;
}
.menu-aberto .flutuante { opacity: 0 !important; visibility: hidden !important; }
@media (min-width: 1024px) {
  .flutuante { right: 28px; bottom: 28px; width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}