/* Base — Dr. Caio Blanch · Instituto Blanch (sistema do hero C) */
:root {
  --parede: #ebe3d6;
  --parede-sombra: #e0d6c6;
  --luz: #fbf5ea;
  --creme: #efe9df;
  --madeira: #d8ae86;
  --madeira-esc: #8f6440;
  --estrela: #a77a4c;
  --linho: #ebe0cd;
  --linho-esc: #cdbb9f;
  --salvia: #c9d7c4;
  --salvia-viva: #8fb59a;
  --floresta: #2c3a2f;
  --floresta-noite: #1f2a22;
  --metal: #1d1d1b;
  --tinta: #25221d;
  --tinta-2: #5d554a;

  /* nomes usados pelo hero C */
  --c-creme: var(--creme); --c-parede: var(--parede); --c-parede-sombra: var(--parede-sombra);
  --c-luz: var(--luz); --c-madeira: var(--madeira); --c-madeira-esc: var(--madeira-esc);
  --c-salvia: var(--salvia); --c-salvia-viva: var(--salvia-viva); --c-metal: var(--metal);
  --c-tinta: var(--tinta); --c-tinta-2: var(--tinta-2); --c-linho: var(--linho);

  --f-tit: "Belleza", "Tenor Sans", "Gill Sans", "Optima", sans-serif; /* Belleza só nos Á É Í Ó Ú maiúsculos: o agudo da Tenor parece grave */
  --f-txt: "Reddit Sans", system-ui, sans-serif;
  --c-f-tit: var(--f-tit); --c-f-txt: var(--f-txt);

  --pad: clamp(20px, 5.5vw, 88px);
  --c-pad: var(--pad);
  --c-raio-btn: 999px;
  --secao: clamp(88px, 12vw, 180px);
  --curva: cubic-bezier(.2,.7,.2,1);
  --sombra-quente: rgb(120 82 44 / .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--parede); color: var(--tinta); font-family: var(--f-txt); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--madeira-esc); outline-offset: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- peças comuns ---------- */
