/* ================================================================
   AP NEURAL WEB — CONTACTO / SIGNAL SYSTEM V1
================================================================ */

.page-contact {

    background:
        #08090B;

    overflow-x:
        clip;
}


.contact-main {

    position: relative;

    z-index: 2;
}



/* ================================================================
   BACKGROUND / SIGNAL FIELD
================================================================ */

.contact-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(181,32,74,.075),
            transparent 26rem
        ),

        radial-gradient(
            circle at 14% 30%,
            rgba(151,154,162,.025),
            transparent 22rem
        ),

        radial-gradient(
            circle at 86% 72%,
            rgba(139,21,56,.035),
            transparent 24rem
        );
}


.contact-field__svg {

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        max(108vw,92rem);

    height: auto;

    transform:
        translate(-50%,-50%);

    opacity: .50;
}


.contact-field__grid path,
.contact-field__frame rect,
.contact-field__route {

    fill: none;

    vector-effect:
        non-scaling-stroke;
}


.contact-field__grid path {

    stroke:
        rgba(151,154,162,.055);

    stroke-width: 1;

    stroke-dasharray:
        2 13;
}


.contact-field__frame rect {

    stroke:
        rgba(151,154,162,.08);

    stroke-width: 1;
}


.contact-field__frame rect:nth-child(2) {

    stroke:
        rgba(181,32,74,.18);
}


.contact-field__frame rect:nth-child(3) {

    fill:
        rgba(139,21,56,.055);

    stroke:
        rgba(181,32,74,.32);
}


.contact-field__route {

    stroke:
        rgba(181,32,74,.18);

    stroke-width: 1;

    stroke-dasharray:
        5 13;
}


.contact-field__traveler {

    fill:
        #B5204A;

    filter:
        drop-shadow(
            0 0 7px
            rgba(181,32,74,.62)
        );
}



/* ================================================================
   HERO
================================================================ */

.contact-hero {

    min-height:
        min(100svh,62rem);

    display: flex;

    align-items: center;

    padding-top:
        clamp(8rem,13vw,11rem);
}


.contact-hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(20rem,.54fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: end;
}


.contact-hero h1 {

    max-width: 11ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.7rem,7.4vw,7.9rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}


.contact-hero h1 span {

    display: block;

    color:
        #B5204A;
}


.contact-hero__lead {

    max-width: 43rem;

    margin-bottom: 2rem;

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

    font-size:
        clamp(1.05rem,1.3vw,1.3rem);

    line-height: 1.75;
}


.contact-hero__actions {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;
}



/* ================================================================
   BUTTON EFFECT / TRANSMISSION

   Sólo contenido de Contacto.
   No toca el CTA del header.
================================================================ */

.contact-main .contact-button {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


.contact-main .contact-button > span {

    position: relative;

    z-index: 3;
}


.contact-main .contact-button > i {

    position: absolute;

    z-index: 2;

    left: -32%;
    top: 50%;

    width: 26%;
    height: 1px;

    transform:
        translateY(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(243,243,241,.9),
            #B5204A
        );

    box-shadow:
        0 0 .55rem
        rgba(181,32,74,.26);

    transition:

        left
        580ms
        cubic-bezier(.22,1,.36,1),

        width
        400ms
        cubic-bezier(.22,1,.36,1);
}


@media (hover:hover) and (pointer:fine) {

    .contact-main
    .contact-button:hover > i {

        left: 106%;

        width: 40%;
    }

}



/* ================================================================
   HERO SIGNAL CARD
================================================================ */

.contact-hero__signal {

    position: relative;

    padding: 1rem;

    background:
        rgba(11,12,15,.74);

    border:
        1px solid
        rgba(151,154,162,.14);

    backdrop-filter:
        blur(10px);

    overflow: hidden;

    transition:

        transform
        350ms
        cubic-bezier(.22,1,.36,1),

        border-color
        300ms ease;
}


.contact-hero__signal::before {

    content: "";

    position: absolute;

    left: -1px;
    top: -1px;

    width: 3rem;
    height: 3rem;

    border-left:
        1px solid #B5204A;

    border-top:
        1px solid #B5204A;
}


.contact-hero__signal-head {

    display: flex;

    justify-content:
        space-between;

    padding-bottom: .9rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

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

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

    font-size: .62rem;

    letter-spacing: .11em;
}


.contact-hero__signal-head span:last-child {

    color:
        #B5204A;
}


.contact-hero__signal-core {

    display: grid;

    gap: .55rem;

    padding:
        2rem 0;
}


.contact-hero__signal-core > div {

    display: grid;

    grid-template-columns:
        2rem 1fr;

    gap: .7rem;

    align-items: center;

    padding:
        .85rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.55);

    transition:

        transform
        300ms
        cubic-bezier(.22,1,.36,1),

        border-color
        280ms ease,

        background
        280ms ease;
}


.contact-hero__signal-core span {

    color:
        #B5204A;

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

    font-size: .6rem;
}


.contact-hero__signal-core strong {

    text-transform: uppercase;

    font-size: .84rem;
}


.contact-hero__signal-core > i {

    justify-self: center;

    width: 1px;
    height: .8rem;

    background:
        rgba(181,32,74,.42);
}


