/* =========================================================
   FORÇA TEM FORMA — folha de estilos
   Mobile first. Sem frameworks.

   ÍNDICE
   01. Tokens (cores, fontes, escala, ritmo de respiração)
   02. Reset e base
   03. Utilitários (container, kicker, botões, ícones, revelação)
   04. Cursor personalizado
   05. Header e menu mobile
   06. Hero (capa de revista)
   07. Faixa editorial
   08. Sobre + linha do tempo
   09. Método + mapa anatômico
   10. Para quem é
   11. Planos presenciais (etiquetas de ateliê)
   12. Consultoria online
   13. Comparativo
   14. Quiz
   15. Resultados e depoimentos
   16. Conteúdo / Instagram / isca digital
   17. FAQ
   18. Contato e formulários
   19. Footer
   20. WhatsApp flutuante e banner de cookies
   20b. Página legal
   21. Animações (keyframes)
   22. Movimento reduzido
   ========================================================= */


/* =========================================================
   01. TOKENS
   ========================================================= */
:root {
  /* Paleta da marca */
  --c-sand: #ECE9E3;            /* fundo principal: cinza-osso */
  --c-sand-2: #E0DCD4;          /* um tom abaixo (cartões) */
  --c-paper: #F7F6F2;           /* "papel" claro */
  --c-accent: #DC1820;          /* vermelho da logo: títulos grandes, formas, detalhes */
  --c-accent-ink: #B5121A;      /* vermelho escurecido: texto pequeno e botões (contraste AA) */
  --c-accent-light: #FF5A5F;    /* vermelho claro: destaques sobre o grafite */
  --c-accent-soft: #EBD3D1;     /* vermelho lavado: detalhes pequenos */
  --c-stone: #D5D0C6;           /* pedra: fundos neutros */
  --c-graphite: #24241F;            /* grafite: títulos e seções escuras */
  --c-graphite-2: #181815;          /* grafite profundo */
  --c-olive: #8A8F6A;           /* apoio: linhas, guias */
  --c-olive-ink: #5E6345;       /* oliva escurecida para texto */
  --c-olive-soft: #D6D6C4;      /* oliva lavada: fundos */
  --c-ink: #1C1B18;             /* texto */
  --c-ink-soft: #55524B;        /* texto secundário */
  --c-line: rgba(28, 27, 24, .16);
  --c-error: #A3292B;

  /* Tipografia */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.07rem + .4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.6vw, 4.75rem);

  /* Espaço */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --header-h: 72px;

  /* Movimento: tudo segue o ritmo de uma respiração lenta */
  --breath: 8s;                                   /* 4s inspira + 4s expira */
  --ease-breath: cubic-bezier(.45, .05, .35, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-wave: cubic-bezier(.76, 0, .24, 1);

  /* Textura de papel (ruído SVG) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}


/* =========================================================
   02. RESET E BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--c-sand);
  background-image: var(--grain);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

/* Nada de rolagem lateral: blobs e faixas que vazam são recortados (sem quebrar o sticky) */
main { overflow-x: clip; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 82%;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-graphite);
  text-wrap: balance;
}
h1 em, h2 em {
  font-style: normal;
  color: var(--c-accent); /* só em títulos grandes: contraste ok para texto grande */
}

::selection { background: var(--c-accent); color: var(--c-paper); }

:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus { outline: none; }

[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.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;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 400;
  padding: .75rem 1rem; border-radius: 6px;
  background: var(--c-graphite); color: var(--c-paper);
  font-weight: 600; text-decoration: none;
  translate: 0 -200%;
  transition: translate .3s var(--ease-out);
}
.skip-link:focus { translate: 0 0; }

.mono { font-family: var(--f-mono); font-weight: 400; }


/* =========================================================
   03. UTILITÁRIOS
   ========================================================= */
.container {
  width: min(100% - 2 * var(--gutter), 1280px);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), 980px); }

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
}

/* Numeração editorial: "03 — O Método" */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.kicker::before {
  content: "";
  width: 2rem; height: 1px;
  background: currentColor;
}
.kicker b { font-weight: 500; color: var(--c-graphite); }
.kicker--light { color: var(--c-accent-light); }
.kicker--light b { color: var(--c-paper); }

.h2 {
  font-size: var(--step-4);
  font-weight: 780;
  font-stretch: 76%;
  line-height: .95;
  letter-spacing: -.01em;
}

.section-head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head--split { align-items: end; }
.section-head--split > div { display: grid; gap: 1.1rem; }
.section-head--split > .link-arrow { justify-self: start; }
.section-head--center { justify-items: center; text-align: center; }
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.15fr .85fr;
    gap: 4rem;
  }
}
.section-intro {
  margin: 0;
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--c-ink-soft);
}

.lead { font-size: var(--step-1); line-height: 1.5; }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .9em 1.6em;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color .5s var(--ease-out),
    color .5s var(--ease-out),
    border-color .5s var(--ease-out),
    transform .9s var(--ease-breath);
}
.btn:hover { transform: scale(1.035); }          /* "inspira" devagar */
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--c-accent-ink); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-graphite); }
.btn--ghost { border-color: currentColor; color: var(--c-graphite); background: transparent; }
.btn--ghost:hover { background: var(--c-graphite); border-color: var(--c-graphite); color: var(--c-paper); }
.btn--light { background: var(--c-paper); color: var(--c-graphite); }
.btn--light:hover { background: var(--c-accent-light); color: var(--c-graphite); }
.btn--sm { min-height: 42px; padding: .7em 1.2em; font-size: .88rem; }
.btn--block { width: 100%; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--c-graphite);
  font-weight: 650;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
}
.link-arrow .icon:last-child { transition: translate .7s var(--ease-breath); }
.link-arrow:hover .icon:last-child { translate: 5px 0; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* Molduras de foto: tratamento quente + grão */
.photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-sand-2);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.14) saturate(1.06) contrast(1.03);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-strong);
  mix-blend-mode: overlay;
  opacity: .45;
  pointer-events: none;
}

/* Círculos decorativos que "respiram" (no método, lembram o círculo vitruviano) */
.deco-blob {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  animation: breathe var(--breath) var(--ease-breath) infinite;
}

/* Revelação ao rolar (usa "translate" para não brigar com "transform"/"rotate") */
.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 1.1s var(--ease-out) var(--d, 0s),
    translate 1.3s var(--ease-out) var(--d, 0s),
    transform 1.2s var(--ease-breath),
    rotate 1.4s var(--ease-breath),
    background-color .8s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; translate: none; }


