/* ============================================= */
/* --- ESTILOS SECCIÓN CONTACTOS --- */
/* ============================================= */

.contactos-container {
    position: relative;
    width: 100%;
    min-height: 70vh;
    background-color: #050505;
    background-image: url('../media/images/backgrounds/background_contactos.png'); /* Puedes usar el mismo fondo sutil */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 5%;
    overflow: hidden;
}

.contactos-wrapper {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Columna derecha ligeramente más ancha para el mapa */
    gap: 80px;
    align-items: center;
    z-index: 10;
}

/* --- COLUMNA IZQUIERDA --- */
.contactos-left {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Separación entre el título y la lista de contactos */
}

.cont-title {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.cont-info-list {
    display: flex;
    flex-direction: column;
    gap: 35px; /* Separación entre cada bloque de ícono+texto */
}

.cont-info-row {
    display: flex;
    align-items: center;
    gap: 25px; /* Separación entre el ícono naranja y el texto blanco */
}

.cont-icon {
    height: 60px; /* Estos íconos parecen más grandes y cuadrados en tu diseño */
    width: auto;
    filter: drop-shadow(0 5px 15px rgba(255, 69, 0, 0.3)); /* Resplandor sutil */
    transition: transform 0.3s ease;
}

.cont-info-row:hover .cont-icon {
    transform: scale(1.08); /* Pequeño efecto al pasar el mouse por la fila */
}

.cont-text-img {
    height: 45px; /* Ajusta según la proporción de tus imágenes de texto */
    width: auto;
}

/* --- COLUMNA DERECHA (EL MAPA) --- */
.contactos-right {
    display: flex;
    justify-content: flex-end;
}

.cont-image-frame {
    position: relative;
    max-width: 650px;
    width: 100%;
}

.cont-main-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 40px 0 40px 0; /* Mismo marco tecnológico asimétrico */
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

.cont-corner {
    position: absolute;
    width: 45px;
    height: 45px;
    background-color: var(--primary-orange, #FF4500);
}

.cont-corner.top-right {
    top: -15px;
    right: -15px;
    z-index: -1;
}

.cont-corner.bottom-left {
    bottom: -15px;
    left: -15px;
    z-index: -1;
}

/* ============================================= */
/* --- ESTADO INICIAL DE ANIMACIONES (FADE) ---  */
/* ============================================= */

#contactos-section .fade-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#contactos-section .fade-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================= */
/* --- RESPONSIVO --- */
/* ============================================= */
@media (max-width: 1024px) {
    .contactos-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .contactos-left {
        align-items: center; /* Centramos en tablet/móvil */
    }
    
    .cont-info-row {
        justify-content: center;
    }
    
    .contactos-right {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .cont-icon { height: 45px; }
    .cont-text-img { height: 35px; }
    .cont-title { max-width: 80%; }
}