.contact-hero__signal-footer {

    display: grid;

    gap: .7rem;

    padding-top: .9rem;

    border-top:
        1px solid
        rgba(151,154,162,.10);

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

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

    font-size: .6rem;
}


.contact-hero__meter {

    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.10);
}


.contact-hero__meter i {

    position: absolute;

    top: 0;

    width: 22%;
    height: 100%;

    background:
        #B5204A;

    animation:
        contactHeroSignal
        3.3s
        ease-in-out
        infinite;
}


@media (hover:hover) and (pointer:fine) {

    .contact-hero__signal:hover {

        transform:
            translateY(-4px);

        border-color:
            rgba(181,32,74,.28);
    }


    .contact-hero__signal-core > div:hover {

        transform:
            translateX(.35rem);

        border-color:
            rgba(181,32,74,.30);

        background:
            rgba(139,21,56,.06);
    }

}



/* ================================================================
   02 / BRAND NODE
================================================================ */

.contact-brand {

    position: relative;

    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(181,32,74,.105),
            transparent 24rem
        ),

        linear-gradient(
            180deg,
            rgba(16,17,20,.28),
            rgba(88,11,35,.028),
            rgba(8,9,11,.22)
        );
}


.contact-brand__index {

    margin-bottom:
        clamp(2rem,4vw,3rem);

    color:
        #B5204A;

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

    font-size: .64rem;

    letter-spacing: .13em;

    text-align: center;
}


.contact-brand__system {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(12rem,1fr)
        minmax(17rem,.7fr)
        minmax(12rem,1fr);

    gap:
        clamp(2rem,5vw,5rem);

    align-items: center;

    max-width: 76rem;

    margin-inline: auto;
}



/* ================================================================
   EXACT SAME LOGO LANGUAGE AS 03 / CONSTRUCCIÓN
================================================================ */

.contact-brand__identity {

    display: grid;

    justify-items: center;

    gap: 1.3rem;

    text-align: center;
}


.contact-brand__logo {

    position: relative;

    display: grid;

    place-items: center;

    width:
        clamp(13rem,19vw,18rem);

    aspect-ratio: 1;

    isolation: isolate;

    background:

        radial-gradient(
            circle,
            rgba(181,32,74,.09),
            rgba(88,11,35,.025) 47%,
            transparent 70%
        );
}


.contact-brand__logo::before {

    content: "";

    position: absolute;

    inset: 6%;

    z-index: -2;

    border:
        1px solid
        rgba(151,154,162,.18);

    transform:
        rotate(45deg);
}


.contact-brand__logo::after {

    content: "";

    position: absolute;

    inset: 17%;

    z-index: -1;

    border:
        1px solid
        rgba(181,32,74,.34);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 2rem
        rgba(139,21,56,.035);

    transition:

        inset
        650ms
        cubic-bezier(.22,1,.36,1),

        border-color
        350ms ease;
}


.contact-brand__logo-art {

    position: relative;

    z-index: 2;

    display: block;

    width: 72%;
    height: 82%;

    background:

        linear-gradient(
            150deg,
            #F3F3F1 0%,
            #BFC1C6 27%,
            #B5204A 57%,
            #8B1538 78%,
            #F3F3F1 100%
        );

    -webkit-mask:
        url("../../svg/ap-logo-animated.svg")
        center / contain
        no-repeat;

    mask:
        url("../../svg/ap-logo-animated.svg")
        center / contain
        no-repeat;

    filter:

        drop-shadow(
            0 0 .6rem
            rgba(243,243,241,.08)
        )

        drop-shadow(
            0 0 1.25rem
            rgba(181,32,74,.18)
        );

    transition:

        transform
        650ms
        cubic-bezier(.22,1,.36,1),

        filter
        450ms ease;
}


.contact-brand__logo > span {

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 46%;
    height: 1px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            #B5204A,
            #F3F3F1,
            #B5204A,
            transparent
        );

    box-shadow:
        0 0 .7rem
        rgba(181,32,74,.25);
}


.contact-brand__name {

    display: grid;

    gap: .35rem;
}


.contact-brand__name strong {

    color:
        #F3F3F1;

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

    font-size:
        clamp(1.15rem,1.8vw,1.55rem);

    letter-spacing: .03em;

    text-transform: uppercase;
}


.contact-brand__name small {

    color:
        rgba(179,181,187,.86);

    font-size: .8rem;
}


@media (hover:hover) and (pointer:fine) {

    .contact-brand__identity:hover
    .contact-brand__logo::after {

        inset: 11%;

        border-color:
            rgba(181,32,74,.62);
    }


    .contact-brand__identity:hover
    .contact-brand__logo-art {

        transform:
            scale(1.045);

        filter:

            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )

            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }

}



/* ================================================================
   BRAND SIDE SIGNALS
================================================================ */

.contact-brand__side {

    position: relative;

    display: grid;

    gap: .6rem;

    min-width: 0;

    padding: 1.4rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(10,11,14,.48);
}


.contact-brand__side span {

    color:
        #B5204A;

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

    font-size: .61rem;

    letter-spacing: .12em;
}


.contact-brand__side strong {

    font-size:
        clamp(1.35rem,2.4vw,2.2rem);

    line-height: 1.05;

    text-transform: uppercase;
}


