@charset "utf-8";
/* CSS Document */


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
}

/* INI: MODIFICAR EN MAIN.CSS ------------------*/

body.load {
  overflow:hidden;
}
.header-int{
  border-bottom: 2px solid #fff;  
}

body.fanatico.home .header-int, body.art.home .header-int{
  background-color: none;
  background-image: none;
  border-bottom: none;
}
body.fanatico .header-int.header-fixed, body.fanatico.producto .header-int {
  border-bottom: 2px solid #fff;  
  background: #fc55a7;

  background: -moz-linear-gradient(left, #fc55a7 0%, #fc55a7 1%, #fa53a5 1%, #fa53a5 41%, #fa53a1 41%, #fa53a1 42%, #fc55a3 42%, #fc55a3 46%, #fc56a0 46%, #fc56a0 48%, #ff569b 49%, #ff569b 51%, #ff5697 51%, #ff5996 56%, #ff5a92 56%, #ff5a92 59%, #ff5a8e 59%, #ff5c87 66%, #ff5c84 68%, #ff5d7f 68%, #ff5d7f 70%, #ff5e7b 70%, #ff5e7b 73%, #fe6077 73%, #fe6077 75%, #fe6174 75%, #fe6174 77%, #fe6270 77%, #fe6466 87%, #fe6560 87%, #fe6560 90%, #ff6762 90%, #ff6762 91%, #ff675f 91%, #fe655d 91%, #ff675f 93%, #ff685b 93%, #ff6958 100%);
  background: -webkit-linear-gradient(left, #fc55a7 0%, #fc55a7 1%, #fa53a5 1%, #fa53a5 41%, #fa53a1 41%, #fa53a1 42%, #fc55a3 42%, #fc55a3 46%, #fc56a0 46%, #fc56a0 48%, #ff569b 49%, #ff569b 51%, #ff5697 51%, #ff5996 56%, #ff5a92 56%, #f1f0f1 59%, #ff5a8e 59%, #ff5c87 66%, #ff5c84 68%, #ff5d7f 68%, #ff5d7f 70%, #ff5e7b 70%, #ff5e7b 73%, #fe6077 73%, #fe6077 75%, #fe6174 75%, #fe6174 77%, #fe6270 77%, #fe6466 87%, #fe6560 87%, #fe6560 90%, #ff6762 90%, #ff6762 91%, #ff675f 91%, #fe655d 91%, #ff675f 93%, #ff685b 93%, #ff6958 100%);
  background: linear-gradient(to right, #fc55a7 0%, #fc55a7 1%, #fa53a5 1%, #fa53a5 41%, #fa53a1 41%, #fa53a1 42%, #fc55a3 42%, #fc55a3 46%, #fc56a0 46%, #fc56a0 48%, #ff569b 49%, #ff569b 51%, #ff5697 51%, #ff5996 56%, #ff5a92 56%, #ff5a92 59%, #ff5a8e 59%, #ff5c87 66%, #ff5c84 68%, #ff5d7f 68%, #ff5d7f 70%, #ff5e7b 70%, #ff5e7b 73%, #fe6077 73%, #fe6077 75%, #fe6174 75%, #fe6174 77%, #fe6270 77%, #fe6466 87%, #fe6560 87%, #fe6560 90%, #ff6762 90%, #ff6762 91%, #ff675f 91%, #fe655d 91%, #ff675f 93%, #ff685b 93%, #ff6958 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc55a7', endColorstr='#ff6958', GradientType=1);
}

body.art .header-int.header-fixed, body.art.producto .header-int, .header-int {
  border-bottom: 2px solid #fff; 
	
background: rgb(64,78,93);
background: -moz-linear-gradient(90deg, rgba(64,78,93,1) 0%, rgba(112,134,147,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(64,78,93,1) 0%, rgba(112,134,147,1) 100%);
background: linear-gradient(90deg, rgba(64,78,93,1) 0%, rgba(112,134,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#404e5d",endColorstr="#708693",GradientType=1);
}


body.cuadritos .header-int.header-fixed, body.cuadritos.producto .header-int {
  background: #bba9c3;
	/*#b988bc;*/
}
body.cuadro .header-int.header-fixed, body.cuadro.producto .header-int {	
	background: #87abb7;
}

/* END: MODIFICAR EN MAIN.CSS -------------------*/



/* INI MODIFICACION MENU PARA SINGLE SITE -------------------*/

/* 

.mainMenu .c-menu .options {
    display: none;
}
.mainMenu .tabs-stage {
    width: 100%;
}
.mainMenu .categories {
    width: 100%;
    padding-bottom: 0px;
}
.mainMenu .big-menu {
    padding: 10px 0 0px 0;
}
.mainMenu .content-tab .categories h4 {
  display: none;
}
.tabs-stage {
    border-left:none;
}
@media (max-width: 990px) {
	.big-submenu li a{
		background-color: inherit;
		border-bottom: #eaeaea solid 1px;
		font-size: 16px;
		padding: 12px 30px;
	}
}
*/

/* INI SLIDER CSS HOME -------------------*/

.home section h3 {
	text-align:left;
	font-size: 40px;
}
section.main-content {
    padding: 20px 1.5%;
}
.wp-home-sliders {
    padding: 0;
    overflow-x: scroll;
    max-width: 1440px;
    transform: translateZ(0);
    margin: 1% 0 2% 0;
}
.home-category-slider {
    width: 100%;
    white-space: nowrap;
}
.image-flikity-item {
    display: inline-block;
    position: relative;
    margin: 5px 15px 10px 0px;
}
.image-flikity-item img {
	height:400px
}
.wp-home-sliders .poster-swipper-title {
    white-space: break-spaces;
}

@media screen and (max-width: 900px) {
	.image-flikity-item img {
		height:350px
	}
	#homeSiteSections section h3 {
		font-size: 30px;
	}
}

@media screen and (max-width: 640px) {
	.image-flikity-item img {
		height: 300px;
	} 
}

@media screen and (max-width: 300px) {
	.image-flikity-item img {
		height: 300px;
	} 
}

/* INI SLIDER CSS HOME  PARA CATEGORIAS */
  
.catalog .posterItemInfo {
    background-color: rgb(0,0,0,0.6);
    border-radius: 5px;
    width: calc(100% - 20px);
    padding: 5px 0px;
    display: table;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
}
.catalog .image-flikity-item img {
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;

}
.catalog .poster-swipper-year {
    display:none;
}
.catalog.wp-home-sliders .poster-swipper-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.poster-swipper-content {
  text-align: left;
  padding: 1px 15px;
  opacity: 0.8;
  color: #fff;
}





/* -----------  FAVORITOS ! -------------------------------  */
/**/
.c-fav,.container_menu .c-fav.cont-mobile, #btn-add-favs, .poster-grid .icon, 
.home-category-slider .icon, .movie-poster-grid .icon {
	display:none;
}


/* OCULTO FAVORITOS DEL EDITOR 
#btn-add-favs {
	display:none;
}

.image-flikity-item .icon {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
.icon .selected {
    color: red;
}
.fotocApp .canvas-holder #btn-share {
    position: absolute;
    right: 10px;
    top: 9px;
}
*/

/* -----------  CODIGOS DESCUENTO! -------------------------------  */


.asignar-cupon .boton_principal, .asignar-cupon .boton_principal.small {
    background-color: #000000;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    opacity: 1;
    border: none;
    border-bottom: none;
    padding: 0px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 160px;
    min-width: 10px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none;
    text-decoration: none;
    margin: 10px 5px;
}

.asignar-cupon .boton_principal [attribute~="Cancelar"] {
    background-color: #000;
}
a#btnShowInputPromoCode, a.btnRemovePromoCode {
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding: 5px 0px 15px 0px;
    text-align: left;
    clear: both;
    padding-left: 20%;
    color: #272727;
}

a#btnShowInputPromoCode i, a.btnRemovePromoCode i {
    padding-right: 10px;
    color: #0483f5;
}
a#btnShowInputPromoCode:hover, a.btnRemovePromoCode:hover {
    color: #0483f5;
}
.asignar-cupon label {
    padding: 5px;
    margin-left: 0px;
    text-align: left;
    width: 100%;
}
.asignar-cupon, .titleDesc.success {
    text-align:left;
    background-color: #fff3c7;
    border: 1px solid #ffdc5b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 5px;
    display: block;
}
.titleDesc.success {
    color:black;
    font-size:16px;
    margin: 15px 0px;
    padding: 20px;
}
#promoCodeFormContainer input[type=text], #promoCodeFormContainer input[type=number] {
	width:90%;
	float: left;
}



/* -----------  OCULTO PARA POSTERS CORREGIR LUEGO ! -------------------------------  */

/*--- OCUTLO PARA POSTERS ----*/
.cuadro-tipo,.view-more-info, .cuadro-tipo/*,.tabs-nav */{
	display: none;
}
.product-options .tabs-stage #tab-1 {
	display:block !important;
}
/* Escondo el Switch de typo */
switch {
	display: none !important;
}




