/* Base das seções — Dra. Mallu Cerutti v2 · "Estúdio rosa".
   Componentes compartilhados (prefixo wf-). As variáveis de cor e fonte vêm do :root do hero.css. */

@font-face { font-family: "Corinthia"; src: url("../fontes/corinthia-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --t-corpo: clamp(18px, 1rem + .2vw, 19.5px);
  --t-mini: 14px;
  --t-h2: clamp(44px, 1.6rem + 4vw, 96px);
  --t-h3: clamp(28px, 1.1rem + 1.6vw, 40px);
  --sec-pad: clamp(96px, 11vw, 176px);
  --largo: 1280px;
  --raio: 22px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --sombra: 0 30px 60px -34px rgba(90, 15, 39, .45);
  --vinho-fundo: #3d0a1c;
}

html { scroll-behavior: smooth; overflow-x: clip; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* granulado único, fixo, por cima da página */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- seção = uma parede do estúdio ---------- */
.wf-sec {
  position: relative; isolation: isolate; overflow: clip;
  padding: var(--sec-pad) var(--margem);
  --tinta: var(--vinho-texto);
  --tinta-suave: color-mix(in oklab, var(--vinho-texto) 84%, var(--framboesa));
  --acento: var(--magenta);
  --linha: color-mix(in oklab, var(--framboesa) 34%, transparent);
  color: var(--tinta);
  background: var(--parede);
}
/* paredes (ritmo claro/escuro) */
.wf-sec, .wf-sec[data-parede="cha"] {
  --parede:
    radial-gradient(60% 55% at 100% 0% in oklab, color-mix(in oklab, var(--rosa-medio) 70%, transparent) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100% in oklab, color-mix(in oklab, var(--chiclete) 30%, transparent) 0%, transparent 75%),
    radial-gradient(70% 70% at 30% 40% in oklab, var(--cha-claro) 0%, transparent 70%),
    linear-gradient(180deg in oklab, var(--cha) 0%, var(--cha-claro) 55%, var(--cha) 100%);
}
.wf-sec[data-parede="petala"] {
  --parede:
    radial-gradient(55% 50% at 90% 10% in oklab, color-mix(in oklab, var(--cha) 80%, transparent) 0%, transparent 72%),
    radial-gradient(60% 55% at 0% 90% in oklab, color-mix(in oklab, var(--cha-claro) 90%, transparent) 0%, transparent 75%),
    linear-gradient(180deg in oklab, var(--petala) 0%, #fff4f6 50%, var(--petala) 100%);
}
.wf-sec[data-parede="chiclete"] {
  --tinta: #33061a;
  --tinta-suave: #4a0a24;
  --acento: #fff3f6;
  --linha: color-mix(in oklab, #33061a 28%, transparent);
  --parede:
    radial-gradient(55% 60% at 12% 18% in oklab, #ff9cc6 0%, transparent 72%),
    radial-gradient(60% 60% at 92% 85% in oklab, #cf2366 0%, transparent 75%),
    radial-gradient(50% 50% at 70% 20% in oklab, #ffc4da 0%, transparent 70%),
    linear-gradient(160deg in oklab, #f7709f 0%, #ec5a91 55%, #d93a77 100%);
}
.wf-sec[data-parede="vinho"] {
  --tinta: #fdebee;
  --tinta-suave: color-mix(in oklab, #fdebee 82%, var(--rosa-medio));
  --acento: var(--chiclete);
  --linha: color-mix(in oklab, #fdebee 22%, transparent);
  --parede:
    radial-gradient(55% 50% at 80% 12% in oklab, color-mix(in oklab, var(--magenta) 55%, transparent) 0%, transparent 72%),
    radial-gradient(60% 60% at 0% 100% in oklab, color-mix(in oklab, var(--framboesa) 50%, transparent) 0%, transparent 75%),
    linear-gradient(180deg in oklab, var(--vinho) 0%, var(--vinho-fundo) 100%);
}
.wf-largo { max-width: var(--largo); margin-inline: auto; position: relative; }

/* ---------- cabeço de editorial (fio + versalete + tulipa) ---------- */
.wf-cabeco {
  display: flex; align-items: center; gap: 14px; margin: 0 0 24px;
  font-family: var(--f-texto); font-weight: 500; font-size: 13px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--acento);
}
.wf-sec[data-parede="chiclete"] .wf-cabeco { color: #33061a; }
.wf-cabeco::before { content: ""; width: 46px; height: 1px; background: currentColor; flex: none; }
.wf-cabeco svg { width: 15px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- título em duas vozes (fino × forte), como no hero ---------- */
.wf-titulo { margin: 0; font-family: var(--f-titulo); color: inherit; font-size: var(--t-h2); line-height: .98; letter-spacing: -.012em; text-wrap: balance; }
.wf-titulo .wf-fino { display: block; font-weight: 300; font-size: .62em; line-height: 1.06; letter-spacing: -.004em; }
.wf-titulo .wf-forte { display: block; font-weight: 600; }
.wf-titulo .wf-fino + .wf-forte { margin-top: .06em; }
.wf-sub { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); line-height: 1.08; }

/* traço de batom sob uma palavra (desenha ao entrar) */
.wf-batom { font-style: normal; position: relative; color: var(--acento); white-space: nowrap; }
.wf-batom svg { position: absolute; left: -.04em; bottom: -.14em; width: calc(100% + .06em); height: .24em; overflow: visible; }
.wf-batom path { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; opacity: .9; clip-path: inset(0 0 0 0); }
.js .wf-batom path { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, .05, .3, 1) .5s; }
.js .wf-visto .wf-batom path, .js .wf-batom.wf-visto path { clip-path: inset(-50% -5% -50% 0); }
.wf-sec[data-parede="chiclete"] .wf-batom { color: #5a0f27; }
.wf-sec[data-parede="chiclete"] .wf-batom path { stroke: #fff3f6; }

/* ---------- texto ---------- */
.wf-texto { font-size: var(--t-corpo); line-height: 1.62; color: var(--tinta-suave); max-width: 34em; margin: 0; }
.wf-texto + .wf-texto { margin-top: 1em; }
.wf-texto strong { color: var(--tinta); font-weight: 500; }

/* legenda de revista: a frase dela + a fonte em versalete */
.wf-legenda { margin: 0; }
.wf-legenda blockquote { margin: 0; font-family: var(--f-texto); font-style: italic; font-weight: 300; font-size: clamp(21px, 1rem + .9vw, 30px); line-height: 1.32; color: var(--tinta); }
.wf-legenda figcaption, .wf-fonte { display: block; margin-top: 12px; font-size: var(--t-mini); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-suave); }
.wf-assinatura { font-family: "Corinthia", cursive; font-weight: 700; font-size: clamp(38px, 3vw, 50px); line-height: .7; color: var(--acento); display: inline-block; transform: rotate(-4deg); }

/* versalete pequena (metadados, rótulos) */
.wf-meta { font-size: var(--t-mini); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.wf-rec { display: inline-flex; align-items: center; gap: 9px; }
.wf-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho-terno); box-shadow: 0 0 0 4px color-mix(in oklab, var(--vermelho-terno) 18%, transparent); }

/* ---------- botão (igual ao do hero) ---------- */
.wf-cta {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 18px; align-items: center;
  padding: 14px 16px 14px 28px; border-radius: 999px; min-height: 64px;
  background: var(--framboesa); color: #fff3f6; text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(90, 15, 39, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background-color .4s ease, transform .4s var(--ease), box-shadow .4s ease;
}
.wf-cta:hover, .wf-cta:focus-visible { background: var(--magenta); transform: translateY(-2px); }
.wf-cta__frase { grid-column: 1; font-family: var(--f-titulo); font-weight: 500; font-size: 22px; line-height: 1.05; }
.wf-cta__info { grid-column: 1; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .88; }
.wf-cta svg { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #fff3f6; fill: none; stroke: var(--framboesa); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.wf-cta:hover svg { transform: translateX(3px); }
.wf-sec[data-parede="vinho"] .wf-cta { background: var(--chiclete); color: #33061a; }
.wf-sec[data-parede="vinho"] .wf-cta svg { stroke: var(--magenta); }
.wf-sec[data-parede="chiclete"] .wf-cta { background: #33061a; }
.wf-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.wf-link span { border-bottom: 1px solid var(--acento); padding-bottom: 2px; }

/* ---------- o ensaio: quadro de folha de contato ---------- */
.wf-quadro { position: relative; margin: 0; }
.wf-quadro > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: var(--sombra); }
.wf-quadro[data-n]::before {
  content: attr(data-n); position: absolute; z-index: 2; left: 12px; top: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; color: #fff3f6; text-shadow: 0 1px 6px rgba(60, 8, 26, .55);
}
.wf-quadro figcaption { margin-top: 12px; font-size: var(--t-mini); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.wf-credito { font-size: 13px; letter-spacing: .06em; color: var(--tinta-suave); }

/* mini estúdio: parede + chão + softbox para um recorte (o motivo do hero, em outra escala) */
.wf-estudio { position: relative; isolation: isolate; }
.wf-estudio::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, #fff6f7 0%, color-mix(in oklab, var(--petala) 80%, transparent) 32%, color-mix(in oklab, var(--cha-claro) 40%, transparent) 62%, transparent 100%);
}
.wf-sec[data-parede="vinho"] .wf-estudio::before { background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--magenta) 70%, transparent) 0%, color-mix(in oklab, var(--framboesa) 35%, transparent) 50%, transparent 100%); }
.wf-estudio__chao { position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -1%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side in oklab, rgba(90, 15, 39, .32), transparent); }

/* ---------- faixa vinho com versalete (como o pé do hero) ---------- */
.wf-faixa { background: var(--vinho); color: #fdebee; padding: 14px var(--margem); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.wf-faixa i { font-style: normal; color: var(--chiclete); margin: 0 .9em; }

/* ---------- entrada: um gesto por seção ---------- */
.js [data-rev] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--n, 0) * 110ms); }
.js [data-rev].wf-visto { opacity: 1; transform: none; }
/* flash de estúdio: a foto entra com o clarão do hero */
.js [data-rev="flash"] { transform: none; }
[data-rev="flash"] { position: relative; }
.js [data-rev="flash"]::after { content: ""; position: absolute; inset: -2px; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(80% 80% at 50% 40% in oklab, #fffafb 0%, #fde9ee 70%, #f9d8e0 100%); opacity: 0; }
.js [data-rev="flash"].wf-visto::after { animation: wf-flash 1.1s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--n, 0) * 110ms); }
@keyframes wf-flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- botão flutuante do WhatsApp no celular ---------- */
.wf-flutua {
  position: fixed; z-index: 50; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--framboesa); color: #fff3f6;
  box-shadow: 0 14px 30px -10px rgba(90, 15, 39, .7); opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
  transition: opacity .4s ease, transform .5s var(--ease);
}
.wf-flutua svg { width: 26px; height: 26px; fill: currentColor; }
.wf-flutua.ve { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1025px) { .wf-flutua { display: none; } }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .wf-sec { padding: 88px 20px; }
  .wf-cabeco { font-size: var(--t-mini); letter-spacing: .24em; gap: 10px; }
  .wf-cabeco::before { width: 26px; }
  .wf-cta { width: 100%; justify-content: space-between; grid-template-columns: 1fr auto; padding: 12px 12px 12px 24px; }
  .wf-faixa { font-size: 12px; letter-spacing: .12em; padding: 12px 16px; }
}