/*
Theme Name: Ape
Description: Tema personalizado Ape
Version: 1.0.0
Author: j{AI}son
*/

:root {
	font-size: clamp(4px, 0.833vw, 16px);
	font-family: 'Manrope', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	background: #fff;
}

/* ============================================
   HERO CAROUSEL STYLES
   ============================================ */

/* Contenedor principal del carrusel */
#hero-carousel {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* Contenedor de slides */
.carousel-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Cada slide individual */
.carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.carousel-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Fondo de imagen o video */
.slide-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.carousel-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

/* Contenido del slide (textos + botón) */
.slide-content {
	position: absolute;
	bottom: 3.125rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	width: 80%;
}

.slide-content h2 {
	font-family: 'Manrope', sans-serif;
	font-size: 2.75rem; /* 44px */
	line-height: 3.75rem; /* 60px */
	font-weight: 400;
	color: #fff;
	margin: 0;
}

.slide-content p {
	font-family: 'Manrope', sans-serif;
	font-size: 2rem; /* 32px */
	line-height: 2.75rem; /* 44px */
	color: #fff;
	margin: 0;
}

.slide-button {
	margin-top: 1rem;
	padding: 0.4375rem 3.125rem; /* 7px 50px */
	background: #fff;
	color: #000;
	border-radius: 100px;
	font-family: 'Manrope', sans-serif;
	font-size: 1.5rem; /* 24px */
	line-height: 2.0625rem; /* 33px */
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
}

.slide-button:hover {
	background: #d6d6d6;
}

/* Dots de navegación */
.carousel-dots {
	position: absolute;
	right: 3.125rem; /* 50px */
	bottom: 3.125rem; /* 50px */
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.carousel-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #a0a0a0;
	cursor: pointer;
	transition: background 0.3s ease;
}

#hero-carousel .carousel-dot {
	width: 0.8125rem; /* 13px */
	height: 0.8125rem; /* 13px */
}

.carousel-dot.active {
	background: #fff;
}

.carousel-dot:hover {
	opacity: 0.8;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	/* Contenido del slide */
	.slide-content {
		bottom: 96px;
		gap: 30px;
	}
	
	.slide-content h2 {
		font-size: 30px;
		line-height: 35px;
	}
	
	.slide-content p {
		font-size: 24px;
		line-height: 26px;
	}
	
	.slide-button {
		margin-top: 0;
		padding: 7px 50px;
		font-size: 16px;
		line-height: 33px;
	}
	
	/* Dots de navegación */
	.carousel-dots {
		right: 12px;
		bottom: 96px;
	}
	
	#hero-carousel .carousel-dot {
		width: 8px;
		height: 8px;
	}
	
}

/* ============================================
   BLOQUE CONTENIDO NEGRO
   ============================================ */

/* Wrapper con fondo negro */
.bloque-contenido-negro {
	background: #000;
	width: 100%;
}

/* Contenedor interno con max-width */
.contenedor-interno {
	max-width: 1920px;
	margin: 0 auto;
	padding: 12.5rem 3.125rem; /* 200px 50px */
}

/* Párrafo principal */
.parrafo-principal {
	width: 83%; /* 1512px de 1820px disponibles */
	margin: 0 auto 5.625rem 0; /* 90px bottom */
	font-family: 'Manrope', sans-serif;
	font-size: 4rem; /* 64px */
	line-height: 120%;
	color: #fff;
}

/* Media Full Width (imagen o video) */
.media-full {
	width: 100%;
	margin-bottom: 5.625rem; /* 90px */
}

.media-full img,
.media-full video {
	width: 100%;
	aspect-ratio: 1820 / 755;
	object-fit: cover;
	display: block;
}

/* Grid de 3 columnas de texto */
.grid-textos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem; /* 30px */
}

