/* Variables globales */
:root {
		--color-teal: #41A5BA;
		--color-dark: #172B36;
		--color-dark-alt: #233A47;
		--color-text-light: #ffffff;
		--color-text-muted: #e0e0e0;
		--max-width: 1200px;
		--font-main: 'Roboto', sans-serif;
}

/* Reset básico */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body {
		font-family: var(--font-main);
		background-color: var(--color-dark); /* Cambiado de #f5f5f5 para eliminar franja blanca inferior */
		color: var(--color-text-light);
		overflow-x: hidden;
}

.container {
		max-width: var(--max-width);
		margin: 0 auto;
		padding: 0 20px;
		width: 100%;
}

/* Topbar */
.topbar {
		background-color: var(--color-teal);
		padding: 8px 0;
		font-size: 0.9rem;
}

.topbar-content {
		display: flex;
		justify-content: flex-end;
		gap: 30px;
}

/* Header */
.header {
		background-color: rgba(23, 43, 54, 0.9);
		position: absolute;
		width: 100%;
		z-index: 100;
}

.header-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90px;
}

.logo img {
		height: 60px;
		display: block;
}

.main-nav {
		height: 100%;
}

.main-nav ul {
		list-style: none;
		display: flex;
		gap: 30px;
		height: 100%;
		align-items: stretch;
}

.main-nav li {
		display: flex;
}

.main-nav a {
		color: var(--color-text-light);
		text-decoration: none;
		font-weight: 500;
		font-size: 1.05rem;
		display: flex;
		align-items: center;
		padding: 0 5px;
		border-bottom: 4px solid transparent;
		transition: border-color 0.3s, color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
		border-bottom-color: var(--color-teal);
}

/* Hero Slider */
.hero-slider {
		width: 100%;
		height: 840px;
		position: relative;
}

.swiper-slide {
		background-size: cover;
		background-position: center;
		position: relative;
		display: flex;
		align-items: center;
}

.slide-bg-1 {
		background-image: url('../img/slider1.png');
}

.slide-bg-2 {
		background-image: url('../img/slider2.png');
}

.slide-bg-3 {
		background-image: url('../img/slider3.png');
}

.slide-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.55);
}

.slide-content {
		position: relative;
		z-index: 2;
		padding-bottom: 70px; /* Ajustado al nuevo margen de superposición */
		margin-top: 225px; /* Bajado un 10% adicional (150px + 75px = 225px aprox 30% del alto total) */
}

.slide-content h1 {
		font-size: 3.8rem;
		line-height: 1.1;
		margin-bottom: 15px;
		font-weight: 700;
		text-transform: uppercase;
}

.slide-content p {
		font-size: 1.6rem;
		color: var(--color-text-muted);
}

/* Swiper Paginación */
.swiper-pagination-bullet {
		background: var(--color-text-light);
		opacity: 0.6;
}
.swiper-pagination-bullet-active {
		background: var(--color-teal);
		opacity: 1;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: 90px; /* Ajustado al nuevo margen de las tarjetas */
}

/* Swiper Navigación Sutil (< y >) */
.subtle-nav.swiper-button-next:after, 
.subtle-nav.swiper-button-prev:after {
		font-family: var(--font-main);
		font-size: 32px;
		font-weight: 300;
		color: rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
}

.subtle-nav.swiper-button-next:after {
		content: '>';
}

.subtle-nav.swiper-button-prev:after {
		content: '<';
}

.subtle-nav:hover:after {
		color: rgba(255, 255, 255, 0.9);
		transform: scale(1.2);
}

.cards-container {
		display: flex;
		max-width: var(--max-width);
		margin: 0 auto;
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		margin-top: -70px; /* Overlap the slider */
		position: relative;
		z-index: 10;
}

.card {
		flex: 1;
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 30px;
		transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
		cursor: pointer;
		position: relative;
}

.card h3 {
		font-size: 1.3rem;
		font-weight: 600;
		line-height: 1.4;
}

.card.teal {
		background-color: var(--color-teal);
}

.card.dark {
		background-color: var(--color-dark-alt);
}

/* Efecto hover solicitado: tamaño un poco mayor (destacado) */
.card:hover {
		transform: scale(1.08);
		z-index: 11;
		box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Sección Quiénes Somos */
.about-section {
		background-color: var(--color-dark);
		background-image: url('../img/patron.png');
		background-repeat: repeat;
		background-position: center;
		padding: 0 0 100px 0;
}

.about-content-container {
		margin-top: 80px;
}

.about-grid {
		display: flex;
		align-items: center;
		gap: 70px;
}

.about-image-col {
		flex: 1.1;
}

.about-text-col {
		flex: 0.9;
		display: flex;
		flex-direction: column;
		gap: 25px;
}

.about-image-container {
		position: relative;
		padding-top: 30px;
		padding-left: 30px;
		display: inline-block;
		width: 100%;
}

.about-image-container::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 35%;
		height: 60%;
		border-top: 18px solid var(--color-teal);
		border-left: 18px solid var(--color-teal);
		z-index: 1;
}

.about-image-container img {
		position: relative;
		z-index: 2;
		width: 100%;
		display: block;
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.about-text-col h2 {
		font-size: 3rem;
		font-weight: 700;
		color: var(--color-text-light);
		line-height: 1.2;
}

.about-text-col p {
		font-size: 1.15rem;
		line-height: 1.7;
		color: var(--color-text-muted);
}

.btn-about {
		display: inline-block;
		background-color: var(--color-teal);
		color: var(--color-text-light);
		padding: 14px 45px;
		text-decoration: none;
		font-weight: 500;
		font-size: 1.1rem;
		align-self: flex-start;
		transition: background-color 0.3s ease;
		text-align: center;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-about:hover {
		background-color: #358d9f;
}

/* Sección Galería de Productos */
.products-gallery-section {
		width: 100%;
		background-color: #ffffff;
		padding: 5rem 0;
}

.products-gallery {
		display: flex;
		width: 100%;
		max-width: var(--max-width);
		margin: 0 auto;
		height: 480px;
}

.product-gallery-item {
		flex: 1;
		position: relative;
		overflow: hidden;
		display: block;
		text-decoration: none;
		height: 100%;
		transition: flex 0.4s ease;
}

.product-gallery-item:hover {
		flex: 1.2;
}

.product-gallery-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		filter: grayscale(100%) brightness(0.7);
		transition: filter 0.4s ease, transform 0.4s ease;
}

.product-gallery-item:hover img {
		filter: grayscale(0%) brightness(1);
		transform: scale(1.05);
}

.product-gallery-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60%;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
		z-index: 1;
}

.product-gallery-text {
		position: absolute;
		bottom: 40px;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 2;
		padding: 0 15px;
}

.product-gallery-text h3 {
		color: var(--color-text-light);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.3;
		margin: 0;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
		text-transform: uppercase;
}

