/*
Theme Name: Atmosphera
Theme URI: https://atmosphera.com.br
Author: Young Dog Studio
Author URI: https://youngdog.com.br
Description: One-Page para a Atmosphera.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License:
License URI:
Text Domain: atmosphera
Tags:
*/

/* FONTS */

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-Light.woff2') format('woff2'),
		 url('fonts/FoundersGrotesk-Light.woff') format('woff'),
		 url('fonts/FoundersGrotesk-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-Regular.woff2') format('woff2'),
		 url('fonts/FoundersGrotesk-Regular.woff') format('woff'),
		 url('fonts/FoundersGrotesk-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Founders Grotesk';
	src: url('fonts/FoundersGrotesk-Medium.woff2') format('woff2'),
		 url('fonts/FoundersGrotesk-Medium.woff') format('woff'),
		 url('fonts/FoundersGrotesk-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


html, button, input, select, textarea { color: #222; }

body {
	font-size: 1em;
	line-height: 1.4;
}
/* Remove text-shadow in selection highlight. These selection declarations have to be separate. Customize the background color to match your design */
::-moz-selection {
    background: #FFEA00;
    text-shadow: none;
}

::selection {
    background: #FFEA00;
    text-shadow: none;
}

/* Remove the gap between images and the bottom of their containers  */
img { vertical-align: middle; }

a {
	text-decoration:none;
	-webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
	cursor: pointer;
}

a, a:active, a:focus {
   outline: none;
}

b, strong {
	font-weight: 500;
}

.noselect {
	-webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.nodrag {
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}
.nodrag img {
	pointer-events: none;
}

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* Corrige o padding para não expandir as caixas */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Screen reader only - acessibilidade */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* 

DEFAULT STYLES


*/


:root {
	--ellipse-y-offset: 100%;
	--color-text-primary: #716D67;
	--color-bg-lumen-white: #FFF;
	--color-bg-light-sand: #EDECE1;
	--color-bg-core-green: #26321B;
	--color-accent-yellow: #FFEA00;
	--color-dark-sand: #8F8370;
	
	/* SPACINGS */
	--spacing-wrapper: 120px;
	--spacing-section-top: 120px;
	--spacing-gap-small: 40px;
	--spacing-gap-y-small: 40px;
	--spacing-gap-xsmall: 20px;
	--spacing-gap-large: 80px;
	--spacing-gap-large-vertical: 80px;

	/* TYPOGRAPHY */
	--font-size-text-sm: clamp(10px, 0.7vw, 13px);
	--line-height-text-sm: clamp(14px, 1vw, 20px);

	/* SECTION TITLES */
	--section-title-size: 94px;
	--section-title-line-height: 80px;

	/* SIDE TEXT */
	--side-text-xlarge-size: 26px;
	--side-text-xlarge-line-height: 30px;
	/* ----- */
	--side-text-large-size: 24px;
	--side-text-large-line-height: 26px;
	/* ----- */
	--side-text-small-size: 18px;
	--side-text-small-line-height: 20px;

	/* RADIUS */
	--border-radius-small: 10px;
	--border-radius-medium: 15px;
	--border-radius-large: 20px;

	/* PADDINGS */
	--box-padding-small: 20px;
	--box-padding-medium: 30px;
	--box-padding-large: 40px;
	--box-padding-xlarge: 80px;
	--box-padding-xxlarge: 120px;
}

@media (max-width: 1800px) {
	:root {
		/* SPACINGS */
		--spacing-wrapper: 80px;
		--spacing-section-top: 80px;

		--spacing-gap-large: 40px;
		--spacing-gap-large-vertical: 60px;

		/* SECTION TITLES */
		--section-title-size: 84px;
		--section-title-line-height: 70px;

	}
}


@media (max-width: 1500px) {
	:root {
		/* SPACINGS */
		--spacing-wrapper: 40px;
		--spacing-section-top: 80px;

		--spacing-gap-small: 20px;
		--spacing-gap-large: 40px;
		--spacing-gap-large-vertical: 50px;

		/* TYPOGRAPHY */
		--font-size-text-sm: clamp(10px, 0.9vw, 12px);
		--line-height-text-sm: clamp(14px, 1.1vw, 18px);

		/* SECTION TITLES */
		--section-title-size: 70px;
		--section-title-line-height: 62px;

		/* SIDE TEXT */
		--side-text-xlarge-size: 24px;
		--side-text-xlarge-line-height: 26px;
		/* ----- */
		--side-text-large-size: 22px;
		--side-text-large-line-height: 24px;
		/* ----- */
		--side-text-small-size: 17px;
		--side-text-small-line-height: 20px;
	}
}

@media (max-width: 1024px) {
	:root {
		/* SPACINGS */
		--spacing-wrapper: 30px;
		--spacing-section-top: 80px;
		--spacing-gap-large: 40px;

		--spacing-gap-large-vertical: 40px;

		/* TYPOGRAPHY */
		--font-size-text-sm: clamp(10px, 1.1vw, 12px);
		--line-height-text-sm: clamp(12px, 1.3vw, 16px);

		/* SECTION TITLES */
		--section-title-size: 54px;
		--section-title-line-height: 52px;

		/* SIDE TEXT */
		--side-text-xlarge-size: 22px;
		--side-text-xlarge-line-height: 24px;
		/* ----- */
		--side-text-large-size: 20px;
		--side-text-large-line-height: 22px;
		/* ----- */
		--side-text-small-size: 16px;
		--side-text-small-line-height: 18px;

		/* RADIUS */
		--border-radius-small: 7px;
		--border-radius-medium: 10px;
		--border-radius-large: 15px;

		/* PADDINGS */
		--box-padding-small: 15px;
	}
}

@media (max-width: 768px) {
	:root {
		/* SPACINGS */
		--spacing-wrapper: 20px;
		--spacing-section-top: 80px;
		--spacing-gap-y-small: 30px;
		--spacing-gap-large: 20px;

		/* TYPOGRAPHY */
		--font-size-text-sm: 12px;
		--line-height-text-sm: 14px;
		
		/* SECTION TITLES */
		--section-title-size: 44px;
		--section-title-line-height: 43px;

		/* SIDE TEXT */
		--side-text-xlarge-size: 20px;
		--side-text-xlarge-line-height: 22px;
		/* ----- */
		--side-text-large-size: 19px;
		--side-text-large-line-height: 23px;
		/* ----- */
		--side-text-small-size: 16px;
		--side-text-small-line-height: 20px;
			
		/* PADDINGS */
		--box-padding-large: 30px;	
	}
}

@media (max-width: 500px) {
	:root {
		
		/* SPACINGS */
		--spacing-wrapper: 20px;
		--spacing-section-top: 80px;

		--spacing-gap-large-vertical: 30px;
	}
}


html {
	overscroll-behavior: none;
	overscroll-behavior-y: none;
}

body {
	font-family: 'Founders Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 24px;
	line-height: 26px;
	color: var(--color-text-primary);
	background-color: var(--color-bg-lumen-white);
	margin: 0;
	padding: 0;
	overscroll-behavior: none;
}

body.no-scroll {
	overflow: hidden;
	height: 100dvh;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

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



@media (min-width: 1024px) {
	.hide-desk {
		display: none;
	}
}

@media (max-width: 1024px) {
	.hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) {
	
	.hide-larger {
		display: none;
	}
}

@media (max-width: 768px) {
	.hide-smaller {
		display: none;
	}
}


/*


NOTCH


*/


.notch-container {
	position: relative;
}

.notch {
	width: 100%;
	height: 40px;
	min-height: 30px;
	display: flex;
	justify-content: space-between;
}

.notch-left, .notch-right {
	width: 45%;
	background-color: var(--color-accent-yellow);
	border-radius: 15px 15px 0 0;
}

.notch-center {
	width: 15%;
	position: relative;
	overflow: visible;
}

.notch-center svg {
	position: absolute;
	width: 30px;
	height: 30px;
	bottom: 0;
}

.notch-center svg path {
	fill: var(--color-accent-yellow);
}

.notch-center svg:first-child {
	left: 0;
	transform: rotate(270deg);
}

.notch-center svg:last-child {
	right: 0;
	transform: rotate(180deg);
}


.notch-container.yellow-notch {
	background-color: var(--color-accent-yellow);
}

.notch-container.white-notch {
	background-color: var(--color-bg-lumen-white);
}

.notch-container.sand-notch {
	background-color: var(--color-bg-light-sand);
}

.notch-container.large .notch-center {
	width: 40%;
	position: relative;
	overflow: visible;
}

.notch-container.white-bg .notch-center svg path { fill: var(--color-bg-lumen-white); }
.notch-container.sand-bg .notch-center svg path { fill: var(--color-bg-light-sand); }


.notch-container.white-bg .notch-left, .notch-container.white-bg .notch-right {
	background-color: var(--color-bg-lumen-white);
} 

.notch-container.sand-bg .notch-left, .notch-container.sand-bg .notch-right {
	background-color: var(--color-bg-light-sand);
}

@media (max-width: 1024px) {
	.notch-center { width: 25%; }
}

@media (max-width: 768px) {
	.notch { height:30px; }
	.notch-center { width: 60%; }
}

/* CTA BUTTON */


.cta-button {
	position: relative;
	display: flex;
	align-items:stretch;
	color: var(--color-bg-light-sand);
	font-size: 13px;
	font-weight: 400;
	line-height: 13px;
	border-radius: 50px;
	margin-right:0;
}

.cta-button-patch {
	display: flex;
	height:100%;
}

.cta-button-patch svg {
	height: 100%; /* Faz o SVG preencher a altura do seu pai (.cta-button-patch) */
	width: auto;
}


.cta-button-text {
	padding: 6px 0 6px 22px;
	background-color: var(--color-bg-core-green);
	border-radius: 50px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	text-transform: uppercase;
	z-index: 1;
	display:flex;
	align-items:center;
	white-space: nowrap;
}

.cta-button-arrow {
	position:absolute;
	height:100%;
	width:auto;
	right:0;
	aspect-ratio: 1/1;
	padding: 6px 13px;
	z-index: 1;
	display:flex;
	align-items:center;
	justify-content:center;
}

.cta-button-arrow svg {
	width: 100%;
	height:auto;
}

.cta-button:hover .cta-button-text {
	background-color: var(--color-dark-sand);
}

.cta-button:hover .cta-button-patch svg path { fill: var(--color-dark-sand); }

@media (max-width: 1500px) {
	.cta-button-text { padding: 0 3px 0 18px; }
	.cta-button-patch svg { height:33px; }
	.cta-button-arrow { padding: 10px; }
}


.header-container {
	width: 100%;
	height: 200dvh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	z-index: 1;
}

.header-container .logo-wrapper {
	width: 100%;
	height: 100dvh;
	top: 0;
	z-index: 3;
	padding: 0 var(--spacing-wrapper);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .header-container .header .logo-wrapper .enablesticky { border:1px solid blue !important; } */

.header-container .logo-wrapper .enablesticky {
	width: 100%;
	top:0;
	position:sticky;
	padding: var(--spacing-section-top) 0;
	gap: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.header-container .logo-wrapper .enablesticky .icone-hidden {
	width: 40%;
	height: auto;
	display: none;
}

.header-container .logo-wrapper img {
	width: 100%;
	height:auto;
}

.header {
	width: 100%;
	height: 100dvh;
 	position: sticky;
	top:0;
	padding-top: 0;
	background-color: var(--color-accent-yellow);
	z-index: 0;
}

.header .video-section { 
	width: 100%;
	height: 100dvh;
	/* position: relative; */
	position: absolute;
}

.header .video-section .bg-video {
	width: 100%;
	height: 100dvh;
	object-fit: cover;
}

.header-container .header-scroll-section {
	width: 100%;
	height: 100dvh;
	z-index: 10;
	position: absolute;
	top:0;
	pointer-events: none;
}

.header-scroll-section .logo-wrapper { 
	position: sticky;
}

/* .header-scroll-section .logo-wrapper .enablesticky { position: static; } */

.header-container .header-scroll-section .overflow-section {
	width: 100%;
	height: 200dvh;
	background-color: #fff;
	clip-path: ellipse(100% 50% at 50% 100%);
	 overflow: clip;
	position: relative;
}


/* 

SECTIONS MASTER

*/
section {
	min-height: 100dvh;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-gap-large-vertical);
}

section:not(.header) {
	padding-top: var(--spacing-section-top);
	padding-bottom: var(--spacing-section-top);
}

.wrapper {
	width: 100%;
	padding-left: var(--spacing-wrapper);
	padding-right: var(--spacing-wrapper);
}


/*


SECTION TITLE & CHIPS


*/

.section-chip {
	display: inline-flex;
	align-items: center;
}

.section-chip.float {
	position:absolute;
}

.chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.14px;
	line-height: 10px;
}

.chip-number {
	padding-left:16px;
	padding-right: 16px;
	background-color: var(--color-bg-core-green);
	color: var(--color-bg-light-sand);
}

.chip-text {
	background-color: var(--color-accent-yellow);
	color: var(--color-bg-core-green);
}

.section-title-wrapper {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--spacing-gap-y-small);
}

.section-title {
	font-size: var(--section-title-size);
	line-height: var(--section-title-line-height);
	font-weight: 300;
	letter-spacing: -2.35px;
	color: var(--color-bg-core-green);
	margin: 0;
	padding:0;
	text-wrap: balance;
	margin-top: -13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

.section-title.push {
	text-indent: calc((25% - (var(--spacing-gap-small) * 3.5)) + (var(--spacing-gap-large) * 2));
}

.section-title.push-all {
	padding-left: calc((25% - (var(--spacing-gap-small) * 3.5)) + (var(--spacing-gap-large) * 2));
}


/*

SECTION CONTENT
COLUMNS

*/

.side-column-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.side-column-content.sticky {
	position:sticky;
	top: var(--spacing-gap-large);
	padding-bottom: var(--spacing-gap-large);
}

.side-text-xlarge {
	font-size: var(--side-text-xlarge-size);
	line-height: var(--side-text-xlarge-line-height);
	color: var(--color-bg-core-green);
	text-wrap: balance;
	letter-spacing: -0.6px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}


.side-text-large {
	font-size: var(--side-text-large-size);
	line-height: var(--side-text-large-line-height);
	color: var(--color-bg-core-green);
	text-wrap: balance;
	letter-spacing: -0.6px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

.side-text-small {
	font-size: var(--side-text-small-size);
	line-height: var(--side-text-small-line-height);
	color: var(--color-text-primary);
	text-wrap: balance;
	font-weight: 400;
	letter-spacing: -0.18px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

.section-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-gap-large);
}

.side-column {
	grid-column: 1 / 2;
	min-width: 0;
	gap: var(--spacing-gap-small);
	overflow-wrap: break-word;
}

.main-column {
	grid-column: 2 / 5;
	position: relative;
	min-width: 0;
	overflow-wrap: break-word;
}

/* 

QUEM SOMOS


*/
.quem-somos {
	margin-top: calc(var(--spacing-section-top) * -1);
	background-color: var(--color-bg-lumen-white);
	min-height: auto !important;
	z-index: 2;
}

.quem-somos .main-column {
	grid-column: 1 / 3;
}

.quem-somos .side-column {
	grid-column: 4 / 5;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.main-column-image {
	overflow: hidden;
	border-radius: var(--border-radius-medium);
}

.main-column-image-wrapper {
	width: 100%;
    position: relative;
	border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.quem-somos-background-image {
    width: 100%;
    height: auto;
    display: block;
}

.quem-somos-foreground-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 

COMO ATUAMOS

*/

.como-atuamos-container {
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
}

.como-atuamos {
	display: flex;
	flex-direction: column;
	/* height: 100vh; */
	height: auto;
	min-height: auto;
	max-height: 100dvh;
	background-color: var(--color-bg-light-sand);
	z-index: 3;
	position: relative;
}

.como-atuamos .wrapper { 
	height: 100%; 
	flex: 1;
	min-height: 0;
}

.como-atuamos .section-columns {
	height: 100%;
}


.como-atuamos .side-column {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	height: 100%;
	min-height: 0;
}

.como-atuamos .side-column-content {
    width: calc(50% - (var(--spacing-gap-large) / 2));
}

.como-atuamos .main-column {
    grid-column: 3 / 5;
	height: 100%;
	max-height: 100%;
	display: flex;
	/* overflow: hidden; */
	align-items: center;
	justify-content: flex-end;
	min-height: 0;
}

/* .como-atuamos .square-scroll {
	width: auto;
	height: 100%;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: var(--border-radius-medium);
    background-color: var(--color-bg-core-green);
	overflow: hidden;
	position: relative;
} */

.como-atuamos .square-scroll {
	min-width: 100%;
	width: auto;
	height: auto;
	max-height: 100%;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: var(--border-radius-medium);
    background-color: var(--color-bg-core-green);
	overflow: hidden;
	position: relative;
}



/*
    
    CARDS NO QUADRADO (COMO ATUAMOS)
    
    */
    
    
    .square-scroll-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    
    .scroll-section {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        display: flex;
        padding: var(--spacing-gap-large);
        position: absolute;
		top: 0;
		pointer-events: none;
        background: linear-gradient(180deg, rgba(38, 50, 27, 0.00) 0%, rgba(38, 50, 27, 0.50) 100%);
    }
    
    /* .scroll-section.ghost {
        height: 25%;
        background: none;
    } */
    
.scroll-section-1 {
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
}

.scroll-section-2 {
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.scroll-section-3 {
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 3;
}
    
    .scroll-card {
        width: 60%;
		aspect-ratio: 4/5;
		max-height:100%;
        background-color: #fff;
        border-radius: var(--border-radius-medium);
        display: flex;
        flex-direction: column;
        padding: 10px;
		pointer-events: auto;
    }
    
    .como-atuamos .card-thumb {
        width: 100%;
        position: relative;
        aspect-ratio: 25 / 17;
        display: grid;
        grid-template-columns: repeat(25, 1fr);
        grid-template-rows: repeat(17, 1fr);
        background-color: #f5f5f5;
        border-radius: var(--border-radius-small);
        overflow: hidden;
    }
    .como-atuamos .card-thumb .grid-cell { 
        border-radius: 100%;
        background-color: #fff;
        pointer-events: none;
        z-index: 5;
    }

    .scroll-section-1 .card-thumb { background-color: var(--color-accent-yellow); }
    .scroll-section-2 .card-thumb { background-color: var(--color-dark-sand); }
    .scroll-section-3 .card-thumb { background-color: var(--color-bg-core-green); }
    
    .como-atuamos .grid-cell {
        width: 100%;
        height: 100%;
    }
    
    .como-atuamos .card-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: contain;
        z-index: 1;
        pointer-events: none;
    }
    
    .como-atuamos .card-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 15px 15px 15px;
        flex: 1;
    }
    
   .card-title {
        font-family: 'Founders Grotesk', sans-serif;
        font-size: 38px;
		line-height: 38px; /* 100% */
		letter-spacing: -0.95px;
        color: var(--color-bg-core-green);
        margin: 0;
        font-weight: 400;
		width: 70%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-smooth: always;
		text-wrap: balance;
    }
    
    .como-atuamos .card-description {
        color: var(--color-text-primary);
        margin-top: auto; /* Empurra para baixo se sobrar espaço */
    }
    
    
    /*
    
    ECOSSISTEMA 
    
    */
    
    .ecossistema {
        background-color: var(--color-bg-lumen-white);
        padding-bottom:0 !important;
		z-index: 4;
    }
    
    .ecossistema .side-column {
        position: relative;
    }
    
    .ecossistema-content {
        width: calc(100% + var(--spacing-wrapper));
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    .ecossistema .card-wrapper {
        display: flex;
		align-items: flex-start;
        width: 100%;
        position: sticky;
        top: var(--spacing-gap-large);
        padding: 0 var(--spacing-gap-large);
        z-index: 10;
    }
    
    .bg-placeholder {
        width: 100%;
        height: 50%;
        background-color: var(--color-accent-yellow);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    
    .ecossistema .card-wrapper.left {
        padding-top: var(--spacing-gap-large);
        border-top-left-radius: var(--border-radius-medium);
        padding-bottom: calc(var(--spacing-wrapper) * 1.3);
        background-color: var(--color-accent-yellow);
    }
    
    .ecossistema .card-wrapper.right {
        padding-bottom: var(--spacing-gap-large);
        margin-top: calc(var(--spacing-wrapper) * -2.2);
        justify-content: flex-end;
    }
    
    .ecossistema .card {
        width: 59%;
        background-color: var(--color-bg-lumen-white);
        border-radius: var(--border-radius-medium);
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        position: relative;
        box-sizing: border-box;
    }
    
    .ecossistema .card-content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--box-padding-small);
        gap: var(--spacing-gap-small);
    }
    
    .ecossistema .card-header {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    

    .ecossistema .card-subtitle {
        font-family: 'Founders Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 300;
        text-wrap: balance;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--color-dark-sand);
    }
    
    .ecossistema .card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .ecossistema .card-highlight {
        color: var(--color-text-primary);
    }
    
    .ecossistema .card-text {
        font-family: 'Founders Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
        font-weight: 300;
        text-wrap: balance;
        color: var(--color-text-primary);
    }
    
    .ecossistema .card-image-wrapper {
        min-width: 40%;
        position: relative;
        background-color: #ddd;
        border-radius: var(--border-radius-small);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .ecossistema .card-image-placeholder {
        width:auto;
		min-width:100%;
        height: 100%;
        aspect-ratio: 4 / 5.2;
		overflow:hidden;
        background-color: var(--color-dark-sand);
        border-radius: var(--border-radius-small);
    }

    .ecossistema .card-image-placeholder img {
        width: 102%;
        height: 102%;
        object-fit: cover;
        border-radius: var(--border-radius-small);
    }
    
    .right .card-image-placeholder { 
        background-color: var(--color-bg-core-green);
    }



/*


PORTFOLIO


*/

.portfolio {
	background-color: var(--color-bg-light-sand);
	z-index: 5;
}

.portfolio .portfolio-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-large);
}

.portfolio .fundo-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-gap-small);
}

.portfolio .side-column.center-content {
	display: flex;
	align-items: center;
}

.portfolio .side-column-content.sticky {
	padding-bottom: 0;
}

.portfolio .side-text-small .block {
	display:block;
	margin-bottom:8px;
	font-size: 20px;
}


.portfolio h3 {
	width: 100%;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

.portfolio hr {
	width:100%;
	background-color:#D5D4CA;
	border-width:0;
	height:1px;
}

.brands-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-gap-xsmall);
	background-color: var(--color-bg-core-green);
	border-radius: var(--border-radius-medium);
	padding: var(--spacing-gap-small);
}

.brands-grid .brand-item {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-gap-xsmall);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 1.6;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
	transition: background-color 0.2s ease-out;
}

.brands-grid .brand-item:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.brands-grid .brand-item img {
	width: auto;
	max-width: 60%;
	height: auto;
	max-height: 60%;
	opacity:0.8;
	transition: opacity 0.2s ease-out;
}

.brands-grid .brand-item:hover img {
	opacity:1;
}

/*


NOSSO TIME


*/

.nosso-time {
	background-color: var(--color-bg-lumen-white);
	gap:0;
	padding-bottom:0 !important;
	height:auto;
	min-height: auto !important;
	overflow: hidden;
	z-index: 5;
}

.nosso-time .side-text-large { color: var(--color-text-primary);}

.nosso-time .people-slider .side-column {
	grid-column: 1 / 2;
	height: 100%;
	padding-top: var(--spacing-gap-large-vertical);
	padding-bottom: var(--spacing-section-top);
	gap: var(--spacing-gap-small);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/* PEOPLE SLIDER */

.people-slider {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	padding: 0 var(--spacing-wrapper);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-gap-large-vertical);
}

.people-slider .swiper {
	grid-column: 2 / 5;
	width: 100%;
	overflow: visible;
	padding-top: var(--spacing-gap-large-vertical);
	padding-bottom: var(--spacing-section-top);
}

.people-slider .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.people-slider .swiper-slide {
	width:fit-content;
	min-height:100%;
	height: 100%;
	background-color: #fff;
	flex-shrink: 0;
	padding-right: var(--spacing-gap-small);
}

.people-slider .swiper-slide:last-child {
	padding-right: 0;
}

.people-slider .slide-content {
	width: 100%;
	height: 100%;
	display: flex;
	text-decoration: none;
	color: inherit;
}

.people-slider .slide-image {
	width: auto;
	aspect-ratio: 1/1;
	height: 100%;
	border-radius: var(--border-radius-medium);
	overflow: hidden;
	background-color: #ddd;
	transition: transform 0.3s ease;
	position: relative;
}

.people-slider .slide-image-wrapper {
	width: 100%;
	aspect-ratio: 1/1;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.people-slider .slide-info {
	width: 100%;
	min-height: 50%;
	max-height: 100%;
	z-index: 4;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	right: 0;
	padding: var(--box-padding-medium);
	color: var(--color-bg-lumen-white);
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	justify-content: flex-end;
	gap: 5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	transition: transform 0.3s ease;
	background: linear-gradient(180deg, rgba(38, 50, 27, 0.00) 0%, rgba(38, 50, 27, 0.50) 100%);
}

.people-slider .swiper-slide:hover .slide-info {
	transform: translateY(0);
}

.people-slider .slide-info h4 {
	margin:0;
	padding:0;
	font-size: 31.309px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 170.213% */
	letter-spacing: -0.783px;
}

.people-slider .slide-name {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-bg-lumen-white);
}

.people-slider .slide-role {
	font-size: 16px;
	line-height:18px;
	opacity: 0.7;
}

.people-slider .slide-image img {
	width: auto;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.3s ease;
}

.people-slider .swiper-slide:hover .slide-image img {
	transform: scale(1.05);
}

/* Swiper customization */
.people-slider .swiper {
	cursor: grab;
}

.people-slider .swiper:active {
	cursor: grabbing;
}


/*

CTA

*/

.cta {
	background-color: var(--color-accent-yellow);
	min-height: auto !important;
	z-index: 6;
}

.cta .cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-gap-small);
    width: 100%;
    max-width: 100%;
}

