/* ================================================================================
	PÁGINA DE SANTANA - ESTILOS CSS
   Archivo completamente comentado y organizado por secciones HTML
   ================================================================================ */


/* ================================================================================
   1. VARIABLES Y ESTILOS GLOBALES
   ================================================================================ */

:root {
	/* Colores de fondo y superficie */
	--bg: #f5f1ec;
	--surface: #ffffff;
	--surface-soft: #f8f6f3;

	/* Colores de texto */
	--text: #161616;
	--muted: #6d6863;

	/* Colores principales (Rojo corporativo) */
	--red: #e21c1c;
	--red-dark: #be1515;
	--dark: #080808;

	/* Bordes y sombras reutilizables */
	--border: rgba(18, 18, 18, .1);
	--shadow: 0 20px 60px rgba(0, 0, 0, .12);
	--shadow-strong: 0 24px 70px rgba(0, 0, 0, .22);
}

/* Reset universal */
* {
	box-sizing: border-box;
}

/* Scroll suave en toda la página */
html {
	scroll-behavior: smooth;
}

/* Estilos base del body */
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(226, 28, 28, .06), transparent 28%),
		linear-gradient(180deg, #faf8f5 0%, var(--bg) 100%);
	overflow-x: hidden;
}

/* Imágenes responsivas */
img {
	max-width: 100%;
	display: block;
}

/* Enlaces sin decoración por defecto */
a {
	text-decoration: none;
}

/* Contenedor principal */
.container {
	position: relative;
	z-index: 1;
}


/* ================================================================================
   2. HEADER / NAVBAR
   ================================================================================ */

.site-header {
	position: absolute;
	top: 1rem;
	inset: 0 0 auto 0;
	z-index: 30;
	pointer-events: none;
}

.navbar {
	padding: 0;
}

/* Contenedor flotante tipo glass para el navbar */
.navbar-shell {
	width: min(calc(100% - 2rem), 1320px);
	max-width: 1320px;
	margin: 0 auto;
	padding: .95rem 1.35rem;
	background: rgba(5, 5, 5, .58);
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .07);
	border-radius: 24px;
	pointer-events: auto;
}

/* Logo en navbar */
.navbar-brand {
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}

.navbar-brand img {
	height: 54px;
	width: auto;
}

.navbar-toggler {
	border: 0;
	box-shadow: none;
	padding: .45rem .65rem;
}

.navbar-toggler:focus {
	box-shadow: none;
}

.navbar-collapse {
	justify-content: flex-end;
}

/* Enlaces de navegación del navbar */
.navbar-nav .nav-link {
	position: relative;
	color: rgba(255, 255, 255, .85);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .75rem .9rem;
	transition: color .2s ease, opacity .2s ease;
}

.navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: .72rem;
	right: .72rem;
	bottom: .4rem;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .22s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
	transform: scaleX(1);
}

/* Hover y estado activo de links del navbar */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--red);
}

.btn-header,
#btn-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-left: 1rem;
	padding: .92rem 1.22rem;
	background: var(--red);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	box-shadow: 0 16px 30px rgba(226, 28, 28, .24);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.btn-header:hover,
#btn-hero:hover {
	transform: translateY(-2px);
	background: var(--red-dark);
	color: #fff;
	box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
}


/* ================================================================================
   3. BOTONES (usados en múltiples secciones)
   ================================================================================ */

/* Estilos base para todos los botones */
#btn-hero,
#btn-primary-hero,
#btn-secondary-hero,
#btn-white-hero {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-weight: 700;
	letter-spacing: .02em;
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
#btn-primary-hero:hover,
#btn-white-hero:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 35px rgba(0, 0, 0, .22);
}

/* Tamaño base para botones en hero section */
#btn-primary-hero,
#btn-secondary-hero,
#btn-white-hero {
	padding: 1rem 1.35rem;
	border-radius: 0;
	font-size: .84rem;
	text-transform: uppercase;
}

/* Botón principal en hero - rojo */
#btn-primary-hero {
	background: var(--red);
	color: #fff;
	box-shadow: 0 18px 35px rgba(226, 28, 28, .3);
}