/* ------------------------------- PARCHE ! COMO FUNCIONA -------------------------------  */


#homeSiteSections section.como-funciona h3 {
	 overflow: visible;
	 display: block;
}

@media screen and (max-width: 850px) {
	#homeSiteSections section.como-funciona h3 {
		font-size: 22px;
	}
	section.como-funciona .card .card-body {
		padding: 0px 0px 0 14px;
	}
	.card {
		background-color: #fff;
		text-align: left;
		padding: 12px 0px 5px 0px;
		height: 100%;
		border-radius: 5px;
	}
	section.como-funciona .card-header .step {
		width: 30px;
		height: 30px;
		top: 6px;
		font-size: 16px;
		font-weight: bold;
	}
	.como-funciona .col-xs-12 {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		max-width: 100%;
	}
}




/* ------------------------------- PARCHE !MENU NAVEGACION! -------------------------------  */

.container-menu.container {
    margin: auto;
    position: relative;
    font-size: 18px;
    padding: 8px 0;
    overflow: auto;
}
.header-splash .nav-toggle {
    right: 10px;
}

/* ------------------------------- PARCHE! EDITOR COSTADO -------------------------------  */

.body-options {
    padding: 5px 15px 0px 0px;
}
.view-more-info {
    position:relative;
}
.view-more-info a {
	color:#0483f5;
	font-size:14px;
	padding-top: 3px;
	position: absolute;
}
.view-more-info a:hover {
	color:#fa53a5;
}

@media screen and (max-width: 640px) {
	/*
    .title, .product-options .tabs-stage,.year {
        display: none;
    }
	*/
	.view-more-info {
		display: block;
		border-top: 1px solid #ebebeb;
		padding-left: 15px;
	}

}

/* ------------------------------- PARCHE ! AUTOR -------------------------------  */
div.author {
    margin: 15px 0px 0px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}
div.author span, div.author span a {
	font-size: 14px;
}

/* ------------------------------- PARCHE ! MODAL Image info -------------------------------  */


.main-im-modal img {
	max-width:640px;
    width:100%;
}
.fotoc-modal .item-info .step {
    position: relative;
    background-color: #fff;
    width: 45px;
    height: 45px;
    border: #ffffff solid 2px;
    font-size: 24px;
    color: #ffffff;
    margin: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background-color: #f36e20;
    display: flex;
    font-weight: 600;
  }
.fotoc-modal .item-info .card-header {
  display: flex;
  align-items: center;
  position: relative;
}

/* PREGUNTAS FRECUENTES */ 

.questions-list li .storeAnswer a {
  color: #0483f5;
  font-size: inherit;
  text-decoration: underline;
  font-weight:bold;
}

.fotoc-modal .left-side {
    display:none;
}
.fotoc-modal .container-sideByside .left-side {
    display:block;
    width:100%;
    max-width: 100%;
    flex-basis: 100%;
    padding-bottom:30px;
}
.fotoc-modal .right-side  {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}
.fotoc-modal section {
    padding: 10px 0 10px 0 !important;
}
.fotoc-modal .content-title {
    padding: 0px 0px 20px 0px;
}



.help-products .container-sideByside .questions-list {
    margin-top: 0px;
}
.video-container {
    background-image: none;
}
.video-container-mobile {
	display: none;
}
@media screen and (max-width: 560px) {
	.help-products .container-sideByside .questions-list {
		margin-top: 30px;
	}
	.video-container-mobile {
		display: block;
	}
	.video-container-desktop {
		display: none;
	}
}



/* ------------------------------- PARCHE ! ESTILOS TITULOS -------------------------------  */

.title h2.ng-binding {
    margin-bottom: 0px;
    text-align:left;
}
section h3 {
	color: #66acbd;
}
.title {
    padding-bottom: 0px;
}

.title .ng-binding, section h3, section.como-funciona h2, .content-title h2 {
    font-size: 50px;
    margin: 0;
    margin: 10px 25px 0px 0px;    
    font-weight: 300;
    padding: 0;
    text-align: center;
}
#homeSiteSections section h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}


@media screen and (max-width: 900px) {
    .title .ng-binding, section h3, section.como-funciona h2, .content-title h2 {
         font-size: 40px;
    }
}

