/* Capa de marca compartida por todas las demos del catálogo.
   Se carga DESPUÉS del CSS propio de cada pieza para que el catálogo enseñe
   la misma base visual que las plantillas que documenta. */
:root {
  --primary: #2A75C0 !important;
  --primary-dark: #2769AB !important;
  --primary-darker: #1E2A38 !important;
  --accent: #F7CE80 !important;
  --text: #333333 !important;
  --text-soft: #4a5866 !important;
  --bg-body: #F4F6F8 !important;
  --bg: #F4F6F8 !important;
  --bg-soft: #EAF3FF !important;
  --white: #FFFFFF !important;
  --radius-control: 8px;
  --radius-card: 16px;
  --shadow-subtle: 0 1px 3px rgb(30 42 56 / 12%);
  --shadow-raised: 0 8px 20px rgb(30 42 56 / 14%);
}

body {
  font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif !important;
  color: var(--text) !important;
  background-color: var(--bg-body) !important;
  line-height: 1.65 !important;
}

h1, h2, h3, h4, h5, h6,
button, [role='button'], label, summary {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif !important;
}

code, pre, kbd, .ruta, .time-display {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

button, input, select, textarea {
  font: inherit;
}

button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [role='button']:focus-visible {
  outline: 3px solid #2769AB !important;
  outline-offset: 3px !important;
}

.demo, .card, .accordion-container, .flip-card-front, .flip-card-back,
.slider-container, .tabs-container, .gallery-container {
  border-radius: var(--radius-card);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}