.rotulo {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--f-tit); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta);
}
.rotulo::before { content: ""; width: 28px; height: 1px; background: var(--madeira-esc); opacity: .7; }
.tit {
  margin: 0; font-family: var(--f-tit); font-weight: 400; color: var(--tinta);
  font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance;
}
.tit em { font-style: normal; color: var(--madeira-esc); }
.texto { color: var(--tinta-2); max-width: 34em; font-size: clamp(17px, .95rem + .3vw, 20px); }
/* fundos de seção (ritmo claro/escuro) */
.fundo-noite { background: radial-gradient(in oklab 60% 50% at 85% 0%, #2f4034, transparent), radial-gradient(in oklab 50% 60% at 0% 100%, #263329, transparent), var(--floresta-noite); color: #efe7da; }
.fundo-noite .tit, .fundo-noite .rotulo { color: #f3ece0; }
.fundo-noite .tit em { color: var(--madeira); }
.fundo-noite .texto { color: #c9c2b4; }
.fundo-linho { background: radial-gradient(in oklab 60% 60% at 100% 0%, #f2eadc, transparent), #e3d6c1; }
.metal { /* letreiro em metal preto fosco com sombra curta para baixo-esquerda */
  font-family: var(--f-tit); color: var(--metal);
  filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .38));
}
.painel { /* forma do painel do Instituto: canto esq. quase reto, dir. em quarto de círculo */
  border-radius: calc(var(--pw, 400px) * .05) calc(var(--pw, 400px) * .46) 0 0;
  overflow: hidden;
}
.painel--esq { border-radius: calc(var(--pw, 400px) * .46) calc(var(--pw, 400px) * .05) 0 0; }
.madeira {
  background:
    radial-gradient(in oklab 75% 42% at 84% 0%, rgb(255 244 226 / .55), transparent),
    linear-gradient(to bottom, transparent 55%, rgb(96 60 30 / .22)),
    url("../img/c-madeira.webp") center top / cover, var(--madeira);
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px 15px 22px; border-radius: 999px;
  background: var(--metal); color: #f6f1e8; font-weight: 500; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgb(40 28 15 / .55), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: transform .25s ease, background-color .25s ease;
}
.btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.btn:hover { background: var(--floresta); transform: translateY(-1px); }
.link { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--madeira-esc); padding-bottom: 3px; }
.link:hover { color: var(--madeira-esc); }

/* ---------- revelação na rolagem ---------- */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--curva), transform 1.1s var(--curva); transition-delay: var(--d, 0s); }
.js [data-rev].is-in { opacity: 1; transform: none; }

/* ---------- WhatsApp flutuante ---------- */
.zap {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border-radius: 999px;
  background: var(--metal); color: #f6f1e8; text-decoration: none; font-weight: 500; font-size: 15px;
  box-shadow: 0 14px 30px -12px rgb(30 20 10 / .55);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .5s var(--curva), transform .5s var(--curva), background-color .25s;
}
.zap svg { width: 20px; height: 20px; fill: currentColor; }
.zap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.zap:hover { background: var(--floresta); }
.zap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zap { padding: 15px; }

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

/* granulado único, fixo */
.grao {
  position: fixed; inset: 0; z-index: 60; 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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.c-grao { display: none; }

/* ==== hero ==== */
/* Hero C — "Pensado pra você" · Instituto Blanch */


/* ---------- estrutura ---------- */
.c-hero {
  --h: clamp(640px, 100svh, 1000px);
  --ah: calc(var(--h) * .87);                       /* altura do arco */
  --aw: min(calc(var(--ah) * .64), 40vw);           /* largura do arco */
  --cx: 69vw;                                        /* centro do arco */
  --bleed: calc(var(--h) * .012);
  --ht: .5;                                          /* topo da cabeça, em larguras de arco */
  --sg: 1;                                           /* escala do letreiro */
  --ih: calc((var(--ah) - var(--aw) * var(--ht) + var(--bleed)) / .8167);
  position: relative;
  height: var(--h);
  overflow: clip;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--c-pad) minmax(0, calc(var(--cx) - var(--aw) / 2 - var(--c-pad) - clamp(28px, 3.4vw, 56px))) 1fr;
  grid-template-rows: auto 1fr auto auto 1fr;
}

/* ---------- parede em malha ---------- */
.c-parede {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(in oklab 55% 62% at 80% 0%, var(--c-luz), transparent),
    radial-gradient(in oklab 48% 60% at 0% 6%, var(--c-parede-sombra), transparent),
    radial-gradient(in oklab 44% 52% at 4% 100%, var(--c-salvia), transparent),
    radial-gradient(in oklab 58% 46% at 96% 100%, #e5c9a3, transparent),
    var(--c-parede);
}
.c-mancha { position: absolute; border-radius: 50%; pointer-events: none; }
.c-m1 {
  width: 70vmax; height: 70vmax; left: -22vmax; top: 30%;
  background: radial-gradient(in oklab circle closest-side, rgb(176 202 176 / .38), transparent);
  animation: c-deriva-1 34s ease-in-out infinite alternate;
}
.c-m2 {
  width: 60vmax; height: 60vmax; left: 30%; top: -30vmax;
  background: radial-gradient(in oklab circle closest-side, rgb(255 249 238 / .7), transparent);
  animation: c-deriva-2 28s ease-in-out infinite alternate;
}
@keyframes c-deriva-1 { to { transform: translate(8vmax, -6vmax) scale(1.08); } }
@keyframes c-deriva-2 { to { transform: translate(-10vmax, 5vmax) scale(.94); } }

/* luz do spot sobre a parede (canto superior direito do arco) */
.c-spot {
  position: absolute; z-index: -2; top: 0;
  left: calc(var(--cx) - var(--aw) * .05);
  width: calc(var(--aw) * 1.15);
  height: calc(var(--h) * .78);
  background:
    radial-gradient(in oklab 9% 3.2% at 56% 0%, rgb(255 253 246 / .95), transparent),
    radial-gradient(in oklab 40% 100% at 56% 0%, rgb(255 248 233 / .95), rgb(255 240 215 / .45) 42%, transparent 76%);
  animation: c-acende 1.4s ease-out 1.45s both;
}
/* sol de janela atravessando a parede, muito devagar */
.c-sol-parede {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(104deg, transparent 30%, rgb(255 246 230 / .38) 44%, rgb(255 246 230 / .38) 50%, transparent 64%);
  background-size: 240% 100%;
  animation: c-sol 30s ease-in-out infinite alternate, c-acende 2s ease-out 1.6s both;
}

/* ---------- navegação ---------- */
.c-nav {
  grid-column: 2 / 4; grid-row: 1;
  padding-right: var(--c-pad);
  display: flex; align-items: center; justify-content: space-between;
  padding-top: clamp(18px, 3.2vh, 34px);
  animation: c-surge .8s ease-out .05s both;
}
.c-marca { display: inline-flex; align-items: center; gap: 12px; color: var(--c-metal); text-decoration: none; }
.c-marca-selo { width: 30px; height: 30px; display: block; }
.c-marca-txt { font-family: var(--c-f-tit); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.c-nav-info { font-size: 13px; letter-spacing: .06em; color: var(--c-tinta-2); }

/* ---------- texto ---------- */
.c-texto-topo { grid-column: 2; grid-row: 3; }
.c-texto-base { grid-column: 2; grid-row: 4; }

.c-quem {
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--c-f-tit); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-tinta);
  animation: c-surge .9s ease-out .05s both;
}
.c-sep { width: 28px; height: 1px; background: var(--c-madeira-esc); opacity: .7; }

.c-titulo {
  margin: 0;
  font-family: var(--c-f-tit); font-weight: 400;
  font-size: clamp(2.05rem, 1.05rem + 2.6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--c-tinta);
  text-wrap: balance;
  animation: c-surge 1.1s cubic-bezier(.2,.7,.2,1) .12s both;
}
.c-em-casa { color: var(--c-madeira-esc); }

.c-atrib {
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  font-size: 15px; color: var(--c-tinta-2); letter-spacing: .01em;
  animation: c-surge .9s ease-out .45s both;
}

.c-apoio {
  margin: clamp(22px, 3.6vh, 40px) 0 0;
  max-width: 34em;
  font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.55;
  color: var(--c-tinta-2);
  animation: c-surge .9s ease-out .65s both;
}
.c-acoes {
  margin-top: clamp(20px, 3vh, 30px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  animation: c-surge .9s ease-out .8s both;
}
.c-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px 15px 22px;
  border-radius: var(--c-raio-btn);
  background: var(--c-metal); color: #f6f1e8;
  font-weight: 500; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgb(40 28 15 / .55), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: transform .25s ease, background-color .25s ease;
}
.c-btn svg { width: 19px; height: 19px; fill: currentColor; }
.c-btn:hover { background: #2c3a2f; transform: translateY(-1px); }
.c-link {
  color: var(--c-tinta); font-size: 16px; text-decoration: none;
  border-bottom: 1px solid var(--c-madeira-esc); padding-bottom: 3px;
}
.c-link:hover { color: var(--c-madeira-esc); }
.c-btn:focus-visible, .c-link:focus-visible, .c-marca:focus-visible { outline: 2px solid var(--c-madeira-esc); outline-offset: 4px; }

.c-prova {
  margin: clamp(18px, 2.8vh, 26px) 0 0;
  font-size: 14px; color: var(--c-tinta-2);
  animation: c-surge .9s ease-out .95s both;
}
.c-estrelas { color: #a77a4c; letter-spacing: .12em; margin-right: 6px; font-size: 12px; }

/* ---------- cena: arco, sofá, ele ---------- */
.c-cena {
  margin: 0;
  position: absolute; z-index: -1;
  bottom: 0;
  left: calc(var(--cx) - var(--aw) / 2);
  width: var(--aw);
  height: var(--ah);
}

.c-arco {
  position: absolute; inset: 0;
  border-radius: calc(var(--aw) * .05) calc(var(--aw) * .46) 0 0;
  overflow: hidden;
  background: var(--c-madeira);
  box-shadow:
    calc(var(--aw) * -.06) calc(var(--aw) * .05) calc(var(--aw) * .12) calc(var(--aw) * -.04) rgb(120 82 44 / .32),
    -3px 4px 10px rgb(120 82 44 / .14);
  animation: c-sobe 1.55s cubic-bezier(.62,0,.22,1) .3s both;
}
.c-veio {
  position: absolute; inset: 0;
  background: url("../img/c-madeira.webp") center top / cover;
}
.c-luz-arco {
  position: absolute; inset: 0;
  background:
    radial-gradient(in oklab 75% 42% at 84% 0%, rgb(255 244 226 / .58), transparent),
    linear-gradient(to bottom, transparent 52%, rgb(96 60 30 / .26)),
    linear-gradient(to right, rgb(96 60 30 / .16), transparent 32%);
  box-shadow:
    inset -2px 2px 0 rgb(255 240 218 / .55),
    inset 3px 0 6px rgb(90 55 25 / .18);
  border-radius: inherit;
  animation: c-acende 1.4s ease-out 1.45s both;
}
.c-sol {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 34%,
    rgb(255 236 204 / .30) 44%,
    rgb(255 244 222 / .44) 50%,
    rgb(255 236 204 / .30) 56%,
    transparent 66%);
  background-size: 280% 100%;
  mix-blend-mode: soft-light;
  animation: c-sol 26s ease-in-out infinite alternate;
}
@keyframes c-sol { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.c-letreiro {
  position: absolute; left: 0; right: 0;
  top: calc(var(--aw) * .1 * var(--sg));
  display: flex; flex-direction: column; align-items: center;
  color: var(--c-metal);
  --sx: calc(var(--aw) * -.005);
  --sy: calc(var(--aw) * .007);
}
.c-selo {
  width: calc(var(--aw) * .17 * var(--sg)); height: auto; display: block;
  filter: drop-shadow(var(--sx) var(--sy) calc(var(--aw) * .004) rgb(70 38 12 / .42));
  animation: c-fixa-selo 1s cubic-bezier(.2,.8,.2,1) 1.9s both;
}
.c-letras {
  margin-top: calc(var(--aw) * .045 * var(--sg));
  font-family: var(--c-f-tit);
  font-size: calc(var(--aw) * .063 * var(--sg));
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  display: flex;
}
.c-letras > span {
  display: inline-block;
  filter: drop-shadow(var(--sx) var(--sy) calc(var(--aw) * .003) rgb(70 38 12 / .42));
  animation: c-fixa-letra .7s cubic-bezier(.2,.8,.2,1) calc(2.15s + var(--i, 0) * 38ms) both;
}
.c-letras > .c-esp { width: .32em; }
.c-sub {
  margin-top: calc(var(--aw) * .03 * var(--sg));
  font-family: var(--c-f-tit);
  font-size: calc(var(--aw) * .027 * var(--sg));
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(var(--sx) var(--sy) calc(var(--aw) * .002) rgb(70 38 12 / .38));
  animation: c-fixa-letra .8s ease-out 2.85s both;
}
.c-sub i { font-style: normal; padding: 0 .35em; }

.c-sofa {
  position: absolute;
  left: 50%;
  width: calc(var(--aw) * 1.75);
  height: calc(var(--aw) * .38);
  bottom: calc(var(--h) * -.05);
  transform: translateX(-50%);
  filter: drop-shadow(calc(var(--aw) * -.02) calc(var(--aw) * .012) calc(var(--aw) * .03) rgb(110 76 40 / .28));
  animation: c-sofa 1.2s ease-out 1.25s both;
}

.c-dr {
  position: absolute;
  height: var(--ih); width: auto;
  bottom: calc(-1 * var(--bleed));
  left: calc(50% - var(--ih) * .7778 * .443);
  filter: drop-shadow(calc(var(--aw) * -.025) calc(var(--aw) * .02) calc(var(--aw) * .035) rgb(80 50 22 / .30));
  animation: c-entra 1.3s cubic-bezier(.2,.7,.2,1) 2.75s both;
}

/* granulado único */
.c-grao {
  position: absolute; inset: 0; z-index: 5; 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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- entrada ---------- */
@keyframes c-surge { from { opacity: 0; transform: translateY(14px); } }
@keyframes c-acende { from { opacity: 0; } }
@keyframes c-sobe {
  from { clip-path: inset(100% -40% -40% -40%); }
  to   { clip-path: inset(-40% -40% -40% -40%); }
}
@keyframes c-sofa { from { opacity: 0; transform: translateX(-50%) translateY(10%); } }
@keyframes c-fixa-selo {
  0%   { opacity: 0; transform: translate(calc(var(--aw) * .012), calc(var(--aw) * -.016)) rotate(-14deg) scale(1.04);
         filter: drop-shadow(calc(var(--aw) * -.03) calc(var(--aw) * .04) calc(var(--aw) * .03) rgb(70 38 12 / .2)); }
  55%  { opacity: 1; }
}
@keyframes c-fixa-letra {
  0%   { opacity: 0; transform: translate(calc(var(--aw) * .006), calc(var(--aw) * -.012)) scale(1.05);
         filter: drop-shadow(calc(var(--aw) * -.02) calc(var(--aw) * .03) calc(var(--aw) * .02) rgb(70 38 12 / .15)); }
  60%  { opacity: 1; }
}
@keyframes c-entra { from { opacity: 0; transform: translateY(4%); } }

.c-hero.c-pausa *, .c-hero.c-pausa *::before, .c-hero.c-pausa *::after { animation-play-state: paused !important; }

/* ---------- notebook estreito ---------- */
@media (max-width: 1100px) and (min-width: 821px) {
  .c-hero { --cx: 71vw; --aw: min(calc(var(--ah) * .62), 41vw); }
  .c-nav-info { display: none; }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .c-hero {
    --aw: min(calc(100vw - 32px), 520px);
    --ah: calc(var(--aw) * 1.2);
    --ht: .43;
    --sg: .86;
    --bleed: 0px;
    --h: 100svh;
    height: auto;
    display: flex; flex-direction: column;
    padding: 0 16px 34px;
  }
  .c-nav { padding: 16px 2px 0; }
  .c-nav-info { display: none; }
  .c-marca-txt { font-size: 12px; }
  .c-texto-topo { margin-top: 22px; padding: 0 4px; }
  .c-quem { font-size: 11.5px; letter-spacing: .16em; margin-bottom: 14px; }
  .c-titulo { font-size: clamp(1.75rem, 1rem + 3.6vw, 2.5rem); line-height: 1.12; }
  .c-atrib { font-size: 14px; margin-top: 10px; }
  .c-cena {
    position: relative; left: auto; bottom: auto;
    margin: 20px auto 0;
    clip-path: inset(-50% -50% 0 -50%);
  }
  .c-cena::after {
    content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgb(120 86 50 / .35) 20%, rgb(120 86 50 / .35) 80%, transparent);
  }
  .c-sofa { width: calc(var(--aw) * 1.4); height: calc(var(--aw) * .3); bottom: calc(var(--aw) * -.06); }
  .c-spot { left: 30vw; width: 80vw; height: 70vh; }
  .c-texto-base { padding: 0 4px; }
  .c-apoio { margin-top: 22px; font-size: 15px; }
  .c-acoes { margin-top: 18px; gap: 14px 22px; }
  .c-btn { padding: 14px 22px 14px 18px; font-size: 15.5px; }
  .c-link { font-size: 15px; }
  .c-prova { font-size: 13px; margin-top: 16px; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-hero *, .c-hero *::before, .c-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==== metodo ==== */
/* Método — "O porquê" (escuro). Modo empilhado por padrão (celular, sem JS, movimento reduzido);
   com JS em tela larga a seção vira rolagem fixa: .m-fixo + data-passo 0..5 */
.m-secao {
  --m-creme: #f3ece0;
  --m-creme-2: #cbc3b5;
  --m-acento: #d8ae86;
  --m-p: 0;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* ---------- peças comuns ---------- */
.m-atmos {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("../img/m-atmosfera.webp") center / cover no-repeat;
  opacity: .34;
  -webkit-mask-image: radial-gradient(in oklab 80% 70% at 30% 55%, #000 30%, transparent);
          mask-image: radial-gradient(in oklab 80% 70% at 30% 55%, #000 30%, transparent);
}
.m-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(in oklab 34% 62% at 80% 34%, rgb(255 222 178 / .20), rgb(255 222 178 / .05) 55%, transparent 80%),
    linear-gradient(to bottom, var(--floresta-noite), transparent 18%, transparent 82%, var(--floresta-noite));
}
.m-dr { margin: 0; position: relative; pointer-events: none; }
.m-dr img {
  display: block; width: auto; height: 100%; max-width: none;
  filter: brightness(.88) saturate(.92) drop-shadow(2px -1px 0 rgb(255 222 182 / .55)) drop-shadow(-30px 24px 36px rgb(0 0 0 / .5));
}
.m-dr::after { /* a perna some no escuro do chão */
  content: ""; position: absolute; left: -30%; right: -30%; bottom: -2px; height: 26%;
  background: radial-gradient(in oklab 50% 100% at 50% 100%, var(--floresta-noite) 45%, transparent);
}
/* o "?" gigante em madeira real, na parede atrás dele: o único gesto de madeira da seção */
.m-interroga {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--f-tit); line-height: .8; font-size: min(118svh, 74vw);
  color: transparent;
  background:
    radial-gradient(in oklab 60% 40% at 80% 6%, rgb(255 238 214 / .45), transparent),
    linear-gradient(to bottom, rgb(30 18 8 / 0) 30%, rgb(30 18 8 / .55)),
    url("../img/c-madeira.webp") center / 120% auto, var(--madeira);
  -webkit-background-clip: text; background-clip: text;
  filter: brightness(.62) drop-shadow(-10px 14px 22px rgb(0 0 0 / .45));
  right: 14vw; top: calc(var(--secao) - 4vw);
}
.m-rot { color: var(--m-creme); }
.m-rot::before { background: var(--m-acento); }
.m-tit {
  margin: 22px 0 0; font-family: var(--f-tit); font-weight: 400; color: var(--m-creme);
  font-size: clamp(2.5rem, 1.2rem + 4vw, 5.6rem); line-height: 1.04; letter-spacing: -.016em; text-wrap: balance;
}
.m-tit em { font-style: normal; color: var(--m-acento); }
.m-atrib { margin: 18px 0 0; font-size: 15px; color: var(--m-creme-2); letter-spacing: .02em; }
.m-atrib::before { content: "— "; color: var(--m-acento); }

.m-perguntas { list-style: none; margin: 0; padding: 0; }
.m-q-num {
  display: block; font-family: var(--f-tit); font-size: 14px; letter-spacing: .24em; color: var(--m-acento);
}
.m-q-txt {
  margin: 10px 0 0; font-family: var(--f-tit); font-weight: 400; color: var(--m-creme);
  font-size: clamp(2.3rem, 1rem + 4.4vw, 5.4rem); line-height: 1.04; letter-spacing: -.018em; text-wrap: balance;
}
.m-q-txt em { font-style: normal; color: var(--m-acento); }
.m-pal { display: inline-block; }

.m-conta { display: none; }

.m-depois {
  margin: 0; font-family: var(--f-tit); color: var(--m-creme);
  font-size: clamp(2.3rem, 1rem + 3.9vw, 5rem); line-height: 1.05; letter-spacing: -.016em; text-wrap: balance;
}
.m-depois em { font-style: normal; color: var(--m-acento); }
.m-resposta { margin: clamp(26px, 3vw, 40px) 0 0; padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid rgb(216 174 134 / .6); max-width: 34em; }
.m-resposta blockquote { margin: 0; }
.m-resposta p { margin: 0; font-family: var(--f-tit); font-size: clamp(1.15rem, .9rem + .7vw, 1.55rem); line-height: 1.42; color: #e6dfd2; }
.m-resposta figcaption { margin-top: 14px; font-size: 15px; color: var(--m-creme-2); }
.m-dado { display: flex; align-items: center; gap: 20px; margin: clamp(28px, 3vw, 44px) 0 0; padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid rgb(239 233 223 / .14); max-width: 34em; }
.m-38 { font-family: var(--f-tit); font-size: clamp(3.4rem, 2rem + 3vw, 5.2rem); line-height: .9; color: var(--m-acento); font-variant-numeric: tabular-nums; }
.m-dado-txt { max-width: 15em; font-size: 17px; line-height: 1.45; color: var(--m-creme-2); }

/* ---------- modo empilhado ---------- */
.m-palco {
  position: relative;
  padding: var(--secao) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(56px, 7vw, 110px);
}
.m-cab { grid-column: 1; grid-row: 1; }
.m-perguntas { grid-column: 1; grid-row: 2; display: grid; gap: clamp(40px, 5vw, 72px); }
.m-virada { grid-column: 1; grid-row: 3; }
.m-dr { grid-column: 2; grid-row: 1 / 3; align-self: start; height: min(96svh, 960px); justify-self: center; }

@media (max-width: 899px) {
  .m-palco { grid-template-columns: minmax(0, 1fr); padding-top: clamp(72px, 16vw, 120px); row-gap: 56px; }
  .m-dr { grid-column: 1; grid-row: 1; position: relative; top: auto; height: min(78svh, 640px); margin-bottom: -150px; z-index: -1; }
  .m-cab { grid-row: 2; }
  .m-perguntas { grid-row: 3; }
  .m-virada { grid-row: 4; }
  .m-luz { background:
    radial-gradient(in oklab 70% 40% at 50% 14%, rgb(255 222 178 / .2), transparent 80%),
    linear-gradient(to bottom, transparent 30%, var(--floresta-noite) 44%); }
  .m-dr::after { height: 46%; left: -50vw; right: -50vw; background: linear-gradient(to bottom, transparent, var(--floresta-noite) 80%); }
  .m-interroga { right: -6vw; top: clamp(40px, 9vw, 80px); font-size: min(96vw, 560px); }
  .m-q { position: relative; padding-left: 22px; }
  .m-q-txt { font-size: clamp(2.5rem, 1.2rem + 6vw, 3.6rem); }
  .m-perguntas { gap: 52px; }
  .m-38 { font-size: 4.6rem; }
  .m-q::before { content: ""; position: absolute; left: 0; top: 8px; bottom: -48px; width: 1px; background: linear-gradient(to bottom, var(--m-acento), rgb(216 174 134 / .1)); }
  .m-q:last-child::before { bottom: 0; }
}

/* ---------- modo rolagem fixa ---------- */
.m-secao.m-fixo .m-trilho { height: 560vh; height: 560svh; }
.m-secao.m-fixo [data-rev] { opacity: 1; transform: none; transition: none; }
.m-secao.m-fixo { --m-col: min(1000px, calc(100vw - 50svh - max(var(--pad), 6vw) - var(--pad) - 3vw)); }
.m-secao.m-fixo .m-palco {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; display: block; overflow: hidden;
}
.m-fixo .m-luz { background:
  radial-gradient(in oklab 30% 64% at 79% 30%, rgb(255 222 178 / calc(.12 + var(--m-p) * .16)), rgb(255 222 178 / .04) 56%, transparent 82%),
  linear-gradient(to bottom, var(--floresta-noite), transparent 14%, transparent 86%, var(--floresta-noite)); }
.m-fixo .m-atmos { transform: translateY(calc(var(--m-p) * -6%)) scale(1.1); }
.m-fixo .m-dr {
  position: absolute; top: auto; right: max(var(--pad), 6vw); bottom: -16svh; height: 112svh;
  transform: translateY(calc((1 - var(--m-p)) * 3%));
}
.m-fixo .m-interroga {
  right: calc(max(var(--pad), 6vw) + 12svh); top: 4svh;
  transform: rotate(calc(-4deg + var(--m-p) * 8deg));
  transition: opacity 1s var(--curva), translate 1.4s var(--curva), filter 1.4s var(--curva);
}
.m-fixo[data-passo="0"] .m-interroga { translate: 0 8svh; opacity: .5; filter: brightness(.4) drop-shadow(-4px 6px 10px rgb(0 0 0 / .3)); }
.m-fixo[data-passo="5"] .m-interroga { opacity: .22; }
.m-fixo .m-dr { transition: translate 1.2s var(--curva); }
.m-fixo[data-passo="5"] .m-dr { translate: -2vw 0; }
.m-fixo .m-dr img { filter: brightness(calc(.74 + var(--m-p) * .24)) saturate(.92) drop-shadow(2px -1px 0 rgb(255 222 182 / .55)) drop-shadow(-30px 24px 36px rgb(0 0 0 / .5)); }

/* o título: grande no centro no passo 0, pequeno no alto depois */
.m-fixo .m-cab {
  position: absolute; left: var(--pad); top: 11svh; width: min(50vw, 860px);
  transform: translateY(calc(39svh - 50%));
  transition: transform 1.1s var(--curva), opacity .6s;
}
.m-fixo .m-tit { font-size: clamp(3rem, 5.4vw, 6.6rem); transform-origin: 0 0; transition: transform 1.1s var(--curva); }
.m-fixo .m-atrib { transition: opacity .5s; }
.m-fixo:not([data-passo="0"]) .m-cab { transform: none; }
.m-fixo:not([data-passo="0"]) .m-tit { transform: scale(.38); }
.m-fixo:not([data-passo="0"]) .m-atrib { opacity: 0; }

/* as perguntas, uma por vez */
.m-fixo .m-perguntas {
  position: absolute; left: var(--pad); top: 27svh; bottom: 19svh; width: var(--m-col);
}
.m-fixo .m-q { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--curva), transform .8s var(--curva), visibility 0s .8s; }
.m-fixo .m-q-txt { font-size: clamp(3rem, min(7.2vw, 12svh), 8.6rem); line-height: .98; letter-spacing: -.024em; }
.m-fixo .m-q[data-n="3"] .m-q-txt { font-size: clamp(3rem, 6.4vw, 7.6rem); }
.m-fixo .m-q[data-n="4"] .m-q-txt { font-size: clamp(2.8rem, 5.6vw, 6.8rem); }
.m-fixo .m-q-num { display: none; }
.m-fixo .m-pal { opacity: 0; transform: translateY(.45em); transition: opacity .6s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--i) * 60ms); }
.m-fixo .m-q-num { opacity: 0; transition: opacity .6s; }
.m-fixo[data-passo="1"] .m-q[data-n="1"],
.m-fixo[data-passo="2"] .m-q[data-n="2"],
.m-fixo[data-passo="3"] .m-q[data-n="3"],
.m-fixo[data-passo="4"] .m-q[data-n="4"] { opacity: 1; visibility: visible; transition: opacity .6s var(--curva), transform .8s var(--curva), visibility 0s; }
.m-fixo[data-passo="1"] .m-q[data-n="1"] :is(.m-pal, .m-q-num),
.m-fixo[data-passo="2"] .m-q[data-n="2"] :is(.m-pal, .m-q-num),
.m-fixo[data-passo="3"] .m-q[data-n="3"] :is(.m-pal, .m-q-num),
.m-fixo[data-passo="4"] .m-q[data-n="4"] :is(.m-pal, .m-q-num) { opacity: 1; transform: none; }
.m-fixo .m-q.is-foi { transform: translateY(-7svh); }

/* contador */
.m-fixo .m-conta {
  display: flex; align-items: center; gap: 18px;
  position: absolute; left: var(--pad); bottom: 9svh;
  font-family: var(--f-tit); font-size: 20px; letter-spacing: .12em; color: var(--m-creme-2);
  opacity: 0; transition: opacity .6s;
}
.m-conta-n::before { content: "Pergunta"; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; margin-right: 14px; color: var(--m-acento); vertical-align: 6px; }
.m-conta-i { font-weight: 400; color: var(--m-creme); font-size: 34px; letter-spacing: 0; }
.m-conta-barras { display: flex; gap: 10px; }
.m-conta-barras i { width: 64px; height: 2px; background: rgb(239 233 223 / .2); position: relative; overflow: hidden; }
.m-conta-barras i::after { content: ""; position: absolute; inset: 0; background: var(--m-acento); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva); }
.m-fixo:is([data-passo="1"], [data-passo="2"], [data-passo="3"], [data-passo="4"]) .m-conta { opacity: 1; }
.m-fixo[data-passo="1"] .m-conta-barras i:nth-child(-n+1)::after,
.m-fixo[data-passo="2"] .m-conta-barras i:nth-child(-n+2)::after,
.m-fixo[data-passo="3"] .m-conta-barras i:nth-child(-n+3)::after,
.m-fixo:is([data-passo="4"], [data-passo="5"]) .m-conta-barras i::after { transform: none; }

/* a virada */
.m-fixo .m-depois { font-size: clamp(2.6rem, min(5.6vw, 9.4svh), 6.8rem); }
.m-fixo .m-resposta p { font-size: clamp(1.15rem, min(.8rem + .9vw, 3svh), 1.8rem); }
.m-fixo .m-38 { font-size: clamp(3.6rem, min(7vw, 11svh), 8rem); }
.m-fixo[data-passo="5"] .m-cab { opacity: 0; }
.m-fixo .m-virada {
  position: absolute; left: var(--pad); top: 8svh; bottom: 8svh; width: var(--m-col);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(6svh);
  transition: opacity .8s var(--curva), transform 1s var(--curva), visibility 0s 1s;
}
.m-fixo[data-passo="5"] .m-virada { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--curva) .15s, transform 1s var(--curva) .15s, visibility 0s; }

/* ==== sobre ==== */
/* Sobre — foto do Ikigai sangrando a borda esquerda + linha do tempo com anos em metal */
.s-secao {
  --s-fw: min(54vw, 1040px);         /* largura da foto */
  --s-fh: min(100svh, 1060px);       /* altura da foto */
  --s-ano: clamp(3.4rem, 7.4vw, 8.8rem); /* corpo dos anos */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(in oklab 50% 40% at 100% 0%, var(--luz), transparent),
    radial-gradient(in oklab 40% 50% at 0% 100%, var(--parede-sombra), transparent),
    var(--parede);
  padding-bottom: var(--secao);
}

/* ---------- abertura: foto + texto ---------- */
.s-abre {
  display: grid;
  grid-template-columns: var(--s-fw) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(40px, 5vw, 96px);
  padding-right: var(--pad);
}
.s-foto { margin: 0; position: relative; align-self: stretch; min-height: var(--s-fh); }
.s-moldura {
  --pw: var(--s-fw);
  position: absolute; inset: 0;
  border-top-left-radius: 0;
  box-shadow: 30px 40px 80px -40px var(--sombra-quente);
}
.s-moldura img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%;
  transform: scale(1.06); transition: transform 1.8s var(--curva);
}
.s-moldura::after { /* luz do spot no canto do arco e base mais quente */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(in oklab 50% 30% at 90% 0%, rgb(255 246 230 / .22), transparent),
    linear-gradient(to top, rgb(60 36 16 / .38), transparent 26%);
}
.s-legenda {
  position: absolute; left: var(--pad); bottom: 22px; max-width: 24em;
  font-size: 15px; line-height: 1.4; color: #f6efe3; text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}
.js .s-foto .s-moldura { clip-path: inset(100% -10% -10% -10%); transition: clip-path 1.4s var(--curva); }
.js .s-foto.is-in .s-moldura { clip-path: inset(0 -10% -10% -10%); }
.js .s-foto.is-in .s-moldura img { transform: none; }

.s-texto { padding-block: clamp(40px, 6vw, 96px); max-width: 40em; }
.s-tit { margin-top: 22px; font-size: clamp(2.6rem, 1rem + 4.2vw, 5.6rem); line-height: 1.02; }
.s-fala { margin: clamp(30px, 3.4vw, 48px) 0 0; padding: 0; }
.s-fala p {
  margin: 0; font-family: var(--f-tit); color: var(--tinta);
  font-size: clamp(1.25rem, .9rem + 1vw, 1.85rem); line-height: 1.4; letter-spacing: -.005em;
}
.s-fala footer { margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.s-fala footer::before { content: "— "; color: var(--madeira-esc); }
.s-ikigai { margin-top: clamp(30px, 3.4vw, 48px); padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid rgb(143 100 64 / .3); }
.s-ik-nome {
  margin: 0; font-family: var(--f-tit); font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: var(--metal);
  filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .3));
}
.s-ik-1 { margin: 10px 0 0; font-family: var(--f-tit); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.3rem); color: var(--madeira-esc); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.s-ik-2 { margin: 8px 0 0; font-size: 17px; color: var(--tinta-2); }

/* ---------- linha do tempo: anos de metal em pé numa prateleira de madeira ---------- */
.s-tempo { position: relative; padding: clamp(64px, 7vw, 110px) var(--pad) 0; }
.s-anos {
  --s-tabua: clamp(14px, 1.2vw, 18px);
  list-style: none; margin: clamp(26px, 3vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.s-marco { position: relative; padding-right: clamp(16px, 2vw, 32px); }
.s-ano { /* a prateleira é o fundo de baixo de cada ano: juntas formam uma tábua só, que sangra à direita */
  display: block; font-family: var(--f-tit); color: var(--metal);
  font-size: var(--s-ano); line-height: .9; letter-spacing: -.045em;
  margin-right: calc(-1 * clamp(16px, 2vw, 32px));
  padding: 0 0 calc(var(--s-tabua) + 4px);
  background:
    linear-gradient(to bottom, rgb(255 244 226 / .8), rgb(255 244 226 / 0) 3px) left bottom / 100% var(--s-tabua) no-repeat,
    linear-gradient(to bottom, transparent 35%, rgb(90 56 26 / .38)) left bottom / 100% var(--s-tabua) no-repeat,
    url("../img/s-madeira-h.webp") left bottom / 1400px var(--s-tabua) no-repeat;
  background-origin: border-box;
  filter: drop-shadow(-2px 6px 3px rgb(70 38 12 / .3));
  transition: color .4s var(--curva);
}
.s-marco--hoje .s-ano { margin-right: calc(-1 * var(--pad)); color: var(--madeira-esc); }
/* desktop: uma tábua só, atrás da fileira de anos (subgrid alinha a base de todos) */
@media (min-width: 900px) {
  .s-anos { grid-template-rows: auto auto auto; position: relative; }
  .s-marco { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .s-marco:nth-child(1) { grid-column: 1; } .s-marco:nth-child(2) { grid-column: 2; } .s-marco:nth-child(3) { grid-column: 3; }
  .s-marco:nth-child(4) { grid-column: 4; } .s-marco:nth-child(5) { grid-column: 5; }
  .s-ano { align-self: end; background: none; margin-right: 0; filter: drop-shadow(-2px 6px 3px rgb(70 38 12 / .3)); }
  .s-marco--hoje .s-ano { margin-right: 0; }
  .s-anos::before {
    content: ""; grid-row: 1; grid-column: 1 / -1; align-self: end; z-index: -1;
    height: var(--s-tabua); margin-right: calc(-1 * var(--pad));
    background:
      linear-gradient(to bottom, rgb(255 244 226 / .8), rgb(255 244 226 / 0) 3px),
      linear-gradient(to bottom, transparent 35%, rgb(90 56 26 / .38)),
      url("../img/s-madeira-h.webp") left center / 1500px auto, var(--madeira);
    box-shadow: -4px 14px 20px -10px rgb(90 56 26 / .6), 0 2px 0 rgb(90 56 26 / .22);
    border-radius: 2px 0 0 2px;
    transform-origin: left;
  }
  .js .s-anos::before { transform: scaleX(0); transition: transform 1.6s var(--curva) .1s; }
  .js .s-anos.is-in::before { transform: none; }
  .js .s-ano, .js .s-anos.is-in .s-ano { clip-path: none; }
}
.s-ano-txt { display: inline-block; transform-origin: 10% 100%; transition: transform .5s var(--curva); }
.s-marco:hover .s-ano-txt { transform: translateY(-6px); }
.s-marco:hover .s-ano { color: var(--madeira-esc); }
.s-marco-tit { margin: 26px 0 0; font-family: var(--f-tit); font-weight: 400; font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem); line-height: 1.18; color: var(--tinta); }
.s-marco p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--tinta-2); max-width: 16em; }

.js .s-ano { clip-path: inset(-50% 100% -50% 0); transition: clip-path 1s var(--curva), color .4s var(--curva); transition-delay: calc(.15s + var(--i) * .16s), 0s; }
.js .s-ano-txt { opacity: 0; translate: 0 -22px; rotate: -4deg; transition: opacity .7s var(--curva), translate 1s cubic-bezier(.3,1.5,.5,1), rotate 1s cubic-bezier(.3,1.5,.5,1), transform .5s var(--curva); transition-delay: calc(.55s + var(--i) * .16s), calc(.55s + var(--i) * .16s), calc(.55s + var(--i) * .16s), 0s; }
.js .s-marco :is(.s-marco-tit, p) { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--curva), transform 1.1s var(--curva); transition-delay: calc(.8s + var(--i) * .16s); }
.js .s-anos.is-in .s-ano { clip-path: inset(-50% -2% -50% 0); }
.js .s-anos.is-in .s-ano-txt { opacity: 1; translate: none; rotate: none; }
.js .s-anos.is-in .s-marco :is(.s-marco-tit, p) { opacity: 1; transform: none; }
.js .s-anos[data-rev] { opacity: 1; transform: none; }

