/* =================================================
   FULLSCREEN SERVICES SECTION WITH SWIPER
   ================================================= */

/* --- Main Services Section --- */
.popular-services-section {
    padding: 0;
    background: #000;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* --- Section Header --- */
.services-section-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 0;
    background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    pointer-events: none; /* Permite que los eventos pasen a través del header */
}

.services-section-header .section-header {
    text-align: center;
    color: white;
    pointer-events: auto; /* Restaura los eventos solo para el contenido */
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-color), #e59001);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.services-section-header .section-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.section-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* --- Swiper Container --- */
.services-swiper {
    width: 100%;
    height: 100vh;
    position: relative;
}

.services-swiper .swiper-wrapper {
    align-items: stretch;
}

.services-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Service Cards Fullscreen --- */
.service-card {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

/* --- Service Image Fullscreen --- */
.service-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #1a1a1a; /* Fallback color */
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease, filter 0.3s ease;
    filter: brightness(0.7) contrast(1.1) saturate(1.2);
    background: #1a1a1a; /* Fallback mientras carga */
    display: block;
}

/* Estado de carga para imágenes lazy */
.service-image img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-image img[loading="lazy"].loaded,
.service-image img:not([loading="lazy"]) {
    opacity: 1;
}

/* Fallback si la imagen no carga */
.service-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    z-index: -1;
}

/* Optimizaciones de rendering */
.service-image img {
    image-rendering: optimizeQuality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

/* Media queries específicas para asegurar que las imágenes se vean */
@media (max-width: 768px) {
    .service-image {
        background: #1a1a1a;
    }
    
    .service-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* JavaScript para cargar imágenes manualmente si es necesario */
.service-image[data-loaded="true"] img {
    opacity: 1;
}

.services-swiper .swiper-slide-active .service-image img {
    transform: scale(1.05);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(0, 0, 0, 0.1) 40%, 
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 2;
}

/* --- Service Content Positioning --- */
.service-content {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    color: white;
    max-width: 550px;
    text-align: left;
}

.service-title {
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 900;
    margin-bottom: 3rem;
    line-height: 0.9;
    color: #FFFFFF !important;
    text-shadow: 
        2px 2px 0px rgba(0, 0, 0, 0.9),
        4px 4px 8px rgba(0, 0, 0, 0.8),
        6px 6px 15px rgba(0, 0, 0, 0.6),
        0px 0px 20px rgba(0, 0, 0, 0.4);
    letter-spacing: 0px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    position: relative;
    display: inline-block;
}

.service-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    border-radius: 2px;
}

/* --- Animaciones para el título --- */
@keyframes titleGlow {
    0%, 100% {
        text-shadow: 
            2px 2px 0px rgba(0, 0, 0, 0.9),
            4px 4px 8px rgba(0, 0, 0, 0.8),
            6px 6px 15px rgba(0, 0, 0, 0.6),
            0px 0px 20px rgba(0, 0, 0, 0.4);
    }
    50% {
        text-shadow: 
            2px 2px 0px rgba(0, 0, 0, 0.9),
            4px 4px 8px rgba(0, 0, 0, 0.8),
            6px 6px 15px rgba(0, 0, 0, 0.6),
            0px 0px 25px rgba(0, 0, 0, 0.5),
            0px 0px 35px rgba(255, 255, 255, 0.1);
    }
}

.services-swiper .swiper-slide-active .service-title {
    animation: titleGlow 3s ease-in-out infinite;
}

/* --- Service Button como enlace --- */
.service-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: none;
    border-radius: 50px;
    padding: 1.2rem 2.5rem;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    min-width: 180px;
    justify-content: center;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    text-decoration: none;
    text-align: center;
}

.service-btn:visited {
    color: #1a1a1a;
}

.service-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 35px rgba(255, 215, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
    color: #1a1a1a;
    text-decoration: none;
}

.service-btn span {
    position: relative;
    z-index: 2;
    font-weight: 700;
    color: inherit;
}

.service-btn i {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    font-size: 1rem;
    color: inherit;
}

.service-btn:hover i {
    transform: translateX(4px);
}