/* Sección Proyectos */
.projects-section {
		background-color: #ebebeb;
		padding: 100px 0 440px 0; /* Aumentamos el padding inferior a 400px */
		width: 100%;
		position: relative;
		z-index: 2; /* Posicionado encima del pie de página para ocultar el desborde */
}

.projects-layout {
		display: flex;
}

.projects-slider-wrapper {
		display: flex;
		align-items: center;
		gap: 40px;
		width: 100%;
}

.projects-nav-buttons {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: -25px; /* Aligns with the height of the first project image */
}

.project-next-btn, .project-prev-btn {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: var(--color-teal);
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
		position: relative;
		outline: none;
}

.project-next-btn:hover, .project-prev-btn:hover {
		background-color: #358d9f;
		transform: scale(1.05);
}

.project-next-btn::after, .project-prev-btn::after {
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		border-right: 3px solid #ffffff;
		border-top: 3px solid #ffffff;
}

.project-next-btn::after {
		transform: rotate(45deg);
		margin-left: -5px;
}

.project-prev-btn::after {
		transform: rotate(-135deg);
		margin-right: -5px;
}

.projects-content-col {
		flex: 1;
		min-width: 0;
}

.projects-header {
		margin-bottom: 40px;
		padding-left: 110px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 20px;
}

.btn-projects-link {
		background-color: var(--color-teal);
		color: var(--color-text-light);
		padding: 14px 45px;
		border: none;
		border-radius: 2px;
		font-family: var(--font-main);
		font-size: 1.1rem;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.3s;
		display: inline-block;
		white-space: nowrap;
}

.btn-projects-link:hover {
		background-color: #358d9f;
}

.projects-subheader {
		color: var(--color-teal);
		font-size: 1.1rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 1px;
		display: inline-block;
		margin-bottom: 8px;
}

.projects-title {
		color: var(--color-dark);
		font-size: 2.6rem;
		font-weight: 700;
		line-height: 1.05;
}

.projects-title-small {
		font-size: 1.6rem;
		font-weight: 500;
		display: block;
		margin-bottom: 2px;
}

.projects-slider {
		width: 100%;
}

.projects-slider .swiper-slide {
		width: 100%;
}

@media (min-width: 1024px) {
		.projects-slider .swiper-slide {
				width: 440px !important;
		}
}



.project-slide {
		display: flex;
		flex-direction: column;
		gap: 15px;
		text-decoration: none;
}

.project-image-wrapper {
		width: 100%;
		height: 300px;
		overflow: hidden;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.project-image-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.5s ease;
}

.project-slide:hover .project-image-wrapper img {
		transform: scale(1.05);
}

.project-slide-title {
		color: var(--color-dark-alt);
		font-size: 1.15rem;
		font-weight: 500;
		line-height: 1.4;
		margin: 0;
}

/* Sección Contacto */
.contact-section {
		margin-top: -150px; /* Solapamiento de la sección anterior y el pie de página */
		margin-bottom: -350px; /* Jalamos el pie de página desde el contenedor padre para evitar huecos en el body */
		position: relative;
		z-index: 20;
		width: 100%;
}

.contact-card {
		display: flex;
		background-color: #ffffff;
		box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
		border-radius: 4px;
		overflow: hidden;
		width: 100%;
		margin-top: -350px;
		margin-bottom: 0; /* Desplazamos el margen negativo al contenedor padre */
}

.contact-info-col {
		flex: 0 0 45%;
		position: relative;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-start;
		padding: 60px 120px 60px 60px;
}

.contact-info-content {
		position: relative;
		z-index: 2;
		color: var(--color-text-light);
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.contact-info-content h3 {
		color: #98e9ff;
		font-size: 2.9rem;
		font-weight: 500;
		line-height: 1.1;
		margin-bottom: 20px;
		text-transform: uppercase;
}

.contact-info-content h2 {
		color: #ffffff;
		font-size: 3.2rem;
		font-weight: 700;
		line-height: 1.1;
		text-transform: uppercase;
}

.contact-form-col {
		flex: 0 0 55%;
		background-color: #ffffff;
		padding: 50px 60px;
}

.contact-form-col h3 {
		color: var(--color-dark);
		font-size: 2.1rem;
		font-weight: 700;
		margin-bottom: 15px;
}

.contact-form-col p {
		color: #666666;
		font-size: 1.05rem;
		line-height: 1.6;
		margin-bottom: 30px;
}

.contact-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
}

.form-row {
		display: flex;
		gap: 20px;
}

.form-row .form-group {
		flex: 1;
}

.form-group {
		display: flex;
		flex-direction: column;
}

.form-group input,
.form-group textarea {
		width: 100%;
		padding: 15px 20px;
		background-color: #ededed;
		border: none;
		border-radius: 2px;
		font-family: var(--font-main);
		font-size: 1.05rem;
		color: var(--color-dark);
		outline: none;
		transition: background-color 0.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
		color: #a0a0a0;
}

.form-group input:focus,
.form-group textarea:focus {
		background-color: #e2e2e2;
}

.form-submit-row {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
}

.btn-submit {
		background-color: var(--color-teal);
		color: var(--color-text-light);
		padding: 14px 45px;
		border: none;
		border-radius: 2px;
		font-family: var(--font-main);
		font-size: 1.1rem;
		font-weight: 500;
		cursor: pointer;
		transition: background-color 0.3s;
}

.btn-submit:hover {
		background-color: #358d9f;
}

/* Pie de Página */
.site-footer {
		background-color: var(--color-dark);
		background-image: url('../img/patron.png');
		background-repeat: repeat;
		background-position: center;
		padding: 400px 0 40px 0; /* Padding superior de 400px, padding inferior de 40px */
		color: var(--color-text-light);
		width: 100%;
		position: relative;
		z-index: 1; /* Posicionado por debajo de la sección precedente */
}

.footer-inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 40px;
}

.footer-col {
		flex: 1;
}

.footer-brand {
		display: flex;
		flex-direction: column;
		gap: 20px;
}

.footer-logo {
		height: 60px;
		align-self: flex-start;
}

.footer-desc {
		font-size: 1rem;
		line-height: 1.6;
		color: var(--color-text-muted);
}

.footer-social {
		display: flex;
		justify-content: center;
}

.social-links {
		display: flex;
		gap: 20px;
}

.social-icon {
		position: relative; /* Para posicionar el tooltip de forma absoluta */
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-text-light);
		transition: border-color 0.3s, background-color 0.3s;
}

/* Caja del Tooltip */
.social-icon::after {
		content: attr(data-tooltip);
		position: absolute;
		bottom: 130%; /* Posición sobre el círculo */
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		background-color: var(--color-teal); /* Color turquesa corporativo */
		color: #ffffff;
		padding: 6px 12px;
		border-radius: 4px;
		font-size: 0.85rem;
		font-weight: 600;
		font-family: var(--font-main);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		z-index: 100;
}

