@import url("../Divi/style.css");


/**********************************************************************/
/* INICIO CAMBIOS FRAN                                               */
/**********************************************************************/

/* Para volver a centrar los tips */
#container-tip:before {
    width: 0px !IMPORTANT;
}

/**********************************************************************/
/*   			Estilos para el "accordion block"				      */
/**********************************************************************/

h4.c-accordion__title {
	background-color: #f0f0f0;
	margin: 0px 0px 10px 0px;
	padding: 12px !IMPORTANT;
	border-radius: 3px;
	border: 1px solid #e0e0e0;
}

h4.c-accordion__title::after {
	padding-right: 10px;
}

#container-tip {
	margin-bottom: 60px;
}

.c-accordion__content {
	margin-top: 20px;
}


/**********************************************************************/
/*   	Dashicons												      */
/**********************************************************************/

.dashicons {
	color: #2191ab;
	font-size: 32px;
	margin-right: 10px;
	margin-bottom: 10px;
}



/**********************************************************************/
/*   	Tabla que contiene los precios y los resellers			      */
/**********************************************************************/

table.preciosresellers, table.preciosresellers tr, table.preciosresellers td {
	border: none !important; 
}

td.zonaprecios {
	border: none !important; 
	width: 65%;
	vertical-align: top;
	padding-left: 0px !important;
}


td.zonaresellers {
	border: none !important; 
	width: 35%;
	vertical-align: top;
	padding-right: 0px !important;
}




/**********************************************************************/
/* INICIO CAMBIOS RAMÓN                                               */
/**********************************************************************/

/**********************************************************************/
/* Ramón: Centrar los pies de imagen ya que Gutenberg no lo hace.     */

.wp-block-image figcaption {
	text-align: center;
}

/**********************************************************************/
/* Ramón: Para que las páginas de tips /support/tip/* y news /news/*
 * sean más fáciles de leer.
 */

body.news-template-default .et_pb_row,
body.tip-template-default .et_pb_row {
  max-width: 900px !important;
  font-size: 16px;
  line-height: 2;
}

body.news-template-default .et_pb_row ul,
body.news-template-default .et_pb_row ol,
body.tip-template-default .et_pb_row ul,
body.tip-template-default .et_pb_row ol {
  line-height: inherit;
}

body.news-template-default blockquote,
body.tip-template-default blockquote {
  padding: 20px !important;
  background-color: #f0f9f9;
}

/**********************************************************************/
/* Ramón: Clases para nombres de comandos e iconos en el texto.       */

/* Para casos en el que sea solo un nombre de comando */
span.va-command {
  border: 1px solid #bbbbbb;
  border-radius: 3px;
  padding: 2px 6px;
  background-color: #efefef;
  font-family: monospace;
}

/* Para pequeñas imágenes como iconos situadas dentro del texto. */
.va-inline-img {
  vertical-align: middle;
  padding-bottom: 2px;
}

/* Para combinación de nombre de comando e icono
 * Estructura: <span class="va-command-icon"><span>_Ejemplo</span><img src="" /></span> 
 */
span.va-command-icon {
  display: inline-block;  
  line-height: 23px;  
  border: 1px solid #bbbbbb;
  border-radius: 3px;
  background-color: #efefef;
}

span.va-command-icon > span {
  padding: 2px 6px;
  vertical-align: middle;
  font-family: monospace;
}

span.va-command-icon > img {
  max-width: 30px;
  vertical-align: middle;
  border-left: 1px solid #bbbbbb;
}

/**********************************************************************/
/* Ramón: Estilos para centrar las pestañas de la página de ventas    */

