/* El codigo inicial en esta hoja de estilos fue elaborado por Jeison Aya, de Andromeda Crea 
en colaboración para el proyecto ToliAgro, la cual se modifico, para adaptarla a la
necesidades del proyecto y a los colores institucionales de la Universidad Cooperativa de Colombia.

/* ================================================= */
/* UNIVERSIDAD COOPERATIVA DE COLOMBIA       */
/* Hoja de estilos para sitio institucional   */
/* Autor: Adaptado por Oscar A. Díaz         */
/* ================================================= */

/* ========== FUENTES GOOGLE Y REGLAS BASE ========== */

/* Importa la fuente Roboto de Google Fonts en todos sus pesos y estilos */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Aplica la fuente Roboto a todos los elementos */
* {
    font-family: 'Roboto', sans-serif;
}

/* Estilos para la sección de visión/misión */
.visi {
    /*background: linear-gradient(90deg, #132740 30%, #00ACC9 100%); Degradado Azul Fundadores + Azul Diversidad */
    color: white; /* Texto en blanco para contraste */
    padding: 4rem 5%; /* Espaciado interno grande (4rem arriba/abajo, 5% laterales) */
    text-align: center; /* Alineación central de todo el contenido */
}

/* Títulos principales en la sección visión */
.visi h1 {
    color: #FFD100; /* Amarillo institucional para títulos */
    font-family: 'Montserrat Bold', sans-serif; /* Fuente especial para títulos */
    font-size: 2.8rem; /* Tamaño grande de fuente */
    margin-bottom: 1.5rem; /* Espaciado inferior */
}

/* Clase para texto verde institucional */
.visi .color-verde {
    color: #80BA27 !important; /* Verde Solidario para acentos */
}

.visi p {
    color: #F5F5F5; /* Gris claro para texto secundario */
    font-family: 'Open Sans', sans-serif;/* Fuente alternativa para texto largo */
    font-size: 1.2rem;/* Tamaño de fuente legible */
    margin-bottom: 2rem;/* Espaciado entre párrafos */
}

/* Estilos base del cuerpo del documento */
body {
    padding: 0; /* Elimina relleno predeterminado */
    margin: 0; /* Elimina márgenes predeterminados */
    width: 100%; /* Ocupa todo el ancho disponible */
    min-height: 100vh; /* Altura mínima de toda la ventana visible */
}

/* Estilos del encabezado fijo */
header {
    width: 100%; /* Ancho completo */
    height: 100px; /* Altura fija del header */
    box-sizing: border-box; /* Incluye el padding y border en el ancho y alto total */
    padding: 0 5%; /* Relleno lateral del 5% */
    display: flex; /* Usa flexbox para alineación */
    align-items: center; /* Centrado vertical */
    justify-content: space-between; /* Elementos separados a los extremos */
    position: fixed; /* Header fijo en la parte superior */
    left: 0;   /* Alineado a la izquierda */
    top: 0;  /* Alineado a la parte superior */
    z-index: 4; /* Asegura que esté por encima de otros elementos */
    color: white; /* Texto blanco */
    transition: all 0.4s ease; /* Transición suave para efectos */
}

/* Contenedor del logo */
.logo {
    font-size: 1rem; /* Tamaño base para texto del logo */
    font-weight: 600; /* Grosor de fuente semi-negrita */
    padding: 5px; /* Espaciado interno mínimo */
    margin: 10px; /* Margen externo pequeño */
}

/* Imagen dentro del logo */
.logo img {
    width: 30%; /* Ancho relativo al contenedor */
    height: auto; /* Altura automática para mantener proporción */
}


/*Estilos del menú principal*/
.navegador {
    width: auto; /* Ancho según contenido */
    position: relative; /* Posicionamiento relativo para submenús */
    height: 50%; /* Altura relativa al header */
}

/* Lista principal del menú */
.navegador>ul {
    list-style: none;   /* Elimina viñetas de lista */
    padding: 0;     /* Sin relleno interno */
    margin: 0;       /* Sin márgenes externos */
    height: 100%;   /* Ocupa toda la altura del contenedor */
    position: relative; /* Posicionamiento relativo para submenús */
    display: flex;   /* Distribución en fila */
    align-items: center;        /* Centrado vertical */ 
    justify-content: center;        /* Centrado horizontal */
}

