/*Utilizamos FontAwesome para el boton de cerrar y el boton de check*/
@font-face {
  font-family: 'FontAwesome';
  src: url('utilsfonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('utilsfonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('utilsfonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('utilsfonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('utilsfonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('utilsfonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
/*
.fa-close:before {
  content: "\f00d";
}*/

.fa-check:before {
  content: "\f00c";
}

.fa-arrow-up:before {
  content: "\f062";
}

/*input files docs preview*/
.fa-file-pdf-o:before {
	content: "\f1c1";
}
.fa-file-word-o:before {
	content: "\f1c2";
}

/*disabled / enabled password*/
.fa-eye:before{content:"\f06e";}
.fa-eye-slash:before{content:"\f070";}

/*==========================================================================
  ADD BY MANU ENABLE / DISABLE INPUT PASSOWRD
  https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/
  ==========================================================================*/
.togglePassword-container{
  display: flex !important;
  flex-direction:row;
  align-items: center;/*alineacion vertical*/
}
.togglePassword{
	cursor: pointer;
	margin-left: -1.6rem; /*-25px;*/
	display:inline-flex !important;
}

@media screen and (max-width:500px) {
	.togglePassword-container{
		display: block !important;
		margin:0 !important;
 		padding:0 !important;
  		width:100% !important;
	}
	.togglePassword-container input{
		float:left;
	}
	.togglePassword{
		float:right;
		position:absolute;
		margin-top: 5px;
	}
}

/*==========================================================================
  ADD BY MANU LOADER
  ==========================================================================*/  
#cargador {
	/*display: none;*/
	visibility:hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999;
	background: var(--loading_overlay_background);
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

/*==== loading 1 ====*/
.loader1 {
	width: 100%;
	height: 50%;
	max-width: 140px;
	max-height: 140px;
	margin: -70px 0 0 -70px;
	z-index: 20;
	background-color: var(--loading_background_color);
	border-radius: 100%;
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
	 0% {-webkit-transform: scale(0)}
	 100% {-webkit-transform: scale(1.0);opacity: 0;}
}
@keyframes sk-scaleout {
	 0% {-webkit-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1.0);transform: scale(1.0);opacity: 0;}
}

/*==== loading 2 ====*/
.loader2 {
	width: 100px;
	height: 100px;
	border-top: 3px solid var(--loading_background_color); /*para solo ver  un cachito de la linea*/
	border-radius: 100%; /*lo hacemos redondo ya que width=height*/
	animation: spin 1s linear infinite; /*llamamos a la animacion creada abajo*/
}
@-webkit-keyframes spin{
	0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);transform: rotate(360deg);}
}
@keyframes spin{
	0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);transform: rotate(360deg);}
}

/*==== loading 3 ====*/
.loader3,.loader3::before,.loader3::after{
	width: 10px;
	height: 40px;
	background-color: var(--loading_background_color);
	animation: loading3 1s ease-in-out infinite;
}
.loader3{
	animation-delay:0.16s;
	-webkit-transform:translateY(0);
	transform: translateY(0);
	color:var(--loading_background_color);
}
/*los 2 palitos de antes y despues se colocan encima del palito ppal de ahi el position:absolute; y el top:0 supongo que sera por el content*/
.loader3::before,.loader3::after{
	content: '';
	position:absolute;
	top: 0;
}
/*movemos un palito a la izquierda y otro a la derehca 15px*/
.loader3::before{left: -15px;animation-delay:0.32s;}
.loader3::after{left: 15px;}
/*la animacion jugamos con la sombra*/
@keyframes loading3{
	0%,80%,100%{
		height:40px; /*height inicial de loader*/
		box-shadow: 0 0;
	}
	/*parece que salta*/
	40%{
		height:60px;
		box-shadow: 0 -20px;
	}
}

/*==== loading 4 ====*/
/*COMUN A LOS 3 bolitas*/
.loader4,.loader4::before,.loader4::after{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	animation: loading4 1.5s ease-in-out infinite; 
}
.loader4{
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0);
	color:var(--loading_background_color);
	animation-delay: 0.16s;
}

/*los 2 bolitas de antes y despues se colocan encima de la bolita ppal de ahi el position:absolute; y el top:0 supongo que sera por el content*/
.loader4::before,.loader4::after{
	position:absolute;
	top: 0;	
	content: '';
}
/*movemos un bolita a la izquierda y otro a la derehca 56px*/
.loader4::before{left: -56px;animation-delay: 0.32s;}
.loader4::after{left: 56px;}
@keyframes loading4{
	0%, 80%, 100%{
		box-shadow: 0  40px  0  -20px;/*40px lo que mide el .loader*/
	}
	40%{
		box-shadow: 0  40px  0  0;
	}
}