/* =========================================================
   04. CURSOR PERSONALIZADO (desktop com mouse)
   ========================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.cursor__dot {
  display: block;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--c-accent);
  transition: transform .6s var(--ease-out), background-color .4s, opacity .3s;
}
.has-cursor .cursor.is-visible { opacity: 1; }
.cursor.is-hover .cursor__dot { transform: scale(3.4); background: rgba(220, 24, 32, .22); }
.cursor.is-down .cursor__dot { transform: scale(.7); }
.cursor.is-text .cursor__dot { opacity: 0; }

.has-cursor,
.has-cursor * { cursor: none; }
.has-cursor input:not([type="checkbox"]):not([type="radio"]),
.has-cursor textarea { cursor: text; }
.has-cursor select { cursor: default; }


/* =========================================================
   05. HEADER E MENU MOBILE
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: background-color .6s, box-shadow .6s, backdrop-filter .6s;
}
.site-header.is-scrolled {
  background: rgba(243, 235, 224, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--c-line);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  line-height: 1;
  text-decoration: none;
  color: var(--c-graphite);
}
.logo__mark { width: auto; height: 38px; }
.logo__mark--escuro { display: none; }
.logo__text { display: flex; flex-direction: column; }
@media (min-width: 1080px) { .logo__mark { height: 44px; } }
.logo__name {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.logo__tag {
  margin-top: .3rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.nav { display: none; }
.nav ul { display: flex; gap: 1.75rem; list-style: none; padding: 0; }
.nav a {
  position: relative;
  font-size: .92rem;
  font-weight: 550;
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current="location"]::after { transform: scaleX(1); }

.header-cta { display: none; margin-left: auto; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-left: auto;
  padding: .5rem 0 .5rem .5rem;
  border: 0;
  background: none;
  color: var(--c-graphite);
  font-size: .9rem;
  font-weight: 650;
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 26px; height: 10px; }
.menu-toggle__icon span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 4px; transform: rotate(35deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 4px; transform: rotate(-35deg); }

@media (min-width: 560px) {
  .header-cta { display: inline-flex; }
  .menu-toggle { margin-left: .9rem; }
}
@media (min-width: 1080px) {
  .nav { display: block; margin-left: auto; }
  .header-cta { margin-left: 2.25rem; }
  .menu-toggle { display: none; }
}

/* Menu em tela cheia: abre com uma curva que escorre do topo */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 48;
  overflow-y: auto;
  background-color: var(--c-ink);
  background-image: var(--grain);
  color: var(--c-paper);
  visibility: hidden;
  clip-path: ellipse(160% 0% at 50% 0%);
  transition: clip-path 1s var(--ease-wave), visibility 0s linear 1s;
}
.mobile-menu.is-open {
  visibility: visible;
  clip-path: ellipse(160% 150% at 50% 0%);
  transition: clip-path 1s var(--ease-wave), visibility 0s;
}
.mobile-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding-block: calc(var(--header-h) + 1.5rem) max(2rem, env(safe-area-inset-bottom));
}
.mobile-menu__list { list-style: none; padding: 0; }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(250, 245, 238, .14);
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  font-weight: 780;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  translate: 0 22px;
  transition: opacity .6s var(--ease-out), translate .9s var(--ease-out);
}
.mobile-menu__list .mono { font-size: .72rem; color: var(--c-accent-light); letter-spacing: .1em; }
.mobile-menu.is-open .mobile-menu__list a { opacity: 1; translate: none; }
.mobile-menu.is-open li:nth-child(1) a { transition-delay: .25s; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: .31s; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: .37s; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: .43s; }
.mobile-menu.is-open li:nth-child(5) a { transition-delay: .49s; }
.mobile-menu.is-open li:nth-child(6) a { transition-delay: .55s; }
.mobile-menu__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mobile-menu__social {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: .85rem;
  text-decoration: none;
}
.menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .logo,
.menu-open .logo__tag,
.menu-open .menu-toggle { color: var(--c-paper); }
.menu-open .logo__mark--claro { display: none; }
.menu-open .logo__mark--escuro { display: block; }
.menu-open .header-cta { visibility: hidden; }
@media (min-width: 1080px) { .mobile-menu { display: none; } }


/* =========================================================
   06. HERO — capa de revista
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + 1rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: .9rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--c-line);
}
.hero__issue {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.hero__grid { display: grid; gap: 3rem; }

.hero__title {
  font-size: clamp(3.6rem, 19vw, 7rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: .86;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.hero__line { display: block; }
.hero__title em { display: inline-block; }
.hero__line--sub {
  margin-top: .55em;
  font-size: .3em;
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink);
}
.hero__lead {
  max-width: 36ch;
  margin: 1.75rem 0 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.hero__visual {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}
/* Foto em recorte reto com canto chanfrado e um bloco oliva deslocado atrás */
.hero__blob {
  position: absolute;
  inset: 6% -5% -4% 8%;
  z-index: -1;
  border-radius: 6px;
  background: var(--c-olive-soft);
}
.photo--hero {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

/* Anotações técnicas sobre a foto */
.annot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.annot path {
  fill: none;
  stroke: var(--c-paper);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 1.2px rgba(30, 26, 24, .55));
}
.annot circle { fill: var(--c-accent); stroke: var(--c-paper); stroke-width: 1.5; }
.annot text {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  fill: var(--c-ink);
  stroke: var(--c-paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.js .annot path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.js .annot circle,
.js .annot text { opacity: 0; transition: opacity 1s var(--ease-out); }
.js .hero__visual.is-in .annot path { stroke-dashoffset: 0; }
.js .hero__visual.is-in .annot circle,
.js .hero__visual.is-in .annot text { opacity: 1; }
.annot__item:nth-child(1) * { transition-delay: .9s; }
.annot__item:nth-child(2) * { transition-delay: 1.15s; }
.annot__item:nth-child(3) * { transition-delay: 1.4s; }
.annot__item:nth-child(4) * { transition-delay: 1.65s; }
.annot__item text { transition-delay: inherit; }

/* Chamadas de capa */
.coverlines {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .5rem;
  justify-items: start;
  margin: -2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.coverline {
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: 17rem;
  padding: .6rem .95rem;
  border-radius: 6px;
  background: var(--c-paper);
  box-shadow: 0 14px 30px -14px rgba(28, 27, 24, .38);
  font-size: .84rem;
  line-height: 1.25;
}
.coverline--2 { margin-left: 2.5rem; }
.coverline--3 { margin-left: 1rem; }
.coverline__num {
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
  color: var(--c-accent-ink);
}
.coverline__kicker {
  flex: none;
  padding: .28rem .55rem;
  border-radius: 3px;
  background: var(--c-graphite);
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.coverline em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-graphite);
}

/* Indicador de respiração */
.breath {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.breath__circle {
  width: 14px; height: 14px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  animation: breathCircle var(--breath) var(--ease-breath) infinite;
}
.breath__words { display: inline-grid; }
.breath__words span { grid-area: 1 / 1; animation: wordIn var(--breath) linear infinite; }
.breath__words span:last-child { opacity: 0; animation-name: wordOut; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .hero__title { font-size: clamp(5.5rem, 10.6vw, 10.5rem); }
  .hero__visual { width: 100%; max-width: 470px; justify-self: end; margin: 0 4% 0 0; }

  .coverlines { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
  .coverline {
    position: absolute;
    pointer-events: auto;
    margin: 0;
  }
  .coverline--1 { top: 6%; left: -17%; flex-direction: column; align-items: flex-start; gap: .25rem; }
  .coverline--2 { top: 45%; left: -24%; }
  .coverline--3 { bottom: 8%; left: -12%; }
  .coverline--2, .coverline--3 { margin-left: 0; }
}


/* =========================================================
   07. FAIXA EDITORIAL (marquee lento)
   ========================================================= */
.band {
  position: relative;
  z-index: 2;
  width: calc(100% + 6vw);
  margin-left: -3vw;
  padding: .85rem 0;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-paper);
  rotate: -1.6deg;
}
.band__track {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 70s linear infinite;
}
.band__track > * { padding-right: 1.6rem; }
.band i { font-style: normal; font-size: .55em; color: var(--c-accent-light); }


/* =========================================================
   08. SOBRE + LINHA DO TEMPO
   ========================================================= */
.about__grid { display: grid; gap: 3rem; }
.about__visual {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}
.photo--arch {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
}
.deco-blob--olive {               /* bloco reto deslocado, como a foto do hero */
  right: -7%;
  bottom: -5%;
  width: 82%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: var(--c-olive-soft);
  animation: none;
}
.about__caption {
  margin-top: .9rem;
  font-size: .72rem;
  color: var(--c-ink-soft);
}
.about__text .h2 { margin: 1.1rem 0 1.5rem; }

.pullquote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--c-accent);
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.15;
  color: var(--c-graphite);
}
.pullquote p { margin: 0; }

.credentials {
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.credentials li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .95rem;
}
.credentials .mono {
  padding-top: .2rem;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .about__visual { position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; }
  .credentials li { grid-template-columns: 8.5rem 1fr; }
}

.timeline {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) transparent;
}
.timeline__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  padding: 0;
  list-style: none;
}
.timeline__item { scroll-snap-align: start; }
.timeline__year {
  display: block;
  padding-bottom: .9rem;
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
  color: var(--c-graphite);
}
.timeline__item:last-child .timeline__year { color: var(--c-accent); }
.timeline__item p {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.5rem 0 0;
  border-top: 1px solid var(--c-line);
  font-size: .92rem;
  color: var(--c-ink-soft);
}
.timeline__item p::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-accent);
}


