/*
=========================================================
PROJECTS.CSS
Sistema editorial de Proyectos — Maceta y Cortafrío
=========================================================
*/

.projects-page,
.single-myc_project{
	background:var(--white);
}

/* HERO */
.projects-page .page-header,
.project-hero{
	padding:3rem 0 2.4rem;
	text-align:center;
	background:linear-gradient(180deg,var(--surface),var(--white));
}

.projects-page .page-header .container,
.project-hero .container{
	max-width:920px;
}

.projects-page .page-header h1,
.project-hero h1,
body.single-myc_project .project-hero h1{
	max-width:19ch;
	margin:0 auto .9rem;
	font-size:clamp(2.3rem,2.9vw,3.05rem);
	line-height:1.08;
	letter-spacing:-.018em;
	text-wrap:balance;
}

.projects-page .page-header p,
.project-hero__lead{
	max-width:700px;
	margin-inline:auto;
	color:var(--text-light);
	font-size:.98rem;
	line-height:1.7;
}

.project-hero__eyebrow{
	margin-bottom:.65rem;
	color:var(--color-secondary-dark);
	font-size:.8rem;
	font-weight:var(--weight-semibold);
	letter-spacing:.07em;
	text-transform:uppercase;
}

.project-hero__facts{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:.65rem 1.25rem;
	margin:1.2rem auto 0;
	padding:1rem 0 0;
	border-top:1px solid var(--gray-200);
	color:var(--text-light);
	font-size:.86rem;
	list-style:none;
}

.project-hero__facts strong{
	color:var(--heading-color);
	font-weight:var(--weight-semibold);
}

/* ARCHIVO Y FILTROS */
.projects-filter{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:.65rem;
	max-width:1100px;
	margin:1.8rem auto 0;
}

.projects-filter__item{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:.55rem 1rem;
	border:1px solid var(--gray-300);
	border-radius:var(--radius-pill);
	color:var(--heading-color);
	font-size:.82rem;
	font-weight:var(--weight-semibold);
	text-decoration:none;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.projects-filter__item.is-active,
.projects-filter__item:hover,
.projects-filter__item:focus-visible{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:var(--white);
}

.projects-archive{
	padding:3rem 0 4.5rem;
}

.projects-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1.5rem;
}

.project-card{
	display:flex;
	flex-direction:column;
	min-width:0;
	height:100%;
	overflow:hidden;
	background:var(--white);
	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);
}

@media (hover:hover) and (pointer:fine){
	.project-card:hover,
	.project-card:focus-visible{
		transform:translateY(-4px);
		border-color:var(--color-secondary);
		box-shadow:var(--shadow-md);
	}
}

.project-card__media{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	background:var(--gray-100);
}

.project-card__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.project-card__badge{
	position:absolute;
	bottom:.75rem;
	left:.75rem;
	padding:.32rem .72rem;
	background:rgba(22,21,19,.86);
	border-radius:var(--radius-pill);
	color:var(--white);
	font-size:.72rem;
	font-weight:var(--weight-semibold);
}

.project-card__body{
	padding:1.3rem;
}

.project-card__title{
	margin-bottom:.6rem;
	font-size:1.05rem;
	line-height:1.3;
	text-wrap:balance;
}

.project-card__meta{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem .8rem;
	margin:0;
	padding:0;
	color:var(--text-light);
	font-size:.79rem;
	list-style:none;
}

.project-card__meta-label{
	color:var(--heading-color);
	font-weight:var(--weight-semibold);
}

.projects-empty{
	max-width:760px;
	margin:0 auto;
	padding:2rem;
	background:var(--surface);
	border:1px solid var(--gray-200);
	border-radius:var(--radius-lg);
	text-align:center;
}

.projects-empty h2{
	margin-bottom:.75rem;
	font-size:clamp(1.65rem,2.5vw,2.2rem);
}

.projects-empty p{
	max-width:620px;
	margin:0 auto 1.35rem;
	color:var(--text-light);
	line-height:1.7;
}

