/* -------------------------------------- */
/* SECCIÓN PRINCIPAL DE CONTACTO (FONDO GRIS DE ANCHO COMPLETO) */
/* -------------------------------------- */

.contacto-seccion-fondo {
    width: 100%; /* Asegura que tome todo el ancho */
    /* Fondo gris claro */
    background-color: #f4f4f4; /* Un gris muy claro */
    /* Altura de 1000px solicitada */
    min-height: 700px;
    box-sizing: border-box; 

    /* NUEVO: Configuración Flexbox para centrar el contenido interno */
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

/* -------------------------------------- */
/* CONTENEDOR CENTRAL/TARJETA ELEVADA (40% ancho, 600px alto) */
/* -------------------------------------- */
.tarjeta-contacto {
    /* Dimensiones solicitadas */
    width: 40%;
    /* Altura ajustada a 'auto' para que se adapte al contenido y permita el centrado vertical del contenido,
       pero mantenemos un min-height para que se vea bien si hay poco contenido. */
    height: auto; 
    min-height: 450px; /* Mantener un tamaño mínimo razonable */
    
    /* Estilos solicitados */
    background-color: white; /* Fondo blanco para contraste */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para efecto elevado */
    
    /* Padding interno y box-sizing */
    padding: 40px; /* Aumento el padding para mejor espaciado */
    box-sizing: border-box;
    max-width: 90%; /* Asegura que no se desborde en pantallas muy grandes */
    
    /* Base de fuente para la tarjeta */
    font-family: 'Inter', sans-serif;

    /* AÑADIDO: CENTRADO DE CONTENIDO INTERNO */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: flex-start; /* Mantener los bloques alineados a la izquierda */
}

/* ESTILOS ESPECÍFICOS DEL CONTENIDO DENTRO DE LA TARJETA */
.tarjeta-contacto h2 {
    color: #19477B; /* Azul de la cabecera (ACTUALIZADO) */
    font-weight: 700; /* Bold */
    text-align: left; /* Alineado a la izquierda */
    margin-bottom: 15px;
    align-self: flex-start; /* Asegura alineación a la izquierda dentro de flexbox */
}

.tarjeta-contacto p {
    color: #333333; /* Texto en negro */
    font-weight: 400; /* Regular */
    text-align: left; /* Alineado a la izquierda */
    font-size: .9em; /* ¡ACTUALIZADO: Fuente más pequeña! */
    line-height: 1.6;
    margin-bottom: 20px; /* Más espacio después del párrafo introductorio */
    align-self: flex-start; /* Asegura alineación a la izquierda dentro de flexbox */
}

/* NUEVA CLASE: Estilo para cada bloque de información (Ubicación, Teléfonos, etc.) */
.contacto-bloque {
    margin-bottom: 30px; /* ¡ACTUALIZADO: Más espacio entre secciones! */
    width: 100%; /* Ocupa todo el ancho para mantener alineación */
}

.contacto-bloque h3 {
    color: #19477B; /* Subtítulos en azul (ACTUALIZADO) */
    font-weight: 600; /* SemiBold */
    font-size: 1.1em; /* ¡ACTUALIZADO: Fuente más pequeña! */
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* NUEVA CLASE: Contenedor para el círculo celeste */
.icono-circulo {
    background-color: #e0f7fa; /* Celeste claro */
    border-radius: 50%; /* Circular */
    width: 35px; 
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px; /* Separación con el texto del título */
    /* El ícono original tenía 10px de margin-right, que ahora mueve el círculo */
}

.contacto-bloque i {
    color: #d76f00; /* ¡ACTUALIZADO: Naranja! */
    font-size: 1.2em;
    /* Eliminamos el margin-right que ahora maneja .icono-circulo */
    margin-right: 0; 
}

.contacto-bloque p {
    /* Ajustamos la sangría para alinear el texto con el borde izquierdo del círculo */
    margin: 3px 0 3px 45px; /* 35px (círculo) + 10px (separación) = 45px total */
    font-size: .9em; /* ¡ACTUALIZADO: Fuente más pequeña! */
    text-align: left; /* Asegura que los párrafos dentro de los bloques se alineen a la izquierda */
}


/* -------------------------------------- */
/* CONTENIDO INTERNO DE CONTACTO (LIMITA EL ANCHO Y CENTRA) */
/* -------------------------------------- */
.contacto-contenedor-contenido {
    /* Relleno para que el contenido no toque los bordes */
    padding: 40px 20px;
    /* Limita el ancho del contenido interno para mejor lectura */
    max-width: 900px;
    margin: 0 auto; /* Centra el contenido */
}

/* RESPONSIVE: Ajuste de la tarjeta para pantallas pequeñas */
@media (max-width: 768px) {
    .tarjeta-contacto {
        width: 90%; /* Más ancho en móvil para mejor usabilidad */
        height: auto; /* Dejar que la altura se ajuste al contenido en móvil */
        min-height: 400px;
    }
    .tarjeta-contacto h2, .tarjeta-contacto p {
        align-self: flex-start; /* Asegura alineación a la izquierda */
    }
}