/* ==========================================================================
   SISTEMA DE DISEÑO & VARIABLES
   ========================================================================== */
:root {
    --primary: #003366;       
    --primary-dark: #001f3f;
    --accent: #f39c12;       
    --accent-hover: #d35400;
    --text-main: #2c3e50;
    --text-light: #ffffff;
    --bg-light: #fafafa;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.7;
    background-color: var(--white);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-dark);
}

/* ==========================================================================
   HEADER Y NAVEGACIÓN (ESCRITORIO)
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    transition: all 0.3s ease;
    background-color: transparent;
}

.menu-toggle {
    display: none; 
}



/* ==========================================================================
   LOGO: AZUL EN INDEX / BLANCO EN INTERNAS (TOP)
   ========================================================================== */

/* 1. Estado base y para el INDEX (Azul) */
.logo, 
a.logo {
    color: #001F3F !important;
    -webkit-text-fill-color: #001F3F !important;
    text-decoration: none !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    border: none !important;
    background: none !important;
    transition: color 0.3s ease !important;
}

/* 2. Solo para PÁGINAS INTERNAS cuando están arriba (Blanco) */
/* Esto detecta la clase .inner-page del body y que el header NO tenga .scrolled */
body.inner-page header:not(.scrolled) .logo {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 3. AL HACER SCROLL (Azul en todas las páginas) */
header.scrolled .logo {
    color: #001F3F !important;
    -webkit-text-fill-color: #001F3F !important;
}

/* Bloqueo en Hover */
.logo:hover, a.logo:hover {
    opacity: 0.8 !important;
}

.nav-links {
    display: flex;
    list-style: none; 
    gap: 2rem;
    margin: 0;
    padding: 0;
}

/* 1. REGLA PARA EL INDEX (Fondo Inicial Blanco) */
/* Al no tener la clase .inner-page, le damos color oscuro desde el inicio */
body:not(.inner-page) .nav-links a {
    text-decoration: none !important;
    color: #001F3F !important; /* Azul marino oscuro para contrastar con tu Hero blanco */
    font-weight: 600;
    transition: color 0.3s ease;
}

/* 2. REGLA PARA PÁGINAS INTERNAS (Fondo Inicial con Imagen/Oscuro) */
/* Solo cuando estamos arriba (sin .scrolled), forzamos el blanco */
body.inner-page header:not(.scrolled) .nav-links a {
    text-decoration: none !important;
    color: #ffffff !important; /* Blanco puro sobre las fotos de cabecera */
    font-weight: 600;
    transition: color 0.3s ease;
}

/* 3. HOVER GENERAL (Todas las páginas) */
.nav-links a:hover {
    color: var(--accent) !important; /* Naranja/dorado al pasar el mouse */
}

/* ==========================================================================
   SCROLL ACTIVO (Todas las páginas unificadas)
   ========================================================================== */
header.scrolled {
    background-color: #ffffff !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    padding: 0.8rem 5% !important;
}

/* Al hacer scroll, el menú SIEMPRE es blanco, así que forzamos letras oscuras */
header.scrolled .nav-links a { 
    color: #001F3F !important; /* Usamos el mismo azul oscuro del logo para armonía */
    font-weight: 600;
    text-decoration: none !important;
}

header.scrolled .nav-links a:hover { 
    color: var(--accent) !important;
}

header.scrolled .bar { 
    background-color: #001F3F !important; /* Color oscuro para el menú hamburguesa */
}










/* ==========================================================================
   DROPDOWN MENU (REESTRUCTURACIÓN TOTAL)
   ========================================================================== */
body header#main-nav ul#nav-links .dropdown-menu li a {
    color: #001F3F !important; /* Fuerza el azul oscuro siempre */
}

body header#main-nav ul#nav-links .dropdown-menu li a:hover,
body header#main-nav ul#nav-links .dropdown-menu li a:active {
    color: var(--accent) !important; /* Fuerza el naranja al tocar */
}
/* 1. ESTRUCTURA BASE (Común para PC y Móvil) */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-toggle {
    cursor: pointer;
}

/* El submenú nace ESTRICTAMENTE oculto en todas partes */
.dropdown-menu {
    display: none !important; 
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   VERSIÓN ESCRITORIO (Solo funciona pasando el ratón)
   ========================================================================== */
@media (min-width: 993px) {
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: -15px;
        margin-top: 10px;
        background-color: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0, 51, 102, 0.15);
        padding: 0.8rem 0;
        min-width: 220px;
        border-radius: 8px;
        z-index: 1000;
        border: 1px solid rgba(0,0,0,0.05);
    }

    /* Puente invisible para que el menú no parpadee */
    .dropdown::after {
        content: ''; position: absolute; width: 100%; height: 20px; bottom: -20px; left: 0;
    }

    /* Mostrar al pasar el ratón SOLAMENTE en PC */
    .dropdown:hover .dropdown-menu {
        display: block !important;
        animation: fadeInDropdown 0.3s ease forwards;
    }

    .dropdown-menu li a {
        display: block !important;
        padding: 10px 25px !important;
        color: #001F3F !important;
        font-weight: 500;
        font-size: 0.95rem;
        text-align: left;
        transition: all 0.3s ease;
    }

    .dropdown-menu li a:hover {
        background-color: rgba(243, 156, 18, 0.05) !important;
        color: var(--accent) !important;
        padding-left: 30px !important;
    }
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   VERSIÓN MÓVIL (TARJETA FLOTANTE - UX/UI MEJORADO)
   ========================================================================== */