/* ANTES / DESPUÉS */
.project-before-after{
	padding:3rem 0;
}

.before-after{
	max-width:900px;
	margin:0 auto;
}

.before-after__tabs{
	display:flex;
	justify-content:center;
	gap:.5rem;
	margin-bottom:1rem;
}

.before-after__radio{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

.before-after__label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:.6rem 1.4rem;
	border:1px solid var(--gray-300);
	border-radius:var(--radius-pill);
	font-weight:var(--weight-semibold);
	cursor:pointer;
}

.before-after__radio--before:checked ~ .before-after__tabs .before-after__label--before,
.before-after__radio--after:checked ~ .before-after__tabs .before-after__label--after{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:var(--white);
}

.before-after__radio--before:focus-visible ~ .before-after__tabs .before-after__label--before,
.before-after__radio--after:focus-visible ~ .before-after__tabs .before-after__label--after{
	outline:3px solid var(--color-secondary);
	outline-offset:2px;
}

.before-after__stage{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
}

.before-after__image{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity var(--transition-fast);
}

.before-after__image img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.before-after__radio--before:checked ~ .before-after__stage .before-after__image--before,
.before-after__radio--after:checked ~ .before-after__stage .before-after__image--after{
	opacity:1;
	z-index:1;
}

/* CONTENIDO EDITORIAL */
.project-content{
	padding:3rem 0 3.5rem;
	font-size:1.02rem;
	line-height:1.76;
}

.project-content .container{
	max-width:760px;
}

.project-content section{
	padding:0;
	margin:0 0 2.4rem;
}

.project-content section:last-child{
	margin-bottom:0;
}

.project-content .wp-block-spacer{
	height:0 !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
}

.project-content p:empty{
	display:none;
}

.project-content h1{
	max-width:24ch;
	margin:2.5rem 0 1rem;
	font-size:clamp(1.9rem,2.3vw,2.35rem);
	line-height:1.15;
	text-wrap:balance;
}

.project-content h2{
	max-width:26ch;
	margin:2.4rem 0 .85rem;
	font-size:clamp(1.75rem,2.15vw,2.2rem);
	line-height:1.16;
	letter-spacing:-.01em;
	text-wrap:balance;
}

.project-content h3{
	max-width:34ch;
	margin:1.9rem 0 .7rem;
	font-size:clamp(1.25rem,1.55vw,1.5rem);
	line-height:1.28;
	text-wrap:balance;
}

.project-content p{
	margin:0 0 1.15rem;
	line-height:1.76;
}

.project-content ul,
.project-content ol{
	margin:1rem 0 1.65rem;
	padding-left:1.4rem;
}

.project-content li{
	line-height:1.7;
}

.project-content li + li{
	margin-top:.5rem;
}

.project-content figure{
	margin:2rem 0;
}

.project-content img{
	display:block;
	max-width:100%;
	height:auto;
	margin-inline:auto;
	border-radius:var(--radius-md);
}

.project-content figcaption{
	max-width:680px;
	margin:.6rem auto 0;
	color:var(--text-light);
	font-size:.8rem;
	line-height:1.5;
	text-align:center;
}

.project-content blockquote,
.project-quote{
	margin:2rem 0 0;
	padding:1.3rem 1.5rem;
	background:var(--surface);
	border-left:4px solid var(--color-secondary);
	border-radius:0 var(--radius-md) var(--radius-md) 0;
	font-size:1rem;
	font-style:italic;
	line-height:1.7;
}

.project-content table{
	display:block;
	width:100%;
	max-width:100%;
	margin:1.8rem 0;
	overflow-x:auto;
	border-collapse:collapse;
	border:1px solid var(--gray-200);
}

.project-content th,
.project-content td{
	padding:.8rem .9rem;
	border-bottom:1px solid var(--gray-200);
	text-align:left;
	vertical-align:top;
}

.project-content th{
	background:var(--surface);
	font-weight:var(--weight-semibold);
}

/* GALERÍA */
.project-gallery{
	padding:0 0 3.5rem;
}

