/** Importacion de fuente por @font-face **/

@font-face {
    font-family: 'CocoGothicFat';
    src: url(../fonts/CocoGothic-Fat.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic-Fat.woff) format('woff'),
         url(../fonts/CocoGothic-Fat.ttf) format('truetype'),
         url(../fonts/CocoGothic-Fat.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CocoGothicHeavy';
    src: url(../fonts/CocoGothic-Heavy.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic-Heavy.woff) format('woff'),
         url(../fonts/CocoGothic-Heavy.ttf) format('truetype'),
         url(../fonts/CocoGothic-Heavy.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CocoGothicUltraLight';
    src: url(../fonts/CocoGothic-UltraLight.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic-UltraLight.woff) format('woff'),
         url(../fonts/CocoGothic-UltraLight.ttf) format('truetype'),
         url(../fonts/CocoGothic-UltraLight.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CocoGothic';
    src: url(../fonts/CocoGothic.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic.woff) format('woff'),
         url(../fonts/CocoGothic.ttf) format('truetype'),
         url(../fonts/CocoGothic.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CocoGothicBold';
    src: url(../fonts/CocoGothic-Bold.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic-Bold.woff) format('woff'),
         url(../fonts/CocoGothic-Bold.ttf) format('truetype'),
         url(../fonts/CocoGothic-Bold.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CocoGothicLight';
    src: url(../fonts/CocoGothic-Light.eot?#iefix) format('embedded-opentype'), 
         url(../fonts/CocoGothic-Light.woff) format('woff'),
         url(../fonts/CocoGothic-Light.ttf) format('truetype'),
         url(../fonts/CocoGothic-Light.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =========================================
   ESTILOS GENERALES Y FUENTES
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
}

/* Texto con gradiente naranja */
.gradient-text {
    background: linear-gradient(90deg, #FF6B00 0%, #FF9900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Fondo oscuro de la sección Hero */
.hero-bg {
    background-color: #0F172A;
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 107, 0, 0.1) 0%, transparent 40%);
}

/* Animación del botón principal (CTA) */
.cta-pulse {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

/* =========================================
   ESTILOS DEL BOTÓN LATERAL (SCROLLSPY)
   ========================================= */

/* Estilo base del contenedor del link */
.nav-link {
    transition: all 0.3s ease;
    opacity: 0.6; 
}

.nav-link:hover {
    opacity: 1;
}

/* --- ESTADO ACTIVO (Cuando estás en la sección) --- */

/* 1. El contenedor se vuelve totalmente visible */
.nav-link.active {
    opacity: 1 !important;
    transform: scale(1.1); /* Crece un poquito más */
}

/* 2. El PUNTO (Dot): Se vuelve naranja, grande y brilla 
   NOTA: Usamos !important para sobreescribir las clases w-3 h-3 de Tailwind */
.nav-link.active .nav-dot {
    background-color: #ea580c !important; /* Naranja intenso */
    border-color: #ea580c !important;
    width: 16px !important;  
    height: 16px !important;
    box-shadow: 0 0 15px rgba(234, 88, 12, 0.8) !important; 
}

/* 3. El TEXTO: Se hace visible y se pone naranja */
.nav-link.active .nav-text {
    opacity: 1 !important;
    color: #ea580c !important;
    font-weight: 800 !important;
    transform: translateX(0) !important;
}


/* --- contenedor header y nav Logo y Botones --- */

header{
    margin: auto;
    width: 100%;
    height: 75px;
    background-color: #BF2918;
    position: fixed;
    top: 0px;
    z-index: 999;
}

    header div.oferta_1{
        text-align: center;
        padding: 10px 0px 20px 0px;
        height: auto;
    }

        header div.oferta_1 a{
            text-decoration: none;
            color: white;
            font-size: 20px;
            font-family: 'Economica', sans-serif;
            text-decoration: none;
        }

            header div.oferta_1 a span{
                color: #F39F07;
                font-weight: 700;
            }

    div#container_header{
        margin: auto;
        width: 90%;
        height: 56px;
        border: 2px solid white;
        padding: 8px 20px;
        background-color: #BF2918;
        margin-top: -13px;
    }

        div.header_logo{
            width: 120px;
            height: auto;
            float: left;
            position: relative;
        }

            div.logo{
                margin: auto;
                width: 120px;
                height: 36px;
                background-image: url(../img/logo-kummba.png);
                background-repeat: no-repeat;
                background-size: cover;
            }

    @media screen and (max-width: 600px){        
        div#container_header{
            padding: 8px 10px;
        }
    }

/*+ menú lista +*/

    div.menu-icon{
        position: relative;
        float: right;
        align-content: center;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
    }

        a.list_menu {
            padding: 5.5px 15px;
            position: relative;
            display: block;
            background: #1e2837;
            border-radius: 5px;
            text-decoration: none;
            color: white;
            font-family: 'CocoGothicBold', sans-serif;
        }

        a.list_menu:hover {
            background: #121927;
        }

/* --- Imagenes de la Sesión de Registro --- */

.img-cliente-1 {
    background-image: url(../img/magika.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.img-cliente-2 {
    background-image: url(../img/casa_carino.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.img-cliente-3 {
    background-image: url(../img/la_katrina.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* =========================================
   PAGINACIÓN SLIDER MODERN (LÍNEAS)
   ========================================= */

/* Contenedor de la paginación */
.swiper-custom-pagination {
    bottom: 40px !important; /* Ajuste de altura */
}

/* La línea inactiva */
.swiper-pagination-bullet {
    width: 40px !important;  /* Largo de la línea */
    height: 4px !important;  /* Grosor */
    background: rgba(255, 255, 255, 0.3) !important; /* Blanco semitransparente */
    border-radius: 0px !important; /* Rectangular */
    opacity: 1 !important;
    margin: 0 10px !important;
    transition: all 0.4s ease;
}

/* La línea ACTIVA */
.swiper-pagination-bullet-active {
    background: #bf2918 !important; /* Rojo Kummba */
    width: 80px !important; /* Crece al estar activo */
    box-shadow: 0 0 10px rgba(191, 41, 24, 0.6);
}

/* Animación simple para el texto al cambiar slide */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Aplicar animación al slide activo */
.swiper-slide-active h2, 
.swiper-slide-active p, 
.swiper-slide-active a {
    animation: fadeInUp 0.8s ease-out forwards;
}

.swiper-slide-active h2 { animation-delay: 0.2s; }
.swiper-slide-active p { animation-delay: 0.4s; }
.swiper-slide-active a { animation-delay: 0.6s; }

/* Ocultar elementos en slides inactivos para reiniciar animación */
.swiper-slide:not(.swiper-slide-active) h2,
.swiper-slide:not(.swiper-slide-active) p,
.swiper-slide:not(.swiper-slide-active) a {
    opacity: 0;
}

/* =========================================
   ANIMACIONES FLOTANTES (UI 3D)
   ========================================= */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

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

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

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out infinite;
    animation-delay: 2s;
}

/* =========================================
   OPTIMIZACIÓN 3D RESPONSIVA
   ========================================= */

/* Contenedor de perspectiva */
.perspective-container {
    perspective: 2000px;
}

/* La tarjeta (Tablet): Define cómo se comporta en Móvil vs PC */
.isometric-card {
    transform-style: preserve-3d;
    transition: transform 0.6s ease-out;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* --- MÓVIL (Menos de 1024px) --- */
/* Se ve casi de frente para máxima legibilidad */
@media (max-width: 1023px) {
    .isometric-card {
        transform: rotateX(5deg) rotateY(0deg); 
        width: 90% !important; /* Ocupa el ancho disponible */
        margin: 0 auto;
    }
    
    /* Ocultar elementos flotantes que estorben en pantallas muy pequeñas */
    .hide-on-mobile {
        display: none !important;
    }
}

/* --- ESCRITORIO (Más de 1024px) --- */
/* Se aplica la isometría 3D completa */
@media (min-width: 1024px) {
    .isometric-card {
        transform: rotateX(5deg) rotateY(-5deg) rotateZ(0deg); /* Ajuste sutil o full isométrico */
        /* Si quieres el efecto muy inclinado usa: transform: rotateX(55deg) rotateZ(-30deg) rotateY(5deg); */
        box-shadow: -30px 30px 60px rgba(0,0,0,0.5);
    }
    
    .perspective-container:hover .isometric-card {
        transform: scale(1.02) rotateX(5deg) rotateY(-5deg);
    }
}

/* Animaciones de Flotación */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 5s ease-in-out infinite; animation-delay: 2s; }

/* =========================================
   CORRECCIÓN FUNCIONALIDAD MÓVIL
   ========================================= */
.mySwiper {
    /* Esto es OBLIGATORIO para móviles modernos: 
       Permite bajar la pantalla (pan-y) pero reserva el movimiento 
       lateral (pan-x) para el Javascript del Slider */
    touch-action: pan-y !important; 
    cursor: grab;
}

.mySwiper:active {
    cursor: grabbing;
}

/* Asegurar que los slides no bloqueen los clics/touch */
.swiper-slide {
    height: auto; /* Permite ajuste automático */
    touch-action: pan-y !important;
}

/* =========================================
   PARCHE DE SEGURIDAD PARA MÓVILES
   ========================================= */

/* 1. Forzar altura mínima en los slides para que siempre sean "tocables" */
.swiper-slide {
    min-height: 600px; /* Asegura que el slide tenga cuerpo incluso si el contenido es absolute */
    height: auto !important;
    touch-action: pan-y !important; /* Permite scroll vertical sin bloquear el slider */
}

/* 2. Asegurar que el contenedor padre no colapse */
.mySwiper {
    width: 100%;
    min-height: 600px;
}

/* 3. Corrección específica para la tarjeta 3D en móviles */
@media (max-width: 1023px) {
    .isometric-card {
        /* Simplificar la transformación en móviles para evitar glitches táctiles */
        transform: rotateX(5deg) rotateY(0deg) !important;
        margin-bottom: 2rem; 
    }
}

/* =========================================
   BLINDAJE FINAL PARA MÓVILES (SLIDER)
   ========================================= */

/* 1. Forzar al navegador a respetar el swipe horizontal */
.swiper-wrapper, 
.swiper-slide {
    touch-action: pan-y !important; /* Permite bajar con el dedo pero reserva los lados para el slider */
    width: 100% !important; /* Asegura que el slide ocupe la pantalla y no colapse */
}

/* 2. Asegurar altura mínima táctil */
.mySwiper, 
.swiper-slide {
    min-height: 600px; /* Garantiza que siempre haya zona para tocar */
}

/* 3. Corrección visual para que la tarjeta 3D no se corte en móviles */
@media (max-width: 1023px) {
    .isometric-card {
        transform: rotateX(5deg) rotateY(0deg) !important; /* Mantiene la tarjeta casi plana */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 90% !important; /* Evita que se salga del ancho de pantalla */
    }
    
    /* Asegurar que el contenido dentro del slide 1 no bloquee el dedo */
    #servicios-extra .text-left {
        pointer-events: auto !important;
    }
}