/* ===== ESTILOS ESPECÍFICOS PARA LA PÁGINA NOSOTROS ===== */

#nosotros-page {
  background-image: url(../media/bg/NOSOTROS.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Opcional: para que la imagen se quede fija al hacer scroll */
}

#nosotros-page .about-section {
  /* Eliminar background del about-section para que se vea la imagen de fondo del body */
  background: transparent !important;
  position: relative; /* Asegura que el after funcione correctamente */
}

#nosotros-page .about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Overlay oscuro para legibilidad del texto */
  z-index: 1;
}

#nosotros-page .about-content {
  position: relative;
  z-index: 2; /* Asegura que el contenido esté por encima del overlay */
  color: var(--text-light); /* Asegura que el texto sea claro */
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para el texto */
  backdrop-filter: blur(5px); /* Efecto de desenfoque sutil */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#nosotros-page .about-content .section-title {
  color: var(--text-light);
}

#nosotros-page .about-content .about-description {
  color: rgba(255, 255, 255, 0.9);
}

#nosotros-page .about-features .feature-item i {
  color: var(--accent-color);
}

/* Ajustes responsive */
@media (max-width: 768px) {
  #nosotros-page .about-content {
    padding: var(--spacing-lg);
    margin: var(--spacing-md);
  }
}

/* Estilos para la sección de ubicaciones en la página Nosotros */
#nosotros-page .locations-section {
  background: transparent !important; /* Quitar fondo de la sección de ubicaciones */
  position: relative;
  z-index: 1;
  color: var(--text-light); /* Asegurar que los títulos sean legibles */
}

#nosotros-page .locations-section .section-title,
#nosotros-page .locations-section .section-subtitle {
  color: var(--text-light) !important; /* Asegurar que los títulos sean legibles y blancos */
}

#nosotros-page .location-card {
  background: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para las tarjetas de ubicación */
  backdrop-filter: blur(5px); /* Efecto de desenfoque sutil */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-light); /* Asegurar que los títulos sean legibles */
}

#nosotros-page .location-card h3 {
  color: var(--text-light) !important; /* Texto blanco para el título de la tarjeta de ubicación */
}

#nosotros-page .location-card p {
  color: rgba(255, 255, 255, 0.9) !important; /* Texto blanco para la descripción de la tarjeta de ubicación */
}