/* --- ENCABEZADO Y NAVEGACIÓN --- */
.contenedor-navegacion {
  background-color: var(--blanco);
  padding: 1rem 0; /* Reducido un poco para ahorrar espacio */
}

.contenido-navegacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav.nav-pills li.nav-item a.nav-link {
  text-decoration: none;
  font-size: 16px;
  color: #3d3d49;
}

.nav-pills li:not(:last-child) {
  border-right: 1px solid #ccc;
  padding-right: 10px;
}

/* --- CONTENEDOR DE VÍDEO (RESPONSIVE) --- */
.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Altura fluida: 50% de la pantalla en móvil, 80% en PC */
  height: 50vh; 
  min-height: 300px; /* Para que no se vea demasiado pequeño */
}

.video-fondo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre el área sin deformar */
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* --- TEXTO SOBRE EL VÍDEO --- */
.texto-ratitos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 2; /* Por encima del vídeo */
  width: 90%; /* Para que no toque los bordes en móvil */
}

/* --- MEDIA QUERIES (AJUSTES POR DISPOSITIVO) --- */

/* MÓVIL (Pantallas hasta 768px) */
@media screen and (max-width: 768px) {
  .contenido-navegacion {
    flex-direction: column; 
    gap: 1rem;
  }

  .video-container {
    height: 40vh; /* Un poco más bajo en móviles para que no desplace todo el contenido */
  }

  .texto-ratitos h2 {
    font-size: 2.2rem; /* Tamaño legible en móvil */
    line-height: 1.2;
  }

  .nav-pills li:not(:last-child) {
    border-right: none; /* Quitamos separadores en móvil para que no se vea amontonado */
    padding-right: 0;
  }
}

/* ESCRITORIO (Pantallas grandes) */
@media screen and (min-width: 769px) {
  .video-container {
    height: 80vh; /* Altura elegante para web */
  }

  .texto-ratitos h2 {
    font-size: 6rem; /* Tamaño impacto para web */
  }
}