/* ==========================================================================
   Diario Inmobiliario — capa de diseño
   Se monta encima del tema Newsreader. Desactivar el plugin revierte todo.
   ========================================================================== */

:root {
	--di-tinta:     #141414;   /* negro del logotipo, no el gris del tema */
	--di-acento:    #2e2f8f;   /* índigo: ya era el del botón del boletín */
	--di-enlace:    #1a1adb;   /* azul de enlace en texto corrido */
	--di-papel:     #f5f3ef;   /* fondo cálido, de papel, no gris frío */
	--di-linea:     #e3dfd7;
	--di-suave:     #5e5e5e;

	/* Normaliza las fotos de banco, que vienen de fuentes dispares.
	   Para desactivarlo basta poner: none */
	--di-foto: saturate(0.88) contrast(1.06) brightness(1.01);
}

:root:not([data-scheme="light"]) {
	--di-papel-oscuro: #17171a;
}

/* --------------------------------------------------------------- Antetítulos
   La categoría sobre el titular deja de ser un adorno gris y pasa a ser
   la señal de sección: versalitas espaciadas en el color de marca. */

.cs-meta-category a,
.cs-meta-category .post-categories a {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	color: var(--di-acento) !important;
	text-decoration: none;
}

.cs-meta-category a:hover {
	color: var(--di-tinta) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

[data-scheme="dark"] .cs-meta-category a {
	color: #9aa0ff !important;
}

/* ------------------------------------------------------------------ Titulares
   Zilla Slab ya está puesta; aquí se ajusta lo que hace que un titular
   se lea bien: interlínea corta, letra ligeramente apretada y, sobre todo,
   equilibrio de líneas para que no quede una palabra suelta abajo. */

.cs-entry__title {
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.cs-entry__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--di-acento), var(--di-acento));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.cs-entry__title a:hover {
	color: var(--di-acento);
	background-size: 100% 2px;
}

