styles.css

/* ============================================
   STYLES.CSS - CSS Común a todas las páginas
   DerejSoft - Desarrollo de Software
   ============================================ */

/* ============================================
   0. RESET & ACCESSIBILITY
   ============================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:hidden}

/* ============================================
   1. DESIGN TOKENS
   ============================================ */
:root{
  --bg-base:#050a18;--bg-surface:#0b1228;--bg-elevated:#111d3a;
  --bg-glass:rgba(11,18,40,0.65);--bg-glass-hover:rgba(11,18,40,0.85);
  --accent-cyan:#00e5ff;--accent-blue:#3d7aed;--accent-violet:#7c3aed;
  --accent-emerald:#10b981;--accent-pink:#ec4899;--accent-amber:#f59e0b;
  --gradient-hero:linear-gradient(135deg,#00e5ff 0%,#3d7aed 40%,#7c3aed 100%);
  --gradient-text:linear-gradient(90deg,#00e5ff,#3d7aed,#7c3aed);
  --gradient-card:linear-gradient(180deg,#111d3a 0%,#050a18 100%);
  --gradient-glow:radial-gradient(circle,rgba(0,229,255,0.12) 0%,transparent 70%);
  --text-primary:#f0f4ff;--text-secondary:#a6b4d4;--text-muted:#8f9db9;
  --border-subtle:rgba(0,229,255,0.08);--border-default:rgba(0,229,255,0.12);--border-hover:rgba(0,229,255,0.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.5);--shadow-glow:0 0 30px rgba(0,229,255,0.15);
  --shadow-glow-strong:0 0 60px rgba(0,229,255,0.25);
  --font-heading:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Cascadia Code',Consolas,monospace;
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;
  --header-h:72px;--container:1200px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--ease-spring:cubic-bezier(0.22,1,0.36,1);
}

/* ============================================
   2. BASE STYLES
   ============================================ */
body{font-family:var(--font-body);color:var(--text-primary);line-height:1.7;background:var(--bg-base);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color .25s var(--ease-out)}
ul{list-style:none}
img{max-width:100%;display:block}
.icon{fill:currentColor;display:inline-block;vertical-align:-.125em;width:1em;height:1em}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cv-auto{content-visibility:auto;contain-intrinsic-size:1px 900px}

/* ============================================
   3. BACKGROUND LAYERS
   ============================================ */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
#grid-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(0,229,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 100%)}
#ambient-glow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 20% 50%,rgba(0,229,255,0.06),transparent),radial-gradient(ellipse 50% 40% at 80% 30%,rgba(124,58,237,0.06),transparent),radial-gradient(ellipse 40% 30% at 50% 80%,rgba(16,185,129,0.04),transparent)}

/* ============================================
   4. HEADER
   ============================================ */
.site-header{position:fixed;top:0;left:0;width:100%;height:var(--header-h);z-index:10000;background:rgba(5,10,24,0.7);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--border-subtle);transition:all .4s var(--ease-out)}
.site-header.scrolled{background:rgba(5,10,24,0.95);box-shadow:0 4px 30px rgba(0,0,0,0.4);border-bottom-color:rgba(61,122,237,0.2)}
.site-header nav{display:flex;justify-content:space-between;align-items:center;height:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:700;font-size:1.4rem;line-height:1}
.logo-img{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(0,229,255,0.4));transition:transform .3s var(--ease-bounce)}
.logo:hover .logo-img{transform:rotate(8deg) scale(1.1)}
.logo-text span{color:var(--accent-cyan)}
.nav-links{display:flex;gap:36px;align-items:center;height:100%}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--text-secondary);position:relative;padding:6px 0;transition:color .25s}
.nav-links a .link-text{position:relative;display:inline-block}
.nav-links a .link-text::after{content:'';display:block;height:2px;width:100%;background:var(--accent-cyan);transform-origin:left;transform:scaleX(0);transition:transform .28s var(--ease-out);margin-top:5px;box-shadow:0 0 8px rgba(0,229,255,0.5)}
.nav-links a:hover,.nav-links a.active{color:var(--text-primary)}
.nav-links a:hover .link-text::after,.nav-links a.active .link-text::after{transform:scaleX(1)}
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0 8px;z-index:100001;height:var(--header-h);min-width:48px}
.menu-toggle span{width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:.3s;display:block}
body.menu-open{overflow:hidden}

