.hero-sobre-nosotros {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  
    background-image: url('../images/trasports.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
  
  /* Capa de desenfoque y sombreado */
  .hero-sobre-nosotros::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px); /* <-- Desenfoque aquí */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(255,255,255,0.2));
    z-index: 1;
  }
  
  /* Título sobre la imagen */
  .hero-sobre-nosotros h1 {
    z-index: 2;
    color: #fff;
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  }
  
  
  
  /***************************************************
   * Soluciones Recomendadas - SOBRE NOSOTROS
   ***************************************************/
 .solutions-section {
  position: relative;
  padding: 60px 20px;
  color: #000;
  overflow: hidden;
  z-index: 0;

  /* Degradado de fondo horizontal */
  background: linear-gradient(to right, #1014e2, #4e8cc2, #000000);
}

/* Contenedor del contenido (texto e imagen) */
.solutions-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
  z-index: 2;
}

.solutions-text h2 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #0a2e58;
}

.solutions-text p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #222;
}

.solutions-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .solutions-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .solutions-image img {
    max-width: 80%;
  }
}

  /***************************************************
   * Visión, Misión y Valores - SOBRE NOSOTROS
   ***************************************************/
   .vision-mision-section {
    background: linear-gradient(to right, #ffffff, #d6e6f5, #0c5098);
    padding: 60px 20px;
    color: #ffffff;
  }
  
  .vision-mision-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .vision-box,
  .mision-box,
  .valores-box {
    flex: 1;
    min-width: 300px;
    max-width: 32%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateY(40px);
  }
  
  .vision-box h3,
  .mision-box h3,
  .valores-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #0a2e58;
  }
  
  .vision-box p,
  .mision-box p,
  .valores-box p {
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
  }
  
  /* Animación al hacer scroll */
  .fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  @media (max-width: 768px) {
    .vision-mision-content {
      flex-direction: column;
      align-items: center;
    }
    .vision-box,
    .mision-box,
    .valores-box {
      max-width: 90%;
    }
  }
  /* Animación para Soluciones */
@keyframes fadeInUpSoluciones {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .solutions-card {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease-out;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .solutions-card.fade-in-up {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }
  /* ────────────────────────────────────────────── */
/*  PALETA OSCURA / TEAL – VARIABLES GLOBALES   */
/* ────────────────────────────────────────────── */
:root {
  --dark-bg:          #101217;  /* Fondo principal oscuro */
  --card-bg:          #1E1F28;  /* Fondo de tarjetas */
  --text-primary:     #ffffff;  /* Texto principal claro */
  --text-secondary:   #000000;  /* Texto secundario gris claro */
  --accent-teal:      #4FB0C6;  /* Teal suave para acentos */
}

/* ────────────────────────────────────────────── */
/*  HERO “SOBRE NOSOTROS” – SOLO PALETA         */
/* ────────────────────────────────────────────── */
.hero-sobre-nosotros {
  background:
    linear-gradient(rgba(16, 18, 23, 0.5), rgba(16, 18, 23, 0.5)),
    url('../images/q\ me\ container\ 2.jpg') center/cover no-repeat;
}

.hero-sobre-nosotros::before {
  background: linear-gradient(
    to right,
    rgba(16, 18, 23, 0.6),
    rgba(16, 18, 23, 0.4)
  );
}

.hero-sobre-nosotros h1 {
  color: var(--text-primary);
}

/* ────────────────────────────────────────────── */
/*  SOLUTIONS SECTION – SOLO PALETA             */
/* ────────────────────────────────────────────── */
.solutions-section {
  background: linear-gradient(
    to right,
    #000000,
    #ffffff,
    #000000
  );
  color: var(--text-primary);
}

.solutions-text h2 {
  color: var(--accent-teal);
}

.solutions-text p {
  color: var(--text-secondary);
}

/* ────────────────────────────────────────────── */
/*  VISIÓN, MISIÓN Y VALORES – SOLO PALETA      */
/* ────────────────────────────────────────────── */
.vision-mision-section {
  background: linear-gradient(
    to right,
    #000000,
    #ffffff,
    #2A2E38
  );
  color: var(--text-primary);
}

.vision-box,
.mision-box,
.valores-box {
  background: rgba(40, 44, 56, 0.8);
}

.vision-box h3,
.mision-box h3,
.valores-box h3 {
  color: var(--accent-teal);
}