/* =========================================================
   09. MÉTODO + MAPA ANATÔMICO
   ========================================================= */
.pillars {
  display: grid;
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

/* Cartões "escultura": nichos em arco, como pedestais de museu */
.pillar {
  position: relative;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-paper);
  transition: transform 1.2s var(--ease-breath), background-color .8s var(--ease-out);
}
.pillar:hover { transform: translateY(-6px); background: var(--c-paper); border-color: var(--c-accent); }
.pillar__icon {
  width: 56px; height: 56px;
  margin: 0 0 1.1rem;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.pillar:hover .pillar__icon { animation: breathe 4s var(--ease-breath) infinite; }
.pillar__num {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--c-olive-ink);
}
.pillar__title { margin-bottom: .6rem; font-size: 1.75rem; }
.pillar p { margin: 0; font-size: .95rem; color: var(--c-ink-soft); }

.anatomy {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(4.5rem, 9vw, 7.5rem);
}
.deco-blob--anatomy {
  top: 4%;
  left: 50%;
  width: min(80%, 420px);
  translate: -50% 0;
  background: var(--c-stone);
  opacity: .7;
}
.anatomy__figure {
  position: relative;
  width: min(62%, 250px);
  aspect-ratio: 300 / 640;
  margin-inline: auto;
}
.croqui { width: 100%; height: 100%; overflow: visible; }
.croqui__guides line { stroke: var(--c-olive); stroke-width: .7; stroke-dasharray: 3 4; opacity: .7; }
.croqui__guides text { font-family: var(--f-mono); font-size: 9px; fill: var(--c-olive-ink); }
.croqui__body > * {
  fill: none;
  stroke: var(--c-graphite);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.croqui__body ellipse { fill: var(--c-paper); }
.croqui__details > * {
  fill: none;
  stroke: var(--c-olive-ink);
  stroke-width: .9;
  stroke-linecap: round;
  opacity: .75;
}
/* O croqui se "desenha" ao entrar na tela */
.js .croqui__body > *,
.js .croqui__details > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 3.2s var(--ease-out);
}
.js .croqui__details > * { transition-delay: 1.2s; }
.js .anatomy__figure.is-in .croqui__body > *,
.js .anatomy__figure.is-in .croqui__details > * { stroke-dashoffset: 0; }

.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hotspot::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: var(--c-accent);
  transition: transform .6s var(--ease-out), background-color .5s;
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  animation: ring var(--breath) var(--ease-breath) infinite;
}
.hotspot:nth-of-type(2)::after { animation-delay: -1.3s; }
.hotspot:nth-of-type(3)::after { animation-delay: -2.6s; }
.hotspot:nth-of-type(4)::after { animation-delay: -3.9s; }
.hotspot:nth-of-type(5)::after { animation-delay: -5.2s; }
.hotspot:nth-of-type(6)::after { animation-delay: -6.5s; }
.hotspot[aria-pressed="true"]::before { background: var(--c-graphite); transform: scale(1.35); }
.hotspot[aria-pressed="true"]::after { border-color: var(--c-graphite); }

.anatomy__panel { position: relative; max-width: 32rem; }
.anatomy__label {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-olive-ink);
}
.anatomy__detail { min-height: 12.5rem; margin-top: 1.25rem; }
.anatomy__detail.is-changing { animation: fadeSwap .8s var(--ease-out); }
.anatomy__index { font-size: .8rem; color: var(--c-accent-ink); }
.anatomy__title { margin: .4rem 0 .9rem; font-size: var(--step-3); font-weight: 780; font-stretch: 76%; }
.anatomy__detail p { font-size: 1.05rem; color: var(--c-ink-soft); }

@media (min-width: 640px) {
  .anatomy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
  .anatomy__figure { width: min(100%, 300px); }
  .deco-blob--anatomy { left: 20%; }
}


/* =========================================================
   10. PARA QUEM É
   ========================================================= */
