/* Base do site — Dra. Camila Bolivar (sistema em 02-conceito/sistema.md) */
:root {
--papel: #fdf5f2;
--papel-2: #fef2f2;
--rosa: #fbcace;
--rosa-eva: #f3b0bd;
--pessego: #f6d3c1;
--bordo: #a62d58;
--bordo-2: #b4446c;
--bordo-escuro: #7e1f43;
--tinta: #3a2620;
--texto: #544d47;
--texto-forte: #4a3f3a;
--marinho: #1d2238;
--eva-rosa: #f5b5c3;
--eva-amarelo: #f7d77e;
--eva-menta: #a6dcc9;
--eva-lilas: #c7b6e8;
--eva-pessego: #f8c3a2;
--f-titulo: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
--f-texto: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
--t-hero: clamp(2.5rem, min(6.1vw, 9.2svh), 5.7rem);
--t-h2: clamp(2.1rem, 4.2vw, 3.9rem);
--t-h3: clamp(1.3rem, 1.6vw, 1.6rem);
--t-corpo: clamp(1rem, .45vw + .8rem, 1.16rem);
--t-mini: .875rem;
--margem: clamp(20px, 6vw, 104px);
--secao: clamp(88px, 12vw, 168px);
--nav-h: clamp(64px, 8.4svh, 84px);
--fig-h: min(93svh, 1000px);
--raio: 999px;
--raio-eva: 18px;
--sombra-eva: 0 1px 0 rgb(255 255 255 / .6) inset, 0 -2px 0 rgb(120 40 70 / .12) inset, 0 10px 24px -12px rgb(110 30 60 / .45);
--curva: cubic-bezier(.2, .7, .2, 1);
--curva-quique: cubic-bezier(.3, 1.6, .5, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: clip;
background: var(--papel);
color: var(--texto);
font-family: var(--f-texto);
font-weight: 300;
font-size: 1rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::after {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 50;
opacity: .05;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .12 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; border-radius: 6px; }
.wf-so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bordo); color: #fff; padding: .6rem 1rem; border-radius: 10px; text-decoration: none; }
.wf-pular:focus { top: 12px; }
/* ---------- seção ---------- */
.wf-secao {
position: relative;
isolation: isolate;
padding: var(--secao) var(--margem);
}
/* malha de fundo por seção: --m1/--m2/--m3 trocam a temperatura; máscara vertical apaga emendas */
.wf-malha {
position: absolute; inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle closest-side at var(--m1-pos, 82% 22%) in oklab, var(--m1, oklch(90% .05 10 / .75)), transparent),
radial-gradient(circle closest-side at var(--m2-pos, 10% 80%) in oklab, var(--m2, oklch(92% .045 52 / .7)), transparent),
radial-gradient(circle closest-side at var(--m3-pos, 60% 105%) in oklab, var(--m3, oklch(88% .05 358 / .35)), transparent);
background-size: var(--m-tam, 90vmax 90vmax), var(--m-tam, 90vmax 90vmax), var(--m-tam, 90vmax 90vmax);
background-repeat: no-repeat;
background-position: var(--m1-xy, 100% 0), var(--m2-xy, 0 100%), var(--m3-xy, 60% 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/* ---------- tipografia ---------- */
.wf-rotulo {
display: inline-flex; align-items: center; gap: .7rem;
margin: 0 0 clamp(14px, 2vw, 22px);
font-family: var(--f-texto); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--bordo);
}
.wf-rotulo::before {
content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .55; transform: rotate(45deg); flex: none;
}
.wf-titulo {
margin: 0;
font-family: var(--f-titulo); font-weight: 600;
font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.026em;
color: var(--tinta);
text-wrap: balance;
}
.wf-titulo em, .wf-titulo b { font-style: normal; font-weight: inherit; color: var(--bordo); }
.wf-texto { font-size: var(--t-corpo); line-height: 1.6; color: var(--texto); max-width: 60ch; }
.wf-texto b, .wf-texto strong { font-weight: 500; color: var(--tinta); }
.wf-citacao { margin: 0; }
.wf-citacao p { margin: 0; font-weight: 300; color: var(--texto); }
.wf-citacao p b { font-weight: 500; color: var(--bordo); }
.wf-citacao footer, .wf-citacao figcaption { margin-top: .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: rgb(84 77 71 / .85); }
.wf-citacao footer::before, .wf-citacao figcaption::before { content: "— "; }
/* ---------- botões ---------- */
.wf-botao {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
min-height: 52px;
padding: .95rem 1.55rem;
border-radius: var(--raio-eva);
text-decoration: none;
font-family: var(--f-titulo); font-weight: 500; font-size: 1.08rem; letter-spacing: .005em;
color: #fff;
background: linear-gradient(180deg, oklch(56% .16 358), oklch(48% .16 358));
box-shadow: var(--sombra-eva);
transition: transform .25s var(--curva-quique), box-shadow .25s;
}
.wf-botao::after { content: "→"; font-family: var(--f-texto); font-weight: 400; transition: transform .25s; }
.wf-botao:hover { transform: translateY(-2px); }
.wf-botao:hover::after { transform: translateX(3px); }
.wf-botao:active { transform: translateY(1px) scale(.98); }
.wf-botao--claro { color: var(--bordo); background: #fffaf7; box-shadow: var(--sombra-eva), 0 0 0 1.5px rgb(166 45 88 / .35) inset; }
.wf-link {
display: inline-flex; align-items: center; min-height: 48px;
font-weight: 500; color: var(--bordo); text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1.5px no-repeat;
transition: background-size .3s;
}
.wf-link:hover { background-size: 0 1.5px; background-position: 100% calc(100% - 10px); }
/* ---------- a peça de EVA (motivo) ----------
→ o base.js desenha o SVG
tamanho por --peca (padrão 56px); cores: rosa amarelo menta lilas pessego; letra bordô (padrão) ou data-tinta="marinho" */
.wf-peca {
--cor: var(--eva-rosa);
position: relative;
display: inline-block;
width: var(--peca, 56px); height: var(--peca, 56px);
flex: none;
vertical-align: middle;
filter: drop-shadow(0 3px 3px rgb(120 40 70 / .18)) drop-shadow(0 8px 14px rgb(120 40 70 / .12));
}
.wf-peca svg { position: absolute; inset: -12%; width: 124%; height: 124%; overflow: visible; }
.wf-peca .wf-peca-base { fill: var(--cor); stroke: rgb(255 255 255 / .6); stroke-width: .7; }
.wf-peca .wf-peca-poros { opacity: .22; }
.wf-peca .wf-peca-luz { fill: url(#wf-peca-luz); }
.wf-peca text { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; fill: var(--bordo); dominant-baseline: central; text-anchor: middle; }
.wf-peca[data-tinta="marinho"] text { fill: var(--marinho); }
.wf-peca[data-cor="rosa"] { --cor: var(--eva-rosa); }
.wf-peca[data-cor="amarelo"] { --cor: var(--eva-amarelo); }
.wf-peca[data-cor="menta"] { --cor: var(--eva-menta); }
.wf-peca[data-cor="lilas"] { --cor: var(--eva-lilas); }
.wf-peca[data-cor="pessego"] { --cor: var(--eva-pessego); }
/* palavra em peças: … */
.wf-palavra { display: inline-flex; flex-wrap: wrap; gap: calc(var(--peca, 56px) * .06); align-items: center; }
.wf-palavra .wf-peca:nth-child(2n) { transform: rotate(var(--giro-par, 3deg)) translateY(2px); }
.wf-palavra .wf-peca:nth-child(3n) { transform: rotate(var(--giro-3, -4deg)); }
/* placa de EVA atrás de uma foto: img …
o base.js põe um