/*
Theme Name: wkweb

Template: Divi
*/
/* ========================================================= */
/* wk-seccion-ayuda-plantillas */
/* ========================================================= */
.wk-seccion-ayuda-plantillas {
	background-color: white !important;
	border: 3px dotted red !important;
}

/* ========================================================= */
/* VARIABLES */
/* ========================================================= */
:root {
	
	--wk-a-color1: #854e9d;
	--wk-a-color2: #c6aad4;
	--wk-a-color3: #efefef;
	--wk-a-color4: #111111;
	--wk-a-color5: #9d6db3;
	--wk-a-color6: #ffffff;
	
	
	/* Fondos */
	--wk-a-fondo: #ffffff;            /* Fondo principal blanco (cabecera, logo y secciones claras) */
	--wk-a-fondo2: #f4f8f8;           /* Fondo secundario: gris muy claro con matiz verde/azul suave */

	/* Tipografía */
	--wk-a-titulo: #1e293b;           /* Gris oscuro azulado para menú y títulos principales sobre blanco */
	--wk-a-titulo2: #008080;          /* Verde teal para destacar palabras o secciones */
	--wk-a-texto: #475569;            /* Gris medio para párrafos (lectura muy cómoda sobre blanco) */
	--wk-a-texto2: #4F9CB7;           /* Azul 3 para subtítulos, categorías o metadatos */

	/* Enlaces del menú y contenidos */
	--wk-a-link: #008080;             /* Verde teal (resalta muy bien sobre blanco) */
	--wk-a-link-over: #2CC1C7;        /* Azul 2 para el efecto hover al pasar el ratón */

	/* Botón principal en la cabecera / web */
	--wk-a-boton-fondo: #008080;       /* Fondo verde teal para el botón de contacto/cita */
	--wk-a-boton-texto: #ffffff;       /* Texto en blanco sobre el botón verde */
	--wk-a-boton-borde: #008080;       /* Borde verde */

	/* Botón Hover (Efecto al pasar el ratón) */
	--wk-a-boton-fondo-over: #4F9CB7;  /* Cambia a Azul 3 */
	--wk-a-boton-texto-over: #ffffff;  /* Texto en blanco legible */
	--wk-a-boton-borde-over: #02FBD9;  /* Borde brillante en Azul 1 para llamar la atención */
	

	
}

.wk-seccion-b {
	/* Fondos oscuros / de acento */
	--wk-a-fondo: #008080;            /* Verde teal de fondo principal */
	--wk-a-fondo2: #006666;           /* Tono verde más profundo para tarjetas o bloques internos */

	/* Tipografía clara para alto contraste */
	--wk-a-titulo: #ffffff;           /* Blanco puro para el título principal */
	--wk-a-titulo2: #02FBD9;          /* Azul 1 (brillante) para destacar subtítulos o palabras clave */
	--wk-a-texto: #e2f1f1;            /* Blanco verdoso suave (evita la fatiga visual del blanco puro) */
	--wk-a-texto2: #2CC1C7;           /* Azul 2 para texto secundario o metadatos */

	/* Enlaces sobre fondo oscuro */
	--wk-a-link: #02FBD9;             /* Azul 1 para enlaces muy visibles */
	--wk-a-link-over: #ffffff;        /* Pasa a blanco al pasar el ratón */

	/* Botón sobre fondo oscuro (Estilo "Outlined" o Botón Claro) */
	--wk-a-boton-fondo: #ffffff;       /* Fondo blanco para destacar sobre el verde */
	--wk-a-boton-texto: #008080;       /* Texto verde a juego con el fondo de la sección */
	--wk-a-boton-borde: #ffffff;       /* Borde blanco */

	/* Botón Hover */
	--wk-a-boton-fondo-over: #02FBD9;  /* Cambia a Azul 1 brillante */
	--wk-a-boton-texto-over: #004d4d;  /* Texto oscuro para mantener legibilidad sobre el Azul 1 */
	--wk-a-boton-borde-over: #02FBD9;  /* Borde a juego */
}