.cta .cta-card {
    display: flex;
    flex-direction: column;
   aspect-ratio: 3/2;
    position: relative;
    transition: transform 0.3s ease;
}

/* .cta-card:hover {
    transform: translateY(-5px);
} */

.cta .cta-card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.cta .cta-card-body {
	position: relative;
    background-color: #fff;
    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    justify-content: flex-start; /* Align to top */
}


.cta .cta-card-description {
    color: var(--color-text-primary);
    margin: 0;
    width: 100%;
}

.cta .cta-card-footer {
    background-color: var(--color-bg-light-sand);
    border-bottom-left-radius: var(--border-radius-medium);
    border-bottom-right-radius: var(--border-radius-medium);
    padding: 20px 30px; /* Adjusted padding */
	gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cta .cta-footer-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cta .cta-arrow-container {
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta .cta-arrow-icon {
    width: 100%;
    height: 100%;
    display: block;
    filter: none; /* Remove any filter */
}
/* Remove old wrapper styles if any */

.cta .cta-action-text {
    color: var(--color-text-primary);
}

.cta .cta-button {
	background-color: var(--color-bg-light-sand);
}

.cta .cta-button-text {
	background-color: var(--color-dark-sand);
}

.cta .cta-button-patch svg path {
	fill: var(--color-dark-sand);
}


.cta .cta-button:hover .cta-button-text {
	background-color: var(--color-bg-core-green);
}

.cta .cta-button:hover .cta-button-patch svg path {
	fill: var(--color-bg-core-green);
}


/*

FOOTER

*/
.footer {
	background-color: var(--color-bg-core-green);
	color: #FFF;
	padding: 80px 0;
}

/* CONTACT MODAL */
.contact-holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(38, 50, 27, 0.1);
    backdrop-filter: blur(10px);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-section-top) var(--spacing-wrapper);
    overflow: hidden;
}