/*==========================================================================
  ADD BY MANU DIALOG
  ==========================================================================*/
  
.dialog,
.dialog__overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dialog {
	position: fixed;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	pointer-events: none;
	z-index:2147483647;
}

.dialog__overlay {
	position: absolute;
	z-index: 1;
	background: var(--modal_overlay_background);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.dialog--open .dialog__overlay {
	opacity: 1;
	pointer-events: auto;
}

.dialog__content {
	width: 90%;
	max-width: 30rem;
	min-width: 18.125rem;
	background: var(--modal_content_background);
	/*padding: 3rem;*/
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
	/*border: 1px solid var(--modal_content_border);
	border-radius: var(--modal_content_border_radius);*/
	overflow: hidden;
	/*box-sizing: border-box;
	font-weight: 400;
	font-size: 1.375rem ; 
	line-height:1.5rem; */
}


.dialog--open .dialog__content {
	pointer-events: auto;
}

/* Content */
/* Content TITULAR, Content MENSAJE */
/*
.dialog h2,.dialog #titModal,.dialog #msgModal  {
	font-family: var(--modal_content_font_family);
	padding: 0 0 0.7em;
	margin: 0;
	text-align: left;
	color:var(--modal_content_color);
}


.dialog #titModal{
	font-size: 1.875rem;
}

*/

#msgModal  {
	padding-bottom: 40px;
}

.dialog__overlay {
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
	-webkit-animation-name: anim-open;
	animation-name: anim-open;
	-webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
	animation-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.dialog.dialog--close .dialog__content {
	-webkit-animation-name: anim-close;
	animation-name: anim-close;
}

.dialog.dialog--open h2,
.dialog.dialog--open button {
	-webkit-animation: anim-elem 0.4s both;
	animation: anim-elem 0.4s both;
}

.dialog.dialog--open h2 {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

.dialog.dialog--open button {
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

@-webkit-keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); }
}

@keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); }
}

/* Inner elements animations */

@-webkit-keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* DIALOG BUTTONS */
.dialog__content .btn-top-container{
  display:flex;
  justify-content:flex-end;
}

/*
.dialog__content .btn-top-container .btn-close{
  font-size:1.375rem;	
  color: var(--modal_btn_close_color);
  text-decoration:none;
  background-image: none !important;
}

.dialog__content .btn-top-container .btn-close:hover{
  color: var(--modal_btn_close_hover_color);
}*/

.dialog__content .btn-bottom-container{
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  
}

/*
.dialog__content .btn-bottom-container .btn-generico {
	flex-basis:0;
  	flex-grow:1;
	margin: 0 0.25em;
    text-decoration: none;
    padding: .7em 1.7em;
	cursor: pointer;
    font-size: 1.5625rem;
	color: var(--modal_button_color);
	background: var(--modal_button_background_color);
    border-radius: var(--modal_button_border_radius);
	border: 1px solid var(--modal_button_color);
	font-family: var(--modal_button_font_family);
	box-sizing: border-box;
}
.dialog__content .btn-bottom-container .btn-generico:hover {
	color: var(--modal_button_hover_color);
    background: var(--modal_button_hover_background_color);
	border: 1px solid var(--modal_button_color);
}*/



/* DIALOG LINK */
.link-generico {
    font-size: 1.42rem
}

/*DIALOG PARA MOVIL nota trabajo con rem a los font-size para que mantenga el tamaño por si establce un font-size en el body segun el viewport*/
@media screen and (max-width:768px) {
	.dialog__content{
	  box-sizing: border-box;
	  padding:1.5rem;
	  line-height:1rem;
	  font-size:0.875rem;
	}
	.dialog #titModal{
		font-weight: bold !important;
		font-size: 1.2rem !important;
	}
	
	.dialog__content .btn-bottom-container .btn-generico{
		font-size:0.875rem;
	}
}

/*
==========================================================================
==========================================================================
ADD BY MANU VALIDACION FORMULARIOS HTML5
==========================================================================
==========================================================================
*/

