/* ============================================================
   LOGIDIAS — Brand System / Sistema de Marca Global
   Versión: 1.0 · Junio 2026
   Aplicar en TODOS los módulos de /proyectos/ y /en/proyectos/
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap');

/* --- Variables de Marca --- */
:root {
  /* Tipografía */
  --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Paleta principal */
  --color-primary:   #2a4bd9;
  --color-secondary: #8329c8;
  --color-tertiary:  #00647c;
  --color-surface:   #f5f7f9;
  --color-dark:      #0b0f10;

  /* Superficies */
  --color-surface-high:    #dfe3e6;
  --color-surface-low:     #eef1f3;
  --color-surface-lowest:  #ffffff;

  /* Texto */
  --color-on-surface:         #2c2f31;
  --color-on-surface-variant: #595c5e;

  /* Categorías */
  --color-ciencia:    #4f46e5;  /* indigo */
  --color-sociales:   #d97706;  /* amber  */
  --color-ingenieria: #475569;  /* slate  */
  --color-deportes:   #dc2626;  /* red    */
  --color-juegos:     #c026d3;  /* fuchsia*/
  --color-cuentos:    #f43f5e;  /* rose   */

  /* Bordes / Radios */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.09), 0 10px 10px rgba(0,0,0,.04);

  /* Transiciones */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s  cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset de Tipografía Global --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary) !important;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Headings con tipografía de marca --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  letter-spacing: -0.02em;
}

/* --- Inputs con tipografía de marca --- */
input, button, select, textarea {
  font-family: var(--font-primary);
}

/* --- Reducción de movimiento para accesibilidad --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utilidades de Marca reutilizables --- */

/* Botón primario LOGIDIAS */
.logi-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.logi-btn-primary:hover {
  background-color: #1d3cbd;
  transform: translateY(-1px);
}
.logi-btn-primary:active {
  transform: translateY(0);
}

/* Tarjeta estándar */
.logi-card {
  background: var(--color-surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.logi-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* Badge de categoría */
.logi-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Texto de marca */
.logi-logo-text {
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.logi-logo-outline {
  -webkit-text-stroke: 1.5px var(--color-primary);
  color: transparent;
}

/* ============================================================
   FIN · LOGIDIAS Brand System
   ============================================================ */