/* Elementos de la lista del menú */
.navegador ul>li {
    margin: 0 20px; /* Espaciado horizontal entre elementos */
    position: relative;      /* Posicionamiento relativo para submenús */
    height: 100%;  /* Altura completa del contenedor */
    display: flex;  /* Usa flexbox para alineación */
    align-items: center;        /* Centrado vertical */
    justify-content: center;        /* Centrado horizontal */
}

/* Enlaces del menú principal */
.navegador ul li a {
    text-decoration: none;   /* Sin subrayado */
    color: white;   /* Color blanco */
    font-size: 1.1rem;   /* Tamaño de fuente */
    transition: all 0.4s ease;   /* Transición suave para efectos */
}

/*Estilos de los Submenús desplegables */
.navegador ul li ol {
    position: absolute; /* Posicionamiento absoluto para submenús */
    top: 90%;   /* Desplazado hacia abajo del elemento padre */
    background-color: white;        /* Fondo blanco */
    padding: 0; /* Sin relleno interno */
    box-sizing: border-box; /* Incluye el padding y border en el ancho y alto total */
    border-radius: 5px; /* Bordes redondeados */
    transition: all 0.4s ease;      /* Transición suave para efectos */
    opacity: 0; /* Invisible por defecto */
    scale: 0;   /* Escala inicial 0 */
    transform-origin: top;   
    list-style: none; /* Elimina viñetas de lista */
    overflow: hidden;    /* Oculta el contenido que desborda */
}

/* Elementos de submenú */
.navegador ul li ol li {
    padding: 5px 40px;  /* Espaciado interno */
    position: relative;          /* Posicionamiento relativo para submenús */         
    margin: 0;          /* Sin márgenes externos */
    color: black; /* Texto negro */         
    cursor: pointer; /* Indica que el enlace es interactivo, cambia el cursor a una mano */           
    transition: all 0.4s ease;/* Efecto hover suave */
}

/* Efecto hover en submenú */
.navegador ul li ol li:hover {
    background-color: rgba(0, 0, 0, 0.144);/* Fondo semi-transparente */
}
/* Muestra submenú al hacer hover */
.navegador ul>li:hover>ol {
    opacity: 1;/* Hace visible */
    scale: 1;/* Escala normal */
}

/* Estilos del carrito */
.carrito a {
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
}

.burger {
    display: none;
}


/* ==================== CUERPO DEL DOCUMENTO ====================== */

/* ==================== SECCION INICIO ====================== */
/* Contenedor principal de la sección de inicio */
.inicio {
    position: relative; /* Permite posicionamiento absoluto de elementos hijos */
    width: 100%;    /* Ocupa todo el ancho disponible */  
    height: 100vh;/* Altura completa del viewport */
    display: flex; /* Usa flexbox para alineación */
    align-items: center; /* Centrado vertical */
    justify-content: left;   /* Justificado a la izquierda */
    box-sizing: border-box;       /* Incluye el padding y border en el ancho y alto total,   Modelo de caja consistente */
    margin: 0;   /* Sin márgenes externos */
    padding: 0 0%;   /* Sin relleno interno */
    overflow: hidden;    /* Oculta el contenido que desborda */
    top: 0; /* Alineado a la parte superior */
}
/* Contenedor del fondo deslizante */
.inicio>.fondo {
    position: absolute; /* Posicionamiento absoluto respecto al contenedor .inicio */
    width: 300%;   /* Ancho triplicado para contener 3 imágenes al 100% */
    height: 100%; /* Misma altura que el contenedor padre */
    display: flex;          /* Usa flexbox para alineación,   Distribución horizontal de imágenes */ 
    align-items: center;          /* Centrado vertical */
    justify-content: left;   /* Justificado a la izquierda */
    left: 0;        /* Alineado a la izquierda */
    margin: 0;   /* Sin márgenes externos */
}
/* Estilos para cada imagen del slider */      
.fondo img {
    position: relative;
    width: 33.3%;/* Cada imagen ocupa 1/3 del ancho total (para 3 imágenes) */
    height: 100%;/* Altura completa del contenedor */
    object-fit: cover;/* Ajuste de imagen sin distorsión */
    left: 0;        /* Alineado a la izquierda */
    top: 0;   /* Alineado a la parte superior */
    z-index: 1; /* Posición sobre el fondo pero bajo el overlay */
    transition: all 1s ease-in-out;/* Transición suave para efectos de slide */
}

