/* CATALISADORES SECTION */

.notch.cat-notch {
	background: var(--color-text-primary);
}

.catalisadores .content, .notch.cat-notch .notch-left, .notch.cat-notch .notch-right {
	background: var(--color-dark-sand);
}

.notch.cat-notch .notch-center svg path {
	fill: var(--color-dark-sand);
}

.catalisadores .grid {
	padding: var(--spacing-wrapper) var(--spacing-wrapper) var(--section-padding-y-sm) var(--spacing-wrapper);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--grid-gap-y) var(--grid-gap-x);
}

.cat1 {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-fixed);
}

.cat2 {
    grid-column: span 2 / span 2;
}

.cat6 {
    grid-column-start: 4;
}

.cat7 {
    grid-row-start: 2;
	display: flex;
    align-items: flex-end;
}

.cat8 {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

.cat9 {
    grid-column: span 3 / span 3;
    grid-row-start: 3;
}

.cat10 {
    grid-column-start: 4;
    grid-row-start: 3;
	display: flex;
    align-items: flex-end;
}

.catalisadores .h2,
.catalisadores .logo-badge span,
.catalisadores .section-subtitle,
.catalisadores p {
	color: var(--color-sand);
}

.catalisadores .logo-badge span {
	border-color: var(--color-sand);
}
.catalisadores .logo-badge span.badge-text {
	color: var(--color-dark-sand);
	background-color: var(--color-sand);
}

.catalisadores .h2.marked {
	color: var(--color-orange);
}

.cat7 p {
	font-size: var(--font-size-text-xl);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-text-xl);
    letter-spacing: var(--letter-spacing-text-xl);
	margin: 0;
}

.cat10 p {
	width: 88%;
	font-size: var(--font-size-text-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-text-md);
    letter-spacing: var(--letter-spacing-text-md);
	margin: 0;
}

.catalisadores-slider {
	width: 100%;
	padding-bottom: var(--spacing-wrapper);
    overflow: hidden;
}

/* Individual Swiper Rows */
.catalisadores-slider .swiper {
    width: 100%;
    overflow: visible;
    cursor: grab;
}

.catalisadores-slider .swiper-wrapper {
    transition-timing-function: linear;
}

.catalisadores-slider .catalisadores-row-1,
.catalisadores-slider .catalisadores-row-2,
.catalisadores-slider .catalisadores-row-3 {
    margin-bottom: clamp(12px, 1.04vw, 20px);
}

.catalisadores-slider .catalisadores-row-3 {
    margin-bottom: 0;
}

.catalisadores-slider .swiper-slide {
    width: var(--catalisador-card-width);
    height: auto;
    aspect-ratio: 527 / 209;
}

@media (min-width: 768px) { 
    .catalisadores-slider .catalisadores-row-1,
    .catalisadores-slider .catalisadores-row-2 {
        margin-bottom: clamp(20px, 1.56vw, 30px);
    }
}


/* CATALISADOR CARD */

.catalisador-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(237, 236, 225, 0.50);
    box-sizing: border-box;
    display: flex;
    padding: clamp(10px, 0.78vw, 15px);
    gap: clamp(12px, 1.04vw, 20px);
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background: transparent; /* Default background */
}

/* Hover State */
.catalisador-card:hover {
    background: var(--color-sand); /* #EDECE1 */
    border-color: var(--color-sand);
}

/* Image Wrapper */
.catalisador-image-wrapper {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.catalisador-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);
    border: 2px solid transparent;
    pointer-events: none;
    z-index: 1;
    transition: border-color 0.3s ease;
}

.catalisador-card:hover .catalisador-image-wrapper::before {
    border-color: var(--color-orange);
}

.catalisador-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    background: #d9d9d9;
}

.catalisador-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    padding-top: clamp(4px, 0.31vw, 6px);
    position: relative;
}

.catalisador-name {
    color: var(--color-sand); 
    font-family: 'Founders Grotesk', sans-serif;
    font-size: clamp(24px, 1.7vw, 34px);
    font-style: normal;
    font-weight: 400;
    line-height: 1; 
    text-align: left; 
    margin: 0 0 clamp(6px, 0.52vw, 10px) 0;
    transition: color 0.3s ease;
}

.catalisador-card:hover .catalisador-name {
    color: var(--color-text-primary); 
}

.catalisador-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
    margin-top: auto;
}

.catalisador-tag {
    display: flex;
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: var(--border-radius-sm);
    background: var(--color-orange);
    
    color: var(--color-sand); 
    font-family: 'Founders Grotesk', sans-serif;
    font-size: clamp(10px, 0.625vw, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: clamp(-0.12px, -0.006vw, 0px);
    text-transform: uppercase;
}

.catalisador-description {
    opacity: 0; 
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease; 
    font-family: 'Founders Grotesk', sans-serif;
    font-size: clamp(12px, 0.83vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.12; 
    letter-spacing: clamp(-0.16px, -0.008vw, 0px);
    overflow-y: auto;
    /* Hide scrollbar */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.catalisador-description::-webkit-scrollbar {
    display: none;
}

.catalisador-description p {
    margin: 0;
    opacity: 0.7;
    color: var(--color-text-primary);
}

.catalisador-card:hover .catalisador-description {
    opacity: 1;
    max-height: 120px; 
    margin-top: clamp(5px, 0.42vw, 8px); 
}

.catalisador-card:hover .catalisador-description {
    color: var(--color-text-primary); 
}

@media (max-width: 1240px) {
    .catalisador-card {
        padding: 10px 12px;
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    .cat10 p {
        width: 100%;
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        letter-spacing: var(--letter-spacing-text-sm);
    }
}

@media (max-width: 768px) {
    .cat1 {
		grid-row-start: 1;
		grid-column-start: 1;
		grid-column: span 4 / span 4;
	}
    .cat7 {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-column: span 4 / span 4;
    }
    .cat10 {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-column: span 4 / span 4;
    }
    .cat10 p {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        letter-spacing: var(--letter-spacing-text-md);
    }
    .catalisadores-slider {
        padding: var(--section-padding-y-md) 0 var(--section-padding-y-lg) 0;
    }
}

@media (max-width: 500px) {
    .catalisador-card .catalisador-description {
        display: none;
    }
}