/* Triángulo puntero del Tooltip */
.social-icon::before {
		content: '';
		position: absolute;
		bottom: 115%;
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		border-width: 6px;
		border-style: solid;
		border-color: var(--color-teal) transparent transparent transparent;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
		z-index: 100;
}

/* Efecto Hover para Revelar el Tooltip */
.social-icon:hover::after,
.social-icon:hover::before {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
}

.social-icon svg {
		width: 26px;
		height: 26px;
		display: block;
}

.social-icon:hover {
		border-color: var(--color-teal);
		background-color: var(--color-teal);
}

.footer-contact {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
		gap: 15px;
}

.footer-contact h4 {
		font-size: 1.25rem;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-text-light);
		letter-spacing: 1px;
}

.footer-contact ul {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 2px;
}

.footer-contact li {
		font-size: 0.95rem;
		line-height: 1.5;
		color: var(--color-text-muted);
}

/* Responsive Design */
@media (max-width: 1024px) {
		.slide-content h1 {
				font-size: 3rem;
		}
}

@media (max-width: 992px) {
		.hero-slider {
				height: 500px !important;
		}
		.slide-content {
				margin-top: 130px !important;
				padding-bottom: 50px;
		}
		.cards-container {
				flex-wrap: wrap;
		}
		.card {
				flex: 0 0 50%;
				height: 160px;
				padding: 15px;
		}
		.card:nth-child(3) {
				background-color: var(--color-dark-alt);
		}
		.card:nth-child(4) {
				background-color: var(--color-teal);
		}
		.card h3 {
				font-size: 1.1rem;
		}
		.about-grid {
				flex-direction: column;
				gap: 50px;
		}
		.about-image-col,
		.about-text-col {
				width: 100%;
		}
		.about-text-col {
				text-align: center;
				align-items: center;
		}
		.btn-about {
				align-self: center;
		}
		.about-content-container {
				margin-top: 50px;
		}
		.products-gallery {
				height: 400px;
		}
		.projects-section {
				padding: 80px 0 260px 0;
		}
		.projects-header {
				padding-left: 0;
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 20px;
		}
		.contact-section {
				margin-bottom: -180px;
		}
		.contact-card {
				flex-direction: column;
				margin-top: -180px;
				margin-bottom: 0;
		}
		.site-footer {
				padding: 260px 0 60px 0;
		}
		.contact-info-col,
		.contact-form-col {
				flex: 0 0 100%;
				width: 100%;
		}
		.contact-info-col {
				padding: 50px 40px;
		}
		.contact-form-col {
				padding: 40px;
		}
		.footer-inner {
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 50px;
		}
		.footer-brand {
				align-items: center;
				text-align: center;
		}
		.footer-logo {
				align-self: center;
		}
		.footer-contact {
				align-items: center;
				text-align: center;
		}
		.footer-contact ul {
				align-items: center;
		}
}

@media (max-width: 768px) {
		.about-hero-section {
				padding-top: 195px !important;
		}
		.page-header,
		.contact-header {
				padding-top: 200px !important;
				padding-bottom: 30px !important;
		}
		.header-inner {
				flex-direction: column;
				height: auto;
				padding: 15px 0;
				gap: 15px;
		}
		.main-nav ul {
				flex-wrap: wrap;
				justify-content: center;
				gap: 15px;
		}
		.slide-content h1 {
				font-size: 2.2rem;
		}
		.slide-content p {
				font-size: 1.2rem;
		}
		.card {
				flex: 0 0 50%; /* Mantener dos por renglón en móviles */
				height: 150px; /* Altura ajustada para móvil */
				padding: 10px;
		}
		.card h3 {
				font-size: 1rem;
		}
		.cards-container {
				margin-top: -50px; /* Adjust overlap on mobile */
		}
		.topbar-content {
				justify-content: center;
		}
		.about-section {
				padding: 0 0 60px 0; /* Keep top padding at 0 so cards don't get pushed down */
		}
		.about-content-container {
				margin-top: 40px;
		}
		.about-text-col h2 {
				font-size: 2.2rem;
		}
		.about-text-col p {
				font-size: 1.05rem;
				line-height: 1.6;
		}
		.about-image-container {
				padding-top: 20px;
				padding-left: 20px;
		}
		.about-image-container::before {
				border-top-width: 12px;
				border-left-width: 12px;
		}
		.products-gallery {
				flex-direction: column;
				height: auto;
		}
		.product-gallery-item {
				height: 220px;
				width: 100%;
				flex: none;
		}
		.product-gallery-item:hover {
				flex: none;
		}
		.projects-section {
				padding: 60px 0 160px 0;
		}
		.projects-layout {
				flex-direction: column;
		}
		.projects-header {
				padding-left: 0;
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 20px;
		}
		.projects-slider-wrapper {
				flex-direction: column;
				gap: 30px;
		}
		.projects-nav-buttons {
				flex-direction: row;
				gap: 20px;
				justify-content: center;
				margin-top: 0;
		}
		.projects-title {
				font-size: 2rem;
		}
		.projects-title-small {
				font-size: 1.3rem;
		}
		.project-image-wrapper {
				height: 240px;
		}
		.projects-slider .swiper-slide {
				width: 100% !important;
		}
		.contact-section {
				margin-top: 0;
				margin-bottom: -100px;
		}
		.contact-card {
				margin-top: -100px;
				margin-bottom: 0;
		}
		.contact-info-col {
				padding: 40px 30px;
		}
		.contact-info-content h3 {
				font-size: 1.6rem;
		}
		.contact-info-content h2 {
				font-size: 2.4rem;
		}
		.contact-form-col {
				padding: 30px;
		}
		.contact-form-col h3 {
				font-size: 1.8rem;
		}
		.form-row {
				flex-direction: column;
				gap: 20px;
		}
		.site-footer {
				padding: 160px 0 50px 0;
		}
}