.contact-brand__line {

    position: absolute;

    top: 50%;

    height: 1px;

    background:
        rgba(181,32,74,.26);

    pointer-events: none;
}


.contact-brand__line--left {

    left: 23%;

    width: 18%;
}


.contact-brand__line--right {

    right: 23%;

    width: 18%;
}


.contact-brand__line i {

    position: absolute;

    top: -2px;

    width: 5px;
    height: 5px;

    background:
        #B5204A;

    box-shadow:
        0 0 .65rem
        rgba(181,32,74,.7);

    animation:
        contactBrandLine
        3.8s
        ease-in-out
        infinite;
}


.contact-brand__line--right i {

    animation-delay:
        -1.9s;
}



/* ================================================================
   COMMON HEADINGS
================================================================ */

.contact-channels__head,
.contact-request__head {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(18rem,.48fr);

    gap:
        clamp(2rem,7vw,7rem);

    align-items: end;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}


.contact-channels h2,
.contact-request h2,
.contact-ready h2 {

    font-size:
        clamp(2.7rem,5vw,5.4rem);

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}


.contact-channels h2 span,
.contact-request h2 span,
.contact-ready h2 span {

    color:
        #B5204A;
}


.contact-channels__head > p,
.contact-request__head > p {

    margin: 0;

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

    line-height: 1.75;
}



/* ================================================================
   CHANNEL CARDS
================================================================ */

.contact-channels__grid {

    display: grid;

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

    gap: .75rem;
}


.contact-channel {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 25rem;

    padding: 1.35rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(12,13,16,.68);

    overflow: hidden;

    transition:

        transform
        340ms
        cubic-bezier(.22,1,.36,1),

        border-color
        300ms ease,

        background
        300ms ease;
}


.contact-channel::before {

    content: "";

    position: absolute;

    left: -1px;
    top: 0;

    width: 1px;
    height: 0;

    background:
        #B5204A;

    transition:
        height
        450ms
        cubic-bezier(.22,1,.36,1);
}


.contact-channel__number {

    display: block;

    margin-bottom:
        clamp(4rem,8vw,7rem);

    color:
        #B5204A;

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

    font-size: .65rem;
}


.contact-channel small {

    display: block;

    margin-bottom: .8rem;

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

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

    font-size: .6rem;

    letter-spacing: .11em;
}


.contact-channel h3 {

    margin-bottom: .9rem;

    font-size:
        clamp(1.45rem,2.2vw,2.15rem);

    line-height: 1.05;

    overflow-wrap: anywhere;
}


.contact-channel p {

    margin: 0;

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

    font-size: .87rem;

    line-height: 1.7;
}


.contact-channel__action {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 1rem;

    margin-top: auto;

    padding-top: 1.2rem;

    color:
        #F3F3F1;

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

    font-size: .66rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.contact-channel__action i {

    color:
        #B5204A;

    font-style: normal;

    transition:
        transform
        300ms
        cubic-bezier(.22,1,.36,1);
}


/*
Señal que entra en la tarjeta.
Diferente del borde perimetral de Proyectos.
*/

.contact-channel__signal {

    position: absolute;

    left: -42%;
    bottom: 4.2rem;

    width: 38%;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #B5204A
        );

    box-shadow:
        0 0 .5rem
        rgba(181,32,74,.22);

    transition:

        left
        580ms
        cubic-bezier(.22,1,.36,1);
}


@media (hover:hover) and (pointer:fine) {

    .contact-channel:hover {

        transform:
            translateY(-5px);

        border-color:
            rgba(181,32,74,.30);

        background:

            linear-gradient(
                145deg,
                rgba(139,21,56,.065),
                rgba(12,13,16,.78)
            );
    }


    .contact-channel:hover::before {

        height: 100%;
    }


    .contact-channel:hover
    .contact-channel__signal {

        left: 0;
    }


    .contact-channel:hover
    .contact-channel__action i {

        transform:
            translateX(.35rem);
    }

}



/* ================================================================
   FORM SHELL
================================================================ */

.contact-request {

    border-top:
        1px solid
        rgba(151,154,162,.08);
}


.contact-form-shell {

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(10,11,14,.84);
}


/* ================================================================
   PROGRESS
================================================================ */

.contact-progress {

    display: grid;

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

    border-bottom:
        1px solid
        rgba(151,154,162,.11);
}


.contact-progress__step {

    position: relative;

    display: grid;

    grid-template-columns:
        2rem 1fr;

    gap: .7rem;

    align-items: center;

    min-height: 5.4rem;

    padding: 1rem;

    border-right:
        1px solid
        rgba(151,154,162,.10);

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


.contact-progress__step:last-child {

    border-right: 0;
}


.contact-progress__step::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        #B5204A;

    transition:
        width
        500ms
        cubic-bezier(.22,1,.36,1);
}


.contact-progress__step.is-active::after,
.contact-progress__step.is-complete::after {

    width: 100%;
}


.contact-progress__step > span {

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

    font-size: .62rem;
}


.contact-progress__step strong {

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

    font-size: .9rem;

    text-transform: uppercase;
}


.contact-progress__step.is-active {

    color:
        #F3F3F1;

    background:
        rgba(139,21,56,.055);
}


