:root {
    --primary-blue: #0056b3;
    --accent-blue: #00a8e8;
    --dark-text: #333333;
    --gray-footer: #2b2b2b;
}

body {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--dark-text);
}

.text-primary { color: var(--accent-blue) !important; }
.bg-blue-shade { background-color: var(--primary-blue); }

.py-custom { padding: 80px 0; }
.italic-text { font-style: italic; letter-spacing: -0.5px; }

/* Hero y Collage */
.main-title-container {
    z-index: 10;
    background: rgba(255,255,255,0.8);
}

.collage-container {
    height: 650px;
    background-color: #f8f9fa;
}

.circle-img {
    position: absolute;
    background-size: cover;
    background-position: center;
    border: 6px solid white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Formas curvas basadas en la nueva imagen */
.img-1 { width: 400px; height: 400px; top: -50px; right: -50px; border-radius: 0 0 0 100%; background-image: url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=600'); }
.img-2 { width: 300px; height: 300px; top: 150px; right: 20%; border-radius: 50%; background-image: url('https://images.unsplash.com/photo-1509391366360-fe5bb62697b5?w=500'); z-index: 2; }
.img-3 { width: 250px; height: 250px; bottom: 50px; right: 5%; border-radius: 100% 0 100% 100%; background-image: url('https://images.unsplash.com/photo-1466611653911-95282ee36567?w=500'); z-index: 1; }

/* Secciones de Altura */
.section-tall { height: 180px; }
.section-footer-tall { height: 400px; }
.bg-gray-dark { background-color: var(--gray-footer); }

/* Ponentes */
.speaker-box {
    aspect-ratio: 1;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.speaker-box:hover { transform: translateY(-10px); }

@media (max-width: 768px) {
    .collage-container { height: 350px; }
    .display-1 { font-size: 3rem; }
    .section-footer-tall { height: auto; padding: 60px 20px; }
}




/* --- Galería de Imágenes --- */

#galeria{
    background-color:#f8f9fa;
}
.gallery-img {
    aspect-ratio: 1 / 1; /* Fuerza a que sean cuadrados perfectos */
    object-fit: cover; /* Enmascara la foto sin deformarla */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.03); /* Ligero zoom al pasar el mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* --- Caja de Luz (Lightbox) --- */
.lightbox-overlay {
    display: none; /* Se oculta hasta que JS le quite esta propiedad */
    position: fixed;
    z-index: 9999; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.active {
    display: flex; /* Activa la caja de luz */
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90vh; /* Nunca será más alta que la pantalla */
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease; /* Efecto suave al aparecer */
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--accent-blue);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}



/* --- Pestañas (Tabs) Personalizadas --- */
.nav-tabs .nav-link {
    color: var(--gray-footer);
    border: none;
    background: transparent;
    padding: 10px 25px;
    margin-right: 10px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--accent-blue);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-blue);
    border-color: transparent;
    border-bottom: 3px solid var(--primary-blue);
    background: transparent;
}

/* --- Lista con Viñetas Personalizadas (CIMEQ) --- */
.custom-bullet-list {
    list-style: none;
    padding-left: 0;
}

.custom-bullet-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.custom-bullet-list li::before {
    content: "•"; /* Puedes cambiarlo por "▪" si prefieres un cuadrado */
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: -9px; /* Ajusta la altura del punto respecto al texto */
}

/* --- Utilidades Extra de Texto --- */
.tracking-wide {
    letter-spacing: 2px;
}
.lh-base {
    line-height: 1.5 !important;
}


/* --- Sección Cintillo de Logos --- */
.logo-banner-container {
    max-width: 600px; /* Limita el ancho máximo exacto que pediste */
    width: 100%;      /* Permite que se encoja correctamente en pantallas móviles */
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-banner-img {
    height: auto;
    /* Efecto estético: Los logos se ven ligeramente atenuados y recuperan 
       toda su fuerza de color al pasar el cursor (muy común en webs corporativas) */
    opacity: 0.85;
    filter: grayscale(10%); 
    transition: all 0.3s ease;
}

.logo-banner-img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.02); /* Un efecto de escala muy sutil */
}




/* --- Hero Banner --- */
.hero-banner-img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Opcional: Esto le da una pequeña sombra por debajo de la imagen antes del cintillo */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

/* Efecto al pasar el cursor sobre el botón de registro */
.hero-btn-hover {
    transition: all 0.3s ease;
}

.hero-btn-hover:hover {
    background-color: white;
    color: var(--primary-blue); /* Usa la variable azul que ya tienes definida */
    transform: scale(1.05); /* El botón crece un poquito para llamar la atención */
}


/* --- Sección: Información General y Contenido (Dark Mode) --- */

/* Clase utilitaria para el color azul claro en textos */
.text-accent {
    color: var(--accent-blue) !important;
}

/* Puntos de la izquierda adaptados a fondo oscuro */
.main-point-item-dark {
    position: relative;
    padding-left: 40px;
}

/* Flecha '➝' para el fondo oscuro */
.main-point-item-dark::before {
    content: "➝";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-blue);
    font-size: 1.8rem; /* Ligeramente más grande para dar peso visual */
    font-weight: bold;
    line-height: 1.2;
}

/* Tarjetas de la derecha (Fondo Blanco) */
.activity-card {
    background-color: #ffffff;
    border-left: 5px solid var(--accent-blue) !important; /* Borde izquierdo azul claro */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-4px); 
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4) !important; /* Sombra más fuerte para resaltar sobre gris */
    border-left-color: var(--primary-blue) !important; 
}

/* El símbolo del cuadrado '◘' */
.bullet-square {
    color: var(--primary-blue);
    font-size: 1.4rem;
    line-height: 1;
}

/* Línea divisoria vertical sutil para el fondo oscuro */
@media (min-width: 992px) {
    .custom-border-right-dark {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }
}



/* --- Sección Expositores --- */

/* Estilo de los botones de navegación (Pills) */
#seccion-expositores .nav-pills .nav-link {
    background-color: #f8f9fa;
    color: var(--primary-blue);
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

#seccion-expositores .nav-pills .nav-link.active {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2);
}

#seccion-expositores .nav-pills .nav-link:hover:not(.active) {
    background-color: #e9ecef;
}

/* Badges del Perfil del Evento */
.badge-perfil {
    background-color: white;
    color: var(--dark-text);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.badge-perfil:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    transform: scale(1.05);
}

/* Contenedor de imágenes en pestañas */
.img-container-tab {
    max-width: 900px;
    margin: 0 auto;
}

.gallery-img {
    cursor: pointer;
    transition: opacity 0.3s;
}

.gallery-img:hover {
    opacity: 0.9;
}

/* Espaciado de letras extra para títulos */
.tracking-widest {
    letter-spacing: 3px;
}


/* --- Imágenes informativas completas (Sin recortes) --- */
.tab-image-full {
    aspect-ratio: auto !important;   /* Quita la restricción cuadrada */
    object-fit: contain !important;  /* Muestra el 100% de la imagen sin cortes */
    width: 100%;                     /* Ocupa el ancho máximo de su contenedor */
    height: auto !important;         /* Ajusta la altura automáticamente para no deformarse */
}