*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root {
  --naranja: #FF534B;
  --amarillo: #F6CB26;
  --azul: #3049FF;
  --text-gris: #8C8686;
  --text-aqua: #1EB89C;
  --elsa-gray: #FBF8F5;
  --fondo-input: #EEEAE4;
  --rojo: #F85D56;
  --gray: #6F6F6F;
}

body{
	background-color: var(--naranja);
	font-family: "Inter", sans-serif;
}
main{
	margin-top: 100px;
	/*border: solid;*/
}
h2{
	font-size: 32px;
}
h3{
	font-size: 26px;
}
.button_main{
	margin: 0;
	width: 166px;
	height: 49px;
	border-radius: 100px;
	border: 2px solid #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
}
.button_main img{
	height: 16px;
	margin-left: 6px;
}

/* nav */
	nav{
		transition: top 0.3s ease;
	}
	.navbar{
		margin: 0;
		padding: 24px 0;
		background-color: var(--naranja);
	}

	.navbar-brand .logo{
		max-width: 300px;
	}

	/* toggler */
		.navbar-toggler{
			border: none;
			color: #fff;
		}
		.navbar-toggler-icon{
			color: #fff;
		}
		.custom-toggler .navbar-toggler-icon {
		  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		}

	.navbar-nav{
		padding: 20px 0 20px 20px;
		font-weight: 600;
	}
	.navbar li a{
		color: #fff;
		font-size: 1rem;
		font-style: normal;
		font-weight: 600;
		line-height: 25px; /* 156.25% */
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		text-decoration-color: transparent;
	}
	.navbar li a:hover{
		font-size: 1rem;
		font-style: normal;
		font-weight: 600;
		line-height: 25px; /* 156.25% */
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		color: var(--amarillo);
		text-decoration-color: var(--amarillo);
	}
	.navbar .nav-link.active{
		font-style: normal;
		font-weight: 600;
		line-height: 25px; /* 156.25% */
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		color: var(--amarillo);
		text-decoration-color: var(--amarillo);
	}
	
	.navbar_contacto{
		font-size: 1rem;
		margin: 0;
		width: 166px;
		height: 49px;
		border-radius: 100px;
		border: 2px solid #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		color: #fff;
		transition: all ease .3s;
	}
	.navbar_contacto img{
		height: 16px;
		margin-left: 6px;
	}
	.navbar_contacto:hover{
		background-color: rgba(256, 256, 256, .4);
	}


