@media (min-width: 1250px) { .grid { display: grid; grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1120px) and (max-width: 1250px) { .grid { display: grid; grid-template-columns: repeat(3, 1fr); } } @media (min-width: 600px) and (max-width: 1120px) { .grid { display: grid; grid-template-columns: repeat(2, 1fr); } } p.price { color: #5abf5a; font-size: 1.2em; } .card .card-img-top { height: 250px; object-fit: cover; object-position: center; } .card-producto:hover { transform: translate(10px, 10px); box-shadow: -10px -10px rgba(93, 93, 93, 0.1882352941); transition: transform 0.25s, box-shadow 0.25s; } .card-producto { transition: transform 0.25s, box-shadow 0.25s; } .container-fluid .header { background-color: #513CB0; color: #FFF; justify-content: center; align-items: center; } .container-fluid .header img { width: 50%; border-radius: 10px; } .navbar.header { background-color: #513CB0 !important; color: #FFF; } .navbar.header .navbar-brand img { border-radius: 10px; } .navbar.header .navbar-brand { color: #FFF !important; } .navbar.header .navbar-toggler { border-color: #FFF !important; } .navbar.header .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar.header .nav-link { color: #FFF !important; } .navbar.header .btn-outline-primary { color: #FFF !important; border-color: #FFF !important; } .navbar.header .btn-outline-primary:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #FFF !important; } .navbar.header .btn-outline-secondary { color: #FFF !important; border-color: #FFF !important; } .navbar.header .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #FFF !important; } .navbar.header .btn-primary { background-color: rgba(255, 255, 255, 0.2) !important; border-color: #FFF !important; color: #FFF !important; } .navbar.header .btn-primary:hover { background-color: rgba(255, 255, 255, 0.3) !important; color: #FFF !important; } @media (max-width: 1450px) { #sidebar { position: fixed; left: -300px; top: 0; height: 100vh; width: 280px; background: white; z-index: 1050; transition: left 0.3s ease; overflow-y: auto; padding: 2rem 1rem; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } #sidebar.active { left: 0; } .sidebar-toggle { display: inline-block !important; margin-right: 0.5rem; } .sidebar-toggle .navbar-toggler-icon { font-size: 1.2rem; font-style: normal; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1040; opacity: 0; transition: opacity 0.3s ease; } .sidebar-overlay.active { display: block; opacity: 1; } .sidebar-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; font-size: 2rem; color: #FC3F44; cursor: pointer; padding: 0; width: 30px; height: 30px; line-height: 1; transition: transform 0.3s ease; } .sidebar-close:hover { transform: rotate(90deg); } } @media (min-width: 1451px) { .sidebar-toggle { display: none !important; } .sidebar-close { display: none; } .sidebar-overlay { display: none !important; } } #sidebar .categorias-titulo { color: #361DA7; font-weight: 700; margin-bottom: 1.2rem; padding-bottom: 0.5rem; border-bottom: 3px solid #FC3F44; text-transform: uppercase; letter-spacing: 1px; } #sidebar .categorias-lista { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; } #sidebar .categoria-item { border: none; border-bottom: 1px solid #f0f0f0; padding: 1rem 1.2rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.8rem; } #sidebar .categoria-item:last-child { border-bottom: none; } #sidebar .categoria-item .categoria-icono { font-size: 1.5rem; transition: transform 0.3s ease; } #sidebar .categoria-item span { font-weight: 500; color: #333; transition: color 0.3s ease; } #sidebar .categoria-item:hover { background: linear-gradient(135deg, #FE8D90 0%, #FC3F44 100%); color: white; transform: translateX(5px); box-shadow: 0 4px 12px rgba(252, 63, 68, 0.3); } #sidebar .categoria-item:hover span { color: white; } #sidebar .categoria-item:hover .categoria-icono { transform: scale(1.2); } #sidebar .categoria-item:active { transform: translateX(3px) scale(0.98); } #footer { background-color: rgb(149, 141, 141); color: black; } #carouselProducto .carousel-inner { height: 500px; background-color: #f8f9fa; } #carouselProducto .carousel-item { height: 500px; } #carouselProducto .carousel-item img { height: 100%; object-fit: contain; object-position: center; } /* Estilos para el footer */ .footer-link { color: inherit; text-decoration: none; } .footer-link:hover { text-decoration: underline; } /* Estilos para páginas legales / informativas */ .legal-container { max-width: 860px; margin: 2rem auto; padding: 0 1rem; } .legal-container h1 { margin-bottom: 1.5rem; } .legal-section { margin-bottom: 2rem; } .legal-section h2 { font-size: 1.2rem; margin-bottom: 0.75rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25rem; } .legal-section h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.4rem; } .legal-footer { margin-top: 2rem; color: #6c757d; } /*# sourceMappingURL=custom.css.map */