/* ==========================================================
   COMO FUNCIONA
   ========================================================== */

.process {
    position: relative;

    overflow: hidden;

    background:
        var(--color-surface-navy);

    color:
        var(--color-text-inverse);
}


/* ==========================================================
   DETALHE AMBIENTAL
   ========================================================== */

.process::before {
    content: "";

    position: absolute;

    top: -260px;
    right: -220px;

    width: 640px;
    height: 640px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(181, 154, 104, 0.12) 0%,
            rgba(181, 154, 104, 0.04) 42%,
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================================
   HEADER
   ========================================================== */

.process__header {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap:
        clamp(
            var(--space-6),
            7vw,
            var(--space-15)
        );

    margin-bottom:
        clamp(
            var(--space-10),
            8vw,
            var(--space-15)
        );
}


.process__heading {
    max-width: 800px;
}


.process__eyebrow {
    color:
        var(--color-accent-soft);
}


.process__title {
    max-width: 800px;

    margin-top:
        var(--space-2);

    color:
        var(--color-text-inverse);

    letter-spacing:
        -0.035em;
}


.process__title span {
    display: block;

    color:
        var(--color-accent-soft);
}


.process__intro {
    max-width: 500px;
}


.process__intro p {
    color:
        var(--color-text-muted-inverse);
}


.process__intro p + p {
    margin-top:
        var(--space-2);
}


/* ==========================================================
   STEPS
   ========================================================== */

.process-steps {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-bottom:
        clamp(
            var(--space-10),
            9vw,
            var(--space-20)
        );

    border-top:
        1px solid
        var(--color-border-dark);

    border-bottom:
        1px solid
        var(--color-border-dark);
}


/* Linha de progressão */

.process-steps::before {
    content: "";

    position: absolute;

    top: 72px;
    left: calc(16.666% + 36px);
    right: calc(16.666% + 36px);

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(181, 154, 104, 0.20),
            var(--color-accent),
            rgba(181, 154, 104, 0.20)
        );
}


/* ==========================================================
   STEP
   ========================================================== */

.process-step {
    position: relative;

    min-height: 460px;

    padding:
        clamp(
            2rem,
            3vw,
            3rem
        );

    border-right:
        1px solid
        var(--color-border-dark);
}


.process-step:last-child {
    border-right: 0;
}


/* ==========================================================
   STEP TOP
   ========================================================== */

.process-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        var(--space-8);
}


.process-step__number {
    color:
        var(--color-accent-soft);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.18em;
}


/* ==========================================================
   STEP ICON
   ========================================================== */

.process-step__icon {
    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(217, 201, 167, 0.32);

    border-radius:
        50%;

    background:
        var(--color-surface-navy);

    color:
        var(--color-accent-soft);
}


.process-step__icon svg {
    width: 23px;
    height: 23px;

    fill: none;
}


/* ==========================================================
   STEP CONTENT
   ========================================================== */

.process-step__title {
    max-width:
        310px;

    color:
        var(--color-text-inverse);

    font-size:
        clamp(
            1.8rem,
            2.4vw,
            2.45rem
        );

    line-height:
        1.05;
}


.process-step__text {
    max-width:
        340px;

    margin-top:
        var(--space-3);

    color:
        var(--color-text-muted-inverse);

    font-size:
        0.96rem;

    line-height:
        1.75;
}


.process-step__highlight {
    max-width:
        320px;

    margin-top:
        var(--space-4);

    color:
        var(--color-accent-soft);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    line-height:
        1.6;
}


/* ==========================================================
   PERSONALIZATION PANEL
   ========================================================== */

.customization-panel {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        clamp(
            var(--space-6),
            8vw,
            var(--space-15)
        );

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);
}


/* ==========================================================
   PANEL INTRO
   ========================================================== */

.customization-panel__intro {
    align-self:
        center;

    max-width:
        470px;
}


.customization-panel__title {
    margin-top:
        var(--space-2);

    color:
        var(--color-text-inverse);

    font-size:
        clamp(
            2.35rem,
            3.4vw,
            3.8rem
        );

    letter-spacing:
        -0.03em;

    line-height:
        1.02;
}


.customization-panel__intro p {
    margin-top:
        var(--space-3);

    color:
        var(--color-text-muted-inverse);
}


/* ==========================================================
   DEMO LINK
   ========================================================== */

.process-demo-link {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    margin-top:
        var(--space-4);

    color:
        var(--color-accent-soft);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}


.process-demo-link span {
    position: relative;
}


.process-demo-link span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform var(--transition-base);
}


.process-demo-link svg {
    width: 17px;
    height: 17px;

    fill: none;

    transition:
        transform var(--transition-base);
}


.process-demo-link:hover span::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.process-demo-link:hover svg {
    transform:
        translate(2px, -2px);
}


/* ==========================================================
   PANEL GRID
   ========================================================== */

.customization-panel__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        var(--color-border-dark);

    border-left:
        1px solid
        var(--color-border-dark);
}


/* ==========================================================
   PERSONALIZATION ITEM
   ========================================================== */

.customization-item {
    min-height:
        240px;

    padding:
        clamp(
            1.5rem,
            3vw,
            2rem
        );

    border-right:
        1px solid
        var(--color-border-dark);

    border-bottom:
        1px solid
        var(--color-border-dark);

    transition:
        background-color var(--transition-base);
}


.customization-item:hover {
    background:
        rgba(255, 255, 255, 0.045);
}


/* ==========================================================
   PERSONALIZATION ICON
   ========================================================== */

.customization-item__icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    margin-bottom:
        var(--space-3);

    border:
        1px solid
        rgba(217, 201, 167, 0.28);

    border-radius:
        50%;

    color:
        var(--color-accent-soft);
}


.customization-item__icon svg {
    width: 19px;
    height: 19px;

    fill: none;
}


/* ==========================================================
   PERSONALIZATION TITLE
   ========================================================== */

.customization-item__title {
    color:
        var(--color-text-inverse);

    font-family:
        var(--font-body);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.3;
}


/* ==========================================================
   LIST
   ========================================================== */

.customization-item__list {
    display: grid;

    gap:
        0.5rem;

    margin-top:
        var(--space-2);
}


.customization-item__list li {
    position: relative;

    padding-left:
        1rem;

    color:
        var(--color-text-muted-inverse);

    font-size:
        var(--font-size-sm);

    line-height:
        1.6;
}


.customization-item__list li::before {
    content: "";

    position: absolute;

    top: 0.65em;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius:
        50%;

    background:
        var(--color-accent);
}


/* ==========================================================
   REVEAL STAGGER
   ========================================================== */

.process-step:nth-child(2) {
    transition-delay:
        100ms;
}


.process-step:nth-child(3) {
    transition-delay:
        200ms;
}