:root {
  /* Paleta más profesional y cálida */
  --color-bg: #041022;
  --color-surface: #071927;
  --color-surface-soft: #0b2632;
  --color-primary: #00a6d6; /* azul profesional */
  --color-primary-2: #006ea6;
  --color-accent: #7dd3fc;
  --color-muted: #9fb0c9;
  --color-text: #eef6fb;
  --color-border: rgba(0, 166, 214, 0.16);
  --color-shadow: rgba(0, 110, 166, 0.18);
  --color-cta: #0086c9;
  --color-wsp: #25d366;
  --color-wsp-dark: #128c7e;
  --radius-lg: 28px;
  --radius-md: 16px;
  --shadow-soft: 0 20px 50px rgba(2,12,23,0.45);
  font-family: 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(0,166,214,0.06), transparent 24%), linear-gradient(180deg,#051426 0%,#000812 100%);
  color: var(--color-text);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

/* Skip link for accessibility */
.skip-link{position:absolute;left:0;top:-40px;background:var(--color-primary);color:white;padding:0.5rem 1rem;border-radius:6px;z-index:9999;transition:top 0.18s ease}
.skip-link:focus{top:8px}

button,input,textarea{font:inherit}

.container{width:min(1180px,calc(100% - 2rem));margin:0 auto}

.site-header{position:sticky;top:0;z-index:50;background:rgba(4,11,24,0.86);border-bottom:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(12px)}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}

.brand{display:inline-flex;align-items:center;gap:0.75rem}
.logo{height:56px;width:auto}
.brand .logo{height:48px}

.nav-links{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:0.95rem}
.nav-links a{color:var(--color-muted);transition:color .18s ease,transform .18s ease;font-weight:600}
.nav-links a:hover{color:var(--color-primary);transform:translateY(-1px)}
.nav-links a.active{color:var(--color-primary-2);position:relative}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-2))}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.95rem 1.75rem;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;font-weight:700;letter-spacing:.02em;text-transform:uppercase;min-height:52px}
.btn-primary{color:var(--color-surface);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-2));box-shadow:var(--shadow-soft)}
.btn-ghost{color:var(--color-primary);background:rgba(255,255,255,0.03);border-color:var(--color-border)}
.btn-cta{color:white;background:linear-gradient(135deg,var(--color-primary-2),var(--color-cta));box-shadow:0 22px 56px rgba(0,0,0,0.44),0 6px 14px rgba(0,134,201,0.12)}
.btn-secondary{color:var(--color-text);background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}
.btn-wsp{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:54px;padding:.95rem 1.4rem;border-radius:999px;border:none;background:linear-gradient(135deg,var(--color-wsp),var(--color-wsp-dark));color:white;font-weight:700}

.hero-section{padding:5rem 0 4rem;position:relative;background:radial-gradient(circle at top left,rgba(0,166,214,0.12),transparent 28%),linear-gradient(180deg,#051426 0%,#000812 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.3fr);gap:3rem;align-items:center}
.hero-copy{max-width:620px}
.eyebrow,.panel-eyebrow,.card-tag{margin:0 0 1rem;display:inline-block;text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;font-weight:700;color:var(--color-primary)}

.hero-copy h1,.section-header h2,.contact-copy h2,.hero-card h2,.benefit-copy h2{margin:0;font-size:clamp(2.2rem,3vw,3.6rem);line-height:1.02;letter-spacing:-.02em;color:var(--color-text)}
.hero-text,.section-copy,.feature-card p,.project-card p,.contact-card p,.hero-card p,.panel-content p{margin:1.2rem 0 0;color:var(--color-muted);font-size:1rem;line-height:1.8}

.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.stat-card{padding:1.2rem 1.35rem;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04)}
.stat-card strong{display:block;font-size:1.7rem;color:white}
.stat-card span{display:block;margin-top:.35rem;color:var(--color-muted)}

.hero-panel{display:grid;gap:1.75rem}
.hero-image-mask{border-radius:22px;overflow:hidden;box-shadow:0 34px 100px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.06);width:100%;max-width:780px;aspect-ratio:16/9;display:block;}
.hero-image-mask img{width:100%;height:100%;display:block;object-fit:cover;transform-origin:center;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.hero-image-mask img:hover{transform:scale(1.02) translateY(-4px)}
.hero-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(0,0,0,0.78);z-index:120;}
.hero-overlay.active{display:flex}
.hero-overlay-backdrop{position:absolute;inset:0;cursor:zoom-out}
.hero-overlay-content{position:relative;max-width:90vw;max-height:90vh;overflow:hidden;border-radius:24px;box-shadow:0 36px 90px rgba(0,0,0,0.65);}
.hero-overlay-content img{display:block;width:100%;height:100%;object-fit:contain;}
.hero-overlay-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.45);color:white;border:1px solid rgba(255,255,255,0.18);display:grid;place-items:center;font-size:1.5rem;cursor:pointer;z-index:1}
.hero-overlay-close:hover{background:rgba(0,0,0,0.65)}