/* Botón secundario en hero - transparente con borde blanco */
#btn-secondary-hero {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .05);
}

/* Hover del botón secundario - aumenta opacidad */
#btn-secondary-hero:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

/* Botón blanco en section clientes - CTA */
#btn-white-hero {
	margin-top: 2rem;
	align-self: flex-start;
	background: #fff;
	color: var(--red);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .14);
}


/* ================================================================================
   4. HERO SECTION (Full screen con imagen de fondo)
   ================================================================================ */

/* Contenedor principal del hero */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background:
		linear-gradient(90deg, rgba(6, 6, 6, .88) 0%, rgba(6, 6, 6, .66) 42%, rgba(6, 6, 6, .35) 70%, rgba(6, 6, 6, .1) 100%),
		url("https://santanareformas.s3.us-east-2.amazonaws.com/img/inicio/hero/hero.png") center center / cover no-repeat;
	overflow: hidden;
}

/* Efectos visuales del hero - brillo en parte superior izquierda */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 14% 32%, rgba(255, 255, 255, .08), transparent 24%),
		linear-gradient(120deg, rgba(255, 255, 255, .04) 0%, transparent 36%, transparent 70%, rgba(0, 0, 0, .15) 100%);
	pointer-events: none;
}

/* Degradado suave en parte inferior del hero (transición a siguiente sección) */
.hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 140px;
	background: linear-gradient(180deg, transparent 20%, rgba(245, 241, 236, .65) 100%);
	pointer-events: none;
}

/* Contenedor interno del hero con padding */
.hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 8rem;
	padding-bottom: 6rem;
}

/* Contenedor de texto y botones */
.hero-copy {
	max-width: 620px;
	padding-top: 4rem;
	padding-bottom: 2rem;
}

/* Etiqueta superior pequeña (eyebrow) */
.eyebrow,
.section-kicker {
	margin: 0 0 .9rem;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .86);
}

/* Kicker (etiqueta) en otras secciones - color rojo */
.section-kicker {
	color: var(--red);
}

/* Estilos compartidos de títulos principales */
.hero h1,
.section-title,
.cta-panel h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.03em;
}

/* Título H1 del hero - tamaño fluido */
.hero h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(3.6rem, 7vw, 6.4rem);
	max-width: 7.2ch;
}

/* Parte del título en color rojo */
.hero h1 span {
	color: var(--red);
}

/* Descripción/subtítulo del hero */
.hero-text {
	margin: 1.4rem 0 0;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .82);
}

/* Contenedor de botones del hero (lado a lado) */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* Redes sociales (iconos laterales izquierdos) */
.hero-socials {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

/* Iconos de redes sociales */
.hero-socials a {
	width: 1.6rem;
	height: 1.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .85);
	font-size: .9rem;
	transition: transform .2s ease, color .2s ease;
}

/* Hover en iconos de redes */
.hero-socials a:hover {
	transform: translateY(-2px);
	color: var(--red);
}

/* Indicador de scroll (rueda del mouse) en parte inferior */
.scroll-indicator {
	position: absolute;
	left: 50%;
	bottom: 1.8rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	color: rgba(255, 255, 255, .72);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Diseño del icono del mouse para scroll */
.mouse {
	width: 24px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	position: relative;
}

/* Puntito que se mueve dentro del mouse */
.mouse::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: #fff;
	transform: translateX(-50%);
	animation: scrollDot 1.45s infinite ease-in-out;
}

/* Animación del punto de scroll */
@keyframes scrollDot {
	0% { transform: translate(-50%, 0); opacity: 1; }
	70% { transform: translate(-50%, 12px); opacity: 0; }
	100% { transform: translate(-50%, 12px); opacity: 0; }
}


/* ================================================================================
   5. ESTILOS BASE DE TODAS LAS SECCIONES
   ================================================================================ */

section {
	padding: 5.8rem 0;
}

/* Fondo degradado para secciones claras */
.about-section,
.services-section,
.clients-section {
	background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 246, 243, .92));
}


