/* Base das seções — Dr. Fabricio Leão
   Herda as variáveis do hero (css/hero.css). Tudo aqui tem prefixo wf-.
   Seções usam o próprio prefixo (vi-, so-, cu-, vz-, es-, pc-, du-, ct-). */

:root {
  /* noite: a madeira e o café do consultório, para o ritmo claro/escuro */
  --noite: #261b14;
  --noite-2: #33251c;
  --noite-3: #45332a;
  --tinta-noite: #f4ece2;
  --tinta-noite-suave: #d3c4b3;   /* ≥ 7:1 sobre --noite */
  --areia-clara: #ebdfd0;          /* superfície clara alternativa */
  --linha: color-mix(in oklab, var(--cafe) 18%, transparent);
  --linha-noite: color-mix(in oklab, var(--tinta-noite) 20%, transparent);

  /* tipo das seções */
  --t-sec: clamp(2.25rem, 1.15rem + 3vw, 4.25rem);     /* h2 */
  --t-sub: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);     /* h3 grande */
  --t-corpo: clamp(1.125rem, 1.05rem + .25vw, 1.25rem); /* ≥ 18 px */
  --t-mini: .9375rem;                                    /* rótulos (15 px) */

  /* espaço */
  --sec-y: clamp(5rem, 3rem + 7vw, 10rem);
  --coluna: 72rem;
}

/* ---------- seção ---------- */
.wf-sec {
  position: relative; isolation: isolate; overflow: clip;
  padding: var(--sec-y) var(--margem);
  font-size: var(--t-corpo);
}
.wf-sec > .wf-dentro { max-width: var(--coluna); margin: 0 auto; position: relative; }
.wf-claro { background: var(--travertino); color: var(--cafe); }
.wf-areia { background: var(--areia-clara); color: var(--cafe); }
.wf-noite { background: var(--noite); color: var(--tinta-noite); }
.wf-noite::after, .wf-pe::after { /* granulado das seções escuras (contra o banding da malha) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/grao.png") repeat; background-size: 220px; opacity: .07; mix-blend-mode: overlay; }
.wf-noite > .wf-dentro, .wf-pe > .wf-pe-dentro { z-index: 1; position: relative; }

/* malha das seções: mesma receita do hero, manchas fixas e lentas */
.wf-malha { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wf-malha i {
  position: absolute; border-radius: 50%; width: var(--w, 70vmax); aspect-ratio: 1;
  left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%;
  background: radial-gradient(closest-side in oklch, var(--c) 0%, color-mix(in oklch, var(--c) 40%, transparent) 55%, transparent 100%);
  opacity: var(--o, 1);
  animation: respira var(--respira) var(--suave) infinite alternate; animation-delay: var(--d, 0s);
}
.wf-noite .wf-malha i { --c: #4a3427; }
.wf-fora .wf-malha i { animation-play-state: paused; }

/* ---------- o fio: abre cada seção (o motivo do hero, voltando) ---------- */
.wf-parada {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1.6rem; font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase;
  color: var(--madeira-escura);
}
.wf-noite .wf-parada { color: var(--ambar-luz); }
.wf-parada::before {           /* o ponto */
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ambar); box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 18px 3px rgb(240 194 127 / .55);
}
.wf-parada::after {            /* o fio que segue */
  content: ""; flex: 0 1 7rem; height: 1px; background: linear-gradient(to right, var(--madeira), transparent);
  transform-origin: left center;
}
.wf-noite .wf-parada::after { background: linear-gradient(to right, var(--ambar-luz), transparent); }
.js .wf-parada[data-rev]::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.45,.05,.2,1) .25s; }
.js .wf-parada[data-rev]::before { scale: .4; opacity: 0; transition: scale .6s var(--suave), opacity .4s; }
.js .wf-parada.wf-on::after { transform: scaleX(1); }
.js .wf-parada.wf-on::before { scale: 1; opacity: 1; }

/* ---------- títulos e texto ---------- */
.wf-h2 {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-sec);
  line-height: 1.04; letter-spacing: -.02em; font-variation-settings: "opsz" 24; text-wrap: balance;
}
.wf-h2 em { font-style: normal; color: var(--madeira-escura); }
.wf-noite .wf-h2 em { color: var(--ambar-luz); }
.wf-h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-sub); line-height: 1.12; letter-spacing: -.01em; }
.wf-lead { margin: 1.4rem 0 0; max-width: 36em; font-size: var(--t-corpo); line-height: 1.6; color: var(--cafe-suave); text-wrap: pretty; }
.wf-noite .wf-lead, .wf-noite .wf-suave { color: var(--tinta-noite-suave); }
.wf-suave { color: var(--cafe-suave); }
.wf-rotulo { font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-suave); }
.wf-noite .wf-rotulo { color: var(--tinta-noite-suave); }

