/* Base do site — Dr. Marcus Bressan (Clínica Avicena). Prefixo wf-. Sistema em 02-conceito/sistema.md.
   As variáveis do hero (hero.css) continuam valendo; estas completam a página. */

:root {
  --caramelo-claro: #c9ad8e;
  --papel: #f4efe7;
  --linho: #ece4d6;
  --areia: #e2d6c2;
  --tinta-suave: #5c4f45;
  --tinta-clara-suave: rgba(244, 239, 231, .78);
  --luz-a: #eef2f3;   /* definidas pela hora (hero.js): dia por padrão */
  --luz-b: #f6f3ec;
  --largura: 76rem;
  --secao: clamp(5rem, 4rem + 5vw, 9rem);
  --raio-janela: .6rem;
  --fonte-corpo: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --tam-h2: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  --tam-num: clamp(2.6rem, 2rem + 3vw, 4.6rem);
}
html { scroll-behavior: smooth; }
body { background: var(--papel); color: var(--tinta-escura); }
body > main { display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.wf-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* granulado único, fixo, por cima da página inteira */
body::after {
  content: ""; position: fixed; inset: -10%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 220px 220px; mix-blend-mode: overlay; opacity: .045;
}
.hd .hd-grao { display: none; } /* o hero usa o granulado da página */

/* ---------- seção: uma parede da sala ---------- */
.wf-secao {
  position: relative; isolation: isolate;
  padding: var(--secao) 0;
  background: var(--papel); color: var(--tinta-escura);
}
.wf-secao::before { /* o trilho da persiana */
  content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); height: 1px;
  background: color-mix(in oklab, var(--caramelo) 45%, transparent);
}
.wf-secao > .wf-luz { /* luz de janela sobre a parede clara */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 70% at 18% 0% in oklab, #fbf7ef, transparent 70%),
    radial-gradient(60% 50% at 100% 100% in oklab, #e9eef1, transparent 70%);
}
.wf-secao--escura { background: var(--madeira-noite); color: var(--tinta); }
.wf-secao--escura::before { background: color-mix(in oklab, var(--caramelo) 32%, transparent); }
.wf-secao--escura > .wf-pool { /* o pool de luz, que respira e segue a hora */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.wf-secao--escura > .wf-pool::before {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(70% 60% at 22% 20% in oklab, color-mix(in oklab, var(--luz-b) 22%, transparent), transparent 70%);
  transform-origin: 22% 20%;
  animation: wf-respira 10s ease-in-out infinite;
}
.wf-miolo { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto; }

/* ---------- texto ---------- */
.wf-rotulo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: .72;
}
.wf-rotulo::before { content: ""; width: 1.4rem; height: 1px; background: currentColor; opacity: .7; }
.wf-titulo {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: var(--tam-h2); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance;
}
.wf-titulo em { font-style: italic; }
.wf-texto { font-size: var(--fonte-corpo); line-height: 1.6; max-width: 58ch; }
.wf-texto + .wf-texto { margin-top: 1em; }
.wf-secao:not(.wf-secao--escura) .wf-texto { color: var(--tinta-suave); }
.wf-secao--escura .wf-texto { color: var(--tinta-clara-suave); }
.wf-numero { font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--tam-num); line-height: 1; letter-spacing: -.01em; }
.wf-estrela { color: var(--ambar); }

/* frase no vidro: a citação de paciente, como no hero */
.wf-vidro { margin: 0; }
.wf-vidro blockquote { margin: 0; font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.32; text-wrap: pretty; }
.wf-vidro figcaption { margin-top: .55rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.wf-vidro figcaption::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: currentColor; vertical-align: middle; margin-right: .5rem; opacity: .7; }

