/* ========================================
   EFECTO BRILLO CTA - RESERVAR AHORA
   Efecto llamativo para aumentar conversiones
   Compatible con: Chrome, Firefox, Safari, Android
   ======================================== */

/* Botón primario del hero con efecto shine */
.hero-buttons .btn-primary {
    position: relative;
    overflow: hidden;
    /* Mantener los estilos existentes pero añadir efecto */
    background: linear-gradient(135deg, #15BEAA, #12A594) !important;
    transition: all 0.3s ease;
}

/* Efecto de brillo que se mueve */
.hero-buttons .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.3),
        transparent
    );
    -webkit-animation: shine 3s infinite;
    animation: shine 3s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; /* Pequeño delay inicial */
    pointer-events: none; /* Importante para Safari */
    z-index: 1; /* Asegurar que esté encima del fondo pero debajo del texto */
}

/* Animación del brillo - con prefijos para Safari */
@-webkit-keyframes shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

/* Efecto pulse adicional para más atención */
.hero-buttons .btn-primary {
    -webkit-animation: pulse-glow 2s infinite;
    animation: pulse-glow 2s infinite;
}

@-webkit-keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(21, 190, 170, 0.4),
            0 0 20px rgba(21, 190, 170, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(21, 190, 170, 0.6),
            0 0 30px rgba(21, 190, 170, 0.4),
            0 0 40px rgba(21, 190, 170, 0.2);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(21, 190, 170, 0.4),
            0 0 20px rgba(21, 190, 170, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(21, 190, 170, 0.6),
            0 0 30px rgba(21, 190, 170, 0.4),
            0 0 40px rgba(21, 190, 170, 0.2);
    }
}

/* Hover más impactante */
.hero-buttons .btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, #17D4BD, #15BEAA) !important;
    box-shadow: 
        0 6px 25px rgba(21, 190, 170, 0.6),
        0 0 40px rgba(21, 190, 170, 0.4) !important;
}

/* Efecto de brillo más rápido en hover */
.hero-buttons .btn-primary:hover::before {
    animation-duration: 1.5s;
}

/* Icono con pequeña animación */
.hero-buttons .btn-primary i {
    display: inline-block;
    margin-right: 8px;
    animation: icon-bounce 3s infinite;
    animation-delay: 1s;
}

@keyframes icon-bounce {
    0%, 80%, 100% {
        transform: scale(1) rotate(0deg);
    }
    85% {
        transform: scale(1.1) rotate(-5deg);
    }
    90% {
        transform: scale(1.1) rotate(5deg);
    }
    95% {
        transform: scale(1.1) rotate(-5deg);
    }
}

/* Asegurar que el texto esté encima del brillo */
.hero-buttons .btn-primary span,
.hero-buttons .btn-primary i {
    position: relative;
    z-index: 2;
}

/* COMPATIBILIDAD SAFARI ESPECÍFICA */
@supports (-webkit-appearance: none) {
    .hero-buttons .btn-primary::before {
        -webkit-transform: translateZ(0); /* Forzar aceleración GPU */
        transform: translateZ(0);
        will-change: left; /* Optimizar animación */
    }
    
    .hero-buttons .btn-primary {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ANDROID ESPECÍFICO - detectar por touch */
@media (pointer: coarse) {
    .hero-buttons .btn-primary::before {
        animation-duration: 3.5s; /* Ligeramente más lento en táctil */
    }
}

/* LANDSCAPE MODE - móviles horizontales */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-buttons .btn-primary {
        padding: 12px 25px !important; /* Botón más pequeño en landscape */
    }
    
    .hero-buttons .btn-primary::before {
        animation-duration: 4s; /* Más lento para no marear */
    }
}

/* Para dispositivos móviles - efecto más suave */
@media (max-width: 768px) {
    .hero-buttons .btn-primary::before {
        animation-duration: 4s; /* Más lento en móvil */
    }
    
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 
                0 3px 10px rgba(21, 190, 170, 0.3);
        }
        50% {
            box-shadow: 
                0 3px 15px rgba(21, 190, 170, 0.5);
        }
    }
}