/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f5f6fa;
}

/* ========================= */
/* HEADER */
/* ========================= */

.header {
    background: #000;
    padding: 12px 0;
}

/* ========================= */
/* LOGO HEADER */
/* ========================= */

.logo {

height: 42px;

width: auto;

object-fit: contain;

}

/* si el logo está dentro de link */

.logo-area img {

height: 42px;

width: auto;

object-fit: contain;

}

/* responsive */

@media (max-width:768px){

.logo {

height: 36px;

}

}

.logo img {

height: 45px;

object-fit: contain;

}

.buscador-input {
    height: 45px;
    border-radius: 8px;
    border: none;
    padding-left: 15px;
}

/* ICONOS HEADER */

.header-icons {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
}

.header-icons a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    position: relative;
}

.header-icons i {
    font-size: 18px;
    margin-right: 6px;
}

/* CONTADOR CARRITO */

.cart-count {
    position: absolute;
    top: -6px;
    right: -12px;
    background: #a020f0;
    color: white;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 50%;
}

/* ========================= */
/* MENU */
/* ========================= */

.menu {
    background: #111;
}

.menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

.menu-item {
    position: relative;
    padding: 15px 25px;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

.menu-item:hover {
    background: #a020f0;
}

/* SUBMENU */

.submenu {
    display: none;
    position: absolute;
    background: white;
    min-width: 200px;
    top: 50px;
    left: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 100;
}

.submenu li {
    padding: 12px;
}

.submenu li a {
    text-decoration: none;
    color: #333;
}

.menu-item:hover .submenu {
    display: block;
}

/* ========================= */
/* BANNER */
/* ========================= */

.banner img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

/* ========================= */
/* PRODUCTOS */
/* ========================= */

.productos {
    margin-top: 40px;
}

.productos h2 {
    margin-bottom: 25px;
    font-weight: 700;
}

/* CARD PRODUCTO */

.producto-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    transition: 0.3s;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.producto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.producto-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.producto-nombre {
    font-size: 15px;
    margin-top: 10px;
    height: 45px;
}

.producto-precio {
    font-size: 18px;
    font-weight: bold;
    color: #a020f0;
    margin-top: 6px;
}

/* BOTON */

.btn-agregar {
    background: #a020f0;
    border: none;
    width: 100%;
    padding: 10px;
    color: white;
    border-radius: 8px;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-agregar:hover {
    background: #7a18c0;
}

/* ========================= */
/* CARRITO LATERAL */
/* ========================= */

.carrito {
    position: fixed;
    right: -400px;
    top: 0;
    width: 350px;
    height: 100%;
    background: white;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    transition: 0.3s;
    z-index: 999;
}

.carrito.activo {
    right: 0;
}

.carrito-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #000;
    color: white;
}

.carrito-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: white;
    border-top: 1px solid #ddd;
}

/* ========================= */
/* FOOTER */
/* ========================= */

.footer {
    background: #000;
    color: white;
    margin-top: 50px;
    padding: 40px 0;
}

.footer h5 {
    margin-bottom: 15px;
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 8px;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 768px) {

.menu ul {
    flex-direction: column;
}

.banner img {
    height: 200px;
}

.header-icons span {
    display: none;
}

}

/* ITEM CARRITO */

.item-carrito {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;

}

.item-carrito img {

    width: 50px;
    height: 50px;
    object-fit: contain;

}

.info-carrito p {

    font-size: 13px;
    margin-bottom: 3px;

}

.cantidad {

    display: flex;
    align-items: center;
    gap: 6px;

}

.cantidad button {

    border: none;
    background: #a020f0;
    color: white;
    padding: 3px 8px;
    border-radius: 5px;

}

.eliminar {

    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;

}

.total-carrito {

    padding: 15px;
    font-weight: bold;

}

/* ========================= */
/* MENU RESPONSIVE */
/* ========================= */

.submenu {

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;

}

.menu-item:hover .submenu {

    opacity: 1;
    visibility: visible;

}

/* SUBMENU ACTIVO CELULAR */

.submenu.activo {

    display: block;
    opacity: 1;
    visibility: visible;
    position: relative;
    top: 0;

}

/* ========================= */
/* MENU HAMBURGUESA */
/* ========================= */

