/* =========================================================
   Base do site — Dra. Giovanna Nelli Zaratine
   Sistema derivado do hero D "Eu amo ver você sorrindo".
   Materiais: forro (claro), tecido caramelo, tecido marinho, tecido azul.
   ========================================================= */

:root {
  --tinta: #1e3354;
  --tinta-suave: #3c4e6d;
  --caramelo: #d9a46a;
  --mostarda: #c29741;
  --mostarda-escura: #8a6420;   /* mostarda para texto sobre claro (AA) */
  --palha: #e8c48d;
  --caramelo-fundo: #c98e52;
  --barra: #b07636;
  --creme: #fbf6ec;
  --creme-2: #f4ead8;
  --rosa: #e9b7c6;
  --azul-jaleco: #bcd7ee;
  --amarelo-fita: #f2c94c;
  --magenta: #d6265a;
  --noite: #15253f;
  --noite-2: #0f1c31;

  --f-titulo: 'Bowlby One', 'Arial Black', system-ui, sans-serif;
  --f-texto: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* escala */
  --t-mini: .875rem;                         /* 14px, mínimo de rótulo */
  --t-p: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-lead: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  --t-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --t-h2: clamp(2.375rem, 1.6rem + 3.6vw, 5.25rem);
  --t-mega: clamp(4rem, 2rem + 9vw, 10rem);

  --pad-x: clamp(20px, 5.6vw, 104px);
  --gutter: var(--pad-x);
  --larg: 1240px;
  --sec-y: clamp(88px, 11vw, 168px);
  --raio: 14px;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --barra-h: 16px;
}

html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; line-height: 1.55; font-size: var(--t-p); }
::selection { background: var(--amarelo-fita); color: var(--tinta); }

/* granulado único, fixo, sobre a página toda */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .12  0 0 0 0 .05  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }

.wf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- seção e materiais ---------- */
.wf-sec {
  position: relative; isolation: isolate;
  padding: var(--sec-y) var(--gutter);
  overflow-x: clip;
}
.wf-in { position: relative; z-index: 2; max-width: var(--larg); margin: 0 auto; }

