/*
  Owo Agbara, nova versão do site (rodada 4: refinamento).
  Cores: exatamente as do manual de marca (B96754, 86502E, 2D1B0F, FFE4DD, F2EFEB).
  Regra de acessibilidade: o terracota (B96754) é usado em títulos grandes, formas e detalhes,
  nunca em texto pequeno, porque o contraste com o fundo fica abaixo de 4,5:1.

  Tipografia: Articulat CF (licenciada) é a fonte oficial dos títulos; enquanto os arquivos não chegam,
  entra a Figtree. Apoio em Montserrat. Os destaques em itálico usam a Cormorant Garamond (serifa),
  um acabamento editorial que pode ser removido trocando a variável --font-serif por var(--font-display).
  As fontes ficam embutidas em fonts.css, por isso o site funciona também sem internet.

  Fonte oficial Articulat CF (licenciada): para usar, coloque os arquivos .woff2 em assets/fonts/
  e remova os comentários do bloco abaixo. Os títulos usam pesos leves (400 e 500).

  @font-face { font-family: "Articulat CF"; font-weight: 400; font-display: swap;
               src: url("../fonts/ArticulatCF-Regular.woff2") format("woff2"); }
  @font-face { font-family: "Articulat CF"; font-weight: 500; font-display: swap;
               src: url("../fonts/ArticulatCF-Medium.woff2") format("woff2"); }
*/

:root {
  /* Paleta oficial */
  --terracota: #B96754;
  --marrom: #86502E;
  --cacau: #2D1B0F;
  --rose: #FFE4DD;
  --nude: #F2EFEB;

  --font-display: "Articulat CF", "Figtree", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Tema claro */
  --bg: var(--nude);
  --bg-alt: var(--rose);
  --ink: var(--cacau);
  --ink-soft: color-mix(in srgb, var(--cacau) 78%, var(--nude));
  --line: color-mix(in srgb, var(--cacau) 15%, transparent);
  --link: var(--marrom);
  --deep-bg: var(--cacau);
  --deep-ink: var(--nude);
  --deep-soft: color-mix(in srgb, var(--nude) 78%, var(--cacau));

  --radius: 1.25rem;
  --header-h: 4.75rem;
  --page: var(--bg);
  --wave-h: clamp(2.5rem, 6vw, 5.5rem);
  --wave-h-hero: clamp(3.5rem, 9vw, 8rem);
  --hero-w1: var(--terracota);
  --hero-w2: var(--rose);
  --cta-a: var(--rose);
  --cta-b: color-mix(in srgb, var(--rose) 56%, var(--terracota));
  --cta-ink: var(--cacau);
  --cta-btn: var(--rose);

  /* Camadas das curvas (geradas a partir de ondas senoidais; veja o LEIA-ME) */
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 58.4C30 63.0 60 67.2 90 69.7C120 72.3 150 73.4 180 73.8C210 74.1 240 72.9 270 71.9C300 70.9 330 68.9 360 67.6C390 66.3 420 65.0 450 64.3C480 63.5 510 63.3 540 63.0C570 62.6 600 62.8 630 62.1C660 61.3 690 60.5 720 58.4C750 56.4 780 53.4 810 49.8C840 46.3 870 41.3 900 37.0C930 32.7 960 27.4 990 23.8C1020 20.3 1050 16.9 1080 15.6C1110 14.3 1140 14.4 1170 16.2C1200 18.0 1230 21.9 1260 26.2C1290 30.5 1320 36.8 1350 42.2C1380 47.5 1410 53.8 1440 58.4V120H0Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 82.2C30 83.3 60 84.3 90 83.5C120 82.6 150 80.5 180 77.2C210 73.8 240 68.6 270 63.5C300 58.4 330 51.7 360 46.7C390 41.6 420 36.3 450 33.2C480 30.2 510 28.4 540 28.5C570 28.6 600 31.0 630 34.0C660 37.0 690 42.2 720 46.6C750 51.0 780 56.6 810 60.5C840 64.5 870 68.1 900 70.3C930 72.5 960 73.4 990 73.8C1020 74.2 1050 73.1 1080 72.6C1110 72.1 1140 70.9 1170 70.8C1200 70.7 1230 71.0 1260 72.0C1290 73.0 1320 75.1 1350 76.8C1380 78.5 1410 81.1 1440 82.2V120H0Z'/%3E%3C/svg%3E");
  --wave-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 67.5C30 64.9 60 61.4 90 59.1C120 56.7 150 54.3 180 53.4C210 52.5 240 52.4 270 53.7C300 54.9 330 57.7 360 60.8C390 64.0 420 68.6 450 72.6C480 76.6 510 81.4 540 84.8C570 88.2 600 91.4 630 93.1C660 94.9 690 95.5 720 95.3C750 95.2 780 93.7 810 92.2C840 90.8 870 88.5 900 86.8C930 85.2 960 83.4 990 82.4C1020 81.3 1050 80.8 1080 80.4C1110 80.0 1140 80.3 1170 80.1C1200 79.8 1230 79.8 1260 79.0C1290 78.1 1320 76.8 1350 74.9C1380 73.0 1410 70.1 1440 67.5V120H0Z'/%3E%3C/svg%3E");

  /* Textura de grão, aplicada só nas faixas escuras: dá um acabamento de papel ao degradê */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tema escuro: segue o aparelho, ou a escolha explícita da pessoa */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--cacau);
    --bg-alt: color-mix(in srgb, var(--cacau) 78%, var(--marrom));
    --ink: var(--nude);
    --ink-soft: color-mix(in srgb, var(--nude) 76%, var(--cacau));
    --line: color-mix(in srgb, var(--nude) 16%, transparent);
    --link: var(--rose);
    --deep-bg: color-mix(in srgb, var(--cacau) 58%, #000);
    --hero-w1: color-mix(in srgb, var(--terracota) 45%, var(--cacau));
    --hero-w2: var(--marrom);
    --cta-a: color-mix(in srgb, var(--cacau) 55%, var(--marrom));
    --cta-b: color-mix(in srgb, var(--cacau) 55%, var(--terracota));
    --cta-ink: var(--nude);
    --cta-btn: var(--cacau);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--cacau);
  --bg-alt: color-mix(in srgb, var(--cacau) 78%, var(--marrom));
  --ink: var(--nude);
  --ink-soft: color-mix(in srgb, var(--nude) 76%, var(--cacau));
  --line: color-mix(in srgb, var(--nude) 16%, transparent);
  --link: var(--rose);
  --deep-bg: color-mix(in srgb, var(--cacau) 58%, #000);
  --hero-w1: color-mix(in srgb, var(--terracota) 45%, var(--cacau));
  --hero-w2: var(--marrom);
  --cta-a: color-mix(in srgb, var(--cacau) 55%, var(--marrom));
  --cta-b: color-mix(in srgb, var(--cacau) 55%, var(--terracota));
  --cta-ink: var(--nude);
  --cta-btn: var(--cacau);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.04rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--terracota); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }
section[id], article[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
main, .site-footer { overflow-x: clip; }

.container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px));
}

/* Tipografia: títulos leves, com um destaque em serifa itálica (.it) */
.display, .h2, .panel-title, .quote, .mission, .cta-title, .name-lead { font-family: var(--font-display); font-weight: 450; letter-spacing: -.035em; }
.display { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; text-wrap: balance; }
.display .line { display: block; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.25; letter-spacing: -.015em; }
.it { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.16em; letter-spacing: -.01em; line-height: .9; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); font-weight: 350; line-height: 1.7; max-width: 38rem; color: var(--ink-soft); }
.note { color: var(--ink-soft); font-size: 1rem; margin-top: 1.25rem; }
.prose { display: grid; gap: 1.15rem; max-width: 40rem; }
.accent { color: var(--terracota); }

/* Marcador de seção: letras espaçadas e um fio fino, sem caixa */
.eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  color: var(--link); font: 600 .7rem/1.2 var(--font-body); letter-spacing: .26em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; flex: none; }

/* Botões e links */
.actions { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.1rem; padding: .8rem 1.7rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  font: 500 .95rem/1.1 var(--font-body); letter-spacing: .02em; text-decoration: none; text-align: center;
  transition: transform .3s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--ink) 80%, transparent); }
.btn--soft { background: var(--rose); color: var(--cacau); }
.btn--soft:hover { box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--rose) 60%, transparent); }
.btn--ghost { border-color: color-mix(in srgb, currentColor 55%, transparent); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: currentColor; }
.btn--line { border-color: color-mix(in srgb, currentColor 40%, transparent); background: transparent; color: inherit; }
.btn--line:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.btn .sym { flex: none; width: 1.25em; height: 1.25em; }
.btn--arrow::after, .link-arrow::after { content: "→"; font-weight: 400; transition: transform .3s var(--ease); }
.btn--arrow:hover::after, .link-arrow:hover::after { transform: translateX(5px); }
.link-arrow {
  display: inline-flex; gap: .6rem; font-weight: 500; color: var(--link); text-decoration: none; letter-spacing: .01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .25em;
  transition: background-size .35s var(--ease);
}
.link-arrow:hover { background-size: 40% 1px; }

/* Faixas de seção */
.band { position: relative; padding-block: clamp(4.5rem, 10vw, 9rem); }
.band > .container { position: relative; z-index: 1; }
.band--alt { background: var(--bg-alt); --wave-to: var(--bg-alt); }
.band--clay { --wave-to: var(--terracota); }
.band--deep {
  background: var(--deep-bg); color: var(--deep-ink);
  --bg: var(--deep-bg); --ink: var(--deep-ink); --ink-soft: var(--deep-soft);
  --line: color-mix(in srgb, var(--nude) 16%, transparent); --link: var(--rose);
}
.band--deep::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--grain) 0 0 / 180px 180px; opacity: .09; mix-blend-mode: overlay;
}
.band--clay {
  background: var(--terracota); color: #fff;
  --bg: var(--terracota); --ink: #fff; --ink-soft: #fff; --link: #fff;
  --line: color-mix(in srgb, #fff 35%, transparent);
}
.band--clay .btn--solid { background: var(--cacau); color: var(--rose); }
.band--clay .btn--soft { background: var(--rose); color: var(--cacau); }
.band--clay :focus-visible { outline-color: var(--cacau); }

.section-head { display: grid; gap: 1.3rem; justify-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 5fr 6fr; }
  .split--rev > :first-child { order: 2; }
}

