/* rutinas.css */

.routines-section {
  background-color: #ffffff; /* Fondo blanco, como .aprende-sistema */
  padding: 20px;
  border-radius: 10px; /* Bordes menos redondeados, como .aprende-sistema */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada, como .aprende-sistema */
  text-align: center;
  font-family: Arial, sans-serif; /* Fuente Arial, como .aprende-sistema */
  margin: 20px auto; /* Mantenemos el centrado y margen automático */
  max-width: 800px; /* Mantenemos el ancho máximo */
}

.routines-section h1 {
  font-size: 28px; /* Tamaño de fuente específico, como .aprende-header h1 */
  color: #000000; /* Título negro, como .aprende-header h1 */
  margin-bottom: 15px;
  font-weight: bold; /* Mantenemos el negrita */
}

.routines-section p {
  font-size: 16px; /* Tamaño de fuente específico, como .aprende-header p */
  color: #555; /* Color de párrafo, como .aprende-header p */
  line-height: 1.6; /* Mantenemos la altura de línea */
  margin-bottom: 20px;
}

/* Estilos para la imagen dentro de la sección de rutinas */
.routines-section img {
  max-width: 100%; /* La imagen no excederá el ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados, similar a las miniaturas de video */
  margin-bottom: 20px; /* Espacio debajo de la imagen */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave para la imagen */
}


.routines-link {
  display: inline-block;
  margin-top: 10px; /* Añadimos margen superior para separación, similar a .sandbox-link */
  padding: 10px 15px; /* Padding similar a .sandbox-link */
  background-color: #000; /* Botón negro, como .sandbox-link */
  color: white;
  text-decoration: none;
  border-radius: 5px; /* Bordes menos redondeados, como .sandbox-link */
  transition: background 0.3s ease-in-out; /* Transición de hover similar a .sandbox-link */
}

.routines-link:hover {
  background-color: #444; /* Fondo gris oscuro en hover, como .sandbox-link */
}

.routines-link i {
  margin-right: 8px; /* Mantenemos el margen del icono */
}

/* Media queries para responsividad, adaptadas a los valores de .aprende-sistema */
@media (max-width: 768px) {
  .routines-section {
    margin: 15px;
    padding: 15px;
  }
  .routines-section h1 {
    font-size: 1.5em; /* Ajuste de tamaño de fuente relativo para móviles */
  }
  .routines-link {
    padding: 10px 20px; /* Ajuste de padding para móviles */
    font-size: 0.9em;
    width: 100%; /* El botón ocupa todo el ancho en móvil, similar a .sandbox-link */
  }
}

/* Estilos para la sección de video */
    .video-section {
      text-align: center;
      margin: 20px auto;
      max-width: 800px; /* Asegura que el video no sea demasiado grande en pantallas amplias */
      padding: 10px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    .video-section video {
      width: 100%; /* El video ocupará el 100% del ancho de su contenedor */
      height: auto; /* Mantiene la proporción del video */
      border-radius: 8px; /* Bordes redondeados para el video */
      display: block; /* Elimina espacio extra debajo del video */
    }

    /* Media query para asegurar responsividad */
    @media (max-width: 768px) {
      .video-section {
        margin: 15px;
        padding: 5px;
      }
    }