/* Container principal - ESTILO TARJETA FLOTANTE DE LUJO */
.container {
    max-width: 2500px; /* Tamaño ideal para lectura */
    margin: 5rem auto; /* Más margen superior/inferior */
    padding: 3.5rem; /* Padding amplio */
    background-color: #ffffff; /* Fondo blanco puro */
    
    border-radius: 20px;
    /* Múltiples sombras para crear un efecto de profundidad tridimensional */
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25), /* Sombra principal fuerte */
        0 4px 6px -2px rgba(0, 0, 0, 0.05), /* Sombra interna sutil */
        inset 0 0 0 1px rgba(0, 0, 0, 0.05); /* Borde interno muy sutil */
    
    /* Pequeña animación al cargar o interactuar (opcional) */
    transition: transform 0.3s ease-in-out;
}

/* Efecto de inclinación sutil al pasar el mouse (para sorprender) */
.container:hover {
    transform: translateY(-5px); 
}

/* Título Principal (H2) */
h2 {
    color: #008cba;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.6rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2.5rem;
    /* Subrayado doble elegante */
    border-bottom: 3px solid #008cba; 
    border-top: 1px solid rgba(0, 140, 186, 0.3); /* Línea superior sutil */
    padding-top: 1rem;
    padding-bottom: 1rem;
    letter-spacing: 0.05rem; /* Espaciado de letra sutil */
}

/* Títulos de Sección (H3) */
h3 {
    color: #1a1a1a; /* Negro fuerte */
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1rem;
    /* Fondo sutil para el bloque de título */
    background-color: #f0f8ff; 
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 6px solid #008cba; /* Línea de color institucional más gruesa */
}

/* Párrafos y Cuerpo de Texto */
p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: #444; 
    line-height: 1.75;
    /* Fondo de texto con serif (para cuerpo de texto) */
    font-family: 'Poppins', sans-serif; 
}

p strong {
    color: #008cba; /* Destaca el Sindicato */
}

/* Listas (Datos Recabados) */
ul {
    margin: 1rem 0 2rem 0;
    list-style-type: none; 
    padding-left: 0;
    border: 1px dashed #ddd; /* Borde de lista para agrupar */
    padding: 15px;
    border-radius: 8px;
    background-color: #fafafa;
}

ul li {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #333;
    position: relative;
    padding-left: 30px; 
}

/* Ícono personalizado (punto de color grande) */
ul li::before {
    content: "\25CF"; /* Círculo sólido */
    color: #008cba;
    font-size: 1.2em; 
    position: absolute;
    left: 0;
    top: 0;
}

/* Enlaces (Email) */
a {
    color: #008cba;
    font-weight: 600;
    transition: color 0.3s;
    text-decoration: none;
    border-bottom: 1px dotted #008cba; /* Subrayado punteado elegante */
}

a:hover {
    color: #00a0d4;
    border-bottom: 1px solid #00a0d4;
}
/* --- Estilos para el footer (footer-seccion sub-logo) --- */

.footer .sub-logo h3 {
    color: white; /* Color del texto a blanco */
    font-size: 2.5rem; /* Hazlo más grande si quieres que resalte */
    font-weight: 800; /* Más grueso para mayor impacto */
    text-align: center; /* Centrar el texto */
    margin-bottom: 20px; /* Espacio debajo del título */
    padding: 0; /* Asegúrate de que no tenga padding que cree un fondo */
    background: none; /* Asegúrate de que no tenga ningún fondo */
    border: none; /* Quita cualquier borde */
    box-shadow: none; /* Quita cualquier sombra */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Sombra de texto para que resalte más */
}

/* Si el div .sub-logo tenía un borde o sombra innecesarios: */
.footer .sub-logo {
    background: none; /* Asegura que el contenedor no tenga un fondo blanco */
    border: none;
    box-shadow: none;
    padding: 10; /* Asegura que el padding no cause un recuadro */
}

/* Para el párrafo dentro de sub-logo, si quieres que también sea blanco */
.footer .sub-logo p {
    color: #e0e0e0; /* Un blanco suave para el texto */
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}
body{
    color: darkgray;
}