.page-wrapper {
            width: 1000px;
            margin: 0 auto;
        }
/*.header, .menu, .social {
    position: relative;
    width: 100%;
}*/

        .header {
            text-align: center;
            padding: 20px;
            background-color: #f1f1f1;
        }

        .header img {
            height: 100px;
        }

        .menu {
            text-align: center;
            padding: 20px;
            background-color: #f1f1f1;
        }
.container2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 50px 0px 50px; /* relleno: arriba derecha abajo izquierda */
    color: grey;
    text-decoration: none;
    font-size: 12px;
}
        /*.menu a {
            color: black;
            text-decoration: none;
            margin: 0 10px;
            font-size: 14px;
            font-family: Arial;
        }

        .menu a:hover {
            background-color: #f1f1f1;
        } */
/* menu desplegable */
        #menu {
        z-index: 1000;
        }

        #menu ul {
        list-style:none;
        margin:0;
        padding:0;
        }
       /* enlaces del menu */
       #menu ul a {
 text-align: center;
       color:#000;
       text-decoration:none;
       font-weight:400;
       font-size:15px;
       padding:10px;
       }

      /* items del menu */
      #menu ul li {
      position:relative;
      display: inline-block;
      margin:0;
      padding:0;
      }
      #menu ul li:hover {
      font-weight:600;
      }
     /* menu desplegable */
      #menu ul ul {
      display:none;
      position:absolute;
      top:100%;
      left:0;
      padding:0;
      background:#f1f1f1;
      }
      /* items del menu desplegable */
      #menu ul ul li {
      float:none;
      width:200px
      }
      /* enlaces de los items del menu desplegable */
      #menu ul ul a {
      line-height:150%;
      padding:15px 15px;
      }
      /* items del menu desplegable al pasar el ratón */
     #menu ul li:hover > ul {
     display:block;
     font-weight:600;
     }
/* fin menu desplegable */
        .social {
            text-align: center;
            padding: 10px;
            background-color: #d1d1d1;
 z-index: 100;
        }
        img.flotante {
    float: left;
    max-width: 100%;
    height: auto;
    margin-right: 10px;
}
        .social a {
            color: #808080;
            margin: 0 10px;
        }
        
        .content {
            padding: 50px;
            font-family: Arial;
            font-size: 18px;
            line-height: 1.6;
        }

        .content img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

        .videoContainer {
            width: 66.66%;
            margin: 0 auto;
        }

        .videoWrapper {
            position: relative;
            padding-bottom: 56.25%; /* Proporción 16:9 */
            height: 0;
            overflow: hidden;
        }

        .videoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

          /* Estilos para el índice de contenidos */
        .index-container {
            max-width: 80%;
            margin: 0 auto;
            text-align: center;
            background-color: #f9f9f9;
            padding: 10px;
            margin-top: 20px;
        }

        .index-container h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .index-content {
            display: none;
            width: 100%;
            padding: 10px 0;
        }

        .index-container.show .index-content {
            display: block;
        }

        .index-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .index-container li {
            margin-bottom: 10px;
        }

        .index-container a {
            text-decoration: none;
            color: #000;
        }

        .index-container a:hover {
            color: #007bff;
        }

        .toggle-button {
            margin-top: 10px;
            display: inline-block;
        }
/* Estilos para el footer */
        footer {
             background-color: #333; /* Fondo oscuro */
            color: #ddd; /* Texto en gris claro */
            font-family: Arial, sans-serif; /* Fuente Arial */
            padding: 20px;
            text-align: center;
        }

        .footer-menu {
            margin-bottom: 10px;
        }

        .footer-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-menu li {
            display: inline-block;
            margin-right: 20px;
        }

        .footer-menu li:last-child {
            margin-right: 0;
        }

        .footer-menu a {
            text-decoration: none;
            color: #ddd;
        }

        .footer-menu a:hover {
            color: #fff; /* Color de texto al pasar el ratón */
        }