/* Barsan: estilos só da página de serviços, carregados depois do site.css
 * (que tem os tokens). Índice no topo, um bloco por serviço e os passos de
 * como começa um trabalho. */

/* Índice ------------------------------------------------------------------ */

/* Barra com um atalho para cada serviço, logo abaixo da cabeça grafite. Ela
 * fica presa no topo enquanto os serviços passam por baixo e solta quando o
 * último acaba, porque vive dentro de .servicos-pagina. Os atalhos ficam numa
 * linha só: quando não cabem (no celular), a barra rola de lado. O atalho do
 * serviço que está na tela é marcado por assets/js/indice.js. */
.servicos-pagina {
    --indice-altura: 4.25rem;
}

.cabeca--indice {
    padding-bottom: 0.5rem;
}

.indice {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--grafite);
    --foco: var(--laranja);
}

/* O recuo das pontas alinha o primeiro atalho com o conteúdo (.interno) e
 * deixa a rolagem lateral ir de ponta a ponta da tela. */
.indice__lista {
    display: flex;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2));
    overflow-x: auto;
    scroll-padding-inline: var(--margem);
    scroll-snap-type: x proximity;
    scrollbar-color: var(--cinza) transparent;
    scrollbar-width: thin;
}

.indice__item {
    flex: none;
    scroll-snap-align: start;
}

.indice__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--linha-sobre-escuro);
    color: var(--branco);
    font-size: var(--texto-p);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.indice__link:hover {
    border-color: var(--laranja);
}

/* Serviço na tela: chapa branca com texto grafite. */
.indice__link[aria-current="true"] {
    border-color: var(--branco);
    background: var(--branco);
    color: var(--grafite);
}

@media (prefers-reduced-motion: no-preference) {
    html,
    .indice__lista {
        scroll-behavior: smooth;
    }
}

/* Serviço ----------------------------------------------------------------- */

/* Número e nome de um lado, texto e lista do outro. No computador o nome
 * acompanha a rolagem enquanto a lista passa, logo abaixo da barra do índice.
 * O atalho para o serviço também para abaixo da barra, e não atrás dela. */
.detalhe {
    display: grid;
    gap: 1.25rem;
    padding-block: 2.5rem;
    border-top: 1px solid var(--linha);
    scroll-margin-top: calc(var(--indice-altura) + 1rem);
}

.detalhe:first-child {
    padding-top: 0;
    border-top: 0;
}

.detalhe:last-child {
    padding-bottom: 0;
}

.detalhe__numero {
    color: var(--cobre);
    font-size: var(--texto-p);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.detalhe__nome {
    margin-top: 0.25rem;
    font-size: var(--texto-g);
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1.1;
}

.detalhe__texto {
    max-width: 36em;
}

.detalhe__rotulo {
    margin-top: 1.5rem;
    font-size: var(--texto);
    font-weight: 600;
}

.detalhe__lista {
    display: grid;
    gap: 0.5rem;
    max-width: 36em;
    margin-top: 0.75rem;
}

/* Traço laranja no lugar da bolinha, como marcação de desenho técnico. */
.detalhe__item {
    position: relative;
    padding-left: 1.5rem;
}

.detalhe__item::before {
    content: "";
    position: absolute;
    top: 0.8em;
    left: 0;
    width: 0.75rem;
    height: 2px;
    background: var(--laranja);
}

.detalhe__acao {
    margin-top: 1.5rem;
}

@media (min-width: 60em) {
    .detalhe {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
        padding-block: 3.5rem;
    }

    .detalhe__cabeca {
        position: sticky;
        top: calc(var(--indice-altura) + 2rem);
        align-self: start;
    }
}

/* Como começa ------------------------------------------------------------- */

.comeco {
    background: var(--branco);
}

.passos {
    display: grid;
    gap: 2rem 1.5rem;
    margin-top: 2rem;
}

.passo {
    padding-top: 1rem;
    border-top: 2px solid var(--grafite);
}

.passo__numero {
    color: var(--cobre);
    font-size: var(--texto-p);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.passo__titulo {
    margin-top: 0.5rem;
    font-size: var(--texto-m);
    font-stretch: var(--larga);
    font-weight: 500;
}

.passo__texto {
    margin-top: 0.5rem;
    color: var(--cinza);
}

@media (min-width: 40em) {
    .passos {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 60em) {
    .passos {
        grid-template-columns: repeat(4, 1fr);
    }
}