/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25/11/2021, 17:51:32
    Author     : user
*/

/* FONT-FACE*/
@font-face {
    font-family: 'titillium_webregular';
    src: url("/GEmpresas/resources/fonts/Titillium_Web/TitilliumWeb-Regular.ttf");
}

.main-content .menu .ui-menu-list{
    text-align: center;
}

.main-content .menu .ui-menuitem-text{
    font-weight: bold;

}

.main-content .layout-content{
    margin-top: 30px;
}
.main-content .layout-topbar {
    left: 0;
    height: 100px;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
}

.main-content .layout-topbar-menu {
    position: fixed;
    top: 100px;
    z-index: 998;
    width: 100%;
}



.main-content .layout-topbar-menu .ui-menu.ui-menubar{
    border-radius: 0px;
    /*background: var(--primary-color);*/
    border: none;
}


/*.main-content .layout-topbar-menu .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: var(--primary-color);
}*/





/*.main-content .layout-topbar-menu .ui-menu.ui-menubar  .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link{
    background: var(    --primary-100);

*/

.main-content .layout-topbar-menu-light .ui-menu.ui-menubar {
    background: #f8fafc;
}

.main-content .layout-topbar-menu-light .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #f8fafc;
}

.main-content .layout-topbar-menu-yellow .ui-menu.ui-menubar {
    background: #F3A841;
}

.main-content .layout-topbar-menu-yellow .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #F3A841;
}

.main-content .layout-topbar-menu-graylight .ui-menu.ui-menubar {
    background: #8B8E90;
}

.main-content .layout-topbar-menu-graylight .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #8B8E90;
}

.main-content .layout-topbar-menu-tealdark .ui-menu.ui-menubar {
    background: #076D72;
}

.main-content .layout-topbar-menu-tealdark .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #076D72;
}

.main-content .layout-topbar-menu-cyan .ui-menu.ui-menubar {
    background: #2199B5;
}

.main-content .layout-topbar-menu-cyan .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #2199B5;
}

.main-content .layout-topbar-menu-teallight .ui-menu.ui-menubar {
    background: #21B5AD;
}

.main-content .layout-topbar-menu-teallight .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #21B5AD;
}

.main-content .layout-topbar-menu-purpledark .ui-menu.ui-menubar {
    background: #44358F;
}

.main-content .layout-topbar-menu-purpledark .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #44358F;
}

.main-content .layout-topbar-menu-magenta .ui-menu.ui-menubar {
    background: #C03995;
}

.main-content .layout-topbar-menu-magenta .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #C03995;
}

.main-content .layout-topbar-menu-orange .ui-menu.ui-menubar {
    background: #EC7A51;
}

.main-content .layout-topbar-menu-orange .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #EC7A51;
}

.main-content .layout-topbar-menu-bluedark .ui-menu.ui-menubar {
    background: #232946;
}

.main-content .layout-topbar-menu-bluedark .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #232946;
}

.main-content .layout-topbar-menu-purple .ui-menu.ui-menubar {
    background: #636FC0;
}

.main-content .layout-topbar-menu-purple .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #636FC0;
}

.main-content .layout-topbar-menu-red .ui-menu.ui-menubar {
    background: #FE566D;
}

.main-content .layout-topbar-menu-red .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #FE566D;
}

.main-content .layout-topbar-menu-indigo .ui-menu.ui-menubar {
    background: #303498;
}

.main-content .layout-topbar-menu-indigo .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #303498;
}

.main-content .layout-topbar-menu-purplelight .ui-menu.ui-menubar {
    background: #9754B8;
}

.main-content .layout-topbar-menu-purplelight .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #9754B8;
}

.main-content .layout-topbar-menu-gray .ui-menu.ui-menubar {
    background: #525557;
}

.main-content .layout-topbar-menu-gray .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #525557;
}

.main-content .layout-topbar-menu-blue .ui-menu.ui-menubar {
    background: #2E88FF;
}

.main-content .layout-topbar-menu-blue .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #2E88FF;
}

.main-content .layout-topbar-menu-green .ui-menu.ui-menubar {
    background: #21B567;
}

