/** Estilos de Header y Footer */

.fondo-header {
    background-color: #3A7EAF !important;
}

.ml-1 {
    margin-left: 5px !important;
}

.mr-1 {
    margin-right: 5px !important;
}

.header-info ul li a:hover {
    color: #fcb03f !important;
    font-weight: bold;
}

.header-action-icon-2 a img {
    max-width: 65px !important;
}

.header-action-2 {
	.header-action-icon-2 {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		padding: 0 14px;

		& > a {
			svg {
				width: 1em;
				height: 1em;
			}

			span {
				&.pro-count {
					&.blue {
						background-color: #ec008d !important;
					}

				}

			}

		}

		&:hover {
			& > a {
				color: #ec008d;
				fill: #ec008d;
			}

			.cart-dropdown-wrap {
				opacity: 1;
				visibility: visible;
				top: calc(100% + 10px);
			}

		}

	}

}


.search-style-2 {
    width: 100%;
    max-width: 620px;
}

.search-input-container {
    position: relative;
    width: 100%;
    height: 46px;
    background: #ffffff;
    border: 1.5px solid #e5e5e5;
    border-radius: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all .25s ease;
}

.search-input-container:hover {
    border-color: #e9008a;
    box-shadow: 0 5px 16px rgba(233, 0, 138, 0.16);
}

.search-input-container:focus-within {
    border-color: #e9008a;
    box-shadow: 0 0 0 4px rgba(233, 0, 138, 0.12);
}

.search-input-container input {
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 58px 0 22px;

    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.2px;
}

.search-input-container input::placeholder {
    color: #9e9e9e;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.btn-search {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background: #e9008a;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.btn-search i {
    font-size: 17px;
}

.btn-search:hover {
    background: #008c95;
    transform: translateY(-50%) scale(1.05);
}



/* Busqueda autocompletado */

.search-autocomplete {
    position: relative;
    width: 100%;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .16);
    border: 1px solid #f1f1f1;
    z-index: 9999;
    padding: 14px 0;
    display: none;
}

.search-suggestions.active {
    display: block;
}

.search-box-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    padding: 0 18px 8px;
}

.search-clear {
    float: right;
    color: #e9008a;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.search-item {
    padding: 9px 18px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all .2s ease;
}

.search-item:hover {
    background: #fff0f8;
    color: #e9008a;
    padding-left: 23px;
}

.search-empty {
    padding: 10px 18px;
    font-size: 13px;
    color: #999;
}

.search-input-container {
    position: relative;
    width: 100%;
    height: 46px;
    background: #fff;
    border: 2px solid #ffd1eb;
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(233, 0, 138, 0.12);
    overflow: hidden !important;
    transition: all .25s ease;
}

.search-input-container:hover,
.search-input-container:focus-within {
    border-color: #e9008a;
    box-shadow: 0 0 0 4px rgba(233, 0, 138, 0.12);
}

.search-input-container input {
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 58px 0 22px;
    background: transparent;
    font-size: 14px;
}

.btn-search {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background: #e9008a;
    color: #fff;
    cursor: pointer;
}

.search-autocomplete {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .16);
    border: 1px solid #f1f1f1;
    z-index: 99999;
    padding: 14px 0;
    display: none;
}


.search-suggestions.active {
    display: block; 
}















.menu-nadecor {
    background: #e9008a;
    min-height: 58px;
    box-shadow: 0 4px 12px rgba(233, 0, 138, .22);
    z-index: 999;
}

.menu-nadecor-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-nadecor-list > li {
    position: relative;
}

.menu-nadecor-list > li.position-static {
    position: static;
}