@media screen and (max-width: 640px) {
    .title .ng-binding, section h3, section.como-funciona h2, .content-title h2 {
        font-size: 35px;
    }
}

@media screen and (max-width: 300px) {
    .title .ng-binding, section h3, section.como-funciona h2, .content-title h2 {
        font-size: 20px;
    }
}



/* ------------------------------- PARCHE ! EDITOR -------------------------------  */
/* INI: EDITOR */


.fotocApp {
    margin-top: 0px;
}

/* NOTA: .homeBlockStatic, .homeBlockSteps estilos legacy */



.homeBlockStatic h3, .homeBlockSteps h3, .homeBlockStatic .top-content h3 { 
    padding-top: 50px
}

.brand img {
	width: auto;
	height: 35px;
}
.promoAlert .brand img {
	height: 30px;
	padding-top:5px;
}
.promoAlert .container_menu {
	height: 45px;
}
.container_menu {
	height:55px;
}
.promoAlert .template_align_right {
	margin-top: 20px !important;
}
#step_builder, #cartSection, .internalPage, 
.homeBlockStatic, .homeBlockSteps,
.not-found {
 padding-top: 50px;
}
.promoAlert .mainMenu {
   top: 45px;
   /* border-top:1px solid green; */
}
/*body {background-color:yellow;}*/


@media screen and (min-width: 960px) {
	.brand img {
		height:55px
	}
	.promoAlert .brand img {
		height:45px
	}
	.promoAlert .container_menu {
		height:75px;
	}
	.promoAlert .promo-multiple-lines .container_menu {
		height:55px;
	}
	.container_menu {
		height:90px;
	}
	#step_builder, #cartSection, .internalPage, 
	.homeBlockStatic, .homeBlockSteps {
         padding-top: 95px;
    }
	.mainMenu {
    	top: 90px !important;
    }
    .mobileSearch {
    	display:none !important;
     }
	.promoAlert .mainMenu {
		top: 77px !important;
	}
	/*body {background-color:orange;}*/
}




#canvas-editor{
    box-shadow: none !important;
    border: 1px solid #e9e9e9;
}
.canvas-holder .btn {
    background-color: #6a70807a !important;
}
silde-views .slider > div {
    border: solid 1px #ccc !important;
}
@media screen and (min-width: 640px) {
    .fotocApp, .template_align_right {
       max-width: 1200px !important;
    }
    editor > div{
       /*background-color:red;*/
    }
    #editor-col-0 {
        width: 60% !important;
        /*background-color:#ff569b;*/
    }
    #editor-col-1 {
       width: 40% !important;
       /*background-color:#66acbd; */
    }
    .formRight {
       float:right;
       width: 40%;
    }
}
.form-control label {
    color: #2d3035;
}

/* ------------------------------- PARCHE !HEADER   -------------------------------  */

.container_menu .cont-mobile {
	display:none;
}
.container-menu-inner .container_menu_left {
    /* width: 10%; */
    /* margin: 0 auto; */
    height: auto!important;
    float: none;
}

@media screen and (max-width: 960px) {
    .container_menu .cont-mobile {
		display:block;
	}
	.container_menu .cont-desktop {
		display:none;
	}
	.container_menu {
		padding: 5px 0;
		display: flex;
	}
	.container-menu-inner .container_cart {
		margin-top: 14px;
		position: relative;
		/* right: auto; */
		top: auto;
		/* margin-right: 0px; */
		/* margin-left: auto; */
	}
	.container-menu-inner .container_menu_left {
		/* margin-left: auto; */
		/* margin-right: initial; */
	}
	/*
	.header-int {
	    display: flex;
    }*/
}


/* INI: SEARCH */

.withoutPosters {
    background-color: #efefef;
}

@media screen and (max-width: 960px) {
	.c-search-mobile .icon{
		position: absolute;
		padding: 0px 0px;
		top: 6px;
		left: 9px;
		color: #3e3e3e;
		font-size: 18px;
	}
	.c-search-mobile .close.icon{
		top: 7px;
		left: 8px;
		color: #7d0d1f;
		font-size: 31px;
	}
	.c-search-mobile {
		width: 35px;
		height: 35px;
		position: relative;
		color: #ff6858;
		cursor: pointer;
		cursor: hand;
		transition: 0.2s;
		margin: 0 10px 0 15px;
		/* padding: 0 20px 0 20px; */
	}
}

.btn-add-to-cart {
    width: 100%;

}

.btn-submit, .btn-add-to-cart  {
	
	cursor: pointer;
    cursor: hand;
    border: none;
	
	/*text-transform: uppercase;
    font-size: 22px;
    padding: 15px 0px;*/
    border: none;
    line-height: 1;
    flex-grow: 1;
    opacity: 1;
    border: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
    -webkit-appearance: none;
    text-decoration: none;
}


/* -- MENU --*/

.close, .search-open .search, .menu-open .icon.menu {
	display:none;
}
.search-open .close, .menu-open .icon.close {
	display:block;
}


.c-search-mobile.search-open {
    border-radius: 0%;
    height: 55px;
}

.x-menu {
	margin: 0px 10px;
	width: 42px;
	cursor: pointer;
	cursor: hand;
	transition: 0.2s;
}
.x-menu.menu-open {
   background-color: white;
   color: #ff6858;
   height: 53px;
}
.x-menu.menu-open .icon {
	padding-top: 6px;
	font-size: 31px;
	color: #7d0d1f;
	padding-bottom: 26px;
	background: white;
}


.mobileSearch, .mainMenu {
    float: left;
    position: absolute;
    z-index: 5200;
    width: 100%;
    background-color: white;
    top: 55px;
    height: 100%;
    padding: 15px 10px 0px 10px;
    display: none;
    position: fixed;
}

.big-menu {
    padding: 10px 0 27px 0;
}
.container_menu {
    overflow: visible !important;
}
/* Revisar si .search-header-container  no complica en otras paginas del sitio*/ 
.css-2b097c-container, div.search-header-container {
    width: 100% !important;
}
div.c-search {
    background-color: transparent;
}
.search-header__menu img {
    width:40px;
    height:60px;
}
.search-header__menu label, .search-header__single-value label {
    color: #2b2b2b;
    font-weight: bold;
    width: 100%;
    padding-left:20px;
    white-space: nowrap;
    text-overflow: ellipsis;   
	cursor: pointer;
    cursor: hand;
}
.search-header__menu p {
    color: #2b2b2b;
    font-weight: bold;
    clear:both;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
    font-size:12px;
    padding-left:10px
}
.search-header__option a, .search-header__single-value a {
    display: flex;
    text-decoration: none;
}
.search-header__single-value p{
    display: none;
}
.search-header__option a div, .search-header__single-value a div{
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;*/
	display: block;	
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1px;
    /*background-color: red;*/
}

input[type=text].search-header-container , input[type=number].search-header-container {
    height: 28px;
    font-family: 'Open Sans', sans-serif !important;
	font-size: 18px;
	font-weight:400;
	color: #37302a;
	padding: 6px 10px;
	width:490px
}
.c-search button {
	display:none;
}

ul.tabs-nav {
    overflow: auto;
    display: flex;
}
.section {
    min-height: 350px;
}
ul.tabs-nav {
    overflow: inherit;
    display: block;
}
@media (max-width: 990px) {
	.section {
		min-height: auto;
	}
	.big-submenu {
		margin-top: 0px;
		border-top: none;
	}
	ul.tabs-nav {
		overflow: auto;
		display: flex;
	}
	.tabs-nav {
		padding-left: 0px;
	}
}

.categories-bk-image {
	width: 100%;
    /*background-image: url(/im/fotoc/main/menu_category_crea.jpg);*/
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 0px;
}


/* ----------------------------- BUILDER ---------------------------------*/




#cartSection label {
    font-size: 14px;
    color: #272727;
}
#cartSection .note {
    color: #272727;
}
#cartSection  h2 {
    font-weight: 600;
    color: #40474d;
    font-size: 2em;
    padding: 10px 0px;
}
@media screen and (max-width: 760px) {
	#cartSection select {
		width:95%;
		float: none;
	}
}

#cartSection #backCreator,#cartSection #txGoBackCart, #cartSection a.back {
    padding:20px 0px 35px 0px;
    color: #5d5d5d;
}
#cartSection .option {
    background-color: #f6f7fa;
    border: 1px solid #e9e9e9;
    margin-bottom: 10px;
}
#cartSection .acciones a {
    color:#272727;
}
#cartSection .shippingMethods .shippingTitle {
 color: #272727;
}
#cartSection .shippingSelected {
	background-color: #bcdbe5;
    border: 1px solid #e9e9e9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-bottom: 10px;
}
#cartSection .shippingSelected .shippingTitle {
    background-color: #bcdbe5;
}
#cartSection .shippingMethods li.shippingSelected,
#cartSection .shippingMethods li.shippingSelected + li,
#cartSection .shippingMethods li:first-child {
    border-top: none;
}
#cartSection .shippingMethods li {
    border-top: 2px solid #dedede;
}
#cartSection .shippingMethods .shippingDescription {
    padding: 0px 0px 5px 30px;
    font-weight: normal;
}
#cartSection .error {
	text-align:left;
}

.formCont {
    clear: both;
    text-align: left;
    text-transform: none;
    padding: 4px 0px;
    display: flow-root;
}
.consent-gift hr {
    margin: 10px 0;
    clear: both;
    height: 1px;
    border: 0;
    background-color: #dedede;
}
input#opAllowImageUse, input#opIsAGift {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    /* padding: 10px; */
    float: left;
}
div#txUserAllowImagesUseNote, div#txIsAGiftNote {
    /* float: left; */
    display: table-cell;
    padding-left: 15px;
    float: none;
    padding-top: 0px;
    line-height: 1.6;
	width: 100%;
}
@media screen and (max-width: 760px) {
	.consent-gift {
	    display: block;
	}
	input#opAllowImageUse, input#opIsAGift  {
        clear: both;
	 }
	.consent-gift label {
		padding-bottom: 10px;
	}
}
.note label {
    float: none;
    width: 100%;
    /* background-color: red; */
    font-weight: normal;
    cursor: pointer;
    cursor: hand;
    line-height: 20px;
}
.SelectPaymentMethod li.SelectPaymentContent { 
    background-color: #bcdbe5;
    padding:10px 10px
}
.SelectPaymentMethod li.select {
    background-color: #6795a3;
    color: #fdffe1;
    padding:15px 10px;
    border: 1px solid #bcdbe5;
}

.SelectPaymentMethod li {
	background-color: #040404;
	/*border: 1px solid #e9e9e9;*/
	color: #fff;
	font-weight: bold;
	transition: background-color 0.2s
}
.formCont#paymentDescrip {
    color: #401313;
}

.SelectPaymentContent .SelectPaymentMethod .sameAligment {
    padding: 15px 0px 5px 0px;
}

.checkout .description {
    color: #000;
}
.checkout {
    padding-bottom: 50px;
}


/* ------------------  GRID STYLE ---------------------- */


.poster-grid, .movie-poster-grid {
    list-style: none;
    margin: 30px auto;
    padding: 0;
}
.poster-grid-item, .movie-poster-grid-item {
	cursor: pointer;
    cursor: hand;
}
.poster-grid img, .movie-poster-grid img {
    display: block;
    float: left;
    padding: 4px;
    width: 100%;
    height: auto;
    opacity: 1;
}
.poster-grid div a, .poster-grid div img
.movie-poster-grid div a,.movie-poster-grid div img {
    outline: none;
    border: none;
    display: block;
    max-width: 100%;
}
.poster-grid .poster-grid-item, .movie-poster-grid .movie-poster-grid-item {
    width:25%;
    height: auto;
	overflow:hidden;
	display: inline-block;
	position: relative;
}
@media screen and (max-width: 900px) {
    .poster-grid .poster-grid-item,.movie-poster-grid .movie-poster-grid-item {
        width: 33.3%;
        height: auto;
    }
    .poster-grid .poster-grid-item .poster-swipper-title, .movie-poster-grid .movie-poster-grid-item .poster-swipper-title {
    	font-size: 14px;
    }
    .poster-grid .poster-grid-item .poster-swipper-year, .movie-poster-grid .movie-poster-grid-item .poster-swipper-year {
        font-size:12px;
    }
}

@media screen and (max-width: 640px) {
    .poster-grid .poster-grid-item,.movie-poster-grid .movie-poster-grid-item {
        width: 50%;
        height: auto;
    }
    .poster-grid .poster-grid-item .poster-swipper-title, .movie-poster-grid .movie-poster-grid-item .poster-swipper-title {
    	font-size:14px;
    }
    .poster-grid .poster-grid-item .poster-swipper-year, .movie-poster-grid .movie-poster-grid-item .poster-swipper-year {
        font-size:10px;
        display:none;
    }
}

@media screen and (max-width: 300px) {
    .poster-grid .poster-grid-item, .movie-poster-grid .movie-poster-grid-item {
        width: 100%;
        height: auto;
    }
    .poster-grid .poster-swipper-title, .movie-poster-grid .movie-poster-grid-item .poster-swipper-title {
    	font-size:12px;
    }
    .poster-grid .poster-swipper-year, .movie-poster-grid .movie-poster-grid-item .poster-swipper-year {
        font-size:12px;
    }    
}


