/* Base comum do site — carrega depois de hero.css. Não editar nas seções. */
:root {
  --secao-y: clamp(88px, 12vw, 180px);
  --noite-texto: #f4f3ff;
  --noite-suave: #c9c8ee;
  --sombra: 0 20px 50px -24px rgba(14, 12, 53, .45);
  --malha-funda:
    radial-gradient(60% 70% at 72% 28% in oklab, rgba(17, 71, 179, .95), transparent),
    radial-gradient(55% 60% at 26% 74% in oklab, rgba(47, 90, 107, .9), transparent),
    radial-gradient(40% 45% at 86% 82% in oklab, rgba(0, 68, 203, .8), transparent),
    radial-gradient(50% 50% at 14% 22% in oklab, rgba(14, 12, 53, .95), transparent),
    radial-gradient(30% 35% at 50% 52% in oklab, rgba(93, 90, 185, .55), transparent),
    #1d1b55;
  --malha-clara:
    radial-gradient(50% 60% at 28% 30% in oklab, #bab7ee, transparent),
    radial-gradient(52% 60% at 76% 60% in oklab, rgba(123, 143, 218, .9), transparent),
    radial-gradient(42% 50% at 20% 82% in oklab, rgba(142, 176, 194, .8), transparent),
    radial-gradient(42% 45% at 82% 18% in oklab, #aaa3e8, transparent),
    #9894dc;
}

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

/* granulado único, fixo, por cima da página */
.hero .grao { display: none; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* seção */
.wf-secao { position: relative; padding: var(--secao-y) var(--pad-x); isolation: isolate; overflow-x: clip; }
.wf-papel-2 { background: var(--papel-2); }
.wf-noite {
  background: radial-gradient(90% 70% at 80% 10% in oklab, #1d1b55, #0e0c35 55%, #07072a);
  color: var(--noite-texto);
}
.wf-noite .wf-rotulo, .wf-noite .wf-apoio { color: var(--noite-suave); }

.wf-rotulo {
  margin: 0 0 1.2rem;
  font-family: var(--f-texto);
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-suave);
}
.wf-h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 380;
  font-variation-settings: "opsz" 100;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--indigo-noite);
  text-wrap: balance;
}
.wf-noite .wf-h2 { color: var(--noite-texto); }
.wf-h2 em, .wf-h2 .wf-forte { font-style: normal; font-weight: 520; color: var(--indigo); }
.wf-noite .wf-h2 em, .wf-noite .wf-h2 .wf-forte { color: #fff; }
.wf-apoio { font-size: clamp(1rem, 1.12vw, 1.08rem); line-height: 1.6; color: var(--texto-suave); max-width: 36rem; }

/* grifo de pincel sob a palavra-chave */
.wf-grifo { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.wf-grifo::after {
  content: ""; position: absolute; z-index: -1;
  left: -4%; right: -6%; bottom: .02em; height: .32em;
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
  opacity: .9;
  transform-origin: left center;
}
.wf-noite .wf-grifo::after { background: var(--malha-funda); opacity: 1; filter: brightness(1.5) saturate(1.1); }
.js .wf-grifo::after { transform: scaleX(0); }
.js .wf-visto .wf-grifo::after, .js .wf-grifo.wf-visto::after {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(.6, 0, .2, 1) .35s;
}

/* foto revelada por pincelada larga: observar a figure, animar a img */
.wf-pinta { margin: 0; position: relative; }
.wf-pinta img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
}
.js .wf-pinta img { clip-path: inset(0 100% 0 0); }
.js .wf-pinta.wf-visto img { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.6, 0, .2, 1) .1s; }

/* revelação genérica das seções */
.js [data-wf] { opacity: 0; transform: translateY(18px); }
.js [data-wf].wf-visto { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js [data-wf="2"].wf-visto { transition-delay: .12s; }
.js [data-wf="3"].wf-visto { transition-delay: .24s; }
.js [data-wf="4"].wf-visto { transition-delay: .36s; }

/* botão fixo de WhatsApp (aparece depois do hero) */
.wf-fixo {
  position: fixed; z-index: 80; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .9em 1.3em; border-radius: var(--raio);
  color: #fff; text-decoration: none; font-size: .95rem; letter-spacing: .02em;
  background:
    radial-gradient(120% 160% at 15% 0% in oklab, var(--royal), transparent 60%),
    radial-gradient(120% 160% at 100% 100% in oklab, var(--petroleo), transparent 70%),
    var(--indigo);
  box-shadow: 0 14px 34px -12px rgba(7, 7, 42, .6);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.wf-fixo svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.wf-fixo.ligado { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 899px) {
  .wf-fixo { left: 14px; right: 14px; bottom: 12px; justify-content: center; padding: 1em; }
}

:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }
.wf-noite :focus-visible { outline-color: #fff; }