.single .cs-entry__title {
	line-height: 1.08;
	letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------- Firma */

.cs-entry__post-meta {
	font-size: 0.8125rem;
}

.cs-meta-author-by {
	color: var(--di-suave);
}

.cs-meta-author-name {
	font-weight: 600;
}

.cs-meta-date {
	color: var(--di-suave);
}

/* ------------------------------------------------------------------- Fotos
   El sitio ilustra con banco de imágenes y cada foto viene con un color
   distinto. Un filtro común las iguala; al pasar el ratón recuperan su
   color, que da una sensación de material vivo sin ensuciar la retícula. */

.cs-entry__thumbnail img,
.cs-overlay-background img {
	filter: var(--di-foto);
	transition: filter 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-entry:hover .cs-overlay-background img,
.cs-entry:hover .cs-entry__thumbnail img {
	filter: none;
	transform: scale(1.025);
}

.cs-entry__overlay,
.cs-entry__thumbnail {
	overflow: hidden;
	border-radius: 3px;
}

/* ------------------------------------------------- Título de sección y archivo
   Único lugar donde entra la didona: en grande, que es donde luce, y
   enlazando con la línea «MÉXICO» del logotipo. */

.cs-page__title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
	font-weight: 500 !important;
	font-size: clamp(2.1rem, 5.5vw, 3.5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
}

.cs-page__archive-count {
	font-size: 0.8125rem;
	color: var(--di-suave);
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------- Títulos de widget */

.widget .wp-block-heading {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--di-tinta) !important;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--di-tinta);
	margin-bottom: 18px !important;
}

[data-scheme="dark"] .widget .wp-block-heading {
	color: #fff !important;
	border-bottom-color: #fff;
}

/* ------------------------------------------------------- Cuerpo del artículo
   Se ancla en la botonera compacta, que el plugin de compartir inserta
   siempre como primer elemento del contenido. Así se aplica al texto de la
   nota y nunca a los extractos de las tarjetas. */

.di-comp--compacta ~ p {
	font-size: 1.0625rem;
	line-height: 1.78;
	margin-bottom: 1.35em;
	color: #232323;
}

[data-scheme="dark"] .di-comp--compacta ~ p {
	color: #ddd;
}

.di-comp--compacta ~ p strong {
	font-weight: 650;
	color: var(--di-tinta);
}

[data-scheme="dark"] .di-comp--compacta ~ p strong {
	color: #fff;
}

.di-comp--compacta ~ p a {
	color: var(--di-enlace);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.di-comp--compacta ~ h2 {
	margin-top: 1.9em;
	margin-bottom: 0.6em;
	letter-spacing: -0.015em;
}

/* La entradilla, en cuerpo mayor: separa el resumen del desarrollo. */
.single .cs-entry__subtitle,
.single .cs-entry__excerpt {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--di-suave);
}

/* ------------------------------------------------------------------ Retícula */

.cs-posts-area__main-divider .cs-entry {
	border-color: var(--di-linea) !important;
}

.cs-divider,
hr {
	border-color: var(--di-linea);
}

/* --------------------------------------------------------- Botones y enlaces */

.cs-button,
button.wp-element-button,
.wp-block-button__link {
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ Teléfono */

@media (max-width: 767.98px) {
	.single .cs-entry__title {
		letter-spacing: -0.02em;
		line-height: 1.12;
	}

	.di-comp--compacta ~ p {
		font-size: 1.0625rem;
		line-height: 1.7;
	}
}

/* ----------------------------------------------------- Extractos de tarjeta
   El tema los sacaba a 18-20 px contra titulares de 24 px: a esa distancia
   el titular deja de mandar. Bajan a cuerpo de entradilla y respiran. */

body:not(.single) .cs-entry__excerpt {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--di-suave);
}

body:not(.single) .cs-entry__outer-xlarge .cs-entry__excerpt {
	font-size: 1.0625rem !important;
	line-height: 1.58 !important;
}

@media (max-width: 767.98px) {
	body:not(.single) .cs-entry__excerpt,
	body:not(.single) .cs-entry__outer-xlarge .cs-entry__excerpt {
		font-size: 0.9375rem !important;
		line-height: 1.58 !important;
	}
}

/* ------------------------------------------------------- Bloques de anuncio
   El recuadro gris se cambia por aire entre dos filetes y la palabra
   PUBLICIDAD arriba, en versalitas: se lee como corte editorial y no como
   un hueco. Si el anuncio no carga, lo que queda es un separador, no un vacío. */

.cs-banner.cs-banner-background {
	background: transparent !important;
	border-top: 1px solid var(--di-linea);
	border-bottom: 1px solid var(--di-linea);
	padding: 16px 0 20px !important;
}

.cs-banner__container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cs-banner__content {
	width: 100%;
	display: flex;
	justify-content: center;
}

.cs-banner__label {
	order: -1;
	font-size: 0.625rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9a9a9a !important;
	margin: 0 0 12px !important;
}

/* ----------------------------------------------------------------- Foco
   Navegación por teclado visible, en el color de marca. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--di-acento);
	outline-offset: 2px;
	border-radius: 2px;
}

/* La palabra PUBLICIDAD sólo tiene sentido si hay anuncio. Mientras AdSense
   no sirva, el espacio queda mudo en lugar de anunciar un vacío. */

.cs-banner__container:not(:has(iframe)) .cs-banner__label {
	visibility: hidden;
}

/* ========================================================= Cabeceras de sección
   Eran de 12 px en versalitas: invisibles. Una portada de periódico se lee
   por sus secciones, así que pasan a ser titulares de sección con filete,
   y el enlace de archivo se va a la derecha. */

.cs-heading {
	margin: 54px 0 26px !important;
}

.cs-heading__container {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--di-tinta);
}

.cs-heading__content {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
	font-size: clamp(1.5rem, 3vw, 2.125rem) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	color: var(--di-tinta) !important;
	margin: 0 !important;
}

.cs-heading__link {
	flex: 0 0 auto;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--di-acento) !important;
	text-decoration: none;
	white-space: nowrap;
}

.cs-heading__link:hover {
	color: var(--di-tinta) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

[data-scheme="dark"] .cs-heading__container {
	border-bottom-color: #fff;
}

[data-scheme="dark"] .cs-heading__content {
	color: #fff !important;
}

/* ------------------------------------------------------------ Nota de apertura
   La principal iba a 36 px, el mismo peso que una tarjeta cualquiera. En una
   portada la apertura tiene que ganar sola, sin ayuda de etiquetas. */

.home .cs-entry__outer-xlarge .cs-entry__title {
	font-size: clamp(1.9rem, 3.8vw, 2.75rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
}

@media (max-width: 767.98px) {
	.home .cs-entry__outer-xlarge .cs-entry__title {
		font-size: 1.75rem !important;
		line-height: 1.12 !important;
	}

	.cs-heading {
		margin: 38px 0 20px !important;
	}
}

/* ------------------------------------------------------------------- Cintillo
   Fecha y lema sobre la cabecera, sólo en portada. Da el aire de diario que
   la marca ya tenía en el logotipo y que el sitio no recogía por ningún lado. */

.di-cintillo {
	background: var(--di-papel);
	border-bottom: 1px solid var(--di-linea);
}

.di-cintillo__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 9px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--di-suave);
}