.project-gallery__grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1rem;
}

.project-gallery__grid img{
	display:block;
	width:100%;
	height:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:var(--radius-md);
}

/* RELACIONADOS */
.single-myc_project .related-services,
.single-myc_project .related-projects{
	padding:3.25rem 0;
}

.single-myc_project .related-services .section-header,
.single-myc_project .related-projects .section-header{
	max-width:760px;
	margin:0 auto 2rem;
	text-align:center;
}

.single-myc_project .related-services .section-header h2,
.single-myc_project .related-projects .section-header h2{
	max-width:18ch;
	margin-inline:auto;
	font-size:clamp(1.85rem,2.3vw,2.35rem);
	line-height:1.12;
	text-wrap:balance;
}

@supports selector(:has(*)){
	.single-myc_project .related-services .services-grid:has(> :only-child){
		grid-template-columns:minmax(0,440px);
		justify-content:center;
	}
}

.single-myc_project .related-services .service-card:only-child{
	max-width:440px;
	margin-inline:auto;
}

.myc-projects__cta{
	margin-top:2rem;
	text-align:center;
}

/* CTA FINAL */
.single-myc_project .cta-final{
	padding:3.75rem 0;
}

/* FOOTER */
.single-myc_project .site-footer,
.post-type-archive-myc_project .site-footer{
	padding-top:3.5rem;
}

.single-myc_project .footer-grid,
.post-type-archive-myc_project .footer-grid{
	grid-template-columns:minmax(0,1.25fr) minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.95fr);
	gap:2rem;
}

.single-myc_project .footer-title,
.post-type-archive-myc_project .footer-title{
	margin-bottom:.9rem;
	font-size:clamp(1.45rem,1.9vw,2rem);
	line-height:1.08;
	text-wrap:balance;
}

.single-myc_project .footer-links li,
.single-myc_project .footer-contact li,
.post-type-archive-myc_project .footer-links li,
.post-type-archive-myc_project .footer-contact li{
	margin-bottom:.55rem;
	line-height:1.45;
}

/* TABLET */
@media (max-width:992px){
	.projects-grid,
	.project-gallery__grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.single-myc_project .footer-grid,
	.post-type-archive-myc_project .footer-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

/* MÓVIL */
@media (max-width:600px){
	.projects-page .page-header,
	.project-hero{
		padding:2.5rem 0 2rem;
	}

	.projects-page .page-header h1,
	.project-hero h1,
	body.single-myc_project .project-hero h1{
		max-width:17ch;
		font-size:clamp(2rem,8.5vw,2.55rem);
	}

	.projects-filter{
		justify-content:flex-start;
		flex-wrap:nowrap;
		overflow-x:auto;
		padding-bottom:.5rem;
		scrollbar-width:thin;
	}

	.projects-filter__item{
		flex:0 0 auto;
	}

	.projects-archive,
	.project-content,
	.project-before-after,
	.single-myc_project .related-services,
	.single-myc_project .related-projects{
		padding:2.75rem 0;
	}

	.projects-grid,
	.project-gallery__grid{
		grid-template-columns:1fr;
	}

	.projects-empty{
		padding:1.5rem;
	}

	.before-after__stage{
		aspect-ratio:1/1;
	}

	.project-hero__facts{
		flex-direction:column;
		align-items:center;
		gap:.45rem;
	}

	.project-content{
		font-size:1rem;
		line-height:1.72;
	}

	.project-content h2{
		font-size:clamp(1.65rem,7.3vw,2.05rem);
	}

	.project-content h3{
		font-size:clamp(1.22rem,5.5vw,1.45rem);
	}

	.single-myc_project .footer-grid,
	.post-type-archive-myc_project .footer-grid{
		grid-template-columns:1fr;
		gap:2rem;
	}

	.single-myc_project .footer-title,
	.post-type-archive-myc_project .footer-title{
		font-size:clamp(1.5rem,8vw,2rem);
	}
}

@media (prefers-reduced-motion:reduce){
	.before-after__image{
		transition:none;
	}
}