/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 03 2026 | 19:50:05 */
.hOculto{
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
.elementor-widget-jet-slider .jet-slider .slider-pro .jet-slider__item {
	background-color: transparent!important;
}
#BurbujasArea {
	position: relative;
	overflow: hidden;
	display: block !important;
	/* o: position: relative !important; */
}
#BurbujasArea > div {
	position: absolute !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	box-sizing: border-box !important;
	/*padding: 12px !important;
	cursor: pointer;*/
}
#BurbujasArea > div h6 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-align: center !important;
	color: inherit;
}
@media screen and (max-width: 768px) {
	#BurbujasArea > div h6 {
		font-size: 16px !important;
	}
}
/*#BurbujasArea h6 {
margin: 0 !important;
padding: 0 !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
text-align: center !important;
}*/
/* Contenedor principal — se pineará mientras pasan las tarjetas */
#Tarjetero {
	position: relative;
	/*width: 100%;*/
	height: 100vh;
	overflow: hidden;
}
/* Wrapper interno de Elementor — debe ocupar todo el espacio */
#Tarjetero > .e-con-inner {
	/*position: absolute;*/
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
/* Cada tarjeta */
#tarjeta00,
#tarjeta01, #tarjeta02, #tarjeta03,
#tarjeta04, #tarjeta05, #tarjeta06, #tarjeta07, #tarjeta08 {
	position: absolute !important;
	max-width:800px;
	width: 66%;
	/*	height: 18rem;*/
	height: 65vh;
	top: 50%;
	left: 33%;
	transform: translate(-50%, -50%);
	border-radius: 0.8rem;
	flex-shrink: 0;
}
@media screen and (max-width: 768px) {
	/* Styles placed here only apply to screens 768px wide or smaller */
	#tarjeta00,
	#tarjeta01, #tarjeta02, #tarjeta03,
	#tarjeta04, #tarjeta05, #tarjeta06, #tarjeta07, #tarjeta08 {
		position: absolute !important;
		/*max-width:800px;*/
		width: 90%;
		/*	height: 18rem;
		height:85vh;*/
		top: 50%;
		left: 15px;
	}
}
#HeroContenedor{
	position: relative;
}
#HeroContenedor > .e-con-inner{
	position: relative;
}
#HeroContenedor img{
	width:100%;
	height:auto;
}
#Hero01,
#Hero02,
#Hero03,
#Hero04,
#Hero05,
#Hero06{
	position: absolute;
	/* top: 0;*/
	left: 0;
	width: 100%;
	opacity: 0;
}
#ComprenderAni{
	position:relative;
}
#ComprenderAni > .e-con-inner{
	position:relative;
}
#compre01,
#compre02,
#compre03,
#compre04{
	position:absolute;
	/*top:0;*/
	left:0;
	width:100%;
}
/* Propuesta Raúl */
.pin {
	transition: none!important;
}
.headerAparece {
	opacity: 0;
}

.textWrap .elementor-button-link {
    max-width: 100%;
    width: auto;
    white-space: nowrap;
}
.textWrap span.elementor-button-text {
    text-overflow: ellipsis;
    overflow: hidden;
}

.barco {
	animation: barco 1s infinite alternate ease-in-out;
}
@keyframes barco {
	to {
		bottom: -10%;
	}
}
.btn-aparece {
	opacity: 0;
	pointer-events: none;
}
.btn-aparece a {
	pointer-events: all;
}

.multiply {
    mix-blend-mode: multiply;
}
.noneEvents {
    pointer-events: none!important;
}
.bottomCero {
    bottom: -100px!important;
}

.el {
	animation: el 0.4s ease-in-out alternate infinite;
}
@keyframes el {
	0% {
		top: 10px;
	}
	100% {
		top: -10px;
	}
}
.ella {
	animation: el 0.3s ease-in-out alternate-reverse infinite;
}
@keyframes ella {
	0% {
		top: 10px;
	}
	100% {
		top: -10px;
	}
}
.vuela {
	animation: vuela 0.3s ease-in alternate-reverse infinite;
}
    @keyframes vuela {
    	to {
    		top: -35px;
    	}
    }
@media screen and (width < 767px) {
    @keyframes vuela {
    	to {
    		top: 265px;
    	}
    }
}
.libroLista {
	position: relative;
	display: flex;
	align-items: center;
}
.libroLista::before {
	content: '';
	width: 50px;
	height: 30px;
	display: block;
	background:url("https://comprenderlo.fondoalternativa.org/wp-content/uploads/2026/07/libro-abierto.webp") no-repeat right center / contain;
}
.detalle::before {
    content:'';
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 10%;
    left: 10px;
    background:  url(https://comprenderlo.fondoalternativa.org/wp-content/uploads/2026/07/libro-entreabierto.webp) left bottom / contain no-repeat;
}
@media screen and (width < 1024px) {
    .detalle::before {
    content:'';
    width: 40px;
    height: 25px;
}
}
/*--- texto de privacidad en formulario*/
div.btnSumateForm {
    display: flex!important;
    flex-wrap: nowrap; 
    gap: 20px;
    max-width: 460px;
}
div.btnSumateForm div {
    width: min-content;
}
div.btnSumateForm::before {
    content: 'Al enviar este formulario, declaro que he leído y acepto el Aviso de Privacidad.';
    font-weight: 400;
}

/*--- FormJet Campo Otro */
.campo-otro{
    display:none;
	margin-top: -25px;
}
.campo-otro textarea {
	max-width: 100%!important;
}
.mensaje-compromiso,
.mensaje-compromiso-error {
    position: absolute;
    width: 100%!important;
	max-width: 455px;
    bottom: -19%; 
	left: 0;
	z-index: 1;
}

/*---Transición de páginas---*/
@view-transition {
	navigation: auto;
}
::view-transition-group(default-template) {
	animation-duration: 1s;
	animation-timing-function: ease;
}
::view-transition-old(default-template) {
	animation-name: salida;
}
::view-transition-new(default-template) {
	animation-name: entrada;
}
body {
	view-transition-name: default-template;
}
@keyframes salida {
  from {
    opacity:1;
  }

  to {
    opacity:0;
  }
}
@keyframes entrada {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}