.menu-toggle {

    display: none;
    font-size: 22px;
    color: white;
    cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {

.menu {

    position: relative;

}

.menu ul {

    flex-direction: column;
    display: none;
    background: #111;

}

.menu ul.activo {

    display: block;

}

.menu-item {

    padding: 15px;

}

.menu-toggle {

    display: block;
    padding: 12px;

}

}

/* ========================= */
/* SLIDER */
/* ========================= */

.slider {

position: relative;
overflow: hidden;
height: 320px;

}

.slides {

display: flex;
transition: transform 0.5s ease-in-out;

}

.slide {

width: 100%;
height: 320px;
object-fit: cover;

}

/* BOTONES */

.prev,
.next {

position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 12px 16px;
cursor: pointer;
font-size: 18px;
border-radius: 6px;

}

.prev {

left: 15px;

}

.next {

right: 15px;

}

.prev:hover,
.next:hover {

background: #a020f0;

}

/* MOBILE */

@media (max-width: 768px) {

.slider,
.slide {

height: 200px;

}

}

/* ========================= */
/* PRODUCTO DETALLE */
/* ========================= */

.producto-detalle {

margin-top: 40px;

}

.imagen-principal {

background: white;
padding: 20px;
border-radius: 10px;
text-align: center;

}

.imagen-principal img {

width: 100%;
height: 350px;
object-fit: contain;

}

.miniaturas {

display: flex;
gap: 10px;
margin-top: 15px;

}

.miniaturas img {

width: 70px;
height: 70px;
object-fit: contain;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 6px;
padding: 5px;

}

.precio-producto {

font-size: 28px;
font-weight: bold;
color: #a020f0;
margin: 15px 0;

}

.descripcion {

color: #555;
margin-bottom: 20px;

}

.btn-agregar-grande {

background: #a020f0;
color: white;
border: none;
padding: 15px 25px;
font-size: 18px;
border-radius: 10px;

}

.btn-agregar-grande:hover {

background: #7a18c0;

}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar {

background: #1a1a1a;
color: white;
font-size: 13px;

}

.top-bar .container {

display: flex;
justify-content: flex-end;

}

.top-bar-right {

display: flex;
gap: 25px;
padding: 8px 0;

}

/* LINKS */

.top-link {

color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: 0.3s;

}

.top-link:hover {

color: #a020f0;

}

/* ICONOS */

.top-link i {

font-size: 13px;

}

/* MOBILE */

@media (max-width: 768px) {

.top-bar-right {

gap: 15px;
font-size: 12px;

}

.top-link span {

display: none;

}

}

/* ========================= */
/* HEADER ICONS AJUSTES */
/* ========================= */

.header-icons {

display: flex;
justify-content: flex-end;
gap: 30px;

/* separación del borde derecho */

padding-right: 20px;

}


.whatsapp-header {

display: flex;

align-items: center;

gap: 8px;

color: white;

text-decoration: none;

font-size: 14px;

white-space: nowrap;

}

.whatsapp-header i {

font-size: 18px;

color: #25D366;

display: flex;

align-items: center;

justify-content: center;

width: 20px;

}

/* SEPARAR CONTENIDO DEL BORDE DERECHO */

.header .col-md-3 {
    padding-right: 40px;
}

/* ========================= */
/* FOOTER NUEVO */
/* ========================= */

.footer {

background: #000;
color: white;
padding: 40px 0;

text-align: center;

}

/* LINKS SUPERIORES */

.footer-top-links {

display: flex;
justify-content: center;
gap: 40px;

margin-bottom: 25px;

}

.footer-top-links a {

color: white;
text-decoration: none;
font-weight: 500;
transition: 0.3s;

}

.footer-top-links a:hover {

color: #a020f0;

}


/* NEWSLETTER */

.newsletter-box {

margin-bottom: 25px;

}

.newsletter-form {

display: flex;
justify-content: center;
gap: 10px;

margin-top: 10px;

}

.newsletter-form input {

width: 280px;

padding: 10px;

border-radius: 6px;

border: none;

}

.newsletter-form button {

background: #a020f0;

color: white;

border: none;

padding: 10px 18px;

border-radius: 6px;

font-weight: 500;

transition: 0.3s;

}

.newsletter-form button:hover {

background: #7a18c0;

}


/* REDES */

.footer-social {

display: flex;
justify-content: center;
gap: 25px;

margin-bottom: 25px;

}

.footer-social a {

color: white;

font-size: 18px;

transition: 0.3s;

}

.footer-social a:hover {

color: #a020f0;

}


/* LINEA */

.footer-line {

border: 0;

height: 1px;

background: #333;

margin: 25px 0;

}


/* TEXTOS ABAJO */

.footer-text-bottom p {

margin: 6px 0;

font-size: 13px;

color: #aaa;

}


/* MOBILE */

@media (max-width: 768px) {

.footer-top-links {

flex-direction: column;

gap: 12px;

}

.newsletter-form {

flex-direction: column;

}

.newsletter-form input {

width: 100%;

}

}

/* ========================= */
/* FOOTER TIPO BIDCOM */
/* ========================= */

.footer {

background: #f5f5f5;
padding: 40px 0;
font-size: 14px;
color: #333;

}

/* FILA SUPERIOR */

.footer-top {

display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;

}

.footer-news-text {

font-weight: 500;

}

/* NEWSLETTER */

.footer-newsletter {

display: flex;
gap: 10px;

}

.footer-newsletter input {

width: 280px;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;

}

.footer-newsletter button {

background: #2d2df5;
color: white;
border: none;
padding: 8px 16px;
border-radius: 5px;

}

/* REDES */

.footer-social {

display: flex;
gap: 15px;

}

.footer-social a {

color: #777;
font-size: 18px;
transition: 0.3s;

}

.footer-social a:hover {

color: #a020f0;

}

/* LINEA */

.footer-divider {

margin: 25px 0;

}

/* COLUMNAS */

.footer-columns {

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;

}

.footer-col h6 {

font-weight: 600;
margin-bottom: 12px;

}

.footer-col ul {

list-style: none;
padding: 0;

}

.footer-col li {

margin-bottom: 6px;

}

.footer-col a {

text-decoration: none;
color: #555;

}

.footer-col a:hover {

color: #a020f0;

}

/* COPYRIGHT */

.footer-bottom {

margin-top: 30px;
font-size: 13px;
color: #666;

}

/* RESPONSIVE */

@media (max-width: 768px) {

.footer-columns {

grid-template-columns: repeat(2, 1fr);

}

.footer-top {

flex-direction: column;
align-items: flex-start;

}

.footer-newsletter {

width: 100%;

}

.footer-newsletter input {

width: 100%;

}

}

/* ========================= */
/* FOOTER PROFESIONAL BLICK */
/* ========================= */

.footer {

background: #000;
color: #ccc;

padding: 45px 0;

font-size: 14px;

}


/* FILA SUPERIOR */

.footer-top {

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

flex-wrap: wrap;

}


/* TEXTO */

.footer-news-text {

color: white;

font-weight: 500;

font-size: 15px;

}


/* NEWSLETTER */

.footer-newsletter {

display: flex;

gap: 10px;

}

.footer-newsletter input {

width: 260px;

padding: 10px;

border-radius: 6px;

border: 1px solid #333;

background: #111;

color: white;

}

.footer-newsletter input::placeholder {

color: #888;

}

.footer-newsletter button {

background: #a020f0;

color: white;

border: none;

padding: 10px 18px;

border-radius: 6px;

font-weight: 500;

transition: 0.3s;

}

.footer-newsletter button:hover {

background: #7a18c0;

}


/* REDES */

.footer-social {

display: flex;

gap: 18px;

}

.footer-social a {

color: #888;

font-size: 18px;

transition: 0.3s;

}

.footer-social a:hover {

color: #a020f0;

}


/* LINEAS */

.footer-divider {

border: 0;

height: 1px;

background: #222;

margin: 28px 0;

}


/* COLUMNAS */

.footer-columns {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 40px;

}


.footer-col h6 {

color: white;

font-weight: 600;

margin-bottom: 12px;

}


.footer-col ul {

list-style: none;

padding: 0;

}

.footer-col li {

margin-bottom: 7px;

}

.footer-col a {

color: #aaa;

text-decoration: none;

transition: 0.3s;

}

.footer-col a:hover {

color: #a020f0;

}


/* COPYRIGHT */

.footer-bottom {

font-size: 13px;

color: #777;

}


/* RESPONSIVE */

@media (max-width: 768px) {

.footer-columns {

grid-template-columns: repeat(2, 1fr);

}

.footer-top {

flex-direction: column;

align-items: flex-start;

}

.footer-newsletter {

width: 100%;

}

.footer-newsletter input {

width: 100%;

}

}

/* ========================= */
/* FOOTER ALINEACION PROFESIONAL */
/* ========================= */

.footer {

background: #000;
color: #ccc;

padding: 45px 0;

}


/* FILA SUPERIOR */

.footer-top {

display: flex;

justify-content: space-between;

align-items: center;

padding: 0;

}


/* BLOQUE IZQUIERDO */

.footer-top-left {

display: flex;

align-items: center;

gap: 20px;

}


/* TEXTO */

.footer-news-text {

color: white;

font-weight: 500;

font-size: 15px;

white-space: nowrap;

}


/* NEWSLETTER */

.footer-newsletter {

display: flex;

gap: 10px;

}

.footer-newsletter input {

width: 260px;

padding: 10px;

border-radius: 6px;

border: 1px solid #333;

background: #111;

color: white;

}

.footer-newsletter button {

background: #a020f0;

color: white;

border: none;

padding: 10px 18px;

border-radius: 6px;

font-weight: 500;

}


/* REDES */

.footer-social {

display: flex;

gap: 18px;

}


/* COLUMNAS ALINEADAS */

.footer-columns {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 40px;

margin-top: 30px;

align-items: flex-start;

}


/* TITULOS */

.footer-col h6 {

color: white;

margin-bottom: 12px;

font-weight: 600;

}


/* LINKS */

.footer-col a {

color: #aaa;

text-decoration: none;

}

.footer-col a:hover {

color: #a020f0;

}

/* ========================= */
/* FOOTER PROFESIONAL BLICK */
/* ========================= */

.footer {

background: #000;
color: #ccc;

padding: 45px 0;

font-size: 14px;

}

/* FILA SUPERIOR */

.footer-top {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 20px;

}

/* BLOQUE IZQUIERDO */

.footer-top-left {

display: flex;

align-items: center;

gap: 20px;

}

/* TEXTO */

.footer-news-text {

color: white;

font-weight: 500;

font-size: 15px;

white-space: nowrap;

}

/* NEWSLETTER */

.footer-newsletter {

display: flex;

gap: 10px;

}

.footer-newsletter input {

width: 260px;

padding: 10px;

border-radius: 6px;

border: 1px solid #333;

background: #111;

color: white;

}

.footer-newsletter input::placeholder {

color: #888;

}

.footer-newsletter button {

background: #a020f0;

color: white;

border: none;

padding: 10px 18px;

border-radius: 6px;

font-weight: 500;

transition: 0.3s;

}

.footer-newsletter button:hover {

background: #7a18c0;

}

/* REDES */

.footer-social {

display: flex;

gap: 18px;

}

.footer-social a {

color: #888;

font-size: 18px;

transition: 0.3s;

}

.footer-social a:hover {

color: #a020f0;

}

/* LINEA */

.footer-divider {

border: 0;

height: 1px;

background: #222;

margin: 28px 0;

}

/* COLUMNAS */

.footer-columns {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 40px;

}

/* TITULOS */

.footer-col h6 {

color: white;

font-weight: 600;

margin-bottom: 12px;

}

/* LISTAS */

.footer-col ul {

list-style: none;

padding: 0;

}

.footer-col li {

margin-bottom: 7px;

}

/* LINKS */

.footer-col a {

color: #aaa;

text-decoration: none;

transition: 0.3s;

}

.footer-col a:hover {

color: #a020f0;

}

/* COPYRIGHT */

.footer-bottom {

font-size: 13px;

color: #777;

}

/* RESPONSIVE */

@media (max-width: 768px) {

.footer-columns {

grid-template-columns: repeat(2, 1fr);

}

.footer-top {

flex-direction: column;

align-items: flex-start;

}

.footer-newsletter {

width: 100%;

}

.footer-newsletter input {

width: 100%;

}

}

/* ========================= */
/* BLOQUES CATEGORIAS PRO */
/* ========================= */

.bloques-categorias {

margin: 30px 0;

}

.bloque-categoria {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: pointer;

margin-bottom: 20px;

/* diseño profesional */

box-shadow: 0 6px 18px rgba(0,0,0,0.15);

}

/* IMAGEN */

.bloque-categoria img {

width: 100%;

height: 130px; /* REDUCIDO */

object-fit: cover;

transition: 0.4s;

}

/* TEXTO */

.bloque-texto {

position: absolute;

top: 50%;
left: 50%;

transform: translate(-50%, -50%);

color: white;

font-size: 18px;

font-weight: 600;

text-align: center;

z-index: 2;

}

/* OVERLAY OSCURO */

.bloque-categoria::before {

content: "";

position: absolute;

width: 100%;
height: 100%;

background: rgba(0,0,0,0.35);

z-index: 1;

transition: 0.3s;

}

/* HOVER */

.bloque-categoria:hover img {

transform: scale(1.08);

}

.bloque-categoria:hover::before {

background: rgba(160,32,240,0.55); /* violeta */

}

/* ESPACIO ENTRE BLOQUES */

.bloques-categorias .col-md-3 {

padding: 10px;

}

/* MOBILE */

@media (max-width: 768px) {

.bloque-categoria img {

height: 110px;

}

.bloque-texto {

font-size: 16px;

}

}

/* ========================= */
/* SECCION OFERTAS PRO */
/* ========================= */

.seccion-ofertas {

margin: 50px 0;

}

/* RECUADRO GRANDE */

/* RECUADRO GRANDE PRINCIPAL */

.ofertas-box {

background: #f4f6f9;

border-radius: 16px;

/* MÁS GRANDE */

padding: 40px 35px;

/* ANCHO MAYOR */

width: 100%;

max-width: 1350px;

margin: auto;

/* sombra elegante */

box-shadow: 0 8px 24px rgba(0,0,0,0.08);

}

/* WRAPPER */

.ofertas-wrapper {

display: flex;

gap: 35px; /* más espacio */

align-items: stretch;

}

/* BANNER */

.ofertas-banner {

position: relative;

width: 320px; /* antes 280 */

border-radius: 14px;

overflow: hidden;

flex-shrink: 0;

}

.ofertas-banner img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* BOTON BANNER */

.btn-ver-ofertas {

position: absolute;

bottom: 18px;

left: 50%;

transform: translateX(-50%);

background: #2d2df5;

color: white;

padding: 10px 20px;

border-radius: 25px;

text-decoration: none;

font-weight: 500;

}

/* PRODUCTOS */

.ofertas-productos {

position: relative;

flex: 1;

display: flex;

align-items: center;

}

/* SLIDER */

.ofertas-slider {

display: flex;

overflow-x: auto;

gap: 18px;

scroll-behavior: smooth;

padding: 10px;

}

.ofertas-slider::-webkit-scrollbar {

display: none;

}

/* CARD */

.oferta-card {

min-width: 240px; /* más grande */

background: white;

border-radius: 14px;

padding: 18px;

position: relative;

transition: 0.3s;

box-shadow: 0 4px 14px rgba(0,0,0,0.1);

}

.oferta-card:hover {

transform: translateY(-5px);

}

/* ETIQUETA CUOTAS */

.etiqueta-cuotas {

position: absolute;

top: 10px;

left: 10px;

background: #3fa34d;

color: white;

font-size: 11px;

padding: 4px 8px;

border-radius: 6px;

font-weight: 600;

}

/* IMAGEN */

.oferta-card img {

width: 100%;

height: 170px; /* más grande */

object-fit: contain;

margin-bottom: 10px;

}

/* NOMBRE */

.oferta-nombre {

font-size: 14px;

margin-top: 8px;

height: 40px;

}

/* ENVIO */

.envio-gratis {

color: #3fa34d;

font-size: 13px;

margin-top: 6px;

}

/* PRECIO */

.oferta-precio {

font-weight: bold;

font-size: 18px;

color: #000;

margin-top: 6px;

}

/* DESCUENTO */

.oferta-descuento {

color: #3fa34d;

font-size: 13px;

}

/* BOTONES SLIDER */

.ofertas-prev,
.ofertas-next {

position: absolute;

background: white;

border: none;

font-size: 18px;

padding: 10px 14px;

border-radius: 50%;

cursor: pointer;

box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

.ofertas-prev {

left: -15px;

}

.ofertas-next {

right: -15px;

}

/* PRECIO ANTERIOR */

.precio-anterior {

font-size: 13px;

color: #888;

text-decoration: line-through;

margin-top: 5px;

}

/* PORCENTAJE */

.porcentaje {

color: #3fa34d;

font-weight: 600;

margin-left: 8px;

text-decoration: none;

}

/* PRECIO ACTUAL */

.oferta-precio {

font-size: 18px;

font-weight: bold;

color: #000;

margin-top: 5px;

}

/* CONTADOR */

.contador-box {

font-size: 12px;

color: #555;

margin-top: 8px;

}

.seccion-ofertas {

margin: 50px 0;

}

.ofertas-box {

background: #f4f6f9;

border-radius: 16px;

padding: 30px;

max-width: 1200px;

margin: auto;

/* IMPORTANTE */

overflow: hidden;

}

.ofertas-wrapper {

display: flex;

gap: 25px;

align-items: stretch;

/* IMPORTANTE */

width: 100%;

}

.ofertas-banner {

width: 260px;

min-width: 260px;

border-radius: 12px;

overflow: hidden;

flex-shrink: 0;

}

.ofertas-banner img {

width: 100%;

height: 100%;

object-fit: cover;

}

.ofertas-productos {

position: relative;

flex: 1;

overflow: hidden;

}

/* SLIDER */

.ofertas-slider {

display: flex;

gap: 18px;

/* IMPORTANTE */

overflow-x: auto;

scroll-behavior: smooth;

padding: 10px;

max-width: 100%;

}

/* OCULTAR SCROLL */

.ofertas-slider::-webkit-scrollbar {

display: none;

}

.oferta-card {

min-width: 220px;

max-width: 220px;

background: white;

border-radius: 12px;

padding: 15px;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

flex-shrink: 0;

}

/* BADGE OFERTA */

.badge-oferta {

position: absolute;

top: 10px;

right: 10px;

background: red;

color: white;

font-size: 11px;

padding: 4px 8px;

border-radius: 6px;

font-weight: 600;

}


/* BOTON AGREGAR */

.btn-agregar-oferta {

width: 100%;

margin-top: 10px;

background: #a020f0;

color: white;

border: none;

padding: 8px;

border-radius: 8px;

font-size: 13px;

font-weight: 500;

transition: 0.3s;

}

.btn-agregar-oferta:hover {

background: #7a18c0;

}


/* AJUSTE CARD */

.oferta-card {

position: relative;

display: flex;

flex-direction: column;

justify-content: space-between;

}

/* ========================= */
/* CATEGORIA ESTRELLA */
/* ========================= */

.categoria-estrella {

margin: 60px 0;

}

/* TITULO */

.titulo-categoria {

display: flex;

align-items: center;

justify-content: center;

gap: 20px;

margin-bottom: 25px;

}

.titulo-categoria h2 {

font-size: 20px;

letter-spacing: 3px;

font-weight: 700;

color: #333;

}

.linea {

flex: 1;

height: 1px;

background: #ccc;

}


/* BOTONES */

.categoria-tabs {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 25px;

}

.categoria-tabs button {

padding: 8px 18px;

border-radius: 20px;

border: 1px solid #2d2df5;

background: transparent;

color: #2d2df5;

font-size: 13px;

cursor: pointer;

transition: 0.3s;

}

.tab-activa {

background: #2d2df5;

color: white;

}


/* SLIDER */

.categoria-slider-wrapper {

position: relative;

}

.categoria-slider {

display: flex;

gap: 18px;

overflow-x: auto;

scroll-behavior: smooth;

padding: 10px;

}

.categoria-slider::-webkit-scrollbar {

display: none;

}


/* CARD */

.categoria-card {

min-width: 220px;

background: white;

border-radius: 12px;

padding: 15px;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

flex-shrink: 0;

}

.categoria-card img {

width: 100%;

height: 150px;

object-fit: contain;

}

.categoria-nombre {

font-size: 14px;

margin-top: 8px;

}

.categoria-precio {

font-weight: bold;

margin-top: 5px;

}


/* BOTONES */

.cat-prev,
.cat-next {

position: absolute;

top: 40%;

background: white;

border: none;

font-size: 18px;

padding: 10px;

border-radius: 50%;

cursor: pointer;

box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

.cat-prev {

left: -15px;

}

.cat-next {

right: -15px;

}

.tab-btn {

padding: 8px 18px;

border-radius: 20px;

border: 1px solid #a020f0;

background: transparent;

color: #a020f0;

font-size: 13px;

cursor: pointer;

transition: 0.3s;

}

/* ACTIVO */

.tab-activa {

background: #a020f0;

color: white;

}

/* HOVER */

.tab-btn:hover {

background: #a020f0;

color: white;

}

/* ========================= */
/* CHECKOUT */
/* ========================= */

.checkout-body {

background: #f4f6f9;

}

/* HEADER */

.checkout-header {

background: white;

padding: 15px 0;

border-bottom: 1px solid #ddd;

}

.checkout-logo {

height: 40px;

}


/* ========================= */
/* PASOS */
/* ========================= */

.checkout-steps {

background: white;

padding: 15px 0;

border-bottom: 1px solid #eee;

}

.steps-wrapper {

display: flex;

align-items: center;

justify-content: center;

gap: 15px;

}

/* STEP */

.step {

display: flex;

align-items: center;

gap: 6px;

color: #999;

font-size: 14px;

}

/* CIRCULO */

.step-circle {

width: 28px;

height: 28px;

border-radius: 50%;

background: #ddd;

display: flex;

align-items: center;

justify-content: center;

font-size: 13px;

}

/* ACTIVO */

.step.activo {

color: #a020f0;

font-weight: 600;

}

.step.activo .step-circle {

background: #a020f0;

color: white;

}

/* LINEA */

.step-line {

width: 40px;

height: 2px;

background: #ddd;

}


/* ========================= */
/* CARRITO VACIO */
/* ========================= */

.checkout-empty {

padding: 80px 0;

}

/* BOX */

.empty-box {

background: white;

border-radius: 14px;

padding: 50px 30px;

max-width: 500px;

margin: auto;

box-shadow: 0 6px 20px rgba(0,0,0,0.08);

}

/* ICONO */

.empty-icon {

font-size: 60px;

color: #a020f0;

margin-bottom: 20px;

}

/* TITULO */

.empty-box h2 {

font-size: 22px;

margin-bottom: 10px;

}

/* TEXTO */

.empty-box p {

color: #777;

margin-bottom: 25px;

}

/* BOTON */

.btn-volver {

background: #a020f0;

color: white;

padding: 12px 25px;

border-radius: 8px;

text-decoration: none;

font-weight: 500;

transition: 0.3s;

}

.btn-volver:hover {

background: #7a18c0;

}

/* ========================= */
/* CHECKOUT CARRITO */
/* ========================= */

.checkout-carrito {

padding: 40px 0;

}

.checkout-wrapper {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 30px;

}

/* PRODUCTOS */

.checkout-productos {

background: white;

border-radius: 12px;

padding: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}

.checkout-titulo {

margin-bottom: 20px;

}

/* ITEM */

.checkout-item {

display: flex;

align-items: center;

gap: 15px;

padding: 12px 0;

border-bottom: 1px solid #eee;

}

.checkout-item img {

width: 70px;

height: 70px;

object-fit: contain;

}

.checkout-nombre {

font-size: 14px;

}

.checkout-precio {

font-weight: bold;

}

/* RESUMEN */

.checkout-resumen {

background: white;

border-radius: 12px;

padding: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

height: fit-content;

}

/* LINEA */

.resumen-line {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

}

/* TOTAL */

.resumen-total {

display: flex;

justify-content: space-between;

font-size: 18px;

font-weight: bold;

margin-bottom: 20px;

}

/* BOTON */

.btn-continuar {

display: block;

width: 100%;

background: #a020f0;

color: white;

padding: 12px;

border-radius: 8px;

text-align: center;

text-decoration: none;

font-weight: 500;

}

.btn-continuar:hover {

background: #7a18c0;

}

/* ========================= */
/* FORM DATOS */
/* ========================= */

.checkout-formulario {

padding: 40px 0;

}

.form-box {

background: white;

padding: 30px;

border-radius: 12px;

max-width: 900px;

margin: auto;

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}

.form-box h3 {

margin-bottom: 20px;

}

/* INPUTS */

.form-box input {

width: 100%;

padding: 10px;

border-radius: 6px;

border: 1px solid #ddd;

margin-bottom: 15px;

}

/* LABEL */

.form-box label {

font-size: 13px;

margin-bottom: 4px;

display: block;

}

/* ========================= */
/* CHECKOUT PAGO */
/* ========================= */

.checkout-pago {

padding: 40px 0;

}

/* METODOS */

.checkout-metodos {

background: white;

padding: 20px;

border-radius: 12px;

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}

.metodo {

margin-bottom: 12px;

font-size: 14px;

}

/* BOTON FINAL */

.btn-finalizar {

width: 100%;

background: #a020f0;

color: white;

padding: 12px;

border-radius: 8px;

border: none;

font-weight: 500;

}

.btn-finalizar:hover {

background: #7a18c0;

}

.btn-eliminar {

background: none;

border: none;

color: red;

cursor: pointer;

font-size: 14px;

margin-left: auto;

}

.cantidad-box {

display: flex;

align-items: center;

gap: 6px;

margin-top: 6px;

}

.cantidad-box button {

width: 24px;

height: 24px;

border-radius: 6px;

border: 1px solid #ddd;

background: white;

cursor: pointer;

}

/* CONTENEDOR ICONO CARRITO */

.carrito-icon {

position: relative;

display: flex;

align-items: center;

cursor: pointer;

}


/* BADGE CARRITO */

#carritoBadge {

position: absolute;

top: -6px;

right: -10px;

background: red;

color: white;

font-size: 11px;

padding: 2px 6px;

border-radius: 50%;

font-weight: 600;

}

/* ========================= */
/* CARRITO LATERAL */
/* ========================= */

#carritoLateral {

position: fixed;

top: 0;

right: -380px;

width: 360px;

height: 100vh;

background: white;

z-index: 9999;

box-shadow: -5px 0 20px rgba(0,0,0,0.2);

transition: 0.3s;

display: flex;

flex-direction: column;

}

#carritoLateral.activo {

right: 0;

}