.main-content .layout-topbar-menu-green .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #21B567;
}

.main-content .layout-topbar-menu-dark .ui-menu.ui-menubar {
    background: #252729;
}

.main-content .layout-topbar-menu-dark .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #252729;
}

.main-content .layout-topbar-menu-seagreen .ui-menu.ui-menubar {
    background: #354045;
}

.main-content .layout-topbar-menu-seagreen .ui-menu.ui-menubar .ui-menu-list .ui-menu-child {
    background: #354045;
}


/*

Desde aca

*/

.main-content .layout-topbar-menu-light .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #7ba1c6;
}

.main-content .layout-topbar-menu-yellow .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #7a4a08;
}

.main-content .layout-topbar-menu-graylight .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #e6e7e7;
}

.main-content .layout-topbar-menu-tealdark .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #39eaf3;
}

.main-content .layout-topbar-menu-cyan .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #9cdeed;
}

.main-content .layout-topbar-menu-teallight .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #9cede8;
}

.main-content .layout-topbar-menu-purpledark .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #a79cda;
}

.main-content .layout-topbar-menu-magenta .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #ecbfde;
}

.main-content .layout-topbar-menu-orange .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #fef5f2;
}

.main-content .layout-topbar-menu-bluedark .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #6875b3;
}

.main-content .layout-topbar-menu-purple .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #e2e4f3;
}

.main-content .layout-topbar-menu-red .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #ffffff;
}

.main-content .layout-topbar-menu-indigo .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #9b9edf;
}

.main-content .layout-topbar-menu-purplelight .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #e4d2ec;
}

.main-content .layout-topbar-menu-gray .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #abaeb0;
}

.main-content .layout-topbar-menu-blue .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #e0eeff;
}

.main-content .layout-topbar-menu-green .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #9cedc2;
}

.main-content .layout-topbar-menu-dark .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #7a8087;
}

.main-content .layout-topbar-menu-seagreen .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: #899ba4;
}

/*
Hasta aca
*/



.main-content .layout-topbar-menu .ui-menu.ui-menubar .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text{
    color: var(--primary-50);

}


.main-content .layout-topbar-menu .ui-menu.ui-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link .ui-menuitem-text{
    color: var(--primary-900);

}
.main-content .layout-topbar-menu .ui-menu.ui-menubar .ui-menu-list .ui-menuitem .ui-menuitem-active > .ui-menuitem-link .ui-menuitem-text{
    color: var(--primary-900);
}





.nombreFantasia{
    font-size: 18px;
    font-weight: bold;

}

.ui-dataview-header {
    display: none;
}



.font-15-bold{
    font-size: 15px;
    font-weight: bold;
}
.font-20-bold{
    font-size: 20px;
    font-weight: bold;
}


.center-text{
    text-align: center;
}

.shopping-cart {
    position: relative;

}

.cart-badge {
    position: absolute;
    bottom: 22px;
    right: 1px; /* Ajusta este valor según el tamaño del icono */
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;/* Ocultar por defecto */
    display: none;
}

.shopping-cart.has-items .cart-badge {
    display: inline-block; /* Mostrar solo si hay elementos */
}
body .ui-sidebar{
    padding: 0;
}
.ui-sidebar .body{

    padding: 0px;


}
#rightpanel{
    width: 500px;
}
.ui-sidebar-content{
    height: calc(100% - 175px);
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
}
.ui-sidebar .header{
    padding: 1em;

}
.ui-sidebar .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 150px;
    background:  #666666;
    color: #ffffff;
    width: 100%;
    padding: 1em;
}

body .ui-datalist .ui-datalist-content{
    border: none;
    padding: 0;
}

.visible{
    display:  block;
}

.no-visible{
    display: none;
}


.div-logo{
    text-align: left;
}