.contact-progress__step.is-active > span,
.contact-progress__step.is-complete > span {

    color:
        #B5204A;
}



/* ================================================================
   FORM
================================================================ */

.contact-form {

    padding:
        clamp(1.3rem,4vw,3.5rem);
}


.contact-form__step {

    min-width: 0;

    margin: 0;

    padding: 0;

    border: 0;
}


.contact-form__step[hidden] {

    display: none;
}


.contact-form__step.is-active {

    animation:
        contactStepIn
        460ms
        cubic-bezier(.22,1,.36,1);
}


.contact-form legend {

    margin-bottom: .7rem;

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

    font-size:
        clamp(2rem,4vw,3.6rem);

    line-height: 1;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.contact-form__intro {

    max-width: 44rem;

    margin:
        0 0 2.3rem;

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

    line-height: 1.7;
}



/* ================================================================
   PROJECT TYPE CARDS
================================================================ */

.contact-type-grid {

    display: grid;

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

    gap: .65rem;

    margin-bottom: 2rem;
}


.contact-type {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 10rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(13,14,17,.55);

    cursor: pointer;

    overflow: hidden;

    transition:

        transform
        300ms
        cubic-bezier(.22,1,.36,1),

        border-color
        280ms ease,

        background
        280ms ease;
}


.contact-type::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        #B5204A;

    transform:
        translateX(-102%);

    transition:
        transform
        430ms
        cubic-bezier(.22,1,.36,1);
}


.contact-type input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.contact-type > span {

    display: block;

    margin-bottom: auto;

    color:
        #B5204A;

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

    font-size: .61rem;
}


.contact-type strong {

    margin-bottom: .35rem;

    text-transform: uppercase;
}


.contact-type small {

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

    font-size: .72rem;
}


.contact-type:has(input:checked) {

    border-color:
        rgba(181,32,74,.45);

    background:
        rgba(139,21,56,.075);
}


.contact-type:has(input:checked)::after {

    transform:
        translateX(0);
}


@media (hover:hover) and (pointer:fine) {

    .contact-type:hover {

        transform:
            translateY(-3px);

        border-color:
            rgba(181,32,74,.30);
    }

}



/* ================================================================
   INPUTS
================================================================ */

.contact-fields {

    display: grid;

    gap: 1rem;
}


.contact-fields--2 {

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


.contact-field-group {

    position: relative;

    display: grid;

    gap: .55rem;

    min-width: 0;

    margin-bottom: 1rem;
}


.contact-field-group label {

    color:
        #F3F3F1;

    font-size: .82rem;

    font-weight: 600;
}


.contact-field-group label small {

    margin-left: .35rem;

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

    font-weight: 400;
}


.contact-field-group input,
.contact-field-group textarea,
.contact-field-group select {

    width: 100%;

    min-width: 0;

    color:
        #F3F3F1;

    background:
        rgba(8,9,11,.72);

    border:
        1px solid
        rgba(151,154,162,.16);

    border-radius: 0;

    outline: 0;

    padding:
        .95rem 1rem;

    font: inherit;

    transition:

        border-color
        250ms ease,

        background
        250ms ease,

        box-shadow
        250ms ease;
}


.contact-field-group textarea {

    resize: vertical;

    min-height: 8rem;
}


.contact-field-group input:focus,
.contact-field-group textarea:focus,
.contact-field-group select:focus {

    border-color:
        rgba(181,32,74,.68);

    background:
        rgba(139,21,56,.035);

    box-shadow:
        inset 3px 0 0
        rgba(181,32,74,.72);
}


.contact-field-group
[aria-invalid="true"] {

    border-color:
        rgba(181,32,74,.85);
}


.contact-field-group__meta {

    justify-self: end;

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

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

    font-size: .58rem;
}



/* ================================================================
   CONSENT
================================================================ */

.contact-consent {

    display: grid;

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

    gap: .8rem;

    align-items: start;

    margin-top: 1.2rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

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

    font-size: .79rem;

    line-height: 1.65;
}


.contact-consent input {

    margin-top: .23rem;

    accent-color:
        #B5204A;
}


.contact-consent a {

    color:
        #F3F3F1;

    text-decoration:
        underline;

    text-underline-offset:
        .2em;
}



/* ================================================================
   FORM ACTIONS
================================================================ */

.contact-form__actions {

    display: flex;

    justify-content:
        flex-end;

    gap: .7rem;

    margin-top: 2rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(151,154,162,.10);
}


.contact-form__error {

    min-height: 1.3rem;

    margin-top: .8rem;

    color:
        #D95A7A;

    font-size: .78rem;
}


.contact-form__notice {

    max-width: 44rem;

    margin:
        1rem 0 0 auto;

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

    font-size: .72rem;

    line-height: 1.6;

    text-align: right;
}


.contact-form__status {

    padding:
        0
        clamp(1.3rem,4vw,3.5rem)
        1.4rem;

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

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

    font-size: .67rem;
}



/* ================================================================
   BEFORE WRITING
================================================================ */

.contact-before {

    border-top:
        1px solid
        rgba(151,154,162,.08);
}


.contact-before__grid {

    display: grid;

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

    gap: .7rem;

    margin-top:
        clamp(2.5rem,5vw,4rem);
}


.contact-before__card {

    position: relative;

    min-height: 18rem;

    padding: 1.35rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(12,13,16,.62);

    overflow: hidden;

    transition:

        transform
        320ms
        cubic-bezier(.22,1,.36,1),

        border-color
        280ms ease,

        background
        280ms ease;
}


.contact-before__card > span {

    display: block;

    margin-bottom:
        clamp(4rem,7vw,6rem);

    color:
        #B5204A;

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

    font-size: .64rem;
}


.contact-before__card h3 {

    margin-bottom: .7rem;

    font-size:
        clamp(1.35rem,2vw,1.8rem);

    text-transform: uppercase;
}


.contact-before__card p {

    margin: 0;

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

    font-size: .85rem;

    line-height: 1.7;
}


.contact-before__card > i {

    position: absolute;

    right: 0;
    bottom: 1.4rem;

    width: 0;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #B5204A
        );

    transition:
        width
        480ms
        cubic-bezier(.22,1,.36,1);
}