/* Este pseudoelemento before lo que hace es crear una capa que rellena toda la imagen con una opacidad */
.inicio .fondo::before {
    content: "";      
    width: 100%;      
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}
/* Contenedor del contenido textual */
.inicio div {
    position: relative; /* Permite posicionamiento absoluto de elementos hijos, Posicionamiento relativo para z-index */
    margin-top: 40px;/* Margen superior para evitar solapamiento con header */
    z-index: 2;/* Se posiciona sobre el overlay */
}

/* Animación de entrada del texto principal */
.visi {
    transition: all 0.6s ease;    /* Transición suave para efectos */
    opacity: 0; /* Invisible por defecto */
    margin-left: -50px; /* Desplazado a la izquierda */
}
/* Estado visible del texto */
.visible .visi {
    margin-left: 0; /* Opacidad completa */
    opacity: 1;/* Posición final sin desplazamiento */
}
/* Estilos del título principal */
.inicio h1 {
    font-size: 4rem;/* Tamaño grande para impacto visual */
    font-weight: 600;       /* Grosor de fuente semi-negrita */
    color: white; /* Contraste con fondo oscuro */
    margin: 0;     /* Sin márgenes externos */
    max-width: 50%; /* Limita el ancho del texto */
    line-height: 4rem;      /* Espaciado entre líneas */ 
    align-self: center;   
}
/* Variante de título más destacado */
.texto h1 {
    font-size: 5rem; /* Tamaño extra grande */
    font-weight: 800;       /* Grosor de fuente negrita */  
    color: white;   /* Contraste con fondo oscuro */
    margin: 0;     /* Sin márgenes externos */
    max-width: 50%; /* Limita el ancho del texto */
    line-height: 10rem;      /* Espaciado entre líneas */
      
}
/* Color institucional para acentos */
.color-verde {
    color: #3AD835;/* Verde institucional */
}
/* Párrafos descriptivos */
.inicio p {
    font-size: 1.5rem;/* Tamaño legible */
    color: white;   /* Contraste con fondo oscuro */
    font-weight: 400;       /* Grosor de fuente normal */
    max-width: 50%; /* Limita el ancho del texto */
}
/* Contenedor de botones CTA */
.botones {
    width: max-content; /* Ancho mínimo necesario para el contenido */
    display: flex;   /* Usa flexbox para alineación */
    align-items: center;          /* Centrado vertical */
    justify-content: left;   /* Justificado a la izquierda */
}
/* Estilos base para botones */
.btn {
    border: none;    /* Sin borde */
    padding: 10px 30px; /* Espaciado interno */
    border-radius: 5px; /* Esquinas redondeados */
    font-size: 1rem;        /* Tamaño de fuente */
    cursor: pointer;        /* Cambia el cursor al pasar por encima */
    transition: all 0.4s ease;      /* Transición suave para efectos */
    display: flex;   /* Usa flexbox para alineación */
    align-items: center;          /* Centrado vertical */
    justify-content: center;        /* Justificado al centro */
    font-weight: 500;       /* Grosor de fuente normal */
    transition: all 0.4s ease;   /* Animación suave */
    text-decoration: none;   /* Sin subrayado */
}
/* Efecto hover para iconos */
.btn:hover>i {
    opacity: 1;/* Muestra icono completamente */
    margin-left: 5px; /* Espaciado entre texto e icono */
    width: 20px;        /* Ancho del icono */
}
/* Iconos dentro de botones */
.btn i {
    transition: all 0.4s ease;/* Animación suave */
    margin-left: -40px;/* Posición inicial fuera de vista */
    opacity: 0; /* Invisible por defecto */
    position: relative; /* Posicionamiento relativo para iconos */
    width: 40px;        /* Ancho del icono */
}
/* Botón principal - Proyectos*/
.btn-primary {
    background-color: #80BA27;/* Verde institucional */
    color: black;   /*Color del texto del botón, negro*/
    margin-right: 10px; 
    border: solid 2px #80BA27;   
}
/* Botón secundario- Contáctanos*/
.btn-secondary {
    border: solid 2px #00ACC9;/* Borde azul institucional */
    background-color: transparent;/* Fondo transparente */
    color: white; /*Color del texto del botón, Blanco*/
}

