/*
===============================================
  POLO IT ENTRE RÍOS - CUSTOM STYLES
  Archivo de estilos personalizados para la
  landing page del Polo IT Entre Ríos
===============================================
*/

/* ===== BASE STYLES ===== */
html {
    scroll-behavior: smooth;
}

/* Utility: hide sections via admin toggles */
.hidden-section {
    display: none !important;
}

/* ===== KEYFRAME ANIMATIONS ===== */

/* Animación de flotación para elementos decorativos */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Animación de entrada desde abajo con fade */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de pulso con resplandor */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
    }
}

/* Animación de gradiente en movimiento */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animación de rotación para spinners */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== ANIMATION UTILITY CLASSES ===== */
.animate-fade-in-up {
    animation: fade-in-up 1s ease-out;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

.floating-icon {
    animation: float 6s ease-in-out infinite;
}

.floating-icon:nth-child(2) {
    animation-delay: -2s;
}

.floating-icon:nth-child(3) {
    animation-delay: -4s;
}

/* ===== VIDEO & MULTIMEDIA COMPONENTS ===== */

/* Contenedores de video con efectos hover */
.video-card {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

/* Elementos de video con transiciones suaves */
video {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1);
    /* Placeholder mientras carga */
    background-color: #f3f4f6;
    background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
                      linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
                      linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

video:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Overlay para video de fondo del hero */
.hero-video-overlay {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

/* Imágenes con efectos hover mejorados */
img {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1) contrast(1);
}

img:hover {
    transform: scale(1.03);
    filter: brightness(1.05) contrast(1.05);
}

/* Optimización de carga para imágenes lazy */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Contenedores de galería y medios */
.gallery-item,
.media-container {
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item:hover,
.media-container:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gallery-item img,
.media-container img {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover img,
.media-container:hover img {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.1);
}

/* ===== NAVIGATION COMPONENTS ===== */

/* Enlaces de navegación con efectos hover */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

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

/* ===== HERO SECTION ===== */

/* Contenido principal del hero */
.hero-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

.hero-content h1 {
    line-height: 1.2 !important;
    padding-bottom: 0.25rem !important;
    overflow: visible !important;
}

/* Sección hero con altura completa */
.hero-section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Fondo parallax para hero */
.hero-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ===== ANIMATED HERO BACKGROUNDS ===== */
/* Efectos de fondo animados para banners de páginas */

/* Animación de parallax y zoom para fondos */
@keyframes hero-zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes floating-particles {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

/* Clases base para banners animados */
.hero-animated {
    position: relative;
    overflow: hidden;
}

.hero-animated::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: hero-zoom 20s ease-in-out infinite;
    z-index: -2;
}

.hero-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.4)
    );
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    z-index: -1;
}

/* Partículas flotantes decorativas */
.hero-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: floating-particles 8s ease-in-out infinite;
}

.hero-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.hero-particles::after {
    top: 60%;
    right: 15%;
    animation-delay: 4s;
}