.menu-nadecor-list > li > a.menu-link {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 58px;
    padding: 0 16px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.menu-nadecor-list > li > a.menu-link:hover {
    background: rgba(255, 255, 255, .16);
}

.mega-menu-nadecor {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 320px;
    background: #fff;
    padding: 24px 32px 28px;
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    column-gap: 28px;
    row-gap: 18px;
    align-items: start;
    list-style: none;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border: 1px solid #eee;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .22s ease;
    z-index: 1000;
}

.menu-item-mega:hover > .mega-menu-nadecor {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-col-nadecor {
    min-width: 0;
}

.mega-col-nadecor {
    break-inside: avoid;
    margin-bottom: 8px;
}

.mega-title-nadecor {
    display: block;
    margin-bottom: 8px;
    color: #3A7EAF !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.mega-col-nadecor ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mega-col-nadecor ul li a {
    display: block;
    padding: 4px 0;
    color: #222 !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.mega-col-nadecor ul li a:hover {
    color: #e9008a !important;
    padding-left: 5px;
}

.mega-banner-nadecor {
    list-style: none;
}

.mega-banner-box {
    background: #d8f7ef;
    min-height: 260px;
    padding: 28px;
    border-radius: 4px;
}

.mega-banner-box span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}

.mega-banner-box h4 {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin-bottom: 12px;
}

.mega-banner-box p {
    font-size: 18px;
    font-weight: 600;
    color: #18b97f;
    margin-bottom: 22px;
}

.mega-banner-box button {
    border: none;
    background: #008c95;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
}

.mega-banner-box button:hover {
    background: #e9008a;
}

.mega-banner-nadecor {
    display: none !important;
}

@media (max-width: 1199px) {
    .mega-menu-nadecor {
        grid-template-columns: repeat(3, 1fr);
    }

    .mega-banner-nadecor {
        display: none;
    }
}


.menu-nadecor-list > li > a.menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 58px;
    padding: 0 16px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Línea oculta */
.menu-nadecor-list > li > a.menu-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

/* Mostrar línea al pasar el mouse */
.menu-nadecor-list > li > a.menu-link:hover::after {
    transform: scaleX(1);
}


/***/

.cargando {
    font-size: 18px;
    font-weight: bold;
}

.centrar {
    text-align: center;
}

.separar-5 {
    margin-left: 5%;
}

.negrita {
    font-weight: bold;
}

.fnd-product {
    background-color: #dfdfdf !important;
    height: 150px;
}

.fnd-product-2 {
    background-color: #e2cdd5 !important;
    height: 150px;
}

.ir-tienda {
    font-weight: bold;
    color: blue !important;
    margin-left: 45px;
    font-size: 14px;
    font-style: italic;
}

.img-cat-product {
    width: 210px;
    height: 130px;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 10px;
}

.fondo-product {
    background-color: #EEEDEC !important;
}

.etiqueta {
    font-weight: bold;
    color: white;
    border-radius: 4px;
}

.etiqueta-2 {
    font-weight: bold;
    color: rgb(8, 8, 8);
    border-radius: 4px;
}

.ubicar-derecha {
    text-align: right;
}

.subir-5 {
    margin-top: -5px;
}

.subir-7 {
    margin-top: -7px;
}

.subir-10 {
    margin-top: -10px;
}

.subir-15 {
    margin-top: -15px;
}

.subir-18 {
    margin-top: -18px;
}

.subir-19 {
    margin-top: -18px;
}

.subir-95 {
    margin-top: -95px;
}

.subir-20 {
    margin-top: -20px !important;
}

.subir-60 {
    margin-top: -60px !important;
}

.subir-70 {
    margin-top: -70px !important;
}

.subir-80 {
    margin-top: -80px !important;
}

.subir-90 {
    margin-top: -90px !important;
}

.subir-100 {
    margin-top: -100px !important;
}

/* ============== FONDOS BANNERES ==================*/

/*  Banner Mediano */

.fnd-banner-camp-1 {
    background-color: #def0f5;
    background-image: url('../imgs/banner/MD02-04.png');
    width: 100% !important;
    height: auto !important;
}

.fnd-banner-camp-2 {
    background-color: #BDE8F4;
    background-image: url('../imgs/banner/MD02-01.png');
    width: 100% !important;
    height: auto !important;
}


.fnd-banner-prom-2 {
    background-image: url('../imgs/banner/MD04-03.png');
    width: 100% !important;
    height: auto !important;
}

.etiqueta-submenu {
    margin-left: 25px;
    font-size: 18px;
    font-weight: bold;
    color: rgb(2, 84, 192);
}

.fnd-categorias {
    background-color: #E4E4E4;
}


/*  Banners Pequeños  */

.fondo-banner-pequenio-1 {
    background-image: url('../imgs/recursos/banner1/banner1.png');
}

.fondo-banner-pequenio-2 {
    background-image: url('../imgs/recursos/banner1/banner2.png');
}

.fondo-banner-pequenio-3 {
    background-image: url('../imgs/recursos/banner1/banner3.png');
}


.fnd-banner-large {
    background-color: #F3F2E5;
}


.fnd-banner-final {
    background-color: #eeeeee;
}

/* ========================================== */

.text-user {
    font-weight: bold;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.abs-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blockquote {
    padding: 5px;
    border-radius: 25px;
    box-shadow:
        inset 0 -2em 2em rgb(218, 218, 218),
        0 0 0 1px rgba(255, 255, 255, 0.938),
        0.2em 0.2em 1em rgba(255, 255, 255, 0.644);
}


.fondo-menu {
    background-color: #ec008d !important;
    color: #fff !important;
}

.fondo-menu-head {
    background-color: #ffffff !important;
    color: rgb(8, 83, 80) !important;
}


.seleccionado {
    font-weight: bold;
    color: rgb(0, 18, 179);
}


.pagina-active {
    border-radius: 1px rgb(0, 56, 53);
    background-color: rgb(0, 110, 105);
    margin: 0 4px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 5px !important;
}

.pagina-active:hover {
    background-color: rgb(8, 83, 80);
    cursor: pointer;
}


.pagina {
    border: rgb(0, 56, 53) !important;
    background-color: rgb(255, 255, 255);
    margin: 0 4px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: center !important;
    border-radius: 5px !important;
}

.pagina:hover {
    background-color: rgb(8, 83, 80);
    cursor: pointer;
    color: white !important;
}

.text-pagina-active {
    color: white;
    text-align: center !important;
}

.text-pagina-active:hover {
    color: white;
    text-align: center !important;
}

.text-pagina {
    color: rgb(0, 110, 105);
    text-align: center !important;
}

.text-pagina:hover {
    color: rgb(255, 255, 255);
    text-align: center !important;
}

.btn-pagina {
    width: 30px !important;
    margin: 0 2px;
    text-align: center;
}

.btn-pagina:hover {
    color: white;
    text-align: center !important;
}

.btn-active {
    background-color: rgb(0, 110, 105);
    color: white;
}


.size-nompro {
    font-size: 12px !important;
}

.negrita {
    font-weight: bold;
}


.dinners {
    font-weight: bold;
    color: black;
    font-size: 14px;
}

.clic-dinners {
    font-weight: bold;
    color: #0043a8;
    font-size: 16px;
}

/* =============== DINNERS ======================= */
.btn-flotante {
    font-size: 16px;
    /* Cambiar el tamaño de la tipografia */
    text-transform: uppercase;
    /* Texto en mayusculas */
    font-weight: bold;
    /* Fuente en negrita o bold */
    color: #3A7EAF;
    /* Color del texto */
    border-radius: 150px !important;
    /* Borde del boton */
    letter-spacing: 2px;
    /* Espacio entre letras */
    background-color: #3A7EAF !important;
    /* Color de fondo */
    padding: 10px 15px;
    /* Relleno del boton */
    position: fixed;
    bottom: 25px;
    right: 40px;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

.btn-flotante:hover {
    background-color: #ffffff;
    /* Color de fondo al pasar el cursor */
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-7px);
}

@media only screen and (max-width: 600px) {
    .btn-flotante {
        font-size: 14px;
        padding: 12px 20px;
        bottom: 20px;
        right: 20px;
    }
}


/*============ WATHSAPP ====================== */
.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 80px;
    /*bottom:140px;*/
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.float:hover {
    text-decoration: none;
    color: #25d366;
    background-color: #fff;
}


/*============ TELEGRAM ====================== */
.float-2 {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 150px;
    /*bottom:140px;*/
    right: 40px;
    background-color: #0088CC;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.float-2:hover {
    text-decoration: none;
    color: #0088CC;
    background-color: #fff;
}



.float, .float-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajustes solo para móvil */
@media (max-width: 768px) {

  .float {
      right: 15px;   /* más pegado al borde derecho */
      bottom: 20px;  /* más abajo */
      width: 55px;
      height: 55px;
      font-size: 26px;
  }

  .float-2 {
      right: 15px;  
      bottom: 85px; /* mantiene separación entre botones */
      width: 55px;
      height: 55px;
      font-size: 26px;
  }
}





.content-coment {
    max-height: 250px;
    width: auto;
    border: 1px solid #ffffff;
    background: #ffffff;
    overflow-y: scroll;
}

.coment {
    height: auto;
}


ul.listas {
    list-style-type: disc;
}


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

.text-yellow {
    color: #fac26e;
}

.text-rose {
    color: #fcb03f !important;
}

.text-white-blue {
    color: rgb(50, 146, 255);
}

.text-rose {
    color: rgb(216, 74, 197);
}


/*================== AVISO CON MOVIMIENTO ================= */
@keyframes scroll {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-700px * 1));
        -webkit-transform: translateX(calc(-700px * 1));
    }
}