.carrito-header {

padding: 15px;

border-bottom: 1px solid #eee;

display: flex;

justify-content: space-between;

}

#carritoItems {

flex: 1;

overflow-y: auto;

padding: 10px;

}

.carrito-footer {

padding: 15px;

border-top: 1px solid #eee;

}

.no-scroll {

overflow: hidden;

}

/* ========================= */
/* HEADER PROFESIONAL */
/* ========================= */

.header-wrapper {

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

}

.logo-area {

flex-shrink: 0;

}

.search-area {

flex: 1;

display: flex;

}

.buscador {

width: 100%;

height: 45px;

border-radius: 8px 0 0 8px;

border: none;

padding-left: 15px;

}

.btn-buscar {

height: 45px;

background: #a020f0;

color: white;

border: none;

padding: 0 18px;

border-radius: 0 8px 8px 0;

}

.header-icons {

display: flex;

align-items: center;

gap: 25px;

}

.top-bar-right a {

color: white;

text-decoration: none;

display: flex;

align-items: center;

gap: 6px;

transition: 0.3s;

}

.top-bar-right a:hover {

color: #a020f0;

}

.header-wrapper {

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

}

.header-icons {

display: flex;

align-items: center;

gap: 25px;

}

/* ========================= */
/* ITEM CARRITO ESTILO BIDCOM */
/* ========================= */

