/* Dr. Geraldo Gil Faggioni Jr. — sistema visual em 02-conceito/sistema.md */
:root {
  /* cores tiradas da foto: parede, jaleco, camisa, madeira; bronze da fachada */
  --parede: #c3b6bd;
  --parede-clara: #e7dee1;
  --jaleco: #f6f0f2;
  --bordo: #5b1733;
  --bordo-fundo: #3f0f24;
  --bordo-noite: #2b0a18;
  --madeira: #b2958f;
  --madeira-luz: #cdb7ae;
  --madeira-sombra: #664e48;
  --bronze: #b19767;
  --bronze-luz: #e6c091;
  --tinta: #2c1f25;
  --tinta-suave: #5f4e55;
  --linha: #2c1f2522;
  --serifa: 'Fraunces', Georgia, serif;
  --sem: 'Figtree', system-ui, sans-serif;
  --margem: clamp(20px, 5vw, 76px);
  --largura: 1280px;
  --respiro: clamp(84px, 13vh, 168px);
  --raio: 999px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: var(--sem); color: var(--tinta); background: var(--parede-clara); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; border-radius: 4px; }
.escura :focus-visible { outline-color: var(--bronze-luz); }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bordo); color: #fff; padding: 10px 16px; border-radius: 10px; }
.pular:focus { top: 12px; }

