/* Base do site — Dr. Edmundo Kreisner. Carrega depois de hero.css; as seções só usam estas variáveis. */
:root {
  --noite: #20372c;
  --noite-funda: #182a22;
  --papel: #f1ecdd;
  --papel-suave: #c9d3c4;
  --t-h2: clamp(2rem, 3.6vw, 3.5rem);
  --t-h3: clamp(1.35rem, 1.8vw, 1.75rem);
  --respiro: clamp(5rem, 11vw, 10rem);
  --coluna: 34em;
}
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { overflow-x: clip; }
html { overflow-x: clip; }
img { max-width: 100%; height: auto; }
h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

/* 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;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .13 0 0 0 0 .1 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* seção */
.wf-secao { position: relative; isolation: isolate; padding: var(--respiro) var(--margem); background: var(--creme); color: var(--tinta); overflow: clip; }
.wf-noite { background: var(--noite); color: var(--papel); --tinta: var(--papel); --tinta-suave: var(--papel-suave); --verde-fundo: #b9d3b9; --azul-tinta: #b3c3d6; }
.wf-olho { display: flex; align-items: center; gap: .85rem; font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; color: var(--azul-tinta); }
.wf-olho::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .7; }
.wf-h2 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; color: var(--tinta); }
.wf-h2 em, .wf-h3 em { font-style: italic; color: var(--verde-fundo); }
.wf-h3 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; color: var(--tinta); }
.wf-texto { font-size: var(--t-apoio); line-height: 1.6; color: var(--tinta-suave); max-width: var(--coluna); }
.wf-texto strong { color: var(--tinta); }

/* o vão da treliça: retângulos concêntricos */
.wf-vao { position: relative; border: 1px solid color-mix(in oklab, var(--tinta) 22%, transparent); padding: clamp(1.25rem, 2.4vw, 2.25rem); }
.wf-vao::before { content: ""; position: absolute; inset: -7px; border: 6px solid var(--trelica); pointer-events: none; opacity: .9; }
.wf-noite .wf-vao::before { border-color: rgb(241 236 221 / .16); }

/* fundo de treliça (o mesmo desenho do hero), com máscara por seção via --mascara */
.wf-trelica { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/trelica.svg") 50% 0 / var(--tile) var(--tile); opacity: .5;
  -webkit-mask-image: var(--mascara, linear-gradient(to bottom, #000, transparent 60%)); mask-image: var(--mascara, linear-gradient(to bottom, #000, transparent 60%)); }
.wf-noite .wf-trelica { opacity: .1; filter: brightness(3) saturate(0); }

/* fala de paciente */
.wf-fala blockquote { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.3; color: var(--tinta); text-wrap: pretty; }
.wf-fala figcaption { display: flex; align-items: center; gap: .85rem; margin-top: .9rem; font-family: var(--f-titulo); font-style: italic; font-size: 1.0625rem; color: var(--tinta-suave); }
.wf-fala figcaption::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .6; }

/* botões e links */
.wf-botao { position: relative; display: inline-flex; align-items: center; gap: .7rem; min-height: 3.5rem; padding: .9rem 1.5rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em; text-decoration: none; color: var(--creme-luz); background: var(--verde-botao); border-radius: 2px; transition: background-color .3s; }
.wf-botao::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgb(42 71 55 / .38); border-radius: 3px; transition: inset .35s var(--suave), border-color .35s; }
.wf-botao:hover { background: #1b2f26; }
.wf-botao:hover::after { inset: -9px; }
.wf-botao span span { font-weight: 400; opacity: .92; }
.wf-noite .wf-botao { background: var(--papel); color: var(--noite-funda); }
.wf-noite .wf-botao::after { border-color: rgb(241 236 221 / .4); }
.wf-noite .wf-botao:hover { background: #fff; }
.wf-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; font-size: 1.0625rem; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: text-decoration-color .3s; }
.wf-link:hover { text-decoration-color: currentColor; }

/* entrada na rolagem: um gesto por seção */
.js [data-entra] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s var(--suave), transform .9s var(--suave); transition-delay: calc(var(--ordem, 0) * .09s); }
.js [data-entra].visto { opacity: 1; transform: none; }

/* botão que acompanha a rolagem no celular */
.wf-ligar { position: fixed; z-index: 80; left: 1rem; right: 1rem; bottom: max(.9rem, env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; font-weight: 700; font-size: 1.0625rem; text-decoration: none; color: var(--creme-luz); background: var(--verde-botao); border-radius: 2px; box-shadow: 0 0 0 1px rgb(247 243 232 / .55), 0 10px 30px rgb(24 42 34 / .28); transform: translateY(140%); transition: transform .5s var(--suave); }
.wf-ligar span { font-weight: 400; opacity: .92; }
.wf-ligar.aparece { transform: none; }
@media (max-width: 900px) { .wf-ligar { display: flex; } .ro-rodape { padding-bottom: 6.5rem !important; } }

/* rodapé: a treliça se fecha numa linha */
.ro-rodape { position: relative; background: var(--noite-funda); color: var(--papel-suave); padding: clamp(3rem, 6vw, 5rem) var(--margem) 2rem; font-size: .9375rem; }
.ro-rodape::before { content: ""; position: absolute; left: var(--margem); right: var(--margem); top: 1.5rem; height: 7px; border-top: 1px solid rgb(241 236 221 / .28); border-bottom: 1px solid rgb(241 236 221 / .12); }
.ro-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.ro-nome { font-family: var(--f-titulo); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--papel); }
.ro-reg { margin-top: .5rem; letter-spacing: .08em; font-size: var(--t-mini); }
.ro-rotulo { font-size: var(--t-mini); letter-spacing: .16em; text-transform: uppercase; color: #9fb3a3; margin-bottom: .7rem; }
.ro-rodape a { color: var(--papel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgb(241 236 221 / .4); display: inline-flex; min-height: 2.75rem; align-items: center; }
.ro-rodape a:hover { text-decoration-color: currentColor; }
.ro-rodape address { font-style: normal; line-height: 1.6; }
.ro-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgb(241 236 221 / .14); font-size: var(--t-mini); }
@media (max-width: 760px) { .ro-grade { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }