/* Base do site — Dra. Letícia Fitipaldi · sistema em 02-conceito/sistema.md */
:root {
  /* noite */
  --noite: #2a1418;
  --vinho: #3d1c24;
  --vinho-claro: #5a2a35;
  --rosa: #e2588f;
  --rosa-claro: #f39ac0;
  --esmalte: #f3ece2;
  --esmalte-2: #d9cbc3;
  --gengiva: #c9707a;
  --tinta-texto: #f3ece2;
  --texto-suave: color-mix(in oklab, #f3ece2 74%, #3d1c24);
  /* esmalte (seções claras) */
  --papel: #f3ece2;
  --papel-2: #fbf6ef;
  --linha-clara: rgb(42 20 24 / .14);
  --tinta: #2a1418;
  --tinta-suave: #5b3a40;
  --rosa-escuro: #a8285f;

  /* tipo */
  --f-titulo: "Zilla Slab", "Rockwell", Georgia, serif;
  --f-texto: "Space Grotesk", system-ui, sans-serif;
  --t-hero: clamp(2.15rem, 1.25rem + 3.3vw, 4.6rem);
  --t-titulo: var(--t-hero);
  --t-h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem);
  --t-h3: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
  --t-fala: clamp(1.02rem, .92rem + .38vw, 1.22rem);
  --t-texto: clamp(.95rem, .9rem + .2vw, 1.05rem);
  --t-rotulo: .74rem;

  /* espaço */
  --margem: clamp(1.1rem, .4rem + 3.6vw, 4.5rem);
  --secao: clamp(5rem, 3rem + 7vw, 10rem);
  --largura: 82rem;
  --leitura: 36rem;
  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.6rem;
  --e-4: 2.4rem;
  --e-5: 4rem;
  --raio: clamp(18px, 1.6vw, 30px);
  --nav-h: 76px;
  --curva: cubic-bezier(.2,.7,.2,1);

  --revelado: 0;
}
@media (max-width: 960px) { :root { --nav-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta-texto);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--rosa-claro); outline-offset: 4px; border-radius: 4px; }
.wf-esmalte :focus-visible { outline-color: var(--rosa-escuro); }
.wf-so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* granulado fixo, único */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- seções: noite e esmalte ---------- */
.wf-secao { position: relative; isolation: isolate; padding: var(--secao) var(--margem); overflow-x: clip; }
.wf-noite { background: var(--noite); color: var(--tinta-texto); }
.wf-esmalte { background: var(--papel); color: var(--tinta); }
.wf-caixa { max-width: var(--largura); margin: 0 auto; }

/* malha por seção (máscara vertical apaga emendas) */
.wf-malha { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.wf-malha i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.wf-noite .wf-malha i:nth-child(1) { width: 80vmax; height: 80vmax; right: -30vmax; top: -20vmax;
  background: radial-gradient(circle closest-side in oklch, color-mix(in oklab, var(--rosa) 18%, transparent), transparent);
  animation: wf-deriva-1 34s ease-in-out infinite alternate; }
.wf-noite .wf-malha i:nth-child(2) { width: 70vmax; height: 60vmax; left: -28vmax; bottom: -20vmax;
  background: radial-gradient(closest-side in oklch, color-mix(in oklab, var(--gengiva) 26%, transparent), transparent);
  animation: wf-deriva-2 30s ease-in-out infinite alternate; }
.wf-noite .wf-malha i:nth-child(3) { width: 55vmax; height: 55vmax; left: 25%; top: 20%;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--vinho-claro) 50%, transparent), transparent);
  animation: wf-deriva-3 38s ease-in-out infinite alternate; }
.wf-esmalte .wf-malha i:nth-child(1) { width: 70vmax; height: 70vmax; right: -25vmax; top: -15vmax;
  background: radial-gradient(circle closest-side in oklab, #fdf8f2, transparent);
  animation: wf-deriva-1 34s ease-in-out infinite alternate; }
.wf-esmalte .wf-malha i:nth-child(2) { width: 60vmax; height: 55vmax; left: -22vmax; bottom: -20vmax;
  background: radial-gradient(closest-side in oklch, color-mix(in oklab, #f2c3d3 45%, transparent), transparent);
  animation: wf-deriva-2 30s ease-in-out infinite alternate; }
.wf-esmalte .wf-malha i:nth-child(3) { width: 50vmax; height: 50vmax; left: 30%; top: 30%;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, #e6d6c8 70%, transparent), transparent);
  animation: wf-deriva-3 38s ease-in-out infinite alternate; }
@keyframes wf-deriva-1 { to { transform: translate(-6vmax, 5vmax) scale(1.08); } }
@keyframes wf-deriva-2 { to { transform: translate(8vmax, -4vmax) scale(1.12); } }
@keyframes wf-deriva-3 { to { transform: translate(-5vmax, 7vmax) scale(.9); } }

/* ---------- peças de texto comuns ---------- */
.wf-rotulo { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 var(--e-3);
  font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--rosa-claro); }
.wf-esmalte .wf-rotulo { color: var(--rosa-escuro); }
.wf-ponto { width: .55rem; height: .55rem; border-radius: 50%; flex: none; display: inline-block;
  background: radial-gradient(circle at 35% 35%, #ffd3e4, var(--rosa) 60%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rosa) 22%, transparent); }
.wf-h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.01em; }
.wf-h2 em, .wf-h3 em { font-style: italic; font-weight: 600; color: var(--rosa-claro); }
.wf-esmalte .wf-h2 em, .wf-esmalte .wf-h3 em { color: var(--rosa-escuro); }
.wf-h3 { font-size: var(--t-h3); line-height: 1.15; }
.wf-fala { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: var(--t-fala); line-height: 1.42; }
.wf-suave { color: var(--texto-suave); }
.wf-esmalte .wf-suave { color: var(--tinta-suave); }

/* pílula de vidro (rótulo honesto) */
.wf-pilula { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t-rotulo); letter-spacing: .04em; line-height: 1.3;
  color: var(--esmalte); background: color-mix(in oklab, var(--noite) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .1); padding: .5rem .8rem; border-radius: 99px; }

/* botões */
.wf-botao { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .85rem 1.5rem .85rem 1.25rem;
  border-radius: 99px; background: var(--rosa-claro); color: var(--noite); font-weight: 600; text-decoration: none; font-size: 1rem;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--rosa) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .25s var(--curva), box-shadow .25s, background-color .25s; }
.wf-botao svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.wf-botao:hover { transform: translateY(-2px); background: #f7b0cf; }
.wf-esmalte .wf-botao { background: var(--noite); color: var(--esmalte); box-shadow: 0 12px 30px -14px rgb(42 20 24 / .6); }
.wf-esmalte .wf-botao:hover { background: var(--vinho); }
.wf-link { text-decoration: none; font-weight: 500; border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent); padding: .6rem 0 2px; }
.wf-link:hover { border-color: var(--rosa); }

/* ---------- mancha de tinta como grifo ---------- */
.wf-mancha { position: relative; z-index: 0; white-space: nowrap; font-style: inherit; color: inherit; background: none; }
.wf-mancha > svg { position: absolute; z-index: -1; left: -.16em; right: -.16em; top: .08em; bottom: -.02em;
  width: calc(100% + .32em); height: calc(100% - .06em); overflow: visible; pointer-events: none; }
.wf-mancha > svg path { fill: color-mix(in oklab, var(--rosa) 58%, transparent); transform-origin: 30% 60%;
  transform: scale(.15); opacity: 0; transition: transform 1.1s var(--curva), opacity .5s ease; }
.wf-esmalte .wf-mancha > svg path { fill: color-mix(in oklab, var(--rosa) 34%, transparent); }
.wf-mancha.wf-visto > svg path { transform: none; opacity: 1; }

/* ---------- foto que se revela (tinta) ---------- */
.wf-tinta { position: relative; overflow: hidden; }
.wf-tinta > img { width: 100%; height: 100%; object-fit: cover; }
.wf-tinta > canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.js .wf-tinta.wf-tinta-pronta > img { visibility: hidden; }

/* ---------- entrada por rolagem ---------- */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--curva), transform 1.1s var(--curva); transition-delay: var(--atraso, 0s); }
.js [data-rev].wf-visto { opacity: 1; transform: none; }

/* ---------- navegação do site (sobre o hero) ---------- */
.bh-links .wf-nav-secao { opacity: .86; }
@media (max-width: 1100px) { .bh-links .wf-nav-secao { display: none; } }

/* ---------- botão flutuante do WhatsApp (celular) ---------- */
.wf-zap-flutua { position: fixed; z-index: 40; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rosa-claro); color: var(--noite);
  box-shadow: 0 12px 30px -8px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .5);
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .35s, transform .45s var(--curva); }
.wf-zap-flutua svg { width: 26px; height: 26px; fill: currentColor; }
.wf-zap-flutua.wf-mostra { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 961px) { .wf-zap-flutua { display: none; } }

@media (max-width: 960px) { :root { --t-rotulo: .8rem; } }