.imagenCarouselPortada{
    width: 100%;   /* Ajusta el ancho de la imagen al 100% del contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
    display: block;
}
/* Configura el contenedor para usar la posición relativa y ocupar todo el ancho y alto */
.custom-carousel .ui-carousel-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-carousel .ui-carousel-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.carousel-item {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen se adapta al tamaño del ítem */
}

/* Estilos para las flechas de navegación */
.custom-carousel .ui-carousel-prev,
.custom-carousel .ui-carousel-next {
    position: absolute;

    background-color: rgba(200, 200, 200, 0.7) !important; /* Fondo gris suave con opacidad */
    color: #fff;
    border: none;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 18px; /* Tamaño de las flechas */
}

/* Ajuste específico para la flecha de la izquierda */
.custom-carousel .ui-carousel-prev {
    left: 15px; /* Distancia desde la izquierda */
}

/* Ajuste específico para la flecha de la derecha */
.custom-carousel .ui-carousel-next {
    right: 15px; /* Distancia desde la derecha */
}

/* Ajuste opcional para hacer las flechas redondeadas */
.custom-carousel .ui-carousel-prev,
.custom-carousel .ui-carousel-next {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;

}




@media only screen and (max-width: 768px) {
    .div-logo{
        text-align: center;
    }

    .main-content  .layout-topbar{
        height: 125px;
    }
    .main-content  .layout-topbar-menu{
        top: 125px;
    }
    .main-content .layout-content{
        margin-top: 60px;
    }

    #rightpanel{
        width: 100%;
    }

    .menu .ui-widget-content {
        /* Hace que los elementos se apilen */
    }

    .menu-toggle-button {
        display: block; /* Mostrar el botón */
    }

    .main-content .layout-topbar-menu .ui-menu.ui-menubar {
    }

    .custom-menubar .ui-menuitem-active .ui-menu-child{
        grid-template-columns: repeat(2, 1fr)!important;/* 4 columnas */
    }

    body .custom-menubar .ui-menuitem-active .ui-widget-content {
        max-height: calc(100vh - 350px) !important; /* Ajusta la altura según necesidad */

    }


}

/*.custom-menubar  .ui-menu-child {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr)!important; 
    gap: 10px !important;
    position: absolute !important;
    left: 0 !important;
    width: auto !important;
    min-width: 400px !important; 
    background-color: #f4f4f4!important;  
    border: 1px solid #ccc !important;;
    padding: 10px !important;
    z-index: 1000 !important;
}*/

body .custom-menubar .ui-menuitem-active .ui-menu-child{
    display: grid ;
    grid-template-columns: repeat(5, 1fr);/* 4 columnas */
    gap: 10px ;
    position: absolute ;
    left: 0 ;
    width: auto ;
    min-width: 400px ; /* Ajusta según necesidad */
    
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000 ;
    overflow-y: auto;
}
body .custom-menubar .ui-menuitem-active .ui-widget-content {
    display: grid ;
    flex-direction: column; /* Organiza los ítems en columnas */
    flex-wrap: wrap; /* Permite varias columnas */
    max-height: calc(100vh - 200px); /* Ajusta la altura según necesidad */

}
body .custom-menubar .ui-menu-child::before {
    content: none !important;
    display: none !important;
}


body .custom-menubar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    height: 100%;
}


