/* ==========================================================================
   CLÍNICA MULTIDISCIPLINAR — branco limpo, uma cor por área.
   Plus Jakarta Sans. Órbita das áreas no topo (linhas se desenham uma vez),
   caminho numerado no "Por onde começar", cartões com barra da cor da área.
   ========================================================================== */

body { background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); }
h1, h2, h3, .marca { font-family: var(--fonte-titulos); letter-spacing: -.035em; line-height: 1.06; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; margin: 10px 0 12px; }
section { padding: 96px 6vw; }
.cab { max-width: 760px; margin-bottom: 40px; }
.cab > p:not(.kicker) { color: var(--suave); }
.kicker { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.passo { font-weight: 800; margin-bottom: 12px; }
.passo small { font-weight: 500; color: var(--suave); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 14px; background: var(--primaria); color: #fff; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(23,32,42,.6); }
.botao.claro { background: var(--papel); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); }
.botao.pequeno { padding: 11px 18px; font-size: .9rem; }
.botao.largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 14px 6vw; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(14px); transition: box-shadow .25s; }
.topo.rolou { box-shadow: 0 1px 0 var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; margin-right: auto; min-width: 0; color: var(--texto); }
.marca > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-ico { width: 34px; height: 34px; flex: none; }
.topo-nav { display: flex; gap: 26px; font-weight: 600; font-size: .94rem; color: var(--suave); }
.topo-nav a:hover { color: var(--texto); }
@media (max-width: 960px) { .topo-nav { display: none; } }
@media (max-width: 520px) { .topo-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5vw; align-items: center; padding-top: 40px; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 800; margin: 18px 0 20px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #7048e8, #1c7ed6 35%, #0ca678 65%, #f08c00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-frase { color: var(--suave); font-size: 1.12rem; max-width: 540px; margin-bottom: 28px; }
.h-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.h-areas li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); font-size: .86rem; font-weight: 600; }
.h-areas li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.orbita { width: 100%; max-width: 480px; margin: 0 auto; display: block; overflow: visible; }
.o-trilha { fill: none; stroke: var(--linha); stroke-width: 1.5; stroke-dasharray: 4 6; }
.o-linha { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; animation: traca .7s cubic-bezier(.3,.7,.2,1) forwards; animation-delay: calc(.5s + var(--i) * .12s); }
@keyframes traca { to { stroke-dashoffset: 0; } }
.o-no { transform-box: fill-box; transform-origin: center; animation: brota .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.9s + var(--i) * .12s); transition: opacity .4s, filter .4s; }
.o-no text, .o-centro text { fill: #fff; font: 800 13px var(--fonte-texto); text-anchor: middle; }
.o-no.apaga { opacity: .22; filter: grayscale(1); }
@keyframes brota { from { transform: scale(0); } }
.o-centro circle { fill: var(--primaria); }
.o-centro text { font-size: 17px; }
.o-centro { transform-box: fill-box; transform-origin: center; animation: brota .6s .2s cubic-bezier(.3,1.4,.5,1) both; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 20px; } .h-orbita { max-width: 360px; margin: 0 auto; width: 100%; } }

