/* Hero D · "Camada por camada" · Dra. Larissa Moreira */

:root {
  /* cor: papel morno + as três camadas do modelo dela + turquesa da casa */
  --d-papel: #f6ece1;
  --d-areia: #ead9c5;
  --d-pessego: #f2cfb8;
  --d-epiderme: #8fa2b9;
  --d-epiderme-funda: #5f7896;
  --d-derme: #dfae98;
  --d-hipoderme: #ecd28b;
  --d-vinho: #7b2c36;
  --d-tinta: #2c2220;
  --d-tinta-suave: #5d4d47;
  --d-turquesa: #2fbfae;
  --d-turquesa-funda: #0f6f66;
  --d-branco: #fffaf4;

  /* tipografia */
  --d-titulo: "Gilda Display", "Iowan Old Style", Georgia, serif;
  --d-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --d-t-titulo: clamp(2.1rem, 1.05rem + 3.85vw, 4.5rem);
  --d-t-apoio: clamp(1rem, 0.95rem + 0.2vw, 1.09rem);
  --d-t-rotulo: 0.875rem;

  /* espaço */
  --d-margem: clamp(20px, 5vw, 76px);
  --d-nav: clamp(68px, 9.5svh, 92px);
  --d-col: clamp(140px, 12vw, 176px); /* coluna dos rótulos no palco */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--d-papel);
  color: var(--d-tinta);
  font-family: var(--d-texto);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
q { quotes: "“" "”"; }

/* ---------- hero ---------- */
.d-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 640px;
  background: var(--d-papel);
}

/* malha: manchas radiais lentas, cores vizinhas tiradas do modelo e da foto */
.d-malha { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.d-malha i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: d-deriva 32s ease-in-out infinite alternate;
}
.d-malha i:nth-child(1) {
  width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--d-pessego) 88%, white) 0%, transparent 100%);
}
.d-malha i:nth-child(2) {
  width: 62vmax; height: 62vmax; right: -14vmax; top: -18vmax;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--d-epiderme) 30%, var(--d-papel)) 0%, transparent 100%);
  animation-duration: 38s; animation-delay: -9s;
}
.d-malha i:nth-child(3) {
  width: 64vmax; height: 64vmax; left: 22vw; bottom: -34vmax;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--d-hipoderme) 62%, var(--d-papel)) 0%, transparent 100%);
  animation-duration: 27s; animation-delay: -5s;
}
.d-malha i:nth-child(4) {
  width: 46vmax; height: 46vmax; left: -16vmax; bottom: -20vmax;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--d-derme) 55%, var(--d-papel)) 0%, transparent 100%);
  animation-duration: 35s; animation-delay: -14s;
}
.d-malha i:nth-child(5) {
  width: 44vmax; height: 44vmax; right: 4vw; top: 22svh;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, var(--d-branco) 92%, var(--d-pessego)) 0%, transparent 100%);
  animation-duration: 24s; animation-delay: -3s;
}
@keyframes d-deriva {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}

.d-grao {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .055; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .1 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- navegação ---------- */
.d-nav {
  position: relative; z-index: 4;
  flex: none;
  height: var(--d-nav);
  padding: 0 var(--d-margem);
  display: flex; align-items: center; gap: clamp(20px, 3.4vw, 56px);
}
.d-marca { display: grid; gap: 1px; text-decoration: none; min-height: 48px; align-content: center; }
.d-marca-nome { font-family: var(--d-titulo); font-size: 1.32rem; line-height: 1.15; letter-spacing: .005em; }
.d-marca-sub { font-size: .8125rem; line-height: 1.3; color: var(--d-tinta-suave); }
.d-marca-sub b { font-weight: 600; color: var(--d-tinta); margin-left: .5em; padding-left: .6em; border-left: 1px solid color-mix(in oklab, var(--d-tinta) 30%, transparent); white-space: nowrap; }
.d-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 30px); }
.d-menu a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--d-tinta);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .85em) / 0 1px no-repeat;
  transition: background-size .35s ease;
}
.d-menu a:hover, .d-menu a:focus-visible { background-size: 100% 1px; }

/* ---------- texto ---------- */
.d-texto {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--d-margem) clamp(8px, 3svh, 34px);
  pointer-events: none;
}
.d-texto > * { pointer-events: auto; }

.d-sobre {
  margin: 0 0 clamp(10px, 2svh, 20px);
  display: flex; align-items: center; gap: 12px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-vinho);
}
.d-sobre span { width: 34px; height: 1px; background: currentColor; }

.d-titulo {
  margin: 0;
  max-width: 11.6em;
  font-family: var(--d-titulo); font-weight: 400;
  font-size: var(--d-t-titulo); line-height: 1.04; letter-spacing: -.012em;
  text-wrap: balance;
}
.d-titulo em { font-style: normal; color: var(--d-vinho); white-space: nowrap; }
.d-titulo q::before { color: color-mix(in oklab, var(--d-vinho) 70%, var(--d-papel)); }

.d-autoria {
  margin: clamp(10px, 1.8svh, 18px) 0 0;
  font-size: .9375rem; font-weight: 600; color: var(--d-tinta-suave);
  display: flex; align-items: center; gap: 10px;
}
.d-autoria::before { content: ""; width: 22px; height: 1px; background: currentColor; }

.d-apoio {
  margin: clamp(14px, 3svh, 30px) 0 0;
  max-width: 22.5em;
  font-size: var(--d-t-apoio); line-height: 1.58; color: var(--d-tinta-suave);
}
.d-apoio q { color: var(--d-tinta); font-weight: 600; }

.d-acoes { margin-top: clamp(16px, 3.2svh, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.d-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px;
  border-radius: 999px;
  background: var(--d-turquesa-funda); color: #fff;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; letter-spacing: .005em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 14px 30px -14px color-mix(in oklab, var(--d-turquesa-funda) 75%, transparent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s;
}
.d-botao svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.d-botao:hover { background: #0b5f57; transform: translateY(-2px); }
.d-botao:hover svg { transform: translateX(4px); }
.d-link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 700; font-size: .98rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: color-mix(in oklab, var(--d-tinta) 40%, transparent);
}
.d-link:hover { text-decoration-color: currentColor; }
:where(a, button):focus-visible { outline: 2px solid var(--d-turquesa-funda); outline-offset: 4px; border-radius: 6px; }

.d-prova {
  margin: clamp(14px, 2.8svh, 26px) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: .9375rem; font-weight: 600; color: var(--d-tinta);
}
.d-estrelas { display: inline-flex; color: #c9952b; }
.d-estrelas svg { width: 90px; height: 16px; }
.d-prova-anos { padding-left: 12px; border-left: 1px solid color-mix(in oklab, var(--d-tinta) 28%, transparent); }

/* ---------- cena: ela + bloco ---------- */
.d-cena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.d-ela {
  position: absolute; margin: 0;
  right: -1.2vw; top: 6.5svh;
  height: 126svh; aspect-ratio: 1100 / 2057;
  animation: d-entra 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.d-ela img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 30px 34px rgb(92 58 40 / .16)); }
@keyframes d-entra { from { opacity: 0; transform: translate3d(18px, 0, 0); } }

.d-palco {
  position: absolute;
  left: max(36vw, 520px); right: 22.5vw; top: 44.5svh; bottom: 1.5svh;
  container-type: size;
  pointer-events: auto;
}
.d-quadro { position: absolute; inset: 0; }

/* reserva estática: vale sem JS, sem WebGL e enquanto a cena carrega */
.d-palco {
  --d-lado: min(calc(100cqw - var(--d-col)), 100cqh);
  --d-cx: calc(var(--d-col) + (100cqw - var(--d-col)) / 2);
}
.d-reserva, .d-tela {
  position: absolute; top: 0; left: var(--d-col);
  width: calc(100% - var(--d-col)); height: 100%;
}
.d-reserva { object-fit: contain; transition: opacity .6s ease; }
.d-tela { opacity: 0; transition: opacity .6s ease; touch-action: pan-y; }
.d-com3d .d-reserva { opacity: 0; }
.d-com3d .d-tela { opacity: 1; }

.d-rotulos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.d-rotulos li {
  /* --fy e --fx: posição do fim do fio na imagem de reserva (0 a 1) */
  position: absolute; left: 0; height: 0;
  top: calc(50cqh + (var(--fy) - .5) * var(--d-lado));
  --d-fim: calc(var(--d-cx) + (var(--fx) - .5) * var(--d-lado));
  width: var(--d-fim);
  color: var(--d-tinta);
  pointer-events: auto;
  animation: d-rotulo .9s .5s ease both;
}
.d-rotulos li:nth-child(1) { --fy: .205; --fx: .141; }
.d-rotulos li:nth-child(2) { --fy: .464; --fx: .166; animation-delay: .65s; }
.d-rotulos li:nth-child(3) { --fy: .714; --fx: .188; animation-delay: .8s; }
.d-com3d .d-rotulos li { top: 0; transform: translate3d(0, var(--d-y, 0px), 0); }
@keyframes d-rotulo { from { opacity: 0; } }

.d-rotulos li::before { /* o fio */
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--d-tinta) 62%, transparent), color-mix(in oklab, var(--d-tinta) 38%, transparent));
  transform-origin: 0 50%;
}
.d-rotulos li::after { /* o ponto na placa */
  content: ""; position: absolute; left: 100%; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -2px;
  border-radius: 50%; background: var(--d-branco); border: 1.5px solid var(--d-tinta);
}
.d-r-num { display: none; }
.d-r-texto { position: absolute; left: 0; top: 0; width: calc(var(--d-col) - 6px); }
.d-r-texto b {
  position: absolute; left: 0; bottom: 7px;
  font-family: var(--d-titulo); font-weight: 400; font-size: 1.32rem; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}
.d-r-texto > span {
  position: absolute; left: 0; top: 8px;
  font-size: var(--d-t-rotulo); line-height: 1.3; font-weight: 600; color: var(--d-tinta-suave);
  max-width: calc(var(--d-col) - 22px);
}
.d-rotulos li.d-ativo .d-r-texto b { color: var(--d-vinho); }
.d-rotulos li.d-ativo::after { background: var(--d-vinho); border-color: var(--d-vinho); }

.d-legenda { display: none; }

/* ---------- pé do hero ---------- */
.d-pe {
  position: relative; z-index: 3; flex: none;
  margin: 0; padding: 0 var(--d-margem) clamp(14px, 2.6svh, 26px);
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  font-size: .8125rem; line-height: 1.4; color: var(--d-tinta-suave);
  max-width: 44vw;
}
.d-pe span + span { white-space: nowrap; }
.d-pe span:first-child { font-weight: 700; color: var(--d-tinta); width: 100%; }

/* ---------- telas largas e baixas / notebooks ---------- */
@media (min-width: 821px) and (max-width: 1180px) {
  :root { --d-col: 128px; --d-t-titulo: clamp(2.5rem, 4.6vw, 3.4rem); }
  .d-menu li:nth-child(n+3) { display: none; }
  .d-ela { height: 112svh; right: -7vw; top: 9svh; }
  .d-palco { left: 42vw; right: 17vw; top: 49svh; }
  .d-apoio { max-width: 19.5em; }
  .d-link { display: none; }
  .d-prova { max-width: 20em; }
  .d-prova-anos { padding-left: 0; border-left: 0; width: 100%; }
  .d-pe { max-width: 40vw; }
  .d-pe span + span { white-space: normal; }
  .d-r-texto b { font-size: 1.16rem; }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  :root { --d-col: 30px; --d-nav: 84px; --d-t-titulo: clamp(2rem, 9.3vw, 2.9rem); }
  .d-hero { height: auto; min-height: 100svh; }
  .d-texto { display: contents; }
  .d-nav { order: 0; }
  .d-menu { display: none; }
  .d-marca-nome { font-size: 1.22rem; }
  .d-marca-sub { font-size: .875rem; }
  .d-marca-sub b { display: block; margin: 0; padding: 0; border: 0; }

  .d-sobre, .d-titulo, .d-autoria, .d-apoio, .d-acoes, .d-prova { position: relative; z-index: 3; margin-left: var(--d-margem); margin-right: var(--d-margem); }
  .d-sobre { order: 1; margin-top: 6px; margin-bottom: 8px; font-size: .875rem; letter-spacing: .12em; }
  .d-titulo { order: 2; line-height: 1.06; }
  .d-autoria { order: 3; margin-top: 8px; }

  .d-cena {
    order: 4; position: relative; inset: auto; z-index: 1;
    height: clamp(330px, 50svh, 480px); margin-top: -34px;
    flex: none;
  }
  .d-ela { right: -7vw; top: 0; height: auto; width: min(86vw, 400px); }
  .d-ela img { filter: none; height: auto; }
  .d-cena { overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 46px), transparent); mask-image: linear-gradient(#000 calc(100% - 46px), transparent); }
  .d-palco { left: 6px; right: auto; top: auto; bottom: 22px; width: 58vw; height: 54%; }

  .d-rotulos li::before { left: 26px; width: calc(100% - 26px); }
  .d-r-num {
    display: grid; place-items: center; position: absolute; left: 0; top: -12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--d-branco); border: 1px solid color-mix(in oklab, var(--d-tinta) 45%, transparent);
    font-size: .875rem; font-weight: 700; line-height: 1;
  }
  .d-r-texto { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .d-acoes { order: 5; margin-top: -22px; gap: 2px 20px; }
  .d-botao { width: 100%; }
  .d-link { margin: 0 auto; }
  .d-apoio { order: 6; margin-top: 10px; max-width: none; }
  .d-prova { order: 7; margin-top: 16px; }

  .d-legenda {
    order: 8; display: grid; gap: 10px; list-style: none;
    margin: 22px var(--d-margem) 0; padding: 18px 0 0;
    border-top: 1px solid color-mix(in oklab, var(--d-tinta) 18%, transparent);
    font-size: .9375rem; line-height: 1.35; color: var(--d-tinta-suave);
  }
  .d-legenda li { display: grid; grid-template-columns: 24px auto 1fr; gap: 0 10px; align-items: baseline; }
  .d-legenda i { font-style: normal; font-weight: 700; font-size: .875rem; color: var(--d-tinta); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--d-tinta) 45%, transparent); }
  .d-legenda b { font-family: var(--d-titulo); font-weight: 400; font-size: 1.15rem; color: var(--d-tinta); }
  .d-legenda li:nth-child(1) i { background: color-mix(in oklab, var(--d-epiderme) 45%, var(--d-branco)); }
  .d-legenda li:nth-child(2) i { background: color-mix(in oklab, var(--d-derme) 55%, var(--d-branco)); }
  .d-legenda li:nth-child(3) i { background: color-mix(in oklab, var(--d-hipoderme) 65%, var(--d-branco)); }

  .d-pe { order: 9; max-width: none; margin-top: 22px; padding-bottom: 28px; font-size: .875rem; }
  .d-pe span + span { white-space: normal; }
}

