/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 07 2025 | 19:54:59 */
@media (min-width: 1000px) and (max-width: 1600px) {
  	h1 { font-size: 60px; }
  	h2 { font-size: 30px!important; }
  	p, .enlace_correo a { font-size: 20px!important; }
  	.circulos_texto p { font-size: 18px!important; }
  	.circulos_texto span { font-size: 20px!important; }
	footer h2 { font-size: 1rem!important; }
	.titulo_preguntas span { font-size: 30px!important; }
}

#contenedor_cohete {
	overflow: hidden;
}

.page-content {
	overflow-x: hidden
}
.steps-home img {
	position: relative;
	z-index: 2;
}

/* Menú header */
#menu-1-27744bb li:last-child {	
	align-content: center;
	margin-left:20px;
}

/*Último elemento del menú principal como botón*/
#menu-1-27744bb li:last-child a{
	background-color: #b71199;
    font-family: "Corsa Grotesk", Sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 5px;
    padding-top: 14px!important;
    padding-bottom: 14px!important;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
}

/*Quieres ser distribuidor*/

.cajaIcono .elementor-icon-box-icon {
	margin-top:10px;
}

#menu-1-27744bb li:last-child a:hover{
	background-color: #7BAF30;
}

#menu-1-27744bb {
  flex-wrap: nowrap;
}

#menu-1-27744bb li {
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap; 
}

/*Sección de Producto destacado*/
.circulos_translate_y {
  animation-name: subirBajar_2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes subirBajar_2 {
  0% {
    transform: translateY(10);
  }
  100% {
    transform: translateY(-10px);
  }
}

.circulos {
  animation-name: subirBajar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#circulo_1, #estrella_1 {
  animation-duration: 3s;
}

#circulo_2, #estrella_2 {
  animation-duration: 3.3s;
}

#circulo_3, #estrella_3 {
  animation-duration: 3.6s;
}

#circulo_4, #estrella_4 {
  animation-duration: 4s;
}

#circulo_5 {
  animation-duration: 3.5s;
}

#circulo_6 {
  animation-duration: 4.2s;
}

#circulo_7 {
  animation-duration: 3.2s;
}

@keyframes subirBajar {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}


/*Home: Sección de Elige tu aventura*/
.circulo_punteado_der {
	animation: girar_der 2.5s linear infinite;
}

.circulo_punteado_izq {
	animation: girar_izq 2.5s linear infinite;
}



/* COHETE 1: derecha -> izquierda */
#cohete_1 {
  animation: orbitar_1 30s linear infinite;
}

@keyframes orbitar_1 {
  0%   { opacity: 1; transform: translate(-200, 0) rotate(0deg); }
  45%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-1300px, -400px) rotate(0deg); }
}

/* COHETE 2: izquierda -> derecha */
#cohete_2 {
  opacity: 1;                                  /* que no se vea durante el delay */
  transform: translate(-1500px, -400px) rotate(0deg); /* posición coherente antes de animar */
  animation: orbitar_2 30s linear infinite;
}

@keyframes orbitar_2 {
  0%   { opacity: 0; transform: translate(-1400px, -400px) rotate(170deg); }
  5%   { opacity: 1; }
  45%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 1; transform: translate(1400px, 0px) rotate(170deg); }
}

explicame este codigo css, que hace?



@keyframes girar_der {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes girar_izq {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*Seccion azul Quines somos*/
#figura_cuadrada {
  animation: girar 10s linear infinite;
}

#figura_naranja {
  animation: girar_izq 10s linear infinite;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#figura_estrella_naranja {
  animation: subirBajar_estrella 10s ease-in-out infinite;
}

#figura_estrella_blanca {
	animation: subirBajar_estrella 5s ease-in-out infinite;
}

#figura_estrella_verde {
	animation: subirBajar_estrella 8s ease-in-out infinite;
}

#figura_estrella_azul {
	animation: subirBajar_estrella 3s ease-in-out infinite;
}

#figura_estrella_azul_o
{
	animation: subirBajar_estrella 12s ease-in-out infinite;
}

@keyframes subirBajar_estrella {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

@keyframes subirBajar_regular {
  0%, 100% { transform: translateY(5px); }
  50%      { transform: translateY(-20px); }
}

#figura_triangular_amarilla {
  animation: profundidad 12s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes profundidad {
  0%, 100% { transform: translateX(0px); }
  50%      { transform: translateX(40px); }
}


/*Figuras flotantes*/
#figura_flotante_1 {
	animation: subirBajar_figura 5s ease-in-out infinite;
}

#figura_flotante_2 {
	animation: subirBajar_figura 8s ease-in-out infinite;
}

#figura_flotante_2_inversa img{
    animation: subirBajar_figura 8s ease-in-out infinite;
    transform: scaleX(-1);
}

#figura_flotante_3 {
	animation: subirBajar_figura 3s ease-in-out infinite;
}

@keyframes subirBajar_figura {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

/*Compromiso de calidad*/
.div_scroll_horizontal .e-con-inner {
	overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/*Home: ección de Figuras blancas*/
.home .div_scroll_horizontal {
	overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}


/*.circulos_texto {
	animation-duration: 4.2s;
}

.circulos_texto:hover {
  animation-name: subirBajar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}*/






@media (max-width: 1700px) {
	/*Donde Comprar*/
	.page-id-727 .div_scroll_horizontal {
		overflow-x: auto;
		overflow-y: hidden;
		padding: 8px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		 width: 100%;
	}
}

@media (min-width: 800px) and (max-width: 1279px) {
	 #menu-1-27744bb li:last-child a{
		/*background-color: #FFF;*/
		font-family: "Corsa Grotesk", Sans-serif;
		font-size: 16px;
		font-weight: bold;
		text-transform: none;
		border-radius: 50px 50px 50px 50px;
		padding-top: 14px!important;
		padding-bottom: 14px!important;
		padding-left: 12px;
		padding-right: 12px;
		/*color: #052C83;*/
	}

	#menu-1-27744bb li:last-child a:hover{
		background-color: #FFF;
	}
}

.flotar_suave {
	animation: subirBajar_regular 4s ease-in-out infinite;
}