/* Controles del slider - carrusel*/
/*Estilos del navegador del slider*/
.inicio .slider {
    position: absolute; /* Posiciona el slider de forma absoluta dentro de su contenedor */
    right: 5%;      /* 5% desde la derecha */
    bottom: 20px;/* 20px desde abajo */
    height: min-content;           
    display: flex;         
    align-items: end;          
    flex-direction: column; 
    justify-content: center;
    padding: 0; /* Inicialmente invisible */
    margin-right: -50px;/* Fuera de pantalla inicialmente */
    transition: all 0.6s;/* Animación de entrada */
    opacity: 0;/* Inicialmente invisible */
}
/* Estado visible del slider */
.visible .slider {
    opacity: 1; /* Visible completamente */
    margin-right: 0; /* Posición final */
}

/* Puntos de navegación del slider */
.slider>.navigation {
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 0;
    height: min-content;
}

.desc {
    color: white;
    margin: 0;
}
/* Puntos de navegación del slider */
.slider>.navigation div {
    width: 18px;    /* Tamaño base */
    height: 18px;       /* Tamaño base, Círculo perfecto */
    outline: solid 2px #00ACC9;/* Borde azul */
    border-radius: 18px;/* Forma circular */
    margin-right: 20px;/* Espaciado entre puntos */
    cursor: pointer;/* Indica interactividad */
    transition: all 0.4s ease;
    margin-top: 20px;
}
/* Punto activo del slider */
.slider .navigation .active {
    scale: 1.2;/* Ligero aumento de tamaño */
    background-color: white;/* Color de relleno */
}

/* ==================== SECCIÓN NOSOTROS ====================== */
/* Contenedor principal de la sección */
.nosotros {
    position: relative;/* Permite posicionamiento absoluto de elementos hijos */
    width: 100%; /* Ocupa todo el ancho disponible */
    min-height: 40vh;/* Altura mínima de toda la pantalla visible */
    background-color: white;/* Fondo blanco limpio */
    text-align: center;/* Alineación central del contenido */
    box-sizing: border-box; /* Incluye el padding y border en el ancho y alto total */
    padding: 100px 2%; /* Espaciado interno superior/inferior y laterales */
    color: #5F5E5E; /* Gris Equidad para texto general */
    display: flex;   /* Usa flexbox para alineación */
    align-items: center;/* Centrado horizontal */
    justify-content: start; /* Justificado a la izquierda */
    flex-direction: column; /* Distribución vertical de elementos */
    gap: 0px;   /* Espacio entre elementos hijos (40px) */
}
/* Estilo del título principal de la sección */
.nosotros h2 {
    color: #132740; /* Azul institucional para títulos */
    font-family: 'Keep Calm Medium', sans-serif; /* Fuente corporativa */
    font-size: 2.5rem; /* Equivalente a 40px aproximadamente */
    margin-bottom: 30px; /* Espaciado inferior para separar de contenido */
}
/* Estado visible del título (controlado por JS) */
.visible h2 {
    opacity: 1;/* Máxima opacidad cuando está activo */
    margin-top: 0;/* Elimina margen superior en estado visible */
}

/* Contenedor grid para disposición responsive */
.container-texto {
    display: grid;/* Usa CSS Grid para layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas */
    gap: 30px;      /* Espacio entre elementos del grid */
    width: 100%;/* Ocupa todo el ancho disponible */
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
}
/* Estilo de subtítulos dentro del grid */
.container-texto h3 {
    color: #00ACC9; /* Azul Diversidad para subtítulos */
    font-family: 'Madeleina Sans', sans-serif; /* Fuente institucional */
    margin-bottom: 15px;/* Espaciado después del subtítulo */
    font-size: 1.5rem;/* Equivalente a 24px */
}

