body{
 margin: 0;
 padding: 0;
background-color: black;
 color: white;
   font-family: bebas;
   overflow: hidden;
}
.padre{
    width: 90dvw;
    min-height: 100dvh;
    height: 100%;
    border: 2px solid white;
    justify-content: center;
    margin-left: 5dvw;
    text-align: center;
    align-items: center;
    background-color: black;
    
}
.menu{
    margin-top: 5dvh;
    display: flex;
    width: 100%;
    max-width: 90dvw;
    flex-direction: row;
}
.swiper{
    width: 90dvw;
    height: 50dvh;
}
.swiper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seleccion{
    font-size: 1.5rem;
    width: 33%;
    height: 10dvh;
    align-items: center;
    justify-content: center;
    display: flex;
    border: solid 2px white;
   cursor: pointer;
  background: #2b9ecc;
background: linear-gradient(180deg,rgba(43, 158, 204, 1) 0%, rgba(31, 28, 28, 1) 100%);
      font-family:bebas ;
}
details{
    margin-top: 2dvh;
}
li{
    max-width: 75dvw;
     list-style-type: none;
}
p1{
    font-family: audio ;
    font-size: 4rem;
   display: flex;
   text-align: center;
   justify-content: center;
   color: white;
}
p{
    font-family: bebas
    color: white;
}
summary{
     font-family: bebas
    color: white;
    font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 30dvw;
  list-style: none; /* Remove the default marker */
  padding-left: 20px; /* Add some left padding to visually place the marker */
  position: relative; /* Create a positioning context for the pseudo-element */
}
summary::before {
  content: '►'; /* The right-pointing triangle character */
  color: #fff; /* Set the color to white */
  font-size: 16px; /* Adjust the size as needed */
  position: absolute;
  left: 0; /* Position the marker at the beginning of the padding */
}
.p2{
    font-size: 1.5rem;
    width: 50dvw;
    display: flex;
   text-align: center;
   justify-content: center;
  margin-left: 12.5dvw;
  flex-direction: column;
  align-content: center;
}
.p2 iframe{
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            border: 0;
            margin-left: 25%;
}
#ico{
    width: 10dvw;
    height: 10dvw;
}
.adp{
     content: url('linux.jpg');
}
/**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**/

@media (max-width: 768px) {
    .adp{
     content: url('Informatica.jpg');
}
.adp1{
     content: url('camara.jpg');
}
     #ico{
    width: 30dvw;
    height: 30dvw;
}
.swiper{
    width: 90dvw;
    height: 38dvh;
}
.menu{
margin-top: 0;
}
.seleccion{
    font-size: 1rem;
    width: 33%;
    height: 10dvh;
    align-items: center;
    justify-content: center;
    display: flex;
    border: solid 2px white;
   cursor: pointer;
  background: #2b9ecc;
background: linear-gradient(180deg,rgba(43, 158, 204, 1) 0%, rgba(31, 28, 28, 1) 100%);
      font-family:bebas ;
}
       .padre{
        margin-left :5dvw;
        width : 90dvw;
        display:flex;
        flex-direction:column;
         justify-content: flex-start;
    }
    p1{
    font-size: 2.5rem;
    margin-bottom: 10dvh;
    }
    p{
        text-align:center;
        margin:0;
        margin-top :2dvh;
         font-size: 1.2rem;
    }
    .p2{
        margin-left: 0;
    }
      summary{
     font-family: bebas
    color: white;
    font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 25dvw;
  list-style: none; /* Remove the default marker */
  padding-left: 20px; /* Add some left padding to visually place the marker */
  position: relative; /* Create a positioning context for the pseudo-element */
  margin-left:0;
}
}
@media (max-width: 480px) {
    .adp{
     content: url('Informatica.jpg');
}
.adp1{
     content: url('camara.jpg');
}
 #ico{
    width: 30dvw;
    height: 30dvw;
}
.menu{
    margin-top: 0;
}
.swiper{
    width: 90dvw;
    height: 38dvh;
}
.seleccion{
    font-size: 0.9rem;
     word-wrap: break-word; 
    width: 33%;
    height: 10dvh;
    align-items: center;
    justify-content: center;
    display: flex;
    border: solid 2px white;
   cursor: pointer;
  background: #2b9ecc;
background: linear-gradient(180deg,rgba(43, 158, 204, 1) 0%, rgba(31, 28, 28, 1) 100%);
      font-family:bebas ;
}
    .padre{
        margin-left :5dvw;
        width : 90dvw;
        display:flex;
        flex-direction:column;
       justify-content: flex-start;
    }
    p1{
    font-size: 3rem;
    margin-bottom: 20dvh;
    }
    p,li{
        text-align:center;
        margin:0;
        margin-top :2dvh;
        font-size: 1rem;
        margin-left: 0;
    }
    li{
        font-size: 0.8rem;
    }
    .p2{
        margin-left: 0;
    }
    summary{
     font-family: bebas
    color: white;
    font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none; /* Remove the default marker */
  padding-left: 20px; /* Add some left padding to visually place the marker */
  position: relative; /* Create a positioning context for the pseudo-element */
  margin-left:0;
}
}

@font-face {
    font-family: 'bebas; /* Nombre de la fuente que usarás en HTML */
    src: url(bebas-Regular.ttf') format('truetype'); /* Ruta al archivo .ttf */
  }
  @font-face{
       font-family: 'audio';
    src: url('Audiowide-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'bebas'; /* Nombre de la fuente que usarás en HTML */
    src: url('BebasNeue-Regular.ttf') format('truetype'); /* Ruta al archivo .ttf */
  }