:where(
.et_pb_text_inner p,
.et_pb_text_inner li ) {
	text-align: left;
	font-size: 0.9rem;
	font-weight: normal;
	
}

/* Unifica la sangría y resetea márgenes para ambas listas */

:where(
.et_pb_text_inner ul, 
.et_pb_text_inner ol ) {
  padding-left: 30px !important;
  margin-left: 0 !important;
}

/* Define el comportamiento de los elementos de lista */
:where(
.et_pb_text_inner  ul li, 
.et_pb_text_inner  ol li ) {
  list-style-position: outside !important; /* Coloca punto/número fuera del texto */
  padding-left: 5px !important;          /* Espacio entre el punto/número y el texto */
  margin-bottom: 1rem !important;         /* Separación vertical entre ítems */
}

h1 {
	font-size: 1.8rem;
	line-height: 1.40;
	/*padding-bottom: 1rem;*/
}

h2 {
	font-size: 1.6rem;
	line-height: 1.40;
	/*padding-bottom: 1rem;*/
}

h3 {
	font-size: 1.4rem;
	line-height: 1.40;
	/* padding-bottom: 1rem;*/
}

h4 {

	font-size: 1.3rem;
	line-height: 1.40;
	/*padding-bottom: 1rem;*/
}

h5 {	
	font-size: 1.2rem;
	line-height: 1.40;
	/*padding-bottom: 1rem;*/
}

h6 {
	font-size: 1.1rem;
	line-height: 1.40;
	/*padding-bottom: 1rem;*/
}




@media (min-width: 768px) {
	.et_pb_text p,
	.et_pb_text li {
	 text-align: justify;
	}	
}

@media (min-width: 981px) {
	.et_pb_text p,
	.et_pb_text li {
	 text-align: justify;
	}	
}


/* seccion-tipo-a ================================================= */

/*
.wk-seccion-tipo-a {
	background-color: var(--wk-a-fondo);
	color: var(--wk-a-texto1) !important;;
}

.wk-seccion-tipo-a .wk-fondo-transparente {
	background: linear-gradient(
  		90deg, 
  		color-mix(in srgb, var(--wk-a-fondo) 80%, transparent) 0%, 
  		color-mix(in srgb, var(--wk-a-fondo) 80%, transparent) 100%
		) !important;
	
}

.wk-seccion-tipo-a .et-pb-icon {
	color: var(--wk-a-titulo) !important;	
}


.wk-seccion-tipo-a p,li {
	color: var(--wk-a-texto1);	
}

.wk-seccion-tipo-a h1 {
	color: var(--wk-a-titulo);	
	font-size: 1.8rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-a h2 {
	color: var(--wk-a-titulo);	
	font-size: 1.6rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-a h3 {
	color: var(--wk-a-titulo);
	font-size: 1.4rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-a h4 {
	color: var(--wk-a-titulo);	
	font-size: 1.3rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-a h5 {
	color: var(--wk-a-titulo);	
	font-size: 1.2rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-a h6 {
	color: var(--wk-a-titulo);	
	font-size: 1.1rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}


.wk-seccion-tipo-a a.et_pb_button {
	background-color: var(--wk-a-boton-fondo) !important;
	color: var(--wk-a-boton-texto) !important;
	border-color: var(--wk-a-boton-borde) !important;
}
.wk-seccion-tipo-a a.et_pb_button:hover {
	background-color: var(--wk-a-boton-fondo-over) !important;
	color: var(--wk-a-boton-texto-over) !important;
	border-color: var(--wk-a-boton-borde-over) !important;
}
*/

/* seccion-tipo-b ================================================= */