.profiles {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .profiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .profiles { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.profile {
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: 2rem 1.75rem 1.6rem;
  border-radius: 8px;
  transition: transform 1.2s var(--ease-breath);
}
.profile:hover { transform: translateY(-5px); }

.profile__quote {
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 760;
  font-stretch: 80%;
  line-height: 1.05;
  color: var(--c-graphite);
}
.profile__answer { flex: 1; font-size: .95rem; color: var(--c-ink-soft); }
.profile__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .45rem;
  padding: .3rem 0;
  border-bottom: 1px solid currentColor;
  font-size: .9rem;
  color: var(--c-graphite);
  text-decoration: none;
}
.profile__link .icon { transition: translate .7s var(--ease-breath); }
.profile__link:hover .icon { translate: 5px 0; }

.profile--paper { background: var(--c-paper); border: 1px solid var(--c-line); }
.profile--olive { background: var(--c-olive-soft); }
.profile--stone { background: var(--c-stone); }
.profile--sand { background: var(--c-sand-2); }
.profile--dark { background: var(--c-graphite); }
.profile--dark .profile__quote,
.profile--dark .profile__link { color: var(--c-paper); }
.profile--dark .profile__answer { color: rgba(250, 245, 238, .8); }
.profile--note { border: 1px dashed var(--c-accent); background: transparent; }
.profile--note .profile__quote { color: var(--c-accent-ink); }


/* =========================================================
   11. PLANOS PRESENCIAIS — etiquetas de ateliê
   ========================================================= */
.period-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 30rem;
  margin: 1.5rem 0 0;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--c-sand-2);
}
.period-toggle label { position: relative; cursor: pointer; }
.period-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.period-toggle span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .45rem .5rem;
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.period-toggle small { font-family: var(--f-mono); font-size: .7rem; font-weight: 400; color: var(--c-accent-ink); }
.period-toggle input:checked + span { background: var(--c-graphite); color: var(--c-paper); }
.period-toggle input:checked + span small { color: var(--c-accent-light); }
.period-toggle input:focus-visible + span { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
@media (min-width: 520px) {
  .period-toggle span { flex-direction: row; gap: .4rem; }
}

.tags {
  display: grid;
  gap: 2.5rem 1.5rem;
  align-items: start;
  margin-top: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 900px) { .tags { grid-template-columns: repeat(3, 1fr); } }

.tag-wrap {
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 1rem);
  filter: drop-shadow(0 18px 28px rgba(28, 27, 24, .12)) drop-shadow(0 2px 3px rgba(30, 26, 24, .06));
}
.tag-wrap:hover { transform: translateY(-5px); }

.tag {
  position: relative;
  padding: 1.75rem 1.75rem 1.9rem;
  background: var(--c-paper);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.tag::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px solid var(--c-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
.is-highlight .tag::after { opacity: 1; }
.tag-wrap.is-highlight { animation: tagPulse 2.4s var(--ease-breath); }

.tag__hole {
  display: none;
  width: 14px; height: 14px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--c-sand);
  box-shadow: inset 0 1px 3px rgba(30, 26, 24, .35);
}
.tag__ref {
  margin-bottom: .35rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.tag__ref strong { font-weight: 500; }
.tag__name {
  margin-bottom: 1.1rem;
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 820;
  font-stretch: 74%;
  text-transform: uppercase;
}
.tag__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(30, 26, 24, .3);
}
.tag__old {
  width: 100%;
  font-size: .82rem;
  text-decoration: line-through;
  color: var(--c-ink-soft);
}
.tag__currency { align-self: flex-start; margin-top: .55rem; font-weight: 650; }
.tag__amount {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 7vw, 4.6rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
  transition: opacity .35s;
}
.tag__amount.is-changing { opacity: 0; }
.tag__per { color: var(--c-ink-soft); }
.tag__billing {
  min-height: 2.6em;
  margin: .45rem 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(30, 26, 24, .3);
  font-size: .72rem;
  color: var(--c-ink-soft);
}
.tag__section {
  margin-bottom: .4rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tag__list { margin-bottom: 1.25rem; padding: 0; list-style: none; }
.tag__list li {
  position: relative;
  padding: .5rem 0 .5rem 1.4rem;
  border-bottom: 1px solid var(--c-line);
  font-size: .95rem;
}
.tag__list li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent-ink); }
.tag__care { margin-bottom: 1.5rem; font-size: .88rem; color: var(--c-ink-soft); }
.tag__care .mono { font-size: .66rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

.tag--dark { background: var(--c-graphite); color: var(--c-paper); }
.tag--dark .tag__name { color: var(--c-paper); }
.tag--dark .tag__ref,
.tag--dark .tag__list li::before { color: var(--c-accent-light); }
.tag--dark .tag__per,
.tag--dark .tag__old,
.tag--dark .tag__billing,
.tag--dark .tag__care { color: rgba(250, 245, 238, .78); }
.tag--dark .tag__price,
.tag--dark .tag__billing { border-color: rgba(250, 245, 238, .3); }
.tag--dark .tag__list li { border-color: rgba(250, 245, 238, .16); }
.tag--dark .tag__hole { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.tag--dark::after { border-color: var(--c-accent-light); }

.tag--olive { background: var(--c-olive-soft); }
.tag--olive .tag__ref,
.tag--olive .tag__list li::before { color: var(--c-olive-ink); }

/* Selo "mais escolhido" */
.tag__badge {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .3rem .6rem;
  border-radius: 3px;
  background: var(--c-accent-light);
  color: var(--c-graphite);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .tag-wrap--featured { margin-top: -1.5rem; }
}

/* Etiquetas bordadas: aula avulsa e dupla */
.labels {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 900px) { .labels { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.6rem 1.75rem;
  border-radius: 8px;
  background: var(--c-sand-2);
}
.label--duo { background: var(--c-olive-soft); }
.label__ref { margin-bottom: .2rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-ink); }
.label__name { margin-bottom: .35rem; font-size: 1.7rem; font-weight: 780; font-stretch: 78%; }
.label__desc { margin: 0; font-size: .92rem; color: var(--c-ink-soft); }
.label__price { margin: 0; text-align: right; }
.label__price .mono { display: block; font-family: var(--f-display); font-size: 2.6rem; font-weight: 820; font-stretch: 72%; line-height: 1; color: var(--c-graphite); }
.label__price small { font-size: .78rem; color: var(--c-ink-soft); }
.label > .btn { grid-column: 1 / -1; justify-self: start; }


/* =========================================================
   12. CONSULTORIA ONLINE — outro universo (vinho)
   ========================================================= */
.online {
  margin-block: clamp(40px, 6vw, 90px);
  background-color: var(--c-graphite);
  color: var(--c-paper);
}
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  fill: var(--c-graphite);
}
.wave--top { bottom: calc(100% - 1px); }
.wave--bottom { top: calc(100% - 1px); }
.online .h2 { color: var(--c-paper); }
.online .h2 em { color: var(--c-accent-light); }
.online .section-intro { color: rgba(250, 245, 238, .8); }

.online__grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) {
  .online__grid { grid-template-columns: 1.1fr .9fr; gap: 5rem; }
}