/* ---------- Por onde começar ---------- */
.cm-caixa { border-radius: 32px; background: var(--papel); box-shadow: 0 40px 90px -60px rgba(23,32,42,.5), inset 0 0 0 1px var(--linha); overflow: hidden; }
.cm-pessoas { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--linha); }
.cm-pessoas button { padding: 20px; font-weight: 800; font-size: 1.02rem; color: var(--suave); position: relative; transition: color .2s, background .2s; }
.cm-pessoas button::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--destaque); transform: scaleX(0); transition: transform .3s; }
.cm-pessoas button.ativo { color: var(--texto); background: var(--fundo); }
.cm-pessoas button.ativo::after { transform: scaleX(1); }
.cm-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 34px; }
.queixas { display: grid; gap: 8px; }
.queixas button { text-align: left; padding: 14px 16px 14px 48px; border-radius: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--linha); position: relative; transition: box-shadow .2s, background .2s; animation: aparece .35s both; }
.queixas button::before { content: ''; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #c5c8cf; transform: translateY(-50%); transition: background .2s, box-shadow .2s; }
.queixas button.ativo { box-shadow: inset 0 0 0 2px var(--destaque); background: var(--destaque-claro); }
.queixas button.ativo::before { background: var(--destaque) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; }
.queixas button:nth-child(2) { animation-delay: .04s; } .queixas button:nth-child(3) { animation-delay: .08s; } .queixas button:nth-child(4) { animation-delay: .12s; } .queixas button:nth-child(5) { animation-delay: .16s; } .queixas button:nth-child(6) { animation-delay: .2s; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
.cm-vazio { height: 100%; min-height: 240px; display: grid; place-content: center; text-align: center; gap: 6px; padding: 30px; border-radius: 20px; border: 1.5px dashed var(--linha); color: var(--suave); }
.cm-vazio b { color: var(--texto); }
.cm-tit { font-weight: 800; color: var(--suave); font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.caminho { position: relative; display: grid; gap: 12px; margin-bottom: 18px; }
.caminho li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 9%, #fff); animation: entra .45s both; animation-delay: calc(var(--i) * .12s); }
.caminho li + li::before { content: ''; position: absolute; left: 33px; top: -12px; width: 2px; height: 12px; background: var(--linha); }
@keyframes entra { from { opacity: 0; transform: translateX(16px); } }
.caminho span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; }
.caminho b { display: block; font-size: 1.1rem; }
.caminho small { color: var(--suave); font-size: .88rem; }
.cm-junto { font-size: .92rem; color: var(--suave); margin-bottom: 16px; }
.cm-aviso { display: block; margin-top: 10px; text-align: center; color: var(--suave); font-size: .8rem; }
@media (max-width: 860px) { .cm-grade { grid-template-columns: 1fr; padding: 20px; } .cm-pessoas button { padding: 16px 8px; font-size: .9rem; } }

/* ---------- Áreas ---------- */
.ar-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ar-grade article { border-radius: 24px; overflow: hidden; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; transition-delay: calc(var(--i) * .06s); }
.ar-grade article:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), 0 24px 50px -30px var(--c); }
.ar-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ar-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--c); }
.ar-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ar-grade article:hover img { transform: scale(1.06); }
.ar-txt { padding: 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ar-txt h3 { font-size: 1.3rem; font-weight: 800; color: var(--c); }
.ar-txt p { color: var(--suave); flex: 1; }
.ar-link { align-self: flex-start; margin-top: 8px; font-weight: 700; color: var(--texto); }
.ar-link:hover { color: var(--c); }
@media (max-width: 900px) { .ar-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ar-grade { grid-template-columns: 1fr; } }

/* ---------- Como funciona ---------- */
.como { background: var(--primaria); color: #eef1f6; border-radius: 40px; margin: 0 2vw; }
.como .kicker { background: rgba(255,255,255,.1); color: #fff; }
.como-linha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.como-linha li { padding: 26px; border-radius: 22px; background: rgba(255,255,255,.06); transition-delay: calc(var(--i) * .1s); }
.como-linha span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-weight: 800; margin-bottom: 18px; background: linear-gradient(135deg, #7048e8, #1c7ed6); }
.como-linha li:nth-child(2) span { background: linear-gradient(135deg, #1c7ed6, #0ca678); }
.como-linha li:nth-child(3) span { background: linear-gradient(135deg, #0ca678, #f08c00); }
.como-linha li:nth-child(4) span { background: linear-gradient(135deg, #f08c00, #e64980); }
.como-linha b { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.como-linha p { color: #b8c0cc; font-size: .95rem; }
@media (max-width: 900px) { .como-linha { grid-template-columns: 1fr 1fr; } .como { border-radius: 28px; margin: 0; } }
@media (max-width: 520px) { .como-linha { grid-template-columns: 1fr; } }

/* ---------- Equipe ---------- */
.eq-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.eq-filtros button { padding: 9px 15px; border-radius: 99px; font-weight: 700; font-size: .88rem; box-shadow: inset 0 0 0 1.5px var(--linha); background: var(--papel); transition: background .2s, color .2s; }
.eq-filtros button.ativo { background: var(--c, var(--texto)); color: #fff; box-shadow: none; }
.eq-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eq-lista li { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); animation: aparece .35s both; }
.eq-lista i { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: var(--c); }
.eq-lista b { display: block; }
.eq-lista span { display: block; color: var(--c); font-weight: 700; font-size: .88rem; }
.eq-lista small { color: var(--suave); font-size: .78rem; }
@media (max-width: 900px) { .eq-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .eq-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); }
.ag-form { padding: 30px; border-radius: 28px; background: var(--papel); box-shadow: 0 30px 70px -40px rgba(23,32,42,.4), inset 0 0 0 1px var(--linha); }
.rot { font-weight: 800; font-size: .8rem; 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: 12px; font-weight: 700; font-size: .88rem; box-shadow: inset 0 0 0 1.5px var(--linha); }
.chips button.ativo { background: var(--c, var(--texto)); color: #fff; box-shadow: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--linha); }
.seg button { padding: 11px 6px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.seg button.ativo { background: var(--texto); color: #fff; }
.ag-form label { display: grid; gap: 8px; margin-top: 18px; font-weight: 700; font-size: .92rem; }
.ag-form input { padding: 15px 16px; border-radius: 14px; border: 1.5px 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: 14px; 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; } }

/* ---------- 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-weight: 800; font-size: 1.08rem; }
.faq-item button span { position: relative; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--destaque-claro); color: var(--destaque); }
.faq-item button span::before, .faq-item button span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; 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: 48px 6vw 110px; text-align: center; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--linha); }
.rd-marca { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto); font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.rodape small { flex-basis: 100%; opacity: .7; }