@media (hover:hover) and (pointer:fine) {

    .contact-before__card:hover {

        transform:
            translateY(-4px);

        border-color:
            rgba(181,32,74,.28);

        background:
            rgba(139,21,56,.045);
    }


    .contact-before__card:hover > i {

        width: 48%;
    }

}



/* ================================================================
   READY TERMINAL
================================================================ */

.contact-ready {

    border-top:
        1px solid
        rgba(151,154,162,.08);
}


.contact-ready__inner {

    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: center;
}


.contact-ready__terminal {

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(10,11,14,.76);
}


.contact-ready__terminal-head {

    display: flex;

    justify-content:
        space-between;

    padding: .85rem 1rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

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

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

    font-size: .6rem;

    letter-spacing: .11em;
}


.contact-ready__terminal-head span:last-child {

    color:
        #B5204A;
}


.contact-ready__terminal-body {

    display: grid;

    gap: 1rem;

    padding:
        clamp(2rem,4vw,3.5rem);
}


.contact-ready__terminal-body > span {

    color:
        #B5204A;

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

    font-size: .61rem;

    letter-spacing: .11em;
}


.contact-ready__terminal-body strong {

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

    font-size:
        clamp(1.8rem,3vw,3.2rem);

    line-height: 1;

    text-transform: uppercase;
}


.contact-ready__terminal-body p {

    margin: 0;

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

    line-height: 1.7;
}


.contact-ready__route {

    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.08);
}


.contact-ready__route i {

    position: absolute;

    left: -25%;

    top: 0;

    width: 24%;
    height: 100%;

    background:
        #B5204A;

    animation:
        contactReadyRoute
        4s
        linear
        infinite;
}


.contact-ready__action {

    max-width: 38rem;
}


.contact-ready__action
.ap-section-number {

    margin-bottom: 1rem;
}


.contact-ready__action h2 {

    margin-bottom: 2rem;
}



/* ================================================================
   FOOTER
================================================================ */

.contact-footer {

    position: relative;

    z-index: 3;

    padding:
        clamp(3.5rem,6vw,5.5rem)
        0
        1.5rem;

    background:
        #08090B;

    border-top:
        1px solid
        rgba(52,54,61,.55);
}


.contact-footer::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;
}


.contact-footer
.site-footer__grid {

    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: start;
}


.contact-footer
.site-footer__brand {

    display: flex;

    align-items: flex-start;

    gap: 1rem;
}


.contact-footer
.site-footer__brand > div {

    display: flex;

    flex-direction: column;

    gap: .4rem;
}


.contact-footer
.site-footer__brand strong {

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

    text-transform: uppercase;
}


.contact-footer
.site-footer__brand > div span {

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

    font-size: .82rem;
}


.contact-footer
.site-footer__nav {

    display: grid;

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

    gap: 2rem;
}


.contact-footer
.site-footer__nav > div {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}


