/* Critical CSS for immediate rendering */
:root {
  --color-primary: #6d28d9;
  --color-primary-dark: #4c1d95;
  --color-secondary: #4338ca;
  --color-white: #ffffff;
  --color-black: #0e141b;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    "Helvetica Neue", Arial, sans-serif;
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
  line-height: 1.5;
}

.bg-gradient-indigo {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-black);
}

/* Asegurar que solo el h2 del hero sea blanco */
section.relative.overflow-hidden.bg-gradient-to-br.from-indigo-900.via-purple-800.to-indigo-700 h2.hero-heading-override {
  color: var(--color-white) !important;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 2rem;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 200ms;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Layout utilities */
.flex { display: flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:hidden { display: none; }
}

/* Estilos específicos para las preguntas frecuentes */
.faq-button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

.faq-header {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.faq-question {
  text-align: left !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.faq-answer {
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* Animation for loading state */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Estilos para breadcrumbs */
.breadcrumbs-nav {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;

  padding: 0.5rem 1rem;
}

.breadcrumbs-nav::-webkit-scrollbar {
  display: none;
}

.breadcrumbs-nav ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs-nav li:last-child span {
  color: #374151;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.breadcrumbs-nav a {
  color: #4f46e5;
  transition: color 0.2s;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.breadcrumbs-nav a:hover {
  color: #4338ca;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Estilo para el héroe y la navegación principal para que sean consistentes */