/* ================================= */
/* NAVBAR PREMIUM 2026 */
/* ================================= */

.navbar-premium {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: fixed;   /* hace el navbar fijo */
    top: 0;
    
    width: 100%;
    z-index: 1050;
}

/* Línea superior elegante */
.navbar-top-bar {
    height: 4px;
    background: linear-gradient(90deg, #0f3d2e, #d4af37);
}

/* Logo */
.logo-navbar-new {
    height: 55px;
    transition: 0.3s ease;
}

.logo-navbar-new:hover {
    transform: scale(1.05);
}

/* Texto marca */
.brand-title {
    font-weight: 800;
    font-size: 1rem;
    color: #0f3d2e;
    letter-spacing: 1px;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: #777;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Links modernos */
.nav-modern {
    position: relative;
    font-weight: 600;
    font-size: 1rem;
    color: #333 !important;
    transition: all 0.3s ease;
}

/* Hover */
.nav-modern:hover {
    color: #0f3d2e !important;
}

/* Línea animada activa */
.nav-modern::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #0f3d2e, #d4af37);
    border-radius: 10px;
    transition: 0.3s ease;
}

.nav-modern:hover::after {
    width: 100%;
}

.nav-modern.active::after {
    width: 100%;
}

/* Dropdown premium */
.dropdown-premium {
    border-radius: 16px;
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    padding: 10px;
}

.dropdown-premium .dropdown-item {
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 500;
    transition: 0.25s ease;
}

.dropdown-premium .dropdown-item:hover {
    background: linear-gradient(90deg, #f2f7f5, #fff8e1);
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {

    .navbar-premium {
        backdrop-filter: none;
        background: white;
    }

    .nav-modern::after {
        display: none;
    }

}

/* ========================================= */
/* HERO REDISEÑO TEXTO */
/* ========================================= */

.hero-content {
    animation: fadeUp 1s ease forwards;
}

.hero-badge {
    display: inline-block;
    background: #0b9c34;
    color: #e9e4e1;
    padding: 8px 18px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    border: 1px solid #d4af37;
    border-radius: 50px;
    margin-bottom: 25px;
    text-align: center;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
    color: #d4af37;
    margin-bottom: 25px;
}

.hero-divider {
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #d4af37, transparent);
    margin-bottom: 10px;
}

.hero-info {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-icon {
    font-size: 1.8rem;
    color: #d4af37;
}

.hero-info-item small {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #745d11;
}

.hero-info-item strong {
    font-size: 1rem;
    font-weight: 600;
    color: #745d11;
}

/* Animación suave */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.navbar-premium {
    padding: 0;
}

.navbar-premium .navbar {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}

/* ================================= */
/* HERO CON IMAGEN SOLO EN SECCIÓN */
/* ================================= */
.hero-banner {
    position: relative;
    padding: 80px 0 100px 0;
    background: url('/assets/images/baner_2.png') center center no-repeat;
    background-size: cover;
    margin-top:0;
    margin-bottom:0;
}

/* Overlay blanco */
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.75);
    pointer-events: none;
}

/* Contenido encima */
.hero-banner .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {

    .hero-banner {
        /*background-position: 78% center; /* centra mejor la imagen en móvil */
        background: url('/assets/images/baner.png') center center no-repeat;
        padding: 60px 0 80px 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .hero-info {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

}

/* ================================ */
/* HERO INSTITUCIONAL #004c4f */
/* ================================ */

.hero-content-left {
    max-width: 680px;
}

/* Badge superior */
.hero-tag {
    background: rgba(0, 76, 79, 0.08);
    color: #004c4f;
    padding: 10px 24px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid rgba(0, 76, 79, 0.3);
}

/* Título principal */
.hero-title {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: #004c4f;
    line-height: 1.1;
}

/* Subtítulo con contraste elegante */
.hero-subtitle {
    font-size: 2.1rem;
    font-weight: 800;
    color: #002f31;
    line-height: 1.2;
}

/* Texto descriptivo */
.hero-text {
    font-size: 1.2rem;
    color: #2f4f51;
    line-height: 1.8;
}

/* Información inferior */
.hero-info {
    font-size: 1.05rem;
    font-weight: 600;
    color: #004c4f;
    align-items: center;
}

.hero-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Línea divisoria elegante */
.hero-info-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 76, 79, 0.3);
    display: none;
}

@media (min-width: 576px) {
    .hero-info-divider {
        display: block;
    }
}

/* Responsive */
@media (max-width: 991px) {

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

}


/* ===================================== */
/* PROGRAMA ACADÉMICO · VERDE #004c4f */
/* ===================================== */

#programa {
    background: linear-gradient(to bottom, #f4f8f8, #ffffff);
    padding-top:40px;
    padding-bottom:60px;
}

/* Título principal */
.titulo-principal {
    color: #004c4f;
    font-weight: 800;
    letter-spacing: 1px;
}

.titulo-principal + div {
    background-color: #004c4f !important;
}

/* Badge del día */
.badge-green {
    background-color: #004c4f;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 50px;
}

/* Tarjeta general */
.programa-card {
    border-left: 6px solid #004c4f;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.programa-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 76, 79, 0.15);
}

/* Encabezados de sección */
.titulo-seccion {
    color: #004c4f;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(0, 76, 79, 0.2);
    padding-bottom: 8px;
}

/* Conferencias */
.titulo-conferencia {
    font-weight: 600;
    color: #002f31;
    margin-top: 15px;
}

/* Hora destacada */
.hora {
    color: #004c4f;
    font-weight: 700;
}

/* Divisores */
.programa-card hr {
    border: none;
    height: 1px;
    background: rgba(0, 76, 79, 0.15);
}

/* Clausura */
.bg-green-dark {
    background-color: #004c4f !important;
}

/* Texto interior */
.programa-card p {
    color: #2f4f51;
}

.programa-card ul {
    padding-left: 18px;
}

.programa-card ul li {
    margin-bottom: 4px;
}

/* Responsive ajuste */
@media (max-width: 768px) {
    .programa-card {
        border-left: 4px solid #004c4f;
    }
}

/* ===================================== */
/* TIMELINE INSTITUCIONAL #004c4f */
/* ===================================== */

.timeline {
    position: relative;
    margin-top: 60px;
}

/* Línea central */
.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #004c4f;
    transform: translateX(-50%);
}

/* Día separador */
.timeline-day {
    text-align: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #004c4f;
    margin: 60px 0 30px 0;
    position: relative;
}

/* Item centrado */
.timeline-item {
    position: relative;
    width: 100%;
    padding: 30px 40px;
    text-align: left;
    
}

.timeline-content .timeline-con-imagen {
    display: inline-flex;              /* para imagen + texto */
    justify-content: center;     /* CENTRAR todo el bloque */
    align-items: center;
    gap: 30px;
    max-width: 900px;           /* ancho máximo del bloque */
    margin: 0 auto;             /* centrado horizontal */
}

.timeline-contenedor{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    max-width: 900px;   /* ancho controlado */
    margin: 0 auto;     /* 🔥 lo centra */
}



@media (min-width: 769px) {

    .timeline-item {
        flex-shrink: 0;   /* no se encoge en web */
    }

}

/* eliminar comportamiento impar/par */
.timeline-item:nth-child(even),
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: left;
}