@media (max-width: 992px) {
    .dropdown {
        position: relative;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center !important; /* Fuerza a centrar el contenido (el botón) */
        justify-content: center;
    }
    
    .dropdown-toggle {
        width: 100%;
        text-align: center !important; /* Fuerza el texto al centro */
        display: block;
    }

    /* La Tarjeta Flotante (Nace oculta y absoluta para no mover nada) */
    .dropdown-menu {
        display: none !important; 
        position: absolute !important;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        max-width: 300px;
        margin-top: 15px;
        background-color: #ffffff !important;
        box-shadow: 0 15px 35px rgba(0, 51, 102, 0.2) !important;
        border-radius: 12px;
        padding: 5px 0;
        z-index: 2000;
        border: 1px solid rgba(0,0,0,0.08);
    }

    /* Flecha decorativa (UI moderno que apunta a 'Participation Info') */
    .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #ffffff;
    }

    /* Clase que activa el JavaScript */
    .dropdown-menu.show-dropdown {
        display: block !important;
        animation: popInMobile 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* Animación fluida de rebote */
    }

    /* Estilos de los botones internos (Fáciles de tocar con el dedo) */
    .dropdown-menu li a {
        display: block !important;
        padding: 15px 20px !important;
        color: #001F3F !important; /* Siempre oscuro para contraste perfecto */
        font-size: 1.05rem;
        font-weight: 600;
        text-align: center !important;
        border-bottom: 1px solid rgba(0,0,0,0.05); /* Línea separadora */
    }

    /* Quitamos la línea al último elemento */
    .dropdown-menu li:last-child a {
        border-bottom: none;
    }

    /* Efecto visual al tocar con el dedo */
    .dropdown-menu li a:active {
        background-color: rgba(243, 156, 18, 0.1) !important;
        color: var(--accent) !important;
    }
}
    /* Keyframes de la animación móvil */
    @keyframes popInMobile {
        0% { opacity: 0; transform: translate(-50%, -10px) scale(0.95); }
        100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    













/* ==========================================================================
   CORRECCIÓN: PATRÓN DE PUNTOS DE FONDO (PÁGINAS INTERNAS)
   ========================================================================== */
.page-content {
    /* Color de fondo base un poco más grisáceo para que los puntos resalten */
    background-color: #fafbfc; 
    
    /* El patrón de puntos (dots) */
    background-image: radial-gradient(rgba(0, 51, 102, 0.08) 2px, transparent 2px) !important;
    background-size: 30px 30px !important;
    
    /* Espaciado general */
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: 60vh;
}

/* Blindaje para que el texto sea legible sobre los puntos */
.tab-section,
.editorial-text-block,
.venue-article,
.speaker-main-info {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Sombra elegante */
}

/* Ajuste específico para el menú lateral del Dashboard */
.sidebar-nav {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* En móviles quitamos el fondo blanco extra del menú para que deslice bien */
@media (max-width: 768px) {
    .sidebar-nav {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }
}














/* ==========================================================================
   DISEÑO DE SUBPÁGINAS (SIDEBAR TABS LAYOUT - UX/UI PREMIUM)
   ========================================================================== */
.tabs-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
    max-width: 1400px !important;
    width: 96% !important;
}

/* Menú lateral (Izquierda) */
.sidebar-nav {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 100px;
}

/* Botones estado normal */
.side-tab-btn {
    background: transparent;
    border: none;
    text-align: left;
    padding: 14px 20px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    border-radius: 10px; /* Bordes suaves y modernos */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición súper fluida */
}

/* Hover: Fondo gris claro y pequeño desplazamiento 3D */
.side-tab-btn:hover {
    background-color: #f8f9fa;
    color: var(--primary);
    transform: translateX(5px);
}

/* Activo: Fondo sólido corporativo, letras blancas y sombra flotante */
.side-tab-btn.active {
    background-color: var(--primary); /* Azul marino */
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 31, 63, 0.15);
    transform: translateX(5px);
}

/* Área de contenido (Derecha) */
.content-area {
    flex: 1;
    min-width: 0;
}

.tab-section {
    display: none;
    animation: fadeInTab 0.4s ease forwards;
}

.tab-section.active {
    display: block;
}

.tab-section .section-title-left {
    margin-top: 0;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Adaptación para celulares (Menú deslizable tipo 'Píldoras') */
@media (max-width: 768px) {
    .tabs-page-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .sidebar-nav {
        flex: none;
        width: 100%;
        position: relative;
        top: 0;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        white-space: nowrap;
        -ms-overflow-style: none;  
        scrollbar-width: none; 
        gap: 0.8rem; /* Espaciado entre píldoras */
    }
    
    .sidebar-nav::-webkit-scrollbar { display: none; }
    
    /* Forma de Píldora para móviles */
    .side-tab-btn {
        text-align: center;
        background-color: #f8f9fa; /* Color gris suave por defecto */
        border-radius: 25px; /* Bordes totalmente redondeados */
        padding: 10px 24px;
    }
    
    /* Desactivamos el desplazamiento en móvil para evitar que tiemble al tocar */
    .side-tab-btn:hover,
    .side-tab-btn.active {
        transform: none; 
    }
}













/* ==========================================================================
   SECCIONES DEL INDEX
   ========================================================================== */
/* ==========================================================================
   NUEVO HERO: EDITORIAL & ASIMÉTRICO (SIN CAJAS)
   ========================================================================== */
.hero-new {
    height: 100vh;
    min-height: 800px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--white);
    overflow: hidden;
    padding-top: 80px;
}

/* Patrón de puntos integrado en el Hero */
.hero-dots {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0, 51, 102, 0.05) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Bloque de Texto */
.hero-tag {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.hero-text h1 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 2rem;
    font-weight: 900;
    text-align: left; /* Rompemos el centrado */
}

.hero-text h1 span {
    color: var(--primary);
    -webkit-text-stroke: 1px var(--primary); /* Efecto opcional de contorno */
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.25rem;
    max-width: 600px;
    margin-bottom: 3rem;
    color: var(--text-main);
    line-height: 1.6;
}

/* Fechas y Ubicación */
.hero-dates {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
}

.date-box {
    display: flex;
    flex-direction: column;
}

.date-box .day { font-size: 2.5rem; font-weight: 900; color: var(--primary); line-height: 1; }
.date-box .month { font-size: 1rem; text-transform: uppercase; font-weight: 700; color: var(--accent); }

.hero-location {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-dark);
    border-left: 2px solid var(--accent);
    padding-left: 1.5rem;
}

