/*
 * demo-frame.css  —  Aislamiento técnico de las demos editoriales.
 *
 * Ámbito: solo páginas TELA, AURA, VÉRTICE, ATRIO (inmobiliaria), NOTA y SERIE,
 * reconocidas por la clase <body class="demo-frame"> que añade functions.php.
 * La plantilla que usan es page-no-title (shell V&J), de modo que estas páginas
 * hoy dependen de las reglas demo-detail de style.css de V&J. Este archivo
 * re-declara, con selectores de mayor especificidad (body.demo-frame .X), la
 * apariencia actual de esos componentes para congelarla: si en el futuro cambia
 * la identidad visual de V&J, las demos conservan su aspecto, y ninguna regla
 * de aquí puede filtrarse a V&J ni a otras páginas (todo va precedido de
 * body.demo-frame).
 */

/* Tokens propios de las demos, tomados del aspecto actual verificado. */
body.demo-frame {
	--demo-ink: #0a0a0a;
	--demo-text: #161616;
	--demo-mid: #6e6e6e;
	--demo-hair: #ececec;
	--demo-paper: #ffffff;
}

/* === Encabezado de demo === */
body.demo-frame .demo-hero-band {
	padding-block: clamp(3.5rem, 8vw, 6rem) 1rem;
	border-bottom: 1px solid var(--demo-hair);
}

/* El título hereda tamaño y escala de theme.json (elemento heading); aquí solo
   se fija su color e identidad tipográfica para que no cambie con V&J. */
body.demo-frame .demo-hero-band h1.page-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 400;
	color: var(--demo-text);
}

body.demo-frame .demo-hero-band p.section-kicker {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--demo-mid);
}

body.demo-frame .demo-hero-band p.page-lede {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--demo-text);
}

/* === Ficha técnica bajo el titular === */
body.demo-frame .demo-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.4rem;
	margin: 0 0 1.8rem;
}
body.demo-frame .demo-spec {
	flex: 1 1 40%;
}
body.demo-frame .demo-spec span {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--demo-mid);
	margin-bottom: 0.15rem;
}
body.demo-frame .demo-spec b {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 400;
	color: var(--demo-ink);
}

/* === Portada === */
body.demo-frame .demo-cover {
	margin-block: clamp(2rem, 5vw, 3.5rem);
}
body.demo-frame .demo-cover img {
	width: 100%;
	display: block;
	filter: grayscale(1) contrast(1.06);
}
body.demo-frame .demo-cover.is-wide img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
body.demo-frame .demo-cover.is-portrait img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* === Cuerpo: dos columnas, columna derecha fija === */
body.demo-frame .demo-body-grid {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: flex-start;
}
body.demo-frame .demo-body-grid .is-sticky {
	position: sticky;
	top: 6.5rem;
}

/* === Secciones de texto === */
body.demo-frame .demo-section {
	padding-block: clamp(1rem, 2vw, 1.6rem);
	border-top: 1px solid var(--demo-hair);
}
body.demo-frame .demo-section:first-child {
	border-top: 0;
}
body.demo-frame .demo-section h3 {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 0.8rem;
	color: var(--demo-text);
}
body.demo-frame .demo-section p {
	color: var(--demo-mid);
	line-height: 1.65;
	margin: 0;
	max-width: 40rem;
}

/* === Características === */
body.demo-frame .feature-summary {
	margin-top: 0.4rem;
}
body.demo-frame .feature-summary .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
body.demo-frame .feature-summary li {
	border-bottom: 1px solid var(--demo-hair);
	padding: 0.9rem 0;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}
body.demo-frame .feature-summary li:first-child {
	border-top: 1px solid var(--demo-hair);
}

/* === Botones (apariencia actual de la demo, congelada) === */
body.demo-frame .wp-block-buttons,
body.demo-frame .demo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	align-items: center;
}
body.demo-frame .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 1.9rem;
	border: 1px solid var(--demo-ink);
	border-radius: 2px;
	background-color: var(--demo-ink);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	gap: 0.6rem;
}
body.demo-frame .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background-color: transparent;
	color: var(--demo-ink);
	padding: 0.48rem 0.95rem;
}

/* === Responsive: mismas rupturas que el tema actual use === */
@media (max-width: 781px) {
	body.demo-frame .demo-body-grid {
		flex-direction: column;
	}
	body.demo-frame .demo-body-grid .is-sticky {
		position: static;
	}
	body.demo-frame .wp-block-button__link.wp-element-button {
		width: 100%;
	}
}