/* forro: o consultório claro */
.wf-forro {
  background:
    radial-gradient(in oklab ellipse 42% 50% at 82% 12%, #ffffff 0%, rgb(255 255 255 / 0) 100%),
    radial-gradient(in oklab ellipse 36% 42% at 8% 88%, #f6e2e7 0%, rgb(246 226 231 / 0) 100%),
    radial-gradient(in oklab ellipse 34% 40% at 94% 92%, #e5eef7 0%, rgb(229 238 247 / 0) 100%),
    var(--creme);
  color: var(--tinta);
}
.wf-forro.wf-forro--quente {
  background:
    radial-gradient(in oklab ellipse 40% 46% at 14% 14%, #fff9ee 0%, rgb(255 249 238 / 0) 100%),
    radial-gradient(in oklab ellipse 38% 44% at 88% 80%, #f3e1c2 0%, rgb(243 225 194 / 0) 100%),
    var(--creme-2);
}

/* tecido: a estampa da touca (canvas desenhado pelo base.js em [data-estampa]) */
.wf-tecido { background: var(--caramelo); color: var(--tinta); }
.wf-tecido > .wf-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.wf-tecido > .wf-malha::before {
  content: ""; position: absolute; inset: -12%;
  background:
    radial-gradient(in oklab circle closest-side at 18% 22%, #ebc993, rgb(235 201 147 / 0)),
    radial-gradient(in oklab circle closest-side at 80% 14%, #e2b47a, rgb(226 180 122 / 0)),
    radial-gradient(in oklab circle closest-side at 66% 86%, #c29741, rgb(194 151 65 / 0)),
    radial-gradient(in oklab circle closest-side at 6% 92%, var(--caramelo-fundo), rgb(201 142 82 / 0)),
    var(--caramelo);
  animation: wf-respira 36s ease-in-out infinite alternate;
}
.wf-tecido > .wf-malha::after { /* sarja */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgb(255 246 230 / .07) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(45deg, rgb(90 50 10 / .045) 0 1px, rgb(0 0 0 / 0) 1px 4px);
}
@keyframes wf-respira {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2.5%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}
.wf-estampa { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wf-estampa canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }

/* tecido marinho: a mesma estampa em linha creme */
.wf-tecido.wf-marinho { background: var(--noite); color: var(--creme); }
.wf-tecido.wf-marinho > .wf-malha::before {
  background:
    radial-gradient(in oklab circle closest-side at 16% 18%, #2b4a78, rgb(43 74 120 / 0)),
    radial-gradient(in oklab circle closest-side at 84% 26%, #24406b, rgb(36 64 107 / 0)),
    radial-gradient(in oklab circle closest-side at 70% 92%, #3a3550, rgb(58 53 80 / 0)),
    radial-gradient(in oklab circle closest-side at 10% 88%, #1b3050, rgb(27 48 80 / 0)),
    var(--noite);
}
.wf-tecido.wf-marinho > .wf-malha::after {
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(45deg, rgb(0 0 0 / .08) 0 1px, rgb(0 0 0 / 0) 1px 4px);
}
.wf-tecido.wf-marinho .wf-estampa canvas { mix-blend-mode: normal; opacity: .5; }

/* tecido azul: o azul do jaleco do Centrinho */
.wf-tecido.wf-azul { background: var(--azul-jaleco); }
.wf-tecido.wf-azul > .wf-malha::before {
  background:
    radial-gradient(in oklab circle closest-side at 14% 20%, #dcebf8, rgb(220 235 248 / 0)),
    radial-gradient(in oklab circle closest-side at 82% 18%, #a9c9e6, rgb(169 201 230 / 0)),
    radial-gradient(in oklab circle closest-side at 64% 90%, #9dbfe0, rgb(157 191 224 / 0)),
    var(--azul-jaleco);
}
.wf-tecido.wf-azul .wf-estampa canvas { opacity: .55; }

/* barra (bainha) com pesponto: a emenda entre materiais.
   .wf-bainha-t na borda de cima, .wf-bainha-b na de baixo. */
.wf-bainha-t::before, .wf-bainha-b::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  height: var(--barra-h);
  background:
    repeating-linear-gradient(90deg, var(--creme) 0 9px, rgb(0 0 0 / 0) 9px 15px) 0 50% / 100% 2.2px no-repeat,
    linear-gradient(rgb(70 36 6 / .28), rgb(70 36 6 / 0) 40%, rgb(255 236 204 / .2) 70%, rgb(70 36 6 / .22)),
    var(--barra);
}
.wf-bainha-t::before { top: 0; box-shadow: 0 6px 12px -6px rgb(70 36 6 / .5); }
.wf-bainha-b::after { bottom: 0; box-shadow: 0 -6px 12px -6px rgb(70 36 6 / .35); }
.wf-marinho.wf-bainha-t::before, .wf-marinho.wf-bainha-b::after {
  background:
    repeating-linear-gradient(90deg, var(--amarelo-fita) 0 9px, rgb(0 0 0 / 0) 9px 15px) 0 50% / 100% 2px no-repeat,
    linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / 0) 40%, rgb(255 255 255 / .08) 70%, rgb(0 0 0 / .3)),
    var(--noite-2);
}
.wf-azul.wf-bainha-t::before, .wf-azul.wf-bainha-b::after {
  background:
    repeating-linear-gradient(90deg, var(--creme) 0 9px, rgb(0 0 0 / 0) 9px 15px) 0 50% / 100% 2.2px no-repeat,
    linear-gradient(rgb(20 40 70 / .25), rgb(0 0 0 / 0) 40%, rgb(255 255 255 / .25) 70%, rgb(20 40 70 / .2)),
    #8fb3d6;
}

/* ---------- tipografia ---------- */
.wf-kicker { /* a fita marinho do hero ("ODONTOPEDIATRIA · BAURU-SP") */
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding: 6px 14px;
  font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase;
  background: var(--tinta); color: var(--creme);
  border-radius: 4px; position: relative; transform: rotate(-1.2deg);
}
.wf-kicker::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; border: 1.2px dashed rgb(251 246 236 / .55); pointer-events: none; }
.wf-marinho .wf-kicker { background: var(--creme); color: var(--tinta); }
.wf-marinho .wf-kicker::after { border-color: rgb(30 51 84 / .45); }

.wf-h2 {
  margin: 0; font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase;
  font-size: var(--t-h2); line-height: .98; letter-spacing: -.005em; text-wrap: balance;
}
.wf-h3 { margin: 0; font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
.wf-lead { font-size: var(--t-lead); line-height: 1.45; font-weight: 500; max-width: 38ch; }
.wf-p { max-width: 62ch; }
.wf-p, .wf-lead { margin: 0; }
.wf-p + .wf-p { margin-top: 1em; }

/* remendo: palavra costurada num pedaço de creme (o "SORRINDO." do hero) */
.wf-remendo {
  position: relative; display: inline-block;
  padding: .1em .24em .2em; margin: 0 -.06em;
  background: repeating-linear-gradient(0deg, rgb(194 151 65 / .07) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  color: var(--tinta);
  border-radius: .16em; transform: rotate(-2deg);
  box-shadow: 0 .04em 0 rgb(150 96 40 / .35), 0 .22em .4em -.18em rgb(70 36 6 / .5);
}
.wf-remendo::before { content: ""; position: absolute; inset: .08em; border-radius: .1em; border: max(2px, .03em) dashed var(--mostarda); pointer-events: none; }
.wf-remendo--amarelo { background: var(--amarelo-fita); }
.wf-remendo--amarelo::before { border-color: rgb(30 51 84 / .5); }
.wf-remendo--rosa { background: #f6d6df; }
.wf-remendo--rosa::before { border-color: var(--magenta); }

/* sorriso magenta desenhado sob uma palavra: <span class="wf-sorri">palavra<svg …></svg></span> */
.wf-sorri { position: relative; display: inline-block; }
.wf-sorri svg { position: absolute; left: 12%; bottom: -.12em; width: 76%; height: .3em; overflow: visible; }
.wf-sorri path { fill: none; stroke: var(--magenta); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- etiqueta de roupa costurada ---------- */
.wf-etiqueta {
  position: relative;
  padding: 24px 20px 18px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  color: var(--tinta);
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 22px 34px -20px rgb(50 26 4 / .55);
}
.wf-etiqueta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  background: linear-gradient(rgb(30 51 84 / .1), rgb(30 51 84 / .02));
  border-bottom: 1.6px dashed rgb(30 51 84 / .55);
  border-radius: 3px 3px 0 0;
}
.wf-etiqueta--marinho { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--tinta); color: var(--creme); }
.wf-etiqueta--marinho::before { background: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .05)); border-bottom-color: rgb(242 201 76 / .7); }

/* ---------- pesponto (divisória tracejada) ---------- */
.wf-pesponto { height: 0; border: 0; border-top: 2px dashed currentColor; opacity: .45; margin: 0; }

/* ---------- janela costurada para fotos ---------- */
.wf-janela {
  position: relative; margin: 0;
  border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%;
  box-shadow: 0 0 0 10px var(--barra), 0 0 0 11.5px rgb(255 236 204 / .45), 0 18px 30px 8px rgb(70 36 6 / .35);
}
.wf-janela > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.wf-janela::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2.2px dashed var(--creme); pointer-events: none; }
.wf-marinho .wf-janela { box-shadow: 0 0 0 10px var(--noite-2), 0 0 0 11.5px rgb(242 201 76 / .35), 0 18px 30px 8px rgb(0 0 0 / .4); }
.wf-marinho .wf-janela::after { border-color: var(--amarelo-fita); }
.wf-janela--ret { border-radius: 22px; }

/* ---------- botão principal (etiqueta marinho com botão de costura) ---------- */
.wf-cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 10px 22px 10px 12px;
  border-radius: var(--raio); background: var(--tinta); color: var(--creme);
  font: 700 17.5px/1.2 var(--f-texto); letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 2px 0 #142640, 0 14px 26px -14px rgb(30 20 8 / .8);
  transition: transform .35s var(--mola);
}
.wf-cta::before { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: 1.5px dashed rgb(251 246 236 / .5); pointer-events: none; }
.wf-cta:hover { transform: translateY(-2px) rotate(-.6deg); }
.wf-cta:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; box-shadow: 0 0 0 7px var(--tinta); }
.wf-marinho .wf-cta, .wf-cta--creme { background: var(--creme); color: var(--tinta); box-shadow: 0 2px 0 #cdbb98, 0 14px 26px -14px rgb(0 0 0 / .7); }
.wf-marinho .wf-cta::before, .wf-cta--creme::before { border-color: rgb(30 51 84 / .4); }
.wf-botao {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(in oklab circle at 35% 30%, #fff6dd, var(--palha) 70%, var(--mostarda));
  box-shadow: inset 0 0 0 3px rgb(150 100 40 / .35), 0 2px 3px rgb(0 0 0 / .25);
  transition: transform .5s var(--mola);
}
.wf-botao i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #6b4512; top: 11px; left: 11px; }
.wf-botao i:nth-child(2) { left: 21px; }
.wf-botao i:nth-child(3) { top: 21px; }
.wf-botao i:nth-child(4) { top: 21px; left: 21px; }
.wf-botao::before, .wf-botao::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.4px; margin: -1.2px 0 0 -8px; background: var(--magenta); border-radius: 2px; transform: rotate(45deg); }
.wf-botao::after { transform: rotate(-45deg); }
.wf-cta:hover .wf-botao { transform: rotate(90deg); }
.wf-cta svg.wf-seta { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.wf-link { /* ação secundária */
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 700; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}

/* ---------- desenho da estampa como ícone: <span class="wf-motivo" data-motivo="girafa"></span> ---------- */
.wf-motivo { display: inline-block; width: 1.6em; height: 1.6em; color: currentColor; flex: none; }
.wf-motivo svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wf-motivo path { fill: none; stroke: currentColor; stroke-width: var(--motivo-traco, 3.2); stroke-linecap: round; stroke-linejoin: round; }
.wf-motivo circle { fill: currentColor; }
.js .wf-motivo[data-desenha] path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.1s var(--suave); }
.js .wf-motivo[data-desenha] circle { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .4s .7s var(--mola); }
.js .wf-visto .wf-motivo[data-desenha] path, .js .wf-motivo[data-desenha].wf-visto path { stroke-dashoffset: 0; }
.js .wf-visto .wf-motivo[data-desenha] circle, .js .wf-motivo[data-desenha].wf-visto circle { transform: scale(1); }

/* ---------- entrada por rolagem (um gesto por seção) ---------- */
.js [data-rev] { opacity: 0; transition: opacity .8s var(--suave), transform .9s var(--suave); transition-delay: var(--atraso, 0s); }
.js [data-rev="sobe"] { transform: translateY(26px); }
.js [data-rev="remenda"] { transform: translateY(-.25em) scale(1.12) rotate(3deg); transition-timing-function: var(--suave), var(--mola); }
.js [data-rev="pendura"] { transform: rotate(-12deg) translateY(-14px); transform-origin: 50% 0; transition-timing-function: var(--suave), var(--mola); transition-duration: .8s, 1.2s; }
.js [data-rev="surge"] { transform: scale(.94); }
.js [data-rev].wf-visto { opacity: 1; transform: var(--rev-fim, none); }

/* ---------- botão flutuante do WhatsApp (celular) ---------- */
.wf-flutua {
  position: fixed; z-index: 80; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--creme);
  box-shadow: 0 10px 24px -10px rgb(10 20 40 / .7);
  transform: translateY(120px); opacity: 0;
  transition: transform .5s var(--mola), opacity .3s;
}
.wf-flutua::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgb(251 246 236 / .55); }
.wf-flutua svg { width: 26px; height: 26px; fill: currentColor; }
.wf-flutua.wf-on { transform: none; opacity: 1; }
@media (min-width: 900px) { .wf-flutua { display: none; } }

@media (max-width: 899px) {
  .wf-cta { min-height: 54px; font-size: 16px; padding: 8px 18px 8px 9px; gap: 12px; }
  .wf-botao { width: 34px; height: 34px; }
  .wf-botao i { width: 5px; height: 5px; top: 10px; left: 10px; }
  .wf-botao i:nth-child(2) { left: 19px; }
  .wf-botao i:nth-child(3) { top: 19px; }
  .wf-botao i:nth-child(4) { top: 19px; left: 19px; }
  .wf-janela { box-shadow: 0 0 0 7px var(--barra), 0 0 0 8.5px rgb(255 236 204 / .45), 0 14px 24px 4px rgb(70 36 6 / .3); }
}