/* ---------- celular e tablet estreito ---------- */
@media (max-width: 899px) {
  .s-secao { --s-fw: 100vw; --s-fh: min(86svh, 720px); --s-ano: clamp(3.6rem, 17vw, 5.4rem); }
  .s-abre { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .s-foto { min-height: var(--s-fh); }
  .s-moldura { --pw: 100vw; }
  .s-moldura img { object-position: 50% 22%; }
  .s-texto { padding: 48px var(--pad) 0; }
  .s-anos { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .s-marco { padding-right: 0; }
  .s-ano, .s-marco--hoje .s-ano { margin-right: calc(-1 * var(--pad)); }
  .s-marco-tit { margin-top: 16px; }
}

/* ==== opinioes ==== */
/* Opiniões — "O que os pacientes repetem" (seção escura, verde-floresta) */
.op-secao {
  --op-creme: #efe9df;
  --op-creme-2: #c9c3b6;
  --op-acento: #d8ae86;
  --op-apagado: rgb(239 233 223 / .16);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--floresta-noite);
  color: var(--op-creme);
  padding: var(--secao) var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.op-secao::before { /* foco de luz na parede, atrás dele */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 4%; top: 0; width: 50%; height: 56%;
  background: radial-gradient(in oklab 50% 100% at 55% 0%, rgb(255 240 215 / .17), rgb(255 240 215 / .05) 50%, transparent 78%);
}
.op-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(in oklab 50% 40% at 88% 0%, rgb(216 174 134 / .16), transparent),
    radial-gradient(in oklab 45% 50% at 0% 40%, rgb(143 181 154 / .10), transparent),
    var(--floresta-noite);
}

/* cabeçalho */
.op-cab { grid-column: 1 / 10; grid-row: 1; padding-bottom: clamp(40px, 4.5vw, 64px); }
.op-rotulo { color: var(--op-creme); }
.op-rotulo::before { background: var(--op-acento); }
.op-tit { color: var(--op-creme); margin-top: 22px; }
.op-tit em { color: var(--op-acento); }
.op-apoio { margin: 22px 0 0; max-width: 32em; color: var(--op-creme-2); font-size: 17px; }

/* cena: ele à mesa, o quadro de madeira ao lado */
.op-cena { display: contents; }
.op-retrato {
  grid-column: 1 / 7; grid-row: 1 / 3; align-self: end; justify-self: end;
  width: min(100%, 640px); margin: 0 -84px 0 0; position: relative; z-index: 1;
}
.op-dr { display: block; width: 100%; height: auto; transform: translateY(10%);
  filter: drop-shadow(-18px 14px 26px rgb(0 0 0 / .35)); }
.op-tampo {
  grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 3;
  margin: 0 calc(-1 * var(--pad)); height: clamp(56px, 6vw, 84px);
  background:
    linear-gradient(to bottom, rgb(255 240 218 / .55), rgb(255 240 218 / 0) 3px),
    linear-gradient(to bottom, transparent 18%, rgb(70 42 18 / .42)),
    url("../img/c-madeira.webp") center / cover, var(--madeira);
  box-shadow: 0 18px 40px -10px rgb(0 0 0 / .5);
}
.op-quadro {
  --pw: min(44vw, 640px);
  grid-column: 7 / 13; grid-row: 2; align-self: end; position: relative; z-index: 2;
  padding: clamp(40px, 4.6vw, 72px) clamp(28px, 3.4vw, 54px) clamp(30px, 3vw, 44px);
  color: var(--metal);
  box-shadow: -26px 22px 50px -20px rgb(0 0 0 / .55), inset -2px 2px 0 rgb(255 240 218 / .5);
}
.op-sol {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgb(255 236 204 / .30) 44%, rgb(255 244 222 / .44) 50%, rgb(255 236 204 / .30) 56%, transparent 66%);
  background-size: 280% 100%; mix-blend-mode: soft-light;
  animation: op-sol 28s ease-in-out infinite alternate;
}
@keyframes op-sol { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.op-conta { position: relative; margin: 0 0 26px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px;
  filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .38)); }
