/* Waiting Dots */

.waitingdots:after {
  content: " .";
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: var(--rojo-fema);
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 0.25em 0 0 var(--rojo-fema), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%,
  100% {
    text-shadow: 0.25em 0 0 var(--rojo-fema), 0.5em 0 0 var(--rojo-fema);
  }
}

/* Regular */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url('../font/Raleway-Regular.woff2') format('woff2'), url('../font/Raleway-Regular.woff') format('woff');
}

/* Medium */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../font/Raleway-Medium.woff2') format('woff2'), url('../font/Raleway-Medium.woff') format('woff');
}

/* Bold */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../font/Raleway-Bold.woff2') format('woff2'), url('../font/Raleway-Bold.woff') format('woff');
}

/* Heavy (a.k.a. ExtraBold or Black, depende de la fuente) */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: url('../font/Raleway-Heavy.woff2') format('woff2'), url('../font/Raleway-Heavy.woff') format('woff');
}

:root {
    --fuente-blanca-fema: #BCBEC0;
    --fuente-negra-fema: #231F20;
    --fuente-gris-fema: #939598;
    --guindo-fema: #28070B;
    --gris-menu-fema: #5B5B5B;
    --gris-input-fema: #414143;
    --rojo-fema: #C10000;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
}

html,
body {
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
}

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #222;
}

body::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border: 2px solid #ddd;
    border-radius: 20px;
}