/* ---------- hero (aprovado, hipótese A) ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; isolation: isolate; }
.malha { position: absolute; inset: -12%; z-index: -3; filter: blur(70px) saturate(1.05); }
.malha i { position: absolute; border-radius: 50%; will-change: transform; }
.malha .m1 { width: 62%; aspect-ratio: 1; left: -6%; top: -10%; background: var(--jaleco); animation: vai 32s ease-in-out infinite alternate; }
.malha .m2 { width: 58%; aspect-ratio: 1; right: -4%; top: 4%; background: color-mix(in oklch, var(--parede) 86%, var(--bordo)); animation: vai 38s ease-in-out -9s infinite alternate-reverse; }
.malha .m3 { width: 52%; aspect-ratio: 1; left: 22%; bottom: -24%; background: color-mix(in oklch, var(--madeira) 62%, var(--jaleco)); animation: vai 27s ease-in-out -4s infinite alternate; }
.malha .m4 { width: 34%; aspect-ratio: 1; right: 6%; bottom: -8%; background: color-mix(in oklch, var(--bordo) 34%, var(--parede)); animation: vai 41s ease-in-out -15s infinite alternate-reverse; }
.malha .m5 { width: 40%; aspect-ratio: 1; left: -10%; bottom: -6%; background: color-mix(in oklch, var(--bronze) 30%, var(--jaleco)); animation: vai 35s ease-in-out -20s infinite alternate; }
@keyframes vai { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
.grao { position: absolute; inset: 0; z-index: -1; opacity: .05; pointer-events: none; background-image: var(--grao); }

.hero nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.6vw, 30px) var(--margem) 0; }
.hero nav img { height: clamp(34px, 3.6vw, 46px); width: auto; display: block; }
.tel { font-size: 14.5px; font-weight: 500; text-decoration: none; padding: 10px 18px; border: 1px solid var(--linha); border-radius: var(--raio); background: #ffffff55; backdrop-filter: blur(8px); white-space: nowrap; }
.tel:hover { background: #ffffffaa; }

.palco { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: clamp(12px, 3vw, 48px); padding: 0 var(--margem); }
.texto { align-self: center; padding: clamp(28px, 5vh, 64px) 0 clamp(36px, 7vh, 84px); max-width: 660px; }
.sobre-linha { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 500; }
.sobre-linha::before { content: ''; width: 34px; height: 1px; background: currentColor; }
h1 { font-family: var(--serifa); font-weight: 340; font-size: clamp(2.7rem, 6.1vw, 5.9rem); line-height: .98; letter-spacing: -.035em; margin: 22px 0 26px; font-variation-settings: 'opsz' 144; text-wrap: balance; }
h1 em { font-style: italic; font-weight: 300; color: var(--bordo); }
h1 span { display: block; }
.apoio { font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.55; color: var(--tinta-suave); max-width: 33em; }
.apoio b { color: var(--tinta); font-weight: 600; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.botao { display: inline-flex; align-items: center; gap: 10px; background: var(--bordo); color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; padding: 17px 28px; border-radius: var(--raio); box-shadow: 0 18px 36px -18px var(--bordo); transition: transform .3s, background .3s; }
.botao:hover { background: var(--bordo-fundo); transform: translateY(-2px); }
.botao svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.segundo { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linha); padding-bottom: 3px; }
.segundo:hover { border-color: currentColor; }
.prova { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-suave); }
.prova b { color: var(--tinta); font-weight: 600; }
.prova .nota b { font-family: var(--serifa); font-size: 1.35rem; font-weight: 400; margin-right: 4px; }
.estrelas { color: var(--bronze); letter-spacing: 1px; }

.dupla { position: relative; align-self: end; justify-self: center; width: min(100%, 78vh); }
.dupla img.foto { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px #3f0f2433); }
.luz { position: absolute; left: 50%; top: 38%; width: 105%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #fffaf7cc, #fffaf700 70%); z-index: -1; }
.fita { position: absolute; z-index: -1; left: -30%; top: 2%; width: 150%; height: auto; overflow: visible; }
.fita path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha 2.6s cubic-bezier(.6, 0, .2, 1) .5s forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.legenda { position: absolute; font-size: 12.5px; line-height: 1.35; color: var(--tinta); background: #ffffffb8; backdrop-filter: blur(10px); padding: 9px 14px; border-radius: 14px; box-shadow: 0 12px 30px -18px #3f0f2488; white-space: nowrap; }
.legenda small { display: block; color: var(--tinta-suave); font-size: 11.5px; }
.legenda.ele { right: -2%; top: 15%; }
.legenda.ela { left: -6%; top: 47%; }
.citacao { position: absolute; right: 2%; bottom: 7%; max-width: 300px; background: var(--bordo); color: #fbeef1; padding: 20px 22px; border-radius: 20px 20px 4px 20px; font-family: var(--serifa); font-size: 1.06rem; line-height: 1.35; font-style: italic; font-weight: 340; box-shadow: 0 24px 50px -24px var(--bordo-fundo); }
.citacao footer { font-family: var(--sem); font-style: normal; font-size: 12px; margin-top: 12px; opacity: .78; letter-spacing: .02em; }

.entra { opacity: 0; transform: translateY(18px); animation: entra 1s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
.dupla .foto { opacity: 0; transform: translateY(30px) scale(.985); animation: entra 1.5s var(--curva) .35s forwards; }
.legenda, .citacao { opacity: 0; animation: entra 1s var(--curva) forwards; }
.legenda.ele { animation-delay: 1.5s; } .legenda.ela { animation-delay: 1.75s; } .citacao { animation-delay: 2.1s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ---------- barra que acompanha a rolagem ---------- */
.barra { position: fixed; z-index: 50; top: 12px; left: 50%; translate: -50% -90px; display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); padding: 8px 8px 8px 22px; background: #fbf6f7d9; backdrop-filter: blur(16px); border: 1px solid #ffffffaa; border-radius: var(--raio); box-shadow: 0 18px 40px -22px #3f0f2466; transition: translate .6s var(--curva); max-width: calc(100vw - 24px); }
.barra.visivel { translate: -50% 0; }
.barra > a:first-child { flex: none; }
.barra img { height: 28px; width: 111px; max-width: none; display: block; }
.barra ul { display: flex; gap: clamp(12px, 1.8vw, 24px); list-style: none; padding: 0; font-size: 14px; font-weight: 500; }
.barra ul a { text-decoration: none; color: var(--tinta-suave); white-space: nowrap; }
.barra ul a:hover { color: var(--bordo); }
.barra .botao { padding: 11px 20px; font-size: 14px; box-shadow: none; white-space: nowrap; }

/* ---------- peças comuns das seções ---------- */
.secao { position: relative; padding: var(--respiro) var(--margem); isolation: isolate; overflow-x: clip; }
.miolo { max-width: var(--largura); margin: 0 auto; }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 500; }
.etiqueta::before { content: ''; width: 34px; height: 1px; background: currentColor; }
h2 { font-family: var(--serifa); font-weight: 340; font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.032em; font-variation-settings: 'opsz' 144; margin-top: 20px; text-wrap: balance; }
h2 em { font-style: italic; font-weight: 300; color: var(--bordo); }
.lide { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.6; color: var(--tinta-suave); max-width: 34em; margin-top: 22px; }
.lide b { color: var(--tinta); font-weight: 600; }
.fonte { font-size: 12.5px; color: var(--tinta-suave); letter-spacing: .02em; }

