/*
Theme Name: Ceballos
Theme URI: https://www.ceballos.pro
Author: Enrique Ceballos D
Author URI: https://www.ceballos.pro
Description: Ceballos Theme te ayuda a crear sitios web informativos con un amplio banco de diseños.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1
Text Domain: ceballos
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog
*/

/* ------------------------------------------------------------- INDICE:

	0. CEBALLOS BASES - SON CLASES BASES CSS
	1. CEBALLOS STYLES - Son clases agregadas desde los "Styles" a bloques nativos de WordPress
	2. CEBALLOS CLASES - Son clases agregadas desde a los div desde los bloques nativos de WordPress
	3. CEBALLOS ELEMENTOS - Son clases agregadas de forma predeterminada con diseños especiales
	
	z-index: 1 -> Todo el contenido
	z-index: 2 -> Bloques especiales
	z-index: 3 -> Partes especiales (header, footer)
	z-index: 4 -> Overlay
	
------------------------------------------------------------- */

.yrd-blur {
    backdrop-filter: blur(6px);
}

.wp-block-button:hover a{
	color: var(--wp--preset--color--principal) !important;
	transition: all 0.3s;
}
.wp-block-button.yrd-blur:hover a{
	color: var(--wp--preset--color--oscuro) !important ;
	background: var(--wp--preset--color--principal) !important;
	border: 2px solid var(--wp--preset--color--oscuro) !important ;
	transition: all 0.3s;
}

body :is(h1,h2) strong{
	color:var(--wp--preset--color--principal);
}

	/****	6.1. In-view	****/	/* Recordad colocar la clase ceb-animacion-view y la clase solo la clase nombrada: Ej: in-view-motion-dw*/
		.ceb-animacion-view{
			opacity:0;
			transition: all 1.3s;
		}
			@keyframes motion-opacity-out{
				from{
					 opacity:1;
				}
				to{
					opacity:0;
				}
			}
		.ceb-animacion-view.in-view{
			opacity:1;
			transition:all 1.3s;
		}
			@keyframes motion-opacity-in{
				from{
					 opacity:0;
				}
				to{
					opacity:1;
				}
			}
		/*in-view-motion-dw*/ /*Animacion para que aparezca de abajo hacia arriba en opacidad*/
		.in-view-motion-dw.in-view{
			animation: 1s motion-dw 0.3s ease;;
		}
			@keyframes motion-dw{
				from{
					 transform:translateY(10px);
				}
				to{
					transform:translateY(0);
				}
			}
		
		/*in-view-motion-tp*/ /*Animacion para que aparezca de arriba hacia abajo en opacidad*/
		.in-view-motion-tp.in-view{
			animation: 1s motion-tp 0.3s ease;;
		}
			@keyframes motion-tp{
				from{
					 transform:translateY(-10px);
					
				}
				to{
					
					transform:translateY(0);
				}
			}
		
		/*in-view-motion-rt*/ /*Animacion para que aparezca de dercha hacia 0 en opacidad*/
		.in-view-motion-rt.in-view{
			animation: 1s motion-rt 0.3s ease;;
		}
			@keyframes motion-rt{
				from{
					 transform:translateX(10px);
					
				}
				to{
					
					transform:translateX(0);
				}
			}
		
		/*in-view-motion-lft*/ /*Animacion para que aparezca de izquiera hacia 0 en opacidad*/
		.in-view-motion-lft.in-view{
			animation: 1s motion-lft 0.3s ease;;
		}
			@keyframes motion-lft{
				from{
					 transform:translateX(-10px);
					 
				}
				to{
					
					transform:translateX(0);
				}
			}
/* -------------------------------------------------------------
0. CEBALLOS BASES - Son clases agregadas desde los "Styles" a bloques nativos de WordPress
------------------------------------------------------------- */
	:root{
		--ceb-transition-base: all .25s ease;
		--ceb-familia-iconos-dash: dashicons;
		--ceb-border-radius-circular:150px;
		--ceb-tamano-border: 1px solid;
		
		--ceb-dash-icon-mas:"\f543";
		--ceb-dash-icon-menos: "\f460";
		
		--ceb-circulos-tama: 45px;
	}
	h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
		text-wrap: pretty;
	}
	.wp-block-template-part{
		margin-block-start: 0;
	}
	header{
		position: relative;
		z-index: 3;
	}
	.wp-block-details , .wp-block-details > *{
		transition:var(--ceb-transition-base);
	}
	
