/* ====================================
   JUEGO QR - LANDING PAGE
   Diseño moderno con gradientes y animaciones
   ==================================== */

/* ========================================
   VARIABLES CSS PERSONALIZADAS
======================================== */
:root {
    /* Colores Principales */
    --juego-primary: #3b82f6;
    --juego-primary-dark: #1d4ed8;
    --juego-primary-light: #60a5fa;
    --juego-success: #10b981;
    --juego-danger: #ef4444;
    --juego-warning: #f59e0b;
    --juego-info: #06b6d4;
    /* Colores de Beneficios */
    --juego-verde: #10b981;
    --juego-rojo: #ef4444;
    --juego-naranja: #f59e0b;
    --juego-azul: #3b82f6;
    --juego-morado: #8b5cf6;
    --juego-dorado: #f59e0b;
    /* Fondos */
    --juego-bg-page: #f8fafc;
    --juego-bg-card: #ffffff;
    --juego-bg-hero: #0f172a;
    /* Textos */
    --juego-text-primary: #0f172a;
    --juego-text-secondary: #64748b;
    --juego-text-muted: #94a3b8;
    --juego-text-white: #ffffff;
    /* Gradientes */
    --juego-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --juego-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --juego-gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
    --juego-gradient-texto: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    /* Sombras */
    --juego-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --juego-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12);
    --juego-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.16);
    --juego-shadow-xl: 0 12px 48px rgba(15, 23, 42, 0.2);
    /* Bordes */
    --juego-border-radius: 16px;
    --juego-border-radius-lg: 24px;
    --juego-border-radius-xl: 32px;
    /* Transiciones */
    --juego-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --juego-transition-fast: all 0.15s ease;
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */
.juego-qr-landing {
    background: var(--juego-bg-page);
    overflow-x: hidden;
}

/* ========================================
   HERO SECTION CON GRADIENTE
======================================== */
.hero-juego {
    background: var(--juego-gradient-hero);
    position: relative;
    overflow: hidden;
    margin: -1.5rem -12px 0;
    padding: 2rem 0;
}

    /* Patrón decorativo de fondo */
    .hero-juego::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: patternMove 20s linear infinite;
    }

@keyframes patternMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px;
    }
}

/* Badge educativo */
.badge-educativo {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--juego-text-white);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--juego-shadow-sm);
    animation: fadeInUp 0.6s ease-out;
}

/* Título principal */
.hero-titulo {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--juego-text-white);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* Texto con gradiente */
.texto-gradiente {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Subtítulo */
.hero-subtitulo {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

/* Descripción */
.hero-descripcion {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

/* Botón principal "Jugar Ahora" */
.btn-jugar-ahora {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    transition: var(--juego-transition);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

    .btn-jugar-ahora:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: white;
    }

    .btn-jugar-ahora:active {
        transform: translateY(-1px);
    }

/* Microcopy */
.microcopy {
    opacity: 0.9;
}

.microcopy-item {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

/* ========================================
   ILUSTRACIÓN DEL HERO (Lado derecho)
======================================== */
.hero-ilustracion {
    position: relative;
    padding: 2rem;
}

/* Card de ejemplo QR */
.qr-ejemplo-card {
    background: white;
    border-radius: var(--juego-border-radius-lg);
    box-shadow: var(--juego-shadow-xl);
    overflow: hidden;
    animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.qr-ejemplo-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qr-ejemplo-dots {
    display: flex;
    gap: 0.5rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red {
    background: #ef4444;
}

.dot-yellow {
    background: #f59e0b;
}

.dot-green {
    background: #10b981;
}

.qr-ejemplo-url {
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--juego-text-secondary);
    font-weight: 500;
}

.qr-ejemplo-body {
    padding: 3rem 2rem;
    text-align: center;
}

.qr-code-simulado {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: var(--juego-border-radius);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--juego-shadow-lg);
}

    .qr-code-simulado i {
        font-size: 4rem;
        color: white;
    }

.qr-ejemplo-texto {
    color: var(--juego-text-secondary);
    font-size: 0.95rem;
}

/* Badges flotantes animados */
.floating-badge {
    position: absolute;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    box-shadow: var(--juego-shadow-md);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.badge-1 {
    top: 10%;
    right: -5%;
    animation-delay: 0s;
}

.badge-2 {
    top: 50%;
    left: -5%;
    animation-delay: 1s;
}

.badge-3 {
    bottom: 15%;
    right: 10%;
    animation-delay: 2s;
}

/* ========================================
   SECCIÓN DE BENEFICIOS
======================================== */
.beneficios-section {
    background: var(--juego-bg-page);
    padding: 5rem 0;
}

.section-titulo {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--juego-text-primary);
    margin-bottom: 1rem;
}

.section-descripcion {
    font-size: 1.125rem;
    color: var(--juego-text-secondary);
}

/* Cards de beneficios */
.beneficio-card {
    background: var(--juego-bg-card);
    border-radius: var(--juego-border-radius);
    padding: 2rem;
    height: 100%;
    border-top: 4px solid transparent;
    box-shadow: var(--juego-shadow-sm);
    transition: var(--juego-transition);
    position: relative;
    overflow: hidden;
}

    .beneficio-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--juego-gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--juego-transition);
    }

    .beneficio-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--juego-shadow-lg);
    }

        .beneficio-card:hover::before {
            transform: scaleX(1);
        }