.exception-body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: -moz-linear-gradient(125deg, #d2524f 0%, #9c1627 100%);
    /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #d2524f), color-stop(100%, #9c1627));
    /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, #d2524f 0%, #9c1627 100%);
    /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, #d2524f 0%, #9c1627 100%);
    /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, #d2524f 0%, #9c1627 100%);
    /* ie10+ */
    background: linear-gradient(125deg, #d2524f 0%, #9c1627 100%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2524f', endColorstr='#9c1627',GradientType=1 );
}


.footer-extendido {

    padding: 2rem;
    color: #333;
    font-size: 14px;
    padding-bottom: 3rem;

}
.full-width {
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-col h4 {
    margin-bottom: 1rem;
    color: #222;
}

.social-icon {
    margin-right: 1rem;
    font-size: 36px;
    color: #555;
}
.social-icon .pi{
    font-size: 36px;

}

.social-icon:hover {
    color: #000;
}
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 999;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}

.whatsapp-float i {
    font-size: 32px;
}

body .layout-wrapper,
body .layout-main,
body .layout-content {
    background-color: #ffffff ;
}

body .ui-dataview .ui-paginator.ui-paginator-bottom {
    border-width: 0 0 0px 0;
}


.footer-light {
    background-color: #f8fafc;
    color: #000000;
}

.footer-dark {
    background-color: #252729;
    color: #ffffff;
}

.footer-teallight {
    background-color: #21B5AD;
    color: #ffffff;
}

.footer-blue {
    background-color: #2E88FF;
    color: #ffffff;
}

.footer-purple {
    background-color: #636FC0;
    color: #ffffff;
}

.footer-orange {
    background-color: #EC7A51;
    color: #ffffff;
}

.footer-magenta {
    background-color: #C03995;
    color: #ffffff;
}

.footer-cyan {
    background-color: #2199B5;
    color: #ffffff;
}

.footer-yellow {
    background-color: #F3A841;
    color: #ffffff;
}

.footer-green {
    background-color: #21B567;
    color: #ffffff;
}

.footer-purplelight {
    background-color: #9754B8;
    color: #ffffff;
}

.footer-red {
    background-color: #FE566D;
    color: #ffffff;
}

.footer-tealdark {
    background-color: #076D72;
    color: #ffffff;
}

.footer-purpledark {
    background-color: #44358F;
    color: #ffffff;
}

.footer-indigo {
    background-color: #303498;
    color: #ffffff;
}

.footer-seagreen {
    background-color: #354045;
    color: #ffffff;
}

.footer-bluedark {
    background-color: #232946;
    color: #ffffff;
}

.footer-gray {
    background-color: #525557;
    color: #ffffff;
}

.footer-graylight {
    background-color: #8B8E90;
    color: #ffffff;
}

.footer-colored {
    background-color: #232946;
    color: #ffffff;
}

.footer-light h1,
.footer-light h2,
.footer-light h3,
.footer-light h4,
.footer-light h5,
.footer-light h6,
.footer-light p,
.footer-light .pi,
.footer-light .fab {
    color: #000000;
}

.footer-dark h1,
.footer-dark h2,
.footer-dark h3,
.footer-dark h4,
.footer-dark h5,
.footer-dark h6,
.footer-dark p,
.footer-dark .pi,
.footer-dark .fab {
    color: #ffffff;
}

.footer-teallight h1,
.footer-teallight h2,
.footer-teallight h3,
.footer-teallight h4,
.footer-teallight h5,
.footer-teallight h6,
.footer-teallight p,
.footer-teallight .pi,
.footer-teallight .fab {
    color: #ffffff;
}

.footer-tealdark h1,
.footer-tealdark h2,
.footer-tealdark h3,
.footer-tealdark h4,
.footer-tealdark h5,
.footer-tealdark h6,
.footer-tealdark p,
.footer-tealdark .pi,
.footer-tealdark .fab {
    color: #ffffff;
}

.footer-blue h1,
.footer-blue h2,
.footer-blue h3,
.footer-blue h4,
.footer-blue h5,
.footer-blue h6,
.footer-blue p,
.footer-blue .pi,
.footer-blue .fab {
    color: #ffffff;
}

.footer-purple h1,
.footer-purple h2,
.footer-purple h3,
.footer-purple h4,
.footer-purple h5,
.footer-purple h6,
.footer-purple p,
.footer-purple .pi,
.footer-purple .fab {
    color: #ffffff;
}

.footer-purplelight h1,
.footer-purplelight h2,
.footer-purplelight h3,
.footer-purplelight h4,
.footer-purplelight h5,
.footer-purplelight h6,
.footer-purplelight p,
.footer-purplelight .pi,
.footer-purplelight .fab {
    color: #ffffff;
}

.footer-purpledark h1,
.footer-purpledark h2,
.footer-purpledark h3,
.footer-purpledark h4,
.footer-purpledark h5,
.footer-purpledark h6,
.footer-purpledark p,
.footer-purpledark .pi,
.footer-purpledark .fab {
    color: #ffffff;
}

.footer-magenta h1,
.footer-magenta h2,
.footer-magenta h3,
.footer-magenta h4,
.footer-magenta h5,
.footer-magenta h6,
.footer-magenta p,
.footer-magenta .pi,
.footer-magenta .fab {
    color: #ffffff;
}

.footer-cyan h1,
.footer-cyan h2,
.footer-cyan h3,
.footer-cyan h4,
.footer-cyan h5,
.footer-cyan h6,
.footer-cyan p,
.footer-cyan .pi,
.footer-cyan .fab {
    color: #ffffff;
}

.footer-yellow h1,
.footer-yellow h2,
.footer-yellow h3,
.footer-yellow h4,
.footer-yellow h5,
.footer-yellow h6,
.footer-yellow p,
.footer-yellow .pi,
.footer-yellow .fab {
    color: #000000;
}

.footer-green h1,
.footer-green h2,
.footer-green h3,
.footer-green h4,
.footer-green h5,
.footer-green h6,
.footer-green p,
.footer-green .pi,
.footer-green .fab {
    color: #ffffff;
}

.footer-orange h1,
.footer-orange h2,
.footer-orange h3,
.footer-orange h4,
.footer-orange h5,
.footer-orange h6,
.footer-orange p,
.footer-orange .pi,
.footer-orange .fab {
    color: #ffffff;
}

.footer-red h1,
.footer-red h2,
.footer-red h3,
.footer-red h4,
.footer-red h5,
.footer-red h6,
.footer-red p,
.footer-red .pi,
.footer-red .fab {
    color: #ffffff;
}

.footer-indigo h1,
.footer-indigo h2,
.footer-indigo h3,
.footer-indigo h4,
.footer-indigo h5,
.footer-indigo h6,
.footer-indigo p,
.footer-indigo .pi,
.footer-indigo .fab {
    color: #ffffff;
}

.footer-bluedark h1,
.footer-bluedark h2,
.footer-bluedark h3,
.footer-bluedark h4,
.footer-bluedark h5,
.footer-bluedark h6,
.footer-bluedark p,
.footer-bluedark .pi,
.footer-bluedark .fab {
    color: #ffffff;
}


.main-content .button-agregar{
    background: #43A047; 
    border-color: #43A047;
}


.main-content .button-agregar:hover{
    background: #a3d9a6; 
    border-color: #a3d9a6;
}


.carousel-home {
    margin-top: 95px;         /* espacio debajo del topbar */
    height: 130%;             /* 30% más alto que el tamaño base */
    max-height: 480px;        /* opcional: límite para pantallas grandes */
    object-fit: cover;        /* mantiene proporciones de las imágenes */
    border-radius: 4px;       /* opcional: suaviza bordes si querés */
}


.anuncio-rubros {
    text-align: center;
    padding: 2rem 1rem;
    background: #fff0f5; /* rosa suave (relacionado al fucsia) */
    border-radius: 16px;
    margin: 0.5rem auto 1.5rem auto;
    max-width: 1000px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: fadeIn 0.8s ease-in-out;
}

.anuncio-titulo {
    font-size: 2rem;
    font-weight: 800;
    color: #C2185B; /* fucsia fuerte */
    margin-bottom: 0.5rem;
}

.anuncio-subtitulo {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.card-rubro {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.card-rubro:hover {
    transform: scale(1.03);
}

.card-rubro-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.card-rubro-imagen {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-rubro-overlay {
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
}

.card-rubro-titulo {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


.anuncio-productos {
    text-align: center;
    padding: 1.2rem 1rem;
    background: #e8f3fc; /* celeste más suave */
    border-radius: 12px;
    margin: 0.5rem auto 1rem auto;
    max-width: 1100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: fadeIn 0.4s ease-in-out;
}

.anuncio-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1976D2;
    margin-bottom: 0.3rem;
}

.anuncio-subtitulo {
    font-size: 1rem;
    color: #444;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.boton-volver-inicio {
    display: inline-block;
    padding: 0.4rem 1rem;
    background-color: #1976D2;
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
}

.boton-volver-inicio:hover {
    background-color: #125ea3;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}