/* =======================================================================
   COLMENATECH ARCHITECTURE DESIGN SYSTEM
   Variables, Reset, Modular Layouts, Minimalist Cube V8, Cyberpunk Glitch.
   ======================================================================= */

/* 1. CONFIGURACIÓN DE VARIABLES */
:root {
    --bg-color: #0a0a0a;
    --surface-color: #141414;
    --primary-color: #FDB813;
    --text-main: #f0f0f0;
    --text-muted: #888888;
    --matrix-color: rgba(253, 184, 19, 0.4);
}

/* 2. RESET GLOBAL */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; }

/* 3. MENÚ NAVEGACIÓN PERMANENTE */
nav { 
    position: fixed; top: 0; width: 100%; 
    background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(10px); 
    padding: 15px 50px; display: flex; justify-content: space-between; align-items: center; 
    z-index: 2000; border-bottom: 1px solid rgba(253, 184, 19, 0.15); 
}
.logo-img { height: 45px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; }
.nav-links a { color: var(--text-main); text-decoration: none; margin-left: 35px; font-weight: 500; font-size: 0.95rem; transition: color 0.3s; }
.nav-links a:hover { color: var(--primary-color); }

.lang-switch { margin-left: 40px; border-left: 1px solid #333; padding-left: 20px; font-weight: 700; font-size: 0.9rem; }
.lang-switch a { margin-left: 5px !important; color: var(--text-muted); text-decoration: none; }
.lang-switch a.active { color: var(--primary-color); pointer-events: none; }
.lang-switch a:hover { color: #fff; }

/* 4. SECCIONES HERO & CONFIGURACIÓN DEL CUBO GRANDE (MINIMALISTA) */
header { 
    min-height: 100vh; display: flex; align-items: center; justify-content: center; 
    padding: 120px 50px 100px; background: radial-gradient(circle at center, #1a1505 0%, var(--bg-color) 70%); 
    position: relative; overflow: hidden;
}
.hero-content { max-width: 600px; z-index: 10; }
p.slogan { font-size: 1.5rem; color: var(--text-main); margin-bottom: 20px; font-weight: 300; }
.btn { display: inline-block; padding: 15px 35px; background: var(--primary-color); color: #0a0a0a; text-decoration: none; font-weight: 700; border-radius: 4px; transition: all 0.3s ease; border: 1px solid var(--primary-color); }
.btn:hover { background: transparent; color: var(--primary-color); box-shadow: 0 0 20px rgba(253, 184, 19, 0.3); }

/* 🔥 EFECTO CYBERPUNK GLITCH REFINADO (EXCLUSIVO HOVER EN H1) */
h1 { font-size: 3.8rem; margin-bottom: 15px; line-height: 1.1; letter-spacing: -1px; cursor: default; position: relative; display: inline-block; }
h1 span { color: var(--primary-color); }

.glitch-hover:hover {
    animation: glitch-anim 0.25s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: transparent;
}
.glitch-hover::before, .glitch-hover::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; white-space: nowrap;
}
.glitch-hover:hover::before { 
    opacity: 1; left: 2.5px; text-shadow: -2px 0 #ff00c1; color: var(--text-main); 
    clip-path: inset(15% 0 75% 0); animation: glitch-anim-1 0.35s infinite linear alternate-reverse; 
}
.glitch-hover:hover::after { 
    opacity: 1; left: -2.5px; text-shadow: 2px 0 #00fff9; color: var(--primary-color); 
    clip-path: inset(75% 0 15% 0); animation: glitch-anim-2 0.35s infinite linear alternate-reverse; 
}

@keyframes glitch-anim { 0%, 100% { text-shadow: 2px 0 var(--primary-color), -2px 0 #00ffff; } 50% { text-shadow: -2px 0 var(--primary-color), 2px 0 #00ffff; } }
@keyframes glitch-anim-1 { 0% { clip-path: inset(30% 0 60% 0); } 30% { clip-path: inset(70% 0 5% 0); } 70% { clip-path: inset(10% 0 80% 0); } 100% { clip-path: inset(45% 0 45% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(15% 0 70% 0); } 30% { clip-path: inset(80% 0 10% 0); } 70% { clip-path: inset(5% 0 85% 0); } 100% { clip-path: inset(60% 0 25% 0); } }

/* ESTRUCTURACIÓN DEL CUBO GRANDE MINIMALISTA (250px) */
.cube-section { position: relative; margin-left: 80px; width: 450px; height: 450px; display: flex; align-items: center; justify-content: center; z-index: 5; }
.cube-wrapper { perspective: 1200px; z-index: 2; }
.cube { width: 250px; height: 250px; position: relative; transform-style: preserve-3d; animation: spinCube 25s infinite linear; }

.face { 
    position: absolute; width: 250px; height: 250px; 
    background: rgba(10, 10, 10, 0.97); border: 2px solid var(--primary-color); 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: inset 0 0 35px rgba(253, 184, 19, 0.12); overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.face-t { font-size: 130px; font-weight: 900; color: var(--primary-color); z-index: 2; position: relative; font-family: system-ui; }
.matrix-code { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: monospace; font-size: 9px; color: var(--primary-color); line-height: 1; word-break: break-all; opacity: 0.22; z-index: 1; text-align: left; padding: 10px; }

/* Transformaciones de caras para tamaño 250px (Radio exacto: 125px) */
.front  { transform: translateZ(125px); } 
.back   { transform: rotateY(180deg) translateZ(125px); } 
.right  { transform: rotateY(90deg) translateZ(125px); } 
.left   { transform: rotateY(-90deg) translateZ(125px); } 
.top    { transform: rotateX(90deg) translateZ(125px); } 
.bottom { transform: rotateX(-90deg) translateZ(125px); }

@keyframes spinCube { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }

/* 5. SISTEMA AUTOMÁTICO DE PALABRAS SEO VERTICALES (SIN TOCAR EL CUBO) */
.seo-words-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
.seo-word { 
    position: absolute; color: var(--primary-color); font-family: monospace; font-size: 1.25rem; 
    font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; text-transform: uppercase; 
    text-shadow: 0 2px 10px rgba(0,0,0,1); top: 50%; left: 50%; 
}

/* Las palabras saltan de forma segura por fuera de los rangos del cubo gigante (Límite: 125px) */
.float-up { animation: meltUp 9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.float-down { animation: meltDown 9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

@keyframes meltUp {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: blur(3px); }
    8% { opacity: 1; filter: blur(0px); }
    65% { transform: translate(-50%, -265px) scale(1.1); opacity: 1; filter: blur(0px); }
    75% { transform: translate(-50%, -245px) scaleY(1.4) scaleX(0.9); opacity: 0.9; filter: blur(1px); text-shadow: 0 0 8px var(--primary-color); }
    100% { transform: translate(-50%, -145px) scaleY(2.5) scaleX(0.4); opacity: 0; filter: blur(7px); text-shadow: 0 0 15px #25d366; }
}
@keyframes meltDown {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: blur(3px); }
    8% { opacity: 1; filter: blur(0px); }
    65% { transform: translate(-50%, 265px) scale(1.1); opacity: 1; filter: blur(0px); }
    75% { transform: translate(-50%, 285px) scaleY(1.4) scaleX(0.9); opacity: 0.9; filter: blur(1px); text-shadow: 0 0 8px var(--primary-color); }
    100% { transform: translate(-50%, 385px) scaleY(2.5) scaleX(0.4); opacity: 0; filter: blur(7px); text-shadow: 0 0 15px #25d366; }
}

/* 6. MAQUETACIÓN DE SECCIONES GENERALES */
section { padding: 100px 10%; max-width: 1400px; margin: 0 auto; }
.section-title { font-size: 2.5rem; text-align: center; margin-bottom: 60px; color: #fff; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary-color); margin: 15px auto 0; }
.about-text { text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); font-size: 1.15rem; }

/* REJILLA DE SERVICIOS (COMPLETA) */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.service-card { background: var(--surface-color); padding: 40px 30px; border-radius: 8px; border: 1px solid #222; transition: all 0.3s ease; position: relative; overflow: hidden; }
.service-card:hover { border-color: var(--primary-color); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--primary-color); transform: scaleX(0); transform-origin: left; transition: 0.4s; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; transition: text-shadow 0.3s; }
.service-card:hover .service-icon { text-shadow: 0 0 15px rgba(253, 184, 19, 0.5); }
.service-card h3 { color: #fff; margin-bottom: 15px; font-size: 1.4rem; font-weight: 600; }
.service-card p { color: var(--text-muted); font-size: 0.95rem; }

/* SECCIÓN INTELIGENCIA (COMPLETA) */
.blog-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.blog-item { display: flex; align-items: center; gap: 25px; padding: 15px 30px 15px 15px; background: var(--surface-color); border: 1px solid #222; border-left: 3px solid #222; text-decoration: none; transition: all 0.3s ease; border-radius: 8px; }
.blog-item:hover { border-left-color: var(--primary-color); background: #1a1a1a; transform: translateX(5px); }
.blog-thumb { width: 140px; height: 80px; background: #000; border-radius: 4px; position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; border: 1px solid #333; }
.blog-thumb i { color: #fff; font-size: 1.5rem; background: rgba(0,0,0,0.6); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s; border: 2px solid transparent; }
.blog-item:hover .blog-thumb i { background: var(--primary-color); color: #000; border-color: #000; }
.blog-content { flex-grow: 1; }
.blog-item h3 { color: var(--text-main); font-size: 1.15rem; margin-bottom: 5px; font-weight: 600; }
.blog-item span { color: var(--text-muted); font-size: 0.85rem; font-family: monospace; display: block; }
.blog-arrow { color: var(--primary-color); opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateX(-10px); }
.blog-item:hover .blog-arrow { opacity: 1; transform: translateX(0); }

/* CONTENEDOR DE FORMULARIO CORPORATIVO */
.contact-container { display: flex; flex-wrap: wrap; gap: 50px; background: var(--surface-color); padding: 50px; border-radius: 8px; border: 1px solid #222; }
.contact-info { flex: 1; min-width: 300px; }
.contact-info h3 { color: var(--primary-color); margin-bottom: 20px; font-size: 1.8rem; }
.contact-info p { color: var(--text-muted); margin-bottom: 15px; display: flex; align-items: center; gap: 15px; }
.contact-info i { color: var(--primary-color); font-size: 1.2rem; }

.contact-form { flex: 1.5; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 15px; background: var(--bg-color); border: 1px solid #333; color: var(--text-main); border-radius: 4px; font-size: 1rem; transition: all 0.3s; outline: none; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 10px rgba(253, 184, 19, 0.1); }
.submit-btn { background: var(--primary-color); color: #0a0a0a; border: none; padding: 15px; font-weight: 700; font-size: 1.1rem; border-radius: 4px; cursor: pointer; transition: 0.3s; }
.submit-btn:hover { background: #e0a311; }

/* 7. BOTÓN DE WHATSAPP FLOTANTE */
.whatsapp-float { 
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; 
    background-color: #25d366; color: #fff; border-radius: 50px; 
    text-align: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    z-index: 1000; display: flex; align-items: center; justify-content: center; 
    text-decoration: none; transition: transform 0.3s; 
}
.whatsapp-float:hover { transform: scale(1.1); background-color: #1ebe57; }

/* 8. MEDIA QUERIES (RESPONSIVO MÓVIL COMPLETAMENTE ADAPTADO) */
@media (max-width: 900px) {
    header { flex-direction: column; text-align: center; padding-top: 150px; }
    .hero-content { margin-bottom: 50px; }
    h1 { font-size: 2.8rem; }
    .cube-section { margin-left: 0; width: 320px; height: 320px; }
    .cube { width: 190px; height: 190px; }
    .face { width: 190px; height: 190px; }
    .face-t { font-size: 90px; }
    .matrix-code { font-size: 7px; }
    
    /* Reposicionamiento responsivo exacto de caras para móvil */
    .front  { transform: translateZ(95px); } .back   { transform: rotateY(180deg) translateZ(95px); } .right  { transform: rotateY(90deg) translateZ(95px); } .left   { transform: rotateY(-90deg) translateZ(95px); } .top    { transform: rotateX(90deg) translateZ(95px); } .bottom { transform: rotateX(-90deg) translateZ(95px); }
    
    @keyframes meltUp {
        0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
        65% { transform: translate(-50%, -200px) scale(1.1); opacity: 1; }
        100% { transform: translate(-50%, -110px) scaleY(2.5) scaleX(0.4); opacity: 0; }
    }
    @keyframes meltDown {
        0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
        65% { transform: translate(-50%, 200px) scale(1.1); opacity: 1; }
        100% { transform: translate(-50%, 300px) scaleY(2.5) scaleX(0.4); opacity: 0; }
    }

    nav { padding: 15px 20px; flex-direction: column; gap: 15px; }
    .nav-links a { margin-left: 15px; font-size: 0.85rem; }
    .lang-switch { margin-left: 15px; }
    .blog-item { flex-direction: column; text-align: center; }
    .blog-thumb { width: 100%; height: 180px; }
    .blog-arrow { display: none; }
    .contact-container { padding: 30px; gap: 30px; }
}