/* modo de exportação da imagem de reserva (uso interno: ?exportar) */
.d-exporta .d-palco { position: fixed; left: 0; top: 0; width: 900px; height: 900px; bottom: auto; z-index: 99; --d-col: 0px; }
.d-exporta .d-rotulos { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Base do site · peças comuns a todas as seções (não editar nas seções: peça ajuste no relatório) */
:root {
  --wf-papel: var(--d-papel); --wf-areia: var(--d-areia); --wf-pessego: var(--d-pessego);
  --wf-epiderme: var(--d-epiderme); --wf-epiderme-funda: var(--d-epiderme-funda);
  --wf-derme: var(--d-derme); --wf-hipoderme: var(--d-hipoderme);
  --wf-vinho: var(--d-vinho); --wf-tinta: var(--d-tinta); --wf-tinta-suave: var(--d-tinta-suave);
  --wf-turquesa: var(--d-turquesa); --wf-turquesa-funda: var(--d-turquesa-funda); --wf-branco: var(--d-branco);
  --wf-ouro: #c9952b;
  /* tons de fundo das seções: a página desce pela pele (frio em cima, morno embaixo) */
  --wf-tom-epi: #e8ecf1;      /* epiderme lavada */
  --wf-tom-papel: #f6ece1;
  --wf-tom-derme: #f3ddd0;    /* derme lavada */
  --wf-tom-areia: #efe2d1;
  --wf-tom-hipo: #f5e7c2;     /* hipoderme lavada */
  --wf-tom-noite: #2a1c1d;    /* fecho e rodapé */
  --wf-titulo: var(--d-titulo); --wf-texto: var(--d-texto);
  --wf-t-h2: clamp(1.95rem, 1.2rem + 2.6vw, 3.5rem);
  --wf-t-h3: clamp(1.3rem, 1.15rem + .6vw, 1.7rem);
  --wf-t-corpo: clamp(1rem, .96rem + .2vw, 1.1rem);
  --wf-t-mini: .875rem;
  --wf-margem: var(--d-margem);
  --wf-largura: 1240px;
  --wf-respiro: clamp(72px, 11vw, 150px);
  --wf-raio: 22px; --wf-raio-p: 12px;
  --wf-curva: cubic-bezier(.2,.7,.2,1);
  --wf-sombra: 0 30px 50px -30px rgb(92 58 40 / .35);
}
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { overflow-x: hidden; }
body::after { /* granulado único da página, por cima de tudo */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .1 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.d-grao { display: none; } /* o hero usa o granulado da página */
img { max-width: 100%; }

/* seção: --wf-de é o tom de onde ela vem (o da seção anterior), --wf-tom o dela */
.wf-secao {
  position: relative; isolation: isolate;
  padding: var(--wf-respiro) var(--wf-margem);
  background: linear-gradient(180deg in oklab, var(--wf-de, var(--wf-tom)) 0, var(--wf-tom) min(34vh, 320px));
  color: var(--wf-tinta);
}
.wf-miolo { max-width: var(--wf-largura); margin: 0 auto; }
.wf-escura { color: #f6ece1; --wf-tinta: #f6ece1; --wf-tinta-suave: #d9c6bd; --wf-vinho: #f0b9a6; }

.wf-sobre { margin: 0 0 clamp(12px, 2vw, 22px); display: flex; align-items: center; gap: 12px;
  font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-vinho); }
.wf-sobre::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }
.wf-h2 { margin: 0; font-family: var(--wf-titulo); font-weight: 400; font-size: var(--wf-t-h2); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.wf-h2 em { font-style: normal; color: var(--wf-vinho); }
.wf-h3 { margin: 0; font-family: var(--wf-titulo); font-weight: 400; font-size: var(--wf-t-h3); line-height: 1.15; }
.wf-p { margin: 0; font-size: var(--wf-t-corpo); line-height: 1.6; color: var(--wf-tinta-suave); max-width: 34em; }
.wf-p strong, .wf-p b { color: var(--wf-tinta); font-weight: 700; }
.wf-mini { font-size: var(--wf-t-mini); line-height: 1.4; font-weight: 600; color: var(--wf-tinta-suave); }

.wf-botao { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--wf-turquesa-funda); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; letter-spacing: .005em; border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 14px 30px -14px color-mix(in oklab, var(--wf-turquesa-funda) 75%, transparent);
  transition: transform .3s var(--wf-curva), background-color .3s; }
.wf-botao:hover { background: #0b5f57; transform: translateY(-2px); }
.wf-botao svg { width: 20px; height: 20px; flex: none; }
.wf-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; font-size: .98rem; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.wf-link:hover { text-decoration-color: currentColor; }

/* fio de atlas: linha fina com ponto na ponta (o rótulo das camadas do hero) */
.wf-fio { position: relative; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 50%, transparent); }
.wf-fio::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); box-sizing: border-box; }

/* placa: o bloco translúcido do hero em CSS. Variantes: --epi, --derme, --hipo. Tem espessura (borda de baixo) e brilho de verniz. */
.wf-placa { --cor: var(--wf-derme); position: relative; border-radius: var(--wf-raio);
  background:
    linear-gradient(160deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 38%),
    linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 46%, white) 0%, color-mix(in oklab, var(--cor) 78%, white) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -10px 0 -1px color-mix(in oklab, var(--cor) 88%, #5a3a30) inset,
    0 26px 40px -26px color-mix(in oklab, var(--cor) 55%, #3a2a25);
  padding: clamp(20px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px) calc(clamp(20px, 2.6vw, 34px) + 10px); }
.wf-placa--epi { --cor: var(--wf-epiderme); }
.wf-placa--derme { --cor: var(--wf-derme); }
.wf-placa--hipo { --cor: var(--wf-hipoderme); }
.wf-placa--papel { --cor: #e9d9c8; }

/* entrada na rolagem: um gesto só (sobe e aparece). data-wf-entra="1|2|3" atrasa em degraus */
.wf-js [data-wf-entra] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s var(--wf-curva), transform .9s var(--wf-curva); }
.wf-js [data-wf-entra="2"] { transition-delay: .12s; } .wf-js [data-wf-entra="3"] { transition-delay: .24s; } .wf-js [data-wf-entra="4"] { transition-delay: .36s; }
.wf-js [data-wf-entra].wf-visto { opacity: 1; transform: none; }

/* botão de WhatsApp que acompanha a rolagem no celular */
.wf-zap { position: fixed; z-index: 80; right: 14px; bottom: 14px; display: none; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--wf-turquesa-funda); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 12px 28px -10px rgb(15 60 55 / .6);
  transform: translateY(calc(100% + 40px)); transition: transform .5s var(--wf-curva); }
.wf-zap svg { width: 24px; height: 24px; }
.wf-zap.wf-zap-on { transform: none; }
@media (max-width: 820px) { .wf-zap { display: inline-flex; } }

:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--wf-turquesa-funda); outline-offset: 4px; border-radius: 6px; }
.wf-escura :where(a, button, summary):focus-visible { outline-color: #9fe3d8; }
.wf-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wf-js [data-wf-entra] { opacity: 1; transform: none; }
}

/* tons por seção (a descida pela pele) */
#cuidado     { --wf-de: var(--wf-tom-papel); --wf-tom: var(--wf-tom-epi); }
#tratamentos { --wf-de: var(--wf-tom-epi);   --wf-tom: var(--wf-tom-papel); }
#historia    { --wf-de: var(--wf-tom-papel); --wf-tom: var(--wf-tom-derme); }
#avaliacoes  { --wf-de: var(--wf-tom-derme); --wf-tom: var(--wf-tom-papel); }
#espaco      { --wf-de: var(--wf-tom-papel); --wf-tom: var(--wf-tom-areia); }
#perguntas   { --wf-de: var(--wf-tom-areia); --wf-tom: var(--wf-tom-hipo); }
#onde        { --wf-de: var(--wf-tom-hipo);  --wf-tom: var(--wf-tom-hipo); }
#fecho       { --wf-de: var(--wf-tom-hipo);  --wf-tom: var(--wf-tom-noite); }

/* ===== cu ===== */
/* cu · #cuidado · Como eu cuido */
.cu-secao { overflow-x: clip; }

/* ---------- abertura: título + fala dela | modelo grande com fios de atlas ---------- */
.cu-abre { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cu-h2 { max-width: 9.2em; }
.cu-fala { margin: clamp(24px, 3vw, 42px) 0 0; max-width: 31em; padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid color-mix(in oklab, var(--wf-vinho) 55%, transparent); }
.cu-fala blockquote { margin: 0; }
.cu-fala p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.12rem, 1.02rem + .42vw, 1.36rem); line-height: 1.44; color: var(--wf-tinta); text-wrap: pretty; }
.cu-fala figcaption, .cu-cliente figcaption { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.cu-fala figcaption::before, .cu-cliente figcaption::before { content: ""; width: 22px; height: 1px; background: currentColor; }

.cu-modelo { position: relative; margin: 0 calc(var(--wf-margem) * -.55) 0 0; --cu-col: clamp(104px, 9vw, 136px); }
.cu-modelo::before { /* halo de luz atrás do objeto */
  content: ""; position: absolute; z-index: -1; left: 4%; right: -12%; top: -34%; bottom: -8%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, rgb(255 253 249 / .95), rgb(255 253 249 / 0)); }
.cu-modelo-quadro { position: relative; padding-left: var(--cu-col); }
.cu-modelo-quadro img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 30px rgb(60 70 90 / .26)) drop-shadow(0 4px 5px rgb(60 70 90 / .18)); }
.cu-rotulos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.cu-rotulos li { position: absolute; left: 0; top: var(--fy); height: 1px; width: calc(var(--cu-col) + (100% - var(--cu-col)) * var(--fx));
  background: linear-gradient(90deg, color-mix(in oklab, var(--wf-tinta) 62%, transparent), color-mix(in oklab, var(--wf-tinta) 38%, transparent)); }
.cu-rotulos li::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
.cu-rotulos li:nth-child(1) { --fy: 17.5%; --fx: .07; }
.cu-rotulos li:nth-child(2) { --fy: 47%; --fx: .05; }
.cu-rotulos li:nth-child(3) { --fy: 84%; --fx: .06; }
.cu-rotulos b { position: absolute; left: 0; bottom: 7px; font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.02rem, .9rem + .5vw, 1.32rem); line-height: 1; white-space: nowrap; }
.cu-legenda { margin: clamp(20px, 2.6vw, 34px) 0 0 var(--cu-col); max-width: 31em; font-size: .9375rem; line-height: 1.5; color: var(--wf-tinta-suave); }
.cu-legenda b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.05rem; color: var(--wf-vinho); margin-right: .5em; }

/* ---------- o caminho: pilha de placas em degraus | a lente ---------- */
.cu-caminho { --cu-vao: clamp(36px, 6vw, 92px); --cu-degrau: clamp(6px, 2.3vw, 30px);
  margin-top: clamp(24px, 3.4vw, 46px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--cu-vao); align-items: start; }
