/*// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap*/

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	/*body{
		border: 5px solid greenyellow;
	}*/
	/* Hero */
		.hero{
			padding: 0 40px;
			position: relative;
		}
		.hero_g{
			position: relative;
			max-width: 100%;
			display: grid;
			grid-template-columns: 30% 65%;
			grid-column-gap: 5%;
			margin-top: 150px;
			align-items: flex-end;
		}
		.logo_g{
			margin-top: 0;
			width: 100%;
			padding-top: 24px;
		}
		.hero_buttons{
			margin-top: 1rem;
			column-gap: 2rem;
		}

	/* Como */
		.como_hacemos_grid{
			margin-top: 2rem;
		}
	/* Clientes */
		.carousel-clientes {
		  margin-top: 2rem;
		  height: 80px;
		}
		.carousel-cell {
		  height: 80px;
		}

	/* Footer */
		footer {
		padding: 4rem 4rem 0rem;
		}

		footer a, footer p, footer span {
		font-size: 16px;
		}

		.footer_flex_mob {
			display: flex;
			flex-direction: column;
		}

		.footer_flex_mob > .footer_row1 {
		display: flex;
		justify-content: space-evenly;
		align-items: flex-start;
		}

		.footer_logo {
		margin: 0;
		margin-right: 2rem;
		width: 250px;
		}

		.footer_1 {
		padding: 0;
		}

		.footer_2_linea {
			width: 70%;
			grid-template-columns: repeat(2, 1fr);
			padding-left: 1rem;
		}

		.footer_social,
		.footer_legal {
		width: auto;
		column-gap: 2.5rem;
		}

		.footer_datagrama {
		width: auto;
		}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	/*body{
		border: 5px solid hotpink;
	}*/
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	/*body{
		border: 5px solid yellow;
	}*/
	/* Nav */
	  .navbar{
	  	padding-left: 59px;
	  	padding-right: 59px;
	  }

	  .nav-left,
	  .nav-center,
	  .nav-right {
	    flex: 1;
	    display: flex;
	    align-items: center;
	  }

	  .nav-center {
	    justify-content: center;
	    background-color: rgba(256, 256, 256, 0.08);
	    border-radius: 40px;
	    height: 54px;
	  }

	  .nav-right {
	    justify-content: flex-end;
	  }

	  .navbar-nav {
	    flex-direction: row;
	    gap: 1.5rem;
	    padding: 0;
	  }

	  .navbar-nav .nav-link {
	    color: white;
	    font-weight: 600;
	    text-decoration: underline transparent;
	    transition: all 0.3s ease;
	  }

	  .navbar-nav .nav-link:hover,
	  .navbar-nav .nav-link.active {
	    color: var(--amarillo);
	    text-decoration-color: var(--amarillo);
	  }

	/* Hero */
		.hero{
			padding: 16px auto;
			display: grid;
			grid-template-columns: 60% 40%;
			grid-column-gap: 1rem;
			align-items: flex-end;
		}
		.hero_g{
			display: grid;
			grid-template-columns: 35% 65%;
			grid-column-gap: 12px;
			padding: 0 2rem 2rem 0;
		}
		.hero_texto{
			color: #fff;
			/*border: solid white;*/
			padding-left: 30px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
		.hero_form{
			margin: 3rem auto -3rem;
		}

	/* Como */
		.como_hacemos_grid, .como_hacemos_texto {
			max-width: 700px;
		}
		.como_icono_datos{
			width: 100%;
			max-width: 200px;
		}
		.como_icono_audiencia{
			width: 80%;
			max-width: 200px;
		}
		.como_icono_objetivo{
			width: 60%;
			max-width: 220px;
		}

	/* Portafolio */
		.portafolio h2{
			padding-left: 2rem;
		}
		.gallery-cell {
			width: 40%; /* or 33% if you want more side visibility */
			margin-right: 20px;
		}
		


	/* Clientes */
		.carousel-clientes {
		  margin-top: 2rem;
		  height: 100px;
		}
		.carousel-cell {
		  height: 100px; /* ajusta según el tamaño de tu logo */
		}
		.clientes_logo {
		  height: 100%;
		  max-width: 180px;
		  object-fit: contain;
		  margin: 0 10px;
		}
		.logo_sm{
			max-width: 150px;
		}
		.carousel-track {
		column-gap: 3rem;
		display: flex;
		width: calc(9 * 200px * 2); /* 9 logos * 200px width each * 2 (duplicated) */
		}

	/* Soluciones */
		.soluciones h2{
			padding-left: 2rem;;
		}

	/* Footer */
		.footer_flex_mob {
			display: grid;
			grid-template-columns: 65% 35%;
			align-items: flex-end;
		}
		.footer_flex_mob > .footer_row1 {
			display: grid;
			grid-template-columns: 50% 40%;
			grid-column-gap: 10%;
			justify-content: space-evenly;
			align-items: flex-end;
		}
		.footer_logo {
			width: 100%;
			margin-right: 3rem;
			max-width: 400px;
		}
		.hablamos{
			line-height: 0;
			margin-left: 56px;
			position: relative;
			line-height: 1;
		}
		.hablamos img{
			position: absolute;
			width: 50px;
			left: -60px;
		}
		.footer_1{
			grid-row-gap: 1.5rem;
		}
		.footer_1_a{
			line-height: 1;
		}
		.footer_2_linea {
			width: 100%;
			grid-template-columns: repeat(2, 1fr);
			padding-left: 10px;
		}

		.footer_social,
		.footer_legal {
		width: auto;
		column-gap: 2.5rem;
		}

		.footer_datagrama {
		width: auto;
		}
		.footer_links{
			max-width: 600px;
			margin-left: auto;
		}
}


