/* ========================================
   UTILIDADES Y HELPERS GENERALES
   ======================================== */

/* Prevenir overflow horizontal global */
html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Asegurar que las imágenes sean responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Contenedores responsive */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

/* Responsive utilities */
@media (max-width: 991px) {
    /* Ocultar en móvil */
    .d-mobile-none {
        display: none !important;
    }

    /* Mostrar en móvil */
    .d-mobile-block {
        display: block !important;
    }

    .d-mobile-flex {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    /* Ocultar en desktop */
    .d-desktop-none {
        display: none !important;
    }

    /* Mostrar en desktop */
    .d-desktop-block {
        display: block !important;
    }

    .d-desktop-flex {
        display: flex !important;
    }
}

/* Clases de Contraste - Fondo Oscuro */
.bg-dark-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.bg-dark-gradient h1,
.bg-dark-gradient h2,
.bg-dark-gradient h3,
.bg-dark-gradient h4,
.bg-dark-gradient h5,
.bg-dark-gradient h6 {
    color: #ffffff;
}

.bg-dark-gradient p,
.bg-dark-gradient span {
    color: rgba(255,255,255,0.95);
}

/* Clases de Contraste - Fondo Claro */
.bg-light-gradient {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    color: #2c3e50;
}

.bg-light-gradient h1,
.bg-light-gradient h2,
.bg-light-gradient h3,
.bg-light-gradient h4,
.bg-light-gradient h5,
.bg-light-gradient h6 {
    color: #2c3e50;
}

.bg-light-gradient p,
.bg-light-gradient span {
    color: #555555;
}

/* Texto con contraste */
.text-light-contrast {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.text-dark-contrast {
    color: #2c3e50;
}

/* Highlight (Dorado) */
.text-highlight {
    color: #ffd700;
    font-weight: 700;
}

/* Colores de texto seguros */
.text-primary-safe {
    color: #667eea;
}

.text-success-safe {
    color: #28a745;
}

.text-danger-safe {
    color: #dc3545;
}

.text-warning-safe {
    color: #ffc107;
}

.text-info-safe {
    color: #17a2b8;
}

/* Sombras mejoradas */
.shadow-soft {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.shadow-medium {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.shadow-strong {
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
}

.hover-slide-right {
    transition: transform 0.3s ease;
}

.hover-slide-right:hover {
    transform: translateX(10px);
}

/* Bordes redondeados */
.rounded-lg {
    border-radius: 12px;
}

.rounded-xl {
    border-radius: 20px;
}

.rounded-pill-custom {
    border-radius: 50px;
}

/* Espaciado */
.py-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.mb-section {
    margin-bottom: 60px;
}

/* Responsive text */
@media (max-width: 768px) {
    .display-1 { font-size: 3rem; }
    .display-2 { font-size: 2.5rem; }
    .display-3 { font-size: 2rem; }
    .display-4 { font-size: 1.75rem; }
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}