/* ==========================================================================
   FUNDING FAST — MAIN STYLESHEET
   Orden de carga: tokens -> reset -> tipografía -> temas -> componentes -> secciones
   No reordenar: cada capa depende de las custom properties de la anterior.
   ========================================================================== */

/* 1. Tokens de marca */
@import url('base/variables.css');

/* 2. Reset */
@import url('base/reset.css');

/* 3. Tipografía */
@import url('base/typography.css');

/* 4. Temas (dark por defecto vía :root, light vía atributo) */
@import url('themes/theme-dark.css');
@import url('themes/theme-light.css');

/* 5. Layout compartido */
@import url('components/layout.css');

/* 6. Componentes */
@import url('components/buttons.css');
@import url('components/nav.css');
@import url('components/theme-toggle.css');
@import url('components/cards.css');

/* 7. Secciones */
@import url('sections/hero.css');
@import url('sections/problema.css');
@import url('sections/solucion.css');
@import url('sections/servicios.css');
@import url('sections/equipo.css');
@import url('sections/casos-uso.css');
@import url('sections/filosofia.css');
@import url('sections/contacto.css');
@import url('sections/cta-footer.css');
@import url('sections/mantenimiento.css');
@import url('sections/legal.css');

/* ==========================================================================
   GLOBAL UTILITIES
   ========================================================================== */

body {
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  background: var(--c-accent-tech);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-4); }