/* // [START invalidstyle] */
/*Si lo podemos utilizar si ponemos en los formularios el atributo novalidate*/
/*COMMENT BY MANU DE MOMENTO
.frmUtils input:invalid ,.frmUtils select:invalid ,.frmUtils textarea:invalid {
	border: 1px solid var(--form_invalid_field_border_color) !important;  
    background-color: var(--form_invalid_field_background_color) !important;
}
*/
/*Depende de la clase de formulario .frmUtils para que no afecte por defecto a resto de formularios */
/*Si voy tabulando o pongo el foco y el campo es invalid, me lo marca*/
/*COMMENT BY MANU DE MOMENTO
.frmUtils input:focus:invalid ,.frmUtils select:focus:invalid ,.frmUtils textarea:focus:invalid {
	border: 1px solid var(--form_invalid_field_border_color) !important;  
    background-color: var(--form_invalid_field_background_color) !important;
}
.frmUtils input + label:focus:invalid ,.frmUtils select + label:focus:invalid ,.frmUtils textarea + label:focus:invalid {
	border: 1px solid var(--form_invalid_field_border_color) !important;  
    background-color: var(--form_invalid_field_background_color) !important;
}
.frmUtils input:focus:valid ,.frmUtils select:focus:valid ,.frmUtils textarea:focus:valid {
	border: 1px solid var(--form_valid_field_border_color) !important;  
    background-color: var(--form_valid_field_background_color) !important;
}
*/
/*Cuando hago click en el boton de submit (ya sea enlace,button o input)*/
.frmUtils input.dirty:not([type="submit"]):invalid ,.frmUtils select.dirty:invalid ,.frmUtils textarea.dirty:invalid
{ 
  border: 1px solid var(--form_invalid_field_border_color) !important;
  background-color: var(--form_invalid_field_background_color) !important;
}
.frmUtils input.dirty:not([type="submit"]):invalid + label ,.frmUtils select.dirty:invalid + label ,.frmUtils textarea.dirty:invalid + label
{ 
  color: var(--form_invalid_field_border_color) !important;
  background-color: var(--form_invalid_field_background_color) !important;
}
.frmUtils input.dirty:not([type="submit"]):valid ,.frmUtils select.dirty:valid ,.frmUtils textarea.dirty:valid { 
  border:1px solid var(--form_valid_field_border_color) !important;
  background-color: var(--form_valid_field_background_color) !important;
}
.frmUtils input.dirty:not([type="submit"]):valid + label ,.frmUtils select.dirty:valid + label ,.frmUtils textarea.dirty:valid + label
{ 
  color: var(--form_valid_field_border_color) !important;
  background-color: var(--form_valid_field_background_color) !important;
}
.frmUtils .not-valid{
	color: var(--form_invalid_field_border_color);
}

/*=====================================================================*/
/*CASO CUSTOM: checkboxes / radios necesitamos "tunearlos" para poder validarlos*/
/*=====================================================================*/

/*### COMUN*/
/*label contenedor del checkbox / Radio */
.frmUtils .checkcontainer{
	/*display: block;*/
	position: relative;
	padding-left: 35px;/*para que se ve el texto a la derecha*/
	cursor: pointer;
}

/*##### CHECKBOX */
/*ocultamos el checkbox real*/
.frmUtils .checkcontainer input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/*pintamos el recuadro del checkbox*/
.frmUtils .checkcontainer .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: var(--input_checkbox_background_color);
	border:var(--input_checkbox_border_color);
}

