/* ─── Ajustes generales ───────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
}

/* Compensar el header fijo al saltar a un ancla (#empresa, #contacto, etc.) */
section[id] {
  scroll-margin-top: 64px;
}

/* ─── Header: sombra cuando se hace scroll (equivalente a "scrolled" en React) ─── */
#site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ─── Rotar el ícono chevron-down al expandir una tarjeta del catálogo ─── */
.catalog-toggle.is-open svg {
  transform: rotate(180deg);
}

/* Resaltar la tarjeta del catálogo mientras está expandida */
.catalog-card.is-open {
  border-color: rgba(37, 55, 114, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* line-clamp de respaldo por si el navegador no soporta la utilidad de Tailwind */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Alertas del formulario de contacto ─── */
#form-alert.alert-success {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

#form-alert.alert-error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ─── Botón de envío deshabilitado mientras se procesa ─── */
#form-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}