/* Alpha & Omega — site v3
   Paleta tirada da logo: azul-noite e lápis-lazúli do disco, cobre/dourado do relevo,
   marfim para o arco (a "sala marfim" do conceito original). */
:root {
  --arc-h: 16vh;   /* altura da curva dos arcos: a curva vai de uma borda à outra da tela */
  --night: #070b14;
  --lapis: #17365c;
  --copper: #c98b4f;
  --gold: #e8c28a;
  --ivory: #efe6d6;
  --ink: #1a2033;

  /* títulos: serifa alta e estreita em maiúsculas; destaque: uma palavra em cursiva fina */
  --f-display: "Noto Serif Display", "Didot", "Georgia", serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --f-body: "General Sans", -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* (não pôr overflow no html: o body viraria uma área de rolagem própria e as telas presas (sticky) soltariam) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--f-display); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  text-transform: uppercase; letter-spacing: .005em; line-height: .95; margin: 0; text-wrap: balance;
}
/* a palavra em cursiva dentro dos títulos (como "Estepona"/"Live in" no original) */
.script {
  font-family: var(--f-script); font-weight: 400; font-stretch: normal; font-variation-settings: normal;
  text-transform: none; letter-spacing: 0; font-size: .98em; line-height: 0;
  display: inline-block; padding: 0 .06em; transform: translateY(.04em) rotate(-4deg); color: inherit;
}
/* rótulos pequenos em maiúsculas espaçadas */
.label, .hero__label, .statement__label, .sky__label, .slider__facts dt, .slider__label, .stop__dates, .step__n {
  font-family: var(--f-body); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Marcador de texto ainda não aprovado */
.todo {
  display: inline-block; vertical-align: middle;
  font: 600 .62rem/1 var(--f-body); letter-spacing: .04em;
  color: #5a2a00; background: #ffd27a; border-radius: 999px; padding: 4px 8px; margin-left: .4em;
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: 500 .98rem/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--copper { background: var(--copper); color: var(--night); }
.btn--copper:hover { background: var(--gold); }
.btn--ghost { border: 1px solid rgba(239, 230, 214, .45); color: var(--ivory); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- 1 · Abertura ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #0f2140 0%, var(--night) 70%);
}
.loader__row { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.loader__glyph { font-family: var(--f-display); font-size: clamp(2.6rem, 7vw, 5rem); color: var(--gold); line-height: 1; }
.loader__track { position: relative; width: clamp(120px, 28vw, 340px); height: 1px; background: rgba(232, 194, 138, .18); }
.loader__line { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left center; }

/* ---------- Topo (no estilo do original: sem faixa, só selo à esquerda e menu à direita) ---------- */
.topbar {
  /* fica só no alto da página (não acompanha a rolagem) */
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: flex-end;   /* só links, conta e menu, à direita */
  padding: clamp(22px, 3.2vh, 36px) clamp(20px, 2.4vw, 40px);
  color: var(--ivory); transition: color .45s var(--ease);
}
.topbar > * { pointer-events: auto; }
.topbar.is-light { color: var(--ink); }

.seal { position: relative; display: grid; place-items: center; width: 108px; height: 108px; color: inherit; }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-spin 26s linear infinite; }
.seal__ring text { fill: currentColor; font: 600 7.4px var(--f-body); letter-spacing: .12em; }
.seal__logo { width: 56px; height: 56px; border-radius: 50%; }
@keyframes seal-spin { to { transform: rotate(360deg); } }

.hnav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; margin-left: auto; margin-right: 22px; }
.hnav__main {
  font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  text-transform: uppercase; font-size: 1.15rem; line-height: 1; letter-spacing: .01em; text-decoration: none; color: inherit;
}
.hnav__small { font: 600 .66rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.hnav__small a { color: inherit; text-decoration: none; }
.hnav a:hover { opacity: .65; }
.menu-btn {
  all: unset; cursor: pointer; font: 600 .7rem var(--f-body); letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 0; color: inherit; display: inline-flex; gap: 8px; align-items: center;
  pointer-events: auto; /* o "all: unset" herdaria o "none" do topo e o botão não receberia clique */
}
.menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.acct-btn {
  all: unset; cursor: pointer; pointer-events: auto; margin-right: 22px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid currentColor; font: 600 .68rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: inherit;
}
.acct-btn:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.topbar.is-light .acct-btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.acct-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* caixa de conta */
.account {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px var(--gut);
  background: rgba(7, 11, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.account[hidden] { display: none; }
.account__panel {
  position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 34px 32px 26px; border-radius: 22px;
  background: #fffdf8; color: var(--ink); text-align: center; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.account__close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.6rem; color: rgba(26, 32, 51, .55); cursor: pointer; border-radius: 50%; }
.account__close:hover { color: var(--ink); background: rgba(26, 32, 51, .06); }
.account__seal { width: 48px; height: 48px; }
.account__title { margin-top: 14px; font-size: 2.2rem; line-height: 1; }
.account__lead { margin: 10px auto 0; max-width: 34ch; font-size: .95rem; color: rgba(26, 32, 51, .65); }
.account__tabs { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(26, 32, 51, .06); }
.account__tabs button { border: 0; background: none; padding: 10px; border-radius: 999px; font: 600 .82rem var(--f-body); color: rgba(26, 32, 51, .6); cursor: pointer; }
.account__tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.account__form { margin-top: 18px; display: grid; gap: 12px; text-align: left; }
.account__field { display: grid; gap: 6px; font-size: .85rem; color: rgba(26, 32, 51, .75); }
.account__field input { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(26, 32, 51, .2); background: #fff; font: 400 1rem var(--f-body); color: var(--ink); }
.account__field input:focus { outline: none; border-color: #b8862b; box-shadow: 0 0 0 3px rgba(232, 194, 138, .35); }
.account__field input[aria-invalid="true"] { border-color: #c4553a; }
.account__send { margin-top: 6px; min-height: 48px; border: 0; cursor: pointer; justify-content: center; }
.account__forgot { justify-self: center; font-size: .85rem; color: #8a5526; }
.account__msg { margin: 0; min-height: 1.3em; font-size: .88rem; color: #8a5526; text-align: center; }
.account__small { margin: 8px 0 0; font-size: .75rem; color: rgba(26, 32, 51, .55); }
.account__small a { color: inherit; }
.account [data-only][hidden] { display: none; }

/* Menu completo */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--night); color: var(--ivory);
  display: grid; place-items: center; padding: 80px var(--gut);
}
.menu[hidden] { display: none; }
.menu__close { all: unset; cursor: pointer; position: absolute; top: 32px; right: clamp(20px, 2.4vw, 40px); font: 600 .7rem var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.menu__list { list-style: none; margin: 0; padding: 0; text-align: center; columns: 2; column-gap: 8vw; }
.menu__list li { break-inside: avoid; margin: 0 0 14px; }
.menu__list a {
  font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; color: inherit; text-decoration: none;
}
.menu__list a:hover { color: var(--gold); }

/* Linha lateral de rolagem */
.rail {
  position: fixed; left: clamp(20px, 2.4vw, 40px); bottom: clamp(26px, 6vh, 56px); z-index: 50; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ivory); transition: color .45s var(--ease);
}
.rail.is-light { color: var(--ink); }
.rail__label { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .62rem var(--f-body); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.rail__track { position: relative; width: 1px; height: clamp(70px, 14vh, 140px); background: currentColor; opacity: .35; overflow: visible; }
.rail__fill { position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: currentColor; transform-origin: top; transform: scaleY(0); opacity: 1; }

/* ---------- 2 · Hero ---------- */
.intro { position: relative; height: 100vh; height: 100lvh; overflow: hidden; }
.hero { position: absolute; inset: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 11, 20, .65) 0%, rgba(7, 11, 20, 0) 32%),
    linear-gradient(to top, rgba(7, 11, 20, .8) 0%, rgba(7, 11, 20, 0) 34%);
}
.hero__top {
  position: absolute; left: 0; right: 0; top: clamp(96px, 15vh, 150px);
  padding: 0 var(--gut); text-align: center;
}
.hero__label { margin: 0 0 18px; font-size: .95rem; color: var(--gold); }
.hero__title {
  max-width: 15ch; margin: 0 auto;
  font-size: clamp(2.5rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: -.01em;
}
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.hero__title .w > span { display: inline-block; }
.hero__bottom {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 64px);
  padding: 0 var(--gut); text-align: center;
}
.hero__sub { max-width: 46ch; margin: 0 auto 22px; font-size: 1.05rem; color: rgba(239, 230, 214, .88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Celular: loop parado por cima do vídeo principal; some quando a pessoa começa a rolar */
.hero__loop { transition: opacity .35s ease; }
.hero__loop.is-off { opacity: 0; }

/* Celular: a máscara azul (cor do fundo do vídeo) fecha como uma íris sobre a estrela */
.hero__iris { display: none; }
.intro--film .hero__iris {
  display: block; position: absolute; inset: 0; z-index: 1; --r: 120vmax; background: var(--film-bg, #141f38);
  -webkit-mask-image: radial-gradient(circle at 50% 47%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 47%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
/* ...e os textos dos 3 pilares aparecem por cima dela, claros sobre o azul (sem o arco marfim) */
.intro--film .arch { left: 0; transform: none; width: 100%; height: 100%; border-radius: 0; background: transparent; color: var(--ivory); }
.intro--film .arch__stage { left: 0; transform: none; width: 100%; }
.intro--film .pillar p { color: rgba(239, 230, 214, .78); }
.intro--film .pillar + .pillar { border-color: rgba(239, 230, 214, .16); }
.intro--film .pillar__icon { stroke: var(--gold); }
.intro--film .pillar__icon .fill { fill: var(--gold); }
.intro--film .more { color: var(--gold); }
.intro--film .arch__note { color: rgba(239, 230, 214, .6); }

/* ---------- 3 · Arco dos 3 pilares ---------- */
/* O arco é um retângulo com topo semicircular; cresce a partir da base e revela o conteúdo. */
.arch {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: 34vw; height: 0;
  transform: translateX(-50%);
  border-radius: 100vmax 100vmax 0 0;
  background: var(--ivory); color: var(--ink);
  overflow: hidden;
}
.arch__stage {
  position: absolute; left: 50%; bottom: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 88px var(--gut) 40px; text-align: center;
}
.arch__seal { width: clamp(64px, 8vw, 104px); height: auto; margin-bottom: 18px; }
.arch__title { font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.05; max-width: 22ch; }
.pillars {
  list-style: none; margin: clamp(32px, 6vh, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px); width: min(1240px, 100%);
}
.pillar { display: flex; flex-direction: column; align-items: center; }
.pillar + .pillar { border-left: 1px solid rgba(26, 32, 51, .14); }
.pillar__icon { width: 52px; height: 52px; margin-bottom: 16px; fill: none; stroke: var(--copper); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pillar__icon .fill { fill: var(--copper); stroke: none; }
.pillar h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; }
.pillar p { margin: 0 0 16px; max-width: 26ch; color: rgba(26, 32, 51, .78); }
.more { color: #8a5526; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more:hover { color: var(--lapis); }
.arch__note { margin: clamp(28px, 5vh, 48px) 0 0; font-size: .82rem; color: rgba(26, 32, 51, .6); }

/* ---------- 4 · Mapa Astral ---------- */
.chart { background: var(--ivory); color: var(--ink); padding: clamp(72px, 12vh, 140px) var(--gut) clamp(64px, 10vh, 120px); }
.chart__head { width: min(1000px, 100%); margin: 0 auto; text-align: center; }
.chart__title { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .95; }
.chart__lead { margin: 22px auto 0; max-width: 34ch; font-size: clamp(1.2rem, 1.9vw, 1.65rem); line-height: 1.4; color: rgba(26, 32, 51, .82); }
.chart__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  width: min(1240px, 100%); margin: clamp(40px, 7vh, 80px) auto 0;
}
.chart__formbox { width: min(520px, 100%); justify-self: center; }

.chart-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 500; color: rgba(26, 32, 51, .8); }
.field input {
  height: 48px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(26, 32, 51, .22); background: #f8f3ea; color: var(--ink);
  font: 400 1rem var(--f-body);
}
.field input:focus { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 3px rgba(23, 54, 92, .15); }
.field input[aria-invalid="true"] { border-color: #a5442a; }
.btn--ink { grid-column: 1 / -1; justify-self: start; background: var(--lapis); color: var(--ivory); border: 0; cursor: pointer; min-height: 50px; padding: 0 28px; }
.btn--ink:hover { background: var(--ink); }
.field__hint { font-weight: 400; color: rgba(26, 32, 51, .55); }
.field__check { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: rgba(26, 32, 51, .75); cursor: pointer; }
.field__check input { width: 18px; height: 18px; accent-color: var(--lapis); }
.field--city { position: relative; }
.city-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid rgba(26, 32, 51, .15); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .4);
  max-height: 260px; overflow-y: auto;
}
.city-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem; color: var(--ink); }
.city-list li[aria-selected="true"], .city-list li:hover { background: rgba(23, 54, 92, .08); }
.chart-form__msg { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: .92rem; color: var(--lapis); }
.chart__trust { margin: 6px 0 0; font-size: .85rem; color: rgba(26, 32, 51, .6); }

/* Doação livre */
.donate {
  width: min(720px, 100%); margin: clamp(48px, 8vh, 88px) auto 0; padding: clamp(24px, 4vw, 40px);
  text-align: center; border: 1px solid rgba(26, 32, 51, .14); border-radius: 18px; background: rgba(255, 255, 255, .35);
}
.donate h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.donate p { margin: 10px auto 20px; max-width: 42ch; color: rgba(26, 32, 51, .72); }

/* A roda: um disco lápis-lazúli com traço dourado, parente direto da moeda da logo */
.wheel { margin: 0; position: relative; }
.wheel__svg { width: 100%; height: auto; overflow: visible; }
.wheel__svg .disc { fill: var(--lapis); }
.wheel__svg .ring { fill: none; stroke: var(--gold); stroke-width: 1; }
.wheel__svg .ring--bold { stroke-width: 1.6; }
.wheel__svg .tick { stroke: var(--gold); stroke-width: .8; opacity: .8; }
.wheel__svg .house { stroke: rgba(232, 194, 138, .45); stroke-width: .7; }
.wheel__svg .aspect { stroke: var(--copper); stroke-width: .9; fill: none; opacity: .85; }
.wheel__svg .aspect--soft { stroke: #9fb6d6; }
.wheel__svg .sign { fill: var(--gold); font: 17px "Noto Sans Symbols 2", "Segoe UI Symbol", serif; text-anchor: middle; dominant-baseline: central; }
.wheel__svg .planet { fill: var(--ivory); font: 13px "Noto Sans Symbols 2", "Segoe UI Symbol", serif; text-anchor: middle; dominant-baseline: central; }
.wheel__svg .dot { fill: var(--gold); }
.wheel__cap { position: absolute; right: 0; bottom: 0; font-size: .8rem; color: rgba(26, 32, 51, .55); }
/* astrolábio 3D: o canvas ocupa o lugar da roda plana (que fica de reserva) */
.wheel__gl { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; }
.wheel--3d .wheel__svg { display: none; }
/* mapa vivo: posições calculadas para a data, embaixo da roda */
.wheel__legend { list-style: none; margin: 10px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: .82rem; color: rgba(26, 32, 51, .8); }
.wheel__legend .g { font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: #8a5526; }
.wheel__legend .wheel__note { flex-basis: 100%; text-align: center; font-size: .72rem; color: rgba(26, 32, 51, .5); }

/* Faixa dinâmica: preta, letras douradas e bordas de ouro com brilho de metal.
   Fica no fim do Mapa Astral, de ponta a ponta, e serve de divisor antes da Loja. */
.band {
  --metal: linear-gradient(90deg, #7a4c1c, #e9c27a 18%, #fff0c4 30%, #b27a35 46%, #f3d69a 62%, #8c5a24 80%, #e9c27a);
  position: relative; margin: clamp(56px, 9vh, 96px) calc(var(--gut) * -1) calc(clamp(64px, 10vh, 120px) * -1);
  background: #07090f; overflow: hidden; padding: 20px 0;
}
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--metal); background-size: 200% 100%; animation: band-shine 6s linear infinite; }
.band::before { top: 0; } .band::after { bottom: 0; }
.band__track { display: flex; width: max-content; animation: band-run 38s linear infinite; }
.band:hover .band__track { animation-play-state: paused; }
.band__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.band__list li { display: flex; align-items: baseline; gap: 14px; padding: 0 28px; white-space: nowrap; }
.band__list li::after { content: "✦"; margin-left: 28px; color: #c9954f; font-size: .9rem; }
.band__list strong {
  font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: .01em;
  background: var(--metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: band-shine 6s linear infinite;
}
.band__list span { font-size: .95rem; color: rgba(232, 194, 138, .75); }
@keyframes band-run { to { transform: translateX(-50%); } }
@keyframes band-shine { to { background-position: -200% 0; } }

/* ---------- resultado do mapa ---------- */
.result { width: min(1180px, 100%); margin: clamp(48px, 8vh, 88px) auto 0; padding: clamp(28px, 4vw, 48px); border-radius: 24px;
  background: #fffdf8; color: var(--ink); box-shadow: 0 30px 70px -40px rgba(26, 32, 51, .45); border: 1px solid rgba(168, 116, 31, .2); }
.result[hidden] { display: none; }
.result__eyebrow { margin: 0; font-size: .9rem; color: #8a5526; }
.result__title { margin-top: 8px; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; }
.result__big { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.big3 { padding: 18px 18px 16px; border-radius: 16px; background: #f5efe3; }
.big3__label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8a5526; }
.big3__sign { margin-top: 6px; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; text-transform: uppercase; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; }
.big3__deg { margin-top: 4px; font-size: .88rem; color: rgba(26, 32, 51, .6); }
.result__grid { margin-top: 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.result__block h4 { margin: 0 0 12px; font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a5526; }
.result__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.result__table th { text-align: left; font-weight: 500; font-size: .78rem; color: rgba(26, 32, 51, .55); padding: 0 8px 8px 0; }
.result__table td { padding: 8px 8px 8px 0; border-top: 1px solid rgba(26, 32, 51, .08); }
.result__table .g { font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: #a8741f; margin-right: 6px; }
.result__aspects { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.result__aspects span { color: rgba(26, 32, 51, .55); }
.result__numbers { margin-top: 32px; }
.result__texts.result__astro { margin-top: 26px; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 820px) { .result__texts.result__astro { grid-template-columns: 1fr; } }
.result__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.num { padding: 16px; border-radius: 16px; background: #17365c; color: var(--ivory); text-align: center; }
.num b { display: block; font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--gold); }
.num span { font-size: .8rem; letter-spacing: .08em; }
.result__texts { margin-top: 20px; display: grid; gap: 14px; max-width: 72ch; }
.result__texts h5 { margin: 0 0 4px; font-family: var(--f-body); font-size: .95rem; font-weight: 600; }
.result__texts p { margin: 0; line-height: 1.6; color: rgba(26, 32, 51, .85); }
.result__head { position: relative; }
.result__pdf { margin-top: 18px; }
.result__nums { margin-top: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.result__chapters { margin-top: 30px; display: grid; gap: 10px; }
.rch { border: 1px solid rgba(168, 116, 31, .25); border-radius: 16px; background: #fff; overflow: hidden; }
.rch > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: baseline; gap: 14px; }
.rch > summary::-webkit-details-marker { display: none; }
.rch > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: #a8741f; transition: transform .3s; }
.rch[open] > summary::after { transform: rotate(45deg); }
.rch__n { font: 600 .8rem/1 var(--f-body); color: #a8741f; letter-spacing: .08em; }
.rch__t { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.1; text-transform: uppercase; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; }
.rch__body { padding: 0 22px 22px; display: grid; gap: 18px; max-width: 78ch; }
.rch__intro { margin: 0; font-style: italic; color: rgba(26, 32, 51, .65); }
.rch__sec h5 { margin: 0; font-family: var(--f-body); font-size: 1rem; font-weight: 600; }
.rch__deg { display: block; margin-top: 2px; font-size: .78rem; color: #a8741f; }
.rch__sec p { margin: 6px 0 0; line-height: 1.65; color: rgba(26, 32, 51, .86); }
.rch__bars { display: grid; gap: 6px; max-width: 420px; }
.rch__bar { display: grid; grid-template-columns: 80px 1fr 40px; gap: 10px; align-items: center; font-size: .85rem; }
.rch__bar i { display: block; height: 8px; border-radius: 4px; background: #efe8dc; position: relative; overflow: hidden; }
.rch__bar i b { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.result__tech { margin-top: 20px; }
.result__tech > summary { cursor: pointer; font-weight: 600; color: #8a5526; padding: 10px 0; }
@media (max-width: 820px) {
  .result__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rch > summary { padding: 16px; } .rch__body { padding: 0 16px 18px; } .rch__t { font-size: 1.2rem; }
}
.result__note { margin: 26px 0 0; font-size: .8rem; color: rgba(26, 32, 51, .55); }
@media (max-width: 820px) {
  .result { padding: 22px 18px; border-radius: 18px; margin-top: 32px; }
  .result__big { grid-template-columns: 1fr; gap: 10px; }
  .result__grid { grid-template-columns: 1fr; }
  .result__nums { grid-template-columns: 1fr 1fr; }
  .result__table { font-size: .88rem; }
}

/* ---------- 5 · Loja (faixa lateral) ---------- */
/* Mesma mecânica no PC e no celular: a seção fica presa e a faixa corre para a esquerda.
   No celular só muda a escala: cards mais estreitos e plantas menores. */
.shop { background: #fff; color: var(--ink); }   /* Loja em branco (pedido do Arthur) */
.shop__pin { position: relative; height: 100vh; height: 100lvh; overflow: hidden; }
/* telas presas usam a altura CHEIA (lvh): no iPhone, quando a barra do navegador some, a tela cresce;
   com a altura menor (svh) sobrava uma faixa embaixo mostrando o fundo escuro da página.
   O "espaçador" que o GSAP cria em volta da Loja presa também fica branco. */
.pin-spacer:has(> .shop) { background: #fff; }
.pin-spacer:has(> .about) { background: var(--ivory); }
.shop__track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: center; gap: clamp(28px, 4vw, 64px);
  padding: 0 clamp(64px, 12vw, 200px) 0 var(--gut);
  will-change: transform;
}
/* a primeira tela é só a frase, ocupando a largura toda: nenhum produto aparece antes de correr */
.shop__intro {
  flex: 0 0 auto; width: calc(100vw - var(--gut) * 2); padding: 0 clamp(0px, 6vw, 120px); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center;   /* frase no centro: a flor fica livre no canto */
}
.shop__intro .shop__sub { margin-left: auto; margin-right: auto; }
.shop__title { font-size: clamp(3.4rem, 9.4vw, 10.5rem); line-height: .92; max-width: 16ch; margin: 0 auto; }
.shop__sub { margin: 28px 0 0; font-size: clamp(1.15rem, 1.8vw, 1.6rem); max-width: 44ch; color: rgba(26, 32, 51, .78); }
.shop__intro .btn--ink { display: inline-flex; }
.shop__note { position: relative; z-index: 3; margin: 16px auto 0; font-size: .82rem; max-width: 52ch; color: rgba(26, 32, 51, .62); }   /* aviso de afiliado: discreto, mas visível junto da vitrine */

.item { flex: 0 0 auto; width: clamp(240px, 24vw, 360px); }
.item:nth-of-type(even) { margin-top: 12vh; }  /* ritmo desencontrado, como uma vitrine */
.item__art {
  aspect-ratio: 4 / 5; border-radius: 160px 160px 14px 14px; /* janela em arco, eco do arco dos pilares */
  background: var(--lapis); display: grid; place-items: center; overflow: hidden;
}
.item__art svg { width: 72%; height: auto; fill: none; stroke: var(--gold); stroke-width: 1.1; }
.item h3 { font-size: 1.35rem; margin: 18px 0 4px; }
.item p { margin: 0; font-size: .92rem; color: rgba(26, 32, 51, .62); }
.item--cat { color: inherit; text-decoration: none; width: clamp(280px, 30vw, 460px); }   /* só 3 modalidades: cards maiores para encher a vitrine */
.item--cat h3 { font-size: clamp(1.4rem, 2vw, 2rem); }
.item--cat p { font-size: .98rem; max-width: 36ch; }
.item--cat .item__art { transition: filter .25s; }
.item--cat:hover .item__art { filter: brightness(1.15); }
.item__go { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--lapis); border-bottom: 1px solid currentColor; }

/* Loja da home: banner retangular com as 3 modalidades em cima, fileira de produtos menores embaixo */
.vit { flex: 0 0 auto; display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }
.vit__banner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; height: clamp(210px, 27vh, 330px); background: var(--ink); }
.vit__mod { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.vit__mod img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vit__mod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, 0) 35%, rgba(7, 11, 20, .72)); }
.vit__mod:hover img { transform: scale(1.05); }
.vit__txt { position: absolute; z-index: 1; left: clamp(16px, 1.6vw, 28px); right: 16px; bottom: clamp(16px, 2vh, 26px); display: flex; flex-direction: column; gap: 4px; }
.vit__txt small { font: 600 .62rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.vit__txt b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.05; }
.vit__txt em { font: 600 .78rem var(--f-body); font-style: normal; letter-spacing: .04em; border-bottom: 1px solid rgba(255, 255, 255, .6); align-self: flex-start; margin-top: 4px; }
.vit__row { display: flex; gap: clamp(14px, 1.6vw, 24px); }
.vit .pcard { --pw: clamp(200px, 19vw, 300px); }   /* PC: cards grandes (menos produtos, maiores = mais sofisticado); no celular ficam menores */
.vit .pcard__name { font-size: .98rem; }
.vit .pcard__benefit { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vit .pcard__col { font-size: .58rem; }
.vit .pcard__body { padding-top: 10px; }
/* Loja da home: etiqueta, bloco editorial das coleções e cards editoriais de produto (mesmo modelo de /shop) */
.shop__eyebrow { font: 600 .74rem/1.2 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--copper); margin: 0 0 18px; }
.shop__eyebrow::before, .shop__eyebrow::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 12px; opacity: .6; }
.item.pcard, .item.hcol { margin-top: 0 !important; }
.pcard { --pw: clamp(260px, 22vw, 340px); width: var(--pw); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.pcard__img { position: relative; aspect-ratio: 4 / 5; background: #efe9df; overflow: hidden; display: grid; place-items: center; }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s; }
.pcard__img img + img { opacity: 0; }
.pcard:hover .pcard__img img + img { opacity: 1; }
.pcard .item__art { background: none; border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.pcard .item__art svg { width: 56%; stroke: var(--lapis); stroke-width: 1; opacity: .85; transition: transform .8s; }
.pcard:hover .item__art svg { transform: scale(1.06) rotate(8deg); }
.pcard__badge { position: absolute; top: 12px; left: 12px; background: #fff; font: 600 .6rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; }
.pcard__body { padding-top: 14px; }
.pcard__col { font: 600 .64rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--copper); margin: 0 0 6px; }
.item .pcard__name, .pcard__name { font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; text-transform: none; font-size: 1.1rem; line-height: 1.25; letter-spacing: 0; margin: 0; }
.item .pcard__benefit { margin: 4px 0 0; font-size: .84rem; line-height: 1.45; color: rgba(26, 32, 51, .62); }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pcard__price { font-size: .9rem; font-weight: 500; }
.pcard__price small { font-weight: 400; color: rgba(26, 32, 51, .6); }
.pcard__sw { display: flex; gap: 6px; }
.pcard__sw i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 3px rgba(26, 32, 51, .15); }
.pcard .todo { margin-left: .35em; }
.hcol { width: clamp(300px, 26vw, 400px); align-self: center; height: calc(clamp(260px, 22vw, 340px) * 1.25 + 120px); display: flex; flex-direction: column; background: var(--lapis); color: var(--ivory); border-radius: 999px 999px 0 0; overflow: hidden; }
.hcol .item__art { background: none; border-radius: 0; aspect-ratio: 1 / .8; }
.hcol .item__art svg { width: 60%; stroke: var(--gold); opacity: .7; }
.hcol__body { padding: 0 28px 30px; margin-top: auto; }
.item .hcol__eyebrow { font: 600 .66rem/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.item .hcol__title { font-size: clamp(1.6rem, 2.2vw, 2.2rem); margin: 0 0 16px; color: var(--ivory); }
.hcol__list { list-style: none; margin: 0; padding: 0; }
.hcol__list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(239, 230, 214, .2); text-decoration: none; color: var(--ivory); font-size: .95rem; }
.hcol__list a:hover { color: var(--gold); }
.hcol__list i { font-style: normal; color: var(--gold); }

.shop__end {
  flex: 0 0 auto; font-family: var(--f-display); font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: 1;
  color: var(--lapis); text-decoration: none; white-space: nowrap; padding-left: 36vw;   /* o último produto sai da tela: a tela final é só o convite */
  margin-right: 30vw;   /* termina antes do canto de baixo à direita, onde a planta volta */
}
.shop__end:hover { color: #8a5526; }


/* Buganvília: vídeo com fundo transparente, já recortado na flor (nasce do canto de baixo à direita).
   Fica presa aos cantos e balança de leve com a rolagem (o vento vem do próprio vídeo). */
.plant { position: absolute; z-index: 2; pointer-events: none; height: 52vh; aspect-ratio: 623 / 664; }
.plant--bottom { right: -1vw; bottom: -1vh; height: 62vh; transform-origin: 100% 100%; }   /* maior: é a que a névoa pega */
.plant--top { left: -1vw; top: 0; height: 52vh; transform-origin: 0 0; } /* encostada na faixa dourada: parece pender dela */
.plant__media, .plant__media > * { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Loja: as flores ficam "em pé" nos cantos (reflexo na diagonal): a de cima DESCE pela lateral esquerda,
   a de baixo SOBE pela lateral direita — ocupam os cantos sem tomar a largura da frase */
.plant--top .plant__media { transform: rotate(225deg); translate: -24% 0; }   /* o galho entra por cima e desce */
.plant--bottom .plant__media { transform: rotate(45deg); translate: 24% 0; }   /* o galho entra por baixo e sobe */

/* ---------- 6 · Portais (linha ondulada com 12 paradas) ---------- */
.portals { background: #fff; color: var(--ink); overflow-x: clip; }   /* "clip" (não "hidden"): não quebra a imagem parada (sticky) */   /* branco como a Loja; as nuvens são brancas */
.portals__head {
  /* título no centro da tela, por cima da máscara vermelha (aparece depois que ela fecha) */
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: clamp(88px, 12vh, 140px) !important;   /* título no alto: embaixo fica o espaço das cartas */
  padding: 0 var(--gut); text-align: center; color: var(--ivory);
}
.portals__title { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.04; }
.portals__sub { margin: 14px auto 0; max-width: 46ch; color: rgba(239, 230, 214, .9); }

.route { position: relative; margin-top: clamp(40px, 8vh, 88px); }
.route__inner { position: relative; width: 100%; height: 270px; padding: 0 var(--gut); }
.route__line { position: absolute; left: var(--gut); top: 60px; width: calc(100% - 2 * var(--gut)); height: 120px; overflow: visible; }
.route__line path { fill: none; stroke: var(--lapis); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.route__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 var(--gut); }
/* o <li> é só o ponto na curva; o texto fica acima (picos) ou abaixo (vales) */
.stop { position: absolute; width: 0; height: 0; }
.stop a {
  position: absolute; left: 0; transform: translateX(-50%); width: 104px;
  display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit;
}
.stop--above a { bottom: 14px; }
.stop--below a { top: 14px; }
.stop__glyph { font: 22px/1 "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: #8a5526; }
.stop__name { margin-top: 6px; font-family: var(--f-display); font-size: 1.02rem; }
.stop__dates { font-size: .72rem; color: rgba(26, 32, 51, .58); white-space: nowrap; }
.stop__dot { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--lapis); box-shadow: 0 0 0 4px var(--ivory); }
.stop a:hover .stop__name { color: #8a5526; }

.portals__stage { position: relative; height: 680vh; background: var(--roda-bg, #34141f); }   /* se sobrar tela embaixo (iPhone), aparece o vermelho e não uma faixa branca */   /* rolagem para o vídeo, a máscara e o título antes do arco subir */   /* começa colado no fim da Loja: as nuvens saem logo abaixo da planta */
/* a imagem (depois, o vídeo da roda dos signos) fica parada na tela enquanto o arco das Frequências sobe por cima */
.portals__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.portals__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portals__iris {
  position: absolute; inset: 0; z-index: 2; --r: 120vmax; background: var(--roda-bg, #3a1018);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}

/* ---------- Cartas dos 12 portais, em leque ----------
   Cada carta gira em volta de um ponto bem abaixo dela (como cartas na mão).
   .fc = posição no leque (rolagem) · .fc__pos = sai do leque ao abrir · .fc__lift = sobe no hover
   .fc__card = vira (3D). Frente: branca, "abaulada para dentro" (sombra interna), borda dourada em relevo. */
.fan {
  --cw: 244px; --ch: 372px; --pivot: 260%;   /* tamanho da carta e distância do ponto de giro */
  position: absolute; left: 50%; bottom: 19vh; z-index: 4; transform-origin: 50% var(--pivot); touch-action: pan-y; width: var(--cw); height: var(--ch);
  margin: 0 0 0 calc(var(--cw) / -2); padding: 0; list-style: none;
  font-size: calc(var(--cw) * .075);
}
.fc, .fc__pos { position: absolute; inset: 0; transform-origin: 50% var(--pivot); }
.fc { visibility: hidden; }
.fc__pos { transition: opacity .5s, filter .5s; }
.fan.is-open .fc:not(.is-open) .fc__pos { opacity: .28; filter: blur(1.5px); }
.fc.is-open { z-index: 40; }
.fc__lift { position: absolute; inset: 0; perspective: 1100px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.fc:not(.is-open):hover .fc__lift, .fc:not(.is-open):focus-within .fc__lift { transform: translateY(-9%); }
.fc__card { position: absolute; inset: 0; transform-style: preserve-3d; }
.fc__face {
  position: absolute; inset: 0; border-radius: 9% / 6%; padding: 5.5%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* borda dourada em relevo: chanfro claro em cima/esquerda, escuro embaixo/direita */
  background: linear-gradient(145deg, #fff3c9 0%, #e2b85a 18%, #a8741f 42%, #6f4810 55%, #c8963a 74%, #f6dc93 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 225, .9), inset -1.5px -1.5px 0 rgba(70, 40, 5, .55),
              0 1px 0 rgba(255, 255, 255, .15), 0 18px 34px -12px rgba(0, 0, 0, .7), 0 4px 10px -4px rgba(0, 0, 0, .45);
}
.fc__face--front { transform: translateZ(1.5px); }
.fc__face--back { transform: rotateY(180deg) translateZ(1.5px); }
.fc__well {
  position: relative; height: 100%; border-radius: 7% / 4.6%; overflow: hidden; color: var(--ink);
  /* branco "côncavo": mais claro no fundo do centro, sombra caindo da borda para dentro */
  background: radial-gradient(130% 95% at 50% 46%, #ffffff 0%, #fdfbf7 42%, #efe8dc 86%, #e3d9c8 100%);
  box-shadow: inset 0 .9em 1.2em -.5em rgba(70, 45, 10, .5), inset .5em 0 1em -.6em rgba(70, 45, 10, .3),
              inset -.4em -.3em .9em -.5em rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(120, 80, 20, .45);
}
.fc .g, .fc__face--sharp .g, .fc__glyph { font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "Apple Symbols", serif; font-style: normal; }
.fc__idx {
  position: absolute; left: .7em; top: .55em; display: flex; flex-direction: column; align-items: center;
  font: 600 .78em/1 var(--f-body); letter-spacing: .04em; color: #8a5526;
}
.fc__idx .g { font-size: 2.2em; line-height: 1.05; }
.fc__glyph {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 5.6em; line-height: 1;
  /* símbolo dourado gravado em relevo no branco */
  background: linear-gradient(160deg, #f3d48a 0%, #b37a22 45%, #7a4c10 70%, #d6a548 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(90, 55, 10, .35));
}
.fc__name {
  position: absolute; left: 0; right: 0; bottom: 2.3em; text-align: center;
  font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; text-transform: uppercase;
  font-size: 1.45em; letter-spacing: .06em; line-height: 1;
}
/* nome na lateral esquerda (a parte que aparece no leque), lendo de baixo para cima */
.fc__side {
  position: absolute; left: .72em; top: 4.1em; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 .8em/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.fc__dates { position: absolute; left: 0; right: 0; bottom: 1.15em; text-align: center; font-size: .72em; color: rgba(26, 32, 51, .6); }
.fc__flip { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; }
.fc__flip:focus-visible { outline: 2px solid #e2b85a; outline-offset: 3px; }
/* verso: a carta vem para o centro bem grande; o JS ajusta a letra (font-size) para ficar ~15px na tela.
   Rola por dentro se as informações crescerem */
.fc__face--back .fc__well {
  padding: 2.2em 2.2em 1.8em; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(168, 116, 31, .5) transparent;
}
.fb__portal { margin: 0; font: 600 .78em/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #8a5526; text-align: center; }
.fb__name {
  margin: .3em 0 0; font-size: 3em; line-height: 1; text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; gap: .22em;
}
.fb__name .g { color: #a8741f; font-size: .82em; }
.fb__dates { margin: .4em 0 0; text-align: center; font-size: .95em; color: rgba(26, 32, 51, .62); }
.fb__grid, .fb__carry { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6em; }
.fb__grid { margin-top: 1.3em; padding-top: 1em; border-top: 1px solid rgba(168, 116, 31, .4); }
.fb__grid > div, .fb__carry > div { padding: .55em 0; border-bottom: 1px solid rgba(26, 32, 51, .09); }
.fb__grid dt, .fb__carry dt { font: 600 .7em/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #8a5526; display: flex; align-items: center; gap: .6em; }
.fb__grid dd, .fb__carry dd { margin: .25em 0 0; font-size: 1.05em; line-height: 1.3; display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.fb__soft { color: rgba(26, 32, 51, .55); font-size: .82em; }
.fb__sec {
  margin: 1.3em 0 .1em; font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  text-transform: uppercase; font-size: 1.35em; letter-spacing: .06em; text-align: center; color: var(--ink);
}
.fb__carry { grid-template-columns: repeat(3, 1fr); }
.fb__carry .todo { font-size: .8em; letter-spacing: .04em; }
.fb__swatch { width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); flex: none; }
.fb__actions { margin-top: auto; padding-top: 1.4em; display: flex; align-items: center; justify-content: center; gap: 1.6em; }
.fb__link {
  padding: .75em 1.4em; border-radius: 999px; background: var(--lapis); color: var(--ivory);
  font: 600 .82em/1 var(--f-body); letter-spacing: .06em; text-decoration: none;
}
.fb__link:hover { background: #0f2747; }
.fc__close {
  border: 0; background: none; padding: .4em .2em; cursor: pointer;
  font: 600 .74em/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(26, 32, 51, .6);
}
.fc__close:hover { color: var(--ink); }
.fan__hint { display: none; }
.fc__face--sharp { position: fixed; z-index: 60; -webkit-backface-visibility: visible; backface-visibility: visible; transform: none; }
.portals__head { transition: opacity .5s; }
.portals__land.has-open .portals__head { opacity: .12; }

/* Nuvens = névoa da cor da seção: o marfim de cima "derrete" dentro da imagem.
   O topo das nuvens some num degradê de marfim sólido; só a parte de baixo aparece, flutuando.
   Cada faixa tem 2 ladrilhos (nuvem + espelho) e corre metade da largura em loop. */
.portals__land::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 14%; z-index: 1;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}
/* nuvens fotográficas: sobem até a base da Loja (passam por cima da planta) e se desfazem sobre o vídeo */
.clouds { position: absolute; left: 0; right: 0; top: -28vh; height: 62vh; pointer-events: none; z-index: 4; overflow: hidden; }
/* sem tarja sólida em cima: a névoa é translúcida e deixa a planta aparecer por dentro.
   Por trás da névoa, só na altura do começo do vídeo, um branco que some para baixo
   (assim o escuro do vídeo não acinzenta a névoa; as pontas das nuvens flutuam sobre ele) */
.clouds::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff 46%, #fff 52%, rgba(255, 255, 255, 0) 74%);
}
.clouds__row { position: absolute; left: -10%; right: -10%; z-index: 1; will-change: transform; }
.clouds__row--back { top: 0; height: 42vh; }
.clouds__row--front { top: 22vh; height: 30vh; }
.clouds__strip {
  height: 100%; background-repeat: repeat-x; background-size: auto 100%;
  width: calc(var(--tile) * 2); animation: drift linear infinite;
}
.clouds__row--back .clouds__strip { background-image: url("../media/nuvem_2.webp"); --tile: calc(42vh * 3200 / 511); animation-duration: 75s; }
.clouds__row--front .clouds__strip { background-image: url("../media/nuvem_1.webp"); --tile: calc(30vh * 3200 / 489); animation-duration: 48s; }
.clouds.is-paused .clouds__strip { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(var(--tile) * -1)); } }

/* As Frequências sobem por cima da paisagem com os cantos de cima cortados em diagonal */
.freq { position: relative; z-index: 6; margin-top: -100vh; }   /* sobe por cima da imagem parada (arco branco) */

/* ---------- 7 · Frequências: arco branco que sobe (como o "How to listen") + player no estilo Spotify ---------- */
.freq { background: none; color: var(--ink); padding: 0; }
.freq__arch {
  /* arco na largura toda: a curva do topo vai de uma borda à outra e sobe junto com a seção
     (a largura nunca muda, então o conteúdo — e a trava do celular — fica sempre no lugar) */
  width: 100%; margin: 0; background: #fff; overflow: clip;
  border-radius: 50% 50% 0 0 / var(--arc-h) var(--arc-h) 0 0;
  padding: clamp(110px, 20vh, 220px) var(--gut) clamp(64px, 10vh, 120px);
}
.freq__head { text-align: center; }   /* título sempre em 2 linhas: cabe inteiro no branco do arco enquanto ele abre */
.freq__h2 { font-size: clamp(2.8rem, 5.2vw, 5rem); line-height: .98; white-space: nowrap; }
.freq__sub { margin: 18px auto 0; max-width: 44ch; font-size: 1.1rem; color: rgba(26, 32, 51, .7); }

/* o player tem largura própria (não aperta enquanto o arco ainda está abrindo) */
.player {
  --sand: #e3b866; --plate: #142c4c; --line: rgba(26, 32, 51, .1); --mute: rgba(26, 32, 51, .56); --bronze: #8a5526;
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100vw - 2 * var(--gut))); margin-top: clamp(48px, 8vh, 96px);
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: start;
}
/* o prato: um disco azul fundo onde a areia dourada desenha a mandala de cada frequência */
.plate { margin: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #1d3a62, var(--plate) 62%, #0d1f38);
  box-shadow: inset 0 0 0 1px rgba(227, 184, 102, .35), inset 0 -18px 40px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(20, 44, 76, .55); }
.plate__canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.player__meta { margin-top: 28px; }
.player__meta p { margin: 0; }
.player__hz { font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; text-transform: uppercase; font-size: clamp(3.2rem, 5vw, 4.6rem); line-height: .9; }
.player__theme { margin-top: 10px !important; font-size: 1.15rem; }
.player__signs { margin-top: 4px !important; color: var(--mute); }
.player__el::before { content: "/"; margin: 0 .5em 0 .2em; opacity: .5; }

/* a linha: a onda do som que está tocando; a parte já tocada fica dourada. Também serve para avançar/voltar */
.player__wave { position: relative; margin-top: 22px; }
.wave { width: 100%; height: 56px; display: block; }
.wave__seek { position: absolute; inset: 0 0 auto 0; width: 100%; height: 56px; margin: 0; opacity: 0; cursor: pointer; }
.wave__seek:focus-visible + .wave__time { outline: 2px solid var(--sand); outline-offset: 4px; }
.wave__time { display: flex; justify-content: space-between; margin-top: 6px; font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }

.player__controls { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.pc { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.pc svg { width: 22px; height: 22px; fill: currentColor; }
.pc:hover { color: var(--bronze); }
.pc--play { width: 60px; height: 60px; background: var(--ink); color: #fff; }
.pc--play:hover { background: var(--lapis); color: #fff; transform: scale(1.04); }
.pc--play svg { width: 26px; height: 26px; }
.pc--play .i-pause, .player.is-playing .pc--play .i-play { display: none; }
.player.is-playing .pc--play .i-pause { display: block; }
.pc:focus-visible, .tl__row:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.pc__vol { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--mute); }
.pc__vol svg { width: 20px; height: 20px; fill: currentColor; }
.pc__vol input { width: 96px; accent-color: var(--ink); }

/* lista de faixas */
.tl__head, .tl__row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr) 56px; gap: 16px; align-items: center; }
.tl__head { padding: 0 16px 10px; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--mute); }
.tl__head span:last-child, .tl__len { text-align: right; }
.tl { list-style: none; margin: 8px 0 0; padding: 0; }
.tl__row {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit; transition: background .2s;
}
.tl__row:hover { background: rgba(26, 32, 51, .045); }
.tl__row[aria-pressed="true"] { background: rgba(227, 184, 102, .16); }
.tl__n { position: relative; display: grid; place-items: center; height: 24px; color: var(--mute); font-variant-numeric: tabular-nums; }
.tl__title { display: flex; flex-direction: column; min-width: 0; }
.tl__hz { font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.tl__theme, .tl__signs, .tl__el, .tl__len { font-size: .9rem; color: var(--mute); }
.tl__theme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__row[aria-pressed="true"] .tl__hz { color: var(--bronze); }
/* barrinhas de equalizador na faixa que está tocando */
.tl__eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.tl__eq i { width: 3px; background: var(--bronze); border-radius: 1px; animation: eq .9s ease-in-out infinite alternate; }
.tl__eq i:nth-child(2) { animation-delay: -.3s; } .tl__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
.player.is-playing .tl__row[aria-pressed="true"] .tl__num { display: none; }
.player.is-playing .tl__row[aria-pressed="true"] .tl__eq { display: flex; }
/* seletor em uma linha (só no celular) */
.fsel { display: none; }
.fsel__chip {
  flex: none; padding: 9px 14px; border: 1px solid rgba(26, 32, 51, .18); border-radius: 999px; background: #fff;
  font: 500 .92rem/1 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer;
}
.fsel__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fsel__chip:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.player__more { margin: 22px 16px 0; font-size: .88rem; color: var(--mute); max-width: 60ch; }
.freq__note { width: min(1180px, 100%); margin: clamp(48px, 8vh, 88px) auto 0; font-size: .82rem; text-align: center; color: var(--mute, rgba(26, 32, 51, .56)); }

.btn--line { border: 1px solid rgba(239, 230, 214, .5); color: var(--ivory); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- 8 · Sessões (frase grande) ---------- */
.statement {
  position: relative; overflow: hidden; background: #fff; color: var(--ink);   /* toda branca, emendada no branco das Frequências */
  min-height: 100vh; padding: 0 var(--gut) clamp(56px, 10vh, 110px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.statement__line { width: 1px; height: clamp(90px, 16vh, 160px); background: rgba(26, 32, 51, .3); transform-origin: top; }
.statement__label { margin-top: 26px; font-family: var(--f-body); font-weight: 500; font-size: .95rem; color: #8a5526; }
.statement__text {
  margin: 26px 0 0; max-width: 22ch;
  font-family: var(--f-display); font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.08;
}
.statement__text .ln { display: block; overflow: hidden; }
.statement__text .ln > span { display: inline-block; }
.statement__seal { margin-top: 36px; width: 44px; height: 44px; }
.statement__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.statement .btn--line { border-color: rgba(26, 32, 51, .35); color: var(--ink); }
.statement .btn--line:hover { border-color: #8a5526; color: #8a5526; }
.plant--statement { left: -1vw; right: auto; top: auto; bottom: -1vh; height: 46vh; transform-origin: 0 100%; }
.plant--statement .plant__media { transform: scaleX(-1); } /* mesma flor, nascendo do canto esquerdo */

/* ---------- 9 · Journal (blog): vídeo da Terra preso à rolagem + artigos ---------- */
.journal { position: relative; z-index: 2; background: transparent; color: var(--ivory); overflow-x: clip; }   /* por fora da curva aparecem as Sessões, travadas */
.journal__stage { position: relative; height: 520vh; }
.journal__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #0f2a17; }
.journal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.journal__iris {
  position: absolute; inset: 0; --r: 120vmax; background: var(--terra-bg, #2f381a);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
.journal__head { position: absolute; left: 0; right: 0; top: 0; padding: clamp(92px, 13vh, 150px) var(--gut) 0; text-align: center; }
.journal__title { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; }
.journal__sub { margin: 12px auto 0; max-width: 46ch; color: rgba(239, 230, 214, .85); }
.posts {
  position: absolute; left: 50%; bottom: clamp(70px, 10vh, 110px); transform: translateX(-50%);
  width: min(1280px, calc(100% - 2 * var(--gut))); margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
/* card: imagem em cima, título embaixo (sem desfoque por trás: pesava e tremia no iPhone) */
.post__link {
  display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden;
  color: var(--ivory); text-decoration: none;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(232, 194, 138, .3);
  transition: border-color .3s, background .3s, transform .3s;
}
.post__link:hover { border-color: var(--gold); background: rgba(0, 0, 0, .32); transform: translateY(-3px); }
.post__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.post__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.post__link:hover .post__img img { transform: scale(1.04); }
.post__tag { margin: 16px 18px 0; font-size: .8rem; color: var(--gold); }
.post__title {
  margin: 6px 18px 0; font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100;
  text-transform: none; font-size: 1.25rem; line-height: 1.25; letter-spacing: 0;
}
.post__meta { margin: auto 18px 0; padding: 14px 0 16px; font-size: .78rem; color: rgba(239, 230, 214, .65); display: flex; gap: 8px; align-items: center; }
.journal__all {
  position: absolute; left: 50%; bottom: clamp(24px, 3.5vh, 40px); transform: translateX(-50%);
  color: var(--ivory); font-size: .9rem; text-decoration: none; border-bottom: 1px solid rgba(239, 230, 214, .45); padding-bottom: 3px;
}
.journal__all:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- 10 · Como ouvir (arco que sobe + colagem) ---------- */
/* A seção sobe por cima do fim dos Elementos: só o arco é marfim, as laterais deixam a imagem aparecer. */
.listen { position: relative; z-index: 4; margin-top: -60vh; }
.listen__arch {
  width: 100%; margin: 0; background: var(--ivory); color: var(--ink);
  border-radius: 50% 50% 0 0 / var(--arc-h) var(--arc-h) 0 0;   /* arco na largura toda */ padding: clamp(110px, 20vh, 220px) var(--gut) clamp(72px, 12vh, 140px);
}
.listen__head { text-align: center; }
.listen__title { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .95; }
.listen__sub { margin: 18px 0 0; font-size: 1.1rem; color: rgba(26, 32, 51, .72); }

/* colagem desencontrada: imagens em tamanhos e alturas diferentes, como no original */
.steps {
  list-style: none; margin: clamp(56px, 10vh, 120px) auto 0; padding: 0; width: min(1180px, 100%);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: clamp(40px, 8vh, 96px);
}
.step--1 { grid-column: 1 / span 5; }
.step--2 { grid-column: 8 / span 4; margin-top: 18vh; }
.step--3 { grid-column: 2 / span 4; }
.step--4 { grid-column: 7 / span 5; margin-top: 10vh; }
.step__img { margin: 0 0 18px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.step__img img { width: 100%; height: 112%; object-fit: cover; display: block; will-change: transform; }
.step h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.15; display: flex; gap: 12px; align-items: baseline; }
.step__n { font-family: var(--f-body); font-size: .85rem; font-weight: 600; color: #8a5526; }
.step p { margin: 8px 0 0 calc(.85rem + 12px); color: rgba(26, 32, 51, .72); max-width: 34ch; }
.listen__note { margin: clamp(56px, 9vh, 96px) auto 0; max-width: 60ch; text-align: center; font-size: .85rem; color: rgba(26, 32, 51, .6); }

/* ---------- 11 · About us (janelas que se juntam) ---------- */
.about { background: var(--ivory); color: var(--ink); }
.about__pin { position: relative; height: 100vh; height: 100lvh; overflow: hidden; }
/* posição inicial: duas janelas do MESMO tamanho, desencontradas na altura (como no original) */
.about__win { position: absolute; margin: 0; overflow: hidden; background: #fff; }   /* fundo branco, igual ao das fotos */
.about__win img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; }   /* tamanho e posição vêm do JS (rosto único ao juntar) */
.about__win--serena { left: 24vw; top: 34vh; width: 20vw; height: 46vh; }
.about__win--elijah { left: 50vw; top: 14vh; width: 20vw; height: 46vh; }
.plant--about { right: -1vw; bottom: -1vh; height: 50vh; z-index: 3; }

.about__title {
  position: absolute; left: 0; right: 0; top: 4vh; z-index: 2; text-align: center; overflow: hidden;
  font-size: clamp(4.5rem, 15vw, 15rem); line-height: .95; color: #fff;
  text-shadow: 0 2px 40px rgba(7, 11, 20, .35);
}
.about__title span { display: inline-block; }
.about__title em { color: var(--gold); }
/* texto branco direto sobre as fotos (sem caixa), centralizado na emenda */
.about__text {
  position: absolute; left: 50%; bottom: clamp(70px, 14vh, 140px); z-index: 2; width: min(640px, calc(100% - 2 * var(--gut)));
  transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 0 1px 18px rgba(7, 11, 20, .5);
}
.about__text h3 { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-bottom: 14px; }
.about__text p { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.6; color: rgba(255, 255, 255, .94); }
.about__btn { margin-top: 10px; }
/* quando as fotos se juntam, uma máscara escura translúcida esmaece os dois e o texto aparece em branco */
.about__pin::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--shade, 0);
  background: linear-gradient(180deg, rgba(7, 11, 20, .5) 0%, rgba(7, 11, 20, .42) 45%, rgba(7, 11, 20, .68) 100%);
}

/* ---------- 12 · Céu do mês: transição da água (arco + vídeo + máscara) e o calendário por cima ---------- */
.sky { position: relative; z-index: 3; margin-top: -100vh; color: var(--ivory); }   /* sobe por cima do fim do About (travado) */
.sky__stage { position: relative; height: 430vh; }
.sky__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--agua-bg, #255758); }
.sky__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sky__iris {
  position: absolute; inset: 0; --r: 120vmax; background: var(--agua-bg, #255758);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
.sky__content {
  position: absolute; inset: 0; z-index: 2; padding: clamp(96px, 15vh, 150px) var(--gut) 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.sky__label { margin-top: 0; font-family: var(--f-body); font-weight: 500; font-size: .95rem; color: var(--gold); }
.sky__content { flex-direction: row; gap: clamp(32px, 6vw, 96px); }
.sky__moon3d { position: relative; flex: none; width: clamp(220px, 30vw, 420px); aspect-ratio: 1; }
.sky__moon3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 640px; }
.sky__text .sky__next { justify-content: flex-start; }
.sky__moon { width: 100%; height: 100%; }
.sky__moon-dark { fill: rgba(239, 230, 214, .16); }
.sky__moon-lit { fill: var(--ivory); }
.sky__lines { margin: 22px 0 0; font-family: var(--f-display); font-size: clamp(2.4rem, 4.2vw, 4.4rem); line-height: 1.04; }
.sky__lines .ln > span { white-space: nowrap; }
.sky__lines .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.sky__lines .ln > span { display: inline-block; }
.sky__lines sup {
  display: inline-block; vertical-align: top; margin-left: .35em; margin-top: .55em;
  font-family: var(--f-body); font-size: .8rem; font-weight: 500; color: var(--gold);
}
.sky__next { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; font-size: .95rem; }
.sky__sub { margin: 12px 0 0; max-width: 46ch; color: rgba(239, 230, 214, .75); font-size: .95rem; }
.sky__btn { margin-top: 24px; }
.plant--sky { right: -1vw; top: -1vh; bottom: auto; height: 46vh; transform-origin: 100% 0; z-index: 3; }
.plant--sky .plant__media { transform: scaleY(-1); } /* pendendo do canto de cima à direita */

/* ---------- 12b · Depoimentos (fileira que corre de lado) ---------- */
.voices { position: relative; z-index: 4; margin-top: -100vh; color: var(--ivory); }   /* sobe por cima do fim do Céu do mês (travado) */
.voices__stage { position: relative; height: 380vh; }
.voices__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--fonte-bg, #255758); }
.voices__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.voices__iris {
  position: absolute; inset: 0; --r: 120vmax; background: var(--fonte-bg, #255758);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
.voices__content {
  /* título e cards mais para o alto da tela */
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(84px, 11vh, 120px) 0 clamp(40px, 7vh, 72px);
}
.voices__head { text-align: center; padding: 0 var(--gut); }
.voices__title { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; }
.voices__sub { margin: 14px auto 0; max-width: 46ch; color: rgba(239, 230, 214, .78); }
/* carrossel: um card grande por vez, os vizinhos aparecem menores dos lados */
.voices__track {
  --vw: min(560px, 42vw); --vh: min(400px, 46vh);
  position: relative; height: calc(var(--vh) + 24px); margin-top: clamp(24px, 4vh, 44px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
/* card de cerâmica: borda grossa em relevo (esmalte creme) e o centro côncavo, como uma peça de barro vidrada */
.voice {
  position: absolute; left: 50%; top: 0; width: var(--vw); height: var(--vh); margin: 0 0 0 calc(var(--vw) / -2);
  padding: 16px; border-radius: 34px; color: var(--ink); cursor: pointer;
  background: url("/media/ruido_ceramica.png"), linear-gradient(145deg, #fffdf8 0%, #f6eddd 30%, #e2d2b4 62%, #cdb791 100%);
  box-shadow: inset 2px 3px 1px rgba(255, 255, 255, .95), inset -4px -5px 8px rgba(120, 88, 40, .38),
              0 34px 60px -30px rgba(0, 0, 0, .65), 0 12px 22px -12px rgba(0, 0, 0, .4);
}
.voice__well {
  position: relative; height: 100%; border-radius: 22px; padding: 34px 34px 24px; display: flex; flex-direction: column; overflow: hidden;
  background: url("/media/ruido_ceramica.png"), radial-gradient(130% 100% at 50% 38%, #fffefb 0%, #fbf6ee 48%, #efe4d1 86%, #e6d6bb 100%);
  box-shadow: inset 0 12px 20px -10px rgba(110, 78, 30, .5), inset 8px 0 16px -12px rgba(110, 78, 30, .4),
              inset -6px -8px 14px -8px rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(150, 110, 50, .25);
}
.voice__quote {
  margin: 0; font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; font-size: 1.42rem; line-height: 1.42;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.voice__quote::before { content: "“"; display: block; height: .5em; font-size: 3.6em; line-height: 1; color: #b8862b; text-shadow: 0 1px 0 #fff; }
.voice:not(.is-long) .voice__more { visibility: hidden; }
.voice__more { margin-top: 10px; font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #8a5526; }
.voice__open { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; }
.voice__open:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.voice__by { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 12px; font-size: .88rem; }
/* foto da pessoa (da conta dela); sem foto, as iniciais num círculo dourado */
.voice__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(145deg, #f3d48a, #b37a22); color: #fff; font: 600 .9rem/1 var(--f-body); letter-spacing: .04em;
  box-shadow: 0 0 0 2px #faf6ee, 0 0 0 3px rgba(168, 116, 31, .45);
}
.voice__avatar img { width: 100%; height: 100%; object-fit: cover; }
.voice__who { display: flex; flex-direction: column; gap: 2px; }
.voice__meta .todo { margin-left: 6px; }
.voice__name { font-weight: 600; }
.voice__meta { color: rgba(26, 32, 51, .55); }
.voices__nav { margin-top: clamp(18px, 3.5vh, 36px); }
.voices__nav { display: flex; justify-content: center; gap: 14px; }
.voices__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(239, 230, 214, .45); background: none;
  color: var(--ivory); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.voices__btn:hover { border-color: var(--gold); color: var(--gold); }
.voices__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* card aberto: ocupa a tela, com o texto inteiro (rola por dentro se for longo) */
.vmodal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 70px var(--gut) 90px;
  background: rgba(10, 24, 24, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vmodal[hidden] { display: none; }
.vmodal__card { position: relative; left: auto; top: auto; margin: 0; width: min(760px, 100%); height: auto; max-height: 100%; cursor: default; }
.vmodal__card .voice__well { max-height: calc(100svh - 200px); overflow-y: auto; padding: 40px 40px 30px; }
.vmodal__card .voice__quote { -webkit-line-clamp: unset; display: block; font-size: 1.55rem; }
.vmodal__card .voice__more { display: none; }
.vmodal__close {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 12px 24px; border-radius: 999px;
  border: 1px solid rgba(239, 230, 214, .6); background: none; color: var(--ivory); font: 600 .8rem/1 var(--f-body);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.vmodal__close:hover { border-color: var(--gold); color: var(--gold); }

/* caixa para deixar o depoimento (continua no mesmo verde-água, depois dos cards) */
.voices__write {
  background: var(--fonte-bg, #255758); padding: clamp(24px, 5vh, 56px) var(--gut) clamp(72px, 12vh, 130px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px);
  width: 100%; margin: 0 auto;
}
.voices__write > * { max-width: 640px; }
.voices__write-copy { justify-self: end; }
.voices__write-title { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; }
.voices__write-copy p { margin: 16px 0 0; max-width: 40ch; color: rgba(239, 230, 214, .82); line-height: 1.6; }
.voices__write-copy .voices__write-small { font-size: .85rem; color: rgba(239, 230, 214, .6); }
.vform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.vform__field, .vform__row > *, .vform__photo-pick { min-width: 0; }   /* nada passa da largura da tela */
.vform__photo { display: flex; align-items: center; gap: 16px; }
.vform__avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: 1px dashed rgba(239, 230, 214, .5); color: rgba(239, 230, 214, .7); font-size: 1.6rem; background: rgba(0, 0, 0, .12);
}
.vform__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vform__photo-pick { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: .88rem; color: rgba(239, 230, 214, .9); cursor: pointer; }
.vform__photo-pick i { font-style: normal; color: rgba(239, 230, 214, .55); }
.vform__photo-pick small { color: rgba(239, 230, 214, .6); font-size: .78rem; }
.vform__photo-pick input { width: 100%; font-size: .82rem; color: rgba(239, 230, 214, .8); max-width: 100%; }
.vform__photo-pick input::file-selector-button {
  margin-right: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(239, 230, 214, .45);
  background: none; color: var(--ivory); font: 500 .82rem var(--f-body); cursor: pointer;
}
.vform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vform__field { display: grid; gap: 6px; font-size: .88rem; color: rgba(239, 230, 214, .9); position: relative; }
.vform__field i { font-style: normal; color: rgba(239, 230, 214, .55); }
.vform input[type="text"], .vform input[type="email"], .vform select, .vform textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(239, 230, 214, .3);
  background: rgba(0, 0, 0, .14); color: var(--ivory); font: 400 1rem/1.4 var(--f-body);
}
.vform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.vform select option { color: var(--ink); }
.vform textarea { resize: vertical; min-height: 130px; }
.vform input:focus, .vform select:focus, .vform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 194, 138, .25); }
.vform [aria-invalid="true"] { border-color: #f0a88a; }
.vform__count { justify-self: end; font-size: .75rem; color: rgba(239, 230, 214, .55); }
.vform__check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: rgba(239, 230, 214, .85); line-height: 1.45; }
.vform__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.vform__send { justify-self: start; min-height: 50px; border: 0; cursor: pointer; }
.vform__msg { margin: 0; min-height: 1.4em; font-size: .92rem; color: var(--gold); }

/* ---------- 13 · Origem: a fonte vira a Flor da Vida (arco + vídeo + máscara) e o título ---------- */
.origin { position: relative; z-index: 5; color: var(--ivory); }
.origin__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--flor-bg, #255656); }
.origin__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.origin__iris {
  position: absolute; inset: 0; --r: 120vmax; background: var(--flor-bg, #255656);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
.origin__stage { position: relative; height: 380vh; }
.origin__copy {
  /* título mais para o alto da tela */
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: start center; text-align: center;
  padding: clamp(120px, 21vh, 220px) var(--gut) 0;
}
.origin__title { font-size: clamp(2.8rem, 7.2vw, 7rem); line-height: 1; max-width: 14ch; margin: 0 auto; }
.origin__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.origin__title .w > span { display: inline-block; }
.origin__sub { margin: 22px 0 0; font-size: 1rem; letter-spacing: .14em; color: var(--gold); }
.origin__circle {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(32px, 8vh, 80px); transform: translateX(-50%);
  width: 132px; height: 132px; border-radius: 50%; border: 1px solid rgba(239, 230, 214, .55);
  display: grid; place-items: center; padding: 18px; text-align: center; text-decoration: none;
  font-size: .78rem; line-height: 1.3; color: var(--ivory);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.origin__circle:hover { background: var(--ivory); color: var(--ink); }

/* ---------- 14 · Newsletter: a Flor da Vida vira a nossa logo (arco + vídeo + máscara) ---------- */
.letter { position: relative; z-index: 6; margin-top: -100vh; color: var(--ivory); }
.letter__land { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--logo-bg, #0f2035); }
.letter__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.letter__iris {
  position: absolute; inset: 0; --r: 120vmax; background: var(--logo-bg, #0f2035);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5vmax));
}
.letter__stage { position: relative; height: 340vh; }
.letter__content {
  position: absolute; inset: 0; z-index: 2; text-align: center; padding: clamp(80px, 12vh, 130px) var(--gut) 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.footer__seal { width: 56px; height: 56px; }
.footer__title { margin-top: 28px; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1; max-width: 14ch; }
.footer__sub { margin: 20px 0 0; max-width: 46ch; color: rgba(239, 230, 214, .72); }
.letter-form { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: min(520px, 100%); }
.letter-form input {
  flex: 1 1 260px; height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(239, 230, 214, .3); background: rgba(239, 230, 214, .06); color: var(--ivory);
  font: 400 1rem var(--f-body);
}
.letter-form input::placeholder { color: rgba(239, 230, 214, .45); }
.letter-form input:focus { outline: none; border-color: var(--gold); }
.letter-form input[aria-invalid="true"] { border-color: #e08a6a; }
.letter-form .btn { min-height: 48px; border: 0; cursor: pointer; }
.letter-form__msg { flex-basis: 100%; margin: 4px 0 0; min-height: 1.3em; font-size: .9rem; color: var(--gold); }
.footer__small { margin: 4px 0 0; font-size: .82rem; color: rgba(239, 230, 214, .5); }
/* ---------- 15 · Rodapé ---------- */
.site-footer {
  background: var(--night); color: var(--ivory); padding: clamp(56px, 9vh, 96px) var(--gut) 28px;
  border-top: 1px solid rgba(239, 230, 214, .12);
}
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.site-footer__brand span { display: flex; flex-direction: column; font-family: var(--f-display); font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; }
.site-footer__brand small { font-family: var(--f-body); font-size: .72rem; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; margin-top: 4px; }
/* marca no rodapé: a arte da palavra da Hero (nome + "Sacred Frequencies"), em vez da fonte digitada */
.brand-lock { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.brand-lock img:first-child { height: 30px; width: auto; }
.brand-lock img + img { height: 15px; width: auto; }
@media (max-width: 760px) { .brand-lock img:first-child { height: 24px; } .brand-lock img + img { height: 12px; } }
.site-footer__tag { margin: 0; flex: 1 1 280px; color: rgba(239, 230, 214, .7); }
.site-footer__cols {
  margin-top: clamp(40px, 7vh, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px;
}
.site-footer__cols h3 { margin: 0 0 12px; font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.site-footer__cols a { display: block; padding: 5px 0; color: rgba(239, 230, 214, .82); text-decoration: none; font-size: .95rem; }
.site-footer__cols a:hover { color: var(--gold); }
.site-footer__bottom {
  margin-top: clamp(40px, 7vh, 64px); padding-top: 20px; border-top: 1px solid rgba(239, 230, 214, .12);
  display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; font-size: .82rem; color: rgba(239, 230, 214, .6);
}
.site-footer__note { margin: 0; max-width: 62ch; font-size: .78rem; line-height: 1.5; color: rgba(239, 230, 214, .45); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* máscaras sobre os vídeos: um pouco translúcidas (o fim do vídeo aparece esmaecido por trás) */
.intro--film .hero__iris, .portals__iris, .journal__iris, .sky__iris, .voices__iris, .origin__iris, .letter__iris { opacity: .84; }

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .voice { padding: 24px 22px 20px; }
  .voice__quote { font-size: 1.15rem; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__yt { width: 100%; justify-content: center; }
  .hnav { display: none; }
  .seal { width: 84px; height: 84px; }
  .seal__logo { width: 44px; height: 44px; }
  .menu__list { columns: 1; }
  .hero__top { top: 92px; }
  .arch { width: 70vw; }
  .arch__stage { justify-content: flex-start; }
  .arch__seal { display: none; }
  .arch__stage { padding-top: 96px; }
  .arch__title { font-size: 2rem; }
  .pillars { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; text-align: left; }
  /* No celular cada pilar vira uma linha: ícone à esquerda, texto à direita */
  .pillar { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; }
  .pillar > :not(svg) { grid-column: 2; }
  .pillar__icon { grid-row: 1 / span 3; width: 36px; height: 36px; margin: 2px 0 0; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid rgba(26, 32, 51, .14); padding-top: 18px; }
  .pillar h3 { font-size: 1.35rem; margin-bottom: 4px; }
  .pillar p { margin-bottom: 8px; font-size: .92rem; max-width: none; }
  .pillar .more { justify-self: start; font-size: .92rem; }
  /* textos mais longos (tom novo): os 4 pilares precisam caber inteiros na tela presa */
  .arch__stage { padding-top: 70px; }
  .arch__title { font-size: 1.7rem; }
  .pillars { gap: 10px; margin-top: 16px; }
  .pillar + .pillar { padding-top: 10px; }
  .pillar h3 { font-size: 1.12rem; margin-bottom: 2px; }
  .pillar p { font-size: .8rem; line-height: 1.4; margin-bottom: 4px; }
  .pillar .more { font-size: .8rem; }
  .pillar__icon { width: 30px; height: 30px; }
  .arch__note { margin-top: 22px; }

  .chart__grid { grid-template-columns: 1fr; }
  .wheel { width: min(420px, 100%); margin: 0 auto; }
  .chart__formbox { justify-self: stretch; margin: 0 auto; text-align: center; }
  .chart-form { grid-template-columns: 1fr 1fr; text-align: left; }
  .btn--ink { justify-self: stretch; }
  .chart__title { font-size: 3.2rem; }
  /* celular: formulário encostado no astrolábio, campos e doação mais compactos */
  .chart__grid { gap: 4px; margin-top: 24px; }
  .chart-form { gap: 8px 10px; }
  .field { gap: 4px; }
  .field label { font-size: .76rem; }
  .field input { height: 40px; padding: 0 12px; font-size: .92rem; border-radius: 9px; }
  .chart-form .btn--ink { min-height: 44px; margin-top: 4px; }
  .chart__trust { font-size: .78rem; }
  .donate { margin-top: 26px; padding: 18px 18px 20px; border-radius: 14px; }
  .donate h3 { font-size: 1.35rem; }
  .donate p { margin: 6px auto 12px; font-size: .88rem; }
  .donate .btn { min-height: 40px; padding: 0 20px; }
  .band { padding: 14px 0; }
  .band__list strong { font-size: 1.5rem; }
  .band__list span { font-size: .85rem; }

  /* Loja no celular: mesma faixa lateral, só em escala menor */
  .shop__track { gap: 22px; padding-right: 64px; }
  .shop__intro { width: calc(100vw - var(--gut) * 2); padding: 0; }
  .shop__title { font-size: 3.4rem; }
  .shop__sub { font-size: 1rem; margin: 14px 0 22px; }
  .shop__note { margin-top: -10px; font-size: .76rem; padding: 0 24vw 0 6vw; }   /* sobe para longe da planta de baixo */
  .item { width: 62vw; }
  .item--cat { width: 70vw; }
  .pcard { --pw: 62vw; }
  .vit .pcard { --pw: 40vw; }
  .vit__banner { height: 24vh; }
  .vit__txt b { font-size: 1.15rem; }
  .hcol { width: 74vw; height: calc(62vw * 1.25 + 130px); }
  .hcol .item__art { aspect-ratio: 1 / .62; }
  .hcol__body { padding: 0 22px 24px; }
  .shop__eyebrow::before, .shop__eyebrow::after { width: 16px; margin: 0 8px; }
  .item:nth-of-type(even) { margin-top: 8vh; }
  .item__art { border-radius: 120px 120px 12px 12px; }
  .item h3 { font-size: 1.15rem; margin-top: 12px; }
  /* mesmas flores do PC, só menores para não cobrir os cards */
  .plant--bottom { height: 38vh; bottom: -4vh; right: -5vw; }
  .shop__end { margin-right: 8vw; padding-left: 24vw; font-size: clamp(2rem, 9vw, 2.6rem); }   /* no celular a planta fica no pé da tela: o texto cabe inteiro */
  .plant--top { height: 28vh; top: 0; }

  /* Portais no celular: a mesma linha do PC, mais larga que a tela, corre de lado com a rolagem */
  .route__inner { width: 1180px; }
  .portals__stage { height: 640vh; }
  .fan { --cw: 150px; --ch: 229px; --pivot: 260%; bottom: 37%; }   /* leque de cima; o de baixo desce pelo JS */
  .fc__side { font-size: 1em; }
  /* no celular o leque não cabe inteiro: a pessoa gira com o dedo */
  .fan__hint {
    display: block; position: absolute; left: 0; right: 0; bottom: 7vh; z-index: 4; margin: 0; text-align: center;
    font: 600 .68rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(239, 230, 214, .6);
    opacity: 0; transition: opacity .6s;
  }
  .fan.is-shown + .fan__hint { opacity: 1; }
  .fan.is-open + .fan__hint { opacity: 0; }
  .fb__carry { grid-template-columns: 1fr 1fr; }
  .fb__actions { flex-direction: column; gap: .9em; }
  .clouds { top: -20vh; height: 40vh; }
  .clouds__row--back { height: 24vh; }
  .clouds__row--back .clouds__strip { --tile: calc(24vh * 3200 / 511); }
  .clouds__row--front { top: 13vh; height: 17vh; }
  .clouds__row--front .clouds__strip { --tile: calc(17vh * 3200 / 489); }
  .freq { margin-top: -100vh; }
  .plant--statement { height: 24vh; }
  .statement__text { font-size: 2rem; }

  /* Como ouvir no celular: o mesmo arco e a mesma colagem desencontrada, em 2 colunas */
  .listen { margin-top: -40vh; }
  .listen__arch { padding-top: 90px; }
  .listen__title { font-size: 3rem; }
  .steps { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 32px; }
  .step--1, .step--3 { grid-column: 1; }
  .step--2, .step--4 { grid-column: 2; margin-top: 12vh; }
  .step--3 { margin-top: -6vh; }
  .step h3 { font-size: 1.05rem; gap: 6px; }
  .step p { margin-left: 0; font-size: .85rem; }

  /* About us no celular: mesmas duas janelas desencontradas, em escala menor */
  .about__win--serena { left: 7vw; top: 42vh; width: 41vw; height: 30vh; }
  .about__win--elijah { left: 52vw; top: 22vh; width: 41vw; height: 30vh; }
  .plant--about { height: 24vh; }
  .about__title { font-size: 5rem; top: 12vh; }
  .about__text { bottom: 104px; }   /* acima da barra de baixo do iPhone */
  .about__text h3 { font-size: 1.7rem; }
  .about__text p { font-size: 1rem; line-height: 1.55; }
  .plant--sky { height: 22vh; }
  .sky__lines { font-size: 2.3rem; }
  .journal__stage { height: 480vh; }
  .sky__stage { height: 400vh; }
  .origin__stage { height: 360vh; }
  .origin__copy { padding-top: 18vh; }
  .acct-btn { margin-left: auto; margin-right: 14px; padding: 8px 12px; }
  .letter__stage { height: 320vh; }
  .origin__circle { width: 112px; height: 112px; bottom: 96px; }
  .voices__stage { height: 360vh; }
  .voices__track { --vw: 84vw; --vh: min(430px, 52vh); }
  .voice { padding: 12px; border-radius: 28px; }
  .voice__well { padding: 26px 24px 20px; border-radius: 18px; }
  .voice__quote { font-size: 1.22rem; -webkit-line-clamp: 6; }
  .vmodal__card .voice__well { padding: 30px 24px 24px; }
  .vmodal__card .voice__quote { font-size: 1.3rem; }
  .voices__write { grid-template-columns: minmax(0, 1fr); padding-top: 16px; padding-bottom: 110px; }
  .voices__write-copy { justify-self: start; }
  .vform__row { grid-template-columns: 1fr; }
  .voices__content { padding-top: 96px; padding-bottom: 96px; }
  .sky__content { padding-top: 100px; padding-bottom: 96px; }
  .sky__content { flex-direction: column; gap: 6px; }
  .sky__moon3d { width: min(170px, 44vw); }
  .sky__text { align-items: center; text-align: center; }
  .sky__text .sky__next { justify-content: center; }
  :root { --arc-h: 9vh; }
  .journal__head { padding-top: 96px; }
  .journal__title { font-size: 2.8rem; }
  /* celular: os 4 artigos juntos na tela, em 2 × 2, com imagem */
  /* acima da barra de baixo do iPhone (voltar/avançar), para os 4 ficarem à mostra */
  .posts { left: 0; transform: none; width: 100%; padding: 0 var(--gut); bottom: 122px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .journal__all { bottom: 82px; }
  .post__link { border-radius: 12px; }
  .post__img { aspect-ratio: 16 / 10; }
  .post__tag { margin: 10px 12px 0; font-size: .7rem; }
  .post__title { margin: 4px 12px 0; font-size: .98rem; line-height: 1.22; }
  .post__meta { margin: auto 12px 0; padding: 8px 0 10px; font-size: .68rem; gap: 6px; }
  .post__meta .todo { font-size: .6rem; }

  /* Frequências no celular: mesmas peças do PC, em escala menor (dados | arte | tema) */
  /* celular: arco 80vw que abre; player em pilha (prato, dados, onda, controles, lista) */
  .freq__arch { padding-top: 90px; }
  .freq__h2 { font-size: 2.5rem; }
  /* celular: o player inteiro numa tela — mandala à esquerda com os Hz ao lado, onda, controles e o seletor */
  .player { left: auto; transform: none; width: 100%; grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .freq__sub { font-size: 1rem; margin-top: 10px; }
  .player__now {
    width: 100%; display: grid; grid-template-columns: 58% 1fr; column-gap: 14px; align-items: center;
    grid-template-areas: "plate meta" "wave wave" "ctl ctl" "sel sel";
  }
  .plate { grid-area: plate; width: 100%; margin: 0; }
  .player__meta { grid-area: meta; margin-top: 0; }
  .player__hz { font-size: 2.35rem; white-space: nowrap; }
  .player__theme { font-size: 1rem; margin-top: 8px !important; }
  .player__signs { font-size: .9rem; }
  .player__wave { grid-area: wave; margin-top: 18px; }
  .player__controls { grid-area: ctl; margin-top: 8px; justify-content: center; gap: 12px; }
  .pc__vol { margin-left: 10px; }
  .pc__vol input { width: 84px; }
  /* as 8 frequências em duas linhas de 4, centralizadas */
  .fsel { grid-area: sel; display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 8px; margin-top: 14px; }
  .fsel__chip { padding: 9px 11px; font-size: .86rem; white-space: nowrap; }
  .player__list { display: none; }
  .tl__head { display: none; }
  .tl__row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 12px 8px; }
  .tl__signs, .tl__el { display: none; }
  .tl__theme { white-space: normal; }
  .player__more { margin: 18px 8px 0; }
}

/* ---------- Sem animação (preferência do sistema) ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .intro { height: auto; overflow: visible; }
  .hero { position: relative; height: 100vh; height: 100lvh; }
  .arch { position: relative; left: auto; transform: none; width: 100%; height: auto; border-radius: 50vw 50vw 0 0; }
  .arch__stage { position: relative; left: auto; transform: none; width: 100%; height: auto; padding-top: 120px; }
  /* sem animação, a faixa da loja vira uma rolagem lateral comum */
  .shop__pin { height: auto; overflow-x: auto; padding: 96px 0 64px; }
  .shop__track { position: relative; height: auto; }
}

/* celulares baixos (ex.: Android 360×640, iPhone SE): o player inteiro cabe na tela travada */
@media (max-width: 820px) and (max-height: 760px) {
  .freq__h2 { font-size: 2.1rem; }
  .freq__sub { font-size: .9rem; margin-top: 6px; }
  .player { margin-top: 14px; }
  .player__now { grid-template-columns: 46% 1fr; }
  .player__hz { font-size: 2rem; }
  .player__wave { margin-top: 10px; }
  .wave { height: 40px; }
  .wave__seek { height: 40px; }
  .player__controls { margin-top: 2px; }
  .pc--play { width: 50px; height: 50px; }
  .fsel { margin-top: 8px; gap: 6px; }
  .fsel__chip { padding: 7px 9px; font-size: .8rem; }
  .posts { bottom: 104px; }
  .post__title { font-size: .9rem; }
  .post__img { aspect-ratio: 16 / 9; }
  .journal__head { padding-top: 76px; }
}

/* celular: o Journal empilha (título → cards → "Read all") no meio da tela, sem nada por cima de nada,
   em qualquer altura de tela; fica acima da barra de baixo do iPhone */
@media (max-width: 820px) {
  .journal__land { display: flex; flex-direction: column; justify-content: center; padding: 64px 0 88px; }
  .journal__head { position: relative; inset: auto; padding: 0 var(--gut); }
  .posts { position: relative; left: auto; bottom: auto; margin-top: 16px; }
  .journal__all { position: relative; left: auto; bottom: auto; transform: none; align-self: center; margin-top: 14px; }
}
@media (max-width: 820px) and (max-height: 760px) {
  .journal__head { padding-top: 0; }
  .journal__title { font-size: 2.3rem; }
  .journal__sub { font-size: .88rem; margin-top: 6px; }
  .post__img { aspect-ratio: 2 / 1; }
  .post__meta { display: none; }
  .post__title { margin-bottom: 10px; }
}

/* ---------- resultado do mapa: visão didática (js/chartview.js) ---------- */
.rtabs { margin-top: 26px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #f1ead9; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs [role=tab] { flex: none; border: 0; background: none; padding: 10px 18px; border-radius: 999px; font: 600 .88rem var(--f-body); color: rgba(26, 32, 51, .6); cursor: pointer; }
.rtabs [role=tab][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.rtabs [role=tab]:focus-visible { outline: 2px solid #b8862b; outline-offset: 2px; }
.rpanel { margin-top: 24px; }
.rov { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
/* roda */
.cw { width: 100%; height: auto; display: block; font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", serif; }
.cw__rim { fill: #fbf6ec; stroke: #b8862b; stroke-width: 2; }
.cw__sign { opacity: .16; }
.cw__sg { font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: #6b4a1b; }
.cw__tick { stroke: rgba(107, 74, 27, .45); stroke-width: 1; }
.cw__line { fill: none; stroke: rgba(107, 74, 27, .35); stroke-width: 1; }
.cw__core { fill: #fffdf8; stroke: rgba(107, 74, 27, .35); stroke-width: 1; }
.cw__cusp { stroke: rgba(26, 32, 51, .22); stroke-width: 1; }
.cw__cusp--axis { stroke: #17365c; stroke-width: 1.8; }
.cw__hn { font: 600 11px var(--f-body); fill: rgba(26, 32, 51, .45); text-anchor: middle; dominant-baseline: central; }
.cw__axis { font: 700 11px var(--f-body); fill: #17365c; text-anchor: middle; letter-spacing: .06em; }
.cw__asp { stroke-width: 1.4; opacity: .75; transition: opacity .25s; }
.cw__asp.is-dim { opacity: .08; }
.cw__ptick { stroke: #8a5526; stroke-width: 1.2; }
.cw__pl { cursor: pointer; outline: none; }
.cw__hit { fill: transparent; }   /* área de toque maior no celular */
.cw__pdot { fill: #fff; stroke: #b8862b; stroke-width: 1.5; transition: fill .2s; }
.cw__pg { font-size: 17px; text-anchor: middle; dominant-baseline: central; fill: #17365c; pointer-events: none; }
.cw__pdeg { font: 600 10px var(--f-body); fill: rgba(26, 32, 51, .55); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cw__pl--minor .cw__pdot { stroke: rgba(184, 134, 43, .5); }
.cw__pl--minor .cw__pg { fill: rgba(23, 54, 92, .6); font-size: 14px; }
.cw__pl:hover .cw__pdot, .cw__pl:focus .cw__pdot, .cw__pl.is-on .cw__pdot { fill: #17365c; }
.cw__pl:hover .cw__pg, .cw__pl:focus .cw__pg, .cw__pl.is-on .cw__pg { fill: #e8c28a; }
.cw__mid { font: 400 22px var(--f-display); fill: rgba(26, 32, 51, .28); text-anchor: middle; text-transform: uppercase; }
.cw__mid2 { font: 500 10px var(--f-body); fill: rgba(26, 32, 51, .4); text-anchor: middle; letter-spacing: .1em; text-transform: uppercase; }
.cw-tip { margin: 10px auto 0; max-width: 46ch; min-height: 3.2em; text-align: center; font-size: .95rem; line-height: 1.5; color: rgba(26, 32, 51, .8); }
.cw-tip .g { font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: #a8741f; }
.cw-key { display: block; margin-top: 4px; font-size: .8rem; color: rgba(26, 32, 51, .55); }
.cw-key i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 10px; }
/* elementos */
.el-box { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; padding: 22px; border-radius: 20px; background: #f5efe3; }
.el-donut { width: 100%; height: auto; }
.el-donut__big { font: 400 34px var(--f-display); fill: var(--ink); text-anchor: middle; }
.el-donut__small { font: 600 12px var(--f-body); fill: rgba(26, 32, 51, .6); text-anchor: middle; letter-spacing: .1em; text-transform: uppercase; }
.el-box h5 { margin: 0 0 10px; font: 600 .8rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #8a5526; }
.el-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; }
.el-list li { display: flex; align-items: center; gap: 8px; }
.el-list i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.el-list b { margin-left: auto; font-weight: 600; }
.el-say { margin: 14px 0 0; font-size: .95rem; line-height: 1.5; color: rgba(26, 32, 51, .8); }
/* cartas dos três grandes (cerâmica e ouro, como as dos portais) */
.b3s { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.b3 { padding: 10px; border-radius: 26px;
  background: linear-gradient(145deg, #fff3c9 0%, #e2b85a 18%, #a8741f 42%, #6f4810 55%, #c8963a 74%, #f6dc93 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 225, .9), inset -1.5px -1.5px 0 rgba(70, 40, 5, .55), 0 22px 40px -22px rgba(0, 0, 0, .55); }
.b3__well { position: relative; padding: 22px 20px 20px; border-radius: 18px; text-align: center;
  background: radial-gradient(130% 95% at 50% 40%, #ffffff 0%, #fdfbf7 45%, #efe8dc 88%, #e3d9c8 100%);
  box-shadow: inset 0 12px 18px -10px rgba(70, 45, 10, .45), inset 0 0 0 1px rgba(120, 80, 20, .35); }
.b3__label { margin: 0; font: 600 .74rem var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: #8a5526; }
.b3__sub { margin: 2px 0 0; font-size: .85rem; color: rgba(26, 32, 51, .6); }
.b3__glyph { display: block; margin-top: 10px; font: 3.6rem/1 "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  background: linear-gradient(160deg, #f3d48a 0%, #b37a22 45%, #7a4c10 70%, #d6a548 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b3__sign { margin: 8px 0 0; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.b3__meta { margin: 6px 0 0; font-size: .82rem; color: rgba(26, 32, 51, .6); }
.b3__meta::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--el); margin-right: 6px; vertical-align: middle; }
.b3__teaser, .b3__rest { margin: 14px 0 0; text-align: left; font-size: .95rem; line-height: 1.55; color: rgba(26, 32, 51, .85); }
.b3__rest { margin-top: 8px; }
.b3__more { margin-top: 12px; border: 0; background: none; padding: 4px 0; font: 600 .78rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #8a5526; cursor: pointer; }
.b3--empty { background: #e9e1d0; box-shadow: none; }
@media (max-width: 820px) {
  .rov { grid-template-columns: 1fr; }
  .rtabs { width: 100%; }
  .rtabs { gap: 2px; padding: 4px; }
  .rtabs [role=tab] { flex: 1 1 auto; padding: 9px 4px; font-size: .72rem; }
  .el-box { grid-template-columns: 120px 1fr; padding: 16px; gap: 14px; }
  .b3s { grid-template-columns: 1fr; }
  .cw-tip { font-size: .88rem; }
}

/* ---------- abas Planets / Aspects / Numbers ---------- */
.rpanel__lead { margin: 0 0 18px; max-width: 64ch; font-size: 1rem; line-height: 1.55; color: rgba(26, 32, 51, .78); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plc { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #f8f3e8; border-left: 4px solid var(--el); }
.plc__g { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #17365c; color: #e8c28a;
  font: 1.45rem/1 "Noto Sans Symbols 2", "Segoe UI Symbol", serif; }
.plc__name { margin: 0; font: 600 1.02rem var(--f-body); display: flex; align-items: center; gap: 6px; }
.plc__r { font: 700 .62rem var(--f-body); padding: 2px 5px; border-radius: 4px; background: #c4553a; color: #fff; }
.plc__key { margin: 2px 0 0; font-size: .85rem; color: #8a5526; font-style: italic; }
.plc__sign { margin: 8px 0 0; font-size: .95rem; }
.plc__sign span[aria-hidden] { font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: var(--el); }
.plc__deg { color: rgba(26, 32, 51, .5); font-size: .85rem; }
.plc__house { margin: 4px 0 0; font-size: .86rem; color: rgba(26, 32, 51, .72); }
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ac { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #f8f3e8; border-left: 4px solid var(--nat); }
.ac__pair { flex: none; display: flex; align-items: center; gap: 4px; font: 1.35rem/1 "Noto Sans Symbols 2", "Segoe UI Symbol", serif; color: #17365c; }
.ac__pair span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid rgba(168, 116, 31, .4); font-size: 1.1rem; font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", var(--f-body); }
.ac__pair i { font-style: normal; color: var(--nat); font-size: 1.1rem; }
.ac__body h5 { margin: 0; font: 600 .95rem var(--f-body); }
.ac__type { font-weight: 400; color: rgba(26, 32, 51, .6); }
.ac__nat { margin: 2px 0 0 !important; font: 600 .72rem var(--f-body) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--nat) !important; }
.ac__body p { margin: 4px 0 0; font-size: .88rem; line-height: 1.45; color: rgba(26, 32, 51, .78); }
.result__nums:has(.nt) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nt { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: #17365c; color: var(--ivory); }
.geo { flex: none; width: 74px; height: 74px; fill: none; stroke: #e8c28a; stroke-width: 2; stroke-linejoin: round; }
.geo__ring { stroke: rgba(232, 194, 138, .35); stroke-width: 1; }
.geo__fill { fill: #e8c28a; stroke: none; }
.nt__label { margin: 0; font: 600 .74rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.nt__label span { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(239, 230, 214, .65); }
.nt__num { margin: 4px 0 0; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.1; }
.nt__num b { font-size: 2.2rem; color: #e8c28a; font-weight: 400; margin-right: 6px; vertical-align: -3px; }
.nt__geo { margin: 4px 0 0; font-size: .8rem; color: rgba(239, 230, 214, .7); }

/* ---------- idiomas ---------- */
.lang { position: relative; margin-right: 14px; pointer-events: auto; }
.lang__btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px;
  font: 600 .68rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: inherit;
}
.lang__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 160px; margin: 0; padding: 6px; list-style: none;
  background: #fffdf8; color: var(--ink); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
}
.lang__list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font: 500 .95rem var(--f-body); text-transform: none; letter-spacing: 0; }
.lang__list li:hover, .lang__list li:focus { background: rgba(23, 54, 92, .08); outline: none; }
.lang__list li[aria-selected="true"] { color: #8a5526; font-weight: 600; }
@media (max-width: 820px) { .lang { margin-right: 6px; } .lang__btn { padding: 8px 6px; } .lang__list { right: auto; left: 0; } }

/* chinês e hindi: fontes próprias (as nossas não têm esses caracteres); sem caixa-alta e sem cursiva latina */
html.lang-zh body, html.lang-zh input, html.lang-zh button, html.lang-zh select, html.lang-zh textarea { font-family: "Noto Sans SC", var(--f-body); }
html.lang-zh h1, html.lang-zh h2, html.lang-zh h3, html.lang-zh h4, html.lang-zh .script,
html.lang-zh .player__hz, html.lang-zh .b3__sign, html.lang-zh .fb__name, html.lang-zh .fc__name { font-family: "Noto Serif SC", var(--f-display); letter-spacing: .02em; }
html.lang-hi body, html.lang-hi input, html.lang-hi button, html.lang-hi select, html.lang-hi textarea { font-family: "Noto Sans Devanagari", var(--f-body); }
html.lang-hi h1, html.lang-hi h2, html.lang-hi h3, html.lang-hi h4, html.lang-hi .script,
html.lang-hi .player__hz, html.lang-hi .b3__sign, html.lang-hi .fb__name, html.lang-hi .fc__name { font-family: "Noto Serif Devanagari", var(--f-display); letter-spacing: 0; }
html.lang-zh .script, html.lang-hi .script { font-style: normal; font-size: 1em; line-height: inherit; color: inherit; }
html.lang-hi h1, html.lang-hi h2, html.lang-hi h3 { line-height: 1.25; }
/* devanágari: espaçamento entre letras separa as sílabas (च ंद्र) — zera em tudo; maiúsculas não existem nessa escrita */
html.lang-hi body * { letter-spacing: 0 !important; text-transform: none !important; }
html.lang-zh h1, html.lang-zh h2, html.lang-zh h3 { line-height: 1.2; }

/* celulares baixos (ex.: 360×640): os 4 pilares da Hero ainda cabem inteiros */
@media (max-width: 900px) and (max-height: 700px) {
  .arch__stage { padding-top: 50px; }
  .arch__title { font-size: 1.45rem; }
  .pillars { gap: 6px; margin-top: 10px; }
  .pillar + .pillar { padding-top: 6px; }
  .pillar h3 { font-size: 1.02rem; }
  .pillar p { font-size: .74rem; line-height: 1.35; }
  .pillar .more { font-size: .74rem; }
}

/* notebooks baixos (ex.: 1280×720, 1366×768): banner e cards da vitrine cabem inteiros na tela */
@media (min-width: 901px) and (max-height: 800px) {
  .vit .pcard { --pw: clamp(190px, 16.5vw, 260px); }
  .vit__banner { height: 24vh; }
}

/* Hero / 4 pilares no PC: tudo se ajusta também pela ALTURA da tela, com folga embaixo em qualquer monitor
   (em telas baixas, como notebooks 1280×650, o bloco encostava na borda de baixo da seção) */
@media (min-width: 901px) {
  .arch__stage { padding: clamp(72px, 11vh, 110px) var(--gut) clamp(44px, 10vh, 110px); }
  .arch__seal { width: clamp(50px, min(7vw, 10vh), 100px); margin-bottom: clamp(8px, 1.8vh, 18px); }
  .arch__title { font-size: clamp(1.8rem, min(4.2vw, 6.6vh), 3.8rem); }
  .pillars { margin-top: clamp(18px, 4.2vh, 60px); }
  .pillar__icon { width: clamp(30px, 5.2vh, 52px); height: clamp(30px, 5.2vh, 52px); margin-bottom: clamp(8px, 1.6vh, 16px); }
  .pillar h3 { font-size: clamp(1.15rem, min(2.1vw, 3.3vh), 1.85rem); margin-bottom: clamp(4px, 1vh, 10px); }
  .pillar p { font-size: clamp(.84rem, min(1.08vw, 2.15vh), 1.04rem); line-height: 1.45; margin-bottom: clamp(8px, 1.6vh, 16px); }
  .pillar .more { font-size: clamp(.84rem, min(1.08vw, 2.15vh), 1rem); }
}

/* Hero: fundo um pouco mais escuro e letras mais nítidas sobre o relevo (pedido do Arthur, 21/10/2026) */
.intro--film .hero__iris { opacity: .9; filter: brightness(.82); }
.intro--film .arch__title { text-shadow: 0 2px 18px rgba(4, 8, 20, .55); }
.intro--film .pillar h3 { text-shadow: 0 1px 12px rgba(4, 8, 20, .6); }
.intro--film .pillar p { color: rgba(244, 238, 226, .94); text-shadow: 0 1px 10px rgba(4, 8, 20, .75), 0 0 2px rgba(4, 8, 20, .5); }
.intro--film .more { text-shadow: 0 1px 8px rgba(4, 8, 20, .7); }

/* ===================== Mapa Astral (v2, 21/10/2026): seção noturna premium, tudo numa tela ===================== */
.chart {
  background: radial-gradient(120% 90% at 28% 45%, #142a4c 0%, #0b1730 45%, var(--night) 100%);
  color: var(--ivory); padding: clamp(64px, 9vh, 110px) var(--gut) clamp(56px, 8vh, 96px);
}
.chart__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "wheel intro" "wheel form";
  grid-template-rows: auto 1fr;
  gap: clamp(12px, 2.4vh, 26px) clamp(32px, 5vw, 88px); align-items: center;
  width: min(1280px, 100%); margin: 0 auto;
}
.chart__intro { grid-area: intro; align-self: end; }
.wheel { grid-area: wheel; }
.chart__formbox { grid-area: form; align-self: start; width: min(540px, 100%); justify-self: start; }
.chart__eyebrow { margin: 0 0 12px; font: 600 .74rem/1.2 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.chart__title { font-size: clamp(2.1rem, min(3.7vw, 6.2vh), 4rem); line-height: .98; max-width: 19ch; color: var(--ivory); }
.chart__lead { margin: clamp(10px, 1.8vh, 18px) 0 0; max-width: 46ch; font-size: clamp(.98rem, min(1.25vw, 2.2vh), 1.18rem); line-height: 1.5; color: rgba(239, 230, 214, .8); }

/* selo NASA/JPL (próprio, sem o logo da NASA) com "How it works" */
.nasa { margin-top: clamp(12px, 2vh, 20px); max-width: 520px; }
.nasa summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 9px 16px 9px 12px;
  border: 1px solid rgba(232, 194, 138, .55); border-radius: 999px; background: rgba(232, 194, 138, .08); color: var(--ivory); font-size: .9rem; }
.nasa summary::-webkit-details-marker { display: none; }
.nasa summary svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.4; flex: 0 0 auto; }
.nasa summary svg .fill { fill: var(--gold); stroke: none; }
.nasa summary b { color: var(--gold); font-weight: 600; letter-spacing: .02em; }
.nasa summary i { font-style: normal; font-size: .78rem; color: rgba(239, 230, 214, .65); border-left: 1px solid rgba(239, 230, 214, .25); padding-left: 10px; }
.nasa summary:hover { background: rgba(232, 194, 138, .16); }
.nasa p { margin: 10px 0 0; font-size: .86rem; line-height: 1.5; color: rgba(239, 230, 214, .78); }

/* formulário num cartão claro sobre a noite */
.chart__formbox { background: var(--ivory); color: var(--ink); border-radius: 22px; padding: clamp(18px, 2.8vh, 30px) clamp(18px, 2vw, 30px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(232, 194, 138, .25); }
.chart-form { gap: clamp(8px, 1.4vh, 14px) 14px; }
.field input { min-height: clamp(40px, 5.4vh, 48px); }
.field__note { margin: -4px 0 0; padding: 9px 12px; border-left: 2px solid var(--copper); background: rgba(201, 139, 79, .08); font-size: .8rem; line-height: 1.45; color: rgba(26, 32, 51, .78); border-radius: 0 8px 8px 0; transition: background .3s, color .3s; }
.field__note.is-on { background: rgba(201, 139, 79, .2); color: var(--ink); }
.chart__trust { color: rgba(26, 32, 51, .6); }

/* doação compacta, acoplada ao formulário */
.donate--mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: auto; margin: clamp(12px, 2vh, 18px) 0 0; padding: 14px 16px;
  text-align: left; border: 1px solid rgba(26, 32, 51, .12); border-radius: 14px; background: rgba(255, 255, 255, .55); }
.donate--mini > svg { width: 26px; height: 26px; fill: none; stroke: var(--copper); stroke-width: 1.6; }
.donate--mini h3 { font-size: 1.05rem; margin: 0; }
.donate--mini p { margin: 3px 0 0; font-size: .78rem; line-height: 1.4; color: rgba(26, 32, 51, .66); max-width: none; }
.donate--mini .btn { min-height: 40px; padding: 0 18px; font-size: .85rem; white-space: nowrap; }

/* a roda/astrolábio sobre a noite */
.wheel__legend { color: rgba(239, 230, 214, .85); }
.wheel__legend .g { color: var(--gold); }
.wheel__legend .wheel__note { color: rgba(239, 230, 214, .55); }
.wheel__cap { color: rgba(239, 230, 214, .55); }

@media (min-width: 901px) {
  .chart-form .field--name, .chart-form .field--email { grid-column: auto; }   /* nome ao lado do e-mail */
  .field label { font-size: .8rem; }
  .field__note { font-size: .74rem; padding: 7px 10px; }
  .chart__trust { font-size: .76rem; margin-top: 4px; }
  .donate--mini { padding: 10px 14px; gap: 12px; }
  .donate--mini > svg { width: 22px; height: 22px; }
  .donate--mini h3 { font-size: .98rem; }
  .donate--mini p { font-size: .74rem; margin-top: 1px; }
  .donate--mini .btn { min-height: 36px; padding: 0 16px; font-size: .8rem; }
}
/* PC baixo (notebooks): o texto de apoio sai, ficam título + selo + formulário */
@media (min-width: 901px) and (max-height: 780px) {
  .chart__lead { display: none; }
  .chart { padding-top: 56px; padding-bottom: 40px; }
}
@media (max-width: 900px) {
  .chart { padding: 84px var(--gut) 48px; }
  .chart__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "wheel" "form"; grid-template-rows: auto; gap: 10px; }
  .chart__intro { text-align: center; }
  .chart__title { font-size: 2.5rem; max-width: none; margin: 0 auto; }
  .chart__lead { margin: 10px auto 0; font-size: .95rem; }
  .nasa { margin: 14px auto 0; }
  .nasa summary { font-size: .8rem; padding: 8px 12px 8px 10px; gap: 8px; }
  .nasa summary i { display: none; }
  .wheel { width: min(86vw, 420px); justify-self: center; }
  .chart__formbox { justify-self: stretch; width: 100%; text-align: left; padding: 18px 16px; }
  .donate--mini { grid-template-columns: auto 1fr; }
  .donate--mini .btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* Mapa Astral v2.1: título em cima (largura toda); astrolábio e formulário lado a lado, alinhados pelo centro;
   "How it works" abre num balão flutuante (não empurra a página); formulário mais baixo; mais respiro embaixo */
.chart { padding-bottom: clamp(80px, 12vh, 140px); }
.chart__grid { grid-template-areas: "intro intro" "wheel form"; grid-template-rows: auto auto; align-items: center; row-gap: clamp(18px, 3.4vh, 40px); }
.chart__intro { text-align: center; align-self: auto; }
.chart__title { max-width: none; margin: 0 auto; }
.chart__lead { margin-left: auto; margin-right: auto; max-width: 60ch; }
.wheel { align-self: center; justify-self: center; width: min(100%, clamp(300px, 56vh, 560px)); }
.chart__formbox { align-self: center; }
.nasa { position: relative; display: inline-block; max-width: none; z-index: 6; }
.nasa p { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(440px, 88vw); margin: 0; padding: 14px 16px;
  background: #0e1c36; border: 1px solid rgba(232, 194, 138, .45); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); text-align: left; }
.nasa p::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: #0e1c36; border-left: 1px solid rgba(232, 194, 138, .45); border-top: 1px solid rgba(232, 194, 138, .45); }
/* formulário mais baixo */
.chart-form { gap: 8px 12px; }
.field { gap: 4px; }
.field input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.field__check { font-size: .82rem; }
.field__note { margin-top: -2px; }
.chart-form .btn--ink { min-height: 44px; margin-top: 2px; }
@media (min-width: 901px) and (max-height: 780px) {
  .chart__lead { display: block; font-size: .92rem; margin-top: 8px; }   /* a frase da NASA precisa aparecer */
  .chart__title { font-size: clamp(2rem, 5.4vh, 3rem); }
  .chart__eyebrow { margin-bottom: 6px; }
  .nasa { margin-top: 10px; }
  .nasa summary { padding: 6px 14px 6px 10px; font-size: .84rem; }
}
@media (max-width: 900px) {
  .chart { padding-bottom: 72px; }
  .chart__grid { grid-template-areas: "intro" "wheel" "form"; }
  .wheel { width: min(78vw, 360px); }
  .chart__formbox { padding: 14px 14px 12px; }
  .chart-form { gap: 6px 10px; }
  .field label { font-size: .76rem; }
  .field input { min-height: 38px; font-size: 16px; }
  .field__note { font-size: .72rem; padding: 6px 9px; line-height: 1.35; }
  .chart-form .btn--ink { min-height: 42px; }
  .chart__trust { font-size: .72rem; margin-top: 2px; }
  .donate--mini { margin-top: 10px; padding: 10px 12px; }
  .donate--mini h3 { font-size: .95rem; }
  .donate--mini p { font-size: .72rem; }
  .donate--mini .btn { min-height: 38px; }
}

/* v2.2: astrolábio do tamanho do formulário (ou um pouco maior); telas baixas mais compactas */
@media (min-width: 901px) { .wheel { width: min(100%, 62vh, 600px); } }   /* do tamanho do formulário: os dois juntos, sem empurrar o título */
@media (min-width: 901px) and (max-height: 720px) {
  .chart { padding-top: 40px; padding-bottom: 60px; }
  .chart__grid { row-gap: 14px; }
  .chart__title { font-size: 2.1rem; }
  .chart__lead { font-size: .86rem; margin-top: 4px; }
  .nasa { margin-top: 8px; }
  .field label { font-size: .72rem; }
  .field input { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
  .chart-form { gap: 5px 12px; }
  .field__note { font-size: .7rem; padding: 5px 9px; }
  .chart-form .btn--ink { min-height: 38px; }
  .chart__trust { display: none; }
  .donate--mini { margin-top: 8px; padding: 7px 12px; }
  .chart__formbox { padding: 14px 20px; }
}
@media (max-width: 900px) {
  /* doação numa linha só no celular: ícone, texto e botão lado a lado */
  .donate--mini { grid-template-columns: auto 1fr auto; gap: 10px; }
  .donate--mini .btn { grid-column: auto; justify-self: end; min-height: 34px; padding: 0 14px; font-size: .78rem; }
  .donate--mini > svg { width: 20px; height: 20px; }
  .donate--mini p { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .chart__formbox { padding: 10px 12px 10px; }
  .field input { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .chart-form { gap: 4px 10px; }
  .field label { font-size: .72rem; }
  .field__note { font-size: .68rem; padding: 5px 8px; }
  .chart-form .btn--ink { min-height: 38px; }
  .chart__trust { display: none; }
  .donate--mini { margin-top: 6px; padding: 7px 10px; }
}

/* ===== Mapa Astral v2.3: faixas divisórias coladas nas bordas da seção (em cima e embaixo) ===== */
.chart { padding-top: 0 !important; padding-bottom: 0 !important; }
.chart .band { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }
.chart .band--top { margin-top: 0; margin-bottom: clamp(44px, 8vh, 96px); }
.chart > .band:not(.band--top) { margin-top: clamp(56px, 10vh, 120px); margin-bottom: 0; }
@media (min-width: 901px) and (max-height: 720px) {
  .chart .band--top { margin-bottom: 30px; }
  .chart > .band:not(.band--top) { margin-top: 48px; }
}
@media (max-width: 900px) {
  .chart .band--top { margin-bottom: 36px; }
  .chart > .band:not(.band--top) { margin-top: 56px; }
}

/* ===== Formulário do mapa: placa de metal (ferro/prata brilhante, como cerâmica vitrificada), abaulada para dentro,
   com moldura dourada em relevo; letras claras de alto contraste ===== */
.chart__formbox {
  position: relative; color: #f6efe2; border-radius: 24px;
  background:
    radial-gradient(130% 70% at 25% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),          /* reflexo do esmalte */
    radial-gradient(90% 60% at 85% 115%, rgba(232, 194, 138, .12), rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, .04) 1px 3px),          /* metal escovado */
    linear-gradient(165deg, #6a717c 0%, #434952 30%, #353a42 55%, #4b525c 78%, #2c3037 100%);
  box-shadow:
    inset 0 14px 30px rgba(0, 0, 0, .55), inset 0 -10px 22px rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .08),   /* abaulada para dentro */
    0 0 0 2px #f3d69a, 0 0 0 4px #b27a35, 0 0 0 5px #6e4618, 0 0 0 6px rgba(243, 214, 154, .45),                                  /* moldura de ouro em relevo */
    0 34px 80px rgba(0, 0, 0, .55);
}
.chart__formbox::before {   /* fio de luz na borda de cima da moldura */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 244, 214, .28), rgba(255, 244, 214, 0) 18%);
  mix-blend-mode: screen;
}
.chart__formbox .field label { color: #fbf4e6; font-weight: 600; font-size: .86rem; letter-spacing: .01em; }
.chart__formbox .field__hint { color: rgba(251, 244, 230, .72); font-weight: 400; }
.chart__formbox .field input {
  color: #ffffff; font-size: 16px; font-weight: 500; color-scheme: dark;
  background: rgba(8, 12, 20, .62); border: 1px solid rgba(232, 194, 138, .45);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.chart__formbox .field input::placeholder { color: rgba(255, 255, 255, .6); }
.chart__formbox .field input:focus { border-color: #f3d69a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(243, 214, 154, .28); }
.chart__formbox .field input:disabled { opacity: .5; }
.chart__formbox .field__check { color: #fbf4e6; font-size: .88rem; }
.chart__formbox .field__check input { accent-color: #e8c28a; }
.chart__formbox .field__note { color: #fbf4e6; background: rgba(232, 194, 138, .14); border-left-color: #e8c28a; font-size: .82rem; }
.chart__formbox .field__note.is-on { background: rgba(232, 194, 138, .28); color: #fff; }
.chart__formbox .chart__trust { color: rgba(251, 244, 230, .8); font-size: .8rem; }
.chart__formbox .chart-form__msg { color: #f3d69a; font-weight: 500; }
/* botão de ouro sobre o metal */
.chart__formbox .btn--ink {
  background: linear-gradient(180deg, #fbe3a8 0%, #e2b866 45%, #b98638 100%); color: #1d1405; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 16px rgba(0, 0, 0, .45);
}
.chart__formbox .btn--ink:hover { background: linear-gradient(180deg, #fff0c4 0%, #ebc679 45%, #c4913f 100%); }
/* doação: letras normais (sem a fonte estreita dos títulos), claras e grandes */
.chart__formbox .donate--mini { background: rgba(4, 8, 16, .38); border: 1px solid rgba(232, 194, 138, .4); }
.chart__formbox .donate--mini > svg { stroke: #e8c28a; }
.chart__formbox .donate--mini h3 { font-family: var(--f-body); font-stretch: normal; font-variation-settings: normal; text-transform: none; font-weight: 600; font-size: 1rem; line-height: 1.25; color: #ffffff; letter-spacing: 0; }
.chart__formbox .donate--mini p { color: rgba(251, 244, 230, .88); font-size: .82rem; }
@media (min-width: 901px) and (max-height: 720px) {
  .chart__formbox .field label { font-size: .8rem; }
  .chart__formbox .field__note { font-size: .76rem; }
  .chart__formbox .field__check { font-size: .8rem; }
}
@media (max-width: 900px) {
  .chart__formbox .field label { font-size: .82rem; }
  .chart__formbox .field__note { font-size: .78rem; }
  .chart__formbox .donate--mini h3 { font-size: .92rem; }
}
/* campos lado a lado alinhados pela base (o rótulo do nome pode quebrar em 2 linhas) */
.chart__formbox .field { display: flex; flex-direction: column; justify-content: flex-end; }
.chart__formbox .donate--mini .btn--copper { background: linear-gradient(180deg, #fbe3a8 0%, #e2b866 45%, #b98638 100%); color: #1d1405; font-weight: 700; border: 0; }

/* ===== Portais (21/10/2026): leque inteiro na tela em qualquer altura; subtítulo longe do traço do "portals." ===== */
.portals__sub { margin-top: clamp(22px, 3.4vh, 36px); }
/* PC: a carta cresce até 372px de altura, mas encolhe em telas baixas para o leque caber entre o subtítulo e a borda */
@media (min-width: 821px) {
  .fan { --ch: min(372px, calc((100vh - 300px) / 1.55)); --cw: calc(var(--ch) / 1.525); bottom: calc(var(--ch) * .52 + 18px); }
}
/* celular: dois leques de 6; o tamanho segue a largura e a altura da tela */
@media (max-width: 820px) {
  .fan { --ch: min(229px, 56vw, calc((100svh - 340px) / 1.85)); --cw: calc(var(--ch) / 1.527); bottom: calc(var(--ch) * .72 + 7vh + 28px); }
}

/* ===== Frequências v2 (21/10/2026): tudo num bloco só que trava na tela — título compacto + player num card
   de metal escuro com moldura dourada em relevo (mesma família do formulário do Mapa), cara de app de streaming ===== */
.freq__head { position: relative; z-index: 1; }
.freq__sub { color: rgba(26, 32, 51, .86); font-weight: 500; }
.player {
  --line: rgba(251, 244, 230, .16); --mute: rgba(251, 244, 230, .78); --bronze: #f3d69a;
  color: #fbf4e6; border-radius: 26px; padding: clamp(18px, 2.6vh, 30px) clamp(18px, 2.4vw, 34px);
  background:
    radial-gradient(120% 70% at 20% -10%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    radial-gradient(80% 60% at 90% 110%, rgba(232, 194, 138, .12), rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .04) 1px 3px),
    linear-gradient(165deg, #2b313b 0%, #1b2029 40%, #151a22 70%, #232933 100%);
  box-shadow:
    inset 0 14px 30px rgba(0, 0, 0, .55), inset 0 -10px 22px rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 0 0 2px #f3d69a, 0 0 0 4px #b27a35, 0 0 0 5px #6e4618, 0 0 0 6px rgba(243, 214, 154, .45),
    0 40px 90px -20px rgba(10, 16, 30, .55);
}
.player__now { display: flex; flex-direction: column; }
.plate { box-shadow: inset 0 0 0 1px rgba(227, 184, 102, .5), inset 0 -18px 40px rgba(0, 0, 0, .4), 0 0 0 6px rgba(255, 255, 255, .04), 0 18px 40px -10px rgba(0, 0, 0, .7); }
.player__meta p { color: #fbf4e6; }
.player__theme { font-weight: 500; }
.player__signs { color: rgba(251, 244, 230, .8) !important; }
.player__hz { color: #fff; }
.wave__time { color: rgba(251, 244, 230, .8); font-size: .82rem; }
.pc { color: #fbf4e6; }
.pc:hover { color: #f3d69a; }
.pc--play { background: linear-gradient(180deg, #fbe3a8 0%, #e2b866 45%, #b98638 100%); color: #1d1405;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 20px rgba(0, 0, 0, .5); transition: transform .2s; }
.pc--play:hover { background: linear-gradient(180deg, #fff0c4 0%, #ebc679 45%, #c4913f 100%); color: #1d1405; }
.pc__vol { color: rgba(251, 244, 230, .85); }
.pc__vol input { accent-color: #e8c28a; }
.tl__head { color: rgba(251, 244, 230, .7); font-weight: 600; letter-spacing: .02em; }
.tl__row:hover { background: rgba(255, 255, 255, .06); }
.tl__row[aria-pressed="true"] { background: rgba(232, 194, 138, .18); box-shadow: inset 3px 0 0 #e8c28a; }
.tl__hz { color: #fff; }
.tl__theme, .tl__signs, .tl__el, .tl__len, .tl__n { color: rgba(251, 244, 230, .8); }
.tl__theme { white-space: normal; overflow: visible; text-overflow: clip; }
.tl__eq i { background: #e8c28a; }
.player__more { color: rgba(251, 244, 230, .8); }
.fsel__chip { background: rgba(255, 255, 255, .06); border-color: rgba(251, 244, 230, .3); color: #fbf4e6; }
.fsel__chip[aria-pressed="true"] { background: linear-gradient(180deg, #fbe3a8, #d9ab58); border-color: #e8c28a; color: #1d1405; font-weight: 700; }
.freq__note { color: rgba(26, 32, 51, .78); font-size: .88rem; }

/* PC: título numa linha; card com a coluna "tocando agora" + a lista; tudo cabe na altura da tela */
@media (min-width: 821px) {
  .freq__h2 { font-size: min(clamp(2.4rem, 3.8vw, 3.8rem), 7.6vh); white-space: nowrap; }
  .freq__h2 br { display: none; }
  .freq__sub { margin-top: min(12px, 1.4vh); font-size: min(1.08rem, 2.3vh); }
  .player { margin-top: min(34px, 4vh); grid-template-columns: clamp(260px, 26vw, 360px) 1fr; gap: clamp(24px, 3vw, 48px); align-items: center;
    width: min(1180px, calc(100vw - 2 * var(--gut) - 12px)); }
  .plate { width: clamp(150px, calc(36vh - 70px), 300px); align-self: center; }
  .player__meta { margin-top: min(18px, 2vh); }
  .player__hz { font-size: min(clamp(2.6rem, 4vw, 3.6rem), 7vh); }
  .player__theme { margin-top: 4px !important; font-size: 1.05rem; }
  .player__wave { margin-top: min(14px, 1.6vh); }
  .wave, .wave__seek { height: min(48px, 5.4vh); }
  .player__controls { margin-top: min(10px, 1.2vh); }
  .tl { margin-top: 4px; }
  .tl__row { padding: min(10px, 1.15vh) 14px; }
  .tl__hz { font-size: min(1.4rem, 3.4vh); }
  .tl__theme, .tl__signs, .tl__el, .tl__len { font-size: .9rem; }
  .player__more { margin: min(14px, 1.6vh) 14px 0; font-size: .86rem; }
  .freq__note { margin-top: clamp(28px, 5vh, 56px); }
}
@media (min-width: 821px) and (max-height: 720px) {
  .tl__theme { font-size: .82rem; line-height: 1.2; }
  .tl__signs, .tl__el, .tl__len { font-size: .84rem; }
  .player__more { display: none; }
}

/* celular: o mesmo card em pilha */
@media (max-width: 820px) {
  .player { width: 100%; padding: 16px 14px 16px; margin-top: 18px; border-radius: 20px; }
  .player__now { display: grid; }
  .player__controls .pc:not(.pc--play) { color: #fbf4e6; }
}
@media (max-width: 820px) and (max-height: 760px) {
  .player { padding: 12px 12px 12px; margin-top: 10px; }
}
@media (min-width: 821px) {
  .tl__head, .tl__row { grid-template-columns: 34px minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, .85fr) 48px; gap: 14px; }
  .tl__theme { white-space: nowrap; }
}
/* PC baixo (até 820px de altura): linhas compactas como nas listas de streaming */
@media (min-width: 821px) and (max-height: 820px) {
  .tl__head { padding-bottom: 6px; font-size: .76rem; }
  .tl__row { padding: 5px 14px; }
  .tl__hz { font-size: 1.18rem; line-height: 1; }
  .tl__theme { font-size: .8rem; line-height: 1.25; }
  .tl__signs, .tl__el, .tl__len { font-size: .82rem; }
  .player__more { display: none; }
  .player { padding-top: 16px; padding-bottom: 16px; }
}
@media (min-width: 821px) {
  .freq__h2 .script { margin: 0 .22em 0 .06em; }
  .freq__sub { margin-top: min(24px, 2.8vh); }
}
/* o aviso agora fica dentro do bloco travado, logo abaixo do card */
.freq__note { margin: 18px auto 0 !important; }
@media (min-width: 821px) and (max-height: 920px) { .freq__note { margin-top: 12px !important; font-size: .84rem; } }
@media (max-width: 820px) { .freq__note { margin-top: 12px !important; font-size: .82rem; line-height: 1.35; } }

/* ===== Portais no celular (21/10/2026): cartas e aviso mais altos (o Safari tapa o pé da tela com a barra),
   trava nas cartas ~1 tela mais curta, e o verso da carta aberta rola com o dedo ===== */
@media (max-width: 820px) {
  .portals__stage { height: 540vh; }   /* era 640vh; o JS encurta o fim da animação na mesma medida */
  .fan { bottom: calc(var(--ch) * .72 + 7vh + 56px + (100lvh - 100svh)); }
  .fan__hint { bottom: calc(7vh + 18px + (100lvh - 100svh)); font-size: .72rem; color: rgba(239, 230, 214, .82); }
}
.fc__face--sharp .fc__well { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }

/* ===== How to listen (21/10/2026): frase de fecho grande; no celular, passos em coluna única com janelas largas
   (formato bom para os vídeos de depois) e letras legíveis (fonte de texto, escura) ===== */
.listen__close {
  font-family: var(--f-display); font-weight: 400; font-stretch: 62.5%; font-variation-settings: "wdth" 62.5;
  text-transform: uppercase; line-height: .98; text-wrap: balance; text-align: center;
  font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 16ch; margin: clamp(80px, 14vh, 160px) auto 0; color: var(--ink);
}
.listen__close .script { text-transform: none; }
.listen__note { margin-top: clamp(28px, 4vh, 48px); color: rgba(26, 32, 51, .72); }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; row-gap: 44px; margin-top: 36px; }
  .step--1, .step--2, .step--3, .step--4 { grid-column: 1; margin-top: 0; }
  .step__img { aspect-ratio: 4 / 3; margin-bottom: 16px; border-radius: 10px; }
  .step h3 { font-family: var(--f-body); font-stretch: normal; font-variation-settings: normal; text-transform: none;
    font-weight: 600; font-size: 1.3rem; line-height: 1.25; letter-spacing: 0; gap: 10px; color: var(--ink); }
  .step__n { font-size: 1rem; font-weight: 700; }
  .step p { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: rgba(26, 32, 51, .85); max-width: none; }
  .listen__close { font-size: 2.7rem; margin-top: 72px; }
}
/* celular: o fim do How to listen encosta por cima da faixa vazia do topo do About (mesma cor), sem buraco bege */
@media (max-width: 820px) {
  .listen__arch { padding-bottom: 28px; }
  .listen { margin-bottom: -100px; }
}
.listen__close + .listen__note { margin-top: clamp(40px, 6vh, 64px); }

/* ===== "Share your words" (21/10/2026): fundo creme (contrasta com o verde-água dos depoimentos e com a Origem),
   título grande e o formulário no MESMO estilo do formulário do Mapa (placa de metal + moldura dourada em relevo).
   Esse é o padrão para todo formulário do site. ===== */
.voices__write { background: var(--ivory); color: var(--ink); align-items: center;
  padding-top: clamp(64px, 11vh, 120px); padding-bottom: clamp(72px, 12vh, 130px); }
.voices__write-title { font-size: clamp(3rem, 7.4vw, 7.4rem); line-height: .92; color: var(--ink); }
.voices__write-copy p { color: rgba(26, 32, 51, .86); font-size: 1.12rem; max-width: 36ch; }
.voices__write-copy .voices__write-small { color: rgba(26, 32, 51, .7); font-size: .92rem; }
.vform {
  position: relative; color: #f6efe2; border-radius: 24px; padding: clamp(22px, 3vh, 34px) clamp(20px, 2.4vw, 34px);
  background:
    radial-gradient(130% 70% at 25% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 60% at 85% 115%, rgba(232, 194, 138, .12), rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, .04) 1px 3px),
    linear-gradient(165deg, #6a717c 0%, #434952 30%, #353a42 55%, #4b525c 78%, #2c3037 100%);
  box-shadow:
    inset 0 14px 30px rgba(0, 0, 0, .55), inset 0 -10px 22px rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 2px #f3d69a, 0 0 0 4px #b27a35, 0 0 0 5px #6e4618, 0 0 0 6px rgba(243, 214, 154, .45),
    0 34px 80px rgba(26, 32, 51, .35);
}
.vform__field, .vform__photo-pick, .vform__check { color: #fbf4e6; font-weight: 600; }
.vform__field i, .vform__photo-pick i { color: rgba(251, 244, 230, .75); font-weight: 400; }
.vform__photo-pick small, .vform__count { color: rgba(251, 244, 230, .78); font-weight: 400; }
.vform__check span { font-weight: 500; }
.vform__avatar { border-color: rgba(232, 194, 138, .7); color: #f3d69a; background: rgba(8, 12, 20, .45); }
.vform__photo-pick input { color: rgba(251, 244, 230, .85); }
.vform__photo-pick input::file-selector-button { border-color: #e8c28a; color: #fbf4e6; }
.vform input[type="text"], .vform input[type="email"], .vform select, .vform textarea {
  color: #fff; font-weight: 500; color-scheme: dark; background-color: rgba(8, 12, 20, .62);
  border: 1px solid rgba(232, 194, 138, .45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.vform input:focus, .vform select:focus, .vform textarea:focus { border-color: #f3d69a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(243, 214, 154, .28); }
.vform__check input { accent-color: #e8c28a; }
.vform__send.btn--copper { background: linear-gradient(180deg, #fbe3a8 0%, #e2b866 45%, #b98638 100%); color: #1d1405; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 16px rgba(0, 0, 0, .45); }
.vform__msg { color: #f3d69a; font-weight: 500; }
@media (max-width: 820px) {
  .voices__write-title { font-size: 3.2rem; }
  .voices__write-copy p { font-size: 1.02rem; }
  .vform { padding: 18px 16px; border-radius: 20px; }
}

/* ===== "Share your words" no PC (21/10/2026): título numa linha só, bloco de texto centralizado e mais para a direita,
   formulário também um pouco mais para a direita ===== */
@media (min-width: 821px) {
  .voices__write { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px);
    padding-left: clamp(40px, 7vw, 140px); padding-right: clamp(24px, 3vw, 64px); }
  .voices__write-copy { justify-self: center; text-align: center; max-width: none; }
  .voices__write-title { white-space: nowrap; font-size: clamp(2.6rem, 4.4vw, 5.6rem); }
  .voices__write-copy p { margin-left: auto; margin-right: auto; }
  .vform { justify-self: end; width: 100%; max-width: 640px; }
}

/* ===== Nome do canal na Hero (21/10/2026): fonte Tektur em relevo, sobre o vídeo, no alto da tela.
   4 acabamentos (classe hb--*): cyber = neon azul/violeta (padrão), ouro = ouro 3D, diamante, neon = neon dourado ===== */
.hero__brand { position: absolute; left: 0; right: 0; top: clamp(84px, 13vh, 150px); z-index: 2; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; padding: 0 var(--gut); }
.hb__name { position: relative; display: inline-block; font-family: Tektur, sans-serif; font-weight: 900; line-height: .95;
  font-size: clamp(2.3rem, 6.4vw, 7rem); letter-spacing: .01em; white-space: nowrap; }
.hb__name::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; }
.hb__sub { margin-top: clamp(10px, 1.6vh, 20px); font-family: Tektur, sans-serif; font-weight: 700; white-space: nowrap;
  font-size: clamp(.78rem, 1.55vw, 1.65rem); letter-spacing: .46em; padding-left: .46em; }
@media (max-width: 820px) { .hb__name { font-size: min(11.4vw, 3.4rem); } .hb__sub { font-size: min(3.6vw, 1rem); letter-spacing: .34em; padding-left: .34em; } }

/* neon azul/violeta em relevo (padrão) */
.hb--cyber .hb__name { color: #f1ecff;
  text-shadow: 0 0 2px #fff, 0 0 .1em #b9c8ff, 0 0 .22em #7c8cff, 0 0 .42em #5b4cff, 0 0 .8em rgba(90, 70, 255, .6), .04em 0 .2em rgba(0, 229, 255, .55); }
.hb--cyber .hb__name::after { top: .09em; color: #0f0b24; -webkit-text-stroke: .025em #34307a;
  text-shadow: 0 .012em 0 #1a1540, 0 .025em 0 #151235, 0 .037em 0 #110e2b, 0 .05em 0 #0d0b22, 0 .14em .2em rgba(0, 0, 0, .85); }
.hb--cyber .hb__sub { color: #d6fbff; text-shadow: 0 0 .35em #00e5ff, 0 0 .9em #00a6ff, 0 2px 4px rgba(0, 0, 0, .6); }

/* ouro em relevo 3D */
.hb--ouro .hb__name { color: transparent;
  background: linear-gradient(180deg, #fff6d8 0%, #f6d98f 18%, #d4a24a 38%, #8a5a1c 52%, #e9c06c 66%, #fff1c2 80%, #b98638 100%);
  -webkit-background-clip: text; background-clip: text; }
.hb--ouro .hb__name::after { color: #6b4412;
  text-shadow: 0 .012em 0 #7c501a, 0 .025em 0 #6f4615, 0 .037em 0 #633d11, 0 .05em 0 #57350e, 0 .062em 0 #4b2d0b, 0 .075em 0 #3f2508,
               0 .1em .02em rgba(0, 0, 0, .6), 0 .18em .25em rgba(0, 0, 0, .65), 0 0 .5em rgba(232, 180, 90, .3); }
.hb--ouro .hb__sub { color: #f6d98f; text-shadow: 0 2px 0 #4b2d0b, 0 4px 8px rgba(0, 0, 0, .7); }

/* diamante */
.hb--diamante .hb__name { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
  background: linear-gradient(115deg, #fff 0%, #cfe9ff 10%, #7fb3e6 18%, #fff 24%, #a9d4ff 33%, #e9f6ff 41%, #6f9fd4 49%, #fff 55%, #bfe2ff 63%, #8ab9e8 72%, #fff 80%, #d8eeff 90%, #9cc8f2 100%);
  -webkit-background-clip: text; background-clip: text; }
.hb--diamante .hb__name::after { color: #9aa7b8;
  text-shadow: 0 .012em 0 #8b98aa, 0 .025em 0 #7c899b, 0 .037em 0 #6d7a8c, 0 .05em 0 #5e6b7d, 0 .062em 0 #4f5c6e, 0 .16em .22em rgba(0, 0, 0, .7), 0 0 .45em rgba(160, 210, 255, .4); }
.hb--diamante .hb__sub { color: #e8f4ff; text-shadow: 0 0 .5em rgba(170, 215, 255, .6), 0 2px 0 #4f5c6e; }

/* neon dourado em relevo */
.hb--neon .hb__name { color: #fff3cf; text-shadow: 0 0 2px #fff, 0 0 .1em #ffd27a, 0 0 .22em #ffb52e, 0 0 .42em #ff9a00, 0 0 .8em rgba(255, 140, 0, .6); }
.hb--neon .hb__name::after { top: .09em; color: #2a1d0a; -webkit-text-stroke: .025em #7a5420;
  text-shadow: 0 .012em 0 #4a3412, 0 .025em 0 #3d2a0e, 0 .037em 0 #31210a, 0 .05em 0 #261907, 0 .14em .2em rgba(0, 0, 0, .85); }
.hb--neon .hb__sub { color: #ffe8b0; text-shadow: 0 0 .35em #ffc24d, 0 0 .9em #ff9a00, 0 2px 4px rgba(0, 0, 0, .6); }
/* (21/10/2026) o nome do canal na Hero agora é a ARTE da marca (imagem), não a fonte Tektur */
.hero__brand img { display: block; width: min(46vw, 78vh, 820px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }
@media (max-width: 820px) { .hero__brand img { width: min(92vw, 52vh); } }
@media (min-width: 821px) {
  .hero__brand { top: clamp(70px, 10vh, 120px); }
  .hero__brand img { width: min(36vw, 58vh, 680px);
    filter: drop-shadow(0 0 2px rgba(10, 14, 30, .9)) drop-shadow(0 4px 10px rgba(5, 8, 20, .85)) drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
}

/* ===== botão flutuante "voltar ao início" (21/10/2026): vidro transparente, canto inferior direito, em todas as seções ===== */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fbf4e6;
  background: rgba(16, 22, 38, .38); border: 1px solid rgba(243, 214, 154, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s, transform .35s, background-color .25s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgba(16, 22, 38, .6); }
.to-top:focus-visible { outline: 2px solid #e8c28a; outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) { .to-top { width: 46px; height: 46px; } }

/* ===== Janela de conta (22/10/2026): contas de verdade, no padrão de formulário do site
   (placa de metal escuro com moldura dourada em relevo, letras claras de alto contraste) ===== */
.account__panel { color: #fbf4e6;
  background:
    radial-gradient(130% 70% at 25% -10%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .04) 1px 3px),
    linear-gradient(165deg, #5b626d 0%, #3c424b 30%, #2f343c 55%, #434952 78%, #262a31 100%);
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 2px #f3d69a, 0 0 0 4px #b27a35, 0 0 0 5px #6e4618, 0 0 0 6px rgba(243, 214, 154, .45), 0 34px 80px rgba(0, 0, 0, .55); }
.account__title { color: #fff; }
.account__lead { color: rgba(251, 244, 230, .88); }
.account__close { color: rgba(251, 244, 230, .8); }
.account__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.account__tabs { background: rgba(0, 0, 0, .3); }
.account__tabs button { color: rgba(251, 244, 230, .75); }
.account__tabs button[aria-selected="true"] { background: linear-gradient(180deg, #fbe3a8, #d9ab58); color: #1d1405; }
.account__field { color: #fbf4e6; font-weight: 600; }
.account__field input { color: #fff; background: rgba(8, 12, 20, .62); border-color: rgba(232, 194, 138, .45); color-scheme: dark; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); }
.account__field input:focus { border-color: #f3d69a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(243, 214, 154, .28); }
.account__field input[aria-invalid="true"] { border-color: #f0a88a; }
.account .account__send { background: linear-gradient(180deg, #fbe3a8 0%, #e2b866 45%, #b98638 100%); color: #1d1405; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 16px rgba(0, 0, 0, .45); text-decoration: none; display: inline-flex; align-items: center; }
.account .account__send:disabled { opacity: .6; }
.account__forgot { color: #f3d69a; }
.account__msg { color: #f3d69a; font-weight: 500; }
.account__small { color: rgba(251, 244, 230, .7); }
.account__me { margin-top: 22px; display: grid; gap: 14px; justify-items: center; }
.account__who { margin: 0; font-size: .95rem; color: #fbf4e6; }
.account__out { border: 1px solid rgba(243, 214, 154, .55); background: none; color: #fbf4e6; padding: 10px 22px; border-radius: 999px; font: 600 .85rem var(--f-body); cursor: pointer; }
.account__out:hover { background: rgba(255, 255, 255, .08); }
.acct-btn.is-in { text-transform: none; }
.account:not([hidden]) ~ .to-top { opacity: 0; pointer-events: none; }   /* janela de conta aberta: o botão de subir sai da frente */

/* ---------- Loja da home: cards equilibrados (28/10) ----------
   Com 14 produtos, o banner de cima se esticava pela largura da fileira inteira (cada modalidade
   chegava a ~1.400px no PC e ~760px no celular) e o bloco quase não cabia na altura da tela.
   Agora as 3 modalidades formam um bloco de largura fixa AO LADO dos produtos, na mesma altura. */
.vit { flex-direction: row; align-items: stretch; gap: clamp(14px, 1.6vw, 24px); }
.vit__banner { flex: 0 0 auto; width: min(62vw, 900px); height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }   /* 6 modalidades (30/10): 3x2 */
.vit__txt { left: 16px; right: 14px; bottom: 18px; }
.vit__txt b { font-size: clamp(1.1rem, 1.45vw, 1.45rem); }
.vit .pcard { --pw: clamp(180px, 15vw, 236px); flex: 0 0 auto; }
.vit .pcard__name, html.hib .vit .pcard__name { font-size: .98rem; line-height: 1.25; }
.vit .pcard__stars { margin: 6px 0 0; font-size: .72rem; line-height: 1.3; color: rgba(26, 32, 51, .62); }
.vit .pcard__stars b { color: var(--copper); font-weight: 400; letter-spacing: .06em; }
@media (max-width: 820px) {
  /* celular: as 3 modalidades empilhadas numa tela (faixas deitadas), depois os produtos */
  .vit { gap: 14px; }
  .vit__banner { width: 78vw; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }   /* 6 modalidades: 2x3 */
  .vit__txt { bottom: 12px; gap: 2px; }
  .vit__txt b { font-size: 1.1rem; }
  .vit .pcard { --pw: 46vw; }
  .vit .pcard__name, html.hib .vit .pcard__name { font-size: .92rem; }
  .vit .pcard__benefit { font-size: .74rem; }
}

/* ---------- Loja da home: vídeos CLAROS (30/10, noite) ----------
   Os loops das coleções agora são claros (media/lojaclara_*): texto azul-noite + cobre sobre véu marfim.
   PC usa o vídeo deitado (esquerda livre); celular usa o vídeo em pé (topo livre), então o texto sobe.
   Prefixo .vit__banner: precisa vencer o home-hibrido.css (véu preto, sombra no texto, vídeo mais claro). */
.vit__banner .vit__mod { color: #141a33; background: #faf6ee; }
.vit__banner .vit__mod .vit__vid { filter: none; }
.vit__banner .vit__mod::after { background: linear-gradient(180deg, rgba(250, 246, 238, 0) 40%, rgba(250, 246, 238, .92) 100%); }
.vit__banner .vit__txt { text-shadow: none; }
html.hib .vit__banner .vit__txt small, .vit__banner .vit__txt small { color: #8a6420; }
.vit__banner .vit__txt em { border-bottom-color: rgba(20, 26, 51, .45); }
@media (max-width: 820px) {
  .vit__banner .vit__mod .vit__vid { object-position: 50% 100%; }
  .vit__banner .vit__mod::after { background: linear-gradient(180deg, rgba(250, 246, 238, .94) 0%, rgba(250, 246, 238, .62) 34%, rgba(250, 246, 238, 0) 58%); }
  .vit__banner .vit__txt { top: 10px; bottom: auto; left: 12px; right: 10px; }
  /* quadradinhos pequenos: só o nome da coleção (o cartão inteiro já é o link), para não cobrir as peças */
  .vit__banner .vit__txt small, .vit__banner .vit__txt em { display: none; }
  .vit__banner .vit__txt b { font-size: 1rem; line-height: 1.08; }
}

/* Loja da home: 8 modalidades (4/11: entraram Self-care e Sound) — PC 4x2, celular 2x4 */
.vit__banner { width: min(70vw, 1040px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .vit__banner { width: 78vw; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Loja da home no CELULAR: coleção em cima, o produto dela embaixo (07/11/2026, pedido do Arthur) ----------
   Antes: as 8 coleções num bloco e os produtos soltos numa fileira ao lado (6 eram joias) — confuso.
   Agora: colunas que correm de lado; em cada uma, a coleção (em cima) e UM produto dessa coleção (embaixo).
   O gerador (scripts/gerar_vitrine_home.py) marca cada coleção e cada produto com --col (1..8) na mesma ordem. */
@media (max-width: 820px) {
  .vit { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 60vw; column-gap: 14px; row-gap: 10px; align-items: start; }
  .vit__banner, .vit__row { display: contents; }
  .vit__banner .vit__mod { grid-row: 1; grid-column: var(--col); aspect-ratio: 4 / 3; height: auto; width: 100%; }
  .vit .pcard { grid-row: 2; grid-column: var(--col); --pw: 60vw; width: 100%; }
}

/* (07/11/2026) íris ABERTA sai de cena: a máscara redonda custava a cada quadro no celular mesmo invisível (ver main.js) */
.iris-aberta { visibility: hidden !important; }

/* (07/11/2026) Depoimentos no celular: a textura de cerâmica era um filtro de ruído (feTurbulence) recalculado a cada quadro
   enquanto os cards sobem/aparecem — a seção mais travada no Android. Agora é uma imagem pronta (media/ruido_ceramica.png,
   mesmas medidas do ruído) e os cards viram camadas próprias (só a placa de vídeo move/esmaece). */
.voices__track, .voice { will-change: transform, opacity; }

/* (07/11/2026) MODO FLUIDO (Android fraco): o "brilho correndo" das faixas pintava o texto dourado de novo a cada quadro
   (sem parar); fica o dourado parado. Faixas e nuvens que deslizam viram camadas prontas (só a placa de vídeo as move). */
.modo-fluido .band__list strong, .modo-fluido .band::before, .modo-fluido .band::after { animation: none; }
.modo-fluido .band__track, .modo-fluido .clouds__strip, .modo-fluido .seal__ring { will-change: transform; }

/* (07/11/2026) MODO FLUIDO: sem "vidro desfocado" (backdrop-filter). A barra do topo fica fixa por cima de tudo e o desfoque
   era refeito a cada quadro da rolagem, em todas as seções. O fundo dela já é quase sólido, então quase não muda. */
.modo-fluido *, .modo-fluido *::before, .modo-fluido *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modo-fluido .topbar { background-color: rgba(66, 67, 74, .94); }

/* (07/11/2026) MODO FLUIDO (Android fraco): seções presas ~30% mais curtas (o main.js encolhe o fim das animações na
   mesma proporção, então as cenas seguem sincronizadas — só passam mais rápido) */
@media (max-width: 820px) {
  .modo-fluido { --journal-stage-vh: 336; }
  .modo-fluido .portals__stage { height: 378vh; }
  .modo-fluido .journal__stage { height: 336vh; }
  .modo-fluido .sky__stage { height: 280vh; }
  .modo-fluido .voices__stage { height: 252vh; }
  .modo-fluido .origin__stage { height: 252vh; }
  .modo-fluido .letter__stage { height: 224vh; }
  /* palcos únicos (Céu+Depoimentos e Origem+Newsletter) têm medida própria no home-hibrido.css: 740vh e 660vh × 0,7 */
  html.modo-fluido .sky--unico .sky__stage { height: 518vh; }
  html.modo-fluido .origin--unico .origin__stage { height: 462vh; }
}

/* (07/11/2026, pedido do Arthur) Flores no CELULAR: aparecia a borda do recorte da imagem (onde o galho foi cortado).
   As de cima sobem e as de baixo descem um pouco, além de irem mais para o canto — o recorte fica fora da tela. */
@media (max-width: 820px) {
  .plant--top { top: -6vh; left: -4vw; }
  .plant--sky { top: -5vh; right: -4vw; }
  .plant--bottom { bottom: -7vh; right: -7vw; }
  .plant--statement { bottom: -5vh; left: -4vw; }
  .plant--about { bottom: -5vh; right: -4vw; }
}