/* Base do site — carregada DEPOIS de hero.css (que já define :root, body, granulado e o reset de movimento).
   Aqui só o que as seções compartilham. Prefixo: wf- */
:root {
  --t-sec: clamp(2.1rem, 1.2rem + 2.9vw, 4rem);
  --t-sub: clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  --t-corpo: clamp(1rem, .95rem + .2vw, 1.1rem);
  --t-mini: .875rem;
  --pad-sec: clamp(5rem, 10vw, 9rem);
  --raio: 28px;
  --noite: #241019;
  --noite-2: #3a1424;
  --papel-noite: #f7f1ee;
  --apoio-noite: #d9c3cb;
  --sombra-foto: 0 40px 80px -40px color-mix(in oklab, var(--outono) 45%, transparent), 0 10px 24px -14px color-mix(in oklab, var(--outono) 30%, transparent);
}
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }

/* ---------- seção ---------- */
.wf-sec {
  position: relative;
  padding: var(--pad-sec) var(--margem);
  overflow: clip;
  isolation: isolate;
}
.wf-sec[data-luz="nevoa"] { background: color-mix(in oklab, var(--inverno) 55%, var(--papel)); }
.wf-sec[data-luz="noite"] { background: var(--noite); color: var(--papel-noite); --tinta: var(--papel-noite); --tinta-suave: var(--apoio-noite); }
.wf-largo { max-width: 78rem; margin-inline: auto; }

/* malha da seção: manchas das estações, dissolvidas em cima e embaixo (emendas sem degrau) */
.wf-malha {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--m1, var(--primavera)) 55%, transparent), transparent) var(--m1x, 85%) var(--m1y, 20%) / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--m2, var(--pele)) 50%, transparent), transparent) var(--m2x, 5%) var(--m2y, 85%) / 60vmax 60vmax no-repeat,
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--m3, var(--inverno)) 70%, transparent), transparent) var(--m3x, 40%) var(--m3y, 50%) / 80vmax 80vmax no-repeat;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.wf-sec[data-luz="noite"] .wf-malha {
  background:
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--outono) 70%, transparent), transparent) var(--m1x, 80%) var(--m1y, 30%) / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--verao) 22%, transparent), transparent) var(--m2x, 10%) var(--m2y, 80%) / 55vmax 55vmax no-repeat,
    radial-gradient(closest-side in oklab, var(--noite-2), transparent) 50% 50% / 90vmax 90vmax no-repeat;
}

/* ---------- rótulo: pílula de vidro com o ponto da estação ---------- */
.wf-rotulo {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .45em 1em .5em .8em;
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta);
  border-radius: 99px;
  background: color-mix(in oklab, var(--papel) 74%, transparent);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 6px 22px -10px color-mix(in oklab, var(--outono) 40%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  margin: 0 0 1.6rem;
}
.wf-rotulo i {
  width: .6em; height: .6em; border-radius: 50%; flex: none;
  background: var(--c, var(--primavera));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--primavera)) 30%, transparent);
}
.wf-sec[data-luz="noite"] .wf-rotulo {
  color: var(--papel-noite);
  background: color-mix(in oklab, var(--noite-2) 70%, transparent);
  border-color: color-mix(in oklab, white 14%, transparent);
}

/* ---------- títulos ---------- */
.wf-titulo {
  margin: 0; font-family: var(--f-titulo); font-weight: 400;
  font-size: var(--t-sec); line-height: 1.02; letter-spacing: -.012em;
  text-wrap: balance;
}
.wf-titulo em { font-style: italic; color: var(--outono); padding-right: .05em; }
.wf-sec[data-luz="noite"] .wf-titulo em { color: var(--primavera); }
.wf-sub { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-sub); line-height: 1.15; margin: 0; }
.wf-texto { font-size: var(--t-corpo); font-weight: 350; line-height: 1.65; color: var(--tinta-suave); max-width: 36rem; }
.wf-texto strong { font-weight: 600; color: var(--tinta); }
.wf-fala { font-family: var(--f-titulo); font-style: italic; }
.wf-fonte { display: block; margin-top: .6rem; font-family: var(--f-texto); font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- botão principal (o mesmo do hero) ---------- */
.wf-cta {
  position: relative; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: 1.1rem; align-items: center;
  padding: .85rem 1.15rem .9rem 1.6rem; border-radius: 99px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 15% 0% in oklab, #e0397a 0%, var(--magenta) 55%, var(--magenta-escuro) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 36px -16px color-mix(in oklab, var(--magenta) 70%, transparent), 0 4px 10px -4px color-mix(in oklab, var(--outono) 40%, transparent);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.wf-cta:hover { transform: translateY(-2px); }
.wf-cta__frase { font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; line-height: 1.05; }
.wf-cta__info { grid-row: 2; font-size: .78rem; letter-spacing: .04em; opacity: .9; margin-top: .15rem; }
.wf-cta svg { grid-row: 1 / 3; grid-column: 2; width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; background: rgba(255,255,255,.16); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.wf-cta:hover svg { transform: translateX(3px); }
.wf-link {
  color: var(--tinta); text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  padding: .7rem 0 .15rem; display: inline-block; min-height: 48px; line-height: 2;
}
.wf-link:hover { border-color: currentColor; }

/* ---------- foto ---------- */
.wf-foto { margin: 0; position: relative; }
.wf-foto img { display: block; width: 100%; height: auto; border-radius: var(--raio); box-shadow: var(--sombra-foto); }
.wf-foto figcaption { margin-top: .8rem; font-size: .8rem; color: var(--tinta-suave); }

/* ---------- o anel (motivo) em CSS ---------- */
.wf-anel {
  --tam: 22rem; --esp: 9%; --volta: 40s;
  position: absolute; width: var(--tam); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--de, 200deg) in oklch, var(--inverno), var(--primavera), var(--verao), color-mix(in oklab, var(--outono) 75%, var(--verao)), var(--inverno));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--esp) - 4%), #000 calc(100% - var(--esp)), #000 calc(100% - 3%), transparent 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - var(--esp) - 4%), #000 calc(100% - var(--esp)), #000 calc(100% - 3%), transparent 100%);
  opacity: .92;
  animation: wf-gira var(--volta) linear infinite;
}
.wf-anel--halo::after {
  content: ''; position: absolute; inset: -6%; border-radius: 50%;
  background: inherit; filter: blur(14px); opacity: .5;
}
@keyframes wf-gira { to { transform: rotate(360deg); } }

/* ponto da estação, solto */
.wf-ponto { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--c, var(--primavera)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--primavera)) 30%, transparent); }

/* ---------- entrada por rolagem (só com JS) ---------- */
.js [data-rev] {
  opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease);
  transition-delay: calc(var(--atraso, 0) * 1ms);
}
.js [data-rev].wf-visto { opacity: 1; transform: none; filter: none; }

/* ---------- botão flutuante do WhatsApp (celular, depois do hero) ---------- */
.wf-flutua {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(120% 140% at 15% 0% in oklab, #e0397a 0%, var(--magenta) 55%, var(--magenta-escuro) 100%);
  box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--magenta) 80%, transparent);
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wf-flutua svg { width: 26px; height: 26px; fill: #fff; }
.wf-flutua.on { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { .wf-flutua { display: none; } }

@media (max-width: 899px) {
  .wf-rotulo { font-size: .875rem; letter-spacing: .14em; }
  .wf-cta__frase { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rev] { opacity: 1; transform: none; filter: none; transition: none; }
  .wf-anel { animation: none; }
}