/* ===================================================================
   Groq AI Blog Generator - Design Templates
   3 Plantillas Visuales con Animaciones Impactantes
   =================================================================== */

/* ===================================================================
   TEMPLATE 1: GEOMETRIC
   Animaciones geométricas con partículas flotantes
   =================================================================== */

.groq-template-geometric {
    position: relative;
    overflow: hidden;
}

/* Fondo con patrón geométrico animado */
.groq-template-geometric::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(45deg, rgba(99, 102, 241, 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(139, 92, 246, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(99, 102, 241, 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(139, 92, 246, 0.03) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    animation: geometricMove 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes geometricMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Partículas flotantes */
.groq-template-geometric .highlight-box::after,
.groq-template-geometric .stats-box::after,
.groq-template-geometric .conclusion-box::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, currentColor, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(0); opacity: 0; }
    25% { transform: translateY(-20px) scale(1); opacity: 0.6; }
    50% { transform: translateY(-40px) scale(0.8); opacity: 0.3; }
    75% { transform: translateY(-60px) scale(1.2); opacity: 0.6; }
}

/* Títulos con efecto geométrico */
.groq-template-geometric h2 {
    position: relative;
    padding-left: 30px !important;
}

.groq-template-geometric h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    animation: geometricRotate 3s ease-in-out infinite;
}

@keyframes geometricRotate {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(-50%) rotate(72deg); }
}

/* Cajas con bordes geométricos animados */
.groq-template-geometric .highlight-box,
.groq-template-geometric .stats-box,
.groq-template-geometric .conclusion-box {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.98)) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box;
}

.groq-template-geometric .highlight-box::before,
.groq-template-geometric .stats-box::before,
.groq-template-geometric .conclusion-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #6366f1, #8b5cf6, #10b981, #f59e0b);
    background-size: 300% 300%;
    border-radius: 12px;
    z-index: -1;
    animation: geometricBorder 4s ease infinite;
}

@keyframes geometricBorder {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Lista de características con hexágonos */
.groq-template-geometric .feature-list li::before {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    animation: hexagonPulse 2s ease-in-out infinite !important;
}

@keyframes hexagonPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===================================================================
   TEMPLATE 2: 3D CARDS
   Tarjetas 3D con profundidad y sombras realistas
   =================================================================== */

.groq-template-3d-cards {
    perspective: 1000px;
    position: relative;
}

/* Títulos con efecto 3D */
.groq-template-3d-cards h2 {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    text-shadow:
        1px 1px 0px rgba(99, 102, 241, 0.3),
        2px 2px 0px rgba(99, 102, 241, 0.2),
        3px 3px 0px rgba(99, 102, 241, 0.1),
        4px 4px 8px rgba(0, 0, 0, 0.1);
}

.groq-template-3d-cards h2:hover {
    transform: translateZ(10px) rotateX(2deg);
}

/* Cajas con efecto 3D realista */
.groq-template-3d-cards .highlight-box,
.groq-template-3d-cards .stats-box,
.groq-template-3d-cards .conclusion-box {
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.02) !important;
}

.groq-template-3d-cards .highlight-box:hover,
.groq-template-3d-cards .stats-box:hover,
.groq-template-3d-cards .conclusion-box:hover {
    transform: translateZ(20px) translateY(-5px) rotateX(2deg);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 16px 32px rgba(0, 0, 0, 0.15),
        0 32px 64px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(99, 102, 241, 0.1) !important;
}

/* Highlight box con efecto de capa elevada */
.groq-template-3d-cards .highlight-box {
    position: relative;
}

.groq-template-3d-cards .highlight-box::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border-radius: 12px;
    z-index: -1;
    transform: translateZ(-10px);
    transition: all 0.3s ease;
}

.groq-template-3d-cards .highlight-box:hover::after {
    transform: translateZ(-20px) scale(1.02);
    opacity: 0.7;
}

/* Stats box con profundidad */
.groq-template-3d-cards .stats-box {
    position: relative;
}

.groq-template-3d-cards .stats-box::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border-radius: 12px;
    z-index: -1;
    transform: translateZ(-10px);
    transition: all 0.3s ease;
}

.groq-template-3d-cards .stats-box:hover::after {
    transform: translateZ(-20px) scale(1.02);
    opacity: 0.7;
}

/* Conclusion box con máxima elevación */
.groq-template-3d-cards .conclusion-box {
    position: relative;
}

.groq-template-3d-cards .conclusion-box::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
    border-radius: 12px;
    z-index: -1;
    transform: translateZ(-15px);
    transition: all 0.3s ease;
}

.groq-template-3d-cards .conclusion-box:hover::after {
    transform: translateZ(-30px) scale(1.03);
    opacity: 0.8;
}