/* ------------------  GRID ICONS ---------------------- */

.poster-grid .icon, .movie-poster-grid .icon {
  position: absolute;
  right: 10px;
  top: 4px;
  font-size: 24px;
  color:white;
}

.poster-grid .posterItemInfo, .movie-poster-grid .posterItemInfo {
    position: absolute;
    z-index: 5000;
    bottom: 16px;
}
.poster-grid .poster-swipper-title, .movie-poster-grid .poster-swipper-title {
    /*display:none;*/
    font-weight: 700;
    color: #fff;
    text-align: left;
    padding: 0 15px;
    font-size: 16px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
.poster-grid .poster-swipper-year, .movie-poster-grid .poster-swipper-year {
    text-align: left;
    padding: 1px 15px;
    opacity: 0.8;
    color: #fff;
}

/* ------------------------------- PARCHE !CORREGIR! -------------------------------  
ej:
/login.php?id=1000522
/checkout.php?id=1000522
*/
/*
.homeBlockStatic {
    padding-top: 90px;
    background-color: #fff;

}
.homeBlockStatic, .homeBlockColor-Green h3, .select_payment{
    color: #272727 !important;
}
.homeBlockColor-Green, .homeBlockColor-Green h3 {
    background-color: inherit;
}
.homeBlockStatic li a {
    color:#23919b;
}
.homeBlockStatic li a:hover {
    color:#ae1e37;
}
.destacado {
    background-color: #23919b;
    color: #fff;
}
.endcheckout h2 {
    font-size:30px;
    background-color: inherit;
    padding:20px 0px;
    border: none;
    color: #086a73;
}
.homeBlockStatic hr.dotted {
    padding-top: 10px;
    clear: both;
    border-bottom: 1px dotted #c5c5c5;
    margin-bottom:20px
}


*/
@media (max-width: 990px){
	.footer-menu .tabs-stage  {
		width: 100%;
	}
	.footer-menu .tabs-stage .section, .footer-menu .categories {
		width: 50%;
	}
	.footer-menu .tabs-stage .section span {
		display: none;
	}
	.footer-menu .tabs-stage .section.help {
		min-width: inherit;
	 }
	.footer-menu .tabs-stage .section.help {
    min-width: 140px !important;
		display: block;
	  }
	.footer-menu .tabs-stage .section.help h4{
		display:block;
	}
	.footer-menu .categories {
	    padding-left: 0px;
	
	}
}
.footer-menu .tabs-stage .section.help {
    /**/ min-width: 235px; 
 }

.footer-menu .tabs-stage .section span {
	font-size: 14px;
	color: #272727;
	text-decoration: none;
	white-space: nowrap;
	padding-left: 10px;
	top: 33px;
	margin-top: 10px;
	position: absolute;
}


/*INSTAGRAM SLIDER*/

section.instagramSlider {
  background: #e9ebf2;
  border-bottom: none;
  padding: 35px 0;
}

section.instagramSlider .instagram-container {
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
}

.instagramSlider .swiper-container {
  padding-bottom: 50px;
  margin-bottom: 30px;
}
.instagramSlider .swiper-slide {
  background-color: #fff;
  padding: 10px 10px 15px 10px;
}
.instagramSlider .swiper-slide img {
    width: 100%;
}
.instagramSlider .swiper-slide p {
  font-size: 14px;
  color: #393939;
  padding: 10px 15px;
}
.instagramSlider .swiper-pagination-bullet {
  background: #fff;
}
.instagramSlider .swiper-pagination-bullet-active {
  background: #66acbd;
}
.btn-instagram {
  font-size: 21px;
  color: #2d3035;
  padding: 10px 10px;
  max-width: 330px;
  margin: 0 auto;
  justify-content: center;
}

.btn-instagram img {
  margin-right: 20px;
}




/* -------------- INI: BANNER IMAGE AND TEXT ---------- */

.homeBlockStepsB {
    padding: 0px 0px 0px;
    overflow: hidden;
    height: 400px;
}
.banner_image {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 100%;
}
.inner_image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
}
.card-body .promo, .destacado-alert  {
	font-weight: bold;
}
.banner_image .destacado, .como-funciona .destacado, .banner-text .promo {
    font-weight: 700!important;
    background-color: #ffec8f;
    padding: 1px 9px;
    color: #52575d;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -khtml-border-radius: 10px;
}
.banner-text.text-left, .banner-text.text-left h2 {
    text-align:left;
}
.banner-text.text-right, .banner-text.text-right h2 {
    text-align:right;
}
.banner-text h2, .banner-text{
	color: #52575d;
}
.banner-text p, .banner-text h2{
    padding-left:20px;
    width: 100%;
    margin: 0px;
}
.banner-text{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 30%;
    margin: auto 0;
}
.banner-text.text-top {
	padding-top: 25px;
	top: 0;
	bottom: auto;
}
.cont-right {
	right: 0;    
}
.cont-left {
	left: 0;
}
.inner_text {
    width: 100%;
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
	z-index: 1;
}
small {
    padding-top: 10px;
    display: block;
}
/* BANNER: TEXT ALIGN LEFT */ 

.banner-text.text-left p, .banner-text.text-left h2 {
	text-align: left;
}
.banner-text h2 {
	font-size:32px;
	font-weight: 600;
}
.banner-text p {
	font-size:20px;
}
.banner_image .text-left .banner_boton {
	margin:0;
}

/* BANNER: TEXT ALIGN CENTER */ 

.banner-text.text-center {
    margin: auto;
}
.banner-text.text-center p, .banner-text.text-center h2 {
    padding-left:0px;
    text-align:center;
}
.banner_image .banner_boton {
    text-align:center;
    margin: 0 auto;
    padding-top: 15px;
}

/* END: BANNER IMAGE AND TEXT */

.inner_image_responsive {
	display:none;
}
@media (min-width: 760px) {
    .col-custom {
    	background-color:inherit !important;
    }
}
@media (max-width: 760px) {
    .col-gris {
    	background-color:#eaeaf2;
    }
	
	.inner_image_responsive {
		display:block;
	}
	.inner_image_responsive img {
		width:100%;
		float:right;
	}
	.homeBlockStepsB {
		height: fit-content;
	}
	.inner_image {
		display:none;
	}
	.inner_text {
    	width: 100%;
    	height: auto;
    	/* background-color: red; */
 	}
	.banner-text {
		position:relative;
		width: 100%;
		padding: 10px 20px;
		margin-top: 4px;
	}
	.banner-text.text-center {
    	margin: auto;
	}
	.banner-text.text-left p, .banner-text.text-left h2 {
		padding-left:0px;
	}
	.banner-text.text-left p {
		font-size:18px;
	}
	.banner-text.text-right, .banner-text.text-right h2 {
		text-align:left;
	}
	.banner_image .text-left .banner_boton {
		width:100% !important;
		/* background-color: #7462de; */
		max-width: -webkit-fill-available;
		padding-left: 0px;
	}
	.banner_image .banner_boton {
		text-align:center;
		margin: 0 auto;
		padding-top: 15px;
	}

}