/* Botones Hero */
.hero-btns {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.btn-primary-hero {
    background-color: var(--primary);
    color: var(--white);
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px; /* Un toque de redondez mínima */
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.15);
}

.btn-secondary-hero {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
}

.btn-primary-hero:hover { background: var(--primary-dark); transform: translateY(-3px); }
.btn-secondary-hero:hover { color: var(--accent); padding-left: 10px; }


/* Visual (La Foto) con forma orgánica */
.hero-visual .visual-wrapper {
    width: 100%;
    height: 500px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; /* Forma orgánica tipo "blob" */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 10px solid var(--white);
    transition: var(--transition);
}

.hero-visual .visual-wrapper:hover {
    border-radius: 50%; /* Se vuelve círculo perfecto al hover */
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Indicador de Scroll */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.6;
}

.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid var(--primary);
    border-radius: 20px;
    position: relative;
}

.mouse::before {
    content: '';
    width: 4px; height: 8px;
    background: var(--accent);
    position: absolute;
    left: 50%; top: 8px;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

/* ==========================================================================
   MÓVIL Y TABLET 
   ========================================================================== */
@media (max-width: 992px) {
    /* 1. Apagamos flexbox para evitar auto-centrados rebeldes */
    .hero-new { 
        display: block !important; 
        padding-top: 100px !important; /* Espacio gigante y forzado para el header */
        padding-bottom: 100px;
        height: auto !important;
        min-height: 100vh;
    }

    /* 2. El grid también pasa a bloque para que fluya hacia abajo naturalmente */
    .hero-grid { 
        display: block !important;
        text-align: center; 
    }
    
    .hero-text {
        padding: 0 1rem; /* Margen de seguridad a los lados */
    }

    .hero-text h1 { 
        text-align: center; 
        font-size: clamp(2.5rem, 8vw, 3.5rem); /* Ajustamos letra para que no se rompa */
    }
    
    .hero-text p { margin: 0 auto 3rem; }
    
    .hero-dates { 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 2rem; 
        margin-bottom: 3rem;
    }
    
    .hero-btns { 
        display: flex;
        flex-direction: column; /* Botones uno debajo del otro en celular */
        gap: 1.5rem; 
        align-items: center;
    }

    .btn-primary-hero, .btn-secondary-hero {
        width: 100%; /* Botones anchos para fácil toque */
        max-width: 300px;
    }
    
    .hero-visual { display: none !important; }
    
    .scroll-indicator { display: none !important; }
}















/* ==========================================================================
   NUEVO HERO INDEX: ALTO TOTAL Y DISEÑO GEOMÉTRICO (SIN CÍRCULOS)
   ========================================================================== */
.hero-new {
    height: 100vh !important; /* Fuerza el alto total de la pantalla */
    min-height: 600px; /* Evita que se colapse en pantallas muy bajas */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    position: relative;
    background-color: var(--white);
    overflow: hidden; /* Evita scrolls accidentales por elementos decorativos */
    padding-top: 0; /* Quitamos el padding para que el centrado sea matemático */
}

/* Patrón de puntos integrado */
.hero-dots {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0, 51, 102, 0.05) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Bloque de Texto */
.hero-tag {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.hero-text h1 {
    font-size: clamp(2.8rem, 5.5vw, 4.2rem);
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    font-weight: 900;
    text-align: left;
}

.hero-text h1 span {
    color: var(--primary);
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.2rem;
    max-width: 580px;
    margin-bottom: 2.5rem;
    color: var(--text-main);
    line-height: 1.6;
}

/* Fechas y Ubicación */
.hero-dates {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.date-box .day { font-size: 2.5rem; font-weight: 900; color: var(--primary); line-height: 1; }
.date-box .month { font-size: 1rem; text-transform: uppercase; font-weight: 700; color: var(--accent); }

.hero-location {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-dark);
    border-left: 2px solid var(--accent);
    padding-left: 1.5rem;
}

/* Botones */
.hero-btns {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.btn-primary-hero {
    background-color: var(--primary);
    color: var(--white);
    padding: 1.1rem 2.2rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.12);
}

.btn-secondary-hero {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
}

.btn-primary-hero:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* ==========================================================================
   DISEÑO DE IMAGEN GEOMÉTRICO (LIMPIO Y PROFESIONAL)
   ========================================================================== */
.hero-visual {
    position: relative;
    padding: 20px;
}

/* Marco decorativo de acento */
.hero-visual::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 80%;
    border: 2px solid var(--accent);
    border-radius: 12px;
    z-index: 1;
    transition: var(--transition);
}

.hero-visual .visual-wrapper {
    width: 100%;
    height: 480px;
    position: relative;
    z-index: 2;
    /* RECTANGULAR: Forzamos esquinas levemente redondeadas, nada de círculos */
    border-radius: 12px !important; 
    overflow: hidden;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
    background-color: var(--primary-dark);
    transition: var(--transition);
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* HOVER: Mantenemos la forma rectangular SIEMPRE */
.hero-visual:hover .visual-wrapper {
    transform: translateY(-10px);
    border-radius: 12px !important; /* BLOQUEO TOTAL AL CÍRCULO */
}

.hero-visual:hover::before {
    transform: translate(-15px, 15px);
}

.hero-visual:hover img {
    transform: scale(1.05); /* Efecto zoom suave */
}

/* Indicador de Scroll */
.scroll-indicator {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
}

/* Móvil */
@media (max-width: 992px) {
    .hero-new { 
        height: auto !important; /* En móvil permitimos que crezca si el texto es mucho */
        min-height: 100vh;
        padding: 100px 0;
    }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-text h1 { text-align: center; }
    .hero-text p { margin: 0 auto 2rem; }
    .hero-dates, .hero-btns { justify-content: center; }
    .hero-visual { display: none !important; }
}


/* ==========================================================================
   SECCIÓN: WELCOME (DISEÑO EDITORIAL SIN CAJAS)
   ========================================================================== */
.welcome-section {
    padding: 8rem 0;
    /* Fondo con un gradiente muy elegante y sutil en tonos grises/azules claros */
    background: linear-gradient(135deg, var(--bg-light) 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

/* Detalle decorativo de fondo (un círculo opaco para romper lo plano) */
.welcome-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.03); /* Azul principal con casi nada de opacidad */
    z-index: 1;
}

.welcome-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima del círculo decorativo */
}

/* Rompemos el centrado del título global solo para esta sección */
.welcome-text h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}