/* ---------- a janela: moldura de foto e de mapa, com a luz da hora ---------- */
.wf-janela {
  position: relative; overflow: hidden; border-radius: var(--raio-janela);
  background: var(--areia);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 50px -30px rgba(28, 20, 16, .55);
}
.wf-janela > img, .wf-janela > iframe { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-janela::after { /* o véu da hora */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom in oklab, var(--luz-a), transparent 42%);
  mix-blend-mode: soft-light; opacity: .9;
  transition: background 2.4s linear;
}
.wf-janela--persiana::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.1rem; z-index: 1;
  background: var(--linho); border-bottom: 1px solid color-mix(in oklab, var(--caramelo) 60%, transparent);
}
html[data-luz="noite"] .wf-janela::after { mix-blend-mode: multiply; opacity: .55; }

/* ---------- botões ---------- */
.wf-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .72rem 1.35rem .72rem 1.05rem;
  border-radius: 999px; background: var(--ambar); color: var(--tinta-escura);
  text-decoration: none;
  box-shadow: 0 12px 30px -14px rgba(40, 24, 10, .7);
  transition: transform .5s var(--suave), background .4s var(--suave), box-shadow .5s var(--suave);
}
.wf-botao:hover { background: var(--ambar-escuro); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(40, 24, 10, .8); }
.wf-botao__icone { width: 1.35rem; height: 1.35rem; flex: none; }
.wf-botao__texto { display: flex; flex-direction: column; line-height: 1.15; }
.wf-botao__texto strong { font-weight: 600; font-size: .95rem; }
.wf-botao__texto small { font-size: .72rem; font-weight: 500; opacity: .8; letter-spacing: .01em; }
.wf-botao--leve {
  padding: .85rem 1.3rem; font-size: .9rem; font-weight: 600; box-shadow: none;
  color: var(--tinta-escura);
  background: color-mix(in oklab, #fff 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--tinta-escura) 30%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wf-botao--leve:hover { background: color-mix(in oklab, #fff 80%, transparent); border-color: var(--tinta-escura); transform: none; box-shadow: none; }
.wf-secao--escura .wf-botao--leve { color: var(--tinta); background: rgba(28, 20, 16, .28); border-color: color-mix(in oklab, var(--tinta) 55%, transparent); }
.wf-secao--escura .wf-botao--leve:hover { background: rgba(28, 20, 16, .5); border-color: var(--tinta); }
.wf-link { color: inherit; text-decoration: none; position: relative; font-weight: 500; }
.wf-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; opacity: .35; transition: opacity .5s var(--suave), transform .5s var(--suave); }
.wf-link:hover::after { opacity: 1; }

/* botão fixo do celular */
.wf-flutuante {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 50;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s var(--suave), transform .5s var(--suave);
}
.wf-flutuante.wf-flutuante--visivel { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 861px) { .wf-flutuante { display: none; } }

/* ---------- entradas ---------- */
.js .wf-entra { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
.js .wf-entra.wf-entra--visivel { opacity: 1; transform: none; }
.js .wf-entra:nth-child(2) { transition-delay: .15s; } .js .wf-entra:nth-child(3) { transition-delay: .3s; }
.js .wf-entra:nth-child(4) { transition-delay: .45s; } .js .wf-entra:nth-child(5) { transition-delay: .6s; }
.wf-linhas > span { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js .wf-linhas > span > span { display: block; transform: translateY(108%); transition: transform 1.25s var(--suave); }
.js .wf-linhas.wf-entra--visivel > span > span { transform: none; }
.js .wf-linhas > span:nth-child(2) > span { transition-delay: .15s; } .js .wf-linhas > span:nth-child(3) > span { transition-delay: .3s; }

@keyframes wf-respira { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.035); } }
@keyframes wf-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ambar) 55%, transparent); } 40% { box-shadow: 0 0 0 .4rem color-mix(in oklab, var(--ambar) 0%, transparent); } }
.wf-ponto { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ambar); animation: wf-pulsa 10s ease-in-out infinite; }
html[data-aberto="0"] .wf-ponto { background: var(--ceu-escuro); animation: none; }

@media (max-width: 600px) {
  :root { --secao: clamp(3.5rem, 3rem + 4vw, 5rem); }
}