/* -------------- END: BANNER IMAGE AND TEXT ---------- */

/* ----------------------------------------------------------------  CUADRITOS ESTILOS  -------------------------------------------------------------------*/

/* INI: Editor*/
.cuadritos .c-search-mobile,
.cuadritos .c-search, 
.cuadritos .c-fav {
	display:none;
}
.cuadritos .layouts.btn-tool,
.cuadritos .favs.btn-tool  {
	display:none;
}
.cuadritos .form-control label {
	font-size: 18px;
	margin-right: 25px;
	min-width: 100px;
}
.cuadritos .form-control {
    width: 100%;
    padding: 8px 15px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.images .btn-search.upload {
	background: #faaf3b;
	width: 65px;
	height: 65px;
	border-radius: 100px;
	font-size: 30px;
}
@media screen and (max-width: 750px) {
	.images .btn-search.upload {
		width: 65px;
		height: 65px;
		border-radius: 100px;
		font-size: 30px;
		top: 160px;
		border: 1px solid white;
	}
}
/* END: Editor*/ 


.cuadritos .contacto, .bk_lightblue .contacto {
    background: #bfdae2;
}


.cuadritos section.como-funciona {
	background-color: #eaeaf2;	
	margin-bottom: 4px;
}
.card .card-header::after {
    border-color: transparent transparent transparent #eaeaf2;
}

@media screen and (max-width: 850px) {
	.cuadritos section.como-funciona .last-item {
		border-bottom: none;
	}
	.cuadritos section.como-funciona {
		margin-bottom: 0px;
	}

}

.cuadritos .contacto {
    background: #bfdae2;
}
.cuadritos section.como-funciona {
	background-color: #eaeaf2;	
	margin-bottom: 4px;
}

@media screen and (max-width: 850px) {
	.cuadritos section.como-funciona .last-item {
		border-bottom: none;
	}
	.cuadritos section.como-funciona {
		margin-bottom: 0px;
	}

}


/* ----------------------------------------------------------------  CUADRITOS ESTILOS: BOTON EDITOR  -------------------------------------------------------------------*/

@media screen and (min-width: 641px) {
	.upload-text {
		display: none;
	}
}
@media screen and (max-width: 640px) {
    #editor-col-1{
        z-index: auto;
    }
	tools {
		z-index: 790;
	}
	.upload-float {
		width: 65px;
		height: 65px;
		border-radius: 100px;
		font-size: 30px;
		background: #faaf3b;
		display: flex;
		cursor: pointer;
		position: fixed;
		right: 10px;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 0px 8px 0px;
		z-index: 780;
		bottom: 75px;
	}
	.upload-text {
		/*width: 160px;*/
		height: 54px;
		border-radius: 100px;
		font-size: 20px;
		background: #faaf3b;
		display: flex;
		cursor: pointer;
		position: fixed;
		right: 20px;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 0px 8px 0px;
		z-index: 780;
		bottom: 75px;
	}
	.upload-text i {
		background-color:white;
		border-radius: 100px;
		height: 30px;
		width: 30px;
		line-height: 30px;
		margin-left: 7px;
	}
}



/*
.btn-search.upload {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    top: 110px;
    font-size: 40px;
    background-color: #f9ba03;
}
*/

/* ----------------------------------------------------------------  CUADRITOS ESTILOS: EDITOR  -------------------------------------------------------------------

@media screen and (max-width: 640px) {
	.cuadritos tools .header {
		box-shadow: 0px 0px 0px 0px;
	}
	.cuadritos tools {
		position: initial;
	}
	.cuadritos #editor-col-1 {
		z-index: 777;
		width: 100%;
		padding-left: 0;
		padding: 10px 0px
	}
	.cuadritos tools .header .btn-tool.close {
        display:none;
    }
    images > div, .cuadritos tools .content {
		height: 190px;
	}
    .cuadritos tools .content {
		width: 100%;
		background-color: #d0d0d0;
		position: relative;
	}
	.cuadritos .images .btn-search.upload, .upload {
		width: 65px;
		height: 65px;
		border-radius: 100px;
		font-size: 30px;
		top:auto;
		right:20px;
		bottom: 68px;
		position: absolute;
	}
	    .itemGallery {
      height:150px;
      width: 150px;
      margin-right: 10px;
    }
}

.fotocApp .center {
    text-align: left;
    color: #636363;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 90%;
    left: 50%;
}
.item .tabs {
	display:none;
}
.upload-text {
	display:none !important;
}
images .itemGallery-wrapper{

}
.itemGallery-wrapper {
	margin-top: 7px !important;
	height: 210px;

}

*/


/* ----------------------------------------------------------------  FOTOC v3  ------------------------------------------------------------------- */



.inner_thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 15%;
    margin: auto 0;
    right: 0;
    padding-left: 20px;
}

.tb-column {
    float: left;
    padding: 5px 3%;
    vertical-align: top;
    display: inline-block;
    text-align: center;
}
.tb-column.three-columns {
	 width: 33%;
}
.tb-column span {
    display: block;

}
.tb-column img {
    max-width: 100%;
}
@media (max-width: 760px) { 
	.inner_thumb {
	    top: inherit;
	    width: 100%;
	    height: 25%;
	    padding-left: 0px;
	    max-width: inherit;
	}
	.inner_thumb_vertical {
		/* display: none !important; */ /* OCUTLO */
		width: 35%;
		height: 100%;
		padding-left: 5px;
		border: 1px solid green;
		top: inherit;
		bottom: inherit;
		display: inline-table;
	}
	.thumb_right {
		left: inherit;
		right: inherit;
	}
	.tb-column.three-columns {
		width: 33%;
	}
	.tb-column.three-columns {
		/*width: 100%;*/
	}
	.tb-column {
		display: inline-block;
	}
	.tb-column img {
		max-width: 90px;
	}
	.tb-column span {
	    display: block;
	    background-color: white;
	    border-radius: 10px;
	    padding: 5px 0px;
	    margin-top: -8px;
	}
}
@media (max-width: 400px) { 
	.tb-column img {
		max-width: 45px;
	}
}

