/*
=========================================================
RESPONSIVE.CSS
Salvaguardas globales para escritorio, tablet y móvil
=========================================================
*/

html,
body{
	max-width:100%;
	overflow-x:hidden;
	overflow-x:clip;
}

main,
.site-header,
.site-footer,
section,
article,
.container{
	min-width:0;
	max-width:100%;
}

img,
picture,
iframe,
video,
svg,
canvas,
pre,
code,
table{
	max-width:100%;
}

img,
picture,
video,
canvas{
	height:auto;
}

pre,
table{
	overflow-x:auto;
}

p,
li,
a,
button,
input,
textarea,
select,
td,
th{
	overflow-wrap:anywhere;
}

/* =====================================================
   FOOTER GLOBAL
   Una sola presentación para todas las plantillas.
   Esta hoja se carga la última y neutraliza ajustes
   específicos de página como los que existían en Home.
===================================================== */

.site-footer .footer-grid{
	display:grid;
	grid-template-columns:minmax(0,1.3fr) minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.95fr);
	gap:2rem;
	padding-bottom:3rem;
}

.site-footer .footer-grid > *{
	min-width:0;
	width:100%;
}

.site-footer .footer-title{
	font-size:clamp(1.45rem,1.9vw,2rem);
	line-height:1.08;
	word-break:normal;
	overflow-wrap:normal;
}

.site-footer .footer-links li,
.site-footer .footer-contact li,
.site-footer .footer-column > p,
.site-footer .footer-hours,
.site-footer .footer-coverage{
	word-break:normal;
	overflow-wrap:break-word;
}

/* =====================================================
   PROYECTOS RELACIONADOS EN PÁGINAS DE SERVICIO
   El componente project-card se usa también fuera del
   archivo de proyectos, por lo que necesita presentación
   completa cuando projects.css no está cargado.
===================================================== */

.related-projects .projects-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1.5rem;
	max-width:1120px;
	margin:0 auto;
}

.related-projects .project-card{
	display:flex;
	flex-direction:column;
	min-width:0;
	height:100%;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--gray-200);
	border-radius:var(--radius-lg);
	color:inherit;
	text-decoration:none;
	transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}

.related-projects .project-card__media{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	background:var(--gray-100);
}

.related-projects .project-card__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.related-projects .project-card__badge{
	position:absolute;
	left:.75rem;
	bottom:.75rem;
	padding:.32rem .72rem;
	background:rgba(22,21,19,.86);
	border-radius:var(--radius-pill);
	color:#fff;
	font-size:.72rem;
	font-weight:var(--weight-semibold);
	line-height:1.2;
}

.related-projects .project-card__body{
	dis:flex;
	display:flex;
	flex:1;
	flex-direction:column;
	padding:1.3rem;
}

.related-projects .project-card__title{
	margin:0 0 .6rem;
	font-size:1.05rem;
	line-height:1.3;
	text-wrap:balance;
}

.related-projects .project-card__meta{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem .8rem;
	margin:0;
	padding:0;
	color:var(--text-light);
	font-size:.79rem;
	line-height:1.45;
	list-style:none;
}

.related-projects .project-card__meta li{
	margin:0;
}

.related-projects .project-card__meta-label{
	color:var(--heading-color);
	font-weight:var(--weight-semibold);
}

.related-projects .project-card:only-child{
	grid-column:1 / -1;
	width:min(100%,400px);
	justify-self:center;
}

@media (hover:hover) and (pointer:fine){
	.related-projects .project-card:hover,
	.related-projects .project-card:focus-visible{
		transform:translateY(-4px);
		border-color:var(--color-secondary);
		box-shadow:var(--shadow-md);
	}
}

@media (max-width:1200px){
	.site-footer .footer-grid{
		grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
	}
}

