/* ==========================================================================
   Serviços

   Três formas, mesmo HTML:
   · base (sem JS ou com movimento reduzido): as seis linhas abertas, em fluxo;
   · .is-live: em fluxo, cada linha abre ao chegar na tela, com o espaço já reservado.
     Só vale onde nem a linha aberta cabe, como no celular deitado;
   · .is-live.is-pinned: a lista fica presa e a rolagem troca a linha aberta.
   O JS só troca .is-open; o desenho está aqui.

   A faixa aberta é o hexágono do hero ao avesso: as placas azuis vêm das laterais e
   deixam no meio uma janela com o mesmo ângulo. No celular a peça ocupa essa janela;
   no desktop a janela guarda o texto e a peça estoura para fora de uma das placas.
   ========================================================================== */

.services {
    --row: 4.25rem;
    --band-h: 10.5rem;
    --band-cut: calc(var(--band-h) * 0.236);
    --plate: 24%;
    --service-piece: 15.5rem;

    position: relative;
    padding-block: clamp(5rem, 14vw, 8rem) clamp(4rem, 10vw, 7rem);
    overflow-x: clip;
    color: var(--ink);

    /* Começa no tom em que o palco do hero termina, para não marcar uma emenda. */
    background: linear-gradient(var(--paper-mid), var(--paper) 11rem);
}

/* --- Cabeçalho ------------------------------------------------------------ */
.services__head {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding-inline: var(--gutter);
    text-align: center;
}

.services__title {
    font-size: var(--fs-section);
    font-weight: var(--fw-title);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-title);
}

.services__line {
    display: block;
}

.services__line--soft {
    color: var(--ink-3);
}

/* O hexágono do hero em miniatura, no lugar de uma palavra. */
.services__hex {
    position: relative;
    display: inline-block;
    width: 0.94em;
    height: 0.8em;
    margin-inline: 0.06em;
    vertical-align: -0.1em;
}

.services__hex::before,
.services__hex::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}

.services__hex::before {
    background: var(--orange);
    transform: translate3d(-0.07em, 0, 0);
}

.services__hex::after {
    background: var(--navy);
}

/* --- Lista ---------------------------------------------------------------- */
.services__track {
    margin-top: clamp(2.5rem, 7vw, 4rem);
}

.services__list {
    border-top: 1px solid var(--hairline);
}

.service {
    position: relative;
    border-bottom: 1px solid var(--hairline);
}

.service__toggle {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--row);
    padding-inline: var(--gutter);
    text-align: left;
}

.service__toggle:focus-visible {
    outline-offset: -4px;
}

.service__toggle:disabled,
.service__toggle[aria-disabled="true"] {
    cursor: default;
}

.service__name {
    font-size: var(--fs-row);
    font-weight: var(--fw-title);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    transition: color var(--t-base) var(--ease);
}

.service__tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-micro);
    color: var(--ink-2);
    white-space: nowrap;
}

/* No celular a etiqueta vira só o número: grupo e destaque moram no painel. */
.service__tag--end,
.service__tag .service__dot,
.service__tag-label {
    display: none;
}

.service__dot {
    flex: none;
    width: 0.3125rem;
    height: 0.3125rem;
    background: var(--orange);
}

/* --- Painel ---------------------------------------------------------------- */
.service__panel {
    display: grid;
    grid-template-rows: 1fr;
}

.service__clip {
    min-height: 0;
    overflow: hidden;
}

.service__stage {
    position: relative;
    height: calc(var(--service-piece) + 0.5rem);
}

.service__band {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: var(--band-h);
    margin-top: calc(var(--band-h) / -2);
}

.service__plate {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--plate);
}

.service__plate--start {
    left: 0;
}

.service__plate--end {
    right: 0;
}

.service__plate::before,
.service__plate::after {
    content: "";
    position: absolute;
    inset: 0;
}

.service__plate--start::before,
.service__plate--start::after {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--band-cut)) 50%, 100% 100%, 0 100%);
}

.service__plate--end::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--band-cut) 50%);
}

.service__plate::after {
    background: var(--navy);
}

/* A mesma forma, deslocada para dentro: sobra só o filete laranja da marca. */
.service__plate--start::before {
    background: var(--orange);
    transform: translate3d(calc(var(--band-h) * 0.05), 0, 0);
}

.service__piece {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: var(--service-piece);
    height: var(--service-piece);
    margin: calc(var(--service-piece) / -2) 0 0 calc(var(--service-piece) / -2);
    pointer-events: none;
}

.service__image {
    width: 100%;
    height: 100%;
}