.show-mobile {
	display:none
}
.pagos {
    padding: 30px 5px 0px 5px;
}
.pagos p {
    font-size: 12px;
    padding-bottom: 10px;
}
@media (max-width: 760px){	
	.pagos p {
		text-align: left;
	}
	.pagos img {
    	padding-top: 5px;
    	width: 95%;
	}
	.pagos img.unaMenos {
    	width: 82%;
 	}
	.show-desktop {
		display:none
	}
	.show-mobile {
		display:block !important;
	}
}

.alerta_roja {
    background-color: #fb0038;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding: 10px;
    color:white;
    text-align: center;
    overflow: hidden;
   	min-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
    /* display: none; */
}
.promo-multiple-lines .alerta_roja {
	height: 60px;
	line-height: 18px;
}
@media (max-width: 960px) {
	.alerta_roja {
	    color:white;
	    text-align: center;
	    overflow: hidden;
	    min-height: 30px;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    font-size: 14px;
	    line-height: 17px;
	    /* display: none; */
	}

}
.alerta_rosa {
    background-color: #fb00a0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px;
    color:white;
}
.align_help {
    margin-left: auto;
}
.posterInfoLoading {
    position: fixed;
}
.productDomain {
	display:none
}
/**/
.site-fotoc .c-search-mobile,
.site-fotoc .c-fav
{display:none}



a.swiper-link {
    font-size: 14px;
    color: #fff;
    padding: 6px 0px 9px;
    background-color: #000000;
    width: 100%;
    display: block;
    border-radius: 5px;
    text-decoration: none;
	margin-top: 5px;
}
a.swiper-link:hover {
	 background-color: #faaf3b;
	color: black;
}

/* --------------------------------------- DevStyle (Parametro DevStyle en URL ) --------------------------------*/


.HidePromoAndPrice .alerta_roja,
.HidePromoAndPrice .form-price{
	display:none;
}

/* -------------------------------------- PAGO BANCARIO ---------------------------------------------------------*/

.SelectPaymentContent .formCont label {
	width: 100%;
}

fieldset .formCont {
    display: flex;
}
fieldset label {

    height:34px;
}
fieldset label:hover {
   cursor: pointer;
}
.SelectPaymentContent input[type="radio"]:checked + label,
.SelectPaymentContent input[type="checkbox"]:checked + label {
    border-bottom: 2px solid #6995a2;
}

/* =============================================================================
   v3 - REDISENO DEL EDITOR (2026-07-13). Cambio estetico, paso 1.
   Mockup: (a) fondo continuo entre el cuadro y la pagina, (b) panel derecho
   flotando al costado, (c) tabs de iconos que despliegan el texto de la
   categoria al activarse.

   SOLO CSS: no toca el bundle Angular del editor => no requiere rebuild.
   Este archivo carga DESPUES de app.fotoc.css, por eso puede pisar sus estilos.
   Vive en styles/fotoc_v3 => solo afecta los sitios v3 (dev); prod usa v2.9.
   ============================================================================= */

:root{
  /* #f6f7fa NO es un color elegido a gusto: es EXACTAMENTE el que CreateJS
     pinta dentro del canvas. Ver la nota de (a) abajo. Si se cambia este valor
     sin cambiar el del editor, reaparece el recuadro alrededor del cuadro. */
  --v3-bg:     #f6f7fa;  /* fondo continuo: pagina + canvas */
  --v3-card:   #ffffff;  /* tarjetas flotantes */
  --v3-strip:  #e7eaef;  /* barra de tabs (gris) */
  --v3-ink:    #1a1d23;  /* tab activo: NEGRO */
  --v3-muted:  #949aa4;  /* tabs inactivos */
  --v3-accent: #5b8def;  /* azul: hover, sliders, nota de imagen */
  --v3-radius: 14px;
  /* Se usa SOLO en las dos tarjetas de la columna derecha (editor y precio). */
  --v3-shadow: 11px 12px 8px -7px rgba(20, 22, 30, .22);
}

/* --- (a) Area continua ------------------------------------------------------
   OJO, esto es al reves de lo que parece: CreateJS PINTA el fondo del canvas con
   #f6f7fa una vez que renderiza la obra, y esos pixeles opacos TAPAN el
   background-color CSS del <canvas>. O sea: el color del canvas NO se controla
   desde aca, lo manda el editor.

   (Medirlo con el editor recien cargado engania: los pixeles dan alpha 0 porque
   todavia no renderizo. Ya renderizado, getImageData da rgba(246,247,250,255).)

   => Para que el cuadro y la pagina sean una sola superficie hay que igualar la
   PAGINA al color que pinta el editor, no al reves. Si algun dia se quiere otro
   color de fondo, hay que cambiarlo en el editor (rebuild) y espejarlo aca. */
body.producto{ background-color: var(--v3-bg); }
editor #canvas-editor{
  background-color: var(--v3-bg) !important;  /* solo se ve antes del render */
  border: 0 !important;                       /* el editor le pone 1px #e9e9e9 */
}
editor .canvas-holder{ background-color: transparent; }

/* --- (b) Panel derecho flotando -------------------------------------------- */
/* !!! NO CAMBIAR EL display DE <tools> !!! ---------------------------------
   El editor le setea a <tools>:
       height: 50px;  margin-top: -120px;  transform: translateX(-235px);
   Los tres quedan INERTES unicamente porque <tools> es display:inline (los
   elementos inline ignoran height, los margenes verticales y transform). Son,
   casi seguro, los estilos del drawer mobile: inertes en desktop a proposito.

   Forzar display:block los ACTIVA a los tres y rompe el desktop:
     - height:50px  -> el panel colapsa y con overflow:hidden recorta los 485px
     - margin-top   -> el panel salta hacia arriba, detras del header del sitio
     - transform    -> el panel se corre 235px a la izquierda, encima del cuadro
   (verificado en Chrome: exactamente eso paso en el primer intento).

   => La tarjeta flotante se pinta en el HIJO, que si es un block normal. */
editor tools{
  background-color: transparent !important;
}
editor tools > div{
  background-color: var(--v3-card) !important;
  /* solo las dos esquinas de ARRIBA: abajo va recto */
  border-radius: var(--v3-radius) var(--v3-radius) 0 0;
  box-shadow: var(--v3-shadow);
  overflow: hidden;                       /* recorta las esquinas al radius */
}