/* Punto */
.timeline-item::before {
    display: none;
}

.timeline-item:nth-child(odd)::before {
    right: -10px;
}

.timeline-item:nth-child(even)::before {
    left: -10px;
}

/* Tarjeta */
.timeline-content {
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 76, 79, 0.12);
    transition: 0.3s ease;
    text-align: left;

    width: 100%;
    max-width: 100%;
    display: block;

    /* evitar que el texto desborde */
    word-break: break-word;
}

.timeline-content:hover {
    transform: translateY(-6px);
}

/* Hora */
.timeline .hora {
    display: block;
    font-weight: 700;
    color: #004c4f;
    margin-bottom: 10px;
}

/* Clausura destacada */
.timeline-clausura .timeline-content {
    background: #004c4f;
    color: white;
}

.timeline-clausura .hora {
    color: #d4af37;
}

/* ============================= */
/* SOLO COLORES DE CONTENEDORES */
/* ============================= */

/* Todas las tarjetas */
.timeline-item .timeline-content {
    background: linear-gradient(135deg, #002425, #004c4f);
    color: #ffffff;
}

/* Clausura en dorado */
.timeline-clausura .timeline-content {
    background: linear-gradient(135deg, #b8860b, #d4af37);
    color: #002425;
}

/* ===================================== */
/* CONTORNOS LIMPIOS Y REDONDEADOS */
/* ===================================== */

/* Contenedores verdes */
.timeline-item:not(.timeline-clausura) .timeline-content {
    border: 2px solid #d4af37; /* Dorado */
    border-radius: 12px;       /* Asegura esquinas redondeadas */
}

/* Contenedor dorado (clausura) */
.timeline-clausura .timeline-content {
    border: 2px solid #004c4f; /* Verde institucional */
    border-radius: 12px;
}

/* ============================= */
/* TÍTULOS EN DORADO */
/* ============================= */

/* H4 otro color */
.timeline-item .timeline-content h4 {
    color: #d1cca3; /* cambia al color que quieras */
}

.timeline-item .timeline-content h5 {
    color: #d4af37;
}


/* ===================================== */
/* TÍTULO PRINCIPAL EN DORADO */
/* ===================================== */

#programa .titulo-principal {
    color: #d4af37;
}



/* ============================= */
/* PUNTOS DORADOS SIN CONTORNO */
/* ============================= */

.timeline-item::before {
    background: #d4af37;
    border: none;
} 

/* Responsive */
@media (max-width: 991px) {

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 20px;
        text-align: left !important;
        left: 0 !important;
    }

    .timeline-item::before {
        left: 10px !important;
        right: auto;
    }

}

/* ========================================= */
/* UBICACIÓN PREMIUM */
/* ========================================= */

.ubicacion-section {
    background: #004c4f;
    color: #ffffff;
}

.titulo-ubicacion {
    color: #d4af37;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.divider-dorado {
    width: 90px;
    height: 4px;
    background: #d4af37;
    margin-top: 15px;
    margin-bottom: 15px;
}

.sub-ubicacion {
    color: #ffffffcc;
}

.ubicacion-card {
    background: linear-gradient(135deg, #002425, #004c4f);
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #d4af37;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    text-align: justify;
}

.ubicacion-card h5 {
    color: #d4af37;
    font-weight: 600;
}

.btn-dorado {
    background: #ffffff;
    color: #07b8be;
    font-weight: 700;
    border-radius: 30px;
    padding: 8px 25px;
    border: 2px solid #d4af37;
    transition: all 0.3s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-dorado:hover {
    background: #d4af37;
    color: #002425;
}


.img-ubicacion {
    border-radius: 12px;
    border: 2px solid #d4af37;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.mapa-container {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #d4af37;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.mapa-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* ============================= */
/* PROGRAMA INSTITUCIONAL FIX */
/* ============================= */
.modal-body{
    overflow-x: hidden;
} 

.programa-modal .container{
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.timeline-content{
    padding: 25px 30px;
}

.timeline-item{
    width:100%;
}

.timeline-content{
    width:100%;
    box-sizing:border-box;
}

.timeline-content img{
    max-width:100%;
    height:auto;
}
#programa {
    background-color: #f4f8f7; /* fondo suave */
}

@media (max-width:768px){

.timeline-content{
    width:100%;
    max-width:100%;
}

}
/* Tarjetas principales */
.programa-card {
    background-color: #004c4f !important;
    color: #ffffff !important;
    border-radius: 14px;
}

/* Secciones internas */
.programa-card .card-body {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Línea divisoria */
.programa-card hr {
    border-color: rgba(255,255,255,0.25);
}

/* Títulos */
.titulo-dia,
.titulo-seccion,
.titulo-conferencia {
    color: #ffffff !important;
    font-weight: 600;
}

/* Horas */
.hora {
    color: #b8e0dc !important;
    font-weight: 700;
}

/* Texto general */
.programa-card p,
.programa-card li {
    color: #e4f2f1 !important;
}

/* Badges de día */
.badge-green {
    background-color: #004c4f !important;
    color: #ffffff !important;
    letter-spacing: 1px;
}

/* Sección de clausura */
.bg-green-dark {
    background-color: #00383a !important;
}

/* Quitar colores anteriores */
.tono-verde,
.tono-morado,
.tono-azul,
.tono-dorado {
    background: #004c4f !important;
    color: #ffffff !important;
}


/* ========================= */
/* COLOR PRINCIPAL PROYECTO */
/* ========================= */

.bg-legal-green {
    background-color: #004c4f;
}

/* ========================= */
/* INFO CARDS */
/* ========================= */

.info-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 2rem;
    border-radius: 20px;
    transition: 0.3s ease;
}

.info-card:hover {
    border-color: #ffffff;
    transform: translateY(-5px);
}

.info-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.info-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    opacity: 0.8;
}

.info-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.info-text {
    opacity: 0.8;
}

/* ========================= */
/* PROGRAMA */
/* ========================= */

.section-title {
    font-weight: 800;
    font-size: 2.5rem;
    color: #004c4f;
}

.section-title span {
    color: #004c4f;
}

.section-subtitle {
    color: #6c757d;
    max-width: 600px;
}

.program-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid #e9ecef;
    transition: 0.3s ease;
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.program-icon {
    font-size: 2rem;
    color: #004c4f;
    margin-bottom: 1rem;
}

/* ========================= */
/* MAPA */
/* ========================= */

.map-section {
    height: 400px;
    overflow: hidden;
}

.map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,76,79,0.4);
}