/* --- Swiper Navigation --- */
.services-swiper .swiper-button-next,
.services-swiper .swiper-button-prev {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 20;
    cursor: pointer;
    position: absolute;
    top: 50%;
}

.services-swiper .swiper-button-next {
    right: 2rem;
}

.services-swiper .swiper-button-prev {
    left: 2rem;
}

.services-swiper .swiper-button-next::after,
.services-swiper .swiper-button-prev::after {
    display: none;
}

.services-swiper .swiper-button-next i,
.services-swiper .swiper-button-prev i {
    font-size: 1.5rem;
    color: white;
    transition: color 0.3s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.services-swiper .swiper-button-next:hover,
.services-swiper .swiper-button-prev:hover {
    background: rgba(245, 158, 11, 0.9);
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.4);
}

/* --- Swiper Pagination --- */
.services-swiper .swiper-pagination {
    bottom: 2rem;
    z-index: 25;
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.services-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.4s ease;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    text-indent: -9999px; /* Ocultar cualquier texto/número */
    font-size: 0; /* Asegurar que no se muestren números */
}

.services-swiper .swiper-pagination-bullet-active {
    background: #FFD700;
    transform: scale(1.4);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6);
}

/* =====================================================
   MOBILE ONLY REDESIGN - MODERN CARD SWIPER DESIGN
   ===================================================== */

