body { margin:0; font-family: Arial, sans-serif; background:#0d0f16; color:#f9fafb; }
.top-nav { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:12px 5vw; background:rgba(15,23,42,0.96); color:#e5e7eb; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:40px; height:40px; border-radius:14px; background:linear-gradient(135deg,#38bdf8,#1d4ed8); display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.8rem; }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font-size:0.9rem; font-weight:600; }
.brand-tagline { font-size:0.75rem; color:#9ca3af; }
.nav-links { display:flex; gap:16px; font-size:0.85rem; }
.nav-links a { color:#9ca3af; text-decoration:none; }
.nav-cta { border-radius:999px; padding:6px 14px; border:1px solid #4b5563; text-decoration:none; color:#e5e7eb; font-size:0.8rem; }
.hero { padding:24px 5vw; }
.hero-slideshow { position:relative; min-height:320px; border-radius:24px; overflow:hidden; background:#0f172a; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; background-size:cover; background-position:center; }
.hero-slide.active { opacity:1; }
.hero-overlay { position:relative; z-index:2; padding:32px; max-width:620px; }
.hero-overlay h1 { font-size:1.9rem; margin:0 0 10px; }
.hero-overlay p { font-size:0.95rem; color:#9ca3af; }
.hero-highlights { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.hero-highlights span { font-size:0.75rem; padding:5px 10px; border-radius:999px; border:1px solid #4b5563; color:#9ca3af; }
.hero-actions { display:flex; gap:10px; margin-top:16px; }
.btn { border-radius:999px; padding:8px 16px; font-size:0.8rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; }
.btn.primary { background:linear-gradient(135deg,#38bdf8,#2563eb); color:#fff; }
.btn.ghost { background:transparent; color:#e5e7eb; border-color:#4b5563; }
.btn.whatsapp { background:#22c55e; color:#fff; }
.section { padding:26px 5vw; }
.section h2 { margin-top:0; margin-bottom:8px; font-size:1.3rem; }
.section-intro, .section p { font-size:0.95rem; color:#9ca3af; }
.two-column { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.5fr); gap:22px; }
.section-side-card { background:#0d0f16; border-radius:18px; padding:16px; border:1px solid #374151; }
.section-side-card h3 { margin-top:0; margin-bottom:8px; font-size:1rem; }
.section-side-card ul { margin:0; padding-left:18px; font-size:0.9rem; color:#9ca3af; }
.section.highlight { background:radial-gradient(circle at top,rgba(37,99,235,0.18),transparent); }
.pill-row { display:flex; gap:10px; margin-top:12px; }
.pill-row span { border-radius:999px; border:1px solid #4b5563; padding:5px 12px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:#9ca3af; }
.services-grid { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.service-card { background:#0d0f16; border-radius:18px; padding:14px; border:1px solid #1d4ed8; }
.service-card h3 { margin:0 0 6px; font-size:0.95rem; }
.service-card p { margin:0; font-size:0.85rem; color:#9ca3af; }
.contact-card { max-width:700px; background:linear-gradient(135deg,#1d4ed8,#0d0f16); border-radius:22px; padding:20px; border:1px solid #4b5563; }
.contact-details { font-size:0.9rem; color:#e5e7eb; margin:10px 0; }
.contact-details a { color:#bae6fd; text-decoration:none; }
.contact-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.site-footer { padding:14px 5vw 20px; text-align:center; font-size:0.75rem; color:#6b7280; border-top:1px solid #1f2937; margin-top:10px; }
@media (max-width:900px){ .two-column{grid-template-columns:minmax(0,1fr);} .nav-links{display:none;} }

.hero-side-photos {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.hero-side-photos img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}

.hero-side-photos img {
  transition: opacity 0.6s;
  opacity: 0.3;
}

.hero-side-photos img {
  opacity: 0.3;
  transition: opacity 1.2s, transform 1.2s;
}
.hero-side-photos img.active-photo {
  opacity: 1;
  transform: scale(1.08);
}