.op-n { font-family: var(--f-tit); font-size: clamp(4.2rem, 2.6rem + 4.4vw, 7.6rem); line-height: .86; letter-spacing: -.02em; }
.op-de { font-family: var(--f-tit); font-size: clamp(1.3rem, 1rem + .8vw, 1.9rem); }
.op-diz { flex-basis: 100%; margin-top: 10px; font-family: var(--f-tit); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }

.op-pontos { position: relative; display: grid; grid-template-columns: repeat(19, 1fr); gap: clamp(5px, .7vw, 10px); }
.op-pontos i {
  aspect-ratio: 1; border-radius: 50%;
  background: rgb(96 60 30 / .16);
  box-shadow: inset 1px -1px 1px rgb(255 240 218 / .35), inset -1px 1px 2px rgb(70 38 12 / .35);
  transition: background-color .45s var(--curva), box-shadow .45s var(--curva), transform .45s var(--curva);
  transition-delay: calc(var(--i) * 3ms);
}
.op-pontos i.on {
  background: radial-gradient(circle at 62% 35%, #4a4741, var(--metal) 60%);
  box-shadow: -1px 2px 1px rgb(70 38 12 / .5);
}
.js .op-quadro:not(.is-in) .op-pontos i.on {
  background: rgb(96 60 30 / .16);
  box-shadow: inset 1px -1px 1px rgb(255 240 218 / .35), inset -1px 1px 2px rgb(70 38 12 / .35);
}
.js .op-quadro.is-in .op-pontos i { transition-delay: calc(.5s + var(--i) * 9ms); }
.op-quadro.op-pronto .op-pontos i { transition-delay: calc(var(--i) * 3ms); }
.op-pontos i.cit { outline: 1.5px solid rgb(29 29 27 / .55); outline-offset: 2px; }
.op-pontos i.is-alvo { transform: scale(1.35); outline-color: var(--metal); outline-width: 2px; }
.op-anos { position: relative; display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--f-tit); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #3a2a1b; }

.op-temas { grid-column: 1 / -1; grid-row: 4; margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.op-temas-tit { margin: 0 14px 0 0; font-family: var(--f-tit); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--op-creme-2); }
.op-tema {
  font: inherit; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; color: var(--op-creme);
  border: 1px solid rgb(239 233 223 / .28);
  transition: background-color .3s, color .3s, border-color .3s;
}
.op-tema-n { font-family: var(--f-tit); color: var(--op-acento); }
.op-tema:hover { border-color: var(--op-acento); }
.op-tema[aria-pressed="true"] { background: var(--op-acento); color: var(--metal); border-color: var(--op-acento); }
.op-tema[aria-pressed="true"] .op-tema-n { color: var(--metal); }
.op-tema:focus-visible { outline: 2px solid var(--op-acento); outline-offset: 3px; }

/* abertura: a fala que resume tudo + as notas */
.op-abre {
  grid-column: 1 / -1; grid-row: 5; margin-top: clamp(72px, 9vw, 130px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; align-items: end;
  column-gap: clamp(20px, 3vw, 48px);
}
.op-abre .op-fala--abre { grid-column: 1 / 9; margin: 0; position: relative; }
.op-abre .op-fontes { grid-column: 9 / 13; }

/* falas */
.op-falas {
  grid-column: 1 / -1; grid-row: 6; margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(40px, 4vw, 56px) 0 var(--secao); border-top: 1px solid rgb(239 233 223 / .16);
  columns: 3; column-gap: clamp(24px, 3vw, 48px);
}
.op-fala { margin: 0 0 clamp(28px, 3vw, 44px); break-inside: avoid; }
.op-fala > * { transition: opacity .45s; }
.op-escolheu .op-fala.is-fora:not(.op-fala--abre) > * { opacity: .5; }
.op-fala blockquote { margin: 0; }
.op-fala p { margin: 0; font-family: var(--f-tit); font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.38; color: var(--op-creme); }
.op-fala--abre p { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.22; text-wrap: pretty; }
.op-fala figcaption { margin-top: 12px; font-size: 14px; color: var(--op-creme-2); }
.op-fala figcaption span { padding: 0 4px; opacity: .6; }
.op-num { display: block; margin-bottom: 4px; font-weight: 400; font-family: var(--f-tit); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--op-acento); }
.op-fala mark { background: none; color: inherit; text-decoration: underline 1px transparent; text-underline-offset: .22em; transition: color .4s, text-decoration-color .4s; }
.op-secao[data-tema="atencioso"] mark[data-t="atencioso"],
.op-secao[data-tema="explica"] mark[data-t="explica"],
.op-secao[data-tema="duvidas"] mark[data-t="duvidas"],
.op-secao[data-tema="seguranca"] mark[data-t="seguranca"],
.op-secao[data-tema="humano"] mark[data-t="humano"],
.op-secao[data-tema="familia"] mark[data-t="familia"],
.op-secao[data-tema="calma"] mark[data-t="calma"] { color: var(--op-acento); text-decoration-color: rgb(216 174 134 / .6); }

/* fontes */
.op-fontes {
  padding: 26px 0 4px; border-top: 1px solid var(--op-acento);
  display: flex; flex-direction: column; gap: 24px;
}
.op-notas { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.op-notas dt { font-family: var(--f-tit); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--op-creme-2); }
.op-notas dd { margin: 4px 0 0; font-size: 16px; }
.op-estr { color: var(--op-acento); letter-spacing: .12em; font-size: 12px; margin-right: 6px; }
.op-links { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.op-link { color: var(--op-creme); text-decoration: none; border-bottom: 1px solid var(--op-acento); padding-bottom: 3px; font-size: 16px; }
.op-link:hover { color: var(--op-acento); }
.op-link:focus-visible { outline: 2px solid var(--op-acento); outline-offset: 4px; }

/* notebook estreito */
@media (max-width: 1100px) and (min-width: 821px) {
  .op-retrato { margin-right: -50px; }
  .op-cab { padding-bottom: 36px; }
  .op-falas { columns: 2; }
}

/* celular */
@media (max-width: 820px) {
  .op-secao { display: flex; flex-direction: column; align-items: stretch; padding-left: 20px; padding-right: 20px; }
  .op-cab { padding-bottom: 0; }
  .op-retrato { align-self: flex-end; width: 84%; margin: -24px -20px 0 0; }
  .op-tampo { margin: 0 -20px; height: 46px; }
  .op-quadro { --pw: calc(100vw - 40px); margin-top: 32px; padding: 30px 20px 24px; }
  .op-pontos { gap: 5px; }
  .op-anos span:nth-child(2) { display: none; }
  .op-temas { margin-top: 26px; }
  .op-temas { gap: 8px; }
  .op-temas-tit { flex-basis: 100%; margin-bottom: 4px; }
  .op-tema { font-size: 14px; padding: 7px 12px; }
  .op-abre { display: block; margin-top: 72px; }
  .op-fontes { margin-top: 32px; }
  .op-falas { columns: 1; margin-top: 48px; }
  .op-escolheu .op-fala.is-fora:not(.op-fala--abre) > * { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .op-pontos i { transition: none; }
  .op-sol { animation: none; }
}

@media (max-width: 820px) {
  .op-cab { order: 0; } .op-retrato { order: 1; } .op-tampo { order: 2; } .op-quadro { order: 3; }
  .op-temas { order: 4; } .op-abre { order: 5; } .op-falas { order: 6; }
}

/* ==== cuidados ==== */
/* Cuidados v2 — lista tipográfica grande, faixa de exames em madeira, estilo de vida com a selfie */
.cu-secao {
  --cu-linha: rgb(143 100 64 / .28);
  position: relative; overflow-x: clip;
  padding: var(--secao) 0 0;
}

/* ---------- cabeça ---------- */
.cu-cabeca { padding: 0 var(--pad); }
.cu-tit { margin-top: 22px; font-size: clamp(2.7rem, 1.2rem + 4.8vw, 6.8rem); line-height: 1; max-width: 12em; }

/* ---------- lista de cuidados ---------- */
.cu-consultas { position: relative; padding: 0 var(--pad); margin-top: clamp(56px, 7vw, 110px); }
.cu-grupo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--tinta); }
.cu-grupo-tit { margin: 0; font-family: var(--f-tit); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.cu-dica { margin: 0; font-size: 14px; color: var(--tinta-2); }
.cu-dica-toque { display: none; }

.cu-lista { list-style: none; margin: 0; padding: 0; }
.cu-item { position: relative; }
.cu-bt {
  display: grid; grid-template-columns: clamp(44px, 5vw, 76px) minmax(0, 1fr) auto; align-items: baseline;
  width: 100%; margin: 0; padding: clamp(12px, 1.2vw, 18px) 0; border: 0; border-bottom: 1px solid var(--cu-linha);
  background: none; cursor: pointer; text-align: left; color: var(--tinta-2);
  font-family: var(--f-tit); font-size: clamp(1.75rem, .9rem + 2.2vw, 3.3rem); line-height: 1.06; letter-spacing: -.012em;
  transition: color .35s ease;
}
.cu-bt:focus-visible { outline-offset: -2px; }
.cu-n { font-family: var(--f-txt); font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--madeira-esc); transform: translateY(-.15em); }
.cu-nome { display: block; transition: transform .6s var(--curva); }
.cu-mais { display: none; }
.cu-item.is-on .cu-bt, .cu-bt:hover { color: var(--tinta); }
.cu-item.is-on .cu-nome { transform: translateX(.22em); }
.cu-item.is-on .cu-n { color: var(--tinta); }

.cu-expl-in p { margin: 0; }
.cu-expl-in > p:first-child { font-size: clamp(18px, .95rem + .35vw, 21px); line-height: 1.5; color: var(--tinta); }
.cu-visor .cu-tag { display: grid; gap: 4px; justify-items: start; margin-top: 26px !important; padding: 12px 18px 13px; border-radius: 4px 22px 4px 4px; font-family: var(--f-tit); font-size: 18px; }
.cu-tag {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px !important;
  padding: 7px 16px 7px 12px; border-radius: 999px; background: var(--metal); color: #f3ece0;
  font-size: 15px; box-shadow: 0 10px 20px -12px rgb(40 26 12 / .6);
}
.cu-tag span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tit); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--madeira); }
.cu-tag span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--madeira); box-shadow: 0 0 0 3px rgb(216 174 134 / .2); }

