/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================
   Estilos base del body
   ========================= */
body {
    font-family: 'Poppins', sans-serif;
    background: #f9fafb;
    color: #22223b;
    margin: 0;
    padding: 0;
}

/* =========================
   Gradiente de fondo general
   ========================= */
.gradient-bg {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
}

/* =========================
   Utilidades generales
   ========================= */

.pulse-animation { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* =========================
   Terminal Demo (Hero)
   ========================= */

    .terminal-container {
            perspective: 1000px;
        }
        
        .terminal {
            background: transparent;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            position: relative;
            overflow: hidden;
            border: none;
        }
        
        .terminal-dots {
            padding: 0.5rem;
        }
        
        .terminal-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .terminal-dot.red {
            background-color: #ff5f56;
        }
        
        .terminal-dot.yellow {
            background-color: #ffbd2e;
        }
        
        .terminal-dot.green {
            background-color: #27c93f;
        }
        
        .terminal-header {
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            margin-bottom: 0.5rem;
        }
        
        .terminal-body {
            color: #e2e8f0;
            font-family: 'Fira Mono', 'Courier New', monospace;
            font-size: 1rem;
            line-height: 1.6;
            background: transparent;
            white-space: pre-line;
        }
.cursor {
    display: inline-block;
    width: 10px;
    height: 1rem;
    background: #e2e8f0;
    animation: blink 1s infinite;
    vertical-align: middle;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.tech-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.tech-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(124, 58, 237, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* =========================
   Animaciones de texto
   ========================= */
.animate-typing {
    animation: typing 2s steps(40, end);
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #48bb78;
}
.animate-appear {
    animation: appear 1s ease-in-out;
}
.animate-typing-delay {
    animation: typing 2s steps(40, end) 2s, blink-caret 0.75s step-end infinite 4s;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #48bb78;
}
.animate-appear-delay {
    animation: appear 1s ease-in-out 4s;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #48bb78; }
}
@keyframes appear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================
   Tarjetas de servicio
   ========================= */
.service-card { height: 100%; }

/* =========================
   Hover premium para tarjetas de tecnologías
   ========================= */
.tech-icon {
    transition: transform 0.3s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;
    box-shadow: 0 4px 24px 0 rgba(80,0,180,0.08), 0 1.5px 4px 0 rgba(80,0,180,0.06);
    position: relative;
    z-index: 1;
}
.tech-icon:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 12px 32px 0 rgba(80,0,180,0.13), 0 2px 8px 0 rgba(80,0,180,0.10);
}
.tech-icon i {
    transition: none;
}
.tech-icon:hover i {
    color: inherit;
    transform: none;
}

/* =========================
   Efecto 3D y flip en tarjetas
   ========================= */
.perspective-1000 { perspective: 1000px; }
.terminal-flip-inner {
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.4,2,.3,1);
    position: relative;
}
.group:hover .terminal-flip-inner {
    transform: rotateY(180deg) scale(1.07) translateY(-8px) skewY(-2deg);
    box-shadow: 0 16px 48px 0 rgba(80,0,180,0.25), 0 0 32px 0 #a78bfa;
}
.terminal-front, .terminal-back {
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}
.terminal-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tech-glow {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    box-shadow: 0 0 40px 10px #a78bfa, 0 0 80px 20px #6366f1 inset;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
    animation: glowPulse 2.5s infinite alternate;
}
@keyframes glowPulse {
    0% { opacity: 0.18; }
    100% { opacity: 0.35; }
}
.tech-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(135deg, rgba(168,139,250,0.08) 0 2px, transparent 2px 20px);
    mix-blend-mode: lighten;
    animation: linesMove 6s linear infinite;
}
@keyframes linesMove {
    0% { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}
.webcam-frame {
    box-shadow: 0 0 32px 0 #a78bfa, 0 0 8px 0 #6366f1;
    border-radius: 1rem;
    overflow: hidden;
    background: #18181b;
}
.animate-glow {
    animation: glowPulse 2.5s infinite alternate;
}
.animate-border-flicker {
    animation: borderFlicker 1.2s infinite alternate;
}
@keyframes borderFlicker {
    0% { border-color: #a78bfa; }
    100% { border-color: #6366f1; }
}
.animate-spin-slow {
    animation: spin 3s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
.animate-fade-in {
    animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px);}
    to { opacity: 1; transform: translateY(0);}
}

/* =========================
   Tarjetas de testimonios
   ========================= */
.testimonial-card {
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.quote-icon {
    opacity: 0.1;
    font-size: 80px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: #7c3aed;
}
.fade-in {
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.gradient-text {
    background: linear-gradient(45deg, #7c3aed, #9333ea, #c026d3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Menú móvil */
#mobile-menu {
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 4px 24px rgba(139,92,246,0.08);
    z-index: 60;
    position: absolute;
    width: 100%;
    left: 0;
    top: 64px;
}
/* Banner de cookies */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #ede9fe;
    color: #4b5563;
    padding: 1rem 2rem;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 12px rgba(139,92,246,0.08);
}