/* --- Productos Page Styles --- */
.page-header {
    width: 100%;
    height: 490px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

.page-header .container {
    position: relative;
    z-index: 2;
    margin-top: 20px;
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-left: 110px;
}

.intro-box-section {
    width: 100%;
    padding-bottom: 0px; /* Cambiado a 0 píxeles */
}

.intro-box {
    background-color: var(--color-teal);
    padding: 50px 110px;
    color: var(--color-text-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    z-index: 10;
    margin-top: -120px;
}

.intro-box p {
    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 300;
    margin: 0;
}

/* --- Estilos de la Sección del Catálogo (productos.php) --- */
.catalog-section {
    background-color: #EBEBEB;
    padding: 80px 0 0 0; /* Padding-top de 80px, sin padding-bottom */
    width: 100%;
}

.catalog-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar de Filtros (Izquierda) */
.catalog-sidebar {
    flex: 0 0 280px;
    background-color: transparent;
    margin-top: 67px; /* Alineación vertical con la primera imagen de productos */
}



.filter-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.filter-category {
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

.category-toggle {
    width: 100%;
    background-color: #F0F2F5; /* Fondo gris claro */
    color: var(--color-dark-alt);
    border: none;
    padding: 16px 20px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
    border-bottom: 1px solid #E0E0E0;
}

.category-toggle:hover {
    background-color: #E4E7EB;
}

/* Submenú Desplegable */
.category-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
}

/* Mostrar submenú cuando la categoría esté activa */
.filter-category.active .category-submenu {
    max-height: 400px;
}

.category-submenu li {
    border-bottom: 1px solid #EBEBEB;
}

.category-submenu li:last-child {
    border-bottom: none;
}

.submenu-item {
    display: block;
    padding: 14px 20px;
    color: var(--color-dark-alt);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    background-color: #ffffff;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover y Activo en azul */
.submenu-item:hover,
.submenu-item.active {
    background-color: var(--color-teal); /* Azul/Teal */
    color: #ffffff !important;
}

/* Contenido Principal (Derecha) */
.catalog-content {
    flex: 1;
}

.category-title {
    color: var(--color-dark-alt);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 25px;
    margin-top: 0;
}

/* Grid de Productos */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer; /* Cursor de mano */
    text-decoration: none; /* Evita que el texto se subraye si es un link */
}

.product-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #ffffff; /* Fondo blanco para las fotos */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    overflow: hidden; /* Evita que la imagen se salga al agrandarse */
}

.product-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease; /* Transición suave para el zoom */
}

/* Efecto hover sobre la tarjeta completa (imagen o título) */
.product-card:hover .product-image-container img {
    transform: scale(1.12); /* Agranda la imagen un 12% */
}

.product-info {
    padding: 5px 10px;
}

.product-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    margin-bottom: 6px;
    line-height: 1.3;
}

.product-desc {
    font-size: 0.95rem;
    color: #555555;
    font-weight: 500;
}

/* Paginación */
.catalog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
}

.pagination-arrow,
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #ffffff;
    color: var(--color-dark-alt);
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pagination-number.active,
.pagination-number:hover,
.pagination-arrow:hover {
    background-color: var(--color-teal);
    color: #ffffff;
}

@media (max-width: 992px) {
    /* Banner principal reducido en responsive */
    .page-header {
        height: auto !important;
        min-height: 380px !important;
        padding-top: 150px !important;
        padding-bottom: 40px !important;
        display: flex;
        align-items: center;
    }
    .contact-header {
        height: auto !important;
        min-height: 280px !important;
        padding-top: 150px !important;
        padding-bottom: 40px !important;
        display: flex;
        align-items: center;
    }
    .page-header h1 {
        font-size: 2.6rem;
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
    .page-header .container {
        margin-top: 0;
    }

    .catalog-section {
        padding-top: 40px !important;
    }
    .category-title {
        margin-left: 0;
        text-align: center;
    }

    .catalog-container {
        flex-direction: column;
        gap: 30px;
    }
    .catalog-sidebar {
        flex: 1;
        width: 100%;
        margin-top: 0 !important; /* Reseteo para móvil y tablet */
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Reducimos el padding y la fuente del cuadro azul en responsive */
    .intro-box {
        padding: 10px !important;
        margin-top: -60px;
    }
    .intro-box p {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    .featured-section {
        padding: 70px 0 200px 0 !important;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos productos por renglón */
        gap: 15px;
        justify-content: center;
    }
    .product-image-container {
        padding: 10px; /* Menos espacio interno para que la imagen se vea más grande */
        margin-bottom: 10px;
    }
    .product-name {
        font-size: 0.9rem;
    }
    .product-desc {
        font-size: 0.8rem;
    }
}

/* --- Productos Destacados Section --- */
.featured-section {
    background-color: #EBEBEB;
    padding: 70px 0 440px 0; /* Padding-top de 70px, padding-bottom de 400px */
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2; /* Posicionado encima del pie de página para ocultar el desborde */
}

.featured-title {
    color: var(--color-dark-alt);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 0;
    margin-left: 0; /* Alineado a la izquierda */
}

/* Carrusel Marquee con Animación CSS Puro */
.featured-marquee {
    overflow: hidden;
    width: 100%;
    display: flex;
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollMarquee 25s linear infinite;
}

/* Pausa instantánea al pasar el mouse por encima de la pista */
.featured-marquee:hover .marquee-track {
    animation-play-state: paused !important;
}

@keyframes scrollMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-50% - 15px), 0, 0); /* Mueve la mitad exacta de la pista */
    }
}

.featured-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    cursor: pointer;
    width: 280px; /* Ancho fijo para mantener consistencia */
    flex-shrink: 0;
}

.featured-image-container {
    width: 100%;
    aspect-ratio: 1.1 / 1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    overflow: hidden;
}

.featured-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Zoom interno del destacado en hover */
.featured-card:hover .featured-image-container img {
    transform: scale(1.12);
}

.featured-info {
    background-color: var(--color-teal);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    flex-grow: 1;
}

.featured-name {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-featured-more {
    display: inline-block;
    background-color: #ffffff;
    color: var(--color-dark-alt);
    padding: 10px 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    width: 85%;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 2px;
}

.btn-featured-more:hover {
    background-color: var(--color-dark-alt);
    color: #ffffff;
}

@media (max-width: 992px) {
    .featured-title {
        margin-left: 0;
        text-align: center;
    }
}

/* --- Estilos de Detalle de Producto (producto.php) --- */
.product-detail-section {
    background-color: #ffffff;
    padding: 80px 0;
    width: 100%;
}

.product-detail-container {
    display: flex;
    gap: 80px; /* Separación adaptada para 400px + 700px + 80px = 1180px en escritorio */
    margin-bottom: 60px;
    align-items: center;
}

.product-detail-image {
    width: 400px; /* Ancho modificado a 400px */
    height: 450px; /* Alto modificado a 450px */
    flex-shrink: 0; /* Evita que se encoja en pantallas grandes */
    background-color: #F4F4F4; /* Fondo gris claro específico */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-shadow: none; /* Sombra de caja contenedora removida */
}

.product-main-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Abarca el ancho total del div (400px) */
    transition: transform 0.3s ease;
}

.product-detail-image img:hover {
    transform: scale(1.04); /* Zoom ligero de la imagen principal al pasar el mouse */
}

.product-detail-info {
    width: 700px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 0 40px; /* Padding lateral de 40px */
}

