/* Estilos complementarios a Tailwind (cargado vía CDN en cada página) */

:root {
  --brand-red: #dc2626;
  --brand-red-dark: #991b1b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: #0a0a0a;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #dc2626;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Evita scroll horizontal accidental en cualquier viewport */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Estado de foco visible para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}