.welcome-text h2::after {
    margin: 15px 0; /* Alinea la línea naranja a la izquierda */
}

.welcome-text .lead-text {
    font-size: 1.3rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.welcome-text p {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* Elemento visual tipográfico de la derecha */
.welcome-visual {
    text-align: center;
    border-left: 2px solid rgba(0,0,0,0.08); /* Una línea vertical divisoria muy fina */
    padding-left: 2rem;
}

.welcome-visual .big-number {
    font-size: 8rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    text-shadow: 6px 6px 0px rgba(243, 156, 18, 0.15); /* Sombra naranja desfasada */
}

.welcome-visual .big-number span {
    font-size: 3rem;
    vertical-align: super;
    color: var(--accent);
}

.welcome-visual .visual-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-main);
    margin-top: -10px;
}

/* Adaptación para pantallas móviles */
@media (max-width: 768px) {
    .welcome-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }
    
    .welcome-text h2 {
        text-align: center;
    }
    
    .welcome-text h2::after {
        margin: 15px auto;
    }
    
    .welcome-visual {
        border-left: none;
        border-top: 2px solid rgba(0,0,0,0.08);
        padding-left: 0;
        padding-top: 3rem;
    }
}

.dates-timeline {
    padding: 8rem 0;
    background-color: var(--white);
}

.timeline-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
}

.timeline-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    padding: 3rem;
    border-left: 4px solid #eee;
    position: relative;
    transition: var(--transition);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--white);
    border: 4px solid var(--primary);
    border-radius: 50%;
    z-index: 2;
}

.timeline-item:hover {
    background-color: var(--bg-light);
    border-left-color: var(--accent);
}

.date-display {
    text-align: center;
    color: var(--primary);
}

.date-display i { font-size: 1.5rem; color: var(--accent); margin-bottom: 0.5rem; }
.date-display .day { font-size: 3rem; font-weight: 900; display: block; line-height: 1; }
.date-display .month { text-transform: uppercase; font-weight: 700; font-size: 0.9rem; }

.date-content h4 { font-size: 1.6rem; color: var(--primary-dark); margin-bottom: 0.5rem; }
.date-content p { color: #666; }

.timeline-item.highlight {
    background-color: var(--primary-dark);
    color: var(--white);
    border-left-color: var(--accent);
    border-radius: 0 15px 15px 0;
}

.timeline-item.highlight .date-display,
.timeline-item.highlight .date-content h4,
.timeline-item.highlight .date-content p { color: var(--white); }

.urgent-tag {
    position: absolute;
    right: 30px;
    background: var(--accent);
    color: var(--primary-dark);
    padding: 4px 12px;
    font-weight: 800;
    font-size: 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
}

/* ==========================================================================
   SECCIÓN: TOP KEYNOTE SPEAKERS (ESTILO MINIMALISTA)
   ========================================================================== */
.speakers-preview {
    padding: 8rem 0;
    background-color: var(--bg-light);
}

.grid-speakers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4rem 2rem; /* Mayor separación vertical para que los perfiles "respiren" */
    margin-top: 4rem;
}

/* Contenedor invisible: Sin fondo, sin bordes, sin sombras cuadradas */
.speaker-item {
    text-align: center;
    background: transparent; 
    padding: 0;
    transition: var(--transition);
}

/* Efecto de elevación sutil a todo el conjunto */
.speaker-item:hover {
    transform: translateY(-8px);
}

/* La foto redonda es el único elemento con volumen */
.speaker-item img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12); /* Sombra suave solo alrededor de la foto */
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

/* La sombra se intensifica sutilmente al pasar el mouse */
.speaker-item:hover img {
    box-shadow: 0 20px 40px rgba(0, 31, 63, 0.25);
    border-color: var(--accent); /* Un ligero guiño al color naranja de la marca */
}

.speaker-item h4 {
    color: var(--primary-dark);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.speaker-item p {
    color: var(--text-main);
    font-weight: 500;
    font-size: 1rem;
    opacity: 0.8;
}


/* ==========================================================================
   SECCIÓN: STATS (DISEÑO MEJORADO)
   ========================================================================== */
.stats-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #001122 100%);
    padding: 7rem 0;
    color: var(--white);
    position: relative;
}

/* Patrón de puntos de fondo para textura académica */
.stats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    z-index: 1;
}

.stats-grid {
    position: relative;
    z-index: 2; /* Sobre el patrón de puntos */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 4rem 2rem; 
}

.stat-item { 
    text-align: center; 
    /* Una línea sutil debajo en lugar de encerrarlo en cajas */
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 2rem;
    transition: var(--transition);
}

.stat-item:hover {
    border-bottom-color: var(--accent);
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.15); /* Icono gigante casi de marca de agua */
    margin-bottom: 1rem;
    transition: var(--transition);
}

.stat-item:hover .stat-icon {
    color: var(--accent);
}

.stat-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline; /* Alinea el + con la base de los números grandes */
}

.stat-number-wrapper .plus {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
}

.stat-number-wrapper .number { 
    font-size: 4.5rem; 
    font-weight: 900; 
    color: var(--accent); 
    line-height: 1; 
    display: inline-block;
}

.stat-item p { 
    font-size: 0.95rem; 
    letter-spacing: 2px; 
    font-weight: 600; 
    text-transform: uppercase; 
    color: rgba(255,255,255,0.7);
    margin-top: 0.5rem;
}


/* ==========================================================================
   SECCIÓN: ORGANIZERS & COLLABORATORS (ESTILO JERÁRQUICO Y LIMPIO)
   ========================================================================== */
