/* ELIMINA ESPACIOS POR DEFECTO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES: Paleta de colores consistente con el resto del sitio */
:root {
    --color-principal: #00a8cc;
    --color-texto-oscuro: #1e293b;
    --color-texto-suave: #64748b;
    --color-fondo: #cbd5e1;
    --blanco: #ffffff;
}

/* Estilo de la pagina */
.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-fondo);
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Estilo del contenido */
.cuerpo {
    display: flex;
    justify-content: center;
    padding: 25px 0 0 0;
}

/* Espacio principal */
.tarjeta-contacto {
    background-color: var(--blanco);
    width: 95%;
    padding: 45px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    text-align: center;
}

/* Estilo de encabezado */
.encabezado-contacto h1 {
    color: var(--color-principal);
    font-size: 2.3rem;
    margin-bottom: 15px;
}

.encabezado-contacto p {
    color: var(--color-texto-suave);
    margin-bottom: 45px;
}

/* Distribución de columnas */
.contenedor-columnas {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.columna-contacto {
    flex: 1;
    min-width: 250px;
    padding: 15px;
}

/* Estilos de las imagenes */
.contenedor-img {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.contenedor-img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.columna-contacto h3 {
    color: var(--color-texto-oscuro);
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.columna-contacto p {
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-interno-contacto {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #f1f5f9;
    color: var(--color-texto-suave);
    font-style: italic;
}