/*CSS para moviles hasta ipad*/
@media (max-width: 768px) { 
	.menu-btn span {background: var(--cat-primary-color);}
	.main-menu>ul {border-right: 1px solid var(--cat-primary-color);}
	.cat-heading-wrapper h2 {padding: 5px}
		.cat-pri-icon {width: 100%; height: 300px; margin: 0 0 15px 0}
	.cat-pri-icon img {width: 300px; height: 300px;}
	.cat-price-info {width: 100%}
		.cat-pricing-title .cat-price {margin: 50px 0 0 0; top: 0px !important; right:0px !important}
		.cat-price-person {top: 0px !important; margin: 80px 0 0 0 !important;}
		.cat-pricing-list p {margin: 90px 0 0 0 !important;}
    #NOR {width: 100% !important;}
	#QBR {width: 100% !important;}
		.cat-service-img img {height: auto; width: 350px;}
	.cat-story-info .cat-heading-wrapper {text-align: right; float: none}
	.cat-heading-wrapper h2 {margin-bottom: 10px !important;}
	.precio_por_persona {width: 100% !important; height: auto;text-align: right; float:none}
	.boton_presupuesto{display:none !important}
}
/*CSS para moviles hasta portatil/laptop*/
@media (max-width: 1199.98px) {
	.main-menu>ul {border-right: 1px solid var(--cat-primary-color);}
}
.cat-page-title a, .cat-page-title li {text-transform: capitalize;}
/*JOAN GENERICOS*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {color: var(--cat-primary-color);}
.search-btn{display:none !important}
/*JOAN HEADER*/
	.header-wrapper {background: white;}
		.has-sub-menu>.sub-menu>li:hover>a, .main-menu ul>li>a.active {color:  var(--cat-link-nav-hover-color);}
			.main-menu ul>li.active>a {color: var(--cat-primary-color);}
				.has-sub-menu>.sub-menu>li>a:before {background: var(--cat-link-nav-hover-color);}