.contact-footer
.site-footer__nav strong {

    margin-bottom: .25rem;

    color:
        #B5204A;

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

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.contact-footer
.site-footer__nav a {

    position: relative;

    width: fit-content;

    max-width: 100%;

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

    font-size: .87rem;
}


/*
No se define ::after aquí.
El activo del footer pertenece a components.css.
*/


.contact-footer
.site-footer__bottom {

    display: flex;

    justify-content:
        space-between;

    gap: 1rem;

    margin-top: 4rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(52,54,61,.48);

    color:
        rgba(151,154,162,.58);

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

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}



/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1000px) {

    .contact-brand__system {

        grid-template-columns:
            minmax(10rem,.8fr)
            minmax(15rem,.7fr)
            minmax(10rem,.8fr);

        gap: 1.4rem;
    }


    .contact-channels__grid {

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


    .contact-channel:last-child {

        grid-column:
            1 / -1;

        min-height: 18rem;
    }

}



/* ================================================================
   <= 900
================================================================ */

@media (max-width: 900px) {

    .contact-hero__grid,
    .contact-channels__head,
    .contact-request__head,
    .contact-ready__inner,
    .contact-footer
    .site-footer__grid {

        grid-template-columns: 1fr;
    }


    .contact-hero__signal {

        max-width: 40rem;
    }


    .contact-brand__system {

        grid-template-columns: 1fr;

        justify-items: center;
    }


    .contact-brand__side {

        width:
            min(100%,30rem);

        text-align: center;
    }


    .contact-brand__side--left {

        order: 1;
    }


    .contact-brand__identity {

        order: 2;
    }


    .contact-brand__side--right {

        order: 3;
    }


    .contact-brand__line {

        display: none;
    }


    .contact-type-grid {

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

}



/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 767px) {

    .contact-field__svg {

        width:
            max(190vw,59rem);

        opacity: .30;
    }


    .contact-hero {

        min-height: 0;

        padding-top: 8rem;
    }


    .contact-hero h1 {

        max-width: 10ch;

        font-size:
            clamp(3rem,15vw,5.2rem);
    }


    .contact-hero__actions,
    .contact-form__actions {

        display: grid;

        grid-template-columns: 1fr;
    }


    .contact-hero__actions
    .ap-button,
    .contact-form__actions
    .ap-button,
    .contact-ready__action
    .ap-button {

        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    .contact-brand {

        background:

            radial-gradient(
                circle at 50% 45%,
                rgba(181,32,74,.11),
                transparent 18rem
            ),

            linear-gradient(
                180deg,
                rgba(16,17,20,.28),
                rgba(88,11,35,.025),
                rgba(8,9,11,.18)
            );
    }


    .contact-brand__logo {

        width:
            min(66vw,17rem);
    }


    .contact-brand__logo-art {

        width: 74%;
        height: 84%;
    }


    .contact-channels__grid,
    .contact-before__grid,
    .contact-type-grid,
    .contact-fields--2 {

        grid-template-columns: 1fr;
    }


    .contact-channel,
    .contact-channel:last-child {

        grid-column: auto;

        min-height: 19rem;
    }


    .contact-channel__number {

        margin-bottom: 3rem;
    }


    .contact-progress {

        grid-template-columns: 1fr;
    }


    .contact-progress__step {

        min-height: 4rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.09);
    }


    .contact-progress__step:last-child {

        border-bottom: 0;
    }


    .contact-form {

        padding:
            1.3rem 1rem;
    }


    .contact-form legend {

        font-size:
            clamp(2rem,10vw,3rem);
    }


    .contact-type {

        min-height: 8.5rem;
    }


    .contact-form__notice {

        text-align: left;
    }


    .contact-before__card {

        min-height: 0;
    }


    .contact-before__card > span {

        margin-bottom: 2.7rem;
    }


    .contact-footer
    .site-footer__nav {

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

        gap:
            2rem 1.4rem;
    }


    .contact-footer
    .site-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }

}



/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 479px) {

    .contact-footer
    .site-footer__nav {

        grid-template-columns: 1fr;
    }


    .contact-brand__side {

        padding: 1rem;
    }

}



/* ================================================================
   KEYFRAMES
================================================================ */

@keyframes contactHeroSignal {

    0%,
    100% {

        left: -24%;
    }

    50% {

        left: 102%;
    }

}


@keyframes contactBrandLine {

    0% {

        left: 0;

        opacity: .25;
    }

    50% {

        left:
            calc(100% - 5px);

        opacity: 1;
    }

    100% {

        left: 0;

        opacity: .25;
    }

}


@keyframes contactStepIn {

    from {

        opacity: .15;

        transform:
            translateY(.65rem);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes contactReadyRoute {

    from {

        left: -25%;
    }

    to {

        left: 102%;
    }

}



/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

    .contact-field__traveler,
    .contact-hero__meter i,
    .contact-brand__line i,
    .contact-ready__route i {

        display: none;
    }


    .contact-brand__logo-art,
    .contact-brand__logo::after,
    .contact-channel,
    .contact-type,
    .contact-before__card {

        transition:
            none !important;
    }


    .contact-form__step.is-active {

        animation:
            none !important;
    }

}



/* AP CONTACT CUSTOM SELECT V2 START */


/* ================================================================
   SELECT AP
   Sustituye visualmente el popup blanco nativo.
================================================================ */

.contact-select-native {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;
}


.contact-custom-select {

    position: relative;

    z-index: 20;

    width: 100%;

    min-width: 0;
}


/* ================================================================
   TRIGGER
================================================================ */

.contact-custom-select__trigger {

    position: relative;

    display: grid;

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

    gap: 1rem;

    align-items: center;

    width: 100%;

    min-height: 3.45rem;

    padding:
        .9rem 1rem;

    color:
        #F3F3F1;

    text-align: left;

    font: inherit;

    background:

        linear-gradient(
            135deg,
            rgba(16,17,20,.96),
            rgba(10,11,14,.96)
        );

    border:
        1px solid
        rgba(151,154,162,.18);

    border-radius: 0;

    cursor: pointer;

    transition:

        border-color
        240ms ease,

        background
        240ms ease,

        box-shadow
        240ms ease;
}


.contact-custom-select__value {

    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.contact-custom-select:not([data-has-value="true"])
.contact-custom-select__value {

    color:
        rgba(151,154,162,.78);
}


/* flecha propia */

.contact-custom-select__arrow {

    position: relative;

    width: .72rem;
    height: .72rem;

    border-right:
        1px solid #B5204A;

    border-bottom:
        1px solid #B5204A;

    transform:
        translateY(-.18rem)
        rotate(45deg);

    transition:
        transform
        300ms
        cubic-bezier(.22,1,.36,1);
}


.contact-custom-select.is-open
.contact-custom-select__arrow {

    transform:
        translateY(.18rem)
        rotate(225deg);
}


.contact-custom-select__trigger:focus-visible {

    outline: none;

    border-color:
        rgba(181,32,74,.72);

    box-shadow:

        inset 3px 0 0
        rgba(181,32,74,.76),

        0 0 0 1px
        rgba(181,32,74,.08);
}


.contact-select-native[aria-invalid="true"]
+
.contact-custom-select
.contact-custom-select__trigger {

    border-color:
        rgba(181,32,74,.88);

    box-shadow:
        inset 3px 0 0
        rgba(181,32,74,.82);
}


/* ================================================================
   PANEL
   Misma sensación de capa oscura del menú móvil.
================================================================ */

.contact-custom-select__menu {

    position: absolute;

    z-index: 100;

    left: 0;
    right: 0;

    top:
        calc(100% + .45rem);

    display: grid;

    padding: .45rem;

    background:

        linear-gradient(
            155deg,
            rgba(16,17,20,.985),
            rgba(8,9,11,.985)
        );

    border:
        1px solid
        rgba(151,154,162,.18);

    box-shadow:

        0 1.5rem 4rem
        rgba(0,0,0,.55),

        inset 0 1px 0
        rgba(243,243,241,.025);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-.4rem);

    pointer-events: none;

    transition:

        opacity
        220ms ease,

        visibility
        220ms ease,

        transform
        300ms
        cubic-bezier(.22,1,.36,1);
}


.contact-custom-select.is-open
.contact-custom-select__menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* línea superior AP */

.contact-custom-select__menu::before {

    content: "";

    position: absolute;

    left: .45rem;
    right: .45rem;
    top: 0;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            #B5204A,
            rgba(181,32,74,.10) 70%,
            transparent
        );
}