.cu-cabeca { margin-top: clamp(64px, 9vw, 128px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.cu-cabeca-fio { flex: 1 1 60px; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 26%, transparent); }
.cu-chaves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .875rem; font-weight: 700; color: var(--wf-tinta); }
.cu-chaves li { display: flex; align-items: center; gap: 9px; }
.cu-chaves li::before { content: ""; width: 22px; height: 12px; border-radius: 4px; background: var(--wf-epiderme); box-shadow: 0 -3px 0 0 var(--wf-epiderme-funda) inset; }
.cu-chaves .cu-chave--derme::before { background: var(--wf-derme); box-shadow: 0 -3px 0 0 #b9806c inset; }

.cu-pilha { list-style: none; margin: 0; padding: 0; }
.cu-placa { --cor: var(--wf-epiderme); z-index: calc(10 - var(--i)); margin-left: calc(var(--i) * var(--cu-degrau)); margin-right: calc((4 - var(--i)) * var(--cu-degrau)); margin-top: -12px;
  display: grid; grid-template-columns: 3.6rem 12.2rem minmax(0, 1fr); align-items: center; gap: 4px 18px;
  padding: 24px clamp(20px, 2.4vw, 32px) 38px; color: var(--wf-tinta);
  box-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 -14px 0 -1px color-mix(in oklab, var(--cor) 86%, #5a3a30) inset, 0 -15px 0 -1px rgb(255 255 255 / .35) inset,
    0 22px 30px -22px color-mix(in oklab, var(--cor) 45%, #2a2a35); }
.cu-placa:first-child { margin-top: 0; }
.cu-placa--0 { --cor: #efe3d6; }
.cu-placa--1 { --cor: color-mix(in oklab, var(--wf-epiderme) 60%, white); }
.cu-placa--2 { --cor: color-mix(in oklab, var(--wf-epiderme) 82%, white); }
.cu-placa--3 { --cor: var(--wf-epiderme); }
.cu-placa--4 { --cor: var(--wf-derme); }
.cu-num { font-family: var(--wf-titulo); font-size: 2.5rem; line-height: 1; color: color-mix(in oklab, var(--wf-tinta) 80%, transparent); }
.cu-placa--0 .cu-num { font-family: var(--wf-texto); font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-vinho); }
.cu-verbo { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1.08; letter-spacing: -.01em; }
.cu-placa--0 { grid-template-columns: 3.6rem 9.4rem minmax(0, 1fr); padding-top: 30px; padding-bottom: 46px; }
.cu-placa--0 .cu-linha { display: grid; gap: 8px; }
.cu-tres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; font-family: var(--wf-titulo); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3; }
.cu-tres li { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.cu-tres li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-vinho); flex: none; }
.cu-linha { font-size: 1rem; line-height: 1.5; color: var(--wf-tinta); }
/* o gesto da seção: as placas descem e assentam umas sobre as outras */
.wf-js .cu-placa[data-wf-entra]:not(.wf-visto) { transform: translate3d(0, calc(-30px - var(--i) * 6px), 0); }
.wf-js .cu-placa[data-wf-entra] { transition-delay: calc(var(--i) * .11s); }

.cu-prova { --cu-lado: 1; display: grid; gap: clamp(20px, 2.4vw, 30px); justify-items: start; padding-top: var(--cu-y, 150px); }
.cu-lente { position: relative; width: min(100%, 290px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 40px 46px -28px rgb(40 50 70 / .55), 0 6px 10px -4px rgb(40 50 70 / .3); }
.cu-lente svg { display: block; width: 100%; height: 100%; }
.cu-lente-fio { position: absolute; right: calc(100% - 4px); top: 50%; height: 1px; width: calc(var(--cu-vao) + 3 * var(--cu-degrau) + 22px);
  background: color-mix(in oklab, var(--wf-tinta) 50%, transparent); }
.cu-lente-fio::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
.cu-lente-num { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 34%;
  font-family: var(--wf-titulo); font-size: clamp(3rem, 2.4rem + 2vw, 4.4rem); line-height: 1; color: var(--wf-tinta); letter-spacing: -.02em; }
.cu-lente-num i { font-style: normal; font-size: .5em; margin-left: .08em; color: var(--wf-vinho); }
.cu-lente-pe { position: absolute; left: 0; right: 0; top: 63%; text-align: center; font-size: .875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wf-tinta-suave); }
.cu-pergunta { margin: 0 0 12px; font-family: var(--wf-titulo); font-size: var(--wf-t-h3); line-height: 1.18; color: var(--wf-tinta); text-wrap: balance; }

/* ---------- fecho: a cliente confirma + chamada como rótulo de atlas ---------- */
.cu-fecho { margin-top: clamp(56px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 84px); align-items: end; }
.cu-cliente { margin: 0; }
.cu-cliente blockquote { margin: 0; }
.cu-cliente p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.32rem, 1.05rem + 1.15vw, 2.05rem); line-height: 1.26; text-wrap: pretty; }
.cu-cliente em { font-style: normal; color: var(--wf-vinho); }
.cu-chamada-rotulo { margin: 0 0 8px; font-family: var(--wf-titulo); font-size: var(--wf-t-h3); line-height: 1; }
.cu-chamada-fio { margin-right: 3px; }
.cu-chamada-frase { margin: 16px 0 20px; font-size: var(--wf-t-corpo); line-height: 1.55; color: var(--wf-tinta-suave); max-width: 26em; }
.cu-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }

@media (max-width: 1240px) {
  .cu-placa, .cu-placa--0 { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .cu-linha { grid-column: 1 / -1; }
  .cu-tres li { white-space: normal; }
}
@media (max-width: 980px) {
  .cu-abre, .cu-caminho, .cu-fecho { grid-template-columns: minmax(0, 1fr); }
  .cu-modelo { margin-right: 0; }
  .cu-prova { --cu-lado: 0; padding-top: 0; grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
  .cu-lente-fio { display: none; }
}
@media (max-width: 620px) {
  .cu-modelo { --cu-col: 92px; margin-right: calc(var(--wf-margem) * -1.6); }
  .cu-legenda { margin-left: 0; margin-right: calc(var(--wf-margem) * 1.6); }
  .cu-cabeca-fio { display: none; }
  .cu-placa { padding: 18px 18px 34px; }
  .cu-placa--0 { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 38px; }
  .cu-tres { display: grid; gap: 2px; }
  .cu-num { font-size: 2.1rem; }
  .cu-prova { grid-template-columns: 124px minmax(0, 1fr); gap: 14px 18px; }
  .cu-lente { width: 124px; }
  .cu-lente-num { font-size: 2.1rem; padding-top: 30%; }
  .cu-lente-pe { display: none; }
  .cu-prova-texto { display: contents; }
  .cu-pergunta { margin: 0; }
  .cu-prova-texto .wf-p { grid-column: 1 / -1; }
  .cu-acoes .wf-botao { width: 100%; }
}

/* ===== tr ===== */
/* tr · #tratamentos · Tratamentos por camada */
.tr-miolo { display: grid; grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr); gap: clamp(36px, 5vw, 76px); align-items: start; }

/* ---------- coluna do título (acompanha a rolagem) ---------- */
.tr-lado { position: sticky; top: clamp(24px, 5vh, 56px); }
.tr-h2 { max-width: 9.6em; }
.tr-apoio { margin-top: clamp(16px, 2vw, 26px); max-width: 25em; }
.tr-bloco { margin: clamp(18px, 2.4vw, 34px) 0 0; --tr-col: 112px; max-width: 372px; }
.tr-bloco-quadro { position: relative; padding-left: var(--tr-col); }
.tr-bloco img { display: block; width: 100%; height: auto; }
.tr-rotulos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.tr-rotulos li { position: absolute; left: 0; top: var(--fy); height: 1px; width: calc(var(--tr-col) + (100% - var(--tr-col)) * var(--fx));
  background: color-mix(in oklab, var(--wf-tinta) 50%, transparent); }
.tr-rotulos li::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
.tr-rotulos li:nth-child(1) { --fy: 20.5%; --fx: .141; }
.tr-rotulos li:nth-child(2) { --fy: 46.4%; --fx: .166; }
.tr-rotulos li:nth-child(3) { --fy: 71.4%; --fx: .188; }
.tr-rotulos a, .tr-rotulos span { position: absolute; left: 0; bottom: 0; height: 48px; padding-bottom: 7px; display: flex; align-items: flex-end; pointer-events: auto;
  font-family: var(--wf-titulo); font-size: 1.22rem; line-height: 1; color: var(--wf-tinta); text-decoration: none; white-space: nowrap; }
.tr-rotulos a:hover { color: var(--wf-vinho); }
.tr-rotulos span { color: var(--wf-tinta-suave); }
.tr-bloco figcaption { margin: 4px 0 0 var(--tr-col); font-size: .9375rem; line-height: 1.45; color: var(--wf-tinta-suave); }
.tr-bloco figcaption b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.05rem; color: var(--wf-vinho); margin-right: .4em; }
.tr-acoes { margin-top: clamp(18px, 2.2vw, 28px); }

/* ---------- a pilha: as placas se separam e a folha de cada camada aparece no vão ---------- */
.tr-pilha { position: relative; }
.tr-corte { position: relative; isolation: isolate; }
.tr-corte::before { /* guias tracejadas do bloco aberto */
  content: ""; position: absolute; z-index: -1; left: var(--tr-guia); right: var(--tr-guia); top: 30px; bottom: 30px;
  border-left: 1px dashed color-mix(in oklab, var(--wf-tinta) 38%, transparent); border-right: 1px dashed color-mix(in oklab, var(--wf-tinta) 38%, transparent); }
.tr-pilha { --tr-guia: 5.5%; }

.tr-camada { position: relative; }
.tr-camada + .tr-camada, .tr-camada + .tr-hipo { margin-top: 10px; }

.tr-cabeca { margin: 0; font: inherit; position: relative; z-index: 2; }
.tr-botao { width: 100%; min-height: 96px; margin: 0; border: 0; color: var(--wf-tinta); font: inherit; text-align: left; cursor: default;
  padding: 14px clamp(16px, 2.2vw, 30px) 24px;
  display: grid; grid-template-columns: 3.4rem auto minmax(0, 1fr) 48px; align-items: center; gap: 2px 18px; transition: transform .4s var(--wf-curva); }
.tr-viva .tr-botao { cursor: pointer; }
.tr-viva .tr-botao:hover { transform: translateY(-2px); }
.tr-botao:focus-visible { border-radius: var(--wf-raio); }
.tr-n { font-family: var(--wf-titulo); font-size: 2.3rem; line-height: 1; color: color-mix(in oklab, var(--wf-tinta) 78%, transparent); }
.tr-n--moldura { display: grid; color: var(--wf-turquesa-funda); }
.tr-n--moldura svg { width: 30px; height: 30px; }
.tr-nome { font-family: var(--wf-titulo); font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; }
.tr-resumo { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--wf-tinta); text-align: right; }
.tr-sinal { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--wf-tinta) 42%, transparent); background: rgb(255 250 244 / .5); transition: background-color .3s; }
.tr-viva .tr-sinal { display: block; }
.tr-sinal::before, .tr-sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin: -.8px 0 0 -8px; background: var(--wf-tinta); transition: transform .5s var(--wf-curva); }
.tr-fechada .tr-sinal::after { transform: rotate(90deg); }
.tr-botao:hover .tr-sinal { background: var(--wf-branco); }

.tr-painel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .65s var(--wf-curva), visibility 0s; }
.tr-fechada .tr-painel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .65s var(--wf-curva), visibility 0s .65s; }
.tr-dentro { min-height: 0; overflow: hidden; }

/* a folha que aparece no vão, presa sob a placa */
.tr-dentro { padding: 0 calc(var(--tr-guia) + 12px); }
.tr-folha { margin: -14px 0 26px; padding: calc(clamp(20px, 2.6vw, 34px) + 14px) clamp(20px, 2.6vw, 36px) clamp(22px, 2.6vw, 36px); border-radius: 4px 4px 16px 16px; background: var(--wf-branco);
  box-shadow: 0 1px 0 #fff inset, 0 24px 34px -24px rgb(92 58 40 / .45), 0 0 0 1px rgb(92 58 40 / .06); }
.tr-folha--epi { border-bottom: 3px solid color-mix(in oklab, var(--wf-epiderme) 70%, white); }
.tr-folha--derme { border-bottom: 3px solid color-mix(in oklab, var(--wf-derme) 80%, white); }
.tr-folha--moldura { border-bottom: 3px solid color-mix(in oklab, var(--wf-turquesa) 60%, white); }
.tr-onde { margin: 0 0 clamp(20px, 2.4vw, 30px); max-width: 30em; font-family: var(--wf-titulo); font-size: clamp(1.12rem, 1rem + .45vw, 1.34rem); line-height: 1.38; color: var(--wf-tinta); text-wrap: pretty; }
.tr-folha dl, .tr-folha dd { margin: 0; }
.tr-folha dt { display: flex; align-items: center; gap: 14px; font-family: var(--wf-titulo); font-size: clamp(1.22rem, 1.1rem + .45vw, 1.45rem); line-height: 1.15; color: var(--wf-tinta); }
.tr-folha dt::after { content: ""; flex: 1 1 20px; height: 7px; min-width: 20px;
  background: radial-gradient(circle at calc(100% - 3.5px) 50%, var(--wf-branco) 0 2px, var(--wf-tinta) 2.2px 3.5px, transparent 3.7px), linear-gradient(color-mix(in oklab, var(--wf-tinta) 45%, transparent), color-mix(in oklab, var(--wf-tinta) 45%, transparent)) 0 50% / calc(100% - 7px) 1px no-repeat; }
.tr-folha dd { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--wf-tinta-suave); }