/* Estado visible del contenedor (animación de entrada) */
.visible .container-texto {
    margin-top: 0;/* Posición final sin desplazamiento */
    opacity: 1;/* Totalmente visible */
}
/* Configuración inicial del contenedor (antes de animación) */
.container-texto {
    width: 100%;/* Ancho relativo al contenedor padre */
    position: relative;/* Para posicionamiento interno */
    display: flex;   /* Usa flexbox para alineación */
    align-items: start; /* Alineación vertical al inicio */
    justify-content: space-between;
    margin-top: -50px; /* Inicia 50px más arriba para animación */
    opacity: 0;/* Inicialmente transparente */
    transition: all 0.6s ease;/* Transición suave de 0.6 segundos */
}
/* Estilos para párrafos dentro del grid */
.container-texto p {
    font-size: 1.1rem;/* ~17.6px para buena legibilidad */
    color: gray;/* Color gris neutro */
    text-align: justify;/* Texto alineado a ambos márgenes */
}
/* Contenedores individuales de contenido */
.container-texto>div {
    width: 100%;/* Ocupa casi la mitad del espacio disponible */
    position: relative;/* Para elementos posicionados internamente */
    border-radius: 10px;/* Esquinas redondeadas suaves */
    box-sizing: border-box; /* Incluye el padding y border en el ancho y alto total, Modelo de caja predictivo */
    padding: 10px;/* Espaciado interno */
    text-align: left;    /* Alineación del texto a la izquierda */
}
/* Ajustes para títulos dentro de los divs */
.container-texto div h3 {
    margin: 0;/* Elimina márgenes predeterminados */
    font-size: 1.8rem;/* ~28.8px para jerarquía visual */
}




/* ==================== SECCIÓN WHATSAPP ====================== */
/* Botón flotante de WhatsApp */
.whatsapp {
    position: fixed; /* Posición fija en pantalla */
    width: 60px;       /* Diámetro del círculo */
    height: 60px;      /* Diámetro del círculo */
    background-color: #3AD835; /* Color verde de WhatsApp */
    color: white;      /* Color del icono */
    border-radius: 30px; /* Círculo perfecto (mitad del ancho/alto) */
    right: -65px;      /* Posición inicial fuera de pantalla (+5px de margen) */
    bottom: 10%;       /* Posición vertical desde abajo */
    font-size: 2rem;   /* Tamaño del icono */
    display: flex;      /* Flex para centrar contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    z-index: 5;        /* Prioridad de capa superior */
    transition: all 0.4s ease; /* Transición suave para movimientos */
    cursor: pointer;   /* Cambia cursor a mano al pasar */
    animation: whatsappAttention 2s infinite; /* Animación constante */
}

/* Animación de atención para el botón */
@keyframes whatsappAttention {
    0% {
        transform: scale(1) rotate(0deg); /* Estado inicial normal */
    }
    25% {
        transform: scale(1.1) rotate(-10deg); /* Escala + rotación izquierda */
    }
    50% {
        transform: scale(1) rotate(10deg); /* Vuelve a escala normal + rotación derecha */
    }
    75% {
        transform: scale(1.1) rotate(-10deg); /* Repite escala + rotación izquierda */
    }
    100% {
        transform: scale(1) rotate(0deg); /* Vuelve al estado inicial */
    }
}


/* ==================== SECCIÓN PROYECTOS ====================== */
/* Contenedor principal de la sección */
.proyectos {
    position: relative; /* Permite posicionamiento absoluto de elementos hijos */
    width: 100%; /* Ancho completo del viewport */
    min-height: 10vh; /* Altura mínima de pantalla completa */
    background-color: #EFEFEF;/* Fondo blanco limpio */
    box-sizing: border-box; /* Modelo de caja consistente */
    padding: 100px 5% 50px; /* Espaciado interno superior/inferior y laterales */
    display: flex; /* Flexbox para disposición flexible */
    align-items: center;/* Centrado horizontal */
    justify-content: start; /* Justificado a la izquierda */
    flex-direction: column; /* Alineación vertical */
    align-items: center; /* Centrado horizontal */
    gap: 0px;   /* Espacio entre elementos hijos (40px) */
}
/* Estilos del título principal de la sección */
.proyectos h2 {
    color: #132740; /* Azul institucional para títulos */
    font-family: 'Keep Calm Medium', sans-serif; /* Fuente corporativa */
    font-size: 2.5rem; /* Equivalente a 40px aproximadamente */
    margin-bottom: 50px; /* Espaciado inferior para separar de contenido */
    margin-top: 70px; /* Espaciado superior para separar de contenido */
}