/* ================================================================
   OPCIONES
================================================================ */

.contact-custom-select__option {

    position: relative;

    display: grid;

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

    gap: .8rem;

    align-items: center;

    width: 100%;

    min-height: 3.4rem;

    padding:
        .7rem .8rem;

    color:
        rgba(199,201,206,.82);

    font: inherit;

    text-align: left;

    background:
        transparent;

    border: 0;

    border-bottom:
        1px solid
        rgba(151,154,162,.075);

    cursor: pointer;

    overflow: hidden;

    transition:

        color
        220ms ease,

        background
        220ms ease,

        padding-left
        300ms
        cubic-bezier(.22,1,.36,1);
}


.contact-custom-select__option:last-child {

    border-bottom: 0;
}


.contact-custom-select__option::before {

    content: attr(data-index);

    color:
        rgba(181,32,74,.72);

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

    font-size: .57rem;

    letter-spacing: .08em;
}


.contact-custom-select__option::after {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            #B5204A,
            transparent
        );

    transition:
        width
        300ms
        cubic-bezier(.22,1,.36,1);
}


.contact-custom-select__option.is-selected {

    color:
        #F3F3F1;

    background:
        rgba(139,21,56,.08);
}


.contact-custom-select__option.is-selected::before {

    color:
        #B5204A;
}


.contact-custom-select__option.is-selected::after {

    width: 1.15rem;
}


@media (hover:hover) and (pointer:fine) {

    .contact-custom-select__trigger:hover {

        border-color:
            rgba(181,32,74,.38);

        background:

            linear-gradient(
                135deg,
                rgba(22,22,26,.98),
                rgba(12,13,16,.98)
            );
    }


    .contact-custom-select__option:hover {

        color:
            #F3F3F1;

        padding-left: 1.15rem;

        background:

            linear-gradient(
                90deg,
                rgba(139,21,56,.10),
                rgba(16,17,20,.34)
            );
    }


    .contact-custom-select__option:hover::after {

        width: .7rem;
    }

}


/* ================================================================
   MOBILE

   Parece una capa/panel, no el selector blanco del sistema.
================================================================ */

@media (max-width:767px) {

    .contact-custom-select__trigger {

        min-height: 3.6rem;
    }


    .contact-custom-select__menu {

        top:
            calc(100% + .35rem);

        padding: .4rem;

        max-height: 18rem;

        overflow-y: auto;

        overscroll-behavior:
            contain;
    }


    .contact-custom-select__option {

        min-height: 3.7rem;

        padding:
            .8rem .7rem;
    }

}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion:reduce) {

    .contact-custom-select__menu,
    .contact-custom-select__trigger,
    .contact-custom-select__arrow,
    .contact-custom-select__option {

        transition:
            none !important;
    }

}


/* AP CONTACT CUSTOM SELECT V2 END */



/* === AP CONTACT MOBILE LOGO SEQUENCE V8 20260829 === */


@keyframes apContactLogoFrameV8 {

    0%,
    10%,
    100% {

        inset:
            17%;

        border-color:
            rgba(181,32,74,.34);

        box-shadow:

            0 0 2rem
            rgba(139,21,56,.035);
    }


    20%,
    38% {

        inset:
            11%;

        border-color:
            rgba(181,32,74,.62);

        box-shadow:

            0 0 2.5rem
            rgba(139,21,56,.075);
    }


    52%,
    88% {

        inset:
            17%;

        border-color:
            rgba(181,32,74,.34);

        box-shadow:

            0 0 2rem
            rgba(139,21,56,.035);
    }

}