.slider {
    overflow: hidden;
    width: auto;
}

.slide-track {
    display: flex;
    animation: scroll 10s linear infinite;
    -webkit-animation: scroll 10s linear infinite;
    width: calc(700px * 2);
}


@keyframes scroll-2 {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-150px * 5));
        -webkit-transform: translateX(calc(-150px * 5));
    }
}


.slide-track-2 {
    /*display: flex;*/
    animation: scroll-2 10s linear infinite;
    -webkit-animation: scroll-2 10s linear infinite;
    width: calc(150px * 10);
}

.slide {
    width: 100%;
}





.item a:hover {
    background-color: #D5B800 !important;
    color: black !important;
    width: 100px !important;
    text-align: center !important;
}

.item-2 a:hover {
    color: #D5B800 !important;
}

.item-2 a span:hover {
    color: #D5B800 !important;
}


.item-3 p i:hover {
    color: #D5B800 !important;
}

.item-3 p a span:hover {
    color: #D5B800 !important;
}



label .estrella {
    color: grey !important;
    cursor: pointer !important;
    font-size: 30px !important;
}

.estrella {
    cursor: pointer !important;
    font-size: 30px !important;
}

input[type="radio"] {
    display: none;
}

.clasificacion {
    direction: rtl;
    /* right to left */
    unicode-bidi: bidi-override;
    /* bidi de bidireccional */
    text-align: left !important;
}

label:hover {
    color: orange;
}

label:hover~label {
    color: orange;
}

input[type="radio"]:checked~label {
    color: orange;
}

.orientar-derecha {
    text-align: left !important;
}

.centrar-h-v {
    display: flex;
    justify-content: left;
    align-items: center;
}


.avatar a img:hover {
    background-color: gold !important;
}

.avatar-select {
    background-color: gold !important;

}


.cat-select {
    background-color: white;
    color: black;
    height: 40px;
    cursor: pointer;
}

.cat-select select option {
    cursor: pointer !important;
}

.cat-text {
    color: rgb(9, 94, 97);
    font-weight: bold;
}

.cat-fondo {
    background-color: #f5e8b5 !important;
}

.zindex-1000 {
    z-index: 1000 !important;
}

.familia {
    font-size: 13px !important;
    position: relative;
    text-decoration: none;
    color: #ffffff !important;
    padding: 0px 10px;
    /* Añadir padding para mejorar la apariencia */
    display: inline-block;
    /* Asegura que el fondo abarque el contenido */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.familia:hover,
.familia:focus {
    /*background-color: #58ccf5;*/
    /* Color de fondo al pasar el cursor */
    color: #ffffff !important;
    /* Color de texto al pasar el cursor */
}

.familia::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: rgb(255, 255, 255);
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.familia:hover::after {
    transform: scaleX(1);
}

.panel-logo {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mantener-posicion {
    position: fixed !important;
}


.c-corporatvo-1 {
    color: #ec008d !important;
}

.c-corporatvo-2 {
    color: #58ccf5;
}

.c-corporatvo-3 {
    color: #fcb03f;
}

.c-corporatvo-4 {
    color: #000000;
}

.c-corporatvo-5 {
    color: #088178;
}

.fnd-corporatvo-1 {
    color: #ec008d !important;
}

.fnd-corporatvo-2 {
    color: #58ccf5;
}

.fnd-corporatvo-3 {
    color: #fcb03f;
}

.fnd-corporatvo-4 {
    color: #000000;
}

.fnd-corporatvo-5 {
    color: #088178;
}



.pnl-new-product {
    width: 100%;
    /* Ancho del div */
    height: 600px;
    /* Altura fija */
    overflow-y: auto;
    /* Scroll vertical cuando el contenido sea mayor que la altura */
    border: 1px solid #f9f6f6;
    padding: 10px;
}


.contenedor {
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    height: 20px;
    /* Ajusta a toda la pantalla */
}

.elemento {
    padding: 20px;
}


.bajar-5 {
    margin-top: 5px;
}

.bajar-10 {
    margin-top: 10px;
}

.bajar-15 {
    margin-top: 15px;
}

.alto-20 {
    height: 20px !important;
}

.alto-25 {
    height: 25px !important;
}

.alto-30 {
    height: 30px !important;
}

.alto-35 {
    height: 35px !important;
}

.alto-38 {
    height: 38px !important;
}

.alto-40 {
    height: 40px !important;
}

.alto-45 {
    height: 45px !important;
}

.alto-50 {
    height: 50px !important;
}

.alto-55 {
    height: 55px !important;
}

.alto-60 {
    height: 60px !important;
}

.alto-65 {
    height: 65px !important;
}

.alto-70 {
    height: 70px !important;
}

.fond-transparente {
    background-color: transparent !important;
    border: none;
}

.busqueda {
    font-style: italic !important;
}

.texto-left {
    text-align: left !important;
}

.texto-right {
    text-align: right !important;
}



.btn-anular-prod {
    font-size: 24px;
    color: red;
    font-weight: bold;
}

.espacio-left {
    margin-left: 40px;
}

.contenedor-final {
    justify-content: flex-end;
}




/* Acordeón: estilos generales */
.accordion-item {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

/* Botón del acordeón */
.accordion-button {
    padding: 0.3rem 1rem;
    height: 40px;
    font-size: 0.95rem;
    background-color: #f8f9fa;
    color: #333;
    box-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Botón cuando está activo (abierto) */
.accordion-button:not(.collapsed) {
    background-color: #58ccf5;
    /* azul Bootstrap */
    color: white;
    font-weight: bold;
    box-shadow: none !important;
}

/* Oculta la línea inferior cuando se abre */
.accordion-button:focus {
    box-shadow: none;
}

/* Cuerpo del acordeón */
.accordion-body {
    padding: 1rem;
    background-color: #ffffff;
    border-top: none !important;
}

/* Opcional: transición suave al abrir/cerrar */
.accordion-collapse {
    transition: max-height 0.3s ease;
}

/* Quitar bordes raros si estás usando accordion-flush */
.accordion.accordion-flush .accordion-item {
    border: 1px solid #dee2e6;
}

.accordion.accordion-flush .accordion-button {
    border-radius: 0;
}

/* Ajuste visual para acordeones múltiples */
.accordion-button::after {
    filter: invert(1) brightness(0.5);
}


.centrar-elementos {
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
}

.centrar-elementos-right {
    display: flex;
    justify-content: right;
    /* Centra horizontalmente */
    align-items: center !important;
    /* Centra verticalmente */
}

.centrar-elementos-left {
    display: flex;
    justify-content: left;
    /* Centra horizontalmente */
    align-items: center !important;
    /* Centra verticalmente */
}

/*============ ZOOM A LA IMAGEN DE PRODUCTO ===============*/

.zoom-container {
    width: 400px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
}

.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    transform-origin: center center;
}



.product-image-slider-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#PanelImgProducto img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
}

.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

.btn-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}


.fnd-check {
    background-color: #eaeaea;
    z-index: 9999;
}

select.form-control {
    appearance: auto;
    /* Para navegadores modernos */
    -webkit-appearance: auto;
    /* Safari/Chrome */
    -moz-appearance: auto;
    /* Firefox */
    cursor: pointer;
}

.tbl-btn-pagar {
    background-color: #58ccf5 !important;
    border: 2px solid #a00065;
    color: #ffffff !important;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.tbl-btn-pagar:hover {
    background-color: #48aacd !important;
}

.tbl-bordes {
    border: 2px solid #000000;
}

.tbl-cabecera {
    background-color: #58ccf5;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.fnd-aviso {
    background-color: #ec008d !important;
    height: 40px !important;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 220px;
}

.font-factura {
    font-size: 16px !important;
    color: #000000 !important;
}


:root {
    --psr-bg: #f7f9fc;
    --psr-card: #fff;
    --psr-text: #1f2937;
    --psr-muted: #6b7280;
    --psr-border: #e5e7eb;
    --psr-accent: #0ea5e9;
    --psr-accent-2: #06b6d4;
    --psr-cta: #ff8f00;
    --psr-danger: #b91c1c;
    --psr-ok: #059669;
    --psr-shadow: 0 24px 54px rgba(31, 41, 55, .16);
    --psr-radius: 14px;
}

.psr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 9998;
}

