/*
Theme Name: Binario Child
Theme URI: https://www.binario.com.co/
Description: Tema hijo para el nuevo diseno de inicio de Binario.
Author: Binario
Template: hello-elementor
Version: 1.0.0
Text Domain: binario-child
*/

:root {
            /* Colores extraídos/adaptados de la identidad Binario */
            --primary: #00d4ff;       /* Cyan tecnológico */
            --secondary: #0a4d8c;     /* Azul corporativo profundo */
            --accent: #00ff88;        /* Verde binario/digital */
            --dark: #050a14;          /* Fondo casi negro */
            --dark2: #0b1628;         /* Paneles secundarios */
            --light: #e8f4fd;         /* Texto claro */
            --glow-primary: 0 0 20px rgba(0, 212, 255, 0.4);
            --glow-accent: 0 0 15px rgba(0, 255, 136, 0.3);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--dark);
            color: var(--light);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* === FONDO ANIMADO === */
        #particles-canvas {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0; pointer-events: none;
        }
        .grid-bg {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            z-index: 0; pointer-events: none;
        }

        /* === LOADER === */
        .loader {
            position: fixed; inset: 0;
            background: var(--dark);
            display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: 20px;
            z-index: 10000;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        .loader.hidden { opacity: 0; visibility: hidden; }
        .loader-logo {
            font-family: 'Orbitron', monospace;
            font-size: 2rem; font-weight: 900;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: pulse-load 1.5s ease-in-out infinite;
        }
        .loader-bar {
            width: 200px; height: 2px;
            background: rgba(0, 212, 255, 0.1); overflow: hidden;
        }
        .loader-bar::after {
            content: ''; position: absolute;
            width: 40%; height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide-load 1.2s ease-in-out infinite;
        }
        @keyframes pulse-load { 0%,100%{opacity:.4} 50%{opacity:1} }
        @keyframes slide-load { 0%{left:-40%} 100%{left:100%} }

        /* === CURSOR CUSTOM === */
        .cursor-ring {
            width: 24px; height: 24px;
            border: 2px solid var(--primary);
            border-radius: 50%; position: fixed;
            pointer-events: none; z-index: 9999;
            transition: transform 0.15s ease, border-color 0.2s;
            mix-blend-mode: difference;
        }
        .cursor-dot {
            width: 4px; height: 4px;
            background: var(--accent); border-radius: 50%;
            position: fixed; pointer-events: none; z-index: 9999;
        }
        @media(max-width:768px){ .cursor-ring,.cursor-dot{display:none} }

        /* === NAVBAR === */
        .navbar {
            position: fixed; top: 0; width: 100%; z-index: 1000;
            padding: 18px 60px;
            display: flex; justify-content: space-between; align-items: center;
            background: rgba(5, 10, 20, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 212, 255, 0.08);
            transition: all 0.3s ease;
        }
        .navbar.scrolled {
            padding: 12px 60px;
            background: rgba(5, 10, 20, 0.95);
            box-shadow: 0 4px 30px rgba(0,0,0,0.4);
        }
        .logo-container { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        /* Placeholder para el logo real de Binario */
        .logo-img {
            height: 40px; width: auto;
            filter: brightness(0) invert(1);
            transition: filter 0.3s;
        }
        .logo-text {
            font-family: 'Orbitron', monospace;
            font-size: 1.4rem; font-weight: 800;
            color: #fff; letter-spacing: 2px;
        }
        .logo-text span { color: var(--primary); }

        .nav-links { display: flex; list-style: none; gap: 35px; align-items: center; }
        .nav-links a {
            color: rgba(232,244,253,0.7); text-decoration: none;
            font-family: 'Orbitron', monospace; font-size: 0.7rem;
            letter-spacing: 2px; text-transform: uppercase;
            position: relative; padding: 5px 0; transition: color 0.3s;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:0; left:0;
            width:0; height:2px;
            background:var(--primary); box-shadow:var(--glow-primary);
            transition:width 0.3s;
        }
        .nav-links a:hover { color:#fff; }
        .nav-links a:hover::after { width:100%; }

        .btn-nav {
            padding: 10px 28px; background: transparent;
            border: 1px solid var(--primary); color: var(--primary) !important;
            clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
            transition: all 0.3s;
        }
        .btn-nav:hover {
            background: var(--primary); color: var(--dark) !important;
            box-shadow: var(--glow-primary);
        }

        .hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; }
        .hamburger span { width:25px; height:2px; background:var(--primary); transition:0.3s; }

        /* === HERO === */
        .hero {
            min-height: 100vh; display:flex; align-items:center; justify-content:center;
            position:relative; z-index:1; padding:120px 60px 80px;
        }
        .hero-content { max-width:900px; text-align:center; }
        .hero-badge {
            display:inline-block; padding:8px 24px;
            border:1px solid rgba(0,212,255,0.25);
            background:rgba(0,212,255,0.04);
            font-family:'Orbitron',monospace; font-size:0.65rem;
            letter-spacing:3px; text-transform:uppercase; color:var(--primary);
            margin-bottom:30px;
            clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
        }
        .hero h1 {
            font-family:'Orbitron',monospace; font-size:3.8rem; font-weight:900;
            line-height:1.1; margin-bottom:25px;
            background:linear-gradient(135deg,#fff 0%,var(--primary) 60%,var(--accent) 100%);
            background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .hero p {
            font-size:1.25rem; color:rgba(232,244,253,0.6);
            margin-bottom:40px; max-width:700px; margin-inline:auto;
        }
        .hero-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
        .btn-primary {
            padding:16px 44px;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            color:#fff; font-family:'Orbitron',monospace; font-size:0.75rem;
            font-weight:700; letter-spacing:2px; text-transform:uppercase;
            text-decoration:none; border:none; cursor:pointer;
            clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
            transition:all 0.4s; position:relative; overflow:hidden;
        }
        .btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,212,255,0.35); }
        .btn-secondary {
            padding:16px 44px; background:transparent;
            color:var(--light); font-family:'Orbitron',monospace; font-size:0.75rem;
            font-weight:700; letter-spacing:2px; text-transform:uppercase;
            text-decoration:none; border:1px solid rgba(232,244,253,0.2);
            clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
            transition:all 0.4s;
        }
        .btn-secondary:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-3px); }

        /* Elementos flotantes hero */
        .hero-orb {
            position:absolute; border-radius:50%;
            border:1px solid rgba(0,212,255,0.06);
            animation:orb-float 25s linear infinite; pointer-events:none;
        }
        .hero-orb:nth-child(1){width:500px;height:500px;top:5%;left:-8%;border-color:rgba(0,212,255,0.05)}
        .hero-orb:nth-child(2){width:350px;height:350px;bottom:8%;right:-5%;border-color:rgba(0,255,136,0.04);animation-delay:-8s}
        .hero-orb:nth-child(3){width:200px;height:200px;top:25%;right:12%;border-color:rgba(10,77,140,0.08);animation-delay:-15s}
        @keyframes orb-float { 0%{transform:rotate(0) translateY(0)} 50%{transform:rotate(180deg) translateY(-25px)} 100%{transform:rotate(360deg) translateY(0)} }

        /* === STATS === */
        .stats-bar {
            position:relative; z-index:1;
            background:rgba(11,22,40,0.7);
            border-top:1px solid rgba(0,212,255,0.08);
            border-bottom:1px solid rgba(0,212,255,0.08);
            padding:50px 60px;
            display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
            backdrop-filter:blur(10px);
        }
        .stat-item { text-align:center; position:relative; }
        .stat-item:not(:last-child)::after {
            content:''; position:absolute; right:0; top:20%; height:60%; width:1px;
            background:linear-gradient(180deg,transparent,rgba(0,212,255,0.15),transparent);
        }
        .stat-number {
            font-family:'Orbitron',monospace; font-size:2.5rem; font-weight:900;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .stat-label {
            font-size:0.8rem; color:rgba(232,244,253,0.45);
            letter-spacing:2px; text-transform:uppercase; margin-top:5px;
        }

        /* === SECCIONES GENERALES === */
        section { position:relative; z-index:1; padding:100px 60px; }
        .section-header { text-align:center; margin-bottom:70px; }
        .section-tag {
            font-family:'Orbitron',monospace; font-size:0.65rem;
            letter-spacing:4px; text-transform:uppercase; color:var(--primary);
            margin-bottom:15px; display:block;
        }
        .section-title {
            font-family:'Orbitron',monospace; font-size:2.4rem; font-weight:800;
            background:linear-gradient(135deg,#fff,var(--primary));
            background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            margin-bottom:15px;
        }
        .section-line {
            width:80px; height:3px; margin:0 auto;
            background:linear-gradient(90deg,var(--primary),var(--accent));
            box-shadow:var(--glow-primary);
        }

        /* === SERVICIOS === */
        .services-grid {
            display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
            max-width:1200px; margin:0 auto;
        }
        .service-card {
            background:rgba(11,22,40,0.5);
            border:1px solid rgba(0,212,255,0.06);
            padding:45px 35px; position:relative; overflow:hidden;
            transition:all 0.5s;
            clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
        }
        .service-card::before {
            content:''; position:absolute; top:0; left:0; width:100%; height:3px;
            background:linear-gradient(90deg,var(--primary),var(--accent));
            transform:scaleX(0); transform-origin:left; transition:transform 0.5s;
        }
        .service-card:hover::before { transform:scaleX(1); }
        .service-card:hover {
            transform:translateY(-8px);
            border-color:rgba(0,212,255,0.15);
            box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 25px rgba(0,212,255,0.08);
        }
        .service-icon {
            font-size:2.2rem; margin-bottom:22px; display:inline-block;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .service-card h3 {
            font-family:'Orbitron',monospace; font-size:1rem; font-weight:700;
            margin-bottom:12px; color:#fff;
        }
        .service-card p { color:rgba(232,244,253,0.55); font-size:0.95rem; line-height:1.8; }
        .card-num {
            position:absolute; top:15px; right:20px;
            font-family:'Orbitron',monospace; font-size:0.6rem;
            color:rgba(0,212,255,0.15); letter-spacing:2px;
        }

        /* === NOSOTROS === */
        .about { background:linear-gradient(180deg,transparent,rgba(11,22,40,0.4),transparent); }
        .about-content {
            display:grid; grid-template-columns:1fr 1fr; gap:60px;
            max-width:1200px; margin:0 auto; align-items:center;
        }
        .about-visual {
            position:relative; height:380px;
            display:flex; align-items:center; justify-content:center;
        }
        .hex-grid { display:grid; grid-template-columns:repeat(3,75px); gap:8px; justify-content:center; }
        .hex {
            width:75px; height:85px;
            background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(0,255,136,0.05));
            clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
            display:flex; align-items:center; justify-content:center;
            font-size:1.4rem; color:var(--primary);
            animation:hex-breathe 3s ease-in-out infinite; transition:all 0.3s;
        }
        .hex:hover { background:linear-gradient(135deg,rgba(0,212,255,0.25),rgba(0,255,136,0.15)); transform:scale(1.1); }
        .hex:nth-child(odd){animation-delay:-1.5s} .hex:nth-child(3n){animation-delay:-0.7s}
        @keyframes hex-breathe { 0%,100%{opacity:.5} 50%{opacity:1} }

        .about-text h3 { font-family:'Orbitron',monospace; font-size:1.7rem; margin-bottom:18px; color:#fff; }
        .about-text p { color:rgba(232,244,253,0.55); line-height:1.9; margin-bottom:18px; font-size:1.05rem; }
        .tech-stack { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
        .tech-tag {
            padding:7px 16px; background:rgba(0,212,255,0.04);
            border:1px solid rgba(0,212,255,0.12);
            font-family:'Orbitron',monospace; font-size:0.55rem;
            letter-spacing:1px; color:var(--primary);
            clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
        }

        /* === PROYECTOS === */
        .projects-grid {
            display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
            max-width:1200px; margin:0 auto;
        }
        .project-card {
            min-height:240px; padding:35px; position:relative; overflow:hidden;
            background:linear-gradient(145deg,rgba(11,22,40,0.78),rgba(5,10,20,0.92));
            border:1px solid rgba(0,212,255,0.08);
            clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
        }
        .project-card::before {
            content:''; position:absolute; inset:0;
            background:radial-gradient(circle at top right,rgba(0,255,136,0.12),transparent 45%);
            pointer-events:none;
        }
        .project-card h3 {
            position:relative; font-family:'Orbitron',monospace; font-size:1rem;
            color:#fff; margin-bottom:14px;
        }
        .project-card p {
            position:relative; color:rgba(232,244,253,0.58);
            font-size:0.98rem; line-height:1.8;
        }
        .project-meta {
            position:relative; display:inline-block; margin-top:22px;
            font-family:'Orbitron',monospace; font-size:0.58rem;
            letter-spacing:2px; color:var(--accent); text-transform:uppercase;
        }

        /* === CONTACTO === */
        .contact { background:linear-gradient(180deg,transparent,rgba(11,22,40,0.6)); }
        .contact-wrapper {
            max-width:1200px; margin:0 auto;
            display:grid; grid-template-columns:1fr 1fr; gap:60px;
        }
        .contact-info h3 { font-family:'Orbitron',monospace; font-size:1.4rem; color:#fff; margin-bottom:18px; }
        .contact-info>p { color:rgba(232,244,253,0.55); line-height:1.8; margin-bottom:30px; }
        .contact-details { list-style:none; }
        .contact-details li {
            display:flex; align-items:center; gap:15px;
            margin-bottom:18px; color:rgba(232,244,253,0.65); font-size:1rem;
        }
        .contact-details li i { color:var(--primary); font-size:1.1rem; width:20px; text-align:center; }
        .social-links { display:flex; gap:12px; margin-top:30px; }
        .social-links a {
            width:44px; height:44px; display:flex; align-items:center; justify-content:center;
            border:1px solid rgba(0,212,255,0.15); color:var(--primary); font-size:1rem;
            transition:all 0.3s;
            clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
        }
        .social-links a:hover { background:var(--primary); color:var(--dark); box-shadow:var(--glow-primary); }

        .contact-form { display:flex; flex-direction:column; gap:20px; }
        .form-group { position:relative; }
        .form-group input,.form-group textarea {
            width:100%; padding:15px 20px;
            background:rgba(11,22,40,0.5); border:1px solid rgba(0,212,255,0.08);
            color:var(--light); font-family:'Rajdhani',sans-serif; font-size:1rem;
            outline:none; transition:all 0.3s;
        }
        .form-group input:focus,.form-group textarea:focus {
            border-color:var(--primary); box-shadow:0 0 15px rgba(0,212,255,0.12);
        }
        .form-group textarea { min-height:130px; resize:vertical; }
        .form-group label {
            position:absolute; top:-8px; left:15px;
            font-family:'Orbitron',monospace; font-size:0.55rem;
            letter-spacing:2px; text-transform:uppercase; color:var(--primary);
            background:var(--dark); padding:0 8px;
        }
        .btn-submit {
            padding:16px 40px; align-self:flex-start;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            color:#fff; font-family:'Orbitron',monospace; font-size:0.8rem;
            font-weight:700; letter-spacing:2px; text-transform:uppercase;
            border:none; cursor:pointer;
            clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
            transition:all 0.4s;
        }
        .btn-submit:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,212,255,0.35); }

        /* === FOOTER === */
        footer {
            position:relative; z-index:1;
            border-top:1px solid rgba(0,212,255,0.08);
            padding:35px 60px; display:flex;
            justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
        }
        .footer-logo {
            font-family:'Orbitron',monospace; font-size:1rem; font-weight:700;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .footer-text { color:rgba(232,244,253,0.35); font-size:0.8rem; }
        .footer-links { display:flex; gap:25px; list-style:none; }
        .footer-links a { color:rgba(232,244,253,0.4); text-decoration:none; font-size:0.8rem; transition:color 0.3s; }
        .footer-links a:hover { color:var(--primary); }

        /* === ANIMACIONES SCROLL === */
        .fade-in { opacity:0; transform:translateY(35px); transition:all 0.8s ease; }
        .fade-in.visible { opacity:1; transform:translateY(0); }

        /* === RESPONSIVE === */
        @media(max-width:1024px){
            .services-grid{grid-template-columns:repeat(2,1fr)}
            .about-content{grid-template-columns:1fr}
            .hero h1{font-size:2.8rem}
        }
        @media(max-width:768px){
            .navbar{padding:15px 25px}
            .hamburger{display:flex}
            .nav-links{
                position:fixed; top:0; right:-100%; width:75%; height:100vh;
                background:rgba(5,10,20,0.98); flex-direction:column;
                justify-content:center; padding:50px; transition:right 0.4s;
                border-left:1px solid rgba(0,212,255,0.08);
            }
            .nav-links.active{right:0}
            .hero{padding:100px 25px}
            .hero h1{font-size:2rem}
            .stats-bar{grid-template-columns:repeat(2,1fr);padding:30px 25px}
            .stat-item:not(:last-child)::after{display:none}
            .services-grid{grid-template-columns:1fr}
            .projects-grid{grid-template-columns:1fr}
            .contact-wrapper{grid-template-columns:1fr}
            section{padding:70px 25px}
            footer{padding:30px 25px;flex-direction:column;text-align:center}
        }

.admin-bar .navbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar { top: 46px; } }