/*
 * Explorador Paraguay · ronda visual (PROTOTIPO, 28/10/2026). Editorial arquitectónico: papel, tinta y bronce;
 * Newsreader sin cursiva en títulos y Manrope en el resto. Celular primero; sin huecos en el mosaico en ningún ancho.
 */

/* Cabecera más liviana en la sección: sin banderas ni redes (quedan idioma, navegación y WhatsApp) */
.px-pagina .redes--header { display: none !important; }
.px-pagina .idiomas--header .bandera { display: none; }
.px-pagina .idiomas--header { gap: 0; }

/* ---------- Portada: una gran foto de Paraguay ---------- */
.px-portada { position: relative; min-height: clamp(540px, 88svh, 860px); display: flex; align-items: flex-end; color: #fbfaf6; background: #151719; overflow: hidden; }
.px-portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 20, 22, .55) 0%, rgba(19, 20, 22, .1) 26%, rgba(19, 20, 22, .2) 52%, rgba(19, 20, 22, .88) 100%); }
@media (min-width: 1000px) { .px-portada::after { background: linear-gradient(90deg, rgba(19, 20, 22, .72) 0%, rgba(19, 20, 22, .45) 38%, rgba(19, 20, 22, 0) 68%), linear-gradient(180deg, rgba(19, 20, 22, .5) 0%, rgba(19, 20, 22, .05) 24%, rgba(19, 20, 22, .1) 55%, rgba(19, 20, 22, .85) 100%); } }
.px-portada__texto { position: relative; z-index: 1; padding-top: calc(var(--header-h, 76px) + 64px); padding-bottom: 92px; }
.px-portada .eyebrow { color: #e8e2d6; }
.px-portada .eyebrow::before { background: #c9b08a; }
.px-portada__titulo { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(2.4rem, 4.6vw + 1rem, 5rem); line-height: 1; letter-spacing: -.01em; margin: 14px 0 18px; max-width: 17ch; text-wrap: balance; }
.px-portada__lead { margin: 0; max-width: 46ch; font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.5; color: #f2efe7; }
.px-portada__credito { position: absolute; z-index: 1; right: 14px; top: calc(var(--header-h, 76px) + 8px); margin: 0; font-size: 11px; color: rgba(242, 239, 231, .78); max-width: 60%; text-align: right; }
@media (min-width: 1000px) { .px-portada__texto { padding-bottom: 210px; } }

/* ---------- Las cuatro rutas, montadas sobre la portada ---------- */
.px-rutas { position: relative; z-index: 2; margin-top: -60px; }
.px-rutas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1000px) { .px-rutas { margin-top: -168px; } .px-rutas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.px-ruta-t { position: relative; display: block; aspect-ratio: 1 / 1.08; overflow: hidden; background: #151719; color: #fbfaf6; text-decoration: none; box-shadow: 0 18px 40px rgba(19, 20, 22, .18); }
@media (min-width: 1000px) { .px-ruta-t { aspect-ratio: 4 / 4.4; } }
.px-ruta-t__media, .px-ruta-t__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-ruta-t__media img { transition: transform .5s ease; }
.px-ruta-t:hover .px-ruta-t__media img { transform: scale(1.035); }
.px-ruta-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 20, 22, 0) 35%, rgba(19, 20, 22, .82) 100%); }
.px-ruta-t__cuerpo { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 1000px) { .px-ruta-t__cuerpo { padding: 22px; gap: 8px; } }
.px-ruta-t__n { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e2d3b8; }
.px-ruta-t__nombre { font-family: var(--serif); font-size: clamp(1.15rem, 4.6vw, 1.75rem); line-height: 1.08; }
.px-ruta-t[aria-current]::before { content: ""; position: absolute; z-index: 2; inset: 0; box-shadow: inset 0 0 0 3px #fbfaf6; pointer-events: none; }
.px-ruta-t[aria-current] .px-ruta-t__n { color: #fbfaf6; }

/* ---------- Guías: cabecera, filtros compactos y mosaico ---------- */
.px-guias-sec { padding-top: 56px; }
@media (min-width: 1000px) { .px-guias-sec { padding-top: 88px; } }
.px-guias-sec__cab { display: grid; gap: 10px 56px; align-items: end; }
@media (min-width: 1000px) { .px-guias-sec__cab { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.px-guias-sec__cab .r7-h2 { margin: 10px 0 0; }
.px-guias-sec__desc { margin: 0; color: var(--ink-2, #3a3b3d); font-size: 1.02rem; line-height: 1.55; max-width: 48ch; }
.px-guias-sec__cab [hidden] { display: none !important; }

.px-filtros { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 26px 0 22px; }
.px-filtro { position: relative; min-width: 0; }
@media (max-width: 899px) { .px-filtro:not([open]) .px-filtro__lista { display: none; } }
.px-filtro summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 38px 0 14px; border: 1px solid var(--line, #d8d2c8); background: var(--surface, #fbfaf6); cursor: pointer; font-size: 14px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-filtro summary::-webkit-details-marker { display: none; }
.px-filtro summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.px-filtro[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.px-filtro__rot { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #6f6b63); }
.px-filtro__val { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.px-filtro__lista { list-style: none; margin: 0; padding: 6px; position: absolute; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: calc(100vw - 32px); background: var(--surface, #fbfaf6); border: 1px solid var(--line, #d8d2c8); box-shadow: 0 16px 34px rgba(19, 20, 22, .12); }
.px-filtro--temas .px-filtro__lista { left: auto; right: 0; }
.px-filtro__lista a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink, #131416); text-decoration: none; font-size: 15px; }
.px-filtro__lista a[aria-current] { font-weight: 700; background: var(--bg, #f2efe7); }
.px-filtro__lista a.is-vacio { color: var(--muted, #6f6b63); font-style: normal; text-decoration: line-through dashed; }
.px-filtro__lista li[hidden] { display: none; }
@media (min-width: 900px) {
	.px-filtros { display: block; margin: 34px 0 26px; padding: 12px 0; border-top: 1px solid var(--ink, #131416); border-bottom: 1px solid var(--line, #d8d2c8); }
	.px-filtro[data-px-filtro="ruta"] { display: none; } /* en escritorio, las rutas son las tarjetas de arriba */
	.px-filtro { display: flex; align-items: flex-start; gap: 14px; }
	.px-filtro summary { flex: none; border: 0; background: none; padding: 0; min-height: 34px; pointer-events: none; overflow: visible; }
	.px-filtro summary::after, .px-filtro__val { display: none; }
	.px-filtro__lista, .px-filtro--temas .px-filtro__lista { position: static; display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0; border: 0; box-shadow: none; background: none; width: auto; max-width: none; min-width: 0; }
	.px-filtro__lista a { min-height: 34px; padding: 0 12px; font-size: 13.5px; border: 1px solid transparent; border-radius: 999px; }
	.px-filtro__lista a:hover { border-color: var(--line, #d8d2c8); }
	.px-filtro__lista a[aria-current] { background: var(--ink, #131416); color: #fbfaf6; font-weight: 600; }
}

.px-tema { margin: 0 0 20px; }
.px-tema__nombre { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 4px; }
.px-tema__desc { margin: 0; color: var(--ink-2, #3a3b3d); }
.px-tema[hidden] { display: none; }

/* Mosaico: 1 columna en el celular, 2 en tableta, 12 en escritorio. g = destacada, g2 = destacada invertida,
   m = mediana (filas de 2), c = chica (filas de 3). En tableta, si quedan impares, la última ocupa el ancho. */
.px-mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.px-mosaico > li[hidden] { display: none !important; }
.px-g__enlace { display: flex; flex-direction: column; height: 100%; background: var(--surface, #fbfaf6); border: 1px solid var(--line, #d8d2c8); color: inherit; text-decoration: none; }
a.px-g__enlace:hover .px-g__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.px-g__media { position: relative; display: block; overflow: hidden; background: #d8d2c8; }
.px-marco > img, .px-g__media.px-marco img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.px-g__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
a.px-g__enlace:hover .px-g__media img { transform: scale(1.03); }
.px-g__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.px-g__temas { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--olive, #62685b); }
.px-g__titulo { font-family: var(--serif); font-size: 1.4rem; line-height: 1.12; }
.px-g__resumen { font-size: 14.5px; line-height: 1.5; color: var(--ink-2, #3a3b3d); }
.px-g__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2, #e6e1d8); }
.px-g__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--muted, #6f6b63); }
.px-g__leer { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.px-g__leer svg { width: 14px; height: 14px; }
.px-g__marca { font-size: 12px; font-weight: 600; color: #8a5a1f; background: #f6ead6; padding: 4px 8px; align-self: flex-start; }
.px-g--sin-foto .px-g__enlace { background: #151719; color: #fbfaf6; border-color: #151719; }
.px-g--sin-foto .px-g__resumen, .px-g--sin-foto .px-g__meta { color: #d9d3c7; }
.px-g--sin-foto .px-g__temas { color: #c9b08a; }
.px-g--sin-foto .px-g__pie { border-top-color: rgba(242, 239, 231, .2); }
/* Destacada */
.px-g--g .px-g__titulo, .px-g--g2 .px-g__titulo { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.05; }
.px-g--g .px-g__resumen, .px-g--g2 .px-g__resumen { font-size: 15.5px; }
.px-g--g .px-g__media img, .px-g--g2 .px-g__media img { aspect-ratio: 4 / 3; }
/* Celular: las chicas van horizontales y compactas */
@media (max-width: 639px) {
	.px-g--c .px-g__enlace { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
	.px-g--c .px-g__media { min-height: 112px; }
	.px-g--c .px-g__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.px-g--c .px-g__cuerpo { padding: 14px; gap: 6px; }
	.px-g--c .px-g__titulo { font-size: 1.12rem; }
	.px-g--c .px-g__resumen { display: none; }
	.px-g--c .px-g__leer { display: none; }
}
@media (min-width: 640px) and (max-width: 999px) {
	.px-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.px-g--g, .px-g--g2, .px-g--ult { grid-column: 1 / -1; }
	.px-g--ult .px-g__enlace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.px-g--ult .px-g__media { aspect-ratio: 4 / 3; }
	.px-g--ult .px-g__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (min-width: 640px) {
	.px-g--g .px-g__enlace, .px-g--g2 .px-g__enlace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.px-g--g2 .px-g__media { order: 2; }
	.px-g--g .px-g__media, .px-g--g2 .px-g__media { aspect-ratio: 4 / 3; align-self: stretch; }
	.px-g--g .px-g__media img, .px-g--g2 .px-g__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.px-g--g .px-g__cuerpo, .px-g--g2 .px-g__cuerpo { padding: clamp(22px, 3.4vw, 44px); gap: 12px; justify-content: center; }
	.px-g--g .px-g__pie, .px-g--g2 .px-g__pie { margin-top: 14px; } /* destacada: texto centrado, sin un vacío en el medio */
}
@media (min-width: 1000px) {
	.px-mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
	.px-g--g, .px-g--g2 { grid-column: span 12; }
	.px-g--m { grid-column: span 6; }
	.px-g--c { grid-column: span 4; }
	.px-g--g .px-g__media, .px-g--g2 .px-g__media { aspect-ratio: 3 / 2; }
	.px-g--m .px-g__titulo { font-size: 1.65rem; }
	.px-g--m .px-g__media img { aspect-ratio: 16 / 9; }
	.px-g--c .px-g__media img { aspect-ratio: 4 / 3; }
	.px-g--m .px-g__cuerpo { padding: 22px 24px 24px; }
}

.px-otros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line, #d8d2c8); }
.px-otros__titulo { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #6f6b63); width: 100%; }
.px-otros[hidden], .px-otros a[hidden], [data-px-solo][hidden] { display: none !important; }

/* ---------- Ciudades: cada una con su foto ---------- */
.px-ciudades .py-region__tarjetas { gap: 14px; }
.px-ciudades .py-ciudad--foto { flex-direction: column; grid-column: auto; }
.px-ciudades .py-ciudad--foto .py-ciudad__foto { flex: none; }
.px-ciudades .py-ciudad__foto img { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
@media (min-width: 640px) {
	.px-ciudades .py-region__tarjetas > .py-ciudad:only-child { grid-column: 1 / -1; flex-direction: row; }
	.px-ciudades .py-region__tarjetas > .py-ciudad:only-child .py-ciudad__foto { flex: 0 0 46%; }
	.px-ciudades .py-region__tarjetas > .py-ciudad:only-child .py-ciudad__foto { position: relative; flex: 0 0 46%; aspect-ratio: 16 / 10; align-self: flex-start; }
	.px-ciudades .py-region__tarjetas > .py-ciudad:only-child .py-ciudad__foto img { position: absolute; inset: 0; height: 100%; min-height: 0; aspect-ratio: auto; }
}

/* Gran Asunción: la lista va en 2 columnas solo cuando la tarjeta ocupa todo el ancho (tableta) */
@media (min-width: 640px) and (max-width: 1199px) { .px-ciudades .py-region__tarjetas > .py-ciudad--lista { grid-column: 1 / -1; } .px-ciudades .py-ciudad--lista .py-ciudad__municipios { columns: 2; column-gap: 18px; } .px-ciudades .py-ciudad--lista .py-ciudad__municipios li { break-inside: avoid; } }

/* Proyectos: recurso relacionado, discreto */
.px-proyectos .r8-grilla { max-width: 960px; }
.py-dados__eyebrow a { color: inherit; }

/* Créditos de las fotos (los pide cada licencia) */
.px-creditos { margin: 0 auto; padding: 18px 0 28px; font-size: 11.5px; line-height: 1.6; color: var(--muted, #6f6b63); }

/* ---------- Guía: volver al camino, temas y siguientes ---------- */
.px-volver { margin: 4px auto 0; font-size: 14px; }
.px-volver a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink, #131416); font-weight: 600; text-decoration: none; }
.px-volver a:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-temas-guia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line, #d8d2c8); }
.px-temas-guia span { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #6f6b63); margin-right: 6px; }
.px-temas-guia a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line, #d8d2c8); color: var(--ink, #131416); font-size: 14px; text-decoration: none; }
.px-temas-guia a:hover { border-color: var(--ink, #131416); }
.px-siguientes { background: var(--surface, #fbfaf6); border-top: 1px solid var(--line, #d8d2c8); }
.px-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .px-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .px-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.px-guia__enlace { display: flex; flex-direction: column; height: 100%; background: var(--bg, #f2efe7); border: 1px solid var(--line, #d8d2c8); border-top: 2px solid var(--ink, #131416); color: inherit; text-decoration: none; }
a.px-guia__enlace:hover .px-guia__titulo { text-decoration: underline; text-underline-offset: 3px; }
.px-guia__cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.px-guia__titulo { font-family: var(--serif); font-size: 1.32rem; line-height: 1.15; }
.px-guia__resumen { font-size: 14.5px; line-height: 1.5; color: var(--ink-2, #3a3b3d); }
.px-guia__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--muted, #6f6b63); }