@keyframes apContactLogoArtV8 {

    0%,
    18%,
    100% {

        transform:

            translateZ(0)
            scale(1);

        filter:

            drop-shadow(
                0 0 .6rem
                rgba(243,243,241,.08)
            )

            drop-shadow(
                0 0 1.25rem
                rgba(181,32,74,.18)
            );
    }


    28%,
    46% {

        transform:

            translateZ(0)
            scale(1.045);

        filter:

            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )

            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }


    58%,
    88% {

        transform:

            translateZ(0)
            scale(1);

        filter:

            drop-shadow(
                0 0 .6rem
                rgba(243,243,241,.08)
            )

            drop-shadow(
                0 0 1.25rem
                rgba(181,32,74,.18)
            );
    }

}


@keyframes apContactLogoLineV8 {

    0%,
    30%,
    100% {

        transform:

            translateX(-50%)
            scaleX(.42);

        opacity:
            .45;
    }


    42%,
    58% {

        transform:

            translateX(-50%)
            scaleX(1);

        opacity:
            1;

        box-shadow:

            0 0 1rem
            rgba(181,32,74,.48);
    }


    72%,
    90% {

        transform:

            translateX(-50%)
            scaleX(.55);

        opacity:
            .62;
    }

}


@media
(max-width: 767px)
and
(prefers-reduced-motion: no-preference) {

    .contact-brand__identity.is-mobile-logo-sequence
    .contact-brand__logo::after {

        animation:

            apContactLogoFrameV8
            5.2s
            cubic-bezier(.45,0,.55,1)
            infinite;
    }


    .contact-brand__identity.is-mobile-logo-sequence
    .contact-brand__logo-art {

        animation:

            apContactLogoArtV8
            5.2s
            cubic-bezier(.45,0,.55,1)
            infinite;
    }


    .contact-brand__identity.is-mobile-logo-sequence
    .contact-brand__logo > span {

        transform-origin:
            center;

        animation:

            apContactLogoLineV8
            5.2s
            ease-in-out
            infinite;
    }

}


/* ================================================================
   AP NEURAL WEB — CONTACT BRAND / CURRENT LOGO
   Conserva marco, línea, hover y secuencia móvil.
================================================================ */

.contact-brand__logo
.contact-brand__logo-art {

    display: block;

    width: 72%;
    height: 82%;

    object-fit: contain;

    /*
     * La versión anterior construía el símbolo
     * mediante una máscara SVG.
     * Ahora mostramos directamente el logo oficial.
     */
    background: none;

    -webkit-mask: none;
    mask: none;

    filter:
        drop-shadow(
            0 0 .6rem
            rgba(243,243,241,.08)
        )
        drop-shadow(
            0 0 1.25rem
            rgba(181,32,74,.18)
        );

    transform:
        translateZ(0);

    transition:
        transform
        650ms
        cubic-bezier(.22,1,.36,1),

        filter
        450ms
        ease;
}


/*
 * Hover original conservado,
 * ahora aplicado a la imagen real.
 */

@media (hover:hover) and (pointer:fine) {

    .contact-brand__identity:hover
    .contact-brand__logo
    .contact-brand__logo-art {

        transform:
            translateZ(0)
            scale(1.045);

        filter:
            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )
            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }

}


/* Móvil */

@media (max-width:767px) {

    .contact-brand__logo
    .contact-brand__logo-art {

        width: 74%;
        height: 84%;
    }

}


/*
 * No se toca la animación existente:
 *
 * apContactLogoFrameV8
 * apContactLogoArtV8
 * apContactLogoLineV8
 *
 * Al conservar .contact-brand__logo-art,
 * siguen funcionando sobre el nuevo logo.
 */

/* ================================================================
   END AP CONTACT CURRENT LOGO
================================================================ */


/* AP CONTACT MOBILE TITLE FIX START */


/* ================================================================
   CONTACTO — H1 MÓVIL
   Evita partir "Conversemos".
================================================================ */

@media (max-width:767px) {

    .page-contact
    .contact-hero h1 {

        /*
         * Quitamos el límite antiguo de 10ch.
         * Ese ancho era demasiado pequeño para
         * la palabra "Conversemos".
         */

        max-width:
            min(
                100%,
                12.5ch
            );

        font-size:
            clamp(
                2.55rem,
                11.6vw,
                3.75rem
            );

        line-height: .92;

        letter-spacing: -.052em;

        /*
         * Nunca cortar una palabra.
         */

        word-break: normal !important;

        overflow-wrap: normal !important;

        hyphens: none !important;

        text-wrap: balance;
    }

}


/* Teléfonos especialmente estrechos */

@media (max-width:380px) {

    .page-contact
    .contact-hero h1 {

        max-width: 100%;

        font-size:
            clamp(
                2.3rem,
                11.3vw,
                2.75rem
            );

        letter-spacing: -.045em;
    }

}


/* AP CONTACT MOBILE TITLE FIX END */