/* =================================================================
   archive-perspective.css — Archive de Perspectives (Figma 15-Perspectives-Desktop,
   node-id=2866-8101). Reusa .post-tag (single-news.css), .perspective-card/.perspective-grid
   (single-perspective.css) y .news-card-wide/.news-card__content/.news-card__title--lg/
   .news-card__circle-btn/.news-card__cta-icon/.news-card__glass (news.css) — todas encoladas junto
   con este archivo (ver inc/enqueue.php) — en vez de duplicarlas. .home-stories (carrusel "Explora
   las historias...") también se reusa tal cual, ver parts/layout/archive-perspective-stories.php.
   Sin filter-bar: layout fijo (hero + fila + fila asimétrica + carrusel + fila + paginación) que se
   repite igual en cada página, ver archive-perspective.php.
   Breakpoint estándar 80rem para el wrap de página (§12) — también el umbral en el que la card
   ancha (.news-card-wide.perspective-card-wide) pasa de 2 columnas a apilada (imagen arriba,
   contenido abajo), pedido explícito del usuario 2026-07-15: a diferencia de .news-card-wide en
   news.css (que usa 64rem), acá se corta antes porque el grid de 3 columnas de arriba YA se
   reacomoda a 80rem, y dejar la card ancha en 2 columnas hasta 64rem la haría verse angosta/
   apretada contra las demás cards ya apiladas de ese rango — y 48rem para el resto.
   ================================================================= */