.et_pb_tabs > ul.et_pb_tabs_controls {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.et_pb_tabs > ul.et_pb_tabs_controls > li {
  flex-grow: 1;
  margin-left: 0 !important;
  display: block; /* overriding a default */
}

.et_pb_tabs > ul.et_pb_tabs_controls > li > a {
  display: unset; /* To override an undesired value from the theme. */
}

.et_pb_tabs > ul.et_pb_tabs_controls > li:not(.et_pb_tab_active) {
  border-bottom: 1px solid #d9d9d9;
}

/**********************************************************************/
/* Estilos para imitar el enlace/botón principal de Divi.
 * Añadir la clase 'theme-button' a un elemento anchor.
 */

.theme-button {
  display: inline-block;
  color: #2191ab;
  position: relative;
  font-size: 20px;
  padding: .3em 1em;
  line-height: 1.7em !important;
  background-color: transparent;
  border: 2px solid;
  border-radius: 3px;
  transition: all .2s;
}

.theme-button:hover,
.theme-button:focus {
  background-color: rgba(0,0,0,.05);
  border: 2px solid transparent;
  padding: .3em 2em .3em .7em;
  color: #4d4d4d !important;
}

.theme-button:after {
  content: "";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'><polyline points='2,2 8,9 2,16' fill='none' stroke-width='3px' stroke='%232191ab' stroke-linecap='round' stroke-linejoin='round' /></svg>");
  background-position: center;
  opacity: 0;
  position: absolute;
  background-repeat: no-repeat;
  width: 10px;
  height: 18px;
  transition: all .2s;
  top: 32%;
  margin-left: 15px;
}

.theme-button:hover:after,
.theme-button:focus:after {
  opacity: 1;
}

/**********************************************************************/
/* Ramón: Estilos básicos para las tablas. Aplicar clase: va-table    */
/* TODO Buscar solución para que sean responsive.                     */

.entry-content table.va-table {
  border: 1px solid #eee;
}

.entry-content table.va-table > thead {
  background-color: #eee;
}

.entry-content table.va-table > tbody > tr > td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.entry-content table.va-table > tbody > tr:not(:last-child) > td {
  border-bottom: 1px solid #eee;
}

/**********************************************************************/
/* Ramón: Estilo :focus-visible en enlaces para cumplir accesibilidad */
/* :focus sería más adecuado ya que tiene mayor soporte.              */

a:focus-visible {
  outline-color: rgb(33 145 171 / 0.7);
  outline-style: dotted;
  outline-width: 2px;
  outline-offset: 5px;
}

/**********************************************************************/
/* FIN CAMBIOS RAMÓN                                                  */
/**********************************************************************/


/**********************************************************************/
/* INICIO CAMBIOS FRAN                                                */
/**********************************************************************/

/* Para GDPR Cookie Consent */

div.user_consent_state {
	background-color: #F5F5F5;
	padding: 16px;
	margin-bottom: 12px;
}

div.cli_cookie_category_single {
	background-color: #F5F5F5;
	padding: 12px;
	margin-bottom: 12px;
}

/* Para el índice de features, en la parte inferior de las páginas de features */ 

.ocho-columnas .et_pb_module {width: 12.5%; float: left;}
@media (max-width: 980px){
.ocho-columnas .et_pb_module {width: 25%;}
}
@media all and (max-width: 767px) {
.ocho-columnas .et_pb_module {width: 50%;}
}
@media all and (max-width: 512px) {
.ocho-columnas .et_pb_module {width: 100%;}
}




.et_pb_text_fran table { border: none; }
.entry-content .et_pb_text_fran td { border: none; }

h1 {
	font-weight: bold;
	margin-bottom: 12px;
}

h2 {
	padding-bottom: 25px;
}

/* Usado en el shortcode [separator] 
*/
hr.separator {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 24px;
}

/* Increase the height of the default Block Editor separator block */
hr.wp-block-separator {
	margin-bottom: 40px;
    margin-top: 30px;
}

/* Para que los saltos a links internos (#label) dejen sitio a la cabecera 
*/
:target:before {
	content:"";
	display:block;
	height:150px; /* fixed header height*/
	margin:-150px 0 0; /* negative fixed header height */
}

/* Clases usadas en el tema VisualARQ 
*/
div.et_pb_text_fran img.right
{
	float: right;
	display: block;
	margin: 0px 10px 5px 40px;
}
div.et_pb_text_fran img.left
{
	float: left;
	display: block;
	margin: 0px 40px 5px 10px;
}

.project .entry-content {
	padding-top: 0px;
}

/* Para simular la página hecha en DIVI Builder - usado en page.php 
*/

/* Esto es la versión en que se ve hoja blanca con fondo gris */
/*
.et_pb_section_fran.et_pb_section { background-color:rgba(242,242,242,0.68) !important; }
.et_pb_row_fran { border: 1px solid #e0e0e0; }
.et_pb_row_fran { background-color:#ffffff; }
.et_pb_column_fran { padding-right:40px; padding-left:40px; }
.et_pb_text_fran h1{ font-weight: bold; margin-bottom: 12px; }
*/
/* Esta es la versión "amplia", todo fondo blanco */
.et_pb_row_fran { background-color:#ffffff; }
.et_pb_text_fran h1{ font-weight: bold; margin-bottom: 12px; }



/* Para evitar que el contenido "baje y suba" al aparecer la cabecera  */
#page-container { 
	padding-top:58px !important;
}

/* Para reducir la separación top de los widgets del footer */
#footer-widgets {
	padding: 4% 0 0;
}