.organizers-section {
    padding: 8rem 0;
    background-color: var(--white);
}

.section-heading {
    text-align: center;
    margin-bottom: 5rem;
}

.section-heading h2 {
    margin-bottom: 0.5rem; /* Acercamos el h2 al subtítulo */
}

/* Subtítulo sutil bajo el H2 */
.section-heading p {
    color: var(--text-main);
    opacity: 0.7;
    font-size: 1.1rem;
    font-style: italic;
}

.partners-grid {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* Gran espacio entre categorías */
    align-items: center;
}

.partner-category {
    width: 100%;
    text-align: center;
}

/* Título de la categoría con líneas decorativas laterales */
.category-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.category-title::before,
.category-title::after {
    content: '';
    height: 1px;
    width: 80px;
    background-color: rgba(0, 51, 102, 0.15); /* Línea súper fina usando el azul UCSP */
}

.logo-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

/* Estado base del logo: Apagado, transparente y sin cajas */
.logo-wrapper a {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: grayscale(100%) opacity(0.4); 
    padding: 10px; /* Área segura de clic */
}

/* Interacción: Solo se enciende el que estás tocando */
.logo-wrapper a:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.08); /* Crece ligeramente */
}

/* Diferenciación de tamaños por jerarquía */
.main-organizer img {
    max-height: 100px; /* UCSP se ve más grande como Host */
    width: auto;
}

.collaborators img {
    max-height: 60px; /* Insur y otros se ven más pequeños */
    width: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .category-title::before,
    .category-title::after {
        width: 30px; /* Líneas más cortas en móviles */
    }
    
    .logo-wrapper {
        gap: 2.5rem;
        flex-direction: column; /* Apilamos los logos en celular */
    }
}













/* ==========================================================================
   FOOTER
   ========================================================================== */
.main-footer {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 5rem 0 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
}

.footer-col h4 { color: var(--accent); margin-bottom: 1.5rem; text-transform: uppercase; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col ul li a { color: var(--text-light); text-decoration: none; opacity: 0.7; transition: var(--transition); }
.footer-col ul li a:hover { opacity: 1; color: var(--accent); padding-left: 5px; }

.social-icons { display: flex; gap: 1rem; }
.social-icons a {
    width: 40px; height: 40px; background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    color: var(--white); text-decoration: none; transition: var(--transition);
}
.social-icons a:hover { background: var(--accent); transform: translateY(-5px); }

.footer-bottom {
    background-color: rgba(0,0,0,0.2);
    padding: 2rem 0;
    text-align: center;
    font-size: 0.85rem;
}

/* ==========================================================================
   ANIMACIONES 
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE MÓVIL (MENU Y DISEÑO)
   ========================================================================== */
@media (max-width: 992px) {
    header {
        justify-content: flex-start;
        gap: 20px;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 4000;
    }

    .bar {
        width: 100%;
        height: 3px;
        background-color: var(--white);
        transition: all 0.3s ease;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: -100%; 
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #001f3f; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: left 0.4s ease-in-out; 
        z-index: 3500;
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-links.active {
        left: 0; 
    }

    .nav-links a, 
    header.scrolled .nav-links a {
        color: #ffffff !important;
        font-size: 1.2rem;
        text-transform: uppercase;
    }

    .menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

@media (max-width: 768px) {
    .timeline-item { grid-template-columns: 1fr; gap: 1rem; padding-left: 2rem; }
    .date-display { text-align: left; display: flex; align-items: center; gap: 10px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .urgent-tag { position: static; display: inline-block; margin-top: 10px; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .social-icons { justify-content: center; }
}












/* ==========================================================================
   NUEVO DISEÑO: HERO DE PÁGINAS INTERNAS (MODERNO & TECH PARA AMW)
   ========================================================================== */
.page-header {
    position: relative;
    /* Degradado base oscuro y profundo */
    background: linear-gradient(135deg, #001122 0%, #001F3F 50%, #002b5e 100%);
    min-height: 300px; /* Misma altura estándar que el anterior */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-top: 80px; /* Espacio para que el menú no tape el contenido */
    border-bottom: 4px solid var(--accent); /* Línea inferior de acento */
}

/* Efecto "Tech Grid" (Cuadrícula de red de datos) */
.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.6;
    z-index: 1;
}

/* Brillo "Orb" radial (Simula energía/conexión en la esquina) */
.page-header::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.15) 0%, transparent 70%);
    top: -100px;
    right: 5%;
    border-radius: 50%;
    z-index: 1;
}

/* Contenedor del texto */
.page-header-content {
    position: relative;
    z-index: 2; /* Para que quede por encima de la cuadrícula */
    max-width: 800px;
    padding: 0 20px;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Título principal (Impactante y moderno) */
.page-header-content h1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

/* Subtítulo (Elegante con líneas laterales tech) */
.page-header-content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    display: inline-block;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Líneas decorativas a los lados del subtítulo */
.page-header-content p::before,
.page-header-content p::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background-color: var(--accent);
    opacity: 0.4;
}
.page-header-content p::before { right: 100%; margin-right: 15px; }
.page-header-content p::after { left: 100%; margin-left: 15px; }

/* Animación fluida de entrada */
@keyframes slideUpFade {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .page-header {
        min-height: 250px;
        padding-top: 60px;
    }
    .page-header-content p::before,
    .page-header-content p::after {
        display: none; /* Oculta las líneas laterales en pantallas pequeñas por espacio */
    }
}















/* ==========================================================================
   PÁGINA INFO (UNIFICADA CON EL ESTILO DE SUBMISSIONS)
   ========================================================================== */

/* 1. SECCIONES: Limpias para que se vea el fondo de puntos */
.info-section.tab-section {
    display: none; /* Se activa por JS */
    animation: fadeInTab 0.4s ease forwards;
    background: transparent !important; /* Quitamos el fondo blanco que tapa los puntos */
    padding: 0 !important;             /* Quitamos el padding extra para que use el del container */
    box-shadow: none !important;       /* Quitamos la sombra de caja */
    border: none !important;
}

.info-section.tab-section.active {
    display: block;
}

/* 2. TÍTULOS: Misma medida y estilo que Submissions */
.section-title-left {
    text-align: left;
    font-size: 2.2rem;
    color: var(--primary-dark);
    margin-bottom: 2.5rem;
    position: relative;
}

.section-title-left::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent);
    margin-top: 10px;
}