.product-detail-info h2 {
    color: var(--color-dark-alt);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.product-detail-info p {
    color: #555555;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.product-actions {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.btn-action-quote {
    background-color: var(--color-teal);
    color: #ffffff;
    padding: 16px 30px;
    border: none;
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    flex: 1;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.btn-action-quote:hover {
    background-color: #358d9f;
}

.btn-action-sheet {
    background-color: #EBEBEB;
    color: var(--color-dark-alt);
    padding: 16px 30px;
    border: none;
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    flex: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.btn-action-sheet:hover {
    background-color: #dcdcdc;
}

/* Galería Inferior */
.product-gallery-section {
    background-color: #ffffff;
    width: 100%;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Lightbox Modal de Cotización */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 4px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.2rem;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.close-modal:hover {
    color: var(--color-dark-alt);
}

.modal-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--color-dark-alt);
    margin-top: 0;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.modal-form-group label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #666;
}

.modal-form-group input {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    background-color: #fcfcfc;
    color: var(--color-dark-alt);
}

.modal-form-group input:focus {
    border-color: var(--color-teal);
    background-color: #fff;
}

.btn-modal-submit {
    background-color: var(--color-teal);
    color: #fff;
    padding: 14px;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    border-radius: 2px;
}

.btn-modal-submit:hover {
    background-color: #358d9f;
}

@media (max-width: 992px) {
    .product-detail-container {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .product-detail-image {
        width: 100% !important;
        max-width: 300px !important; /* Limita la imagen principal a un máximo de 300px */
        height: auto !important;
        aspect-ratio: 1 / 1; /* Relación de aspecto cuadrada */
        flex: none;
        margin: 0 auto; /* Centrar la imagen en la pantalla */
    }
    .product-detail-info {
        width: 100% !important;
        flex: none;
    }
    .product-detail-info h2 {
        font-size: 2.2rem;
        text-align: center;
    }
    .product-actions {
        flex-direction: column;
        gap: 15px;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos imágenes por renglón en la galería */
        gap: 15px;
    }
}

/* --- Sección de Productos Relacionados --- */
.related-products-section {
    background-color: #ffffff; /* Fondo blanco */
    padding: 0px 0px 80px 0px; /* Padding de 0px arriba/lados, 80px abajo */
    width: 100%;
}

.related-title {
    color: var(--color-dark-alt);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 992px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos productos relacionados por renglón */
        gap: 15px;
    }
    .related-products-section .product-image-container {
        padding: 10px; /* Menor padding para ajustar la imagen en el espacio reducido */
        margin-bottom: 10px;
    }
}

.related-products-section .product-image-container {
    background-color: #F4F4F4; /* Fondo gris claro específico para las imágenes relacionadas */
}

/* --- Captcha de Seguridad (pie-pagina.php) --- */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

#captcha-canvas,
#modal-captcha-canvas {
    border-radius: 2px;
    cursor: pointer;
    background-color: #F4F4F4;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

#btn-refresh-captcha,
#btn-refresh-modal-captcha {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.2s, transform 0.2s;
    padding: 0 5px;
    flex-shrink: 0;
    line-height: 1;
}

#btn-refresh-captcha:hover,
#btn-refresh-modal-captcha:hover {
    color: var(--color-teal);
    transform: rotate(90deg);
}

#captcha-input,
#modal-captcha-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    background-color: #fcfcfc;
    color: var(--color-dark-alt);
}

#captcha-input:focus,
#modal-captcha-input:focus {
    border-color: var(--color-teal);
    background-color: #fff;
}

/* Emergente de Alerta Personalizada (custom-alert-overlay) */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    animation: fadeInAlert 0.2s ease;
}

@keyframes fadeInAlert {
    from { opacity: 0; }
    to { opacity: 1; }
}

.custom-alert-box {
    background-color: #ffffff;
    padding: 35px 40px;
    border-radius: 4px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    text-align: center;
    position: relative;
    animation: slideInAlert 0.25s ease;
}

@keyframes slideInAlert {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.custom-alert-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.custom-alert-close:hover {
    color: var(--color-dark-alt);
}

.custom-alert-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    margin-top: 0;
    margin-bottom: 15px;
}

.custom-alert-box p {
    font-size: 1.05rem;
    color: #555555;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 25px;
}

.custom-alert-btn {
    padding: 11px 30px;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
    color: #ffffff;
    transition: background-color 0.2s;
}

.custom-alert-btn.btn-error {
    background-color: var(--color-dark-alt);
}

.custom-alert-btn.btn-error:hover {
    background-color: #141E27;
}

.custom-alert-btn.btn-success {
    background-color: var(--color-teal);
}

.custom-alert-btn.btn-success:hover {
    background-color: #358d9f;
}

@media (max-width: 576px) {
    .captcha-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #captcha-canvas,
    #modal-captcha-canvas {
        width: 100%;
        height: 45px;
    }
    #btn-refresh-captcha,
    #btn-refresh-modal-captcha {
        align-self: center;
    }
}

/* --- Estilos Especiales para contacto.php --- */
.contact-header {
    height: 350px !important; /* Altura de 350px */
}

.contact-header h1 {
    margin-left: 0;
}

.contact-page-body {
    background-color: #ffffff;
    color: var(--color-dark-alt);
    width: 100%;
}

.contact-cards-section {
    width: 100%;
    position: relative;
    z-index: 10;
    margin-top: -60px; /* Superpuestas al banner */
    margin-bottom: 0px; /* Sin margen inferior */
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 4px;
    overflow: hidden;
    /* Efecto de sombra eliminado */
}

.contact-card-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 25px;
    height: 120px;
}

.contact-card-item.teal-card {
    background-color: var(--color-teal);
    color: var(--color-text-light);
}

.contact-card-item.white-card {
    background-color: #ffffff;
    color: #3A9CB7;
    border-top: 1px solid #eee;
}

.contact-card-item.white-card p {
    color: #3A9CB7;
}

.contact-card-item .card-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    display: block;
}

.contact-card-item .card-text h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.contact-card-item .card-text p {
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0;
}

.contact-card-item.teal-card .card-text p {
    color: rgba(255, 255, 255, 0.9);
}

.contact-detail-section {
    padding: 40px 0 40px 0;
    width: 100%;
    background-color: #ffffff;
}

.contact-detail-grid {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    align-items: flex-start;
}

.contact-detail-left {
    flex: 0 0 50%;
}

.contact-detail-left h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-dark-alt);
    margin: 20px 0 0 80px;
}

.contact-detail-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 12px;
    padding-right: 80px; /* Padding a la derecha de 80px */
}

.contact-item a {
    color: var(--color-teal);
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-item a:hover {
    color: var(--color-dark-alt);
}

.contact-item.phone-item a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-dark-alt);
}

.contact-item.phone-item a:hover {
    color: var(--color-teal);
}

.contact-item.address-item p {
    font-size: 1.2rem;
    color: var(--color-teal);
    line-height: 1.45;
    margin: 0;
}

.contact-social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon.dark {
    border-color: rgba(30, 43, 56, 0.3);
    color: var(--color-dark-alt);
}

.social-icon.dark:hover {
    border-color: var(--color-teal);
    background-color: var(--color-teal);
    color: #ffffff;
}