@media (max-width:992px){
	.header-container{
		min-height:72px;
	}

	.site-branding img,
	.custom-logo{
		max-width:58px;
		height:auto;
	}

	.header-actions .button-gold-pill{
		display:none;
	}

	.card,
	.service-card,
	.post-card,
	.project-card,
	.commitment-card,
	.myc-card{
		min-width:0;
		max-width:100%;
	}

	.site-footer .footer-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:2rem;
	}

	.related-projects .projects-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:768px){
	.site-footer{
		padding-top:3.25rem;
	}

	.site-footer .footer-grid{
		grid-template-columns:minmax(0,1fr);
		gap:2rem;
		padding-bottom:2.5rem;
	}

	.site-footer .footer-title{
		font-size:clamp(1.45rem,7vw,1.85rem);
		line-height:1.12;
	}

	.site-footer .footer-social{
		width:100%;
	}

	.site-footer .footer-bottom-container{
		align-items:flex-start;
		text-align:left;
	}

	.site-footer .footer-legal{
		justify-content:flex-start;
	}
}

@media (max-width:600px){
	body{
		font-size:1rem;
	}

	h1,
	h2,
	h3{
		overflow-wrap:break-word;
		text-wrap:balance;
	}

	.button,
	.button-whatsapp,
	.button-gold,
	.button-gold-outline{
		max-width:100%;
		white-space:normal;
		text-align:center;
	}

	.related-projects .projects-grid{
		grid-template-columns:1fr;
	}

	.related-projects .project-card:only-child{
		grid-column:auto;
		width:100%;
	}
}

input,
textarea,
select{
	max-width:100%;
}

iframe{
	border:0;
}

@media (prefers-reduced-motion:reduce){
	html:focus-within{
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

/* =====================================================
   HUB DE SERVICIOS
   Plantilla: page-templates/servicios.php
===================================================== */

.services-hub-hero{
	padding:1.75rem 0 1rem;
	text-align:left;
}

.services-hub-hero .container{
	max-width:var(--container-width);
}

.services-hub-hero .post-hero__eyebrow{
	margin:0 0 .75rem;
	font-size:.9rem;
	line-height:1.4;
}

.services-hub-hero h1{
	max-width:none;
	margin:0 0 .75rem;
	font-size:clamp(2.4rem,4vw,3.4rem);
	line-height:1.05;
	letter-spacing:-.025em;
}

.services-hub-hero .contact-hero__lead{
	max-width:820px;
	margin:0;
	font-size:1rem;
	line-height:1.65;
}

.services-hub-content{
	padding:1.5rem 0 0;
}

.services-hub-content .page-content{
	width:min(92%,var(--container-width));
	max-width:var(--container-width);
	margin-inline:auto;
	padding:0;
}

.services-hub-content .services-intro{
	max-width:820px;
	margin:0;
}

.services-hub-content .services-intro p{
	margin:0;
	font-size:1rem;
	line-height:1.7;
	color:var(--text-light);
}

.services-directory{
	padding:2.25rem 0 4rem;
}

.services-directory .services-grid{
	margin-top:0;
}

@media (max-width:768px){
	.services-hub-hero{
		padding:1.4rem 0 .8rem;
	}

	.services-hub-hero h1{
		font-size:clamp(2rem,9vw,2.65rem);
	}

	.services-hub-content{
		padding-top:1.25rem;
	}

	.services-directory{
		padding-top:1.75rem;
	}
}

/* =====================================================
   PORTADA — JERARQUÍA TIPOGRÁFICA DE SECCIONES
   Ajuste limitado a Home para no alterar servicios,
   páginas normales ni plantillas comerciales.
===================================================== */

.home .section-header h2,
.home .section-title__heading{
	font-size:clamp(2.15rem,3vw,3rem);
	line-height:1.08;
	max-width:22ch;
}

@media (max-width:600px){
	.home .section-header h2,
	.home .section-title__heading{
		font-size:clamp(1.85rem,7.5vw,2.35rem);
		max-width:20ch;
	}
}