.tr-folha.tr-folha--epi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(24px, 3.4vw, 48px); align-items: start; }
.tr-folha--epi .tr-onde { grid-column: 1 / -1; }
.tr-destaque { padding-right: clamp(0px, 2vw, 24px); }
.tr-marca { margin: 0 0 8px; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-vinho); }
.tr-item-nome { margin: 0; font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); line-height: 1.05; }
.tr-item-texto { margin: 12px 0 4px; font-size: var(--wf-t-corpo); line-height: 1.58; color: var(--wf-tinta-suave); }
.tr-lista { display: grid; gap: 20px; }

.tr-par { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(24px, 3.4vw, 48px); }

/* nota de atlas: a hipoderme */
.tr-hipo { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px clamp(16px, 2.2vw, 30px) 22px; }
.tr-hipo .tr-n { font-size: 1.9rem; }
.tr-hipo-texto { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--wf-tinta); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.tr-hipo-texto b { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.1; }
.tr-hipo-texto span { flex: 1 1 18em; }

/* fora das camadas: a moldura */
.tr-fora { margin: clamp(30px, 4vw, 48px) 0 14px; display: flex; align-items: center; gap: 14px; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-tinta-suave); }
.tr-fora::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 24%, transparent); }
.tr-botao--moldura { position: relative; border-radius: var(--wf-raio); background: var(--wf-branco); padding-top: 20px; padding-bottom: 20px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wf-turquesa-funda) 55%, transparent), 0 26px 40px -28px rgb(15 80 72 / .5); }
.tr-botao--moldura::before { content: ""; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--wf-turquesa) 70%, transparent); pointer-events: none; }
.tr-camada--moldura .tr-folha { margin-bottom: 0; }
.tr-grupo { margin: 0 0 16px; display: flex; align-items: center; gap: 14px; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-turquesa-funda); }
.tr-grupo::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--wf-turquesa-funda) 34%, transparent); }
.tr-indice dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3.4vw, 48px); }
.tr-indice dl + .tr-grupo { margin-top: 30px; }

/* rótulos do bloco acompanham o que está aberto */
.tr-rotulos li.tr-ativo a { color: var(--wf-vinho); }
.tr-rotulos li.tr-ativo::after { background: var(--wf-vinho); border-color: var(--wf-vinho); }
.tr-rotulos li, .tr-rotulos li::after, .tr-rotulos a { transition: color .3s, background-color .3s, border-color .3s; }

/* fim da pilha */
.tr-fim { margin: clamp(28px, 3.4vw, 44px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-family: var(--wf-titulo); font-size: var(--wf-t-h3); line-height: 1.2; }
.tr-fim .wf-link { font-family: var(--wf-texto); }

@media (min-width: 701px) {
  .tr-resumo { transition: opacity .4s; }
  .tr-viva .tr-camada:not(.tr-fechada) .tr-resumo { opacity: 0; }
}
@media (max-height: 840px) { .tr-lado { position: static; } }
@media (max-width: 1200px) {
  .tr-miolo { grid-template-columns: minmax(0, 1fr); }
  .tr-lado { position: static; }
  .tr-h2 { max-width: 12em; }
}
@media (max-width: 700px) {
  .tr-bloco { --tr-col: 104px; max-width: 300px; }
  .tr-pilha { --tr-guia: 3.5%; }
  .tr-dentro { padding: 0 calc(var(--tr-guia) + 6px); }
  .tr-acoes .wf-botao { width: 100%; }
  .tr-botao { grid-template-columns: 2.3rem minmax(0, 1fr) 48px; gap: 0 10px; }
  .tr-resumo { grid-column: 2 / 3; grid-row: 2; text-align: left; padding-bottom: 6px; }
  .tr-nome { align-self: end; }
  .tr-sinal { grid-row: 1 / 3; grid-column: 3; }
  .tr-n { grid-row: 1 / 3; font-size: 2rem; }
  .tr-folha.tr-folha--epi, .tr-par { grid-template-columns: minmax(0, 1fr); }
  .tr-destaque { padding: 0 0 22px; }
  .tr-hipo { grid-template-columns: 2.3rem minmax(0, 1fr); gap: 10px; }
  .tr-indice dl { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .tr-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: clamp(28px, 5vw, 64px); align-items: start; }
  .tr-lado > * { grid-column: 1; }
  .tr-lado .tr-bloco { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: center; }
}

/* ===== hi ===== */
/* hi · A história · onze anos em corte (uma placa por ano) */
.hi-secao { --hi-sangra: max(var(--wf-margem), (100vw - var(--wf-largura)) / 2); }
.hi-cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 5vw, 84px); align-items: end; }
.hi-h2 { max-width: 15em; }
.hi-abre { padding-bottom: .35em; }

.hi-corpo { margin-top: clamp(40px, 6vw, 84px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 84px); align-items: start; }

/* ---------- Fig. 1: a fotografia, sangrando até a borda da página ---------- */
.hi-fig { margin: 0 0 0 calc(-1 * var(--hi-sangra)); }
@media (min-width: 821px) and (min-height: 840px) { .hi-fig { position: sticky; top: 24px; } }
.hi-foto { position: relative; border-radius: 0 var(--wf-raio) var(--wf-raio) 0; overflow: hidden; aspect-ratio: 4 / 5; width: 100%;
  background: #dfe2e0; box-shadow: 0 50px 70px -44px rgb(92 58 40 / .55); }
/* recorte: x 4% a 74%, a partir de y 27% da foto original */
.hi-foto img { position: absolute; left: -5.71%; top: -41.16%; width: 142.86%; height: auto; max-width: none; display: block; }
.hi-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 -9px 0 -1px rgb(223 174 152 / .9) inset; }
.hi-marca { position: absolute; width: 0; height: 0; }
.hi-marca i, .hi-legenda i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--wf-branco); border: 1px solid color-mix(in oklab, var(--wf-tinta) 45%, transparent);
  font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); }
.hi-marca i { position: absolute; left: -13px; top: -13px; box-shadow: 0 6px 14px -6px rgb(44 34 32 / .5); }
.hi-marca::before { content: ""; position: absolute; top: 0; height: 1px; background: rgb(44 34 32 / .7); }
.hi-marca::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); box-sizing: border-box; }
.hi-marca--1 { left: 5.5%; top: 25.4%; } .hi-marca--1::before { left: 13px; width: 8.5vw; max-width: 60px; } .hi-marca--1::after { left: min(8.5vw + 10px, 70px); }
.hi-marca--2 { left: 95%; top: 29.6%; } .hi-marca--2::before { right: 13px; width: 5vw; max-width: 44px; } .hi-marca--2::after { right: min(5vw + 10px, 54px); }

.hi-legenda { margin: 22px 0 0 var(--hi-sangra); display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: baseline;
  font-size: .9375rem; line-height: 1.75; color: var(--wf-tinta-suave); }
.hi-legenda b, .hi-fig2 b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.32rem; line-height: 1; color: var(--wf-vinho); letter-spacing: .01em; white-space: nowrap; }
.hi-legenda i { width: 22px; height: 22px; margin: 0 3px 0 2px; vertical-align: 1px; }

/* ---------- Fig. 2: o corte do tempo ---------- */
.hi-coluna { --hi-regua: 118px; }
.hi-fig2 { margin: 0 0 18px; padding-left: var(--hi-regua); font-size: .9375rem; color: var(--wf-tinta-suave); display: flex; align-items: baseline; gap: 14px; }
.hi-corte { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.hi-corte::before { content: ""; position: absolute; left: calc(var(--hi-regua) - 18px); top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--wf-tinta) 34%, transparent); }
.hi-ano { --cor: var(--wf-derme); --forca: 62%; display: grid; grid-template-columns: var(--hi-regua) minmax(0, 1fr); align-items: start; }
.hi-ano--e { --cor: var(--wf-epiderme); }
.hi-ano--d { --cor: var(--wf-derme); --forca: 82%; }
.hi-ano--h { --cor: var(--wf-hipoderme); --forca: 88%; }
.wf-js .hi-corte [data-wf-entra] { transform: translate3d(0, -14px, 0); }
.wf-js .hi-corte [data-wf-entra].wf-visto { transform: none; }

.hi-num { position: relative; font-size: .875rem; font-weight: 600; line-height: 24px; color: var(--wf-tinta-suave); font-variant-numeric: tabular-nums; text-align: right; padding-right: 30px; }
.hi-num::after { content: ""; position: absolute; right: 12px; width: 12px; top: 12px; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 45%, transparent); }
.hi-ano--marco .hi-num { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); line-height: 1; padding: 22px 30px 0 0; color: var(--wf-tinta); letter-spacing: -.01em; }
.hi-ano--marco .hi-num::after { right: 0; width: 18px; top: calc(22px + .52em); background: color-mix(in oklab, var(--wf-tinta) 60%, transparent); }
.hi-ano--marco .hi-num::before { content: ""; position: absolute; right: -4px; top: calc(19px + .52em); width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); box-sizing: border-box; z-index: 1; }
.hi-ano--hoje .hi-num { color: var(--wf-vinho); }

.hi-placa { position: relative; min-height: 24px; border-radius: 8px;
  background:
    linear-gradient(170deg, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / 0) 46%),
    linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) calc(var(--forca) * .5), #fffaf4) 0%, color-mix(in oklab, var(--cor) var(--forca), #fffaf4) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 -5px 0 -1px color-mix(in oklab, var(--cor) 86%, #5a3a30) inset, 0 10px 12px -12px color-mix(in oklab, var(--cor) 40%, #3a2a25); }