/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	/*body{
		border: 5px solid orange;
	}*/

	/* hero */
		.hero_g{
			/*border: solid;*/
			margin-top: 0;
		}
		.logo_g{
			max-width: 200px;
		}
		.hero_texto{
			padding-bottom: 1rem;
		}

	/* Portafolio */

		.portafolio h2{
			padding-left: 2rem;
		}
		.gallery-cell{
			border-radius: 40px;
			border: 8px solid #EEEAE4;
			background: #FFF;
			padding: 35px;
			padding-top: 4.5rem;
		}
	
	/* Soluciones */
		.soluciones h2{
			padding: 0 2rem;
			margin-bottom: 4rem;
		}
		.accordion-button{
			/*border: solid black;*/
			display: grid;
			grid-template-columns: 20% 60%;
			grid-column-gap: 20%;
			padding-left: 10%;
		}
		.accordion-number{
			/*border: solid;*/
			text-align: center;
		}
		.accordion-title{
			/*border: solid;*/
		}
		.accordion-collapse{
			display: grid;
			grid-template-columns: 20% 60%;
			grid-column-gap: 20%;
			/*border: solid;*/
			padding-top: 0;
			align-items: flex-start;
			padding-bottom: 0;
			position: relative;
		}
		.accordion-body{
			width: 100%;
			padding: 0;
			position: relative;
			/*bottom: 1rem;*/
			/*border: solid;*/
		}
		.accordion-body p{
			max-width: 600px;
		}
		.accordion-badge{
			width: 130px;
			margin-left: 20vw;
			position: relative;
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
			left: 20%;

		}
		.accordion-collapse.show .accordion-badge {
		  animation: moveAndRotate 1.2s ease-out forwards;
		}
		
		@keyframes moveAndRotate {
		  0% {
		    bottom: 0;
		    transform: rotate(0deg);
		    opacity: 0;
		  }
		  10% {
		    opacity: 1;
		  }
		  100% {
		    bottom: 40%;
		    transform: rotate(90deg);
		    opacity: 1;
		  }
		}
		
		
	/* Footer */
		.footer_logo {
			width: 100%;
			max-width: 350px;
			/*border: solid;*/
		}
		
		.footer_flex_mob > .footer_row1 {
	        display: grid;
	        width: 100%;
	        grid-template-columns: 50% 40%;
	        justify-content: space-between;
	        align-items: flex-end;
	        /*border: solid;*/
	        max-width: 1000px;
	        margin-left: auto;
		}
		.footer_1{
			/*border: solid;*/
			display: grid;
			grid-template-columns: 50% 50%;
			padding-right: 3rem;
			max-width: 350px;
		}

}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
	.gallery-cell {
		width: 35%; /* or 33% if you want more side visibility */
		margin-right: 40px;
	}
	.navbar li a{
		color: #fff;
		font-size: 1.2rem;
		letter-spacing: .5px;
	}
	.navbar li a:hover{
		font-size: 1.2rem;
		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: 1.2rem;
		width: 170px;
		height: 53px;
	}
	/* Hero */
		.hero{
			padding: 16px 0;
			display: grid;
			grid-template-columns: 55% 45%;
			grid-column-gap: 1rem;
			align-items: flex-end;
		}
		.hero_form{
			padding: 3rem 2rem;
		}
		.form_flex{
			width: 	100%;
			display: flex;
			column-gap: 1rem;
			margin-bottom: 1rem;
		}


}