.columna-texto {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	color: #fff;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	/* Contenedor interno */
	.contenedor-interno {
		padding: 100px 30px;
	}
	
	/* Párrafo principal */
	.parrafo-principal {
		width: 100%;
		margin-bottom: 50px;
		font-size: 19px;
		line-height: 24px;
	}
	
	/* Media Full Width */
	.media-full {
		margin-bottom: 50px;
	}
	
	.media-full img,
	.media-full video {
		aspect-ratio: 330 / 234;
	}
	
	/* Grid a 1 columna */
	.grid-textos {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.columna-texto {
		font-size: 14px;
		line-height: 20px;
	}
	
}


/* ============================================
   BLOQUE SHOWROOM
   ============================================ */

/* Contenedor principal */
.bloque-showroom {
	background: #fff;
	width: 100%;
}

.contenedor-showroom {
	max-width: 1920px;
	margin: 0 auto;
	padding: 12.5rem 3.125rem; /* 200px 50px */
}

/* Título */
.titulo-showroom {
	width: 32.3%; /* 588px de 1820px disponibles */
	margin: 0 0 5.625rem 0; /* 90px bottom */
	font-family: 'Manrope', sans-serif;
	font-size: 4rem; /* 64px */
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-transform: uppercase;
}

/* Contenido: 2 columnas */
.contenido-showroom {
	display: flex;
	align-items: stretch;
	height: 38.5rem;
	position: relative;
}

/* Columna Izquierda */
.columna-izquierda {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

.parrafo-showroom {
	width: 64.6%;
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 2rem; /* 32px */
	line-height: 2.75rem; /* 44px */
	color: #000;
}

.boton-showroom {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.boton-showroom:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-showroom span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-showroom .arrow-showroom {
	display: block;
	height: auto;
}

/* Columna Derecha */
.columna-derecha {
	flex: 1;
	position: relative;
	height: 38.5rem; /* 616px */
}

/* Carrusel Showroom */
.carousel-showroom {
	position: relative;
	width: 100%;
	height: 100%;
}

.carousel-slides-showroom {
	position: relative;
	width: 100%;
	height: 100%;
}

.carousel-slide-showroom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.carousel-slide-showroom.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.slide-background-showroom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dots Showroom */
.carousel-dots-showroom {
	position: absolute;
	right: 0.9375rem; /* 15px */
	bottom: 0.9375rem; /* 15px */
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.carousel-dot-showroom {
	width: 0.8125rem; /* 13px */
	height: 0.8125rem; /* 13px */
	border-radius: 50%;
	background: #a0a0a0;
	cursor: pointer;
	transition: background 0.3s ease;
}

.carousel-dot-showroom.active {
	background: #fff;
}

.carousel-dot-showroom:hover {
	opacity: 0.8;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	/* Contenedor */
	.contenedor-showroom {
		padding: 50px 30px;
	}
	
	/* Título */
	.titulo-showroom {
		width: 100%;
		margin-bottom: 30px;
		font-size: 40px;
		line-height: normal;
	}
	
	/* Contenido en columna */
	.contenido-showroom {
		flex-direction: column;
		height: auto;
	}
	
	/* Columna Izquierda */
	.columna-izquierda {
		order: 1;
		position: static;
	}
	
	.parrafo-showroom {
		width: 100%;
		margin-bottom: 30px;
		font-size: 14px;
		line-height: 20px;
	}
	
	/* Columna Derecha */
	.columna-derecha {
		height: auto;
		aspect-ratio: 330 / 234;
		order: 2;
	}
	
	/* Botón después del carrusel */
	.boton-showroom {
		position: static;
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		margin-top: 30px;
		order: 3;
		gap: 0;
	}
	
	.boton-showroom:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-showroom span {
		font-size: 12px;
		line-height: 26px;
	}
	
	/* Dots Showroom Mobile */
	.carousel-dots-showroom {
		right: 13px;
		bottom: 13px;
	}
	
	.carousel-dot-showroom {
		width: 8px;
		height: 8px;
	}
	
}


/* ============================================
   BLOQUE COLLECTIONS
   ============================================ */

/* Contenedor principal */
.bloque-collections {
	background: #fff;
	width: 100%;
	padding: 0 0 12.5rem 0; /* 0 0 200px 0 */
}

/* Contenedor 1920px para título y botón */
.contenedor-collections {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 3.125rem; /* 0 50px */
}

/* Título */
.titulo-collections {
	width: 32.3%; /* 588px de 1820px disponibles */
	margin: 0 0 2.625rem 0; /* 0 0 42px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 4rem; /* 64px */
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-transform: uppercase;
}

/* Botón */
.boton-collections {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-bottom: 6.25rem; /* 100px */
}

.boton-collections:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-collections span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-collections .arrow-collections {
	display: block;
	height: auto;
}

/* Wrapper del carrusel */
.carousel-collections-wrapper {
	position: relative;
	max-width: none;
	width: 100%;
}

/* Texto fijo a la izquierda (NO se mueve) */
.swipe-text-fixed {
	position: absolute;
	left: 0;
	top: 0;
	width: 12rem;
	height: 41.75rem; /* 668px - mismo alto que slides */
	display: flex;
	align-items: center;
	justify-content: end;
	z-index: 10; /* Por encima de las imágenes */
	pointer-events: none; /* No interfiere con clicks */
	background: #fff;
}

.swipe-text-fixed .swipe-text {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: normal;
	color: #000;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	padding-left: 3rem;
}

/* Carrusel con scroll horizontal */
.carousel-collections {
	display: flex;
	gap: 1.875rem; /* 30px */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
	/* Padding izquierdo para espacio del texto fijo */
	padding-left: 14.75rem; /* 300px - espacio para texto + gap */
	padding-right: 3.125rem;
	/* Ocultar scrollbar */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.carousel-collections.active-drag {
	cursor: grabbing;
	scroll-behavior: auto;
}

.carousel-collections::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Opera */
}

/* Slides individuales */
.carousel-slide-collections {
	flex-shrink: 0;
	width: 46.125rem; /* 738px */
	height: 41.75rem; /* 668px */
	position: relative;
}

/* Enlace del slide */
.slide-link-collections {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

.carousel-slide-collections img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay (velo negro) - Inicialmente oculto */
.slide-overlay-collections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 1;
}

/* Título - Inicialmente oculto */
.slide-title-collections {
	position: absolute;
	bottom: 3.125rem; /* 50px */
	left: 3.125rem; /* 50px */
	font-family: 'Manrope', sans-serif;
	font-size: 2rem; /* 32px */
	line-height: 3.75rem; /* 60px */
	font-weight: 400;
	color: #fff;
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 2;
}

/* Hover - Mostrar overlay y título */
.slide-link-collections:hover .slide-overlay-collections {
	opacity: 1;
}

.slide-link-collections:hover .slide-title-collections {
	opacity: 1;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	.bloque-collections {
		padding: 50px 0;
	}
	
	.contenedor-collections {
		padding: 0 30px;
	}
	
	.titulo-collections {
		width: 100%;
		margin-bottom: 30px;
		font-size: 40px;
	}
	
	.boton-collections {
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		margin-bottom: 30px;
		gap: 0;
	}
	
	.boton-collections:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-collections span {
		font-size: 12px;
		line-height: 26px;
	}
	
	/* Wrapper mobile */
	.carousel-collections-wrapper {
		position: relative;
	}
	
	/* Texto fijo mobile */
	.swipe-text-fixed {
		left: 0;
		width: 50px;
		height: 254px; /* Alto de slides mobile */
	}
	
	.swipe-text-fixed .swipe-text {
		font-size: 14px;
		line-height: 20px;
		padding-right: 0;
	}
	
	/* Carrusel Mobile */
	.carousel-collections {
		gap: 20px;
		padding-left: 60px;
		padding-right: 30px;
	}
	
	.carousel-slide-collections {
		width: 155px;
		height: auto;
	}
	
	/* Enlace con flex column */
	.slide-link-collections {
		display: flex;
		flex-direction: column;
		height: auto;
	}
	
	/* Imagen con altura fija */
	.carousel-slide-collections img {
		height: 230px;
		width: 100%;
		object-fit: cover;
	}
	
	/* Overlay oculto en mobile */
	.slide-overlay-collections {
		display: none;
	}
	
	/* Título debajo de la imagen */
	.slide-title-collections {
		position: static;
		color: #000;
		font-size: 14px;
		line-height: 100%;
		padding-top: 10px;
		margin: 0;
		opacity: 1;
	}
	
}


/* ============================================
   BLOQUE BRANDS
   ============================================ */

/* Contenedor principal */
.bloque-brands {
	background: #fff;
	width: 100%;
}

.contenedor-brands {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 3.125rem 12.5rem 3.125rem; /* 0 50px 200px 50px */
}

/* Título */
.titulo-brands {
	width: 32.3%; /* 588px de 1820px disponibles */
	margin: 0 0 5.625rem 0; /* 0 0 90px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 4rem; /* 64px */
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-transform: uppercase;
}

/* Contenedor de logos */
.logos-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 6.25rem; /* 100px */
	margin-bottom: 5.625rem; /* 90px */
	height: 6.25rem; /* 100px */
	align-items: center;
	
	/* Ocultar scrollbar */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.logos-brands::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Opera */
}

.logos-brands img {
	height: 100%;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

/* Botón */
.boton-brands {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.boton-brands:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-brands span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-brands .arrow-brands {
	display: block;
	height: auto;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	.contenedor-brands {
		padding: 50px 30px;
	}
	
	.titulo-brands {
		width: 100%;
		margin-bottom: 30px;
		font-size: 40px;
	}
	
	.logos-brands {
		column-gap: 20px;
		margin-bottom: 30px;
		height: 100%;
		padding: 0;
	}
	
	.logos-brands img {
		height: 46px;
		width: auto;
	}
	
	.boton-brands {
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		gap: 0;
	}
	
	.boton-brands:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-brands span {
		font-size: 12px;
		line-height: 26px;
	}
	
}


/* ============================================
   BLOQUE CATALOGUES
   ============================================ */

/* Contenedor principal */
.bloque-catalogues {
	background: #f8f8f8;
	width: 100%;
}

.contenedor-catalogues {
	max-width: 1920px;
	margin: 0 auto;
	padding: 10rem 10rem; /* 160px 160px */
}

/* Contenido: 2 columnas */
.contenido-catalogues {
	display: flex;
	align-items: stretch;
}

/* Columna Izquierda: Imagen */
.columna-imagen-catalogues {
	flex: 1;
}

.columna-imagen-catalogues img {
	width: 100%;
	height: 34.125rem; /* 546px */
	object-fit: cover;
	display: block;
}

/* Columna Derecha: Contenido */
.columna-contenido-catalogues {
	flex: 1;
	background: #fff;
	display: flex;
	align-items: center;
}

.wrapper-contenido-catalogues {
	width: 100%;
	padding: 0 5.625rem; /* 0 90px */
}

/* Título */
.titulo-catalogues {
	margin: 0 0 1.875rem 0; /* 0 0 30px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 2.375rem; /* 38px */
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-transform: uppercase;
}

/* Párrafo */
.parrafo-catalogues {
	margin: 0 0 3.125rem 0; /* 0 0 50px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	color: #000;
}

/* Botón */
.boton-catalogues {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.boton-catalogues:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-catalogues span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-catalogues .arrow-catalogues {
	display: block;
	height: auto;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	.contenedor-catalogues {
		padding: 90px 30px;
	}
	
	/* Contenido en columna */
	.contenido-catalogues {
		flex-direction: column;
	}
	
	/* Columna Contenido (primera en mobile) */
	.columna-contenido-catalogues {
		order: 1;
		padding: 50px 30px;
	}
	
	.wrapper-contenido-catalogues {
		padding: 0;
	}
	
	/* Título */
	.titulo-catalogues {
		margin-bottom: 30px;
		font-size: 24px;
		line-height: normal;
	}
	
	/* Párrafo */
	.parrafo-catalogues {
		margin-bottom: 50px;
		font-size: 14px;
		line-height: 20px;
	}
	
	/* Columna Imagen (segunda en mobile) */
	.columna-imagen-catalogues {
		order: 2;
	}
	
	.columna-imagen-catalogues img {
		height: auto;
		aspect-ratio: 1 / 1;
	}
	
	/* Botón */
	.boton-catalogues {
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		gap: 0;
	}
	
	.boton-catalogues:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-catalogues span {
		font-size: 12px;
		line-height: 26px;
	}
	
}


/* ============================================
   BLOQUE CONTACT
   ============================================ */

/* Contenedor principal */
.bloque-contact {
	background: #fff;
	width: 100%;
}

.contenedor-contact {
	max-width: 1920px;
	margin: 0 auto;
	padding: 13.75rem 3.125rem 7.5rem 3.125rem; /* 220px 50px 120px 50px */
}

/* Título */
.titulo-contact {
	width: 32.3%; /* 588px de 1820px disponibles */
	margin: 0 0 3.75rem 0; /* 0 0 60px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 4rem; /* 64px */
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-transform: uppercase;
}

/* Contenido: 2 columnas */
.contenido-contact {
	display: flex;
	align-items: flex-end;
	gap: 2.5rem; /* 40px */
}

/* Columna Izquierda */
.columna-izquierda-contact {
	flex: 0 0 65.71%; /* 1196px de 1820px = 65.71% */
}

.parrafo-contact {
	margin: 0 0 7.1875rem 0; /* 0 0 115px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 2rem; /* 32px */
	line-height: 2.75rem; /* 44px */
	color: #000;
}

/* Botón Contact Us (Popup) */
.boton-contact-popup {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
}

.boton-contact-popup:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-contact-popup span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-contact-popup .arrow-contact-popup {
	display: block;
	height: auto;
}

/* Columna Derecha */
.columna-derecha-contact {
	flex: 1; /* Toma el espacio restante (32.36%) */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.wrapper-derecha-contact {
	width: 100%;
}

/* Subtítulo */
.subtitulo-contact {
	margin: 0 0 2.1875rem 0; /* 0 0 35px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 2rem; /* 32px */
	line-height: 2.75rem; /* 44px */
	font-weight: 400;
	color: #000;
}

/* Texto con enlaces */
.texto-contact {
	margin: 0 0 3.75rem 0; /* 0 0 60px 0 */
	font-family: 'Manrope', sans-serif;
	font-size: 1.5rem; /* 24px */
	line-height: 2.375rem; /* 38px */
	color: #000;
}

.texto-contact a {
	color: #000;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.texto-contact a:hover {
	opacity: 0.7;
}

/* Botón Find Us (Map) */
.boton-contact-map {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 15rem; /* 240px */
	padding: 1.5rem 2rem; /* 24px 32px */
	background: #f8f8f8;
	color: #000;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.boton-contact-map:hover {
	background: #d6d6d6;
	padding-right: 1.49rem;
}

.boton-contact-map span {
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem; /* 20px */
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: #000;
}

.boton-contact-map .arrow-contact-map {
	display: block;
	height: auto;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	
	/* Contenedor */
	.contenedor-contact {
		padding: 50px 30px;
	}
	
	/* Título */
	.titulo-contact {
		width: 100%;
		margin-bottom: 30px;
		font-size: 40px;
	}
	
	/* Contenido en columna */
	.contenido-contact {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}
	
	/* Columna Izquierda */
	.columna-izquierda-contact {
		flex: none;
		width: 100%;
	}
	
	.parrafo-contact {
		margin-bottom: 30px;
		font-size: 14px;
		line-height: 20px;
	}
	
	/* Botón Contact Us Mobile */
	.boton-contact-popup {
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		gap: 0;
	}
	
	.boton-contact-popup:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-contact-popup span {
		font-size: 12px;
		line-height: 26px;
	}
	
	/* Columna Derecha */
	.columna-derecha-contact {
		flex: none;
		width: 100%;
		justify-content: flex-start;
	}
	
	/* Subtítulo Mobile */
	.subtitulo-contact {
		margin-bottom: 30px;
		font-size: 24px;
		line-height: 100%;
	}
	
	/* Texto Mobile */
	.texto-contact {
		margin-bottom: 30px;
		font-size: 14px;
		line-height: 20px;
	}
	
	/* Botón Find Us Mobile */
	.boton-contact-map {
		justify-content: space-between;
		width: 150px;
		padding: 10px 20px;
		gap: 0;
	}
	
	.boton-contact-map:hover {
		justify-content: space-between;
		gap: 0;
		padding: 10px 20px;
	}
	
	.boton-contact-map span {
		font-size: 12px;
		line-height: 26px;
	}
	
}