/* ==========================================================================
   ONIRIC · CONTACT
   ========================================================================== */

.oniric-contact-page {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;

    overflow: clip;

    color: #f1f1ee;
    background: #080808;
}


/* ==========================================================================
   FONDO FIJO
   Una sola fotografía para hero + contenido + zona inferior
   ========================================================================== */

.oniric-contact-page__background {
    position: fixed;
    inset: 0;

    z-index: -2;

    width: 100vw;
    height: 100dvh;

/*     background-image:
        linear-gradient(
            180deg,
            rgba(30, 14, 10, 0.42) 0%,
            rgba(47, 16, 11, 0.48) 36%,
            rgba(35, 8, 6, 0.64) 70%,
            rgba(10, 5, 5, 0.84) 100%
        ),
        var(--oniric-contact-background); */
		
		    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.74) 34%, rgba(0, 0, 0, 0.94) 100%),
        var(--oniric-contact-background) center top / cover no-repeat fixed,
        #050607;

    background-repeat: no-repeat;
	    transform: scaleX(-1);

    background-size: cover;
    background-position: center center;

    pointer-events: none;
}

.oniric-contact-field__control {
	border-radius:33px !important;
}
	


/*
 * Capa general que da el tono cálido de Figma.
 * Se mantiene fija también durante el scroll.
 */

.oniric-contact-page::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(120, 86, 73, 0.25) 0%,
            rgba(98, 48, 35, 0.16) 28%,
            rgba(95, 25, 13, 0.24) 62%,
            rgba(0, 0, 0, 0.40) 100%
        );
}


/* ==========================================================================
   HERO
   ========================================================================== */
.oniric-contact-hero {
    position: relative;
    width: 100%;
    min-height: clamp(35rem, 75vh, 41rem);
    display: flex;
    align-items: center;
    padding-top: clamp(21rem, 16vh, 13rem);
    padding-bottom: clamp(5rem, 8vh, 7rem);
    flex-direction: column;
    align-content: flex-start;
}


.oniric-contact-hero__frame {
    display: flex;
    justify-content: center;
}


.oniric-contact-hero__content {
    width: min(100%, 58rem);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.oniric-contact-hero .oniric-eyebrow-tag {
    margin: 0 0 20px;

    color: rgba(241, 241, 238, 0.72);

    font-size: 1 rem;
    font-weight: 400;

    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.oniric-contact-hero__title {
    margin: 0;
    max-width: 56rem;
    color: #f1f1ee;
    font-size: clamp(2.25rem, 3.46vw, 3.2rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.045em;
}


.oniric-contact-hero__lead {
    max-width: 44rem;

    margin: 1rem auto 0;

    color: rgba(241, 241, 238, 0.90);

    font-size: clamp(1rem, 1.56vw, 1.6rem);
    font-weight: 300;

    line-height: 1.5;
}


/* ==========================================================================
   MAIN
   ========================================================================== */

.oniric-contact-main {
    position: relative;
    z-index: 2;
}


.oniric-contact-section {
    position: relative;

    width: 100%;

    padding:
        clamp(3rem, 5vw, 5rem)
        0
        clamp(8rem, 12vw, 13rem);

    background: transparent;
}


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

.oniric-contact-intro {
    width: min(100%, 74rem);

    margin: 0 auto clamp(3rem, 5vw, 5rem);

    display: block;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(18rem, 0.95fr);

    gap: clamp(4rem, 8vw, 10rem);

    align-items: start;
}


.oniric-contact-intro__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.oniric-contact-intro .oniric-eyebrow-tag {
    margin: 0 0 1.4rem;

    color: rgba(241, 241, 238, 0.56);

    font-size: 0.65rem;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.25em;
    text-transform: uppercase;
}


.oniric-contact-intro__title {
    /* max-width: 40rem; */

    margin: 0;

    color: #f1f1ee;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(2.4rem, 3.2vw, 3.6rem);
    font-weight: 300;

    line-height: 1.03;
    letter-spacing: -0.045em;
}


.oniric-contact-intro__copy {
    padding-top: 3.4rem;
}


.oniric-contact-intro__lead {
    /* max-width: 31rem; */

    margin: 0 0 1.1rem;

    color: rgba(241, 241, 238, 0.88);

    font-size: clamp(0.95rem, 1.08vw, 1.1rem);

    line-height: 1.52;
}


.oniric-contact-intro__list {
    margin: 0;
    padding: 0;

    list-style: none;

    color: rgba(241, 241, 238, 0.47);

    font-size: 0.94rem;

    line-height: 1.45;
}


.oniric-contact-intro__claim {
    margin: 1.1rem 0 0;

    color: rgba(241, 241, 238, 0.70);

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.35;
}


/* ==========================================================================
   FORMULARIO GLASS
   ========================================================================== */

.oniric-contact-form-shell {
    position: relative;

    width: min(100%, 74rem);

    margin-inline: auto;

    padding:
        clamp(1.5rem, 2vw, 2.2rem)
        clamp(1.5rem, 2.5vw, 2.75rem);

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

    border-radius: 1.35rem;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.05) 100%
        );

    -webkit-backdrop-filter:
        blur(8px)
        saturate(112%);

    backdrop-filter:
        blur(8px)
        saturate(112%);

    box-shadow:
        0 0 2.5rem
        rgba(255, 255, 255, 0.08),
        inset 0 1px 0
        rgba(255, 255, 255, 0.10);
}


/* pequeño brillo de borde */

.oniric-contact-form-shell::before {
    content: "";

    position: absolute;

    top: 0;
    left: 7%;
    right: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
        );

    pointer-events: none;
}


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

.oniric-contact-form__grid {
    display: grid;

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

    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 0.8rem;
}


