/* ===== COLORES DE TEXTO ===== */

.text-yellow-dc {
	color: #f3b607;
}

.text-red-dc {
	color: #e2542a;
}


/* ===== TITULOS Y TIPOGRAFÍA ===== */

h2 {
	font-size: clamp(2rem, 3vw, 3rem)!important;
}

.main_main p {
	font-size: 1.2rem;
}


/* ===== PADDING GENERAL ===== */

.py-6 {
	padding: 6rem 0!important;
}


/* ===== HERO ===== */

#about-hero {
	position: relative;
	min-height: 80vh;
	background: url('/static/img/about/header_about.webp') center/cover no-repeat;
}

#about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
	z-index: 0;
}

#about-hero .container {
	position: relative;
	z-index: 1;
}

.about-hero-content {
	padding: 15rem 10px 6.5rem;
}

.about-hero-content h1,
.about-hero-content p {
	color: #fff;
}

.about-hero-content h1 {
	font-size: clamp(1.6rem, 4vw, 4rem);
}

.about-cta,
.about-cta-white {
	padding: 1rem 3rem;
	border: none;
	border-radius: 8px;
	font-size: 1.3rem!important;
	font-weight: bold;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.about-cta {
	background: linear-gradient(90deg, #f3b607 0%, #e2542a 100%);
	color: #fff;
}

.about-cta-white {
	background-color: #fff;
	color: #e2542a;
}

.about-cta:hover,
.about-cta-white:hover {
	opacity: 0.9;
}

.icons-claim{
    display: flex;
    justify-content: center;
    gap: 20px;
}

.about-hero-claim {
	background: #FFFAEB;
	border-top: 1px solid rgba(0, 0, 0, .05);
	padding: 5rem 0;
	box-shadow: inset 0 -8px 24px rgba(0, 0, 0, .06);
	text-align: center;
}

.about-hero-claim p {
	font-size: clamp(1.6rem, 3.2vw, 3.2rem);
	width: 70%;
	margin: auto;
	color: #000;
	line-height: 1.4;
}

.text-second-claim {
	font-size: 1.3rem!important;
	color: #8d8d8d!important;
	line-height: 1.8!important;
	width: 50%!important;
}


/* ===== EXPERIENCIAS ===== */

#section-3 .left-text {
	border-left: 6px solid #ffc107;
}

#section-3 .right-image {
	min-height: 360px;
	background: url('/static/img/about/experience_section.webp') center/cover no-repeat;
}

#section-3 p {
	color: #575757;
	line-height: 2.2;
	font-size: 1.3rem!important;
}


/* ===== WHAT WE DO ===== */

#section-4 {
	background-color: #fbfbfb;
}

.section-4-card {
	border-radius: 15px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.section-4-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
}

.card-img-top-wrapper {
	height: 290px;
}

.section-4-card .card-img-top {
	max-height: 100%;
	object-fit: cover;
}

.section-4-card .card-body {
	flex: 1 1 50%;
	padding: 2rem;
}

.section-4-card .card-title {
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 1.5rem;
}

.section-4-card p {
	font-size: 1.1rem!important;
}


/* ===== LO QUE NOS HACE ÚNICOS ===== */

.gradient-text {
	background: linear-gradient(90deg, #f3b607, #e2542a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-5 h5 {
	font-size: 1.3rem;
	margin-bottom: 10px;
}

.section-5 p {
	font-size: 1.2rem;
	color: #555;
}

.card-unique {
	background-color: #fff;
	border-radius: 20px;
	padding: 50px 20px;
	text-align: left;
}


/* ===== HISTORIA ===== */

.section-6 h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}

.section-6 p {
	font-size: 1.3rem!important;
	margin-bottom: 15px;
}

.section-6 .text-yellow-dc {
	font-weight: 600;
}

.section-6 img {
	width: 80%;
}

.text-history-about strong {
	color: #e2542a;
}


/* ===== EQUIPO ===== */

.team-image-card {
	border-radius: 15px;
}

.team-image-card img {
	width: 70%;
	border-radius: 15px;
	object-fit: cover;
}

.team-quote {
	text-align: center;
}

.team-quote p {
	font-size: 1.7rem;
	font-weight: 600;
	color: #000;
	margin-bottom: 5px;
}

.team-quote small {
	font-size: 0.9rem;
	color: #333;
}


/* ===== CTA FINAL ===== */

.section-8 {
	background: linear-gradient(90deg, #f3b607 0%, #e2542a 100%);
}

.section-8 h2,
.section-8 p {
	color: #fff;
}

.section-8 p {
	font-size: 1.3rem;
}

.section-8 .btn:hover {
	background-color: #e6a800;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 525px) {
    .about-hero-content {
        padding: 11rem 10px 6.5rem;
    }
	.about-hero-content h1 {
		font-size: 2.5rem;
		line-height: 1.2;
	}
	.about-hero-claim p {
		width: 90%!important;
		line-height: 1.5!important;
	}
	.text-second-claim {
		width: 100%!important;
	}
	#section-3 .right-image {
		min-height: 240px;
		border-radius: 0.5rem;
	}
	.section-4-card .card-body {
		padding: 20px;
	}
	.section-4-card .card-title {
		font-size: 1.3rem;
	}
	.section-4-card .card-text {
		font-size: 0.95rem;
	}
	.section-5 h2 {
		font-size: 1.5rem;
	}
	.section-5 h5 {
		font-size: 1.4rem;
	}
	.section-5 p {
		font-size: 1rem;
	}
	.section-6 p {
		font-size: 0.95rem;
		text-align: justify;
	}
	.team-quote p {
		font-size: 1.1rem;
	}
	.team-image-card img {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
	#about-hero {
		min-height: 65vh;
	}
	.about-hero-content {
        padding: 12rem 0 6rem 0;
    }
	.about-hero-content h1 {
		font-size: 4rem;
	}
	.about-hero-sub {
		font-size: 1.5rem;
	}
	.about-hero-claim p {
		font-size: 2rem;
		width: 95%;
	}
	.text-second-claim {
		width: 80%!important;
	}
	#section-3 .right-image {
		min-height: 300px;
	}
	.card-img-top-wrapper {
		height: 205px;
	}
	.section-4-card .card-title {
		font-size: 1.2rem;
	}
	.section-4-card .card-text {
		font-size: 1rem;
	}
	.section-5 h2 {
		font-size: 1.8rem;
	}
	.section-5 h5 {
		font-size: 1.3rem;
	}
	.section-5 p {
		font-size: 1rem;
	}
	.section-6 img{
	    margin-bottom: 30px;
	}
	.team-image-card img {
        width: 100%;
    }
}