/* =========================================
   1. VARIABLES GLOBALES Y RESETEO
   ========================================= */
:root {
    --azul-primario: #1a3a5a;
    --azul-oscuro: #0d2137;
    --dorado: #c5a059;
    --amarillo: #f3c344;
    --gris-claro: #f8f9fa;
    --blanco: #ffffff;
    --texto: #333333;
    --exito: #27ae60;
}

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

body, html {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    color: var(--texto);
    background-color: var(--blanco);
    scroll-behavior: smooth; /* Para que los enlaces del menú bajen suavemente */
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* =========================================
   2. BARRA DE NAVEGACIÓN (HEADER)
   ========================================= */

.barra-navegacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--gris-claro);
    border-bottom: 1px solid #eaeaea;
    position: absolute; /* Superpuesta sobre la imagen */
    top: 0;
    width: 100%;
    z-index: 10;
}
/* --- ESTILO PARA EL LOGO CENTRAL --- */
.logo-central {
    position: absolute;
    left: 50%; /* Lo mueve a la mitad de la pantalla */
    transform: translateX(-50%); /* Lo centra perfectamente sobre su propio eje */
    height: 45px; /* Ajusta este valor para hacerlo más grande o más pequeño */
    width: auto; /* Mantiene la proporción de la imagen para que no se deforme */
    z-index: 15; /* Asegura que se vea por encima de otros elementos */
}

.logotipo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--azul-oscuro);
    letter-spacing: 0.5px;
}

.enlaces-navegacion {
    list-style: none;
    display: flex;
    gap: 30px;
}

