/* Configuracion General */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { background-color: #f8f9fa; color: #333; }

/* Contenedor principal del Header */
/* --- HEADER: ESTRUCTURA PRINCIPAL --- */
.main-header {
    width: 100%;
  background: linear-gradient(to right, #000000, #FF0000);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;

    /* ESTO ES LO QUE LO DEJA FIJO */
    position: sticky;    /* Se queda pegado */
    top: 0;             /* En la posición cero de arriba */
    z-index: 1000;      /* Para que pase por ENCIMA de las fotos y tarjetas */
}

/* --- HEADER: PISO SUPERIOR (Logo y Links) --- */
.header-top {
    height: 50px; /* Altura del primer piso */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.main-logo {
    height: 100px; /* Mantiene la medida que tenías antes */
    width: auto;
    position: absolute; /* Permite que el logo flote si es más alto que el header */
    top: 5px;
    z-index: 100;
}

.header-right {
    display: flex;
    gap: 20px;
}

.nav-link {
    text-decoration: none;
    color:#FFFFFF !important;
    font-weight: bold;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #e63946; /* Color de realce al pasar el mouse */
}
/* --- REFUERZO DE NAVEGACIÓN (PEGAR AQUÍ) --- */

/* 1. Limpiamos los contenedores de la lista */
nav ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Los alinea al inicio */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important; /* Ajustá este número para la distancia final */
}

/* 2. Quitamos cualquier margen heredado de los ítems */
nav ul li {
    display: inline-block !important;
    margin: 0 !important; /* Esto elimina el espacio fantasma */
    padding: 0 !important;
}

/* 3. Aseguramos que el link se comporte bien */
.nav-link {
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block !important;
    padding: 5px 2px !important; /* Un mínimo de aire para que no se toquen las letras */
    transition: color 0.3s;
}
/* --- HEADER: PISO INFERIOR (Buscador) --- */
.header-bottom {
    height: 45px; /* Altura del segundo piso (finito) */
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f0f0f0;
}

.search-container {
    width: 70%; /* El buscador ocupa el 70% del ancho */
    display: flex;
    justify-content: center;
}

.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-bar {
    width: 100%;
    height: 30px; /* Buscador finito */
    padding: 0 40px 0 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

.search-icon {
    position: absolute;
    right: 15px; /* Lupa al costado derecho */
    color: #888;
    cursor: pointer;
}
/* CARRUSEL Y CATEGORÍAS */
.ad-carousel { 
    width: 100%; 
    height: 350px; 
    overflow: hidden; 
    position: relative; 
    margin-bottom: 0px; /* <--- Agregá esto */
}
.carousel-track { display: flex; width: 100%; height: 100%; }
.slide { min-width: 100%; height: 100%; display: none; align-items: center; justify-content: center; font-size: 2rem; color: white; }
.active { display: flex; }

.acceso-gestion-ofertas {
    width: 100%;
    height: 30px; 
 background: linear-gradient(135deg, #e50914, #9b0000);
    display: flex;
    justify-content: center;
    align-items: center;
    /* --- CAMBIOS AQUÍ --- */
    margin-top: 0px;    /* Pegado normal */
    box-shadow: none;   /* Quitamos la sombra para que no se separe visualmente */
}

.btn-gestion {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.75rem; /* Letra pequeña para que entre en 30px */
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
    text-transform: uppercase;
}

.btn-gestion:hover {
    color: #ff4d4d;
    transform: scale(1.05);
}

/* ============================================================
   RESETEO Y AJUSTE TOTAL DE CATEGORÍAS (PC Y MÓVIL)
   Este código fuerza el comportamiento correcto.
   ============================================================ */


.categories-nav {
    display: flex;
    gap: 12px;
    /* Bajamos el padding: 5px arriba/abajo y 10px a los costados */
    padding: 5px 10px; 
    /* Bajamos el margin: 5px arriba, auto a los lados, 10px abajo */
    margin: 5px auto 10px auto; 
    max-width: 1000px;
}
    /* ACTIVAR MOVIMIENTO */
    overflow-x: auto; 
    white-space: nowrap; 
    
    /* EFECTO DESVANECIMIENTO (Solo visible si hay desborde) */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    
    /* OCULTAR BARRA FEA */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* Para que en iPhone sea suave */
}

.categories-nav::-webkit-scrollbar {
    display: none;
}

/* ============================================================
   LOS BOTONES (RECUPERAMOS TU DISEÑO)
   ============================================================ */
.cat-btn {
    flex: 0 0 auto; /* VITAL: Evita que se achiquen */
    padding: 2px 10px;
    border: 2px solid #000000; /* Pon aquí TU color si es otro */
    background-color: transparent;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* EL COLOR AZUL AL PICAR (ACTIVE) */
.cat-btn.active, .cat-btn:hover {
   background: linear-gradient(to right, #000000, #8b0000);
    color: white;
}

/* ============================================================
   COMPORTAMIENTO SEGÚN PANTALLA
   ============================================================ */

/* EFECTO DESVANECIMIENTO Y DESLIZAMIENTO (MÓVIL) */
@media (max-width: 1023px) {
    .categories-nav {
        display: flex;                  /* Pone los botones en una sola línea horizontal */
        overflow-x: auto;               /* ?? CLAVE: Permite arrastrar con el dedo a los costados */
        white-space: nowrap;            /* Evita que las categorías se vayan para abajo */
        -webkit-overflow-scrolling: touch; /* Hace que el deslizamiento sea súper suave en el celu */
        
        /* Tus efectos de difuminado originales */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
    }

    /* Oculta la barra de scroll horizontal fea de Windows/Android para que quede limpio */
    .categories-nav::-webkit-scrollbar {
        display: none;
    }
}

/* EN PC: Que se vea normal y en filas */
@media (min-width: 1024px) {
    .categories-nav {
        flex-wrap: wrap !important;     /* Vuelven las filas en PC */
        white-space: normal !important; /* Permite que bajen de renglón */
        justify-content: center !important; /* Centra los botones */
        mask-image: none !important;    /* Quitamos el desvanecimiento en PC */
        -webkit-mask-image: none !important;
        overflow-x: visible !important; /* Quita el comportamiento de arrastre en PC */
    }
}
/* ============================================================
   FIN DEL AJUSTE */
   ============================================================ */

/* GRID DE TARJETAS (REUPERADO) */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding: 20px 8%;
}

.card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.card-carousel { width: 100%; height: 320px; overflow: hidden; position: relative; }
.card-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; }
.card-img { min-width: 100%; width: 100%; height: 320px; object-fit: cover; display: block; }

.prev-btn, .next-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.3); color: white; border: none;
    padding: 10px 5px; cursor: pointer;
}
.prev-btn { left: 0; } .next-btn { right: 0; }

.card-content { padding: 15px; }
.card-content h3 { font-size: 1.1rem; margin-bottom: 10px; }

/* ICONOS SOCIALES */
.social-links { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.social-icon {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 5px; transition: transform 0.3s;
}
.social-icon i { color: white !important; font-size: 16px; }
.fb { background-color: #1877F2; }
.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

.brand-description {
    font-size: 0.9rem; color: #555; margin: 8px 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* FOOTER */
.main-footer { background: #222; color: #fff; padding: 60px 5% 20px 5%; margin-top: 50px; }
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }

/* RESPONSIVO */
/* --- ESTO NO TOCA LA PC --- */

/* 1. Tablets (opcional, lo mantengo pero bien cerrado) */
@media (max-width: 1024px) { 
    .cards-grid { grid-template-columns: repeat(2, 1fr); } 
}

/* 2. CELULARES (Aquí es donde ocurre la magia) */
@media (max-width: 768px) {
    
    /* Evitamos que el header se ponga en columna para que logo y links convivan */
  .header-top { 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; 
        align-items: center !important; /* Centra todo lo que esté adentro */
        padding-top: 0 !important;    /* Eliminamos posibles empujes superiores */
        padding-bottom: 0 !important; /* Eliminamos posibles empujes inferiores */
    }

    #logo-movil {
        display: block !important;
        height: 40px !important; /* Mantenemos tu tamaño */
        width: auto !important;
        margin-top: auto !important;    /* Margen automático arriba... */
        margin-bottom: auto !important; /* ...y abajo, lo obligan a flotar en el centro */
        margin-left: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    /* EL BUSCADOR: Lo movemos a la derecha en su propia fila */
    .header-bottom {
        display: flex !important;
        justify-content: flex-end !important; /* Lo tira a la derecha */
        padding: 10px 15px !important;
    }

    .search-wrapper, .search-container { 
        width: 75% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
    }

    /* LAS TARJETAS: Una sola columna perfecta */
    .cards-grid { 
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: 20px !important;
    }

    .brand-name { display: none; }
}

/* La caja nueva que envuelve todo */
.contenedor-menu {
    display: block !important;
    width: fit-content !important; /* IMPORTANTE: La caja solo mide lo que miden las palabras */
    margin: 0 !important;
    padding: 0 !important;
}

/* La lista adentro de esa caja */
.contenedor-menu ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 15px !important; /* <--- ACÁ MANEJÁS LA DISTANCIA */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Los ítems individuales */
.contenedor-menu ul li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* El link final */
.nav-link {
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-weight: bold;
    white-space: nowrap !important;
}

/* --- SISTEMA DE GRILLA PARA OFERTAS --- */
.grid-ofertas {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea las 4 columnas */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Diseño de la Tarjeta Individual */
.tarjeta-oferta {
    background: #e0e0e0;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foto-producto {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1; /* La hace cuadradita */
    object-fit: cover;
}

/* Responsivo: Si la pantalla es mediana (tablet), pone 2 por fila */
@media (max-width: 1024px) {
    .grid-ofertas { grid-template-columns: repeat(2, 1fr); }
}

/* Responsivo: Si es un celular, pone 1 sola por fila */
@media (max-width: 600px) {
    .grid-ofertas { grid-template-columns: 1fr; }
}

/* ============================================================
   SECCIÓN: AJUSTE DE BUSCADOR SOLO PARA COMPUTADORAS
   Este código NO afecta el diseño en celulares.
   ============================================================ */

@media (min-width: 1024px) {

    .search-container {
        width: 50%;          /* Achica el contenedor a la mitad */
        margin: 0 auto;      /* Lo centra en el header */
        display: block;      /* Asegura que el centrado funcione */
    }

    .search-bar {
        width: 100%;         /* Hace que la barra llene su nuevo tamaño */
    }

}

/* --- Regla definitiva para ocultar tarjetas --- */
.hidden-card {
    display: none !important;
}

/* ============================================================
   FIN DE AJUSTE PARA COMPUTADORAS
   ============================================================ */

/* Esto va al final de todo el archivo .css */
.hidden-card {
    display: none !important;
}

/* Contenedor del banner */
/* Esta regla asegura que la imagen ADENTRO se comporte bien */
.banner-container img {
    width: 100%;           /* Obliga a la imagen a estirarse a todo el ancho */
    height: 100%;          /* Obliga a la imagen a llenar la altura de 250px */
    object-fit: cover;     /* ¡LA CLAVE! Estira sin deformar. Corta los lados si sobra. */
    object-position: center; /* Mantiene el centro de tu diseño siempre visible */
}

/* Estilo de la imagen */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Mantiene la proporción sin estirar */
    object-position: center; /* Centra la imagen para que no se corte lo importante */
    display: block;
}

/* Ajuste para celulares (opcional) */
@media (max-width: 768px) {
    .banner-container {
        height: 100px;     /* Un poco más bajo en móviles */
    }
}

/* --- ÚLTIMA LÍNEA DEL ARCHIVO --- */

/* --- ESTILOS PARA PC (Siempre arriba de la Media Query) --- */
.img-banner {
    width: 100%;
    height: 500px; /* Altura fija para PC */
    object-fit: cover;
    display: block;
}


/* --- TUS BANNERS (INTACTOS, NO SE TOCAN) --- */
@media (max-width: 768px) {
    .banner-container {
        height: 200px;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }
    .banner-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* --- AJUSTE QUIRÚRGICO SOLO PARA CARDS (CELULAR) --- */
/* --- ESTIRAR EL ALTO DE LAS CARDS EN CELULAR --- */
@media screen and (max-width: 480px) {
    
    /* 1. MANTENEMOS EL ANCHO QUE TE GUSTA */
    .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 20px 22% !important; /* Mantenemos la finura */
        gap: 30px !important;
    }

    /* 2. LIBERAMOS EL ALTO (EL ESTIRAMIENTO) */
    .card {
        height: auto !important; /* Deja que la tarjeta crezca hacia abajo */
        min-height: 100px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. EL CARRUSEL: Le quitamos el límite de píxeles */
    .card-carousel { 
        height: auto !important; /* ¡AQUÍ SE ESTIRA! */
        min-height: 250px !important; /* Un piso mínimo, pero sin techo */
        width: 100% !important;
        overflow: visible !important; /* Para que no corte nada */
    }

    /* 4. LA FOTO: Que mande su proporción natural */
    .card-img { 
        width: 100% !important;
        height: auto !important; /* Se estira según su ancho */
        max-height: none !important; /* Eliminamos cualquier tope previo */
        object-fit: contain !important; /* Muestra la imagen ENTERA */
        display: block !important;
    }

    /* 5. ESPACIO PARA EL TEXTO */
    .card-content {
        padding-top: 15px !important;
    }
}

/* ... Todo tu CSS de PC arriba ... */

@media (max-width: 768px) {
    
    /* ... Tus reglas de celular que ya funcionan ... */

    /* PEGÁ ESTO ACÁ (AL FINAL DEL MEDIA): */
    .contenedor-menu ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .contenedor-menu ul li a {
        font-size: 10px !important; /* Letra bien chica para que entre todo */
        padding: 0 4px !important;  /* Menos aire entre palabras */
        white-space: nowrap !important; /* Evita que una palabra se parta en dos */
        color: white !important;
    }
} /* <--- Esta es la llave que cierra el @media, aseguralo de que quede al final */

/* ============================================================
   AQUÍ COMIENZA LA SUPER WEB - TARJETAS DINÁMICAS
   ============================================================ */

(Pega aquí el código que te pasé antes)

/* ============================================================
   NUEVA ESTRUCTURA: GRID DE LA HOME (4 COLUMNAS)
   ============================================================ */
.grid-super-web {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 por fila en PC */
    gap: 25px;
    padding: 30px 5%;
    max-width: 1300px;
    margin: 0 auto;
}

/* ============================================================
   TARJETA DINÁMICA (ESTILO NEUMÓRFICO DE OFERTAS)
   ============================================================ */
.tarjeta-oferta.dinamica {
    background: #e0e0e0; /* El color de fondo de tus ofertas */
    border-radius: 20px;
    padding: 15px;
    box-shadow: 9px 9px 16px rgba(163,177,198,0.6), 
               -9px -9px 16px rgba(255,255,255, 0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

/* CONTENEDOR DEL CARRUSEL */
.contenedor-img-carrusel {
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 1 / 1; /* Cuadradas como las de Instagram */
    overflow: hidden;
    position: relative;
}

.tira-fotos {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: scroll; /* Permite deslizar */
    scroll-snap-type: x mandatory; /* Efecto imán */
    scrollbar-width: none; /* Oculta barra en Firefox */
}

.tira-fotos::-webkit-scrollbar { display: none; } /* Oculta barra en Chrome */

.foto-producto-c {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: center;
}

/* PUNTOS INDICADORES */
.puntos-carrusel {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.punto {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
}

.punto.activo { background: #fff; width: 12px; border-radius: 10px; }

/* INFO DE LA TARJETA */
.info-tarjeta {
    margin-top: 15px;
    text-align: left;
}

.titulo-articulo {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
}

.comercio-texto {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.precio-texto {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d00000; /* El rojo que venís usando */
    display: block;
    margin-bottom: 15px;
}

/* REDES SOCIALES */
.redes-tarjeta {
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 10px;
}

.btn-red-tarjeta {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white !important;
    font-size: 14px;
    transition: 0.3s;
}

.btn-red-tarjeta.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.btn-red-tarjeta.fb { background: #1877F2; }

/* ============================================================
   RESPONSIVE (COHERENTE CON TU DISEÑO)
   ============================================================ */
@media (max-width: 1024px) {
    .grid-super-web { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-super-web { 
        grid-template-columns: 1fr; 
        padding: 20px 15%; /* Para que no sea tan ancha en el celu */
    }
}

/* ESTILO VERTICAL PARA COMERCIOS */
.grilla-comercios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.tarjeta-comercio {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    aspect-ratio: 2 / 3; /* Formato rectangular vertical */
}

.comercio-fotos {
    flex: 1; 
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    background: #fdfdfd; 
}

.comercio-fotos img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    object-fit: contain; /* PARA QUE SE VEA TODA LA FOTO SIN CORTAR */
    width: 100%;
    height: 100%;
}

.comercio-info {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #eee;
}

.comercio-info h3 {
    color: #8b0000;
    font-size: 1rem;
    margin: 5px 0;
}

.redes-comercio {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.tarjeta-comercio {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    aspect-ratio: 2 / 3; /* Forma de rectángulo vertical */
    background: #fff;
}

.comercio-fotos {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.comercio-fotos img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain; /* ESTO HACE QUE SE VEA LA IMAGEN COMPLETA */
}


/* ============================================================
   PARCHE QUIRÚRGICO DE EMERGENCIA PARA EL CARRUSEL EN CELULARES
   ============================================================ */
@media (max-width: 768px) {
    .ad-carousel {
        height: 240px !important; /* Mantiene un alto hermoso en el celu */
        margin-bottom: 10px !important;
    }
    
    .carousel-track, .ad-carousel .slide {
        height: 100% !important;
    }

    .img-banner {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;     /* Llena el espacio sin deformar */
        object-position: center !important; /* Centra la imagen */
    }
}
/* ============================================================ */

/* PARCHE: Achicar el logo en celulares para que no tape la navegación */
@media (max-width: 768px) {
    .main-logo {
        height: 55px !important; /* Lo bajamos de 100px a 55px para que respire el menú */
        top: 15px !important;    /* Lo acomodamos un poquito más arriba */
    }
}