/* as finas, empilhadas à mão: cada uma com seu recuo */
.hi-ano:nth-child(2) .hi-placa { margin: 0 3.5% 0 6px; } .hi-ano:nth-child(3) .hi-placa { margin: 0 0 0 14px; } .hi-ano:nth-child(4) .hi-placa { margin: 0 6% 0 2px; }
.hi-ano:nth-child(6) .hi-placa { margin: 0 2.5% 0 10px; } .hi-ano:nth-child(8) .hi-placa { margin: 0 5% 0 4px; } .hi-ano:nth-child(9) .hi-placa { margin: 0 1% 0 16px; }
.hi-ano--marco .hi-placa { border-radius: 12px; padding: 22px clamp(20px, 2.4vw, 32px) 30px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 -8px 0 -1px color-mix(in oklab, var(--cor) 86%, #5a3a30) inset, 0 16px 20px -18px color-mix(in oklab, var(--cor) 45%, #3a2a25); }
.hi-ano--hoje .hi-placa { box-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 -8px 0 -1px color-mix(in oklab, var(--cor) 86%, #5a3a30) inset, 0 40px 50px -30px rgb(92 58 40 / .5); }
.hi-placa p { margin: 10px 0 0; font-size: var(--wf-t-corpo); line-height: 1.6; color: #4a3b36; max-width: 33em; }
.hi-placa q { color: var(--wf-tinta); font-weight: 600; quotes: "“" "”"; }
.hi-fala { margin: 12px 0 0; }
.hi-fala p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--wf-vinho); }
.hi-fala footer { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: #4a3b36; }
.hi-fala footer::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* ---------- 2025: a virada, com a Fig. 3 ---------- */
.hi-placa--virada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hi-lente { margin: 0; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(18px, 2.4vw, 30px); align-items: center; }
.hi-lente-campo { position: relative; width: clamp(112px, 11vw, 148px); }
.hi-lente-campo svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgb(92 58 40 / .28)); }
.hi-lente-campo > b { position: absolute; right: -8px; bottom: 2px; padding: 3px 10px; border-radius: 999px; background: var(--wf-tinta); color: #fffaf4; font-size: .875rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
.hi-lente-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: .9375rem; color: #4a3b36; }
.hi-lente-fig b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.32rem; line-height: 1; color: var(--wf-vinho); white-space: nowrap; }
.hi-lente ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.hi-lente li { position: relative; padding-left: 40px; font-family: var(--wf-titulo); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; color: var(--wf-tinta); }
.hi-lente li::before { content: ""; position: absolute; left: 0; top: .62em; width: 28px; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 55%, transparent); }
.hi-lente li::after { content: ""; position: absolute; left: -3px; top: calc(.62em - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); box-sizing: border-box; }

/* ---------- fora do atlas: duas vozes ---------- */
.hi-humano { margin-top: clamp(64px, 8vw, 116px); padding-top: clamp(36px, 4.4vw, 60px); border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 20%, transparent);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(28px, 5vw, 84px); align-items: start; }
.hi-dela, .hi-riso { margin: 0; }
.hi-dela .wf-sobre { margin-bottom: clamp(18px, 2.4vw, 30px); }
.hi-dela-fala { margin: 0; font-family: var(--wf-titulo); font-size: clamp(2rem, 1rem + 3.7vw, 4.3rem); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.hi-dela-fala + .hi-dela-fala { margin-top: .26em; color: var(--wf-vinho); }
.hi-dela footer, .hi-riso footer { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.hi-dela footer::before, .hi-riso footer::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.hi-lado { padding-top: clamp(0px, 3vw, 44px); }
.hi-humano-h { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-bottom: 14px; }
.hi-riso { rotate: -2deg; margin: 30px 0 18px 6px; }
.hi-riso p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; color: var(--wf-tinta); }
.hi-riso footer { color: #4a3b36; margin-top: 14px; }

@media (max-width: 1040px) {
  .hi-cabeca { grid-template-columns: 1fr; }
  .hi-coluna { --hi-regua: 100px; }
}
@media (max-width: 820px) {
  .hi-corpo { grid-template-columns: 1fr; }
  .hi-fig { margin-right: calc(-1 * var(--wf-margem)); margin-left: 0; }
  .hi-foto { border-radius: var(--wf-raio) 0 0 var(--wf-raio); }
  .hi-legenda { margin-left: 0; margin-right: var(--wf-margem); grid-template-columns: 1fr; gap: 6px; }
  .hi-coluna { --hi-regua: 58px; }
  .hi-fig2 { padding-left: 0; flex-wrap: wrap; gap: 4px 12px; }
  .hi-corte::before { display: none; }
  .hi-num { padding-right: 0; text-align: left; }
  .hi-num::after { left: 42px; right: 4px; width: auto; }
  .hi-ano--marco { grid-template-columns: 1fr; }
  .hi-ano--marco .hi-num { padding: 20px 0 14px; font-size: 2.1rem; text-align: left; justify-self: start; }
  .hi-ano--marco .hi-num::after { left: calc(100% + 12px); right: auto; width: 46px; top: calc(20px + .52em); }
  .hi-ano--marco .hi-num::before { display: block; right: auto; left: calc(100% + 56px); top: calc(17px + .52em); }
  .hi-ano--marco .hi-placa { padding: 20px 20px 28px; }
  .hi-lente { grid-template-columns: 1fr; gap: 16px; justify-items: start; }
  .hi-lente-campo { width: 128px; }
  .hi-humano { grid-template-columns: 1fr; }
  .hi-riso { rotate: -1.4deg; margin: 24px 4px 14px; }
}

/* ===== av ===== */
/* av · Avaliações · a pilha de 68 placas e as falas por tema */
.av-h2 { max-width: 17em; }
.av-corpo { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 84px); align-items: start; }

/* ---------- placar ---------- */
.av-nota { margin: 0; display: flex; align-items: flex-end; gap: 18px; }
.av-nota b { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(5rem, 3.4rem + 6vw, 8.4rem); line-height: .8; letter-spacing: -.03em; color: var(--wf-tinta); }
.av-estrelas { display: inline-flex; color: var(--wf-ouro); padding-bottom: 6px; }
.av-estrelas svg { width: 112px; height: 20px; }
.av-conta { margin: 22px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--wf-tinta); }
.av-conta span { display: block; font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.av-todas { margin-top: 6px; }

/* ---------- Fig. 4: a pilha ---------- */
.av-pilha { margin-top: clamp(28px, 4vw, 48px); }
.av-fig { margin: 0 0 20px; font-size: .9375rem; line-height: 1.5; color: var(--wf-tinta-suave); max-width: 22em; }
.av-fig b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.32rem; line-height: 1; color: var(--wf-vinho); margin-right: 10px; white-space: nowrap; }
.av-placas { list-style: none; margin: 0; padding: 0 128px 0 0; display: grid; gap: 2px; max-width: 408px; filter: drop-shadow(0 26px 22px rgb(92 58 40 / .22)); }
.av-p { --cor: #dcc9b6; height: 7px; margin: 0 var(--r, 0px) 0 var(--l, 0px); border-radius: 3px; position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--cor) 55%, #fffaf4), var(--cor));
  box-shadow: 0 -2px 0 -1px color-mix(in oklab, var(--cor) 80%, #5a3a30) inset; }
.av-p--c { height: 10px; margin: 0 -14px 0 -4px; border-radius: 4px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 -3px 0 -1px color-mix(in oklab, var(--cor) 78%, #5a3a30) inset; }
.av-p--e { --cor: var(--wf-epiderme); } .av-p--d { --cor: var(--wf-derme); } .av-p--h { --cor: #e6c66f; }
.av-p--c::before { content: ""; position: absolute; left: 100%; top: 5px; width: 24px; height: 1px; background: color-mix(in oklab, var(--wf-tinta) 55%, transparent); }
.av-p--c::after { content: ""; position: absolute; left: calc(100% - 4px); top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); box-sizing: border-box; }
.av-p span { position: absolute; left: calc(100% + 32px); top: 50%; translate: 0 -50%; white-space: nowrap; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); }

.av-p--sua { height: 10px; margin: 6px -14px 0 -4px; background: none; border: 1.5px dashed color-mix(in oklab, var(--wf-turquesa-funda) 80%, transparent); box-shadow: none; border-radius: 5px; }
.av-p--sua span { color: var(--wf-turquesa-funda); left: calc(100% + 10px); }
.av-p--c { transition: background-color .6s, margin .5s var(--wf-curva), filter .6s; }

/* ---------- as falas ---------- */
.av-falas { display: grid; gap: clamp(48px, 6vw, 84px); }
.av-tema { --cor: var(--wf-epiderme); }
.av-tema--d { --cor: var(--wf-derme); } .av-tema--h { --cor: #e6c66f; }
.av-rotulo { margin: 0 0 clamp(20px, 2.6vw, 32px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); position: relative; }
.av-rotulo::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 72px; height: 7px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in oklab, var(--cor) 55%, #fffaf4), var(--cor)); box-shadow: 0 -2px 0 -1px color-mix(in oklab, var(--cor) 78%, #5a3a30) inset; }
.av-rotulo b { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.1; color: var(--wf-tinta); margin-right: auto; }
.av-rotulo span { font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.av-rotulo i { font-style: normal; font-family: var(--wf-titulo); font-size: 1.5rem; line-height: 1; color: var(--wf-vinho); margin-right: 6px; }

.av-falas blockquote { margin: 0; }
.av-falas footer { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.av-falas footer::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.av-grande p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.8rem, 1.05rem + 2.9vw, 3.5rem); line-height: 1.06; letter-spacing: -.014em; text-wrap: balance; text-indent: -.42em; padding-left: .42em; }
.av-grande:not(.av-grande--placa) { margin-left: -.42em; }
.av-grande:not(.av-grande--placa) footer { margin-left: calc(.42em * 3.2); }
.av-grande footer { margin-top: 18px; }
.av-notas { margin-top: clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 52px); }
.av-nota-p { padding: 18px 0 20px; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 16%, transparent); }
.av-nota-p p { margin: 0; font-size: 1.08rem; line-height: 1.45; font-weight: 600; color: var(--wf-tinta); }
.av-nota-p footer { margin-top: 8px; }

.av-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 28px clamp(24px, 3.4vw, 52px); align-items: start; }
.av-grande--placa { rotate: -1.2deg; padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: calc(clamp(28px, 3.4vw, 44px) + 10px); }
.av-grande--placa p { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.7rem); }
.av-grande--placa footer { color: #4a3b36; }
.av-notas--coluna { margin-top: 0; grid-template-columns: 1fr; }
.av-notas--coluna .av-nota-p:first-child { border-top: 0; padding-top: 4px; }
.av-duo--lugar { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
.av-duo--lugar .av-nota-p { border-top: 0; border-left: 1px solid color-mix(in oklab, var(--wf-tinta) 16%, transparent); padding: 4px 0 4px clamp(18px, 2vw, 28px); }

/* as falas curtas do primeiro tema: placas finas, empilhadas à mão, cada uma com a sua frase */
.av-notas--placas { grid-template-columns: 1fr; gap: 5px; }
.av-notas--placas .av-nota-p { --cor: var(--wf-epiderme); border: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 15px clamp(18px, 2vw, 26px) 20px; border-radius: 10px;
  background: linear-gradient(170deg, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / 0) 50%), linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 26%, #fffaf4), color-mix(in oklab, var(--cor) 52%, #fffaf4));
  box-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 -5px 0 -1px color-mix(in oklab, var(--cor) 82%, #5a3a30) inset, 0 12px 14px -13px rgb(58 42 37 / .5); }
.av-notas--placas .av-nota-p:nth-child(1) { margin: 0 9% 0 0; } .av-notas--placas .av-nota-p:nth-child(2) { margin: 0 2% 0 5%; }
.av-notas--placas .av-nota-p:nth-child(3) { margin: 0 12% 0 2%; } .av-notas--placas .av-nota-p:nth-child(4) { margin: 0 0 0 9%; }
.av-notas--placas .av-nota-p footer { margin-top: 0; color: #4a3b36; }

/* ---------- fecho: a 69ª placa ---------- */
.av-fecho { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 3.4vw, 48px); align-items: center; padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); }
.av-fecho-pilha { width: clamp(150px, 16vw, 220px); display: grid; gap: 3px; filter: drop-shadow(0 22px 16px rgb(92 58 40 / .22)); }
.av-fecho-pilha i { --cor: #dcc9b6; display: block; height: 11px; border-radius: 5px; background: linear-gradient(180deg, color-mix(in oklab, var(--cor) 55%, #fffaf4), var(--cor)); box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 -3px 0 -1px color-mix(in oklab, var(--cor) 78%, #5a3a30) inset; }
.av-fecho-pilha i:nth-child(2) { --cor: #e6c66f; margin: 0 4% 0 2%; } .av-fecho-pilha i:nth-child(3) { --cor: var(--wf-derme); margin: 0 0 0 5%; }
.av-fecho-pilha i:nth-child(4) { --cor: var(--wf-epiderme); margin: 0 6% 0 0; } .av-fecho-pilha i:nth-child(5) { margin: 0 2% 0 3%; }
.av-fecho-pilha .av-fp-nova { height: auto; padding: 8px 0 10px; margin: 0 -3% 20px 3%; rotate: -4deg; background: color-mix(in oklab, var(--wf-turquesa) 9%, #fffaf4); box-shadow: none; border: 1.5px dashed color-mix(in oklab, var(--wf-turquesa-funda) 80%, transparent); border-radius: 10px; text-align: center; }
.av-fp-nova b { font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; color: var(--wf-turquesa-funda); }
.av-fecho-h { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: 10px; text-wrap: balance; }
.av-fecho-h em { font-style: normal; color: var(--wf-vinho); }
.av-fecho-acoes { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }

@media (min-width: 961px) and (min-height: 800px) {
  .av-lado { position: sticky; top: 28px; }
}
@media (min-width: 961px) {
  /* com JS: a placa citada começa clara e acende quando a fala aparece */
  .av-viva .av-p--c:not(.av-on) { --cor: #cdb8a4; margin: 0 0 0 0; }
  .av-viva .av-p--c:not(.av-on) span { color: var(--wf-tinta-suave); font-weight: 600; }
  .av-p--c.av-foco { margin-right: -26px; filter: saturate(1.5) brightness(.94); }
  .av-p--c span { transition: color .4s; }
  .av-p--c.av-foco span { color: var(--wf-vinho); }
}
@media (max-width: 960px) {
  .av-corpo { grid-template-columns: 1fr; }
  .av-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .av-pilha { margin-top: 0; }
}
@media (max-width: 700px) {
  .av-lado { grid-template-columns: 1fr; }
  .av-placas { max-width: 330px; }
  .av-notas, .av-duo, .av-duo--lugar { grid-template-columns: 1fr; }
  .av-grande--placa { rotate: -1deg; margin: 0 2px; }
  .av-notas--coluna .av-nota-p:first-child { border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 16%, transparent); padding-top: 18px; }
  .av-notas--coluna { margin-top: 8px; }
  .av-duo--lugar .av-nota-p { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 16%, transparent); padding: 18px 0 0; }
  .av-grande:not(.av-grande--placa) { margin-left: 0; }
  .av-grande p { text-indent: 0; padding-left: 0; }
  .av-grande:not(.av-grande--placa) footer { margin-left: 0; }
  .av-rotulo b { width: 100%; }
  .av-fecho { grid-template-columns: 1fr; }
  .av-fecho-pilha { width: 170px; margin-top: 10px; }
  .av-p { height: 5px; }
  .av-p--c { height: 9px; }
  .av-p--c::before { top: 4px; } .av-p--c::after { top: 1px; }
  .av-notas--placas .av-nota-p:nth-child(n) { margin-left: 0; margin-right: 0; }
  .av-notas--placas .av-nota-p:nth-child(2n) { margin-left: 10px; margin-right: -4px; }
  .av-notas--placas .av-nota-p:nth-child(2n+1) { margin-right: 10px; margin-left: -4px; }
  .av-fecho-acoes .wf-botao { width: 100%; }
}

/* ===== es ===== */
/* es · #espaco · "A visita" */
/* fotos: cada uma é uma placa com espessura */
.es-foto { margin: 0; }
.es-quadro { position: relative; border-radius: var(--wf-raio); padding-bottom: 10px;
  background: color-mix(in oklab, var(--wf-derme) 80%, #5a3a30); box-shadow: var(--wf-sombra); }
.es-quadro img { display: block; width: 100%; height: auto; border-radius: var(--wf-raio); }
.es-foto--bancada .es-quadro { background: color-mix(in oklab, var(--wf-turquesa) 55%, #2c5a55); }
.es-marca { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wf-branco); border: 1px solid color-mix(in oklab, var(--wf-tinta) 45%, transparent);
  font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); box-shadow: 0 0 0 5px rgb(255 250 244 / .28); }
.es-leg { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--wf-tinta-suave); }
.es-leg b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.05rem; color: var(--wf-vinho); white-space: nowrap; }
.es-leg i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 3px 0 6px; border-radius: 50%; vertical-align: -4px;
  border: 1px solid color-mix(in oklab, var(--wf-tinta) 45%, transparent); background: var(--wf-branco); font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); }

/* cena: título e os três primeiros tempos à esquerda; a foto do atendimento acompanha à direita */
.es-cena { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 7vw, 104px); align-items: start; }
.es-cena .wf-h2 { max-width: 11em; }
.es-abre { margin-top: clamp(18px, 2.4vw, 30px); }
.es-foto--vapor { position: sticky; top: 28px; justify-self: end; width: 100%; max-width: 500px; }

.es-passos { list-style: none; margin: clamp(34px, 4.6vw, 64px) 0 0; padding: 0; display: grid; gap: clamp(26px, 3.4vw, 44px); }
.es-passo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 clamp(14px, 2vw, 24px); align-items: start; margin: 0; }
.es-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--wf-titulo); font-size: 1.35rem; line-height: 1; color: var(--wf-tinta);
  border: 1px solid color-mix(in oklab, var(--wf-tinta) 40%, transparent); background: var(--wf-branco); }