/* Linha do tempo vertical que se preenche com a rolagem */
.steps {
  --progress: 0;
  position: relative;
  padding: 0 0 0 3.6rem;
  list-style: none;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: .5rem;
  bottom: 2.5rem;
  width: 1px;
  background: rgba(250, 245, 238, .2);
}
.steps::after {
  background: var(--c-accent-light);
  transform-origin: top;
  transform: scaleY(var(--progress));
}
.step { position: relative; padding-bottom: 2.4rem; }
.step:last-child { padding-bottom: 0; }
.step__num {
  position: absolute;
  top: -.1rem;
  left: -3.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(250, 245, 238, .35);
  border-radius: 50%;
  background: var(--c-graphite);
  font-size: .76rem;
  transition: background-color .8s var(--ease-out), color .8s, border-color .8s, transform .8s var(--ease-breath);
}
.step.is-active .step__num {
  border-color: transparent;
  background: var(--c-accent-light);
  color: var(--c-graphite);
  transform: scale(1.08);
}
.step__title { margin-bottom: .5rem; font-size: var(--step-2); color: var(--c-paper); }
.step p { max-width: 42ch; margin: 0; color: rgba(250, 245, 238, .78); }

/* Mockup de celular */
.phone-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem 0;
}
@media (min-width: 900px) {
  .phone-wrap { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.deco-blob--light {
  width: min(95%, 380px);
  background: var(--c-accent);
  opacity: .55;
}
.phone {
  position: relative;
  width: min(280px, 78vw);
  aspect-ratio: 9 / 19;
  padding: 10px;
  border-radius: 46px;
  background: #1E1A18;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .1);
  rotate: 3deg;
  animation: float 10s var(--ease-breath) infinite;
}
.phone__notch {
  position: absolute;
  top: 19px; left: 50%;
  z-index: 2;
  width: 80px; height: 22px;
  translate: -50% 0;
  border-radius: 20px;
  background: #1E1A18;
}
.phone__screen {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  height: 100%;
  padding: 3rem .95rem 1rem;
  overflow: hidden;
  border-radius: 37px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: .8rem;
  line-height: 1.3;
}
.app__top .mono { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-olive-ink); }
.app__hello { display: block; margin-top: .2rem; font-family: var(--f-display); font-size: 1.4rem; font-weight: 780; font-stretch: 78%; color: var(--c-graphite); }
.app__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem .9rem;
  border-radius: 18px;
  background: var(--c-graphite);
  color: var(--c-paper);
}
.app__small { display: block; font-size: .6rem; opacity: .75; }
.app__title { display: block; margin: .2rem 0; font-size: .86rem; }
.app__ring { width: 46px; height: 46px; flex: none; rotate: -90deg; }
.app__ring circle { fill: none; stroke: rgba(250, 245, 238, .22); stroke-width: 4; }
.app__ring .app__ring-fill { stroke: var(--c-accent-light); stroke-dasharray: 50 100; stroke-linecap: round; }
.app__ring text { rotate: 90deg; transform-origin: 22px 22px; font-family: var(--f-mono); font-size: 10px; fill: var(--c-paper); stroke: none; }
.app__list { padding: 0; list-style: none; }
.app__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
}
.app__list small { display: block; font-size: .62rem; font-weight: 400; color: var(--c-ink-soft); }
.app__list li.is-done > span:last-child { opacity: .55; }
.app__check,
.app__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
}
.app__check svg, .app__play svg { width: 13px; height: 13px; }
.is-done .app__check { border-color: transparent; background: var(--c-olive); color: var(--c-paper); }
.app__play { border-color: transparent; background: var(--c-accent-ink); color: var(--c-paper); animation: breathe 4s var(--ease-breath) infinite; }
.app__btn {
  margin-top: auto;
  padding: .75rem;
  border-radius: 999px;
  background: var(--c-accent-ink);
  color: var(--c-paper);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

/* Planos online */
.online-plans {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
@media (min-width: 900px) { .online-plans { grid-template-columns: repeat(3, 1fr); } }
.oplan {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.6rem;
  border: 1px solid rgba(250, 245, 238, .22);
  border-radius: 10px;
  background: rgba(250, 245, 238, .04);
  transition: transform 1.2s var(--ease-breath), background-color .8s var(--ease-out);
}
.oplan:hover { transform: translateY(-6px); background-color: rgba(250, 245, 238, .08); }
.oplan__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.oplan__save {
  padding: .25rem .6rem;
  border-radius: 3px;
  background: var(--c-accent-light);
  color: var(--c-graphite);
  font-size: .66rem;
  letter-spacing: .04em;
}
.oplan__save:empty { display: none; }
.oplan__price { display: flex; align-items: baseline; gap: .3rem; margin: 0; }
.oplan__currency { align-self: flex-start; margin-top: .55rem; font-weight: 650; }
.oplan__price .mono { font-family: var(--f-display); font-size: clamp(3.6rem, 7vw, 4.4rem); font-weight: 820; font-stretch: 72%; line-height: 1; }
.oplan__note { margin: .4rem 0 1.25rem; font-size: .76rem; opacity: .78; }
.oplan__list { flex: 1; margin-bottom: 1.5rem; padding: 0; list-style: none; }
.oplan__list li {
  position: relative;
  padding: .55rem 0 .55rem 1.4rem;
  border-top: 1px solid rgba(250, 245, 238, .14);
  font-size: .95rem;
}
.oplan__list li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent-light); }
.oplan__doubt { display: block; margin-top: .9rem; font-size: .88rem; text-align: center; }
.oplan--featured { border-color: transparent; background: var(--c-paper); color: var(--c-ink); }
.oplan--featured:hover { background: #fff; }
.oplan--featured .oplan__save { background: var(--c-accent-ink); color: var(--c-paper); }
.oplan--featured .oplan__list li { border-color: var(--c-line); }
.oplan--featured .oplan__list li::before { color: var(--c-accent-ink); }
.online-plans.is-highlight .oplan { animation: glowOnline 2.4s var(--ease-breath); }
.online__secure { margin: 2rem 0 0; font-size: .74rem; text-align: center; opacity: .75; }


/* =========================================================
   13. COMPARATIVO
   ========================================================= */
.compare__table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.compare__table thead th {
  padding: 0 1rem 1.1rem;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 400;
  text-align: left;
  color: var(--c-graphite);
}
.compare__table thead th:last-child { color: var(--c-accent-ink); }
.compare__table tbody th {
  width: 26%;
  padding: 1.15rem 1rem 1.15rem 0;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
  color: var(--c-ink-soft);
}
.compare__table td {
  padding: 1.15rem 1rem;
  border-top: 1px solid var(--c-line);
  vertical-align: top;
}
.compare__table td:last-child,
.compare__table thead th:last-child { background: rgba(220, 24, 32, .07); }
.compare__table thead th:last-child { border-radius: 8px 8px 0 0; padding-top: 1rem; }
.compare__table tbody tr:last-child td:last-child { border-radius: 0 0 8px 8px; }
.compare__price td { font-weight: 600; }
.compare__price .mono { font-family: var(--f-display); font-size: 1.9rem; font-weight: 820; font-stretch: 72%; color: var(--c-graphite); }
.compare__table tbody tr { transition: background-color .5s; }
.compare__table tbody tr:hover { background: rgba(250, 245, 238, .7); }

/* No celular cada critério vira uma linha com duas colunas embaixo */
@media (max-width: 640px) {
  .compare__table thead tr,
  .compare__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare__table thead th:first-child { display: none; }
  .compare__table thead th { padding: 0 .75rem .9rem; }
  .compare__table thead th:last-child { padding-top: .75rem; }
  .compare__table tbody th { grid-column: 1 / -1; width: auto; padding: 1rem 0 .3rem; }
  .compare__table td { padding: .2rem .75rem 1rem; border-top: 0; font-size: .92rem; }
  .compare__table td:first-of-type { padding-left: .75rem; }
}


/* =========================================================
   14. QUIZ
   ========================================================= */
.quiz .container {
  position: relative;
  isolation: isolate;
  padding: clamp(1.25rem, 5vw, 4.5rem);
  border-radius: 12px;
  background: var(--c-olive-soft);
}
.quiz__grid { display: grid; gap: 2.5rem; align-items: center; }
.quiz__intro { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .quiz__grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }

.quiz__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 31rem;
  padding: clamp(1.4rem, 4vw, 2.75rem);
  border-radius: 10px;
  background: var(--c-paper);
  box-shadow: 0 30px 60px -30px rgba(28, 27, 24, .35);
}
.deco-blob--quiz {
  top: 4%;
  right: 1%;
  width: min(34%, 360px);
  background: var(--c-stone);
}
@media (max-width: 899px) { .deco-blob--quiz { display: none; } }
.quiz__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.quiz__progress { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--c-line); }
.quiz__progress span { display: block; width: 0; height: 100%; background: var(--c-accent); transition: width .9s var(--ease-out); }
.quiz__count { font-size: .76rem; color: var(--c-ink-soft); }
.quiz__stage { display: flex; flex: 1; }
.quiz__screen {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  animation: quizIn .8s var(--ease-out) both;
}
.quiz__screen.is-leaving { animation: quizOut .35s ease-in both; }
.quiz__screen > .btn { align-self: flex-start; margin-top: .5rem; }
.quiz__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-ink); }
.quiz__question { font-size: var(--step-2); line-height: 1.15; }
.quiz__options { display: grid; gap: .6rem; margin: .4rem 0 0; padding: 0; border: 0; }
.quiz__option {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: transparent;
  font-size: .97rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .4s, background-color .4s, color .4s, transform .7s var(--ease-breath);
}
.quiz__option:hover { border-color: var(--c-accent); background: var(--c-sand); transform: translateX(4px); }
.quiz__option[aria-pressed="true"] { border-color: var(--c-graphite); background: var(--c-graphite); color: var(--c-paper); }
.quiz__letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem; height: 2rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: .76rem;
  opacity: .8;
}
.quiz__back {
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  font-size: .88rem;
  color: var(--c-ink-soft);
  cursor: pointer;
}
.quiz__back:hover { color: var(--c-graphite); }
.quiz__result-plan {
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 820;
  font-stretch: 74%;
  line-height: .95;
  text-transform: uppercase;
  color: var(--c-graphite);
}
.quiz__result-type { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-olive-ink); }
.quiz__result-text { margin: 0; color: var(--c-ink-soft); }
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .4rem; }