.service__copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 0.875rem;
    padding: 0.5rem var(--gutter) 2rem;
}

.service__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--ink-2);
}

.service__text {
    max-width: 38ch;
    font-size: var(--fs-small);
    line-height: var(--lh-text);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ==========================================================================
   Abertura
   ========================================================================== */

.services.is-live .service__band {
    clip-path: inset(0);
    transition: clip-path var(--t-slow) var(--ease);
}

.services.is-live .service__plate {
    transition: translate var(--t-slow) var(--ease);
}

.services.is-live .service__piece {
    transition:
        opacity var(--t-base) var(--ease),
        translate var(--t-slow) var(--ease-heavy),
        rotate var(--t-slow) var(--ease-heavy),
        scale var(--t-slow) var(--ease-heavy),
        visibility 0s;
}

/* Fechada, ou ainda esperando a entrada terminar. */
.services.is-live .service:not(.is-open) .service__band,
.services.is-live:not(.is-ready) .service__band {
    clip-path: inset(50% 0);
}

.services.is-live .service:not(.is-open) .service__plate--start,
.services.is-live:not(.is-ready) .service__plate--start {
    translate: -18% 0;
}

.services.is-live .service:not(.is-open) .service__plate--end,
.services.is-live:not(.is-ready) .service__plate--end {
    translate: 18% 0;
}

.services.is-live .service:not(.is-open) .service__piece,
.services.is-live:not(.is-ready) .service__piece {
    visibility: hidden;
    opacity: 0;
    translate: 2.5rem 1.5rem;
    rotate: 7deg;
    scale: 0.86;
    transition:
        opacity var(--t-fast) var(--ease),
        translate 0s linear var(--t-fast),
        rotate 0s linear var(--t-fast),
        scale 0s linear var(--t-fast),
        visibility 0s linear var(--t-fast);
}

/* O texto e o botão chegam depois da faixa. */
.services.is-live .service__copy {
    transition:
        opacity var(--t-base) var(--ease) 0.15s,
        translate var(--t-slow) var(--ease) 0.15s;
}

.services.is-live .service:not(.is-open) .service__copy,
.services.is-live:not(.is-ready) .service__copy {
    opacity: 0;
    translate: 0 0.75rem;
}

.services.is-pinned .service__panel {
    transition: grid-template-rows var(--t-slow) var(--ease);
}

.services.is-pinned .service:not(.is-open) .service__panel {
    grid-template-rows: 0fr;
}

/* Parada, a peça segue balançando como no hero. */
.services.is-ready .service.is-open .service__image {
    transform-origin: 50% -160%;
    animation: sway 7s ease-in-out infinite;
}

/* O texto se escreve a cada abertura. */
.services.is-ready .service.is-open .char {
    opacity: 1;
    transition: opacity 0.1s linear;
    transition-delay: calc(var(--i) * 6ms + 0.3s);
}

/* --- Entrada: título em duas etapas e linhas subindo uma a uma ---------------- */
.services.is-live .tag,
.services.is-live .services__line,
.services.is-live .service__toggle,
.services.is-live .services__hex {
    opacity: 0;
}

.services.is-live .service {
    border-bottom-color: transparent;
}

.services.is-in .tag {
    opacity: 1;
    animation: fade-in 0.8s var(--ease) both;
}

.services.is-in .services__line {
    opacity: 1;
    animation: unveil 1s var(--ease) 0.08s backwards;
}

.services.is-in .services__line--soft {
    animation-delay: 0.2s;
}

.services.is-in .services__hex {
    opacity: 1;
    animation: pop 0.7s var(--ease) 0.5s backwards;
}

.services.is-in .service {
    border-bottom-color: var(--hairline);
    transition: border-color var(--t-slow) var(--ease) calc(var(--n) * 70ms + 0.25s);
}

.services.is-in .service__toggle {
    opacity: 1;
    animation: rise 0.9s var(--ease) calc(var(--n) * 70ms + 0.25s) backwards;
}

.services .tag__gear {
    animation: spin 14s linear infinite;
}

@media (hover: hover) {
    .services.is-pinned .service:not(.is-open) .service__toggle:hover .service__name {
        color: var(--navy);
    }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
    .services {
        --row: 4.5rem;
        --band-h: 12.5rem;
        --plate: 27%;
        --service-piece: 18.5rem;
    }

    /* O texto alinha com o nome do serviço, não com o número. */
    .service__copy {
        padding-left: calc(var(--gutter) + 2.25rem);
    }
}

/* ==========================================================================
   Desktop: a linha inteira vira faixa, com o texto na janela e a peça na placa
   ========================================================================== */
@media (min-width: 1024px) {
    .services {
        --row: 4.75rem;
        --band-h: 15.5rem;
        --plate: 29%;
        --service-piece: min(20vw, 15rem);
        --piece-x: 77%;
    }

    .service__toggle {
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem;
    }

    .service__name {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
    }

    .services.is-live .service:not(.is-open) .service__name {
        color: var(--ink-2);
    }

    /* A etiqueta nasce sobre a placa azul; fechada, volta para o fundo claro. */
    .service__tag {
        grid-row: 1;
        height: 1.875rem;
        padding-inline: 0.75rem;
        color: var(--white);
        background: var(--glass);
        border: 1px solid var(--hairline-light);
        border-radius: var(--radius-pill);
        transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
    }

    .services.is-live .service:not(.is-open) .service__tag,
    .services.is-live:not(.is-ready) .service__tag {
        color: var(--ink-2);
        background: none;
        border-color: var(--hairline);
    }

    .service__tag .service__dot,
    .service__tag-label {
        display: block;
    }

    .service__tag--start {
        grid-column: 1;
        justify-self: start;
    }

    .service__tag--end {
        display: flex;
        grid-column: 3;
        justify-self: end;
    }

    .service__meta {
        display: none;
    }

    /* A faixa cobre a linha inteira: palco e recorte deixam de ser referência de posição. */
    .service__stage {
        position: static;
        height: 0;
    }

    .service__band {
        inset: 0;
        height: auto;
        margin: 0;
    }

    .service__piece {
        left: var(--piece-x);
    }

    .service.is-open {
        z-index: 2;
    }

    .service__copy {
        justify-items: center;
        align-content: start;
        gap: 1.125rem;
        width: min(29vw, 27rem);
        min-height: calc(var(--band-h) - var(--row));
        margin-inline: auto;
        padding: 0 0 1.75rem;
        text-align: center;
    }

    .service__text {
        max-width: none;
    }

    /* Linhas pares: tudo espelhado, a peça passa para a placa da esquerda. */
    .service:nth-child(even) .service__band {
        transform: scaleX(-1);
    }

    .service:nth-child(even) .service__piece {
        left: calc(100% - var(--piece-x));
    }
}

@media (min-width: 1440px) {
    .services {
        --band-h: 16.5rem;
    }
}

/* ==========================================================================
   Presa na tela: a rolagem troca a linha aberta. As medidas acompanham a altura da
   tela, e --list-h vem do JS: é a altura da lista com a linha mais alta aberta.
   ========================================================================== */
.services.is-pinned {
    --service-step: calc(var(--screen) * 0.55);
    --pin-top: max(calc(var(--header-h) + 0.5rem), calc((var(--screen) + var(--header-h) - var(--list-h)) / 2));

    /* O que não coube: a lista sobe essa distância aos poucos, até a última linha. */
    --list-over: max(0px, calc(var(--list-h) + var(--pin-top) + 0.75rem - var(--screen)));
}

/* Cada linha ganha um trecho de rolagem. */
.services.is-pinned .services__track::after {
    content: "";
    display: block;
    height: calc(var(--service-step) * var(--steps));
}

/* A margem negativa desconta o que a lista subiu, para não sobrar um vão ao soltar. */
.services.is-pinned .services__list {
    position: sticky;
    top: var(--pin-top);
    margin-bottom: calc(var(--list-over) * -1);
    translate: 0 calc(var(--list-over) * var(--open-share) * -1);
    transition: translate var(--t-slow) var(--ease);
}

@media (max-width: 1023.98px) {
    .services.is-pinned {
        --row: clamp(2.75rem, calc(var(--screen) * 0.072), 4.5rem);
        --service-piece: min(15.5rem, calc(var(--screen) * 0.31));
        --band-h: calc(var(--service-piece) * 0.68);
    }

    /* Grupo e destaque ficam de fora: a tela é pouca para a lista inteira. */
    .services.is-pinned .service__meta {
        display: none;
    }

    .services.is-pinned .service__copy {
        padding-bottom: 1.25rem;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .services.is-pinned {
        --service-piece: min(18.5rem, calc(var(--screen) * 0.31));
    }
}

@media (min-width: 1024px) {
    .services.is-pinned {
        --row: clamp(3.25rem, calc(var(--screen) * 0.095), 5rem);
        --band-h: clamp(11.5rem, calc(var(--screen) * 0.34), 18rem);

        /* Com uma aberta por vez, a peça pode invadir as linhas vizinhas. */
        --service-piece: min(24vw, calc(var(--band-h) * 1.25), 28rem);
    }
}