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

.contact-hero{

    position:relative;

    height:70vh;

    min-height:600px;

    background:url('../images/contact-hero.jpg') center center;

    background-size:cover;

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(20,8,31,.80),
        rgba(20,8,31,.65)
    );

}

.contact-overlay{

    position:relative;

    z-index:2;

    width:900px;

    max-width:90%;

    text-align:center;

}

.contact-overlay span{

    color:#E8C76A;

    letter-spacing:5px;

    text-transform:uppercase;

}

.contact-overlay h1{

    font-family:'Great Vibes',cursive;

    color:#D4AF37;

    font-size:90px;

    margin:20px 0;

}

.contact-overlay p{

    color:white;

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:28px;

    line-height:1.8;

}

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

.contact-section{

    width:90%;

    max-width:1400px;

    margin:120px auto;

}

.contact-grid{

    display:grid;

    grid-template-columns:40% 60%;

    gap:70px;

    align-items:start;

}

.contact-info{

    background:#221133;

    border-radius:30px;

    padding:50px;

    border:1px solid rgba(212,175,55,.35);

}

.contact-info span{

    color:#E8C76A;

    letter-spacing:4px;

    text-transform:uppercase;

}

.contact-info h2{

    font-family:'Great Vibes',cursive;

    font-size:64px;

    color:#D4AF37;

    margin:20px 0;

}

.contact-info p{

    color:#F7F2E9;

    font-family:'Cormorant Garamond',serif;

    font-size:24px;

    line-height:1.8;

}

.contact-info ul{

    list-style:none;

    padding:0;

    margin-top:40px;

}

.contact-info li{

    margin:20px 0;

    color:#F7F2E9;

    font-size:20px;

}

/*======================================
WPFORMS
======================================*/

.contact-form{

    background:#221133;

    border-radius:30px;

    padding:50px;

    border:1px solid rgba(212,175,55,.35);

}

.wpforms-field-label{

    color:#E8C76A !important;

    font-weight:600 !important;

}

.wpforms-container input,
.wpforms-container textarea{

    background:#14081F !important;

    border:1px solid #4d2d72 !important;

    color:white !important;

    border-radius:15px !important;

    padding:15px !important;

}

.wpforms-container textarea{

    min-height:180px !important;

}

.wpforms-submit{

    background:#D4AF37 !important;

    color:#14081F !important;

    border:none !important;

    border-radius:40px !important;

    padding:15px 40px !important;

    font-weight:bold !important;

    transition:.3s;

}

.wpforms-submit:hover{

    background:#E8C76A !important;

}

/*======================================
FAQ
======================================*/

.faq{

    width:90%;

    max-width:1200px;

    margin:120px auto;

    text-align:center;

}

.faq span{

    color:#E8C76A;

    text-transform:uppercase;

    letter-spacing:4px;

}

.faq h2{

    font-family:'Great Vibes',cursive;

    font-size:70px;

    color:#D4AF37;

    margin:20px 0 60px;

}

.faq-item{

    background:#221133;

    border-radius:20px;

    padding:30px;

    margin:25px 0;

    border:1px solid rgba(212,175,55,.25);

}

.faq-item h3{

    color:white;

    margin-bottom:15px;

}

.faq-item p{

    color:#F7F2E9;

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

}

/*======================================
CTA
======================================*/

.contact-cta{

    width:90%;

    max-width:900px;

    margin:120px auto;

    text-align:center;

}

.contact-cta h2{

    font-family:'Great Vibes',cursive;

    color:#D4AF37;

    font-size:72px;

}

.contact-cta p{

    color:#F7F2E9;

    font-family:'Cormorant Garamond',serif;

    font-size:26px;

    margin:30px 0;

}

/* Ocultar las etiquetas de los subcampos Nombre/Apellidos */

.wpforms-field-name .wpforms-field-row-block label{

    display:none !important;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:40px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    min-width:0;

}

.contact-item .icon{

    flex-shrink:0;

    font-size:22px;

}

