/* Nosotros.css - Estilos específicos para la página "Nosotros" */

/* Contenedor general */
.grid-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 20px;
}

/* Ítems individuales con video + texto */
.grid-item {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-direction: row; /* Por defecto en desktop */
}

/* Alternancia de orden en desktop */
.grid-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Contenedor de video para desktop */
.video-container {
  width: 560px; /* Tamaño fijo en desktop */
  height: 315px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Video más grande */
.video-container.large-video {
  width: 800px;
  height: 450px;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

/* Texto */
.grid-text {
  flex: 1;
}

.grid-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #1f2d3d;
  margin-bottom: 15px;
}

.grid-description {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
}

/* Sección de video final */
.video-section {
  margin-top: 80px;
  text-align: center;
}

.video-section .video-container {
  margin: 30px auto 0;
}

.video-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1f2d3d;
  margin-bottom: 15px;
}

.video-description {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 30px;
}

/* Estilos para la lista de valores */
.grid-description {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
}

.valores-list {
  padding-left: 1.5em;
  margin: 1.5em 0;
}

.valores-list li {
  margin-bottom: 0.8em;
  position: relative;
  padding-left: 1em;
}

/* RESPONSIVE: en móviles los videos ocupan el ancho completo */
@media (max-width: 768px) {
  .grid-item {
    flex-direction: column !important;
    text-align: center;
    gap: 30px;
  }

  .video-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9; /* Mantiene relación de aspecto */
  }

  .video-container iframe {
    width: 100%;
    height: 100%;
  }

  .video-section .video-container {
    width: 100% !important;
    height: auto !important;
  }
}