.contact-holder.reveal {
    pointer-events: auto;
    opacity: 1;
}

.contact-modal-content {
	height:100%;
	width:auto;
	display: flex;
	align-items: center;
	justify-content: center;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-holder.reveal .contact-modal-content {
    transform: translateY(0);
}


@media (max-width: 1024px) {
    .contact-modal-content {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .contact-modal-content {
        width: 95%;
    }
}

/* 

DESIGN DEBUG

*/
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 100dvh;
    z-index: 9999;
    pointer-events: none;
	display: none;
}

.grid-overlay .wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-gap-large);
}

.grid-overlay .column {
    background-color: red;
    height: 100%;
    opacity: 0.1;
}

.grid-overlay .breakpoint-indicator {
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 8px 16px;
	background-color: var(--color-bg-core-green);
	color: var(--color-accent-yellow);
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	font-family: monospace;
}

.grid-overlay .breakpoint-indicator::before {
	content: '> 1800px';
}

@media (max-width: 1800px) {
	.grid-overlay .breakpoint-indicator::before {
		content: '1800px';
	}
}

@media (max-width: 1500px) {
	.grid-overlay .breakpoint-indicator::before {
		content: '1500px';
	}

	.grid-overlay .wrapper { grid-template-columns: repeat(3, 1fr); }
	.grid-overlay .column:nth-child(3) { display: none; }
}