@media (max-width: 992px) {
    .contact-cards-grid {
        grid-template-columns: 1fr;
    }
    .contact-cards-section {
        margin-top: -30px;
        margin-bottom: 50px;
    }
    .contact-card-item {
        height: auto;
        padding: 20px 25px;
    }
    .contact-detail-section {
        padding-top: 0px !important; /* Quitar padding-top en responsive */
    }
    .contact-detail-grid {
        flex-direction: column;
        gap: 40px;
    }
    .contact-detail-left,
    .contact-detail-right {
        flex: 1;
        width: 100%;
    }
    .contact-detail-left h2 {
        font-size: 2rem;
        text-align: center;
        margin: 20px auto 0 auto; /* Centrar el título */
    }
    .contact-detail-right {
        align-items: center !important; /* Centrar elementos horizontalmente */
        text-align: center !important;   /* Centrar textos */
        padding-right: 0 !important;    /* Reseteo de padding para móviles */
    }
    .contact-map-section {
        height: 700px !important; /* Altura del mapa a 700px en móvil */
    }
}

/* --- Estilos para el mapa de contacto.php --- */
.contact-map-section {
    width: 100%;
    height: 1000px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 2; /* Posicionado encima del pie de página para ocultar el desborde */
}

.map-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-container iframe {
    height: 100% !important;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Totalmente transparente para no tapar el mapa */
    z-index: 5;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-overlay-text {
    background-color: rgba(30, 43, 56, 0.85);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--font-main);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.map-overlay:hover .map-overlay-text {
    opacity: 1;
}

/* --- Estilos para nosotros.php (Sección Quiénes Somos Hero) --- */
.about-hero-section {
    position: relative;
    width: 100%;
    height: 657px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 100px 0;
    z-index: 1;
}

/* Fondo blanco infinito a la izquierda en la pantalla */
.about-hero-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 68%;
    background-color: #ffffff;
    z-index: 2; /* Mayor que el overlay */
}

/* Capa oscura que cubre toda la imagen de fondo de tubería */
.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1; /* Menor que el fondo blanco */
}

.about-hero-section .container {
    position: relative;
    z-index: 3; /* Encima de todo */
    width: 100%;
}

.about-hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Estira ambas columnas a la misma altura */
    gap: 0;
}

/* Columna Izquierda: Abarca el 50% de la grilla */
.about-hero-left {
    flex: 0 0 50%;
    padding-right: 80px; /* Separación con el centro */
    display: flex;
    align-items: center;
}

.about-card {
    background-color: transparent; /* Transparente en PC porque el fondo de la sección izquierda ya es blanco */
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    position: relative;
    top: 120px; /* Desplaza el bloque de texto 120px hacia abajo sin afectar la altura ni otros elementos */
}

.about-card h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-teal); /* Color turquesa corporativo */
    margin-bottom: 25px;
    line-height: 1.2;
}

.about-card p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 35px;
    font-weight: 400;
}

.btn-action-contact {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    padding: 14px 28px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
    border-radius: 2px;
}

.btn-action-contact:hover {
    background-color: #358d9f;
}

/* Columna Derecha: Abarca el 50% de la grilla */
.about-hero-right {
    flex: 0 0 50%;
    padding-left: 80px; /* Separación con el centro */
    display: flex;
    align-items: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    position: relative;
    top: 60px; /* Desplaza visualmente 60px hacia abajo sin afectar la altura del contenedor */
}

.stat-box {
    background-color: rgba(65, 165, 186, 0.85); /* Turquesa translúcido */
    backdrop-filter: blur(5px);
    padding: 40px 30px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.3;
}

/* Versión Responsive */
@media (max-width: 992px) {
    .about-hero-section {
        padding: 160px 0 60px 0;
        height: auto !important;
    }
    /* Ocultamos el fondo blanco de media pantalla en responsive */
    .about-hero-section::before {
        display: none;
    }
    /* Expandimos la capa oscura al 100% de la pantalla */
    .about-hero-overlay {
        width: 100%;
        left: 0;
    }
    .about-hero-grid {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }
    .about-hero-left,
    .about-hero-right {
        flex: none;
        width: 100%;
        padding: 0;
    }
    .stats-grid {
        top: 0 !important;
    }
    /* Restauramos la tarjeta blanca en tablets/móviles para que resalte sobre el fondo */
    .about-card {
        background-color: #ffffff;
        padding: 40px 30px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        align-items: center;
        text-align: center;
        top: 0 !important; /* Desactivar desplazamiento en responsive */
    }
    .about-card h2 {
        font-size: 2.2rem;
    }
    .about-card p {
        font-size: 1.05rem;
        margin-bottom: 25px;
    }
    .stat-box {
        padding: 30px 20px;
    }
    .stat-number {
        font-size: 2.8rem;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .stat-box {
        padding: 20px 10px;
    }
    .stat-number {
        font-size: 2.2rem;
    }
    .stat-label {
        font-size: 0.85rem;
    }
}

/* --- Estilos para el Carrusel de Marcas (nosotros.php) --- */
.brands-section {
    background-color: #ffffff;
    padding: 80px 0;
    width: 100%;
    overflow: hidden;
}

.brands-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: var(--font-main);
}

.brands-subtitle {
    font-size: 1.15rem;
    color: #555555;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
    font-weight: 400;
}

.brands-marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    gap: 60px;
    user-select: none;
    position: relative;
    padding: 10px 0;
}

/* Máscaras de desvanecimiento en los bordes izquierdo y derecho */
.brands-marquee::before,
.brands-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.brands-marquee::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.brands-marquee::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.brands-track {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 100%;
    gap: 60px;
    animation: marquee-scroll 35s linear infinite;
}

.brands-marquee:hover .brands-track {
    animation-play-state: paused; /* Pausa el carrusel al pasar el mouse por encima */
}

.brand-logo {
    flex-shrink: 0;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.brand-logo img:hover {
    transform: scale(1.05); /* Efecto zoom muy sutil al pasar el mouse */
}

/* Animación del Carrusel Infinito */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 60px));
    }
}

/* Ajustes Responsive para la sección de marcas */
@media (max-width: 768px) {
    .brands-section {
        padding: 60px 0;
    }
    .brands-title {
        font-size: 2rem;
    }
    .brands-subtitle {
        font-size: 1.05rem;
        margin-bottom: 35px;
        padding: 0 15px;
    }
    .brand-logo {
        width: 140px;
        height: 80px;
    }
    .brand-logo img {
        max-height: 60px;
    }
    .brands-marquee::before,
    .brands-marquee::after {
        width: 50px; /* Reducimos el difuminado lateral en móviles */
    }
}

/* --- Estilos para la Sección ¿Por qué elegir DEIHSA? (nosotros.php) --- */
.why-choose-section {
    background-color: #EBEBEB; /* Gris claro/off-white */
    padding: 0 0 440px 0; /* Padding-bottom de 400px, padding-top de 0 */
    width: 100%;
    position: relative;
    z-index: 2; /* Posicionado encima del pie de página para ocultar el desborde */
}