.contact-item .text{

    color:var(--text);

    font-size:1.2rem;

    line-height:1.5;

    overflow-wrap:anywhere;

    word-break:break-word;

    min-width:0;

}
/* ==========================================
   CONTACTO - RESPONSIVE
========================================== */

/* TABLET GRANDE */

@media screen and (max-width: 1200px) {

    .contact-section {
        width: 92%;
        max-width: 1100px;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .contact-info,
    .contact-form {
        padding: 35px;
    }

    .contact-info h2 {
        font-size: 55px;
    }

    .contact-overlay h1 {
        font-size: 75px;
    }

}


/* TABLET */

@media screen and (max-width: 992px) {

    .contact-hero {
        height: 60vh;
        min-height: 500px;
    }

    .contact-overlay {
        width: 90%;
    }

    .contact-overlay h1 {
        font-size: 65px;
    }

    .contact-overlay p {
        font-size: 24px;
    }

    .contact-section {
        width: 90%;
        margin: 80px auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-info,
    .contact-form {
        width: 100%;
        box-sizing: border-box;
    }

}


/* MÓVIL */

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

    .contact-hero {
        height: auto;
        min-height: 450px;
        padding: 80px 20px;
        box-sizing: border-box;
    }

    .contact-overlay {
        width: 900px;
        max-width: 90%;
    }

    .contact-overlay span {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .contact-overlay h1 {
        font-size: 55px;
        line-height: 1.1;
        margin: 15px 0;
    }

    .contact-overlay p {
        font-size: 20px;
        line-height: 1.6;
    }

    .contact-section {
        width: 92%;
        margin: 60px auto;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-info,
    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 30px 25px;
        box-sizing: border-box;
        border-radius: 24px;
    }

    .contact-info h2 {
        font-size: 48px;
    }

    .contact-info p {
        font-size: 20px;
    }

    .contact-info ul {
        margin-top: 30px;
    }

    .contact-item {
        width: 100%;
        max-width: 100%;
        gap: 12px;
    }

    .contact-item .text {
        font-size: 18px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .contact-form {
        overflow: hidden;
    }

    .wpforms-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wpforms-field,
    .wpforms-field-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wpforms-container input,
    .wpforms-container textarea,
    .wpforms-container select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .faq {
        width: 92%;
        margin: 70px auto;
    }

    .faq h2 {
        font-size: 52px;
        margin-bottom: 40px;
    }

    .faq-item {
        padding: 25px 20px;
    }

    .faq-item p {
        font-size: 19px;
        line-height: 1.6;
    }

    .contact-cta {
        width: 92%;
        margin: 80px auto;
    }

    .contact-cta h2 {
        font-size: 55px;
    }

    .contact-cta p {
        font-size: 21px;
        line-height: 1.6;
    }

}


/* MÓVIL PEQUEÑO */

@media screen and (max-width: 576px) {

    .contact-hero {
        min-height: 420px;
        padding: 70px 18px;
    }

    .contact-overlay h1 {
        font-size: 46px;
    }

    .contact-overlay p {
        font-size: 18px;
    }

    .contact-section {
        width: 94%;
        margin: 50px auto;
    }

    .contact-info,
    .contact-form {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .contact-info h2 {
        font-size: 42px;
    }

    .contact-info p {
        font-size: 18px;
    }

    .contact-item .icon {
        font-size: 20px;
    }

    .contact-item .text {
        font-size: 17px;
    }

    .faq {
        width: 94%;
        margin: 60px auto;
    }

    .faq h2 {
        font-size: 44px;
    }

    .faq-item {
        padding: 22px 18px;
    }

    .faq-item h3 {
        font-size: 20px;
    }

    .faq-item p {
        font-size: 18px;
    }

    .contact-cta {
        width: 94%;
    }

    .contact-cta h2 {
        font-size: 45px;
    }

    .contact-cta p {
        font-size: 19px;
    }

}