/* Páginas internas: compartilham medidas, cores e botões de style.css. */
.pagina-servicos {
    width: min(60rem, calc(100% - var(--gutter) - var(--gutter)));
    margin: var(--secao) auto;
}
.cabecalho-pagina { margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; }
.pagina-servicos h1 {
    margin-bottom: .75rem;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}
.botoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }

/* Atalhos em formato de cartão (área do cliente e suporte). */
.botao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: linear-gradient(180deg, var(--superficie), var(--fundo-alt));
    color: var(--texto);
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.botao .icone-caixa { margin-bottom: 1rem; }
.botao-titulo { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.botao-descricao { color: var(--suave); font-size: .9375rem; }
.botao-seta { margin-top: auto; padding-top: 1.25rem; color: var(--laranja-claro); font-size: .9375rem; font-weight: 600; }
/* Cartão com menu suspenso (Downloads: GDOOR ou BR TI). */
.botao-menu { position: relative; padding: 0; align-items: stretch; }
.botao-menu summary {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; height: 100%;
    padding: clamp(1.25rem, 3vw, 1.75rem); list-style: none; cursor: pointer; border-radius: inherit;
}
.botao-menu summary::-webkit-details-marker { display: none; }
.botao-menu summary:focus-visible { outline: 3px solid var(--laranja-claro); outline-offset: 3px; }
.seta-menu { display: inline-block; transition: transform .2s; }
.botao-menu[open] .seta-menu { transform: rotate(180deg); }
.botao-menu[open] { border-color: rgba(255, 106, 0, .6); transform: none; }
.menu-suspenso {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 20; display: grid; gap: .25rem;
    padding: .5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
    box-shadow: var(--sombra);
}
.menu-suspenso a {
    display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: .625rem 1rem;
    border-radius: .75rem; color: var(--texto); font-weight: 600; text-decoration: none;
}
.menu-suspenso a span { color: var(--laranja-claro); }
.menu-suspenso a:hover, .menu-suspenso a:focus-visible { background: var(--laranja-fundo); outline: none; }
.acoes-pagina { margin-top: 2.5rem; text-align: center; }
.voltar { border-color: var(--borda); background: transparent; color: var(--suave); font-weight: 500; }

/* Outras soluções. */
.servicos-hero {
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
    border-bottom: 1px solid var(--borda);
    background:
        radial-gradient(50rem 26rem at 90% -10%, rgba(255, 106, 0, .2), transparent 60%),
        var(--fundo);
}
.servicos-hero h1 {
    max-width: 20ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.servicos-hero > p { max-width: 62ch; color: var(--suave); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.atalhos { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2rem; }
.atalhos a {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.atalhos a span { color: var(--laranja-claro); font-size: .8125rem; font-weight: 600; }

.servico-detalhe { display: grid; gap: 1.5rem; border-bottom: 1px solid var(--borda); }
.servico-detalhe:nth-of-type(odd) { background: var(--fundo-alt); }
.servico-cabecalho .icone-caixa { display: grid; margin-bottom: 1.25rem; }
.servico-cabecalho .sobre-titulo { display: block; }
.servico-cabecalho h2 { max-width: 20ch; margin-bottom: 0; }
.servico-corpo p { max-width: 68ch; margin-bottom: 1.25rem; color: var(--suave); }
.servico-corpo strong { color: var(--texto); }
.video-consultorio { width: 100%; max-width: 45rem; margin: 2rem 0; }
.video-consultorio iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--borda); border-radius: var(--raio); background: #000; box-shadow: var(--sombra); }
.video-consultorio figcaption { margin-top: .75rem; color: var(--suave); font-size: .9rem; line-height: 1.6; }
.video-consultorio figcaption a { color: var(--laranja-claro); text-decoration: underline; text-underline-offset: .2em; }
.lista-servicos { display: grid; gap: .75rem; max-width: 68ch; margin: 1.5rem 0 2rem; list-style: none; }
.lista-servicos li {
    position: relative;
    padding: .875rem 1rem .875rem 3rem;
    border: 1px solid var(--borda);
    border-radius: .75rem;
    background: var(--superficie);
    color: var(--suave);
}
.lista-servicos li::before {
    content: "✓";
    position: absolute;
    top: .875rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1875rem;
    border-radius: 50%;
    background: var(--laranja-fundo);
    color: var(--laranja);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}
.lista-servicos strong { color: var(--texto); }
.servico-detalhe + .cta { padding-top: var(--secao); }

@media (min-width: 36rem) {
    .botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .botoes.hub-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
    .botoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
    .botao-menu summary { height: auto; }
    .menu-suspenso {
        position: static;
        align-self: stretch;
        width: calc(100% - 1.5rem);
        margin: 0 .75rem .75rem;
        border-radius: .75rem;
        box-shadow: none;
    }
}
@media (min-width: 64rem) {
    .servico-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
    .servico-cabecalho { position: sticky; top: 7rem; }
}
@media (hover: hover) and (pointer: fine) {
    .botao:hover { border-color: rgba(255, 106, 0, .6); transform: translateY(-3px); box-shadow: 0 0 3rem -1rem rgba(255, 106, 0, .4); }
    .voltar:hover { border-color: var(--laranja); color: var(--texto); }
    .atalhos a:hover { border-color: var(--laranja); background: var(--laranja-fundo); }
}