/* Cabeçalho: fixo, transparente sobre a abertura; ao rolar, ganha um vidro fosco com um fio fino */
.site-header {
  --h-ink: var(--ink);
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--h-ink);
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
.hero-dark .site-header:not(.is-stuck) { --h-ink: var(--nude); }
.site-header.is-stuck, .site-header:has(.nav.is-open) {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  border-bottom-color: var(--line);
}
.site-header:has(.nav.is-open) { --h-ink: var(--ink); background: var(--bg); }
.header-in { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); transition: min-height .4s var(--ease); }
.is-stuck .header-in { min-height: 4rem; }
.brand { display: inline-block; line-height: 0; text-decoration: none; color: inherit; }
.sym, .logo { fill: currentColor; display: block; }
.logo--h { width: 10.5rem; aspect-ratio: 900 / 195; }
.logo--v { width: 9rem; aspect-ratio: 640 / 386; }
.site-header .brand { transition: opacity .3s; }
.site-header .brand:hover { opacity: .75; }
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--terracota), var(--marrom)); transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.9rem; }
.nav a:not(.btn) {
  position: relative; padding: .5rem .1rem; text-decoration: none;
  font-weight: 500; font-size: .9rem; letter-spacing: .03em; color: inherit;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: .1rem; right: .1rem; bottom: .15rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav .nav-cta { min-height: 2.6rem; padding: .55rem 1.25rem; font-size: .88rem; }
.nav-toggle {
  display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: transparent; cursor: pointer; position: relative; color: inherit;
}
.nav-toggle span { position: absolute; left: 50%; width: 1.1rem; height: 1px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); translate: -50% 0; }
.nav-toggle span:first-child { top: calc(50% - 3px); }
.nav-toggle span:last-child { top: calc(50% + 3px); }
.nav-toggle[aria-expanded="true"] span:first-child { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 50%; transform: rotate(-45deg); }

@media (max-width: 52rem) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem max(1.25rem, env(safe-area-inset-left, 0px)) 1.75rem;
    background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .js .nav:not(.is-open) { display: none; }
  .nav a:not(.btn) { padding: 1.05rem .1rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav .nav-cta { margin: 1.25rem 0 0; }
}

/* Curvas que dividem as cores entre as faixas (três camadas, com movimento lento) */
.wave {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--wave-h);
  overflow: hidden; pointer-events: none; z-index: 3;
  color: var(--wave-to, var(--page));
}
.wave--in { bottom: -1px; --wave-to: var(--page); }
.wave--alt { --wave-to: var(--bg-alt); }
.wave--deep { --wave-to: var(--deep-bg); }
.wave--clay { --wave-to: var(--terracota); }
.wave i {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 100%;
  -webkit-mask: var(--m) 0 100% / 50% 100% repeat-x; mask: var(--m) 0 100% / 50% 100% repeat-x;
  background: var(--wc, currentColor);
  translate: 0 calc(var(--wy, 0) * var(--wk, 0) * 1px);
  animation: waveflow var(--wt, 90s) linear infinite;
}
.wave i:nth-child(1) { --m: var(--wave-a); --wk: .05; --wt: 130s; --wc: color-mix(in srgb, currentColor 35%, transparent); }
.wave i:nth-child(2) { --m: var(--wave-b); --wk: .025; --wt: 95s; animation-direction: reverse; --wc: color-mix(in srgb, currentColor 65%, transparent); }
.wave i:nth-child(3) { --m: var(--wave-c); --wt: 75s; --wc: currentColor; }
.wave--hero { height: var(--wave-h-hero); }
.wave--hero i:nth-child(1) { --wc: var(--hero-w1); }
.wave--hero i:nth-child(2) { --wc: var(--hero-w2); }
.wave--deep i:nth-child(1) { --wc: var(--terracota); }
.wave--deep i:nth-child(2) { --wc: var(--marrom); }
.js .wave:not(.on) i { animation-play-state: paused; }
@keyframes waveflow { to { transform: translate3d(-50%, 0, 0); } }

