/* =========================================
   1. VARIABLES & CONFIGURACIÓN BASE
   ========================================= */
   :root {
    /* Paleta de colores corporativa */
    --brand-dark: #0a295b;       /* Azul oscuro profundo (NavBar, Footer) */
    --brand-primary: #0c3c7f;    /* Azul principal (Botones, Títulos) */
    --brand-accent: #09b2e5;     /* Cian brillante (Detalles, Iconos) */
    --text-body: #4a5568;        /* Gris oscuro para lectura cómoda */
    --bg-light: #f8f9fa;         /* Fondo gris muy suave */
    
    /* Configuración de bordes y sombras */
    --radius-card: 12px;
    --radius-btn: 50px;          /* Botones redondeados (Pill shape) */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-hover: 0 12px 24px rgba(0,0,0,0.12);
  }
  
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-body);
    background-color: #fff;
    -webkit-font-smoothing: antialiased; /* Texto más nítido en Mac/iOS */
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--brand-dark);
    font-weight: 700;
    letter-spacing: -0.02em; /* Toque moderno */
  }
  
  a {
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  /* =========================================
     2. COMPONENTES BOOTSTRAP PERSONALIZADOS
     ========================================= */
  
  /* Botón Primario */
  .btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: var(--radius-btn);
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .btn-primary:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px); /* Pequeña elevación al pasar el mouse */
    box-shadow: 0 4px 12px rgba(12, 60, 127, 0.3);
  }
  
  /* Botón Outline (Borde) */
  .btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: var(--radius-btn);
    font-weight: 600;
  }
  .btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
  }
  
  /* Tarjetas (Cards) - El cambio más visible */
  .card {
    border: none; /* Quitamos el borde gris feo */
    border-radius: var(--radius-card);
    background-color: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Para que la imagen no se salga de las esquinas */
  }
  
  /* Efecto Hover Global para Tarjetas */
  .hover-elevate:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover) !important;
  }
  
  /* Transición suave para imágenes dentro de tarjetas */
  .transition-scale {
    transition: transform 0.5s ease;
  }
  .card:hover .transition-scale {
    transform: scale(1.03); /* Zoom sutil */
  }
  
  /* =========================================
     3. SECCIONES ESPECÍFICAS
     ========================================= */
  
  /* Navbar */
  .navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-brand {
    color: var(--brand-dark) !important;
    font-weight: 800;
  }
  .nav-link {
    font-weight: 500;
    color: var(--text-body) !important;
  }
  .nav-link:hover, .nav-link.active {
    color: var(--brand-primary) !important;
  }
  

/* Banner Estático (Home) */
.banner-static {
  /* Imagen de fondo */
  background: url("../img/mi_mosaico.70859e4bc614.png") center/cover no-repeat;
  
  /* Altura y posición */
  min-height: 440px; /* Un poco más alto para mejor presencia */
  display: flex;
  align-items: center;
  position: relative;
}

/* Capa oscura (Overlay) para mejorar lectura */
.banner-static::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 41, 91, 0.55); /* Azul oscuro transparente */
  z-index: 1;
}

/* Contenedor del texto (para que quede encima de la capa oscura) */
.banner-static .container {
  position: relative;
  z-index: 2;
}

/* --- CORRECCIÓN DE COLOR DEL TÍTULO --- */
/* Forzamos el BLANCO con !important para anular el azul global */
.banner-static h1, 
.banner-static .display-4,
.banner-static .fw-bolder {
  color: #ffffff !important;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra fuerte para contraste */
  margin-bottom: 1rem;
}

/* --- ESTILO DEL SUBTÍTULO (Unlock the power...) --- */
.banner-static .lead {
  color: #f0f0f0 !important; /* Blanco casi puro */
  font-size: 1.8rem;         /* ¡Letra GRANDE! */
  font-weight: 400;
  margin-bottom: 2.5rem;     /* Espacio antes del botón */
  line-height: 1.3;
  letter-spacing: 0.02em;    /* Elegancia */
  max-width: 85%;            /* Evita líneas demasiado largas */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Ajustes para celulares */
@media (max-width: 768px) {
  .banner-static { min-height: auto; padding: 4rem 0; }
  .banner-static h1 { font-size: 2.5rem; }
  .banner-static .lead { font-size: 1.25rem; margin-bottom: 1.5rem; }
}

.banner-static h1 {
  font-size: 3.5rem; /* Letra más grande e impactante */
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
  
  /* Textos destacados */
  .text-primary {
    color: var(--brand-primary) !important;
  }
  .text-accent {
    color: var(--brand-accent) !important;
  }
  
  /* Footer */
  footer {
    background-color: #fff;
    border-top: 1px solid #eaeaea;
  }
  footer h5 {
    color: var(--brand-dark);
    font-size: 1.1rem;
  }
  
  /* Galería del Blog (si la usas) */
  .post-gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .post-gallery__item img {
    width: 100%;
    border-radius: 8px;
    transition: opacity 0.3s;
  }


  /* Imágenes de la sección Soluciones */
.solutions-img {
  width: 100%;            /* Que ocupe el ancho disponible... */
  max-width: 450px;       /* ...pero NUNCA más de 450px (esto evita que sean gigantes) */
  height: auto;           /* Altura automática para no deformarse */
  object-fit: contain;
  display: block;
  margin: 0 auto;         /* Centrada horizontalmente */
  
  /* Decoración para que se vea "Premium" */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
}

/* Ajuste para pantallas grandes (para que no se peguen al texto) */
@media (min-width: 768px) {
  .solutions-img {
    margin: 0; /* En PC, alinear a la izquierda/derecha según corresponda */
  }
}


/* Forzar texto blanco en los encabezados con fondo azul (bg-primary) */
.bg-primary h1, 
.bg-primary p, 
.bg-primary .lead,
.bg-primary .display-5 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave para legibilidad */
}

/* Asegurar que el fondo del header de contacto respete el gradiente de la marca */
.bg-primary {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary)) !important;
}