@media (min-width: 1080px) {


    .div-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-image: url("../media/banner_web.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Asegura que el menú ocupe todo el ancho */
        z-index: 1000;
        /* Garantiza que el menú esté por encima de otros elementos */
        height: 160px;
        border-bottom: 2px solid var(--blanco);
    }

    .cssbuttons-io-button {
        background: var(--rojo);
        color: var(--blanco);
        font-family: "MiFuente", sans-serif;
        padding: 0.35em;
        padding-left: 1.2em;
        font-size: 16px;
        font-weight: 500;
        border-radius: 0.9em;
        border: none;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        box-shadow: inset 0 0 1.6em -0.6em var(--rojo);
        overflow: hidden;        
        height: 2.8em;
        padding-right: 3.3em;
        cursor: pointer;
        width: 10%;
        margin-right: 20px;
        position: absolute;
        top: 200px;
        right: 0;
        z-index: 100;
    }

    .cssbuttons-io-button .icon {
        background: var(--blanco);
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.2em;
        width: 2.2em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em var(--rojo);
        right: 0.3em;
        transition: all 0.3s;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: var(--rojo);
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }
}

@media (min-width: 600px) and (max-width:1079px) {


    .div-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../media/banner_web.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Asegura que el menú ocupe todo el ancho */
        z-index: 1000;
        /* Garantiza que el menú esté por encima de otros elementos */
        height: 150px;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 2px solid var(--blanco);
    }

    .cssbuttons-io-button {
        background: var(--rojo);
        color: var(--blanco);
        font-family: "MiFuente", sans-serif;
        padding: 0.35em;
        padding-left: 1.2em;
        font-size: 12px;
        font-weight: 500;
        border-radius: 0.9em;
        border: none;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        box-shadow: inset 0 0 1.6em -0.6em var(--rojo);
        overflow: hidden;        
        height: 2em;
        padding-right: 3.3em;
        cursor: pointer;
        width:5rem;
        margin-right:5px;
        position: absolute;
        top: 10rem;
        right: 0;
        z-index: 100;
    }

    .cssbuttons-io-button .icon {
        background: var(--blanco);
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5em;
        width: 1.5em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em var(--rojo);
        right: 0.3em;
        transition: all 0.3s;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: var(--rojo);
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }


}

@media (max-width: 599px) {

    .div-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../media/banner_web.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Asegura que el menú ocupe todo el ancho */
        z-index: 1000;
        /* Garantiza que el menú esté por encima de otros elementos */
        height: 60px;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 2px solid var(--blanco);
    }

    .cssbuttons-io-button {
        background: var(--rojo);
        color: var(--blanco);
        font-family: "MiFuente", sans-serif;
        padding: 0.35em;
        padding-left: 1.2em;
        font-size: 12px;
        font-weight: 500;
        border-radius: 0.9em;
        border: none;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        box-shadow: inset 0 0 1.6em -0.6em var(--rojo);
        overflow: hidden;        
        height: 1.5rem;
        padding-right: 3.3em;
        cursor: pointer;
        width:5rem;
        margin-right:5px;
        position: absolute;
        top: 4.5rem;
        right: 0;
        z-index: 100;
        
    }

    .cssbuttons-io-button .icon {
        background: var(--blanco);
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5em;
        width: 1.5em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em var(--rojo);
        right: 0.3em;
        transition: all 0.3s;
        overflow-y: hidden;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: var(--rojo);
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }

}

/* Ajustes para cuando el dispositivo esté en modo horizontal */
@media (min-width: 600px) and (max-width:1079px) and (orientation: landscape) {


    .div-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../media/banner_web.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Asegura que el menú ocupe todo el ancho */
        z-index: 1000;
        /* Garantiza que el menú esté por encima de otros elementos */
        height: 80px;
        border-bottom: 2px solid var(--blanco);
    }

    .cssbuttons-io-button {
        background: var(--rojo);
        color: var(--blanco);
        font-family: "MiFuente", sans-serif;
        padding: 0.35em;
        padding-left: 1.2em;
        font-size: 12px;
        font-weight: 500;
        border-radius: 0.9em;
        border: none;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        box-shadow: inset 0 0 1.6em -0.6em var(--rojo);
        overflow: hidden;        
        height: 2em;
        padding-right: 3.3em;
        cursor: pointer;
        width:5rem;
        margin-right:10px;
        position: absolute;
        top: 6.5rem;
        right: 0;
        z-index: 100;
    }

    .cssbuttons-io-button .icon {
        background: var(--blanco);
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5em;
        width: 1.5em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em var(--rojo);
        right: 0.3em;
        transition: all 0.3s;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: var(--rojo);
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }

}