@media (max-width: 1024px) {
	.grid-overlay .breakpoint-indicator::before {
		content: '1024px';
	}

	.grid-overlay .wrapper { grid-template-columns: repeat(2, 1fr); }
	.grid-overlay .column:nth-child(2) { display: none; }
}

@media (max-width: 768px) {
	.grid-overlay .breakpoint-indicator::before {
		content: '768px';
	}
}

@media (max-width: 500px) {
	.grid-overlay .breakpoint-indicator::before {
		content: '500px';
	}
}



/* 



RESPONSIVO


*/


/* @media (min-width: 768px) {
	.hide-desk {
		display: none;
	}
}

@media (max-width: 768px) {
	.hide-mobile {
		display: none;
	}
} */



@media (max-width: 1800px) { 

	.header-container .header-scroll-section .overflow-section { clip-path: ellipse(110% 50% at 50% 100%); }

	.section-title.push { text-indent: calc((25% - (var(--spacing-gap-small) * 1.8)) + (var(--spacing-gap-large) * 2)); }
	.section-title.push-all { padding-left: calc((25% - (var(--spacing-gap-small) * 1.85)) + (var(--spacing-gap-large) * 2)); }
	.card-title { font-size: 34px; line-height: 34px; }
	.chip { font-size: 13px; padding-top:11px; padding-bottom:11px; }

	/* COMO ATUAMOS */
	.scroll-card { width: 65%; }

	/* ECOSSISTEMA */
	.ecossistema .card { width:61%; }

}

