/**
 * Herramientas Section Improvements CSS
 * Mejoras para la sección Caja de Herramientas, áreas de especialización y header móvil
 * Colores: #1f7971 (Nairi principal), #2d8a7f (Nairi secundario)
 */

/* ================================================
   CAJA DE HERRAMIENTAS - BLOG SECTION
   ================================================ */

/* Blog Section - Convertir a botón simple */
.tools-card.blog-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
    margin-bottom: 30px !important;
    
    /* Quitar cualquier animación WOW.js */
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.tools-card.blog-card .card-header {
    display: none !important;
}

.tools-card.blog-card .card-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botón Blog estilizado con colores Nairi */
.blog-card .material-btn.primary-btn {
    background: linear-gradient(135deg, #1f7971 0%, #2d8a7f 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 40px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(31, 121, 113, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 250px !important;
    justify-content: center !important;
    animation: none !important;
}

.blog-card .material-btn.primary-btn:hover {
    background: linear-gradient(135deg, #2d8a7f 0%, #1f7971 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(31, 121, 113, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.blog-card .material-btn.primary-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(31, 121, 113, 0.3) !important;
}

.blog-card .material-btn.primary-btn .material-icons {
    font-size: 20px !important;
    transition: transform 0.3s ease !important;
}

.blog-card .material-btn.primary-btn:hover .material-icons {
    transform: translateX(3px) !important;
}



/* ================================================
   HEADER MÓVIL - FIX PARA COLAPSO INICIAL
   ================================================ */

/* Asegurar que el menú esté colapsado en móvil al cargar */
@media (max-width: 991px) {
    .navbar-collapse:not(.show) {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: none !important;
    }
    
    .navbar-collapse.collapsing {
        height: 0 !important;
        overflow: hidden !important;
        transition: height 0.35s ease !important;
    }
    
    .navbar-collapse.show {
        display: block !important;
        height: auto !important;
    }
    
    /* Botón hamburguesa mejorado */
    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-toggler:hover {
        background: rgba(31, 121, 113, 0.1) !important;
        border-color: #1f7971 !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(31, 121, 113, 0.25) !important;
    }
    
    /* Iconos del botón hamburguesa */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* ================================================
   SECCIÓN SOMOS NAIRÍ - OPTIMIZACIÓN DE IMAGEN
   ================================================ */

/* Mejorar la carga de la imagen de fondo */
.about-us {
    /* Preload y optimización de imagen de fondo */
    background: url("../img/imagen-manos-01.png") no-repeat center fixed !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    
    /* Optimizaciones de renderizado */
    will-change: transform !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    
    /* Mejorar calidad de imagen */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    
    position: relative !important;
    height: 75% !important;
}

/* Preload para imagen de fondo en dispositivos de alta resolución */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .about-us {
        background-image: url("../img/imagen-manos-01.png") !important;
        background-size: cover !important;
        filter: contrast(1.02) brightness(1.01) !important;
    }
}

/* Optimización para móviles */
@media (max-width: 768px) {
    .about-us {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* Móviles */
@media (max-width: 767px) {
    .blog-card .material-btn.primary-btn {
        min-width: 200px !important;
        padding: 12px 30px !important;
        font-size: 16px !important;
    }
}

/* Móviles pequeños */
@media (max-width: 575px) {
    .blog-card .material-btn.primary-btn {
        min-width: 180px !important;
        padding: 10px 25px !important;
        font-size: 15px !important;
    }
}

/* ================================================
   ANIMACIONES MEJORADAS
   ================================================ */

/* Animación para el botón blog - REMOVIDA */

/* ================================================
   ACCESIBILIDAD Y PERFORMANCE
   ================================================ */

/* Mejorar accesibilidad */
.blog-card .material-btn.primary-btn:focus {
    outline: 2px solid #1f7971 !important;
    outline-offset: 2px !important;
}

/* Optimizar performance */
.blog-card .material-btn.primary-btn {
    contain: layout style paint !important;
}

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .blog-card .material-btn.primary-btn {
        animation: none !important;
        transition: none !important;
    }
}