.contacto-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:20px;
}

/* =========================
   CARD PRINCIPAL
========================= */

.contacto-card{

    background:var(--color-blanco);
    border-radius:var(--radio);
    box-shadow:var(--sombra-suave);

    padding:25px;

    position:relative;
    overflow:hidden;

    transition:var(--transicion);
}

.contacto-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--sombra-media);
}

/* línea decorativa superior */
.contacto-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        var(--color-principal),
        var(--color-dorado)
    );
}

/* =========================
   TITULOS
========================= */

.contacto-card h2,
.contacto-card h3{

    color:var(--color-principal);
    font-weight:700;
    margin-bottom:15px;
}

.subtitulo-contacto{
    color:var(--color-secundario);
    font-size:14px;
    margin-bottom:20px;
}

/* =========================
   INFO EMPRESA
========================= */

.contacto-info p{

    margin:10px 0;
    font-size:14px;

    display:flex;
    gap:8px;

    color:var(--color-negro);
}

.contacto-info a{
    color:var(--color-secundario);
    transition:var(--transicion);
}

.contacto-info a:hover{
    color:var(--color-dorado);
}

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

.contacto-form input,
.contacto-form textarea{

    width:100%;
    padding:12px 14px;

    border:1px solid #e5e5e5;
    border-radius:var(--radio);

    margin-bottom:12px;

    font-family:'Poppins', sans-serif;

    background:#fafafa;

    transition:var(--transicion);
}

.contacto-form input:focus,
.contacto-form textarea:focus{

    border-color:var(--color-dorado);
    background:#fff;

    box-shadow:0 0 8px rgba(212,161,93,0.3);

    outline:none;
}

.contacto-form textarea{
    min-height:130px;
    resize:none;
}

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

.contacto-form .btn-dilo{

    width:100%;
    margin-top:5px;

    font-weight:600;
    letter-spacing:.5px;
}

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

.mapa{
    width:100%;
    height:350px;
    border-radius:var(--radio);
    overflow:hidden;
    box-shadow:var(--sombra-media);
}

.mapa iframe{
    width:100%;
    height:380px;
    border:none;
}

/* =========================
   ICONOS SIMPLES (SI QUIERES USAR)
========================= */

.contacto-info p::before{
    content:"•";
    color:var(--color-dorado);
    font-weight:bold;
}

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

@media(max-width:900px){

    .contacto-wrapper{
        grid-template-columns:1fr;
    }

    .mapa iframe{
        height:300px;
    }
}
.alert-dilo{
    animation: slideDown 0.4s ease;
}

@keyframes slideDown{
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}