/*
=========================================================
CONTACT.CSS
Página de contacto autocontenida
Hotfix posterior a Fase 5
Maceta y Cortafrío
=========================================================
*/

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

.page-template-contacto .contact-hero{
	padding:3.25rem 0 2.75rem;
	background:linear-gradient(180deg,var(--surface),var(--white));
	text-align:center;
}

.page-template-contacto .contact-hero .container{
	max-width:860px;
}

.page-template-contacto .contact-hero h1{
	max-width:14ch;
	margin:0 auto .85rem;
	font-size:clamp(2.6rem,4vw,3.9rem);
	line-height:1.04;
	letter-spacing:-.02em;
	text-wrap:balance;
}

.page-template-contacto .contact-hero__lead{
	max-width:640px;
	margin:0 auto;
	color:var(--text-light);
	font-size:1.04rem;
	line-height:1.7;
}

/* =====================================================
   BLOQUE PRINCIPAL
===================================================== */

.page-template-contacto .contact-main{
	padding:3.75rem 0 4.5rem;
}

.page-template-contacto .contact-main__grid{
	display:grid;
	grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
	gap:2rem;
	max-width:1180px;
	align-items:start;
}

.page-template-contacto .contact-main__form,
.page-template-contacto .contact-main__info{
	min-width:0;
}

/* =====================================================
   FORMULARIO
===================================================== */

.page-template-contacto .quote-form-wrapper{
	max-width:none;
	margin:0;
}

.page-template-contacto .quote-form-card{
	max-width:none;
	padding:clamp(1.75rem,3vw,2.5rem);
	background:var(--white);
	border:1px solid var(--gray-200);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
}

.page-template-contacto .quote-form-card__title{
	margin:0 0 .6rem;
	font-size:clamp(1.8rem,2.6vw,2.35rem);
	line-height:1.12;
	letter-spacing:-.015em;
	text-wrap:balance;
}

.page-template-contacto .quote-form-card__description{
	max-width:58ch;
	margin:0 0 1.75rem;
	color:var(--text-light);
	line-height:1.65;
}

.page-template-contacto .contact-page-content,
.page-template-contacto .contact-page-content > *{
	min-width:0;
	max-width:100%;
}

/* =====================================================
   DATOS DE CONTACTO
===================================================== */

.page-template-contacto .contact-info-card{
	position:sticky;
	top:calc(var(--header-height) + 1.5rem);
	padding:1.75rem;
	background:var(--white);
	border:1px solid var(--gray-200);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
}

.page-template-contacto .contact-info-card h2{
	margin:0 0 1.2rem;
	font-size:1.35rem;
	line-height:1.2;
}

.page-template-contacto .contact-info-list{
	list-style:none;
	margin:0 0 1.5rem;
	padding:0;
}

.page-template-contacto .contact-info-list li{
	display:flex;
	flex-direction:column;
	gap:.25rem;
	padding:.85rem 0;
	border-bottom:1px solid var(--gray-200);
}

.page-template-contacto .contact-info-list li:first-child{
	padding-top:0;
}

.page-template-contacto .contact-info-list li:last-child{
	padding-bottom:0;
	border-bottom:0;
}

.page-template-contacto .contact-info-list__label{
	color:var(--text-light);
	font-size:.76rem;
	font-weight:var(--weight-semibold);
	letter-spacing:.045em;
	text-transform:uppercase;
}

.page-template-contacto .contact-info-list a{
	color:var(--color-primary);
	text-decoration:none;
	overflow-wrap:anywhere;
}

.page-template-contacto .contact-info-list a:hover,
.page-template-contacto .contact-info-list a:focus-visible{
	color:var(--color-secondary-dark);
	text-decoration:underline;
}

.page-template-contacto .contact-info-card .button-whatsapp{
	width:100%;
	justify-content:center;
}

/* =====================================================
   ZONA DE SERVICIO Y MAPA
===================================================== */

.page-template-contacto .contact-map{
	padding:4rem 0;
	background:var(--surface);
}

.page-template-contacto .contact-map .section-header{
	max-width:760px;
	margin:0 auto 2rem;
	text-align:center;
}

.page-template-contacto .contact-map .section-header h2,
.page-template-contacto .faq-block .section-header h2{
	font-size:clamp(2rem,3.2vw,2.9rem);
	line-height:1.1;
	letter-spacing:-.015em;
	text-wrap:balance;
}

.page-template-contacto .contact-map .section-header p{
	max-width:700px;
	margin:1rem auto 0;
	color:var(--text-light);
	line-height:1.7;
}

.page-template-contacto .service-area-list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.65rem;
	max-width:980px;
	margin:1.75rem auto 2.5rem;
	padding:0;
	list-style:none;
}

.page-template-contacto .service-area-list li{
	margin:0;
	padding:.5rem .95rem;
	background:var(--white);
	border:1px solid var(--gray-200);
	border-radius:var(--radius-pill);
	color:var(--gray-800);
	font-size:.84rem;
	font-weight:var(--weight-semibold);
	line-height:1.3;
}

.page-template-contacto .map-embed{
	max-width:1100px;
	margin-inline:auto;
}

/* =====================================================
   FAQ
===================================================== */

.page-template-contacto .faq-block{
	padding:4.25rem 0;
}

.page-template-contacto .faq-block .section-header{
	max-width:760px;
	margin:0 auto 2.25rem;
	text-align:center;
}

.page-template-contacto .faq-block__list{
	max-width:820px;
	margin-inline:auto;
}

.page-template-contacto .myc-faq-item{
	padding:1.2rem 1.35rem;
}

.page-template-contacto .myc-faq-item__question{
	padding-right:2rem;
	line-height:1.4;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:900px){
	.page-template-contacto .contact-main__grid{
		grid-template-columns:1fr;
	}

	.page-template-contacto .contact-main__info{
		order:-1;
	}

	.page-template-contacto .contact-info-card{
		position:static;
	}
}

/* =====================================================
   MÓVIL
===================================================== */

@media (max-width:600px){
	.page-template-contacto .contact-hero{
		padding:2.75rem 0 2.25rem;
	}

	.page-template-contacto .contact-hero h1{
		font-size:clamp(2.25rem,11vw,3rem);
	}

	.page-template-contacto .contact-main,
	.page-template-contacto .contact-map,
	.page-template-contacto .faq-block{
		padding:3rem 0;
	}

	.page-template-contacto .contact-main__grid{
		gap:1.5rem;
	}

	.page-template-contacto .quote-form-card,
	.page-template-contacto .contact-info-card{
		padding:1.3rem;
	}

	.page-template-contacto .service-area-list{
		justify-content:flex-start;
		gap:.5rem;
	}

	.page-template-contacto .service-area-list li{
		font-size:.79rem;
		padding:.45rem .75rem;
	}

	.page-template-contacto .map-embed{
		aspect-ratio:4/5;
	}

	.page-template-contacto .myc-faq-item{
		padding:1rem;
	}
}