/*pintamos el tick por defecto oculto, pues el checkbox NO ESTA CHEQUEADO. Si checkbox chequeado, se ve.*/
.frmUtils .checkcontainer .checkmark::after{
	content: "";
	position: absolute;
	display:none;
	
	left: 4px;
	/*top: 6px;*/
	width: 7px;
	height: 12px;
	border: 1px solid black;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/*checkbox chequeado. Muestro el tick*/
.frmUtils .checkcontainer input[type="checkbox"]:checked ~ .checkmark::after{
	display:block;
}

/*checkbox NO chequeado que sea required: lo pongo rojo*/
.frmUtils .checkcontainer .checkmark.required.dirty {
	border-color: var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}
/*checkbox chequeado que sea required: lo pongo verde*/
.frmUtils .checkcontainer input:checked ~ .checkmark.required {
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/*##### RADIO */
/*pintamos el circulo del radio*/
.frmUtils .checkcontainer .radiobtn {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
	border:1px solid #000;
}

/*ocultamos el radio real*/
.frmUtils .checkcontainer input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/*pintamos el circulo por defecto oculto, pues el radio NO ESTA CHEQUEADO. Si radio chequeado, se ve.*/
.frmUtils .checkcontainer .radiobtn::after {
    content: "";
    position: absolute;
    display: none;
	
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: black;
	color:#000;
	
}

/*radio chequeado. Muestro el tick*/
.frmUtils .checkcontainer input[type="radio"]:checked ~ .radiobtn::after {
    display: block;
}

/*radio NO chequeado que sea required: lo pongo rojo*/
.frmUtils .checkcontainer .radiobtn.required.dirty {
	border-color: var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}
/*radio chequeado que sea required: lo pongo verde. NOTA IMPORTANTE: aqui uso valid, pq conque este seleccionado uno los demas se deben poner en verde*/
.frmUtils .checkcontainer input[type="radio"]:valid ~ .radiobtn.required {
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/*=====================================================================*/
/*CASO CUSTOM: input files SOLO CON EL BOTON*/
/*=====================================================================*/

.frmUtils .fieldInputFile label.dirty{
	color:var(--form_invalid_field_border_color); /*!important;*/
	border-color:var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}

.frmUtils .fieldInputFile label.clean{
	color:var(--form_valid_field_border_color); /*!important;*/
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/* // [END invalidstyle] */

/*==========================================================================
  ADD BY MANU ENABLE / DISABLE INPUT PASSWORD
  https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/
  ==========================================================================*/
.frmUtils .togglePassword-container{
  display: flex !important;
  flex-direction:row;
  align-items: center;/*alineacion vertical*/
}
.frmUtils .togglePassword{
	cursor: pointer;
	margin-left: -1.6rem; /*-25px;*/
	display:inline-flex !important;
}

@media screen and (max-width:500px) {
	.frmUtils .togglePassword-container{
		display: block !important;
		margin:0 !important;
 		padding:0 !important;
  		width:100% !important;
	}
	.frmUtils .togglePassword-container input{
		float:left;
	}
	.frmUtils .togglePassword{
		float:right;
		position:absolute;
		margin-top: 5px;
	}
}

/*==========================================================================
ADD BY MANU FALDON DE COOKIES
==========================================================================*/

#cookies-aviso {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 200;
  background: white;
  padding: 1.4880952381vw 1.4880952381vw 1.4880952381vw 1.4880952381vw;
  
  font-family: var(--cookies_modal_font_family);
  font-size: 15px;
  text-align: center;
}
#cookies-aviso .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

#cookies-aviso .content #cookies-aceptar {
  padding: 0.8928571429vw 1.1904761905vw;
  white-space: nowrap;
  cursor: pointer;
  background: var(--cookies_modal_button_background_color);
  color: var(--cookies_modal_button_color);
  border: 1px solid var(--cookies_modal_button_border_color);
  transition: all 0.3s;
}
#cookies-aviso .content #cookies-aceptar:hover {
  background: var(--cookies_modal_button_hover_background_color);
  color: var(--cookies_modal_button_hover_color);
}

#cookies-aviso .content #cookies-close {
  padding: 0.8928571429vw 1.1904761905vw;
  white-space: nowrap;
  cursor: pointer;
  background: var(--cookies_modal_button_background_color);
  color: var(--cookies_modal_button_color);
  border: 1px solid var(--cookies_modal_button_border_color);
  transition: all 0.3s;
}
#cookies-aviso .content #cookies-close:hover {
  background: var(--cookies_modal_button_hover_background_color);
  color: var(--cookies_modal_button_hover_color);
}
#cookies-aviso .content p {
  padding-bottom: 30px;
}

#cookies-aviso h2,#cookies-aviso h3{
    text-align: left;
    font-weight: bold;
}

/*==========================================================================
ADD BY MANU FALDON DE COOKIES BLOQUE CONFIGURACION DE COOKIES A GESTIONAR (los checkboxes)
==========================================================================*/

#cookies-aviso .bloqueCookieConfig{
    display: flex;
    width: 100%;
    align-items: center;
    align-content: center;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

#cookies-aviso .bloqueCookieConfig p{padding-left: 10px;}

#cookies-aviso  #btn_Aceptar_cookies_conf:hover {
    background: var(--cookies_modal_button_hover_background_color);
    color: var(--cookies_modal_button_hover_color);
}
#cookies-aviso  #btn_Aceptar_cookies_conf {
    padding: 0.8928571429vw 1.1904761905vw;
    white-space: nowrap;
    cursor: pointer;
    background: var(--cookies_modal_button_background_color);
    color: var(--cookies_modal_button_color);
    border: 1px solid var(--cookies_modal_button_border_color);
    transition: all 0.3s;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}

@media only screen and (min-width: 1024px) {
  #cookies-aviso .content {
    flex-direction: row;
  }
  #cookies-aviso .content p {
    padding-bottom: 0;
    padding-right: 20px;
    text-align: left;
  }
}

/*==========================================================================
  ADD BY MANU BOTON SUBIR ARRIBA
  ==========================================================================*/