/* Estilo del botón para expandir/contraer resumen */
.toggle-resumen {
    color: #00ACC9; /* Color azul institucional */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Indica interactividad */
    text-decoration: none; /* Elimina subrayado predeterminado */
    margin-bottom: 1px;
}
   
/* Contenedor del resumen (inicialmente oculto) */
.contenido-resumen {
    display: none; /* Oculto por defecto */
    margin: 10px 0 15px 0; /* Espaciado superior/inferior uniforme */
    text-align: justify; /* Texto alineado a ambos márgenes */
}
   
/* Clase activadora para mostrar el resumen */
.contenido-resumen.mostrar {
    display: block; /* Muestra el contenido */
    transition: all 0.3s ease-in-out; /* Animación suave de 300ms */
}
   
/* Grid responsivo para tarjetas de proyectos */
.grid-proyectos {
    display: grid; /* Usa CSS Grid */
    /* En pantallas grandes, muestra 3 columnas iguales */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem; /* Espacio entre tarjetas */
    max-width: 1500px; /* Ancho máximo para pantallas grandes */
    width: 100%; /* Ancho completo del contenedor */
    padding: 2rem 0; /* Espaciado vertical interno */
}

/* Tarjeta individual de proyecto */
.proyecto-card {
    background: white; /* Fondo blanco */
    border-radius: 12px; /* Esquinas redondeadas */
    overflow: hidden; /* Oculta contenido que sobresale */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
    transition: transform 0.3s ease; /* Animación al hover */
    display: flex; /* Flexbox para disposición interna */
    flex-direction: column; /* Apilado vertical */
    height: 100%; /* Altura completa del contenedor */
}

/* === REGLAS PARA LA GRILLA DE SEMILLEROS === */
.grid-semilleros {
    display: grid;
    /* La grilla se adapta para mostrar la cantidad de columnas que quepan */
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 2rem;
    max-width: 1500px;
    width: 100%;
    padding: 2rem 0;
}

.semillero-card {
    background: white; /* Fondo blanco */
    border-radius: 12px; /* Esquinas redondeadas */
    overflow: hidden; /* Oculta contenido que sobresale */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
    transition: transform 0.3s ease; /* Animación al hover */
    display: flex; /* Flexbox para disposición interna */
    flex-direction: column; /* Apilado vertical */
    height: 100%; /* Altura completa del contenedor */
    margin-bottom: 0.5rem; /* antes probablemente era mayor, como 1.5rem */
    margin-top: 0.5rem;      /* opcional: reduce espacio superior si es necesario */
    line-height: 1.2;          /* compacta un poco la altura de línea */
}


/* Efecto hover para tarjetas */
.proyecto-card:hover {
    transform: translateY(-5px); /* Levanta la tarjeta 5px */
}

/* Imágenes dentro de las tarjetas */
.proyecto-card img {
    width: 100%; /* Ancho completo del contenedor */
    height: 300px; /* Altura fija */
    object-fit: cover; /* Ajuste de imagen sin distorsión */
}

.img-semilleros {
    width: auto;             /* La anchura se ajusta automáticamente */
    max-width: 100%;         /* No sobrepasa el ancho del contenedor */
    height: 180px;           /* Altura fija uniforme */
    display: block;
    margin: 0 auto;          /* Centrado horizontal */
    object-fit: contain;     /* Se mantiene la proporción sin recortar */
}

.proyecto-content {
    padding: 1rem; /* Espaciado interno */
    flex-grow: 1; /* Ocupa espacio disponible */
    display: flex; /* Flexbox para disposición */
    flex-direction: column; /* Elementos apilados */
}

/* Estilo del título en tarjeta */
.proyecto-titulo {
    color: #132740; /* Color azul institucional */
    padding-bottom: 5px; /* Espaciado inferior */
    margin-bottom: 5px; /* Margen inferior */
    border-bottom: 2px solid #FFD100; /* Subrayado decorativo */
    font-size: 1.25rem; /* Tamaño de fuente equivalente a 20px */
    min-height: auto; /* Ajusta la altura al contenido de manera flexible */
    text-align: center;
}