.carrito-item {

display: grid;

grid-template-columns: 60px 1fr auto;

align-items: center;

gap: 12px;

padding: 12px;

border-bottom: 1px solid #eee;

}

/* IMAGEN */

.carrito-img {

width: 60px;

height: 60px;

object-fit: contain;

background: #fff;

}

/* INFO */

.carrito-info {

display: flex;

flex-direction: column;

gap: 4px;

}

/* NOMBRE */

.carrito-nombre {

font-size: 13px;

color: #333;

line-height: 1.2;

}

/* CANTIDAD */

.carrito-cantidad {

font-size: 13px;

color: #666;

}

/* ELIMINAR */

.carrito-eliminar {

background: none;

border: none;

color: red;

font-size: 12px;

cursor: pointer;

padding: 0;

display: flex;

align-items: center;

gap: 4px;

}

/* PRECIO */

.carrito-precio {

font-weight: bold;

font-size: 15px;

white-space: nowrap;

}

.carrito-footer {

padding: 15px;

border-top: 1px solid #eee;

background: white;

}

/* TOTAL */

#carritoTotal {

font-size: 16px;

font-weight: bold;

margin-bottom: 12px;

}

/* BOTON */

.btn-finalizar {

width: 100%;

background: #2d2df5;

color: white;

padding: 12px;

border-radius: 8px;

text-align: center;

text-decoration: none;

font-weight: 500;

}