/* ================================================================================
   6. ABOUT SECTION (Nosotros + Estadísticas)
   ================================================================================ */

/* Cabecera genérica de sección (usada en varias secciones) */
.section-head,
.reasons-head,
.clients-grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.section-head {
	grid-template-columns: minmax(0, 1.4fr) auto;
	margin-bottom: 1.5rem;
}

.section-head-dark {
	margin-bottom: 1.8rem;
}

/* Título de sección - tamaño fluido */
.section-title {
	margin: 0;
	font-size: clamp(2.2rem, 4vw, 4rem);
	color: var(--text);
}

/* Título en color claro (para fondos oscuros) */
.section-title-light {
	color: #fff;
}

/* Párrafo de descripción de sección */
.section-text {
	margin: 1rem 0 0;
	color: var(--muted);
	line-height: 1.75;
	max-width: 34rem;
}

/* Enlaces de texto con icono (CTA secundario) */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin-top: 1.3rem;
	font-size: .84rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text);
	transition: transform .2s ease, color .2s ease;
}

.text-link:hover {
	transform: translateX(3px);
	color: var(--red);
}

/* Variantes de color del text-link */
.text-link-dark {
	color: var(--muted);
}

.text-link-light {
	color: rgba(255, 255, 255, .72);
}

/* Grid de estadísticas (4 columnas) */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow);
}

/* Tarjeta individual de estadística */
.stat-card {
	padding: 2rem 1.1rem;
	text-align: center;
	border-right: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(248, 246, 243, .75));
	transition: transform .22s ease, box-shadow .22s ease;
}

.stat-card:last-child {
	border-right: 0;
}

/* Icono en tarjeta de estadística */
.stat-card i {
	display: inline-flex;
	font-size: 1.15rem;
	color: var(--red);
	margin-bottom: 1rem;
}

/* Número grande en estadística */
.stat-card strong {
	display: block;
	font-size: clamp(1.7rem, 2vw, 2.4rem);
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1;
	margin-bottom: .45rem;
}

/* Etiqueta en estadística */
.stat-card span {
	display: block;
	color: var(--muted);
	font-size: .9rem;
	line-height: 1.35;
}

/* Efecto hover en tarjetas */
.stats-grid .stat-card:hover,
.service-card:hover,
.project-card:hover,
.cta-panel:hover {
	transform: translateY(-6px);
}


/* ================================================================================
   7. SERVICES SECTION (Tarjetas de servicios)
   ================================================================================ */

/* Tarjeta de servicio individual */
.service-card {
	position: relative;
	background: var(--surface);
	border: 1px solid rgba(16, 16, 16, .08);
	box-shadow: 0 14px 40px rgba(16, 16, 16, .06);
	height: 100%;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-card:hover {
	box-shadow: var(--shadow);
	border-color: rgba(226, 28, 28, .18);
}

/* Área de media (imagen) de tarjeta */
.service-media {
	position: relative;
	overflow: hidden;
}

/* Imagen en tarjeta de servicio */
.service-media img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	transition: transform .35s ease, filter .35s ease;
}

/* Zoom y saturación en hover de imagen */
.service-card:hover .service-media img,
.project-card:hover img {
	transform: scale(1.04);
	filter: saturate(1.03);
}

/* Badge/icono rojo en tarjeta */
.service-badge {
	position: absolute;
	left: 1rem;
	bottom: -1rem;
	width: 3.25rem;
	height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--red);
	color: #fff;
	box-shadow: 0 14px 25px rgba(226, 28, 28, .32);
	z-index: 2;
}

.service-badge i {
	margin-bottom: 1em;
}

/* Contenido de tarjeta (texto) */
.service-body {
	position: relative;
	padding: 1.9rem 1.2rem 1.25rem;
	min-height: 10rem;
}

/* Título en tarjeta de servicio */
.service-body h3 {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.45rem;
	line-height: 1.05;
	color: var(--text);
}

/* Descripción en tarjeta de servicio */
.service-body p {
	margin: .85rem 0 0;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.6;
}

