/* ==========================================================================
   MED · base.css — reset, tipografia, atmosfera, layout, revelações
   Depende de tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--onix);
  color: var(--tx-claro);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip; /* clip não cria rolagem própria: o sticky da oferta continua valendo */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(192,150,72,.35); color: var(--tx-claro); }

:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

/* ---------- Tipografia ---------- */
.t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: var(--tr-title);
  margin: 0;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 400; }
.t-h1   { font-size: var(--t-h1);   line-height: var(--lh-title); }
.t-h2   { font-size: var(--t-h2);   line-height: var(--lh-title); }
.t-h3   { font-size: var(--t-h3);   line-height: 1.2; font-weight: 600; }

/* Ênfase: itálico dourado — a "voz" da marca dentro dos títulos */
.t-enfase {
  font-style: italic;
  font-weight: 400;
  background: var(--grad-ouro-texto);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding: .1em .06em .15em 0; /* evita corte do itálico: o degradê só pinta dentro da caixa, e a caixa inline não alcança rabos de g/p/q; padding vertical em inline não mexe na linha */
}
.secao--clara .t-enfase { background: none; color: var(--ouro-profundo); }

.t-lead  { font-size: var(--t-lead); line-height: 1.6; color: var(--tx-claro-2); max-width: 46ch; margin: 0; text-wrap: pretty; }
.t-body  { font-size: var(--t-body); color: var(--tx-claro-2); margin: 0; text-wrap: pretty; }
.t-small { font-size: var(--t-small); color: var(--tx-claro-2); }
.t-caps  {
  font-family: var(--f-caps);
  font-size: var(--t-caps);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.t-numero { font-family: var(--f-display); font-size: var(--t-numero); line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.t-ouro { color: var(--ouro); }
.secao--clara .t-lead, .secao--clara .t-body, .secao--clara .t-small { color: var(--tx-escuro-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--texto { max-width: calc(var(--max-texto) + var(--gutter) * 2); }

.secao { position: relative; padding-block: var(--secao); isolation: isolate; overflow-x: clip; } /* revelações left/right começam 32px fora e alargavam a página no celular */
.secao--escura  { background: var(--onix); color: var(--tx-claro); }
.secao--grafite { background: var(--onix-2); color: var(--tx-claro); }
.secao--clara   { background: var(--linho); color: var(--tx-escuro); }

.pilha > * + * { margin-top: var(--s-5); }
.pilha-g > * + * { margin-top: var(--s-6); }
.centro { text-align: center; }
.centro .t-lead { margin-inline: auto; }

/* ---------- Atmosfera ---------- */

/* Grão de filme — dá textura de papel/tecido e tira o "digital chapado" */
.grao::after {
  content: ""; position: fixed; inset: -50%; z-index: var(--z-grao); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
  animation: grao 1.2s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* Aurora — luz de palco em vinho e ouro, respirando devagar */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(80px); opacity: .55; will-change: transform;
}
.aurora::before {
  background: radial-gradient(circle, rgba(107,31,44,.9), transparent 62%);
  top: -30vmax; left: -20vmax;
  animation: aurora-a var(--d-ambiente) var(--ease-pendulo) infinite alternate;
}
.aurora::after {
  background: radial-gradient(circle, rgba(192,150,72,.35), transparent 60%);
  bottom: -35vmax; right: -25vmax;
  animation: aurora-b calc(var(--d-ambiente) * 1.3) var(--ease-pendulo) infinite alternate;
}
@keyframes aurora-a { to { transform: translate(18vmax, 10vmax) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-16vmax, -12vmax) scale(.9); } }

/* Feixe de luz (refletor) — usar atrás de foto/título principal */
.refletor { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 50% 0%, rgba(230,207,158,.16), transparent 70%); }

/* Filete dourado com rótulo — vem direto do logo ("—— EM DIVÓRCIO ——") */
.filete { display: flex; align-items: center; gap: var(--s-4); color: var(--ouro); }
.filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .7; }
.filete--esq::before { flex: 0 0 40px; }
.filete--esq::after  { flex: 0 0 40px; }

/* Linha que se desenha */
.linha-ouro { height: 1px; background: var(--grad-ouro); transform-origin: left; transform: scaleX(0); transition: transform var(--d-longa) var(--ease-seda); }
.linha-ouro.is-in { transform: scaleX(1); }

/* Marca d'água do monograma */
.marca-dagua { position: absolute; z-index: -1; pointer-events: none; opacity: .05; width: min(60vw, 720px); }

/* ---------- Revelações (ver motion.js) ---------- */
[data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(28px);
  transition: opacity var(--d-media) var(--ease-seda), transform var(--d-media) var(--ease-seda), filter var(--d-media) var(--ease-seda);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in   { opacity: 1; filter: blur(0); transform: none; }

/* Título linha a linha (motion.js envolve cada palavra) */
/* padding generoso: o overflow:hidden da máscara cortava o rabo do "g" itálico e o circunflexo; as margens negativas devolvem o espaço */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .12em .3em; margin: -.16em -.12em -.3em; }
.split .w > span { display: inline-block; transform: translateY(130%); transition: transform 1.1s var(--ease-seda); transition-delay: calc(var(--wi) * 45ms); }
.split.is-in .w > span { transform: none; }
/* Ênfase dentro de título dividido: o degradê vai em cada palavra (background-clip não atravessa inline-blocks animados) */
.split .t-enfase { background: none; color: var(--ouro-claro); padding-right: 0; }
.split .t-enfase .w > span { background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em .08em .3em 0; margin: -.1em -.08em -.3em 0; } /* caixa maior = o degradê também pinta o rabo do g/p/q */
.secao--clara .split .t-enfase .w > span { background: none; color: var(--ouro-profundo); }

/* Movimento reduzido: tudo aparece, nada se move */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .split .w > span { opacity: 1 !important; filter: none !important; transform: none !important; }
  .linha-ouro { transform: none; }
}