/* ========================= */
/* RESULTADOS BUSQUEDA */
/* ========================= */

.resultados-busqueda {

margin: 60px 0;

}

.titulo-resultados {

font-size: 20px;

font-weight: 700;

margin-bottom: 25px;

color: #333;

}

/* GRID */

.resultados-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 20px;

}

/* CARD */

.resultado-card {

background: white;

border-radius: 12px;

padding: 15px;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

transition: 0.3s;

cursor: pointer;

}

.resultado-card:hover {

transform: translateY(-5px);

}

/* IMG */

.resultado-card img {

width: 100%;

height: 150px;

object-fit: contain;

}

/* NOMBRE */

.resultado-nombre {

font-size: 14px;

margin-top: 8px;

}

/* PRECIO */

.resultado-precio {

font-weight: bold;

margin-top: 5px;

color: #a020f0;

}

/* ========================= */
/* BASADO EN BUSQUEDAS */
/* ========================= */

.basado-busquedas {

margin: 60px 0;

}

/* TITULO */

.titulo-basado {

text-align: center;

font-size: 18px;

letter-spacing: 2px;

font-weight: 700;

margin-bottom: 25px;

color: #444;

}

/* CONTENEDOR */

.basado-slider {

display: flex;

gap: 18px;

overflow-x: auto;

scroll-behavior: smooth;

padding: 10px;

}