/* =========================================================
   15. RESULTADOS E DEPOIMENTOS
   ========================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--c-line);
}
.stat { padding: 1.6rem .4rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--c-line); }
.stat__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 11vw, 6rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
  color: var(--c-graphite);
}
.stat__label { display: block; margin-top: .6rem; font-size: clamp(.74rem, 2.3vw, .92rem); line-height: 1.3; color: var(--c-ink-soft); }

/* Depoimentos como páginas de diário */
.letters__track {
  display: flex;
  gap: 1.5rem;
  /* sangra até a borda da tela, mas o 1º cartão alinha com o container */
  --bleed: max(var(--gutter), (100vw - 1280px) / 2);
  margin-inline: calc(-1 * var(--bleed));
  padding: 2rem var(--bleed) 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bleed);
  scrollbar-width: none;
}
.letters__track::-webkit-scrollbar { display: none; }
.letter {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 min(84vw, 370px);
  padding: 2rem 1.75rem 1.6rem;
  border-radius: 8px;
  background: var(--c-paper);
  box-shadow: 0 1px 0 var(--c-line), 0 18px 36px -28px rgba(28, 27, 24, .5);
  scroll-snap-align: start;
}
.letter::before {            /* aspas grandes */
  content: "\201C";
  position: absolute;
  top: .4rem; right: 1.25rem;
  font-family: var(--f-display);
  font-size: 5rem;
  font-weight: 820;
  line-height: 1;
  color: var(--c-accent);
  opacity: .35;
}
.letter__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.letter__head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: sepia(.14) saturate(1.06); }
.letter__name { margin: 0; font-size: .95rem; font-weight: 700; }
.letter__meta { margin: 0; font-size: .7rem; color: var(--c-ink-soft); }
.letter__quote {
  flex: 1;
  margin: 0 0 1.2rem;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-graphite);
}
.letter__quote p { margin: 0; }
.letter__win { margin: 0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }

.letters__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.letters__count { font-size: .8rem; color: var(--c-ink-soft); }
.round-btn {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--c-graphite);
  border-radius: 50%;
  background: transparent;
  color: var(--c-graphite);
  cursor: pointer;
  transition: background-color .5s, color .5s, opacity .5s, transform .9s var(--ease-breath);
}
.round-btn:hover:not(:disabled) { background: var(--c-graphite); color: var(--c-paper); transform: scale(1.06); }
.round-btn:disabled { opacity: .3; cursor: default; }
.round-btn--prev .icon { rotate: 180deg; }
.results__note { max-width: 60ch; margin: 2.5rem auto 0; font-size: .72rem; text-align: center; color: var(--c-ink-soft); }


