/* Base comum das seções — Dr. Jorge Porto Marassi. Prefixo wf-. Não editar nas seções. */
:root {
  --noite: #17202b;
  --noite-2: #1f2c3d;
  --noite-3: #2a3a4f;
  --noite-suave: #b9c0c8;
  --lampada: #e2c48f;
  --t-sec: clamp(2.5rem, 5.2vw, 5rem);
  --t-sub: clamp(1.5rem, 2.4vw, 2.125rem);
  --sec-pad: clamp(88px, 12vw, 168px);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-padding-top: 16px; }

/* ---------- casca de seção ---------- */
.wf-sec {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--sec-pad) var(--margem);
  background: var(--papel);
  color: var(--texto);
}
.wf-sec.wf-noite { background: var(--noite); color: var(--papel); }
.wf-dentro { max-width: 1320px; margin: 0 auto; position: relative; }

/* malha da seção (mesmo desenho do hero; cores por variante) */
.wf-malha { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wf-malha i {
  position: absolute; width: var(--d); aspect-ratio: 1; left: var(--x); top: var(--y); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(in oklab circle closest-side, var(--c), color-mix(in oklab, var(--c) 50%, transparent) 46%, transparent);
  animation: wf-deriva var(--t) ease-in-out infinite alternate;
}
.wf-malha i:nth-child(1) { --c: var(--papel-claro); --d: 80vmax; --x: 85%; --y: 10%; --t: 33s; --mx: -5vw; --my: 5vh; }
.wf-malha i:nth-child(2) { --c: var(--madeira-clara); --d: 70vmax; --x: 8%; --y: 90%; --t: 27s; --mx: 6vw; --my: -4vh; }
.wf-malha i:nth-child(3) { --c: var(--pessego); --d: 55vmax; --x: 50%; --y: 55%; --t: 22s; --mx: -4vw; --my: 4vh; }
.wf-noite .wf-malha i:nth-child(1) { --c: var(--noite-3); }
.wf-noite .wf-malha i:nth-child(2) { --c: var(--noite-2); }
.wf-noite .wf-malha i:nth-child(3) { --c: color-mix(in oklab, var(--lampada) 26%, transparent); --x: 78%; --y: 18%; --d: 60vmax; }
@keyframes wf-deriva { to { transform: translate(var(--mx), var(--my)) scale(1.06); } }

/* ---------- cabeçalho de seção ---------- */
.wf-rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--texto-suave);
}
.wf-rotulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-molhada); box-shadow: 0 0 0 3px rgba(63, 103, 149, .16); }
.wf-noite .wf-rotulo { color: var(--noite-suave); }
.wf-noite .wf-rotulo::before { background: var(--lampada); box-shadow: 0 0 0 3px rgba(226, 196, 143, .18); }
.wf-titulo {
  margin: .35em 0 0; font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sec);
  line-height: 1.02; letter-spacing: -.03em; color: var(--tinta); text-wrap: balance;
}
.wf-titulo b { font-weight: 700; }
.wf-noite .wf-titulo { color: var(--papel); }
.wf-lead { margin-top: clamp(16px, 2.4vw, 26px); font-size: var(--t-apoio); line-height: 1.5; color: var(--texto); max-width: 36em; }
.wf-noite .wf-lead { color: var(--noite-suave); }

/* ---------- o motivo: a resposta escrita à tinta ---------- */
.wf-resposta {
  position: relative; margin: 0; padding: 18px 22px 16px; border-radius: var(--raio);
  background: linear-gradient(180deg in oklab, #fdfaf4, #f8f2e8);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .7);
  color: var(--tinta);
}
.wf-resposta-rotulo { display: block; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--texto-suave); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(37, 35, 31, .1); }
.wf-resposta-texto {
  font-family: var(--f-titulo); font-weight: 380; font-size: 1.1875rem; line-height: 1.55; letter-spacing: -.003em;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.55em - 1px), rgba(63, 103, 149, .11) calc(1.55em - 1px) 1.55em);
  background-position: 0 .12em;
}
.wf-resposta-texto b { font-weight: 700; }
.wf-resposta-pe { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin-top: 10px; font-size: .9375rem; }
.wf-resposta-pe .wf-assina { font-family: var(--f-titulo); font-weight: 700; color: var(--tinta); }
.wf-resposta-pe .wf-assina::before { content: "— "; font-weight: 300; }
.wf-resposta-pe time { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
/* letras (WF.escrever) */
.js .wf-escreve .wf-l { opacity: 0; }
.js .wf-escreve .wf-l.on { animation: wf-tinta .9s var(--curva) both; }
@keyframes wf-tinta {
  0% { opacity: 0; color: var(--tinta-molhada); text-shadow: 0 0 6px rgba(63, 103, 149, .55); }
  35% { opacity: 1; color: var(--tinta-molhada); }
  100% { opacity: 1; color: var(--tinta); text-shadow: none; }
}

/* ---------- a conta ---------- */
.wf-numero { font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; color: var(--tinta); }
.wf-noite .wf-numero { color: var(--papel); }

/* ---------- citação de paciente ---------- */
.wf-cita { margin: 0; }
.wf-cita p { font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sub); line-height: 1.25; letter-spacing: -.015em; }
.wf-cita footer { margin-top: 10px; font-size: .9375rem; color: var(--texto-suave); }
.wf-noite .wf-cita footer { color: var(--noite-suave); }

/* botões sobre noite */
.wf-noite .botao { background: var(--papel); color: var(--tinta); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); }
.wf-noite .botao:hover { background: #fff; }
.wf-noite .botao-sec { color: var(--papel); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(243, 237, 228, .4); }
.wf-noite .botao-sec:hover { box-shadow: inset 0 0 0 1.5px var(--papel); background: rgba(255, 255, 255, .06); }
.wf-noite :focus-visible { outline-color: var(--lampada); }

/* ---------- entrada na rolagem ---------- */
.js [data-rev] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-rev].visto { opacity: 1; transform: none; }

/* ---------- botão flutuante do celular ---------- */
.wf-flutua { display: none; }
@media (max-width: 760px) {
  .wf-flutua {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; gap: 8px; transform: translateY(140%); transition: transform .45s var(--curva);
  }
  .wf-flutua.on { transform: none; }
  .wf-flutua a { flex: 1; min-height: 52px; justify-content: center; }
  .wf-flutua .botao-sec { background: var(--papel-claro); flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rev] { opacity: 1; transform: none; transition: none; }
  .wf-malha i { animation: none; }
}