/* Camadas decorativas com profundidade: movem com a rolagem (--sy) e com o ponteiro (--mx, --my) */
.deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 var(--wave-h), #000 calc(100% - var(--wave-h)), transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 var(--wave-h), #000 calc(100% - var(--wave-h)), transparent 100%);
}
.hero .deco, .page-hero .deco { -webkit-mask: none; mask: none; }
.deco-item {
  position: absolute; display: block;
  transform: translate3d(0, calc(var(--sy, 0) * var(--sd, 0) * 1px), 0);
  translate: calc(var(--mx, 0) * var(--pd, 0) * 1px) calc(var(--my, 0) * var(--pd, 0) * .6px);
}
.deco-item .sym { width: 100%; height: 100%; }
.d-leaf { width: min(50rem, 95vw); aspect-ratio: 1; left: -16%; bottom: -38%; color: var(--rose); opacity: .05; }
.d-leaf .sym { animation: spin 160s linear infinite; }
.d-leaf--soft { left: auto; right: -14%; top: -6%; bottom: auto; width: min(38rem, 85vw); color: var(--terracota); opacity: .08; }
.d-leaf--cta { left: auto; right: -10%; top: -20%; bottom: auto; width: min(40rem, 90vw); color: #fff; opacity: .12; }
.d-leaf--page { left: auto; right: -6%; top: -30%; bottom: auto; width: min(32rem, 80vw); color: var(--ink); opacity: .06; }
.d-big { right: -3%; top: 50%; margin-top: -17rem; width: min(34rem, 75vw); aspect-ratio: 1; color: var(--ink); opacity: .045; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Início: abertura com degradê, texto à esquerda e a órbita integrada à direita */
.hero {
  isolation: isolate; --gx: 50%; --gy: 74%;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) calc(var(--wave-h-hero) + clamp(1.5rem, 3vw, 2.5rem));
  background:
    radial-gradient(48rem 40rem at var(--gx) var(--gy), color-mix(in srgb, var(--terracota) 40%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, color-mix(in srgb, var(--marrom) 55%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--cacau) 82%, #000) 0%, var(--cacau) 45%, color-mix(in srgb, var(--cacau) 58%, var(--marrom)) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(24rem circle at var(--spot-x, 70%) var(--spot-y, 40%), color-mix(in srgb, var(--rose) 12%, transparent), transparent 62%);
  opacity: var(--spot-o, 0); transition: opacity .6s;
}
.hero-grid { display: grid; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 1.8rem; justify-items: start; max-width: min(36rem, 52%); }
@media (max-width: 63.99rem) { .hero-copy { max-width: none; } }
.hero .lead { max-width: 30rem; }
.hero .actions { margin-top: .4rem; }
.hero .display { font-size: clamp(2.35rem, 4.5vw, 3.9rem); font-weight: 400; }
.hero .display .rot { font-weight: 450; }

.rot { display: inline-grid; vertical-align: bottom; color: var(--terracota); }
.rot-stack { display: inline-grid; justify-items: start; transition: width .6s var(--ease); }
.rot-stack > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(45%);
  transition: opacity .6s, transform .6s var(--ease);
}
.rot-stack > span.on { opacity: 1; transform: none; }
.rot-stack > span.out { opacity: 0; transform: translateY(-45%); }

@media (min-width: 64rem) {
  .hero { --gx: 72%; --gy: 50%; display: flex; flex-direction: column; justify-content: center; min-height: clamp(42rem, 100svh, 58rem); }
}

/* Os cinco símbolos em órbita: ocupam o lado direito da abertura, sobre o brilho do degradê.
   O centro fica vazio; ao passar o mouse sobre um símbolo, o nome e o significado aparecem ali. */
.orbit {
  position: relative; width: min(36rem, calc(100% - 2.5rem)); aspect-ratio: 1; margin: 2.5rem auto 0;
  isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; z-index: 1;
}
@media (min-width: 64rem) {
  .orbit {
    position: absolute; margin: 0; width: min(38rem, 44vw); aspect-ratio: 1.15;
    right: max(.5rem, calc((100% - 84rem) / 2)); top: 50%;
    translate: 0 calc(-50% + (var(--header-h) - var(--wave-h-hero)) / 2);
  }
}
.orbit.is-live .o-hit { cursor: grab; }
.orbit.is-drag .o-hit { cursor: grabbing; }
.o-hit { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; border-radius: 50%; pointer-events: auto; }
.o-ring {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--rose) 22%, transparent);
}
.o-ring--1 { width: 80%; height: 60%; }
.o-ring--2 { width: 102%; height: 80%; border-color: color-mix(in srgb, var(--rose) 11%, transparent); }
.o-ring--3 { width: 126%; height: 100%; border: 1px dashed color-mix(in srgb, var(--rose) 8%, transparent); animation: spin 240s linear infinite; }
.o-ring--2, .o-ring--3 { translate: calc(-50% + var(--mx, 0) * -8px) calc(-50% + var(--my, 0) * -5px); }
.o-glow {
  position: absolute; inset: -26% -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--terracota) 34%, transparent), transparent);
  animation: pulse 8s ease-in-out infinite alternate;
  translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px);
}
@keyframes pulse { from { opacity: .5; scale: .95; } to { opacity: 1; scale: 1.05; } }

.o-center {
  position: absolute; left: 50%; top: 50%; width: min(15rem, 54%); translate: -50% -50%; z-index: 4;
  display: grid; justify-items: center; gap: .55rem; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s var(--ease);
}
.orbit.has-text .o-center { opacity: 1; transform: none; }
.o-tag { font: 600 .62rem/1.3 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--terracota) 55%, var(--rose)); }
.o-name { font: italic 500 clamp(2.1rem, 4.2vw, 3.4rem)/.95 var(--font-serif); letter-spacing: -.01em; color: var(--rose); }
.o-meaning { font: 350 clamp(.8rem, 1.05vw, .92rem)/1.55 var(--font-body); color: color-mix(in srgb, var(--nude) 82%, var(--cacau)); text-wrap: balance; }

.o-coins { position: absolute; inset: 0; pointer-events: none; }
.o-coin {
  position: absolute; left: var(--x); top: var(--y); width: 21%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto; text-decoration: none; color: var(--rose);
  transform: translate(-50%, -50%) scale(var(--s, 1)); opacity: var(--o, 1);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 86%, #fff) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 84%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent);
  box-shadow: 0 20px 30px -18px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .2);
  transition: box-shadow .4s, border-color .4s, filter .4s;
  -webkit-user-drag: none;
}
.o-coin .sym { width: 54%; height: 54%; transition: transform .5s var(--ease); }
.orbit.is-live .o-coin { left: 0; top: 0; will-change: transform; }
.o-coin:hover, .o-coin:focus-visible {
  border-color: var(--rose); outline-offset: 6px; outline-color: color-mix(in srgb, var(--rose) 70%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--rose) 10%, transparent), 0 0 38px -4px color-mix(in srgb, var(--c) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .3);
}
.o-coin:hover .sym, .o-coin:focus-visible .sym { transform: scale(1.14); }
.orbit.has-text .o-coin:not(:hover):not(:focus-visible) { filter: saturate(.55) brightness(.78); }