.di-cintillo__fecha {
	font-weight: 600;
	color: var(--di-tinta);
	letter-spacing: 0.07em;
}

.di-cintillo__lema {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

[data-scheme="dark"] .di-cintillo {
	background: #17171a;
	border-bottom-color: #343434;
}

@media (max-width: 782px) {
	.di-cintillo__lema {
		display: none;
	}
}

@media (max-width: 520px) {
	.di-cintillo__lugar {
		display: none;
	}

	.di-cintillo__inner {
		justify-content: center;
		padding: 7px 16px;
	}
}

/* ================================================================ Movimiento
   Todo lo de abajo es mejora progresiva: va dentro de @supports y se apaga
   solo con prefers-reduced-motion. Si el navegador no lo entiende, la página
   queda exactamente como está; nada se esconde esperando un efecto. */

/* --- Transición entre páginas (View Transitions) ---------------------------
   Al abrir una nota la portada se funde en lugar de parpadear en blanco.
   Corta: 0.2 s. Más que eso se siente lento en un sitio de noticias. */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* --- Entrada de las tarjetas al asomar (scroll-driven animations) ----------
   Sin JavaScript ni IntersectionObserver: lo lleva el compositor, así que no
   cuesta cuadros. 16 px de recorrido, lo justo para que se note el ritmo. */

@keyframes di-asoma {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cs-main-content .cs-entry {
			animation: di-asoma linear both;
			animation-timeline: view();
			animation-range: entry 2% entry 38%;
		}
	}
}

/* --- Barra de avance de lectura -------------------------------------------
   Sólo en las notas. Sin soporte se queda en scaleX(0): invisible. */

.di-progreso {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--di-acento);
	z-index: 9999;
	pointer-events: none;
}

@keyframes di-avance {
	to {
		transform: scaleX(1);
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.di-progreso {
			animation: di-avance linear;
			animation-timeline: scroll(root block);
		}
	}
}

/* --- Viudas y huérfanas ----------------------------------------------------
   text-wrap: pretty evita la palabra sola al final del párrafo. */

.di-comp--compacta ~ p,
.cs-entry__excerpt,
.cs-entry__subtitle {
	text-wrap: pretty;
}

/* El tema recorta el desbordamiento horizontal en <body>, y eso convierte
   al body en contenedor de scroll: las animaciones con view() se quedan
   inertes porque ese contenedor no desplaza. El recorte se sube a <html>,
   que sí es el que desplaza, y el cronómetro vuelve a correr. */

html {
	overflow-x: hidden;
}

body {
	overflow-x: visible;
}

/* --------------------------------------------------------- Credito de foto
   Sale justo debajo de la imagen destacada, antes de los botones de
   compartir. Solo aparece si la imagen tiene pie. */

.di-credito {
	margin: -6px 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--di-linea);
	font-size: 0.75rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: #8a8a8a;
}

.di-credito a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.di-credito a:hover {
	color: var(--di-acento);
}

[data-scheme="dark"] .di-credito {
	color: #9a9a9a;
}

/* El tema tambien pinta el pie de foto, pero ESCAPADO: el HTML sale a la
   vista y nunca podra llevar enlace. Se oculta el suyo y se deja el nuestro,
   que si enlaza a la fuente como exigen las licencias CC. */

.cs-entry__thumbnail-caption {
	display: none;
}

/* El logotipo chico de la barra pegajosa sobra: el grande ya esta arriba y
   repetirlo a 91 px se ve apretado. Se acota a la barra de ESCRITORIO: el
   tema reutiliza ahi la clase cs-logo-mobile, y el logotipo de verdad del
   movil vive en .cs-header__inner-mobile y en el menu lateral. */
.cs-header__inner-desktop .cs-col-left .cs-logo-mobile {
	display: none;
}