.contacto{
    width:100%;
    padding:120px 8%;
    background:#f5f5f5;
    position:relative;
    overflow:hidden;
}

.contacto{
    background:#111;
}

.contacto-container{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.contacto-container{
    align-items:flex-start;
    gap:50px;
}

.contacto-info span{
   color:#ff008c;
    font-size:14px;
    font-weight:800;
    letter-spacing:3px;
    margin-bottom:12px;
}

.contacto-info h2{
    margin:15px 0;
    line-height:1.2;
}

.contacto-info h2{
    font-size:45px;
    color: #111;
}

.contacto-info p{
    font-size:17px;
    line-height:1.8;
}

.contacto-info p{
    color:#222;
}

.contacto-form button:hover{
    background:#ff008c;
    color:white;
    transform:translateY(-4px);
    box-shadow:
    0 12px 25px rgba(255,0,140,.25);
}

/* =========================
SECCIÓN CONTACTO
========================= */
.contacto{
    padding:120px 8%;
    background:#111;
    position:relative;
    overflow:hidden;
}

.contacto-container{
    display:flex;
    gap:50px;
    align-items:flex-start;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}


/* =========================
INFO IZQUIERDA
========================= */
.contacto-info{
    flex:1 1 420px;
}

.contacto-info span{
    color:#ff008c;
    font-weight:800;
    letter-spacing:3px;
    font-size:14px;
}

.contacto-info h2{
    color: #111;
    font-size:52px;
    margin:18px 0;
    line-height:1.1;
    font-weight:800;
}

.contacto-info p{
    color:#222;
    line-height:1.9;
    font-size:17px;
}

/* =========================
CAJA INFORMACIÓN
========================= */
.info-box{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:20px;
}


/* ITEMS */
.info-item{
    background:#1b1b1b;
    padding:24px 26px;
    border-radius:24px;
    transition:.35s;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.05);
}

/* LINEA SUPERIOR */
.info-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
    90deg,
    #00aaff,
    #ff008c,
    #ffd500);
}

/* HOVER */
.info-item:hover{
    transform:translateY(-6px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

/* TITULOS */
.info-item h3{
    color:white;
    margin-bottom:12px;
    font-size:20px;
    font-weight:700;
}

/* TEXTOS */
.info-item p{
    color:#bdbdbd;
    font-size:15px;
    line-height:1.7;
}

/* =========================
BOTONES REDES
========================= */
.instagram-link,
.facebook-link,
.whatsapp-link{
    display:inline-block;
    padding:11px 20px;
    border-radius:14px;
    text-decoration:none;
    font-weight:600;
    color:white;
    transition:0.3s ease;
}

/* INSTAGRAM */
.instagram-link{

    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );

    box-shadow:0 5px 15px rgba(214,41,118,0.35);
}

.instagram-link:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 8px 20px rgba(214,41,118,0.55);
}

/* FACEBOOK */
.facebook-link{

    background: linear-gradient(
        45deg,
        #1877F2,
        #145DBF,
        #0d47a1
    );

    box-shadow:0 5px 15px rgba(24,119,242,0.35);
}

.facebook-link:hover{
    transform:translateY(-3px) scale(1.03);

    box-shadow:0 8px 20px rgba(24,119,242,0.55);
}

/* WHATSAPP */
.whatsapp-row{
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.whatsapp-link{

    background: linear-gradient(
        45deg,
        #128C7E,
        #25D366,
        #1ebe5d
    );

    box-shadow:0 5px 15px rgba(37,211,102,0.35);
}

.whatsapp-link:hover{
    transform:translateY(-3px) scale(1.03);

    box-shadow:0 8px 20px rgba(37,211,102,0.55);
}


/* =========================
FORMULARIO
========================= */
.contacto-form{
    flex:1 1 500px;
    background:#1b1b1b;
    padding:40px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.05);
    position:relative;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

/* LINEA SUPERIOR */
.contacto-form::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(
    90deg,
    #00aaff,
    #ff008c,
    #ffd500);
}

/* FORM */
.contacto-form form{
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
}

/* INPUTS */
.contacto-form input,
.contacto-form textarea{
    width:100%;
    padding:18px;
    margin-bottom:20px;
    border:none;
    outline:none;
    border-radius:18px;
    background:#252525;
    color:white;
    font-size:15px;
    transition:.3s;
    border:2px solid transparent;
}

/* FOCUS */
.contacto-form input:focus,
.contacto-form textarea:focus{
    background:#2d2d2d;
    border-color:#00aaff;
    box-shadow:0 0 0 4px rgba(0,170,255,.12);
}


/* TEXTAREA */
.contacto-form textarea{
    height:160px;
    resize:none;
}


/* PLACEHOLDER */

.contacto-form input::placeholder,
.contacto-form textarea::placeholder{
    color:#9e9e9e;
}


/* =========================
TEXTO SUPERIOR
========================= */
.formulario-info{
    margin-bottom:30px;
    position:relative;
    z-index:2;
}

.formulario-info h3{
    color:white;
    font-size:32px;
    margin-bottom:14px;
    line-height:1.2;
    font-weight:800;
}

.formulario-info p{
    color:#bdbdbd;
    font-size:15px;
    line-height:1.8;
}


/* =========================
BOTÓN
========================= */

.contacto-form button{
    padding:17px;
    border:none;
    border-radius:18px;
    background:#00aaff;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,170,255,.25);
}


/* HOVER */

.contacto-form button:hover{
    background:#ff008c;
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(255,0,140,.3);
}


/* =========================
RESPUESTA
========================= */

#respuesta-formulario{
    margin-top:18px;
    font-size:15px;
    font-weight:600;
    color:white;
}


/* =========================
ANIMACIÓN
========================= */
@keyframes subirModal{

    from{
        transform:translateY(40px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* =========================
MAPA
========================= */
.mapa{
    width:100%;
    margin-top:50px;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}


/* LINEA SUPERIOR */
.mapa::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
    90deg,
    #00aaff,
    #ff008c,
    #ffd500);

    z-index:5;
}

.mapa iframe{
    width:100%;
    height:380px;
    border:none;
    filter:grayscale(.1);
}