/* Estilo del título en tarjeta */
.semillero-titulo {
    color: #132740; /* Color azul institucional */
    padding-bottom: 5px; /* Espaciado inferior */
    margin-bottom: 5px; /* Margen inferior */
    border-bottom: 2px solid #FFD100; /* Subrayado decorativo */
    font-size: 1.25rem; /* Tamaño de fuente equivalente a 20px */
    min-height: auto;; /* Altura mínima para consistencia visual */
    text-align: center;
}

/* Contenedor de botones en tarjeta */
.proyecto-botones {
    margin-top: auto; /* Empuja los botones hacia abajo */
    padding-top: 15px; /* Espacio antes de los botones */
    display: grid; /* Grid para disposición de botones */
    gap: 1rem; /* Espacio entre botones */
}



/* Estilos personalizados para botones */
.btnd {
    width: 100%; /* Ancho completo */
    background-color: #80BA27; /* Color verde institucional */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 8px; /* Esquinas redondeadas */
    cursor: pointer; /* Indicador de interactividad */
    transition: background-color 0.3s ease; /* Transición suave */
}

/* Efecto hover para botones */
.btnd:hover {
    background-color: #00ACC9; /* Cambio de color al azul */
}

/* ==================== NUEVOS ESTILOS ====================== */
.proyecto-metadatos {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.etiqueta {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.porcentaje-ejecucion {
    background: #00ACC920;
    color: #00687D;
}

.ods {
    background: #80BA2720;
    color: #3F5E0D;
}

.proyecto-detalles {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.detalle-item {
    display: flex;
    gap: 1rem;
    align-items: start;
}

.detalle-item i {
    font-size: 1.2rem;
    color: #132740;
    margin-top: 0.1rem;
}

.detalle-item h4 {
    margin: 0;
    color: #132740;
    font-size: 1rem;
}

.detalle-item p {
    margin-top: 3px;
    margin-bottom: 15px;
    color: #667;
    line-height: 1;

}

.detalle-columna {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}



/* ==================== SECCIÓN CONTACTO ====================== */
/*Estilos de contacto*/
.contacto {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px 5% 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto h2 {
    font-size: 2.5rem;
    transition: all 0.6s ease;
}

.container-form h2 {
    margin: 0;
}

.container-form {
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin-top: -50px;
    opacity: 0;
    transition: all 0.4s ease;
}

.visible .container-form {
    opacity: 1;
    margin-top: 0;
}

.container-form h2 {
    margin: 0;
}

.container-form p {
    color: gray;
    margin-top: 0;
    font-size: 1.1rem;
}

.container-form form {
    margin-top: 50px;
}

.container-form form input,
.container-form form textarea {
    width: 100%;
    background-color: white;
    border: solid 1px #00ACC9;
    font-size: 1rem;
    box-sizing: border-box;
    padding: 0 10px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.container-form form input:focus,
.container-form form textarea:focus {
    outline: none;
}



/*Estilos del pie de página*/
.footer {
    width: 100%;
    min-height: 50vh;
    box-sizing: border-box;
    background-color: #132740;
    padding: 0%;
}

.infor {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.infor div strong {
    color: #00ACC9;
    font-size: 1.2rem;
}

.infor>div {
    color: white;
    text-align: center;
}

.infor div p {
    margin: 10px 100px;
}

.infor div p a {
    margin: 0 10px;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.logos {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content:center;
} 

.logos>div {
    color: white;
    text-align: center;
    cursor: pointer;
}

.derechos h3 {
    padding: 0px;
}

.derechos {
    color: white;
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    border-top: solid 0px gray;
    padding-top: 02px;
    padding-bottom: 02px;
    color: #5F5E5E;
    line-height: 1;
    background-color: #EFEFEF;
}

/* ==================== MEDIA QUERIES PARA RESPONSIVIDAD ====================== */
/* Estilos para pantallas de 768px o menos (móviles y tablets) */
@media (max-width: 768px) {
    /* Menú de navegación */
    .navegador {
        position: fixed;
        width: 50%;
        top: 70px;
        background-color: #00ACC9;
        height: 0;
        right: 0;
        transition: all 0.5s;
        overflow: hidden;
    }
    .navegador ul {
        flex-direction: column;
    }
    .navegador ul>li {
        height: min-content;
        flex-direction: column;
        margin-bottom: 40px;
    }
    .navegador ul li ol {
        position: relative;
        top: 10px;
        padding: 0;
        box-sizing: border-box;
        border-radius: 5px;
        transition: all 0.4s ease;
        opacity: 1;
        scale: 1;
        height: 0;
        list-style: none;
        overflow: hidden;
        margin: 0;
    }
    .navegador ul li ol li {
        padding: 5px 40px;
        position: relative;
        margin: 0;
        color: black;
        cursor: pointer;
        transition: all 0.4s ease;
    }
    .navegador ul>li:hover>ol {
        opacity: 1;
        height: 70px;
    }

    /* Botón de hamburguesa */
    .burger {
        position: relative;
        width: 250px;
        height: 30px;
        background: transparent;
        cursor: pointer;
        display: block;
    }
    .burger input {
        display: none;
    }
    .burger span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: white;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    .burger span:nth-of-type(1) {
        top: 0px;
        transform-origin: left center;
    }
    .burger span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
        transform-origin: left center;
    }
    .burger span:nth-of-type(3) {
        top: 100%;
        transform-origin: left center;
        transform: translateY(-100%);
    }
    .burger input:checked~span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0px;
        left: 5px;
    }
    .burger input:checked~span:nth-of-type(2) {
        width: 0%;
        opacity: 0;
    }
    .burger input:checked~span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 28px;
        left: 5px;
    }

    /* Sección de inicio */
    .inicio h1 {
        max-width: 100%;
        text-align: center;
        font-size: 3rem;
        line-height: 3rem;
    }
    .inicio p {
        max-width: 100%;
        text-align: center;
    }
    .botones {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .inicio>div {
        margin-top: 0;
    }
    .btn {
        min-width: 60%;
    }
    .btn-primary {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Sección Nosotros */
    .nosotros {
        padding: 70px 5%;
        flex-direction: column;
    }
    .container-texto {
        flex-direction: column; /* Apila los elementos verticalmente */
        width: 100%;
    }
    .container-texto>div {
        width: 100%;
    }

    /* Secciones Proyectos y Semilleros */
    .proyectos {
    width: 100%;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: rgb(243, 243, 243);
    padding: 100px 5% 20px 5%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column; /* Cambiado de column-reverse a column */
}
    .proyectos h2 {
        margin-bottom: 30px;
        margin-top: 0;
    }
    /* Solución al problema: fuerza una sola columna */
    .grid-proyectos {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .proyecto-titulo {
        font-size: 1.1rem;
        min-height: auto;
    }
    
    .semilleros { /* Asegura que la sección semilleros también se apile */
        flex-direction: column;
    }

    /* Pie de página */
    .infor {
        flex-direction: column;
    }
    .infor>div {
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }
    .logos {
        flex-direction: column;
        align-items: center;
    }
    .logos>div {
        width: 50%;
        margin: 20px 0;
        text-align: center;
    }
}

/* Estilos para el texto de la sección "Nosotros" en móviles */
@media only screen and (max-width: 765px) {
    /* Reglas para el texto dentro del contenedor nosotros */
    .container-texto {
        width: 100%;
        position: relative;
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-direction: column;
    }
    .container-texto>div {
        width: 100%;
    }
    
    /* Sección de proyectos en móviles */
    .proyectos {
        width: 100%;
        position: relative;
        min-height: 100vh;
        box-sizing: border-box;
        background-color: rgb(243, 243, 243);
        padding: 100px 5% 20px 5%;
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-direction: column; /* Cambiado a column para ordenar correctamente */
    }
/* Reglas para los títulos dentro de la sección proyectos en móviles */
    .proyectos h2 {
        color: #132740;
        font-family: 'Keep Calm Medium', sans-serif;
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    /* Grid de proyectos en una sola columna */
    .grid-proyectos {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    /* Título de la tarjeta de proyectos */
    .proyecto-titulo {
        font-size: 1.1rem;
        min-height: auto;
    }
    
    .resumen-de-cuenta {
        width: 100%;
        top: 0;
        margin-top: 20px;
        opacity: 1;
        margin-left: 0px;
    }
    .prod {
        width: 100%;
        height: auto;
        position: relative;
        margin-top: 0px;
        opacity: 1;
    }
    .prod ul {
        list-style: none;
        padding: 0;
        position: relative;
        left: 10%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
}

/* Agrega estas reglas a tu archivo CSS */
.proyectos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}