/* ── Base ── */
        ::selection { background: rgba(100,255,218,.18); color: #64ffda; }
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #04091a; }
        ::-webkit-scrollbar-thumb { background: #1a3462; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #64ffda; }

        /* ── Preloader ── */
        #preloader {
            position: fixed; inset: 0; z-index: 9999;
            background: #04091a;
            display: flex; align-items: center; justify-content: center;
            transition: opacity .7s ease, visibility .7s ease;
        }
        #preloader.out { opacity: 0; visibility: hidden; pointer-events: none; }
        .pl-ring {
            width: 52px; height: 52px;
            border: 2px solid rgba(100,255,218,.1);
            border-top-color: #64ffda;
            border-radius: 50%;
            animation: spin .9s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── Scroll Progress ── */
        #scroll-bar {
            position: fixed; top: 0; left: 0; height: 2px;
            background: linear-gradient(90deg, #64ffda 0%, #C9A06C 100%);
            z-index: 9998; width: 0%;
        }

        /* ── Navbar ── */
        #navbar { transition: background .4s, box-shadow .4s, border-color .4s; }
        #navbar.solid {
            background: rgba(4,9,26,.96) !important;
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(100,255,218,.07);
            box-shadow: 0 4px 30px rgba(0,0,0,.35);
        }
        .nav-link { position: relative; }
        .nav-link::after {
            content: ''; position: absolute; bottom: -3px; left: 0;
            width: 0; height: 1px; background: #64ffda;
            transition: width .3s ease;
        }
        .nav-link:hover::after { width: 100%; }

        /* ── Gradient text ── */
        .g-electric {
            background: linear-gradient(135deg, #64ffda, #a8eddc);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .g-gold {
            background: linear-gradient(135deg, #C9A06C 0%, #E2C28B 50%, #C9A06C 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }

        /* ── Hero fade-in ── */
        .h1 { animation: fadeUp .9s ease .15s both; }
        .h2 { animation: fadeUp .9s ease .4s  both; }
        .h3 { animation: fadeUp .9s ease .65s both; }
        .h4 { animation: fadeUp .9s ease .9s  both; }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(32px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Typing cursor ── */
        .cursor {
            display: inline-block; width: 2px; height: .88em;
            background: #64ffda; margin-left: 2px;
            vertical-align: text-bottom;
            animation: blink 1s step-end infinite;
        }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

        /* ── Ticker ── */
        .ticker-track { animation: ticker 28s linear infinite; }
        @keyframes ticker {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ── Glass card ── */
        .gc {
            background: rgba(10,22,40,.55);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,.06);
            transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s, background .4s;
        }
        .gc:hover {
            transform: translateY(-5px);
            border-color: rgba(100,255,218,.22);
            background: rgba(10,22,40,.8);
            box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 30px rgba(100,255,218,.06);
        }
        .gc-gold:hover {
            border-color: rgba(201,160,108,.35) !important;
            box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 30px rgba(201,160,108,.07) !important;
        }

        /* ── Section big number (decorative) ── */
        .sec-num {
            position: absolute; right: 0; top: -20px;
            font-family: 'Playfair Display', serif; font-weight: 900;
            font-size: clamp(5rem, 12vw, 9rem); line-height: 1;
            color: rgba(100,255,218,.028); user-select: none; pointer-events: none; z-index: 0;
        }

        /* ── Profile frame ── */
        .pf-wrap {
            position: relative; border-radius: 20px; overflow: hidden;
            box-shadow: 0 0 0 1px rgba(100,255,218,.14), 0 0 60px rgba(100,255,218,.07);
        }
        .pf-wrap::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(160deg, rgba(100,255,218,.07) 0%, transparent 55%);
            pointer-events: none; z-index: 1;
        }

        /* ── Reveal ── */
        .rv  { opacity: 0; transform: translateY(28px);  transition: opacity .75s ease, transform .75s ease; }
        .rvL { opacity: 0; transform: translateX(-36px); transition: opacity .75s ease, transform .75s ease; }
        .rvR { opacity: 0; transform: translateX(36px);  transition: opacity .75s ease, transform .75s ease; }
        .rv.on, .rvL.on, .rvR.on { opacity: 1; transform: translate(0); }
        .d1 { transition-delay: .1s; }
        .d2 { transition-delay: .2s; }
        .d3 { transition-delay: .3s; }
        .d4 { transition-delay: .4s; }

        /* ── Service icon ── */
        .svc-icon {
            width: 56px; height: 56px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            background: linear-gradient(135deg, rgba(100,255,218,.1), rgba(100,255,218,.04));
            border: 1px solid rgba(100,255,218,.18);
            color: #64ffda;
            transition: all .4s ease;
        }
        .gc:hover .svc-icon { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 18px rgba(100,255,218,.2); }
        .svc-icon.gold { background: linear-gradient(135deg,rgba(201,160,108,.1),rgba(201,160,108,.04)); border-color: rgba(201,160,108,.18); color: #C9A06C; }
        .gc:hover .svc-icon.gold { box-shadow: 0 0 18px rgba(201,160,108,.2); }

        /* ── Tech tag ── */
        .tt {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 12px; border-radius: 6px;
            font-size: .72rem; font-weight: 500; font-family: 'Courier New', monospace;
            background: rgba(100,255,218,.04); border: 1px solid rgba(100,255,218,.13);
            color: #8892b0; transition: all .25s ease; cursor: default;
        }
        .tt:hover { background: rgba(100,255,218,.1); border-color: rgba(100,255,218,.35); color: #64ffda; transform: translateY(-2px); }
        .tt.gold { background: rgba(201,160,108,.04); border-color: rgba(201,160,108,.15); color: rgba(201,160,108,.75); }
        .tt.gold:hover { background: rgba(201,160,108,.1); border-color: rgba(201,160,108,.4); color: #C9A06C; }

        /* ── Timeline ── */
        .tl-line {
            position: absolute; left: 19px; top: 38px; bottom: -24px;
            width: 1px; background: linear-gradient(to bottom, rgba(100,255,218,.25), transparent);
        }
        .tl-item:last-child .tl-line { display: none; }

        /* ── Buttons ── */
        .btn-p {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            padding: 13px 30px; border-radius: 8px;
            font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
            border: 1px solid rgba(100,255,218,.4); color: #64ffda;
            position: relative; overflow: hidden;
            transition: color .3s, transform .3s, box-shadow .3s;
        }
        .btn-p::before {
            content: ''; position: absolute; inset: 0;
            background: #64ffda; opacity: 0; transition: opacity .3s;
        }
        .btn-p:hover::before { opacity: 1; }
        .btn-p:hover { color: #04091a; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(100,255,218,.28); }
        .btn-p span, .btn-p i { position: relative; z-index: 1; }
        .btn-s {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            padding: 13px 30px; border-radius: 8px;
            font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
            border: 1px solid rgba(255,255,255,.15); color: #a8b2d1;
            transition: border-color .3s, color .3s, transform .3s;
        }
        .btn-s:hover { border-color: rgba(255,255,255,.35); color: #e6f1ff; transform: translateY(-2px); }

		/* ============================================= */
		/*                  BOTÓN DORADO (btn-g)         */
		/* ============================================= */

		.btn-g {
			display: inline-flex; 
			align-items: center; 
			justify-content: center; 
			gap: 9px;
			padding: 13px 30px; 
			border-radius: 8px;
			font-size: .8rem; 
			font-weight: 600; 
			letter-spacing: .06em; 
			text-transform: uppercase;
			border: 1px solid rgba(201,160,108,.45); 
			color: #C9A06C;
			position: relative; 
			overflow: hidden;
			background: transparent;
			transition: all .4s ease;
		}

		.btn-g::before {
			content: ''; 
			position: absolute; 
			inset: 0;
			background: #C9A06C; 
			opacity: 0; 
			transition: opacity .4s ease;
		}

		.btn-g:hover::before { 
			opacity: 1; 
		}

		.btn-g:hover { 
			color: #04091a; 
			transform: translateY(-3px); 
			box-shadow: 0 12px 35px rgba(201,160,108,.35); 
			border-color: rgba(201,160,108,.55);
		}

		.btn-g span, .btn-g i { 
			position: relative; 
			z-index: 1; 
		}

        /* ── Side nav dots ── */
        #side-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; }
        .sd {
            width: 7px; height: 7px; border-radius: 50%;
            background: rgba(255,255,255,.2); cursor: pointer;
            transition: background .3s, box-shadow .3s, transform .3s;
            position: relative; display: block;
        }
        .sd:hover, .sd.on { background: #64ffda; box-shadow: 0 0 10px rgba(100,255,218,.5); transform: scale(1.3); }
        .sd .lbl {
            position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
            font-size: 10px; font-family: 'Courier New', monospace; color: #64ffda;
            white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s;
        }
        .sd:hover .lbl { opacity: 1; }
        @media(max-width:768px) { #side-dots { display: none; } }

        /* ── Back to top ── */
        #btt {
            position: fixed; bottom: 28px; right: 28px; z-index: 100;
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(15,32,64,.9); border: 1px solid rgba(100,255,218,.2);
            color: #64ffda; display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity .4s, background .3s, transform .3s;
            cursor: pointer;
        }
        #btt.on { opacity: 1; pointer-events: auto; }
        #btt:hover { background: #64ffda; color: #04091a; transform: translateY(-3px); }

        /* ── Ambient glow ── */
        .amb {
            position: absolute; border-radius: 50%;
            pointer-events: none; z-index: 0; filter: blur(1px);
        }