.topbar {
    position: relative;
    display: flex;
    justify-content: center;
    height: 120px;
    padding: 0 35px;
    background-color: var(--guindo-fema) !important;

    .container{
        /* position: absolute; */
        /* top: 0; */
        z-index:1000;
        display: flex;
        gap: 60px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1920px;
        height: 100%;
    
        .sec-logo {
            .hamburguesa{
                display:none;    
            }

            .menu-hamburguesa{
                display:none;
            }
        
            .logo {
                width: 246px;
                aspect-ratio: 16/6;
            }
        }

        .opciones {
            display: flex;
            gap: 40px;
            align-items: center;
            justify-content: center;

            .sec-busqueda {
                display: flex;
                align-items: center;
            
                & input {
                    height: 30px;
                    padding: 5px 0;
                    padding-left: 40px;
                    color: var(--fuente);
                    color: var(--fuente-blanca-fema);
                    background-color: var(--gris-input-fema);
                    border: unset;
                    border-radius: 20px;
                }

                & button {
                    position: absolute;
                    margin-left: 10px;
                    cursor: pointer;
                    background-color: transparent;
                    border: unset;
                
                    & i {
                        font-size: 20px;
                        color: var(--fuente-blanca-fema);
                    }
                }
            }
        
            .elementos {
                display: flex;
                gap: 40px;
            
                > a, span {
                    display: block;
                    color: var(--fuente-blanca-fema);
                    text-decoration: none;
                }

                & a:hover, span:hover {
                    color: var(--rojo-fema);
                    text-shadow: 0 0 1px var(--rojo-fema);
                    background-color: transparent;
                }
                
                span{
                    cursor: default;
                }
                
                .categorias{
                    position:absolute;
                    display:none;
                    flex-direction:column;
                    overflow-y:hidden;
                    background-color: var(--guindo-fema);
                    border-radius:5px;
                
                    &:hover{
                        display:flex !important;
                    }
                
                    & a{
                        display:block;
                        padding: 10px 20px;
                        color: var(--fuente-blanca-fema);
                        text-decoration:none;
                        
                        &:hover {
                            color: var(--rojo-fema);
                            text-shadow: 0 0 1px var(--rojo-fema);
                            background-color: transparent;
                        }
                    }
                }
                
                .menu-productos:hover{
                    .categorias{
                        display:flex !important;
                    }
                }
            }

            .sec-usuario{
                display:flex;
                gap: 25px;
                align-items: center;

                .nombre-usuario{
                    color:var(--fuente-blanca-fema);
                }

                .usuario {
                    position: relative;
                    .circulo {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        aspect-ratio: 1;
                        background-color: var(--fuente-blanca-fema);
                        border-radius: 50%;

                        & i {
                            font-size: 20px;
                            color: var(--gris-input-fema);
                        }
                    }

                    .sesion {
                        position: absolute;
                        top: 78px;
                        right: -9px;
                        z-index:1;
                        display: flex;
                        flex-direction: column;
                        width: 370px;
                        height: 0px;
                        padding: 0px !important;
                        padding: 20px;
                        overflow: hidden;
                        color: var(--fuente-blanca-fema);
                        text-align: center;
                        background-color: #222222ee;
                        border:unset;
                        border-radius: 10px;

                        .titulo{
                                display:flex;
                                justify-content:space-between;
                                
                                & p{
                                    margin-top:25px;
                                    font-size:20px;
                                }
                                
                                & div{
                                    width:50px;
                                }
                            } 

                        .bloque-registro{
                            display:none
                        }

                        .bloque-olvide-mi-contrasena{
                            display:none;
                            
                            .campos{
                                .grupo-codigo-olvcon{
                                    display:flex;

                                    #btnGenerarCodigoOlvCon{
                                        width:140px;
                                        height:30px;
                                        padding:3px;
                                        margin-top:0px;
                                        margin-left:10px;
                                        font-size:13px;
                                        cursor:pointer;
                                    }

                                    #btnGenerarCodigoOlvCon[disabled] {
                                        color: #ccc;
                                        pointer-events: none;
                                        background-color: #b36666;
                                    }
                                }
                            }
                        }
                            
                        .bloque-opciones{
                            display:flex;
                            flex-direction:column;
                            text-align:left;

                            & p {
                                display: none;
                                margin: 0;
                                text-align: center;
                            }

                            & a{
                                padding:10px;          
                                color: inherit;
                                text-decoration: none;
                                cursor:pointer;               

                                &:hover{
                                    background-color:gray;
                                    border-radius:7px;
                                }
                            }
                        }                  

                        & p {
                            display: block;
                            margin-bottom: 25px;
                            font-size: 25px;
                            color: #BFBFBF;
                            text-align: center;
                        }           

                        & form {
                            display:flex;
                            flex-direction:column;

                            .iti--allow-dropdown{
                                box-sizing:content-box;
                                margin-bottom:10px;
                                background-color:white;
                                border-radius:50px;
                            }

                            .iti--allow-dropdown:has(#txtTelefonoLogin:focus){
                                outline:3px solid #e32727;
                            }

                            #txtTelefonoLogin {
                                width: 100%;
                                &:focus{
                                    outline:none;
                                }
                            }

                            & input {
                                padding: 7px 15px;
                                margin-bottom: 10px;
                                border: unset;
                                border-radius: 15px;

                                &:focus{
                                    outline:3px solid #e32727;
                                }
                            }

                            & button {
                                padding: 5px;
                                margin-top:10px;
                                margin-bottom: 15px;
                                font-size: 15px;
                                color: white;
                                cursor:pointer;
                                background-color: #BE0102;
                                border: unset;
                                border-radius: 50px;
                            }

                            .opciones{
                                display:flex;
                                justify-content:space-around;
                                width:100%;
                                text-align:center;
                                & a {
                                    margin-right:10px;
                                    margin-bottom: 10px;
                                    margin-left:10px;
                                    font-size:18px !important;
                                    color: #e32727;
                                    text-decoration: underline;
                                    cursor:pointer;
                                }
                            }
                        }
                    }

                    .hoverSesion {
                        height: auto !important;
                        padding: 20px !important;
                        overflow: visible !important;
                        border: 1px solid #555555 !important;
                    }

                    .sesion{
                        .campos {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            /* width:330px;
                            margin-left:20px; */
                    
                            .titulo{
                                display:flex;
                                justify-content:space-between;
                                
                                & button{
                                    width:50px;
                                    padding-top:7px;
                                    padding-left:0;
                                    margin-top:0;
                                    margin-left:0;
                                    background-color:transparent;
                                    & i{
                                        font-size:25px;
                                    }
                                }
                                
                                & p{
                                    margin-top:25px;
                                    font-size:20px;
                                }
                                
                                & div{
                                    width:50px;
                                }
                            }                    

                            & p {
                                display: block;
                                margin-bottom: 25px;
                                font-size: 25px;
                                color: #BFBFBF;
                                text-align: center;
                            }
                    
                            & input {
                                box-sizing: border-box;
                                width: 100%;
                                padding: 7px 10px;
                                margin-bottom: 10px;
                                background-color: #E6E7E9;
                                border: unset;
                                border-radius: 8px;
                            }

                            .campo-password {
                                display:flex;
                                margin-bottom:10px;
                                background-color: #E6E7E9;
                                border-radius:7px;
                                & input
                                {
                                    margin-bottom:0;
                                
                                }
                            
                                & i{
                                    margin:0 7px;
                                    margin-top:7px;
                                    color:gray;
                                
                                    &:hover{
                                        color:red;
                                    }
                                }
                            }

                            .iti--allow-dropdown {
                                margin-bottom: 10px !important;
                            }
                    
                            #txtTelefono {
                                margin-bottom: 10px !important;
                            }

                            & select {
                                box-sizing: border-box;
                                width: 100%;
                                padding: 7px 15px;
                                margin-bottom: 15px;
                                -webkit-appearance: none;
                                appearance: none;
                                background-color: #E6E7E9;
                                background-image: url(../img/icono-select.png);
                                background-repeat: no-repeat;
                                background-position: right center;
                                background-size: 30px;
                                border: unset;
                                border-radius: 7px;
                            }
                        
                            .btn-prm{
                                margin-bottom:30px;
                            }

                            & button {
                                box-sizing: border-box;
                                display: block;
                                width: 100%;
                                padding: 5px;
                                margin-top:20px;
                                font-size: 17px;
                                color: white;
                                text-align: center;
                                background-color: #BE0102;
                                border: unset;
                                border-radius: 8px;
                            }

                            .grupo-codigo{
                                display:flex;

                                #btnGenerarCodigoMin{
                                    width:160px;
                                    height:30px;
                                    padding:3px;
                                    margin-top:0px;
                                    margin-bottom:0px;
                                    margin-left:10px;
                                    font-size:13px;
                                    cursor:pointer;
                                }

                                #btnGenerarCodigoMin[disabled] {
                                    color: #ccc;
                                    pointer-events: none;
                                    background-color: #b36666;
                                }
                            }
                        } 
                    }
                }
            }
        }
    }
}