/* revelação na rolagem: só quando há JS */
.js [data-entra] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-entra].visto { opacity: 1; transform: none; }

/* ---------- 2. o que o tempo conta ---------- */
.tempo { background:
  radial-gradient(60% 38% at 100% 12% in oklch, color-mix(in oklch, var(--madeira) 46%, var(--jaleco)), transparent 70%),
  radial-gradient(55% 34% at 0% 58% in oklch, color-mix(in oklch, var(--bronze) 26%, var(--jaleco)), transparent 70%),
  radial-gradient(60% 30% at 80% 100% in oklch, color-mix(in oklch, var(--bordo) 16%, var(--parede)), transparent 72%),
  linear-gradient(var(--parede-clara), var(--jaleco)); }
.tempo::after, .onde::after, .sobre::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .05; pointer-events: none; background-image: var(--grao); }
.tempo .cabeca { max-width: 760px; }
.trilha { position: relative; margin-top: clamp(40px, 8vh, 90px); }
.trilha .fio-tempo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.fio-tempo path { fill: none; stroke-linecap: round; }
.fio-tempo .f1 { stroke: var(--madeira-sombra); stroke-width: 46px; opacity: .22; }
.fio-tempo .f2 { stroke: url(#madeira-tempo); stroke-width: 54px; opacity: .78; }
.marco { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: clamp(320px, 50vh, 460px); }
.marco .relato { grid-column: 1; max-width: 520px; }
.marco:nth-child(odd of .marco) .relato { grid-column: 1; }
.marco.direita .relato { grid-column: 2; justify-self: end; }
.marco .numero { grid-row: 1; grid-column: 2; justify-self: center; text-align: center; font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 300; line-height: .85; letter-spacing: -.05em; color: var(--jaleco); font-size: clamp(5rem, 13vw, 12rem); text-shadow: 0 10px 40px #664e4855; }
.marco.direita .numero { grid-column: 1; }
.marco .numero small { display: block; font-family: var(--sem); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--tinta); text-shadow: none; margin-top: 18px; }
.relato .quando { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bordo); }
.relato blockquote { font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 340; font-style: italic; font-size: clamp(1.7rem, 3.1vw, 2.9rem); line-height: 1.12; letter-spacing: -.025em; margin: 16px 0 20px; text-wrap: balance; }
.relato p { font-size: 1.02rem; line-height: 1.6; color: var(--tinta-suave); max-width: 30em; }
.relato cite { display: block; font-style: normal; font-size: 13.5px; margin-top: 16px; color: var(--tinta); font-weight: 600; }
.relato cite span { font-weight: 400; color: var(--tinta-suave); }

/* ---------- 3. depois do aparelho ---------- */
.depois { background: var(--jaleco); }
.depois .miolo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.quadro { position: relative; aspect-ratio: 1 / .92; border-radius: 28px; background: radial-gradient(80% 80% at 30% 20% in oklch, #fff, var(--parede-clara)); display: grid; place-items: center; overflow: hidden; box-shadow: 0 40px 80px -50px #3f0f2466; }
.quadro::after { content: ''; position: absolute; inset: 0; opacity: .05; background-image: var(--grao); pointer-events: none; }
.arcada { width: 78%; height: auto; overflow: visible; }
.arcada .dente { fill: #fff; stroke: var(--madeira-sombra); stroke-width: .35; opacity: 0; transition: opacity .8s var(--curva); transition-delay: calc(var(--n) * 45ms); }
.arcada .contencao { fill: none; stroke: var(--bordo); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.6, 0, .2, 1) .9s; }
.arcada .ponto { fill: var(--bronze); opacity: 0; transition: opacity .6s 2.6s; }
.visto .arcada .dente, html:not(.js) .arcada .dente { opacity: 1; }
.visto .arcada .contencao, html:not(.js) .arcada .contencao { stroke-dashoffset: 0; }
.visto .arcada .ponto, html:not(.js) .arcada .ponto { opacity: 1; }
.quadro figcaption { position: absolute; left: 22px; bottom: 20px; right: 22px; font-size: 12.5px; color: var(--tinta-suave); display: flex; align-items: center; gap: 10px; }
.quadro figcaption i { width: 26px; height: 2px; background: var(--bordo); border-radius: 2px; flex: none; }
.passos { list-style: none; padding: 0; margin-top: clamp(28px, 5vh, 48px); counter-reset: passo; }
.passos li { display: grid; grid-template-columns: clamp(52px, 6vw, 84px) 1fr; gap: 8px 18px; padding: 24px 0; border-top: 1px solid var(--linha); counter-increment: passo; }
.passos li:last-child { border-bottom: 1px solid var(--linha); }
.passos li::before { content: counter(passo); font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: .9; color: var(--bordo); }
.passos h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; }
.passos p { color: var(--tinta-suave); line-height: 1.6; margin-top: 6px; max-width: 34em; }

/* ---------- 4. tratamentos ---------- */
.tratamentos { background: linear-gradient(var(--jaleco), var(--parede-clara)); }
.tratamentos .cabeca { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 60px; align-items: end; }
.tratamentos .cabeca .lide { margin: 0; }
.lista { list-style: none; padding: 0; margin-top: clamp(36px, 7vh, 70px); border-top: 1px solid var(--tinta); }
.lista li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px 32px; align-items: baseline; padding: clamp(24px, 3.6vw, 40px) 0; border-bottom: 1px solid var(--linha); transition: padding .6s var(--curva); }
.lista li::before { content: ''; position: absolute; inset: 0 calc(var(--margem) * -.5); z-index: -1; border-radius: 24px; background: #fff; opacity: 0; transition: opacity .5s; }
.lista li:hover::before { opacity: .65; }
.lista li:hover { padding-left: 14px; }
.lista .n { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--bronze); }
.lista h3 { font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 340; font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: 1.05; letter-spacing: -.028em; }
.lista h3 em { font-style: italic; font-weight: 300; color: var(--bordo); }
.lista p { color: var(--tinta-suave); line-height: 1.6; }
.lista .voz { display: block; margin-top: 12px; font-family: var(--serifa); font-style: italic; font-size: 1rem; color: var(--tinta); }
.lista .voz small { font-family: var(--sem); font-style: normal; font-size: 12.5px; color: var(--tinta-suave); }

/* ---------- 5. duas gerações ---------- */
.sobre { background:
  radial-gradient(50% 50% at 0% 0% in oklch, color-mix(in oklch, var(--parede) 70%, var(--jaleco)), transparent 70%),
  radial-gradient(50% 60% at 100% 100% in oklch, color-mix(in oklch, var(--madeira) 40%, var(--jaleco)), transparent 70%), var(--parede-clara); overflow-x: clip; }
.sobre .miolo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.album { position: sticky; top: 110px; isolation: isolate; }
.foto-album { position: relative; background: #fff; padding: 14px 14px 18px; border-radius: 6px; rotate: -2.4deg; box-shadow: 0 40px 70px -40px #3f0f2488, 0 2px 6px #3f0f2418; }
.foto-album img { display: block; width: 100%; height: auto; border-radius: 2px; }
.foto-album figcaption { font-family: var(--serifa); font-style: italic; font-size: 1rem; color: var(--tinta-suave); padding: 14px 6px 0; }
.laco { position: absolute; z-index: -1; left: -26%; top: -70px; width: 150%; height: auto; overflow: visible; }
.laco path { fill: none; stroke: url(#madeira-laco); stroke-width: 44; stroke-linecap: round; opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.6, 0, .2, 1) .2s; }
.visto .laco path, html:not(.js) .laco path { stroke-dashoffset: 0; }
.fala { margin-top: 44px; padding-left: 20px; border-left: 2px solid var(--bordo); font-family: var(--serifa); font-style: italic; font-weight: 340; font-size: 1.3rem; line-height: 1.3; }
.fala footer { font-family: var(--sem); font-style: normal; font-size: 12.5px; color: var(--tinta-suave); margin-top: 10px; }
.historia p { font-size: clamp(1.05rem, 1.25vw, 1.18rem); line-height: 1.68; color: var(--tinta-suave); margin-top: 20px; max-width: 36em; }
.historia p b { color: var(--tinta); font-weight: 600; }
.historia p:first-of-type { margin-top: 28px; }
.geracoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 46px; border-top: 1px solid var(--tinta); }
.geracoes > div { padding: 24px 28px 0 0; }
.geracoes > div + div { padding-left: 28px; border-left: 1px solid var(--linha); }
.geracoes small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bordo); }
.geracoes h3 { font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 380; font-size: 1.5rem; letter-spacing: -.02em; margin: 8px 0 12px; }
.geracoes ul { list-style: none; padding: 0; font-size: .96rem; line-height: 1.5; color: var(--tinta-suave); }
.geracoes li { padding: 9px 0; border-top: 1px solid var(--linha); }
.epigrafe { margin-top: 48px; font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; color: var(--bordo); max-width: 22em; }
.epigrafe footer { font-family: var(--sem); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--tinta-suave); margin-top: 14px; }

