/* =================================================================
   single-news.css — Detalle de News (single.php, Figma
   08-News-Details-Desktop, node-id=2511-3647). Header/metadatos/hero/
   acciones (.post-page/.post__col/.post-tag/.post__title/.post__hero/
   .post__actions/.post__share) se comparten con posts legacy (con
   original_id, ver dia_is_legacy() en inc/legacy-media.php) desde
   2026-07-10 — antes esos ~5.808 posts migrados se quedaban sin tags/
   tiempo de lectura/imagen de respaldo/botón compartir (bug real
   reportado). Solo el CUERPO difiere: legacy usa .post__content
   .legacy-content (legacy.css, HTML crudo sin tocar) en vez de
   .post-content.modern-content (más abajo).
   Breakpoint estándar 80rem (§12) para el wrap full-bleed de página (líneas 23/671) — más el
   48rem habitual de retoques mobile en varios bloques, y un 64rem propio en el lightbox de
   galería (layout lado-a-lado → columna, confirmado visualmente 2026-07-13 en newdia.nett.mx).
   ================================================================= */

@layer views {
	/* ---- Wrap de ancho de página (mismo patrón que news-page/home-news, §12.41) ---- */
	.post-page {
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
		/* Separación con el header: 48px desktop, ~30px mobile (pedido explícito del usuario) —
		   fluido en vez de un salto brusco en el breakpoint. */
		padding-top: clamp(1.875rem, 1.5rem + 1vw, 3rem);
	}
	@media (width >= 80rem) {
		.post-page { padding-inline: 0; }
	}
	.post-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Columna de texto (790px en el Figma, centrada dentro de los 1200 del container) — SOLO
	   la imagen destacada rompe este ancho (full-bleed, ver .post__hero). ---- */
	.post__col {
		max-width: 49.375rem; /* 790px */
		margin-inline: auto;
	}

	.post__tags {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}
	.post-tag {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 100%;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
		text-decoration: none;
	}
	a.post-tag--category { color: var(--dia-color-brand-primary, #2d5480); }
	a.post-tag:hover { text-decoration: underline; }
	.post-tag svg { width: 16px; height: 16px; flex-shrink: 0; }
	/* Trimea a 1 línea en vez de envolver cuando no cabe (pedido explícito del usuario, mismo
	   criterio que .news-tag__label en news.css): min-width:0 es lo que le permite a un hijo flex
	   encogerse por debajo de su contenido para que el ellipsis tenga algo que recortar. */
	.post-tag span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		min-width: 0;
	}
	.post__tags-divider { width: 1px; height: 16px; background: #e5e5e5; flex-shrink: 0; }

	.post__title {
		margin: 0 0 32px;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.125rem); /* hasta 50px desktop */
		line-height: 1.3;
		letter-spacing: -1px;
		color: var(--dia-color-text-primary, #121212);
	}

	/* ---- Autor + fecha/lugar (border-top separador, Figma "author info") ---- */
	.post__author-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-s);
		padding-block: 16px;
		border-top: 1px solid #eceef0;
	}
	.post__author { display: flex; align-items: center; gap: 16px; }
	.post__avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	/* Sin foto de autor: iniciales sobre fondo de marca — mismo criterio que describe el
	   componente "Avatar" del design system (imagen > iniciales > ícono genérico). */
	.post__avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--dia-color-brand-primary, #2d5480);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 14px;
		flex-shrink: 0;
	}
	.post__author-name {
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.post__meta {
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.post__meta span {
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
	}
	.post__meta-divider { width: 1px; height: 18px; background: #e5e5e5; flex-shrink: 0; }

	/* ---- Imagen destacada: full-bleed (rompe el ancho de .post__col a propósito, ver Figma). ----
	   margin-top/bottom NO simétricos a propósito (antes 24px parejo): pedido explícito 2026-07-06,
	   distancia real de 24px arriba Y abajo de la imagen — pero .post__author-row (arriba) ya
	   aporta 16px propios de padding-bottom, y .post__actions (abajo) ya aporta 24px propios de
	   padding-top, así que ambos se SUMAN al margin de acá si no se descuenta: antes quedaba 40px
	   arriba (16+24) y 48px abajo (24+24), no 24. */
	.post__hero {
		aspect-ratio: 1200 / 750;
		border-radius: var(--dia-radius-md, 6px);
		overflow: hidden;
		margin-top: 8px; /* 24 - 16px (padding-bottom de .post__author-row) */
		margin-bottom: 0; /* 24 - 24px (padding-top de .post__actions) */
	}
	.post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

	/* ---- Acciones (escuchar/compartir), border-bottom separador ---- */
	.post__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		flex-wrap: wrap;
		padding-block: 24px;
		border-bottom: 1px solid #eceef0;
		margin-bottom: 48px;
	}
	.post__listen,
	.post__share {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border-radius: 4px;
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.post__listen {
		padding: 17px 24px;
		border: 1px solid var(--dia-color-border-strong, #232323);
	}
	/* "Escuchar el artículo" es solo visual por ahora (sin reproductor real todavía, decisión
	   explícita del usuario) — disabled de verdad, no un botón falso que parece funcionar y no
	   hace nada. */
	.post__listen:disabled { opacity: .5; cursor: not-allowed; }
	.post__share {
		padding: 10px 16px;
		border: 0;
		cursor: pointer;
	}
	/* Mismo gris plano que el resto de los hovers del tema (p.ej. .project-filter-dropdown__item:hover,
	   archive-project.css) — antes era solo un subrayado, sin relación visual con los demás botones. */
	.post__share:hover { background: var(--dia-color-border-subtle, #f3f4f6); }
	.post__listen svg,
	.post__share svg { width: 16px; height: 16px; }
	/* Feedback de "copiado" (post-share.js): fallback cuando el navegador no soporta Web Share
	   API — normal/text-transform propio porque .post__share es todo mayúsculas/tracking ancho, y
	   este mensaje corto se lee mejor sin ese tratamiento. */
	.post__share-feedback {
		display: none;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		color: var(--dia-color-text-secondary, #767778);
	}
	.post__share.is-copied .post__share-feedback { display: inline; }
	.post__share.is-copied .post__share-label { display: none; }

	/* ---- Cierre del artículo (Figma nodo 2741:4866): "Traducción de X" + 2do botón de compartir,
	   MISMO componente que .post__actions arriba (post__share_btn() en single.php lo arma una sola
	   vez). Sin traductor (news_traductor vacío), el share queda solo — se empuja a la derecha en
	   vez de quedar pegado a la izquierda por default de un flex de 1 solo hijo. ---- */
	.post__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding-top: 30px;
		margin-top: 48px;
		border-top: 1px solid #e5e5e5;
	}
	.post__footer--share-only .post__share { margin-left: auto; }

	/* =============================================================
	   Contenido (the_content(), editor WYSIWYG) — estilo genérico de
	   prosa para lo que el editor pueda producir: encabezados,
	   párrafos, listas, imágenes+leyenda, tablas, citas, galerías.
	   NO intenta replicar 1:1 el mosaico de fotos ni el fondo con
	   blur/glow de la cita del Figma (piden una imagen específica que
	   un blockquote/galería normales no traen) — decisión explícita
	   del usuario: "lo más que podremos hacer es un estilo para
	   tablas, galerías, blockquote, etc.".
	   ============================================================= */
	.post-content.modern-content {
		font-family: var(--font-sans);
		font-size: 20px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}
	.post-content.modern-content > * + * { margin-top: 32px; }
	.post-content.modern-content h2 {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.post-content.modern-content h3 {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 28px;
		color: var(--dia-color-text-primary, #121212);
	}
	.post-content.modern-content p,
	.post-content.modern-content li { font-size: 20px; line-height: 32px; }
	.post-content.modern-content ul,
	.post-content.modern-content ol { padding-left: 1.5rem; }
	.post-content.modern-content li + li { margin-top: 8px; }
	.post-content.modern-content a {
		color: var(--dia-color-brand-primary, #2d5480);
		text-decoration: underline;
	}
	.post-content.modern-content strong { font-weight: 700; }

	/* Imagen suelta o dentro de <figure> (con o sin <figcaption>) — mismo tratamiento que "Image
	   and caption" del Figma: imagen redondeada, leyenda chica gris con separador debajo.
	   !important en max-width/height: contenido pegado desde el editor WYSIWYG suele traer
	   width/height inline (style="width:790px" o atributos width/height del <img>) que le gana a
	   cualquier regla externa por especificidad — sin esto, esas imágenes rompían el layout en
	   mobile desbordando el ancho de .post__col (bug real reportado por el usuario). El width:100%
	   normal (sin !important) es el "tamaño deseado" cuando no hay conflicto; max-width/height sí
	   necesitan forzarse porque son los que evitan el desborde real. */
	.post-content.modern-content img {
		width: 100%;
		max-width: 100% !important;
		height: auto !important;
		border-radius: var(--dia-radius-md, 6px);
		display: block;
	}
	/* margin-block:48px — pedido explícito 2026-07-06: separa la imagen+caption del texto que la
	   rodea. Los <figure> de la galería (.wp-block-gallery/.gallery, ítems de un grid) NO deben
	   heredar esto — se resetea a 0 en su propia regla más abajo, donde ya se pisan otras
	   propiedades de este mismo selector base. !important necesario: WP core (block-library)
	   define `:where(figure) { margin: 0 0 1em; }` SIN @layer — sin capa le gana a esta regla
	   aunque viva en @layer views con más especificidad, mismo gotcha ya documentado en este
	   archivo (§12.1, ver comentario del swiper-bundle más abajo). */
	.post-content.modern-content figure { margin-block: 48px !important; margin-inline: 0; max-width: 100%; }

	/* Video de YouTube pegado como liga suelta en el editor: WP lo autoconvierte (oEmbed) a un
	   <iframe width="500" height="281"> DENTRO de un <p> normal, sin wrapper propio (.wp-embed-*)
	   — a diferencia de un bloque "Embed" real de Gutenberg. Sin display:block, el iframe es inline
	   y queda pegado a la izquierda del <p> (comportamiento por default de un elemento inline en un
	   contenedor de texto). margin-inline:auto lo centra una vez que es block. max-width/height
	   responsivos (no el 500×281 fijo que trae el HTML del embed) para que no se desborde en mobile
	   — aspect-ratio 16/9 es la proporción real de YouTube (500/281 ≈ 1.779 ≈ 16/9), no hace falta
	   leerla del width/height inline del iframe. !important en max-width/height por el mismo motivo
	   que .post-content.modern-content img (arriba): los atributos width/height inline del iframe
	   le ganan por especificidad a una regla externa sin él. */
	.post-content.modern-content iframe {
		display: block;
		margin-inline: auto;
		width: 100%;
		max-width: 100% !important;
		aspect-ratio: 16 / 9;
		height: auto !important;
		border-radius: var(--dia-radius-md, 6px);
	}
	/* Red de seguridad: cualquier envoltorio que el editor haya pegado con un ancho fijo inline
	   (div/span/etc., no solo <img>/<figure>) tampoco puede exceder la columna de texto. Esto SÍ
	   aplica también a .tiled-gallery (mosaico, ver bloque dedicado más abajo): a diferencia del
	   viejo plugin de Jetpack, el layout nuevo es 100% CSS fluido (flexbox + calc()), no necesita
	   ninguna excepción para medirse en JS — eliminado 2026-07-07 junto con el plugin. */
	.post-content.modern-content * { max-width: 100%; }
	.post-content.modern-content figcaption {
		margin-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #e5e5e5;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #777;
	}

	/* Tabla: fila de encabezado azul-gris, filas de cuerpo alternadas (par = fondo subtle) — mismo
	   patrón de color que .news-pill[aria-current] (#e6eaf0), reusado acá para la cabecera. */
	.post-content.modern-content table {
		width: 100%;
		border-collapse: collapse;
		border: 1px solid #e5e5e5;
		border-radius: var(--dia-radius-md, 6px);
		overflow: hidden;
	}
	.post-content.modern-content th,
	.post-content.modern-content td {
		padding: 16px;
		text-align: left;
		border-bottom: 1px solid #e5eaf0;
	}
	.post-content.modern-content tr:last-child th,
	.post-content.modern-content tr:last-child td { border-bottom: 0; }
	.post-content.modern-content thead th {
		background: #e6eaf0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 18px;
		line-height: 24px;
	}
	.post-content.modern-content td { font-size: 20px; line-height: 32px; }
	.post-content.modern-content tbody tr:nth-child(even) td {
		background: var(--dia-color-bg-subtle, #fafbfb);
	}

	/* ---- Cita (Figma nodo 2577:5795) — fotos reales del diseñador (ya no la versión flat de
	   color sólido): --quote-bg/--quote-mark-bg son variables CSS puestas vía PHP en
	   .post-content.modern-content (single.php), mismo patrón que --hero-home-bg (hero-home.php)
	   — asset ESTÁTICO del tema, nunca se hardcodea la URL directo en este archivo (§4.1). Ambas
	   imágenes YA traen las esquinas redondeadas incorporadas (exportadas con transparencia
	   alrededor) — por eso NO lleva overflow:hidden (a diferencia de otros usos de border-radius
	   en este archivo): el sello (::before) sobresale a propósito por ARRIBA del borde de la caja
	   (top:-24px), y overflow:hidden se lo recortaría.
	   Estructura calcada del Inspect: el sello (::before) es absoluto, 90x90, en top:-24px
	   left:48px — se ENCIMA sobre la esquina superior izquierda de la caja, poke hacia arriba del
	   borde. Su borde inferior (top:-24 + 90 alto = 66px desde el borde de la caja) queda POR
	   ENCIMA de donde arranca el texto (padding-top:80px) — nunca se solapan, así que el
	   padding-left NO necesita reservarle espacio propio al sello (números literales del Inspect,
	   102/48/80 — no un cálculo propio para "esquivarlo"). Texto alineado a la derecha (pedido
	   explícito del usuario, calca el Inspect): no es text-align, es el PÁRRAFO angosto (556px,
	   igual al Inspect) empujado a la derecha vía margin-left:auto, dentro del área con padding. ---- */
	.post-content.modern-content blockquote {
		position: relative;
		/* margin-top propio (no el margin-top:32px genérico de ".modern-content > * + *"): el
		   sello (::before) se encima 24px por ENCIMA del borde de la caja — con solo 32px de aire
		   antes, se montaba sobre el párrafo anterior (bug real reportado con screenshot). 64px le
		   deja al sello un buen colchón sin pisar nada. */
		margin: 64px 0 32px;
		padding: 80px 48px 80px 102px;
		border-radius: var(--dia-radius-lg, 12px);
		background: var(--dia-color-border-strong, #232323) var(--quote-bg) center/cover no-repeat;
		color: var(--dia-color-text-inverse, #fff);
	}
	/* Glifo de comillas como SVG vectorial (data-URI, exportado del Figma por el usuario) — NO el
	   carácter Unicode “ con font-size:90px que se probó primero: la tinta visible de ESE glifo
	   queda pegada arriba dentro de su caja de línea (quirk típico de tipografía en comillas
	   elevadas), así que por más que el flex lo centrara, se veía descentrado sin arreglo fino por
	   CSS. Un ícono vectorial no tiene ese problema — se centra de verdad con align-items/
	   justify-content. */
	.post-content.modern-content blockquote::before {
		content: '';
		position: absolute;
		top: -24px;
		left: 48px;
		width: 90px;
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 11px;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30' fill='none'%3E%3Cpath d='M26.7595 29.2797C24.9995 29.2797 23.3995 28.5597 21.9595 27.1197C20.5195 25.6797 19.7995 23.3597 19.7995 20.1597C19.7995 15.9197 20.9995 11.9197 23.3995 8.15968C25.7995 4.31969 29.6795 1.59969 35.0395 -0.00031805V2.87968C32.6395 3.59968 30.6395 4.67968 29.0395 6.11968C27.4395 7.55968 26.2395 9.11968 25.4395 10.7997C24.7195 12.3997 24.3595 13.8797 24.3595 15.2397C24.3595 16.0397 24.5995 16.7597 25.0795 17.3997C25.6395 17.9597 26.2795 18.4397 26.9995 18.8397C27.7995 19.2397 28.5595 19.6797 29.2795 20.1597C29.9995 20.6397 30.5995 21.2397 31.0795 21.9597C31.5595 22.6797 31.7995 23.5597 31.7995 24.5997C31.7995 26.1197 31.2795 27.2797 30.2395 28.0797C29.2795 28.8797 28.1195 29.2797 26.7595 29.2797ZM7.07953 29.2797C5.23953 29.2797 3.59953 28.5597 2.15953 27.1197C0.719532 25.6797 -0.000468582 23.3597 -0.000468582 20.1597C-0.000468582 15.9197 1.19953 11.9197 3.59953 8.15968C5.99953 4.31969 9.87953 1.59969 15.2395 -0.00031805V2.87968C12.9195 3.59968 10.9595 4.67968 9.35953 6.11968C7.75953 7.55968 6.55953 9.11968 5.75953 10.7997C5.03953 12.3997 4.67953 13.8797 4.67953 15.2397C4.67953 16.0397 4.91953 16.7597 5.39953 17.3997C5.87953 17.9597 6.47953 18.4397 7.19953 18.8397C7.99953 19.2397 8.75953 19.6797 9.47953 20.1597C10.1995 20.6397 10.7995 21.2397 11.2795 21.9597C11.8395 22.6797 12.1195 23.5597 12.1195 24.5997C12.1195 26.1197 11.5995 27.2797 10.5595 28.0797C9.51953 28.8797 8.35953 29.2797 7.07953 29.2797Z' fill='white'/%3E%3C/svg%3E") center/36px 30px no-repeat,
			#45413f var(--quote-mark-bg) center/cover no-repeat;
	}
	/* Texto de la cita: Noto Serif Condensed ExtraLight. Confirmado con el usuario: 40px en
	   desktop, 34px recién a partir de tablet (48rem/768px) — mobile angosto (~375px) debe quedar
	   MÁS CHICO que 34, no plano igual que tablet. La fórmula del medio está calculada para pasar
	   EXACTO por 34px a los 768px y por 40px a los 1280px (80rem, el breakpoint desktop estándar
	   del archivo) — abajo de 768px sigue bajando (no se achata en 34) hasta el piso de 28px
	   (1.75rem) para teléfonos angostos. line-height:1.25 es proporción (50/40 del Inspect), no un
	   valor fijo — escala solo con cambiar el font-size. */
	.post-content.modern-content blockquote,
	.post-content.modern-content blockquote p {
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 200;
		font-size: clamp(1.75rem, 1.5625rem + 1.172vw, 2.5rem); /* 28px mobile → 34px @768px → 40px @1280px */
		line-height: 1.25; /* 50/40 (Inspect) */
	}
	.post-content.modern-content blockquote p {
		margin: 0;
		max-width: 556px;
		margin-left: auto;
	}

	/* Galería (bloque core "Galería" de WP) — grid parejo con esquinas redondeadas, sin intentar
	   el mosaico asimétrico del Figma (ese depende de una cantidad/orden fijo de imágenes). */
	.post-content.modern-content .wp-block-gallery,
	.post-content.modern-content .gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		list-style: none;
		padding: 0;
	}
	/* Ítem de la galería (figure.wp-block-image dentro del figure.wp-block-gallery — bloque core
	   "Galería" de Gutenberg): position:relative ancla el overlay de hover; overflow:hidden lo
	   recorta a los 6px redondeados junto con la imagen. */
	.post-content.modern-content .wp-block-gallery figure,
	.post-content.modern-content .gallery figure {
		position: relative;
		border-radius: 6px;
		overflow: hidden;
		margin: 0; /* pisa el margin-block:48px de la regla base — acá es un ítem de grid, no una
			imagen suelta con caption, el margen rompería el grid. */
	}
	/* La leyenda de cada foto NO se muestra en el grid (a diferencia de "Imagen suelta" arriba,
	   que sí la muestra) — Figma no la trae ahí, solo dentro del lightbox al hacer click (donde
	   post-gallery-lightbox.js ya la lee de este mismo <figcaption>, sigue existiendo en el DOM
	   para eso, solo se oculta visualmente acá). Bug real reportado con screenshot: se veía debajo
	   de cada foto en el grid. */
	.post-content.modern-content .wp-block-gallery figcaption,
	.post-content.modern-content .gallery figcaption {
		display: none;
	}
	.post-content.modern-content .wp-block-gallery img,
	.post-content.modern-content .gallery img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		cursor: zoom-in;
	}
	/* Overlay de hover: gradiente oscuro abajo → transparente arriba + blur sobre la foto + lupa
	   centrada — spec literal del diseñador. Blur y lupa en el MISMO ::after: el gradiente (aunque
	   parcialmente transparente arriba) ya alcanza para que backdrop-filter tenga algo que
	   desenfocar; la lupa se agrega como un 2do "background" en la misma propiedad (data-URI, sin
	   depender de dia_icon() — un ::after no puede llevar el <svg> real que devuelve esa función). */
	.post-content.modern-content .wp-block-gallery figure::after,
	.post-content.modern-content .gallery figure::after {
		content: '';
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity .2s ease;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M14.6667 25.3333C20.5577 25.3333 25.3333 20.5577 25.3333 14.6667C25.3333 8.77563 20.5577 4 14.6667 4C8.77563 4 4 8.77563 4 14.6667C4 20.5577 8.77563 25.3333 14.6667 25.3333Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.9992 28.0002L22.1992 22.2002' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.668 10.667V18.667' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.668 14.667H18.668' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px 32px no-repeat,
			linear-gradient(0deg, #121212 0%, rgba(18, 18, 18, 0) 100%);
		backdrop-filter: blur(5px);
		pointer-events: none;
	}
	.post-content.modern-content .wp-block-gallery figure:hover::after,
	.post-content.modern-content .gallery figure:hover::after,
	.post-content.modern-content .wp-block-gallery figure:focus-within::after,
	.post-content.modern-content .gallery figure:focus-within::after { opacity: 1; }
	@media (width < 48rem) {
		.post-content.modern-content .wp-block-gallery,
		.post-content.modern-content .gallery { grid-template-columns: repeat(2, 1fr); }
	}

	/* ---- Mosaico real del sitio (2026-07-07: reconstruido 100% en CSS, YA NO depende del plugin
	   "Tiled Galleries Carousel Without Jetpack" — su layout se media con JS/jQuery en pixeles y
	   tenía una condición de carrera real con la carga de imágenes: si el script corría antes de
	   que TODAS las <img> reportaran `.complete`, el "ancho original" que graba quedaba mal y las
	   fotos se cortaban a la derecha hasta el siguiente resize real (por eso "se arreglaba solo" al
	   abrir devtools). Tampoco tenía NINGÚN media query — en mobile solo achicaba proporcionalmente
	   la misma cuadrícula de desktop, nunca apilaba a 1 imagen por fila. Bug real reportado con
	   captura. Ver inc/gallery.php (dia_native_gallery_shortcode()/dia_gallery_mosaic_html()) para
	   el render PHP nuevo — el plugin sigue instalado pero nuestro filtro corre primero y lo deja
	   sin efecto, sin tocarlo.

	   Layout por BLOQUES DE 3 (pedido explícito 2026-07-07, con mockup de referencia — un primer
	   intento con flexbox + aspect-ratio real de cada foto quedaba "achaparrado": una foto sola al
	   final de fila se estiraba a todo el ancho con una altura de fila chica fija, sin importar su
	   proporción real). Ya NO se usa la proporción real de la foto para decidir el tamaño — cada
	   bloque de 3 fotos consecutivas se arma como 2 apiladas (mitad de alto c/u) + 1 grande (todo
	   el alto del bloque, .tiled-mosaic__big), alternando de qué lado va la grande por bloque (PHP
	   decide el orden, ver dia_gallery_mosaic_html()). El resto, si el total no es múltiplo de 3:
	   sobran 2 → .tiled-mosaic__pair (2 fotos lado a lado, mismo alto); sobra 1 →
	   .tiled-mosaic__solo (esa foto sola, a su proporción NATURAL, sin recorte — como una imagen
	   suelta normal del artículo). Clases (.tiled-gallery, .tiled-gallery-item, <figcaption>) a
	   propósito IGUALES a las que ya lee post-gallery-lightbox.js — cero cambios ahí. */
	.post-content.modern-content .tiled-gallery {
		/* margin-top:32px !important: mismo motivo que .post-content.modern-content figure más
		   arriba (§12.1) — WP core define reglas sin @layer para algunos selectores; esta
		   separación con el texto de arriba necesita ganar sin importar qué más cargue. */
		margin-top: 32px !important;
		display: flex;
		flex-direction: column;
		gap: 6px;
		/* clamp (no un valor fijo): a partir de 768px (fin del stack mobile, media query de abajo)
		   .post__col NO tiene los 790px completos todavía — el padding-inline fluido de .post-page
		   (clamp() de arriba) le come ancho real hasta que el viewport llega a los ~80rem donde ese
		   padding se va a 0. El mínimo de cada clamp deja el bloque/par utilizables incluso en la
		   columna más angosta de ese rango; el máximo es el valor "de sobra" para escritorio
		   completo (--tm-block-h más alto que --tm-pair-h: el bloque tiene que caber una foto
		   grande + 2 chicas apiladas, el par nomás 2 fotos side-by-side). */
		--tm-block-h: clamp(280px, 34vw, 460px);
		--tm-pair-h: clamp(200px, 24vw, 320px);
	}
	/* min-height:0 en .block/.stack/.big (abajo): sin esto, el "grid blowout" clásico — un grid
	   item por default tiene min-height:auto, que lo obliga a no encogerse más allá del tamaño
	   NATURAL (aspect-ratio) de su contenido. La fila implícita de .block (sin grid-template-rows
	   propio) terminaba midiéndose por ese mínimo del contenido de .stack, no por el `height`
	   fijo de acá — .block se quedaba en su alto declarado pero .stack/.big medían más (bug real
	   reportado: el mosaico se veía como una lista de filas sueltas en vez de bloque+grande,
	   porque .big terminaba con la altura natural de SU imagen en vez de estirarse al alto del
	   bloque). min-height:0 en la cadena completa (block → stack/big → figure) deja que el grid
	   real (`height` de acá) gane sobre el contenido. */
	.post-content.modern-content .tiled-mosaic__block {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		height: var(--tm-block-h);
		min-height: 0;
	}
	/* La columna de la foto grande no es 50/50 con la apilada — 2fr/1fr (66/33, pedido explícito
	   2026-07-07 con mockup de referencia). --big-left/--big-right (clase que ya arma el PHP según
	   $dia_big_first, ver dia_gallery_mosaic_html()) decide cuál de las dos columnas del grid es la
	   ancha, sin depender del orden de los hijos en el DOM. */
	.post-content.modern-content .tiled-mosaic__block--big-left { grid-template-columns: 2fr 1fr; }
	.post-content.modern-content .tiled-mosaic__block--big-right { grid-template-columns: 1fr 2fr; }
	.post-content.modern-content .tiled-mosaic__stack,
	.post-content.modern-content .tiled-mosaic__big {
		min-height: 0;
	}
	.post-content.modern-content .tiled-mosaic__stack {
		display: grid;
		grid-template-rows: 1fr 1fr;
		gap: 6px;
	}
	.post-content.modern-content .tiled-mosaic__pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		height: var(--tm-pair-h);
	}
	/* .tiled-gallery-item ya es <figure> — height:100% acá (no un alto propio) para que llene la
	   celda que le tocó (grid del bloque/stack/par, arriba), sea cual sea. min-height:0 por el
	   mismo motivo que arriba: esta figure es a su vez un grid item de .stack (2 filas), que sufre
	   el mismo blowout si no se lo decimos explícitamente. */
	.post-content.modern-content .tiled-mosaic__block .tiled-gallery-item,
	.post-content.modern-content .tiled-mosaic__pair .tiled-gallery-item {
		height: 100%;
		min-height: 0;
	}
	.post-content.modern-content .tiled-gallery-item {
		position: relative;
		/* !important: la regla base ".post-content.modern-content figure" (arriba) fija su
		   margin-block:48px con !important (necesita ganarle a WP core, ver ese comentario) — sin
		   iguales armas acá, ese margen le ganaba a este reset (bug real reportado: hueco enorme
		   entre bloques del mosaico). */
		margin: 0 !important;
		border-radius: 6px;
		overflow: hidden;
	}
	/* !important en height (NO en width, que ya gana sin él): la regla genérica de arriba
	   (".post-content.modern-content img", imagen suelta) fija `height: auto !important` — mismo
	   @layer (views), pero al ser !important le gana a esta regla aunque tenga MÁS especificidad
	   (3 clases vs. 2) sin su propio !important: un !important siempre gana sobre uno normal antes
	   de mirar especificidad. Confirmado inspeccionando computed styles en vivo (newdia.nett.mx,
	   2026-07-07): sin este !important el <img> del mosaico caía a su alto natural (según sus
	   atributos HTML width/height), sin llenar la celda del grid. */
	.post-content.modern-content .tiled-gallery-item img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
		cursor: zoom-in;
	}
	/* .tiled-mosaic__solo (sobra 1 foto, sin pareja para .tiled-mosaic__pair ni bloque completo):
	   ancho completo, alto AUTOMÁTICO según su proporción real — a diferencia del resto del
	   mosaico, acá SÍ importa ver la foto completa sin recorte, como cualquier imagen suelta del
	   artículo. object-fit:initial (no cover) porque esta celda no tiene un alto fijo que recortar. */
	.post-content.modern-content .tiled-mosaic__solo .tiled-gallery-item { height: auto; }
	.post-content.modern-content .tiled-mosaic__solo .tiled-gallery-item img {
		height: auto;
		object-fit: initial;
	}
	/* La leyenda NO se muestra en el mosaico (a diferencia de "Imagen suelta" arriba) — solo vive
	   dentro del lightbox, que la lee de este mismo <figcaption> (post-gallery-lightbox.js). */
	.post-content.modern-content .tiled-gallery-item figcaption { display: none; }
	.post-content.modern-content .tiled-gallery-item::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 6px;
		opacity: 0;
		transition: opacity .2s ease;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M14.6667 25.3333C20.5577 25.3333 25.3333 20.5577 25.3333 14.6667C25.3333 8.77563 20.5577 4 14.6667 4C8.77563 4 4 8.77563 4 14.6667C4 20.5577 8.77563 25.3333 14.6667 25.3333Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.9992 28.0002L22.1992 22.2002' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.668 10.667V18.667' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.668 14.667H18.668' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px 32px no-repeat,
			linear-gradient(0deg, #121212 0%, rgba(18, 18, 18, 0) 100%);
		backdrop-filter: blur(5px);
		pointer-events: none;
	}
	.post-content.modern-content .tiled-gallery-item:hover::after,
	.post-content.modern-content .tiled-gallery-item:focus-within::after { opacity: 1; }
	/* Mobile (pedido explícito 2026-07-07): 1 imagen por fila, 100% del ancho, proporción NATURAL
	   (sin recorte) — el patrón "2 apiladas + 1 grande" solo tiene sentido con 2 columnas de
	   ancho real; en 1 columna se colapsa TODO (bloque, apiladas, par) a una lista simple vertical,
	   igual que .tiled-mosaic__solo de arriba. */
	@media (width < 48rem) {
		.post-content.modern-content .tiled-mosaic__block,
		.post-content.modern-content .tiled-mosaic__stack,
		.post-content.modern-content .tiled-mosaic__pair {
			display: flex;
			flex-direction: column;
			height: auto;
		}
		.post-content.modern-content .tiled-gallery-item {
			height: auto !important;
		}
		.post-content.modern-content .tiled-gallery-item img {
			height: auto;
			object-fit: initial;
		}
	}

	/* ---- Noticias relacionadas (Figma nodo 2519:2775) — reusa .news-card--flat de
	   home-news.css (mismo componente "Article Card"), carrusel Swiper igual que
	   home-news__swiper (ver single-news-slider.js). Fondo #E6EAF0 pedido explícito del usuario
	   (mismo azul-gris que el fondo del pill activo/header de tabla en news.css). ---- */
	.related-news {
		/* margin-top (no padding-top): con padding, esos 80px quedaban PINTADOS del mismo gris
		   #e6eaf0 de la sección — no se leía como separación real (bug real reportado: "sigue sin
		   verse"). margin-top deja ese espacio en blanco (fondo de la página) antes de que
		   arranque la caja gris, que es la separación visible que se pidió. 80px desktop,
		   proporcional hacia abajo en tablet/mobile. */
		margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* 40px → 80px */
		padding-block: clamp(3rem, 6vw, 5.625rem);
		background: #e6eaf0;
		/* Mismo padding-inline fluido que .post-page (§12.41) — .post-page__inner (reusado acá) no
		   trae padding propio, depende SIEMPRE de un ancestro que sí lo tenga; .related-news es su
		   propia <section>, no vive dentro de .post-page, así que sin esto las cards quedaban
		   pegadas al borde en mobile (bug real reportado, screenshot 2). */
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.related-news { padding-inline: 0; }
	}
	/* Tipografía: .label-featured-section (base.css) — cambiado 2026-07-13 de heading grande
	   (antes clamp hasta 60px, mismo criterio que .news-header__title) a eyebrow chico, pedido
	   explícito del usuario. Solo el margin-bottom queda propio de acá (48px desktop, no los 24px
	   de --space-m, proporcional en mobile). */
	.related-news__title {
		margin: 0 0 clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	}
	/* Sin width propio: Swiper calcula el ancho del slide vía slidesPerView (single-news-slider.js)
	   e ignoraría un width fijo puesto acá — mismo criterio que .home-news__swiper (home-news.css). */
	.related-news__swiper .swiper-slide { height: auto; }

	/* Dots de paginación — pedido explícito de David, mismo look que .home-news__dots
	   (home-news.css, Figma 2510:2310): círculos de 12px, #E5E5E5 inactivo / #CDD6E1 activo.
	   !important necesario por el mismo motivo (swiper-bundle.min.css sin @layer le gana a
	   cualquier regla en @layer por spec, §12.1/§12.22). */
	.related-news__dots {
		display: flex; justify-content: center; align-items: center;
		gap: 8px;
		margin-top: var(--space-l);
	}
	.related-news__dots .swiper-pagination-bullet {
		width: 12px !important; height: 12px !important;
		border-radius: 50% !important;
		background: #e5e5e5 !important;
		opacity: 1 !important;
		cursor: pointer;
		transition: background-color .15s;
	}
	.related-news__dots .swiper-pagination-bullet-active {
		background: #cdd6e1 !important;
	}

	/* ---- Mobile (Figma 07-News-Mobile, node-id=3607-14568): mismo contenido, reacomodado a
	   columna — tags apilados (sin el pipe suelto, que en esa fila no conecta nada), autor/fecha
	   apilados, acciones y cierre centrados en columna. ---- */
	@media (width < 48rem) {
		.post__col { max-width: 100%; }

		/* Tags en columna, uno por línea — el pipe (.post__tags-divider) solo tenía sentido
		   conectando 2 tags en la MISMA fila (desktop); apilados no conecta nada (pedido explícito
		   del usuario: "el pipe después del primer metadato no le veo caso"). */
		.post__tags { flex-direction: column; align-items: flex-start; gap: 12px; }
		.post__tags-divider { display: none; }

		/* Autor arriba, fecha/lugar abajo — Figma los apila en vez de space-between en una fila. */
		.post__author-row { flex-direction: column; align-items: flex-start; gap: 16px; }

		/* Misma proporción que la imagen de desktop (1200/750 = 8/5), no 4/3 — la mobile del Figma
		   es la MISMA relación de aspecto, solo más chica (343×214 ≈ 8/5). */
		.post__hero { aspect-ratio: 8 / 5; }

		/* Acciones en columna centradas: "escuchar" a ancho completo, "compartir" angosto abajo. */
		.post__actions { flex-direction: column; align-items: center; }
		.post__listen { width: 100%; justify-content: center; }

		/* Cierre (traductor + compartir) también en columna centrada, no space-between. */
		.post__footer { flex-direction: column; align-items: center; gap: 24px; }
		.post__footer--share-only .post__share { margin-left: 0; }

		/* Cita: padding/posición del sello propios en mobile (16px uniforme en vez de 102/48
		   asimétrico) — el tamaño de texto YA es fluido (clamp) en la regla base, no necesita
		   override acá; solo el tracking (-.5px, spec "H1 Stories" del Inspect mobile) es un valor
		   fijo aparte, no proporcional. */
		.post-content.modern-content blockquote { padding: 82px 24px 48px 24px; }
		.post-content.modern-content blockquote::before { left: 16px; }
		.post-content.modern-content blockquote,
		.post-content.modern-content blockquote p {
			letter-spacing: -.5px;
		}
	}

	/* =============================================================
	   Lightbox de galería (Figma 09-News-Details-Gallery-Desktop,
	   node-id=2579-5843) — reemplaza el lightbox nativo de Gutenberg
	   (post-gallery-lightbox.js). Página blanca de pantalla completa
	   (no backdrop oscuro semitransparente — el Figma es así:
	   toma la página entera), no un modal centrado con overlay.
	   ============================================================= */
	.post-lightbox {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: var(--dia-color-bg-page, #fff);
		overflow-y: auto;
	}
	.post-lightbox.is-open { display: block; }
	.post-lightbox__close {
		position: absolute;
		top: 64px;
		right: clamp(var(--space-m), 8vw, 7.5rem);
		display: flex;
		background: none;
		border: 0;
		cursor: pointer;
		padding: 0;
	}
	.post-lightbox__close svg { width: 32px; height: 32px; }
	.post-lightbox__body {
		display: flex;
		align-items: flex-start;
		gap: clamp(2rem, 4vw, 4rem);
		max-width: var(--container);
		margin-inline: auto;
		padding: 144px clamp(var(--space-m), 8vw, 7.5rem) 4rem;
	}
	.post-lightbox__panel {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		width: 278px;
		flex-shrink: 0;
	}
	.post-lightbox__nav-row {
		display: flex;
		align-items: center;
		gap: 24px;
	}
	.post-lightbox__nav { display: flex; gap: 8px; }
	/* Mismo patrón que .home-news__nav-btn (home-news.css) — mismo componente de navegación de
	   slider ya usado en el resto del sitio, pedido explícito del usuario. */
	.post-lightbox__nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		/* mismo bug que .home-news__nav-btn (home-news.css): sin color propio, currentColor del
		   ícono cae al default del navegador para <button> — azul de sistema en algunos Android. */
		color: var(--dia-color-text-primary, #121212);
	}
	/* Mismo estado disabled que .home-news__nav-btn.swiper-button-disabled (home-news.css) — el
	   borde SÍ se conserva (pedido explícito de David, "todas" las flechas de este tipo en el
	   sitio): al no pisar border-color, hereda el #232323 base y queda a la misma opacidad que el
	   chevron de adentro (opacity:.35 afecta el elemento completo). */
	.post-lightbox__nav-btn:disabled { opacity: .35; cursor: default; }
	.post-lightbox__nav-btn:not(:disabled):hover {
		border: 1px solid #cdd6e1;
		background: var(--dia-btn-gray-gradient);
	}
	.post-lightbox__nav-icon { display: block; width: 16px; height: 16px; }
	.post-lightbox__nav-icon svg { display: block; width: 100%; height: 100%; }
	.post-lightbox__nav-icon--prev { transform: rotate(180deg); }
	.post-lightbox__count {
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
	}
	.post-lightbox__divider { width: 73px; height: 1px; background: #cacaca; }
	.post-lightbox__caption {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #777;
	}
	.post-lightbox__figure {
		flex: 1 1 auto;
		min-width: 0;
		border-radius: var(--dia-radius-md, 6px);
		overflow: hidden;
	}
	/* Animación de entrada al navegar (post-gallery-lightbox.js agrega/quita is-entering-next/prev):
	   la imagen nueva llega desde el lado de la flecha que se apretó, en vez de solo aparecer.
	   .post-lightbox__figure (arriba) ya tiene overflow:hidden — recorta la imagen mientras está
	   desplazada afuera de su lugar, así no se ve asomando fuera del marco redondeado durante el
	   primer instante de la animación. */
	.post-lightbox__image {
		display: block;
		width: 100%;
		height: auto;
		transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
	}
	.post-lightbox__image.is-entering-next { transform: translateX(40px); opacity: 0; }
	.post-lightbox__image.is-entering-prev { transform: translateX(-40px); opacity: 0; }

	@media (width < 64rem) {
		.post-lightbox__body { flex-direction: column; padding-top: 6rem; }
		.post-lightbox__panel { width: 100%; }
		.post-lightbox__close { top: 24px; }
	}
}