* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
}

/* 🔹 Título */
.titulo {
    margin: 150px auto;
    max-width: 1300px;
    padding: 0 20px;
}

.titulo h1 {
    font-size: 40px;
    font-weight: bold;
}

.resaltado {
    color: #03d7fc;
}

.titulo p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

/* 🎥 Contenedor Responsivo para Videos */
.media-container {
    width: 90%; /* Ocupa todo el ancho disponible */
    max-width: 1350px; /* Límite para pantallas grandes */
    margin: 50px auto 60px auto; /* 🔹 Márgenes: 50px arriba, 30px abajo */
    display: flex;
    justify-content: center;
    position: relative;
    height: 750px; /* 🔹 Altura fija para evitar excesos */
    overflow: hidden;
    border-radius: 10px;
  }
  
  /* 📺 Estilos para el iframe */
  .media-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  } 
  
  /* 🔹 Responsive Design */
  @media (max-width: 1024px) {
    .media-container {
        height: 500px; /* Reduce la altura del video */
    }
  }
  
  @media (max-width: 768px) {
    .media-container {
        height: 300px; /* Ajuste para pantallas pequeñas */
    }
  
    .content-wrapper {
        justify-content: center;
    }
  
    .container {
        justify-content: center;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
  }