/* ==========================================================================
   BILLY PAGÁN · SITIO OFICIAL
   contacto.css
   PÁGINA · CONTACTO
   ========================================================================== */


/* ==========================================================================
   01 · PÁGINA
   ========================================================================== */

.pagina-contacto {

    position: relative;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    isolation: isolate;

    background: transparent;

}


/* ==========================================================================
   02 · FONDO
   ========================================================================== */

.pagina-contacto::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image:
        url("../../images/fondos/escritorio/fondo-general-desktop.jpg");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

}


/* ==========================================================================
   03 · ATMÓSFERA
   ========================================================================== */

.pagina-contacto::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(0, 0, 0, 0.025) 100%
        );

}


/* ==========================================================================
   04 · CONTENEDOR PRINCIPAL
   ========================================================================== */

.contacto-hero {

    position: relative;

    z-index: 1;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    margin: 0;

    padding: 0;

}


/* ==========================================================================
   05 · CONTENIDO
   ========================================================================== */

.contacto-contenido {

    position: relative;

    z-index: 5;

    width: 100%;

    margin: 0;

    padding:
        10rem
        6%
        8rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* ==========================================================================
   06 · CONTRATACIÓN
   ========================================================================== */

.contacto-contratacion {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.contacto-mensaje {

    width: min(100%, 720px);

    margin: 0;

    padding: 0;

    text-align: center;

}


.contacto-mensaje p {

    margin: 0;

    padding: 0;

    color: var(--color-texto-suave);

    font-family: var(--fuente-sans);

    font-size: 0.68rem;

    font-weight: 300;

    line-height: 1.8;

    letter-spacing: 0.20em;

    text-align: center;

}


/* ==========================================================================
   07 · BOTÓN · MUSIC ART PRODUCCIONES
   ========================================================================== */

.contacto-produccion {

    margin: 3rem 0 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

}


.contacto-boton-produccion {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding:
        0.85rem
        1.8rem
        0.75rem;

    color: var(--color-texto);

    background: transparent;

    border: 1px solid rgba(32, 32, 32, 0.42);

    border-radius: 0;

    font-family: var(--fuente-sans);

    font-size: 0.60rem;

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.22em;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;

}


.contacto-boton-produccion::after {

    content: "";

    position: absolute;

    left: 1.8rem;

    right: 1.8rem;

    bottom: 0.32rem;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.45s ease;

}


.contacto-boton-produccion:hover {

    color: var(--color-texto-suave);

    border-color: rgba(32, 32, 32, 0.68);

    transform: translateY(-2px);

}


.contacto-boton-produccion:hover::after {

    transform: scaleX(1);

}


/* ==========================================================================
   08 · COMUNIDAD
   ========================================================================== */

.contacto-comunidad {

    width: min(100%, 620px);

    margin: 8rem auto 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.contacto-comunidad-cabecera {

    width: 100%;

    margin: 0;

    padding: 0;

}


.contacto-comunidad-cabecera h1 {

    margin: 0;

    padding: 0;

    color: var(--color-texto);

    font-family: var(--fuente-serif);

    font-size: 2.2rem;

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: 0.02em;

    text-align: center;

}


.contacto-comunidad-cabecera p {

    max-width: 520px;

    margin: 1.2rem auto 0;

    padding: 0;

    color: var(--color-texto-suave);

    font-family: var(--fuente-sans);

    font-size: 0.66rem;

    font-weight: 300;

    line-height: 1.8;

    letter-spacing: 0.12em;

    text-align: center;

}


/* ==========================================================================
   09 · FORMULARIO
   ========================================================================== */

.contacto-formulario {

    width: 100%;

    margin: 3.5rem 0 0;

    padding: 0;

}


#sib-form {

    width: 100%;

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

}


/* ==========================================================================
   10 · CAMPOS
   ========================================================================== */

.contacto-campo {

    width: 100%;

    margin: 0 0 1.8rem;

    padding: 0;

    text-align: left;

}


.contacto-campo label {

    display: block;

    margin: 0 0 0.65rem;

    padding: 0;

    color: var(--color-texto-suave);

    font-family: var(--fuente-sans);

    font-size: 0.57rem;

    font-weight: 300;

    line-height: 1.4;

    letter-spacing: 0.18em;

    text-align: left;

}


.contacto-campo label span {

    font-size: 0.52rem;

    letter-spacing: 0.10em;

    opacity: 0.72;

}


.contacto-campo input,
.contacto-campo select {

    box-sizing: border-box;

    width: 100%;

    height: 3rem;

    margin: 0;

    padding:
        0.75rem
        0.85rem;

    color: var(--color-texto);

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

    border: 0;

    border-bottom: 1px solid rgba(32, 32, 32, 0.34);

    border-radius: 0;

    outline: none;

    font-family: var(--fuente-sans);

    font-size: 0.66rem;

    font-weight: 300;

    line-height: 1.4;

    letter-spacing: 0.08em;

    transition:
        border-color 0.35s ease,
        background 0.35s ease;

}


.contacto-campo input::placeholder {

    color: rgba(95, 95, 92, 0.68);

    opacity: 1;

}


.contacto-campo input:focus,
.contacto-campo select:focus {

    border-bottom-color: rgba(32, 32, 32, 0.75);

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

}


.contacto-ayuda {

    margin: 0.55rem 0 0;

    padding: 0;

    color: rgba(95, 95, 92, 0.78);

    font-family: var(--fuente-sans);

    font-size: 0.50rem;

    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.07em;

    text-align: left;

}


/* ==========================================================================
   11 · TELÉFONO
   ========================================================================== */

.contacto-telefono {

    width: 100%;

    display: grid;

    grid-template-columns: 82px 1fr;

    gap: 0.45rem;

}


.contacto-telefono select {

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    padding-left: 0.65rem;

    padding-right: 0.4rem;

}


/* ==========================================================================
   12 · CONSENTIMIENTOS
   ========================================================================== */

.contacto-consentimiento {

    width: 100%;

    margin: 0 0 1.35rem;

    padding: 0;

    text-align: left;

}


.contacto-check {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    cursor: pointer;

}


.contacto-check input {

    flex: 0 0 auto;

    width: 14px;

    height: 14px;

    margin: 2px 0 0;

    padding: 0;

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

    cursor: pointer;

}


.contacto-check span {

    color: var(--color-texto-suave);

    font-family: var(--fuente-sans);

    font-size: 0.55rem;

    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.06em;

}


/* ==========================================================================
   13 · BOTÓN SUSCRIBIRSE
   ========================================================================== */

.contacto-envio {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 2.8rem 0 0;

    padding: 0;

}


.contacto-boton-suscribir {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding:
        0.85rem
        1.8rem
        0.75rem;

    color: var(--color-texto);

    background: transparent;

    border: 1px solid rgba(32, 32, 32, 0.42);

    border-radius: 0;

    font-family: var(--fuente-sans);

    font-size: 0.60rem;

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.22em;

    cursor: pointer;

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;

}


.contacto-boton-suscribir::after {

    content: "";

    position: absolute;

    left: 1.8rem;

    right: 1.8rem;

    bottom: 0.32rem;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.45s ease;

}


.contacto-boton-suscribir:hover {

    color: var(--color-texto-suave);

    border-color: rgba(32, 32, 32, 0.68);

    transform: translateY(-2px);

}


.contacto-boton-suscribir:hover::after {

    transform: scaleX(1);

}


.contacto-boton-suscribir:focus-visible {

    outline: none;

    color: var(--color-texto-suave);

    border-color: rgba(32, 32, 32, 0.68);

}


/* ==========================================================================
   14 · DECLARACIÓN BREVO
   ========================================================================== */

.contacto-declaracion {

    width: 100%;

    margin: 2.4rem 0 0;

    padding: 0;

    text-align: left;

}


.contacto-declaracion p {

    margin: 0;

    padding: 0;

    color: rgba(95, 95, 92, 0.68);

    font-family: var(--fuente-sans);

    font-size: 0.45rem;

    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.03em;

    text-align: left;

}


.contacto-declaracion a {

    color: inherit;

    text-decoration: underline;

    text-underline-offset: 2px;

}


/* ==========================================================================
   15 · CAMPO ANTISPAM OCULTO
   ========================================================================== */

.contacto-campo-oculto {

    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;

    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

}


/* ==========================================================================
   16 · ESTADOS DE VALIDACIÓN
   ========================================================================== */

.contacto-campo input:invalid:not(:placeholder-shown) {

    border-bottom-color: rgba(120, 50, 50, 0.55);

}


.contacto-campo input:valid {

    border-bottom-color: rgba(32, 32, 32, 0.34);

}


/* ==========================================================================
   17 · PANTALLAS GRANDES
   ========================================================================== */

@media (min-width: 1600px) {

    .contacto-contenido {

        padding:
            11rem
            6%
            9rem;

    }


    .contacto-mensaje p {

        font-size: 0.72rem;

    }


    .contacto-produccion {

        margin-top: 3.2rem;

    }


    .contacto-comunidad {

        margin-top: 9rem;

        width: min(100%, 650px);

    }


    .contacto-comunidad-cabecera h1 {

        font-size: 2.4rem;

    }

}


/* ==========================================================================
   18 · TABLET
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .contacto-contenido {

        padding:
            9rem
            6%
            7rem;

    }


    .contacto-mensaje p {

        font-size: 0.64rem;

    }


    .contacto-produccion {

        margin-top: 2.8rem;

    }


    .contacto-comunidad {

        margin-top: 7rem;

        max-width: 600px;

    }


    .contacto-comunidad-cabecera h1 {

        font-size: 2rem;

    }

}


/* ==========================================================================
   19 · MÓVIL
   ========================================================================== */

@media (max-width: 767px) {

    .pagina-contacto::before {

        background-image:
            url("../../images/fondos/movil/fondo-general-movil.jpg");

        background-position: center center;

        background-size: cover;

        background-repeat: no-repeat;

    }


    .contacto-hero {

        min-height: 100svh;

    }


    .contacto-contenido {

        width: 100%;

        padding:
            7rem
            7%
            5rem;

        justify-content: flex-start;

        align-items: center;

        text-align: center;

    }


    .contacto-mensaje {

        max-width: 520px;

        text-align: center;

    }


    .contacto-mensaje p {

        font-size: 0.58rem;

        line-height: 1.8;

        letter-spacing: 0.16em;

        text-align: center;

    }


    .contacto-produccion {

        margin-top: 2.6rem;

    }


    .contacto-boton-produccion {

        padding:
            0.82rem
            1.35rem
            0.72rem;

        font-size: 0.56rem;

        letter-spacing: 0.18em;

    }


    .contacto-boton-produccion::after {

        left: 1.35rem;

        right: 1.35rem;

    }


    .contacto-comunidad {

        width: 100%;

        max-width: 520px;

        margin-top: 6rem;

    }


    .contacto-comunidad-cabecera h1 {

        font-size: 2rem;

    }


    .contacto-comunidad-cabecera p {

        max-width: 420px;

        margin-top: 1rem;

        font-size: 0.56rem;

        line-height: 1.8;

        letter-spacing: 0.10em;

    }


    .contacto-formulario {

        margin-top: 2.8rem;

    }


    .contacto-campo {

        margin-bottom: 1.55rem;

    }


    .contacto-campo label {

        font-size: 0.55rem;

    }


    .contacto-campo input,
    .contacto-campo select {

        height: 2.8rem;

        font-size: 0.62rem;

    }


    .contacto-ayuda {

        font-size: 0.47rem;

    }


    .contacto-check span {

        font-size: 0.52rem;

    }


    .contacto-declaracion p {

        font-size: 0.43rem;

    }

}


/* ==========================================================================
   20 · MÓVILES PEQUEÑOS
   ========================================================================== */

@media (max-width: 380px) {

    .contacto-contenido {

        padding:
            6.5rem
            7%
            5rem;

    }


    .contacto-mensaje p {

        font-size: 0.54rem;

        letter-spacing: 0.14em;

    }


    .contacto-produccion {

        margin-top: 2.3rem;

    }


    .contacto-boton-produccion {

        padding:
            0.78rem
            1.1rem
            0.68rem;

        font-size: 0.52rem;

        letter-spacing: 0.15em;

    }


    .contacto-boton-produccion::after {

        left: 1.1rem;

        right: 1.1rem;

    }


    .contacto-comunidad {

        margin-top: 5rem;

    }


    .contacto-comunidad-cabecera h1 {

        font-size: 1.8rem;

    }


    .contacto-comunidad-cabecera p {

        font-size: 0.53rem;

        letter-spacing: 0.08em;

    }


    .contacto-formulario {

        margin-top: 2.4rem;

    }


    .contacto-telefono {

        grid-template-columns: 72px 1fr;

    }


    .contacto-check span {

        font-size: 0.49rem;

    }

}


/* ==========================================================================
   21 · REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

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

    .pagina-contacto::before {

        position: absolute;

    }


    .contacto-boton-produccion,
    .contacto-boton-suscribir {

        transition: none;

    }


    .contacto-boton-produccion::after,
    .contacto-boton-suscribir::after {

        transition: none;

    }

}