.cu-col { position: relative; }
.cu-marca, .cu-visor { display: none; }
@media (min-width: 980px) {
  .cu-item { display: grid; grid-template-columns: 60% minmax(0, 1fr); column-gap: 6vw; }
  .cu-expl { align-self: center; padding: 14px 0; }
  /* com JS: a explicação vai para o visor fixo ao lado; o texto continua no item para leitores de tela */
  .cu-js .cu-corpo { display: grid; grid-template-columns: 60% minmax(0, 1fr); column-gap: 6vw; align-items: start; }
  .cu-js .cu-item { display: block; }
  .cu-js .cu-expl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .cu-js .cu-marca {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tinta); z-index: 1;
    transform: translateY(var(--cu-y, 0px)); transition: transform .7s var(--curva);
  }
  .cu-js .cu-marca::after { content: ""; position: absolute; right: -7px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--metal); box-shadow: 0 0 0 4px rgb(29 29 27 / .12); }
  .cu-js .cu-visor {
    --pw: 520px;
    display: block; position: sticky; top: 14vh; margin-top: clamp(18px, 2vw, 30px);
    min-height: 430px; padding: clamp(36px, 3.4vw, 54px) clamp(30px, 3vw, 48px) clamp(34px, 3vw, 46px);
    background: radial-gradient(in oklab 80% 60% at 85% 0%, #fffaf1, transparent), var(--luz);
    box-shadow: -22px 34px 60px -34px rgb(120 82 44 / .5), 0 1px 0 rgb(255 255 255 / .8) inset;
  }
  .cu-visor-in { display: flex; flex-direction: column; min-height: 340px; }
  .cu-visor-in.cu-anim { animation: cu-troca .6s var(--curva); }
  @keyframes cu-troca { from { opacity: 0; transform: translateY(12px); } }
  .cu-visor-n {
    font-family: var(--f-tit); font-size: clamp(6rem, 3rem + 5vw, 9.5rem); line-height: .82; letter-spacing: -.03em;
    background: linear-gradient(to bottom, rgb(255 240 220 / .25), rgb(80 45 18 / .25)), url("../img/c-madeira.webp") center / 260% auto, var(--madeira-esc);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .3));
  }
  .cu-visor-nome { margin: auto 0 0; padding-top: 28px; font-family: var(--f-tit); font-size: clamp(1.7rem, 1rem + 1.1vw, 2.3rem); line-height: 1.1; color: var(--tinta); text-wrap: balance; }
  .cu-visor-txt p { margin: 0; }
  .cu-visor-txt > p:first-child { margin-top: 14px; font-size: clamp(18px, .95rem + .35vw, 21px); line-height: 1.5; color: var(--tinta-2); }
  .cu-dica { visibility: hidden; }
  .cu-js .cu-dica { visibility: visible; }
}