@media (max-width: 1500px) {

	.header-container .header-scroll-section .overflow-section { clip-path: ellipse(120% 50% at 50% 100%); }
	
	.section-title.push { text-indent: calc((33.33% + var(--spacing-gap-large)) - (var(--spacing-gap-small) * 1.5)); }
	.section-title.push-all { padding-left: calc((33.33% + var(--spacing-gap-large)) - (var(--spacing-gap-small) * 1.5)); }

	.section-columns { grid-template-columns: repeat(3, 1fr); }
	.side-column { grid-column: 1 / 2; }
	.main-column { grid-column: 2 / 4; }

	.card-title { font-size: 32px; line-height: 32px; }

	.chip { font-size: 12px; padding-top:10px; padding-bottom:10px; padding-left: 14px; padding-right: 14px; }
	.chip-number { padding-left:12px; padding-right:12px; }

	/* QUEM SOMOS */
	.quem-somos .side-column { grid-column: 3 / 4; }
	.quem-somos .main-column { grid-column: 1 / 3; }

	/* COMO ATUAMOS */
	.como-atuamos .side-column { grid-column: 1 / 2; }
	.como-atuamos .main-column { grid-column: 2 / 4; }
	.como-atuamos .side-column-content { width: 100%; }
	.scroll-card { width: 56%; }

	/* ECOSSISTEMA */
	.ecossistema .card { width:100%; }
	/* .ecossistema-content { gap:var(--spacing-gap-small); } */
	.ecossistema .card-wrapper.left { padding-bottom:var(--spacing-gap-small); }
	.ecossistema .card-wrapper.right { margin-top:0; position:sticky; top:var(--spacing-gap-large); padding-bottom:var(--spacing-gap-small);  }
	.ecossistema .ecossistema-content { padding-bottom:var(--spacing-gap-small); }
	.ecossistema .card-image-wrapper { min-width: 35%; }
	
	/* PEOPLE */
	.nosso-time .people-slider { grid-template-columns: repeat(3, 1fr); }
	.nosso-time .people-slider .side-column { grid-column: 1 / 2; }
	.nosso-time .people-slider .swiper { grid-column: 2 / 4; }

	/* CTA */
	.cta .section-columns { grid-template-columns: repeat(2, 1fr); }
	.cta .section-columns .main-column { grid-column: 1 / 3; }

	/* PORTFOLIO */
	.brands-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 1024px) {

	.header-container .header-scroll-section .overflow-section { clip-path: ellipse(170% 50% at 50% 100%); }
	
	.section-columns { grid-template-columns: repeat(2, 1fr); }
	
	.side-column { grid-column: 1 / 3; }
	.side-column-content.sticky { position: static; padding-bottom:0; }

	.main-column { grid-column: 1 / 3; }

	.card-title { font-size: 30px; line-height: 30px; }

	/* QUEM SOMOS */
	.quem-somos .side-column { grid-column: 1 / 3; }
	.quem-somos .main-column { grid-column: 1 / 3; }

	/* COMO ATUAMOS */
	.como-atuamos { max-height: none; padding-bottom:0 !important; }
	.como-atuamos .side-column { grid-column: 1 / 3; }
	.como-atuamos .main-column { grid-column: 1 / 3; width: calc(100% + var(--spacing-wrapper)); }
	.como-atuamos .side-column { justify-content: flex-start; }
	.como-atuamos .square-scroll { width: 100%; height:auto; min-height:none; border-top-right-radius:0; border-bottom-right-radius:0; border-bottom-left-radius:0; aspect-ratio: auto; max-height:none; }
	.como-atuamos .side-column-content { gap: 10px; }

	.scroll-section { 
		width: 60%;
		height:auto; 
		background:none; 
		position:static;
		flex-shrink: 0;
		padding:0;
		display: flex; /* 1. Transforma o wrapper do card em um flex container. */
	}

	.scroll-section-1, .scroll-section-2, .scroll-section-3 {
		align-items: initial;
		justify-content: initial;
	}

	.square-scroll-inner { 
		height:auto; 
		flex-direction: row; 
		gap:25px; 
		padding: var(--box-padding-large);
		overflow-x: auto;
		scrollbar-width: none; /* Firefox */
	}

	.square-scroll-inner::-webkit-scrollbar {
		display: none; /* Safari and Chrome */
	}

	.scroll-card {
		width: 100%;
		/* aspect-ratio: 4/4.5; */ /* 2. Removido pois conflita com a equalização de altura. */
		flex-grow: 1; /* 3. Faz o card crescer para preencher a altura do .scroll-section. */
	}

	/* ECOSSISTEMA */
	.ecossistema { gap:20px; }

	/* SECTION TITLES */
	.section-title-wrapper { gap: 25px; }
	.section-chip.float { position:static; }
	.section-title.push { text-indent: 0; }
	.section-title.push-all { padding-left: 0; }

	/* PORTFOLIO */
	.brands-grid { grid-template-columns: repeat(3, 1fr); }
	.portfolio .side-column-content { gap: 10px;}
	.fundo-group .section-columns { gap: 25px; }
	.portfolio h3 br { display:none; }

	/* PEOPLE */
	.nosso-time .people-slider { grid-template-columns: repeat(2, 1fr); }
	.nosso-time .people-slider .side-column { grid-column: 1 / 3; padding-top:20px; }
	.nosso-time .people-slider .swiper { grid-column: 1 / 3; padding-top:0; }
	.people-slider .swiper-slide { width:50%; }
	.people-slider .slide-image { width:100%; }
	.nosso-time .people-slider .side-column { padding-bottom: 0; }
	.nosso-time .people-slider .side-column { gap: 10px; display:flex; flex-direction: column; justify-content: space-between; height: 100%;}


	/* CTA */
	.cta .cta-grid { grid-template-columns: 1fr; }
	.cta .cta-card { height: auto; aspect-ratio: auto; }
	.cta .cta-card-body { padding: 25px; }
	.cta .cta-card-footer { padding: 15px 25px; }

}