/* 3. BLOQUES DE TEXTO: Ajuste de ancho máximo (igual a submissions) */
.editorial-text-block {
    max-width: 750px; /* Reducido para igualar la legibilidad de Submissions */
    background: transparent !important;
}

.editorial-text-block p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

/* 4. COMITÉ ORGANIZADOR: Ajuste de tarjetas */
/* Aquí mantenemos tu diseño de fotos pero con medidas controladas */
.officers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4rem;
}

.officer-item {
    background: #ffffff; /* Las tarjetas de personas sí llevan blanco para resaltar */
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    flex: 1 1 250px;
    max-width: 280px; /* Medida controlada */
}

.officer-photo {
    width: 110px; /* Un poco más pequeña para no verse tosca */
    height: 110px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary);
}

.officer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5. TABLAS (EDICIONES PREVIAS / DATES): Estilo editorial limpio */
.editions-wrapper {
    margin-top: 2rem;
    border-top: 2px solid var(--primary-dark);
    max-width: 850px; /* Ajustado para que no ocupe todo el ancho */
}

.edition-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr; /* Medidas de columnas fijas como en Submissions */
    gap: 1.5rem;
    padding: 1.2rem 0.5rem;
    border-bottom: 1px solid rgba(0, 51, 102, 0.08);
    background: transparent;
}

.edition-header {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--primary-dark);
    background: rgba(0,0,0,0.02);
}

/* 6. OTROS ELEMENTOS DE INFO */
.subsection-title {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin: 3rem 0 1.5rem 0;
    text-align: left;
}

.tpc-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    max-width: 900px;
}

.tpc-list li {
    padding-left: 15px;
    border-left: 2px solid var(--accent);
    font-size: 0.95rem;
}

/* 7. AJUSTE DASHBOARD (Apegar el menú a la izquierda) */
.tabs-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 5%; /* Espacio porcentual para flexibilidad */
    padding-top: 3rem;
    max-width: 1400px !important;
    width: 95% !important;
    margin-left: 2% !important; /* Empuja todo el conjunto a la izquierda */
}

.sidebar-nav {
    flex: 0 0 240px;
    background: transparent !important; /* Menú lateral sin caja blanca */
    box-shadow: none !important;
}

.content-area {
    flex: 1;
}

/* Responsive para Info */
@media (max-width: 768px) {
    .tabs-page-layout {
        flex-direction: column;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .sidebar-nav {
        flex: none;
        width: 100%;
        margin-bottom: 2rem;
    }
    .edition-row {
        grid-template-columns: 1fr;
    }
}












/* ==========================================================================
   PÁGINA: SPEAKERS DIRECTORY (ESTILO MINIMALISTA Y LUMINOSO)
   ========================================================================== */

.speakers-tier {
    padding: 8rem 0; 
    position: relative;
}

/* 1. DISEÑO MINIMALISTA PARA KEYNOTES (Blanco con patrón de cuadrados) */
.main-keynotes {
    background-color: #ffffff;
    /* Patrón de puntos sobre blanco */
    background-image: radial-gradient(rgba(0, 51, 102, 0.05) 2px, transparent 2px);
    background-size: 30px 30px;
    position: relative;
}

/* Forzamos colores oscuros para la tipografía sobre el fondo claro */
.main-keynotes .tier-heading h2 { color: var(--primary-dark); }
.main-keynotes .tier-heading p { color: var(--text-main); opacity: 0.7; }
.main-keynotes .portrait-name { color: var(--primary-dark); }
.main-keynotes .portrait-uni { color: var(--text-main); }

/* 2. DISEÑO PARA SCHOOL SPEAKERS (Gris perla con patrón de puntos) */
.school-speakers {
    background-color: var(--bg-light);
    /* Patrón de puntos sobre gris perla */
    background-image: radial-gradient(rgba(0, 51, 102, 0.04) 2px, transparent 2px);
    background-size: 30px 30px;
    border-top: 1px solid rgba(0,0,0,0.03);
    position: relative;
}

.school-speakers .tier-heading h2 { color: var(--primary-dark); }
.school-speakers .tier-heading p { color: var(--text-main); opacity: 0.7; }
.school-speakers .portrait-name { color: var(--primary-dark); }
.school-speakers .portrait-uni { color: var(--text-main); }

/* ==========================================================================
   GRILLAS Y RETRATOS (DISEÑO FLOTANTE)
   ========================================================================== */
.tier-heading {
    text-align: center;
    margin-bottom: 5rem;
}

.tier-heading h2 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.tier-heading p {
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
}

/* Grillas responsivas */
.tier-grid {
    display: grid;
    gap: 4rem 2rem;
    justify-items: center; 
}

.grid-large { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-medium { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* El Retrato Flotante */
.speaker-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: var(--transition);
    max-width: 300px;
}

/* Interacción limpia */
.speaker-portrait:hover {
    transform: translateY(-8px);
}

.speaker-portrait:hover .portrait-name {
    color: var(--accent); /* El nombre cambia a tu color naranja/oro */
}

.speaker-portrait:hover img {
    box-shadow: 0 25px 45px rgba(0, 31, 63, 0.15); /* Sombra más amplia y difusa */
    border-color: var(--white);
}

/* La Fotografía Circular */
.speaker-portrait img {
    border-radius: 50%;
    object-fit: cover;
    /* Al estar en fondo blanco/gris, el borde blanco y la sombra le dan un efecto 3D hermoso */
    border: 6px solid var(--white); 
    box-shadow: 0 12px 25px rgba(0,0,0,0.08); 
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.grid-large img { width: 240px; height: 240px; }
.grid-medium img { width: 170px; height: 170px; }

.portrait-name {
    font-weight: 800;
    margin-bottom: 0.4rem;
    transition: var(--transition);
    line-height: 1.2;
}

.grid-large .portrait-name { font-size: 1.6rem; }
.grid-medium .portrait-name { font-size: 1.3rem; }

.portrait-uni {
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .speakers-tier { padding: 5rem 0; }
    .grid-large img { width: 200px; height: 200px; }
    .grid-medium img { width: 150px; height: 150px; }
    .tier-heading h2 { font-size: 2.2rem; }
}













/* ==========================================================================
   PÁGINA: SPEAKER DETAIL (ESTILO EDITORIAL)
   ========================================================================== */

.speaker-detail-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 5rem;
    align-items: start;
}

/* Sidebar del Speaker */
.speaker-sidebar {
    position: sticky;
    top: 120px; /* Se queda pegada al bajar el scroll */
    text-align: center;
}

.speaker-photo-wrapper img {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--white);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.speaker-quick-info h3 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.speaker-quick-info .affiliation {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-main);
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.speaker-social {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 2rem;
}

.speaker-social a {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
}

.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    opacity: 0.6;
    transition: var(--transition);
}

.back-link:hover {
    opacity: 1;
    color: var(--accent);
    transform: translateX(-5px);
}

/* Contenido Principal */
.talk-title {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.subtle-divider {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,0.05);
    margin: 4rem 0;
}

.talk-details, .bio-details {
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 992px) {
    .speaker-detail-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .speaker-sidebar {
        position: relative;
        top: 0;
    }

    .speaker-photo-wrapper img {
        width: 220px;
        height: 220px;
    }
}









/* ==========================================================================
   PÁGINA: VENUE (DISEÑO EDITORIAL)
   ========================================================================== */

.venue-article {
    margin-bottom: 7rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.venue-article:last-child {
    border-bottom: none;
}

/* Layout dividido para el Campus y el Mapa */
.venue-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
    margin-top: 2rem;
}

.venue-info h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.venue-info p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

.location-details {
    list-style: none;
    margin-top: 2rem;
}

.location-details li {
    padding: 0.8rem 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    color: var(--text-main);
}

/* El Contenedor del Mapa (Ventana elegante) */
.map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 31, 63, 0.1);
    border: 8px solid var(--white); /* Borde blanco grueso para efecto "foto" */
}

