/* 
  styles.css
  - Paleta profesional y legible
  - Mobile-first y responsivo
  - Comentarios breves por bloque
*/

:root {
  --bs-primary: #0d6efd;
  --brand-primary-600: #0b5ed7;
  --brand-accent: #20c997;
  --text-900: #0f172a;
  --text-700: #334155;
  --muted-500: #64748b;
  --bg-50: #f8fafc;
}

/* Tipografía base */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-900);
  scroll-behavior: smooth; /* Scroll suave */
}

/* Hero con gradiente */
.hero {
  min-height: 75vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(13, 110, 253, .15), transparent 40%),
              radial-gradient(1200px 600px at 90% 90%, rgba(32, 201, 151, .12), transparent 40%),
              linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
  padding-top: 5rem; /* compensar navbar fija */
  padding-bottom: 5rem;
}

/* Tarjetas de servicios con micro-interacción */
.service-card {
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid #e5e7eb;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.08);
}

/* Navbar corregir superposición con contenido */
main {
  scroll-margin-top: 4.5rem;
}
section[id] {
  scroll-margin-top: 4.5rem;
}

/* Accesibilidad: foco visible */
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Footer */
footer {
  margin-top: 0;
}