/* =========================================
   HOME: HERO SECTION & GLITCH
   ========================================= */
.hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0c10;
    overflow: hidden;
}

#video-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}

.video-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
}

.hero-content { z-index: 2; }

/* Texto Restaurado H1 */
.hero-subtitle-restored {
    font-family: var(--font-display) !important; 
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    opacity: 0.9;
    line-height: 1.5;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .hero-subtitle-restored { font-size: 0.9rem !important; }
}

/* Glitch */
.glitch-container { display: inline-block; }

.cyber-glitch {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-display);
    position: relative;
    text-transform: uppercase;
}

.cyber-glitch::before,
.cyber-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8;
}

.cyber-glitch::before {
    color: #ff00c1; z-index: -1;
    animation: glitch-shift-1 2.5s infinite linear alternate-reverse;
}

.cyber-glitch::after {
    color: #00fff9; z-index: -2;
    animation: glitch-shift-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-shift-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
    10% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    20% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
    30% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    40% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 1px); }
    50% { clip-path: inset(30% 0 20% 0); transform: translate(2px, -1px); }
    60% { clip-path: inset(70% 0 20% 0); transform: translate(-2px, 2px); }
    70% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(50% 0 10% 0); transform: translate(-2px, 1px); }
    90% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -1px); }
    100% { clip-path: inset(60% 0 30% 0); transform: translate(-2px, 2px); }
}

@keyframes glitch-shift-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
    10% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 2px); }
    20% { clip-path: inset(70% 0 40% 0); transform: translate(2px, -2px); }
    30% { clip-path: inset(20% 0 10% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -1px); }
    50% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(40% 0 10% 0); transform: translate(2px, -2px); }
    70% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 1px); }
    80% { clip-path: inset(20% 0 50% 0); transform: translate(2px, -1px); }
    90% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 2px); }
    100% { clip-path: inset(30% 0 60% 0); transform: translate(2px, -2px); }
}

@media (max-width: 768px) { .hero-title { font-size: 2rem; } }

/* =========================================
   HOME: GLASSMORPHISM CARDS
   ========================================= */
.tech-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    padding: 2.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
    transform-style: preserve-3d;
}

.tech-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.1);
}

.tech-card h4 { color: #fff; margin-bottom: 1rem; }
.tech-card p { color: var(--secondary); font-size: 0.95rem; line-height: 1.6; }

.icon-box {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    transform: translateZ(20px); 
}

/* =========================================
   HOME: SHOP SECTION
   ========================================= */
.product-card {
    background: #121212; border: 1px solid #333;
    transition: all 0.3s; position: relative;
}

.product-img { height: 250px; width: 100%; overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-img img { transform: scale(1.1); }

.product-img .overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.product-card:hover .product-img .overlay { opacity: 1; }

.product-info { padding: 1.5rem; text-align: center; }
.product-info h5 { color: white; font-size: 1.1rem; margin-bottom: 0.5rem; }
.product-info .price { color: var(--accent); font-weight: bold; }

/* =========================================
   HOME: ESTADISTICAS
   ========================================= */
.stat-box {
    background: transparent;
    border: none;
    padding: 1rem;
    position: relative;
    border-right: 1px solid rgba(102, 252, 241, 0.1); 
}

.col-md-4:last-child .stat-box { border-right: none; }

@media (max-width: 768px) {
    .stat-box { border-right: none; border-bottom: 1px solid rgba(102, 252, 241, 0.1); padding-bottom: 1rem; }
    .col-md-4:last-child .stat-box { border-bottom: none; }
}

.neon-text {
    color: #fff;
    text-shadow: 0 0 10px var(--accent);
    font-size: 2.5rem; 
    font-weight: 200; 
    margin-bottom: 0.2rem;
}

/* =========================================
   HOME: PLANIFICAR VISITA Y MAPA
   ========================================= */
.location-card {
    background: rgba(11, 12, 16, 0.95);
    border: 1px solid #333;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.map-main-container {
    height: 100%; min-height: 500px;
    border: 1px solid var(--accent); border-radius: 4px;
    overflow: hidden; position: relative;
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.15);
}

.contact-icon-box {
    width: 50px; height: 50px;
    background: rgba(102, 252, 241, 0.1); border: 1px solid var(--accent);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; margin-right: 1rem;
}