/*RESPONSIVE DE LAPTOP*/

@media(max-width: 1456px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        left: 21%;
        width: 58%;
    }

    .cardTitulo {
        font-size: 1rem;
    }

    .codigoIn {
        font-size: 1.5rem;
        right: 1%;
        bottom: 6%;
    }

    /*RESPONSIVE PEDIDO*/
    .divPedido {
        width: 35%;
        left: 35%;
        height: 50%;
    }

    /*RESPONSIVE PERFIL*/
    .divPerfil {
        height: 48%;
        top: 13%;
    }

    .about__img {
        width: 500px;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .divApartado {
        width: 37%;
        height: 42%;
    }
}

@media screen and (max-width: 1430px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        height: 60%;
        width: 60%;
        left: 20%;
    }
}

@media(max-width:1417px) {
    .divContenedorSeleccionCompra {
        width: 50%;
        right: 20%;
    }

    .divContenedorUsuarioCompra {
        height: 64.1%;
    }
}

@media screen and (max-width: 1399px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        height: 62%;
        width: 62%;
        left: 19%;
    }
}

@media screen and (max-width: 1374px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        height: 62%;
        width: 63%;
        left: 18.5%;
    }

    .textApartado {
        font-size: 2.1rem;
    }
}

@media(max-width: 1371px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .cardTitulo {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 1361px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        height: 63%;
        width: 65%;
        left: 17.5%;
    }

    /*RESPONSIVE PERFIL*/
    .divPerfil {
        height: 47%;
        top: 13%;
    }
}

@media screen and (max-width: 1341px) {
    .divContenedorUsuarioCompra {
        height: 68%;
    }
}

@media screen and (max-width: 1300px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        height: 64%;
        width: 70%;
        left: 15%;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }
}

@media(max-width: 1296px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .cardTitulo {
        font-size: 1rem;
    }
}

@media(max-width: 1230px) {
    .mapa iframe {
        width: 90%;
    }

    .divContenedorDesProducto {
        width: 75%;
    }
}

@media(max-width: 1200px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .codigoIn {
        font-size: 1.5rem;
        right: 1%;
        bottom: 6%;
    }

    /*RESPONSIVE PERFIL*/
    .divPerfil {
        height: 79%;
    }

    .titPerfil {
        left: 40%;
    }

    .submenu {
        width: 48%;
    }

    /*RESPONSIVE SIDEBAR Y CATEGORÍA*/
    .contenedorFiltros {
        width: 19%;
    }

    .datoCategorias {
        left: 20%;
    }

    .contenedorBanner {
        margin-left: 20%;
    }
}

@media(max-width: 1169px) {
    .divContenedorUsuarioCompra {
        height: 71.4%;
    }
}

@media(max-width: 1157px) {

    .pNombreUsuarioCompra,
    .pApellidoUsuarioCompra,
    .pCorreoUsuarioCompra,
    .pCelularUsuarioCompra {
        font-size: 1.1rem;
    }

    .divContenedorUsuarioCompra {
        height: 57.8%;
    }
}

@media screen and (max-width: 1150px) {

    /*RESPONSIVE LOGIN*/
    .contenedorLogin {
        left: 7%;
        width: 78%;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .textApartado {
        font-size: 1.7rem;
    }

    .numeroApartado {
        font-size: 1.7rem;
    }

    .textAgenteApartado {
        font-size: 1.7rem;
    }

    .divContenedorSeleccionCompra {
        width: 60%;
        right: 15%;
    }
}

@media(max-width: 1142px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .cardTitulo {
        font-size: 1.4rem;
    }
}

@media(max-width: 1113px) {
    .pUsuarioCompra {
        font-size: 1.3rem;
    }
}

@media(max-width: 1095px) {

    /*RESPONSIVE FILTROS CATEGORÍAS*/
    .tituloCategorias {
        left: 10%;
    }

    /*RESPONSIVE SIDEBAR Y CATEGORÍA*/
    .contenedorFiltros {
        width: 21%;
    }

    .datoCategorias {
        left: 22%;
    }

    .contenedorBanner {
        margin-left: 22%;
    }
}

@media(max-width: 1087px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .cardTitulo {
        font-size: 1.3rem;
    }
}

@media(max-width: 1032px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .cardTitulo {
        font-size: 1.2rem;
    }

    .texto {
        font-size: 1rem;
        font-family: "Menu";
    }
}

/*RESPONSIVE TABLET*/
@media(max-width: 999px) {

    /*RESPONSIVE DESCRIPCIÓN PRODUCTOS*/
    .codigoIn {
        font-size: 1.5rem;
        right: 1%;
        bottom: 6%;
    }
}

@media(min-width: 991px) {

    /*RESPONSIVE MENU*/
    .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: #014ba0;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
        width: 100%;
        visibility: visible;
    }

    .filtroBuscarMovil {
        display: none !important;
    }

    .filtroCarritoMovil {
        display: none !important;
    }

    .filtroFiltrosMovil {
        display: none !important;
    }
}

