/* ==========================================================================
   Micaela Rodrigues — Site
   --------------------------------------------------------------------------
   Todo o visual da home. Cores, fontes, espaços, raios e movimento vêm de
   tokens/tokens.css (cópia idêntica de 04-design-system/tokens.css).
   Valor novo se pede ao design system, não se inventa aqui.

   Peças reaproveitadas do design system (system.css 1.4.0): presets mr-*,
   revelar ao rolar, link-draw, chips, segmented, timeline, seal-badge,
   grafismos desenhados. Copiadas, não importadas: system.css traz também a
   vitrine do guia, que o site não usa.

   Ordem: base · utilidades · componentes do sistema · cabeçalho · hero ·
   números · sobre · frentes · trajetória · contato · rodapé · avisos ·
   responsivo · movimento.
   ========================================================================== */

/* ---------- base ---------- */
/* Formas de máscara embutidas: aberto como arquivo local (file://), o Chrome
   bloqueia mask-image vinda de outro arquivo, e o monograma e as estrelas
   sumiam. Fontes: assets/spark.svg e assets/monogram.svg — mudou lá, regerar aqui. */
:root {
  --forma-estrela: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50 2Q54 46 98 50Q54 54 50 98Q46 54 2 50Q46 46 50 2Z%22 fill=%22black%22/%3E%3C/svg%3E");
  --monograma-creme: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 616 299%22%3E %3Cpath d=%22M 526.445 9.960 C 496.382 17.845, 471.931 40.697, 464.339 68.006 L 462.623 74.176 460.499 66.838 C 459.331 62.802, 456.395 55.675, 453.974 51 C 450.625 44.532, 447.533 40.456, 441.037 33.949 C 433.933 26.834, 430.906 24.619, 423 20.751 C 411.983 15.360, 405.269 13.485, 391.493 11.949 C 368.850 9.424, 346.117 15.511, 324.552 29.873 C 317.675 34.452, 300 51.024, 300 52.891 C 300 53.424, 301.959 52.764, 304.353 51.426 C 309.933 48.307, 322.850 45, 329.450 45 C 348.351 45, 365.021 57.076, 372.049 75.861 C 377.483 90.384, 377.500 90.679, 377.500 170.500 C 377.500 253.150, 377.759 249.733, 370.330 265 C 367.442 270.935, 364.722 274.430, 357.293 281.750 L 347.906 291 425.453 291 C 468.104 291, 503 290.836, 503 290.635 C 503 290.434, 499.288 288.115, 494.750 285.480 C 485.363 280.030, 476.704 271.725, 472.217 263.869 C 470.530 260.916, 468.223 254.953, 467.089 250.617 C 465.095 242.986, 465.028 240.253, 465.015 165.117 C 465 79.100, 464.943 79.970, 471.478 66.209 C 475.384 57.983, 484.746 47.415, 491.786 43.283 C 498.798 39.168, 507.304 37, 516.440 37 C 533.026 37, 535.767 40.462, 530.396 54.631 C 527.025 63.526, 526.001 71.054, 527.163 78.414 C 529 90.054, 536.076 100.444, 546.209 106.382 C 548.724 107.856, 553.991 109.731, 557.914 110.549 C 570.532 113.180, 583.256 109.518, 592.927 100.472 C 603.222 90.842, 608.143 79.312, 608.143 64.821 C 608.143 49.360, 603.024 37.099, 591.938 26.010 C 584.202 18.271, 574.477 12.808, 563.391 9.972 C 553.194 7.364, 536.364 7.359, 526.445 9.960 M 208.250 12.066 C 190.115 14.424, 169.864 23.350, 154.500 35.758 C 149.860 39.505, 135.945 53.278, 136.369 53.703 C 136.578 53.911, 138.267 53.196, 140.124 52.115 C 150.790 45.902, 168.092 43.832, 179 47.465 C 191.098 51.494, 199.583 59.186, 205.530 71.515 C 212.544 86.058, 212.342 83.428, 212.739 165.334 C 213.144 249.169, 213.144 249.170, 205.882 264 C 202.508 270.889, 200.041 274.168, 192.860 281.302 C 187.987 286.143, 184 290.311, 184 290.564 C 184 290.817, 216.493 291.007, 256.208 290.987 L 328.415 290.949 320.837 283.725 C 310.323 273.701, 305.104 265.442, 301.798 253.600 C 301.006 250.762, 300.447 223.346, 299.983 164.500 C 299.387 88.959, 299.120 78.675, 297.582 72.090 C 293.496 54.598, 288.160 44.335, 277.500 33.459 C 265.842 21.566, 250.535 14.383, 231.854 12.041 C 222.548 10.874, 217.376 10.880, 208.250 12.066 M 8 16.424 C 8 16.657, 10.502 18.115, 13.561 19.664 C 25.919 25.921, 37.240 37.993, 42.031 50.021 C 46.781 61.947, 46.928 65.067, 46.965 154.662 C 47.004 248.146, 46.983 248.491, 40.552 261.561 C 35.931 270.952, 26.182 280.684, 16.329 285.742 C 12.303 287.809, 9.007 289.837, 9.004 290.250 C 9.002 290.663, 43.259 291, 85.131 291 L 161.262 291 152.776 282.740 C 145.785 275.935, 143.571 272.985, 140.211 265.990 C 132.719 250.395, 133 255.734, 133 129.042 L 133 16 70.500 16 C 36.125 16, 8 16.191, 8 16.424%22 stroke=%22none%22 fill=%22%23F2EBE2%22 fill-rule=%22evenodd%22/%3E %3C/svg%3E");
  --forma-monograma: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 616 299%22%3E %3Cpath d=%22M 526.445 9.960 C 496.382 17.845, 471.931 40.697, 464.339 68.006 L 462.623 74.176 460.499 66.838 C 459.331 62.802, 456.395 55.675, 453.974 51 C 450.625 44.532, 447.533 40.456, 441.037 33.949 C 433.933 26.834, 430.906 24.619, 423 20.751 C 411.983 15.360, 405.269 13.485, 391.493 11.949 C 368.850 9.424, 346.117 15.511, 324.552 29.873 C 317.675 34.452, 300 51.024, 300 52.891 C 300 53.424, 301.959 52.764, 304.353 51.426 C 309.933 48.307, 322.850 45, 329.450 45 C 348.351 45, 365.021 57.076, 372.049 75.861 C 377.483 90.384, 377.500 90.679, 377.500 170.500 C 377.500 253.150, 377.759 249.733, 370.330 265 C 367.442 270.935, 364.722 274.430, 357.293 281.750 L 347.906 291 425.453 291 C 468.104 291, 503 290.836, 503 290.635 C 503 290.434, 499.288 288.115, 494.750 285.480 C 485.363 280.030, 476.704 271.725, 472.217 263.869 C 470.530 260.916, 468.223 254.953, 467.089 250.617 C 465.095 242.986, 465.028 240.253, 465.015 165.117 C 465 79.100, 464.943 79.970, 471.478 66.209 C 475.384 57.983, 484.746 47.415, 491.786 43.283 C 498.798 39.168, 507.304 37, 516.440 37 C 533.026 37, 535.767 40.462, 530.396 54.631 C 527.025 63.526, 526.001 71.054, 527.163 78.414 C 529 90.054, 536.076 100.444, 546.209 106.382 C 548.724 107.856, 553.991 109.731, 557.914 110.549 C 570.532 113.180, 583.256 109.518, 592.927 100.472 C 603.222 90.842, 608.143 79.312, 608.143 64.821 C 608.143 49.360, 603.024 37.099, 591.938 26.010 C 584.202 18.271, 574.477 12.808, 563.391 9.972 C 553.194 7.364, 536.364 7.359, 526.445 9.960 M 208.250 12.066 C 190.115 14.424, 169.864 23.350, 154.500 35.758 C 149.860 39.505, 135.945 53.278, 136.369 53.703 C 136.578 53.911, 138.267 53.196, 140.124 52.115 C 150.790 45.902, 168.092 43.832, 179 47.465 C 191.098 51.494, 199.583 59.186, 205.530 71.515 C 212.544 86.058, 212.342 83.428, 212.739 165.334 C 213.144 249.169, 213.144 249.170, 205.882 264 C 202.508 270.889, 200.041 274.168, 192.860 281.302 C 187.987 286.143, 184 290.311, 184 290.564 C 184 290.817, 216.493 291.007, 256.208 290.987 L 328.415 290.949 320.837 283.725 C 310.323 273.701, 305.104 265.442, 301.798 253.600 C 301.006 250.762, 300.447 223.346, 299.983 164.500 C 299.387 88.959, 299.120 78.675, 297.582 72.090 C 293.496 54.598, 288.160 44.335, 277.500 33.459 C 265.842 21.566, 250.535 14.383, 231.854 12.041 C 222.548 10.874, 217.376 10.880, 208.250 12.066 M 8 16.424 C 8 16.657, 10.502 18.115, 13.561 19.664 C 25.919 25.921, 37.240 37.993, 42.031 50.021 C 46.781 61.947, 46.928 65.067, 46.965 154.662 C 47.004 248.146, 46.983 248.491, 40.552 261.561 C 35.931 270.952, 26.182 280.684, 16.329 285.742 C 12.303 287.809, 9.007 289.837, 9.004 290.250 C 9.002 290.663, 43.259 291, 85.131 291 L 161.262 291 152.776 282.740 C 145.785 275.935, 143.571 272.985, 140.211 265.990 C 132.719 250.395, 133 255.734, 133 129.042 L 133 16 70.500 16 C 36.125 16, 8 16.191, 8 16.424%22 stroke=%22none%22 fill=%22black%22 fill-rule=%22evenodd%22/%3E %3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--semantic-background);
  color: var(--semantic-text);
  font: 400 var(--type-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
em { font-style: italic; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { touch-action: manipulation; }
::selection { background: var(--color-rose); color: var(--color-plum); }
:focus-visible { outline: 3px solid var(--semantic-focus); outline-offset: 5px; border-radius: 2px; }
[hidden] { display: none !important; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 80px; }

/* ---------- utilidades ---------- */
.caixa { width: min(var(--layout-max), calc(100% - 80px)); margin-inline: auto; }
.eyebrow {
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--semantic-muted);
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 20px; top: -80px; z-index: 50;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: var(--color-plum); color: var(--color-paper); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }
.sem-js { padding: 24px; text-align: center; }

/* Monograma por máscara: uma só arte, qualquer cor do sistema (currentColor). */
.monograma {
  display: inline-block;
  width: 56px;
  aspect-ratio: 616 / 299;
  background: currentColor;
  -webkit-mask: var(--forma-monograma) center / contain no-repeat;
  mask: var(--forma-monograma) center / contain no-repeat;
}
.monograma--creme { color: var(--color-cream); }

/* ---------- componentes do sistema (system.css 1.4.0) ---------- */
.link-draw { position: relative; text-decoration: none; }
.link-draw::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(.35); transform-origin: left;
  transition: transform 700ms var(--motion-ease);
}
.link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px;
  border: 1px solid var(--semantic-border); border-radius: var(--radius-pill);
  background: var(--semantic-surface); color: var(--semantic-text);
  font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}