/* Lista con items elevados */
.groq-template-3d-cards .feature-list li {
    transform: translateZ(5px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.groq-template-3d-cards .feature-list li:hover {
    transform: translateZ(15px) translateY(-3px) !important;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 12px 24px rgba(99, 102, 241, 0.12),
        0 0 0 1px rgba(99, 102, 241, 0.1) !important;
}

/* FAQ items con profundidad */
.groq-template-3d-cards .faq-item {
    transform: translateZ(5px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.groq-template-3d-cards .faq-item:hover {
    transform: translateZ(15px) translateY(-3px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.12);
}

/* ===================================================================
   TEMPLATE 3: FUTURISTIC
   Efectos de neón, glassmorphism y animaciones fluidas
   =================================================================== */

.groq-template-futuristic {
    position: relative;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.01) 0%, rgba(139, 92, 246, 0.02) 100%);
}

/* Efecto de luz de fondo animada */
.groq-template-futuristic::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    animation: futuristicGlow 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes futuristicGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(10%, 10%) scale(1.1); opacity: 0.5; }
}

/* Títulos con efecto neón */
.groq-template-futuristic h2 {
    animation: neonPulse 3s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(99, 102, 241, 0.5),
        0 0 20px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(99, 102, 241, 0.1);
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(99, 102, 241, 0.5),
            0 0 20px rgba(99, 102, 241, 0.3),
            0 0 30px rgba(99, 102, 241, 0.1);
    }
    50% {
        text-shadow:
            0 0 15px rgba(99, 102, 241, 0.7),
            0 0 30px rgba(99, 102, 241, 0.5),
            0 0 45px rgba(99, 102, 241, 0.3);
    }
}

/* Glassmorphism para cajas */
.groq-template-futuristic .highlight-box,
.groq-template-futuristic .stats-box,
.groq-template-futuristic .conclusion-box {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    position: relative;
    overflow: hidden;
}

/* Highlight box con borde neón amarillo */
.groq-template-futuristic .highlight-box {
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    box-shadow:
        0 0 20px rgba(245, 158, 11, 0.3),
        0 8px 32px rgba(245, 158, 11, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.groq-template-futuristic .highlight-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(245, 158, 11, 0.1) 50%,
        transparent 70%);
    animation: futuristicSweep 3s linear infinite;
}

@keyframes futuristicSweep {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Stats box con borde neón azul */
.groq-template-futuristic .stats-box {
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.3),
        0 8px 32px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.groq-template-futuristic .stats-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(59, 130, 246, 0.1) 50%,
        transparent 70%);
    animation: futuristicSweep 3s linear infinite;
    animation-delay: 1s;
}

/* Conclusion box con borde neón verde */
.groq-template-futuristic .conclusion-box {
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    box-shadow:
        0 0 25px rgba(16, 185, 129, 0.4),
        0 8px 32px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.groq-template-futuristic .conclusion-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(16, 185, 129, 0.15) 50%,
        transparent 70%);
    animation: futuristicSweep 3s linear infinite;
    animation-delay: 2s;
}

/* Feature list con efecto holográfico */
.groq-template-futuristic .feature-list li {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.groq-template-futuristic .feature-list li:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.3),
        0 4px 12px rgba(99, 102, 241, 0.15) !important;
    transform: translateX(10px) scale(1.02) !important;
}

.groq-template-futuristic .feature-list li::before {
    box-shadow:
        0 0 10px rgba(16, 185, 129, 0.5),
        inset 0 0 5px rgba(255, 255, 255, 0.5) !important;
    animation: neonCheckmark 2s ease-in-out infinite !important;
}

@keyframes neonCheckmark {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(16, 185, 129, 0.5),
            inset 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 15px rgba(16, 185, 129, 0.7),
            0 0 25px rgba(16, 185, 129, 0.4),
            inset 0 0 8px rgba(255, 255, 255, 0.7);
    }
}

/* FAQ con efecto glassmorphism */
.groq-template-futuristic .faq-section {
    background: rgba(99, 102, 241, 0.05) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.groq-template-futuristic .faq-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.groq-template-futuristic .faq-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px) scale(1.01);
}

.groq-template-futuristic .faq-question {
    animation: neonPulse 3s ease-in-out infinite;
}

/* Párrafos con efecto de fade-in suave */
.groq-template-futuristic p {
    animation: futuristicFadeIn 0.8s ease-out;
}

@keyframes futuristicFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 768px) {
    /* Geometric template */
    .groq-template-geometric h2::before {
        width: 15px;
        height: 15px;
    }

    /* 3D Cards template */
    .groq-template-3d-cards .highlight-box:hover,
    .groq-template-3d-cards .stats-box:hover,
    .groq-template-3d-cards .conclusion-box:hover {
        transform: translateZ(10px) translateY(-3px);
    }

    /* Futuristic template */
    .groq-template-futuristic .highlight-box,
    .groq-template-futuristic .stats-box,
    .groq-template-futuristic .conclusion-box {
        backdrop-filter: blur(15px);
    }
}

/* ===================================================================
   MEJORAS DE RENDIMIENTO
   =================================================================== */

/* Desactivar animaciones si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .groq-template-geometric *,
    .groq-template-3d-cards *,
    .groq-template-futuristic * {
        animation: none !important;
        transition: none !important;
    }
}