/**
 * LocalMax — Página Como funciona
 *
 * Detalhamento técnico das seis etapas da metodologia LSA.
 */

.lsa-methodology {
    --lsa-heading: var(--lm-color-ink);
    --lsa-text: var(--lm-color-text);
    --lsa-muted: var(--lm-color-muted);
    --lsa-accent: var(--lm-color-primary);
    --lsa-accent-dark: var(--lm-color-primary-hover);
    --lsa-background: var(--lm-color-surface);
    --lsa-surface: var(--lm-color-white);
    --lsa-border: var(--lm-color-border);
    --lsa-line: #cfd4da;
}

.lsa-methodology .lsa-page-intro {
    padding-top: clamp(8.5rem, 14vw, 11rem);
    padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.lsa-methodology .lsa-page-title-subtitle {
    font-size: clamp(1.25rem, 2.3vw, 1.75rem);
    letter-spacing: -0.025em;
}

.lsa-methodology .lsa-stage-section {
    padding-bottom: var(--lm-section-space);
}

/* Página
    -------------------------------------------------- */
    .lsa-methodology {
        position: relative;
        overflow: hidden;
        color: var(--lsa-text);
        background-color: var(--lsa-background);
    }

    .lsa-methodology .lsa-page-header {
        max-width: 940px;
    }

    .lsa-methodology .lsa-eyebrow {
        margin-bottom: 1rem;
        color: var(--lsa-accent-dark);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .lsa-methodology .lsa-page-title {
        color: var(--lsa-heading);
        font-size: clamp(2.5rem, 6vw, 5.25rem);
        font-weight: 750;
        line-height: 0.98;
        letter-spacing: -0.055em;
        text-wrap: balance;
    }

    .lsa-methodology .lsa-page-lead {
        max-width: 760px;
        margin-inline: auto;
        color: var(--lsa-text);
        font-size: clamp(1rem, 1.8vw, 1.25rem);
        line-height: 1.7;
        text-wrap: pretty;
    }

    /* Navegação das etapas
    -------------------------------------------------- */
    .lsa-methodology .lsa-stage-navigation {
        max-width: 1060px;
        margin-inline: auto;
        padding: 0.75rem;
        background-color: rgb(255 255 255 / 88%);
        border: 1px solid var(--lsa-border);
        border-radius: 1rem;
        box-shadow: 0 0.75rem 2.5rem rgb(17 17 17 / 0.055);
    }

    .lsa-methodology .lsa-stage-link {
        display: flex;
        min-height: 68px;
        padding: 0.75rem;
        align-items: center;
        gap: 0.65rem;
        color: var(--lsa-heading);
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: 0.75rem;
        transition:
            color 200ms ease,
            background-color 200ms ease,
            border-color 200ms ease;
    }

    .lsa-methodology .lsa-stage-link:hover,
    .lsa-methodology .lsa-stage-link:focus-visible {
        color: var(--lsa-heading);
        background-color: rgb(7 204 97 / 0.065);
        border-color: rgb(7 161 78 / 0.2);
        outline: none;
    }

    .lsa-methodology .lsa-stage-link:focus-visible {
        box-shadow: 0 0 0 0.2rem rgb(7 204 97 / 0.18);
    }

    .lsa-methodology .lsa-nav-number {
        display: flex;
        width: 1.75rem;
        height: 1.75rem;
        flex: 0 0 1.75rem;
        align-items: center;
        justify-content: center;
        color: var(--lsa-accent-dark);
        font-size: 0.7rem;
        font-weight: 800;
        background-color: rgb(7 204 97 / 0.11);
        border-radius: 50%;
    }

    .lsa-methodology .lsa-nav-label {
        font-size: 0.72rem;
        font-weight: 750;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    /* Lista e conectores
    -------------------------------------------------- */
    .lsa-methodology .lsa-stage-list {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lsa-methodology .lsa-stage-list::before {
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 2rem;
        width: 1px;
        content: "";
        background: linear-gradient(
            to bottom,
            var(--lsa-accent),
            var(--lsa-line) 15%,
            var(--lsa-line) 85%,
            var(--lsa-accent)
        );
    }

    .lsa-methodology .lsa-stage-item {
        position: relative;
        padding-left: 5rem;
        scroll-margin-top: 2rem;
    }

    .lsa-methodology .lsa-stage-item:not(:last-child) {
        margin-bottom: 2rem;
    }

    .lsa-methodology .lsa-timeline-number {
        position: absolute;
        top: 2rem;
        left: 0;
        z-index: 2;
        display: flex;
        width: 4rem;
        height: 4rem;
        align-items: center;
        justify-content: center;
        color: var(--lsa-heading);
        font-size: 0.82rem;
        font-weight: 800;
        background-color: var(--lsa-accent);
        border: 0.45rem solid var(--lsa-background);
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgb(7 161 78 / 0.2);
    }

    /* Painéis técnicos
    -------------------------------------------------- */
    .lsa-methodology .lsa-stage-card {
        position: relative;
        overflow: hidden;
        background-color: var(--lsa-surface);
        border: 1px solid var(--lsa-border);
        border-radius: 1.25rem;
        box-shadow: 0 0.75rem 2.25rem rgb(17 17 17 / 0.045);
        transition:
            transform 250ms ease,
            border-color 250ms ease,
            box-shadow 250ms ease;
    }

    .lsa-methodology .lsa-stage-card::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        content: "";
        background-color: var(--lsa-accent);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 250ms ease;
    }

    .lsa-methodology .lsa-stage-summary {
        height: 100%;
        background:
            radial-gradient(
                circle at 0 0,
                rgb(7 204 97 / 0.11),
                transparent 42%
            ),
            #fbfcfc;
        border-right: 1px solid var(--lsa-border);
    }

    .lsa-methodology .lsa-icon-frame {
        display: flex;
        width: 4.5rem;
        height: 4.5rem;
        align-items: center;
        justify-content: center;
        color: var(--lsa-accent-dark);
        background-color: rgb(7 204 97 / 0.09);
        border: 1px solid rgb(7 161 78 / 0.17);
        border-radius: 1rem;
    }

    .lsa-methodology .lsa-icon {
        display: block;
        width: 2.25rem;
        height: 2.25rem;
        color: inherit;
        stroke-width: 1.65;
    }

    .lsa-methodology .lsa-stage-kicker {
        display: block;
        margin-bottom: 0.45rem;
        color: var(--lsa-accent-dark);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .lsa-methodology .lsa-stage-title {
        margin: 0;
        color: var(--lsa-heading);
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 750;
        line-height: 1;
        letter-spacing: -0.04em;
    }

    .lsa-methodology .lsa-stage-category {
        display: block;
        margin-top: 0.6rem;
        color: var(--lsa-muted);
        font-size: 0.88rem;
        font-weight: 600;
    }

    .lsa-methodology .lsa-stage-approach {
        color: var(--lsa-text);
        font-size: 0.98rem;
        line-height: 1.7;
    }

    /* Entrega técnica
    -------------------------------------------------- */
    .lsa-methodology .lsa-deliverable {
        margin-top: auto;
        padding: 1.15rem;
        background-color: rgb(7 204 97 / 0.065);
        border: 1px solid rgb(7 161 78 / 0.16);
        border-radius: 0.875rem;
    }

    .lsa-methodology .lsa-deliverable-label {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--lsa-accent-dark);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .lsa-methodology .lsa-deliverable-text {
        color: var(--lsa-heading);
        font-size: 0.92rem;
        font-weight: 650;
        line-height: 1.5;
    }

    /* Conteúdo operacional
    -------------------------------------------------- */
    .lsa-methodology .lsa-content-title {
        margin-bottom: 1.1rem;
        color: var(--lsa-heading);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .lsa-methodology .lsa-task-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lsa-methodology .lsa-task-item {
        position: relative;
        padding-left: 1.85rem;
        color: var(--lsa-text);
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .lsa-methodology .lsa-task-item:not(:last-child) {
        margin-bottom: 0.85rem;
    }

    .lsa-methodology .lsa-task-item::before {
        position: absolute;
        top: 0.42rem;
        left: 0;
        width: 0.85rem;
        height: 0.85rem;
        content: "";
        background-color: rgb(7 204 97 / 0.13);
        border: 1px solid rgb(7 161 78 / 0.35);
        border-radius: 50%;
    }

    .lsa-methodology .lsa-task-item::after {
        position: absolute;
        top: 0.6rem;
        left: 0.27rem;
        width: 0.32rem;
        height: 0.18rem;
        content: "";
        border-bottom: 1.5px solid var(--lsa-accent-dark);
        border-left: 1.5px solid var(--lsa-accent-dark);
        transform: rotate(-45deg);
    }

    .lsa-methodology .lsa-tools {
        padding-top: 1.25rem;
        border-top: 1px solid var(--lsa-border);
    }

    .lsa-methodology .lsa-tools-icon {
        display: flex;
        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;
        align-items: center;
        justify-content: center;
        color: var(--lsa-accent-dark);
        background-color: rgb(7 204 97 / 0.08);
        border-radius: 0.5rem;
    }

    .lsa-methodology .lsa-tools-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .lsa-methodology .lsa-tools-label {
        display: block;
        margin-bottom: 0.2rem;
        color: var(--lsa-heading);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .lsa-methodology .lsa-tools-text {
        color: var(--lsa-text);
        font-size: 0.88rem;
        line-height: 1.6;
    }

    /* Encerramento do ciclo
    -------------------------------------------------- */
    .lsa-methodology .lsa-cycle-footer {
        max-width: 820px;
        margin-inline: auto;
        background-color: var(--lsa-heading);
        border-radius: 1.25rem;
        box-shadow: 0 1.5rem 4rem rgb(17 17 17 / 0.12);
    }

    .lsa-methodology .lsa-cycle-footer-icon {
        display: flex;
        width: 3.5rem;
        height: 3.5rem;
        flex: 0 0 3.5rem;
        align-items: center;
        justify-content: center;
        color: var(--lsa-heading);
        background-color: var(--lsa-accent);
        border-radius: 50%;
    }

    .lsa-methodology .lsa-cycle-footer-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .lsa-methodology .lsa-cycle-footer-title {
        color: var(--lm-color-white);
        font-size: clamp(1.35rem, 3vw, 1.85rem);
        font-weight: 700;
        letter-spacing: -0.025em;
    }

    .lsa-methodology .lsa-cycle-footer-text {
        color: rgb(255 255 255 / 72%);
        line-height: 1.65;
    }

    /* Interações
    -------------------------------------------------- */
    @media (hover: hover) and (pointer: fine) {
        .lsa-methodology .lsa-stage-card:hover {
            border-color: rgb(7 161 78 / 0.45);
            box-shadow:
                0 1.5rem 3.5rem rgb(17 17 17 / 0.075),
                0 0 1.5rem rgb(7 204 97 / 0.055);
            transform: translateY(-0.35rem);
        }

        .lsa-methodology .lsa-stage-card:hover::before {
            transform: scaleY(1);
        }
    }

    .lsa-methodology .lsa-stage-card:focus-within {
        border-color: rgb(7 161 78 / 0.45);
        box-shadow:
            0 1.5rem 3.5rem rgb(17 17 17 / 0.075),
            0 0 1.5rem rgb(7 204 97 / 0.055);
        transform: translateY(-0.35rem);
    }

    .lsa-methodology .lsa-stage-card:focus-within::before {
        transform: scaleY(1);
    }

    /* Responsividade
    -------------------------------------------------- */
    @media (max-width: 991.98px) {
        .lsa-methodology .lsa-page-title {
            letter-spacing: -0.045em;
        }

        .lsa-methodology .lsa-stage-summary {
            border-right: 0;
            border-bottom: 1px solid var(--lsa-border);
        }
    }

    @media (max-width: 767.98px) {
        .lsa-methodology .lsa-stage-list::before {
            left: 1.5rem;
        }

        .lsa-methodology .lsa-stage-item {
            padding-left: 0;
            padding-top: 4.5rem;
        }

        .lsa-methodology .lsa-timeline-number {
            top: 0;
            left: 0;
            width: 3rem;
            height: 3rem;
            border-width: 0.35rem;
        }
    }

    @media (max-width: 575.98px) {
        .lsa-methodology .lsa-page-title {
            font-size: 2.5rem;
        }

        .lsa-methodology .lsa-stage-card,
        .lsa-methodology .lsa-cycle-footer {
            border-radius: 1rem;
        }

        .lsa-methodology .lsa-icon-frame {
            width: 3.75rem;
            height: 3.75rem;
        }

        .lsa-methodology .lsa-icon {
            width: 1.9rem;
            height: 1.9rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .lsa-methodology .lsa-stage-card,
        .lsa-methodology .lsa-stage-card::before,
        .lsa-methodology .lsa-stage-link {
            transition: none;
        }

        .lsa-methodology .lsa-stage-card:hover,
        .lsa-methodology .lsa-stage-card:focus-within {
            transform: none;
        }

    }

@media (min-width: 992px) {
    .lsa-methodology .lsa-cycle-footer {
        margin-top: 6rem !important;
    }
}