.enlaces-navegacion li a {
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.enlaces-navegacion li a:hover {
    color: var(--dorado);
}

/* =========================================
   3. SECCIÓN HERO (PORTADA)
   ========================================= */
.seccion-portada {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Gradiente cálido a frío imitando tu fotografía + Imagen de fondo */
    background-image: 
        linear-gradient(
            to bottom right,
            rgba(200, 90, 40, 0.8), 
            rgba(20, 70, 60, 0.8)
        ),
        url('fotos/3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 60px; /* Espacio para la barra de navegación */
}

.contenido-portada {
    color: var(--blanco);
    padding: 0 20px;
    max-width: 900px;
}

.etiqueta-universidad {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.seccion-portada .titulo-principal {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.linea-amarilla {
    width: 60px;
    height: 3px;
    background-color: var(--amarillo);
    margin: 0 auto 25px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.Primera-seccion p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* =========================================
   4. SECCIÓN MISIÓN Y RETOS
   ========================================= */
.Segunda-seccion {
    padding: 80px 10%;
    background-color: var(--blanco);
}
.nuestra-mision {
    text-align: center;
}
.Segunda-seccion > section {
    margin-bottom: 60px;
    text-align: center;
}
    .mision {
        text-align: center;
    }
.Segunda-seccion h2 {
    color: var(--azul-primario);
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.Segunda-seccion p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Retos Cards */
.retos-container .header {
    text-align: center;
    margin-bottom: 40px;
}

.subtitle {
    text-align: center;
    color: var(--dorado);
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.gold-divider {
    width: 60px;
    height: 4px;
    background-color: var(--dorado);
    margin: 15px auto;
}

.retos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.reto-card {
    background: var(--gris-claro);
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    border-bottom: 4px solid var(--azul-primario);
    text-align: center;
}

.reto-card:hover {
    transform: translateY(-8px);
}

.icon-wrapper {
    font-size: 2.5rem;
    color: var(--dorado);
    margin-bottom: 15px;
}

.reto-card h3 {
    margin-bottom: 10px;
    color: var(--azul-oscuro);
}

/* =========================================
   5. SECCIÓN CÁTEDRAS (Tercera Sección)
   ========================================= */
   .subtitle-catedra{
    text-align: center;
    color: var(--dorado);
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
   }
#seleccion {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-style: italic;
}
.seccion-catedras {
    background-color: var(--blanco);
    padding: 60px 0 0; /* Da un respiro visual antes del título */
}
.seccion-catedras .titulo-seccion {
    text-align: center;
    color: var(--azul-primario);
    font-size: 2.2rem;
    margin-bottom: 10px;
}
/* Cuadrícula de Cátedras */
/* =========================================
   NUEVA SECCIÓN DE CÁTEDRAS VISTOSAS
   ========================================= */

.seccion-catedras-vistosa {
    padding: 80px 5%;
    background-color: #f6f9fc; /* Fondo muy claro para resaltar tarjetas */
}

/* Encabezado */
.encabezado-seccion-centro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.titulo-principal-vistoso {
    color: var(--azul-primario);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.separador-centro {
    width: 60px;
    height: 4px;
    background-color: var(--dorado);
    margin: 15px auto 20px auto;
}

.instruccion {
    color: #777;
    font-style: italic;
    font-size: 1rem;
}

/* --- Cuadrícula de Cátedras --- */
.cuadrícula-vistosa {
    display: grid;
    /* Se adaptan perfectamente a móviles y PCs grandes */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

/* --- Estilo Base Tarjeta (Vistoso) --- */
.tarjeta-vistosa {
    /* Efecto "Glassmorphism" con degradado de fondo */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    min-height: 250px;
}

/* Hover general */
.tarjeta-vistosa:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Efecto de degradado de borde en hover */
.tarjeta-vistosa::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tarjeta-vistosa:hover::after {
    opacity: 1;
}

/* Icono Contenedor */
.icono-contenedor {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--azul-primario);
    margin-bottom: 25px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.tarjeta-vistosa:hover .icono-contenedor {
    transform: rotate(15deg) scale(1.1);
}

/* Texto Tarjeta */
.tarjeta-vistosa h3 {
    font-size: 1.1rem;
    color: var(--azul-oscuro);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* --- DEGRADADOS ÚNICOS POR TEMA (Haciéndolo Vistoso) --- */
/* (Usamos variables CSS para que el hover::after combine) */

/* 1. UNESCO (Azul Académico Claro) */
.tema-unesco { background-image: linear-gradient(135deg, rgba(161, 196, 253, 0.2) 0%, rgba(194, 233, 251, 0.2) 100%); }
.tema-unesco::after { background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%); }
.tema-unesco .icono-contenedor { color: #5176d6; }

/* 2. ORTIZ (Tonos Tierra Caribes) */
.tema-ortiz { background-image: linear-gradient(135deg, rgba(230, 185, 128, 0.2) 0%, rgba(234, 201, 154, 0.2) 100%); }
.tema-ortiz::after { background-image: linear-gradient(to right, #e6b980 0%, #eac99a 100%); }
.tema-ortiz .icono-contenedor { color: #b58141; }

/* 3. CANADÁ (Rojo Arce) */
.tema-canada { background-image: linear-gradient(135deg, rgba(247, 148, 148, 0.2) 0%, rgba(255, 194, 194, 0.2) 100%); }
.tema-canada::after { background-image: linear-gradient(to right, #f79494 0%, #ffc2c2 100%); }
.tema-canada .icono-contenedor { color: #d64f4f; }

/* 4. NATURAL (Verde Hoja) */
.tema-natural { background-image: linear-gradient(135deg, rgba(132, 250, 176, 0.2) 0%, rgba(143, 211, 244, 0.2) 100%); }
.tema-natural::after { background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%); }
.tema-natural .icono-contenedor { color: #4bbf73; }

/* 5. TRADUCCIÓN (Azul Marino Profundo) */
.tema-traduccion { background-image: linear-gradient(135deg, rgba(107, 137, 249, 0.2) 0%, rgba(182, 196, 255, 0.2) 100%); }
.tema-traduccion::after { background-image: linear-gradient(to right, #6b89f9 0%, #b6c4ff 100%); }
.tema-traduccion .icono-contenedor { color: #4361ee; }

/* 6. HUMOR (Amarillo Alegre) */
.tema-humor { background-image: linear-gradient(135deg, rgba(255, 238, 147, 0.2) 0%, rgba(255, 219, 112, 0.2) 100%); }
.tema-humor::after { background-image: linear-gradient(to right, #ffee93 0%, #ffdb70 100%); }
.tema-humor .icono-contenedor { color: #f5b041; }

/* 7. RUSO (Azul Gélido Siberiano) */
.tema-ruso { background-image: linear-gradient(135deg, rgba(207, 217, 223, 0.2) 0%, rgba(226, 235, 240, 0.2) 100%); }
.tema-ruso::after { background-image: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%); }
.tema-ruso .icono-contenedor { color: #7f8c8d; }

/* 8. TOUR (Naranja Viaje) */
.tema-tour { background-image: linear-gradient(135deg, rgba(255, 206, 153, 0.2) 0%, rgba(255, 224, 194, 0.2) 100%); }
.tema-tour::after { background-image: linear-gradient(to right, #ffce99 0%, #ffe0c2 100%); }
.tema-tour .icono-contenedor { color: #f39c12; }

/* 9. GÉNERO (Violeta Igualdad) */
.tema-genero { background-image: linear-gradient(135deg, rgba(161, 140, 209, 0.2) 0%, rgba(251, 194, 235, 0.2) 100%); }
.tema-genero::after { background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%); }
.tema-genero .icono-contenedor { color: #8e44ad; }

/* 10. FEU (Azul Estudiantil Mate) */
.tema-feu { background-image: linear-gradient(135deg, rgba(116, 235, 213, 0.2) 0%, rgba(172, 182, 229, 0.2) 100%); }
.tema-feu::after { background-image: linear-gradient(to right, #74ebd5 0%, #acb6e5 100%); }
.tema-feu .icono-contenedor { color: #5176d6; }

/* 11. ARTE (Rosa Extensión) */
.tema-arte { background-image: linear-gradient(135deg, rgba(255, 154, 158, 0.2) 0%, rgba(250, 208, 196, 0.2) 100%); }
.tema-arte::after { background-image: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%); }
.tema-arte .icono-contenedor { color: #d84c6f; }

/* 12. DESCOLONIZACIÓN (Dorado Central UMCC) */
.tema-descolonizacion { background-image: linear-gradient(135deg, rgba(246, 211, 101, 0.2) 0%, rgba(253, 160, 133, 0.2) 100%); }
.tema-descolonizacion::after { background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%); }
.tema-descolonizacion .icono-contenedor { color: #c5a059; }


/* --- ESTILO MODAL VISTOSO (Coherente) --- */
.modal-general {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(13, 33, 55, 0.96); /* Azul oscuro translúcido */
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

.contenido-modal-vistosa {
    background: var(--blanco);
    padding: 50px 40px 40px 40px;
    border-radius: 25px;
    max-width: 600px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-icono-cabecera {
    font-size: 3rem;
    margin-bottom: 20px;
}

.contenido-modal-vistosa h2 {
    color: var(--azul-oscuro);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.caja-contacto-vistosa {
    margin-top: 30px;
    padding: 20px;
    background: var(--gris-claro);
    border-radius: 10px;
    border-top: 5px solid var(--dorado);
}

.cerrar-modal-vistosa {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    color: #999;
    cursor: pointer;
}

.cerrar-modal-vistosa:hover { color: var(--azul-oscuro); }

/* =========================================
   6. SECCIÓN CONCURSOS Y CONVOCATORIAS
   ========================================= */
.contenedor-seccion {
    background-color: var(--gris-claro);
    padding: 80px 10%;
}

.encabezado-seccion {
    text-align: center;
    margin-bottom: 50px;
}

.subtitulo-superior {
    text-align: center;
    color: var(--dorado);
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.contenedor-seccion .titulo-principal {
    color: var(--azul-primario);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.separador {
    width: 60px;
    height: 4px;
    background-color: var(--dorado);
    margin: 0 auto;
}

.cuadricula-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.tarjeta {
    background: var(--blanco);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.tarjeta-cabecera {
    padding: 12px 20px;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--blanco);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.estado-abierta { background-color: var(--exito); }
.estado-proximamente { background-color: var(--azul-primario); }

.tarjeta-cuerpo {
    padding: 30px 25px;
}

.tarjeta-cuerpo h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--azul-oscuro);
}

.tarjeta-fecha {
    margin-top: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--dorado);
}

/* =========================================
   7. FOOTER
   ========================================= */
footer {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9rem;
}

/* =========================================
   8. DISEÑO RESPONSIVO (Móviles y Tablets)
   ========================================= */
@media (max-width: 900px) {
    .seccion-portada .titulo-principal {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .barra-navegacion {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    .logo-central {
        position: static; /* Apaga el posicionamiento absoluto */
        transform: none; /* Quita el centrado forzado */
        height: 45px; /* Tamaño ideal para celular */
        margin: 5px 0 10px 0; /* Da un poco de espacio arriba y abajo para que no choque con las letras */
    }
    .enlaces-navegacion {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .seccion-portada .titulo-principal {
        font-size: 2rem;
        margin-top: 40px;
    }
    
    .Primera-seccion p {
        font-size: 1rem;
    }
    
    .Segunda-seccion {
        padding: 60px 5%;
    }
    
    .contenedor-seccion {
        padding: 60px 5%;
    }
}

/* =========================================
   9. SECCIÓN GALERÍA (OPTIMIZADO PARA MÓVILES)
   ========================================= */

/* Fondo gris sutil para que las tarjetas blancas resalten */
.fondo-gris {
    background-color: #f0f4f8; 
}

/* --- Layout Responsivo --- */
.cuadricula-galeria-movil {
    display: grid;
    /* En celulares: 1 sola columna. Gap más pequeño para no hacer tanto scroll */
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
    padding: 0 10px; /* Margen de seguridad para pantallas muy estrechas */
}

/* En Tablets (pantallas medianas), cambia a 2 columnas */
@media (min-width: 600px) {
    .cuadricula-galeria-movil {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* En Computadoras (pantallas grandes), cambia a 3 columnas */
@media (min-width: 992px) {
    .cuadricula-galeria-movil {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* --- Diseño de la Tarjeta --- */
.tarjeta-galeria {
    background-color: var(--blanco);
    border-radius: 12px; /* Bordes redondeados muy de moda en móviles */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Efecto al tocar la pantalla (active) o pasar el ratón (hover) */
.tarjeta-galeria:active,
.tarjeta-galeria:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.contenedor-img {
    width: 100%;
    aspect-ratio: 16 / 10; /* Formato apaisado perfecto para móviles */
    overflow: hidden;
}

.contenedor-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tarjeta-galeria:hover .contenedor-img img {
    transform: scale(1.05); /* Zoom sutil en la foto */
}

/* --- Información debajo de la foto --- */
.info-galeria {
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Separa el texto de la flecha */
    align-items: center;
    border-top: 3px solid var(--dorado); /* Detalle elegante institucional */
}

.info-galeria h3 {
    color: var(--azul-oscuro);
    font-size: 1.1rem; /* Tamaño de letra perfecto para lectura en celular */
    margin: 0;
    line-height: 1.3;
}

.icono-flecha {
    color: var(--dorado);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* La flecha se mueve hacia la derecha cuando tocas la tarjeta */
.tarjeta-galeria:hover .icono-flecha {
    transform: translateX(5px);
}
/* =========================================
   10. EFECTO LIGHTBOX (VENTANA FLOTANTE)
   ========================================= */

#modal-galeria {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999; /* Para que quede por encima del menú y todo lo demás */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 33, 55, 0.92); /* Azul oscuro de tu paleta, casi opaco */
    backdrop-filter: blur(5px); /* Efecto moderno de desenfoque de fondo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Esta clase se añade con JavaScript para hacerlo visible */
#modal-galeria.mostrar {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.contenido-modal {
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8); /* Empieza un poco pequeño... */
    transition: transform 0.3s ease;
}

#modal-galeria.mostrar .contenido-modal {
    transform: scale(1); /* ...y crece a tamaño normal al aparecer */
}

#img-modal {
    max-width: 100%;
    max-height: 75vh; /* Ocupa como máximo el 75% del alto de la pantalla */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#texto-modal {
    color: var(--blanco);
    margin-top: 15px;
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif; /* La misma fuente de la portada */
}

.cerrar-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: var(--blanco);
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cerrar-modal:hover {
    color: var(--dorado);
}

/* =========================================
   11. SECCIÓN DE COMENTARIOS (DISQUS)
   ========================================= */

.caja-comentarios {
    max-width: 850px; /* Evita que los comentarios se hagan infinitamente anchos en PC */
    margin: 0 auto; /* Centra la caja horizontalmente */
    background-color: var(--blanco);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra elegante */
}

/* Ajustes para teléfonos móviles */
@media (max-width: 768px) {
    .caja-comentarios {
        padding: 20px 15px; /* Reduce los márgenes internos para aprovechar la pantalla */
        border-radius: 8px;
    }
}

/* separador*/
.divisor-simbolico {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0;
    padding: 0 10%;
}

.linea {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dorado), transparent);
}

.rombo-icono {
    width: 40px;
    height: 40px;
    background-color: var(--blanco);
    border: 2px solid var(--dorado);
    transform: rotate(45deg); /* Crea el efecto de rombo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}

.rombo-icono i {
    transform: rotate(-45deg); /* Regresa el icono a su posición normal */
    color: var(--azul-oscuro);
    font-size: 1.2rem;
}


/* Ajuste para celulares */
@media (max-width: 768px) {
    .item-reto {
        flex-direction: column;
        padding: 20px;
    }
    
    .numero-reto {
        margin-bottom: 10px;
        font-size: 2rem;
    }
}