@media (max-width: 979.98px) {
  .cu-dica-mouse { display: none; }
  .cu-dica-toque { display: inline; }
  .cu-mais { display: block; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cu-linha); align-self: center; transition: background-color .3s, transform .4s var(--curva); }
  .cu-mais::before, .cu-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--tinta); transition: transform .4s var(--curva); }
  .cu-mais::after { transform: rotate(90deg); }
  .cu-item.is-on .cu-mais { background: var(--metal); border-color: var(--metal); }
  .cu-item.is-on .cu-mais::before, .cu-item.is-on .cu-mais::after { background: #f3ece0; }
  .cu-item.is-on .cu-mais::after { transform: rotate(0); }
  .cu-expl { padding: 6px 0 22px clamp(44px, 5vw, 76px); border-bottom: 1px solid var(--cu-linha); }
  .cu-item .cu-bt { border-bottom-color: transparent; }
  .cu-js .cu-expl { display: grid; grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; }
  .cu-pronto .cu-expl { transition: grid-template-rows .5s var(--curva), padding .5s var(--curva); }
  .cu-js .cu-expl-in { overflow: hidden; min-height: 0; }
  .cu-js .cu-item.is-on .cu-expl { grid-template-rows: 1fr; padding-bottom: 22px; }
  .cu-js .cu-item.is-on .cu-nome { transform: none; }
  .cu-item::before { content: ""; position: absolute; left: calc(-1 * var(--pad)); top: 14px; bottom: 14px; width: 3px; background: var(--metal); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--curva); }
  .cu-item.is-on::before { transform: none; }
  .cu-grupo-cab { flex-wrap: wrap; }
}