.segmented {
  display: inline-flex; padding: 4px; border: 1px solid var(--semantic-border);
  border-radius: var(--radius-pill); background: var(--semantic-surface);
}
.segmented button {
  min-width: 48px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--semantic-text);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  transition: background-color 600ms var(--motion-ease), color 600ms var(--motion-ease);
}
.segmented button[aria-pressed="true"] { background: var(--semantic-action); color: var(--semantic-on-action); }

.timeline { list-style: none; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--semantic-border);
}
.timeline > li { position: relative; padding: 0 0 44px 44px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--semantic-background); border: 1px solid var(--color-mauve);
  box-shadow: inset 0 0 0 3px var(--semantic-background), inset 0 0 0 8px var(--color-rose);
}
.timeline > li.is-current::before { box-shadow: inset 0 0 0 3px var(--semantic-background), inset 0 0 0 8px var(--color-plum); }
.timeline .when { font-size: var(--type-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-mauve); }
.timeline h4 { margin: 8px 0 4px; font-size: 28px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.timeline .where { font-weight: 500; }

.seal-badge {
  position: relative; display: inline-grid; place-items: center; width: 128px; height: 128px;
  border-radius: 50%; background: var(--color-plum); color: var(--color-cream);
}
.seal-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-badge text { fill: currentColor; font: 600 9.5px var(--font-body); letter-spacing: .18em; }
.seal-badge .seal-core {
  width: 28px; height: 28px; background: var(--color-rose);
  -webkit-mask: var(--forma-estrela) center / contain no-repeat;
  mask: var(--forma-estrela) center / contain no-repeat;
}

.drawn { display: block; width: 100%; height: auto; overflow: visible; }
.drawn path {
  fill: none; stroke: var(--color-mauve); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.oval-wrap, .underline-wrap { position: relative; display: inline-block; white-space: nowrap; }
.oval-wrap .drawn { position: absolute; left: -12%; top: -14%; width: 124%; height: 132%; pointer-events: none; }
.underline-wrap .drawn { position: absolute; left: -2%; bottom: -.22em; width: 104%; height: .36em; pointer-events: none; }

/* ---------- botões ---------- */
/* Hover de botão: uma camada varre da esquerda para a direita e o ícone anda.
   Lento de propósito (pedido do Daniel): nada de troca seca de cor. */
.botao {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-plum);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color 600ms var(--motion-ease), border-color 600ms var(--motion-ease),
              transform 700ms var(--motion-ease), box-shadow 700ms var(--motion-ease);
}
.botao::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--varrer);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 700ms var(--motion-ease);
}
.botao:hover::before, .botao:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.botao:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.botao:active { transform: none; box-shadow: none; }
.botao--primario { --varrer: var(--color-mauve); background: var(--color-plum); color: var(--color-paper); }
.botao--primario:hover { border-color: var(--color-mauve); }
.botao--secundario { --varrer: var(--color-plum); background: transparent; color: var(--color-plum); }
.botao--secundario:hover, .botao--secundario:focus-visible { color: var(--color-paper); }
.botao__icone { display: inline-grid; width: 18px; height: 18px; transition: transform 700ms var(--motion-ease); }
.botao:hover .botao__icone { transform: translateX(4px); }
.botao__icone svg, .icone-botao svg, .contato__seta svg, .rodape__icone svg, .aviso__fechar svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--stroke-icon);
  stroke-linecap: round; stroke-linejoin: round;
}
.formulario__enviar:hover .botao__icone { transform: translate(2px, -2px); }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
html[data-rolou] .topo {
  background: rgba(242, 235, 226, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(180, 162, 172, .5);
}
.topo__interior {
  width: min(var(--layout-max), calc(100% - 80px)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-32); min-height: 76px;
}
.topo__marca { display: inline-flex; padding: 8px 0; color: var(--color-plum); }
.topo__marca .monograma { width: 62px; }
.topo__nav { display: flex; gap: var(--space-32); margin-left: auto; font-size: var(--type-small); font-weight: 500; }
.topo__nav a::after { transform: scaleX(0); }

/* ==========================================================================
   HOME — cada seção vende com uma dinâmica própria (pedido do Daniel,
   2026-11-02, referência coere.org). Variáveis vindas do site.js:
     --px, --py   ponteiro de -1 a 1 (hero)
     --giro       giro do selo pela rolagem
     --p          progresso de 0 a 1 de quem tem data-progresso
   Sem JS ou com movimento reduzido, tudo cai no estado final (var(--p, 1)).
   ========================================================================== */

.estrela {
  display: inline-block; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--forma-estrela) center / contain no-repeat;
  mask: var(--forma-estrela) center / contain no-repeat;
}

/* ---------- hero: a palavra se digita ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: calc(100svh - 76px); padding: var(--space-48) 0 var(--space-96); overflow: hidden; }
.hero__grade { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.hero__rotulo { grid-column: 1 / -1; }
.hero__titulo {
  grid-column: 1 / -1; margin-top: var(--space-32);
  font-size: clamp(64px, 10.4vw, 156px); line-height: 1.02; letter-spacing: -.05em; font-weight: 500;
}
.hero__linha { display: block; }
.hero__digitado { padding-left: 1.1em; white-space: nowrap; }
.hero__palavra { display: inline-block; min-width: .2em; }
.hero__cursor {
  display: inline-block; width: .055em; height: .74em; margin-left: .05em; vertical-align: -.02em;
  border-radius: 2px; background: var(--color-mauve);
}
/* Cursor de texto: pisca nas pausas e depois da última palavra; enquanto
   letras entram ou saem (.is-teclando), fica aceso, como num editor. */
