/* ESTILO DEL CUERPO */
body {
    background: linear-gradient(
      to right,
      #bbf2f2 0.3%,
      #f2dfd8,
      #cef2f2 0.5%,
      #f0f2f2,
      #f1f2e4,
      #bbf2f2 97%
    );
    /* Degradado con algo de transparencia */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    overflow-x: hidden;
  }
  
  /* Estilos del formulario */
  label {
    position: absolute;
    margin-top: 1rem;
    font-style: italic;
    font-size: 20px;
  }
  
  input[type="text"],
  input[type="number"],
  input[type="email"] {
    position: absolute;
    width: 12%;
    padding: 10px;
    border: 3px solid #ccc;
    border-radius: 8px;
    border-color: #5089b3;
  }
  
  /* Hover boton */
  button:hover {
    background-color: #4a99c8;
  }
  
  /* Pantallas escritorio grande */
  @media (max-width: 1920px) and (min-width: 1080px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 55%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -5rem;
      margin-bottom: 1.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: 28rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 15%;
      position: absolute;
      margin-top: 50.5rem;
      margin-left: -65rem;
    }
  
    .nube8 {
      width: 15%;
      position: absolute;
      margin-top: 53.5rem;
      margin-left: -14rem;
      z-index: -1;
    }
  
    .nube9 {
      width: 15%;
      position: absolute;
      margin-top: 50.5rem;
      margin-left: 32rem;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 100%;
      max-width: 1400px;
      height: 750px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 13%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 13%;
      margin-top: -30rem;
      margin-left: 1.5rem;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 18%;
      margin-right: 30rem;
      margin-top: -5rem;
    }
  
    .i-cohete {
      position: absolute;
      width: 12%;
      margin-left: -6rem;
      margin-top: -3rem;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 11%;
      position: absolute;
      margin-top: 7rem;
      margin-left: -5.5rem;
      z-index: 2;
    }
  
    .i-familia {
      margin-top: 7rem;
      margin-left: 2.2rem;
    }
  
    .i-contacto{
      width: 70%;
      margin-top: 7rem;
      margin-left: 5rem;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 80%;
      margin-left: 20%;
      margin-top: 32%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 3.5em;
      top: 27.3%;
      left: 38%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 25px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 25px;
      color: #000;
      margin-top: -9%;
      margin-left: 12.5%;
    }
  
    .tab-content .text {
      margin-top: -10rem;
    }
  
    /*texto de información médica*/
    .tab-content .text-i-a {
      margin-top: -47%;
      padding-bottom: 15%;
    }
  
    .tab-content .text-m {
      margin-top: -13rem;
    }
    .tab-content .text-info-m {
      margin-top: 1.5rem;
      font-size: 23px;
      margin-left: 0.5rem;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 45%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      /*position: fixed;*/
      /* Fija la barra en un lugar específico */
      margin-top: -27%;
      /* Puedes ajustar la distancia desde la parte superior de la pantalla */
      left: 61%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 25px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 24.8%;
      transform: translateX(-40%);
      top: 38%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #nombre {
      margin-left: -18rem;
      margin-top: 3rem;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -18rem;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-left: -18rem;
    }
  
    input[type="number"],
    #telefono {
      margin-left: -18rem;
      margin-top: 3rem;
    }
  
    /* compos correo */
    .l-correo {
      margin-left: 1rem;
    }
  
    input[type="email"],
    #correo {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* estilos de campos de alumnos */
    /* compos apellido paterno */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 42%;
      margin-top: 2rem;
    }
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 60.7%;
      margin-top: 1.3rem;
      text-align: left;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 26px; /* Tamaño del radio */
      height: 26px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si {
      margin-top: 5rem;
      left: 43.7%;
    }
  
    .l-radius-no {
      margin-top: 5rem;
      left: 51%;
    }
  
    .l-radius-si-tdah {
      margin-top: 5rem;
      left: 61.8%;
    }
    .l-radius-no-tdah {
      margin-top: 5rem;
      left: 70.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 7%;
      left: 42%;
    }
  
    .l-descripciontdah {
      margin-top: 6.7%;
      left: 60.7%;
    }
  
    textarea {
      width: 15%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 9%;
      left: 42%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 8.7%;
      left: 60.7%;
    }
  
    /* boton */
    button {
      width: 13%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 16rem;
      margin-left: -8rem;
      font-size: 25px;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 60%;
    }
  }
  
  /* Pantallas escritorio mediano */
  @media (max-width: 1440px) and (min-width: 900px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 45%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
      z-index: -1;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
      z-index: -1;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -8rem;
      margin-bottom: 2.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
      z-index: -1;
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: -65rem;
      z-index: -1;
    }
  
    .nube8 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: -14rem;
      z-index: -1;
    }
  
    .nube9 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: 4rem;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 95%;
      max-width: 1350px;
      height: 800px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 3%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 13%;
      margin-top: -30rem;
      margin-left: 1.5rem;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 18%;
      margin-right: 30rem;
      margin-top: -5rem;
    }
  
    .i-cohete {
      position: absolute;
      width: 12%;
      margin-left: -6rem;
      margin-top: -2rem;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 11%;
      position: absolute;
      margin-top: 8rem;
      margin-left: -5.5rem;
      z-index: 2;
    }
  
    .i-familia {
      margin-top: 7rem;
      margin-left: 2.2rem;
    }
  
    /*Imágenes de las UI del alumno */
    .i-contacto {
      width: 70%;
      margin-top: 7rem;
      margin-left: 5rem;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 65%;
      margin-left: 20%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 3.5em;
      top: 14rem;
      left: 36%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 25px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2.5rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 25px;
      color: #000;
      margin-top: -13%;
      margin-left: 15.5%;
    }
  
    .tab-content .text {
      margin-top: -22%;
    }
  
    /*texto de información del alumno y médica*/
    .tab-content .text-i-a {
      margin-top: -55%;
      padding-bottom: 15%;
    }
  
    .tab-content .text-m {
      margin-top: -15.2rem;
    }
    .tab-content .text-info-m {
      margin-top: 1.5rem;
      font-size: 23px;
      margin-left: 0.5rem;
    }
  
    .tab-content .contacto {
      margin-top: -40%;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 55%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      margin-top: -38.5%;
      left: 64%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 25px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 17.8%;
      transform: translateX(-40%);
      top: 38.5%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #nombre {
      margin-left: -18rem;
      margin-top: 3rem;
      width: 17%;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -18rem;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-left: -18rem;
      margin-top: 3rem;
    }
  
    input[type="number"],
    #telefono {
      margin-left: -18rem;
      margin-top: 5rem;
      width: 17%;
    }
  
    /* compos correo */
    .l-correo {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    input[type="email"],
    #correo {
      margin-left: 1rem;
      margin-top: 5rem;
      width: 17%;
    }
  
    /* estilos de campos de alumnos */
    /* compos de edad */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 42%;
      margin-top: 2rem;
    }
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 68.7%;
      margin-top: 1.3rem;
      text-align: left;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 26px; /* Tamaño del radio */
      height: 26px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si,
    .l-radius-no,
    .l-radius-si-tdah,
    .l-radius-no-tdah {
      margin-top: 5%;
    }
  
    .l-radius-si {
      left: 43.7%;
    }
  
    .l-radius-no {
      left: 51%;
    }
  
    .l-radius-si-tdah {
      left: 69.8%;
    }
    .l-radius-no-tdah {
      left: 80.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 8%;
      left: 42%;
    }
  
    .l-descripciontdah {
      margin-top: 7.2%;
      left: 68.7%;
    }
  
    textarea {
      width: 19%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 10.5%;
      left: 42%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 9.8%;
      left: 68.7%;
    }
  
    /* boton */
    button {
      width: 13%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 13rem;
      margin-left: -8rem;
      font-size: 25px;
    }
  
    /* Estilo de botones del alumno */
    .btn-s-a {
      margin-top: 18%;
      left: 65%;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 67%;
    }
  }
  
  /* Pantallas ordenador portátil medio) */
  @media (max-width: 1366px) and (min-width: 768px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 25%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
      z-index: -1;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
      z-index: -1;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -8rem;
      margin-bottom: 2.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: -25rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
      z-index: -1;
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: -65rem;
      z-index: -1;
    }
  
    .nube8 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: -14rem;
      z-index: -1;
    }
  
    .nube9 {
      width: 15%;
      position: absolute;
      margin-top: 54.5rem;
      margin-left: 4rem;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 95%;
      max-width: 1350px;
      height: 800px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 3%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 15%;
      margin-top: -30rem;
      margin-left: 1.5rem;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 22%;
      margin-right: 30rem;
      margin-top: -5rem;
    }
  
    .i-cohete {
      position: absolute;
      width: 18%;
      margin-left: -7.5rem;
      margin-top: -1.5rem;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 18%;
      position: absolute;
      margin-top: 8.5rem;
      margin-left: -7rem;
      z-index: 2;
    }
  
    .i-familia {
      margin-top: 9rem;
      margin-left: -0.8%;
    }
  
    .i-contacto {
      width: 70%;
      margin-top: 8rem;
      margin-left: 16.5%;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 65%;
      margin-left: 20%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 3.5em;
      top: 14rem;
      left: 36%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 25px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 25px;
      color: #000;
      margin-top: -13%;
      margin-left: 19.5%;
    }
  
    .tab-content .text {
      margin-top: -22%;
    }
  
    /*texto de información del alumno y médica*/
    .tab-content .text-i-a {
      margin-top: -55%;
      padding-bottom: 15%;
    }
  
    .tab-content .text-m {
      margin-top: -15.2rem;
    }
    .tab-content .text-info-m {
      margin-top: 1.5rem;
      font-size: 23px;
      margin-left: 0.5rem;
    }
  
    .tab-content .contacto {
      margin-top: -40%;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 55%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      margin-top: -40.5%;
      left: 65%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 25px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 17.8%;
      transform: translateX(-40%);
      top: 38.5%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #nombre {
      width: 18%;
      margin-left: -18rem;
      margin-top: 3rem;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -18rem;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -18rem;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-top: 3rem;
      margin-left: -18rem;
    }
  
    input[type="number"],
    #telefono {
      width: 18%;
      margin-left: -18rem;
      margin-top: 7%;
    }
  
    /* compos correo */
    .l-correo {
      margin-top: 3rem;
      margin-left: 1rem;
    }
  
    input[type="email"],
    #correo {
      width: 18%;
      margin-left: 1rem;
      margin-top: 7%;
    }
  
    /* estilos de campos de alumnos */
    /* compos de edad */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 42%;
      margin-top: 2rem;
    }
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 68.7%;
      margin-top: 1.3rem;
      text-align: left;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 26px; /* Tamaño del radio */
      height: 26px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si,
    .l-radius-no,
    .l-radius-si-tdah,
    .l-radius-no-tdah {
      margin-top: 5%;
    }
  
    .l-radius-si {
      left: 43.7%;
    }
  
    .l-radius-no {
      left: 51%;
    }
  
    .l-radius-si-tdah {
      left: 69.8%;
    }
    .l-radius-no-tdah {
      left: 80.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 8%;
      left: 42%;
    }
  
    .l-descripciontdah {
      margin-top: 7.2%;
      left: 68.7%;
    }
  
    textarea {
      width: 19%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 10.5%;
      left: 42%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 9.8%;
      left: 68.7%;
    }
  
    /* boton */
    button {
      width: 13%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 16rem;
      margin-left: -8rem;
      font-size: 25px;
    }
  
    /* Estilo de botones del alumno */
    .btn-s-a {
      margin-top: 18%;
      left: 65%;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 67%;
    }
  }
  
  /* Pantallas movil grande */
  @media (max-width: 1280px) and (min-width: 720px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 45%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
      z-index: -1;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
      z-index: -1;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -8rem;
      margin-bottom: 2.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
      z-index: -1;
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 1%;
      z-index: -1;
    }
  
    .nube8 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 10%;
      z-index: -1;
    }
  
    .nube9 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 53%;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 95%;
      max-width: 1350px;
      height: 800px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 3%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 20%;
      margin-top: -30rem;
      margin-left: 1%;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 22%;
      margin-right: 30rem;
      margin-top: -5rem;
    }
  
    .i-cohete {
      position: absolute;
      width: 18%;
      margin-left: -8.3%;
      margin-top: 1.5%;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 20%;
      position: absolute;
      margin-top: 8.5rem;
      margin-left: -9.8%;
      z-index: 2;
    }
  
    .i-familia {
      margin-top: 9rem;
      margin-left: -0.8%;
    }
  
    .i-contacto {
      width: 70%;
      margin-top: 8rem;
      margin-left: 16.5%;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 65%;
      margin-left: 20%;
      margin-top: 18%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 3em;
      top: 25%;
      left: 37.5%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 25px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 25px;
      color: #000;
      margin-top: -21%;
      margin-left: 17.5%;
    }
  
    .tab-content .text {
      margin-top: -22%;
    }
  
    /*texto de información del alumno y médica*/
    .tab-content .text-i-a {
      margin-top: -52%;
      padding-bottom: 15%;
    }
  
    .tab-content .text-m {
      margin-top: -15.2rem;
    }
    .tab-content .text-info-m {
      margin-top: 1.5rem;
      font-size: 23px;
      margin-left: 0.5rem;
    }
  
    .tab-content .contacto {
      margin-top: -40%;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 55%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      margin-top: -52.5%;
      left: 65%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 25px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 17.8%;
      transform: translateX(-40%);
      top: 38.5%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -17rem;
    }
  
    input[type="text"],
    #nombre {
      width: 23%;
      margin-left: -17rem;
      margin-top: 3rem;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -17rem;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -17rem;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-top: 3rem;
      margin-left: -17rem;
    }
  
    input[type="number"],
    #telefono {
      width: 23%;
      margin-left: -17rem;
      margin-top: 9%;
    }
  
    /* compos correo */
    .l-correo {
      margin-top: 3rem;
      margin-left: 1rem;
    }
  
    input[type="email"],
    #correo {
      width: 23%;
      margin-left: 1rem;
      margin-top: 9%;
    }
  
    /* estilos de campos de alumnos */
    /* compos de edad */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 38%;
      margin-top: 2rem;
    }
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 66.7%;
      margin-top: 1.3rem;
      text-align: left;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 26px; /* Tamaño del radio */
      height: 26px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si,
    .l-radius-no,
    .l-radius-si-tdah,
    .l-radius-no-tdah {
      margin-top: 7.5%;
      margin-bottom: 5%;
    }
  
    .l-radius-si {
      left: 39.7%;
    }
  
    .l-radius-no {
      left: 51%;
    }
  
    .l-radius-si-tdah {
      left: 69.8%;
    }
    .l-radius-no-tdah {
      left: 80.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 11.5%;
      left: 38%;
    }
  
    .l-descripciontdah {
      margin-top: 10.5%;
      left: 66.7%;
    }
  
    textarea {
      width: 21%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 14.8%;
      left: 38%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 13.8%;
      left: 66.7%;
    }
  
    /* boton */
    button {
      width: 18%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 16rem;
      margin-left: -8%;
      font-size: 25px;
    }
  
    /* Estilo de botones del alumno */
    .btn-s-a {
      margin-top: 25%;
      left: 62%;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 65%;
    }
  }
  
  /* Pantallas movil mediano */
  @media (max-width: 667px) and (min-width: 375px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 45%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
      z-index: -1;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
      z-index: -1;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -8rem;
      margin-bottom: 2.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
      z-index: -1;
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 1%;
      z-index: -1;
    }
  
    .nube8 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 10%;
      z-index: -1;
    }
  
    .nube9 {
      width: 45%;
      position: absolute;
      margin-top: 42.2rem;
      margin-left: 53%;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 95%;
      max-width: 1350px;
      height: 800px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 3%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 20%;
      margin-top: -30rem;
      margin-left: 1%;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 20%;
      margin-right: 85%;
      margin-top: -10%;
    }
  
    .i-cohete {
      position: absolute;
      width: 20%;
      margin-left: -9.3%;
      margin-top: 6%;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 20%;
      position: absolute;
      margin-top: 8.5rem;
      margin-left: -9.8%;
      z-index: 2;
    }
  
    .i-familia {
      width: 100%;
      margin-top: 9rem;
      margin-left: -0.8%;
    }
  
    .i-contacto {
      width: 70%;
      margin-top: 8rem;
      margin-left: 16.5%;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 65%;
      margin-left: 20%;
      margin-top: 18%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 3em;
      top: 22%;
      left: 37.5%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 25px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 25px;
      color: #000;
      margin-top: -25%;
      margin-left: 12.5%;
    }
  
    .tab-content .text {
      margin-top: -22%;
    }
  
    /*texto de información del alumno y médica*/
    .tab-content .text-i-a {
      margin-top: -75%;
      padding-bottom: 15%;
      font-size: 18px;
      margin-left: 2%;
    }
  
    .tab-content .text-m {
      margin-top: -16.2rem;
      font-size: 18px;
      margin-left: 8.5%;
    }
    .tab-content .text-info-m {
      margin-top: 1.5rem;
      font-size: 20px;
      margin-left: 0.5rem;
    }
  
    .tab-content .contacto {
      margin-top: -50%;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 55%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      margin-top: -85.5%;
      left: 65%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 20px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 17.8%;
      transform: translateX(-40%);
      top: 38.5%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
      margin-top: 2%;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -30%;
    }
  
    input[type="text"],
    #nombre {
      width: 23%;
      margin-left: -30%;
      margin-top: 3rem;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -30%;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -30%;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-top: 3rem;
      margin-left: -12rem;
    }
  
    input[type="number"],
    #telefono {
      width: 23%;
      margin-left: -12rem;
      margin-top: 13%;
    }
  
    /* compos correo */
    .l-correo {
      margin-top: 3rem;
      margin-left: 1rem;
    }
  
    input[type="email"],
    #correo {
      width: 23%;
      margin-left: 1rem;
      margin-top: 13%;
    }
  
    /* estilos de campos de alumnos */
    /* compos de edad */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 38%;
      margin-top: 1.8rem;
      padding-bottom: 10%;
      font-size: 17px;
      text-align: left;
      max-width: 200px;
      white-space: normal;
      word-wrap: break-word;
      line-height: 1.5;
    }
  
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 69.7%;
      margin-top: 1.3rem;
      text-align: left;
      font-size: 17px;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 17px; /* Tamaño del radio */
      height: 17px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si,
    .l-radius-no,
    .l-radius-si-tdah,
    .l-radius-no-tdah {
      margin-top: 12.5%;
      margin-bottom: 20%;
    }
  
    .l-radius-si {
      left: 37.9%;
    }
  
    .l-radius-no {
      left: 51%;
    }
  
    .l-radius-si-tdah {
      left: 69.8%;
    }
    .l-radius-no-tdah {
      left: 80.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 17.8%;
      left: 3%;
      font-size: 17px;
      padding-right: 45%;
      padding-left: 35%;
      text-align: left;
    }
  
    .l-descripciontdah {
      margin-top: 16.7%;
      left: 69.7%;
      font-size: 17px;
      text-align: left;
    }
  
    textarea {
      width: 23%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 24.9%;
      left: 38%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 23.8%;
      left: 69.7%;
    }
  
    /* boton */
    button {
      width: 30%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 16rem;
      margin-left: -15%;
      font-size: 25px;
    }
  
    /* Estilo de botones del alumno */
    .btn-s-a {
      margin-top: 35%;
      left: 62%;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 65%;
    }
  }
  
  /* Pantallas movil pequeño */
  @media (max-width: 640px) and (min-width: 360px) {
    /* ESTILO DE NUBES */
    .nubes {
      width: 45%;
    }
  
    .nube0 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -4rem;
      z-index: -1;
    }
  
    .nube1 {
      position: absolute;
      margin-left: 25rem;
      margin-top: -6rem;
      z-index: -1;
    }
  
    .nube2 {
      margin-left: 40rem;
      margin-top: -8rem;
      margin-bottom: 2.5rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube3 {
      position: absolute;
      margin-left: -8rem;
      margin-top: -6rem;
      transform: rotate(-180deg);
      z-index: -1;
    }
  
    .nube4 {
      position: absolute;
      width: 12%;
      margin-left: -61rem;
      margin-top: 3rem;
      transform: rotate(4deg);
      z-index: -1;
    }
  
    .nube5 {
      position: absolute;
      top: 30rem;
      left: 14rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube6 {
      position: absolute;
      margin-top: 18rem;
      right: -5rem;
      transform: translateX(-50%);
      z-index: -1;
      width: 18%;
    }
  
    .nube7 {
      width: 45%;
      position: absolute;
      margin-top: 48.2rem;
      margin-left: 1%;
      z-index: -1;
    }
  
    .nube8 {
      width: 45%;
      position: absolute;
      margin-top: 48.2rem;
      margin-left: 10%;
      z-index: -1;
    }
  
    .nube9 {
      width: 45%;
      position: absolute;
      margin-top: 48.2rem;
      margin-left: 53%;
      z-index: -1;
    }
  
    /* ESTILO DE CONTENEDORES */
    /* Contenedor principal */
    .contenedor {
      width: 95%;
      max-width: 1350px;
      height: 800px;
      display: flex;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      margin-left: 3%;
      margin-top: -1.5rem;
      z-index: 1;
    }
  
    /* Sección izquierda (Imágenes) */
    .seccion-imagenes {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  
    .seccion-imagenes img {
      object-fit: contain;
    }
  
    /* ESTILO DEL LOGO */
    #logotipo {
      position: absolute;
      width: 20%;
      margin-top: -30rem;
      margin-left: 1%;
    }
  
    /* ESTILOS DE IMÁGENES */
    .robot1 {
      width: 25%;
      margin-right: 85%;
      margin-top: -13%;
    }
  
    .i-cohete {
      position: absolute;
      width: 20%;
      margin-left: -9.3%;
      margin-top: 6%;
      z-index: 1;
      transform: rotate(-45deg);
    }
  
    .i-nube-cohete {
      width: 20%;
      position: absolute;
      margin-top: 8.5rem;
      margin-left: -9.8%;
      z-index: 2;
    }
  
    .i-familia {
      width: 100%;
      margin-top: -3rem;
      margin-left: -0.8%;
    }
  
    .i-contacto {
      width: 70%;
      margin-top: 8rem;
      margin-left: 16.5%;
    }
  
    /*Imágenes de info-medica del alumno*/
    .i-alumno,
    .i-medico {
      width: 70%;
      margin-left: 20%;
      margin-top: 18%;
    }
  
    /* ICON BACK */
    i {
      position: absolute;
      color: #60b5e0;
      font-size: 2em;
      top: 22%;
      left: 37.5%;
    }
  
    /* Sección derecha (Contenido) */
    .seccion-contenido {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: white;
    }
  
    /*  ESTILOS DE PARRAFOS */
    .tab-content p {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      text-align: center;
      font-style: italic;
      font-size: 23px;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-top: -2rem;
      color: #000;
    }
  
    .tab-content .ask {
      position: absolute;
      font-style: italic;
      font-size: 20px;
      color: #000;
      margin-top: -38%;
      margin-left: 7.5%;
    }
  
    .tab-content .text {
      margin-top: -22%;
    }
  
    /*texto de información del alumno y médica*/
    .tab-content .text-i-a {
      margin-top: -90%;
      padding-bottom: 15%;
      font-size: 18px;
      margin-left: 3%;
    }
  
    .tab-content .text-m {
      margin-top: -16.2rem;
      font-size: 18px;
      margin-left: 8.5%;
    }
    .tab-content .text-info-m {
      margin-top: 1rem;
      font-size: 18px;
      margin-left: 0.5rem;
    }
  
    .tab-content .contacto {
      margin-top: -50%;
    }
  
    /* Contenedor de la barra de progreso */
    .progress-bar-seccion-contenido {
      width: 100%;
      margin-top: 1rem;
      text-align: center;
    }
  
    /* Barra de progreso */
    .progress-bar {
      width: 55%;
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 25px;
      margin: 12px auto;
      position: absolute;
      margin-top: -38rem;
      left: 65%;
      transform: translateX(-50%);
      z-index: 1000;
      /* Asegura que esté por encima de otros elementos */
    }
  
    /* Progreso */
    .progress {
      width: 0%;
      background-color: #b1ffff;
      height: 100%;
      border-radius: 20px 0 0 20px;
      transition: width 0.5s ease;
      position: relative;
      /* Para posicionar el texto dentro del progreso */
    }
  
    /* Texto de progreso dentro de la barra */
    #progress-text {
      position: absolute;
      width: -70%;
      /* Asegura que esté centrado dentro del progreso */
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #65b8e1;
      z-index: 1;
      pointer-events: none;
      /* Permite clics a través del texto */
    }
  
    /* ESTILOS DEL TÍTULO */
    .title {
      font-family: Arial, sans-serif;
      font-size: 30px;
      color: white;
      text-shadow: 2px 2px 0 #1a649b, -2px -2px 0 #1a649b, 2px -2px 0 #1a649b,
        -2px 2px 0 #1a649b;
      text-align: center;
      align-items: center;
      margin-bottom: 2rem;
    }
  
    /* Título del contenedor de imágenes */
    .title-img {
      position: absolute;
      font-family: Arial, sans-serif;
      font-size: 15px;
      color: white;
      text-shadow: 2px 2px 0 #538ab4, -2px -2px 0 #538ab4, 2px -2px 0 #538ab4,
        -2px 2px 0 #538ab4;
      text-align: center;
      left: 17.8%;
      transform: translateX(-40%);
      top: 38.5%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  
    /* ESTILOS DEL SELECT */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      color: #66b8e1;
      border: 3px solid #66b8e1;
      border-radius: 8px;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 26px;
      font-family: "Open Sans", sans-serif;
      text-shadow: 1px 1px 0 #000;
      margin-left: -1rem;
      margin-top: 7%;
    }
  
    /* Estilos del formulario */
    /* compos nombre */
    .l-nombre {
      margin-left: -30%;
    }
  
    input[type="text"],
    #nombre {
      width: 23%;
      margin-left: -30%;
      margin-top: 3rem;
    }
  
    /* compos apellido paterno */
    .l-apaterno {
      margin-left: 1rem;
    }
  
    input[type="text"],
    #apaterno {
      margin-left: 1rem;
      margin-top: 3rem;
    }
  
    /* compos apellido materno */
    .new-margin {
      margin-top: 7rem;
    }
  
    .l-amaterno {
      margin-left: -30%;
    }
  
    input[type="text"],
    #amaterno {
      margin-left: -30%;
      margin-top: 9rem;
    }
  
    /* compos telefono */
    .l-telefono {
      margin-top: 3rem;
      margin-left: -9rem;
    }
  
    input[type="number"],
    #telefono {
      width: 23%;
      margin-left: -9rem;
      margin-top: 17%;
    }
  
    /* compos correo */
    .l-correo {
      margin-top: 3rem;
      margin-left: -1rem;
    }
  
    input[type="email"],
    #correo {
      width: 30%;
      margin-left: -1rem;
      margin-top: 17%;
    }
  
    /* estilos de campos de alumnos */
    /* compos de edad */
    .l-edad {
      margin-left: 1rem;
      margin-top: 7.2rem;
    }
  
    input[type="number"],
    #edad {
      margin-left: 1rem;
      margin-top: 9rem;
    }
  
    /* compos alergias */
    .l-alergia {
      left: 38%;
      margin-top: 1rem;
      font-size: 15px;
      text-align: left;
      max-width: 180px;
      white-space: normal;
      word-wrap: break-word;
      line-height: 1.5;
    }
  
    .form-group {
      margin-bottom: 20px;
    }
  
    .radio-group {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }
  
    .l-TDAH {
      left: 69.7%;
      margin-top: 0.5rem;
      text-align: left;
      font-size: 15px;
    }
  
    /* Estilo para los radios (botones redondos) */
    input[type="radio"] {
      appearance: none; /* Oculta el botón predeterminado */
      width: 15px; /* Tamaño del radio */
      height: 15px;
      border: 2px solid #007bff; /* Borde del radio */
      border-radius: 50%; /* Redondeado */
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación al hacer hover */
    }
  
    input[type="radio"]:checked {
      background-color: #007bff; /* Color de relleno cuando está seleccionado */
      border-color: #0056b3; /* Borde más oscuro al seleccionar */
    }
  
    /* Cambiar tamaño y diseño al pasar el cursor */
    input[type="radio"]:hover {
      transform: scale(1.2); /* Aumenta un poco el tamaño */
      border-color: #0056b3; /* Borde más oscuro */
    }
  
    .l-radius-si,
    .l-radius-no,
    .l-radius-si-tdah,
    .l-radius-no-tdah {
      margin-top: 15.5%;
    }
  
    .l-radius-si {
      left: 37.9%;
    }
  
    .l-radius-no {
      left: 51%;
    }
  
    .l-radius-si-tdah {
      left: 69.8%;
    }
    .l-radius-no-tdah {
      left: 80.7%;
    }
  
    /* Estilo adicional para la etiqueta específica */
    .l-radius-si:hover {
      color: #28a745; /* Verde para el botón "Sí" */
    }
  
    .l-radius-no:hover {
      color: #dc3545; /* Rojo para el botón "No" */
    }
  
    /* Estilo para la caja de texto */
    .l-descripcionAlergia {
      margin-top: 20.5%;
      left: 3%;
      font-size: 17px;
      padding-right: 45%;
      padding-left: 35%;
      text-align: left;
    }
  
    .l-descripciontdah {
      margin-top: 20.7%;
      left: 69.7%;
      font-size: 17px;
      text-align: left;
    }
  
    textarea {
      width: 23%;
      border: 2px solid #045591;
      border-radius: 4px;
      resize: none;
    }
  
    .txt-desc-alergia {
      position: absolute;
      margin-top: 34.9%;
      left: 38%;
    }
  
    .txt-desc-tdah {
      position: absolute;
      margin-top: 32.8%;
      left: 69.7%;
    }
  
    /* boton */
    button {
      width: 30%;
      position: absolute;
      background-color: #60b5e0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 16rem;
      margin-left: -15%;
      font-size: 25px;
    }
  
    /* Estilo de botones del alumno */
    .btn-s-a {
      margin-top: 45%;
      left: 62%;
    }
  
    .btn-r-a {
      margin-top: 22rem;
      left: 65%;
    }
  }
   /* Estilo de las nubes */