.es-passos .es-passo:nth-child(1) .es-num { background: color-mix(in oklab, var(--wf-epiderme) 45%, var(--wf-branco)); }
.es-passos .es-passo:nth-child(2) .es-num { background: color-mix(in oklab, var(--wf-derme) 55%, var(--wf-branco)); }
.es-passos .es-passo:nth-child(3) .es-num { background: color-mix(in oklab, var(--wf-hipoderme) 65%, var(--wf-branco)); }
.es-passos .es-passo::before { content: ""; position: absolute; left: 21.5px; top: 52px; bottom: calc(-1 * clamp(26px, 3.4vw, 44px) + 8px); width: 1px; background: color-mix(in oklab, var(--wf-tinta) 30%, transparent); }
.es-passo .wf-h3 { padding-top: 7px; }
.es-passo .wf-p { margin-top: 10px; }

.es-fala { margin: 18px 0 0; padding-left: 18px; border-left: 2px solid var(--wf-vinho); }
.es-fala p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; color: var(--wf-tinta); }
.es-fala footer, .es-grande footer { margin-top: 10px; font-size: .875rem; font-weight: 700; color: var(--wf-tinta-suave); }

/* o fim: a fala grande + a bancada */
.es-fim { margin-top: clamp(48px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.es-passo--solto { align-items: center; }
.es-passo--solto .es-num { background: color-mix(in oklab, var(--wf-turquesa) 30%, var(--wf-branco)); }
.es-passo--solto .wf-h3 { padding-top: 0; }
.es-grande { margin: clamp(20px, 3vw, 34px) 0 0; }
.es-grande p { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem); line-height: 1.24; letter-spacing: -.008em; color: var(--wf-tinta); text-wrap: pretty; }
.es-grande mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.es-grande .es-m1 { text-decoration-color: var(--wf-epiderme); }
.es-grande .es-m2 { text-decoration-color: var(--wf-derme); }
.es-grande .es-m3 { text-decoration-color: color-mix(in oklab, var(--wf-hipoderme) 80%, #b8902f); }
.es-eco { margin: clamp(22px, 3vw, 36px) 0 0; padding-top: 18px; max-width: 26em; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); font-size: var(--wf-t-corpo); line-height: 1.55; color: var(--wf-tinta-suave); }
.es-eco q { font-family: var(--wf-titulo); font-size: 1.18em; color: var(--wf-tinta); }
.es-grande footer { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.es-grande footer::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* a maca em corte */
.es-maca { margin-top: clamp(48px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) calc(clamp(24px, 4vw, 56px) + 10px); }
.es-corte { margin: 0; }
.es-corte-palco, .es-corte-cena { position: relative; }
.es-corte-palco svg { display: block; width: 100%; height: auto; overflow: visible; }
.es-espuma, .es-travesseiro { transition: transform 1.2s var(--wf-curva) .4s, opacity .5s ease .4s; }
.wf-js .es-maca:not(.wf-visto) .es-espuma, .wf-js .es-maca:not(.wf-visto) .es-travesseiro { transform: translateY(-46px); opacity: 0; }
.es-rotulos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.es-rot { position: absolute; left: 0; top: var(--y); width: var(--x); height: 0; }
.es-rot::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--wf-tinta) 62%, transparent), color-mix(in oklab, var(--wf-tinta) 38%, transparent)); }
.es-rot::after { content: ""; position: absolute; left: 100%; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -2px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
.es-rot b { position: absolute; left: 0; bottom: 7px; font-family: var(--wf-titulo); font-weight: 400; font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); line-height: 1; white-space: nowrap; color: var(--wf-tinta); }
.es-rot span { position: absolute; left: 0; top: 7px; font-size: .875rem; line-height: 1.2; font-weight: 600; color: var(--wf-tinta-suave); white-space: nowrap; }
.es-rot i { display: none; }
.es-leg-nums { display: none; }
.es-rot--espuma { --y: 43.8%; --x: 57.7%; }
.es-rot--espuma b { color: var(--wf-vinho); }
.es-rot--espuma::after { background: var(--wf-vinho); border-color: var(--wf-vinho); }
.es-rot--trav { --y: 63.8%; --x: 66.3%; }
.es-rot--tampo { --y: 78.9%; --x: 65.4%; }
.es-maca-texto .wf-p { margin-top: 14px; }
.es-fala--maca { margin: 20px 0 6px; }

/* ficha prática + a placa da hora marcada */
.es-pratico { margin-top: clamp(48px, 7vw, 100px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.es-ficha { margin: clamp(18px, 2.4vw, 28px) 0 0; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); }
.es-ficha > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid color-mix(in oklab, var(--wf-tinta) 22%, transparent); }
.es-ficha dt { font-family: var(--wf-titulo); font-size: 1.25rem; line-height: 1.2; color: var(--wf-tinta); }
.es-ficha dd { margin: 0; font-size: var(--wf-t-corpo); line-height: 1.5; color: var(--wf-tinta-suave); }
.es-fonte { margin: 14px 0 0; font-size: .875rem; font-weight: 600; color: var(--wf-tinta-suave); }
.es-hora { display: grid; justify-items: start; gap: 0; }
.es-hora-sobre { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-vinho); }
.es-hora-titulo { margin: 12px 0 24px; font-family: var(--wf-titulo); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.12; color: var(--wf-tinta); text-wrap: balance; }
.es-hora .wf-link { margin-top: 8px; }

@media (max-width: 900px) {
  .es-cena, .es-fim, .es-maca, .es-pratico { grid-template-columns: minmax(0, 1fr); }
  .es-cena { gap: 0; }
  .es-cena-texto { display: contents; }
  .es-cena .wf-sobre { order: 1; } .es-cena .wf-h2 { order: 2; } .es-abre { order: 3; }
  .es-foto--vapor { order: 4; position: static; justify-self: start; max-width: 460px; margin-top: 32px; }
  .es-passos { order: 5; }
  .es-fim .es-foto--bancada { order: 2; }
}
@media (max-width: 560px) {
  .es-ficha > div { grid-template-columns: minmax(0, 1fr); }
  .es-hora .wf-botao { width: 100%; }
  .es-hora .wf-link { justify-self: center; }
  .es-hora-sobre { font-size: .875rem; letter-spacing: .12em; }
  /* a maca no celular: o bloco cresce e os rótulos viram números, como no hero */
  .es-corte-palco { overflow: hidden; aspect-ratio: 320 / 255; }
  .es-corte-cena { position: absolute; left: -62.5%; top: 0; width: 162.5%; margin-top: -32.8%; }
  .es-rot { left: 38.46%; }
  .es-rot--espuma { --x: 19.2%; } .es-rot--trav { --x: 27.9%; } .es-rot--tampo { --x: 26.9%; }
  .es-rot::before { left: 26px; width: calc(100% - 26px); }
  .es-rot i { display: grid; place-items: center; position: absolute; left: 0; top: -12px; width: 24px; height: 24px; border-radius: 50%; font-style: normal;
    background: var(--wf-branco); border: 1px solid color-mix(in oklab, var(--wf-tinta) 45%, transparent); font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); }
  .es-rot b, .es-rot span { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .es-leg-nums { display: inline; }
}

/* ===== pe ===== */
/* pe · #perguntas · "Perguntas": uma pilha de oito placas que desce da epiderme à hipoderme */
.pe-miolo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.pe-lado { position: sticky; top: 36px; }
.pe-secao .wf-h2 em { display: block; }
.pe-abre { margin-top: clamp(18px, 2.4vw, 28px); max-width: 24em; }
.pe-pilha { display: grid; --pe-cobre: 20px; }
.pe-item { position: relative; transition: margin .5s var(--wf-curva); }
.pe-item[open] { margin-bottom: calc(var(--pe-cobre) + 22px); }
/* a cor de cada placa: da epiderme (1) à hipoderme (8) */
.pe-item:nth-child(1) { --cor: var(--wf-epiderme); z-index: 8; }
.pe-item:nth-child(2) { --cor: color-mix(in oklab, var(--wf-epiderme) 62%, var(--wf-derme)); z-index: 7; }
.pe-item:nth-child(3) { --cor: color-mix(in oklab, var(--wf-epiderme) 26%, var(--wf-derme)); z-index: 6; }
.pe-item:nth-child(4) { --cor: var(--wf-derme); z-index: 5; }
.pe-item:nth-child(5) { --cor: color-mix(in oklab, var(--wf-derme) 72%, var(--wf-hipoderme)); z-index: 4; }
.pe-item:nth-child(6) { --cor: color-mix(in oklab, var(--wf-derme) 44%, var(--wf-hipoderme)); z-index: 3; }
.pe-item:nth-child(7) { --cor: color-mix(in oklab, var(--wf-derme) 18%, var(--wf-hipoderme)); z-index: 2; }
.pe-item:nth-child(8) { --cor: var(--wf-hipoderme); z-index: 1; }

/* a tampa: cada placa cobre a faixa de cima da seguinte (--pe-cobre), por isso o respiro de cima é maior */
.pe-tampa { --cor: inherit; position: relative; z-index: 1; list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 0 clamp(12px, 1.6vw, 20px);
  min-height: 88px; margin-bottom: calc(-1 * var(--pe-cobre)); padding: calc(var(--pe-cobre) + 14px) clamp(18px, 2.4vw, 30px) 24px;
  transition: transform .5s var(--wf-curva), box-shadow .5s var(--wf-curva); }
