/*
Theme Name: KLD Soluciones
Theme URI: https://kldsoluciones.com
Description: Tema unificado WordPress para KLD Soluciones — Landing + Blog. Dark mode, Glassmorphism, Zero Bloat.
Version: 2.0.0
Author: KLD Soluciones | José Dugarte
Author URI: https://kldsoluciones.com
Text Domain: kld-soluciones
Tags: custom-background, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready, block-patterns, full-width-template
*/

/* ================================================
   TOKENS & RESET
=============================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --nav-h:    68px;
  --bg:       #0b0b0f;
  --surface:  #111116;
  --surface2: #18181f;
  --border:   rgba(255,255,255,0.07);
  --text:     #f0f0f5;
  --muted:    #888896;
  --accent:   #2563eb;
  --accent2:  #3b82f6;
  --glow:     rgba(37,99,235,0.28);
  --wa:       #25d366;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --font:     'Inter', -apple-system, system-ui, sans-serif;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (hover: none) { body { cursor: auto; } }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; font-family: var(--font); color: inherit; padding: 0; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

/* ================================================
   FOCUS & ACCESSIBILITY
=============================================== */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .site { animation: none; }
}

/* ================================================
   SITE WRAPPER & PAGE TRANSITION
=============================================== */
.site { position: relative; z-index: 1; animation: pageFadeIn 0.8s var(--ease) forwards; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================
   NAV
=============================================== */
nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h);
  z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw;
  background: rgba(11,11,15,.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background .4s var(--ease);
}
nav.scrolled { background: rgba(11,11,15,.9); }

.nav-logo { display:flex; align-items:center; gap:.65rem; flex-shrink: 0; }
.nav-logo-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; padding: 5px;
}
.nav-logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.nav-logo-text { font-size:.95rem; font-weight:700; letter-spacing:-.02em; }

.nav-links { display:flex; list-style:none; gap:2.5rem; align-items:center; }
.nav-links a { font-size:.85rem; font-weight:500; color:var(--muted); position:relative; transition:color .25s; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--accent2); transition:width .35s var(--ease); }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { font-size:.8rem; font-weight:600; padding:.5rem 1.2rem; border:1px solid var(--accent); border-radius:6px; color:var(--accent2) !important; transition:background .3s, color .3s, box-shadow .3s !important; }
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--accent); color:#fff !important; box-shadow:0 0 24px var(--glow); }

.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; }
@media (max-width:768px) { .nav-links{display:none;} .nav-hamburger{display:flex;} body{cursor:auto;} .cursor{display:none;} }

/* ================================================
   MOBILE MENU
=============================================== */
.mobile-menu { display:none; position:fixed; inset:0; z-index:8999; background:rgba(11,11,15,.97); backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:2rem; font-weight:800; letter-spacing:-.02em; color:var(--muted); transition:color .25s; }
.mobile-menu a:hover { color:var(--text); }
.mobile-close { position:absolute; top:1.5rem; right:4vw; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1; transition: color .25s ease; }
.mobile-close:hover { color: var(--text); }

/* ================================================
   BUTTONS
=============================================== */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2rem; border-radius:8px; font-size:.88rem; font-weight:600; letter-spacing:.01em; cursor:pointer; border:none; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s ease; }
.btn.magnetic { transition: box-shadow .35s ease, background .35s ease; }
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.09); transform:translateX(-101%); transition:transform .45s var(--ease); }
.btn:hover::before { transform:translateX(0); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { box-shadow:0 16px 40px var(--glow); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:rgba(255,255,255,.2); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* ================================================
   FOOTER
=============================================== */
footer {
  position:relative; z-index:1; padding:3rem 4vw; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background: var(--bg);
}
.footer-brand { display:flex; align-items:center; gap:.65rem; }
.footer-brand-icon { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.07); padding:4px; display:flex; align-items:center; justify-content:center; }
.footer-brand-icon img { width:100%; height:100%; object-fit:contain; }
.footer-brand span { font-size:.78rem; color:var(--muted); font-weight:500; }
.footer-copy { font-size:.72rem; color:var(--muted); }
.footer-links { display:flex; gap:1.75rem; list-style:none; }
.footer-links a { font-size:.72rem; color:var(--muted); transition:color .25s; }
.footer-links a:hover { color:var(--text); }
@media (max-width: 768px) {
  footer { flex-direction: column; text-align: center; gap: 2rem; }
  .footer-brand { flex-direction: column; }
  .footer-links { justify-content: center; }
}

/* ================================================
   COOKIE BANNER
=============================================== */
.kld-cookie-banner { position:fixed; bottom:-100%; left:0; right:0; background:rgba(11,11,15,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.07); padding:1.5rem 4vw; display:flex; align-items:center; justify-content:space-between; gap:2rem; z-index:9999; font-family:var(--font); transition:bottom 0.6s cubic-bezier(0.16,1,0.3,1); box-shadow:0 -10px 40px rgba(0,0,0,0.5); }
.kld-cookie-banner.show { bottom:0; }
.kld-cookie-text { color:var(--muted); font-size:0.85rem; line-height:1.5; max-width:800px; }
.kld-cookie-text a { color:var(--accent2); text-decoration:underline; }
.kld-cookie-text strong { color:var(--text); }
.kld-cookie-actions { display:flex; gap:1rem; flex-shrink:0; }
.kld-cookie-btn { padding:0.6rem 1.2rem; border-radius:6px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:1px solid transparent; font-family:var(--font); }
.kld-btn-accept { background:var(--accent); color:#fff; }
.kld-btn-accept:hover { background:#1d4ed8; box-shadow:0 0 15px rgba(37,99,235,0.4); }
.kld-btn-reject { background:transparent; color:var(--muted); border-color:rgba(255,255,255,0.2); }
.kld-btn-reject:hover { color:#fff; border-color:#fff; }
@media(max-width:768px) { .kld-cookie-banner { flex-direction:column; align-items:stretch; text-align:center; } .kld-cookie-actions { flex-direction:column; } }

/* ================================================
   WHATSAPP FLOATING BUTTON
=============================================== */
.wa-float {
  position:fixed; bottom:2rem; right:2rem; z-index:9500;
  width:56px; height:56px; border-radius:50%;
  background:var(--surface2); border:1px solid rgba(37,211,102,0.3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.4);
  transition:box-shadow .4s ease, border-color .4s ease, background .4s ease;
  animation:waPulse 3s ease-in-out infinite; cursor:pointer;
}
.wa-float:hover { background:#128c3a; border-color:rgba(37,211,102,.7); box-shadow:0 16px 48px rgba(37,211,102,.35), 0 0 0 8px rgba(37,211,102,.1); animation:none; }
.wa-float svg { width:26px; height:26px; }
@keyframes waPulse { 0%,100% { box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.4); } 50% { box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 0 10px rgba(37,211,102,.0); } }
.wa-float::after { content:'Escríbenos'; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:.72rem; font-weight:600; padding:.35rem .75rem; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s var(--ease); transform:translateY(-50%) translateX(6px); }
.wa-float:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }

/* ================================================
   REVEAL ANIMATIONS
=============================================== */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .9s ease, transform .9s var(--ease); }
.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; }