/* =========================================================
   16. CONTEÚDO / INSTAGRAM / ISCA DIGITAL
   ========================================================= */
.posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .posts { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.post a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: clamp(.95rem, 2.5vw, 1.75rem);
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 1.2s var(--ease-breath);
}
.post a:hover { transform: scale(.975); }   /* "expira" */
.post a::after {
  content: "";
  position: absolute;
  right: -22%; bottom: -22%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .25;
  transition: transform 1.2s var(--ease-breath);
}
.post a:hover::after { transform: scale(1.25); }
.post__tag { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.post__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  font-weight: 780;
  font-stretch: 78%;
  line-height: 1.02;
}
.post__user { font-size: .66rem; opacity: .75; }
.post--dark a { background: var(--c-graphite); color: var(--c-paper); }
.post--sand a { background: var(--c-sand-2); color: var(--c-ink); }
.post--accent a { background: var(--c-accent-ink); color: var(--c-paper); }
.post--olive a { background: var(--c-olive-soft); color: var(--c-ink); }
.post--paper a { background: var(--c-paper); color: var(--c-graphite); box-shadow: inset 0 0 0 1px var(--c-line); }
.post--ink a { background: var(--c-ink); color: var(--c-paper); }
.post--olive .post__title,
.post--sand .post__title { color: var(--c-graphite); }

.lead-magnet {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-stone);
}
@media (min-width: 800px) { .lead-magnet { grid-template-columns: auto 1fr; gap: 3.5rem; } }
.booklet {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 170px;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  padding: 1.1rem 1rem 1rem 1.3rem;
  border-radius: 4px 14px 14px 4px;
  background-color: var(--c-graphite);
  background-image: var(--grain);
  color: var(--c-paper);
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .18), 16px 20px 30px -12px rgba(28, 27, 24, .5);
}
.booklet .mono { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.booklet .mono:last-child { margin-top: auto; }
.booklet strong { font-family: var(--f-display); font-size: 1.6rem; font-weight: 820; font-stretch: 74%; line-height: 1; text-transform: uppercase; }
.booklet__line { width: 40px; height: 1px; background: currentColor; opacity: .5; }
.lead-magnet__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-ink); }
.lead-magnet__title { margin: .3rem 0 .75rem; font-size: var(--step-3); font-weight: 780; font-stretch: 78%; }
.lead-form__row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .9rem; }
.lead-form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 48px;
  padding: .85rem 1.2rem;
  border: 1px solid rgba(28, 27, 24, .3);
  border-radius: 6px;
  background: var(--c-paper);
}
.lead-form input[type="email"]:focus { outline: 2px solid var(--c-accent-ink); outline-offset: 1px; }
.lead-form input[aria-invalid="true"] { border-color: var(--c-error); }


/* =========================================================
   17. FAQ
   ========================================================= */
.faq__grid { display: grid; gap: 2.5rem; }
.faq__head { display: grid; gap: 1.1rem; align-content: start; }
.faq__head p { margin: 0; color: var(--c-ink-soft); }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.faq__list { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.25;
  color: var(--c-graphite);
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background:
    linear-gradient(var(--c-graphite), var(--c-graphite)) center / 12px 1px no-repeat,
    linear-gradient(var(--c-graphite), var(--c-graphite)) center / 1px 12px no-repeat;
  transition: rotate .7s var(--ease-breath), border-color .5s;
}
.faq__item[open] summary::after { rotate: 45deg; border-color: var(--c-accent); }
.faq__item summary:hover::after { border-color: var(--c-accent); }
.faq__answer { overflow: hidden; }
.faq__answer p { max-width: 62ch; margin: 0; padding: 0 3rem 1.5rem 0; color: var(--c-ink-soft); }


/* =========================================================
   18. CONTATO E FORMULÁRIOS
   ========================================================= */
.contact { padding-bottom: calc(var(--section-y) + 1rem); }
.deco-blob--contact {
  top: 6%; right: -12%;
  width: min(60vw, 560px);
  background: var(--c-stone);
  opacity: .6;
}
.contact__grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: start; } }
.contact__title {
  margin: 1.1rem 0 2.5rem;
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: .9;
  text-transform: uppercase;
}
.contact__title em { display: block; margin-top: .1em; }
.contact__info { display: grid; gap: 1.25rem; margin-bottom: 2rem; padding: 0; list-style: none; }
.contact__info li { display: flex; align-items: flex-start; gap: 1rem; }
.contact__info .icon { width: 22px; height: 22px; margin-top: .2rem; color: var(--c-accent-ink); }
.contact__info .mono { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); }
.contact__info p { margin: 0; }
.contact__info a { font-size: 1.15rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid currentColor; }

.map {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-sand-2);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  text-align: center;
}
.map__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--c-olive); stroke-width: 1.2; opacity: .55; }
.map__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-accent-ink);
  color: var(--c-paper);
  animation: breathe var(--breath) var(--ease-breath) infinite;
}
.map__pin .icon { width: 22px; height: 22px; }
.map__placeholder .btn,
.map__hint { position: relative; }
.map__hint { margin: 0; font-size: .64rem; color: var(--c-ink-soft); }

.contact-form {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: 10px;
  background: var(--c-paper);
  box-shadow: 0 40px 80px -40px rgba(28, 27, 24, .35);
}
.contact-form__title { margin: 0; font-family: var(--f-display); font-size: var(--step-2); font-weight: 780; font-stretch: 80%; color: var(--c-graphite); }
.contact-form__sub { margin: -.7rem 0 .3rem; font-size: .9rem; color: var(--c-ink-soft); }