.hero-card{padding:1.75rem;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border:1px solid var(--color-border);backdrop-filter:blur(10px);box-shadow:0 18px 46px rgba(2,12,23,0.55)}
.hero-card h2{font-size:1.6rem;margin-bottom:.9rem}

.section{padding:5rem 0}
.section-alt{background:rgba(255,255,255,0.01)}
.section-dark{background:#05111a}
.section-header,.contact-copy{max-width:40rem}
.section-header h2{margin-top:.4rem}

.service-grid,.project-grid,.contact-grid,.benefits-grid{display:grid;gap:1.75rem}
.service-grid{margin-top:2.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service-card{padding:1.6rem;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04);box-shadow:0 16px 48px rgba(0,0,0,0.36);transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease,border-color .28s ease}
.service-card:hover{transform:translateY(-8px) scale(1.01);border-color:var(--color-border);box-shadow:0 34px 120px rgba(0,0,0,0.5)}
.service-icon{width:60px;height:60px;display:grid;place-items:center;margin-bottom:1.35rem;border-radius:18px;background:rgba(0,166,214,0.12);color:var(--color-primary);font-size:1.5rem}
.service-card h3,.project-card h3,.contact-card h3,.panel-content h3{margin:0;margin-bottom:.9rem;font-size:1.3rem;color:white}

.benefits-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
.benefit-list{margin:1.8rem 0 0;padding-left:1.2rem;list-style:disc;color:var(--color-muted)}
.benefit-list li{margin-bottom:.95rem}
.benefit-panel{position:relative;background:linear-gradient(180deg,rgba(0,166,214,0.08),rgba(3,12,23,0.9));border-radius:22px;border:1px solid rgba(255,255,255,0.04);padding:1.6rem;overflow:hidden}
.panel-glow{position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(0,110,166,0.14),transparent 30%);pointer-events:none}
.panel-content{position:relative;z-index:1}
.panel-content h3{margin-top:0}
.panel-list{display:grid;gap:1rem;margin-top:1.8rem}
.panel-list div{padding:1rem 1.15rem;border-radius:14px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.panel-list strong{display:block;color:white;margin-bottom:.45rem}

.section-center{text-align:center}
.project-grid{margin-top:2.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.project-card{padding:1.6rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 18px 56px rgba(0,0,0,0.36);transition:transform .28s ease,box-shadow .28s ease}
.project-card:hover{transform:translateY(-8px);box-shadow:0 36px 120px rgba(0,0,0,0.5)}
.project-tag{display:inline-flex;align-items:center;padding:.55rem 1rem;border-radius:999px;background:rgba(0,166,214,0.12);color:var(--color-primary);font-weight:700;margin-bottom:1rem}

.contact-section{padding-bottom:6rem}
.contact-grid{grid-template-columns:1fr .9fr;align-items:flex-start}
.contact-copy{max-width:42rem}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.contact-card{padding:1.6rem;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 18px 50px rgba(0,0,0,0.42)}
.contact-card ul{list-style:none;padding:0;margin:1.5rem 0 0;color:var(--color-muted)}
.contact-card li{position:relative;padding-left:1.4rem;margin-bottom:1rem}
.contact-card li::before{content:'•';position:absolute;left:0;top:0;color:var(--color-primary)}
.contact-card p{margin:0}

.site-footer{padding:2.2rem 0;border-top:1px solid rgba(255,255,255,0.04)}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem}
.footer-links a{color:var(--color-muted)}

/* Smooth section anchor offsets for sticky header */
section[id]{scroll-margin-top:86px}

/* Small entrance animations */
.fade-in{animation:fadeIn 700ms both cubic-bezier(.2,.9,.2,1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Responsive tweaks */
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.benefits-grid{grid-template-columns:1fr}}
@media (max-width:720px){.header-inner,.footer-inner{flex-direction:column;align-items:stretch;text-align:center}.nav-links{justify-content:center}.hero-copy h1,.section-header h2,.contact-copy h2{font-size:2.2rem}.logo{height:52px}}

.project-card img{display:block;max-width:100%;height:auto;border-radius:12px;margin-bottom:.9rem}