/* O significado do nome: tipografia aberta, sem caixas */
.name { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); justify-items: start; }
.name-lead { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.08; max-width: 18em; text-wrap: balance; font-weight: 400; }
.name-trio {
  display: grid; align-items: center; gap: 1.4rem 2.2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
}
.nw { display: grid; gap: 1rem; justify-items: start; }
.nw-word { font-size: clamp(3.4rem, 9vw, 7.2rem); line-height: .9; letter-spacing: -.02em; color: var(--ink); font-size-adjust: none; }
.nw-gloss {
  display: inline-flex; align-items: center; gap: .8rem;
  font: 600 .7rem/1.2 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--link);
}
.nw-gloss::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: .7; }
.nw-op { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; color: var(--terracota); font-weight: 400; }
.nw--result { gap: .15rem; }
.nw-res { font: italic 500 clamp(1.7rem, 3vw, 2.6rem)/1.12 var(--font-serif); color: var(--terracota); letter-spacing: -.005em; }
.nw-res:first-child { color: var(--ink); }
@media (min-width: 52rem) {
  .name-trio { grid-template-columns: auto auto auto auto 1fr; justify-content: start; }
  .nw--result { padding-left: .5rem; }
}
.name-text { display: grid; gap: 1.15rem; max-width: 40rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* Princípios: quatro círculos interligados, finos e translúcidos */
.principles { --d: clamp(14rem, 23.5vw, 19.5rem); display: flex; align-items: flex-start; justify-content: center; margin-top: clamp(4rem, 8vw, 7rem); }
.principles li {
  position: relative; flex: none; width: var(--d); aspect-ratio: 1; margin-left: calc(var(--d) * -.15); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: .55rem; text-align: center; padding: calc(var(--d) * .18);
  background: color-mix(in srgb, var(--c) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
}
.principles li:first-child { margin-left: 0; }
.principles li, .js .principles li {
  transition: transform .9s var(--ease) calc(var(--i, 0) * 70ms), translate .5s var(--ease), scale .5s var(--ease), background-color .4s, border-color .4s, opacity .9s;
}
.principles li:hover { scale: 1.04; translate: 0 -.3rem; z-index: 2; border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.principles .h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 450; }
.principles p { color: var(--ink-soft); font-size: clamp(.82rem, 1.05vw, .92rem); line-height: 1.5; }
@media (max-width: 55.99rem) {
  .principles { --d: min(15rem, 72vw); flex-direction: column; align-items: center; }
  .principles li { margin-left: 0; margin-top: calc(var(--d) * -.14); }
  .principles li:first-child { margin-top: 0; }
  .principles li:nth-child(odd) { left: -7%; }
  .principles li:nth-child(even) { left: 7%; }
}

/* Para quem: um caminho leve, com pontos que se acendem ao rolar */
.who { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56rem) { .who { grid-template-columns: 5fr 6fr; align-items: center; } }
.who-head { display: grid; gap: 1.3rem; justify-items: start; }
.h2--light { font-weight: 350; }
.closing { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; font-weight: 400; color: var(--ink-soft); }
.path { position: relative; display: grid; max-width: 40rem; padding-left: 2.7rem; }
.path::before {
  content: ""; position: absolute; left: calc(.5rem - .5px); top: 1.5rem; bottom: 1.5rem;
  border-left: 1px solid color-mix(in srgb, var(--terracota) 55%, transparent);
}
.path li {
  position: relative; padding-block: 1.05rem; color: var(--ink);
  font: 400 clamp(1.05rem, 1.45vw, 1.2rem)/1.6 var(--font-body);
}
.path li::before {
  content: ""; position: absolute; left: -2.7rem; top: 1.45rem; width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid var(--terracota); background: var(--bg-alt);
  transition: background-color .7s, scale .4s var(--ease);
}
.js .path li.is-in::before { background: var(--terracota); }
.path li:hover::before { scale: 1.3; }

/* Seletor de trilhas: cada símbolo é um disco */
.coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: 1.6rem clamp(.6rem, 2vw, 1.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
.coin {
  display: grid; justify-items: center; align-content: start; gap: .9rem; padding: .5rem .25rem; cursor: pointer;
  background: none; border: 0; color: var(--ink); font: 450 .88rem/1.4 var(--font-body); text-align: center;
}
.coin-disc {
  width: min(100%, 7.5rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--rose);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 86%, #fff) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 84%, #000) 100%);
  box-shadow: 0 18px 26px -18px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: transform .5s var(--ease), box-shadow .4s;
}
.coin-disc .sym { width: 54%; height: 54%; transition: transform .5s var(--ease); }
.coin:hover .coin-disc { transform: translateY(-4px); }
.coin:hover .coin-disc .sym { transform: scale(1.1); }
.coin[aria-pressed="true"] .coin-disc {
  transform: translateY(-6px);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--c), 0 24px 30px -20px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .22);
}
.coin-label { max-width: 9rem; text-wrap: balance; color: var(--ink-soft); transition: color .3s; }
.coin:hover .coin-label, .coin[aria-pressed="true"] .coin-label { color: var(--ink); }
.coin[aria-pressed="true"] .coin-label { font-weight: 600; }

.panels { perspective: 1200px; }
.panel {
  display: grid; gap: 2rem; align-items: center; padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  animation: panelIn .8s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.panel-body { display: grid; gap: 1rem; justify-items: start; }
.panel-tag { font: 600 .7rem/1.3 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--link); }
.panel-title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .9; letter-spacing: -.015em; color: var(--ink); }
.panel-meaning { font-weight: 450; color: var(--terracota); letter-spacing: .01em; }
.panel-body > p:not([class]) { max-width: 34rem; color: var(--ink-soft); }
@media (min-width: 52rem) { .panel { grid-template-columns: 1fr 16rem; gap: 3rem; } }
.panels-all { margin-top: 2rem; }

