.content{
    flex:1;
    margin-top:70px;
    padding:50px;
     margin-left:0;
    background:#eef1f6;
    min-height:calc(100vh - 70px);
    transition:.35s;
}

/* Cuando el menú está abierto */
.content.shift{
    margin-left:320px;
}

.welcome{
    background:#fff;
    border-radius:12px;
    padding:40px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.welcome h1{
    font-size:38px;
    color:#2c2c2c;
    margin-bottom:15px;
}

.welcome p{
    font-size:18px;
    color:#666;
    line-height:1.7;
}
/* =========================================================
   DISEÑO CORREGIDO PARA EL HERO (DERECHA)
========================================================= */

.content {
    /* Un degradado radial que simula perfecto los destellos rojos de la web real */
    background: radial-gradient(circle at 80% 80%, #1e0508 0%, #08080a 60%);
    background-color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 40px;
    min-height: calc(100vh - 60px); 
    width: 100%;
}

/* Caja contenedora del texto */
.hero-content {
    position: relative;
    z-index: 2; 
    text-align: center;
    max-width: 800px;
    padding: 20px;
}

/* El título gigante en blanco */
.hero-content h1 {
    color: #ffffff !important; /* Forzamos el blanco para que no herede grises anteriores */
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0px 4px 10px rgba(0,0,0,0.5);
}

/* "Leyes Aduaneras" en Amarillo brillante */
.hero-content .highlight {
    color: #f1c40f !important; 
}

/* Subtítulo inferior legible */
.hero-content p {
    color: #cbd5e1 !important; /* Gris claro que sí se lee sobre negro */
    font-size: 18px;
    margin-bottom: 35px;
    font-weight: 400;
}

/* Botón Amarillo */
.btn-hero {
    background-color: #f1c40f;
    color: #08080a;
    border: none;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 35px;
    box-shadow: 0px 4px 15px rgba(241, 196, 15, 0.2);
}

.btn-hero:hover {
    background-color: #f39c12;
    transform: translateY(-2px);
}

/* Redes Sociales fijadas abajo */
.hero-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.hero-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: #ffffff;
    color: #08080a;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.hero-socials a:hover {
    transform: translateY(-3px);
    background-color: #f1c40f;
}
/* =========================================================
   NUEVOS ESTILOS EXCLUSIVOS PARA LA VISTA DE EVENTOS 
========================================================= */

/* Contenedor blanco/gris que envuelve la sección de eventos */
.events-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Título principal "Nuestros Eventos" */
.events-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827; /* Color oscuro idéntico al de tu imagen */
    margin-bottom: 30px;
}

/* Rejilla para poner los dos folletos en paralelo */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    justify-content: center;
    align-items: start;
}

/* Tarjeta contenedora de cada folleto publicitario */
.event-photo-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Ajuste para que las imágenes de tus pósters se adapten perfectamente al ancho */
.event-photo-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* =========================================================
   ESTILOS ADICIONALES PARA TEXTOS DE TARJETAS Y FOOTER
========================================================= */

/* Caja blanca con texto debajo del folleto */
.event-card-body {
    background: #ffffff;
    padding: 25px;
    text-align: left; /* Alineado a la izquierda como la imagen */
    border-top: 1px solid #f0f0f0;
}

.event-card-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b; /* Color oscuro para el título */
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.event-card-body p {
    font-size: 14px;
    color: #64748b; /* Gris suave legible */
    line-height: 1.5;
    margin: 0 !important; /* Resetea márgenes molestos */
}

/* El footer azul noche inferior */
.events-footer {
    width: 100%;
    background-color: #111827; /* Azul/gris oscuro profundo */
    color: #9ca3af;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    font-size: 13px;
    margin-top: 40px;
    margin-left: -40px; /* Compensa el padding de content para ir de lado a lado */
    width: calc(100% + 80px);
}

.events-footer a {
    color: #3b82f6; /* Azul suave para enlaces */
    text-decoration: none;
}

.events-footer a:hover {
    text-decoration: underline;
}

/* Enlaces del lado derecho del footer */
.footer-right {
    display: flex;
    gap: 15px;
}

.footer-right a {
    color: #9ca3af; /* Gris claro por defecto */
}

.footer-right a:hover {
    color: #ffffff;
}
/* =========================================================
   DISEÑO MODERNO Y PREMIUM PARA EL FOOTER 2026 (UPEG)
========================================================= */

.modern-footer {
    background: #0f172a !important; /* Un tono gris azulado oscuro muy moderno (Slate 900) */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 40px !important;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
}

/* Resaltado elegante para el nombre de la Universidad */
.upeg-brand {
    color: #38bdf8; /* Azul celeste tecnológico brillante */
    font-weight: 600;
}

/* Enlaces del lado derecho refinados */
.footer-link {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #38bdf8 !important; /* Brilla al pasar el mouse */
}

/* Divisores elegantes entre los links */
.footer-divider {
    color: rgba(255, 255, 255, 0.15);
    font-size: 11px;
    user-select: none;
}
/* =========================================================
   ESTILO PARA EL BOTÓN DE PÁGINA PRINCIPAL EN EL FOOTER
========================================================= */

.footer-link-btn {
    color: #ffffff !important;
    background-color: #38bdf8; /* Azul celeste brillante de la UPEG */
    text-decoration: none !important;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.footer-link-btn:hover {
    background-color: #0ea5e9; /* Un tono azul un poco más intenso al pasar el mouse */
    transform: translateY(-1px);
    box-sizing: border-box;
}