/* ---------- faixa de exames: madeira com placas de metal ---------- */
.cu-exames {
  position: relative; margin-top: clamp(80px, 10vw, 150px);
  padding: clamp(52px, 6vw, 92px) var(--pad) clamp(56px, 6.5vw, 100px);
  background:
    radial-gradient(in oklab 55% 70% at 88% 0%, rgb(255 244 226 / .5), transparent),
    linear-gradient(to bottom, rgb(70 42 18 / .18), transparent 18%, transparent 78%, rgb(70 42 18 / .3)),
    url("../img/s-madeira-h.webp") center / cover, var(--madeira);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
}
.cu-exames::after { /* faixa de sol lenta atravessando a madeira */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 246 230 / .28) 45%, transparent 60%) no-repeat;
  background-size: 60% 100%; background-position: -80% 0; animation: cu-sol 28s linear infinite;
}
@keyframes cu-sol { to { background-position: 260% 0; } }
.cu-exames-cab { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 40px; }
.cu-exames-tit { margin: 0; font-weight: 400; font-size: clamp(1.7rem, 1rem + 1.9vw, 2.9rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1.1; }
.cu-exames-sub { margin: 0; font-family: var(--f-tit); font-size: clamp(1.15rem, .9rem + .5vw, 1.5rem); color: var(--tinta); }
.cu-placas { position: relative; z-index: 1; list-style: none; margin: clamp(30px, 3.4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.cu-placa {
  --pw: 210px;
  display: flex; flex-direction: column; min-height: clamp(210px, 16vw, 250px);
  padding: clamp(20px, 1.8vw, 28px) clamp(16px, 1.4vw, 22px) clamp(20px, 1.8vw, 26px);
  border-radius: calc(var(--pw) * .05) calc(var(--pw) * .46) 3px 3px;
  background: linear-gradient(165deg, #34322e, #1d1d1b 46%, #141412);
  color: #f3ece0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), -8px 16px 26px -14px rgb(60 32 10 / .7), 0 2px 3px rgb(40 22 8 / .4);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.cu-placa:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), -10px 26px 34px -16px rgb(60 32 10 / .75), 0 2px 3px rgb(40 22 8 / .4); }
.cu-placa { container-type: inline-size; }
.cu-placa-n { font-family: var(--f-tit); font-size: clamp(1.6rem, 1rem + 1.2vw, 2.4rem); line-height: 1; color: var(--madeira); }
.cu-placa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(200deg, rgb(255 255 255 / .1), transparent 30%); }
.cu-placa { position: relative; }
.cu-placa strong { margin-top: auto; padding-top: 22px; font-family: var(--f-tit); font-weight: 400; font-size: clamp(16px, 11.4cqi, 1.6rem); line-height: 1.12; hyphens: manual; }
.cu-placa-t { margin-top: 10px; font-size: 15px; line-height: 1.45; color: #d6cebf; }
.js .cu-exames .cu-placa { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--curva), transform 1.1s var(--curva), box-shadow .5s; transition-delay: calc(var(--i) * .08s + .15s); }
.js .cu-exames.is-in .cu-placa { opacity: 1; transform: none; }
.js .cu-exames.is-in .cu-placa:hover { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 1100px) { .cu-placas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cu-placas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-placa { --pw: 170px; min-height: 200px; }
}

/* ---------- estilo de vida ---------- */
.cu-vida { display: grid; grid-template-columns: minmax(0, 1fr) 50vw; align-items: center; margin-top: var(--secao); padding-left: var(--pad); padding-bottom: var(--secao); }
.cu-foto { grid-column: 2; grid-row: 1; position: relative; margin: 0; height: min(94svh, 900px); min-height: 640px; }
.cu-foto-in { height: 100%; overflow: hidden; border-radius: 12vw 0 0 0; box-shadow: -18px 30px 50px -30px rgb(80 50 20 / .55); }
.cu-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform-origin: 30% 30%; }
.cu-foto-leg { position: absolute; right: var(--pad); bottom: 22px; padding: 8px 16px; border-radius: 999px; background: rgb(29 29 27 / .72); color: #f3ece0; font-size: 15px; backdrop-filter: blur(6px); }
.js .cu-foto .cu-foto-in { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--curva); }
.js .cu-foto img { transform: scale(1.12); transition: transform 2s var(--curva); }
.js .cu-foto.is-in .cu-foto-in { clip-path: inset(0 0 0 0); }
.js .cu-foto.is-in img { transform: none; }
.js .cu-foto[data-rev] { opacity: 1; transform: none; }

.cu-vida-txt { grid-column: 1; grid-row: 1; padding-right: clamp(32px, 5vw, 80px); }
.cu-frase { margin: 24px 0 0; }
.cu-frase p { margin: 0; font-family: var(--f-tit); font-size: clamp(2.2rem, 1rem + 3.3vw, 4.5rem); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; color: var(--tinta); }
.cu-frase em { font-style: normal; color: var(--madeira-esc); }
.cu-frase footer { margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.cu-temas { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px clamp(24px, 3vw, 48px); }
.cu-temas li { padding-top: 14px; border-top: 1px solid var(--cu-linha); }
.cu-temas { counter-reset: cu-t; }
.cu-temas li { counter-increment: cu-t; }
.cu-temas strong::before { content: "0" counter(cu-t); display: block; margin-bottom: 6px; font-family: var(--f-txt); font-size: 13px; letter-spacing: .14em; color: var(--madeira-esc); }
.cu-temas strong { display: block; font-family: var(--f-tit); font-weight: 400; font-size: clamp(1.6rem, 1rem + 1.15vw, 2.3rem); line-height: 1.1; color: var(--tinta); }
.cu-temas span { display: block; margin-top: 6px; font-size: 17.5px; line-height: 1.45; color: var(--tinta-2); }

@media (max-width: 979.98px) {
  .cu-vida { display: block; padding: 0 0 var(--secao); }
  .cu-foto { height: min(118vw, 620px); min-height: 0; }
  .cu-foto-in { border-radius: 22vw 0 0 0; }
  .cu-foto-leg { right: 16px; bottom: 16px; font-size: 14px; }
  .cu-vida-txt { padding: clamp(36px, 8vw, 60px) var(--pad) 0; }
}
@media (max-width: 359px) { .cu-temas { grid-template-columns: 1fr; } }

/* ==== consulta ==== */
/* Instituto + primeira consulta v2 — foto grande do painel, cinco números enormes, faixa escura, perguntas */
.pc-secao {
  --pc-linha: rgb(143 100 64 / .3);
  position: relative; overflow-x: clip;
  padding: var(--secao) 0 var(--secao);
  background: radial-gradient(in oklab 50% 40% at 100% 0%, var(--luz), transparent), var(--parede);
}

/* ---------- o Instituto: foto grande sangrando à esquerda ---------- */
.pc-instituto { display: grid; grid-template-columns: 48vw minmax(0, 1fr); align-items: center; padding-right: var(--pad); scroll-margin-top: 40px; }
.pc-foto { position: relative; margin: 0; height: min(96svh, 1000px); min-height: 640px; }
.pc-foto-in { --pw: 48vw; height: 100%; border-top-left-radius: 0; box-shadow: 0 40px 70px -40px rgb(90 58 28 / .55); }
.pc-foto-in img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; object-position: 50% 40%; translate: 0 var(--pc-par, 0px); }
.js .pc-foto[data-rev] { opacity: 1; transform: none; }
.js .pc-foto .pc-foto-in { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--curva); }
.js .pc-foto.is-in .pc-foto-in { clip-path: inset(0 0 0 0); }
.js .pc-foto .pc-foto-in img { transform: scale(1.1); transition: transform 2.2s var(--curva); }
.js .pc-foto.is-in .pc-foto-in img { transform: none; }

.pc-mini { position: absolute; right: calc(-1 * clamp(40px, 5vw, 90px)); bottom: clamp(-60px, -4vw, -30px); width: clamp(150px, 13vw, 210px); margin: 0; z-index: 2; }
.pc-mini img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 6px solid var(--luz); border-radius: 4px; box-shadow: -14px 22px 34px -16px rgb(80 50 20 / .55); }
.pc-mini figcaption { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.js .pc-mini { opacity: 0; transform: translateY(26px) rotate(2deg); transition: opacity 1s var(--curva) .9s, transform 1.2s var(--curva) .9s; }
.js .pc-foto.is-in .pc-mini { opacity: 1; transform: rotate(2deg); }

.pc-inst-txt { padding-left: clamp(72px, 9vw, 150px); }
.pc-letreiro {
  position: relative; display: inline-grid; gap: 8px; margin: 0;
  padding: 20px 46px 18px 30px; border-radius: 3px 3px 3px 3px;
  background: linear-gradient(170deg, #34322e, #1d1d1b 55%, #141412); color: #f1e9db;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), -8px 14px 22px -10px rgb(50 30 10 / .55);
  transform: rotate(-1.2deg); transform-origin: left center;
}
.pc-letreiro::before, .pc-letreiro::after { /* parafusos */
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8a857c, #3b3935 70%); box-shadow: 0 1px 0 rgb(255 255 255 / .12);
}
.pc-letreiro::before { left: 11px; } .pc-letreiro::after { right: 14px; }
.pc-let-sala { font-family: var(--f-tit); font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.6rem); line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.pc-let-sub { font-family: var(--f-tit); font-size: clamp(12px, .65rem + .25vw, 14px); letter-spacing: .22em; text-transform: uppercase; color: #cfc6b6; }
.pc-letreiro i { font-style: normal; color: var(--madeira); }
.js .pc-letreiro[data-rev] { transform: translateY(-18px) rotate(-5deg); transition: opacity .9s var(--curva), transform 1.3s cubic-bezier(.3,1.5,.4,1); }
.js .pc-letreiro[data-rev].is-in { transform: rotate(-1.2deg); }
.pc-fala { margin: clamp(30px, 3.4vw, 52px) 0 0; }
.pc-fala p { margin: 0; font-family: var(--f-tit); font-size: clamp(2.2rem, 1rem + 2.8vw, 4.2rem); line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; color: var(--tinta); }
.pc-fala em { font-style: normal; color: var(--madeira-esc); }
.pc-fala footer { margin-top: 18px; font-size: 15px; color: var(--tinta-2); }
.pc-end { margin: clamp(28px, 3vw, 44px) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; font-size: 17px; color: var(--tinta-2); }

/* ---------- a primeira consulta: cinco números enormes ---------- */
.pc-consulta { padding: 0 var(--pad); margin-top: calc(var(--secao) + 30px); }
.pc-cab { display: grid; gap: 22px; }
.pc-tit { max-width: 12em; font-size: clamp(2.7rem, 1.2rem + 4.8vw, 6.8rem); line-height: 1; }
.pc-regua { height: 1px; margin-top: clamp(48px, 5vw, 80px); background: var(--tinta); transform-origin: left; }
.js .pc-regua[data-rev] { opacity: 1; transform: scaleX(0); transition: transform 1.6s var(--curva); }
.js .pc-regua[data-rev].is-in { transform: none; }
.pc-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); }
.pc-passo { position: relative; padding-top: clamp(22px, 2vw, 32px); }
.pc-passo::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--metal); }
.pc-num { display: block; overflow: hidden; padding: 0 .06em .04em 0; margin-bottom: 18px; }
.pc-num-in {
  display: block; font-family: var(--f-tit); font-size: clamp(5.6rem, 2rem + 6.4vw, 10rem); line-height: .86; letter-spacing: -.04em;
  background: linear-gradient(to bottom, rgb(255 240 220 / .2), rgb(80 45 18 / .28)), url("../img/c-madeira.webp") center / 300% auto, var(--madeira-esc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .pc-passo .pc-num-in { transform: translateY(105%); transition: transform 1.2s var(--curva); transition-delay: calc(var(--d, 0s) + .15s); }
.js .pc-passo.is-in .pc-num-in { transform: none; }
.pc-h3 { margin: 0; font-family: var(--f-tit); font-weight: 400; font-size: clamp(1.3rem, 1rem + .6vw, 1.7rem); line-height: 1.15; color: var(--tinta); text-wrap: balance; }
.pc-passo p { margin: 12px 0 0; font-size: 17.5px; line-height: 1.5; color: var(--tinta-2); max-width: 22em; }
.pc-passo .pc-cita { font-family: var(--f-tit); font-size: 19px; line-height: 1.4; color: var(--madeira-esc); }
.pc-passo { transition: transform .5s var(--curva); }
.pc-passo::before { transition: transform .5s var(--curva), background-color .3s; }
.pc-passo:hover::before { transform: scale(1.6); background: var(--madeira-esc); }

@media (max-width: 1100px) and (min-width: 700px) {
  .pc-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
}

/* ---------- faixa escura: atendimento ---------- */
.pc-atend {
  margin-top: var(--secao);
  background: radial-gradient(in oklab 50% 90% at 92% 0%, #34463a, transparent), radial-gradient(in oklab 40% 80% at 0% 100%, #263329, transparent), var(--floresta-noite);
  color: #efe7da;
}
.pc-atend-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 28px clamp(32px, 5vw, 90px); padding: clamp(48px, 5vw, 76px) var(--pad); }
.pc-atend-rot { grid-column: 1 / -1; margin: 0; font-family: var(--f-tit); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--madeira); }
.pc-modos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.pc-modos li { font-family: var(--f-tit); font-size: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); line-height: 1.15; color: #f6efe3; }
.pc-modos li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--madeira); }
.pc-atend-acao { display: grid; justify-items: start; gap: 16px; }
.pc-fone { margin: 0; display: grid; gap: 4px; font-family: var(--f-tit); font-size: clamp(1.5rem, 1rem + 1vw, 2.1rem); line-height: 1.1; color: #f6efe3; }
.pc-fone span { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--madeira); }
.pc-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px 16px 22px; border-radius: 999px;
  background: var(--creme); color: var(--metal); font-weight: 600; font-size: 17px; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); transition: transform .25s ease, background-color .25s ease;
}
.pc-btn svg { width: 20px; height: 20px; fill: currentColor; }
.pc-btn:hover { background: #fff; transform: translateY(-2px); }
.pc-btn:focus-visible { outline-color: var(--madeira); }
.pc-nota { margin: 0; max-width: 30em; font-size: 15.5px; line-height: 1.5; color: #c9c2b4; }
.pc-nota a { color: #f3ece0; text-underline-offset: 3px; }

/* ---------- perguntas frequentes ---------- */
.pc-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 110px); align-items: start; padding: 0 var(--pad); margin-top: var(--secao); }
.pc-faq-cab { position: sticky; top: 14vh; }
.pc-faq-tit { margin: 18px 0 0; font-family: var(--f-tit); font-weight: 400; font-size: clamp(3rem, 1.4rem + 5vw, 7rem); line-height: .98; letter-spacing: -.02em; color: var(--tinta); }
.pc-faq-tit em { font-style: normal; color: var(--madeira-esc); }
.pc-lista { border-top: 1px solid var(--tinta); interpolate-size: allow-keywords; }
.pc-q { border-bottom: 1px solid var(--pc-linha); }
.pc-q summary {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; align-items: center; gap: 12px;
  padding: clamp(20px, 2vw, 30px) 0; cursor: pointer; list-style: none;
}
.pc-q summary::-webkit-details-marker { display: none; }
.pc-q-n { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--madeira-esc); }
.pc-q-t { font-family: var(--f-tit); font-size: clamp(1.3rem, 1rem + .9vw, 2rem); line-height: 1.15; color: var(--tinta); transition: transform .5s var(--curva); }
.pc-q summary:hover .pc-q-t { transform: translateX(6px); }
.pc-q summary { transition: background-color .3s; border-radius: 4px; }
.pc-q summary:hover { background: linear-gradient(to right, rgb(251 245 234 / .9), rgb(251 245 234 / 0)); }
.pc-q-i { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pc-linha); transition: background-color .3s, border-color .3s; }
.pc-q-i::before, .pc-q-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--tinta); transition: transform .45s var(--curva); }
.pc-q-i::after { transform: rotate(90deg); }
.pc-q[open] .pc-q-i { background: var(--metal); border-color: var(--metal); }
.pc-q[open] .pc-q-i::before, .pc-q[open] .pc-q-i::after { background: #f3ece0; }
.pc-q[open] .pc-q-i::after { transform: rotate(0); }
.pc-r { padding: 0 52px 28px 60px; }
.pc-r p { margin: 0; font-size: clamp(17px, .95rem + .3vw, 20px); line-height: 1.55; color: var(--tinta-2); max-width: 32em; }
.pc-q::details-content { height: 0; overflow: clip; transition: height .5s var(--curva), content-visibility .5s allow-discrete; }
.pc-q[open]::details-content { height: auto; }

/* ---------- celular e tablet ---------- */
@media (max-width: 979.98px) {
  .pc-instituto { display: block; padding: 0; }
  .pc-foto { height: min(125vw, 680px); min-height: 0; margin-right: var(--pad); }
  .pc-foto-in { --pw: 90vw; }
  .pc-mini { right: calc(-1 * var(--pad) + 14px); bottom: -48px; width: 34vw; max-width: 200px; }
  .pc-mini figcaption { display: none; }
  .pc-inst-txt { padding: 76px var(--pad) 0; }
  .pc-atend-in { grid-template-columns: 1fr; }
  .pc-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .pc-modos li:not(:last-child)::after { content: none; }
  .pc-modos li { font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); padding-left: 16px; position: relative; }
  .pc-modos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--madeira); }
  .pc-faq { grid-template-columns: 1fr; }
  .pc-faq-cab { position: static; }
}
@media (max-width: 699.98px) {
  .pc-passos { grid-template-columns: 1fr; }
  .pc-passo { display: grid; grid-template-columns: clamp(78px, 24vw, 110px) minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; border-bottom: 1px solid var(--pc-linha); }
  .pc-passo::before { display: none; }
  .pc-num { grid-row: 1 / span 2; margin: 0; }
  .pc-num-in { font-size: clamp(5rem, 22vw, 6.5rem); }
  .pc-h3 { align-self: end; }
  .pc-q summary { grid-template-columns: 34px minmax(0, 1fr) 36px; gap: 8px; }
  .pc-q-i { width: 36px; height: 36px; }
  .pc-r { padding: 0 0 24px 42px; }
}

/* ==== contato ==== */
/* Contato — "Onde fica": o mapa num painel, a placa da sala, e o sofá que fecha o site */
.ct-secao {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: var(--secao) var(--pad) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  background: var(--parede);
}
.ct-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(in oklab 40% 30% at 82% 0%, var(--luz), transparent),
    radial-gradient(in oklab 46% 40% at 50% 100%, rgb(255 246 230 / .8), transparent),
    radial-gradient(in oklab 40% 50% at 0% 70%, rgb(201 215 196 / .45), transparent);
}

/* cabeçalho */
.ct-cab { grid-column: 1 / 8; grid-row: 1; padding-bottom: clamp(36px, 4vw, 60px); }
.ct-tit { margin-top: 22px; }