/* ---------- citação de paciente (o cartão da prova do hero) ---------- */
.wf-cita {
  margin: 0; padding: 1.4rem 1.5rem 1.2rem; border-radius: 20px;
  background: color-mix(in oklab, var(--travertino-claro) 86%, transparent);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: 0 24px 50px -28px rgb(58 42 32 / .45);
}
.wf-cita p { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.42; color: var(--cafe); text-wrap: pretty; }
.wf-cita footer, .wf-cita cite { font-style: normal; font-size: var(--t-mini); color: var(--cafe-suave); }
.wf-noite .wf-cita { background: color-mix(in oklab, var(--noite-3) 70%, transparent); border-color: var(--linha-noite); box-shadow: 0 24px 50px -28px rgb(0 0 0 / .6); }
.wf-noite .wf-cita p { color: var(--tinta-noite); }
.wf-noite .wf-cita footer, .wf-noite .wf-cita cite { color: var(--tinta-noite-suave); }

/* ---------- botões (o .botao e o .ligar do hero valem em seção clara) ---------- */
.wf-noite .botao { background: var(--travertino-claro); color: var(--cafe); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .7); }
.wf-noite .botao:hover { background: #fff; }
.wf-noite .ligar { border-bottom-color: var(--linha-noite); }
.wf-noite .ligar span { color: var(--tinta-noite-suave); }
.wf-link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; min-height: 48px; display: inline-flex; align-items: center; }

/* ---------- foto real em painel (mesmo véu morno do hero) ---------- */
.wf-foto { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; background: #cdb8a3; }
.wf-foto img { width: 100%; height: 100%; object-fit: cover; }
.wf-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(in oklab 180deg, rgb(247 226 196 / .10), rgb(106 78 60 / .18)); }
.wf-legenda { margin-top: .7rem; font-size: var(--t-mini); color: var(--cafe-suave); }
.wf-noite .wf-legenda { color: var(--tinta-noite-suave); }

/* ---------- entrada por rolagem: um gesto por bloco ---------- */
.js [data-rev] { opacity: 0; translate: 0 18px; transition: opacity 1s var(--suave), translate 1.1s var(--suave); transition-delay: var(--atraso, 0s); }
.js [data-rev].wf-on { opacity: 1; translate: 0 0; }
.js .wf-parada[data-rev] { translate: none; opacity: 1; }

/* ---------- barra fixa: o agendar sempre ao alcance ---------- */
.wf-barra {
  position: fixed; z-index: 50; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--margem);
  background: color-mix(in oklab, var(--travertino-claro) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--linha);
  translate: 0 -110%; transition: translate .5s var(--suave);
}
.wf-barra.wf-on { translate: 0 0; }
.wf-barra-nome { font-family: var(--serif); font-size: 1.125rem; text-decoration: none; line-height: 1.15; }
.wf-barra-nome small { display: block; font-family: var(--sans); font-size: .8125rem; color: var(--cafe-suave); letter-spacing: .02em; }
.wf-barra .botao { padding: .75em 1.3em; font-size: 1rem; }
@media (max-width: 980px) {
  .wf-barra { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--linha); translate: 0 110%;
    padding: .65rem var(--margem) calc(.65rem + env(safe-area-inset-bottom)); }
  .wf-barra-nome { display: none; }
  .wf-barra .botao { flex: 1; justify-content: center; }
  .wf-barra .wf-barra-tel { flex: none; min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; padding: 0 1rem; font-size: 1rem; }
  body { padding-bottom: 0; }
}
@media (min-width: 981px) { .wf-barra-tel { display: none; } }

/* ---------- rodapé ---------- */
.wf-pe { background: #1d140f; color: var(--tinta-noite); padding: clamp(4rem, 3rem + 4vw, 7rem) var(--margem) 2rem; position: relative; overflow: clip; }
.wf-pe-dentro { max-width: var(--coluna); margin: 0 auto; }
.wf-pe-fio { position: relative; height: 1px; background: linear-gradient(to right, var(--ambar-luz), var(--linha-noite) 40%, var(--linha-noite)); margin-bottom: 3rem; }
.wf-pe-fio::before { content: ""; position: absolute; left: 0; top: -6px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ambar); box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 18px 3px rgb(240 194 127 / .55); }
.wf-pe-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.wf-pe .wf-pe-nome { font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; margin: 0 0 .5rem; }
.wf-pe p, .wf-pe li { margin: 0; color: var(--tinta-noite-suave); font-size: 1.0625rem; line-height: 1.6; }
.wf-pe h2 { margin: 0 0 .8rem; font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-luz); font-weight: 400; font-family: var(--sans); }
.wf-pe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.wf-pe a { text-decoration: none; border-bottom: 1px solid var(--linha-noite); min-height: 44px; display: inline-flex; align-items: center; }
.wf-pe a:hover { color: #fff; border-bottom-color: var(--ambar-luz); }
.wf-pe-base { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--linha-noite); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; }
.wf-pe-base p { font-size: .9375rem; }
.wf-selo a { color: var(--tinta-noite); border-bottom-color: var(--ambar-luz); min-height: 0; }
@media (max-width: 860px) { .wf-pe-grade { grid-template-columns: 1fr; gap: 2rem; } .wf-pe { padding-bottom: 6.5rem; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-rev] { opacity: 1 !important; translate: none !important; }
  .js .wf-parada[data-rev]::after { transform: none !important; }
  .js .wf-parada[data-rev]::before { scale: 1 !important; opacity: 1 !important; }
  .wf-barra { transition: none; }
}