.sect{
  padding: 90px 0;
  position: relative;
}

.cambio{
  align-items: center;
	background: #fff;
	display: flex;
	height: 100vh;
	justify-content: center;
}

.textoCarrusel{
  margin-top: 20px;
}
.textoCarrusel .textoCarrusel2{
  padding-bottom: 10px;
  font-size: 12px;
  color: #666;
}
.textoCarrusel span{
  font-size: 40px;
  color: #000;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: #fff;
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 110%;
  margin-left: -20px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}


.globoBlanco{
  background-color: #fff;
  padding: 15px 15px;
  border-radius: 10px;
}


.sliderT {
  background: #eee;
  height: 250px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 110%;
  margin-left: -20px;
}
.sliderT::before, .sliderT::after {
  background: linear-gradient(to right, #eee 0%, rgba(238, 238, 238, 0) 100%);
  content: "";
  height: 300px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.sliderT::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.sliderT::before {
  left: 0;
  top: 0;
}
.sliderT .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);

}
.sliderT .slide {
  height: 100px;
  width: 250px;
  margin-right: 40px;
}

section {
	position: relative;
	display: grid;
	place-items: center;
	margin-block: 2rem;
	width: 80vw;
	/* outline: 1px dashed blue; */

	perspective: 1000px;

	h2 {
		margin-block-end: 2rem;
	}

	.box {
		position: sticky;
		top: calc(4rem + var(--i) * 1.5rem);

		display: grid;
		place-items: center;
		margin-block-start: 3rem;
		width: 80%;
		height: 300px;
		background: dodgerblue;
		border: 1px solid indigo;
		border-radius: 1rem;
		font-size: calc(0.7rem + 1vw);
		transform-style: preserve-3d;
	}
}

.clip-circle {
	clip-path: circle(0rem at center center);

	view-timeline-name: --clip-circle;
	view-timeline-axis: block;

	animation: linear clip-circle both;
	animation-timeline: --clip-circle;
	animation-duration: 1ms;
	animation-range: 5% 15%;
}
@keyframes clip-circle {
	from {
		color: dodgerblue;
	}
	to {
		clip-path: circle(125% at center center);
		background: indigo;
		color: white;
	}
}

.clip-from-center-x {
	view-timeline-name: --clip-from-center-x;
	view-timeline-axis: block;

	animation: linear clipCenter-x both;
	animation-timeline: --clip-from-center-x;
	animation-duration: 1ms;
	animation-range: 0% 10%;
}

@keyframes clipCenter-x {
	from {
		clip-path: inset(0 100%);
	}
	to {
		clip-path: inset(0% 0% 0% 0%);
	}
}

.clip-from-center-y {
	view-timeline-name: --clip-from-center-y;
	view-timeline-axis: block;

	animation: linear clipCenter-y both;
	animation-timeline: --clip-from-center-y;
	animation-duration: 1ms;
	animation-range: 0% 10%;
}

@keyframes clipCenter-y {
	from {
		opacity: 0;
		clip-path: inset(100% 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
		background: pink;
	}
}

.clip-right {
	view-timeline-name: --clip-right;
	view-timeline-axis: block;

	animation: linear clip-right both;
	animation-timeline: --clip-right;
	animation-duration: 1ms;

	animation-range: 5% 15%;
}

@keyframes clip-right {
	from {
		opacity: 0;
		clip-path: inset(0 0 0 100%);
	}
	to {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
		background: violet;
	}
}

/* slide and/or rotate */
.slide-from-left {
	view-timeline-name: --slide-from-left;
	view-timeline-axis: block;

	animation: linear slide-in-left both;
	animation-timeline: --slide-from-left;
	animation-duration: 1ms;
	animation-range: 0% 10%;
}
@keyframes slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-50%);
		filter: blur(3px);
	}
	to {
		opacity: 1;
		transform: translateX(0%);
		filter: blur(0px);
		background: green;
	}
}

.slide-from-right {
	view-timeline-name: --slide-from-right;
	view-timeline-axis: block;

	animation: linear slide-in-right both;
	animation-timeline: --slide-from-right;
	animation-duration: 1ms;
	animation-range: 0% 10%;
}
@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translateX(50%);
	}
	to {
		background: magenta;
	}
}

.rotate-x {
	transform-origin: top;

	view-timeline-name: --rotate-x;
	view-timeline-axis: block;

	animation: linear rotate-x both;
	animation-timeline: --rotate-x;
	animation-duration: 1ms;
	animation-range: 5% 20%;
}
@keyframes rotate-x {
	from {
		opacity: 0;
		transform: translateY(100%) rotateX(-60deg);
	}
	to {
		background: burlywood;
	}
}

.rotate-y {
	transform-origin: center;

	view-timeline-name: --rotate-y;
	view-timeline-axis: block;

	animation: linear rotate-y both;
	animation-timeline: --rotate-y;
	animation-duration: 1ms;
	animation-range: 3% 15%;
}
@keyframes rotate-y {
	from {
		opacity: 0;
		transform: rotateY(-20deg);
	}
	to {
		background: orchid;
	}
}

.rotate-from-left {
	view-timeline-name: --rotate-from-left;
	view-timeline-axis: block;

	animation: linear rotate-in both;
	animation-timeline: --rotate-from-left;
	animation-duration: 1ms;
	animation-range: 0% 10%;
}
@keyframes rotate-in {
	from {
		transform: translateX(-100%) rotate(-40deg);
		opacity: 0;
	}
	to {
		transform: translateX(0%) rotate(0deg);
		opacity: 1;
		background: coral;
	}
}

.spacer {
	height: 90vh;
	width: 100%;
	background: linen;
	display: grid;
	place-items: center;
}
h1,
h2,
p {
	margin-block-end: 0.2lh;
	width: 100%;
	text-align: center;
}
h2:last-of-type {
	margin-block-end: 0.6lh;
}
h1 {
	font-size: calc(2rem + 2vw);
}
h2 {
	font-size: calc(1rem + 1vw);
	font-weight: 400;
}
p {
	font-size: calc(0.7rem + 1vw);
	font-weight: 200;
	text-align: left;
	margin-block-end: 0.6lh;
}