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

.contacto-hero{

    height:70vh;

    min-height:520px;

    background:
        linear-gradient(rgba(8,22,42,.55),rgba(8,22,42,.65)),
        url("../img/contacto/hero.JPG") center center/cover no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

}

.contacto-overlay{

    max-width:900px;

    padding:40px;

}

.hero-tag{

    display:inline-block;

    padding:8px 18px;

    border:1px solid rgba(255,255,255,.4);

    border-radius:30px;

    font-size:.85rem;

    letter-spacing:2px;

    margin-bottom:30px;

}

.contacto-hero h1{

    font-size:4rem;

    margin-bottom:25px;

    font-family:"Playfair Display",serif;

}

.hero-line{

    width:90px;

    height:4px;

    background:#d4a94d;

    margin:0 auto 30px;

    border-radius:10px;

}

.contacto-hero p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:750px;

    margin:auto;

}



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

.contacto-main{

    padding:170px 20px 110px;

    background:#f6f7f9;

}

.contacto-wrapper{

    max-width:1200px;

    margin:auto;

}

.contacto-intro{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px;

}

.section-tag{

    color:#b5892d;

    font-weight:600;

    letter-spacing:2px;

    font-size:.85rem;

}

.contacto-intro h2{

    margin:20px 0;

    font-size:2.8rem;

}

.contacto-intro p{

    line-height:1.9;

    color:#555;

}



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

.contacto-grid{

    display:grid;

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

    gap:35px;

}

.contact-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

    display:flex;

    flex-direction:column;

}

.contact-card:hover{

    transform:translateY(-6px);

}

.contact-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#0b2242;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.contact-icon svg{

    width:30px;

    height:30px;

}

.contact-card h3{

    margin-bottom:18px;

    color:#0b2242;

}

.contact-card p{

    line-height:1.8;

    color:#555;

}

.contact-card a{

    display:inline-block;

    margin-top:18px;

    text-decoration:none;

    font-weight:600;

    color:#b5892d;

}

.perfil-links{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:15px;

}

.perfil-links a{

    text-decoration:none;

    color:#0b2242;

    font-weight:600;

}

.perfil-links a:hover{

    color:#b5892d;

}



/* ======================================================
   UBICACIÓN
====================================================== */

.ubicacion{

    padding:110px 20px;

    background:white;

}

.ubicacion-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.ubicacion-texto h3{

    font-size:2.2rem;

    margin:20px 0;

}

.ubicacion-texto p{

    line-height:1.9;

    color:#555;

    margin-bottom:40px;

}

.btn-contacto{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 28px;

    background:#0b2242;

    color:white;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.btn-contacto:hover{

    background:#b5892d;

}

.ubicacion-imagen img{

    width:100%;

    border-radius:22px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}



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

@media(max-width:900px){

.contacto-grid{

grid-template-columns:1fr;

}

.ubicacion-grid{

grid-template-columns:1fr;

}

.contacto-hero h1{

font-size:3rem;

}

}
/*==========================================
 TARJETA FLOTANTE
==========================================*/

.contacto-floating{

    position:relative;

    margin-top:-70px;

    z-index:20;

}

.floating-card{

    max-width:1050px;

    margin:auto;

    background:#fff;

    border-radius:22px;

    box-shadow:0 20px 55px rgba(0,0,0,.16);

    padding:35px 45px;

    display:grid;

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

    gap:30px;

}

.floating-item{

    display:flex;

    align-items:center;

    gap:18px;

}

.floating-item svg{

    width:34px;

    height:34px;

    color:#b5892d;

    flex-shrink:0;

}

.floating-item span{

    display:block;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#999;

    margin-bottom:4px;

}

.floating-item strong{

    font-size:1rem;

    color:#0b2242;

    font-weight:600;

}

@media (max-width:900px){

.floating-card{

grid-template-columns:1fr;

padding:30px;

margin:0 20px;

}

.contacto-floating{

margin-top:-40px;

}

}