/* -------------------------------------------------------------
1. CEBALLOS STYLES - Son clases agregadas desde los "Styles" a bloques nativos de WordPress
------------------------------------------------------------- */

	/* ceba-template-part */
		/** is-style-ceba-template-part-sticky: Deja sticky a la template part que se aplique */
			.is-style-ceba-template-part-sticky{
				position: sticky;
				top:0;
			}
		/** is-style-ceba-template-part-scroll-down-js: Deja sticky a la template part que se aplique solo cuando se hace scroll hacia arriba */
			.is-style-ceba-template-part-scroll-down-js{
				transition: var(--ceb-transition-base);
				position: sticky;
				z-index:3;
			}
	
	/* ceba-iconos*/
		/** is-style-ceba-iconos-circular-de-borde : Estilo personalizado para "Circular de borde" en iconos redes sociales */
			.wp-block-social-links.is-style-ceba-iconos-circular-de-borde .wp-block-social-link {
				border: var(--ceb-tamano-border) currentColor;
				border-radius: 50%;
				transition: all 0.3s ease;
				background: transparent;
			}
				.wp-block-social-links.is-style-ceba-iconos-circular-de-borde .wp-block-social-link.wp-social-link:hover{
					background-color: currentColor;
				}
					.wp-block-social-links.is-style-ceba-iconos-circular-de-borde .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor{
						color: var(--wp--preset--color--principal);
					}
	
	/* ceba-lista*/
		/** is-style-ceba-lista-check-mark: Dibuja un chulo previo a los li */
			.wp-block-list.is-style-ceba-lista-check-mark{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-check-mark li{
					display:flex;
					gap:var(--wp--preset--spacing--10);
				}
					.wp-block-list.is-style-ceba-lista-check-mark li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: "\f147";
					}
		/** is-style-ceba-lista-check-mark-circle: Dibuja un chulo con circulo previo a los li */
			.wp-block-list.is-style-ceba-lista-check-mark-circle{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-check-mark-circle li{
					display:flex;
					gap:calc(var(--wp--preset--spacing--10)/2);
					align-items: center;
				}
					.wp-block-list.is-style-ceba-lista-check-mark-circle li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: "\f147";
						display:flex;
						justify-content:center;
						align-items:center;
						padding:var(--wp--preset--spacing--10);
						background-color:var(--wp--preset--color--principal);
						color:var(--wp--preset--color--blanco);
						border-radius:var(--ceb-border-radius-circular);
						width: var(--ceb-circulos-tama);
						height: var(--ceb-circulos-tama);
						aspect-ratio: 1 / 1;
					}
		/** is-style-ceba-lista-arrow: Dibuja una flecha previo a los li */
			.wp-block-list.is-style-ceba-lista-arrow{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-arrow li{
					display:flex;
					gap:var(--wp--preset--spacing--10);
				}
					.wp-block-list.is-style-ceba-lista-arrow li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: "\f345";
					}
		/** is-style-ceba-lista-star: Dibuja una estrella previo a los li */
			.wp-block-list.is-style-ceba-lista-star{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-star li{
					display:flex;
					gap:var(--wp--preset--spacing--10);
				}
					.wp-block-list.is-style-ceba-lista-star li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: "\f155";
					}
		/** is-style-ceba-lista-plus: Dibuja una Más previo a los li */
			.wp-block-list.is-style-ceba-lista-plus{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-plus li{
					display:flex;
					gap:var(--wp--preset--spacing--10);
				}
					.wp-block-list.is-style-ceba-lista-plus li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: var(--ceb-dash-icon-mas);
					}
		/** is-style-ceba-lista-menos: Dibuja un Menos previo a los li */
			.wp-block-list.is-style-ceba-lista-menos{
			    padding-left: var(--wp--preset--spacing--20);
			}
				.wp-block-list.is-style-ceba-lista-menos li{
					display:flex;
					gap:var(--wp--preset--spacing--10);
				}
					.wp-block-list.is-style-ceba-lista-menos li::before{
						font-family: var(--ceb-familia-iconos-dash);
						content: var(--ceb-dash-icon-menos);
					}
					
	/* ceba-bloqdetalles*/
		/** is-style-ceba-bloqdetalles-estilo-1: Más izquierda*/
			.wp-block-details.is-style-ceba-bloqdetalles-estilo-1 summary{
				display: flex;
				gap: var(--wp--preset--spacing--10);
			}
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-1 summary:before{
					font-family: var(--ceb-familia-iconos-dash);
					content: var(--ceb-dash-icon-mas);
				}
				
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-1 summary.ceb-details-abierto:before{
					content: var(--ceb-dash-icon-menos);
				}
		/** is-style-ceba-bloqdetalles-estilo-2: Más derecha */
			.wp-block-details.is-style-ceba-bloqdetalles-estilo-2 summary{
				display: flex;
				flex-direction: row-reverse;
				gap: var(--wp--preset--spacing--10);
				justify-content: space-between;
			}
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-2 summary:before{
					font-family: var(--ceb-familia-iconos-dash);
					content: var(--ceb-dash-icon-mas);
				}
				
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-2 summary.ceb-details-abierto:before{
					content: var(--ceb-dash-icon-menos);
				}
		/** is-style-ceba-bloqdetalles-estilo-3: Más circula izquierda*/
			.wp-block-details.is-style-ceba-bloqdetalles-estilo-3 summary{
				display: flex;
				gap: var(--wp--preset--spacing--20);
			}
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-3 summary:before{
					font-family: var(--ceb-familia-iconos-dash);
					content: var(--ceb-dash-icon-mas);
					border: var(--ceb-tamano-border);
					border-radius: var(--ceb-border-radius-circular);
					aspect-ratio: 1 / 1;
					width: var(--ceb-circulos-tama);
					height: var(--ceb-circulos-tama);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-3 summary.ceb-details-abierto:before{
					content: var(--ceb-dash-icon-menos);
				}
		/** is-style-ceba-bloqdetalles-estilo-4: Más circular derecha */
			.wp-block-details.is-style-ceba-bloqdetalles-estilo-4 summary{
				display: flex;
				flex-direction: row-reverse;
				gap: var(--wp--preset--spacing--20);
				justify-content: space-between;
			}
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-4 summary:before{
					font-family: var(--ceb-familia-iconos-dash);
					content: var(--ceb-dash-icon-mas);
					border: var(--ceb-tamano-border);
					border-radius: var(--ceb-border-radius-circular);
					aspect-ratio: 1 / 1;
					width: var(--ceb-circulos-tama);
					height: var(--ceb-circulos-tama);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.wp-block-details.is-style-ceba-bloqdetalles-estilo-4 summary.ceb-details-abierto:before{
					content: var(--ceb-dash-icon-menos);
				}

/* -------------------------------------------------------------
2. CEBALLOS CLASES - Son clases agregadas desde a los div desde los bloques nativos de WordPress
------------------------------------------------------------- */


/* -------------------------------------------------------------
3. CEBALLOS ELEMENTOS - Son clases agregadas de forma predeterminada con diseños especiales
------------------------------------------------------------- */
				
	/* ceba-flotante-iconos-inferior : Se aplica a iconos flotantes en la parte inferior como llamados a la acción rápidos */
	.ceba-flotante-iconos-inferior{
		position: fixed;
		z-index: 4;
		bottom: calc(var(--wp--preset--spacing--10)*-1);
		right: var(--wp--preset--spacing--10);
	}

/**** 8.4. Carrusel ****/
		.ceb-pointer-none{
			pointer-events: none;
		}
		/*ceb-carrusel*/
		.ceb-carrusel{
			position:relative;
			overflow: hidden;
			width:100%;
		}
			.ceb-carrusel .ceb-carrusel-mask{
				display:flex;
				transition:all 0.3s ease;;
			}
			.ceb-carrusel .ceb-carrusel-conti{
				justify-content:flex-start;
			}
			.ceb-carrusel .ceb-btn-izq{
				position:absolute;
				top:50%;
				left: 20px;
				z-index: 20;
				display: flex;
				justify-content: flex-start;
			}
			.ceb-carrusel .ceb-btn-der{
				position:absolute;
				top:50%;
				right: 20px;
				z-index: 20;
				display: flex;
				justify-content: flex-end;
			}
			
		/****	3.5. Boton ****/
			.ceb-btn-js{
				cursor:pointer;
				display:block;
				width:36px;
				aspect-ratio:1 / 1;
				font-size: 36px;
			}
				.ceb-btn-js:before{
					color: #fff;
					font-family: dashicons;
					opacity: 0.9;
					background: var(--wp--preset--color--principal);
					border-radius: 10px;
					transition: all .3s;
					padding: 10px;
					height: 100%;
					display: flex;
					align-items: center;
				}
				.ceb-btn-js:hover::before{
					color:#fff;
					opacity:1;
					background: var(--wp--preset--color--color-2);
				}
				.ceb-btn-cerrar:before{
					content:'\f057';
				}
				.ceb-btn-izq{
					opacity:0;
				}
				.ceb-btn-izq:before{
					content:'\f340';
				}
				.ceb-btn-der:before{
					content:'\f344';
				}


	/***** Carrusel-dos *****/
		
/*Carrusel (ceb-carrusel-dos) (Solo debo agregar "ceb-carrusel-dos" a lo que deseo que se mueva como carrusel)*/
	.ceb-carrusel-dos{
		max-width: 1494px !important;
		position: relative;
		justify-content: flex-start;
		overflow: hidden;
		flex-direction: row;
		width: 100%;
	}
	
	.ceb-carrusel-dos-mask{
		display: flex;
		flex-direction: row;
		width: max-content !important;
		transition:all 0.3s;
		position: relative;
		flex-grow: 1;
		gap: 0 !important;
	}
	.ceb-carrusel-dos-mask .ceb-carrusel-dos-conti{
		transition:all .3s;
	}
	
	.ceb-carrusel-dos-direccionales{
		position: absolute;
		left: 0;
		top: calc(50%);
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
		.ceb-carrusel-dos-direccionales div{
			width: 100px;
			height: 100px;
			background: transparent;
			display: block;
			cursor: pointer;
			z-index: 1;
			}
		.ceb-carrusel-dos-direccionales .ceb-carrusel-dos-direccionales-izq{
			opacity: 1;
			}
			.ceb-carrusel-dos-direccionales > div:before{
				background: var(--wp--preset--color--principal);
				border-radius: 10px;
				transition:all .3s;
			}
			.ceb-carrusel-dos-direccionales > div:hover::before{
				background: var(--wp--preset--color--color-2);
				border-radius: 10px;
				transition:all .3s;
			}
				
		.ceb-carrusel-dos-direccionales .ceb-carrusel-dos-direccionales-izq::before{
			box-sizing: border-box;
			font-family: dashicons;
			content: '\f340';
			display: flex;
			background-size: cover;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 50px;
			height: 50px;
			}
		.ceb-carrusel-dos-direccionales .ceb-carrusel-dos-direccionales-der{
			opacity: 1;
			display: flex;
			justify-content: flex-end;
			}
		.ceb-carrusel-dos-direccionales .ceb-carrusel-dos-direccionales-der::before{
			box-sizing: border-box;
			font-family: dashicons;
			content: '\f344';
			display: flex;
			background-size: cover;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 50px;
			height: 50px;
			}


/***** Carrusel-tres *****/
		
/*Carrusel (ceb-carrusel-tres) (Solo debo agregar "ceb-carrusel-tres" a lo que deseo que se mueva como carrusel)*/
	.ceb-carrusel-tres{
		max-width: 1494px !important;
		position: relative;
		justify-content: flex-start;
		overflow: hidden;
		flex-direction: row;
		width: 100%;
	}
	
	.ceb-carrusel-tres-mask{
		display: flex;
		flex-direction: row;
		width: max-content !important;
		transition:all 0.3s;
		position: relative;
		flex-grow: 1;
		gap: 0 !important;
	}
	.ceb-carrusel-tres-mask .ceb-carrusel-tres-conti{
		transition:all .3s;
	}
	
	.ceb-carrusel-tres-direccionales{
		position: absolute;
		left: 0;
		top: calc(50%);
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
		.ceb-carrusel-tres-direccionales div{
			width: 100px;
			height: 100px;
			background: transparent;
			display: block;
			cursor: pointer;
			z-index: 1;
			}
		.ceb-carrusel-tres-direccionales .ceb-carrusel-tres-direccionales-izq{
			opacity: 1;
			}
			.ceb-carrusel-tres-direccionales > div:before{
				background: var(--wp--preset--color--principal);
				border-radius: 10px;
				transition:all .3s;
			}
			.ceb-carrusel-tres-direccionales > div:hover::before{
				background: var(--wp--preset--color--color-2);
				border-radius: 10px;
				transition:all .3s;
			}
				
		.ceb-carrusel-tres-direccionales .ceb-carrusel-tres-direccionales-izq::before{
			box-sizing: border-box;
			font-family: dashicons;
			content: '\f340';
			display: flex;
			background-size: cover;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 50px;
			height: 50px;
			}
		.ceb-carrusel-tres-direccionales .ceb-carrusel-tres-direccionales-der{
			opacity: 1;
			display: flex;
			justify-content: flex-end;
			}
		.ceb-carrusel-tres-direccionales .ceb-carrusel-tres-direccionales-der::before{
			box-sizing: border-box;
			font-family: dashicons;
			content: '\f344';
			display: flex;
			background-size: cover;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 50px;
			height: 50px;
			}
/*Otro*/

body :is(.ti-rating-text span, .ti-rating-text strong){
	color: var(--wp--preset--color--oscuro) !important;
}
body .ceb-responsive-desk{
	display:initial !important;
}
body .ceb-responsive-mobile{
	display:none  !important;
}

body .yrd-head-img, body .yrd-head-img figure {
	height: 100% !important;
}
	body .yrd-head-img img{
		width:100% !important;
		object-fit:cover;
		height: 100% !important;
	}

body .zindex-4{
	z-index:11 !important;
}
.yard-btn-services{
	width:100%;
}
.yard-btn-services a{
	box-shadow: #ff660033 0px 0.48vw 1.5vw !important;
	transition: 0.3s all;
}
.yard-btn-services a:hover{
	background: var(--wp--preset--color--oscuro) !important;
	box-shadow: #ff660093 0px 0.78vw 2.5vw !important;
	transition: 0.3s all;
}

.formulario-overlay .wpcf7{
			padding:50px 80px;
			border: 1px solid #1b43322e;;
			margin: 0 auto;
		}
		.formulario-overlay .wpcf7 :is(input, select){
			    width: 100% !important;
				height: 55px !important;
				padding: 0 10px !important;
				box-sizing: border-box !important;
				font-size: 12px !important;
				background: none !important;
				border: none !important;
				border-bottom: 1px solid var(--wp--preset--color--oscuro)  !important;
				color: var(--wp--preset--color--oscuro) !important;
		}
				.formulario-overlay .wpcf7 input::placeholder{
					color: var(--wp--preset--color--oscuro) !important;
				}
				.formulario-overlay .wpcf7 select option{
					color:var(--wp--preset--color--oscuro) !important;
				}
			.formulario-overlay .wpcf7 input.wpcf7-submit{
				background: var(--wp--preset--color--principal) !important;
				border: none !important;
				border-radius: 10px !important;
				text-transform: uppercase !important;
				font-family: var(--wp--preset--font-family--inter) !important;
				font-size: 14px !important;
				letter-spacing: 2px !important;
				font-weight: 900 !important;
				color: var(--wp--preset--color--blanco) !important;
			}
.mk_btn_menu_animado_1 a{
		transition: all .3s;
	}
		.mk_btn_menu_animado_1 a:hover{
			color: var(--wp--preset--color--principal) !important;
			border-bottom: 1px solid #fff;
			text-decoration: none !important;
			padding-bottom:5px;
			transition: all .3s;
		}
.mk_btn_menu_animado_1  li:not(:last-child)::after{
	content: "";
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #333333;
    margin: 0 0 0 20px;
    vertical-align: middle;
}
	.mk_btn_menu_animado_1 .contact{
		color:var(--wp--preset--color--principal) !important;
	}
.mk_btn_menu_animado_2 a{
		display: flex !important;
		flex-direction: row;
		gap: 7px;
		font-weight: 300;
		transition: all .3s;
		text-decoration: none !important;
	}
		.mk_btn_menu_animado_2 a:before {
			font-family: dashicons;
			content: "\f345";
			color: var(--wp--preset--color--principal);
		}
		.mk_btn_menu_animado_2 a:hover{
			gap: 20px;
		}
@media(max-width:950px){
	:root{
		--wp--preset--spacing--380: 5vw;
	}
	.mk_btn_menu_animado_1  li:not(:last-child)::after{
		display:none !important;
	}
	body .ceb-responsive-desk{
		display:none  !important;
	}
	body .ceb-responsive-mobile{
		display:initial  !important;
	}
	.yard-cuadrado-1{
		border-top: var(--wp--preset--color--blanco) dashed 1px !important;
		border-right: var(--wp--preset--color--blanco) dashed 1px !important;
		border-bottom:none !important;
	}
	.yard-cuadrado-2{
		border-top: none !important;
	}
	.yard-cuadrado-3{
		border-left: var(--wp--preset--color--blanco) dashed 1px !important;
	}
	.formulario-overlay .wpcf7{
			padding:10px 20px;
			border: 1px solid #1b43322e;;
			margin: 0 auto;
		}
}