/* ---------- 6. opiniões ---------- */
.opinioes { color: #f8ecef; background: var(--bordo-noite); overflow: hidden; }
.opinioes .malha { filter: blur(90px); }
.opinioes .malha .m1 { background: var(--bordo); left: -10%; top: -20%; width: 60%; }
.opinioes .malha .m2 { background: color-mix(in oklch, var(--bordo) 60%, var(--madeira-sombra)); right: -10%; top: 30%; width: 55%; }
.opinioes .malha .m3 { background: color-mix(in oklch, var(--bordo) 78%, var(--bronze)); left: 20%; bottom: -30%; width: 50%; opacity: .7; }
.opinioes .grao { opacity: .08; mix-blend-mode: overlay; }
.opinioes .etiqueta { color: #e3c9cf; }
.opinioes h2 em { color: var(--bronze-luz); }
.opinioes .cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 60px; align-items: end; }
.placar { text-align: right; }
.placar b { display: block; font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 300; font-size: clamp(5rem, 10vw, 9rem); line-height: .8; letter-spacing: -.05em; }
.placar .estrelas { color: var(--bronze-luz); font-size: 1.1rem; letter-spacing: 3px; display: block; margin: 16px 0 6px; }
.placar span { font-size: 14px; color: #e3c9cf; }
.mural { columns: 3 300px; column-gap: 22px; margin-top: clamp(40px, 7vh, 76px); }
.mural figure { break-inside: avoid; margin: 0 0 22px; padding: 26px 26px 22px; border-radius: 20px 20px 4px 20px; background: #ffffff0d; border: 1px solid #ffffff1c; backdrop-filter: blur(6px); }
.mural figure.forte { background: #f6f0f2; color: var(--tinta); border-color: transparent; }
.mural blockquote { font-family: var(--serifa); font-style: italic; font-weight: 340; font-size: 1.14rem; line-height: 1.42; }
.mural figure.grande blockquote { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: -.015em; }
.mural figcaption { font-size: 12.5px; margin-top: 16px; opacity: .78; letter-spacing: .02em; }
.mural figcaption b { font-weight: 600; opacity: 1; }
.opinioes .rodape-secao { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 24px; border-top: 1px solid #ffffff22; font-size: 13.5px; color: #e3c9cf; }
.opinioes .segundo { border-color: #ffffff44; color: #fff; }

/* ---------- 7. perguntas ---------- */
.perguntas { background: var(--jaleco); }
.perguntas .miolo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.perguntas .cabeca { position: sticky; top: 110px; }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:last-of-type { border-bottom: 1px solid var(--linha); }
.perguntas summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; gap: 20px; align-items: center; padding: 26px 0; font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 360; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: linear-gradient(var(--bordo), var(--bordo)) center / 12px 1.5px no-repeat, linear-gradient(var(--bordo), var(--bordo)) center / 1.5px 12px no-repeat; transition: rotate .5s var(--curva), background-color .3s; }
.perguntas details[open] summary::after { rotate: 135deg; background-color: #fff; }
.perguntas summary:hover { color: var(--bordo); }
.perguntas .resposta { padding: 0 54px 28px 0; color: var(--tinta-suave); line-height: 1.65; max-width: 40em; }
.perguntas .resposta p + p { margin-top: 12px; }
.perguntas .resposta .fonte { display: block; margin-top: 14px; }

/* ---------- 8. onde fica ---------- */
.onde { background:
  radial-gradient(60% 70% at 100% 0% in oklch, color-mix(in oklch, var(--bronze-luz) 62%, var(--jaleco)), transparent 70%),
  radial-gradient(50% 60% at 0% 100% in oklch, color-mix(in oklch, var(--madeira) 44%, var(--jaleco)), transparent 70%),
  radial-gradient(40% 50% at 40% 30% in oklch, var(--jaleco), transparent 70%), var(--parede-clara); }
.onde .miolo { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.endereco { font-style: normal; font-family: var(--serifa); font-variation-settings: 'opsz' 144; font-weight: 340; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; margin-top: 28px; }
.endereco small { display: block; font-family: var(--sem); font-size: 1rem; letter-spacing: 0; color: var(--tinta-suave); margin-top: 8px; }
.horario { width: 100%; max-width: 440px; border-collapse: collapse; margin-top: 34px; font-size: 1rem; }
.horario caption { text-align: left; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bordo); padding-bottom: 10px; }
.horario th, .horario td { text-align: left; font-weight: 400; padding: 11px 0; border-top: 1px solid var(--linha); color: var(--tinta-suave); }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario tr.hoje th, .horario tr.hoje td { color: var(--tinta); font-weight: 600; }
.horario tr.hoje th::after { content: 'hoje'; margin-left: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--bordo); padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.onde .notas { list-style: none; padding: 0; margin-top: 22px; font-size: 14px; color: var(--tinta-suave); line-height: 1.7; }
.onde .notas li::before { content: '·'; margin-right: 8px; color: var(--bordo); font-weight: 700; }
.mapa { position: relative; }
.mapa .moldura { position: relative; aspect-ratio: 1 / .92; border-radius: 28px 28px 6px 28px; overflow: hidden; background: var(--parede); box-shadow: 0 50px 90px -50px #3f0f2488; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.28) saturate(.75) hue-rotate(-12deg) contrast(.96); }
.mapa .chegada { position: absolute; z-index: -1; right: -8%; top: -16%; width: 70%; height: auto; overflow: visible; }
.mapa .chegada path { fill: none; stroke: url(#madeira-mapa); stroke-width: 40; stroke-linecap: round; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.6, 0, .2, 1) .2s; }
.visto .chegada path, html:not(.js) .chegada path { stroke-dashoffset: 0; }
.mapa .placa { position: absolute; left: -18px; bottom: 26px; background: var(--bordo); color: #fbeef1; padding: 16px 20px; border-radius: 18px 18px 18px 4px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 24px 50px -24px var(--bordo-fundo); }
.mapa .placa b { display: block; font-family: var(--serifa); font-style: italic; font-weight: 340; font-size: 1.5rem; }

/* ---------- fecho e rodapé ---------- */
.fecho { color: #f8ecef; background: var(--bordo-noite); overflow: hidden; text-align: center; padding-bottom: 0; }
.fecho .malha .m1 { background: var(--bordo); left: 15%; top: -40%; width: 70%; }
.fecho .malha .m2 { background: color-mix(in oklch, var(--bordo) 70%, var(--bronze)); right: -10%; bottom: -30%; width: 45%; opacity: .6; top: auto; }
.fecho .malha .m3 { background: var(--bordo-fundo); left: -10%; bottom: -30%; width: 50%; }
.fecho .grao { opacity: .08; mix-blend-mode: overlay; }
.fecho h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); max-width: 14em; margin: 0 auto; }
.fecho h2 em { color: var(--bronze-luz); }
.fecho .lide { margin: 26px auto 0; color: #e3c9cf; }
.fecho .acoes { justify-content: center; margin-top: 38px; }
.fecho .botao { background: #f6f0f2; color: var(--bordo-fundo); box-shadow: none; }
.fecho .botao:hover { background: #fff; }
.fecho .segundo { border-color: #ffffff44; }
.rodape { max-width: var(--largura); margin: var(--respiro) auto 0; padding: 40px 0 30px; border-top: 1px solid #ffffff22; text-align: left; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px 50px; font-size: 14px; line-height: 1.7; color: #e3c9cf; }
.rodape img { height: 44px; width: auto; display: block; margin-bottom: 18px; }
.rodape b { color: #fff; font-weight: 600; }
.rodape h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bronze-luz); margin-bottom: 10px; }
.rodape a { text-decoration: none; border-bottom: 1px solid #ffffff33; }
.rodape a:hover { border-color: #fff; color: #fff; }
.rodape ul { list-style: none; padding: 0; }
.rodape-fim { max-width: var(--largura); margin: 0 auto; padding: 20px 0 28px; border-top: 1px solid #ffffff16; display: flex; flex-wrap: wrap; gap: 8px 30px; justify-content: space-between; font-size: 12.5px; color: #cbaab2; text-align: left; }
.rodape-fim a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--bronze-luz); }
.rodape-fim a:hover { color: var(--bronze-luz); }

/* botão que acompanha a rolagem no celular */
.zap { display: none; }

/* ---------- telas menores ---------- */
@media (max-width: 1080px) {
  .barra ul { display: none; }
  .barra { padding-left: 18px; gap: 16px; }
}
@media (max-width: 900px) {
  .palco { grid-template-columns: 1fr; gap: 0; }
  .texto { padding: 34px 0 12px; }
  h1 { font-size: clamp(2.55rem, 11.5vw, 4rem); margin: 18px 0 20px; }
  .dupla { width: min(100%, 520px); margin-top: 26px; }
  .legenda.ele { right: 0; top: 6%; } .legenda.ela { left: 0; top: 40%; }
  .citacao { position: relative; right: auto; bottom: auto; max-width: none; margin: -70px 0 28px; border-radius: 20px; }
  .hero .acoes { margin-top: 26px; } .hero .botao { width: 100%; justify-content: center; }
  .prova { margin-top: 28px; }
  .tel span { display: none; }
  .barra { display: none; }

  .trilha .fio-tempo { display: none; }
  .trilha { padding-left: 26px; border-left: 3px solid; border-image: linear-gradient(var(--madeira-luz), var(--madeira), var(--madeira-sombra)) 1; margin-left: 4px; }
  .marco { grid-template-columns: 1fr; min-height: 0; padding: 26px 0 34px; }
  .marco::before { content: ''; position: absolute; left: -36px; top: 40px; width: 15px; height: 15px; border-radius: 50%; background: var(--bordo); border: 3px solid var(--jaleco); }
  .marco .relato, .marco.direita .relato { grid-column: 1; grid-row: 2; justify-self: start; }
  .marco .numero, .marco.direita .numero { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; font-size: clamp(4.2rem, 22vw, 6.5rem); color: var(--madeira); text-shadow: none; margin-bottom: 18px; }
  .marco .numero small { margin-top: 10px; }

  .depois .miolo, .sobre .miolo, .perguntas .miolo, .onde .miolo { grid-template-columns: 1fr; }
  .tratamentos .cabeca, .opinioes .cabeca { grid-template-columns: 1fr; }
  .placar { text-align: left; }
  .lista li { grid-template-columns: 1fr; gap: 8px; }
  .lista li:hover { padding-left: 0; }
  .perguntas .cabeca { position: static; }
  .album, .quadro { order: 2; }
  .album { position: relative; top: auto; margin-top: 30px; max-width: 440px; }
  .quadro { max-width: 520px; width: 100%; }
  .foto-album { max-width: 440px; }
  .geracoes { grid-template-columns: 1fr; }
  .geracoes > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--tinta); margin-top: 28px; }
  .perguntas .resposta { padding-right: 0; }
  .mapa { order: 2; }
  .mapa .placa { left: 12px; bottom: 12px; }
  .rodape { grid-template-columns: 1fr; }
  .fecho .botao { width: 100%; justify-content: center; }

  .zap { display: inline-flex; position: fixed; z-index: 60; right: 14px; bottom: 14px; align-items: center; gap: 9px; background: var(--bordo); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 20px; border-radius: var(--raio); box-shadow: 0 16px 34px -12px #3f0f24cc, 0 0 0 1px #ffffff33 inset; translate: 0 90px; transition: translate .6s var(--curva); }
  .zap.visivel { translate: 0 0; }
  .zap svg { width: 18px; height: 18px; fill: currentColor; }
  .rodape-fim { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .malha i { animation: none; }
  .entra, .dupla .foto, .legenda, .citacao { animation-duration: .01s; animation-delay: 0s; }
  .fita path { animation: none; stroke-dashoffset: 0; }
  .js [data-entra] { opacity: 1; transform: none; transition: none; }
    .arcada .dente, .arcada .ponto { opacity: 1; transition: none; }
  .arcada .contencao, .laco path, .mapa .chegada path { stroke-dashoffset: 0; transition: none; }
  .barra, .zap { transition: none; }
}