/**
 * Páginas de procedimento - Dra. Mirta Beolchi
 * Complementa o style.css; nada aqui sobrescreve o site existente.
 * Usa as variáveis já definidas no style.css quando existem, com fallback.
 */

/* O .container do site zera as margens quando a viewport bate no max-width,
   e as seções da home compensam isso por conta própria. Como esta página não
   usa aquelas seções, o respiro lateral vem daqui. */
.proc {
    padding-top: 7rem;
    padding-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.proc__breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    opacity: 0.75;
}

.proc__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.proc__breadcrumb a:hover {
    text-decoration: underline;
}

.proc__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.proc__lead {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 46rem;
    margin-bottom: 1.5rem;
}

.proc__signature {
    font-size: 0.9rem;
    opacity: 0.8;
    border-left: 3px solid currentColor;
    padding-left: 0.9rem;
    margin-bottom: 2.5rem;
}

.proc__section {
    margin-bottom: 2.5rem;
    max-width: 46rem;
}

.proc__section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    margin-bottom: 0.9rem;
}

.proc__section h3 {
    font-size: 1.05rem;
    margin: 1.2rem 0 0.5rem;
}

.proc__section p {
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

.proc__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.proc__list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.65;
}

.proc__list li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Bloco de chamada para contato */
.proc__cta {
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 0.9rem;
    padding: 1.75rem;
    max-width: 46rem;
    margin: 2.5rem 0;
}

.proc__cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
}

.proc__cta p {
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.proc__cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.proc__cta-buttons .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Aviso obrigatório de conduta médica */
.proc__aviso {
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.75;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-top: 1.2rem;
    max-width: 46rem;
}

.proc__outros {
    max-width: 46rem;
    margin-top: 2.5rem;
}

.proc__outros h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
}

.proc__outros-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.proc__outros-lista a {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 2rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
}

.proc__outros-lista a:hover {
    border-color: currentColor;
}

@media screen and (max-width: 576px) {
    .proc {
        padding-top: 6rem;
    }

    .proc__cta {
        padding: 1.25rem;
    }

    .proc__cta-buttons .button {
        width: 100%;
        justify-content: center;
    }
}

/* ── Correções da auditoria de 31/07 (CRM #3541) ──────────────────────────────── */

/* O .nav__overlay é pintado por cima do .nav__menu e interceptava 100% dos toques:
   no celular o menu abria e nenhum item navegava. Escopo só das páginas de
   procedimento, sem tocar no style.css que a home também usa. */
.nav__menu {
    z-index: calc(var(--z-fixed) + 1);
}

/* Hamburguer e fechar passaram de <div> para <button> (teclado e leitor de tela);
   isto zera a aparência nativa para não mudar nada visualmente. */
.nav__toggle,
.nav__close {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

/* Virar <button> trouxe o contorno azul padrão do Chrome, que destoa do tema.
   Trocado pela cor da marca - mas mantido visível, porque é o que permite a
   navegação por teclado. :focus-visible não aparece em clique de mouse. */
.nav__toggle:focus-visible,
.nav__close:focus-visible,
.proc__cta-buttons .button:focus-visible,
.proc__avaliacoes-links a:focus-visible {
    outline: 2px solid #6F5436;
    outline-offset: 3px;
    border-radius: 2px;
}

/* O dourado do tema dá 2,83:1 com texto branco e reprova em WCAG 1.4.3 AA - e é
   justamente o botão de conversão da campanha. Este par vai de 4,96:1 a 7,0:1. */
.proc__cta-buttons .button {
    background: linear-gradient(135deg, #8A6A47 0%, #6F5436 100%);
}

/* .button--ghost não existe em nenhuma folha: os dois botões saíam idênticos. */
.proc__cta-buttons .button--ghost {
    background: none;
    border: 2px solid #6F5436;
    color: #6F5436;
}

.proc__cta-buttons .button--ghost:hover {
    background: #6F5436;
    color: #fff;
}

/* Prova social: dado agregado e verificável, sem transcrever depoimento.
   O 46rem é o mesmo do .proc__lead, .proc__cta e .proc__outros - sem ele o bloco
   esticava até 1152px no desktop e ficava desalinhado com o resto da coluna. */
.proc__avaliacoes {
    max-width: 46rem;
    margin: 2.5rem 0;
    padding: 1.5rem;
    border: 1px solid rgba(111, 84, 54, .25);
    border-radius: .75rem;
}

.proc__avaliacoes h2 {
    margin-bottom: .75rem;
}

.proc__avaliacoes-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
}

.proc__avaliacoes-links a {
    color: #6F5436;
    font-weight: 600;
    text-decoration: underline;
}