.psr-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.psr-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 9999;
}

.psr-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.psr-card {
    width: min(720px, 92vw);
    max-height: 92vh;
    overflow: auto;
    background: var(--psr-card);
    color: var(--psr-text);
    border: 1px solid var(--psr-border);
    border-radius: var(--psr-radius);
    box-shadow: var(--psr-shadow);
    padding: 16px 16px 12px;
}

.psr-noscroll { overflow: hidden !important; }

.psr-close {
    position: absolute;
    margin-left: calc(min(720px, 92vw) - 40px);
    background: transparent;
    border: 0;
    font-size: 28px;
    color: #94a3b8;
    cursor: pointer;
}

.psr-close:hover {
    color: #334155;
}

.psr-header--secure {
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    border-bottom: 1px solid var(--psr-border);
    padding: 14px 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.psr-header-left {
    display: flex;
    align-items: center;
    gap: 12px
}

.psr-lock svg {
    width: 28px;
    height: 28px;
    fill: var(--psr-ok)
}

.psr-powered {
    color: var(--psr-muted)
}

.psr-culqi {
    color: var(--psr-cta);
    font-weight: 800
}

.psr-order {
    display: flex;
    align-items: center;
    gap: 8px
}

.psr-order-label {
    color: var(--psr-muted)
}

.psr-order-amount {
    color: var(--psr-cta);
    font-weight: 800
}

.psr-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 12px 0
}

.psr-tab {
    background: #fff;
    border: 1px solid var(--psr-border);
    color: var(--psr-text);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px
}

.psr-tab.is-active {
    border-color: var(--psr-accent);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, .12);
    color: #0b4f71;
    background: #f0fbff
}

.psr-yape-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-weight: 900;
    background: var(--psr-accent-2);
    color: #fff
}

.psr-trustbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    background: #f8fafc;
    border: 1px solid var(--psr-border);
    padding: 10px 12px;
    border-radius: 12px;
    margin: 8px 8px 12px
}

@media(min-width:680px) {
    .psr-trustbar {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.psr-trustitem {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: .9rem
}

.psr-trustitem svg {
    width: 18px;
    height: 18px;
    fill: var(--psr-ok)
}

.psr-panels {
    padding: 12px
}

.psr-panel {
    display: none
}

.psr-panel.is-active {
    display: block
}

.psr-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px
}

.psr-row label {
    font-size: .92rem;
    color: #374151;
    font-weight: 600
}

.psr-row input {
    background: #fff;
    color: #111827;
    border: 1px solid var(--psr-border);
    padding: 12px;
    border-radius: 10px
}

.psr-row input::placeholder {
    color: #9ca3af
}

.psr-row input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    outline: none
}

.psr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.psr-hint {
    color: #6b7280;
    font-size: .85rem
}

.psr-error {
    color: var(--psr-danger);
    font-size: .85rem;
    min-height: 1em
}

.psr-cardbrand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0 6px
}

/* Logos como <img> */
.psr-brand-logos .logo,
.psr-logos .logo{
  background:#fff;
  border:1px solid var(--psr-border);
  border-radius:4px;
  width:64px;             /* ancho visible del logo */
  height:28px;            /* alto visible del logo */
  display:grid;
  place-items:center;
  overflow:hidden;
}
.psr-brand-logos .logo img,
.psr-logos .logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Iconito Yape en la pestaña */
.psr-yape-img{
  width:18px;
  height:18px;
  border-radius:4px;
  display:inline-block;
  overflow:hidden;
}
.psr-yape-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.psr-brand-active {
    font-size: .9rem;
    color: #0b4f71;
    font-weight: 700
}

.psr-payments-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--psr-border)
}

.psr-logos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.psr-logos .logo {
    width: 52px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--psr-border);
    overflow: hidden;
    background: #fff
}

.psr-logos .logo svg {
    width: 100%;
    height: 100%
}