/* ============================= */
/* COLORES INSTITUCIONALES */
/* ============================= */

.bg-legal-green {
    background-color: #004c4f;
}

:root {
    --legal-dark: #002425;
    --legal-main: #004c4f;
    --legal-gold: #d4af37;
}

/* ============================= */
/* TITULOS */
/* ============================= */

.section-title-gold {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--legal-gold);
}

.section-title-gold span {
    color: #d4af37;
}

.section-subtitle-white {
    color: #0e7d54;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

/* ============================= */
/* CARDS */
/* ============================= */

.legal-card {
    background: linear-gradient(145deg, var(--legal-dark), var(--legal-main));
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.15);
    transition: 0.4s ease;
    color: #ffffff;
}

.legal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    border-color: var(--legal-gold);
}

/* ============================= */
/* ICONOS */
/* ============================= */

.legal-icon {
    font-size: 2rem;
    color: var(--legal-gold);
    min-width: 60px;
}

/* ============================= */
/* TEXTOS */
/* ============================= */

.legal-title {
    font-weight: 700;
    color: var(--legal-gold);
    margin-bottom: 4px;
    text-align: center;
}

.legal-highlight {
    text-align: center;
    
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.legal-text {
    text-align: justify;
    color: #ffffff;
    opacity: 0.9;
    font-weight: 400;
}

/* =============================== */
/* SPEAKERS SECTION PREMIUM */
/* =============================== */

.speakers-section {
    background-color: #004c4f;
    color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Títulos principales */
.speakers-section h2 {
    color: #d4af37;
    font-weight: 800;
    letter-spacing: 2px;
}

.speakers-section p {
    color: #ffffff;
}

/* Subtítulos de ejes */
.speakers-section h3 {
    color: #ffffff;
    border-bottom: 1px solid rgba(212,175,55,0.4);
    padding-bottom: 1rem;
}

/* =============================== */
/* SPEAKER CARD */
/* =============================== */

.speaker-card {
    background: linear-gradient(145deg, #002425, #004c4f);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.4s ease;
    color: #ffffff;
    height: 100%;

    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
}

.speaker-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border-color: #d4af37;

    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* Imagen */
.speaker-card img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #d4af37 !important;
    transition: 0.4s ease;
}

.speaker-card:hover img {
    transform: scale(1.05);
}

/* Nombre */
.speaker-card h5 {
    color: #d4af37;
    font-weight: 700;
    margin-top: 1rem;
}

/* Badge país */
.speaker-card .badge {
    background-color: #d4af37 !important;
    color: #002425 !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Línea decorativa debajo del nombre */
.speaker-card h5::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #d4af37;
    margin: 0.5rem auto 0;
}

/* ============================= */
/* BOTÓN CERRAR PONENTE */
/* ============================= */

.ponente-card {
    background: linear-gradient(145deg, #002425, #004c4f);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    color: #ffffff;
    max-width: 900px;
    position: relative;
}

.ponente-section {
    background-color: #004c4f;
    color: white;
}

.ponente-nombre {
    color: #d4af37;
    font-weight: 700;
}

.divider {
    width: 60px;
    height: 2px;
    background: #d4af37;
    margin: 1rem auto;
}



.btn-close-ponente {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-close-ponente:hover {
    background: #d4af37;
    color: #002425;
    transform: rotate(90deg);
}

/* ===================================== */
/* TITULOS EJES EN DORADO PREMIUM */
/* ===================================== */

.titulo-ejes {
    position: relative;
}

/* Título principal */
.eje-principal {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: #d4af37;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Línea decorativa elegante */
.eje-divider {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #d4af37, transparent);
    border-radius: 10px;
}

/* Contenedor secundarios */
.ejes-secundarios {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Subtítulos */
.ejes-secundarios h3 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 600;
    color: #b8860b;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* Línea inferior sutil */
.ejes-secundarios h3::after {
    content: "";
    display: block;
    width: 60%;
    height: 2px;
    background: rgba(212,175,55,0.4);
    margin: 6px auto 0;
    transition: 0.3s ease;
}

/* Hover elegante */
.ejes-secundarios h3:hover::after {
    width: 100%;
    background: #d4af37;
}

/* ============================= */
/* CLAUSURA COLORES PERSONALIZADOS */
/* ============================= */

.timeline-clausura .timeline-content p {
    color: #ffffff !important; /* Verde institucional */
}

.timeline-clausura .timeline-content h5 {
    color: #c00000 !important; /* Rojo institucional */
}

/* ============================= */
/* BOTÓN UBICACIÓN - CONTRASTE */
/* ============================= */

.ubicacion-card .btn-dorado {
    background-color: #ffffff;
    color: #004c4f;
    border: 2px solid #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ubicacion-card .btn-dorado:hover {
    background-color: #d4af37; /* dorado */
    color: #ffffff;
    border-color: #d4af37;
}


/* ===================================== */
/* TIMELINE MÓVIL LIMPIO (SIN LÍNEA) */
/* ===================================== */

@media (max-width: 991px) {

    /* Eliminar línea vertical */
    .timeline::before {
        display: none !important;
    }

    /* Eliminar puntos */
    .timeline-item::before {
        display: none !important;
    }

    /* Quitar estructura de 2 columnas */
    .timeline-item {
        width: 100% !important;
        left: 0 !important;
        padding: 15px 0 !important;
        text-align: left !important;
    }

    /* Reducir espacio entre eventos */
    .timeline-item {
        margin-bottom: 10px;
    }

    /* Compactar tarjetas */
    .timeline-content {
        padding: 18px 20px;
        border-radius: 12px;
    }

    /* Día más compacto */
    .timeline-day {
        margin: 35px 0 15px;
        font-size: 1.3rem;
    }

    /* Reducir espacio interno de textos */
    .timeline-content h4,
    .timeline-content h5 {
        margin-bottom: 2px;
    }

    .timeline-content p {
        margin-bottom: 8px;
    }

    .timeline-content ul {
        margin-bottom: 8px;
        padding-left: 18px;
    }

    .timeline-content {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

}

/* ===================================== */
/* MINIATURAS DE PONENTES EN MÓVIL */
/* ===================================== */

.timeline-header {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.speaker-thumb {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #d4af37;
    flex-shrink: 0;
}

/* Solo en móvil activamos el layout compacto */
@media (max-width: 991px) {

    .timeline-header {
        align-items: center;
        margin-bottom: 10px;
    }

    .speaker-thumb {
        width: 50px;
        height: 50px;
    }

}

.ponentes-miniaturas {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.ponentes-miniaturas img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.ponentes-miniaturas img:first-child {
    margin-left: 0;
}

.ponentes-miniaturas img:hover {
    transform: scale(1.08);
    z-index: 10;
}
.ponencia{
    display:flex;
    align-items:flex-start;
    gap:18px;
    justify-content:flex-start;
    text-align:left;
}

.ponencia img{
    width:75px;
    height:75px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.ponencia .info h5{
    margin:0 0 6px;
    font-size:1rem;
    font-weight:600;
}

.ponencia .info p{
    margin:0;
    font-size:0.95rem;
    line-height:1.5;
}

.hora{
    color:var(--verde-principal);
    font-weight:600;
}

.evento-simple{
    margin-bottom:30px;
    padding-left:5px;
}

.panelistas {
    margin-left: 93px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.panelista {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panelista img {
    width: 75px;          /* mismo tamaño que ponentes */
    height: 75px;
    border-radius: 12px;  /* mismo estilo que .ponencia img */
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.hora {
    color: var(--verde-principal);
    font-weight: 600;
}



/* ===== MODAL ANUNCIO ===== */
.anuncio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.4s ease-in-out;
}

.anuncio-contenido {
    position: relative;
    max-width: 800px;
    width: 90%;
    animation: zoomIn 0.4s ease-in-out;
}

.anuncio-contenido img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.cerrar-anuncio {
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(0,0,0,0.6);
    border:none;
    color:white;
    font-size:22px;
    width:35px;
    height:35px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cerrar-anuncio{
    position: absolute;
    top: 10px;
    right: 10px;

    background: transparent;
    border: none;
    outline: none;

    font-size: 32px;
    color: #ffffff;

    cursor: pointer;
    z-index: 10;
}

/* quitar estilos por defecto del botón */
.cerrar-anuncio:focus,
.cerrar-anuncio:active{
    outline: none;
    box-shadow: none;
}

/* tamaño del icono */
.cerrar-anuncio i{
    font-size: 32px;
}

.cerrar-anuncio i{
    font-size: 34px;
    color: white;
    transition: transform .2s ease, color .2s ease;
}

/* Desktop */
.cerrar-anuncio:hover i{
    transform: scale(1.2);
    color: #d4af37;
}

/* Móvil */
.cerrar-anuncio:active i{
    transform: scale(1.2);
    color: #d4af37;
}

.cerrar-anuncio:hover {
    background:rgba(0,0,0,0.8);
    transform:scale(1.1);
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===== MODAL FECHA (INDEPENDIENTE) ===== */

.anuncio-fecha-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.anuncio-fecha-contenido {
    position: relative;
    max-width: 600px;        /* más pequeño */
    width: 90%;
    max-height: 90vh;        /* nunca más alto que la pantalla */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anuncio-fecha-contenido img {
    max-width: 100%;
    max-height: 85vh;        /* limita altura */
    object-fit: contain;     /* no se deforma */
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Botón visible siempre */
.cerrar-fecha {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #8b1e2d;
    color: white;
    border: none;
    font-size: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.cerrar-fecha:hover {
    background: #6e1823;
}

/* MODAL UBICACIÓN */
.modal-ubicacion {
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

/* Botón dorado */
.btn-dorado {
    background: linear-gradient(135deg, #c6a85a, #a98c3c);
    color: white;
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.btn-dorado:hover {
    background: linear-gradient(135deg, #a98c3c, #8f742f);
    transform: translateY(-2px);
}

/* Mapa responsive */
.mapa-container {
    position: relative;
    width: 100%;
    padding-bottom: 400px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.mapa-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}

body,
#wrapper,
main,
section:not(.hero-banner) {
    background: #ffffff !important;
}
/**************************************************************************************************************************/
/* ================================= */
/* ACCESIBILIDAD GLOBAL */
/* ================================= */

html {
  font-size: 24px; /* antes 14px */
}

@media (min-width: 768px) {
  html {
    font-size: 28px; /* antes 16px */
  }
}

body {
    padding-top: clamp(70px, 8vh, 100px) !important;
  line-height: 1.7;
  letter-spacing: 0.4px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ===== PALETA VERDE OSCURO INSTITUCIONAL ===== */

.bg-green-dark {
    background-color: #0f3d2e !important;
}

.bg-green-medium {
    background-color: #145c43 !important;
}



.text-green-dark {
    color: #0f3d2e !important;
}







/* ===== ESTILOS PARA PONENTES CON FONDO DE PATRÓN y estilos para ponentes ===== */

.ponente-section {
    background-image: url('/assets/images/fondo.png');
    background-size: cover;
    background-position: center;
}

.ponente-card {
    max-width: 900px;
    
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.ponente-nombre {
    font-weight: 800;
    font-size: 32px;
    color: #0f5132;
    letter-spacing: 1px;
}

.divider {
    width: 70px;
    height: 4px;
    background-color: #d4af37;
    margin: 15px auto 30px auto;
    border-radius: 10px;
}

.ponente-semblanza {
    text-align: justify;
    font-size: 17px;
    line-height: 1.9;
    color: #333;
}

.ponente-semblanza strong {
    color: #0f5132;
}

.ponente-semblanza em {
    color: #555;
    font-style: italic;
}






/* ===== SPEAKERS BACKGROUND CON TU IMAGEN ===== */

/*.speakers-section {
    position: relative;
    background-color: #042d23 !important;
    background-image: url('/assets/images/puntos.png');
    background-repeat: repeat;
    background-size: 300px;
    padding-top: 80px;
    padding-bottom: 80px;
}*/


@media (max-width: 768px) {

    .hero-section-PJ {
        background-position: 78% center; /* 👈 centra el logo */
    }

    hero-section-nAI {
        background-position: 78% center; /* 👈 centra el logo */
    }

    .hero-section-PG {
        background-position: 78% center; /* 👈 centra el logo */
    }

    .hero-section-RP {
        background-position: 78% center; /* 👈 centra el logo */
    }

    .hero-section-DP {
        background-position: 78% center; /* 👈 centra el logo */
    }

}
/* ============================= */
/* PROGRAMA ACADÉMICO - Tipografía Grande */
/* ============================= */

#programa h2 {
    font-size: 2.5rem;
}

#programa h4 {
    font-size: 1.8rem;
}

#programa h5 {
    font-size: 1.5rem;
}

#programa h6 {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

#programa p,
#programa li {
    font-size: 1.15rem;
}

#programa .badge {
    font-size: 0.95rem;
}

#programa .card-body {
    padding: 2rem;
}

/* ============================= */
/* CARD CON SEPARADOR DECORATIVO */
/* ============================= */
.programa-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background-color: #ffffff;
}

.programa-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background-repeat: repeat-y;
    background-size: cover, 80px auto;
    z-index: 1;
    
}

.programa-card .card-body {
    position: relative;
    z-index: 2;
    padding-left: 150px !important;  /* ajusta el valor hasta que quede como quieres */
}



/* ===== TITULOS MÁS LLAMATIVOS ===== */

/* ============================= */
/* TITULOS MÁS GRANDES EN TODAS LAS TARJETAS */
/* ============================= */

/* Base general para todos */
.programa-card h6 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.programa-card h5 {
    font-size: 1.9rem;
    font-weight: 900;
}

.programa-card p strong {
    font-size: 1.15rem;
}





/* ============================= */
/* TITULOS SECUNDARIOS */
/* ============================= */



.programa-card h4 {
    position: relative;
    padding-bottom: 10px;
}




/* ============================= */
/* DROPDOWN INSTITUCIONAL PREMIUM */
/* ============================= */

.dropdown-menu {
    min-width: 280px;
    border-radius: 18px;
    padding: 12px;
    border: none;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* Item completo */
.dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 16px 20px; /* un poco más de espacio */
    border-radius: 14px;
    transition: all 0.25s ease;
}

/* Número del eje */
.eje-numero {
    font-size: 0.95rem;     /* antes 0.80 */
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #7c3aed;
}

/* Tema */
.eje-tema {
    font-size: 1.25rem;     /* antes 1.05 */
    font-weight: 700;
    color: #333;
}

/* Hover elegante */
.dropdown-item:hover {
    background: linear-gradient(90deg, #f3e8ff, #e0f2fe);
    transform: translateX(6px);
}

/* Activo */
.dropdown-item.active {
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.dropdown-item.active .eje-numero,
.dropdown-item.active .eje-tema {
    color: white;
}

/* ============================= */
/* CENTRAR EJES EN MÓVIL */
/* ============================= */

@media (max-width: 991px) {

    .dropdown-menu {
        position: static !important;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        text-align: center;
    }

    .dropdown-item {
        text-align: center;
        font-size: 1.9rem;
        font-weight: 600;
        padding: 10px 0;
        color: #592C82;
    }

}

/* ===== FIX MODAL BOOTSTRAP ===== */

.modal {
    z-index: 20000 !important;
}

.modal-dialog {
    z-index: 20001 !important;
}

.modal-content {
    background: #ffffff !important;
    position: relative;
    z-index: 20002 !important;
}

.modal-backdrop {
    z-index: 19999 !important;
}

body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

.modal-ubicacion .modal-content {
    border-radius: 20px;
    border: none;
    overflow: hidden;
}

.modal-ubicacion .modal-header {
    background: #004c4f;
    color: #fff;
    padding: 1.5rem 2rem;
}

.mapa-container {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
}

.mapa-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.img-ubicacion {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* ================================= */
/* MODO ACCESIBLE - TIPOGRAFÍA GRANDE */
/* ================================= */

body {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

/* Textos generales */
p,
li,
span,
small,
a {
    font-size: 1.15em !important;
}

/* Títulos */
h1 { font-size: 3em !important; }
h2 { font-size: 2.5em !important; }
h3 { font-size: 2.1em !important; }
h4 { font-size: 1.8em !important; }
h5 { font-size: 1.6em !important; }
h6 { font-size: 1.4em !important; }

/* Botones */
button,
.btn {
    font-size: 1.2em !important;
    padding: 14px 26px !important;
}

/* Inputs */
input,
select,
textarea {
    font-size: 1.2em !important;
}

/* ============================= */
/* TIMELINE FULL WIDTH EN MÓVIL */
/* ============================= */

@media (max-width: 991px) {

    #programa .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .timeline-content {
        margin: 0;
        border-radius: 0 !important;
    }

}

/* ===================================== */
/* ELIMINAR LÍNEA TIMELINE EN MÓVIL */
/* ===================================== */

@media (max-width: 991px) {

    /* Quitar línea vertical */
    .timeline::before {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Quitar puntos */
    .timeline-item::before {
        content: none !important;
        display: none !important;
    }

    /* Resetear layout de 2 columnas */
    .timeline-item {
        width: 100% !important;
        left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* ===================================== */
/* FULL WIDTH REAL EN MOVIL */
/* ===================================== */

@media (max-width: 991px) {

    #programa {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #programa .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .timeline {
        padding: 0 !important;
    }

    .timeline-item {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .timeline-content {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* opcional */
    }

}

/* ================================= */
/* FIX NAVBAR LAYOUT */
/* ================================= */

.navbar-premium .container,
.navbar-premium .container-fluid{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* bloque logo + texto */
.navbar-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

/* texto del sitio */
.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    text-align: center;
}

/* Ajuste para celulares */
@media (max-width: 576px){

    .brand-title{
        font-size: 0.9rem;
        text-align: center;
    }

    .brand-subtitle{
        font-size: 0.65rem;
        letter-spacing: 1px;
        text-align: center;
    }

}

@media (max-width: 576px){

    .logo-navbar-new{
        height: 45px;
    }

}

/* botón hamburguesa a la derecha */
.navbar-toggler{
    margin-left:auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-ubicacion .modal-content {
    background: #002425;
    color: #ffffff;
}

.modal-ubicacion .modal-title {
    color: #ffffff;
}

.modal-ubicacion p {
    color: #ffffff;
}

/* ================================= */
/* MODAL ANUNCIO */
/* ================================= */

.anuncio-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.anuncio-contenido{
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen adaptable */
.anuncio-contenido img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    object-fit: contain;
}

/* Botón cerrar */
.cerrar-anuncio{
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ffffff;
    border: none;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* ================================= */
/* AJUSTE PARA MÓVIL HORIZONTAL */
/* ================================= */

@media (max-height: 500px){

    .anuncio-contenido img{
        max-height: 80vh;
    }

}

/* ================================= */
/* MODAL ANUNCIO */
/* ================================= */

.anuncio-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.anuncio-contenido{
    position: relative;
    max-width: 700px;
    width: 90%;
}

.anuncio-contenido img{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* BOTÓN CERRAR */
.cerrar-anuncio{
    position: absolute;
    top: -15px;
    right: -15px;

    width: 40px;
    height: 40px;

    background: #004c4f;
    border: 2px solid #d4af37;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
}

/* ICONO X */
.cerrar-anuncio i{
    color: #ffffff;
    font-size: 20px;
}

/* Hover */
.cerrar-anuncio:hover{
    background: #d4af37;
}

.cerrar-anuncio:hover i{
    color: #002425;
}

/* MOBILE */
@media (max-width:768px){

    .cerrar-anuncio{
        top: -12px;
        right: -12px;
        width: 38px;
        height: 38px;
    }

}

/* ================================= */
/* CARDS RESPONSIVE SIN ICONOS MOVIL */
/* ================================= */

@media (max-width: 768px){

    .legal-card{
        flex-direction: column;
        gap: 10px !important;
    }

    .legal-icon{
        display:none;
    }

}

/* ================================= */
/* MODAL ANUNCIO EVENTO */
/* ================================= */

.anuncio-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(0,0,0,0.65);
    
    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;
}

/* contenedor del anuncio */
.anuncio-contenido{
    position: relative;
    max-width: 700px;
    width: 90%;
}

/* imagen */
.anuncio-contenido img{
    width: 100%;
    border-radius: 10px;
}

/* botón cerrar */
.cerrar-anuncio{
    position: absolute;
    top: 10px;
    right: 10px;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: none;

    background: #004c4f;
    color: white;
    font-size: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;
}

/* efecto hover */
.cerrar-anuncio:hover{
    background: #d4af37;
    color: #002425;
}


/* ================================= */
/* IMAGEN DECORATIVA EN LOS CARDS DEL INDEX */
/* ================================= */


.card-ubicacion {
     position: relative;   /* IMPORTANTE */
    overflow: hidden;     /* evita que la imagen se salga */
    padding-bottom: 70px; /* espacio para la decoración */
}

#fechaCard{
    position:relative;
    overflow:hidden;
    padding-bottom:205px; /* espacio reservado para la imagen */
}



.card-ubicacion > *{
    position: relative;
    z-index: 2;
}

/* card contenedor */
.fecha-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* contenido arriba */
.fecha-contenido{
    position: relative;
    z-index: 2;
    gap:12px;
}

/* imagen decorativa */
.decoracion-card{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
     width:auto;        /* usa tamaño natural */
    height:auto;       /* usa tamaño natural */
    max-width:none;    /* elimina límites */
    max-height:none;

    /*opacity:0.45;
    filter:blur(2px) saturate(0.8);*/

    pointer-events:none;
}

.decoracion-container{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:15px;
}



@media (max-width:768px){

    .decoracion-card{
        max-height:150px;
        bottom:-5px;
    }

}

/* ================================= */
/* CARD PROGRAMA ACADEMICO */
/* ================================= */

.card-programa{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}

.programa-contenido{
    z-index:2;
}

.programa-decoracion{
    width:100%;
    height:220px;
    overflow:hidden;          /* recorta la imagen */
    margin-top:5px;
    border-radius:12px;
    object-position:left center;  /* muestra la parte derecha */
}

.programa-decoracion img{
    width:140%;               /* agranda la imagen para poder moverla */
    height:100%;
    object-fit:cover;
    object-position:left center;  /* muestra la parte derecha */
    display:block;
}
@media (max-width:768px){

    .card-programa{
        overflow: visible; /* importante para que no se recorte */
    }

    .programa-decoracion{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:15px;
    }

    .programa-decoracion img{
        width:100%;          /* controla el ancho */
        height:200px;       /* 🔥 aquí la hacemos más alta */
        object-fit:cover;   /* mantiene proporción sin deformar */
        display:block;
        margin:0 auto;      /* centra */
        border-radius:12px; /* opcional, mejora estética */

     
    }


}


    /* Mostrar la parte derecha 75 */
    .banner-derecha75{
        width:100%;
        height:220px;
        overflow:hidden;          /* recorta la imagen */
        margin-top:5px;
        border-radius:12px;
    }

    .banner-derecha75 img{
    width:140%;               /* agranda la imagen para poder moverla */
        height:100%;
        object-fit:cover;
        object-position:right center;  /* muestra la parte derecha */
        display:block;
    }

    @media (max-width:768px){

        .banner-derecha75{
            width:100%;
            display:flex;
            /*justify-content:center;*/
            align-items:center;
            margin-top:8px;
            object-position: 75% center;
        }

        .banner-derecha75 img{
            width:100%;
            height:200px;       /* misma altura que el otro */
            object-fit:cover;   /* evita deformación */
            display:block;
            margin:0 auto;
            border-radius:12px;
            object-position: 75% center;
        }

    }

/* Mostrar la parte derecha 100 */
.banner-derecha100{
    width:100%;
    display:flex;
    align-items:center;
    margin-top:5px;
    overflow:hidden;
}

.banner-derecha100 img{
   width:100%;
    height:200px;       /* misma altura que quieres */
    object-fit:cover;
    display:block;
    margin:0 auto;
    border-radius:12px;
    object-position:100% center;
}

@media (max-width:768px){

   .banner-derecha100 img{
        height:200px;
        object-position:100% center;
    }

}


/* Mostrar la parte derecha 25 */
.banner-derecha25{
    width:100%;
    display:block;
    align-items:center;
    margin-top:5px;
    overflow:hidden;
}

.banner-derecha25 img{
   width:100%;
    height:200px;       /* misma altura que quieres */
    object-fit:cover;
    display:block;
    margin:0 auto;
    border-radius:12px;
    object-position:25% center;
}

@media (max-width:768px){

   .banner-derecha25 img{
        height:200px;
        object-position:25% center;
    }

}

.programa-decoracion-centro{
    width:100%;
    height:220px;
    overflow:hidden;          /* recorta la imagen */
    margin-top:5px;
    border-radius:12px;
    object-position: center;  /* muestra la parte derecha */
}

.programa-decoracion-centro img{
    width:140%;               /* agranda la imagen para poder moverla */
    height:100%;
    object-fit:cover;
    object-position: center;  /* muestra la parte derecha */
    display:block;
}
@media (max-width:768px){

    .card-programa{
        overflow: visible; /* importante para que no se recorte */
    }

    .programa-decoracion-centro{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:15px;
    }

    .programa-decoracion-centro img{
        width:100%;          /* controla el ancho */
        height:200px;       /* 🔥 aquí la hacemos más alta */
        object-fit:cover;   /* mantiene proporción sin deformar */
        display:block;
        margin:0 auto;      /* centra */
        border-radius:12px; /* opcional, mejora estética */

     
    }


}

.legal-card p{
    margin-bottom:4px;
}

.fecha-card{
    justify-content:flex-start;
}

.row.g-4{
    align-items:flex-start;
}

/* Evita que las columnas se estiren */
.row{
    align-items:flex-start !important;
}

/* Evita que el card crezca de más */
.legal-card{
    height:auto !important;
    min-height:unset !important;
    padding-bottom:12px !important;
}

/* Evita estiramiento interno del flex */
.fecha-card{
    flex:0 0 auto !important;
}

.fecha-card{
    gap:12px !important;
}

.fecha-contenido{
    margin:0 !important;
}
/*
@media (max-width:768px){

    .programa-decoracion img{
        width:95%;
        max-width: none !important; */
        /*opacity:0.35;*/
 /*   }

}*/



/* ================================= */
/* SLIDER OAXACA */
/* ================================= */

.slider-oaxaca{
    width:100%;
    overflow:hidden;
    margin-top:20px;
    position:relative;
    margin-top:-10px; /* pega el slider al hero */

    padding:0;
    margin:0;
    line-height:0; /* elimina espacio fantasma de imágenes */
}

.slider-oaxaca img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:12px;

    display:block; /* evita espacio inferior */
    width:100%;
    height:auto;
}


.slider-oaxaca::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 60%, #ffffff 100%);
}

/* ========================================= */
/* SECCIÓN DETALLE PONENTE RESPONSIVE FIX */
/* ========================================= */

.ponente-section {
    overflow-x: hidden;
}

.ponente-card {
    max-width: 900px;
    width: 100%;
    margin: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Texto de semblanza */
.ponente-semblanza {
    line-height: 1.8;
    font-size: 1.05rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Nombre del ponente */
.ponente-nombre{
    word-break: break-word;
}

/* Ajuste móvil */
@media (max-width: 768px){

    .ponente-card{
        padding: 30px 20px !important;
    }

    .ponente-semblanza{
        font-size: 1rem;
        text-align: justify;
    }

}


/* ===================================== */
/* BOTON CERRAR MODAL PONENTE */
/* ===================================== */

.btn-close-ponente{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

    border-radius:50%;
    border:2px solid #d4af37;
    background:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#004c4f;
    font-size:20px;
    cursor:pointer;

    z-index:10;
}

/* evita conflictos con iconos */
.btn-close-ponente i{
    font-size:20px;
    line-height:1;
}

/* desactiva pseudo-elementos de otros css */
.btn-close-ponente::before,
.btn-close-ponente::after{
    display:none !important;
}

.btn-close-ponente:hover{
    background:#d4af37;
    color:#ffffff;
}

.timeline-content,
.timeline-content h4,
.timeline-content h5,
.timeline-content p,
.timeline-content span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ponencia {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ponencia .info {
    flex: 1;
    min-width: 0;
}

.ponencia img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    flex-shrink: 0;
}

.programa-modal{
    width: 100%;
}

.programa-modal .container-fluid{
    padding-left: 0;
    padding-right: 0;
}

.modal-body{
    padding: 0 !important;
}

.programa-modal{
    padding: 5px;
}

.panelista img{
    width:80px;
    height:80px;
    object-fit:cover;
}

/* ================================= */
/* NAVBAR RESPONSIVE MOVIL FIX */
/* ================================= */

@media (max-width:768px){

    .logo-navbar-new{
        height:40px;
    }

    .brand-title{
        font-size:0.85rem;
        line-height:1.1;
    }

    .brand-subtitle{
        font-size:0.65rem;
        letter-spacing:1px;
    }

    .navbar-brand{
        gap:10px;
        align-items: center;
    }

}

/* ============================= */
/* FIX NAVBAR MOVIL */
/* ============================= */

.navbar-premium .container{
    display:flex;
    align-items:center;
}

/* evita que el logo empuje el botón */
.navbar-brand{
    flex:0 1 auto;
    max-width:80%;
}

/* empuja el botón a la derecha */
.navbar-toggler{
    margin-left:auto;
}
/* ================================= */
/* NAVBAR FIX PARA PANTALLAS PEQUEÑAS */
/* ================================= */

@media (max-width:480px){

    .logo-navbar-new{
        height:40px;
    }

    .brand-title{
        font-size:0.8rem;
        line-height:1;
    }

    .brand-subtitle{
        font-size:0.65rem;
        line-height:1;
    }

    .navbar-brand{
        gap:8px !important;
    }

    .navbar-toggler{
        padding:4px 6px;
    }

}

/* ================================= */
/* ESPACIO PARA MENÚ MÓVIL */
/* ================================= */

@@media (max-width:991px){

    #detallePonente{
        margin-top:200px;
    }


}


/* ESPACIO PARA NAVBAR EN MÓVIL */
.ponente-section{
    padding-top: 120px;
}

/* En pantallas muy pequeñas más espacio */
@media (max-width:768px){

    .ponente-section{
        padding-top: 160px;
    }

}

.ponente-section{
    padding-top: 120px;
}

@media (max-width:768px){
    .ponente-section{
        padding-top: 170px;
    }
}

/* espacio normal */
.ponente-section{
    margin-top:120px;
}

/* pantallas pequeñas */
@media (max-width:768px){
    .ponente-section{
        margin-top:200px;
    }
}

/* pantallas muy pequeñas */
@media (max-width:480px){
    .ponente-section{
        margin-top:230px;
    }
}

body{
    padding-top:120px;
}

@media (max-width:768px){
    body{
        padding-top:180px;
    }
}

.timeline-con-imagen{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    
}

/* texto ocupa todo el espacio disponible */
.timeline-texto{
    flex: 1;
}

/* contenedor de imagen */
.timeline-decoracion{
    flex-shrink: 0;
}

/* imagen */
.timeline-decoracion img{
    width: 120px;
    height: auto;
    /*opacity: 0.15;*/
}

.bandera-ponente{
    width:58px !important;
    height:auto !important;
    max-width:58px !important;
}

/* ================================= */
/* NAVBAR EXTRA SMALL ( <500px ) */
/* ================================= */

@media (max-width:500px){

    /* contenedor del navbar */
    .navbar-premium .container,
    .navbar-premium .container-fluid{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding-left:10px;
        padding-right:10px;
    }

    /* logo más pequeño */
    .logo-navbar-new{
        height:38px;
    }

    /* bloque logo + texto */
    .navbar-brand{
        gap:8px;
        max-width:75%;
        margin:0 auto; /* 🔥 centra el bloque */
    }

    /* texto marca */
    .brand-title{
        font-size:0.75rem;
        letter-spacing:0.5px;
        line-height:1.1;
        text-align: center;
    }

    .brand-subtitle{
        font-size:0.55rem;
        letter-spacing:0.8px;
    }

    /* botón hamburguesa */
    .navbar-toggler{
        padding:6px 8px;
    }

}

@media (max-width:500px){

    .navbar-toggler{
        padding:3px 5px;
        font-size:0.75rem;
    }

    .navbar-toggler-icon{
        width:16px;
        height:16px;
    }

}
.navbar-toggler{
    border-width:1px;
}

/* Botón hamburguesa más pequeño */
.navbar-toggler{
    padding:4px 6px;
    font-size:0.8rem;
}

/* Tamaño del icono */
.navbar-toggler-icon{
    width:18px;
    height:18px;
}

/* ================================= */
/* CARDS DE EMERGENCIAS */
/* ================================= */

.texto-justificado{
    text-align: justify;
}
.emergencia-card{
border: none;
border-radius: 16px;
background: linear-gradient(145deg, var(--legal-dark), var(--legal-main));
color:#ffffff;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
transition: all .3s ease;
padding: 10px;

height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: justify;

min-height:260px;
}

.emergencia-card:hover{
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

/* icono */
.icono-emergencia{
font-size: 2.2rem;
color: var(--legal-gold);
}

/* teléfono */
.telefono{
display:block;
margin-top:6px;
font-weight:600;
font-size:1.05rem;
color:#ffffff;
text-decoration:none;
}

.telefono:hover{
color: var(--legal-gold);
}

/*boton de ver informacion*/
.btn-success{
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
width:100%;
max-width:180px;
margin:auto;
}

.emergencia-card p{
word-break: normal;
overflow-wrap: break-word;
white-space: normal;
}

.emergencia-card h5{
word-break: normal;
overflow-wrap: normal;
white-space: normal;
}

@media (max-width:768px){

.emergencia-card h5{
font-size:1.2rem;
}

}

/* tamaño normal */
.titulo-hotel{
font-size: clamp(1.1rem, 1.5vw, 1.5rem);
line-height: 1.3;
text-align: center;
word-break: normal;
overflow-wrap: normal;
}

/* cuando la pantalla se haga más pequeña */
@media (max-width:1200px){

.titulo-hotel{
font-size:1.25rem;
}

}

@media (max-width:768px){

.titulo-hotel{
font-size:1.1rem;
}

}
/* ================================= */
/* MODAL EMERGENCIAS */
/* ================================= */

.modal-emergencias{
border-radius:14px;
overflow:hidden;
padding:0;
}

/* Header con imagen */
.modal-header-emergencias{

background:#004c4f;
padding:35px 30px;
border-bottom:none;

}

/* Titulo */
.modal-header-emergencias .modal-title{
font-size:1.5rem;
letter-spacing:.5px;
color: #004c4f;
}

/* Tabla */
.tabla-emergencias thead{
background:#f8f9fa;
font-weight:600;
}

.tabla-emergencias td{
vertical-align:middle;
}

.modal-emergencias .modal-body{
padding:0;
}

#modalEmergencias .modal-dialog{
margin:0 auto;
}


/* ================================= */
/* TABLA EMERGENCIAS */
/* ================================= */

.tabla-emergencias{
border-collapse: separate;
border-spacing:0;
font-size:0.95rem;
}

/* encabezado */
.tabla-emergencias thead{
background:#004c4f;
color:#ffffff;
}

.tabla-emergencias thead th{
font-weight:600;
border:none;
padding:14px 16px;
}

/* filas */
.tabla-emergencias tbody tr{
transition:background 0.2s ease;
}

.tabla-emergencias tbody td{
padding:14px 16px;
border-bottom:1px solid #e9ecef;
}

/* efecto hover */
.tabla-emergencias tbody tr:hover{
background:#eaf4f4;
transition:background 0.2s ease;
}
/* primera y última esquina redondeada */
.tabla-emergencias thead th:first-child{
border-top-left-radius:8px;
}

.tabla-emergencias thead th:last-child{
border-top-right-radius:8px;
}

.tabla-emergencias a{
color:#004c4f;
font-weight:600;
text-decoration:none;
}

.tabla-emergencias a:hover{
text-decoration:underline;
}

/* zebra institucional */
.tabla-emergencias tbody tr:nth-child(even){
background:#f4f8f8;
}

.tabla-emergencias tbody tr:nth-child(odd){
background:#ffffff;
}

/* teléfonos */
.tabla-emergencias a.telefono{
color:#004c4f;
font-weight:600;
text-decoration:none;
}

.tabla-emergencias a.telefono::before{
content:"📞 ";
}

/* web */
.tabla-emergencias a.web{
color:#004c4f;
font-weight:500;
text-decoration:none;
}

.tabla-emergencias a.web::before{
content:"🌐 ";
}

.tabla-emergencias td:first-child span{
background:#e6f2f2;
padding:4px 10px;
border-radius:20px;
font-size:0.9rem;
}


/* ================================= */
/* TARJETA DE  EMERGENCIAS EN EL FOOTER */
/* ================================= */

.footer-banner{
position:relative;
}

/* tarjeta */
.tarjeta-911-footer{
position:absolute;

bottom:25px;
left:50%;
transform:translateX(-50%);

display:flex;
align-items:center;
gap:20px;

background:linear-gradient(145deg, var(--legal-dark), var(--legal-main));
color:white;

padding:18px 24px;
border-radius:14px;

box-shadow:0 15px 40px rgba(0,0,0,0.35);
max-width:520px;
}

/* icono */
.icono-911{
font-size:2rem;
color:var(--legal-gold);
}

/* texto */
.contenido-911 h4{
margin:0;
font-size:1.3rem;
}

.contenido-911 p{
margin:0;
font-size:0.85rem;
opacity:.9;
}

/* botón */
.btn-911{
background:white;
color:#004c4f;
padding:8px 18px;
border-radius:25px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
transition:.3s;
}

.btn-911:hover{
background:var(--legal-gold);
color:white;
}

/* ================================= */
/* AJUSTE RESPONSIVE TARJETA 911 */
/* ================================= */

@media (max-width:768px){

.tarjeta-911-footer{

    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);

    flex-direction:column;      /* icono arriba */
    text-align:center;

    gap:10px;

    padding:14px 16px;
    width:90%;
    max-width:340px;
}

/* icono */
.icono-911{
    font-size:1.7rem;
}

/* titulo */
.contenido-911 h4{
    font-size:1.05rem;
}

/* texto */
.contenido-911 p{
    font-size:0.8rem;
}

/* boton */
.btn-911{
    margin-top:6px;
}

}









/* ============================= */
/* GALERIA EVENTO */
/* ============================= */

.galeria-item{
cursor:pointer;
overflow:hidden;
border-radius:10px;
}

.galeria-item img{
transition: transform .4s ease;
}

.galeria-item:hover img{
transform: scale(1.08);
}


/* ============================= */
/* CARDS MODAL EMERGENCIAS */
/* ============================= */

.card-emergencia-modal{
background: linear-gradient(135deg,#1f7a4c,#2fa66a);
border: none;
border-radius: 12px;
color: white;
transition: all .25s ease;
}

.card-emergencia-modal:hover{
transform: translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.card-emergencia-modal a{
color:white;
font-weight:500;
text-decoration:none;
}

.card-emergencia-modal a:hover{
text-decoration:underline;
}

.card-emergencia-modal i{
font-size:1rem;
margin-right:4px;
}


.card-emergencia{
border-radius:12px;
border:none;
transition: all .25s ease;
}

.card-emergencia:hover{
transform: translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.card-emergencia i{
font-size:1rem;
}

.card-emergencia-modal .text-muted{
color:white !important;
opacity:0.9;
}

.card-emergencia-modal{
color:white;
}

.card-emergencia-modal h5{
color:white;
}

.card-emergencia-modal p{
color:white;
}

.card-emergencia-modal a{
color:white;
}
 /* ============================= */
/* AJUSTE RESPONSIVE DE TEXTO */
/* ============================= */



.card-emergencia-modal h5,
.card-emergencia-modal p,
.card-emergencia-modal span,
.card-emergencia-modal a{
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}


.card-emergencia-modal h5{
font-size:1.1rem;
line-height:1.4;
}


/* ============================= */
/* BOTONES MODAL EMERGENCIAS */
/* ============================= */

.card-emergencia-modal .btn{
background:#145a32;
border:none;
color:white;
font-weight:500;
}

.card-emergencia-modal .btn:hover{
background:#0e3f24;
color:white;
}

@media (max-width:768px){

.card-emergencia-modal h5{
font-size:1rem;
}

.card-emergencia-modal p{
font-size:.9rem;
}

}