@keyframes piscar { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.hero__lado { grid-column: 7 / 13; margin-top: var(--space-48); }
.hero__lead { max-width: 46ch; font-size: 18px; line-height: 1.7; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }

/* Enfeites seguem o ponteiro em profundidades diferentes (--k). */
.hero__enfeites { position: absolute; inset: 0; pointer-events: none; }
.hero__estrela, .hero__selo {
  position: absolute;
  translate: calc(var(--px, 0) * var(--ponteiro, 0px) * var(--k)) calc(var(--py, 0) * var(--ponteiro, 0px) * var(--k));
  transition: translate 900ms var(--motion-ease);
}
.hero__estrela--1 { --k: 1.4; top: 16%; right: 22%; width: 46px; height: 46px; color: var(--color-mauve); }
.hero__estrela--2 { --k: -1.8; top: 13%; left: 44%; width: 18px; height: 18px; color: var(--color-plum); }
.hero__estrela--3 { --k: .7; bottom: 14%; left: 34%; width: 14px; height: 14px; color: var(--color-mauve); }
.hero__selo { --k: -.6; right: 6%; top: 18%; width: 156px; height: 156px; }
.hero__selo-marca { width: 60px; }

/* ---------- abordagem: a frase se revisa ---------- */
.abordagem { padding: 160px 0; background: var(--color-paper); }
.abordagem__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.abordagem__texto { grid-column: 1 / 6; }
.abordagem__titulo { margin-top: var(--space-16); font-size: clamp(40px, 4.4vw, 58px); line-height: .98; }
.abordagem__lead { margin-top: var(--space-32); max-width: 42ch; font-size: 17px; line-height: 1.7; }

.revisao {
  grid-column: 7 / 13; margin: 0; padding-bottom: var(--space-24);
  background: var(--color-white); border-radius: 16px; box-shadow: var(--shadow-lifted);
  rotate: 1.2deg; transition: rotate var(--motion-enter) var(--motion-ease);
}
.revisao:hover { rotate: 0deg; }
.revisao__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 14px 18px; border-bottom: 1px solid rgba(180, 162, 172, .45); }
.revisao__pontos { display: flex; gap: 6px; }
.revisao__pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-rose); }
.revisao__pontos i:nth-child(2) { background: var(--color-line); }
.revisao__pontos i:nth-child(3) { background: var(--color-mauve); }
.revisao__etapas { position: relative; display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-cream); }
.revisao__etapas button {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 84px; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-plum);
  font-size: 13px; font-weight: 600; transition: color var(--motion-base) var(--motion-ease);
}
.revisao__etapas button[aria-pressed="true"] { color: var(--color-paper); }
/* Hover das etapas e do seletor de idioma: uma pílula clara cresce por trás do rótulo, devagar. */
.revisao__etapas button::before, .segmented button::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(62, 18, 55, .1); transform: scale(.6); opacity: 0;
  transition: transform 600ms var(--motion-ease), opacity 600ms var(--motion-ease);
}
.revisao__etapas button:not([aria-pressed="true"]):hover::before,
.segmented button:not([aria-pressed="true"]):hover::before { transform: scale(1); opacity: 1; }
.revisao__etapas button:not([aria-pressed="true"]):hover { font-style: italic; }
.segmented button { position: relative; isolation: isolate; }
.revisao__etapas button { isolation: isolate; }
.revisao__indicador {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: var(--radius-pill); background: var(--color-plum);
  transition: transform var(--motion-enter) var(--motion-ease);
}
.revisao[data-etapa="1"] .revisao__indicador { transform: translateX(100%); }
.revisao[data-etapa="2"] .revisao__indicador { transform: translateX(200%); }
.revisao__frase { margin: 0; padding: var(--space-32) var(--space-32) 0; font: 500 clamp(24px, 2.3vw, 31px)/1.3 var(--font-display); letter-spacing: -.01em; }
.revisao__frase del, .revisao__frase ins { text-decoration: none; color: inherit; }
.revisao__frase ins { display: none; font-style: italic; background: linear-gradient(var(--color-rose), var(--color-rose)) 0 88% / 100% .36em no-repeat; }
.revisao[data-etapa="1"] del { color: var(--color-mauve); background: linear-gradient(var(--color-mauve), var(--color-mauve)) 0 58% / 100% 2px no-repeat; }
.revisao[data-etapa="1"] ins, .revisao[data-etapa="2"] ins { display: inline; }
.revisao[data-etapa="2"] del { display: none; }
.revisao[data-etapa="2"] ins { background: none; font-style: normal; }
.revisao__legenda { padding: var(--space-24) var(--space-32) 0; font-size: 12px; color: var(--color-mauve); }

.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 128px; list-style: none; }
.pilar {
  position: relative; padding: 40px 36px; border-radius: 18px; background: var(--color-cream); overflow: hidden;
  transition: transform 900ms var(--motion-ease), box-shadow 900ms var(--motion-ease), background-color 900ms var(--motion-ease);
}
.pilar:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); background-color: var(--color-white); }
.pilar__titulo { font-size: 24px; font-weight: 600; margin-bottom: var(--space-8); }
.pilar p { font-size: 15px; }
.pilar__arte { position: relative; display: block; height: 72px; margin-bottom: var(--space-24); }
/* 1 — escuta: ondas que se abrem */
.pilar--1 .pilar__arte i {
  position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  border: 1.5px solid var(--color-mauve); transition: transform 1100ms var(--motion-ease), opacity 1100ms var(--motion-ease);
}
.pilar--1 .pilar__arte i:nth-child(1) { background: var(--color-plum); border-color: var(--color-plum); }
.pilar--1 .pilar__arte i:nth-child(2) { transform: scale(1.8); opacity: .6; }
.pilar--1 .pilar__arte i:nth-child(3) { transform: scale(2.6); opacity: .3; }
.pilar--1:hover .pilar__arte i:nth-child(2) { transform: scale(2.4) translateX(8px); opacity: .8; }
.pilar--1:hover .pilar__arte i:nth-child(3) { transform: scale(3.6) translateX(10px); opacity: .5; }
/* 2 — clareza: a letra ganha forma */
.pilar--2 .pilar__arte b { font: 500 64px/72px var(--font-display); letter-spacing: -.04em; display: inline-block; transition: transform 1000ms var(--motion-ease), letter-spacing 1000ms var(--motion-ease); }
.pilar--2:hover .pilar__arte b { transform: skewX(-12deg); letter-spacing: .04em; }
/* 3 — canais: formatos que se reorganizam */
.pilar--3 .pilar__arte i { position: absolute; bottom: 8px; border-radius: 4px; background: var(--color-plum); transition: transform 1000ms var(--motion-ease); }
.pilar--3 .pilar__arte i:nth-child(1) { left: 0px; width: 36px; height: 48px; }
.pilar--3 .pilar__arte i:nth-child(2) { left: 58px; width: 40px; height: 40px; background: var(--color-mauve); }
.pilar--3 .pilar__arte i:nth-child(3) { left: 120px; width: 56px; height: 32px; background: var(--color-rose); }
.pilar--3 .pilar__arte i:nth-child(4) { left: 198px; width: 26px; height: 52px; background: var(--color-line); }
.pilar--3:hover .pilar__arte i:nth-child(1) { transform: translate(-10px, -8px) rotate(-8deg); }
.pilar--3:hover .pilar__arte i:nth-child(2) { transform: translate(-3px, -14px) rotate(5deg); }
.pilar--3:hover .pilar__arte i:nth-child(3) { transform: translate(4px, -6px) rotate(-4deg); }
.pilar--3:hover .pilar__arte i:nth-child(4) { transform: translate(14px, -12px) rotate(10deg); }

/* ---------- canais: a mesma mensagem em cinco formatos ---------- */
.canais { padding: 160px 0; background: var(--color-plum); color: var(--color-cream); overflow: hidden; }
.canais .eyebrow { color: var(--color-rose); }
.canais :focus-visible { outline-color: var(--color-cream); }
.canais__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.canais__texto { grid-column: 1 / 6; }
.canais__titulo { margin-top: var(--space-16); font-size: clamp(40px, 4.4vw, 58px); line-height: .98; }
.canais__titulo em { color: var(--color-rose); }
.canais__lead { margin-top: var(--space-32); max-width: 42ch; color: var(--color-rose); }
.canais__abas { display: grid; margin-top: var(--space-48); border-top: 1px solid rgba(221, 198, 206, .25); }
.canais__abas button {
  position: relative; display: flex; align-items: baseline; gap: var(--space-16); width: 100%; min-height: 60px; padding: 12px 0;
  border: 0; border-bottom: 1px solid rgba(221, 198, 206, .25); background: none; color: var(--color-rose);
  font: 500 30px/1.1 var(--font-display); letter-spacing: -.02em; text-align: left;
  transition: color 700ms var(--motion-ease);
}
.canais__abas button::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--color-cream);
  -webkit-mask: var(--forma-estrela) center / contain no-repeat; mask: var(--forma-estrela) center / contain no-repeat;
  transform: scale(0) rotate(-90deg); transition: transform 800ms var(--motion-ease);
}
.canais__abas button:hover { color: var(--color-cream); }
.canais__abas button[aria-selected="true"] { color: var(--color-cream); }
.canais__abas button[aria-selected="true"]::after { transform: scale(1) rotate(0); }
.canais__n { flex: none; width: 24px; font: 600 11px/1 var(--font-body); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.canais__rotulo { display: inline-block; transition: transform 800ms var(--motion-ease); }
.canais__abas button:hover .canais__rotulo { transform: translateX(6px); }
.canais__abas button[aria-selected="true"] .canais__rotulo { transform: translateX(14px); font-style: italic; }
.canais__exemplo { margin-top: var(--space-24); font-size: 12px; color: var(--color-rose); }
.canais__palco { grid-column: 7 / 13; position: relative; display: grid; place-items: center; min-height: 600px; }
.canais__palco::before {
  content: ''; position: absolute; width: min(560px, 100%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 198, 206, .16), rgba(221, 198, 206, 0) 68%);
}
.canais__painel { position: relative; display: grid; place-items: center; width: 100%; }
.canais__painel:focus-visible { outline-offset: 12px; border-radius: 20px; }