/* ============================================
   5. FOOTER
   ============================================ */
footer{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:64px 0 24px;margin-top:64px;font-size:.92rem}
.footer-social-title{color:var(--text-muted);font-size:.82rem;text-transform:uppercase;letter-spacing:2px;display:block;text-align:center;margin-bottom:20px}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--border-subtle);gap:24px}
.footer-logo-container{display:flex;align-items:center;gap:10px}
.footer-logo-img{width:36px;height:36px}
.footer-logo-text{font-family:var(--font-heading);font-size:1.4rem;font-weight:700}
.footer-logo-text span{color:var(--accent-cyan)}
.footer-links{display:flex;gap:28px}
.footer-link{color:var(--text-secondary);position:relative;padding:4px 0;font-size:.88rem;font-weight:500;transition:color .25s}
.footer-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent-cyan);transition:width .3s var(--ease-out);box-shadow:0 0 6px var(--accent-cyan)}
.footer-link:hover{color:#fff}
.footer-link:hover::after{width:100%}
.footer-social ul{display:flex;gap:12px}
.social-icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:.3s;border:1px solid var(--border-subtle)}
.social-icon.instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff;border-color:transparent;transform:translateY(-4px);box-shadow:0 4px 12px rgba(214,36,159,0.35)}
.social-icon.facebook:hover{background:#1877f2;color:#fff;border-color:#1877f2;transform:translateY(-4px);box-shadow:0 4px 12px rgba(24,119,242,0.35)}
.social-icon.tiktok:hover{background:#000;border-color:#00f2ea;color:#fff;transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,242,234,0.25)}
.social-icon.tiktok:hover i{background:linear-gradient(45deg,#00f2ea,#ff0050);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.footer-bottom{display:flex;justify-content:space-between;color:var(--text-secondary);padding:16px 0 0;font-size:.82rem}

/* ============================================
   6. WHATSAPP FLOAT
   ============================================ */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:999}
.whatsapp-float a{display:flex;width:56px;height:56px;background:#25d366;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.35);transition:.3s var(--ease-bounce)}
.whatsapp-float a:hover{transform:scale(1.12) rotate(8deg);box-shadow:0 8px 24px rgba(37,211,102,0.5)}
.whatsapp-float .icon{width:28px;height:28px;color:#fff}

/* ============================================
   7. SCROLL REVEAL
   ============================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}.reveal-delay-6{transition-delay:.6s}

/* ============================================
   8. ANIMATIONS
   ============================================ */
@keyframes blink{50%{opacity:0}}
.fade-in-up{opacity:0;transform:translateY(28px);animation:fadeInUp .7s var(--ease-out) forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

/* ============================================
   9. RESPONSIVE (base)
   ============================================ */
@media(max-width:768px){
  .nav-links{display:none}
  .menu-toggle{display:flex;align-items:center;height:var(--header-h)}
  .nav-links.active{display:flex;position:absolute;top:var(--header-h);left:0;width:100%;background:rgba(5,10,24,0.98);backdrop-filter:blur(12px);flex-direction:column;justify-content:flex-start;gap:0;z-index:99998}
  .nav-links.active li{width:100%}
  .nav-links.active a{display:block;width:calc(100% - 32px);margin:0 16px;padding:13px 16px;font-size:1rem;color:var(--text-primary);text-align:left;background:rgba(11,18,40,0.9);border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
  .nav-links.active a.active{color:var(--accent-cyan)}
   #bg-canvas,#grid-overlay,#ambient-glow{display:none}
   .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
   .service-card,#contact-form{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-sm)}
  .footer-top{flex-direction:column;text-align:center}
  .footer-links,.footer-social ul{justify-content:center}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* ============================================
   FLAG TEXT (Dominican Republic)
   ============================================ */
.flag-text {
  background: linear-gradient(
    to bottom,
    #002D62 0%,
    #002D62 33.33%,
    #FFFFFF 33.33%,
    #FFFFFF 66.66%,
    #CE1126 66.66%,
    #CE1126 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}