/*FIN JOAN HEADER*/
/*MAIN CONTENT*/
/*SLIDER*/
.cat-banner-title {color: white; text-shadow: 1px 2px var(--cat-primary-color);}
.cat-banner-text-inner p {color: white; text-shadow: 1px 2px var(--cat-primary-color); font-size: 36px}
.cat-banner-text h4 {color: var(--cat-sub-title-color);}
.cat-banner-text h4::before {opacity: .5;}
.cat-banner-wrapper {background: url('/assets/images/main/slider/slider_demo.jpg') no-repeat; background-size: cover;}
/*END SLIDER*/
.cat-heading-wrapper h4::before, .cat-heading-wrapper h4::after {background: var(--cat-sub-title-color);}
.cat-heading-wrapper h4 {color: var(--cat-sub-title-color);}
.cat-heading-wrapper h2 {margin-bottom: 20px;}
	/*BOTONES RESTAURANTES*/
	#NOR{width: 50%}
	#QBR{width: 50%}
	.cat-service-info{padding: 10px 0 0 0}
	#NOR .cat-service-info h4{font-size: 22px}
	#QBR .cat-service-info h4{font-size: 22px}
	/*PRICE & ELEMENTOS BLOQUE 1*/
			.cat-top-dish-info h4 {overflow: visible;}
			.cat-top-dish-section:hover h4 {color: var(--cat-sub-title-color);}
				.cat-top-dish-info h4 span {color: var(--cat-primary-color); font-size: 1.5em;}
	/*NAV MENUS BLOQUE 2*/
			.nav-pills .nav-link {color: var(--cat-primary-color); border: 1px dashed var(--cat-primary-color);}
			.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background: var(--cat-primary-color); color: #fff;}
			.nav-pills .nav-link:hover {color: var(--cat-primary-color);}
			#contenido_precio_boton{width: 100%; height: auto;}
				.precio_por_persona{width: 30%; height: 100px; float: left}
				#pills-tabA-tab{float: right}
					.boton_presupuesto{height: 100px; padding: 27px 0}
				.cat-price-info a{float:right}
					.cat-pricing-title .cat-price {color: var(--cat-primary-color); font-size: 1.5em; top: 0px; right: 90px}
						.cat-price-person{font-size: 0.98em; position: absolute; top: 6px; right: 0px; color: var(--cat-primary-color);}
	/*BOOK US BLOQUE 3*/
		.cat-booking-wrapper {background-image: url('/assets/images/main/base_paralax.jpg');}
			.cat-booking-form:before {background-image: url(../images/main/shape_two.png);}
			.cat-booking-form:after {background-image: url(../images/main/shape_two.png);}
				a.cat-btn:active, a.cat-btn:hover, .cat-btn:hover {background-color: var(--cat-sub-title-color)}
	/*MENU DESC/DETALLE BLOQUE 5*/
	#caja_de_la_imagen{align-items:flex-start !important}
		.cat-story-info {margin: 0 0 20px;}
		.cat-story-info-precio-boton{width:100%; height: auto; position: relative}
		.precio_menu{width:35%; height: 75px; text-align: left; margin: 0 0 20px; float: left}
			.precio_menu h2 {margin: 0; font-weight: 700; font-size: 36px;}
		.btn_seleccionar_menu{width:100%;  height: 75px; margin: 0 0 20px; padding:12px}
		.cat-story-img img{border-radius:15px; border: 6px solid var(--cat-primary-color)}
			.cat-story-list li {background: var(--cat-link-nav-hover-color);}
			.cat-story-list li.alergy-alert {background: #ffcccc;}
				.caja_global_item{width: 100%; height: auto}
					.boton_accion{width:10%; height: auto; float: right; margin-top: 10%;}
					.capa_imagen{width: 40%; height: auto; float: left;}
					.description_item {width: 45%; height: auto; float: left; margin: 7% 0 0 15px}
	/*EVENTOS BLOQUE 8*/
		.cat-overlay {background: hsl(36deg 64% 20% / 60%);}
	/*FORMULARIO PRESUPUESTO*/
	#boton_cta{float: right}
.align-items-arriba{align-items: none}
/*FIN MAIN CONTENT*/
/*FOOTER*/
.cat-footer-copyright{background: var(--cat-sub-title-color);}
.cat-footer-social{display:none}
/*END FOOTER */
/*SCROLL*/
.scroll-to-topp {background: var(--cat-primary-color);}
/*FIN SCROLL*/

.cat-pricing-title h4 {color: var(--cat-title-color); font-size: 22px; padding-right: 1px; margin-bottom: 5px; font-weight: 600;}
.cat-booking-form input[type="checkbox"] {color: var(--cat-font-color); border: 1px solid var(--cat-input-border); background: var(--cat-input-bg); width: 100%; padding: 0 20px; height: 26px; line-height: 40px; border-radius: var(--cat-radius-comman); font-size: var(--cat-font14);}

.main-menu>ul>li+li {margin: 0 0 0 0px;}

/* ALERGENOS Y THUMB PLAT*/
.caja_alerjenos_menu {width: 100%; height: auto; float: inline-start; margin: 10px 0 0 0; font-size: 12px;}
.cat-story-list li {display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
.menu-thumb {width: 350px; height: auto; border-radius: 6px; object-fit: cover;}
.alergen-icons {display: flex; gap: 4px; margin-left: 8px;}
.alergen-icon {width: 18px; height: 18px; border-radius: 3px; object-fit: contain;}
/*VENTANA MODAL ITEMS DESTAILS*/
	/* Estilos básicos del botón */
    button {background-color: var(--cat-link-nav-hover-color); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px;}
	button:hover {background-color: var(--cat-link-nav-hover-color); }
	/* Botón de cierre */
    .close {color: #aaa;position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer;}
    .close:hover {color: #000;}
	.capa_imagen_modal{width: 100%; height: auto; }
		.capa_imagen_modal img{width: 100%; height: auto; margin: 0 0 15px 0;}
		.nav_img_modal_layer{width: 100%; height: 20px; font-weight: bold; margin: 0 0 15px 0;}
			.nav_boton_anterior{width: 33%; text-align: left; float: left;}
			.nav_numero_img{width: 33%; text-align: center; float: left;}
			.nav_boton_siguiente{width: 33%; text-align: right; float: right;}
			#boton_add_item_to_menu{text-align: center}

        #miModalOverlay {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999999;}
        .miModalPanel {max-width: 550px; width: 90%;}
        .miModalCard {background: #fff; border-radius: 8px; padding: 2rem 1.5rem; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto;}
        .miModalClose {cursor: pointer; position: absolute; top: 10px; right: 15px; font-size: 24px; line-height: 1;}
        .capa_imagen_modal img {max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 0 auto 1rem auto;}
		#modalItemDescription{margin-top: 1rem;}
		#eye_icon{width: 45px; height: 35px}
		#icon_eye_crea{width: 32px; height: 32px; fill: var(--cat-primary-color)!important}
		.btn-link:hover {color: var(--cat-primary-color)!important;}
		.btn-link {color: var(--cat-primary-color)!important;}
			.btn_ver_detalle_menu_crea{width:100%; height: 32px;}
		.alergen-icon-line {display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;}
        .alergen-icon-line img {height: 24px; width: 24px; object-fit: contain;}