/* Fondos específicos para cada página */
.hero-about {
    background: linear-gradient(135deg, #1e40af, #3b82f6, #1e3a8a);
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

.hero-about::before {
    background-image: url('../img/fachada-maipu.jpeg');
    opacity: 0.3;
}

.hero-services {
    background: linear-gradient(135deg, #059669, #10b981, #047857);
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

.hero-services::before {
    background-image: url('../img/coworking.jpeg');
    opacity: 0.3;
}

.hero-benefits {
    background: linear-gradient(135deg, #7c3aed, #a855f7, #6d28d9);
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

.hero-benefits::before {
    background-image: url('../img/reuniones.jpeg');
    opacity: 0.3;
}

.hero-contact {
    background: linear-gradient(135deg, #0891b2, #06b6d4, #0e7490);
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

.hero-contact::before {
    background-image: url('../img/Ingreso.jpeg');
    opacity: 0.3;
}

.hero-news {
    background: linear-gradient(135deg, #2563eb, #4f46e5, #1d4ed8);
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

.hero-news::before {
    background-image: url('../img/esquina.jpeg');
    opacity: 0.3;
}

/* Efectos adicionales para el contenido del hero */
.hero-content {
    position: relative;
    z-index: 10;
}

.hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fade-in-up 1s ease-out;
}

.hero-subtitle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: fade-in-up 1s ease-out 0.3s both;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optimización de rendimiento */
.hero-animated,
.hero-animated::before,
.hero-animated::after {
    will-change: transform, background-position;
}

/* ===== CONTENT VISIBILITY DEFAULTS ===== */
/* Asegurar que todo el contenido principal sea visible por defecto */
.mvv-card,
.servicio-card,
.objetivo-card,
.espacio-card,
.beneficio-item,
.testimonio-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* ===== CARD COMPONENTS ===== */

/* Cards base - MVV, Servicios y Testimonios */
.mvv-card,
.servicio-card,
.testimonio-card {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(30px);
}

.mvv-card:hover,
.servicio-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Cards de objetivos */
.objetivo-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.objetivo-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* Cards de espacios con animación de gradiente */
.espacio-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

.espacio-card:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* ===== BENEFITS SECTION ===== */

/* Items de beneficios con animación lateral */
.beneficio-item {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.3s ease;
}

.beneficio-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cards de beneficios */
.beneficio-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.gsap-loaded .beneficio-card {
    opacity: 1;
    transform: translateY(0);
}

.beneficio-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Iconos de beneficios con efectos especiales */
.beneficio-card .fas {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.beneficio-card:hover .fas {
    transform: scale(1.15) rotate(5deg);
}

/* Elemento visual de beneficios */
.beneficios-visual {
    opacity: 0;
    transform: translateX(30px);
}

/* ===== CTA & FORMS SECTION ===== */

/* Opciones de CTA con efectos hover */
.cta-option {
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1 !important;
    transform: translateY(0) !important;
    display: block !important;
    visibility: visible !important;
}

/* Solo ocultar cuando GSAP está cargado */
.gsap-loaded .cta-option {
    opacity: 0;
    transform: translateY(30px);
}

.cta-option:hover {
    transform: translateY(-12px) scale(1.06);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Layout forzado para sección CTA */
#sumate .grid {
    display: grid !important;
}

#sumate .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

@media (max-width: 768px) {
    #sumate .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Formularios de contacto */
.contacto-form {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contacto-info {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estados de animación GSAP - solo aplicados cuando GSAP está cargado */
.gsap-loaded .contacto-form {
    opacity: 0;
    transform: translateX(30px);
}

.gsap-loaded .contacto-info {
    opacity: 0;
    transform: translateX(-30px);
}

/* ===== INTERACTIVE ELEMENTS ===== */

/* Botones con efectos hover */
button, .btn {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

button:hover, .btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ===== TEXT EFFECTS ===== */

/* Texto con gradiente animado */
.gradient-text {
    background: linear-gradient(-45deg, #2563eb, #7c3aed, #059669, #dc2626);
    background-size: 400% 400%;
    animation: gradient-shift 4s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sombra de texto personalizada */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== LOADING & TRANSITIONS ===== */

/* Animaciones de carga para secciones */
.section-loading {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.section-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Spinner de carga */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner {
    border: 4px solid #f3f4f6;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* ===== SCROLLBAR CUSTOMIZATION ===== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #7c3aed);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1d4ed8, #6d28d9);
}

/* ===== MOBILE NAVIGATION ===== */

/* Menú móvil con animaciones */
#mobile-menu {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    z-index: 50;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#mobile-menu.show {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

/* Botón del menú móvil */
#mobile-menu-btn {
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#mobile-menu-btn:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

#mobile-menu-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Enlaces del menú móvil */
#mobile-menu a {
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 2px 0;
}

#mobile-menu a:hover {
    background-color: rgba(59, 130, 246, 0.1);
    padding-left: 1rem;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    .floating-icon {
        display: none;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* ===== ACCESSIBILITY ===== */

/* Estados de foco para accesibilidad */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Soporte para alto contraste */
@media (prefers-contrast: high) {
    .gradient-text {
        background: none;
        color: #000;
        -webkit-text-fill-color: initial;
    }
}

/* Soporte para movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating-icon {
        animation: none;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .floating-icon,
    nav,
    footer {
        display: none;
    }
}

/* ===== FUTURE ENHANCEMENTS ===== */

/* Soporte para modo oscuro (mejora futura) */
@media (prefers-color-scheme: dark) {
    /* Estilos de modo oscuro se pueden agregar aquí */
}

/* ===== UTILITY CLASSES ===== */

/* Sombras personalizadas */
.box-shadow-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Efectos de desenfoque */
.backdrop-blur-custom {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Estados de éxito y error */
.success {
    background-color: #10b981;
    color: white;
}

.error {
    background-color: #ef4444;
    color: white;
}

/* ===== TOOLTIP COMPONENTS ===== */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #374151;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ===== GRID LAYOUTS ===== */

/* Grid con ajuste automático */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* ===== TEXT UTILITIES ===== */

/* Utilidades para truncamiento de texto */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fallback para navegadores que no soportan line-clamp */
@supports not (-webkit-line-clamp: 2) {
    .line-clamp-2 {
        max-height: 3em;
        line-height: 1.5;
    }
    
    .line-clamp-3 {
        max-height: 4.5em;
        line-height: 1.5;
    }
    
    .line-clamp-4 {
        max-height: 6em;
        line-height: 1.5;
    }
}

/* ===== PERFORMANCE OPTIMIZATION ===== */

/* Optimización de will-change para elementos animados */
* {
    will-change: auto;
}

.hero-content,
.mvv-card,
.servicio-card,
.objetivo-card,
.espacio-card {
    will-change: transform, opacity;
}

/* Optimización de fuentes */
@font-display: swap;

/*
===============================================
  FIN DEL ARCHIVO DE ESTILOS
  Polo IT Entre Ríos - 2024
===============================================
*/