.maquete {
  width: min(380px, 100%); overflow: hidden; border-radius: 20px;
  background: var(--color-paper); color: var(--color-plum); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  transition: transform 1000ms var(--motion-ease), box-shadow 1000ms var(--motion-ease);
}
.maquete:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 60px 100px -36px rgba(0, 0, 0, .6); }
.maquete svg, .frente__sinal svg, .passagem__icone svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round;
}
.post__topo, .whats__topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; }
.post__avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-plum); }
.post__avatar .monograma { width: 22px; }
.post__arte { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: var(--space-32); background: var(--color-rose) url('../assets/grid.svg'); text-align: center; }
.post__arte p { font: italic 500 36px/1.05 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.post__estrela { position: absolute; right: 20px; bottom: 20px; width: 22px; height: 22px; color: var(--color-plum); }
.post__acoes { display: flex; align-items: center; gap: 14px; padding: 12px 16px 6px; }
.post__acoes svg { width: 24px; height: 24px; flex: none; }
.post__acoes span { margin-left: auto; display: inline-grid; width: 24px; height: 24px; }
.post__legenda { padding: 0 16px 18px; font-size: 14px; line-height: 1.5; }
.maquete--email { padding: var(--space-24); }
.email__linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-mauve); }
.email__de { font-weight: 600; color: var(--color-plum); }
.email__assunto { margin-top: var(--space-12); font: 600 26px/1.1 var(--font-display); letter-spacing: -.015em; }
.email__pre { margin-top: 6px; font-size: 14px; color: var(--color-mauve); }
.email__corpo { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid rgba(180, 162, 172, .5); font-size: 15px; }
.email__botao { display: inline-block; margin-top: var(--space-24); padding: 12px 20px; border-radius: var(--radius-pill); background: var(--color-plum); color: var(--color-paper); font-size: 14px; font-weight: 600; }
.maquete--roteiro { width: min(480px, 100%); padding: var(--space-24) var(--space-16); }
.maquete--roteiro table { width: 100%; border-collapse: collapse; }
.maquete--roteiro th { padding: 0 8px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mauve); }
.maquete--roteiro td { padding: 14px 8px; border-top: 1px solid rgba(180, 162, 172, .5); vertical-align: top; font-size: 14px; line-height: 1.45; }
.maquete--roteiro td:first-child { font-weight: 600; color: var(--color-mauve); font-variant-numeric: tabular-nums; white-space: nowrap; }
.maquete--roteiro td:last-child { font: italic 500 19px/1.25 var(--font-display); }
.maquete--whats { background: var(--color-cream) url('../assets/grid.svg'); }
.whats__topo { background: var(--color-plum); color: var(--color-cream); }
.whats__topo small { display: block; font-size: 12px; color: var(--color-rose); }
.whats__conversa { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 300px; padding: var(--space-24) var(--space-16); }
.whats__balao {
  max-width: 86%; padding: 10px 14px 8px; border-radius: 14px 14px 14px 4px; background: var(--color-white);
  box-shadow: var(--shadow-soft); font-size: 15px; line-height: 1.45;
}
.whats__balao small { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--color-mauve); }
.whats__balao small svg { width: 14px; height: 14px; }
.whats__digitando { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: var(--radius-pill); background: var(--color-white); box-shadow: var(--shadow-soft); }
.whats__digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mauve); }

/* ---------- frentes: acordeão ---------- */
.frentes { padding: 160px 0; background: var(--color-cream); }
.frentes__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.frentes__cabeca { grid-column: 1 / 5; position: sticky; top: 120px; }
.frentes__titulo { margin-top: var(--space-16); font-size: clamp(40px, 4.2vw, 56px); line-height: .98; }
.frentes__todos { margin-top: var(--space-32); }
.frentes__todos:hover .botao__icone { transform: translateX(3px); }
.frentes__lista { grid-column: 6 / 13; list-style: none; border-top: 1px solid var(--color-line); }
.frente { position: relative; border-bottom: 1px solid var(--color-line); transition: background-color 800ms var(--motion-ease); }
.frente:hover, .frente.is-aberta { background-color: rgba(252, 249, 245, .7); }
.frente::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px; background: var(--cor-frente);
  box-shadow: inset 0 0 0 1px rgba(62, 18, 55, .15);
  transform: scaleY(0); transform-origin: top; transition: transform var(--motion-enter) var(--motion-ease);
}
.frente.is-aberta::before { transform: scaleY(1); }
.frente__cabeca { margin: 0; font: inherit; letter-spacing: normal; }
.frente__botao {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-16);
  width: 100%; padding: 28px var(--space-16) 28px var(--space-24); border: 0; background: none; color: inherit; text-align: left;
}
.frente__numero { font: italic 500 20px/1 var(--font-display); color: var(--color-mauve); }
.frente__nome { font: 500 clamp(26px, 2.5vw, 34px)/1 var(--font-display); letter-spacing: -.025em; transition: transform 900ms var(--motion-ease); }
.frente.is-aberta .frente__nome { transform: translateX(8px); font-style: italic; }
.frente__sinal {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 1px solid var(--color-line); border-radius: 50%;
  transition: transform var(--motion-enter) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
.frente.is-aberta .frente__sinal { transform: rotate(45deg); background: var(--color-plum); border-color: var(--color-plum); color: var(--color-paper); }
.frente__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 800ms var(--motion-ease); }
.frente.is-aberta .frente__painel { grid-template-rows: 1fr; }
.frente__interior { min-height: 0; overflow: hidden; padding-left: calc(var(--space-24) + 56px + var(--space-16) + 8px); }
.frente__interior > :last-child { margin-bottom: var(--space-32); }
.frente__descricao { max-width: 52ch; font-size: 17px; }
.frente__tags { display: block; max-width: 52ch; margin-top: var(--space-24); list-style: none; text-wrap: balance; line-height: 2.4; }
.frente__tags li {
  display: inline-block; margin: 0 4px 0 0; line-height: 1.5; padding: 4px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-paper);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease), background-color 600ms var(--motion-ease), border-color 600ms var(--motion-ease);
}
.frente__tags li:hover { background-color: var(--color-rose); border-color: var(--color-rose); }
.frente.is-aberta .frente__tags li { opacity: 1; transform: none; transition-delay: calc(240ms + var(--k) * 70ms), calc(240ms + var(--k) * 70ms), 0ms, 0ms; }
.frente__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-16); min-height: 44px; font-size: var(--type-small); font-weight: 600; text-decoration: none; }
.frente__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.frente__contagem { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-plum); color: var(--color-paper); font-size: 12px; }
.frente__seta { display: inline-grid; width: 18px; height: 18px; transition: transform var(--motion-base) var(--motion-ease); }
.frente__seta svg, .cartao__seta svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round;
}
.frente__link:hover .frente__seta { transform: translate(2px, -2px); }

/* ---------- destaques: baralho ---------- */
.destaques { padding: 160px 0; background: var(--color-paper); overflow: hidden; }
.destaques__cabeca { max-width: 760px; margin-inline: auto; text-align: center; }
.destaques__titulo { margin-top: var(--space-16); font-size: clamp(40px, 4.4vw, 58px); line-height: 1; }
.destaques__lead { margin: var(--space-32) auto 0; max-width: 52ch; }
.baralho { margin-top: 96px; }
.baralho__mesa { position: relative; display: grid; place-items: center; height: 540px; }
/* --x: lado (-1, 0, 1; a do fundo fica em 0) · --ad: distância da ativa (0 a 2). */
.carta {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column;
  width: min(400px, 80vw); height: 100%; padding: 36px 32px 32px; border-radius: 22px;
  background: var(--fundo); color: var(--texto); box-shadow: var(--shadow-lifted); cursor: pointer;
  transform: translateX(calc(var(--x, 0) * 64%)) scale(calc(1 - var(--ad, 0) * .14)) rotate(calc(var(--x, 0) * 3deg));
  z-index: calc(10 - var(--ad, 0));
  opacity: calc(1 - var(--ad, 0) * .22);
  transition: transform 1000ms var(--motion-ease), opacity 1000ms var(--motion-ease), translate 700ms var(--motion-ease), box-shadow 700ms var(--motion-ease);
}
.carta--textura { background-image: url('../assets/grid.svg'); box-shadow: var(--shadow-lifted), inset 0 0 0 1px var(--color-line); }
.carta:not(.is-ativa):hover { translate: 0 -12px; box-shadow: 0 30px 60px -24px rgba(62, 18, 55, .45); }
.carta.is-ativa { cursor: default; }
.carta__casa { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); }
.carta__estrela { position: absolute; top: 32px; right: 32px; width: 18px; height: 18px; color: var(--apoio); transition: rotate 1200ms var(--motion-ease); }
.carta.is-ativa .carta__estrela { rotate: 180deg; }
.carta__frase { margin: auto 0; font: italic 500 clamp(26px, 2.4vw, 32px)/1.14 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.carta__frase span { display: block; height: .5em; font: 600 2.2em/1 var(--font-display); font-style: normal; color: var(--apoio); }
.carta__frase--titulo { font-style: normal; font-size: clamp(34px, 3vw, 42px); }
.carta__titulo { font-size: 22px; font-weight: 600; }
.carta__meta { margin-top: 2px; font-size: 13px; opacity: .8; }
.carta__resumo, .carta__link { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease); }
.carta.is-ativa .carta__resumo, .carta.is-ativa .carta__link { opacity: 1; transform: none; transition-delay: 350ms; }
.carta__resumo { margin-top: var(--space-12); font-size: 14px; line-height: 1.55; }
.carta__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-16); font-size: 14px; font-weight: 600; text-decoration: none; }
.carta__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.carta__seta { display: inline-grid; width: 16px; height: 16px; transition: transform 600ms var(--motion-ease); }
.carta__seta svg, .baralho__seta svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carta__link:hover .carta__seta { transform: translateX(4px); }
.carta:focus-visible { outline-offset: 8px; border-radius: 22px; }
.baralho__controles { display: flex; align-items: center; justify-content: center; gap: var(--space-24); margin-top: var(--space-48); }
.baralho__contador { min-width: 72px; text-align: center; font-size: 14px; color: var(--color-mauve); font-variant-numeric: tabular-nums; }
.baralho__contador strong { color: var(--color-plum); }
.destaques__pe { margin-top: var(--space-64); text-align: center; }

/* ---------- passagem: nomes acendem ---------- */
.passagem { padding: 160px 0; background: var(--color-ink); color: var(--color-cream); }
.passagem .eyebrow { color: var(--color-rose); }
.passagem :focus-visible { outline-color: var(--color-cream); }
.passagem__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.passagem__lado { grid-column: 1 / 5; position: sticky; top: 120px; }
.passagem__titulo { margin-top: var(--space-16); font: 500 32px/1.1 var(--font-display); letter-spacing: -.02em; }
.passagem__hoje { margin-top: var(--space-24); color: var(--color-rose); }
.passagem__hoje span { font-size: 14px; }
.passagem__curriculos { display: grid; gap: var(--space-8); margin-top: var(--space-32); list-style: none; font-size: 14px; font-weight: 500; }
.passagem__curriculos a { display: inline-flex; align-items: center; gap: 8px; }
.passagem__icone { display: inline-grid; width: 16px; height: 16px; }
.passagem__nomes { grid-column: 6 / 13; display: grid; gap: 6px; list-style: none; }
/* Zigue-zague: ímpares na margem esquerda, pares encostados na direita — a lista
   ocupa a coluna inteira em vez de deixar um vazio à direita. */
.passagem__nomes li { justify-self: start; font: 400 clamp(36px, 4.2vw, 62px)/1.12 var(--font-display); letter-spacing: -.03em; white-space: nowrap; }
.passagem__nomes li:nth-child(even) { justify-self: end; }
/* Duas camadas do mesmo nome empilhadas: romano apagado e itálico aceso.
   Acender é trocar a opacidade e o desfoque entre elas, devagar. */
.nome { position: relative; display: inline-flex; align-items: center; cursor: default; transition: transform 1200ms var(--motion-ease); }
.nome__camadas { display: grid; }
.nome__r, .nome__i { grid-area: 1 / 1; transition: opacity 1100ms var(--motion-ease), filter 1100ms var(--motion-ease), color 1100ms var(--motion-ease); }
.nome__r { color: var(--color-rose); opacity: .42; }
.nome__i { font-style: italic; color: var(--color-cream); opacity: 0; filter: blur(8px); }
.nome__estrela {
  position: absolute; left: -.7em; width: .34em; height: .34em; color: var(--color-rose);
  opacity: 0; transform: scale(0) rotate(-120deg);
  transition: opacity 900ms var(--motion-ease), transform 1100ms var(--motion-ease);
}
.nome.is-ativo { transform: translateX(.35em); }
.nome.is-ativo .nome__r { opacity: 0; filter: blur(8px); }
.nome.is-ativo .nome__i { opacity: 1; filter: blur(0); }
.nome.is-ativo .nome__estrela { opacity: 1; transform: scale(1) rotate(0); }

/* ---------- processo: linha que se desenha ---------- */
.processo { padding: 160px 0; }
.processo__cabeca { max-width: 760px; }
.processo__titulo { margin-top: var(--space-16); font-size: clamp(40px, 4.4vw, 58px); line-height: .98; }
.processo__trilho { position: relative; margin-top: 96px; }
.processo__linha { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.processo__linha path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.processo__guia { stroke: var(--color-line); stroke-width: 1.5; stroke-dasharray: 4 8; }
.processo__traco { stroke: var(--color-plum); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 160ms linear; }
.processo__passos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 20px; list-style: none; text-align: center; }
.passo__marca {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto var(--space-24);
  border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-cream);
  font: 600 20px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-mauve);
}
.passo__marca::after {
  content: attr(data-n); position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 50%; line-height: 1;
  background: var(--color-plum); color: var(--color-cream);
  --aceso: clamp(0, var(--p, 1) * 3.4 - var(--n) - .2, 1);
  opacity: var(--aceso); transform: scale(calc(.6 + .4 * var(--aceso)));
  transition: opacity 200ms linear, transform 200ms linear;
}
.passo__titulo { font-size: 28px; font-weight: 600; }
.passo p { max-width: 30ch; margin: var(--space-12) auto 0; font-size: 15px; line-height: 1.65; }
/* Hover dos passos: os outros recuam, um anel se abre no círculo, o número gira,
   um traço varre sob o título e o texto sobe. Tudo devagar. */
.passo { cursor: default; }
/* Os outros passos "recuam" trocando para cores sólidas mais claras — com opacidade,
   a linha de trás aparecia através do círculo. */
.passo__marca::after { background-color: var(--color-plum); transition: opacity 200ms linear, transform 200ms linear, rotate 1000ms var(--motion-ease), box-shadow 900ms var(--motion-ease), background-color 900ms var(--motion-ease); }
.processo__passos:hover .passo:not(:hover) .passo__marca::after { background-color: color-mix(in srgb, var(--color-plum) 30%, var(--color-cream)); }
.processo__passos:hover .passo:not(:hover) .passo__titulo,
.processo__passos:hover .passo:not(:hover) p { color: color-mix(in srgb, var(--color-plum) 38%, var(--color-cream)); }
.passo__marca::before {
  content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid var(--color-mauve);
  opacity: 0; transform: scale(.7); transition: opacity 900ms var(--motion-ease), transform 1000ms var(--motion-ease);
}
.passo:hover .passo__marca::before { opacity: 1; transform: scale(1); }
.passo:hover .passo__marca::after { rotate: 360deg; box-shadow: 0 16px 30px -12px rgba(62, 18, 55, .5); }
.passo__titulo {
  display: inline-block; padding-bottom: 4px;
  background: linear-gradient(var(--color-mauve), var(--color-mauve)) 50% 100% / 0% 1px no-repeat;
  transition: background-size 900ms var(--motion-ease), color 900ms var(--motion-ease);
}
.passo:hover .passo__titulo { background-size: 100% 1px; font-style: italic; }
.passo p { transition: transform 900ms var(--motion-ease), color 900ms var(--motion-ease); }
.passo:hover p { transform: translateY(-4px); }

/* ---------- contato: botão magnético ---------- */
.formulario__ima { margin-top: var(--space-32); padding: 8px; margin-inline: -8px; }
.formulario__ima .formulario__enviar { margin-top: 0; transition: transform 260ms var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.contato__listas { margin-top: var(--space-48); }

/* ---------- contato ---------- */
.contato { padding: 160px 0; background: var(--color-rose) url('../assets/grid.svg'); }
.contato__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.contato__texto { grid-column: 1 / 7; }
/* Malva sobre rosa não serve para texto pequeno (design system): aqui o apoio é ameixa. */
.contato .eyebrow, .contato__mini { color: var(--color-plum); }
.contato__titulo { margin-top: var(--space-24); font-size: clamp(44px, 5vw, 68px); line-height: 1; }
.contato__lead { margin-top: var(--space-24); max-width: 40ch; font-size: 18px; }
.contato__mini { display: block; font-size: var(--type-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.contato__email { margin-top: var(--space-48); }
.contato__email-linha { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-8); flex-wrap: wrap; }
.contato__email a { font: 600 clamp(24px, 2.8vw, 34px)/1.2 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.icone-botao {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 11px;
  border: 1px solid var(--color-plum); border-radius: 50%; background: transparent; color: var(--color-plum);
  transition: background-color 600ms var(--motion-ease), color 600ms var(--motion-ease), transform 600ms var(--motion-ease);
}
.icone-botao:hover { background: var(--color-plum); color: var(--color-paper); transform: translateY(-2px); }
.icone-botao.is-copiado { background: var(--color-plum); color: var(--color-paper); }
.contato__listas { display: block; max-width: 440px; margin-top: var(--space-48); }
.contato__links { list-style: none; margin-top: var(--space-8); }
.contato__links li { border-top: 1px solid rgba(62, 18, 55, .22); }
.contato__links li:last-child { border-bottom: 1px solid rgba(62, 18, 55, .22); }
.contato__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; text-decoration: none; }
.contato__links strong { display: block; font-weight: 600; font-size: 15px; }
.contato__links a span:first-child { font-size: 14px; line-height: 1.35; }
.contato__seta { flex: none; width: 20px; height: 20px; transition: transform 700ms var(--motion-ease); }
.contato__links a { transition: padding-left 700ms var(--motion-ease); }
.contato__links a:hover { padding-left: 8px; }
.contato__links a:hover .contato__seta { transform: translate(2px, -2px); }
.contato__links a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.formulario {
  grid-column: 8 / 13; padding: var(--space-48) var(--space-48) var(--space-48);
  background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-lifted);
}
.formulario__titulo { font-size: 32px; font-weight: 600; }
.formulario__resumo:empty { display: none; }
.formulario__resumo {
  margin-top: var(--space-16); padding: 12px 16px; border-radius: var(--radius-small);
  background: var(--color-cream); border-left: 3px solid var(--color-plum); font-size: var(--type-small); font-weight: 500;
}
.campo { margin-top: var(--space-24); }
.campo label { display: block; margin-bottom: var(--space-8); font-size: var(--type-small); font-weight: 600; }
.campo__obrigatorio { font-weight: 400; font-size: 12px; color: var(--color-mauve); }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--color-mauve); border-radius: var(--radius-small);
  background: var(--color-white); color: var(--color-plum); font-size: 16px;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: 2px; }