/* Palco do símbolo: disco com relevo suave, anéis finos e inclinação 3D */
[data-tilt] { rotate: var(--tilt, none); transition: rotate .35s ease-out; }
.stage { position: relative; width: min(72%, 14rem); aspect-ratio: 1; justify-self: center; transform-style: preserve-3d; margin-block: 1.6rem; }
.stage-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 84%, #fff) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: 0 36px 50px -30px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .22);
}
.stage-ring { position: absolute; inset: -9%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c) 75%, var(--ink)); opacity: .5; translate: 0 0 -20px; animation: spin 70s linear infinite; }
.stage-ring--2 { inset: -19%; border-style: solid; opacity: .16; translate: 0 0 -40px; animation-duration: 110s; animation-direction: reverse; }
.stage-sym { position: absolute; inset: 21%; color: var(--rose); translate: 0 0 56px; filter: drop-shadow(0 10px 10px rgb(0 0 0 / .28)); animation: symPop .9s var(--ease); }
.stage-sym .sym { width: 100%; height: 100%; }
@keyframes symPop { from { opacity: 0; scale: .75; rotate: -12deg; } }

/* A fundadora: a foto fica ao fundo do texto (sem coluna própria) e se move com o ponteiro */
.dila-sec { isolation: isolate; }
.dila-text { max-width: 40rem; }
.dila-text .eyebrow { margin-bottom: 1.5rem; }
.dila {
  position: absolute; z-index: 0; margin: 0; pointer-events: none;
  right: max(1.25rem, calc((100% - 75rem) / 2 + 1.25rem)); bottom: 0;
  height: min(calc(100% - 2.5rem), 47rem, 57vw); aspect-ratio: 890 / 1500;
  transform: perspective(1300px) rotateY(calc(var(--mx, 0) * -6deg)) rotateX(calc(var(--my, 0) * 3deg));
  transform-origin: 50% 90%; transition: transform .35s ease-out;
}
.dila::before {
  content: ""; position: absolute; inset: 4% -22% 0; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--terracota) 22%, transparent), transparent 92%);
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 7px);
}
.dila-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%;
  translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -8px);
  filter: drop-shadow(0 24px 28px rgb(0 0 0 / .32));
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%); mask: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%);
}
/* Página Sobre: o texto é longo, então a foto acompanha a rolagem ao lado dele */
@media (min-width: 56rem) {
  .dila-rail {
    --ph: min(calc(100vh - var(--header-h) - 3rem), 47rem, 57vw); --pad: clamp(4.5rem, 10vw, 9rem);
    position: absolute; z-index: 0; top: var(--pad); bottom: 0; pointer-events: none;
    right: max(1.25rem, calc((100% - 75rem) / 2 + 1.25rem)); width: calc(var(--ph) * .5933);
  }
  .dila-rail .dila {
    position: sticky; top: calc(var(--header-h) + 1.5rem); right: auto; bottom: auto; width: 100%; height: var(--ph); aspect-ratio: auto;
  }
}
@media (max-width: 55.99rem) {
  .dila-sec { padding-top: clamp(2rem, 6vw, 3rem); }
  .dila { position: relative; right: auto; bottom: auto; height: auto; width: min(64%, 17rem); margin: 0 auto -4.5rem; }
  .dila-photo { position: relative; display: block; width: 100%; height: auto; -webkit-mask: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%); mask: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%); }
}