/* Icono "+" en esquina de tarjeta (gira en hover) */
.card-plus {
	position: absolute;
	right: 1.05rem;
	top: 1.1rem;
	font-size: 1.7rem;
	line-height: 1;
	color: rgba(22, 22, 22, .88);
	transition: transform .2s ease, color .2s ease;
}

.service-card:hover .card-plus {
	transform: rotate(90deg);
	color: var(--red);
}


/* ================================================================================
   8. PROJECTS SECTION (Dark - Proyectos destacados)
   ================================================================================ */

/* Sección oscura de proyectos */
.projects-section {
	position: relative;
	background: linear-gradient(180deg, #0b0b0b 0%, #070707 100%);
	color: #fff;
}

/* Efectos visuales en background de proyectos */
.projects-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, .08), transparent 28%),
		radial-gradient(circle at top right, rgba(226, 28, 28, .12), transparent 22%);
	pointer-events: none;
}

/* Etiqueta en sección oscura */
.section-kicker-dark {
	color: rgba(255, 255, 255, .68);
}

/* Grid de proyectos */
.projects-grid {
	position: relative;
	z-index: 1;
}

/* Tarjeta de proyecto */
.project-card {
	position: relative;
	overflow: hidden;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .25);
	background: #111;
	transition: transform .22s ease, box-shadow .22s ease;
}

/* Imagen en tarjeta de proyecto */
.project-card img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	transition: transform .4s ease, filter .4s ease;
}

/* Degradado sobre imagen de proyecto */
.project-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .72) 100%);
	pointer-events: none;
}

/* Información de proyecto (título y descripción) */
.project-caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 1.1rem 1rem 1rem;
	color: rgba(255, 255, 255, .86);
	transform: translateY(0);
	transition: transform .22s ease;
}

/* Título en proyecto */
.project-caption h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.25;
}

/* Descripción en proyecto */
.project-caption p {
	margin: .2rem 0 0;
	font-size: .78rem;
	color: rgba(255, 255, 255, .68);
}

/* Botones de navegación de proyectos (lateral derecho) */
.projects-nav {
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	gap: .5rem;
	flex-direction: column;
}

/* Estilo de botones de nav en proyectos */
.projects-nav button {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


/* ================================================================================
   9. REASONS SECTION (¿Por qué elegirnos?)
   ================================================================================ */

/* Grid de razones */
.reasons-head {
	grid-template-columns: 1.05fr 1.4fr;
	padding-top: .2rem;
	padding-bottom: .2rem;
}

/* Grid de características/razones */
.reasons-features {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, .62);
	box-shadow: var(--shadow);
}

/* Elemento individual de razón */
.reason-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: 1.5rem .8rem;
	text-align: center;
	border-right: 1px solid var(--border);
	transition: transform .2s ease, background-color .2s ease;
}

.reason-item:last-child {
	border-right: 0;
}

/* Icono en razón */
.reason-item i {
	font-size: 1.3rem;
	color: var(--red);
}

/* Texto en razón */
.reason-item span {
	font-size: .92rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--text);
}

/* Hover en razón */
.reason-item:hover {
	background: rgba(255, 255, 255, .82);
}


/* ================================================================================
   10. CLIENTS SECTION (Nuestros colaboradores + CTA)
   ================================================================================ */

/* Grid principal de clientes (2 columnas) */
.clients-grid {
	grid-template-columns: 1.1fr .9fr;
	gap: 0;
	box-shadow: var(--shadow-strong);
}

/* Columna izquierda - logos y info */
.clients-copy {
	padding: 3rem 2.2rem;
	background: rgba(255, 255, 255, .86);
	min-height: 100%;
}

/* Grid de logos de clientes */
.client-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 2rem;
	align-items: center;
	margin-top: 2rem;
}

/* Logo individual de cliente */
.client-logos img {
	max-height: 34px;
	max-width: 148px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .84;
	transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

/* Hover en logo de cliente (color real) */
.client-logos img:hover {
	filter: grayscale(0%);
	opacity: 1;
	transform: translateY(-2px);
}

/* Columna derecha - CTA principal */
.clients-cta {
	min-height: 100%;
	background: linear-gradient(180deg, #e21c1c 0%, #c81414 100%);
	position: relative;
	overflow: hidden;
}

/* Efecto visual en fondo CTA */
.clients-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at right center, rgba(255, 255, 255, .08), transparent 28%);
	pointer-events: none;
}

