/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1f3d; color: #e0e8f0; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ===== NAVBAR ===== */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10,22,50,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.navbar__logo { font-size: 1.25rem; font-weight: 800; color: #fff; }
.navbar__logo span { color: #42a5f5; }
.navbar__links { display: flex; gap: 24px; }
.navbar__links a { font-size: 0.9rem; color: #90caf9; transition: color .2s; }
.navbar__links a:hover { color: #fff; }

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #0a1628 0%, #1565C0 60%, #0d47a1 100%); padding-top: 60px; overflow: hidden; }
.hero__content { position: relative; z-index: 2; padding: 80px 0; }
.hero__badge { display: inline-block; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 4px 14px; font-size: 0.8rem; color: #90caf9; margin-bottom: 20px; }
.hero__title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 16px; }
.hero__title span { color: #42a5f5; }
.hero__tagline { font-size: 1.2rem; color: #bbdefb; margin-bottom: 12px; font-weight: 500; }
.hero__desc { font-size: 1rem; color: #90caf9; max-width: 540px; margin-bottom: 32px; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(21,101,192,0.3) 0%, transparent 60%); }
.hero__waves { position: absolute; bottom: -1px; left: 0; right: 0; }
.hero__waves svg { width: 100%; height: 80px; }

/* ===== BOTONES ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 8px; font-weight: 700; font-size: 1rem; transition: all .2s; cursor: pointer; border: 2px solid transparent; }
.btn--primary { background: #25D366; color: #fff; }
.btn--primary:hover { background: #1ebe5a; transform: translateY(-2px); }
.btn--outline { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ===== SECTION TITLE ===== */
.section-title { text-align: center; font-size: 1.8rem; font-weight: 800; margin-bottom: 40px; color: #fff; }
.section-title::after { content: ''; display: block; width: 50px; height: 3px; background: #42a5f5; margin: 10px auto 0; border-radius: 2px; }

/* ===== WHY ===== */
.why { padding: 80px 0; background: #0f1f3d; }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.why__item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 28px; }
.why__item-icon { font-size: 1.5rem; color: #42a5f5; margin-bottom: 12px; }
.why__item h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: #fff; }
.why__item p { font-size: 0.9rem; color: #90caf9; }

/* ===== SERVICIOS ===== */
.servicios { padding: 80px 0; background: #0a1628; }
.servicios__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.servicio-card { background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%); border-radius: 12px; padding: 32px; }
.servicio-card__num { font-size: 2.5rem; font-weight: 900; color: rgba(255,255,255,0.15); line-height: 1; margin-bottom: 12px; }
.servicio-card h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.servicio-card p { font-size: 0.9rem; color: #bbdefb; }

/* ===== NOSOTROS ===== */
.nosotros { padding: 80px 0; background: #0a1628; }
.nosotros__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.nosotros__card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 32px; }
.nosotros__card-icon { font-size: 2rem; margin-bottom: 14px; }
.nosotros__card h3 { font-size: 1.1rem; font-weight: 800; color: #42a5f5; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.nosotros__card p { font-size: 0.9rem; color: #90caf9; line-height: 1.7; }
.nosotros__card--valores ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.nosotros__card--valores li { background: rgba(66,165,245,0.15); border: 1px solid rgba(66,165,245,0.3); color: #42a5f5; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }

/* ===== GALERÍA ===== */
.galeria { padding: 80px 0; background: #0f1f3d; }
.galeria__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.galeria__item { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria__item:hover img { transform: scale(1.05); }
.galeria__empty { text-align: center; color: #90caf9; padding: 40px; }

/* ===== CONTACTO ===== */
.contacto { padding: 80px 0; background: linear-gradient(135deg, #0a1628, #1565C0); }
.contacto__zona { text-align: center; color: #90caf9; margin-top: -24px; margin-bottom: 40px; }
.contacto__cards { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.contacto__card { display: flex; align-items: center; gap: 16px; padding: 24px 32px; border-radius: 12px; min-width: 260px; transition: transform .2s; }
.contacto__card:hover { transform: translateY(-3px); }
.contacto__card--wa { background: #25D366; color: #fff; }
.contacto__card--ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.contacto__card-label { display: block; font-size: 0.75rem; opacity: 0.85; }
.contacto__card-value { display: block; font-size: 1.05rem; font-weight: 700; }

/* ===== FOOTER ===== */
.footer { background: #060e1f; padding: 24px 0; text-align: center; }
.footer p { color: #546e7a; font-size: 0.85rem; }

/* ===== BOTÓN FLOTANTE WHATSAPP ===== */
.wa-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,0.5); z-index: 200; transition: transform .2s; }
.wa-float:hover { transform: scale(1.1); }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .navbar__links { display: none; }
  .hero__ctas { flex-direction: column; }
  .contacto__cards { flex-direction: column; align-items: center; }
}