.basado-slider::-webkit-scrollbar {

display: none;

}

/* CARD */

.basado-card {

min-width: 220px;

background: white;

border-radius: 12px;

padding: 15px;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

position: relative;

}

/* BADGE */

.badge-cuotas {

position: absolute;

top: 10px;

left: 10px;

background: #3fa34d;

color: white;

font-size: 11px;

padding: 4px 8px;

border-radius: 6px;

font-weight: 600;

}

/* IMAGEN */

.basado-card img {

width: 100%;

height: 150px;

object-fit: contain;

}

/* NOMBRE */

.basado-nombre {

font-size: 14px;

margin-top: 8px;

height: 40px;

}

/* ESTRELLAS */

.basado-rating {

font-size: 12px;

color: #333;

margin-top: 4px;

}

/* ENVIO */

.basado-envio {

color: #3fa34d;

font-size: 13px;

margin-top: 5px;

}

/* PRECIO ANTERIOR */

.basado-precio-anterior {

font-size: 13px;

color: #888;

text-decoration: line-through;

}

/* DESCUENTO */

.basado-descuento {

color: #3fa34d;

font-size: 13px;

}

/* PRECIO */

.basado-precio {

font-size: 18px;

font-weight: bold;

margin-top: 5px;

}

/* IMPUESTOS */