.field { display: grid; gap: .3rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label,
.field > legend {
  padding: 0;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 26, 24, .32);
  border-radius: 0;
  background: transparent;
  font-size: 1.05rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .4s, box-shadow .4s;
}
.field select {
  padding-right: 1.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2324241F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center no-repeat;
}
.field input:focus,
.field select:focus { outline: none; border-bottom-color: var(--c-accent-ink); box-shadow: 0 1px 0 var(--c-accent-ink); }
.field [aria-invalid="true"] { border-bottom-color: var(--c-error); }
.field__error { min-height: 0; margin: 0; font-size: .8rem; color: var(--c-error); }
.field__error:empty { display: none; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.pill { position: relative; }
.pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pill span {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid rgba(30, 26, 24, .25);
  border-radius: 6px;
  font-size: .92rem;
  transition: background-color .4s, color .4s, border-color .4s;
}
.pill input:checked + span { border-color: var(--c-graphite); background: var(--c-graphite); color: var(--c-paper); }
.pill input:focus-visible + span { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }

.check { display: flex; align-items: flex-start; gap: .7rem; font-size: .85rem; line-height: 1.5; color: var(--c-ink-soft); cursor: pointer; }
.check input {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px; height: 20px;
  margin: .1rem 0 0;
  border: 1px solid rgba(30, 26, 24, .45);
  border-radius: 6px;
  background: var(--c-paper);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.check input::after {
  content: "";
  width: 10px; height: 5px;
  translate: 0 -1px;
  rotate: -45deg;
  border-left: 2px solid var(--c-paper);
  border-bottom: 2px solid var(--c-paper);
  opacity: 0;
}
.check input:checked { border-color: var(--c-graphite); background: var(--c-graphite); }
.check input:checked::after { opacity: 1; }
.check input:disabled { opacity: .55; cursor: default; }
.check input[aria-invalid="true"] { border-color: var(--c-error); }

.form-msg { min-height: 1.2em; margin: 0; font-size: .9rem; }
.form-msg.is-ok { color: var(--c-olive-ink); }
.form-msg.is-error { color: var(--c-error); }


/* =========================================================
   19. FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0 calc(2rem + env(safe-area-inset-bottom));
  overflow: hidden;
  background-color: var(--c-ink);
  background-image: var(--grain);
  color: rgba(250, 245, 238, .82);
}
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer__mark { width: auto; height: 84px; margin-bottom: 1.25rem; }
.footer__logo { margin: 0; font-family: var(--f-display); font-size: 1.8rem; font-weight: 820; font-stretch: 74%; text-transform: uppercase; color: var(--c-paper); }
.footer__tagline { margin: .25rem 0 1.5rem; }
.footer__social { display: flex; gap: .6rem; padding: 0; list-style: none; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(250, 245, 238, .3);
  border-radius: 50%;
  color: var(--c-paper);
  transition: background-color .5s, color .5s;
}
.footer__social a:hover { background: var(--c-paper); color: var(--c-ink); }
.footer__social .icon { width: 20px; height: 20px; }
.footer__col > .mono { margin-bottom: 1rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-light); }
.footer__col ul { display: grid; gap: .6rem; padding: 0; list-style: none; }
.footer__col a,
.footer__col .link-btn { color: inherit; text-decoration: none; }
.footer__col a:hover,
.footer__col .link-btn:hover { color: var(--c-paper); text-decoration: underline; }
.footer__word {
  margin: 3rem 0 1.25rem;
  font-family: var(--f-display);
  font-size: clamp(6rem, 30vw, 24rem);
  font-weight: 820;
  font-stretch: 70%;
  line-height: .8;
  text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 245, 238, .28);
  user-select: none;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 245, 238, .15);
  font-size: .72rem;
}


/* =========================================================
   20. WHATSAPP FLUTUANTE E COOKIES
   ========================================================= */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--c-accent-ink);
  color: var(--c-paper);
  box-shadow: 0 14px 30px -8px rgba(28, 27, 24, .55);
  transition: bottom .6s var(--ease-out), transform .9s var(--ease-breath), opacity .4s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  animation: ring var(--breath) var(--ease-breath) infinite;
}
.wa-float__label {
  position: absolute;
  right: calc(100% + .75rem);
  padding: .45rem .85rem;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: 8px 0;
  pointer-events: none;
  transition: opacity .5s, translate .6s var(--ease-out);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { opacity: 1; translate: 0 0; }
.menu-open .wa-float { opacity: 0; pointer-events: none; }
@media (max-width: 639px) {
  .has-cookie .wa-float { bottom: calc(var(--cookie-h, 0px) + 1.75rem); }
}

.cookie {
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 45;
  max-width: 27rem;
  padding: 1.3rem 1.3rem 1.15rem;
  border-radius: 10px;
  background: var(--c-paper);
  box-shadow: 0 30px 60px -20px rgba(30, 26, 24, .4), 0 0 0 1px var(--c-line);
  animation: cookieIn 1s var(--ease-out) both;
}
.cookie[hidden] { display: none; }
@media (min-width: 640px) { .cookie { right: auto; bottom: 1.5rem; left: 1.5rem; } }
.cookie__title { margin: 0 0 .35rem; font-family: var(--f-display); font-size: 1.3rem; font-weight: 780; font-stretch: 80%; color: var(--c-graphite); }
.cookie__desc { margin: 0 0 1rem; font-size: .86rem; color: var(--c-ink-soft); }
.cookie__prefs { display: grid; gap: .6rem; margin-bottom: 1rem; }
.cookie__prefs[hidden] { display: none; }
.cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.cookie__actions .link-btn { font-size: .86rem; color: var(--c-graphite); }


/* =========================================================
   20b. PÁGINA LEGAL (política de privacidade)
   ========================================================= */
.legal { padding: calc(var(--header-h) + 3rem) 0 var(--section-y); }
.legal__title { margin: 1rem 0 .5rem; font-size: var(--step-4); font-weight: 820; font-stretch: 74%; text-transform: uppercase; }
.legal__updated { margin-bottom: 2.5rem; font-size: .72rem; color: var(--c-ink-soft); }
.legal h2 { margin: 2.75rem 0 .9rem; font-size: var(--step-2); }
.legal ul { margin-bottom: 1em; padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--c-accent-ink); }
.legal p, .legal li { max-width: 68ch; }
.legal__back { margin-left: auto; }
.site-footer--compact { padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); }
.site-footer--compact .footer__bottom { padding-top: 0; border-top: 0; }
.site-footer--compact a { color: inherit; }


/* =========================================================
   21. ANIMAÇÕES
   ========================================================= */
@keyframes breathe {           /* inspira (expande) e expira (contrai) */
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes ring {
  0%, 100% { transform: scale(.75); opacity: .9; }
  50% { transform: scale(1.4); opacity: .15; }
}
@keyframes breathCircle {
  0%, 100% { transform: scale(.8); background-color: transparent; }
  50% { transform: scale(1.9); background-color: rgba(220, 24, 32, .2); }
}
@keyframes wordIn  { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wordOut { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fadeSwap {
  from { opacity: 0; translate: 0 10px; filter: blur(3px); }
  to { opacity: 1; translate: none; filter: none; }
}
@keyframes quizIn {
  from { opacity: 0; translate: 0 18px; filter: blur(4px); }
  to { opacity: 1; translate: none; filter: none; }
}
@keyframes quizOut {
  to { opacity: 0; translate: 0 -12px; filter: blur(4px); }
}
@keyframes tagPulse {
  0%, 100% { scale: 1; }
  35% { scale: 1.035; }
  65% { scale: 1.015; }
}
@keyframes glowOnline {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30%, 70% { box-shadow: 0 0 0 2px var(--c-accent-light); }
}
@keyframes cookieIn {
  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: none; }
}


/* =========================================================
   22. MOVIMENTO REDUZIDO
   Quem pede menos movimento no sistema vê tudo estático.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .band__track { animation: none; }
}