/* Navegação por âncoras permanece visível e rolável no celular. */
.atalhos { display: flex; justify-content: center; gap: .65rem; padding-block: 1.2rem; overflow-x: auto; scrollbar-width: thin; }
.atalhos a { padding: .45rem .85rem; border: 1px solid var(--borda); border-radius: 999px; color: var(--primaria-escura); background: var(--branco); font-weight: 700; white-space: nowrap; text-decoration: none; }
.atalhos a:hover { border-color: var(--primaria); background: var(--primaria-clara); }

/* Cada especialidade alterna imagem e conteúdo para dar ritmo visual. */
.lista-especialidades { padding-bottom: 5rem; }
.especialidade { display: grid; grid-template-columns: .8fr 1.2fr; align-items: stretch; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--borda); scroll-margin-top: 135px; }
.especialidade:nth-child(even) img { order: 2; }
.especialidade img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; border-radius: var(--raio); }
.especialidade > div { align-self: center; }
.especialidade > div > p:not(.destaque) { color: var(--texto-suave); }
.horarios { display: grid; gap: .5rem; margin: 1.3rem 0 1.6rem; }
.horarios span { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: var(--fundo); border-radius: 9px; }

@media (max-width: 700px) {
    .atalhos { justify-content: flex-start; }
    .especialidade { grid-template-columns: 1fr; }
    .especialidade:nth-child(even) img { order: initial; }
    .especialidade img { max-height: 260px; min-height: 0; aspect-ratio: 1.75; }
}

@media (max-width: 420px) {
    .horarios span { align-items: flex-start; flex-direction: column; gap: .1rem; }
    .especialidade .botao { width: 100%; }
}