.basado-impuestos {

font-size: 11px;

color: #888;

margin-top: 5px;

}

.productos-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 20px;

}

.producto-card {

background: white;

border-radius: 12px;

padding: 15px;

box-shadow: 0 4px 10px rgba(0,0,0,0.1);

position: relative;

}

.producto-card img {

width: 100%;

height: 160px;

object-fit: contain;

}

.producto-nombre {

font-size: 14px;

margin-top: 10px;

height: 40px;

}

.producto-precio {

font-size: 18px;

font-weight: bold;

margin-top: 5px;

}

.btn-agregar {

width: 100%;

margin-top: 10px;

background: #2d2df5;

color: white;

border: none;

padding: 10px;

border-radius: 8px;

}

/* ========================= */
/* PRODUCTO DETALLE */
/* ========================= */

.producto-galeria {

background: white;

padding: 15px;

border-radius: 12px;

}

#imagenPrincipal {

width: 100%;

height: 400px;

object-fit: contain;

}

.miniaturas {

display: flex;

gap: 10px;

flex-wrap: wrap;

}

.miniaturas img {

width: 70px;

height: 70px;

object-fit: cover;

border: 1px solid #ddd;

border-radius: 6px;

cursor: pointer;

}

.miniaturas img:hover {

border: 2px solid #a020f0;

}

/* PRECIOS */

.precio-anterior {

text-decoration: line-through;

color: #888;

margin-right: 10px;

}

.descuento {

color: green;

font-weight: bold;

margin-right: 10px;

}

/* ========================= */
/* MENU PRINCIPAL */
/* ========================= */

.menu {

background: #111;
border-top: 1px solid #222;
border-bottom: 1px solid #222;

}

.menu ul {

display: flex;
align-items: center;
gap: 25px;

list-style: none;
margin: 0;
padding: 12px 0;

overflow-x: auto;

}

.menu ul li {

position: relative;

}

.menu ul li a {

color: #fff;
text-decoration: none;

font-size: 14px;
font-weight: 500;

transition: 0.2s;

}

.menu ul li a:hover {

color: #0d6efd;

}

/* OFERTAS DESTACADO */

.menu-ofertas {

color: #ff4d4d !important;
font-weight: bold;

}

.menu-ofertas:hover {

color: #ff0000 !important;

}

/* ========================= */
/* MENU PRINCIPAL */
/* ========================= */

.menu {

background: #111;
position: relative;
z-index: 999;

}

.menu ul {

display: flex;
align-items: center;
gap: 25px;

list-style: none;
margin: 0;
padding: 12px 0;

overflow: visible;

}

/* ITEMS */

.menu ul li {

position: relative;

}

.menu ul li a {

color: #fff;
text-decoration: none;

font-size: 14px;
font-weight: 500;

transition: 0.2s;

}

.menu ul li a:hover {

color: #0d6efd;

}

/* ========================= */
/* SUBMENU */
/* ========================= */

.submenu {

position: absolute;

top: 40px;
left: 0;

background: #fff;

min-width: 200px;

display: none;

flex-direction: column;

border-radius: 8px;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);

padding: 10px 0;

}

/* ITEMS SUBMENU */

.submenu li {

width: 100%;

}

.submenu li a {

display: block;

padding: 10px 15px;

color: #333;

font-size: 14px;

}

.submenu li a:hover {

background: #f5f5f5;
color: #0d6efd;

}

/* HOVER */

.menu-item:hover .submenu {

display: flex;

}

/* OFERTAS */

.menu-ofertas {

color: #ff4d4d !important;
font-weight: bold;

}

/* ========================= */
/* FIX MENU SOBRE SLIDER */
/* ========================= */

.menu {

position: relative;
z-index: 9999;

background: #111;

}

.submenu {

position: absolute;
z-index: 9999;

}

/* ========================= */
/* MENU ESTILO MERCADOLIBRE */
/* ========================= */

.menu {

background: #e6e6e6;

border-bottom: 1px solid #d0d0d0;

position: relative;
z-index: 9999;

}

/* CONTENEDOR */

.menu-principal {

display: flex;
align-items: center;

gap: 25px;

list-style: none;

margin: 0;
padding: 10px 0;

}

/* LINKS */

.menu-principal li a {

color: #333;

font-size: 14px;

text-decoration: none;

font-weight: 500;

display: flex;
align-items: center;

gap: 5px;

transition: 0.2s;

}

.menu-principal li a:hover {

color: #0d6efd;

}

/* ========================= */
/* SUBMENU */
/* ========================= */