/* Logística: Hoteles y Transporte */
.logistics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

.log-desc {
    font-style: italic;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.log-list {
    list-style: none;
}

.log-list li {
    margin-bottom: 1rem;
    padding-left: 20px;
    position: relative;
    font-size: 1.05rem;
}

.log-list li::before {
    content: '•';
    color: var(--accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 992px) {
    .venue-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .logistics-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}


/* ==========================================================================
   VENUE: LISTA DE HOTELES (DISEÑO EDITORIAL)
   ========================================================================== */
.hotel-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--primary-dark);
}

.hotel-row {
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0, 51, 102, 0.1);
    transition: var(--transition);
}

.hotel-row:hover {
    background-color: rgba(0, 51, 102, 0.02);
    padding-left: 10px;
    padding-right: 10px;
}

.hotel-info h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.hotel-info p {
    color: var(--text-main);
    opacity: 0.8;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.hotel-price {
    text-align: right;
    color: var(--text-main);
    font-size: 1.1rem;
}

.hotel-price strong {
    color: var(--accent);
    font-size: 1.3rem;
}

/* Modo Responsive para celulares */
@media (max-width: 768px) {
    .hotel-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }
    
    .hotel-price {
        text-align: left;
        border-top: 1px dashed rgba(0,0,0,0.1);
        padding-top: 0.5rem;
    }
}

/* ==========================================================================
   DISEÑO VISUAL DE VENUE
   ========================================================================== */

/* Grid principal de la Sede */
.venue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.venue-image-main img {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    font-size: 0.85rem;
    color: var(--text-main);
    opacity: 0.6;
    margin-top: 10px;
    font-style: italic;
    text-align: right;
}

/* Galería de Imágenes Estilo Editorial */
.venue-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 3rem 0;
}

.gallery-item {
    margin: 0;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

.gallery-item figcaption {
    padding: 10px 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    text-align: center;
}

/* Sección de Mapa */
.map-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3rem;
    align-items: start;
}

