/* ==========================================================================
   PP Home Secciones — estilos del front
   Reutiliza los tokens del tema Parque Portales:
   naranja #ff8c4e · café oscuro #422426 · gris texto #6e7191
   y la clase de botón del sitio (.cta / .cta--solid).
   Sección 3: Características + video (SOP-1498)
   Sección 4: Espacio editable / CTA (SOP-1501)
   Sección final: Agendar cita (formulario, SOP-1502)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sección 3 — Características + video
   -------------------------------------------------------------------------- */
.pp-features {
	padding: 64px 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.pp-features__head {
	text-align: center;
	margin-bottom: 40px;
}

.pp-features__title {
	font-size: 2.5rem;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #422426;
	margin: 0 0 12px;
}

.pp-features__subtitle {
	font-size: 1.125rem;
	color: #6e7191;
	margin: 0;
}

.pp-features__video {
	max-width: 900px;
	margin: 0 auto 48px;
}

/* Embed responsivo 16:9 para iframes de YouTube/Vimeo */
.pp-features__video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.pp-features__video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	border-radius: 8px;
}

.pp-features__video-file {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.pp-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.pp-feature {
	text-align: center;
	padding: 16px;
}

.pp-feature__icon {
	margin-bottom: 16px;
}

.pp-feature__icon-img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.pp-feature__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #422426;
	margin: 0 0 8px;
}

.pp-feature__desc {
	font-size: 0.9375rem;
	color: #6e7191;
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 1023px) {
	.pp-features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
	.pp-features { padding: 40px 16px; }
	.pp-features__title { font-size: 1.875rem; }
	.pp-features__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   Sección 4 — Espacio editable / CTA (SOP-1501)
   Bloque centrado con título, texto y botón (.cta del tema) que va debajo de
   "Características del proyecto". Usa los tokens de marca del tema.
   -------------------------------------------------------------------------- */
.pp-cta-block {
	padding: 72px 24px;
	background-color: #f7f7fb;
}

.pp-cta-block__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.pp-cta-block__title {
	font-size: 2.25rem;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #422426;
	margin: 0 0 16px;
}

.pp-cta-block__text {
	font-size: 1.125rem;
	/* #62657f en vez del gris de marca #6e7191: sobre el fondo claro #f7f7fb
	   este alcanza 5.33:1 (AA), mientras #6e7191 se quedaba en 4.43 (falla). */
	color: #62657f;
	margin: 0 0 28px;
	line-height: 1.5;
}

/* El boton centrado: .cta del tema es display:flex con width:100% (bloque), por
   eso text-align:center no lo centra. Con mayor especificidad (.pp-cta-block
   .pp-cta-block__btn gana a .cta) lo volvemos inline-flex de ancho automatico,
   asi el text-align:center del contenedor lo centra. */
.pp-cta-block .pp-cta-block__btn {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	/* .cta del tema trae padding:0!important; le damos aire horizontal al texto
	   (necesita !important para ganarle). El alto lo sigue dando .cta. */
	padding-left: 36px !important;
	padding-right: 36px !important;
}

@media (max-width: 639px) {
	.pp-cta-block { padding: 48px 16px; }
	.pp-cta-block__title { font-size: 1.625rem; }
	.pp-cta-block__text { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Sección final — Agendar cita (formulario, SOP-1502)
   Reproduce el maquetado de la página /agendar-cita reutilizando las clases
   del tema (.make-appointment, .make-appointment__wrapper, .contact-info,
   formulario .form-input/.label-input, .cta). El estilo proviene de
   styles.min.css; .pp-agendar es solo un alias de la sección por si más
   adelante se requieren ajustes específicos del home.
   -------------------------------------------------------------------------- */

/* En el home la sección va pegada a la sección anterior (Delivery): anulamos el
   padding-top de 72px que usa la página /agendar-cita, que aquí se ve como una
   franja blanca sobre el banner. La especificidad (.pp-agendar.make-appointment)
   gana a .make-appointment sin importar el orden de carga del CSS. */
.pp-agendar.make-appointment {
	padding-top: 0;
}

/* ==========================================================================
   Sección 9 — "Características del proyecto" estilo Mariscal / Polanco (LTSM-3527)
   A sangre completa: dos columnas 50% / 50% como en Mariscal. Contenido visual
   (imagen o video) a la IZQUIERDA pegado al borde y llenando toda la altura;
   características a la DERECHA. Imagen a la izquierda como en Polanco.
   ========================================================================== */
.pphc-features {
	padding: 0;
	background-color: #422426;
}

.pphc-features__inner {
	display: flex;
	align-items: stretch;
	width: 100%;
}

/* Columna izquierda: imagen o video a media pantalla y a sangre */
.pphc-features__media {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	align-self: stretch;
	min-height: 620px;
	overflow: hidden;
}

.pphc-features__image,
.pphc-features__video-file {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pphc-features__video-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.pphc-features__video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* Columna derecha: etiqueta + título + lista */
.pphc-features__content {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px clamp(32px, 6vw, 104px);
	color: #fff;
}

/* Ancho de lectura cómodo dentro de la mitad derecha */
.pphc-features__kicker,
.pphc-features__title,
.pphc-features__list {
	width: 100%;
	max-width: 560px;
}

/* Sin contenido visual: una sola columna centrada (estado inicial) */
.pphc-features__inner--no-media {
	justify-content: center;
}
.pphc-features__inner--no-media .pphc-features__content {
	flex: 0 1 auto;
	width: 100%;
	max-width: 820px;
	padding: 88px 24px;
}

.pphc-features__kicker {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ff8c4e;
	margin-bottom: 18px;
}

.pphc-features__title {
	font-size: 3rem;
	line-height: 1.08;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 32px;
}

.pphc-features__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pphc-feature {
	position: relative;
	padding: 15px 0 15px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pphc-feature:last-child {
	border-bottom: 0;
}

.pphc-feature::before {
	content: "";
	position: absolute;
	left: 0;
	top: 24px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ff8c4e;
}

.pphc-feature__text {
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
}

.pphc-feature__warning {
	display: inline;
	margin-left: 6px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}

/* Tablet / móvil: una columna, imagen arriba.
   Misma convención que las demás imágenes del home (p. ej. .small-video): en
   móvil la imagen se muestra COMPLETA, a su proporción natural y sin recorte
   (object-fit: contain, sin alto fijo). Así queda homologada con el resto. */
@media (max-width: 1023px) {
	.pphc-features__inner {
		flex-direction: column;
	}
	.pphc-features__media,
	.pphc-features__content {
		flex: none;
		width: 100%;
	}
	.pphc-features__media {
		min-height: 0;
		height: auto;
	}
	.pphc-features__image,
	.pphc-features__video-file {
		height: auto;
		object-fit: contain;
	}
	/* el video incrustado vuelve a caja 16:9 (en desktop llena la columna) */
	.pphc-features__video-embed {
		position: relative;
		inset: auto;
		height: auto;
		padding-top: 56.25%;
	}
	.pphc-features__content {
		padding: 56px 24px;
	}
	.pphc-features__kicker,
	.pphc-features__title,
	.pphc-features__list {
		max-width: 100%;
	}
	.pphc-features__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 639px) {
	.pphc-features__content { padding: 44px 20px; }
	.pphc-features__title { font-size: 1.875rem; }
}