.why-choose-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    text-align: center;
    margin-top: 0;
    margin-bottom: 55px;
    font-family: var(--font-main);
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-card {
    padding: 50px 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.why-card.dark-why-card {
    background-color: var(--color-dark-alt);
    color: #ffffff;
}

.why-card.teal-why-card {
    background-color: var(--color-teal);
    color: #ffffff;
}

.why-icon {
    margin-bottom: 30px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.2;
    color: #ffffff;
}

.why-card p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
}

/* Versión Responsive para ¿Por qué elegir DEIHSA? */
@media (max-width: 992px) {
    .why-choose-section {
        padding-bottom: 200px; /* Padding-bottom modificado a 200px en responsive */
    }
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 por fila */
        gap: 20px;
    }
    .why-card {
        height: auto;
        padding: 40px 25px;
    }
    /* Efecto Dominó en versión tableta (2 columnas):
       Fila 1: Tarjeta 1 (Oscuro) | Tarjeta 2 (Teal)
       Fila 2: Tarjeta 3 (Teal)   | Tarjeta 4 (Oscuro) */
    .why-choose-grid .why-card:nth-child(3) {
        background-color: var(--color-teal);
    }
    .why-choose-grid .why-card:nth-child(4) {
        background-color: var(--color-dark-alt);
    }
}

@media (max-width: 576px) {
    .why-choose-section {
        padding-bottom: 200px; /* Padding-bottom modificado a 200px en responsive */
    }
    .why-choose-grid {
        grid-template-columns: 1fr; /* 1 por fila en celular */
        gap: 15px;
    }
    .why-choose-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    .why-card {
        padding: 30px 20px;
    }
    .why-icon {
        margin-bottom: 20px;
    }
    .why-card h3 {
        margin-bottom: 15px;
    }
    /* Restaurar colores alternados originales en versión móvil de 1 columna:
       Tarjeta 1: Oscuro
       Tarjeta 2: Teal
       Tarjeta 3: Oscuro
       Tarjeta 4: Teal */
    .why-choose-grid .why-card:nth-child(3) {
        background-color: var(--color-dark-alt);
    }
    .why-choose-grid .why-card:nth-child(4) {
        background-color: var(--color-teal);
    }
}

/* Fila final desarrollada por VVERK en Pie de Página */
.footer-bottom {
    padding-top: 25px;
    text-align: center;
    width: 100%;
}

