@media(max-width: 1450px){
#menu {
    width: 950px;
    }
}

@media(max-width: 1350px){
#menu {
    width: 910px;
    }
}

@media(max-width: 1270px){
#menu {
    width: 875px;
    }
}

/*Medida real 1250*/
@media (max-width: 1251px){
    .wrap{
        width: 90%;
        margin: 0px auto;
    }
    #menu {
        width: 800px;
    }

    .span1{
    width: 60px;
    margin-right: 10px;
}
.span2{
    width: 60px;
    margin-right: 5px;
}
.span3{
    width: 90px;
    margin-right: 10px;
}
.span4{
    width: 80px;
    margin-right: 10px;
}
.span5{
    width: 115px;
    margin-right: 10px;
}
.span6{
    width: 105px;
    margin-right: 10px;
}
.span7{
    width: 105px;
    margin-right: 10px;
}
.span8{
    width: 65px;
    margin-right: 10px;
}
#menu ul li:hover{
background-color: #2A2A2A;;
}

#menu ul li:hover a span{
     transform: scale(1.1);
     color: #37bcf9;
}

    #banner h1{
        width: 100%;
        font-size: 25px;
        text-align: center;
        margin:33px auto;
    }
    .card-link {
        float: left;
        width: 17%;
        margin: 1.45%;
    }
    .card p {
        display: block;
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    #articles{
        width: 65%;
    }

    #articles article{
        width: 97%;
    }
    #productos {
        width: 60%;
    }
    #footer .wrap > div{
        width: 24%;
    }

    #footer #browsers img{
    width: 14%;
    }

    #footer h5{
    font-size: 30px;
    }
}

@media(max-width: 1211px){
#menu {
    width: 789px;
    }
}

@media(max-width: 1199px){
    /* Estilos del header y del menú */
    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Estilos del ícono de la hamburguesa */
    .hamburger-menu {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 25px;
        left: 20px;
        z-index: 101;
    }

    .hamburger-menu .bar {
        width: 35px;
        height: 5px;
        background-color: #FFFDD0;
        margin: 6px 0;
        transition: 0.4s;
    }

    /* Animación del ícono de hamburguesa a una 'X' */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-9px, 6px);
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-8px, -8px);
    }

    #logo {
        float: none;
        margin: 0 auto;
        width: 200px;
    }

    #menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 250px;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 100;
        padding-top: 100px;
        transition: left 0.5s ease;
    }

    #menu.active {
        display: block;
        left: 0;
    }

    /* Estilos del menú para dispositivos móviles */
    #menu ul {
        display: block;
        padding: 0;
        margin: 0;
    }
    
    #menu ul li {
        display: block;
        width: 100%;
        line-height: 50px;
        text-align: left;
    }
    
    #menu ul li a {
        display: block;
        padding: 0 20px;
    }

    #menu ul li a span {
        width: auto !important;
        margin-right: 0 !important;
    }

    /* Ocultar el submenu en móviles */
    #menu ul li .submenu {
        display: none !important;
    }

   /* #articles article img {
        max-width: 100%;
        height: auto;
    }*/

    /* Mantén tus estilos originales para las tarjetas y artículos */
    .card .category {
        font-size: 17px;
    }
    .card .description {
        font-size: 14px;
    }
    #articles {
        width: 61%;
    }

    #productos {
        width: 60%;
    }

    #productos h2{
        font-size: 30px;
    }

    #productos article {
        width: 95%;
        margin: 20px auto;
    }

    /* Cambia el layout de cuadrícula para que los elementos se apilen verticalmente */
    #productos article div {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }

    /* Posiciona cada elemento en una fila diferente, asegurando que estén debajo unos de otros. */
    #productos .data {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: start;
        padding-left: 10px;
    }

    #productos article h4 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding-left: 10px;
    }

    #productos img {
        width: 50%;
        height: auto;
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        justify-self: center;
    }

    #productos article p {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    /* Posiciona el botón en la última fila. Como solo hay un selector, lo colocamos ahí. */
    #productos button {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
        justify-self: start;
        padding-left: 10px;
    }

        /* El contenedor principal ocupa el 95% del ancho */
    .service-card {
        width: 95%;
        margin: 20px auto;
        /* Cambia el layout a columna para que los elementos se apilen */
        flex-direction: column;
    }

    /* El encabezado también se vuelve una columna para apilar la fecha y el título */
    .service-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Asegura el orden vertical de la fecha y el título */
    .service-card-date {
        order: 1;
    }
    
    .service-card-title {
        order: 2;
    }

    /* El contenido principal (imagen y texto) se apila verticalmente */
    .service-card-content {
        flex-direction: column;
    }

    /* La imagen ahora ocupa el 50% del ancho y se centra */
    .service-card-image-wrapper {
        width: 50%;
        max-width: 50%;
        margin: 0 auto;
        flex: none; /* Elimina la restricción de flexbox del estilo de escritorio */
    }

    /* El pie de página se vuelve una columna para apilar los botones */
    .service-card-footer {
        display: flex;
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    /* Los botones ocupan todo el ancho y se apilan con un pequeño margen */
    .service-card-button {
        width: 20%;
        margin-bottom: 10px;
    }

    .precio-moneda-servicios{
        width: 50%;
    }

    .precio-moneda-productos{
        width: 50%;
    }

    .precio-moneda-cursos{
        width: 50%;
    }

    #articles h2{
        font-size: 20px;
    }
}

/*Medida real 970*/
@media (max-width: 978px){
    #articles{
        width: 59%;
    }

    #articles h2{
        font-size: 15px;
    }
    #productos {
        width: 55%;
    }

    .contenedor-slider-fondo{
        position: relative;
        left: 115px;
        z-index: 0;
        width: 80%;
        height: 170px;
        max-height: 500px;
        overflow: hidden;
        margin-top: 20px;
        background-image: url('../img/franjas_blancas.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    #cards{
        text-align: center;
    }
    .card-link {
        width: 30%;
    }

    #footer .wrap > div{
        width: 26%;
        margin: 20px;
    }

    #footer h5{
        font-size: 22px;
    }

    .game-container {
        width: 80% !important;
        height: 240px !important;
    }

    .bottom-ad {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .bottom-ad a {
        width: calc(50% - 10px);
        max-width: 340px;
        height: auto;
        margin: 0;
    }

    .bottom-ad img {
        width: 100%;
        height: auto;
    }

    /*.mb-4 img {
        width: 85%;
        height: auto;
        border-radius: 8px;
        display: block;
        margin: 0 auto;
    }*/

}

/*Medida real 925*/
@media (max-width: 926px){
    #articles{
        width: 59%;
    }

    #lateral{
        width: 25%;
    }

    #lateral input[type="text"]{
        width: 78%;
    }

    .aside-box{
        width: 100%;
        min-height: 140px;
        height: auto;
        padding-bottom: 10px;
    }
    /*.mb-4 img {
        width: 70%;
        margin: 0 auto;
    }*/

    aside h3 {
        display: block;
        width: 170px;
        height: 47px;
        font-size: 18px;
        padding-left: 10px;
        margin-top: 30px;
        margin-bottom: 10px;
        margin-left: 15px;
        text-align: center;
    }

    .contenidoPrincipal form button[type="submit"] {
        width: 30%;
    }

    #login a{
        font-size: 12px;
        margin-top: 10px;
        margin-left: 5px;
        margin-bottom: 10px;
    }

    #login input[type="email"],
    #login input[type="password"]{
        width: 78%;
    }

    #login #user,
    #login #password{
        margin-left: 24px;
    }

    #login input[type="submit"],
    #login input[type="button"],
    #login input[type="reset"],
    #login button{
        margin-bottom: 0px;
    }

    #login input[type="submit"], #login button {
        font-size: 13px;
        margin-left: 55px;
    }

    #login input[type="reset"]{
        display: none;
    }
    #login input[type="checkbox"] {
        width: 75px;

    }
}
/*Medida real 899px*/
@media (max-width: 900px){

    #lateral h3{
        font-size: 12px;
        }

    #articles h2 {
        font-size: 25px;
        }

   /* .mb-4 img {
        width: 65%;
        margin: 0 auto;
    }*/

    aside h3{
        width: 160px;
    }

    #articles h2{
        font-size: 15px;
    }
}

@media (max-width: 850px){

   /* .mb-4 img {
        width: 70%;
        margin: 30px; 
    }*/

    aside h3{
        width: 150px;
        margin-left: 10px;
    }

    #productos h2{
        font-size: 25px;
    }

}