.submenu {

position: absolute;

top: 40px;
left: 0;

background: #fff;

min-width: 220px;

display: none;

flex-direction: column;

padding: 8px 0;

border-radius: 8px;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}

/* ITEMS */

.submenu li {

width: 100%;

}

.submenu li a {

display: block;

padding: 10px 15px;

color: #333;

font-size: 14px;

}

/* HOVER */

.submenu li a:hover {

background: #f5f5f5;

}

/* MOSTRAR SUBMENU */

.menu-item:hover .submenu {

display: flex;

}

/* FIX SLIDER */

.slider {

position: relative;
z-index: 1;

}

/* ========================= */
/* MENU BASE */
/* ========================= */

.menu {

background: #e6e6e6;
border-bottom: 1px solid #ccc;

position: relative;
z-index: 9999;

}

.menu-principal {

display: flex;
align-items: center;

gap: 25px;

list-style: none;

margin: 0;
padding: 10px 0;

}

/* LINKS */

.menu-principal li a {

color: #333;

font-size: 14px;

text-decoration: none;

display: flex;
align-items: center;

gap: 6px;

}

/* ========================= */
/* BOTON CATEGORIAS */
/* ========================= */

.btn-categorias {

font-weight: bold;

}

/* ========================= */
/* MEGA MENU */
/* ========================= */

.mega-categorias {

position: absolute;

top: 45px;
left: 0;

width: 500px;

background: #fff;

display: none;

border-radius: 10px;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);

overflow: hidden;

}

/* MOSTRAR */

.menu-categorias:hover .mega-categorias {

display: flex;

}

/* ========================= */
/* LISTA CATEGORIAS */
/* ========================= */

.lista-categorias {

width: 200px;

list-style: none;

margin: 0;
padding: 0;

border-right: 1px solid #eee;

}

/* ITEM */

.categoria-item a {

display: block;

padding: 12px 15px;

color: #333;

font-size: 14px;

}

/* HOVER */

.categoria-item a:hover {

background: #f5f5f5;

}

/* ========================= */
/* PANEL SUBCATEGORIAS */
/* ========================= */

.subcategorias-panel {

flex: 1;

padding: 20px;

}

.texto-sub {

color: #888;
font-size: 14px;

}

/* ========================= */
/* MENU NEGRO PROFESIONAL */
/* ========================= */

.menu {

background: #000; /* negro como header */

border-top: 1px solid #111;
border-bottom: 1px solid #111;

position: relative;
z-index: 9999;

}

/* LISTA PRINCIPAL */

.menu-principal {

display: flex;
align-items: center;

gap: 25px;

list-style: none;

margin: 0;
padding: 12px 0;

}

/* LINKS */

.menu-principal li a {

color: #fff; /* texto blanco */

font-size: 14px;

text-decoration: none;

display: flex;
align-items: center;

gap: 6px;

transition: 0.2s;

}

/* HOVER LINKS */

.menu-principal li a:hover {

color: #0d6efd; /* azul hover */

}

/* ========================= */
/* BOTON CATEGORIAS */
/* ========================= */

.btn-categorias {

background: #0d6efd; /* azul */

color: #fff;

padding: 8px 14px;

border-radius: 6px;

font-weight: bold;

}

/* HOVER */

.btn-categorias:hover {

background: #0b5ed7;

color: #fff;

}

/* ========================= */
/* MEGA MENU */
/* ========================= */

.mega-categorias {

position: absolute;

top: 48px;
left: 0;

width: 550px;

background: #fff;

display: none;

border-radius: 10px;

box-shadow: 0 10px 25px rgba(0,0,0,0.25);

overflow: hidden;

}

/* MOSTRAR */

.menu-categorias:hover .mega-categorias {

display: flex;

}

/* ========================= */
/* LISTA CATEGORIAS */
/* ========================= */

.lista-categorias {

width: 220px;

list-style: none;

margin: 0;
padding: 0;

border-right: 1px solid #eee;

}

/* ITEM */

.categoria-item a {

display: block;

padding: 12px 16px;

color: #333;

font-size: 14px;

}

/* HOVER */

.categoria-item a:hover {

background: #f5f5f5;

color: #0d6efd;

}

/* ========================= */
/* PANEL SUBCATEGORIAS */
/* ========================= */

.subcategorias-panel {

flex: 1;

padding: 20px;

background: #fff;

}

.texto-sub {

color: #888;
font-size: 14px;

}

/* ========================= */
/* FIX SLIDER */
/* ========================= */

.slider {

position: relative;
z-index: 1;

}

/* ========================= */
/* BOTON CATEGORIAS */
/* ========================= */

.categorias-btn {

display: flex;
align-items: center;

gap: 8px;

margin-left: 20px;

color: #fff;

font-weight: 600;

cursor: pointer;

transition: 0.2s;

}

.categorias-btn:hover {

color: #0d6efd;

}

/* ========================= */
/* MENU LATERAL */
/* ========================= */

.menu-categorias-lateral {

position: absolute;

top: 110px; /* ajustar según header */

left: 0;

width: 260px;

background: #fff;

border-radius: 10px;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);

display: none;

z-index: 9999;

}

/* MOSTRAR MENU */

.categorias-btn:hover + .menu-categorias-lateral {

display: block;

}

/* LISTA */

.menu-categorias-lateral ul {

list-style: none;

margin: 0;
padding: 0;

}

/* ITEM */

.categoria-item {

position: relative;

padding: 12px 15px;

cursor: pointer;

font-size: 14px;

border-bottom: 1px solid #eee;

}

/* HOVER */

.categoria-item:hover {

background: #f5f5f5;

}

/* ========================= */
/* SUBCATEGORIAS */
/* ========================= */

.subcategoria {

position: absolute;

top: 0;

left: 260px;

width: 220px;

background: #fff;

display: none;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}

.categoria-item:hover .subcategoria {

display: block;

}

.subcategoria li {

padding: 12px 15px;

border-bottom: 1px solid #eee;

}

.subcategoria li:hover {

background: #f5f5f5;

}