.map-container {
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 992px) {
    .venue-grid, .map-layout {
        grid-template-columns: 1fr;
    }
    .venue-gallery {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .venue-gallery {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MEJORA VISUAL DE IMÁGENES (DINÁMICAS Y ASIMÉTRICAS)
   ========================================================================== */

/* 1. Definimos una sombra premium suave global */
.shadow-premium {
    box-shadow: 0 20px 60px rgba(0, 51, 102, 0.08) !important;
}

/* 2. IMAGEN PRINCIPAL (VENUE) CON MARCO FLOTANTE */
.dynamic-frame-container {
    position: relative;
    z-index: 1;
    padding-right: 20px; /* Espacio para el marco offset */
}

/* El marco decorativo offset detrás de la imagen */
.dynamic-frame-container::before {
    content: '';
    position: absolute;
    top: 20px; left: 20px; width: 100%; height: 100%;
    border: 3px solid var(--accent);
    z-index: -1;
    border-radius: 40px 10px 40px 10px; /* Redondeado asimétrico */
    opacity: 0.3;
    transition: var(--transition);
}

.asymmetric-img {
    border-radius: 40px 10px 40px 10px; /* Redondeado asimétrico en la imagen misma */
    object-fit: cover;
    width: 100%;
    height: 400px; /* Ajusta según necesidad */
    transition: var(--transition);
}

/* Efecto al pasar el mouse sobre el contenedor */
.dynamic-frame-container:hover .asymmetric-img {
    transform: translateY(-5px);
}
.dynamic-frame-container:hover::before {
    transform: translate(-10px, -10px);
    opacity: 1;
    background-color: rgba(243, 156, 18, 0.03); /* Suave glow naranja */
}


/* 3. GALERÍA DINÁMICA (TURISMO) */
.dynamic-gallery {
    gap: 2rem !important; /* Más aire entre ítems */
}

.asymmetric-gallery-item {
    border-radius: 20px 5px; /* Redondeado asimétrico sutil */
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.asymmetric-gallery-item img {
    border-radius: 20px 5px; /* Asegura que la imagen siga el borde del contenedor */
    aspect-ratio: 16/10; /* Un formato un poco más panorámico y elegante */
    transition: transform 0.6s ease;
}

/* Efectos de Hover interactivos en la galería */
.asymmetric-gallery-item:hover {
    transform: translateY(-8px) rotate(1deg); /* Sutil rotación para dar dinamismo */
    box-shadow: 0 25px 50px rgba(0, 51, 102, 0.12);
}

.asymmetric-gallery-item:hover img {
    transform: scale(1.03); /* Zoom muy sutil dentro de la máscara */
}


/* 4. AJUSTE RESPONSIVE (MÓVIL) */
@media (max-width: 992px) {
    .asymmetric-img, .asymmetric-gallery-item img {
        height: auto;
    }
    .dynamic-frame-container {
        padding-right: 0;
        margin-top: 2rem;
    }
    .dynamic-frame-container::before {
        display: none; /* Quitamos el marco offset en móvil para simplificar */
    }
}















/* ==========================================================================
   PÁGINA: PROGRAM (DISEÑO DE LÍNEA DE TIEMPO)
   ========================================================================== */

/* Navegación de pestañas */
.program-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    opacity: 0.5;
}

.tab-btn.active {
    opacity: 1;
    color: var(--primary);
}

/* Línea naranja bajo el botón activo */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
}

/* Contenido del horario */
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

.schedule-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    align-items: center;
}

.schedule-item:last-child {
    border-bottom: none;
}

/* Columna de la hora */
.schedule-item .time {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.1rem;
}

/* Columna de la actividad */
.activity h3 {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 0.3rem;
}

.activity p {
    color: var(--text-main);
    opacity: 0.8;
}

/* Estilos para sesiones especiales (Keynotes) */
.schedule-item.keynote .activity h3 {
    color: var(--accent); /* Resaltamos las keynotes */
}

/* Animación simple */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .program-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .tab-btn {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
    .schedule-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.5rem 0;
    }
    .schedule-item .time {
        color: var(--accent);
    }
}













/* ==========================================================================
   PÁGINA: SUBMISSIONS (DATA TRANSCRIPT)
   ========================================================================== */

/* 1. Important Dates (Editorial Style) */
.dates-list-editorial {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 700px;
}

.date-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.date-row .label { 
    font-weight: 800; 
    color: var(--primary-dark); 
    font-size: 1.1rem;
}
.date-row .strikethrough { text-decoration: line-through; opacity: 0.4; font-size: 0.9rem; }
.date-row .updated { 
    color: var(--accent); 
    font-weight: 700; 
    font-size: 1.1rem;
    text-align: right; 
}

/* 2. Avisos (Callouts) - Reemplaza los cuadros cerrados por bordes laterales */
.info-callout {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    line-height: 1.6;
}

.info-callout.blue { 
    border-left: 5px solid var(--primary); 
    background-color: rgba(0, 51, 102, 0.03); 
}

.info-callout.red { 
    border-left: 5px solid #d9534f; 
    background-color: rgba(217, 83, 79, 0.03); 
}

/* 3. Listas Editorial */
.bullet-list, .bullet-list-pink {
    list-style: none;
    margin: 1.5rem 0;
}

.bullet-list li, .bullet-list-pink li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 1rem;
}

.bullet-list li::before { content: '→'; position: absolute; left: 0; color: var(--primary); }
.bullet-list-pink li::before { content: '•'; position: absolute; left: 0; color: #e91e63; font-weight: bold; }

/* 4. Camera-Ready Numbered List */
.guidelines-numbered ol {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
}

.guidelines-numbered ol > li {
    display: block;
    position: relative;
    margin-bottom: 2rem;
    padding-left: 50px;
}

.guidelines-numbered ol > li::before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    font-weight: 900;
    color: var(--primary);
    font-size: 1.5rem;
}

.guidelines-numbered ul {
    list-style: none;
    margin-top: 1rem;
    padding-left: 20px;
}

.guidelines-numbered ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.guidelines-numbered ul li::before {
    content: '-';
    position: absolute;
    left: 0;
}

.small-text {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    padding: 10px;
    background: rgba(0,0,0,0.02);
}

/* Responsive */
@media (max-width: 768px) {
    .date-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .guidelines-numbered ol > li { padding-left: 40px; }
}
@media (max-width: 600px) {
    .date-row { 
        grid-template-columns: 1fr; 
        text-align: left;
    }
    .date-row .updated {
        text-align: left;
        margin-top: 5px;
    }
}












/* ==========================================================================
   PÁGINA: REGISTRATION (EDITORIAL FEES)
   ========================================================================== */

.fees-list {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.fee-row {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.fee-row:last-child {
    border-bottom: none;
}

.fee-info h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.fee-info p {
    color: var(--text-main);
    opacity: 0.7;
    font-style: italic;
}

.fee-price {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: right;
}

.price-item {
    font-size: 1.2rem;
    color: var(--primary-dark);
}

.price-item strong {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-right: 10px;
}

/* Botón de Registro Principal */
.registration-cta {
    margin: 3rem 0;
    padding: 2.5rem;
    border-top: 2px solid var(--accent);
    display: flex;
    justify-content: center;
}

.registration-cta .btn-read-more {
    font-size: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .fee-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    .fee-price {
        text-align: center;
    }
}










/* ==========================================================================
   PÁGINA: NEWS
   ========================================================================== */
   
   /* Estilo para la nota AoE */
.aoe-notice {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: rgba(0, 51, 102, 0.03);
    border-left: 4px solid var(--primary);
    font-size: 1rem;
    color: var(--primary-dark);
}

/* Estilo para artículos de noticias */
.news-article {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.news-date {
    display: block;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.news-article h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}