/***************/

.barra-superior {
  background-color: #6e3864; /* Color de fondo */
  min-height: 65px; /* Altura mínima */
  width: 100%; /* Ocupa el 100% de la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* Contenedor interno para limitar el ancho */
.barra-contenido {
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 1300px; /* Máximo de 1200px en pantallas grandes */
  display: flex;
  justify-content: space-between; /* Distribuye el contenido */
  align-items: center;
  padding: 0 20px; /* Espaciado lateral */
}

/* Ajuste de los elementos internos */
.izquierda, .centro, .derecha {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

/* Alineación específica */
.izquierda {
  text-align: left;
}

.derecha {
  text-align: right;
}

/* Destacar el número de teléfono */
.telefono {
  font-size: 20px;
  color: #ffcc00;
  font-weight: bold;
}

/* 📱 SOLO en móviles: Permitir que los textos rompan línea */
@media (max-width: 768px) {
  .barra-superior {
      flex-wrap: wrap;
      text-align: center;
  }

  .barra-contenido {
      flex-direction: column; /* Apila los elementos en móviles */
  }

  .izquierda, .centro, .derecha {
      flex: none;
      width: 100%;
      text-align: center;
      padding: 5px 0;
      white-space: normal;
  }

  .telefono {
      display: block;
      font-size: 22px;
      margin-top: 5px;
  }
}
/* Oculta la imagen en móviles */
@media (max-width: 768px) {
  .imagen-oculta {
      display: none !important;
  }
  .contenido-expandido {
      width: 100% !important;
      flex-grow: 1;
  }
}

/* Restablece la imagen en pantallas grandes */
@media (min-width: 769px) {
  .imagen-oculta {
      display: block !important;
  }
  .contenido-expandido {
      width: auto;
  }
}