.oniric-contact-form__column {
    min-width: 0;
}


/* ==========================================================================
   CAMPOS
   ========================================================================== */

.oniric-contact-field {
    margin: 0;
}


.oniric-contact-field__label {
    display: block;

    margin: 0 0 0.55rem;

    color: rgba(241, 241, 238, 0.90);

    font-size: 0.66rem;
    font-weight: 400;

    line-height: 1.2;
}


.oniric-contact-field__control {
    width: 100%;

    min-height: 3rem;

    padding:
        0.75rem
        1.15rem;

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

    border-radius: 999px;

    color: #f1f1ee;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.05)
        );

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

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

    font-size: 0.8rem;

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}


.oniric-contact-field__control::placeholder {
    color: rgba(241, 241, 238, 0.30);
}


.oniric-contact-field__control:hover {
    border-color:
        rgba(255, 255, 255, 0.48);
}


.oniric-contact-field__control:focus {
    color: #f1f1ee;

    border-color:
        rgba(255, 255, 255, 0.65);

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

    box-shadow:
        0 0 0 0.15rem
        rgba(255, 255, 255, 0.06);

    outline: none;
}


/* Select */

.oniric-contact-field__select {
    cursor: pointer;
}


/* Textarea en Figma funciona visualmente como campo simple */

.oniric-contact-field__textarea {
    height: 3rem;
    min-height: 3rem;

    resize: vertical;
}


/* ==========================================================================
   CAPTCHA
   ========================================================================== */

.oniric-contact-form__verification {
    width: 100%;

    margin-top: 1.35rem;
}


.oniric-contact-field--captcha {
    width: 100%;
}


.oniric-contact-captcha__layout {
    display: grid;

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

    gap: 1rem;

    align-items: center;
}


.oniric-contact-captcha__image {
    display: flex;
    align-items: center;
}


.oniric-contact-captcha__image img {
    display: block;

    width: auto;
    max-width: 8rem;

    height: 3rem;

    border-radius: 0.25rem;
}


.oniric-contact-captcha__input {
    min-width: 0;
}


/* ==========================================================================
   LEGAL
   ========================================================================== */

.oniric-contact-legal {
    margin:
        1rem
        0
        0;

    color:
        rgba(241, 241, 238, 0.35);

    font-size: 0.68rem;
}


.oniric-contact-legal a {
    color:
        rgba(241, 241, 238, 0.55);

    text-decoration: underline;
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.oniric-contact-submit-wrap {
    width: min(100%, 74rem);

    margin:
        1.7rem
        auto
        0;
}


.oniric-contact-submit {
    width: 100%;
    min-height: 3.7rem;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   ERRORES / FEEDBACK
   ========================================================================== */

.oniric-contact-errors,
.oniric-contact-feedback {
    width: min(100%, 74rem);

    margin:
        0 auto
        1.5rem;

    padding:
        1rem
        1.25rem;

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

    border-radius: 1rem;

    background:
        rgba(0, 0, 0, 0.22);

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

    backdrop-filter:
        blur(10px);

    color:
        rgba(241, 241, 238, 0.85);
}


.oniric-contact-field__error {
    display: block;

    margin-top: 0.4rem;

    font-size: 0.68rem;
}


/* ==========================================================================
   FOOTER
   Permite que el footer común se funda con el background de contacto
   ========================================================================== */

.oniric-contact-page + .oniric-footer,
body:has(.oniric-contact-page) .oniric-footer {
    position: relative;

    z-index: 3;

    background:
        linear-gradient(
            180deg,
            rgba(15, 5, 4, 0.08),
            rgba(7, 3, 3, 0.50)
        ) !important;

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

    backdrop-filter:
        blur(3px);
}


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

@media (max-width: 991.98px) {

    .oniric-contact-hero {
        min-height: 29rem;

        padding-top: 10rem;
        padding-bottom: 4rem;
    }


    .oniric-contact-intro {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .oniric-contact-intro__copy {
        max-width: 34rem;

        padding-top: 0;
    }

}


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

@media (max-width: 767.98px) {

    .oniric-contact-page__background {
        /*
         * background-attachment fixed da problemas en Safari/iOS.
         * Al usar un elemento position:fixed evitamos ese problema.
         */
        background-position:
            58% center;
    }


    .oniric-contact-hero {
        min-height: 28rem;

        align-items: flex-end;

        padding:
            9rem
            0
            4rem;
    }


    .oniric-contact-hero__content {
        align-items: flex-start;

        text-align: left;
    }


    .oniric-contact-hero__title {
        max-width: 95%;

        font-size:
            clamp(
                2.25rem,
                10vw,
                3.2rem
            );
    }


    .oniric-contact-hero__lead {
        margin-left: 0;
        margin-right: 0;

        max-width: 30rem;
    }


    .oniric-contact-section {
        padding-top: 2rem;
        padding-bottom: 7rem;
    }


    .oniric-contact-intro {
        margin-bottom: 2.8rem;
    }


    .oniric-contact-intro__title {
        font-size:
            clamp(
                2.1rem,
                9vw,
                3.4rem
            );
    }


    .oniric-contact-form-shell {
        padding:
            1.35rem;

        border-radius:
            1.1rem;
    }


    .oniric-contact-form__grid {
        grid-template-columns: 1fr;

        gap: 0.9rem;
    }


    .oniric-contact-captcha__layout {
        grid-template-columns: 1fr;

        gap: 0.7rem;
    }


    .oniric-contact-captcha__image img {
        height: 2.8rem;
    }


    .oniric-contact-submit {
        min-height: 3.5rem;
    }

}


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

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

    .oniric-contact-page *,
    .oniric-contact-page *::before,
    .oniric-contact-page *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}

    .oniric-footer {

        margin-top: 0px !important;

    }