/* Variables de color */
:root{
  --azul-primario: #002B5B;
  --azul-oscuro: #002040;
  --acento: #00A3FF;
  --naranja: #FF7A00;
  --fondo: #F6F9FC;
  --card: #ffffff00;
  --texto: #1f2937;
  --muted: #6b7280;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--fondo);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Contenedor */
.container{width:90%;max-width:1100px;margin:0 auto;padding:20px}


/* HEADER */
.site-header{background:linear-gradient(90deg,var(--azul-primario),var(--azul-oscuro));color:white;position:sticky;top:0;z-index:50;box-shadow:0 4px 20px rgba(2,6,23,0.2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;background:linear-gradient(135deg,var(--acento),var(--naranja));border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.15)}
.brand-title{font-weight:700;font-size:1.1rem}
.nav{display:block}
.nav ul{display:flex;gap:18px;list-style:none;align-items:left}
.nav a{color:white;text-decoration:none;padding:8px 10px;border-radius:6px;font-weight:600}
.nav a.activo, .nav a:hover{background:rgba(255,255,255,0.08);box-shadow:inset 0 -2px 0 rgba(255,255,255,0.04)}

/* Mobile nav toggle */
.nav-toggle{display:none;background:none;border:none;color:white;font-size:1.4rem}

/* HERO */
.hero{padding:80px 0;background:linear-gradient(180deg,rgba(0,43,91,0.95),rgba(0,76,140,0.85));color:white}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:30px;align-items:center}
.hero-content h1{font-size:2.1rem;line-height:1.06;margin-bottom:12px}
.hero-content p{color:rgba(255,255,255,0.9);margin-bottom:12px}
.hero-media img{width:100%;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.4)}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700;transition:all .25s ease}
.btn.primary{background:var(--naranja);color:white;box-shadow:0 8px 20px rgba(255,122,0,0.18);transform:translateY(0)}
.btn.primary:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(255,122,0,0.2)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.12);color:white}


/* FEATURES */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:-60px}
.card{background:var(--card);padding:24px;border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(2,6,23,0.08);transition:transform .28s ease,box-shadow .28s ease}
.card img{width:64px;margin-bottom:12px}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(2,6,23,0.12)}

/* ABOUT */
.about{padding:60px 0}
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:30px;align-items:center}
.about-media img{width:100%;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.08)}

/* CTA */
.cta{background:linear-gradient(90deg,rgba(0,43,91,0.98),rgba(0,76,140,0.9));color:white;padding:40px;border-radius:12px;text-align:center;margin:40px auto}

/* PAGE SECTIONS */
.page-intro{padding:40px 0;text-align:center}
.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-bottom:40px}
.service-card{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.06);transition:transform .2s ease}
.service-card:hover{transform:translateY(-6px)}

/* Team / Projects */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.team-card, .project-card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.team-card img{width:100%;border-radius:8px;margin-bottom:8px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:20px}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border:1px solid #e6eef7;border-radius:8px}
.contact-info{background:linear-gradient(180deg,#fff, #f7fbff);padding:20px;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.04)}

/* Footer */
.site-footer{background:white;padding:32px 0;border-top:1px solid #e6eef7}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.footer-bottom{text-align:center;color:var(--muted);padding:12px 0;margin-top:12px;}

/* Responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding:30px 0}
  .features{grid-template-columns:1fr; margin-top:20px}
  .about-grid{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav ul{flex-direction:column;background:transparent;padding:10px}
  .nav{display:none}
  .nav.open{display:block;position:absolute;top:68px;left:0;right:0;background:linear-gradient(90deg,var(--azul-primario),var(--azul-oscuro));padding:12px}
  .nav-toggle{display:block}
}

/* Scroll reveal helper classes */
.reveal{opacity:3;transform:none;transition:all .9s cubic-bezier(.2,.9,.3,1)}
[data-reveal]{opacity:3;transform:translateY(18px)}