@media (max-width: 768px) {

	.section-columns { gap: var(--spacing-gap-large-vertical); }
	.chip { font-size: 12px; padding-top:9px; padding-bottom:9px; padding-left: 14px; padding-right: 14px; }
	.chip-number { padding-left:10px; padding-right:10px; }
	.card-title { font-size: 28px; line-height: 28px; }

	/* HEADER */
	.header-container .logo-wrapper .enablesticky .icone-hidden { display: block; }
	.header-container .header-scroll-section .overflow-section { clip-path: ellipse(200% 50% at 50% 100%); }

	/* QUEM SOMOS */
	.quem-somos .section-title { margin-bottom:7px; }
	.quem-somos { margin-top: calc(var(--spacing-section-top) * -1); }
	.quem-somos .main-column-image-wrapper {display:flex; align-items: center; justify-content: center;}
	.quem-somos .quem-somos-background-image {width:140%;}
	.quem-somos-foreground-image { width:140%; margin-left:-20%;}

	/* COMO ATUAMOS */
	.square-scroll-inner { gap:20px;}
	.scroll-section {  width: 70%; }

	/* ECOSSISTEMA */
	.ecossistema .section-columns { gap:calc(var(--spacing-gap-large-vertical)); }
	.ecossistema .card-wrapper { padding: 0 var(--box-padding-large); position: static; }
	.ecossistema .card-wrapper.left { border-radius:0; background: none; padding-top:var(--box-padding-large); }
	.bg-placeholder { display:none; }
	.ecossistema .card-content { width:100%; }
	.ecossistema .card-image-wrapper { display:none;}
	.ecossistema .ecossistema-content { border-top-left-radius: var(--border-radius-medium); background-color: var(--color-accent-yellow); }

	/* PORTFOLIO */
	.brands-grid { grid-template-columns: repeat(2, 1fr); }
	.portfolio .portfolio-content { gap: 40px; }
	.brands-grid .brand-item img { max-width: 80%; max-height: 80%; }

	/* PEOPLE */
	.people-slider .swiper-slide { width:80%; }
	.people-slider { gap:40px; }
	.como-atuamos .card-content { padding:15px 10px; }
	.people-slider .slide-info { transform:none; padding:20px; }


}

/* 480 é o original */ 
@media (max-width: 500px) {

	/* HEADER */
	.header-container .header-scroll-section .overflow-section { clip-path: ellipse(220% 50% at 50% 100%);  }
	
	/* COMO ATUAMOS */
	.scroll-section {  width: 95%; }
}