/* Citação */
.quote { font-size: clamp(1.7rem, 3.5vw, 2.7rem); line-height: 1.2; text-wrap: balance; font-weight: 400; }
.quote-by { margin-top: 1.4rem; font: 500 .72rem/1.5 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.bio { display: grid; gap: 1.1rem; margin-top: 1.6rem; max-width: 36rem; color: var(--ink-soft); }

/* Chamada final: cartão claro com o ícone do WhatsApp */
.cta { padding-block: clamp(3.5rem, 8vw, 6rem) calc(var(--wave-h) + clamp(2rem, 5vw, 3.5rem)); }
.cta-card {
  --ink: var(--cta-ink); --bg: var(--cta-btn); --link: var(--cta-ink); --ink-soft: var(--cta-ink);
  position: relative; overflow: hidden; isolation: isolate; max-width: 62rem; margin-inline: auto; color: var(--ink);
  display: grid; justify-items: center; gap: 1.1rem; text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.4rem, 6vw, 4.5rem); border-radius: clamp(1.6rem, 4vw, 2.8rem);
  background: linear-gradient(140deg, var(--cta-a) 0%, var(--cta-b) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 44px 60px -44px color-mix(in srgb, var(--terracota) 75%, transparent);
}
.cta-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-deco span {
  position: absolute; right: -7%; bottom: -34%; width: min(26rem, 64%); aspect-ratio: 1; color: #fff; opacity: .26;
  translate: calc(var(--mx, 0) * var(--pd, 0) * 1px) calc(var(--my, 0) * var(--pd, 0) * .6px);
}
.cta-deco .sym { width: 100%; height: 100%; animation: spin 160s linear infinite; }
.cta-title { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.04; text-wrap: balance; font-weight: 400; }
.cta-sub { font: 350 clamp(1.05rem, 1.7vw, 1.2rem)/1.6 var(--font-body); max-width: 30rem; }
.cta .actions { justify-content: center; margin-top: 1.2rem; }

/* Páginas internas */
.page-hero { padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) calc(var(--wave-h-hero) + clamp(1rem, 2vw, 1.5rem)); overflow: visible; }
.page-hero .container { display: grid; gap: 1.5rem; justify-items: start; }
.page-hero .display { font-weight: 400; }
.subnav { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin-top: 1rem; }
.subnav a {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 0; text-decoration: none;
  font-weight: 500; font-size: .9rem; letter-spacing: .02em; border-bottom: 1px solid transparent;
  transition: border-color .3s, opacity .3s;
}
.subnav a:hover, .subnav a[aria-current="true"] { border-bottom-color: currentColor; }
.mini { flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: inline-grid; place-items: center; color: var(--rose); background: var(--c, var(--terracota)); }
.mini .sym { width: 60%; height: 60%; }

.trilha { padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.trilha-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) {
  .trilha-grid { grid-template-columns: 7fr 4fr; gap: 4rem; }
  .trilha:nth-of-type(even) .trilha-grid > .stage { order: -1; }
  .trilha:nth-of-type(even) .trilha-grid { grid-template-columns: 4fr 7fr; }
  .trilha .stage { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.trilha-copy { display: grid; gap: 1.3rem; justify-items: start; }
.trilha .h2 { font-weight: 400; }
.trilha .meta { display: grid; gap: 0; width: 100%; max-width: 40rem; border-block: 1px solid var(--line); }
.trilha .meta div { display: grid; gap: .25rem; padding-block: 1rem; }
.trilha .meta div + div { border-top: 1px solid var(--line); }
.trilha .meta dt { font: 600 .66rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--link); }
.trilha .meta dd { color: var(--ink); }
.trilha .for { font: 600 .7rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--link); margin-top: .6rem; }
.trilha .for-text { color: var(--ink-soft); max-width: 40rem; }
.trilha .stage { width: min(72%, 20rem); justify-self: center; }
.trilha-grid { perspective: 1200px; }

/* Lista de soluções do Owo Hub: um índice numerado, com fios finos */
.services { counter-reset: s; display: grid; width: 100%; max-width: 40rem; border-top: 1px solid var(--line); margin-block: .4rem; }
.services li {
  counter-increment: s; display: flex; align-items: baseline; gap: 1.2rem; padding-block: 1rem; border-bottom: 1px solid var(--line);
  font-weight: 450; transition: padding-left .4s var(--ease), color .3s;
}
.services li::before { content: counter(s, decimal-leading-zero); font-variant-numeric: lining-nums; flex: none; font: italic 500 1.35rem/1 var(--font-serif); color: var(--terracota); min-width: 1.9rem; }
.services li:hover { padding-left: .5rem; }

.trio { counter-reset: t; display: grid; gap: 2rem; }
.trio > li {
  counter-increment: t; border-top: 1px solid var(--line); padding-top: 1.4rem; display: grid; gap: .6rem; align-content: start;
}
.trio > li::before { content: counter(t, decimal-leading-zero); font-variant-numeric: lining-nums; font: italic 500 1.5rem/1 var(--font-serif); color: var(--terracota); margin-bottom: .4rem; }
.trio p { color: var(--ink-soft); font-size: .98rem; }
@media (min-width: 52rem) { .trio { grid-template-columns: repeat(3, 1fr); gap: 2.8rem; } }
@media (min-width: 52rem) { .trio--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .trio--4 { grid-template-columns: repeat(4, 1fr); } }