/* --- (c) Barra de tabs: clara, con el activo destacado ---------------------- */
editor tools .header{
  background-color: var(--v3-strip) !important;
  padding: 0;                             /* los tabs van de borde a borde */
  gap: 0;
  align-items: stretch;
}
/* Reparto del ancho (asi lo pide el mockup):
     - inactivos -> flex:1, se reparten el espacio libre en partes iguales
     - activo    -> se ajusta a su contenido (icono + texto)
   Es al reves de lo intuitivo; con el activo creciendo quedaba el activo en
   249px y los inactivos apretados en 48px. */
/* :not(.close) es IMPORTANTE: el editor tiene
       tools .header .btn-tool.close{ display:none }            (desktop)
       @media(max-width:640px){ ...btn-tool.close{ display:block } }  (mobile)
   Un "display:flex !important" generico pisaba ese display:none y activaba el
   boton de cerrar en desktop (quedaba invisible solo porque el overflow:hidden
   de la tarjeta lo recortaba: suerte, no diseno). Se lo deja al editor. */
editor tools .header .btn-tool:not(.close){
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  height: 52px;
  padding: 0 14px !important;
  border-radius: 0;
  border-right: 0 !important;             /* el editor separa los tabs con 1px #d8d8d8 */
  background-color: transparent !important;
  color: var(--v3-muted) !important;
  transition: background-color .15s ease, color .15s ease;
}
/* el editor dibuja bordes #dbdfe9 alrededor de .header y .content: dentro de la
   tarjeta redondeada sobran y se ven como lineas sueltas. */
editor tools .header,
editor tools .content{ border: 0 !important; }
editor tools .header .btn-tool i{ font-size: 19px; line-height: 1; }

/* hover azul */
editor tools .header .btn-tool:hover,
editor tools .header .btn-tool:hover i{ color: var(--v3-accent) !important; }

/* activo: lengueta blanca, icono y texto en NEGRO, al ancho de su contenido.
   Sin border-radius (probado con y sin: queda mejor plano, decision del usuario). */
editor tools .header .btn-tool.active{
  flex: 0 1 auto;
  background-color: var(--v3-card) !important;
  color: var(--v3-ink) !important;
}
editor tools .header .btn-tool.active i{ color: var(--v3-ink) !important; }

/* --- Orden pedido: imagen, cuadros, ajustes, efectos, favorito --------------
   El DOM viene layouts(cuadros) primero; como .header es flex, se reordena por
   CSS con `order` sin tocar el markup del editor. */
editor tools .header .btn-tool.images   { order: 1; }
editor tools .header .btn-tool.layouts  { order: 2; }
editor tools .header .btn-tool.transform{ order: 3; }
editor tools .header .btn-tool.filters  { order: 4; }
editor tools .header .btn-tool.favs     { order: 5; }
editor tools .header .btn-tool.close    { order: 6; }

/* --- Texto de la categoria en el tab activo --------------------------------
   El label NO esta en el markup (cada tab es solo un <i>), pero cada tab tiene
   su propia clase => se inyecta por CSS. Acentos como escape unicode para no
   depender del encoding del archivo. */
editor tools .header .btn-tool.active::after{
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
editor tools .header .btn-tool.layouts.active::after   { content: "cuadros"; }
editor tools .header .btn-tool.images.active::after    { content: "im\00e1genes"; }
editor tools .header .btn-tool.transform.active::after { content: "ajustes"; }
editor tools .header .btn-tool.filters.active::after   { content: "efectos"; }
editor tools .header .btn-tool.favs.active::after      { content: "favorito"; }

/* el boton de cerrar no lleva texto (en mobile el editor lo muestra) */
editor tools .header .btn-tool.close::after{ content: none !important; }

/* --- (d) Segunda tarjeta: tamano + precio + agregar al carrito --------------
   Los form-control ahora viven dentro de UN solo contenedor (.v3-product-card),
   agregado en el template del editor (src/editor/editor.component.html del repo
   claude-fotoc-editor, rama editor-v3, rebuildeado con `gulp templatesCache`).

   Antes eran hermanos sueltos y habia que simular la tarjeta poniendo la sombra
   en cada .form-control: eso generaba sombras INTERIORES entre ellos y un radius
   roto. Con un unico contenedor: una sola sombra, un solo radius. */
#editor-col-1 > .v3-product-card{
  background-color: var(--v3-card) !important;
  /* espeja a la tarjeta de arriba (que redondea solo arriba): esta redondea solo
     abajo, y los bordes que se enfrentan quedan rectos. */
  border-radius: 0 0 var(--v3-radius) var(--v3-radius);
  box-shadow: var(--v3-shadow);
  margin-top: 10px;                       /* separacion entre las dos tarjetas */
  overflow: hidden;
}
/* el editor define .form-control{padding:15px 15px 0} (sin padding abajo): el
   boton quedaba pegado al borde de la tarjeta. */
#editor-col-1 > .v3-product-card > .form-control:last-child{
  padding-bottom: 15px !important;
}

/* el editor pinta .content con #f6f7fa; el mockup lo quiere blanco */
editor tools .content{ background-color: var(--v3-card) !important; }

/* los thumbs de la lengueta "cuadros" traen background #f6f7fa del editor
   (layouts .itemGallery): van sin fondo. */
editor tools layouts .itemGallery{ background-color: transparent !important; }

/* --- (e) Sliders (noUiSlider) simples, estilo mockup ------------------------ */
editor tools .noUi-target{
  height: 8px !important; background: var(--v3-strip) !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
}
editor tools .noUi-connect{ background: var(--v3-accent) !important; }
editor tools .noUi-handle{
  width: 34px !important; height: 22px !important;
  right: -17px !important; top: -7px !important;
  background: var(--v3-accent) !important; border: 0 !important;
  border-radius: 7px !important; cursor: pointer !important;
  box-shadow: 0 2px 6px -1px rgba(20,22,30,.28) !important;
}
/* noUiSlider dibuja unas rayitas de "grip" en el handle: fuera */
editor tools .noUi-handle::before,
editor tools .noUi-handle::after{ display: none !important; }

/* --- (f) Notas del panel ---------------------------------------------------
   OJO con el scope, la clase se reusa para cosas distintas:
     .transform > .m  = la nota gris de ajustes   -> a texto plano
     switch .m        = la PASTILLA VERDE del switch (#449e19). Un "div.m"
                        generico la dejaba transparente y rompia el switch.
     images .center   = la nota naranja de imagenes -> azul
     favs .center     = la nota gris de favoritos (#9398a5) -> NO tocar
                        (un ".center" generico la ponia azul). */
editor tools .transform > div.m{
  background: transparent !important; color: #7b8190 !important; font-weight: 400 !important;
}
editor tools images div.center{
  background-color: var(--v3-accent) !important; color: #fff !important;
}