/* 🌟 Estilos Generales */ body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; overflow-x: hidden; /* Evita scroll horizontal innecesario */ } /* 📌 Navbar Dinámica */ .navbar-custom { background-color: transparent !important; transition: all 0.3s ease-in-out; font-weight: 600; } .navbar-custom.scrolled { background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .navbar-custom.scrolled .nav-link { color: #000 !important; } /* 🎡 Carrusel "Hero" Optimizado */ .carousel-item { height: 75vh; /* Altura responsiva (75% de la pantalla) */ min-height: 450px; background-color: #000; } .custom-carousel-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); /* Mejora legibilidad del texto */ } /* Centrado Absoluto de Textos en Carrusel */ .carousel-caption-custom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; text-align: center; z-index: 10; } .carousel-caption-custom h1 { font-size: clamp(2rem, 6vw, 4.5rem); /* Tamaño fluido */ font-weight: 900; text-transform: uppercase; text-shadow: 0 4px 15px rgba(0,0,0,0.6); } /* 🛡️ Sección Pilares (Compacta) */ .custom-mini-img { width: 140px; height: 140px; object-fit: cover; border: 3px solid transparent; transition: all 0.3s ease; } .pilar-mini:hover .custom-mini-img { transform: translateY(-8px); border-color: #ffc107; box-shadow: 0 10px 20px rgba(0,0,0,0.2); } /* 📢 Comunicados (Estilo Tarjeta Profesional) */ .card-comunicado { border-radius: 15px; transition: transform 0.3s ease; } .card-comunicado:hover { transform: translateY(-5px); } .object-fit-cover { object-fit: cover; } /* 🔄 Animaciones */ @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .spin-image { animation: spin 8s linear infinite; } /* 👣 Footer Responsivo */ .social-link ion-icon { font-size: 2.2rem; color: white; transition: all 0.3s ease; } .social-link:hover ion-icon { color: #ffc107; transform: scale(1.2); } .contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; } /* 📱 Ajustes para Celulares (Media Queries) */ @media (max-width: 768px) { .carousel-item { height: 50vh; /* Más pequeño en móvil */ } .custom-mini-img { width: 110px; height: 110px; } .navbar-collapse { background-color: white; padding: 20px; border-radius: 0 0 15px 15px; } .navbar-nav .nav-link { color: black !important; } } /* Utilidades de Texto */ .text-shadow-strong { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); } .title-separator { width: 60px; height: 3px; background: #ffc107; margin: 15px auto; } /* Estilo para la imagen y el hover */ .object-fit-cover { object-fit: cover; } .custom-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .card:hover .custom-overlay { opacity: 1; } /* Ajuste de sombra suave */ .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } /* Iconos (asegúrate de incluir Bootstrap Icons en tu ) */ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");