#go-top {
	position: fixed;
	bottom: 42px;
	right: 30px;
	z-index: 700;
	display: none;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	height: 63px;
	width: 60px;
	line-height: 63px;
	text-align: center;
	background-color: var(--btn_gottop_background); /*#000000;*/
	color: var(--btn_gottop_color);
	text-align: center;
	text-transform: uppercase;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#go-top a i {
	font-size: 21px;
	line-height: inherit;
}

#go-top a:visited {
	background: var(--btn_gottop_background); /*#000000;*/
	color: var(--btn_gottop_color);
}

#go-top a:hover,
#go-top a:focus {
	background: var(--btn_gottop_hover_background);
	color: var(--btn_gottop_hover_color);
}

@media only screen and (max-width:768px) {
	#go-top {
		bottom: 0;
		right: 0;
	}
}

/*==========================================================================
  ADD BY MANU POR PROYECTO
  ==========================================================================*/


  /* Estado por defecto */
.like-product svg.ico-like[data-favourite] path {
	fill: white;
	stroke: #1A1A1A;
	stroke-width: 1.5px;
	transition: all 0.3s ease;
}

/* Estado activo - fondo rojo, borde rojo */
.like-product svg.ico-like[data-favourite].active path {
	fill: #e74c3c;
	stroke: #e74c3c;
	stroke-width: 1.5px;
}

/* Efecto hover */
.like-product svg[data-favourite]:hover {
	transform: scale(1.1);
	cursor: pointer;
	transition: transform 0.2s ease;
}



/*Carrito de la compra*/
/* Hacer que resume-item ocupe el 100% del ancho */
.resume-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre elementos */
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* Opcional: línea separadora */
}

/* Imagen con tamaño fijo */
.image-resume {
    flex-shrink: 0; /* No se comprime */
    width: 60px;
    height: 60px;
}

.image-resume img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Título que ocupa el espacio disponible */
.title-resume {
    flex: 1; /* Ocupa el espacio restante */
    font-size: 14px;
    line-height: 1.3;
    padding-right: 10px; /* Espacio antes del precio */
}

/* Precio alineado a la derecha */
.price-resume {
    flex-shrink: 0; /* No se comprime */
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: right;
    min-width: 80px; /* Ancho mínimo para alineación */
}






/* ================================================
   ESTILOS PARA PÁGINAS ESTÁTICAS
   ================================================ */

/* Encabezados dentro de wysiwyg en páginas estáticas */

.estaticas .title{
	margin-top: 60px;

}
.estaticas .wysiwyg h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 40px 0 20px 0;
    line-height: 1.3;
}

.estaticas .wysiwyg h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 30px 0 15px 0;
    line-height: 1.4;
}

/* Párrafos */
.estaticas .wysiwyg p {
    font-size: 16px;
    line-height: 1.6;
    color: #1A1A1A;
    margin: 0 0 20px 0;
}

.estaticas .wysiwyg p.text-small {
    font-size: 14px;
    color: #666;
}

/* Listas */
.estaticas .wysiwyg ul,
.estaticas .wysiwyg ol {
    margin: 0 0 20px 0;
    padding-left: 24px;
}

.estaticas .wysiwyg ul li,
.estaticas .wysiwyg ol li {
    font-size: 16px;
    line-height: 1.6;
    color: #1A1A1A;
    margin-bottom: 12px;
    padding-left: 8px;
}

.estaticas .wysiwyg ul li:last-child,
.estaticas .wysiwyg ol li:last-child {
    margin-bottom: 0;
}

/* Enlaces */
.estaticas .wysiwyg a {
    color: #1A1A1A;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.estaticas .wysiwyg a:hover {
    opacity: 0.7;
}

/* Strong / Bold */
.estaticas .wysiwyg strong {
    font-weight: 700;
}

/* Énfasis / Italic */
.estaticas .wysiwyg em {
    font-style: italic;
    color: #666;
}

/* Espaciado adicional después del primer párrafo (text-small) */
.estaticas .wysiwyg p.text-small + h2 {
    margin-top: 50px;
}

/* Section content para páginas estáticas */
.estaticas.content-section {
    padding: 20px 0;
}

@media (max-width: 768px) {
    .estaticas .wysiwyg h2 {
        font-size: 20px;
        margin: 30px 0 15px 0;
    }
    
    .estaticas .wysiwyg h3 {
        font-size: 16px;
        margin: 24px 0 12px 0;
    }
    
    .estaticas .wysiwyg p,
    .estaticas .wysiwyg ul li,
    .estaticas .wysiwyg ol li {
        font-size: 15px;
    }
    

}