/* o lugar: mapa dentro da moldura-painel, placa da sala presa no canto */
.ct-lugar { grid-column: 1 / 8; grid-row: 2; width: 100%; position: relative; container-type: inline-size; align-self: start; }
.ct-moldura {
  --pw: 100cqw;
  padding: clamp(8px, 1vw, 12px);
  border-radius: calc(var(--pw) * .04) calc(var(--pw) * .36) 0 0;
  background:
    radial-gradient(in oklab 60% 40% at 88% 0%, rgb(255 244 226 / .6), transparent),
    linear-gradient(to bottom, transparent 50%, rgb(96 60 30 / .24)),
    url("../img/c-madeira.webp") center top / cover, var(--madeira);
  box-shadow: -26px 24px 46px -22px var(--sombra-quente), -3px 4px 10px rgb(120 82 44 / .14), inset -2px 2px 0 rgb(255 240 218 / .5);
}
.ct-mapa {
  height: clamp(380px, 38vw, 560px);
  overflow: hidden;
  /* clip-path (e não só border-radius): o iframe composto escapa do raio e deixa canto preto */
  clip-path: inset(0 round calc(var(--pw) * .03) calc(var(--pw) * .34) 0 0);
  background: var(--parede-sombra);
}
.ct-mapa iframe {
  display: block; width: 100%; border: 0;
  height: calc(100% + 140px); margin-top: -140px; /* recorta a ficha do topo */
  filter: saturate(.55) sepia(.14) contrast(.97);
}
.ct-placa {
  position: absolute; left: clamp(-36px, -2.4vw, -16px); bottom: clamp(-44px, -3vw, -24px);
  width: clamp(200px, 19vw, 260px);
  padding: 28px 18px 24px;
  border-radius: 10px 46% 0 0 / 10px 34% 0 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background:
    radial-gradient(in oklab 75% 42% at 84% 0%, rgb(255 244 226 / .6), transparent),
    linear-gradient(to bottom, transparent 55%, rgb(96 60 30 / .24)),
    url("../img/c-madeira.webp") center / cover, var(--madeira);
  box-shadow: -18px 18px 34px -14px rgb(90 58 28 / .45), inset -1px 1px 0 rgb(255 240 218 / .55);
  color: var(--metal);
}
.ct-placa p { margin: 0; font-family: var(--f-tit); text-transform: uppercase; filter: drop-shadow(-1px 1.5px .8px rgb(70 38 12 / .4)); }
.ct-selo { width: 40px; height: 40px; filter: drop-shadow(-1px 1.5px .8px rgb(70 38 12 / .4)); }
.ct-sala { margin-top: 14px !important; font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); letter-spacing: .14em; }
.ct-pl { margin-top: 6px !important; font-size: 11px; letter-spacing: .2em; }

/* informações: o número é o letreiro */
.ct-info { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; padding-top: 6px; }
.ct-chamada { margin: 0; font-family: var(--f-tit); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.ct-fone {
  display: inline-block; margin-top: 12px;
  font-family: var(--f-tit); font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: .01em;
  color: var(--metal); text-decoration: none; white-space: nowrap;
}
.ct-fone:hover { color: var(--madeira-esc); }
.ct-btn { margin-top: 22px; }
.ct-modos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; color: var(--tinta-2); font-size: 16px; }
.ct-modos li { padding-left: 22px; position: relative; }
.ct-modos li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--madeira-esc); }
.ct-modos b { font-weight: 500; color: var(--tinta); }
.ct-dados { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid rgb(143 100 64 / .28); display: grid; gap: 18px; }
.ct-dados dt { font-family: var(--f-tit); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.ct-dados dd { margin: 6px 0 0; color: var(--tinta); font-size: 16px; line-height: 1.55; }
.ct-rotas { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 26px 0 0; font-size: 16px; }

/* fecho: o letreiro na parede e o sofá curvo do hero */
.ct-fim {
  grid-column: 1 / -1; grid-row: 3; margin: clamp(120px, 13vw, 200px) calc(-1 * var(--pad)) 0;
  padding-top: clamp(70px, 8vw, 120px);
  text-align: center; position: relative; isolation: isolate;
}
.ct-fim::before { /* o spot no alto, como no hero: cone de luz morna na parede */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; transform: translateX(-50%);
  width: min(1100px, 100%); height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%);
          mask-image: linear-gradient(to bottom, transparent, #000 34%);
  background:
    radial-gradient(in oklab 6% 3% at 50% 0%, rgb(255 253 246 / .95), transparent),
    radial-gradient(in oklab 42% 92% at 50% 0%, rgb(255 248 233 / .9), rgb(255 240 215 / .4) 46%, transparent 78%);
}
.ct-fim::after { /* sombra de contato do sofá no chão */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: min(900px, 86%); height: 40px; pointer-events: none;
  background: radial-gradient(in oklab closest-side, rgb(90 58 28 / .32), transparent);
}
.ct-selo-fim { display: block; margin: 0 auto 26px; width: clamp(48px, 4.4vw, 64px); height: auto; filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .4)); }
.ct-fecho {
  margin: 0 auto; max-width: 20em;
  font-family: var(--f-tit); font-size: clamp(1.6rem, 1rem + 2vw, 3rem); line-height: 1.18; letter-spacing: -.005em;
  color: var(--metal); text-wrap: balance;
  filter: drop-shadow(-1px 2px 1px rgb(70 38 12 / .26));
}
.ct-fecho em { font-style: normal; color: var(--madeira-esc); }
.ct-sofa {
  display: block; margin: clamp(48px, 5vw, 76px) auto 0;
  width: min(84%, 920px); height: clamp(96px, 11vw, 168px);
  filter: drop-shadow(-16px 10px 18px rgb(110 76 40 / .26));
}

/* letreiro fixado letra a letra (JS) */
.ct-w { display: inline-block; white-space: nowrap; }
.ct-l { display: inline-block; }
.js .ct-fim .ct-l { opacity: 0; }
.js .ct-fim.is-in .ct-l { animation: ct-fixa .7s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i, 0) * 26ms) both; }
@keyframes ct-fixa {
  0% { opacity: 0; transform: translate(4px, -8px) scale(1.05); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.js .ct-fim .ct-selo-fim { opacity: 0; }
.js .ct-fim.is-in .ct-selo-fim { animation: ct-fixa-selo 1s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes ct-fixa-selo { 0% { opacity: 0; transform: translate(6px, -10px) rotate(-14deg) scale(1.05); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.js .ct-fim .ct-sofa { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--curva) .2s, transform 1.2s var(--curva) .2s; }
.js .ct-fim.is-in .ct-sofa { opacity: 1; transform: none; }

/* notebook estreito */
@media (max-width: 1100px) and (min-width: 821px) {
  .ct-cab, .ct-lugar { grid-column: 1 / 8; }
  .ct-info { grid-column: 8 / 13; }
}

/* celular */
@media (max-width: 820px) {
  .ct-secao { display: flex; flex-direction: column; }
  .ct-cab { padding-bottom: 26px; }
  .ct-info { order: 2; }
  .ct-lugar { order: 3; }
  .ct-fim { order: 4; margin-top: 96px; }
  .ct-mapa { height: 360px; }
  .ct-lugar { margin-top: 84px; }
  .ct-placa { left: -6px; right: auto; top: -46px; bottom: auto; width: auto; padding: 18px 22px 16px; }
  .ct-selo { width: 30px; height: 30px; }
  .ct-sala { margin-top: 10px !important; }
  .ct-pl { white-space: nowrap; letter-spacing: .12em; }
  .ct-mapa iframe { height: calc(100% + 120px); margin-top: -120px; }
  .ct-sala { font-size: 1.2rem; }
  .ct-pl { font-size: 10px; letter-spacing: .16em; }
  .ct-fone { font-size: 2rem; }
  .ct-fim { margin-left: -20px; margin-right: -20px; padding: 64px 20px 0; }
  .ct-sofa { width: 118%; margin-left: -9%; height: 112px; }
  .ct-fim::after { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ct-fim .ct-l, .js .ct-fim .ct-sofa, .js .ct-fim .ct-selo-fim { opacity: 1; transform: none; animation: none; }
}

/* ==== rodape ==== */
/* Rodapé — a tábua de madeira onde o sofá do contato assenta; verde-floresta embaixo */
.rd-rodape {
  --rd-creme: #efe9df;
  --rd-creme-2: #c9c3b6;
  --rd-acento: #d8ae86;
  position: relative; isolation: isolate;
  background:
    radial-gradient(in oklab 50% 60% at 85% 0%, rgb(216 174 134 / .10), transparent),
    var(--floresta-noite);
  color: var(--rd-creme);
  font-size: 15px; line-height: 1.6;
}
.rd-rodape p { margin: 0; }
.rd-tabua {
  height: clamp(18px, 1.8vw, 26px);
  background:
    linear-gradient(to bottom, rgb(255 240 218 / .6), rgb(255 240 218 / 0) 3px),
    linear-gradient(to bottom, transparent 30%, rgb(70 42 18 / .45)),
    url("../img/s-madeira-h.webp") center / cover, var(--madeira);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45);
}

.rd-corpo {
  padding: clamp(64px, 7vw, 104px) var(--pad) clamp(48px, 5vw, 72px);
  display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr 1fr; gap: 40px clamp(24px, 3vw, 48px);
}
.rd-marca { display: flex; flex-direction: column; gap: 18px; }
.rd-selo {
  display: block; width: 56px; height: 56px;
  background: var(--rd-creme);
  -webkit-mask: url("../img/selo-blanch.svg") center / contain no-repeat;
          mask: url("../img/selo-blanch.svg") center / contain no-repeat;
}
.rd-nome { font-family: var(--f-tit); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; }
.rd-sub { margin-top: 6px !important; font-family: var(--f-tit); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-creme-2); }
.rd-sub i { font-style: normal; padding: 0 .3em; color: var(--rd-acento); }

.rd-tag { margin-bottom: 14px !important; font-family: var(--f-tit); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--rd-acento); }
.rd-bloco { color: var(--rd-creme-2); }
.rd-dr { font-family: var(--f-tit); font-size: 1.2rem; line-height: 1.35; color: var(--rd-creme); }
.rd-crm { display: block; margin-top: 4px; font-family: var(--f-txt); font-size: 14px; letter-spacing: .04em; color: var(--rd-creme-2); }
.rd-crm > span { display: none; }
.rd-area { margin-top: 14px !important; max-width: 17em; font-size: 14px; }
.rd-zap {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgb(216 174 134 / .55); color: var(--rd-creme); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background-color .25s, color .25s, border-color .25s;
}
.rd-zap:hover { background: var(--rd-acento); border-color: var(--rd-acento); color: var(--floresta-noite); }
.rd-nw { white-space: nowrap; }
.rd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-lista a { color: var(--rd-creme); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.rd-lista a:hover { color: var(--rd-acento); border-bottom-color: currentColor; }
.rd-rodape a:focus-visible { outline: 2px solid var(--rd-acento); outline-offset: 3px; }

.rd-base {
  margin: 0 var(--pad); padding: 22px 0 84px;
  border-top: 1px solid rgb(239 233 223 / .14);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px;
  font-size: 13px; color: var(--rd-creme-2);
}
.rd-legal { flex: 1 1 auto; }
.rd-webforge a {
  color: var(--rd-creme); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--rd-acento); padding-bottom: 1px;
}
.rd-webforge a:hover { color: var(--rd-acento); }

@media (max-width: 1100px) {
  .rd-corpo { grid-template-columns: 1fr 1fr 1fr; }
  .rd-marca { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
  .rd-zap { align-self: center; margin: 0 0 0 auto; }
  .rd-nav { grid-column: 1 / -1; }
  .rd-nav .rd-lista { grid-template-columns: repeat(4, max-content); gap: 6px 28px; }
}
@media (max-width: 640px) {
  .rd-corpo { grid-template-columns: 1fr; gap: 34px; padding-top: 56px; }
  .rd-marca { gap: 16px 18px; }
  .rd-zap { margin: 4px 0 0; flex-basis: 100%; justify-content: center; padding: 13px 20px; }
  .rd-nav .rd-lista { grid-template-columns: 1fr 1fr; gap: 6px 20px; }
  .rd-base { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 92px; }
}