:root {
  --color-primary:      #7B52D4; /* Violeta logo */
  --color-primary-dark: #5b3aab;
  --color-secondary:    #F05A00; /* Naranja logo */
  --color-gold:         #F7A200; /* Dorado/amarillo logo */
  --color-accent:       #E8508A; /* Rosa/fucsia logo */
  --color-growth:       #198754; /* Verde */
  --color-media:        #E8508A; /* Rosa logo */
  --color-automation:   #7B52D4; /* Violeta logo */
  --color-text:         #333333;
  --color-bg:           #ffffff;
  --color-bg-light:     #f8f9fa;
  --font-family: 'Century Gothic', Arial, sans-serif;

  /* Gradientes del logo */
  --grad-logo-warm: linear-gradient(160deg, #F7A200, #F05A00);
  --grad-logo-cool: linear-gradient(160deg, #E8508A, #7B52D4);
  --grad-logo-full: linear-gradient(135deg, #F7A200 0%, #F05A00 25%, #E8508A 65%, #7B52D4 100%);
}

@font-face {
  font-family: 'Century Gothic';
  src: local('Century Gothic');
  /* Si no está instalada localmente, fallback a sans-serif limpios */
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Tipografía y encabezados limpios y sobrios */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: bold;
  color: #1a1a1a;
}

/* Navbar */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(123, 82, 212, 0.08);
  padding: 0.85rem 0;
}
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--color-primary) !important;
}
/* Nombre "Digitalia" con gradiente cool (rosa → violeta) del logo */
.navbar-brand .brand-name {
  background: var(--grad-logo-cool);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Tagline debajo del nombre */
.navbar-brand .brand-tagline {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
.nav-link {
  color: #555555 !important;
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-primary) !important;
}

/* Botones */
.btn-primary-custom {
  background: var(--grad-logo-warm);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.btn-primary-custom:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: #fff;
}
.btn-outline-custom {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}
.btn-outline-custom:hover {
  background: var(--grad-logo-cool);
  border-color: transparent;
  color: #fff;
}

/* Badges y Colores de Divisiones */
.text-software   { color: var(--color-primary)   !important; }
.text-ia         { color: var(--color-secondary) !important; }
.text-growth     { color: var(--color-growth)    !important; }
.text-media      { color: var(--color-accent)    !important; }
.text-automation { color: var(--color-primary)   !important; }

.bg-software   { background: var(--grad-logo-cool) !important; color: white; }
.bg-ia         { background: var(--grad-logo-warm) !important; color: white; }
.bg-growth     { background-color: var(--color-growth) !important; color: white; }
.bg-media      { background: var(--grad-logo-cool) !important; color: white; }
.bg-automation { background: var(--grad-logo-full) !important; color: white; }

/* Division Cards */
.division-card {
  border: 1px solid #eaeaea;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: white;
  height: 100%;
}
.division-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(123, 82, 212, 0.13);
}
.division-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Secciones genéricas */
.section-padding {
  padding: 80px 0;
}
.bg-light-custom {
  background-color: var(--color-bg-light);
}

/* Footer */
.footer {
  background-color: #f8f9fa;
  color: #6c757d;
  padding: 3rem 0;
  border-top: 1px solid #eaeaea;
}
.footer a {
  color: #6c757d;
  text-decoration: none;
}
.footer a:hover {
  color: var(--color-primary);
}