.seccion-registro {
    display: flex;
    justify-content: center;
    padding: 0 35px;
    background-image: url('../img/seccion-registro.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;

    .container{
        display: flex;
        justify-content: center;
        max-width: 1920px;
        padding: 120px 0;

        .direccion {
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: end;
            justify-content: center;
        
            & p {
                color: #BFBFBF;
            }

            >div {
                display: grid;  
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
                align-items: center;
                max-width: 570px;
            }

        }

        .division {
            margin-left: 110px;
            margin-right: 110px;
            border: 2px solid #BFBFBF;
        }

        .registro {
            width: 50%;
        
            .campos {
                display: flex;
                flex-direction: column;
                justify-content: center;
                max-width: 570px;
            
                & p {
                    display: block;
                    margin-bottom: 25px;
                    font-size: 25px;
                    color: #BFBFBF;
                    text-align: center;
                }
            
                & input {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 7px 15px;
                    margin-bottom: 10px;
                    background-color: #E6E7E9;
                    border: unset;
                    border-radius: 8px;
                }

                .campo-password {
                    display:flex;
                    margin-bottom:10px;
                    background-color: #E6E7E9;
                    border-radius:7px;
                    & input
                    {
                        margin-bottom:0;
                        
                    }
                    
                    & i{
                        margin:0 7px;
                        margin-top:7px;
                        color:gray;
                        
                        &:hover{
                            color:red;
                        }
                    }
                }

                .iti--allow-dropdown {
                    margin-bottom: 10px !important;
                }
            
                /*#txtTelefono {
                    margin-bottom: 10px !important;
                }*/

                & select {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 7px 15px;
                    margin-bottom: 15px;
                    -webkit-appearance: none;
                    appearance: none;
                    background-color: #E6E7E9;
                    background-image: url(../img/icono-select.png);
                    background-repeat: no-repeat;
                    background-position: right center;
                    background-size: 30px;
                    border: unset;
                    border-radius: 7px;
                }

                & button {
                    box-sizing: border-box;
                    display: block;
                    width: 100%;
                    padding: 5px;
                    margin-top:20px;
                    font-size: 17px;
                    color: white;
                    text-align: center;
                    background-color: #BE0102;
                    border: unset;
                    border-radius: 8px;
                }

                .grupo-codigo{
                    display:flex;
                
                    & input{
                    
                    }

                    #btnGenerarCodigo{
                        width:190px;
                        height:30px;
                        padding:3px;
                        margin-top:0px;
                        margin-left:10px;
                        font-size:13px;
                        cursor:pointer;
                    }

                        #btnGenerarCodigo[disabled] {
                            color: #ccc;
                            pointer-events: none;
                            background-color: #b36666;
                        }
                }
            }
        }
        
    }
}