@media (max-width: 768px) {
    /* Reset and clean mobile design */
    .popular-services-section {
        min-height: auto;
        padding: 2rem 0 3rem;
        background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
        position: relative;
    }
    
    /* Clean header for mobile */
    .services-section-header {
        position: relative;
        background: none;
        padding: 0 0 2rem;
        z-index: 2;
    }
    
    .services-section-header .section-header h2 {
        font-size: clamp(2rem, 7vw, 2.8rem);
        margin-bottom: 0.8rem;
        text-align: center;
        color: white;
        font-weight: 800;
    }
    
    .section-subtitle {
        font-size: 1rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        padding: 0 1.5rem;
        margin-bottom: 0;
    }
    
    /* Modern Swiper Container */
    .services-swiper {
        height: auto;
        padding: 1rem 0 3rem;
        position: relative;
        overflow: visible;
    }
    
    .services-swiper .swiper-wrapper {
        align-items: stretch;
        padding-bottom: 2rem;
    }
    
    .services-swiper .swiper-slide {
        height: auto;
        padding: 0 0.5rem;
        display: flex;
        align-items: stretch;
    }
    
    /* RESET DESKTOP STYLES FOR MOBILE */
    .service-content {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: none !important;
        text-align: center !important;
    }
    
    .service-title {
        font-size: clamp(1.3rem, 4vw, 1.6rem) !important;
        font-weight: 800 !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-family: 'Inter', 'Montserrat', sans-serif !important;
        display: block !important;
        position: relative !important;
    }
    
    .service-btn {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 0.9rem 2rem !important;
        color: #1a1a1a !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        margin-top: 0.5rem !important;
        min-width: 160px !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Modern Card Design - Clean & Beautiful with separated content */
    .service-card {
        width: 100%;
        height: 80vh;
        min-height: 550px;
        border-radius: 20px;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 
            0 15px 35px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.25);
        position: relative;
        transform: scale(0.95);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
    }
    
    /* Active slide scaling effect */
    .services-swiper .swiper-slide-active .service-card {
        transform: scale(1);
        box-shadow: 
            0 20px 45px rgba(0, 0, 0, 0.5),
            0 12px 25px rgba(0, 0, 0, 0.3);
    }
    
    /* Image Section - Pure image, no text overlay - Larger for better showcase */
    .service-image {
        width: 100% !important;
        height: 70% !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
        top: auto !important;
        left: auto !important;
        background: #1a1a1a !important;
    }
    
    .service-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transition: transform 0.6s ease !important;
        filter: brightness(1.1) contrast(1.05) saturate(1.1) !important;
        border-radius: 20px 20px 0 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Subtle zoom effect on active slide */
    .services-swiper .swiper-slide-active .service-image img {
        transform: scale(1.02) !important;
    }
    
    /* NO overlay on image area - completely clean */
    .service-overlay {
        display: none !important;
    }
    
    /* Content Area - Clean bottom section with better spacing */
    .service-content {
        width: 100% !important;
        height: 30% !important;
        min-height: 160px !important;
        background: linear-gradient(145deg, 
            rgba(20, 20, 20, 0.98) 0%, 
            rgba(30, 30, 30, 0.96) 100%
        ) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 0 0 20px 20px !important;
        padding: 1.8rem 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 10 !important;
        border-top: 1px solid rgba(255, 215, 0, 0.15) !important;
        position: relative !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        /* RESET desktop positioning */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: none !important;
    }
    
    /* Title styling with proper visibility */
    .service-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, #FFD700, #FFA500);
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    }
    
    /* Button hover effects */
    .service-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
        z-index: 1;
    }
    
    .service-btn:hover::before {
        left: 100%;
    }
    
    .service-btn:hover {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 
            0 12px 30px rgba(255, 215, 0, 0.4),
            0 6px 15px rgba(0, 0, 0, 0.3) !important;
        background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%) !important;
    }
    
    .service-btn span {
        position: relative;
        z-index: 2;
        font-weight: 700;
        color: inherit;
    }
    
    .service-btn i {
        font-size: 0.9rem;
        transition: transform 0.3s ease;
        position: relative;
        z-index: 2;
        color: inherit;
    }
    
    .service-btn:hover i {
        transform: translateX(4px);
    }
    
    /* Modern Navigation - Minimal and Clean */
    .services-swiper .swiper-button-next,
    .services-swiper .swiper-button-prev {
        background: rgba(26, 26, 26, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        transition: all 0.3s ease;
        z-index: 20;
        top: 35%; /* Positioned on image area */
    }
    
    .services-swiper .swiper-button-next {
        right: 1rem;
    }
    
    .services-swiper .swiper-button-prev {
        left: 1rem;
    }
    
    .services-swiper .swiper-button-next::after,
    .services-swiper .swiper-button-prev::after {
        display: none;
    }
    
    .services-swiper .swiper-button-next i,
    .services-swiper .swiper-button-prev i {
        font-size: 1.1rem;
        color: white;
    }
    
    .services-swiper .swiper-button-next:hover,
    .services-swiper .swiper-button-prev:hover {
        background: rgba(255, 215, 0, 0.9);
        transform: scale(1.05);
        border-color: rgba(255, 215, 0, 0.5);
    }
    
    .services-swiper .swiper-button-next:hover i,
    .services-swiper .swiper-button-prev:hover i {
        color: #1a1a1a;
    }
    
    /* Modern Pagination Dots */
    .services-swiper .swiper-pagination {
        bottom: 0.5rem;
        z-index: 25;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .services-swiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        opacity: 1;
        transition: all 0.3s ease;
        margin: 0;
    }
    
    .services-swiper .swiper-pagination-bullet-active {
        background: #FFD700;
        transform: scale(1.4);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    /* Touch improvements */
    .service-btn,
    .services-swiper .swiper-button-next,
    .services-swiper .swiper-button-prev {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Smooth scrolling for swiper */
    .services-swiper {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Performance optimizations */
    .service-card,
    .service-image img {
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .service-card {
        height: 75vh;
        min-height: 500px;
    }
    
    .service-image {
        height: 65%;
    }
    
    .service-content {
        height: 35%;
        min-height: 140px;
        padding: 1.5rem 1.2rem;
    }
    
    .service-title {
        font-size: clamp(1.1rem, 3.8vw, 1.3rem);
        margin-bottom: 0.8rem;
    }
    
    .service-btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.85rem;
        min-width: 140px;
    }
    
    .services-swiper .swiper-button-next,
    .services-swiper .swiper-button-prev {
        width: 42px;
        height: 42px;
        margin-top: -21px;
        top: 30%;
    }
    
    .services-swiper .swiper-button-next i,
    .services-swiper .swiper-button-prev i {
        font-size: 1rem;
    }
}