@media(max-width: 991px) {

    .cardTitulo {
        font-size: 1.6rem;
    }

    .contenedorFiltros,
    .datoCategorias {
        display: none !important;
    }

    .contenedorBanner {
        display: none;
    }

    .contenedorCards {
        margin-top: 0;
        top: 180px;
        left: 1%;
        width: 97%;
    }

    .btnPaginación {
        min-width: 34px;
        height: 36px;
        font-size: 13px;
        padding: 0 8px;
    }

    .btnPaginacionNav {
        min-width: 36px;
        height: 36px;
        font-size: 15px;
        padding: 0 10px;
    }

    .paginacionEllipsis {
        height: 36px;
        font-size: 13px;
    }

    .cardsProductos {
        margin-bottom: 80%;
        position: relative;
    }

    .divPaginacion {
        margin-bottom: 23%;
    }

    .submenu {
        width: 58%;
    }

    .equipo1 img {
        width: 70%;
    }

    .divContenedorDesProducto {
        top: 3%;
        width: 78%;
        max-height: 93vh;
        transform: translateX(-50%) scale(0);
    }

    .divContenedorDesProducto.active-ContenedorDesProducto {
        transform: translateX(-50%) scale(1);
    }

    .divContenedorInfoDesProducto {
        width: 100%;
        border-left: none;
        border-top: 1px solid #dce7f9;
        padding: 0 16px;
        overflow-x: hidden;
    }

    /* Flechas superpuestas sobre la imagen en tablet/móvil */
    .divImgsDesProducto {
        position: relative;
        min-height: 0;
    }

    .divImgsDesProducto > .col-1 {
        width: 0;
        padding: 0;
        overflow: visible;
        flex: none;
    }

    .divImgsDesProducto > .col-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .btnNavDesProducto {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    #atrasDesProducto {
        left: 10px;
    }

    #adelanteDesProducto {
        right: 10px;
    }

    .divImgDesProductos {
        min-height: 0;
    }

    .imgDesProducto {
        max-height: 220px;
    }

    .contadorImagenesDiv {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .divInfoDesProducto {
        height: auto;
        padding: 6px 0 2px;
    }

    .pMarcaDesProducto,
    .pDisponibleDesProducto {
        margin-top: 0;
        font-size: 1.15rem;
    }

    .divPreDesProducto {
        height: auto;
        padding: 2px 0;
    }

    .pPrecioDesProducto {
        margin-top: 0;
        font-size: 1.2rem;
    }

    .sPrecioDesProducto {
        font-size: 1.5rem;
    }

    .divCantDesProducto {
        height: auto;
        padding: 2px 0;
    }

    .pCantidadDesProducto {
        font-size: 1.15rem;
        margin: 0;
    }

    .divDesDesProducto {
        height: auto;
        padding: 2px 0;
    }

    .pDesDesProducto {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .divInfoDesDesProducto {
        height: auto;
    }

    .iDesDesProducto {
        min-height: 80px;
        margin-top: 4px;
    }

    .divCodDesProducto {
        height: auto;
        padding: 2px 0;
    }

    .pCodDesProducto {
        margin-top: 0;
        font-size: 1.2rem;
    }

    .btnDesProductos {
        height: auto;
        padding: 8px 4px 14px;
    }

    .bApartarDesProducto,
    .bAgregarDesProducto {
        margin-top: 0;
        padding: 8px 0;
        font-size: 1rem;
    }

    .xDesProducto {
        width: 28px;
        margin-left: 0;
    }

    .divContenedorSeleccionCompra {
        width: 30%;
        right: 35%;
        top: 20%;
        height: 77%;
    }

    .divTitSeleccionCompra {
        height: 60px;
    }

    .pSeleccionCompra {
        font-size: 1.2rem;
    }

    .xSeleccionCompra {
        top: 2%;
        left: 85%;
        width: 10%;
    }

    .registrarseSeleccionCompra {
        width: 50%;
        height: 50%;
        margin-left: 25%;
        margin-top: 5%;
    }

    .iniciarSeleccionCompra {
        width: 50%;
        height: 50%;
        margin-left: 25%;
        margin-top: 5%;
    }

    .invitadoSeleccionCompra {
        width: 50%;
        height: 50%;
        margin-left: 25%;
        margin-top: 5%;
    }

    .pRSeleccionCompra {
        margin-left: 33%;
    }

    .pISeleccionCompra {
        margin-left: 28.5%;
    }

    .pInSeleccionCompra {
        margin-left: 24%;
    }

    .divContenedorUsuarioCompra {
        height: 58%;
        width: 30%;
    }
}

@media screen and (max-width: 916px) {
    .divPedido {
        width: 50%;
        left: 25%;
        height: 50%;
    }

    .divApartado {
        width: 50%;
        height: 42%;
        left: 26%;
    }
}

@media screen and (max-width: 870px) {

    .texto {
        font-size: 0.9rem;
        font-family: "Menu";
    }
}

@media screen and (max-width: 817px) {
    .contenedorLogin {
        left: 3%;
        width: 90%;
        height: 65%;
    }

    .divPerfil {
        height: 79%;
        width: 40%;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .divContenedorUsuarioCompra {
        height: 58.8%;
        width: 40%;
        right: 30%;
    }
}

@media(max-width: 786px) {
    .cardTitulo {
        font-size: 1.5rem;
    }
}

/*RESPONSIVE MÓVIL PEQUEÑO - 1 CARD CENTRADA*/
@media(max-width: 575px) {
    .divCards {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*RESPONSIVE MOVIL*/
@media(max-width: 768px) {

    .descripcionImg {
        width: 90%;
        left: 12%;
        height: 140px;
        margin-top: 15%;
    }

    .disponible {
        font-size: 0.8rem;
    }

    .precio {
        font-size: 0.8rem;
    }

    .codigoIn {
        font-size: 1rem;
        right: 1%;
        bottom: 7%;
    }

    .submenu {
        width: 84%;
    }

    .tableCarrito th {
        font-size: 0.9rem;
    }

    .tableCarrito tr {
        font-size: 0.85rem;
    }

    .divTerminos {
        left: 20%;
    }

    .icon-closeTerminos {
        width: 7%;
    }

    .pregunta {
        font-size: 1.3rem;
    }

    .titulo {
        font-size: 1.6rem;
    }

    .divContenedorDesProducto {
        width: 92%;
    }

    .divContenedorSeleccionCompra {
        top: 20%;
        right: 27%;
        height: 75%;
        width: 40%;
    }
}

@media(max-width: 675px) {
    .contenedor1 {
        margin-top: 100px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .contenedor2,
    .contenedor3,
    .contenedor4,
    .contenedor6 {
        padding-left: 4%;
        padding-right: 4%;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .pregunta {
        display: block;
        word-break: break-word;
    }

    .divTexto {
        text-align: center;
    }

    .titEquipo {
        font-size: 1.5rem;
    }

    .titUbicación {
        font-size: 1.5rem;
    }

    .titHorario {
        font-size: 1.5rem;
    }

    .titHorario1 {
        font-size: 1.3rem;
    }

    .divApartado {
        width: 70%;
        height: 42%;
        left: 16%;
    }
}

@media screen and (max-width: 650px) {
    .contenedorLogin {
        width: 92%;
        top: 8%;
        height: 84%;
        left: 4%;
        margin: 0;
    }

    .form-box {
        bottom: 0;
        width: 100%;
        height: 72%;
    }

    .contenedorLogin.active .form-box {
        right: 0;
        bottom: 28%;
    }

    .toggle-box::before {
        left: 0;
        top: -272%;
        width: 100%;
        height: 300%;
        border-radius: 0 0 50% 50% / 0 0 40px 40px;
    }

    .contenedorLogin.active .toggle-box::before {
        left: 0;
        top: 72%;
    }

    .toggle-panel {
        width: 100%;
        height: 28%;
    }

    .contenedorLogin.active .toggle-panel.toggle-left {
        left: 0;
        top: -28%;
    }

    .contenedorLogin.active .toggle-panel.toggle-right {
        bottom: 0;
    }

    .toggle-panel.toggle-left {
        top: 0;
    }

    .toggle-panel.toggle-right {
        right: 0;
        bottom: -28%;
    }

    .divPerfil {
        width: 50%;
    }

    .titPerfil {
        left: 38%;
    }

    .pregunta {
        font-size: 1rem;
    }

    .titulo {
        font-size: 1.2rem;
    }

    .texto {
        font-size: 0.8rem;
    }

    .divContenedorDesProducto {
        width: 94%;
    }

    /* Login - reducir padding y ajustar internos */
    .form-box {
        padding: 20px 16px;
        align-items: flex-start;
    }

    .formLoginRegister {
        height: 100%;
        overflow-y: auto;
    }

    .iconLogin {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin: 0 auto 8px;
    }

    .titLogin {
        font-size: 20px;
        margin: 0 0 10px 0;
    }

    .loginUsuario,
    .loginApellidos,
    .loginFechaN,
    .loginCedula,
    .loginMovil,
    .loginEmail,
    .loginPass,
    .loginPass2 {
        margin: 6px 0;
    }

    .loginUsuario input,
    .loginApellidos input,
    .loginFechaN input,
    .loginCedula input,
    .loginMovil input,
    .loginEmail input,
    .loginPass input,
    .loginPass2 input {
        padding: 11px 44px 11px 14px;
        font-size: 16px;
    }

    .btnLogin,
    .btnRegister {
        height: 42px;
        font-size: 16px;
        margin-top: 8px;
    }

    .forgot-link {
        margin: -6px 0 10px;
    }

    /* Panel azul - ajustar texto al 30% de altura */
    .toggle-panel h1 {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }

    .toggle-panel p {
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

    .toggle-panel .btn {
        padding: 7px 20px;
        font-size: 13px;
    }
}

@media(max-width: 630px) {

    .divContenedorSeleccionCompra {
        height: 70%;
    }

    .pRSeleccionCompra {
        margin-left: 30%;
    }

    .pISeleccionCompra {
        margin-left: 27%;
    }

    .pInSeleccionCompra {
        margin-left: 20%;
    }
}

@media(max-width: 610px) {

    .codigoIn {
        font-size: 1rem;
        right: 1%;
        bottom: 7%;
    }

    .divContenedorUsuarioCompra {
        height: 69.1%;
        width: 55%;
        right: 25%;
    }
}

@media(max-width: 576px) {

    .codigoIn {
        font-size: 1rem;
        right: 1%;
        bottom: 7%;
    }


}

@media(max-width: 550px) {

    .textInfoPerfil {
        font-size: 0.9rem;
    }

    .equipo1 img {
        width: 100%;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .divContenedorSeleccionCompra {
        height: 65%;
        top: 21%;
    }

    .pRSeleccionCompra {
        margin-left: 25%;
    }

    .pISeleccionCompra {
        margin-left: 22%;
    }

    .pInSeleccionCompra {
        margin-left: 15%;
    }

}

@media(max-width: 532px) {

    .divTerminos {
        left: 10%;
        width: 80%;
    }

    .icon-closeTerminos {
        width: 7%;
    }

    .divContenedorDesProducto {
        width: 96%;
    }
}

@media(max-width: 515px) {

    .divTexto {
        text-align: center;
    }

    .texto {
        font-size: 1rem;
    }

    .titulo {
        font-size: 1.4rem;
    }

    .pregunta {
        font-size: 1.4rem;
    }
}

@media(max-width: 501px) {

    .descripcionImg {
        width: 90%;
        height: 200px;
        margin-top: 0%;
        left: 15%;
    }

    .disponible {
        font-size: 1.2rem;
    }

    .precio {
        font-size: 1.2rem;
    }

}

@media(max-width: 498px) {

    .codigoIn {
        font-size: 1rem;
        right: 1%;
        bottom: 7%;
    }
}

@media screen and (max-width: 490px) {

    .divPerfil {
        width: 65%;
    }

    .submenu {
        width: 94%;
    }

    .tableCarrito th {
        font-size: 0.8rem;
    }

    .tableCarrito tr {
        font-size: 0.8rem;
    }

    .tableCarrito th:first-child,
    .tableCarrito td:first-child {
        display: none;
    }

    .divContenedorSeleccionCompra {
        height: 60%;
        top: 24%;
    }

    .pRSeleccionCompra {
        margin-left: 22%;
    }

    .pISeleccionCompra {
        margin-left: 19%;
    }

    .pInSeleccionCompra {
        margin-left: 12%;
    }
}

@media(max-width: 469px) {

    .equipo1 img {
        width: 100%;
    }

    .textInfoPerfil {
        font-size: 0.8rem;
    }
}

@media(max-width: 467px) {

    .codigoIn {
        font-size: 1rem;
        right: 1%;
        bottom: 7%;
    }

    .textApartado {
        font-size: 1.5rem;
    }

    .numeroApartado {
        font-size: 1.5rem;
    }

    .textAgenteApartado {
        font-size: 1.5rem;
    }

    .divApartado {
        width: 70%;
        height: 35%;
        left: 16%;
    }
}

@media screen and (max-width: 455px) {

    .divPerfil {
        width: 65%;
        height: 78%;
    }

    .codigoIn {
        color: #fff;
    }
}

@media screen and (max-width: 447px) {

    .divContenedorUsuarioCompra {
        height: 69.1%;
        width: 75%;
        right: 12%;
        top: 15%;
    }
}

@media(max-width: 437px) {
    .divContenedorSeleccionCompra {
        height: 56%;
        top: 24%;
    }

    .pSeleccionCompra {
        font-size: 1.1rem;
    }

    .pRSeleccionCompra {
        margin-left: 20%;
    }

    .pISeleccionCompra {
        margin-left: 17%;
    }

    .pInSeleccionCompra {
        margin-left: 10%;
    }
}

@media(max-width: 433px) {

    .equipo1 img {
        width: 100%;
    }

    .textInfoPerfil {
        font-size: 0.7rem;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

    .xDesProducto {
        width: 28px;
        margin-left: 0;
    }
}

@media(max-width: 421px) {

    .codigoIn {
        font-size: 0.7rem;
        right: 1%;
        bottom: 7%;
    }

    .submenu {
        width: 97%;
    }

    .divApartado {
        width: 80%;
        height: 35%;
        left: 10%;
    }
}

@media(max-width: 406px) {
    .divContenedorSeleccionCompra {
        height: 56%;
        top: 24%;
    }

    .pSeleccionCompra {
        margin-left: 17%;
        font-size: 1rem;
    }

    .pRSeleccionCompra {
        font-size: 1rem;
        margin-left: 24%;
    }

    .pISeleccionCompra {
        margin-left: 19%;
        font-size: 1rem;
    }

    .pInSeleccionCompra {
        margin-left: 13%;
        font-size: 1rem;
    }
}


@media(max-width: 401px) {

    .codigoIn {
        font-size: 0.7rem;
        right: 1%;
        bottom: 7%;
    }

    .contenedorLogin {
        width: 79%;
        top: 15%;
        height: 80%;
        left: 8%;
    }

    .toggle-panel h1 {
        font-size: 30px;
    }

    .divTerminos {
        left: 5%;
        width: 90%;
    }

    .icon-closeTerminos {
        width: 9%;
    }

    .textInfoPerfil {
        font-size: 0.6rem;
    }

}



@media(max-width: 379px) {
    .pCantidadDesProducto {
        font-size: 1.2rem;
        margin-top: 3%;
    }
}


@media(max-width: 368px) {
    .cardTitulo {
        font-size: 1.3rem;
    }

    .codigoIn {
        font-size: 0.7rem;
        right: 1%;
        bottom: 7%;
    }

    .divContenedorSeleccionCompra {
        height: 50%;
        top: 24%;
    }

    .pSeleccionCompra {
        margin-left: 17%;
        font-size: 1rem;
    }

    .pRSeleccionCompra {
        font-size: 1rem;
        margin-left: 24%;
    }

    .pISeleccionCompra {
        margin-left: 19%;
        font-size: 1rem;
    }

    .pInSeleccionCompra {
        margin-left: 13%;
        font-size: 1rem;
    }
}

@media(max-width: 364px) {
    .divContenedorSeleccionCompra {
        height: 50%;
        top: 24%;
    }

    .pSeleccionCompra {
        margin-left: 17%;
        font-size: 0.9rem;
    }

    .pRSeleccionCompra {
        font-size: 1rem;
        margin-left: 24%;
    }

    .pISeleccionCompra {
        margin-left: 19%;
        font-size: 1rem;
    }

    .pInSeleccionCompra {
        margin-left: 13%;
        font-size: 1rem;
    }
}

@media(max-width: 361px) {

    .textInfoPerfil {
        font-size: 0.5rem;
    }

    .contenedor4 {
        margin-bottom: 2%;
    }

}

@media(max-width: 356px) {

    .disponible {
        font-size: 1rem;
    }

    .precio {
        font-size: 1rem;
    }

}

@media(max-width: 330px) {
    .xDesProducto {
        width: 28px;
        margin-left: 0;
    }
}

@media(max-width: 315px) {

    .pMarcaDesProducto,
    .sMarcaDesProducto,
    .pDisponibleDesProducto,
    .pPrecioDesProducto,
    .sPrecioDesProducto {
        font-size: 1.2rem;
    }
}

/* ===== MODAL VISTA PREVIA — RESPONSIVE UNIFICADO ===== */

@media(max-width: 768px) {
    .divContenedorDesProducto {
        top: 50%;
        width: 80%;
        max-height: 78vh;
        transform: translate(-50%, -50%) scale(0);
    }

    .divContenedorDesProducto.active-ContenedorDesProducto {
        transform: translate(-50%, -50%) scale(1);
    }

    .pDesProducto {
        font-size: 1.1rem;
    }

    .pMarcaDesProducto,
    .pDisponibleDesProducto {
        font-size: 1.05rem;
    }

    .pPrecioDesProducto {
        font-size: 1.1rem;
    }

    .sPrecioDesProducto {
        font-size: 1.4rem;
    }

    .imgDesProducto {
        max-height: 160px;
    }

    .iDesDesProducto {
        min-height: 70px;
    }
}

@media(max-width: 480px) {
    .divContenedorDesProducto {
        top: 50%;
        width: 88%;
        max-height: 80vh;
        transform: translate(-50%, -50%) scale(0);
    }

    .divContenedorDesProducto.active-ContenedorDesProducto {
        transform: translate(-50%, -50%) scale(1);
    }

    .divTitDesProducto {
        height: 52px;
    }

    .pDesProducto {
        font-size: 1rem;
    }

    .pMarcaDesProducto,
    .pDisponibleDesProducto {
        font-size: 1rem;
    }

    .sMarcaDesProducto {
        font-size: 1rem;
    }

    .pPrecioDesProducto {
        font-size: 1.1rem;
    }

    .sPrecioDesProducto {
        font-size: 1.4rem;
    }

    .pCantidadDesProducto {
        font-size: 1rem;
    }

    .imgDesProducto {
        max-height: 170px;
    }

    .iDesDesProducto {
        min-height: 60px;
    }

    .bApartarDesProducto,
    .bAgregarDesProducto {
        font-size: 0.9rem;
        padding: 8px 0;
    }
}
/* ===== RESPONSIVE LOGIN - TABLET (layout horizontal apretado) ===== */
@media screen and (max-width: 817px) {
    .form-box {
        padding: 28px 22px;
    }

    .titLogin {
        font-size: 22px;
    }

    .loginUsuario input,
    .loginApellidos input,
    .loginFechaN input,
    .loginCedula input,
    .loginMovil input,
    .loginEmail input,
    .loginPass input,
    .loginPass2 input {
        font-size: 14px;
        padding: 11px 44px 11px 14px;
    }
}

/* ===== RESPONSIVE LOGIN - TELÉFONO PEQUEÑO ===== */
@media screen and (max-width: 420px) {
    .contenedorLogin {
        width: 96%;
        left: 2%;
        top: 6%;
        height: 88%;
    }

    .form-box {
        padding: 14px 12px;
    }

    .iconLogin {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin: 0 auto 6px;
    }

    .titLogin {
        font-size: 17px;
        margin: 0 0 8px 0;
    }

    .loginUsuario,
    .loginApellidos,
    .loginFechaN,
    .loginCedula,
    .loginMovil,
    .loginEmail,
    .loginPass,
    .loginPass2 {
        margin: 5px 0;
    }

    .loginUsuario input,
    .loginApellidos input,
    .loginFechaN input,
    .loginCedula input,
    .loginMovil input,
    .loginEmail input,
    .loginPass input,
    .loginPass2 input {
        padding: 10px 40px 10px 12px;
        font-size: 15px;
        border-radius: 10px;
    }

    .btnLogin,
    .btnRegister {
        height: 38px;
        font-size: 15px;
    }

    .toggle-panel h1 {
        font-size: 1.1rem;
    }

    .toggle-panel p {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .toggle-panel .btn {
        padding: 6px 16px;
        font-size: 12px;
    }
}

/* ===== RESPONSIVE SOMOS - HORARIO ===== */
@media(max-width: 650px) {
    .horarioCard {
        padding: 22px 16px;
    }

    .horarioIcon {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .horarioDias {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .horarioHoras {
        font-size: 0.9rem;
    }
}

@media(max-width: 420px) {
    .horarioCard {
        padding: 18px 12px;
    }

    .horarioIcon {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }

    .horarioDias {
        font-size: 1.1rem;
    }

    .horarioHoras {
        font-size: 0.85rem;
    }
}

/* ===== RESPONSIVE SOMOS - CARRUSEL MARCAS ===== */
@media(max-width: 768px) {
    .contenedor5 {
        perspective: 700px;
        height: 240px;
    }

    .tarjeta {
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        animation-name: CarruselMd;
        border-radius: 10px;
    }

    .tarjeta h3 {
        font-size: 9px;
        padding: 4px 3px;
        border-radius: 0 0 8px 8px;
    }

    @keyframes CarruselMd {
        from {
            transform: rotateY(360deg) translateZ(340px);
            z-index: 10;
        }
        50% {
            z-index: -10;
        }
        to {
            transform: rotateY(0deg) translateZ(340px);
            z-index: 10;
        }
    }
}

@media(max-width: 480px) {
    .contenedor5 {
        perspective: 550px;
        height: 200px;
    }

    .tarjeta {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px;
        animation-name: CarruselSm;
        border-radius: 8px;
    }

    .tarjeta h3 {
        font-size: 8px;
        padding: 3px 2px;
        border-radius: 0 0 6px 6px;
    }

    @keyframes CarruselSm {
        from {
            transform: rotateY(360deg) translateZ(270px);
            z-index: 10;
        }
        50% {
            z-index: -10;
        }
        to {
            transform: rotateY(0deg) translateZ(270px);
            z-index: 10;
        }
    }
}