.seccion-terminos {
    .container{
        display: flex;
        gap: 10%;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        padding: 3.5% 0;
        margin:auto;
        background-color: var(--guindo-fema);
    
        .izq {
            & img {
                width: 240px;
            }
        }

        .der {
            width: 375px;

            .titulo {
                padding-bottom: 15px;
                font-weight:bold;
                color: var(--fuente-blanca-fema);
                
                .politica-privacidad{
                    color:var(--fuente-blanca-fema);
                }
            }

            .texto {
                line-height:1.3;
                color: var(--fuente-blanca-fema);
                text-align: justify;
                text-justify: inter-word;
                hyphens: auto;
            }
        }
    }
}

.container {
    .container {
        display: flex;
        justify-content: center;
        max-width: 1920px;
    }
}

.div-filtros {
    position: relative;
    display: flex;
    width: 25%;
    height: fit-content;
    margin: 0 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    
    .mostrar-filtros {
        display:none;

        .btn-mostrar-filtros {
            width: 100%;
            padding: 5px 55px;
            color: white;
            background-color: #58595b;
            border: none;

            &:hover{
                cursor: pointer;
            }
        }
    }

    .filtros {
        z-index: 9999;
        width: 100%;
        min-width: 260px;
        max-width: 450px;
        background-color: white;

        .titulo {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            padding: 20px 0;
            color: white;
            text-align: center;
            background-color: #231F20;

            img {
                width: 45px;
                aspect-ratio: 1;
            }
        }

        .categoria {
            display: flex;
            flex-direction: column;
            margin: 35px;
            text-align: center;
            background-color: #231F20;

            .lista-opciones {
                display: flex;
                flex-direction: column;
                width: 100%;
                color: white;

                > span {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    justify-content: space-between;
                    margin: 15px 25px;
                    user-select: none;

                    > span:hover {
                        color: #bd1f2d;
                        cursor: default;
                        background-color: transparent;
                    }
                }

                .div-opcion-filtro {
                    display: none;
                    /* flex-direction: column; */
                    overflow-y: hidden;
                    background-color: white;

                    &:hover {
                        display: block !important;
                    }

                    .opcion-filtro {
                        display: flex;
                        padding: 5px 10px;

                        & span {
                            display: block;
                            padding-left: 10px;
                            /* font-size: 16px; */
                            color: black;
                            text-wrap: nowrap;
                            text-decoration: none;

                            &:hover {
                                color: #bd1f2d;
                                text-shadow: 0 0 1px #bd1f2d;
                                cursor: pointer;
                                user-select: none;
                                background-color: transparent
                            }
                        }
                    }
                    
                }
            }
            
            .btn-ver-filtros {
                width: 100%;
                padding: 5px 15px;
                color: white;
                background-color: #58595b;
                border: none;

                &:hover{
                    cursor: pointer;
                }
            }
        }

        .reiniciar-filtros {
            padding: 0 35px 25px 35px;

            .btn-reiniciar-filtros {
                width: 100%;
                padding: 10px 15px;
                color: white;
                background-color: #ff0013;
                border: none;

                &:hover{
                    cursor: pointer;
                }
            }
        }
    }
}

.sin-resultados, .buscando-resultados, .error-resultados {
    margin-top: 30px;
    text-align: center;

    & i {
        font-size: 150px;
        color: black;
    }

    & p {
        margin-top: 30px;
        margin-bottom: 200px;
        font-size: 17px;
        color: black;
    }
}

.div-paginacion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin-top: 50px;

    .div-botones {
        display: flex;
        justify-content: space-around;

        .btn-paginacion {
            display: flex;
            gap:5px;
            align-items: center;
            padding: 5px 35px;
            color: white;
            cursor: pointer;
            background-color: #414042;
            border: unset;

            &:hover:not(:disabled) {
                background-color: #BE0102;
            }

            &:disabled {
                cursor: not-allowed;         /* cursor indica que no se puede interactuar */
                opacity: 0.5;                /* hace que el botón se vea apagado */
                filter: grayscale(50%);
            }
        }
    }

    .pagina-actual {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: end;

        input {
            width: 50px;
            text-align: center;
        }

        #totalPagina {
            border: unset;
        }
    }
}

.show {
    display: block !important;
}