.psr-help {
    font-size: .9rem;
    color: var(--psr-muted)
}

.psr-help a {
    color: #0b4f71;
    text-decoration: underline
}

.psr-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    border-top: 1px solid var(--psr-border);
    margin-top: 0px
}

.psr-btn {
    background: #5f247c;
    color: #fff;
    border: 0;
    padding: 12px 18px;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(185, 185, 185, 0.25);
    cursor: pointer
}

.psr-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed
}

.psr-smallprint {
    margin: 8px 8px 0;
    color: #6b7280;
    font-size: .82rem
}

.psr-smallprint a {
    color: #0b4f71
}

@media(max-width:520px) {
    .psr-grid {
        grid-template-columns: 1fr
    }

    .psr-close {
        position: static;
        margin: 0 0 8px auto;
        display: block
    }
}

/* Forzar visibilidad si algún CSS externo pisa estilos */
.psr-modal {
    display: grid !important
}

.psr-modal.is-open {
    opacity: 1 !important;
    pointer-events: auto !important
}

.psr-overlay.is-open {
    opacity: 1 !important;
    pointer-events: auto !important
}

.psr-footer{ display:flex; justify-content:flex-end; gap:10px; padding:8px;
             border-top:1px solid var(--psr-border); margin-top:8px; }
.psr-btn{ background:var(--psr-cta); color:#fff; border:0; padding:12px 18px;
          font-weight:800; border-radius:10px; box-shadow:0 10px 20px rgba(255,143,0,.25);
          cursor:pointer; }