@layer views {

	.perspective-archive-header {
		background: var(--dia-color-bg-page, #fff);
		border-bottom: 1px solid #e5e5e5;
	}
	.perspective-archive-header__inner {
		max-width: var(--container);
		margin-inline: auto;
		/* padding-block estandarizado 2026-07-21: era clamp(1.5rem, 2vw, 3rem), un vertical FLUIDO
		   que en anchos de desktop comunes (~1920px) daba ~38px, distinto de los 48px (3rem) FIJOS
		   que usan .event-hero/.resource-hero/.news-header (los otros 3 archives con hero) — bug
		   real reportado. padding-inline sin cambios, ya coincidía con esos 3. */
		padding-block: 3rem;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.perspective-archive-header__inner { padding-inline: 0; }
	}
	/* font-size/line-height/letter-spacing/color idénticos a .hero-title/.hero-desc (base.css,
	   estandarizado 2026-07-21) — clases PROPIAS en vez de reusar esas directamente porque acá SÍ
	   necesitan max-width en la descripción (585px, los otros archives no lo tenían). */
	.perspective-archive-header__title {
		margin: 0 0 16px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); /* hasta 60px desktop */
		line-height: 1.17;
		letter-spacing: -2px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-archive-header__desc {
		margin: 0;
		max-width: 36.5rem; /* 585px */
		font-family: var(--font-sans);
		font-size: clamp(1rem, .875rem + .5vw, 1.25rem); /* 16px → 20px desktop */
		line-height: 1.6;
		color: var(--dia-color-text-primary, #121212);
	}

	.perspective-archive__col {
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem); /* 6vw, no 8vw: mismo clamp que el resto
			de archives (project/resource/stories/news) — con 8vw el padding en tablet era mayor y
			dejaba menos ancho útil para las 2 columnas de abajo (bug real reportado). */
		padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* 40px → 80px, mismo clamp que .home-stories/related-news */
	}
	@media (width >= 80rem) {
		.perspective-archive__col { padding-inline: 0; }
	}
	.perspective-archive__col > * + * { margin-top: 48px; }

	/* ---- Artículo principal (Figma "Frame 69"/2866:8157 + imagen 2866:8156) ---- */
	.perspective-hero {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: clamp(2rem, 4vw, 5rem);
	}
	.perspective-hero__text {
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex: 1 1 26rem; /* 480px con margen para encoger antes de apilar en mobile */
		min-width: 0;
	}
	.perspective-hero__title {
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
		line-height: 1.3;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-hero__title a { color: inherit; text-decoration: none; }
	.perspective-hero__title a:hover { color: var(--dia-color-text-secondary, #767778); }
	.perspective-hero__writer { margin-top: 12px; }
	.perspective-hero__media {
		display: block;
		flex: 0 0 36.5625rem; /* 585px */
		width: 36.5625rem;
		aspect-ratio: 585 / 366;
		border-radius: 12px;
		overflow: hidden;
	}
	.perspective-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

	.perspective-archive-divider { height: 1px; background: #e5e5e5; }

	/* ---- Bloque de autor (avatar + nombre + departamento) compartido por el artículo principal
	   (56px, Figma 2867:8633) y la card ancha (48px, Figma 2870:9028) — modificador de tamaño
	   propio en cada contexto (ver abajo). Mismo criterio tipográfico que .perspective__writer-*
	   de single-perspective.css, pero SIN depender de ese archivo (esta vista no lo encola). ---- */
	.perspective-wide-writer { display: flex; align-items: flex-start; gap: 16px; }
	.perspective-wide-writer__avatar {
		width: 48px;
		height: 48px;
		border-radius: 64px; /* spec literal del diseñador — a este tamaño (48/56px) sigue dando un
			círculo completo igual que el 50% de antes, cualquier radio >= mitad del lado lo hace. */
		object-fit: cover;
		flex-shrink: 0;
	}
	.perspective-hero__writer .perspective-wide-writer__avatar { width: 56px; height: 56px; }
	/* Fallback sin foto propia (spec literal del diseñador 2026-07-22) — 2 gradientes apilados
	   (uno diagonal "brand" superpuesto, otro base verde-azulado) en vez del sólido
	   --dia-color-brand-primary de antes. */
	.perspective-wide-writer__avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		background:
			linear-gradient(311deg, rgba(45, 84, 128, .7) 14.44%, rgba(75, 137, 152, 0) 61.53%),
			linear-gradient(49deg, #5a94a0 50%, #83abb6 69.4%, #a1bbc6 83.46%);
		color: #fff;
		text-align: center;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 20px; /* 100% */
		letter-spacing: 1px;
	}
	.perspective-wide-writer__info { display: flex; flex-direction: column; gap: 2px; }
	.perspective-wide-writer__name {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-wide-writer__department {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #a3a3a3);
	}

	/* ---- Fila asimétrica: 1 card plana (.perspective-card, single-perspective.css) + 1 card ancha
	   (.news-card-wide.perspective-card-wide, ver card-perspective-wide.php) ---- */
	.perspective-archive-wide-row {
		display: flex;
		align-items: stretch;
		gap: 30px;
	}
	.perspective-archive-wide-row .perspective-card { flex: 0 0 380px; }
	.perspective-archive-wide-row .perspective-card-wide { flex: 1 1 auto; min-width: 0; }

	/* ---- Paginación (Figma "Pagination-Card" 3086:12880) — mismo tratamiento CLARO que
	   .news-pagination (news.css)/.resource-pagination/.project-pagination, clases propias
	   `.perspective-page-*` (mismo criterio de "1 CSS de paginación por vista" del resto del sitio). ---- */
	.perspective-pagination {
		padding-block: clamp(2rem, 4vw, 5rem) clamp(3rem, 6vw, 5rem);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.perspective-pagination__numbers,
	.perspective-pagination__numbers-compact { display: flex; align-items: center; gap: 12px; }
	.perspective-pagination__numbers-compact { display: none; }
	.perspective-page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-text-primary, #121212);
		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);
	}
	.perspective-page-btn--ellipsis { border: 0; color: var(--dia-color-text-secondary, #767778); }
	.perspective-page-btn:not([aria-current="page"]):not(.perspective-page-btn--ellipsis):hover,
	.perspective-page-next:not(:disabled):hover,
	.perspective-page-prev:not(:disabled):hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.perspective-page-btn[aria-current="page"] {
		background: var(--dia-btn-gray-gradient);
		border: 1px solid #a7b7ca;
	}
	.perspective-page-next,
	.perspective-page-prev {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		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);
	}
	.perspective-page-next svg,
	.perspective-page-prev svg { width: 16px; height: 16px; }
	.perspective-page-prev__icon { display: inline-flex; transform: rotate(180deg); }
	.perspective-page-next:disabled,
	.perspective-page-prev:disabled { opacity: .35; cursor: not-allowed; }
	.perspective-pagination__mobile { display: none; }

	/* ---- Spinner de paginación (perspective-spinner.js reposiciona esto sobre el botón clickeado)
	   — hx-indicator en #results (archive-perspective.php) togglea .htmx-request acá mientras hay
	   una petición en vuelo, recién visible si dura MÁS de 300ms (transition-delay). Mismo patrón/
	   colores que .resource-spinner (archive-resource.css), tratamiento CLARO. ---- */
	body.is-loading .perspective-archive #results { opacity: .6; transition: opacity .2s; }
	.perspective-spinner {
		position: fixed;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 20px;
		opacity: 0;
		pointer-events: none;
		z-index: 100;
		transition: opacity 0s linear .3s;
	}
	.perspective-spinner.htmx-request {
		opacity: 1;
		transition-delay: .3s;
	}
	.perspective-spinner__ring {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #d0d1d3;
		border-top-color: var(--dia-color-text-primary, #121212);
		animation: perspective-spinner-spin .7s linear infinite;
	}
	@keyframes perspective-spinner-spin {
		to { transform: rotate(360deg); }
	}

	/* ---- Estado vacío (no-results-perspective.php) — mismo patrón de 2 niveles que
	   .story-empty-outer/.story-empty (archive-stories.css), tratamiento CLARO. ---- */
	.perspective-empty-outer {
		display: flex;
		justify-content: center;
		padding-block: clamp(3rem, 6vw, 6rem);
	}
	.perspective-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
		max-width: 26rem;
	}
	.perspective-empty__icon { color: var(--dia-color-text-secondary, #767778); }
	.perspective-empty__icon svg { width: 40px; height: 40px; }
	.perspective-empty__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-empty__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- .home-stories reusado en medio del listado (archive-perspective-stories.php) — SOLO
	   padding-block propio (80px desktop, mismo clamp 40→80 que .related-news/single-news.css), SIN
	   margin: la separación contra el wide-row de arriba y el grid de abajo la aportan los paddings
	   de ambos .perspective-archive__col (pedido explícito del usuario, para no sumar dos fuentes de
	   espaciado distintas). Pisa el padding-block:var(--space-xl) (64px fijo) de home-stories.css. ---- */
	.perspective-archive .home-stories { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

	/* ---- Tablet (<80rem, breakpoint estándar §12: el container solo llega a los 1200px completos a
	   partir de 80rem — antes de eso el padding fluido de arriba le sigue comiendo ancho real, así
	   que el hero partido texto/imagen de 585px fijos y el grid de 3 columnas de 380px se apretaban
	   cada vez más chico en vez de reacomodarse, bug real reportado) — hero en columna, grid a 2
	   columnas y fila asimétrica a 2 columnas PAREJAS (en vez de 380px fijo + resto) para que la
	   card ancha entre en el nuevo ancho recortado; su imagen pasa al mismo tratamiento apilado
	   (imagen arriba, contenido abajo) que ya usaba en mobile — a diferencia de card-news-wide.php,
	   esta imagen NUNCA lleva texto encima, así que alcanza con apilar en vez de reemplazar el
	   markup por un tratamiento "featured" con overlay. Contrarresta el `.news-card-wide {
	   display:block; ... } .news-card-wide__media,.news-card-wide__content {display:none}` de
	   news.css en este mismo rango (<64rem, ver ahí): selector de 2 clases
	   (.news-card-wide.perspective-card-wide) gana por especificidad sin necesitar !important. ---- */
	@media (width < 80rem) {
		/* Mismos breakpoints/valores que .news-header (news.css) — el padding-block fijo de 3rem de
		   .perspective-archive-header__inner (arriba) necesita este par de overrides para seguir
		   encogiendo en tablet/mobile, algo que antes cubría solo el clamp() que se quitó. */
		.perspective-archive-header__inner { padding-block: 2rem; }

		.perspective-hero { flex-direction: column; align-items: stretch; }
		/* order:-1 (pedido explícito del usuario 2026-07-15): al apilarse en columna, la imagen debe
		   ir ANTES que el bloque de texto — el markup (archive-perspective.php) trae el texto primero
		   en el DOM (así queda a la IZQUIERDA en la fila de desktop, >=80rem, vía justify-content:
		   space-between de la regla base), así que acá se reordena solo visualmente vía `order` en
		   vez de duplicar el markup con 2 variantes. */
		.perspective-hero__media { order: -1; }
		/* flex:1 1 26rem (regla base) es un flex-BASIS de ANCHO pensado para la fila horizontal de
		   desktop — en column (arriba) ese eje pasa a ser el vertical, así que ese mismo 26rem se
		   interpretaba como una ALTURA mínima de 416px para el bloque de texto, dejando un hueco
		   enorme debajo en tablet/mobile (bug real reportado). auto: alto según su contenido real. */
		.perspective-hero__text { flex-basis: auto; }
		/* flex:0 0 36.5625rem (regla base) es rígido (grow:0 shrink:0) pensado para convivir al lado
		   del texto en la fila de desktop — en column ese ancho fijo de 585px se salía del wrap
		   (padding-inline) en tablet/mobile angostos en vez de ocupar el 100% disponible, rompiendo
		   el aspect-ratio visualmente (bug real reportado). */
		.perspective-hero__media { width: 100%; flex-basis: auto; }

		.perspective-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

		.perspective-archive-wide-row .perspective-card,
		.perspective-archive-wide-row .perspective-card-wide { flex: 1 1 0; min-width: 0; }
		/* background/border:0 (antes #f5f5f1/#d0d1d3, misma caja que la card SIN imagen) — pedido
		   explícito del usuario 2026-07-15: en tablet/mobile esta card debe verse como una card
		   "normal" con imagen arriba (mismo tratamiento visual que .perspective-card--featured,
		   single-perspective.css: sin fondo/borde propio, solo la imagen con su propio radio), no
		   como una caja con fondo propio. */
		.news-card-wide.perspective-card-wide {
			display: flex;
			flex-direction: column;
			background: none;
			border: 0;
			/* border-radius/overflow:0/visible (antes 12px/hidden, regla base news.css pensada para
			   la caja con fondo de 2 columnas de desktop) — sin esto, el overflow:hidden de ESTE
			   contenedor (que ahora envuelve imagen + contenido apilados, no solo la imagen) recortaba
			   el borde inferior redondeado propio de .news-card-wide__media de abajo contra el borde
			   recto de esta caja exterior (bug real reportado: solo se veían redondeadas las esquinas
			   de ARRIBA de la imagen). El radio real de la imagen ahora vive solo en __media (abajo). */
			border-radius: 0;
			overflow: visible;
		}
		.perspective-card-wide .news-card-wide__media,
		.perspective-card-wide .news-card-wide__content { display: flex; }
		.perspective-card-wide .news-card-wide__media {
			flex: 0 0 auto;
			width: 100%;
			aspect-ratio: 380 / 238;
			border-radius: 12px; /* radio propio en las 4 esquinas — el padre ya no tiene fondo/borde
				que recortar contra su propio border-radius (regla base, news.css), así que sin esto
				la imagen quedaba completamente cuadrada acá. */
			overflow: hidden;
		}
		/* padding:22px 0 0 (antes 32px los 4 lados, heredado de la regla base para la caja con fondo)
		   — mismo criterio/valor que .perspective-card--featured .perspective-card__body (single-
		   perspective.css, ajustado a 22px 2026-07-15): sin fondo/borde propio que recortar, el
		   contenido no necesita relleno lateral/inferior. */
		.perspective-card-wide .news-card-wide__content { padding: 22px 0 0; }
		/* Orden imagen → meta → título → autor (pedido explícito del usuario 2026-07-15): mismo
		   orden que .perspective-card/card-perspective.php en este mismo rango apilado — el markup
		   de card-perspective-wide.php trae el autor ANTES del título (así queda a la derecha de la
		   imagen en el layout de 2 columnas de desktop, >=80rem, donde este bloque NO aplica), así
		   que acá se reordena solo visualmente vía `order` (.news-card__content ya es flex column,
		   regla base news.css) en vez de duplicar el markup con 2 variantes distintas. */
		.perspective-card-wide .news-card__content > .post-tag { order: 1; }
		.perspective-card-wide .news-card__content > .news-card__title--lg { order: 2; }
		.perspective-card-wide .news-card__content > .perspective-wide-writer { order: 3; }
		/* Sin botón circular (pedido explícito del usuario 2026-07-15, "igualita" a las demás cards
		   apiladas de este rango — .perspective-card/card-perspective.php no tiene CTA propio, toda
		   la card es un link). Sigue reusando .news-card-wide__content como flex row en desktop
		   (>=80rem, donde el botón SÍ debe verse) — display:none acá es específico de este breakpoint. */
		.perspective-card-wide .news-card__circle-btn { display: none; }
		/* Título al mismo tamaño/recorte que .perspective-card--featured .perspective-card__title
		   (single-perspective.css) — pedido explícito del usuario 2026-07-15: en TODO este rango
		   (mobile+tablet+hasta 1279px), no solo 64-80rem como la regla de News (.news-card-wide
		   .news-card__title-link, news.css) en la que se apoyaba antes por defecto — acá se pisa
		   directo el h3 (no el link) para poder agregarle también el line-clamp a 2 líneas, que la
		   base (.news-card__title--lg, news.css) nunca tuvo — sin esto el título podía crecer
		   indefinido y desalinear la card contra sus vecinas en el grid aplanado de tablet. */
		.perspective-card-wide .news-card__title--lg {
			font-weight: 600;
			font-size: 20px;
			line-height: 28px;
			color: var(--dia-color-text-primary, #121212);
			display: -webkit-box;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		/* grid-column:span 1 (antes heredaba span:2 de la regla base .news-card-wide, news.css,
		   pensada para el grid de 3 columnas de News) — pedido explícito del usuario 2026-07-15: por
		   debajo de 1280px esta card debe comportarse como una card "normal" (1 columna), el doble
		   ancho es SOLO desde 1280 en adelante. Sin esto, dentro del grid aplanado de tablet (48-80rem,
		   ver abajo) la card ancha ocupaba las 2 columnas de una fila completa ella sola en vez de
		   emparejarse con la siguiente card, rompiendo el acomodo de a pares recién resuelto arriba. */
		.perspective-card-wide { grid-column: span 1; }
	}

	/* ---- Tablet (48rem–80rem): aplana row1 (.perspective-grid, 3 cards) + fila asimétrica
	   (.perspective-archive-wide-row, 2 cards) + row2 (.perspective-grid--row2, 3 cards) en UNA sola
	   grilla continua de 2 columnas — pedido explícito del usuario 2026-07-15: en este rango cada
	   bloque era su propia grilla/flex de 2 columnas con un número IMPAR de cards (3, 3), dejando un
	   huérfano solo en su fila (celda vacía al lado, enmarcado además por los dividers — bug real
	   reportado con screenshot). Mismo patrón ya usado para el mismo problema en Noticias
	   (.news-track{display:contents} dentro de .news-grid, ver news.css) — los 3 bloques (y los 3
	   .perspective-archive-divider) son hijos DIRECTOS de .perspective-archive__col (ver
	   archive-perspective.php), así que alcanza con volverlos transparentes (display:contents, no
	   generan su propia caja) para que sus cards pasen a ser hijas directas de la grilla de acá. El
	   orden de DOM (card1,card2,card3,flat,wide,row2-1,row2-2,row2-3) cae en pares consecutivos de a
	   2 en la nueva grilla — la card3 (última de row1) queda junto a la flat (primera de la fila
	   asimétrica), tal como se pidió. La card "ancha" (card-perspective-wide.php) ya queda, gracias
	   al bloque de arriba (<80rem), con el mismo tratamiento apilado (imagen arriba, meta→título→
	   autor, sin botón circular) que el resto — encaja sin ajustes propios como una celda más. ---- */
	@media (48rem <= width < 80rem) {
		.perspective-archive__col {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 30px;
		}
		.perspective-hero {
			grid-column: 1 / -1;
			/* margin-bottom:18px (no solo el gap:30px de arriba) para mantener la MISMA separación de
			   48px que había antes entre el hero y la 1ra fila de cards (.perspective-archive__col >
			   * + *, regla base más arriba en este archivo) — ese margin-top ya no aplica acá:
			   .perspective-grid pasa a display:contents (abajo) y deja de generar caja donde
			   asentarlo. Los márgenes de los grid items NO colapsan entre sí (a diferencia del flujo
			   normal), así que este margin-bottom se SUMA al row-gap de 30px sin duplicarse: 18 + 30 =
			   48px totales, igual que antes (pedido explícito, "manteniendo la separación"). */
			margin-bottom: 18px;
		}
		.perspective-grid,
		.perspective-archive-wide-row,
		.perspective-grid--row2 { display: contents; }
		.perspective-archive-divider { display: none; }
		/* grid-column:1/-1 (bug real reportado con screenshot, 2026-07-15): .perspective-pagination
		   vive en OTRO `.perspective-archive__col` aparte (ver archive-perspective.php, sibling de
		   .home-stories) que TAMBIÉN cae bajo el `display:grid` de la regla de arriba (misma clase) —
		   sin esto, la paginación (único hijo de ese contenedor) quedaba confinada a la 1ra columna
		   del grid (mitad del ancho) y su justify-content:center (regla base) centraba solo DENTRO de
		   esa mitad, en vez del ancho completo — se veía corrida a la izquierda. */
		.perspective-pagination { grid-column: 1 / -1; }
	}

	@media (width < 48rem) {
		.perspective-archive-header__inner { padding-block: 1.5rem; }

		/* 24px entre .perspective-hero__media y .perspective-hero__text apiladas (pedido explícito
		   del usuario 2026-07-19) — antes heredaban el gap:clamp(2rem,4vw,5rem) de la regla base
		   (pensado para la fila horizontal de desktop), ~32px+ en este rango. El order:-1 de arriba
		   (<80rem) solo cambia cuál de las dos se VE primero, no afecta el gap del flex column —
		   sigue aplicando igual sin importar el orden visual. */
		.perspective-hero { gap: 24px; }

		/* 24px entre .perspective-card__media y .perspective-card__body (pedido explícito del
		   usuario 2026-07-19) — la regla base (single-perspective.css, sin media query, .perspective-
		   card__link es flex column SIN gap propio) usa el padding-top de __body como separador
		   visual: 22px ahí, se sube a 24px acá SOLO para este archivo (scoped: single-perspective.css
		   se encola también en single-perspective.php, que no pidió este cambio). */
		.perspective-card--featured .perspective-card__body { padding-top: 24px; }

		/* Debajo de 48rem la fila asimétrica pasa de 2 columnas parejas (regla de arriba, <80rem) a
		   1 sola columna apilada — flex:1 1 0 ya heredado de ahí sigue sirviendo para el alto en
		   column (content-based, sin básis fijo que estire de más). */
		.perspective-archive-wide-row { flex-direction: column; }
		/* Redeclarado acá (no solo en single-perspective.css) porque este archivo se encola DESPUÉS
		   (inc/enqueue.php) y su .perspective-grid{2 columnas} de <80rem arriba, al matchear también
		   en este rango, ganaría por orden de cascada sobre el 1fr de single-perspective.css si no
		   se repite explícitamente acá. */
		.perspective-grid { grid-template-columns: 1fr; }
		/* 35px unificado en TODA la separación entre tarjetas/secciones en mobile (pedido explícito
		   del usuario 2026-07-19: "en móvil no me interesa que se distingan las secciones") — antes
		   .perspective-grid/.perspective-archive-wide-row traían 30px (regla base, single-
		   perspective.css, compartida con el grid de 3 columnas de desktop, por eso el override
		   va acá y no ahí) y .perspective-archive__col > * + * traía 32px. */
		.perspective-grid,
		.perspective-archive-wide-row { gap: 35px; }
		.perspective-archive__col > * + * { margin-top: 35px; }
		.perspective-archive-divider { display: none; }

		/* Card sin imagen (única card con la clase `.perspective-card` a secas, sin --featured — la
		   1ra card de la 1ra fila, ver card-perspective.php/archive-perspective.php $dia_i===0) —
		   pedido explícito del usuario: en mobile su alto debe depender del contenido, no del
		   height:100%/min-height:450px fijo (single-perspective.css) pensado para emparejar el grid
		   de 3 columnas/fila asimétrica de desktop — irrelevante acá, donde ya es 1 sola columna
		   apilada sin necesidad de parejar alturas contra vecinas. Las demás cards (--featured,
		   perspective-card-wide) no llevan este override porque sí traen imagen y siguen queriendo
		   el piso de alto. */
		.perspective-card:not(.perspective-card--featured) { height: auto; min-height: 0; }

		/* Los botones prev/next "--desktop" (icon-only en este breakpoint, ya que
		   .perspective-page-nav__label se oculta arriba) NO se ocultaban acá — quedaban visibles A
		   LA VEZ que el bloque .perspective-pagination__mobile (prev/next propios + "X OF Y"),
		   duplicando las flechas de navegación (bug real reportado, screenshot). */
		.perspective-pagination__numbers { display: none; }
		.perspective-pagination__numbers-compact { display: none; }
		.perspective-page-prev--desktop,
		.perspective-page-next--desktop { display: none; }
		.perspective-page-nav__label { display: none; }
		.perspective-page-next,
		.perspective-page-prev { height: 40px; padding-inline: 11px; padding-block: 0; }
		.perspective-pagination {
			gap: 12px;
			padding-block: 16px clamp(2rem, 6vw, 4rem);
		}
		.perspective-pagination__mobile {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		.perspective-pagination__mobile-status {
			flex: 1;
			text-align: center;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 13px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--dia-color-text-primary, #121212);
		}
	}
}