/*
.wk-seccion-tipo-b {
	background-color: var(--wk-b-fondo);
	color: var(--wk-b-texto1) !important;;
}

.wk-seccion-tipo-b .wk-fondo-transparente {
	background: linear-gradient(
  		90deg, 
  		color-mix(in srgb, var(--wk-b-fondo) 80%, transparent) 0%, 
  		color-mix(in srgb, var(--wk-b-fondo) 80%, transparent) 100%
		) !important;
	
}

.wk-seccion-tipo-b .et-pb-icon {
	color: var(--wk-b-titulo) !important;	
}


.wk-seccion-tipo-b p,li {
	color: var(--wk-b-texto1);	
}

.wk-seccion-tipo-b h1 {
	color: var(--wk-b-titulo);	
	font-size: 1.8rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-b h2 {
	color: var(--wk-b-titulo);	
	font-size: 1.6rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-b h3 {
	color: var(--wk-b-titulo);
	font-size: 1.4rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-b h4 {
	color: var(--wk-b-titulo);	
	font-size: 1.3rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-b h5 {
	color: var(--wk-b-titulo);	
	font-size: 1.2rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}

.wk-seccion-tipo-b h6 {
	color: var(--wk-b-titulo);	
	font-size: 1.1rem;
	line-height: 1.25;
	padding-bottom: 1rem;
}


.wk-seccion-tipo-b a.et_pb_button {
	background-color: var(--wk-b-boton-fondo) !important;
	color: var(--wk-b-boton-texto) !important;
	border-color: var(--wk-b-boton-borde) !important;
}
.wk-seccion-tipo-b a.et_pb_button:hover {
	background-color: var(--wk-b-boton-fondo-over) !important;
	color: var(--wk-b-boton-texto-over) !important;
	border-color: var(--wk-b-boton-borde-over) !important;
}
*/


/* ========================================================= */
/* 009: #wk-menu-principal botones para colapsar submenus. Necesitan un javascritp en integraciones */
/* ========================================================= */

/*change hamburger icon to x when mobile menu is open*/

#wk-menu-principal .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
#wk-menu-principal .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d' !important;
}


/*adjust the new toggle element which is added via jQuery*/

#wk-menu-principal ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
#wk-menu-principal ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px !important;
	height: 100% !important;
	padding: 0px !important;
	max-height: 44px !important;
	border: none !important;
	position: absolute !important;
	right: 0px !important;
	top: 0px !important;
	z-index: 999 !important;
	background-color: transparent !important;
}


/*some code to keep everyting positioned properly*/

#wk-menu-principal ul.et_mobile_menu>li.menu-item-has-children,
#wk-menu-principal ul.et_mobile_menu>li.page_item_has_children,
#wk-menu-principal ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative !important;
}


/*remove default background color from menu items that have children*/

#wk-menu-principal .et_mobile_menu .menu-item-has-children>a,
#wk-menu-principal .et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent !important;
}


/*hide the submenu by default*/



#wk-menu-principal #mobile_menu1 li.menu-item-has-children ul.sub-menu
{
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

#wk-menu-principal #mobile_menu1 li.menu-item-has-children ul.sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

#wk-menu-principal ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center !important;
	opacity: 1 !important;
}


/*submenu toggle icon when closed*/

#wk-menu-principal ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px !important;
	position: relative !important;
	font-family: "ETModules" !important;
	font-style: normal !important;
	content: '\33' !important;
	color: #000000 !important;
	background: #eeeeee !important;
	border-radius: 50% !important;
	padding: 3px 3px 3px 3px !important;
}


/*submenu toggle icon when open*/

#wk-menu-principal ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
#wk-menu-principal .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32' !important;
}


/*add point on top of the menu submenu dropdown*/

#wk-menu-principal .et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute !important;
	right: 5%!important;
	margin-left: -20px!important;
	top: -14px!important;
	width: 0!important;
	height: 0!important;
	content: ''!important;
	border-left: 20px solid transparent!important;
	border-right: 20px solid transparent!important;
	border-bottom: 20px solid #ffffff!important;
}


/*adjust the position of the hamburger menu*/

#wk-menu-principal .mobile_menu_bar {
	position: relative!important;
	display: block!important;
	
	line-height: 0!important;
}


/*force the background color and add a rounded border*/

#wk-menu-principal .et_pb_menu_0.et_pb_menu .et_mobile_menu,
#wk-menu-principal .et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px!important;
}


#wk-menu-principal .et_mobile_menu {   
    overflow-y: scroll !important;
    max-height: 80vh !important;
    -overflow-scrolling: touch !important;
    -webkit-overflow-scrolling: touch !important;
}