.nube img {
    position: absolute;
    opacity: 0.8;
    animation: moverNubes 20s linear infinite; /* Animación que hace que las nubes se muevan */
    z-index: -1; /* Colocamos las nubes detrás del contenido */
  }
  
  .nube0 {
    top: 8%;
    left: 5%;
    animation-duration: 25s;
    animation-delay: -5s;
  }
  
  .nube1 {
    top: 30%;
    left: 15%;
    animation-duration: 20s;
    animation-delay: -10s;
  }
  
  .nube2 {
    top: 5%;
    left: 60%;
    animation-duration: 30s;
    animation-delay: -15s;
  }
  
  .nube3 {
    top: 55%;
    left: 40%;
    animation-duration: 22s;
    animation-delay: -3s;
  }
  
  .nube4 {
    top: 70%;
    left: 10%;
    animation-duration: 35s;
    animation-delay: -7s;
  }
  
  .nube5 {
    top: 45%;
    left: 80%;
    animation-duration: 25s;
    animation-delay: -12s;
  }
  
  .nube6 {
    top: 20%;
    left: 90%;
    animation-duration: 28s;
    animation-delay: -20s;
  }
  
  .nube7 {
    top: 25%;
    left: 70%;
    animation-duration: 18s;
    animation-delay: -6s;
  }
  
  .nube8 {
    top: 35%;
    left: 40%;
    animation-duration: 30s;
    animation-delay: -8s;
  }
  
  .nube9 {
    top: 75%;
    left: 50%;
    animation-duration: 27s;
    animation-delay: -14s;
  }
  
  /* Animación para mover las nubes de izquierda a derecha */
  @keyframes moverNubes {
    0% {
        transform: translateX(-100%); /* Comienza fuera de la pantalla a la izquierda */
    }
    100% {
        transform: translateX(100%); /* Termina fuera de la pantalla a la derecha */
    }
  }