/* Base do site · Dr. Winston Ueda · derivada do hero C ("Não abro mão")
   Só o que é comum a toda a página. As seções usam estas variáveis e os componentes wf-*;
   cada seção tem o próprio prefixo de classe e o próprio arquivo. */

@font-face{font-family:"Reserva Titulo";src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Liberation Sans");size-adjust:60%;font-weight:100 900}
@font-face{font-family:"Reserva Texto";src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Liberation Sans");size-adjust:96%;font-weight:100 900}

:root{
  /* cor: a noite do centro cirúrgico */
  --noite:#06262c;
  --noite-funda:#041b20;
  --petroleo:#0b3a43;
  --petroleo-vivo:#0b4d57;
  --campo:#2d6fb0;
  --ciano:#9fd3e6;
  --pedra:#efe7da;
  --ambar:#ffc67a;                       /* só na marca do limite: uma por tela */
  --pedra-forte:rgb(239 231 218 / .92);
  --pedra-media:rgb(239 231 218 / .76);
  --pedra-baixa:rgb(239 231 218 / .56);
  --fio:rgb(159 211 230 / .24);
  --fio-fraco:rgb(159 211 230 / .12);

  /* a seção clara (a parte "junto") */
  --claro-fundo:#efe7da;
  --claro-luz:#f6ead6;
  --claro-sombra:#e7d6bb;
  --claro-tinta:#06262c;
  --claro-tinta-media:rgb(6 38 44 / .72);
  --claro-tinta-baixa:rgb(6 38 44 / .52);
  --claro-fio:rgb(6 38 44 / .18);

  /* tipografia */
  --f-titulo:"Sofia Sans Extra Condensed","Reserva Titulo","Arial Narrow",sans-serif;
  --f-texto:"Sofia Sans","Reserva Texto",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-hero:clamp(4.5rem, min(9.6vw, 16.5vh), 9.6rem);
  --t-secao:clamp(3rem, 6.4vw, 5.6rem);
  --t-destaque:clamp(1.75rem, 3vw, 2.5rem);
  --t-apoio:clamp(1rem, .5vw + .65rem, 1.125rem);
  --t-mini:.8125rem;

  /* espaço */
  --margem:clamp(20px, 5vw, 72px);
  --passo:clamp(12px, 2.3vh, 24px);
  --respiro:clamp(72px, 12vh, 140px);
  --raio:6px;
  --largura-max:1440px;

  /* movimento */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-traco:cubic-bezier(.45,.05,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--noite);color:var(--pedra);
  font:400 1rem/1.5 var(--f-texto);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{color:inherit}
p,figure,blockquote,ul,ol,h1,h2,h3,h4{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

/* granulado: um só, fixo, por cima da página inteira (nunca por seção) */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ───────── componentes comuns ───────── */

/* a seção: caixa de largura total; o conteúdo respeita a margem */
.wf-secao{position:relative;isolation:isolate;padding:var(--respiro) var(--margem)}
.wf-secao > .wf-miolo{position:relative;z-index:2;max-width:var(--largura-max);margin:0 auto}
.wf-secao--clara{background:var(--claro-fundo);color:var(--claro-tinta)}

/* rótulo de seção: caixa alta, espaçado, com um número de ordem opcional */
.wf-rotulo{
  display:flex;align-items:baseline;gap:14px;
  font-size:var(--t-mini);line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--pedra-media);
  font-variant-numeric:tabular-nums;
}
.wf-rotulo::before{content:"";display:block;width:28px;height:1px;background:currentColor;opacity:.6;transform:translateY(-.35em)}
.wf-secao--clara .wf-rotulo{color:var(--claro-tinta-media)}

/* título de seção */
.wf-titulo{
  font:500 var(--t-secao)/.9 var(--f-titulo);letter-spacing:-.004em;color:var(--pedra);
  margin-top:clamp(14px,2.2vh,22px);text-wrap:balance;
}
.wf-secao--clara .wf-titulo{color:var(--claro-tinta)}
.wf-destaque{font:500 var(--t-destaque)/1 var(--f-titulo);letter-spacing:0}

/* texto de apoio */
.wf-apoio{max-width:40em;text-wrap:pretty;font-size:var(--t-apoio);line-height:1.52;color:var(--pedra-media)}
.wf-apoio strong{font-weight:600;color:var(--pedra)}
.wf-secao--clara .wf-apoio{color:var(--claro-tinta-media)}
.wf-secao--clara .wf-apoio strong{color:var(--claro-tinta)}

/* a fala dele e a fala de paciente: itálico entre aspas, com legenda em rótulo */
.wf-fala{font-style:italic;font-size:1rem;line-height:1.4;color:var(--pedra-forte);max-width:34em}
.wf-legenda{margin-top:4px;font-size:var(--t-mini);letter-spacing:.04em;color:var(--pedra-baixa)}
.wf-secao--clara .wf-fala{color:var(--claro-tinta)}
.wf-secao--clara .wf-legenda{color:var(--claro-tinta-baixa)}

/* botões */
.wf-botao{
  display:inline-flex;align-items:center;gap:.65em;height:54px;padding:0 1.5em 0 1.2em;
  background:var(--pedra);color:var(--noite);border-radius:var(--raio);
  font:700 1rem/1 var(--f-texto);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -14px rgb(159 211 230 / .55);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s;
}
.wf-botao:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 34px -14px rgb(159 211 230 / .75)}
.wf-botao svg{flex:none;width:20px;height:20px}
.wf-secao--clara .wf-botao{background:var(--petroleo-vivo);color:var(--pedra);box-shadow:0 10px 30px -14px rgb(11 77 87 / .6)}
.wf-secao--clara .wf-botao:hover{background:var(--noite)}
.wf-segunda{
  font-weight:600;font-size:1rem;color:var(--pedra);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:1px solid rgb(159 211 230 / .55);transition:border-color .25s;
}
.wf-segunda::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.55em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.wf-segunda:hover{border-bottom-color:var(--pedra)}
.wf-secao--clara .wf-segunda{color:var(--claro-tinta);border-bottom-color:rgb(11 77 87 / .5)}

/* o trecho tracejado da escala, como separador entre seções escuras */
.wf-tracejado{height:1px;background-image:linear-gradient(90deg,var(--pedra) 0 50%,transparent 50% 100%);background-size:8px 1px;opacity:.3}

/* entrada por rolagem: uma vez só, disparada pelo site.js (classe .wf-visto) */
.js .wf-entra{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .wf-entra.wf-visto{opacity:1;transform:none}
.js .wf-entra[data-atraso="1"]{transition-delay:.12s}
.js .wf-entra[data-atraso="2"]{transition-delay:.24s}
.js .wf-entra[data-atraso="3"]{transition-delay:.36s}
.js .wf-entra[data-atraso="4"]{transition-delay:.48s}

/* ícone do WhatsApp em <symbol>, usado por qualquer botão: <svg><use href="#wf-zap"/></svg> */
.wf-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* botão de WhatsApp flutuante no celular (site.js o mostra depois do hero) */
.wf-flutua{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:none;align-items:center;gap:.5em;height:52px;padding:0 1.2em 0 1em;
  background:var(--pedra);color:var(--noite);border-radius:999px;
  font:700 .9375rem/1 var(--f-texto);text-decoration:none;
  box-shadow:0 12px 30px -10px rgb(4 27 32 / .9), 0 0 0 1px rgb(239 231 218 / .2);
  opacity:0;transform:translate3d(0,16px,0);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.wf-flutua svg{width:22px;height:22px}
.wf-flutua.wf-on{opacity:1;transform:none}
@media (max-width:820px){.wf-flutua{display:inline-flex}}

/* utilidades */
.wf-so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wf-num{font-variant-numeric:tabular-nums}