/* Sobre */
.cols-2 { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .cols-2 { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.cols-2 h3 { margin-bottom: .9rem; }
.cols-2 p { color: var(--ink-soft); }
.mission { font-size: clamp(1.8rem, 4.4vw, 3.3rem); line-height: 1.14; max-width: 56rem; text-wrap: balance; font-weight: 400; margin-top: 1.5rem; }
.tagline { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.15; color: var(--terracota); }

/* Essência: o texto à esquerda e a roda dos quatro elementos à direita */
.essence { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .essence { grid-template-columns: 5fr 6fr; } }
.essence-copy { display: grid; gap: 1.5rem; justify-items: start; }

.wheel { position: relative; width: min(100%, 34rem); aspect-ratio: 1; justify-self: center; isolation: isolate; }
.wheel::before { /* anel pontilhado que gira bem devagar, fora da roda */
  content: ""; position: absolute; inset: -4%; border-radius: 50%; z-index: -1; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--terracota) 40%, transparent); animation: spin 180s linear infinite;
}
.wheel::after { /* brilho suave no centro */
  content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--terracota) 15%, transparent), transparent);
}
.wheel-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.wheel-lines circle { stroke: color-mix(in srgb, var(--terracota) 55%, transparent); stroke-width: .22; }
.wheel-lines .base { stroke: color-mix(in srgb, var(--terracota) 45%, transparent); stroke-width: .2; stroke-dasharray: 1 1.6; }
.wheel-lines .lit { stroke: var(--terracota); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s var(--ease); }
.wheel-lines .lit.on { stroke-dashoffset: 0; }
.wheel-core {
  position: absolute; left: 50%; top: 50%; width: 44%; translate: -50% -50%; text-align: center;
  display: grid; justify-items: center; gap: .6rem;
}
.wheel-name { font: italic 500 clamp(2.4rem, 6vw, 3.8rem)/.95 var(--font-serif); color: var(--terracota); letter-spacing: -.01em; }
.wheel-text { font: 400 clamp(.82rem, 1.2vw, .95rem)/1.55 var(--font-body); color: var(--ink-soft); text-wrap: balance; max-width: 15rem; }
.wheel .elements { position: absolute; inset: 0; margin: 0; }
.wheel .element { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; }
.node {
  position: relative; width: clamp(3.8rem, 10vw, 5.4rem); aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--terracota);
  background: color-mix(in srgb, var(--nude) 82%, transparent); border: 1px solid color-mix(in srgb, var(--terracota) 50%, transparent);
  box-shadow: 0 18px 28px -20px color-mix(in srgb, var(--marrom) 70%, transparent);
  transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s, scale .5s var(--ease);
}
.node-ic { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.node-label {
  position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% 0; white-space: nowrap;
  font: 600 .64rem/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .4s;
}
.node:hover, .node:focus-visible { scale: 1.07; border-color: var(--terracota); }
.element.is-on .node {
  background: var(--terracota); color: var(--rose); border-color: var(--terracota); scale: 1.1;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--terracota) 14%, transparent), 0 22px 34px -18px color-mix(in srgb, var(--terracota) 90%, transparent);
}
.element.is-on .node-label { color: var(--ink); }
.js .wheel .node-desc { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Sem JavaScript: os quatro elementos viram uma lista simples */
html:not(.js) .wheel { aspect-ratio: auto; width: 100%; }
html:not(.js) .wheel::before, html:not(.js) .wheel::after, html:not(.js) .wheel-lines, html:not(.js) .wheel-core { display: none; }
html:not(.js) .wheel .elements { position: static; display: grid; gap: 1.4rem; }
html:not(.js) .wheel .element { position: static; translate: none; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: center; }
html:not(.js) .node { width: 4rem; }
html:not(.js) .node-label { display: none; }

/* Contato */
.contact-grid { display: grid; gap: 3.5rem; align-items: start; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 4fr 6fr; gap: 6rem; } }
.contact-side { display: grid; gap: 1.8rem; justify-items: start; }
.contact-line { display: grid; gap: .3rem; }
.contact-line b { font: 600 .66rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--link); }
.contact-line a { font-weight: 500; word-break: break-word; }
.form { display: grid; gap: 1.7rem; }
.form .h3 { font: italic 500 clamp(1.9rem, 3.4vw, 2.5rem)/1 var(--font-serif); letter-spacing: -.01em; }
.field { display: grid; gap: .3rem; }
.field label { font: 600 .66rem/1.3 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--link); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .7rem 0; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  font: 400 1.02rem/1.5 var(--font-body); transition: border-color .3s, box-shadow .3s;
}
.field select { cursor: pointer; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--terracota); box-shadow: 0 1px 0 0 var(--terracota); }
.field-row { display: grid; gap: 1.7rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
.form .btn { justify-self: start; }
.form-status { display: none; padding: 1rem 1.25rem; border-radius: .9rem; font-weight: 500; font-size: .95rem; }
.form-status.show { display: block; background: var(--rose); color: var(--cacau); }
.form-status.error { background: var(--cacau); color: var(--rose); }
.form-hint { font-size: .88rem; color: var(--ink-soft); }

/* Rodapé */
.site-footer { position: relative; padding-block: clamp(4rem, 8vw, 6rem) 2.5rem; }
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 5fr 3fr 4fr; } }
.site-footer .logo--v { width: min(12.5rem, 70vw); }
.footer-col { display: grid; gap: .7rem; align-content: start; }
.footer-col h2 { font: 600 .66rem/1.2 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--terracota) 55%, var(--rose)); margin-bottom: .6rem; }
.footer-col a { text-decoration: none; font-weight: 400; color: var(--ink-soft); transition: color .3s; }
.footer-col a:hover { color: var(--ink); }
.footer-col .with-icon { display: inline-flex; align-items: center; gap: .55rem; }
.footer-col .with-icon .sym { width: 1.1em; height: 1.1em; }
.footer-note { color: var(--ink-soft); max-width: 22rem; margin-top: 1.2rem; font: italic 500 1.35rem/1.3 var(--font-serif); }
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .84rem; letter-spacing: .02em; }

/* Movimento: só quando a pessoa não pediu para reduzir */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv:not(.is-in) { transform: translateY(26px); opacity: 0; }
  .btn[data-magnetic] { translate: calc(var(--bx, 0) * 1px) calc(var(--by, 0) * 1px); transition: translate .25s ease-out, transform .3s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .3s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave i, .d-leaf .sym, .cta-deco .sym, .o-glow, .o-ring--3, .wheel::before, .stage-ring, .stage-sym, .panel { animation: none !important; }
  .progress { display: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}