/* Borde del footer */
#main-footer {
	border-top: 1px solid #bbbbbb;
}

/* Anchos de pie de página */
#footer-widgets div.footer-widget:nth-child(1) {
	width: 280px;
}
#footer-widgets div.footer-widget:nth-child(2) {
	width: 210px;
}
#footer-widgets div.footer-widget:nth-child(3) {
	width: 140px;
}
#footer-widgets div.footer-widget:nth-child(4) {
	width: 180px;
}

#footer-widgets div.footer-widget:nth-child(4) {
	/* width: 90px; */
	text-align: right;
	float: right;
}
/********************************/
/* Cambios en pricing table */
.et_pb_pricing_table {
	padding-bottom: 0px;
}

.et_pb_pricing_content_top {
	padding-bottom: 14px;
	border-bottom-width: 0px !important;
}

.et_pb_pricing_content {
	/* padding: 14px; */
	display: none;
}

h2.et_pb_pricing_title {
	font-size: 16px !important;
	font-weight: bold !important;
}

.et_pb_pricing_table span.et_pb_best_value {
	font-size: 13px !important;
}

/* Fin cambios en pricing table */
/********************************/


/********************************/
/* Para la galería de youtube  */
div.youtube-gallery {
    margin: 8px;
    padding: 2px;
    float: left;
    width: calc(25% - 16px);
    text-align: center;
}

div.youtube-gallery img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

div.youtube-gallery a{
	float: left;
	position: relative;
}

div.youtube-gallery a span{
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("images/play.png") no-repeat;
  background-position: 50% 50%;
  background-size: 22%;
  opacity: .5; 
  transition: background-size .4s ease-out, opacity .4s ease-out;
  -moz-transition: background-size .4s ease-out, opacity .4s ease-out;
  -webkit-transition: background-size .4s ease-out, opacity .4s ease-out;
  -o-transition: background-size .4s ease-out, opacity .4s ease-out;  
}

div.youtube-gallery a span:hover{
  background-size: 25%;
  opacity: .9;
}

div.youtube-desc {
  float: left;
    padding: 4px;
    text-align: center;
	height: 80px;
}

@media (max-width: 480px)  {
	div.youtube-gallery {
		width: 100%;
	}
}

@media (min-width: 481px) and (max-width: 1023px)  {
	div.youtube-gallery {
		width: calc(50% - 16px);
	}
}

@media (min-width: 1024px)  {
	div.youtube-gallery {
		width: calc(25% - 16px);
	}
}

.fancybox-slide--video .fancybox-content {
	width  : 854px;
	height : 480px;
	max-width  : 80%;
	max-height : 80%;
}

/* Fin de la galería de youtube  */
/********************************/

/********************************************************/
/* Tabla de resellers, para que aparezca scoll en móvil */

@media screen and (max-width: 960px) {
	table.resellers {
		overflow-x: auto;
		display: block;
	}
}

table.resellers tr:nth-child(odd) {
	background: #F4F4F4;
}

table.datosreseller tr:nth-child(odd) {
	background: transparent;
}

table.resellers {
	border: 1px solid #dddddd !important;
}

table.resellers, table.resellers th, table.resellers td {
	padding: 8px 16px 8px 16px; 
}

table.datosreseller, table.datosreseller tr, table.datosreseller tr td {
	border-color: transparent;
	border: 0px solid transparent !important;
	border-collapse: collapse;
	margin: 0px !important;
	padding: 0px;
	line-height: 22px;
}

table.datosreseller td.iconos {
	text-align: right;
	vertical-align: top;
}

table.datosreseller td.mapa {
	text-align: right;
	vertical-align: bottom;
}

.dashicons-resellers {
	font-size: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
}


/* Fin de tabla de resellers */
/*****************************/


/*********************************************/
/* Loader mientras se cargan formularios FZ */

.div-sobre-iframe {
	border-width: 1px;
	background:url(images/loader.gif) center center no-repeat;
}

/* Fin de loader de formularios */
/********************************/