/* Iconos circulares con gradiente */
.beneficio-icono {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--juego-shadow-md);
}

    .beneficio-icono i {
        font-size: 1.75rem;
        color: white;
    }

.beneficio-verde {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.beneficio-rojo {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.beneficio-naranja {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.beneficio-azul {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.beneficio-morado {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.beneficio-dorado {
    background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
}

.beneficio-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--juego-text-primary);
    margin-bottom: 0.75rem;
}

.beneficio-descripcion {
    font-size: 0.95rem;
    color: var(--juego-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Card destacada (recompensa) */
.beneficio-destacado {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-top-color: #f59e0b;
    position: relative;
}

    .beneficio-destacado::before {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

.badge-regalo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--juego-shadow-sm);
}

/* ========================================
   CTA FINAL
======================================== */
.cta-final-section {
    background: var(--juego-bg-page);
    padding: 3rem 0 5rem;
}

.cta-final-card {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: var(--juego-border-radius-lg);
    padding: 3rem;
    box-shadow: var(--juego-shadow-xl);
    position: relative;
    overflow: hidden;
}

    .cta-final-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 40px 40px;
    }

.cta-final-titulo {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
}

.cta-final-descripcion {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
}

.btn-cta-final {
    background: white;
    color: var(--juego-primary);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: var(--juego-transition);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

    .btn-cta-final:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.95);
        color: var(--juego-primary-dark);
    }

/* ========================================
   ANIMACIONES DE ENTRADA
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Tablets */
@media (max-width: 991px) {
    .hero-juego {
        padding: 3rem 0;
    }

    .floating-badge {
        display: none; /* Ocultar badges flotantes en tablets */
    }

    .qr-code-simulado {
        width: 120px;
        height: 120px;
    }

        .qr-code-simulado i {
            font-size: 3rem;
        }
}

/* Móviles */
@media (max-width: 767px) {
    .hero-juego {
        margin: -1rem -12px 0;
        padding: 2rem 0;
    }

    .badge-educativo {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }

    .hero-titulo {
        font-size: 2rem;
    }

    .hero-subtitulo {
        font-size: 1.25rem;
    }

    .hero-descripcion {
        font-size: 1rem;
    }

    .btn-jugar-ahora {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .microcopy {
        margin-top: 1.5rem;
    }

    .hero-ilustracion {
        padding: 1rem;
    }

    .qr-ejemplo-body {
        padding: 2rem 1.5rem;
    }

    .beneficios-section {
        padding: 3rem 0;
    }

    .section-titulo {
        font-size: 1.75rem;
    }

    .beneficio-icono {
        width: 60px;
        height: 60px;
    }

        .beneficio-icono i {
            font-size: 1.5rem;
        }

    .cta-final-card {
        padding: 2rem 1.5rem;
    }

    .btn-cta-final {
        width: 100%;
        justify-content: center;
    }
}