/*Medida real 799*/
@media (max-width: 800px){

    #articles h2{
        font-size: 15px;
    }

    #banner h1{
        font-size: 20px;
    }

    .card{
        height: auto;
    }

    .card .category{
        font-size: 15px;
        margin-top: -23px;
    }

    .card .description{
        display: none;
    }

    #lateral h3 {
        font-size: 15px;
    }

    #lateral input[type="text"]{
        width: 65%;
    }
    
    #productos article h4 {
        font-size: 18px;
    }

    .perfil img {
        width: 200px;
    }

    .contenidoPrincipal form button[type="submit"] {
        width: 40%;
    }

    #login #usuario {
        margin-left: 19px;
        margin-top: 5px;
        font-size: 16px;
    }

    #login #email {
        margin-left: 19px;
        margin-top: 25px;
        font-size: 16px;
    }

    #login input[type="submit"], #login button {
        margin-left: 40px;
        font-size: 13px;
    }

    #login input[type="checkbox"] {
        margin-left: 50px;
    }

    #login a {
        margin-left: 0px;
        font-size: 12px;
    }

    #login input[type="email"], #login input[type="password"]
    {
        width: 65%;
    }

    .aside-box{
        width: 100%;
        min-height: 70px;
        height: auto;
        padding-bottom: 10px;
    }

  /* .mb-4 img {
        width: 70%;
        margin: 30px;
    }*/

    aside h3 {
        display: block;
        width: 139px;
        height: 47px;
        font-size: 18px;
        padding-left: 10px;
        margin-top: 30px;
        margin-bottom: 10px;
        margin-left: 15px;
        text-align: center;
    }

    #footer img{
        margin-bottom: 15px;
        max-width: 100%;
    }
}

@media (max-width: 770px){
   /* .mb-4 img {
        width: 65%;
        margin: 30px;
    }*/
}

/*Medida real 724*/
@media (max-width: 725px){
    #header{
        width: 100%;
        height: 120px;
        padding-top: 100px;
    }

    #menu{
        clear: both;
        float: none;
        width: 440px;
        margin:0px auto;
    }

    #logo{
        float: none;
        width: 200px;
        margin:0px auto;
    }
    #articles h2{
        font-size: 15px;
    }

    #lateral input[type="text"]{
        width: 70%;
    }

    #lateral h3 {
        font-size: 13px;
    }
   /* .mb-4 img {
        width: 60%;
        margin: 30px;
    }*/

    aside h3{
        width: 123px;
    }

    .contenidoPrincipal form button[type="submit"] {
        width: 45%;
    }

    .game-container {
        width: 95% !important;
        height: 270px !important;
    }
}

@media(max-width: 700px){
   /*.mb-4 img {
        width: 60%;
        margin: 25px;
    }*/

    #cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

}
/*Medida real 660*/
@media (max-width: 661px){

    .contenedor-slider-fondo {
        left: 0;
        width: 95%;
        margin: 20px auto;
    }

    #banner h1 {
        font-size: 20px;
    }

  /* .mb-4 img {
        width: 90%;
        margin: 20px;
    }*/

    aside h3 {
        width: 85%;
        margin: 0 auto;
    }

    #articles{
        float: none;
        width: 100%;
        margin:0px auto;
        min-height: auto;
    }

    /*#articles article img {
        max-width: 100%;
    }*/

    #lateral h3 {
        font-size: 20px;
    }

    #articles h2 {
        font-size: 20px;
    }

    #login input[type="email"], #login input[type="password"] {
        width: 50%;
    }

    #lateral input[type="text"] {
        width: 50%;
    }

    #login input[type="checkbox"] {
        margin-left: 120px;
    }

    #search {
        width: 15%;
    }

    #lateral{
        float: none;
        width: 100%;
        margin:0px auto;
        min-height: auto;
        margin-top: 20px;
    }

   /* #login,
    input[type="email"],
    #login input[type="password"]{
        width: 90%;
    }*/

    #login #usuario, #login #email {
        margin-left: 137px;
    }

    #productos {
        width: 100%;
    }

    #productos h2 {
        font-size: 30px;
    }

    #footer .wrap > div{
        width: 93%;
        margin: 0px auto;
        margin-top: 20px;
    }

    #footer{
        height: auto;
        padding-bottom: 40px;
    }

    #footer h5{
        font-size: 25px;
    }
}

@media(max-width: 630px){

  #login #usuario, #login #email {
        margin-left: 130px;
    }
}

@media(max-width: 551px){

  #login #usuario, #login #email {
        margin-left: 110px;
    }
}

@media(max-width: 500px){

  #login #usuario, #login #email {
        margin-left: 105px;
    }
}