/* hero */
	.hero{
		padding: 16px 40px 0;
	}
	.hero_g{
		display: grid;
		grid-template-columns: 30% 70%;
		grid-column-gap: 12px;
	}
	.logo_g{
		width: 100%;
		margin-top: 100px;
		padding-top: 24px;
	}
	.hero_texto{
		color: #fff;
		/*border: solid white;*/
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.hero h1{
		font-size: 26px;
		font-weight: 500;
		line-height: 45px;
	}
	.hero p{
		font-weight: 400;
	}
	.hero_buttons{
		display: flex;
		flex-wrap: wrap;
		grid-row-gap: 1rem;
	}
	.hero_buttons a{
		transition: all ease 1s;
	}
	.hero_buttons a:hover{
		background-color: rgba(256, 256, 256, .4);
	}
	.hero_buttons .button_main{
		min-width: 142px;
	}

	/* Form */
		.hero_form{
			border-radius: 10px;
			background: #FFF;
			width: 100%;
			margin: 3rem auto -2rem;
			padding: 25px;
			z-index: 50;
			position: relative;
			border: 2px solid transparent;
			border-radius: 16px;
		}
		
		/* SHAKE */
		@keyframes shake {
		  0%, 100% { transform: translateX(0); }
		  20%, 60% { transform: translateX(-6px); }
		  40%, 80% { transform: translateX(6px); }
		}

		/* GLOW */
		@keyframes glow {
		  0%   { box-shadow: 0 0 0px #ffc107; }
		  50%  { box-shadow: 0 0 30px 10px #ffc107; }
		  100% { box-shadow: 0 0 0px #ffc107; }
		}

		/* Combined class */
		.highlight-form {
		  animation: shake 0.6s ease, glow 1.5s ease;
		  /*border: 2px solid #ffc107;*/
		  border-radius: 16px;
		}

		.hero_form p{
			font-size: 20px;
			color: var(--naranja);
			font-weight: 500;
		}
		.hero_form label{
			color: var(--azul);
			/*font-family: "Space Grotesk";*/
			font-size: 15px;
			font-style: normal;
			font-weight: 500;
		}
		.hero_form input{
			border-radius: 7px;
			border: 2px solid #EEEAE4;
			background: rgba(245, 245, 246, 0.47)
		}

		button.form_submit{
			display: block;
			background-color: var(--naranja);
			color: #fff;
			border: none;
			margin-top: 2rem;
			margin-left: auto;
			border-radius: 100px;
			border: 2px solid var(--naranja, #FF534B);
			width: 120px;
			height: 32px;
			flex-shrink: 0;
		}
		p#formMessage{
			color: var(--naranja);
			font-family: "Inter", sans-serif;
			font-size: 16px;
			margin-top: 1rem;
		}

		/* Chips */
			.form-chips {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 1rem;
				border-radius: 100px;
				justify-content: center;
				font-family: "Space Grotesk", sans-serif;
				font-weight: 500;
			}
			.form-chips label:hover{
				transition: all .5s ease;
				background: rgba(245, 245, 246, 0.47)
			}

			/* Hide actual checkbox */
			.form-chips input[type="checkbox"] {
			  display: none;
			}

			/* Style the label as a chip */
			.form-chips label {
			  padding: 8px 24px;
			  border: 2px solid #EEEAE4;
			  border-radius: 50px;
			  background-color: transparent;
			  font-weight: 500;
			  font-size: 14px;
			  cursor: pointer;
			  transition: all 0.3s ease;
			}

			.form-chips label.label_data_journalism{
				color: var(--text-aqua);
			}
			.form-chips label.label_reporting{
				color: var(--rojo);
			}
			.form-chips label.label_infographics{
				color: var(--azul);
			}
			.form-chips label.label_dashboard{
				color: var(--amarillo);
			}
			.form-chips label.label_no_estoy_segurx{
				color: var(--naranja);
			}

			/* When checkbox is checked, style the chip */
			.form-chips input[type="checkbox"]:checked + label {
			  	border: 2px solid var(--naranja);
			}

/* Como le hacemos */
	.hero_como_hacemos {
	  background-color: var(--elsa-gray);
	  padding: 5rem 1rem 2rem;
	  text-align: center;
	}

	.hero_como_hacemos h3 {
	  color: var(--azul);
	  margin-bottom: 2rem;
	}

	.como_hacemos_grid {
	  display: grid;
	  grid-template-columns: 1fr auto 1fr auto 1fr;
	  align-items: center; /* Alinea las flechas al centro vertical */
	  gap: 1rem;
	  justify-content: center;
	}

	.como_item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	  /*border: solid;*/
	}

	.como_icono_datos{
		width: 100%;
		max-width: 200px;
	}
	.como_icono_audiencia{
		width: 95%;
		max-width: 200px;
	}
	.como_icono_objetivo{
		width: 70%;
		max-width: 220px;
	}

	.como_item p {
	  font-weight: 500;
	  color: var(--azul);
	  font-size: 18px;
	  margin-top: 0.5rem;
	}

	.arrow_wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100%;
	}

	.arrow {
	  width: 24px;
	  height: auto;
	}
	.como_hacemos_texto{
		display: grid;
		grid-template-columns: 1fr 22px 1fr 22px 1fr;
		align-items: center; /* Alinea las flechas al centro vertical */
		gap: 1rem;
		justify-content: center;
		margin-top: 1rem;
	}
	.como_hacemos_texto p, .como_hacemos_texto span{
		/*border: solid;*/
		color: var(--azul);
		font-size: 20px;
		font-weight: 500;
	}


/* Portafolio */
	.portafolio{
		background-color: var(--elsa-gray);
		padding-bottom: 40px;
		padding-top: 2rem;
	}
	.portafolio h2{
		color: var(--text-gris);
		padding-left: 0rem;
		font-size: 37px;
		font-family: "Space Grotesk", sans-serif;
	}
	.portafolio_beh{
		display: flex;
		justify-content: space-between;
	}
	.portafolio_beh a{
		font-size: 1rem;
		margin: 0;
		width: 166px;
		height: 49px;
		border-radius: 100px;
		border: 2px solid var(--text-gris);
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		color: var(--text-gris);
		transition: all ease .3s;
	}
	.portafolio_beh a img{
		height: 16px;
		margin-left: 6px;
	}
	.portafolio_beh a:hover{
		background-color: rgba(140, 134, 134, 0.1);
	}
	.gallery{
		margin: 40px 0;
	}
	/* Cards */
		/* Carousel */
			.gallery-cell {
			  width: 66%;
			  margin-right: 10px;
			  height: auto;
			}
			.flickity-page-dots{
				bottom: -50px;
			}
		.gallery-cell{
			border-radius: 40px;
			border: 8px solid #EEEAE4;
			background: #FFF;
			padding: 20px;
		}
		.carousel_div_flex{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			font-size: 15px;
			margin-top: 1rem;
			margin-bottom: 1.5rem;
			column-gap: 1.5rem;
			grid-row-gap: 1.5rem;
		}
		.portafolio_chip{
			width: 149px;
			height: 32px;
			border-radius: 100px;
			text-align: center;
			padding: 2px 0;
			font-family: "Space Grotesk", sans-serif;
		}
		.portafolio_ver_mas{
			text-decoration: none;
			display: flex;
			align-items: center;
		}
		.portafolio_ver_mas img{
			width:17px;
			margin-left: 3px;
			position: relative;
			top: -1px;
		}
		.carousel_div_img{
			position: relative;
			width: 100%;
		}
		.carousel_img{
			width: 100%;
			margin: 1rem 0;
		}
		.carousel_badge{
			position: absolute;
			right: -20px;
			top: -20px;
			width: 100px;
		}
		.carousel_badge {
		  display: block;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		}

		.carousel_badge.animate-on-view {
		  animation: rotateOnce 3s ease-out;
		  opacity: 1;
		}
		/* estilos */
			.carousel_item_info{
				color: var(--azul);
			}
			.carousel_item_info .portafolio_chip{
				border: 2px solid var(--azul);
			}
			.carousel_item_info .portafolio_ver_mas{
				color: var(--azul);
			}

			.carousel_item_reporting{
				color: var(--naranja);
			}
			.carousel_item_reporting .portafolio_chip{
				border: 2px solid var(--naranja);
			}
			.carousel_item_reporting .portafolio_ver_mas{
				color: var(--naranja);
			}

			.carousel_item_journalism{
				color: var(--text-aqua);
			}
			.carousel_item_journalism .portafolio_chip{
				border: 2px solid var(--text-aqua);
			}
			.carousel_item_journalism .portafolio_ver_mas{
				color: var(--text-aqua);
			}
			
	/* Badge */
		@keyframes rotateOnce {
		  0% {
		    transform: rotate(0deg);
		  }
		  100% {
		    transform: rotate(360deg);
		  }
		}

/* Clientes */
	.clientes{
		background-color: var(--elsa-gray);
		padding: 3rem 0 4rem;
	}
	.clientes h2{
		text-align: center;
		color: var(--text-gris);
		font-size: 37px;
		font-family: "Space Grotesk", sans-serif;
		margin-bottom: 2.5rem;
	}

	/* nuevo carousel */
		  .carousel {
		    overflow: hidden;
		    width: 100%;
		    padding: 20px 0;
		  }
		  .carousel-track {
		    display: flex;
		    flex-wrap: nowrap;
		    height: 70px;
		    column-gap: .5rem;
		    display: flex;
			width: calc(9 * 200px * 2); /* 9 logos * 200px width each * 2 (duplicated) */
			animation: scroll-left 30s linear infinite;
			align-items: center;
		  }
		  .clientes_logo {
		    height: 80px;
		    margin: 0 30px;
		    user-select: none;
		  }
		  .logo_sm {
		    height: 50px;
		  }
		  @keyframes scroll-left {
		    0% {
		      transform: translateX(0);
		    }
		    100% {
		      transform: translateX(-50%);
		    }
		  }


/* Soluciones */
	.soluciones{
		background-color: var(--elsa-gray);
		padding-bottom: 6rem;
	}
	.soluciones h2{
		color: var(--text-gris);
		padding-left: 2rem;
		font-size: 37px;
		font-family: "Space Grotesk", sans-serif;
	}
	.soluciones h3{
		padding: 1rem 2rem 1rem;
	}
	/* accordion */
		/* Remove Bootstrap's default arrow icon */
		.accordion-button::after {
		  display: none;
		}

		/* Layout for number + title */
		.accordion-button {
		  display: flex;
		  justify-content: space-between;
		  gap: 1rem;
		  font-size: 22px;
		  font-weight: 600;
		  background-color: transparent;
		}
		.accordion-item{
			background-color: transparent;
		}
		/* Number styling */
		.accordion-number {
		  font-weight: bold;
		  min-width: 2rem;
		  text-align: right;
		}

		/* Title styling */
		.accordion-title {
		  flex: 1;
		}

		.accordion_1{
			color: var(--naranja);
		}
		.accordion_2{
			color: var(--text-aqua);
		}
		.accordion_3{
			color: var(--azul);
		}
		.accordion_4{
			color: var(--amarillo);
		}
		.accordion-collapse{
			display: flex;
			padding: 0 2rem 1rem;
			align-items: center;
			color: var(--gray);

		}
		.accordion-collapse p{
			line-height: 32px;
			font-weight: 400;
		}
		.accordion-badge{
			width: 120px;
		}

		.item1 .accordion-header{
			border-top: solid var(--naranja);
		}
		.item2 .accordion-header{
			border-top: solid var(--text-aqua);
		}
		.item3 .accordion-header{
			border-top: solid var(--azul);
		}
		.item4 .accordion-header{
			border-top: solid var(--amarillo);
		}
		.accordion-item.item1.active-bg {
		  background-color: rgba(255, 165, 0, 0.10);
		}
		.accordion-item.item2.active-bg {
		  background-color: rgba(0, 255, 255, 0.10);
		}
		.accordion-item.item3.active-bg {
		  background-color: rgba(0, 0, 255, 0.10);
		}
		.accordion-item.item4.active-bg {
		  background-color: rgba(255, 255, 0, 0.10);
		}
		.accordion-button:not(.collapsed) {
			background: none;
			border: none;
			box-shadow: none;
		}
		.accordion-button:focus{
			box-shadow: none;
		}

/* Footer */
	footer{
		background-color: var(--azul);
		text-transform: uppercase;
		padding: 2rem;
		color: var(--elsa-gray);
		font-family: "Space Grotesk", sans-serif;
	}
	.footer_logo{
		display: block;
		margin: auto;
		width: 220px;
	}
	footer a, footer p{
		color: #fff;
		line-height: 55px;
		font-size: 20px;
		text-decoration: none;
	}
	footer a{
		font-weight: 400;
	}
	footer a:hover{
		font-weight: 400;
		color: var(--amarillo);
	}
	.footer_1{
		padding: 2rem 0;
		display: flex;
		flex-direction: column;
	}
	.hablamos{
		display: flex;
		align-items: center;
		color: var(--amarillo);
		font-weight: 700;
	}
	.hablamos img{
		width: 50px;
		margin-right: 6px;
	}
	.footer_1_a{
		margin-left: 56px;
	}
	footer p{
		font-family: "Space Grotesk", sans-serif;
		font-weight: 700;
	}
	.footer_2_linea{
		padding: 2px 0;
		padding-left: 4px;
		border-left: solid 10px var(--naranja);
		display: grid;
		grid-template-columns: 50% 50%;
		grid-row-gap: 1rem;
	}
	.footer_2_linea a{
		line-height: 1;
	}
	.footer_links{
		padding: 4rem 0 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.footer_social{
		width: 50%;
		display: flex;
		justify-content: center;
		column-gap: 3rem;
	}
	.footer_legal{
		width: 50%;
		display: flex;
		justify-content: center;
		column-gap: 3rem;
	}
	.footer_legal a{
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: none;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
	}
	.footer_datagrama{
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 2rem 0;
		color: #fff;
		line-height: 55px;
		font-size: 20px;
		text-decoration: none;
		column-gap: 2rem;
	}