/* ELEMENTS */
h1 {display: none}

/* HERO */
.hero {position: relative; background: #eee; overflow: hidden; width: 100%; min-height: 260px; aspect-ratio: 43/35}
.hero::before,
.hero::after {content: ''; position: absolute; z-index: 1}
.hero::before {bottom: 0; left: -1%; background: url(../images/illustration/petals-2.svg) no-repeat right 0 / 190% auto; max-width: 263px; max-height: 301px; width: 14%; height: 22%}
.hero::after {top: 0; right: 0; background: url(../images/illustration/petals-3.svg) no-repeat left bottom / auto 135%; max-width: 403px; max-height: 339px; width: 24.5%; height: 38%}
.hero .item {position: relative}
.hero .hero-slider {display: flex}
.hero .hero-slider > .item:not(.tns-slide-active) {height: 0; overflow: hidden; opacity: 0}
.hero .tns-slider > .item:not(.tns-slide-active) {height: auto; overflow: initial; opacity: 1}
.hero .figure {display: flex; justify-content: center}
.hero img {background: #eee; width: 100%; max-width: 100vw}
.hero .overlay {position: absolute; bottom: 0; width: 100%; min-height: 62%; padding: 0 0 37px; background: linear-gradient(0deg, rgba(12,12,12,.9) 0, transparent 100%); color: #FFF; display: flex; align-items: flex-end}
.hero .container {padding: 0 calc(var(--container-py) + 8px); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px}
.hero .title {font-size: 2.7rem; font-weight: 900; line-height: 1}
.hero .description {font-size: 1.8rem; font-weight: 500; line-height: 1.12}
.hero .link {font-size: 1.422rem}
.tns-visually-hidden {display: none}
.tns-controls {position: absolute; z-index: 2; top: 50%; padding: 0 20px; width: 100%; height: 0; display: flex; justify-content: space-between}
.tns-controls [aria-controls] {font-size: 0; width: 25px; height: 25px; border-radius: 50%; box-shadow: 0 5px 10px 0 rgba(0,0,0,.21); background: #FFF; transform: translateY(-50%)}
.tns-controls [aria-controls]:after {content: ''; width: 100%; height: 100%; background: url(../images/icon/arrow-down.svg) no-repeat center center / 46% auto; display: inline-block; transform: rotate(-90deg)}
.tns-controls [data-controls="prev"]:after {transform: rotate(90deg)}
.tns-nav {position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px}
.tns-nav button {border: 0; background: #FFF; border-radius: 10px; width: 10px; height: 10px; opacity: .4; transition: width .3s ease-in-out}
.tns-nav .tns-nav-active {width: 30px; opacity: 1}

/* AGÊNCIA VIRTUAL */
.virtual {background: #01AAFF; padding: 27px 0; box-shadow: inset 0 10px 18px -9px rgba(0,0,0,.25)}
.virtual .headline {color: #fff; font-weight: 600; margin-bottom: 27px}
.virtual .buttons {display: flex; flex-wrap: wrap; gap: 11px 18px}
.virtual .item {width: calc(50% - 9px); padding: 12.5px 5px 12.5px 40px; text-decoration: none; position: relative; background: #FFF; border-radius: 9px; display: flex; align-items: center}
.virtual .item::before {content: ''; background: url(../images/illustration/isolation-mode.svg) no-repeat center center / cover; transform: translate(-18%, -50%); position: absolute; left: 0; top: 50%; width: 42px; height: 42px; z-index: 0}
.virtual .caption {letter-spacing: -.5px; font-size: 1.5rem; line-height: 15px; text-wrap: balance}
.virtual br {display: none}
.virtual .icon {display: none}
.virtual .link {margin-top: 25px}

/* CARDS */
.cards {display: flex; flex-direction: column; flex-wrap: wrap; gap: 25px}
.cards .item {width: 100%; display: flex; flex-direction: column}
.cards .info {padding: 15px 10px 0 10px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex: 1}
.cards .title {margin-bottom: 9px; font-size: 2rem; font-weight: 500}
.cards .title,
.cards .title > a {color: #01AAFF; display: flex; align-items: center; gap: 10px}
.cards .figure {border-radius: 10px}
.cards .figure a {border-radius: 10px; display: block}
.cards .figure img {background: #eee; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0,0,0,.17); width: 100%}
.cards .video {border-radius: 10px; overflow: hidden; box-shadow: 0 4px 4px 0 rgba(0,0,0,.17)}
.cards .video iframe {border-radius: 10px}
.cards .description {font-size: 1.9rem; font-weight: 500}
.cards .link {margin-top: 4px}
.cards .description ~ .link {margin-top: 11px}

/* ACONTECE */
.acontece {background: #FFF; padding: 39px 0 42px; box-shadow: inset 0 10px 18px -9px rgba(0,0,0,.25)}
.acontece .cards {gap: 37px}

/* SUSTENTABILIDADE */
.sustentabilidade {padding: 30px 0 0}
.sustentabilidade .title {font-size: 2.1rem; font-weight: 500}
.petals {position: relative}
.petals::before {content: ''; position: absolute; left: 100%; top: 0; transform: translate(-46%, -35.5%); width: 50%; height: 173.045%; max-width: 507px; max-height: 239px; background: url(../images/illustration/petals.svg) no-repeat 0 0 / auto 100%}
.petals > * {position: relative}

@media (min-width: 430px) {
	/* AGÊNCIA VIRTUAL */
	.virtual .caption {font-size: 1.75rem}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	/* HERO */
	.hero {min-height: 256px; aspect-ratio: 3/1}
	.hero::before {max-width: 130px; max-height: 191px; width: 7.99%; height: 39.8%; background-size: 190% auto; left: 0}
	.hero::after {max-width: 298px; max-height: 248px; width: 18.3%; height: 51.67%; background-size: auto 135%}
	.hero .title {font-size: 4.5rem}
	.hero .description {font-size: 2.2rem}
	.hero .link {font-size: 1.8rem; align-self: flex-end}
	.tns-controls [aria-controls] {width: 40px; height: 40px}

	/* CARDS */
	.cards {flex-direction: row; gap: 30px}
	.cards .item {width: calc(50% - 15px)}

	/* ACONTECE */
	.acontece .cards {justify-content: center; gap: 30px}
	.acontece .-highlight {width: 100%}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	/* HERO */
	.hero .container {padding: 0 calc(var(--container-py) * 3)}

	/* AGÊNCIA VIRTUAL */
	.virtual {padding: 46px 0}
	.virtual .container {display: grid; grid-auto-columns: 1fr; grid-template-columns: auto 1fr; column-gap: 75px; grid-template-rows: min-content max-content 1fr; grid-template-areas: "headline buttons" "link buttons"}
	.virtual .headline {height: 0; font-size: 4rem; margin: 10px 0; grid-area: headline}
	.virtual .link {margin-top: 11px; align-self: start; width: fit-content; grid-area: link}
	.virtual .buttons {pointer-events: none; display: flex; gap: 66px; justify-content: flex-start; grid-area: buttons}
	.virtual .item {--size: 132px; pointer-events: auto; width: var(--size); height: var(--size); border-radius: 50%; position: relative; padding: 20px; text-align: center; transition: transform .2s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px}
	.virtual .item::after {content: ''; background: #F2F4F8; box-shadow: 0 2.78px 2.78px 0 rgba(0,0,0,0.17); border-radius: 50%; position: absolute; width: 100%; height: 100%; z-index: 1}
	.virtual .item:before {display: none; transform: translate(-3%, -3.5%); width: 113.64%; height: 114.4%; top: initial; left: initial}
	.virtual .item > * {position: relative; z-index: 2}
	.virtual .icon {display: inline-flex}
	.virtual img {filter: brightness(0) saturate(100%) invert(70%) sepia(21%) saturate(5974%) hue-rotate(158deg) brightness(103%) contrast(105%)}
	.virtual .caption {font-size: 1.5rem; line-height: 17px}
	.virtual br {display: block}
	.virtual .item:hover,
	.virtual .item:focus {text-decoration: none; outline: none; color: #01AAFF; font-weight: 900; transform: translateY(-10%)}
	.virtual .item:hover::before,
	.virtual .item:focus::before {display: block}
	.virtual .item:hover img,
	.virtual .item:focus img {filter: none}
	.virtual .buttons:hover > .item:not(:hover) img {filter: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(692%) hue-rotate(233deg) brightness(94%) contrast(86%)}
	.virtual .buttons:hover > .item::after {background: rgba(242,244,248,.8)}
	.virtual .buttons:hover > .item:hover:after {background: #FFF}
	.virtual .item:hover .caption,
	.virtual .item:focus .caption {font-weight: 900}

	/* CARDS */
	.cards .item {width: 33%; max-width: 356px; flex: 1}
	.cards .title {font-size: 2.2rem}

	/* ACONTECE */
	.acontece .cards {justify-content: flex-start; gap: 46px}
	.acontece .-highlight {max-width: 496px}

	/* SUSTENTABILIDADE */
	.sustentabilidade {padding: 53px 0 130px}
	.petals::before {max-height: 598px; transform: translate(-46%, -20.5%)}
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
	/* HERO */
	.hero {min-height: 467px}
	.hero .container {padding: 0 var(--container-py)}
}

@media (min-width: 1440px) {
	/* HERO */
	.hero {min-height: 474px}
}

@media (min-width: 1600px) {
	/* AGÊNCIA VIRTUAL */
	.virtual .buttons {justify-content: flex-end}
}

@media (min-width: 1903px) {
	/* HERO */
	.hero {min-height: 634px}
}