/***********************************************/
/* Barra con imagen entre el menu y el título  */

.barra-imagen {
	width: 100%;
	height: 112px;
	background-image:url(images/barra-fondo.jpg);
	background-size:100% auto;
}

.fondo-barra1 {	background-image:url(images/barra1.jpg); }
.fondo-barra2 {	background-image:url(images/barra2.jpg); }

@media screen and (max-width: 960px) {
	.barra-imagen {
		display: none;
	}
}

@media print {
	.barra-imagen {
		display: none;
	}
}

/* Fin de Barra con imagen 					   */
/***********************************************/

/********************************************************/
/*  Para centrar los iconos de social media en la home  */
ul.et_pb_social_media_follow {
 width:100%;
 text-align:center;
 margin: 0 0 0 0 ;
}
.et_pb_social_media_follow li {
 float:none;
 display:inline-block;
}
/* Para que se los social media icons en gris           */
.et_pb_social_icon {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
.et_pb_social_icon:hover  {
  -webkit-filter: grayscale(0);
  filter: none;
}
/********************************************************/


/********************************************************/
/*  Resituar el signo de dolar/euro en los precios */
.et_pb_dollar_sign {
	margin-left: -13px !important;
}
/********************************************************/


/********************************************************/
/* Para cambiar al hamburger menu en tablets */
/* (las versiones traducidas del menu no caben) */
/********************************************************/

@media only screen and ( max-width:1180px) {
	#et_mobile_nav_menu {
		display: block;
		margin-top: 0px;
	}
	#top-menu-nav {
		display: none;
	}
}


/*****************************************************/
/* Estilo de texto para el copyright a pie de pagina */
/*****************************************************/
.copyright {
	font-size: 11px;
}


/*****************************************************/
/* Que el widget de RSS no deje tanto espacio debajo */
/*****************************************************/
#rss-10, #rss-3, #recent-posts-4 {
	margin-bottom: 30px !important;
}

/*****************************************************/
/* Para que los puntos queden metidos a la derecha   */
/*****************************************************/
#main-content li {
	margin-left: 16px;
}

/*****************************************************************/
/* Aportados por Ramón.                                          */
/* Inspirado en Bootstrap, añadir más a medida que se necesiten. */
/* https://getbootstrap.com/docs/4.0/utilities/spacing/          */
/*****************************************************************/

:root {
  font-size: clamp(10px, 2.4vw, 16px);
  --spacer: 1rem;
}

.p-5 {
  padding: calc(var(--spacer) * 3) !important;
}

.my-3 {
  margin-top: var(--spacer) !important;
  margin-bottom: var(--spacer) !important;
}

.my-4 {
  margin-top: calc(var(--spacer) * 1.5) !important;
  margin-bottom: calc(var(--spacer) * 1.5) !important;
}

.my-5 {
  margin-top: calc(var(--spacer) * 3) !important;
  margin-bottom: calc(var(--spacer) * 3) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-2 {
  margin-top: calc(var(--spacer) * 0.5) !important;
}

.mt-3 {
  margin-top: var(--spacer) !important;
}

.mt-4 {
  margin-top: calc(var(--spacer) * 1.5) !important;
}

.mt-5 {
  margin-top: calc(var(--spacer) * 3) !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2 {
	margin-bottom: calc(var(--spacer) * 0.5) !important;
}

.mb-3 {
  margin-bottom: var(--spacer) !important;
}

.mb-4 {
  margin-bottom: calc(var(--spacer) * 1.5) !important;
}

.mb-5 {
  margin-bottom: calc(var(--spacer) * 3) !important;
}

/*****************************************************/
/* Para cambiar el icono de Google+ por Github    */
/*****************************************************/
.et_pb_google_icon:before {
	content: "\f09b" !IMPORTANT;
	font-family: 'Font Awesome 5 Brands' !IMPORTANT;
}




/*****************************************************/
/* Para cambiar el portfolio grid de DIVI a 3 columnas */
/*****************************************************/

@media only screen and ( min-width: 768px ) {
 
	.three-column-grid .et_pb_grid_item {
	width: 28.333% !important;
	margin: 0 7.5% 7.5% 0 !important;
	}
	 
	.three-column-grid .et_pb_grid_item:nth-child(3n) {
	margin-right: 0 !important;
	}
	 
	.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
	clear: left;
	}
	 
	.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
	clear: unset !important;
	}
 
}