.pe-item:first-child > .pe-tampa, .pe-item[open] + .pe-item > .pe-tampa { min-height: 72px; padding-top: 16px; }
.pe-item > .pe-tampa { box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -10px 0 -1px color-mix(in oklab, var(--cor) 88%, #5a3a30) inset, 0 14px 18px -12px color-mix(in oklab, var(--cor) 45%, #3a2a25); }
.pe-item[open] > .pe-tampa { box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -10px 0 -1px color-mix(in oklab, var(--cor) 88%, #5a3a30) inset, 0 26px 30px -18px color-mix(in oklab, var(--cor) 40%, #3a2a25); }
.pe-tampa::-webkit-details-marker { display: none; }
.pe-tampa:focus-visible { outline-offset: 3px; border-radius: var(--wf-raio); }
.pe-num { font-family: var(--wf-titulo); font-size: 1.5rem; line-height: 1; color: color-mix(in oklab, var(--wf-tinta) 62%, var(--cor)); }
.pe-q { font-family: var(--wf-titulo); font-size: clamp(1.2rem, 1.05rem + .65vw, 1.6rem); line-height: 1.18; color: var(--wf-tinta); text-wrap: balance; }
/* o sinal: duas plaquinhas que se separam quando a pergunta abre */
.pe-sinal { position: relative; width: 30px; height: 22px; justify-self: end; }
.pe-sinal::before, .pe-sinal::after { content: ""; position: absolute; left: 3px; right: 3px; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--wf-tinta) 72%, transparent); transition: transform .45s var(--wf-curva), background-color .3s; }
.pe-sinal::before { top: 5px; }
.pe-sinal::after { top: 12px; }
.pe-item[open] .pe-sinal::before { transform: translateY(-4px); background: var(--wf-vinho); }
.pe-item[open] .pe-sinal::after { transform: translateY(4px); }
@media (hover: hover) { .pe-item:not([open]) > .pe-tampa:hover { transform: translateX(8px); } }
.pe-item[open] > .pe-tampa { transform: translateY(-3px); }

/* a resposta: a folha que fica debaixo da placa, tingida pela cor dela, com um fio que desce do número */
.pe-resp { --pe-p: clamp(18px, 2.4vw, 30px); --pe-m: clamp(10px, 1.6vw, 20px); --pe-g: clamp(12px, 1.6vw, 20px); --pe-y: clamp(18px, 2.2vw, 26px);
  position: relative; margin: 0 var(--pe-m); padding: calc(var(--pe-cobre) + var(--pe-y)) clamp(18px, 2.6vw, 34px) var(--pe-y) calc(var(--pe-p) + 34px + var(--pe-g) - var(--pe-m));
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 16%, var(--wf-branco)), color-mix(in oklab, var(--cor) 7%, var(--wf-branco)) 70%); border-radius: 0 0 18px 18px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cor) 45%, transparent) inset, 0 22px 30px -24px rgb(92 58 40 / .4); }
.pe-resp::before { content: ""; position: absolute; left: calc(var(--pe-p) - var(--pe-m) + 7px); top: 0; width: calc(var(--pe-g) + 13px); height: calc(var(--pe-cobre) + var(--pe-y) + .78em);
  border-left: 1px solid color-mix(in oklab, var(--wf-tinta) 50%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--wf-tinta) 50%, transparent); border-bottom-left-radius: 8px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.pe-resp::after { content: ""; position: absolute; left: calc(var(--pe-p) - var(--pe-m) + 7px + var(--pe-g) + 11px); top: calc(var(--pe-cobre) + var(--pe-y) + .78em - 3px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--wf-vinho); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.pe-resp p { margin: 0; font-size: var(--wf-t-corpo); line-height: 1.6; color: var(--wf-tinta-suave); max-width: 36em; }
.pe-resp p + p { margin-top: 12px; }
.pe-resp .pe-curta { font-family: var(--wf-titulo); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.2; color: var(--wf-vinho); }
.pe-resp .pe-curta + p { margin-top: 8px; }
.pe-resp q { color: var(--wf-tinta); font-weight: 700; }
.pe-resp .wf-link { margin-top: 6px; color: var(--wf-turquesa-funda); }
.pe-tres { list-style: none; counter-reset: pe; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 36em; }
.pe-tres li { counter-increment: pe; position: relative; padding-left: 38px; font-size: var(--wf-t-corpo); line-height: 1.5; color: var(--wf-tinta); font-weight: 600; }
.pe-tres li::before { content: counter(pe); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .875rem; font-weight: 700; line-height: 1; border: 1px solid color-mix(in oklab, var(--wf-tinta) 45%, transparent); background: color-mix(in oklab, var(--wf-hipoderme) 55%, var(--wf-branco)); }

/* a base da pilha: a nona placa é a chamada */
.pe-base { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px clamp(12px, 1.6vw, 20px);
  min-height: 96px; padding: calc(var(--pe-cobre) + 16px) clamp(18px, 2.4vw, 30px) 26px; border-radius: var(--wf-raio); text-decoration: none; color: #fff;
  background: linear-gradient(160deg, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / 0) 42%), var(--wf-turquesa-funda);
  box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 -10px 0 -1px #0a4d47 inset, 0 34px 44px -26px rgb(40 60 50 / .55);
  transition: background-color .3s; }
.pe-item[open] + .pe-base { min-height: 80px; padding-top: 18px; }
.pe-base:hover { background-color: #0b5f57; }
.pe-base:focus-visible { border-radius: var(--wf-raio); }
.pe-base-zap { width: 26px; height: 26px; }
.pe-base-q { font-family: var(--wf-titulo); font-size: clamp(1.2rem, 1.05rem + .65vw, 1.6rem); line-height: 1.18; }
.pe-base-acao { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.pe-base-acao svg { width: 20px; height: 20px; transition: transform .3s var(--wf-curva); }
.pe-base:hover .pe-base-acao svg { transform: translateX(4px); }

/* rótulos de atlas: a pilha é o bloco de pele do hero, deitado em perguntas */
.pe-camada { display: none; }
@media (min-width: 1180px) {
  .pe-camada { display: block; position: absolute; right: 100%; top: 50%; width: 132px; height: 0; margin-right: 3px; pointer-events: none;
    font-family: var(--wf-titulo); font-size: 1.2rem; line-height: 1; color: var(--wf-tinta); }
  .pe-camada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--wf-tinta) 62%, transparent), color-mix(in oklab, var(--wf-tinta) 38%, transparent)); }
  .pe-camada::after { content: ""; position: absolute; right: -8px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
  .pe-miolo { gap: clamp(150px, 12vw, 172px); }
}
.pe-camada-t { position: absolute; left: 0; bottom: 7px; }

/* abre e fecha com altura animada onde o navegador permite */
@supports (interpolate-size: allow-keywords) {
  .pe-item { interpolate-size: allow-keywords; }
  .pe-item::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--wf-curva), content-visibility .55s allow-discrete; }
  .pe-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-item::details-content { transition: none; }
}

@media (max-width: 900px) {
  .pe-miolo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pe-lado { position: static; }
}
@media (max-width: 560px) {
  .pe-tampa { grid-template-columns: 24px minmax(0, 1fr) 30px; }
  .pe-num { font-size: 1.3rem; }
  .pe-resp { padding-left: clamp(18px, 2.6vw, 34px); }
  .pe-resp::before, .pe-resp::after { display: none; }
  .pe-base { grid-template-columns: 24px minmax(0, 1fr); }
  .pe-base-zap { width: 24px; height: 24px; grid-row: span 2; align-self: start; margin-top: 3px; }
  .pe-base-acao { grid-column: 2; min-height: 28px; }
}

/* ===== on ===== */
/* on · Onde fica */
.on-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 88px); }
.on-cabeca { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); min-width: 0; }
.on-intro { margin-top: clamp(16px, 2vw, 24px); max-width: 27em; }

/* cartão do endereço: nome, linha copiável, telefone e botões */
.on-cartao { min-width: 0; }
.on-end { margin-top: 18px; font-style: normal; display: grid; gap: 2px; font-size: var(--wf-t-corpo); line-height: 1.5; color: var(--wf-tinta-suave); }
.on-end b { font-family: var(--wf-titulo); font-weight: 400; font-size: var(--wf-t-h3); line-height: 1.15; color: var(--wf-tinta); margin-bottom: 6px; }
.on-fone { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.on-fone a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--wf-titulo); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1; color: var(--wf-tinta); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .72em) / 0 1px no-repeat; transition: background-size .35s ease; }
.on-fone a:hover, .on-fone a:focus-visible { background-size: 100% 1px; }
.on-acoes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.on-botao2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--wf-tinta) 70%, transparent); color: var(--wf-tinta); font-weight: 700; font-size: 1.02rem; text-decoration: none;
  transition: background-color .3s, color .3s, transform .3s var(--wf-curva); }
.on-botao2 svg { width: 22px; height: 22px; flex: none; }
.on-botao2:hover { background: var(--wf-tinta); color: var(--wf-branco); transform: translateY(-2px); }

/* a prancha: o bloco em corte, com o endereço em rótulos de atlas */
.on-corte { margin: 0; min-width: 0; }
.on-c-quadro { position: relative; }
.on-c-desenho { position: relative; margin: 0 calc(-1 * var(--wf-margem)); overflow: hidden; }
.on-c-palco { position: relative; width: 130%; margin-left: -15%; }
.on-c-pino { display: none; }
.on-c-n:not(.on-c-n3) { transform: translateX(14px); }
.on-c-n.on-c-n3 { background: var(--wf-vinho); border-color: var(--wf-branco); border-width: 2px; color: #fff; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.on-c-svg { display: block; width: 100%; height: auto; overflow: visible; }
.on-c-onda { transform-box: fill-box; transform-origin: center; animation: on-onda 2.8s var(--wf-curva) infinite; }
@keyframes on-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.on-c-n { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border-radius: 50%;
  background: var(--wf-branco); border: 1px solid color-mix(in oklab, var(--wf-tinta) 50%, transparent); font-style: normal; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-tinta); }
.on-c-rotulos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.on-c-rotulos li { display: grid; grid-template-columns: 26px 1fr; gap: 0 12px; align-items: baseline; }
.on-c-rotulos i { grid-row: span 2; align-self: start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--wf-tinta) 50%, transparent); background: var(--wf-branco); font-style: normal; font-size: .875rem; font-weight: 700; line-height: 1; }
.on-c-rotulos b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1.3rem; line-height: 1.15; }
.on-c-rotulos span { font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.on-c-legenda { margin-top: 22px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 18%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 26px; font-size: .875rem; line-height: 1.4; color: var(--wf-tinta-suave); }
.on-c-legenda b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1rem; color: var(--wf-tinta); margin-right: 4px; }
.on-c-coord { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.on-c-troca { margin: 0 0 0 auto; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--wf-tinta); }
.on-c-mapa { border-radius: var(--wf-raio); overflow: hidden; box-shadow: var(--wf-sombra); background: var(--wf-branco); }
.on-c-mapa iframe { display: block; width: 100%; height: clamp(340px, 38vw, 500px); border: 0; }

/* a semana como sete placas: o comprimento de cada uma é o horário do dia */
.on-horario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px clamp(28px, 5vw, 80px); }
.on-h-titulo { margin-bottom: 14px; }
.on-agora { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.1; color: var(--wf-tinta); }
.on-agora b { font-weight: 400; display: block; }
.on-agora span { display: block; margin-top: 6px; font-size: .62em; line-height: 1.25; color: var(--wf-tinta-suave); }
.on-agora.on-aberto b { color: var(--wf-turquesa-funda); }
.on-agora.on-fechado b { color: var(--wf-vinho); }
.on-h-nota { margin: 16px 0 0; }

.on-h-quadro { --on-alt: 46px; --on-vao: 5px; position: relative; min-width: 0; }
.on-eixo { list-style: none; margin: 0 0 16px; padding: 0; position: relative; height: 1.2em; font-size: .875rem; font-weight: 600; color: var(--wf-tinta-suave); }
.on-eixo li { position: absolute; top: 0; transform: translateX(-50%); line-height: 1.2; white-space: nowrap; }
.on-eixo li:nth-child(1) { left: 0; transform: none; } .on-eixo li:nth-child(2) { left: 20%; } .on-eixo li:nth-child(3) { left: 40%; }
.on-eixo li:nth-child(4) { left: 60%; } .on-eixo li:nth-child(5) { left: 80%; } .on-eixo li:nth-child(6) { left: auto; right: 0; transform: none; }
.on-semana { display: block; width: 100%; border-collapse: collapse; position: relative; }
.on-semana tbody { display: grid; gap: var(--on-vao); position: relative; padding: 14px 0 8px;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--wf-tinta) 16%, transparent) 0 1px, transparent 1px 20%) 0 0 / calc(100% - 1px) 100%; }
.on-dia { --cor: var(--wf-derme); display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--on-alt); padding: 0 16px 5px;
  margin-left: calc((var(--a) - 8) * 10%); width: calc((var(--f) - var(--a)) * 10%); border-radius: 12px;
  background: linear-gradient(160deg, rgb(255 255 255 / .5) 0, rgb(255 255 255 / 0) 42%), linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 56%, white), color-mix(in oklab, var(--cor) 88%, white));
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -6px 0 -1px color-mix(in oklab, var(--cor) 86%, #5a3a30) inset, 0 12px 16px -12px color-mix(in oklab, var(--cor) 50%, #3a2a25);
  transition: transform .6s var(--wf-curva), box-shadow .6s var(--wf-curva); }
