/* ==========================================================================
   TERAPIAS INTEGRATIVAS — verde-floresta, latão e papel. EB Garamond + Urbanist.
   Topo escuro com foto em P&B e uma luz que "respira", ranking de técnicas
   com barra de afinidade, técnicas em linhas editoriais alternadas.
   ========================================================================== */

body { background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); font-size: 16.5px; }
h1, h2, h3, .marca { font-family: var(--fonte-titulos); line-height: 1.02; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -.02em; margin: 10px 0 12px; }
h1 em, h2 em { font-style: italic; color: var(--destaque); }
section { padding: 100px 6vw; }
.cab { max-width: 760px; margin-bottom: 44px; }
.kicker { font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--destaque); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 4px; background: var(--destaque); color: #1a1408; font-weight: 700; letter-spacing: .01em; transition: transform .2s, background .2s; }
.botao:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--destaque) 85%, #fff); }
.botao.vazado { background: transparent; color: #f3eee5; box-shadow: inset 0 0 0 1px rgba(243,238,229,.45); }
.botao.vazado:hover { box-shadow: inset 0 0 0 1px #f3eee5; }
.botao.pequeno { padding: 11px 18px; font-size: .88rem; }
.botao.largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.link { font-weight: 700; color: var(--destaque); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .2s; }
.link:hover { opacity: .75; }

/* ---------- Topo (transparente sobre o hero, claro ao rolar) ---------- */
.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 18px 6vw; color: #f3eee5; transition: background .35s, color .35s, box-shadow .35s; }
.topo.rolou { background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(14px); color: var(--texto); box-shadow: 0 1px 0 var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 500; margin-right: auto; min-width: 0; }
.marca > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-ico { width: 34px; height: 34px; flex: none; }
.m-fundo { fill: var(--destaque); }
.m-folha { fill: none; stroke: #13221b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topo-nav { display: flex; gap: 28px; font-weight: 600; font-size: .94rem; opacity: .85; }
.topo-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 900px) { .topo-nav { display: none; } }
@media (max-width: 520px) { .topo-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; margin-top: -84px; min-height: 100vh; padding: 170px 6vw 70px; display: flex; flex-direction: column; justify-content: flex-end; color: #f3eee5; background: var(--escuro); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; filter: grayscale(1) contrast(1.05); opacity: .55; animation: zoom 3s cubic-bezier(.2,.7,.2,1) both; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,34,27,.55), rgba(19,34,27,.25) 40%, rgba(19,34,27,.92)); }
@keyframes zoom { from { transform: scale(1.12); } }
.aura { position: absolute; z-index: -1; left: 50%; top: 42%; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--destaque) 45%, transparent), transparent 65%); transform: translate(-50%, -50%) scale(.8); opacity: .55; animation: aura 7s ease-in-out 3; }
@keyframes aura { 50% { transform: translate(-50%, -50%) scale(1.25); opacity: .85; } }
.h-txt { max-width: 860px; }
.hero h1 { font-size: clamp(3rem, 7.5vw, 6.6rem); font-weight: 400; letter-spacing: -.03em; margin: 18px 0 20px; animation: sobe 1s .2s both; }
.h-frase { font-size: 1.18rem; color: #d8d6cc; max-width: 560px; margin-bottom: 32px; animation: sobe 1s .4s both; }
.hero .acoes { animation: sobe 1s .55s both; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
.h-tecs { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(243,238,229,.2); font-family: var(--fonte-titulos); font-size: 1.3rem; }
.h-tecs li { animation: sobe .8s both; }
.h-tecs li:nth-child(2) { animation-delay: .1s; } .h-tecs li:nth-child(3) { animation-delay: .2s; } .h-tecs li:nth-child(4) { animation-delay: .3s; } .h-tecs li:nth-child(5) { animation-delay: .4s; }
.h-tecs a { opacity: .8; transition: opacity .2s, color .2s; }
.h-tecs a:hover { opacity: 1; color: var(--destaque); }
.h-tecs li + li::before { content: '·'; margin-right: 26px; color: var(--destaque); }
@media (max-width: 600px) { .hero { padding-top: 130px; min-height: 92vh; } .h-tecs { font-size: 1.1rem; gap: 6px 14px; } .h-tecs li + li::before { margin-right: 14px; } }

/* ---------- O que você sente ---------- */
.s-grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: start; }
.queixas { display: flex; flex-wrap: wrap; gap: 8px; }
.queixas button { padding: 13px 18px; border-radius: 4px; font-weight: 600; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); transition: background .2s, color .2s, box-shadow .2s; }
.queixas button::before { content: '+'; margin-right: 8px; color: var(--destaque); font-weight: 800; }
.queixas button.ativo { background: var(--escuro); color: #f3eee5; box-shadow: none; }
.queixas button.ativo::before { content: '✓'; }
.troca { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-weight: 600; cursor: pointer; }
.troca input { position: absolute; opacity: 0; }
.troca span { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--linha); transition: background .25s; flex: none; }
.troca span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.troca input:checked + span { background: var(--destaque); }
.troca input:checked + span::after { transform: translateX(20px); }
.troca input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--destaque) 50%, transparent); }
.nota { margin-top: 22px; font-size: .88rem; color: var(--suave); padding-left: 14px; border-left: 2px solid var(--destaque); }
.ranking { display: grid; gap: 12px; }
.ranking > li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px; border-radius: 8px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); animation: entra .5s both; animation-delay: calc(var(--i, 0) * .1s); }
.ranking > li.top { box-shadow: inset 0 0 0 1.5px var(--destaque), 0 24px 50px -30px rgba(19,34,27,.45); }
@keyframes entra { from { opacity: 0; transform: translateX(14px); } }
.ranking img { width: 120px; height: 100%; min-height: 120px; object-fit: cover; border-radius: 4px; }
.rk-selo { display: inline-block; margin-bottom: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.rk-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk-cab b { font-family: var(--fonte-titulos); font-size: 1.6rem; font-weight: 500; }
.rk-cab em { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--suave); }
.rk-barra { display: block; height: 4px; border-radius: 4px; background: var(--linha); margin: 8px 0 10px; overflow: hidden; }
.rk-barra i { display: block; height: 100%; width: var(--p); background: var(--destaque); transform-origin: left; animation: enche .9s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(.2s + var(--i, 0) * .12s); }
@keyframes enche { from { transform: scaleX(0); } }
.rk-txt p { color: var(--suave); font-size: .95rem; }
.rk-sessao { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.rk-sessao span { padding: 4px 10px; border-radius: 3px; background: var(--destaque-claro); font-size: .8rem; font-weight: 600; color: #6b4a1c; }
.ranking .vazio, .ranking .combo { display: block; padding: 18px 20px; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px dashed var(--linha); border: 1px dashed var(--linha); color: var(--suave); }
.ranking .combo { font-size: .92rem; }
@media (max-width: 900px) { .s-grade { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ranking > li { grid-template-columns: 1fr; } .ranking img { width: 100%; height: 150px; } }

/* ---------- Técnicas ---------- */
.tec { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; padding: 34px 0; border-top: 1px solid var(--linha); }
.tec.inv .tec-foto { order: 2; }
.tec-foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.tec-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tec:hover .tec-foto img { transform: scale(1.05); }
.tec-txt span { font-family: var(--fonte-titulos); font-style: italic; font-size: 1.2rem; color: var(--destaque); }
.tec-txt h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin: 4px 0 12px; }
.tec-txt p { color: var(--suave); font-size: 1.05rem; max-width: 480px; }
.tec-txt ul { margin: 18px 0 22px; display: grid; gap: 6px; }
.tec-txt li { display: flex; gap: 10px; align-items: center; }
.tec-txt li::before { content: ''; width: 18px; height: 1px; background: var(--destaque); }
@media (max-width: 800px) { .tec { grid-template-columns: 1fr; gap: 20px; } .tec.inv .tec-foto { order: 0; } }

/* ---------- Primeira sessão ---------- */
.primeira { background: var(--escuro); color: #f3eee5; }
.pr-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pr-linha li { padding-top: 22px; border-top: 1px solid rgba(243,238,229,.2); transition-delay: calc(var(--i) * .12s); }
.pr-linha span { font-family: var(--fonte-titulos); font-style: italic; font-size: 2.4rem; color: var(--destaque); line-height: 1; }
.pr-linha b { display: block; font-family: var(--fonte-titulos); font-weight: 500; font-size: 1.6rem; margin: 10px 0 6px; }
.pr-linha p { color: #c9c8bf; }
@media (max-width: 760px) { .pr-linha { grid-template-columns: 1fr; } }

/* ---------- Terapeutas ---------- */
.ter-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.ter-lista li { padding: 28px 24px 28px 0; display: grid; gap: 4px; border-bottom: 1px solid var(--linha); }
.ter-lista i { font-style: italic; font-family: var(--fonte-titulos); font-size: 2.6rem; color: var(--destaque); line-height: 1; margin-bottom: 10px; }
.ter-lista b { font-family: var(--fonte-titulos); font-size: 1.5rem; font-weight: 500; }
.ter-lista span { color: var(--suave); }
.ter-lista small { color: var(--suave); font-size: .8rem; }
@media (max-width: 860px) { .ter-lista { grid-template-columns: 1fr; } }

/* ---------- Agendar ---------- */
.agendar { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: start; }
.ag-txt p:not(.kicker) { color: var(--suave); font-size: 1.05rem; }
.ag-form { padding: 30px; border-radius: 8px; background: var(--papel); box-shadow: 0 30px 70px -40px rgba(19,34,27,.4), inset 0 0 0 1px var(--linha); }
.rot { font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin: 20px 0 10px; }
.rot:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 9px 14px; border-radius: 4px; font-weight: 600; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--linha); }
.chips button.ativo { background: var(--escuro); color: #f3eee5; box-shadow: none; }
.dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dias button { padding: 10px 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--linha); display: grid; gap: 2px; }
.dias small { font-size: .74rem; opacity: .75; }
.dias b { font-family: var(--fonte-titulos); font-size: 1.4rem; font-weight: 500; }
.dias button.ativo { background: var(--escuro); color: #f3eee5; box-shadow: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linha); }
.seg button { padding: 11px 8px; border-radius: 4px; font-weight: 600; }
.seg button.ativo { background: var(--escuro); color: #f3eee5; }
.ag-form label { display: grid; gap: 8px; margin-top: 18px; font-weight: 700; font-size: .92rem; }
.ag-form input { padding: 15px 16px; border-radius: 4px; border: 1px solid var(--linha); background: var(--fundo); outline: none; }
.ag-form input:focus { border-color: var(--destaque); }
.erro { color: #c92a2a; font-size: .88rem; min-height: 1.2em; margin: 6px 0; }
.aviso-horario { display: flex; gap: 12px; padding: 14px 16px; border-radius: 6px; background: var(--fundo); margin: 4px 0 16px; font-size: .88rem; }
.aviso-horario p { color: var(--suave); }
@media (max-width: 860px) { .agendar { grid-template-columns: 1fr; } .ag-form { padding: 22px; } }
@media (max-width: 420px) { .dias { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ e rodapé ---------- */
.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; text-align: left; font-family: var(--fonte-titulos); font-size: 1.4rem; }
.faq-item button span { position: relative; flex: none; width: 22px; height: 22px; }
.faq-item button span::before, .faq-item button span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--destaque); transform: translate(-50%, -50%); }
.faq-item button span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq-item.aberto button span::after { transform: translate(-50%, -50%) rotate(0); }
.faq-resp { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-resp p { padding-bottom: 22px; color: var(--suave); }
.rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 56px 6vw 110px; text-align: center; background: var(--escuro); color: #c9c8bf; font-size: .9rem; }
.rd-marca { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: #f3eee5; font-family: var(--fonte-titulos); font-size: 1.5rem; margin-bottom: 6px; }
.rodape small { flex-basis: 100%; opacity: .65; }