/* Panel CTA (contenedor de texto y botón) */
.cta-panel {
	position: relative;
	z-index: 1;
	min-height: 100%;
	padding: 3rem 2.4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	transition: transform .22s ease;
}

/* Título del panel CTA */
.cta-panel h3 {
	margin: 0;
	font-size: clamp(2.1rem, 3vw, 3.3rem);
	max-width: 10ch;
}

/* Descripción en panel CTA */
.cta-panel p {
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, .88);
	font-size: 1rem;
}


/* ================================================================================
   11. FOOTER
   ================================================================================ */

/* Pie de página */
.site-footer {
	background: #070707;
	color: rgba(255, 255, 255, .84);
	padding: 4.2rem 0 1.4rem;
	position: relative;
	overflow: hidden;
}

/* Efectos visuales en footer */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, .05), transparent 24%),
		radial-gradient(circle at top right, rgba(226, 28, 28, .08), transparent 25%);
	pointer-events: none;
}

/* Separador dentro del footer */
.footer-top {
	padding-bottom: 1.7rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Bloque de marca en footer (izquierda) */
.footer-brand-block p {
	max-width: 16rem;
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, .68);
	line-height: 1.7;
}

/* Logo en footer */
.footer-logo {
	height: 66px;
	width: auto;
}

/* Grupo de redes sociales en footer */
.footer-socials {
	display: flex;
	gap: .8rem;
	margin-top: 1.2rem;
}

/* Icono de red social y WhatsApp en footer */
.footer-socials a,
.whatsapp-circle {
	width: 2.4rem;
	height: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	color: #fff;
	transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

/* Hover en iconos de footer */
.footer-socials a:hover,
.whatsapp-circle:hover {
	transform: translateY(-2px);
	border-color: var(--red);
	color: var(--red);
}

/* Título de columna en footer */
.footer-column h6 {
	margin: 0 0 1rem;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

/* Lista en footer */
.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Item de lista en footer */
.footer-column li {
	margin-bottom: .65rem;
}

/* Enlaces y texto en footer */
.footer-column a,
.footer-column span,
.footer-whatsapp p,
.footer-bottom p,
.footer-legal a {
	color: rgba(255, 255, 255, .68);
	font-size: .94rem;
}

/* Hover en enlaces de footer */
.footer-column a:hover,
.footer-legal a:hover {
	color: #fff;
}

/* Lista de contacto */
.footer-contact-list li {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
}

/* Icono en información de contacto */
.footer-contact-list i {
	color: rgba(255, 255, 255, .55);
	width: 1rem;
	margin-top: .25rem;
}

/* Columna de WhatsApp (lado derecho) */
.footer-whatsapp {
	padding-left: 1.2rem;
	border-left: 1px solid rgba(255, 255, 255, .08);
}

/* Separador en WhatsApp */
.footer-divider {
	width: 42px;
	height: 2px;
	display: block;
	background: rgba(255, 255, 255, .32);
	margin: .15rem 0 1rem;
}

/* Párrafo en WhatsApp */
.footer-whatsapp p {
	max-width: 12rem;
	margin: 0;
	line-height: 1.6;
}

/* Botón circular de WhatsApp */
.whatsapp-circle {
	width: 3.2rem;
	height: 3.2rem;
	margin-top: 1.2rem;
	font-size: 1.15rem;
}

/* Contenedor inferior del footer */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	padding-top: 1rem;
	flex-wrap: wrap;
}

.footer-bottom p {
	margin: 0;
}

/* Links legales en footer */
.footer-legal {
	display: flex;
	align-items: center;
	gap: .85rem;
	flex-wrap: wrap;
}

/* Separador vertical en links legales */
.footer-legal span {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .18);
}

/* Enlaces en footer */
footer a {
	color: inherit;
}


/* ================================================================================
   12. MEDIA QUERIES - RESPONSIVE DESIGN
   ================================================================================ */