.psr-btn:disabled{ background:#e5e7eb; color:#9ca3af; box-shadow:none; cursor:not-allowed; }
/* botón secundario */
.psr-btn--secondary{ background:#ffffff; color:#374151; border:1px solid var(--psr-border);
                     box-shadow:none; }
.psr-btn--secondary:hover{ background:#f8fafc; }


/* Barra de logos debajo del carrito */
.pay-logos-bar{
  align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; margin:10px 0 14px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.pay-logos-left{ align-items:center; gap:8px }
.pay-logos-left img{ height:26px; width:auto; display:block }
.pay-logos-text{ font-size:.9rem; color:#6b7280 }

.pay-logos-right{ align-items:center; gap:10px; flex-wrap:wrap }
.pay-logos-right img{
  height:16px; width:auto; filter: saturate(1); /* se ven vivos sin ser gigantes */
}

.payment-row img {
  height: 26px;       
  width: auto;       
}

.visa {
  height: 18px !important;       
  width: auto !important;       
}

.payment-logo-culqi {
  height: 26px;
}

@media (max-width: 576px) {
  .payment-row {
    justify-content: center;
  }
  .payment-icons {
    justify-content: center;
  }
}



/* Badge "Pago seguro" */
.pay-secure-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.92rem; letter-spacing:.2px;
  color:#0b4f71; /* azul profesional */
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%, #f7fafc 100%);
  border:1px solid #e5e7eb;
  box-shadow:0 1px 0 rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.6);
  white-space:nowrap;
}
.pay-secure-icon{
  width:16px; height:16px;
  fill:#059669; /* verde confianza */
  flex:0 0 16px;
}

/* Opcional: cambia color al pasar el mouse (sutil) */
.pay-secure-badge:hover{
  background:#f1f5f9;
  border-color:#dbe2ea;
}


/* ---------- Header / Marca comercio ---------- */
.psr-header-right{ display:flex; align-items:center; gap:12px }
.psr-merchant-logo{
  width: 100px; 
  height: 45px; 
  border-radius:6px; 
  object-fit:cover;
}
.psr-merchant-name{ margin:0; font-size:1.05rem; font-weight:800; color:#1f2937 }

/* ---------- Línea de seguridad inferior ---------- */
.psr-secureline{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; margin:10px 8px 0;
  color:#475569; font-size:.92rem;
}
.psr-secureleft{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.psr-secureicon{ width:16px; height:16px; fill:#059669 }
.psr-badge{
  padding:4px 10px; border-radius:999px;
  background:#0ea5e9; color:#fff; font-weight:800; font-size:.82rem;
}
.psr-badge-outline{
  background:#fff; color:#1f2937; border:1px solid var(--psr-border); font-weight:700;
}
.psr-dot{ opacity:.5; }

/* ---------- Powered by Culqi (imagen real) ---------- */
.psr-poweredby-img{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:4px; padding:6px 12px 2px;
}
.psr-poweredby-img img{ height:26px; width:auto; display:block; }
.psr-credicorp{ color:#94a3b8; font-size:.78rem; }

/* Logos inferiores (ya con <img>) */
.psr-logos .logo{ width:64px; height:28px; }
.psr-logos .logo img{ width:100%; height:100%; object-fit:contain; }

/* Botón cancelar secundario */
.psr-btn--secondary{
  background:#ffffff; color:#374151; border:1px solid var(--psr-border); box-shadow:none;
}
.psr-btn--secondary:hover{ background:#f8fafc; }


/* ---- Icon buttons uniformes ---- */
.header-icons .icon-btn,
.icon-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:8px 10px; border-radius:999px;
  color:#0b4f71; text-decoration:none; font-weight:700;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
  background: #fff;
  border:1px solid #e5e7eb;
}
.header-icons .icon-btn i,
.icon-btn i{
  font-size:1.15rem; line-height:1;
}

/* Hover/active: sutil y moderno */
.header-icons .icon-btn:hover,
.icon-btn:hover{
  background:#f0fbff; color:#0b4f71; transform: translateY(-1px);
  box-shadow:0 6px 18px rgba(14,165,233,.15);
}

/* Contadores (Blog, Favoritos, Carrito) */
.header-icons .badge.count,
.icon-btn .badge.count{
  position: relative;
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; font-size:.72rem; font-weight:800;
  color:#fff; background:#ec008d; /* tu fucsia corporativo */
}

/* Caja del buscador */
.search-box{
  background:#fff; border:1px solid #e5e7eb;
}
.search-box .form-control{
  height:38px; box-shadow:none;
}
.search-box .form-control:focus{
  box-shadow:none; outline:none;
}
.search-box .input-group-text{
  border:none;
}

/* Ajuste de contraste en menú fucsia */
.fondo-menu{ background-color:#ec008d!important; color:#fff!important; }
.familia{ color:#fff!important; }

/* Pequeñas mejoras en dropdown del carrito (opcional) */
.cart-dropdown-wrap{
  border:1px solid #e5e7eb; box-shadow:0 18px 40px rgba(0,0,0,.08);
  border-radius:12px; overflow:hidden;
}

/* Para ícono de corazón en favoritos al activar */
.icon-btn .bi-heart-fill{ color:#ec008d; }

/* Asegurar centrado vertical en header */
.header-action-2{ align-items:center; }


/* ====== FIX HEADER LAYOUT ====== */

/* 1) Anular “subir/bajar” que descalibran el header */
.subir-20, .subir-10, .bajar-10, .subir-5, .subir-7, .subir-15, .subir-18, .subir-19 {
  margin-top: 0 !important;
}

/* 2) Centrado vertical real */
.header-middle .row { align-items: center; }         /* alinea todo dentro del header */
.header-middle { padding: 12px 0; }                  /* respiración en lugar de alturas forzadas */
.alto-70 { height: auto !important; }                /* evita recortes / solapes */

/* 3) Espaciado horizontal en grupo de iconos (derecha) */
.header-icons { gap: 12px; }

/* 4) Botones de icono: visual más liviano en header blanco */
.icon-btn{
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 999px;
  color:#0b4f71;
}
.icon-btn:hover{
  background: rgba(0,0,0,.04);
  box-shadow: none;
  transform: translateY(0);
}

/* 5) Badge en esquina del ícono (no “flotando” dentro del pill) */
.icon-btn{ position: relative; }
.icon-btn .badge.count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; font-size: .72rem; font-weight: 800;
  color: #fff; background: #ec008d;
  border: 2px solid #fff; /* se ve mejor sobre fondos claros */
}

/* 6) Evitar que el bloque derecho “caiga” sobre la franja fucsia */
.header-action-center, .header-action-2 { align-items: center; }


/* ===== Header compacto y sin bordes en iconos ===== */

/* 1) Elimina alturas forzadas y márgenes verticales */
.alto-70,
.search-style-2.alto-55 { height: auto !important; }

.header-middle-ptb-1 { padding-top: 6px !important; padding-bottom: 6px !important; }
.header-middle        { padding: 0 !important; }
.header-middle .row   { align-items: center; }

/* Quita márgenes internos del buscador */
.search-style-2 { margin: 0 !important; }
.search-style-2 .row { margin-left: 0 !important; margin-right: 0 !important; }

/* Input más compacto */
.search-box .form-control { height: 34px !important; }

/* Logo alineado y contenido compacto */
.logo a{ display:inline-flex; align-items:center; }
.logo img{
  height: 58px !important;   /* ajusta a tu gusto: 54–60px */
  width: auto !important;    /* mantiene proporción */
}
@media (max-width: 1200px){
  .logo img{ height: 52px !important; }
}
@media (max-width: 992px){
  .logo img{ height: 46px !important; }
}

/* ===== 2) Iconos homogéneos ===== */
/* Reset duro para que ningún estilo previo meta borde/fondo */
.header-icons .icon-btn,
.header-action-icon-2 .icon-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 6px 8px !important;
  border-radius: 999px;
  color: #0b4f71;  /* color base de íconos */
}
.header-icons .icon-btn i{ font-size: 20px; line-height: 1; }

/* Hover sutil igual para todos */
.header-icons .icon-btn:hover{
  background: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
}

/* Badge en esquina, igual en todos */
.header-icons .icon-btn{ position: relative; }
.header-icons .icon-btn .badge.count{
  position: absolute !important;
  top: -4px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; font-size: .72rem; font-weight: 800;
  color: #fff; background: #ec008d;
  border: 2px solid #fff;
}

/* Estado “activo” (ej. Favoritos con items) */
.icon-btn.is-active i{ color: #ec008d !important; }   /* mismo tono que el badge */

/* Compactar header (por si quedó aire) */
.header-middle-ptb-1{ padding: 4px 0 !important; }
.fondo-menu .header-wrap{ padding-top: 6px; padding-bottom: 6px; }


/* ===== Cuenta / Login compactos y centrados ===== */
#txtIconsLog{
  display:flex; align-items:center; gap:12px;
  list-style:none; margin:0; padding:0;
}

/* Chip reutilizable (igual estilo que los demás iconos) */
.account-chip, .login-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:transparent; border:0; color:#0b4f71; text-decoration:none;
}
.account-chip:hover, .login-chip:hover{ background:rgba(0,0,0,.05); }

/* Avatar redondo (si hay imagen) */
.account-chip .avatar{
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:1px solid #e5e7eb;
}

/* Nombre y caret */
.account-chip .user-name{ font-weight:700; white-space:nowrap; }
.account-chip .caret{ font-size:.9rem; opacity:.65 }

/* Dropdown */
#txtIconsLog .has-dropdown{ position:relative; }
#txtIconsLog .dropdown-menu{
  position:absolute; top:100%; right:0;
  min-width:200px; margin-top:6px; padding:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  display:none; z-index:1000;
}
#txtIconsLog .dropdown-menu a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; color:#0b4f71; text-decoration:none;
}
#txtIconsLog .dropdown-menu a:hover{ background:#f8fafc; }
#txtIconsLog .dropdown-open .dropdown-menu{ display:block; }

/* Icono de persona homogéneo con el resto */
.login-chip i, .account-chip i{ font-size:20px; line-height:1; }

/* Ajuste fino: alinear vertical con los otros botones */
.header-action-2, .header-icons{ align-items:center; }





/* ===============================================
   LIMPIEZA FINAL DE FONDOS BLANCOS EN SLIDER
   =============================================== */

/* Elimina cualquier fondo heredado o añadido por temas o wrappers */
.single-slider-img,
.single-slider-img-1,
.single-slider-img::before,
.single-slider-img::after,
.single-slider-img-1::before,
.single-slider-img-1::after,
.home-slider .slick-slide,
.home-slider .slick-track,
.home-slider .slick-list {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Elimina el recuadro blanco o sombra del contenedor de imagen */
.single-hero-slider .col-lg-7,
.single-hero-slider .col-md-6 {
  background: transparent !important;
  box-shadow: none !important;
}

/* Las imágenes del hero slider completamente limpias */
.single-slider-img img,
.single-slider-img-1 img {
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px;
}

/* Corrige posibles fondos de secciones adyacentes */
.home-slider .container,
.home-slider .row,
.home-slider .single-animation-wrap {
  background: transparent !important;
}

/* Corrige fondo de slick-slide activo/inactivo */
.slick-slide.slick-active,
.slick-slide.slick-current {
  background: transparent !important;
}




/* ============================================================
   HERO SLIDER - Nadecor (versión final notoria)
   Estructura actual: <div class="home-slider"><section class="home-slider ...">...</section></div>
   -> Todo el FONDO se aplica sobre el SECTION para evitar conflictos.
   ============================================================ */

/* ---------- 0) Reset de wrappers que meten blanco/sombras ---------- */
section.home-slider,
section.home-slider .single-hero-slider,
section.home-slider .single-hero-slider > .container,
section.home-slider .slider-animated-1,
section.home-slider .single-slider-img,
section.home-slider .single-slider-img-1,
section.home-slider .single-slider-img-1::before,
section.home-slider .single-slider-img-1::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Imagen limpia (sin fondo) + leve sombra externa para hacerla flotar */
section.home-slider .single-slider-img img{
  display:block;
  background: transparent !important;
  border:0 !important;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}

/* ---------- 1) Capa base del HERO (SECTION) ---------- */
section.home-slider{
  position: relative;
  isolation: isolate;         /* importante: confina capas internas */
  overflow: visible !important;
  margin-top: 0 !important;   /* pegado a la barra */
}

/* Mantén el contenido por ENCIMA del fondo */
section.home-slider .container,
section.home-slider .row{
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---------- 2) Fondo PROFESIONAL y NOTORIO en UNA SOLA CAPA ---------- */
/* Colores corporativos en variables */
section.home-slider{
  --fucsia: 236,0,141;     /* #EC008D */
  --teal:     8,129,120;    /* #088178 */

  /* Intensidades y tamaños (ajusta si quieres aún más punch) */
  --spot-op: .34;           /* 0.28–0.40 => más alto = más notorio */
  --left-w:  1150px;        /* ancho radial izquierda */
  --left-h:   720px;        /* alto radial izquierda */
  --right-w: 1250px;        /* ancho radial derecha */
  --right-h:  780px;        /* alto radial derecha */
}

/* UNA sola capa ::before para evitar que otras capas la tapen */
section.home-slider::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;                 /* detrás del contenido, delante del fondo del body */
  pointer-events:none;

  /* 4 fondos apilados:
     1) Radial FUCSIA grande que entra desde fuera a la izquierda (visible!)
     2) Radial TEAL grande desde la derecha (visible!)
     3) Degradé sutil vertical para integrar con el blanco
     4) Velo muy suave superior para “pegarse” con la franja fucsia del menú
  */
  background-image:
    radial-gradient(var(--left-w) var(--left-h) at -12% 25%,
      rgba(var(--fucsia), var(--spot-op)) 0%,
      rgba(var(--fucsia), 0) 62%),
    radial-gradient(var(--right-w) var(--right-h) at 112% 78%,
      rgba(var(--teal), var(--spot-op)) 0%,
      rgba(var(--teal), 0) 64%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 100%),
    linear-gradient(180deg, rgba(236,0,141,.18), rgba(236,0,141,0) 14%);
  background-repeat: no-repeat;
}

/* Ajustes responsivos del fondo para que siempre SE NOTE */
@media (min-width: 1400px){
  section.home-slider{
    --spot-op: .36;
    --left-w:  1300px; --left-h: 820px;
    --right-w: 1400px; --right-h: 880px;
  }
}
@media (max-width: 1200px){
  section.home-slider{
    --spot-op: .32;
    --left-w:  960px;  --left-h: 600px;
    --right-w: 1040px; --right-h: 660px;
  }
}
@media (max-width: 992px){
  section.home-slider{
    --spot-op: .28;
    --left-w:  780px;  --left-h: 500px;
    --right-w: 860px;  --right-h: 540px;
  }
}
@media (max-width: 576px){
  section.home-slider{
    --spot-op: .24;
    --left-w:  620px;  --left-h: 420px;
    --right-w: 660px;  --right-h: 440px;
  }
}

/* ---------- 3) (Opcional) si usas .hero-bg--blobs/.hero-sidewash del tema, anúlalos ---------- */
/* Evita capas antiguas que “laven” el color nuevo */
section.home-slider.hero-bg--blobs::before,
section.home-slider.hero-bg--blobs::after{
  display:none !important;
}
section.home-slider.hero-sidewash::before,
section.home-slider.hero-sidewash::after{
  opacity:.08 !important; /* si quieres mantener un leve sidewash; sube/baja */
}

/* ---------- 4) Dots centrados y SIEMPRE visibles ---------- */
.hero-slider-1{ position:relative; padding-bottom: 40px; }
.hero-slider-1 .slick-list{ overflow: visible !important; }
.hero-slider-1 .slick-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 8px; z-index: 5;
}
.hero-slider-1 .slick-dots li{ margin: 0 4px; }
.hero-slider-1 .slick-dots li button{
  width:10px; height:10px; border-radius:50%; border:0;
  background: rgba(8,129,120,.38);              /* base teal */
  transition: transform .15s ease, background .15s ease;
}
.hero-slider-1 .slick-dots li.slick-active button{
  width:12px; height:12px; background:#ec008d;   /* fucsia activo */
  transform: scale(1.08);
}

/* ---------- 5) Compacta el alto: pega el hero al menú ---------- */
section.home-slider .single-hero-slider{ padding: 16px 0 32px !important; }
@media (min-width: 992px){
  section.home-slider .single-hero-slider{ padding: 22px 0 36px !important; }
}



/* 1) Mata cualquier desborde horizontal global */
html, body { width:100%; overflow-x:hidden !important; }








/* =======================================================================
   PASARELA DE PAGO – MODAL ESTILO CULQI
   ======================================================================= */

.psr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.psr-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.psr-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

.psr-modal .psr-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 20px 35px rgba(0,0,0,0.18);
  max-width: 720px;          /* ancho total modal */
  width: 100%;
  min-width: 0;
  overflow: hidden;
  pointer-events: auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;           /* tamaño general más pequeño */
}

/* Header */

.psr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #111;
  color: #fff;
}

.psr-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.psr-merchant-logo {
  height: 26px;
  width: auto;
}

.psr-merchant-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.psr-powered {
  font-size: 11px;
  opacity: .8;
}

.psr-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.psr-order {
  text-align: right;
}

.psr-order-label {
  font-size: 11px;
  display: block;
  opacity: .8;
  color: orange;
}

.psr-order-amount {
  font-size: 15px;
  font-weight: 600;
}

.psr-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Layout cuerpo */

.psr-body {
  display: flex;
  min-height: 320px;
}

/* Sidebar (tabs verticales) */

.psr-sidebar {
  width: 190px;
  border-right: 1px solid #f0f0f0;
  justify-content: space-between;
  background: #fffdf8;
}

.psr-tabs-vertical {
  display: flex;
  flex-direction: column;
}

.psr-tab-vertical {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  cursor: pointer;
  color: #555;
  border-left: 3px solid transparent;
}

.psr-tab-vertical .psr-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.psr-tab-icon-yape img {
  height: 18px;
  width: auto;
}

.psr-tab-vertical.is-active {
  background: #fff7ec;
  border-left-color: #ff9200;
  color: #222;
  font-weight: 600;
}

/* Columna derecha */

.psr-main {
  flex: 1;
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
}

/* Formularios */

.psr-panels {
  flex: 1;
}

.psr-panel {
  display: none;
}

.psr-panel.is-active {
  display: block;
}

.psr-row {
  margin-bottom: 10px;
}

.psr-row label {
  display: block;
  font-size: 12px;
  margin-bottom: 0px;
  color: #444;
}

.psr-row input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  padding: 4px 9px;
  font-size: 13px;
  height: 34px;  /* inputs más pequeños */
}