/*medida original 475px*/
@media (max-width: 476px){
    #logo{
        float: none;
        width: 100%;
        margin: 0 auto;
    }

    #logo img {
        max-width: 100%;
        height: auto;
    }

    #header{
        width: 100%;
        height: auto;
        padding-top: 100px;
    }

    #menu{
        clear: both;
        float: none;
        width: 100%;
        margin:0px auto;
    }

    #menu ul li{
        width: 100%;
        line-height: 52px;
    }

    #menu ul li a{
        width: 100%;
        line-height: 30px;
    }

    #menu ul li a:hover{
        color: #37bcf9;
        transform: scale(1,1);
    }

    #banner{
        height: auto;
    }

    #banner h1{
        font-size: 13px;
    }


   /*.mb-4 img {
        width: 75%;
        margin: 20px;
    }*/

    aside h3 {
        width: 80%;
        margin: 0 auto;
    }

    #login input[type="email"], #login input[type="password"] {
        width: 50%;
    }

    #lateral input[type="text"] {
        width: 50%;
    }

    #login input[type="checkbox"] {
        margin-left: 120px;
    }

    #search {
        width: 15%;
    }

    #login #usuario, #login #email {
        margin-left: 95px;
    }

    #productos article h4 {
        font-size: 18px;
        margin-top: 40px;
    }

    #cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .card {
        width: 140px;
    }

    .card-link {
        width: 20%;
    }

    .card-link {
        margin: 12.45%;
    }

    .contenedor-slider-fondo {
        width: 73%;
    }

    .card .icon{
        font-size: 35px;
    }

    .card:hover .icon{
        font-size: 35px;
    }

    .card .category{
        font-size: 13px;
    }

    #article #data{
        float: none;
        margin: -10px;
        border-radius: 0px 0px 0px 0px;
    }

    #articles article h4{
        margin-top: 20px;
    }
}

/* ------------------------------------------------------------------------------------------------------ */
/* NUEVAS MEDIDAS AGREGADAS (475px a 200px) */
/* ------------------------------------------------------------------------------------------------------ */
@media (max-width: 475px){
    /* Ajustes generales para pantallas muy pequeñas */
    .wrap {
        width: 95%;
    }
    #header {
        padding-top: 50px;
    }
    #logo {
        width: 150px;
    }

    #articles, #lateral {
        width: 100%;
        float: none;
    }
    
    /* Centrar y hacer la imagen fluida */
   /* .mb-4 img {
        width: 70%;
        margin: 20px; 
    }*/
    #articles h2 {
        font-size: 18px;
        text-align: center;
    }

    #articles article {
        width: 90%;
    }

    #articles article h4 {
        font-size: 16px;
    }
    .card-link {
        width: 45%;
        margin: 2.5%;
    }
    .contenedor-slider-fondo {
        width: 90%;
        left: auto;
    }
    
    #login #usuario, #login #email {
        margin-left: 95px;
    }
    #login input[type="submit"], #login button {
        margin-left: 0;
        width: 30%;
    }

    #login input[type="email"], #login input[type="password"] {
        width: 50%;
    }

    #lateral input[type="text"] {
        width: 50%;
    }

    #login input[type="checkbox"] {
        margin-left: 120px;
    }

    #search {
        width: 15%;
    }
}

@media (max-width: 425px){
    #card {
      width: 130px;
    }
    .card-link {
        width: 90%;
        float: none;
        margin: 10px auto;
    }
    .card .category {
        font-size: 15px;
    }
    #productos h2, #services h2 {
        font-size: 20px;
    }
    /*.mb-4 img {
        width: 60%;
        margin: 20px;
    }*/

    #login #usuario, #login #email {
        margin-left: 90px;
    }

    .precio-moneda-servicios, .precio-moneda-productos, .precio-moneda-cursos {
        width: 50%;
    }
    .service-card-button {
        width: 50%;
    }
}

@media(max-width: 395px){
    #login #usuario, #login #email {
        margin-left: 85px;
    }
}

@media (max-width: 375px){
    #articles h2 {
        font-size: 16px;
    }
    #banner h1 {
        font-size: 12px;
    }

    #footer h5 {
        font-size: 20px;
    }
    /*.mb-4 img {
        width: 50%;
        margin: 15px;
    }*/
    #login input[type="submit"], #login button {
        margin-left: 0;
        width: 30%;

    }

    #login input[type="checkbox"] {
        margin-left: 80px;
    }

    #login #usuario, #login #email {
        margin-left: 75px;
    }
}

@media (max-width: 320px){
   /* .mb-4 img {
        max-width: 35%;
    }*/
    #articles h2, #productos h2, #services h2 {
        font-size: 14px;
    }

     #banner h1 {
        font-size: 11px;
    }

    .card .category, .card-link {
        font-size: 12px;
    }

    #card {
      width: 100px;
    }

    #articles article p {
        font-size: 14px;
    }

        #login input[type="submit"], #login button {
        margin-left: 0;
        width: 25%;

    }

    #login input[type="checkbox"] {
        margin-left: 70px;
    }

    .game-container {
        height: 200px !important;
    }

    #login #usuario, #login #email {
        margin-left: 65px;
    }
}

@media (max-width: 290px){
#login #usuario, #login #email {
        margin-left: 55px;
    }
}

@media (max-width: 200px){
    body {
        min-width: 200px;
    }
    .wrap {
        width: 98%;
    }
    /*.mb-4 img {
        width: 28%;
    }*/
    #articles article, .card, .aside-box, #footer .wrap > div {
        width: 100%;
    }
}