.on-dia th { padding: 0; text-align: left; font-family: var(--wf-titulo); font-weight: 400; font-size: 1.2rem; line-height: 1; color: var(--wf-tinta); white-space: nowrap; }
.on-dia td { padding: 0; font-size: .9375rem; font-weight: 700; color: var(--wf-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.on-sab { --cor: var(--wf-epiderme); }
.on-dom { background: none; box-shadow: none; padding-bottom: 0; border: 1px dashed color-mix(in oklab, var(--wf-tinta) 34%, transparent); }
.on-dom th, .on-dom td { color: var(--wf-tinta-suave); }

/* hoje e agora (postos pelo JS) */
.on-tag { margin-left: 10px; padding: 3px 9px 4px; border-radius: 999px; background: var(--wf-vinho); color: #fff; font-family: var(--wf-texto); font-size: .875rem; font-weight: 700; line-height: 1; vertical-align: 2px; }
.on-tem-hoje .on-dia:not(.on-hoje):not(.on-dom) { background: linear-gradient(160deg, rgb(255 255 255 / .5) 0, rgb(255 255 255 / 0) 42%), linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 34%, white), color-mix(in oklab, var(--cor) 56%, white)); }
.on-hoje:not(.on-dom) { background: linear-gradient(160deg, rgb(255 255 255 / .45) 0, rgb(255 255 255 / 0) 42%), linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 80%, white), var(--cor));
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -6px 0 -1px color-mix(in oklab, var(--cor) 80%, #5a3a30) inset, 0 22px 26px -16px color-mix(in oklab, var(--cor) 40%, #3a2a25); transform: translateY(-2px); }
.on-hoje.on-dom { border-style: solid; border-color: var(--wf-vinho); }
.on-hoje.on-dom th, .on-hoje.on-dom td { color: var(--wf-tinta); }
.on-marca { position: absolute; z-index: 2; left: calc(var(--agora) * 100%); top: calc(14px + var(--i) * (var(--on-alt) + var(--on-vao)) - 13px); height: 15px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--wf-vinho); pointer-events: none; }
.on-marca::before { content: ""; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--wf-vinho); box-shadow: 0 0 0 2px var(--wf-branco); }
.on-marca::after { content: "agora"; position: absolute; left: 12px; top: -10px; font-style: normal; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--wf-vinho); background: var(--wf-tom-hipo); padding: 2px 4px; border-radius: 4px; }
.on-marca.on-marca-esq::after { left: auto; right: 12px; }

.on-acesso { list-style: none; margin: clamp(6px, 1.4vw, 18px) 0 0; padding: 20px 0 0; border-top: 1px solid color-mix(in oklab, var(--wf-tinta) 18%, transparent); display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: .9375rem; font-weight: 600; color: var(--wf-tinta-suave); }
.on-acesso li { display: flex; align-items: baseline; gap: 10px; }
.on-acesso li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--wf-tinta); background: var(--wf-branco); transform: translateY(-1px); }

@media (min-width: 900px) {
  .on-cabeca { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .on-cartao { padding-top: 9px; }
  /* rótulos de atlas: nome sobre o fio, que entra no desenho e termina num ponto */
  .on-c-quadro { aspect-ratio: 1000 / 460; }
  .on-c-desenho { position: absolute; right: 0; top: 0; width: 60%; height: 100%; margin: 0; overflow: visible; }
  .on-c-palco { width: 100%; height: 100%; margin: 0; }
  .on-c-pino { display: block; }
  .on-c-svg { height: 100%; }
  .on-c-n { display: none; }
  .on-c-rotulos { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
  .on-c-rotulos li { position: absolute; left: 0; top: calc(var(--y) * 100%); width: calc(40% + var(--x) * 60%); height: 0; display: block; }
  .on-c-rotulos li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--wf-tinta) 62%, transparent), color-mix(in oklab, var(--wf-tinta) 38%, transparent)); }
  .on-c-rotulos li::after { content: ""; position: absolute; left: 100%; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--wf-branco); border: 1.5px solid var(--wf-tinta); }
  .on-c-rotulos li.on-r-rua::before { height: 1.5px; top: -.75px; background: var(--wf-tinta); }
  .on-c-rotulos li.on-r-rua::after { display: none; }
  .on-c-rotulos i { display: none; }
  .on-c-rotulos b { position: absolute; left: 0; bottom: 8px; font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); line-height: 1; white-space: nowrap; }
  .on-c-rotulos span { position: absolute; left: 0; top: 9px; line-height: 1.3; white-space: nowrap; }
  .on-horario { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
  .on-acesso { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-width: 899px) {
  .on-acoes > * { flex: 1 1 240px; }
  .on-c-troca { margin-left: 0; width: 100%; }
  .on-eixo li:nth-child(2), .on-eixo li:nth-child(4), .on-eixo li:nth-child(5) { display: none; }
}
@media (max-width: 420px) {
  .on-dia { padding-left: 12px; padding-right: 12px; }
  .on-sab .on-tag, .on-dia .on-tag { margin-left: 6px; }
}
.on-com-mapa .on-c-quadro { aspect-ratio: auto; }
.on-c-rotulos[hidden], .on-c-desenho[hidden] { display: none; }
.on-c-troca[hidden] { display: none; }
.on-secao .wf-sobre { font-size: .875rem; }

/* ===== fe ===== */
/* fe · fecho (escuro). O texto fica todo abaixo da faixa de transição do topo (320 px). */
.fe-secao { --fe-topo: clamp(84px, 8vw, 112px); padding-top: var(--fe-topo); padding-bottom: clamp(44px, 6vw, 88px); overflow: clip; }
.fe-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); }

/* ela diante das três placas assentadas; o modelo sai da pilha */
.fe-figura { --fe-esq: 31%; position: relative; margin: 0 calc(-1 * var(--wf-margem) + 6px) 0 calc(-1 * var(--wf-margem) + 2px); aspect-ratio: 1400 / 1311; }
.fe-figura::before { content: ""; position: absolute; inset: -34% -26% -30% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--wf-derme) 34%, transparent), transparent); }
.fe-pilha { position: absolute; left: var(--fe-esq); right: 0; top: -6%; bottom: 0; display: grid; grid-template-rows: 31fr 41fr 28fr; gap: 5px; }
.fe-placa { --cor: var(--wf-derme); position: relative; display: block; overflow: hidden; border-radius: var(--wf-raio);
  background: linear-gradient(150deg, rgb(255 255 255 / .55) 0, rgb(255 255 255 / 0) 34%), linear-gradient(180deg in oklab, color-mix(in oklab, var(--cor) 70%, white), var(--cor));
  box-shadow: 0 2px 0 rgb(255 255 255 / .75) inset, 0 -13px 0 -1px color-mix(in oklab, var(--cor) 78%, #5a3a30) inset, 0 34px 50px -22px rgb(0 0 0 / .65); }
.fe-placa svg { position: absolute; inset: 0 0 12px 0; width: 100%; height: calc(100% - 12px); }
.fe-placa--epi { --cor: var(--wf-epiderme); } .fe-placa--hipo { --cor: var(--wf-hipoderme); }
.wf-js .fe-placa { transition: transform 1.3s var(--wf-curva) .15s; }
.wf-js .fe-figura:not(.wf-visto) .fe-placa--epi { transform: translate3d(0, -20px, 0); }
.wf-js .fe-figura:not(.wf-visto) .fe-placa--hipo { transform: translate3d(0, 20px, 0); }
.fe-figura img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 20px rgb(60 30 20 / .3));
  clip-path: inset(-10% -10% 0 -10% round 0 0 var(--wf-raio) 0); }
/* a borda de baixo da última placa passa na frente dela: ela está dentro da pilha */
.fe-borda { position: absolute; left: var(--fe-esq); right: 0; bottom: 0; height: 13px; border-radius: 0 0 var(--wf-raio) var(--wf-raio);
  background: color-mix(in oklab, var(--wf-hipoderme) 78%, #5a3a30); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset; }
.wf-js .fe-borda { transition: transform 1.3s var(--wf-curva) .15s; }
.wf-js .fe-figura:not(.wf-visto) .fe-borda { transform: translate3d(0, 20px, 0); }
.fe-legenda { position: absolute; left: var(--fe-esq); top: calc(100% + 18px); right: 0; font-size: .875rem; line-height: 1.4; color: var(--wf-tinta-suave); }
.fe-legenda b { font-family: var(--wf-titulo); font-weight: 400; font-size: 1rem; color: var(--wf-tinta); margin-right: 4px; }
.fe-descida { display: none; }

.fe-texto { margin-top: 34px; position: relative; }
.fe-titulo { font-size: clamp(2.45rem, 1.5rem + 2.7vw, 3.7rem); line-height: 1.05; max-width: 10.5em; }
.fe-apoio { margin-top: clamp(18px, 2.2vw, 26px); max-width: 27em; }
.fe-acoes { margin-top: clamp(24px, 3vw, 36px); display: grid; justify-items: start; gap: 14px; }
.fe-botao { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 68px; padding: 0 36px; border-radius: 999px;
  background: var(--wf-turquesa); color: #0a2623; font-weight: 800; font-size: 1.16rem; text-decoration: none; letter-spacing: .005em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 18px 40px -14px color-mix(in oklab, var(--wf-turquesa) 60%, transparent);
  transition: transform .3s var(--wf-curva), background-color .3s; }
.fe-botao svg { width: 26px; height: 26px; flex: none; }
.fe-botao:hover { background: #55d3c3; transform: translateY(-2px); }
.fe-fone { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.fe-fone span { font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-tinta-suave); line-height: 1.1; }
.fe-fone a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--wf-titulo); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1; color: var(--wf-tinta); text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .72em) / 0 1px no-repeat; transition: background-size .35s ease; }
.fe-fone a:hover, .fe-fone a:focus-visible { background-size: 100% 1px; }
.fe-nota { margin: clamp(20px, 2.4vw, 28px) 0 0; }
.fe-secao .wf-sobre { font-size: .875rem; }

@media (min-width: 900px) {
  .fe-secao { padding-bottom: clamp(84px, 8vw, 116px); }
  .fe-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 0 clamp(20px, 3vw, 48px); }
  .fe-texto { grid-column: 1; grid-row: 1; margin: 0; padding-top: calc(336px - var(--fe-topo)); padding-bottom: clamp(18px, 3vw, 46px); z-index: 1; }
  /* o fio que desce pela faixa de transição e pousa na chamada: a página chegou ao fim da pele */
  .fe-descida { display: block; position: absolute; left: 16px; top: calc(-1 * var(--fe-topo)); height: calc(336px - 26px); width: 1px;
    background: linear-gradient(180deg in oklab, rgb(44 34 32 / 0) 0, rgb(44 34 32 / .55) 22%, rgb(240 185 166 / .8) 100%); }
  .fe-descida::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-tom-noite); border: 1.5px solid #f0b9a6; box-sizing: border-box; }
  .fe-figura { grid-column: 2; grid-row: 1; margin: 6% 0 0 -9%; }
}
@media (max-width: 899px) {
  /* no celular a foto fica mais estreita que a pilha: o rosto e o cabelo dela terminam antes da coluna do botão flutuante de WhatsApp (68 px à direita) */
  .fe-figura { margin-bottom: 46px; aspect-ratio: 1400 / 1180; }
  .fe-figura img { width: 86%; }
  .fe-pilha { top: 0; }
  .fe-legenda { left: calc(var(--wf-margem) - 2px); right: calc(var(--wf-margem) - 6px); }
  .fe-botao { width: 100%; padding: 0 20px; }
}

/* ===== ro ===== */
.ro-rodape { background: var(--wf-tom-noite); color: #e9d8cf; padding: clamp(44px, 6vw, 80px) var(--wf-margem) 110px; position: relative; }
.ro-miolo { max-width: var(--wf-largura); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px clamp(24px, 5vw, 80px); align-items: start; }
.ro-nome { margin: 0; font-family: var(--wf-titulo); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: #fbf1e8; }
.ro-linha { margin: 8px 0 0; font-size: .9375rem; color: #d9c6bd; }
.ro-linha span { white-space: nowrap; color: #fbf1e8; font-weight: 600; }
.ro-end { font-style: normal; font-size: .9375rem; line-height: 1.6; color: #d9c6bd; }
.ro-end b { display: block; color: #fbf1e8; }
.ro-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .9375rem; }
.ro-links a { display: inline-flex; align-items: center; min-height: 44px; color: #fbf1e8; text-decoration: underline; text-decoration-color: rgb(251 241 232 / .35); text-underline-offset: 5px; }
.ro-links a:hover { text-decoration-color: currentColor; }
.ro-camadas { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.ro-camadas li { height: 7px; border-radius: 9px; }
.ro-camadas li:nth-child(1) { background: var(--wf-epiderme); width: 100%; }
.ro-camadas li:nth-child(2) { background: var(--wf-derme); width: 100%; height: 12px; }
.ro-camadas li:nth-child(3) { background: var(--wf-hipoderme); width: 100%; height: 9px; }
.ro-aviso { grid-column: 1 / span 2; margin: 6px 0 0; font-size: .875rem; line-height: 1.5; color: #bfaaa1; max-width: 46em; }
.ro-selo { margin: 6px 0 0; font-size: .875rem; color: #d9c6bd; text-align: right; white-space: nowrap; }
.ro-selo a { color: #fbf1e8; font-weight: 700; text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 820px) {
  .ro-miolo { grid-template-columns: 1fr; }
  .ro-aviso { grid-column: 1; } .ro-selo { text-align: left; }
  .ro-links a { min-height: 48px; } .ro-selo a { min-height: 48px; }
}

/* ===== ajustes ===== */
/* emenda do hero com a primeira seção: o pé do hero volta ao papel */
.d-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg in oklab, transparent, var(--wf-tom-papel)); }
@media (max-width: 820px) { .ro-selo { white-space: normal; } }
/* no celular o botão que acompanha a rolagem é só o ícone, para cobrir menos conteúdo */
@media (max-width: 820px) {
  .wf-zap { width: 56px; height: 56px; min-height: 0; padding: 0; justify-content: center; font-size: 0; gap: 0; right: 12px; bottom: 12px; }
  .wf-zap svg { width: 28px; height: 28px; }
}