/* ==========================================
   CONTACTO
========================================== */


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

.contactHero{

    display:grid;

    grid-template-columns:1fr 560px;

    align-items:start;

    gap:90px;

    padding:60px 0 120px;

}


/* INFORMACIÓN */

.contactInfo{

    padding-top:40px;

}

.contactInfo h1{

    max-width:720px;

    margin:30px 0;

    font-size:78px;

    line-height:.95;

    color:var(--blue);

}

.contactInfo p{

    max-width:620px;

    font-size:22px;

    line-height:1.9;

    color:var(--text-light);

}

/* ==========================================
   TARJETAS
========================================== */

.contactCards{

    display:grid;

    gap:20px;

    margin-top:60px;

}

.miniCard{

    padding:34px;

    background:var(--surface);

    border-radius:32px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.miniCard:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-strong);

}

.miniCard i{

    margin-bottom:18px;

    font-size:30px;

    color:var(--red);

}

.miniCard h3{

    margin-bottom:14px;

    font-size:22px;

    color:var(--blue);

}

.miniCard p{

    line-height:1.7;

    color:var(--text-light);

}

.miniCard a{

    color:inherit;

}


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

.contactForm{

    padding:50px;

    background:var(--surface);

    border-radius:40px;

    box-shadow:var(--shadow-strong);

}

.contactForm form{

    display:grid;

    gap:18px;

}

.contactForm input,
.contactForm select,
.contactForm textarea{

    width:100%;

    padding:20px;

    border:1px solid var(--border);

    border-radius:18px;

    font:inherit;

    transition:var(--transition);

}

.contactForm input:focus,
.contactForm select:focus,
.contactForm textarea:focus{

    outline:none;

    border-color:var(--blue);

    box-shadow:0 0 0 4px rgba(32,67,145,.08);

}

.contactForm textarea{

    min-height:180px;

    resize:vertical;

}

.contactForm .cta,
.contactForm .ghost{

    width:100%;

}

.contactForm .ghost{

    display:flex;

    justify-content:center;

}


/* ==========================================
   MAPA
========================================== */

.contactMap{

    padding:80px 0 120px;

}

.contactMap .sectionTitle{

    margin-bottom:50px;

    text-align:center;

}

.contactMap h2{

    margin-top:18px;

    font-size:56px;

    color:var(--blue);

}

.contactMap p{

    margin-top:20px;

    font-size:20px;

    line-height:1.8;

    color:var(--text-light);

}

.mapContainer{

    overflow:hidden;

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

    box-shadow:var(--shadow-strong);

}

.mapContainer iframe{

    display:block;

    width:100%;

    height:520px;

    border:0;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1100px){

    .contactHero{

        grid-template-columns:1fr;

        gap:60px;

    }

    .contactInfo{

        padding-top:0;

    }

    .contactInfo h1{

        font-size:56px;

    }

    .contactForm{

        padding:36px;

    }

}


@media (max-width:768px){

    .contactHero{

        padding:40px 0 80px;

    }

    .contactInfo h1{

        font-size:42px;

    }

    .contactInfo p{

        font-size:18px;

    }


    /* MAPA */

    .contactMap{

        padding:60px 0 90px;

    }

    .contactMap h2{

        font-size:36px;

    }

    .contactMap p{

        font-size:17px;

    }

    .mapContainer iframe{

        height:340px;

    }

}


@media (max-width:480px){

    .contactInfo h1{

        font-size:34px;

    }

    .contactInfo p{

        font-size:16px;

    }

    .contactCards{

        gap:16px;

    }

    .miniCard{

        padding:28px 24px;

        border-radius:24px;

    }

    .miniCard h3{

        font-size:20px;

    }

    .contactForm{

        padding:24px;

        border-radius:28px;

    }

    .contactForm input,
    .contactForm select,
    .contactForm textarea{

        padding:16px;

    }

    .contactMap h2{

        font-size:30px;

    }

    .mapContainer iframe{

        height:280px;

    }

}