.footer-bottom a {
    font-size: 0.75rem; /* Texto más pequeño */
    color: rgba(255, 255, 255, 0.45); /* Color atenuado para no competir con el contenido principal */
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: var(--font-main);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.footer-bottom a:hover {
    color: var(--color-teal); /* Resalta en color turquesa al hover */
}

/* --- Estilos para la Sección Intro de Proyectos --- */
.proyectos-page-header {
    background-image: url('../img/proyectos.png');
}

/* Elementos de Animación Scroll Reveal Globales */
.reveal {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal-fade {
    transform: none;
}

.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

.proyectos-intro-section {
    padding: 0 0 40px 0; /* Ajustado para dar espacio antes de la lista de proyectos */
    width: 100%;
    position: relative;
    z-index: 2;
}

.proyectos-intro-box {
    background-color: var(--color-teal);
    background-image: url('../img/patron.png');
    background-repeat: repeat;
    background-position: center;
    padding: 60px 80px;
    color: var(--color-text-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
    z-index: 10;
    margin-top: -120px; /* Sobrepuesto del banner principal */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.proyectos-intro-top {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}

.proyectos-intro-title-col {
    flex: 0 0 45%;
}

.proyectos-intro-title-col h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.proyectos-intro-desc-col {
    flex: 0 0 50%;
}

.proyectos-intro-desc-col p {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 400;
}

.proyectos-intro-bottom {
    text-align: center;
    margin-top: 10px;
}

.proyectos-intro-compromiso {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.95);
    max-width: 900px;
    margin: 0 auto;
}

/* Versión Responsive para Proyectos Intro Box */
@media (max-width: 992px) {
    .proyectos-intro-section {
        padding-bottom: 80px; /* Reducimos el padding en responsive */
    }
    .proyectos-intro-box {
        padding: 40px 30px;
        margin-top: -80px;
        gap: 30px;
        text-align: center;
    }
    .proyectos-intro-top {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .proyectos-intro-title-col,
    .proyectos-intro-desc-col {
        flex: 0 0 100%;
        width: 100%;
    }
    .proyectos-intro-title-col h2 {
        font-size: 2.2rem;
    }
    .proyectos-intro-desc-col p {
        font-size: 1.05rem;
        line-height: 1.5;
    }
    .proyectos-intro-compromiso {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .proyectos-intro-section {
        padding-bottom: 60px;
    }
    .proyectos-intro-box {
        margin-top: -50px;
    }
}

@media (max-width: 576px) {
    .proyectos-intro-box {
        padding: 30px 20px;
        gap: 25px;
    }
    .proyectos-intro-title-col h2 {
        font-size: 1.8rem;
    }
    .proyectos-intro-desc-col p {
        font-size: 0.95rem;
    }
    .proyectos-intro-compromiso {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}

/* --- Sección Lista de Proyectos --- */
.proyectos-lista-section {
    padding: 0 0 60px 0; /* Margen inferior para separar del final de la página */
    width: 100%;
}

.proyectos-lista-grid {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Separación entre filas de proyectos */
}

.proyecto-item {
    position: relative;
    width: 100%;
    height: 380px; /* Altura fija para el banner del proyecto */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.proyecto-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.proyecto-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.proyecto-info-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    background-color: #ffffff;
    padding: 30px 40px;
    z-index: 5;
    transition: background-color 0.4s ease, color 0.4s ease;
    text-align: left;
}

.proyecto-info-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    margin-bottom: 12px;
    transition: color 0.4s ease;
}

.proyecto-info-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555555;
    font-weight: 400;
    transition: color 0.4s ease;
}

/* Efecto Hover */
.proyecto-item:hover .proyecto-img-wrapper img {
    transform: scale(1.08); /* Agrandar la imagen */
}

.proyecto-item:hover .proyecto-info-card {
    background-color: var(--color-teal); /* Cuadro se convierte en fondo azul */
}

.proyecto-item:hover .proyecto-info-card h3 {
    color: #ffffff; /* Texto blanco en hover */
}

.proyecto-item:hover .proyecto-info-card p {
    color: rgba(255, 255, 255, 0.9); /* Texto del párrafo blanco en hover */
}

/* Responsividad para la lista de proyectos */
@media (max-width: 992px) {
    .proyectos-lista-section {
        padding-bottom: 80px;
    }
    .proyecto-item {
        height: 320px;
    }
    .proyecto-info-card {
        width: 50%;
        padding: 25px 30px;
    }
    .proyecto-info-card h3 {
        font-size: 1.35rem;
    }
    .proyecto-info-card p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .proyectos-lista-section {
        padding-bottom: 60px;
    }
    .proyecto-item {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .proyecto-img-wrapper {
        height: 240px;
    }
    .proyecto-info-card {
        position: static;
        width: 100%;
        padding: 25px 20px;
    }
}

/* --- Fondo General para la Página de Proyectos --- */
body.proyectos-page {
    background-color: #EBEBEB;
}

/* --- Sección Clientes (Marquee) --- */
.clientes-section {
    padding: 60px 0 40px 0;
    width: 100%;
}

.clientes-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-dark-alt);
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: var(--font-main);
}

.clientes-subtitle {
    font-size: 1.15rem;
    color: #555555;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
    font-weight: 400;
}

.clientes-marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    gap: 60px;
    user-select: none;
    position: relative;
    padding: 10px 0;
}

/* Máscaras de desvanecimiento laterales con el fondo de la página #EBEBEB */
.clientes-marquee::before,
.clientes-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.clientes-marquee::before {
    left: 0;
    background: linear-gradient(to right, #EBEBEB 0%, rgba(235, 235, 235, 0) 100%);
}

.clientes-marquee::after {
    right: 0;
    background: linear-gradient(to left, #EBEBEB 0%, rgba(235, 235, 235, 0) 100%);
}

.clientes-track {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 100%;
    gap: 60px;
    animation: marquee-scroll 30s linear infinite;
}

.clientes-marquee:hover .clientes-track {
    animation-play-state: paused; /* Pausa al hacer hover */
}

.cliente-logo {
    flex-shrink: 0;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cliente-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    display: block;
    filter: grayscale(100%); /* Logos en escala de grises */
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Al pasar por encima, el logo se ilumina a su color original y cursor de mano */
.cliente-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08); /* Zoom ligero */
    cursor: pointer;
}

/* Responsividad para la sección de clientes */
@media (max-width: 768px) {
    .clientes-section {
        padding: 40px 0 20px 0;
    }
    .clientes-title {
        font-size: 1.8rem;
    }
    .clientes-subtitle {
        font-size: 1.05rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }
    .cliente-logo {
        width: 140px;
        height: 80px;
    }
    .cliente-logo img {
        max-height: 60px;
    }
    .clientes-marquee::before,
    .clientes-marquee::after {
        width: 50px;
    }
}

/* --- Sección Mapa --- */
.mapa-section {
    padding: 20px 0 400px 0; /* Padding bottom de 400px para absorber el solapamiento del pie de página */
    width: 100%;
    position: relative;
    z-index: 2; /* Posicionado encima del pie de página para ocultar el desborde */
}

.mapa-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.mapa-container img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* --- Página Detalle de Proyecto (proyecto.php) --- */
.proyecto-detalle-intro-section {
    padding: 0 0 40px 0;
    width: 100%;
    position: relative;
    z-index: 2;
}

.proyecto-detalle-intro-box {
    background-color: var(--color-teal);
    background-image: url('../img/patron.png');
    background-repeat: repeat;
    background-position: center;
    padding: 60px 80px;
    color: var(--color-text-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
    z-index: 10;
    margin-top: -120px; /* Sobrepuesto del banner principal */
}

.proyecto-detalle-intro-top {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}

.proyecto-detalle-intro-title-col {
    flex: 0 0 45%;
}

.proyecto-detalle-intro-title-col h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.proyecto-detalle-intro-desc-col {
    flex: 0 0 50%;
}

.proyecto-detalle-intro-desc-col p {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 300;
}

/* Contenido Principal de Detalle */
.proyecto-detalle-contenido-section {
    padding: 20px 0 50px 0; /* Padding inferior final ajustado */
    width: 100%;
}

.proyecto-detalle-grid {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 50px;
}

.proyecto-detalle-img-col {
    flex: 0 0 60%;
}

.proyecto-detalle-img-wrapper {
    width: 100%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
}

.proyecto-detalle-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.proyecto-detalle-text-col {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.proyecto-detalle-text-col p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444444;
    font-weight: 400;
}

.proyecto-detalle-full-desc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.proyecto-detalle-full-desc p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444444;
    font-weight: 400;
}

/* Responsividad para Detalle de Proyecto */
@media (max-width: 992px) {
    .proyecto-detalle-intro-box {
        padding: 40px 30px;
        margin-top: -80px;
        text-align: center;
    }
    .proyecto-detalle-intro-top {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .proyecto-detalle-intro-title-col,
    .proyecto-detalle-intro-desc-col {
        flex: 0 0 100%;
        width: 100%;
    }
    .proyecto-detalle-intro-title-col h2 {
        font-size: 2.2rem;
    }
    .proyecto-detalle-intro-desc-col p {
        font-size: 1.1rem;
    }
    .proyecto-detalle-grid {
        flex-direction: column;
        gap: 30px;
    }
    .proyecto-detalle-img-col,
    .proyecto-detalle-text-col {
        flex: 0 0 100%;
        width: 100%;
    }
    .proyecto-detalle-text-col p,
    .proyecto-detalle-full-desc p {
        font-size: 1.05rem;
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .proyecto-detalle-intro-box {
        margin-top: -50px;
    }
    .proyecto-detalle-contenido-section {
        padding-bottom: 60px;
    }
}

@media (max-width: 576px) {
    .proyecto-detalle-intro-box {
        padding: 30px 20px;
    }
    .proyecto-detalle-intro-title-col h2 {
        font-size: 1.8rem;
    }
    .proyecto-detalle-intro-desc-col p {
        font-size: 1rem;
    }
}

/* --- Galería de Detalle de Proyecto --- */
.proyecto-detalle-galeria-section {
    padding: 0; /* Sin padding inferior antes de la sección de proyectos recientes */
    width: 100%;
}

.proyecto-detalle-galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 30px; /* Separación de 30px */
}

.proyecto-galeria-item {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporción agradable */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: block;
    cursor: pointer;
}

.proyecto-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.proyecto-galeria-item:hover img {
    transform: scale(1.06); /* Zoom suave en hover */
}

@media (max-width: 768px) {
    .proyecto-detalle-galeria-section {
        padding-bottom: 50px;
    }
    .proyecto-detalle-galeria-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
        gap: 20px;
    }
}

/* --- Responsividad del Mapa en Proyectos --- */
@media (max-width: 992px) {
    .mapa-section {
        padding-bottom: 200px;
    }
}
/* Scroll Reveal Animations Styles */
/* Elemento base para animar al scroll */
.reveal {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Direcciones de aparición */
.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal-fade {
    transform: none;
}

/* Estado activo cuando entra al viewport */
.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Retrasos de animación escalonada (Stagger effect) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }