/*
Theme Name: Win Manager
Theme URI: https://winmanagerperu.com
Description: Agencia de desarrollo web y software — diseño oscuro y elegante
Author: Win Manager
Version: 6.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: win-manager
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg-deep: #050814;
    --bg-mid: #070C1C;
    --bg-card: #0B1224;
    --bg-card-hover: #0E1630;

    --accent: #00D4FF;
    --accent-hover: #7C3AED;
    --accent-rgb: 0,212,255;
    --accent-dim: rgba(var(--accent-rgb), 0.10);
    --accent-glow: rgba(var(--accent-rgb), 0.20);
    --accent-glow-strong: rgba(var(--accent-rgb), 0.38);

    --text-primary: #F3F6FF;
    --text-secondary: #A8B2CA;
    --text-muted: #5D6780;

    --border: #162043;
    --border-hover: #23315E;

    --white: #FFFFFF;
    --green: #34D399;
    --red: #F87171;

    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --transition: all 0.3s cubic-bezier(.4,0,.2,1);
    --shadow-md: 0 12px 32px rgba(0,0,0,.35);
    --shadow-lg: 0 22px 80px rgba(0,0,0,.60);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    color: var(--text-primary);
    background: var(--bg-deep);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}

/* Premium background glow */
body::before{
    content:"";
    position:fixed;
    inset:-40% -30% auto -30%;
    width:1200px;
    height:1200px;
    background:
      radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), .10), transparent 60%),
      radial-gradient(circle at 70% 40%, rgba(124,58,237,.10), transparent 55%);
    pointer-events:none;
    filter: blur(10px);
    z-index:-1;
}

::selection{ background: rgba(var(--accent-rgb), .22); color: var(--text-primary); }

/* Accessible focus */
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* Nicer scrollbars (WebKit) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* BUTTONS */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--white); font-weight: 700; font-size: 15px;
    font-family: var(--font-heading);
    text-decoration: none; transition: var(--transition);
    border: none; cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--accent-glow-strong), 0 0 60px var(--accent-glow);
}
.btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); color: var(--text-secondary);
    font-weight: 600; font-size: 14px; text-decoration: none;
    transition: var(--transition); font-family: var(--font-body);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* BADGES */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 50px;
    background: var(--accent-dim); border: 1px solid rgba(var(--accent-rgb),0.12);
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: var(--accent);
    font-family: var(--font-heading);
}
.badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pulse 2s ease infinite;
}

/* CARDS */
.wm-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px 28px;
    transition: var(--transition);
}
.wm-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px rgba(var(--accent-rgb),0.04);
}
.wm-card h3 {
    font-family: var(--font-heading); font-size: 17px; font-weight: 700;
    margin-bottom: 10px;
}
.wm-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }

.section-label {
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
    font-family: var(--font-heading);
}
.section-title {
    font-family: var(--font-heading); font-size: clamp(22px,3.5vw,36px);
    font-weight: 800; line-height: 1.2; color: var(--text-primary);
    margin-bottom: 20px;
}
.section-title .highlight { color: var(--accent); }

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-20px) } }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .25s; }
.delay-3 { transition-delay: .4s; }