/* Tablets y pantallas medianas (hasta 1399px) */
@media (max-width: 1399.98px) {
	.hero h1 {
		font-size: clamp(3.2rem, 6vw, 5.6rem);
	}

	.reasons-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Tablets (hasta 1199px) */
@media (max-width: 1199.98px) {
	.stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.clients-grid,
	.reasons-head,
	.section-head {
		grid-template-columns: 1fr;
	}

	.projects-nav {
		right: .85rem;
	}
}

/* Tablets pequeñas y paisaje mobile (hasta 991px) */
@media (max-width: 991.98px) {
	.site-header {
		top: .65rem;
	}

	.navbar-shell {
		width: min(calc(100% - 1rem), 1320px);
		padding: .85rem 1rem;
		border-radius: 22px;
	}

	.navbar-collapse {
		padding: 1rem 0 .2rem;
		width: 100%;
	}

	.navbar-nav .nav-link {
		padding: .58rem 0;
	}

	.navbar-nav .nav-link::after {
		left: 0;
		right: 0;
		bottom: .18rem;
	}

	.btn-header,
	#btn-hero {
		width: 100%;
		margin: .7rem 0 0;
	}

	.hero {
		min-height: 92vh;
		background-position: 58% center;
	}

	.hero-inner {
		padding-top: 7.5rem;
		padding-bottom: 5rem;
	}

	.hero-copy {
		max-width: 42rem;
	}

	.hero-socials {
		left: .75rem;
	}

	.service-media img,
	.project-card img {
		height: 240px;
	}

	.reasons-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-whatsapp {
		padding-left: 0;
		border-left: 0;
	}
}

/* Mobile (hasta 767px) */
@media (max-width: 767.98px) {
	section {
		padding: 4.3rem 0;
	}

	.hero {
		min-height: 100vh;
		background-position: 62% center;
	}

	.hero-inner {
		padding-top: 6.8rem;
	}

	.hero h1 {
		font-size: clamp(2.8rem, 12vw, 4rem);
	}

	.hero-text {
		font-size: .98rem;
	}

	.hero-actions {
		flex-direction: column;
	}

	/* Botones en mobile - ancho completo */
	#btn-primary-hero,
	#btn-secondary-hero,
	#btn-white-hero,
	#btn-hero {
		width: 100%;
		justify-content: center;
	}

	/* Ocultar redes sociales en mobile */
	.hero-socials {
		display: none;
	}

	/* Estadísticas y razones en 1 columna */
	.stats-grid,
	.reasons-features {
		grid-template-columns: 1fr;
	}

	/* Bordes ajustados en mobile */
	.stat-card,
	.reason-item {
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}

	.stat-card:last-child,
	.reason-item:last-child {
		border-bottom: 0;
	}

	/* Padding reducido en mobile */
	.clients-copy,
	.cta-panel {
		padding: 2.2rem 1.4rem;
	}

	.project-card img {
		height: 210px;
	}

	/* Ocultar botones de navegación de proyectos */
	.projects-nav {
		display: none;
	}

	.footer-bottom {
		align-items: flex-start;
	}

	.footer-socials {
		flex-wrap: wrap;
	}
}

/* Mobile muy pequeño (hasta 575px) */
@media (max-width: 575.98px) {
	.site-header {
		top: .45rem;
	}

	.navbar-shell {
		width: min(calc(100% - .75rem), 1320px);
		padding: .75rem .85rem;
		border-radius: 20px;
	}

	.navbar-brand img {
		height: 46px;
	}

	.navbar-nav .nav-link {
		font-size: .76rem;
	}

	.hero {
		background-position: 66% center;
	}

	.hero-copy {
		padding-top: 2.8rem;
	}

	.section-title {
		font-size: 2.1rem;
	}

	.service-media img,
	.project-card img {
		height: 190px;
	}

	.client-logos {
		gap: 1rem 1.2rem;
	}

	.client-logos img {
		max-height: 28px;
		max-width: 118px;
	}

	.footer-column,
	.footer-brand-block {
		text-align: left;
	}
}