.campo [aria-invalid="true"] { border-width: 2px; border-color: var(--color-plum); padding: 11px 13px; }
.campo__select { position: relative; }
.campo__select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.campo__select::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--color-plum); border-bottom: 2px solid var(--color-plum); transform: rotate(45deg); pointer-events: none;
}
.campo__erro { display: flex; align-items: center; gap: 8px; margin-top: var(--space-8); font-size: var(--type-small); font-weight: 600; }
.campo__erro::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-plum); color: var(--color-paper); font-size: 12px; font-weight: 700;
}
.formulario__enviar { width: 100%; margin-top: var(--space-32); }

/* ---------- rodapé ---------- */
.rodape { padding: var(--space-48) 0; background: var(--color-plum); color: var(--color-cream); }
.rodape__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; }
.rodape__marca { display: flex; align-items: center; gap: var(--space-16); font: 600 24px/1 var(--font-display); letter-spacing: -.02em; }
.rodape__marca .monograma { width: 64px; }
.rodape__meta { font-size: var(--type-small); color: var(--color-rose); }
.rodape__topo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--type-small); font-weight: 500; }
.rodape__icone { display: inline-grid; width: 16px; height: 16px; }
.rodape :focus-visible { outline-color: var(--color-cream); }

/* ---------- menu do celular ---------- */
.topo__menu, .menu-movel { display: none; }
.topo__menu {
  align-items: center; gap: 12px; min-height: 44px; margin-left: auto; padding: 0 4px 0 16px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-plum);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.topo__menu-icone { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-plum); }
.topo__menu-icone i {
  position: absolute; width: 16px; height: 1.5px; border-radius: 2px; background: var(--color-cream);
  transition: transform 600ms var(--motion-ease);
}
.topo__menu-icone i:first-child { transform: translateY(-3px); }
.topo__menu-icone i:last-child { transform: translateY(3px); }
.menu-aberto .topo__menu-icone i:first-child { transform: rotate(45deg); }
.menu-aberto .topo__menu-icone i:last-child { transform: rotate(-45deg); }
.menu-movel {
  position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: space-between;
  padding: 120px 28px 40px; background: var(--color-cream);
  clip-path: inset(0 0 100% 0); transition: clip-path 700ms cubic-bezier(.76, 0, .24, 1);
}
.menu-aberto .menu-movel { clip-path: inset(0 0 0 0); }
.menu-movel__nav { display: grid; }
.menu-movel__nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-line);
  font: 500 38px/1.05 var(--font-display); letter-spacing: -.02em; text-decoration: none;
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms var(--motion-ease), transform 700ms var(--motion-ease);
}
.menu-movel__nav a[aria-current="page"] { font-style: italic; }
.menu-movel__n { font: 600 11px/1 var(--font-body); letter-spacing: .14em; color: var(--color-mauve); }
.menu-movel__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--motion-ease), transform 700ms var(--motion-ease);
}
.menu-movel__email { font-size: 15px; font-weight: 500; }
.menu-aberto .menu-movel__nav a, .menu-aberto .menu-movel__pe {
  opacity: 1; transform: none; transition-delay: calc(250ms + var(--n) * 70ms);
}
html.menu-aberto { overflow: hidden; }

/* ---------- navegação e botão claro ---------- */
.topo__nav a[aria-current="page"]::after { transform: scaleX(1); }
.botao--claro { --varrer: var(--color-rose); background: var(--color-cream); color: var(--color-plum); border-color: var(--color-cream); }
.botao--claro:hover .botao__icone { transform: translate(2px, -2px); }

/* ---------- página de projetos ---------- */
.projetos { padding: var(--space-64) 0 var(--space-128); }
.projetos__cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.projetos__cabeca > * { grid-column: 1 / 9; }
.projetos__titulo { margin-top: var(--space-16); font-size: clamp(52px, 7vw, 96px); line-height: .96; letter-spacing: -.04em; }
.projetos__intro { margin-top: var(--space-32); max-width: 58ch; font-size: 18px; }
.projetos__provisorio { display: flex; align-items: center; gap: 10px; margin-top: var(--space-16); font-size: var(--type-small); color: var(--color-mauve); }
.projetos__estrela {
  flex: none; width: 14px; height: 14px; background: var(--color-mauve);
  -webkit-mask: var(--forma-estrela) center / contain no-repeat;
  mask: var(--forma-estrela) center / contain no-repeat;
}

/* Faixa: tags reaproveitam o chip do sistema; a ativa veste a cor da frente. */
.faixa {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--space-64); padding-top: var(--space-24); border-top: 1px solid var(--color-line);
}
.tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 18px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-plum);
  font-size: var(--type-small); font-weight: 500; white-space: nowrap;
  transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.tag:hover { border-color: var(--color-plum); box-shadow: var(--shadow-soft); }
.tag[aria-pressed="true"] { background: var(--tag-cor, var(--color-plum)); color: var(--tag-texto, var(--color-paper)); border-color: var(--tag-cor, var(--color-plum)); }
.tag[aria-pressed="true"][style*="--tag-cor: var(--color-paper)"],
.tag[aria-pressed="true"][style*="--tag-cor: var(--color-white)"] { border-color: var(--color-plum); }
.tag--filha { background: transparent; border-style: dashed; }
.tag--filha[aria-pressed="true"] { background: var(--color-plum); color: var(--color-paper); border-style: solid; border-color: var(--color-plum); }
.tag--volta { background: transparent; border-color: transparent; padding-left: 10px; }
.tag--volta:hover { box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.tag__volta { font-size: 16px; line-height: 1; }
/* Contagem em DM Sans tabular: os algarismos da Cormorant são de estilo antigo e descem da linha do rótulo. */
.tag__n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill); background: rgba(62, 18, 55, .08);
  font: 600 11px/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums;
}
.tag[aria-pressed="true"] .tag__n { background: rgba(252, 249, 245, .2); }
.tag[aria-pressed="true"][style*="--tag-cor: var(--color-rose)"] .tag__n,
.tag[aria-pressed="true"][style*="--tag-cor: var(--color-paper)"] .tag__n,
.tag[aria-pressed="true"][style*="--tag-cor: var(--color-white)"] .tag__n { background: rgba(62, 18, 55, .1); }
.tag-risco { width: 1px; height: 28px; margin: 0 6px; background: var(--color-line); }

.grade__contagem { margin: var(--space-24) 0 var(--space-32); font-size: var(--type-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mauve); }

/* Pista: referencial dos cartões absolutos. Colunas e vãos são diagramação (lidos pelo grade.js). */
.grade__pista { position: relative; --colunas: 3; --vao: 24px; --vao-v: 48px; transition: height var(--t-viagem, 720ms) var(--motion-ease); }

.cartao {
  position: absolute; left: 0; top: 0; visibility: visible;
  --atraso: 0ms;
  transition: transform var(--t-viagem, 720ms) var(--motion-ease), visibility 0s linear 0s;
}
.cartao.is-fora {
  visibility: hidden; pointer-events: none;
  transition: transform var(--t-viagem, 720ms) var(--motion-ease), visibility 0s linear var(--t-sai, 340ms);
}
.cartao__corpo {
  transform-origin: 50% 40%;
  transition: transform var(--t-entra, 520ms) var(--motion-ease) calc(var(--t-atraso-entrada, 160ms) + var(--atraso)),
              opacity var(--t-entra, 520ms) var(--motion-ease) calc(var(--t-atraso-entrada, 160ms) + var(--atraso));
}
.cartao.is-fora .cartao__corpo {
  transform: scale(0); opacity: 0;
  transition: transform var(--t-sai, 340ms) var(--motion-ease), opacity var(--t-sai, 340ms) var(--motion-ease);
}
.sem-viagem, .sem-viagem .cartao, .cartao.sem-viagem { transition: none !important; }

.cartao__capa {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-card); overflow: hidden;
  background-color: var(--fundo); color: var(--texto);
  box-shadow: inset 0 0 0 1px rgba(62, 18, 55, .08);
  transition: background-color var(--t-viagem, 720ms) var(--motion-ease), color var(--t-viagem, 720ms) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
.cartao--textura .cartao__capa { background-image: url('../assets/grid.svg'); box-shadow: inset 0 0 0 1px var(--color-line); }
.cartao:hover .cartao__capa { transform: translateY(calc(var(--motion-distance-hover) * -1)); box-shadow: var(--shadow-soft); }
.cartao__casa {
  position: absolute; top: var(--space-16); left: var(--space-24); right: var(--space-24);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--apoio);
}
.cartao__estrela {
  position: absolute; right: var(--space-16); bottom: var(--space-16); width: 16px; height: 16px; background: var(--apoio);
  -webkit-mask: var(--forma-estrela) center / contain no-repeat;
  mask: var(--forma-estrela) center / contain no-repeat;
}
.cartao__frase { position: relative; font: italic 500 clamp(22px, 2.1vw, 30px)/1.12 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.cartao__aspas { display: block; height: .5em; margin-bottom: .1em; font: 600 2.4em/1 var(--font-display); font-style: normal; color: var(--apoio); }
.cartao__sinal { font: 500 clamp(44px, 5vw, 72px)/1 var(--font-display); letter-spacing: -.03em; text-align: center; }
.cartao__nome-capa { font: 500 clamp(28px, 2.6vw, 38px)/1.02 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.cartao__legenda { padding: var(--space-16) 2px 0; }
.cartao__titulo { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; }
.cartao__meta { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--color-mauve); }
.cartao__resumo { margin-top: var(--space-8); font-size: 14px; line-height: 1.55; }
.cartao__frentes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-12); list-style: none; }
.cartao__frentes li {
  padding: 2px 10px; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
.cartao__frentes li.is-ativa { background: var(--color-plum); border-color: var(--color-plum); color: var(--color-paper); }
/* WordPress: o título é link e o cartão inteiro clica (o ::after cobre o cartão);
   "Ver original" fica por cima dele. */
.cartao__corpo { position: relative; }
.cartao__link { text-decoration: none; }
.cartao__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cartao__link:focus-visible { outline: none; }
.cartao__link:focus-visible::after { outline: 3px solid var(--semantic-focus); outline-offset: 6px; border-radius: var(--radius-card); }
.cartao:hover .cartao__link { text-decoration: underline; text-underline-offset: 5px; }
.cartao__original { position: relative; z-index: 2; }
.cartao__capa:has(.cartao__imagem) { padding: 0; }
.cartao__imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formulario__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cartao__original { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-12); font-size: 13px; font-weight: 600; }
.cartao__seta { display: inline-grid; width: 14px; height: 14px; }

/* ---------- abertura do monograma ---------- */
/* Painel ameixa sobre tudo. O monograma se desenha (contorno), recebe a cor, o
   nome sobe letra por letra; na saída o monograma voa ao cabeçalho e o painel
   recolhe de baixo para cima. Tempos em ABERTURA (js/site.js). */
html.sem-rolagem { overflow: hidden; }
.abertura {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  color: var(--color-cream); cursor: pointer;
}
/* O fundo é uma camada própria: recolher o fundo não pode cortar o monograma em voo. */
.abertura::before {
  content: ''; position: absolute; inset: 0; background: var(--color-plum);
  clip-path: inset(0 0 0 0); transition: clip-path var(--a-saida) cubic-bezier(.76, 0, .24, 1);
}
.abertura__centro { position: relative; }
.abertura__centro { display: grid; justify-items: center; gap: 28px; }
.abertura__marca { width: min(260px, 52vw); overflow: visible; transform-origin: 0 0; transition: transform var(--a-saida) cubic-bezier(.76, 0, .24, 1); }
.abertura__marca path {
  fill: var(--color-cream); fill-opacity: 0; stroke: var(--color-cream); stroke-width: 1.4;
  stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke;
  transition:
    stroke-dashoffset var(--a-traco) cubic-bezier(.65, 0, .35, 1),
    fill-opacity var(--a-preenche) var(--motion-ease) calc(var(--a-traco) * .7),
    stroke-opacity var(--a-preenche) var(--motion-ease) calc(var(--a-traco) * .85),
    fill 600ms var(--motion-ease);
}
.abertura.is-desenhando .abertura__marca path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
.abertura__nome {
  display: flex; justify-content: center; white-space: nowrap;
  font: italic 500 clamp(20px, 2.2vw, 28px)/1 var(--font-display); letter-spacing: .02em; color: var(--color-rose);
  overflow: hidden; padding-bottom: .15em;
  /* Centro ótico: o olho lê o monograma pela base (pés do m e do r); a bola do
     r avança à direita e puxaria o nome. A caixa tem a largura do monograma e
     reserva à direita o trecho que só a bola ocupa. */
  width: min(260px, 52vw); padding-right: 17%;
}
.abertura__nome span {
  display: inline-block; transform: translateY(110%); opacity: 0;
  transition: transform 900ms var(--motion-ease), opacity 900ms var(--motion-ease);
  transition-delay: calc(var(--a-nomeInicio) + var(--i) * var(--a-letra));
}
.abertura.is-desenhando .abertura__nome span { transform: none; opacity: 1; }
/* Saída: o nome desce e some primeiro; o painel recolhe; o monograma voa e vira ameixa. */
.abertura.is-saindo { pointer-events: none; }
.abertura.is-saindo::before { clip-path: inset(0 0 100% 0); }
.abertura.is-saindo .abertura__nome span { transform: translateY(-110%); opacity: 0; transition-duration: 500ms; transition-delay: calc(var(--i) * 15ms); }
.abertura.is-saindo .abertura__marca path { fill: var(--color-plum); transition: fill 500ms var(--motion-ease) calc(var(--a-saida) * .6); }

/* Enquanto a abertura toca, o cabeçalho e o hero esperam escondidos; quando ela
   termina, entram em fila (a transição de data-reveal faz o resto). */
html[data-abertura="rodando"] .topo__nav,
html[data-abertura="saindo"] .topo__nav,
html[data-abertura="rodando"] .topo__idioma,
html[data-abertura="saindo"] .topo__idioma,
html[data-abertura="rodando"] .hero [data-reveal],
html[data-abertura="saindo"] .hero [data-reveal],
html[data-abertura="rodando"] .hero__enfeites,
html[data-abertura="saindo"] .hero__enfeites { opacity: 0 !important; transform: translateY(28px) !important; filter: blur(6px) !important; }
html[data-abertura="rodando"] .topo__marca, html[data-abertura="saindo"] .topo__marca { visibility: hidden; }
/* O cabeçalho em si nunca se move nem some: o monograma em voo mira o lugar
   exato do logo, e a troca de um pelo outro acontece no mesmo quadro. */
.topo__nav, .topo__idioma, .hero__enfeites { transition: opacity 1000ms var(--motion-ease), transform 1100ms var(--motion-ease), filter 1000ms var(--motion-ease); }
html[data-abertura="fim"] .topo__nav { transition-delay: 100ms; }
html[data-abertura="fim"] .topo__idioma { transition-delay: 200ms; }
html[data-abertura="fim"] .hero__rotulo { transition-delay: 150ms; }
html[data-abertura="fim"] .hero__titulo { transition-delay: 300ms; }
html[data-abertura="fim"] .hero__lado { transition-delay: 550ms; }
html[data-abertura="fim"] .hero__enfeites { transition-delay: 800ms; }

/* ---------- troca de página: cortina ---------- */
.cortina, html[data-entrada]::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--monograma-creme) center / 96px auto no-repeat, var(--color-plum);
}
.cortina { transform: translateY(100%); transition: transform var(--c-cobrir) cubic-bezier(.76, 0, .24, 1); }
.cortina.is-cobrindo { transform: none; }
html[data-entrada="abrindo"]::after { transform: translateY(-100%); transition: transform var(--c-revelar, 1100ms) cubic-bezier(.76, 0, .24, 1); }

/* ---------- avisos (toast) ---------- */
.avisos { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: grid; gap: 8px; }
.aviso {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px;
  border-radius: var(--radius-card); background: var(--color-plum); color: var(--color-cream);
  box-shadow: var(--shadow-lifted); font-size: var(--type-small); font-weight: 500;
}
.aviso__fechar { display: inline-grid; width: 36px; height: 36px; padding: 9px; border: 0; border-radius: 50%; background: transparent; }
.aviso__fechar:hover { background: rgba(242, 235, 226, .12); }
.aviso :focus-visible { outline-color: var(--color-cream); }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .abordagem__texto, .revisao, .canais__texto, .canais__palco, .frentes__cabeca, .frentes__lista, .passagem__lado, .passagem__nomes { grid-column: 1 / -1; }
  .revisao { margin-top: var(--space-64); max-width: 640px; }
  .canais__palco { margin-top: var(--space-64); min-height: 0; }
  .frentes__cabeca, .passagem__lado { position: static; }
  .frentes__lista { margin-top: var(--space-48); }
  .passagem__nomes { margin-top: var(--space-64); }
  .hero__selo { width: 120px; height: 120px; right: 4%; top: 10%; }
  .formulario { padding: var(--space-32); }
}

@media (max-width: 860px) {
  /* Celular e tablet: menu vira botão + painel em tela cheia. */
  .topo__nav, .topo__idioma { display: none; }
  .topo__menu { display: inline-flex; }
  .menu-movel { display: flex; }
  .menu-movel[hidden] { display: none; }
  .topo__marca, .topo__menu { position: relative; z-index: 2; }
  .menu-aberto .topo { background: var(--color-cream) !important; border-bottom-color: transparent !important; backdrop-filter: none !important; }
  section[id] { scroll-margin-top: 80px; }
  .processo__trilho { --p: 1; }
  .passo__marca::after { opacity: 1 !important; transform: none !important; }
  .hero { min-height: 0; padding-top: var(--space-64); }
  .hero__lado { grid-column: 1 / -1; }
  .hero__lado { margin-top: var(--space-16); }
  .hero__selo { width: 96px; height: 96px; top: 2%; right: 2%; }
  .hero__selo-marca { width: 36px; }
  .pilares { grid-template-columns: 1fr; margin-top: var(--space-64); }
  .baralho__mesa { height: 500px; }
  .processo__linha { display: none; }
  .processo__passos { grid-template-columns: 1fr; gap: var(--space-48); }
  .projetos__cabeca > * { grid-column: 1 / -1; }
  .grade__pista { --colunas: 2; }
  .contato__texto, .formulario { grid-column: 1 / -1; }
  .formulario { margin-top: var(--space-64); }
}

@media (max-width: 640px) {
  .caixa, .topo__interior { width: calc(100% - 48px); }
  .topo__interior { min-height: 72px; }
  .topo__marca .monograma { width: 54px; }
  section[id] { scroll-margin-top: 72px; }
  body { font-size: 16px; }
  .eyebrow { font-size: 11px; letter-spacing: .12em; line-height: 1.6; }
  .hero { padding: var(--space-48) 0 var(--space-96); }
  .hero__titulo { margin-top: var(--space-24); font-size: clamp(54px, 16vw, 72px); line-height: 1.04; }
  .hero__lado { margin-top: var(--space-48); }
  .hero__lead { font-size: 16px; line-height: 1.75; }
  .hero__acoes { margin-top: var(--space-32); }
  .abordagem__titulo, .canais__titulo, .frentes__titulo, .destaques__titulo, .processo__titulo { font-size: 38px; line-height: 1.06; margin-top: var(--space-16); }
  .contato__titulo { font-size: 40px; line-height: 1.08; }
  .abordagem__lead, .canais__lead, .destaques__lead, .contato__lead { margin-top: var(--space-24); font-size: 16px; line-height: 1.75; }
  .revisao__frase { font-size: 22px; }
  .pilar { padding: 32px 28px; }
  .canais__abas { margin-top: var(--space-40, 40px); }
  .canais__exemplo { margin-top: var(--space-16); line-height: 1.6; }
  .frentes__todos { margin-top: var(--space-24); }
  .frente__nome { font-size: 26px; }
  .frente__descricao { font-size: 16px; }
  .baralho { margin-top: var(--space-64); }
  .carta:not(.is-ativa) > * { opacity: 0; transition: opacity 400ms var(--motion-ease); }
  .passagem__titulo { font-size: 28px; }
  .passagem__nomes li { font-size: 34px; }
  .processo__trilho { margin-top: var(--space-64); }
  .passo__titulo { font-size: 26px; }
  .contato__email a { font-size: 22px; }
  .contato__listas { display: block; }
  .rodape__interior { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .hero__digitado { padding-left: .5em; }
  /* No celular não há espaço livre para enfeite sem tocar texto: fica só uma estrela. */
  .hero__selo, .hero__estrela--1, .hero__estrela--3 { display: none; }
  .hero__estrela--2 { top: 3%; left: auto; right: 10%; }
  .carta { width: 78vw; transform: translateX(calc(var(--x, 0) * 46%)) scale(calc(1 - var(--ad, 0) * .1)) rotate(calc(var(--x, 0) * 3deg)); }
  .abordagem, .canais, .frentes, .destaques, .passagem, .processo, .contato { padding: 112px 0; }
  .hero__acoes .botao { flex: 1 1 100%; }
  .abordagem, .canais, .frentes, .destaques, .passagem, .processo, .contato { padding: 112px 0; }
  .revisao { rotate: 0deg; }
  .revisao__barra { flex-direction: column; align-items: stretch; }
  .revisao__pontos { display: none; }
  .revisao__etapas button { min-width: 0; }
  .revisao__frase { padding: var(--space-24) var(--space-24) 0; }
  .revisao__legenda { padding: var(--space-16) var(--space-24) 0; }
  .canais__abas button { font-size: 26px; }
  .frente__botao { grid-template-columns: 32px minmax(0, 1fr) 44px; gap: var(--space-12); padding-left: var(--space-12); }
  .frente__interior { padding-left: var(--space-12); }
  .passagem__nomes li:nth-child(even) { justify-self: start; padding-left: .6em; }
  .projetos { padding-top: var(--space-32); }
  .grade__pista { --colunas: 1; --vao-v: 40px; }
  .faixa { gap: 8px; }
  .tag { padding: 0 14px; }
  .formulario { padding: var(--space-24); }
  .avisos { left: 20px; right: 20px; bottom: 20px; }
}

/* ---------- movimento (presets do design system) ---------- */
@keyframes mr-fade { from { opacity: 0; } }
@keyframes mr-rise { from { opacity: 0; transform: translateY(var(--motion-distance-enter)); } }
@keyframes mr-scale { from { opacity: 0; transform: scale(var(--motion-scale-from)); } }
@keyframes mr-draw { from { stroke-dashoffset: 1; } }
@keyframes mr-mark { from { opacity: 0; clip-path: inset(0 100% 0 0); } }
.mr-fade { animation: mr-fade var(--motion-enter) var(--motion-ease) both; }
.mr-rise { animation: mr-rise var(--motion-enter) var(--motion-ease) both; }
.mr-scale { animation: mr-scale var(--motion-base) var(--motion-ease) both; }
.mr-mark { animation: mr-mark var(--motion-reveal) var(--motion-ease) both; }
.mr-draw path { stroke-dasharray: 1; stroke-dashoffset: 0; }

@keyframes riscar { from { background-size: 0% 2px; } }
@keyframes marcar { from { background-size: 0% .36em; } }
@keyframes giro-selo { to { rotate: 360deg; } }
@keyframes pulinho { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Revisão: o risco corre sobre o que sai; a marca-texto corre sob o que entra. */
  .revisao[data-etapa="1"] del { animation: riscar 900ms var(--motion-ease) both; }
  .revisao[data-etapa="1"] ins { animation: marcar 700ms var(--motion-ease) 800ms both; }
  .revisao[data-etapa="2"] .revisao__frase { animation: mr-fade var(--motion-enter) var(--motion-ease) both; }
  /* Canais: linhas do roteiro entram em fila; o "digitando" pula só enquanto existe. */
  .maquete--roteiro tbody tr { animation: mr-rise var(--motion-enter) var(--motion-ease) both; animation-delay: calc(120ms + var(--n) * 140ms); }
  /* Selo do hero: só o anel de texto gira, muito devagar; o monograma fica parado. */
  .hero__selo svg { animation: giro-selo 40s linear infinite; }
  .hero__cursor { animation: piscar 1.05s steps(1, end) infinite; }
  .hero.is-teclando .hero__cursor { animation: none; opacity: 1; }
  .whats__digitando i { animation: pulinho 900ms ease-in-out infinite; }
  .whats__digitando i:nth-child(2) { animation-delay: 150ms; }
  .whats__digitando i:nth-child(3) { animation-delay: 300ms; }
  /* Entrada mais longa e com desfoque leve (pedido: transições mais elegantes). */
  .js [data-reveal] { transition: opacity 1000ms var(--motion-ease), transform 1100ms var(--motion-ease), filter 1000ms var(--motion-ease); }
  .js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  .js [data-reveal="stagger"] { transition: none; }
  .js [data-reveal="stagger"]:not(.is-visible) { opacity: 1; transform: none; filter: none; }
  .js [data-reveal="stagger"] > * { transition: opacity 900ms var(--motion-ease), transform 1000ms var(--motion-ease); }
  .js [data-reveal="stagger"]:not(.is-visible) > * { opacity: 0; transform: translateY(24px); }
  .js [data-reveal="stagger"].is-visible > :nth-child(2) { transition-delay: 90ms; }
  .js [data-reveal="stagger"].is-visible > :nth-child(3) { transition-delay: 180ms; }
  .js [data-reveal="stagger"].is-visible > :nth-child(4) { transition-delay: 270ms; }
  .js [data-reveal="stagger"].is-visible > :nth-child(n+5) { transition-delay: 360ms; }
  .js [data-reveal]:not(.is-visible) .mr-draw path { stroke-dashoffset: 1; }
  .js [data-reveal].is-visible .mr-draw path { animation: mr-draw var(--motion-draw) var(--motion-ease) calc(var(--motion-enter) * .5) both; }
  .js [data-reveal].is-visible .mr-draw path + path { animation-delay: calc(var(--motion-enter) * .5 + var(--motion-draw) * .55); }
  .js [data-reveal]:not(.is-visible) .mr-mark-on-reveal { opacity: 0; clip-path: inset(0 100% 0 0); }
  .js [data-reveal].is-visible .mr-mark-on-reveal { animation: mr-mark var(--motion-reveal) var(--motion-ease) calc(var(--motion-enter) * .4) both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .processo__trilho { --p: 1 !important; }
  .hero__cursor { display: none; }
  .hero__estrela, .hero__selo { translate: none; }
  .nome__r { opacity: .8; }
  .botao:hover, .icone-botao:hover { transform: none; }
}