.psr-row input:focus {
  outline: none;
  border-color: #ff9200;
  box-shadow: 0 0 0 1px rgba(255,146,0,0.15);
}

.psr-error {
  display: block;
  font-size: 11px;
  color: #c0392b;
  min-height: 12px;
}

.psr-hint {
  display: block;
  font-size: 11px;
  color: #777;
}

/* grid para vencimiento + CVV */

.psr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Marca tarjeta */

.psr-cardbrand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.psr-brand-logos {
  display: flex;
  gap: 6px;
}

.psr-brand-logos .logo img {
  height: 22px;
  width: auto;
}

.psr-brand-active {
  font-size: 12px;
  color: #555;
}

/* Yape QR */

.psr-qr {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.psr-qr-box {
  width: 96px;
  height: 96px;
  border-radius: 4px;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.psr-qr-placeholder {
  font-size: 12px;
  color: #999;
}

.psr-qr-help {
  font-size: 12px;
}

/* Footer botones */

.psr-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.psr-btn {
  border: 0;
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  background: #5f247c;
  color: #fff;
  font-weight: 600;
}

.psr-btn[disabled] {
  opacity: .6;
  cursor: default;
}

.psr-btn--secondary {
  background: #f3f3f3;
  color: #444;
}

/* Fila inferior Culqi + logos */

.psr-bottomrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.psr-bottom-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.psr-bottom-powered {
  font-weight: bold;
  letter-spacing: .03em;
}

.psr-culqi-logo {
  height: 24px;
  width: auto;
}

.psr-bottom-credicorp {
  font-size: 10px;
  color: #939292;
}

.psr-bottom-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}

.psr-securetext {
  font-size: 11px;
  color: #555;
}

.psr-badge {
  padding: 2px 6px;
  border-radius: 3px;
  background: #0b8457;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.psr-dot {
  font-size: 12px;
  color: #999;
}

.psr-bottom-card {
  height: 20px;
  width: auto;
}

.psr-bottom-card-2 {
  height: 40px;
  width: auto;
}

/* Nota legal */

.psr-smallprint {
  margin-top: 6px;
  font-size: 11px;
  color: #777;
}

.psr-smallprint a {
  color: #ff9200;
  text-decoration: none;
}

.psr-smallprint a:hover {
  text-decoration: underline;
}

/* Responsivo */

@media (max-width: 720px) {
  .psr-card {
    max-width: 95%;
  }
}

@media (max-width: 600px) {
  .psr-body {
    flex-direction: column;
  }
  .psr-sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .psr-tabs-vertical {
    flex-direction: row;
  }
  .psr-tab-vertical {
    justify-content: center;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .psr-tab-vertical.is-active {
    border-bottom-color: #ff9200;
  }
}

.psr-body {
  display: flex;
  align-items: stretch;
}


.psr-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
  min-width: 190px;
}

.psr-sidebar-powered {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 11px;
  line-height: 1.3;
}


.psr-bottom-powered,
.psr-bottom-credicorp {
  display: block;
}


.psr-culqi-logo {
  height: 26px;
  width: auto;
  margin: 4px 0;
}


@media (max-width: 768px) {
  .psr-body {
    flex-direction: column;
  }

  .psr-sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .psr-sidebar-powered {
    margin-top: 0;
    text-align: right;
  }
}

.psr-panel{
  display: none;
}
.psr-panel.is-active{
  display: block;
}

/* pasos internos de Yape */
.psr-yape-step.is-hidden{
  display: none;
}

.psr-yape-step {
  padding: 16px 8px 0;
}

/* Contenedor principal texto + ilustración */
.psr-yape-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  max-width: 440px;
  margin: 0 auto 20px;
}

/* Columna izquierda (texto) */
.psr-yape-info {
  flex: 1 1 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}

/* Logo Yape arriba */
.psr-yape-logo img {
  height: 60px;
  width: auto;
  margin-bottom: 12px;
}

/* Título “Aprueba tu compra…” */
.psr-yape-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px;
}

/* Subtítulo “¿Dónde lo encuentro?” */
.psr-yape-sub {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Lista numerada */
.psr-yape-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

/* Columna derecha (imagen) */
.psr-yape-illustration img {
  display: block;
  max-width: 120px;
  height: auto;
}

/* Botón morado tipo Yape */
.psr-btn--yape {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 4px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

/* Responsive: en pantallas chicas la imagen va abajo */
@media (max-width: 480px) {
  .psr-yape-layout {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .psr-yape-illustration img {
    max-width: 160px;
  }
}

.swal2-container {
  z-index: 20000 !important;
}



/* FIX: overlay/modal abren con .is-open (como tu JS) */
#pasarela-overlay.psr-overlay.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#pasarela-modal.psr-modal{
  opacity: 0;                /* opcional, si quieres fade */
  pointer-events: none;
}

#pasarela-modal.psr-modal.is-open{
  opacity: 1 !important;
  pointer-events: auto !important;
}