@media screen and (max-width: 1400px) {
    .seccion-registro {
        .container {
            .division {
                margin-right: 25px;
                margin-left: 25px;
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    * {
        font-size: 14px;
    }

    .topbar {
        height: 100px;

        .container {
            gap: 30px;

            .sec-logo {
                .logo {
                    width: 206px;
                    /* margin-left: 100px; */
                }
            }

            .opciones {
                gap: 30px;

                .sec-busqueda {
                    & input {
                        height: 25px;
                    }

                    & button {
                        & i {
                            font-size: 18px;
                        }
                    }
                }

                .elementos {
                    gap: 30px;
                }

                .sec-usuario {
                    gap: 15px;

                    .usuario {
                        .circulo {
                            width: 35px;

                            & i {
                                font-size: 18px;
                            }
                        }
                    
                        .sesion {
                            top: 67px;

                            .bloque-login {
                                .titulo{
                                    & p {
                                        font-size:18px !important;
                                    }
                                }
                            }

                            .bloque-registro{
                                .campos{
                                    .titulo{
                                        & p {
                                            font-size:18px !important;
                                        }
                                    }
                                }
                            }

                            .bloque-olvide-mi-contrasena {
                                .campos{
                                    .titulo{
                                        & p {
                                            font-size:18px !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .seccion-terminos {
        .container{
            .izq {
                & img {
                    width: 270px;
                }
            }

            .der {
                width: 375px;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    .topbar {
        height: 80px;

        .container {
            gap: 25px;

            .sec-logo {
                .logo {
                    width: 176px;
                    /* margin-left: 50px; */
                }
            }

            .opciones {
                gap: 25px;
                /* margin-right: 50px; */

                .sec-busqueda {
                    & input {
                        height: 20px;
                    }

                    & button {
                        & i {
                            font-size: 16px;
                        }
                    }
                }

                .elementos {
                    gap: 25px;
                }

                .sec-usuario {
                    gap: 10px;

                    .usuario {
                        .circulo {
                            width: 30px;

                            & i {
                                font-size: 16px;
                            }
                        }
                        
                        .sesion {
                            top: 55px;
                        }
                    }
                }
            }
        }
    }

    .div-filtros {
        width: 95%;
        margin: auto;

        .mostrar-filtros {
            display: flex;
            height: 40px;

            .btn-mostrar-filtros{
                padding: 5px 55px;
                background-color: #ff0013;

                i {
                    padding-left: 5px;
                }
            }
        }

        .filtros {
            position: absolute;
            top: 40px;
            display: none;

            .categoria {
                margin: 10px;
            }
        }
    }
}

@media screen and (max-width: 920px) {
    * {
        font-size: 12px;
    }

    .topbar {
        .container {
            .sec-logo {
                display:flex;
                align-items:center;

                .hamburguesa{
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 35px;
                    aspect-ratio: 1;
                    /* margin-left: 50px; */
                    background-color: transparent;
                    border: 1px solid var(--fuente-blanca-fema);
                    border-radius: 5px;

                    & i {
                        font-size: 16px;
                        color:var(--fuente-blanca-fema);
                    }
                }
                
                .menu-hamburguesa{
                    position: absolute;
                    top: 65%;
                    left: 45px;
                    display:flex !important;
                    flex-direction:column;
                    height:0px;
                    padding:0px;
                    overflow-y:hidden;
                    background-color:#28070B;
                    border-radius:5px;
                    
                    & a{
                        padding:5px; 
                        font-size:14px;
                        color:var(--fuente-blanca-fema);
                        text-decoration:none;   
                    }
                }

                .logo {
                    width: 176px;
                    margin-left: 0;
                }
                
            }

            .opciones {
                .elementos {
                    display:none;
                }

                .sec-usuario {
                    gap: 10px;

                    .nombre-usuario{
                        display: none;
                    }

                    .usuario {
                        .circulo {
                            width: 30px;

                            & i {
                                font-size: 16px;
                            }
                        }
                        
                        .sesion {
                            .bloque-opciones {
                                p {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .seccion-terminos {
        .container{
            .izq {
                & img {
                    width: 200px;
                }
            }
        }
    }

    .sin-resultados, .buscando-resultados {
        margin-top: 70px;
        & i {
            font-size: 120px;
            color: white;
        }

        & p {
            margin-top: 30px;
            margin-bottom: 200px;
            font-size: 17px;
            color: white;
        }
    }
}

@media screen and (max-width: 768px) {
    body::-webkit-scrollbar {
        display: none;
    }
    
    .topbar {
        .container {
            .sec-logo {
                .hamburguesa{
                    width: 30px;

                    & i {
                        font-size: 14px;
                    }
                }
                
                .menu-hamburguesa{
                    top: 62%;
                    left: 20px;
                }

                .logo {
                    width: 146px;
                }
                
            }
        }
    }
    
    .seccion-registro {
        .container{
            display: flex;
            flex-direction:column;
            justify-content: center;
            padding-top: 20px;
            padding-bottom: 20px;
            margin:auto;

            .direccion {
                display:none;
            }

            .division {
                display: none;
            }

            .registro {
                width: 100%;
                max-width:650px;
                margin:auto;
        
                .campos {
                    display: flex;
                    flex-direction: column;
                    width:100%;
                    margin-left:0;

                    .campo-password {
                        display:flex;
                        margin-bottom:10px;
                        background-color: #E6E7E9;
                        border-radius:7px;
                        & input
                        {
                            margin-bottom:0;
                        
                        }
                    
                        & i{
                            margin:0 7px;
                            margin-top:7px;
                            color:gray;
                        
                            &:hover{
                                color:red;
                            }
                        }
                    }

                    .iti--allow-dropdown {
                        margin-bottom: 10px !important;
                    }
            
                    & select {
                        box-sizing: border-box;
                        width: 100%;
                        padding: 7px 15px;
                        margin-bottom: 15px;
                        -webkit-appearance: none;
                        appearance: none;
                        background-color: #E6E7E9;
                        background-image: url(../img/icono-select.png);
                        background-repeat: no-repeat;
                        background-position: right center;
                        background-size: 30px;
                        border: unset;
                        border-radius: 7px;
                    }

                    & button {
                        box-sizing: border-box;
                        display: block;
                        width: 100%;
                        padding: 5px;
                        margin-top:20px;
                        font-size: 17px;
                        color: white;
                        text-align: center;
                        background-color: #BE0102;
                        border: unset;
                        border-radius: 8px;
                    }

                    .grupo-codigo{
                        display:flex;

                        #btnGenerarCodigo{
                            width:160px;
                            height:30px;
                            padding:3px;
                            margin-top:0px;
                            margin-left:10px;
                            font-size:13px;
                            cursor:pointer;
                        }

                        #btnGenerarCodigo[disabled] {
                            color: #ccc;
                            pointer-events: none;
                            background-color: #b36666;
                        }
                    }
                }
            }
        }
    }

    .div-paginacion {
        margin-top: 10px;

        .div-botones {
            .btn-paginacion {
                padding: 5px 15px;
            }
        }

        .pagina-actual {
            input {
                width: 25px;
            }
        }
    }
}

@media screen and (max-width: 700px) {
    .seccion-terminos {
        .container{
            flex-direction:column-reverse;
    
            .izq {
                margin-top: 20px;
                text-align: center;

                & img {
                    width: 200px;
                }
            }

            .der {
                width: 80%;
                padding-top:15px;
                
                .titulo {
                    padding-bottom:15px;
                    margin-left:5%;
                }

                .texto {
                    margin-left:5%;
                }
            }
        }
    }
}

@media screen and (max-width: 515px) {
    * {
        font-size: 10px;
    }

    .topbar {
        height: 75px;
        padding: 0 25px;

        .container {
            .sec-logo {
                .hamburguesa{
                    width: 25px;

                    & i {
                        font-size: 12px;
                    }
                }
                
                .menu-hamburguesa{
                    top: 60%;
                }

                .logo {
                    width: 106px;
                }
            }

            .opciones {
                gap: 10px;

                .sec-busqueda {
                    input {
                        width: 100px;
                        font-size: 12px;
                    }
                }

                .sec-usuario {
                    .usuario {
                        .sesion {
                            top: 51px;
                            width: 278px !important;

                            .bloque-login {
                                form {
                                    .opciones {
                                        a {
                                            font-size:14px !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 400px) {    
    .topbar {
        height: 65px;
        padding: 0 10px;

        .container {
            gap: 5px;
            .sec-logo {
                .hamburguesa {
                    & i {
                        font-size: 12px;
                    }
                }
                
                .menu-hamburguesa{
                    top: 61%;
                    left: 5px;
                }
            }

            .opciones {
                .sec-busqueda {
                    input {
                        height: 15px;
                        padding-left: 25px;
                        font-size: 10px;
                    }

                    button {
                        margin-left: 6px;
                        & i {
                            font-size: 14px;
                        }
                    }
                }
                
                .sec-usuario {
                    .usuario {
                        .sesion {
                            top: 47px;
                        }
                    }
                }
            }
        }
    }

    .seccion-registro {
        
        padding: 0 20px;
    }

    .seccion-terminos {
        .container{
            .izq {
                & img {
                    width: 150px;
                }
            }
        }
    }
}