/*
Theme Name: Vivir Blocks
Description: Tema de bloques de Vivir Ediciones. Diseño derivado de Vivir RD con la identidad de Vivir Ediciones. Requiere el plugin Vivir Core.
Version: 0.2.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: vivir
*/

:root {
	--viv-azul: #0070ba;
	--viv-azul-osc: #00538a;
	--viv-azul-panel: #edf3f9;
	--viv-rojo: #e30613;
	--viv-rojo-osc: #c00510;
	--viv-ambar: #f3a712;
	--viv-tinta: #262626;
	--viv-gris: #f2f2f2;
	--viv-borde: #dcdcdc;
	--viv-texto-suave: #5c5c5c;
	--viv-ancho: 1200px;
	--viv-radio: 10px;
}

/* ---------- Base ---------- */
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:where(a, button, input, summary):focus-visible { outline: 3px solid var(--viv-azul); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.viv-main { width: 100%; max-width: var(--viv-ancho); margin: 0 auto; padding: 0 20px 48px; box-sizing: border-box; }
.viv-main > * { margin-block-start: 0; }
.viv-parte-cabecera, .viv-parte-pie { margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Cabecera (portada de RD: vivrd-topbar, vivrd-nav-desktop, vivrd-mega...) ----------
   Sin barra de provincias bajo el topbar (la cubre la barra de pastillas del bloque 2)
   ni "Diáspora" (no aplica a Vivir Ediciones). Los desplegables .vivrd-mega abren por
   :hover en escritorio, igual que RD; en móvil los abre vivir.js con clases
   vivrd-movil-abierto. */
.vivrd-topbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--viv-borde); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); transition: transform .3s ease; overflow: visible; width: 100%; max-width: var(--viv-ancho); margin: 0 auto; box-sizing: border-box; }
.admin-bar .vivrd-topbar { top: 32px; }
.vivrd-topbar.vivrd-oculto { transform: translateY(-100%); }
.vivrd-topbar-inner { display: flex; align-items: center; gap: 10px; width: 100%; max-width: var(--viv-ancho); margin: 0 auto; padding: 0 18px; height: 80px; box-sizing: border-box; overflow: visible; transition: height .25s ease; }

.vivrd-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.vivrd-logo-simbolo { height: 126px; width: auto; display: block; margin-top: -23px; margin-bottom: -23px; pointer-events: none; transition: height .25s ease, margin .25s ease; }

.vivrd-nav-desktop { display: flex; gap: 2px; margin-left: 12px; flex: 1; overflow: visible; }
.vivrd-nav-desktop > a, .vivrd-has-mega > button {
	padding: 9px 12px; font-size: 18px; font-weight: 600; color: var(--viv-tinta);
	text-decoration: none; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
	background: none; border: none; margin: 0; font-family: inherit; line-height: inherit; white-space: nowrap;
}
.vivrd-nav-desktop a:hover, .vivrd-has-mega > button:hover, .vivrd-has-mega > button:focus { background: var(--viv-gris); color: var(--viv-rojo); outline: none; }
.vivrd-nav-desktop > a[aria-current="page"] { color: var(--viv-azul); }
.vivrd-especiales-link { color: var(--viv-rojo) !important; font-weight: 800 !important; }
.vivrd-especiales-link:hover { background: #fbe9ea !important; }
.vivrd-chev { font-size: 9px; opacity: .55; }

.vivrd-has-mega { position: relative; overflow: visible; }
.vivrd-mega {
	position: absolute; top: 100%; left: 0; background: #fff; border-radius: 12px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .18); padding: 16px; min-width: 260px; max-width: 320px;
	display: none; z-index: 9999; border: 1px solid var(--viv-borde);
}
.vivrd-has-mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.vivrd-has-mega:hover .vivrd-mega { display: block; }

.vivrd-mega-especiales { border-top: 3px solid var(--viv-rojo); }
.vivrd-mega-especiales ul { list-style: none; margin: 0; padding: 0; }
.vivrd-mega-especiales li a { display: block; padding: 8px 10px; font-size: 18px; color: var(--viv-rojo-osc); font-weight: 700; text-decoration: none; border-radius: 6px; border-left: 3px solid transparent; }
.vivrd-mega-especiales li a:hover { background: rgba(227, 6, 19, .08); border-left-color: var(--viv-rojo); color: var(--viv-rojo); }

.vivrd-mega-buscador { width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 8px; font-size: 18px; border: 1px solid var(--viv-borde); border-radius: 8px; }
.vivrd-mega-lista { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.vivrd-mega-lista li a { display: block; padding: 8px 10px; font-size: 18px; color: #444; text-decoration: none; border-radius: 6px; font-weight: 500; }
.vivrd-mega-lista li a:hover { background: var(--viv-gris); color: var(--viv-azul); }
.vivrd-mega-lista ul { list-style: none; padding-left: 14px; }

.vivrd-mega-simple { min-width: 220px; }
.vivrd-mega-simple a { display: block; padding: 8px 10px; font-size: 18px; color: #444; text-decoration: none; border-radius: 6px; font-weight: 500; }
.vivrd-mega-simple a:hover { background: var(--viv-gris); color: var(--viv-azul); }

/* Jerarquía visual en el desplegable de Ediciones: provincias en negro y negrita,
   municipios en gris medio; las institucionales (★ vivir_oficial) en rojo. */
#vivrdEdicionesLista .vivrd-mega-lista > li > a { color: var(--viv-tinta); font-weight: 700; }
#vivrdEdicionesLista .vivrd-mega-lista ul a { color: #6b6b6b; font-weight: 500; }
#vivrdEdicionesLista .vivrd-mega-lista li.vivrd-oficial > a { color: var(--viv-rojo-osc); }
#vivrdEdicionesLista .vivrd-mega-lista a:hover { color: var(--viv-azul); }

.vivrd-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; position: relative; z-index: 200; }
.vivrd-icon-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9px; background: var(--viv-gris); color: var(--viv-tinta); cursor: pointer; font-size: 20px; }
.vivrd-icon-btn:hover { background: var(--viv-rojo); color: #fff; }
.vivrd-hamburger { display: none; }

.vivrd-search-drop { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--viv-gris); display: flex; gap: 8px; padding: 0 18px; }
.vivrd-search-drop.vivrd-abierto { max-height: 70px; padding: 12px 18px; }
.vivrd-search-drop input { flex: 1; min-width: 0; border: 1px solid var(--viv-borde); border-radius: 8px; padding: 11px 14px; font-size: 14px; }
.vivrd-search-drop button { background: var(--viv-rojo); color: #fff; border: none; border-radius: 8px; padding: 0 18px; font-weight: 700; cursor: pointer; }

body.vivrd-menu-movil-bloqueo { overflow: hidden; }

@media (min-width: 901px) {
	.vivrd-topbar.vivrd-compacto .vivrd-topbar-inner { height: 56px; }
	.vivrd-topbar.vivrd-compacto .vivrd-logo-simbolo { height: 90px; margin-top: -17px; margin-bottom: -17px; }
}

@media (max-width: 900px) {
	.admin-bar .vivrd-topbar { top: 0; }
	.vivrd-logo-simbolo { height: auto; width: auto; max-width: 170px; margin-top: 0; margin-bottom: 0; }
	.vivrd-nav-desktop {
		display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff;
		flex-direction: column; border-top: 1px solid var(--viv-borde);
		box-shadow: 0 12px 24px rgba(0, 0, 0, .1); padding: 8px; padding-top: 88px;
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	}
	.vivrd-nav-desktop.vivrd-movil-abierto { display: flex; }
	.vivrd-has-mega .vivrd-mega { position: static; box-shadow: none; border: none; display: none; }
	.vivrd-has-mega:hover .vivrd-mega { display: none; }
	.vivrd-has-mega.vivrd-movil-abierto .vivrd-mega { display: block; }
	.vivrd-hamburger { display: flex; align-items: center; justify-content: center; }
	.vivrd-mega-lista { max-height: none; overflow-y: visible; }
}

/* Marca de texto de reserva (solo la usa ya el pie, vivir_bloque_pie()) */
.viv-logo-texto { font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--viv-azul); line-height: 1; }
.viv-logo-texto span { color: var(--viv-rojo); margin-left: 2px; }

/* ---------- Migas, títulos y pastillas ---------- */
.viv-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 6px; padding: 0; font-size: 13px; color: var(--viv-texto-suave); }
.viv-migas li + li::before { content: "/"; margin-right: 4px; color: #b0b0b0; }
.viv-migas a { color: var(--viv-azul); font-weight: 600; text-decoration: none; }
.viv-migas a:hover { text-decoration: underline; }
.viv-titulo-pagina { margin: 4px 0 8px; font-size: clamp(1.75rem, 3vw, 2.25rem); }

.viv-pastillas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; padding: 0; }
.viv-pastillas a { display: inline-block; padding: 7px 15px; font-size: 13px; font-weight: 700; color: var(--viv-tinta); text-decoration: none; border: 1.5px solid var(--viv-borde); border-radius: 20px; }
.viv-pastillas a:hover { border-color: var(--viv-azul); color: var(--viv-azul); }
.viv-pastillas .viv-oficial a { border-color: var(--viv-rojo); color: var(--viv-rojo-osc); }
.viv-pastillas a[aria-current="page"] { background: var(--viv-azul-panel); border-color: var(--viv-azul); color: var(--viv-azul-osc); }

/* ---------- Tarjetas de noticia (marcado y clases igual que RD) ---------- */
.vivrdn-link { display: flex; gap: 12px; color: var(--viv-tinta); text-decoration: none; }
.viv-item-imagen { flex-shrink: 0; width: 64px; aspect-ratio: 64 / 54; border-radius: 8px; overflow: hidden; background: var(--viv-azul-panel); }
.viv-item-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viv-sin-imagen .viv-item-imagen { background: linear-gradient(135deg, var(--viv-azul), var(--viv-azul-osc)); }
.vivrdn-body { min-width: 0; flex: 1; }
.vivrdn-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.vivrdn-item:hover .vivrdn-title { color: var(--viv-azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vivrdn-catline { display: block; margin-top: 5px; font-size: 12px; font-weight: 800; color: var(--viv-azul-osc); }
.vivrdn-catline.oficial { color: var(--viv-rojo-osc); }
.vivrdn-small.vivrdn-oficial .vivrdn-title { border-left: 3px solid var(--viv-rojo); padding-left: 7px; margin-left: -10px; }
.vivrdn-excerpt { margin: 8px 0 0; font-size: 15px; color: var(--viv-texto-suave); }
.vivrdn-featured .vivrdn-link { display: block; }
.vivrdn-featured .viv-item-imagen { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--viv-radio); }
.vivrdn-featured .vivrdn-body { margin-top: 12px; }
.vivrdn-featured .vivrdn-title { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; font-weight: 800; }
.viv-vacio { color: var(--viv-texto-suave); font-style: italic; }

/* ---------- Portada y secciones ---------- */
.viv-bloque { margin: 18px 0 8px; }
.vivrdn-home-grid3 { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.vivrdn-col-home-left, .vivrdn-col-home-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vivrdn-col-home-left { flex: 1 1 240px; }
.vivrdn-col-home-center { flex: 1.6 1 320px; min-width: 0; }
.vivrdn-col-home-right { flex: 1 1 240px; box-sizing: border-box; padding: 16px; background: var(--viv-azul-panel); border-radius: 12px; }
.vivrdn-col-head { margin: 0 0 4px; padding-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--viv-azul-osc); border-bottom: 2px solid var(--viv-azul); }
.vivrdn-col-head-destacados { text-align: center; }
.vivrd-ad-index-mobile { display: none; }
.viv-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--viv-borde); }
.viv-transversal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.viv-pagina + .viv-pagina, .viv-bloque-cuerpo > .viv-pagina { margin-top: 22px; }
.viv-bloque-pie { text-align: center; margin-top: 24px; }
.viv-bloque-pie[hidden] { display: none; }
.viv-mas { padding: 11px 30px; font: inherit; font-size: 15px; font-weight: 700; color: var(--viv-azul); background: #fff; border: 1.5px solid var(--viv-azul); border-radius: 999px; cursor: pointer; }
.viv-mas:hover { background: var(--viv-azul); color: #fff; }
.viv-mas:disabled { opacity: .6; cursor: progress; }
.viv-aviso { margin: 0 0 14px; padding: 10px; font-size: 14px; text-align: center; background: #fff6e1; border: 1px solid var(--viv-ambar); border-radius: 8px; }
.viv-aviso[hidden] { display: none; }
.viv-recargar { font: inherit; font-weight: 700; color: var(--viv-azul-osc); background: none; border: 0; text-decoration: underline; cursor: pointer; }

.viv-seccion-trans { margin-top: 44px; }
.viv-seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 3px solid var(--viv-tinta); }
.viv-seccion-cabeza h2 { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.viv-seccion-cabeza h2 a { color: var(--viv-tinta); text-decoration: none; }
.viv-seccion-cabeza h2 a:hover { color: var(--viv-azul); }
.viv-ver-todo { font-size: 14px; font-weight: 700; color: var(--viv-azul); text-decoration: none; white-space: nowrap; }
.viv-ver-todo:hover { text-decoration: underline; }

.viv-franja { margin: 36px 0 8px; padding: 20px; background: var(--viv-gris); border-radius: 12px; }
.viv-franja-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.viv-franja-col h2 { margin: 0 0 8px; padding-bottom: 6px; font-size: 15px; border-bottom: 2px solid var(--viv-tinta); }
.viv-franja-col h2 a { color: var(--viv-tinta); text-decoration: none; }
.viv-franja-item { display: block; padding: 7px 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--viv-tinta); text-decoration: none; border-bottom: 1px solid var(--viv-borde); }
.viv-franja-item:last-child { border-bottom: 0; }
.viv-franja-item:hover { color: var(--viv-azul); }
.viv-franja-col { display: flex; flex-direction: column; }
.viv-franja .vivrdn-item { padding: 8px 0; border-bottom: 1px solid var(--viv-borde); }
.viv-franja .vivrdn-item:last-child { border-bottom: 0; }
.viv-franja .vivrdn-link { gap: 10px; }
.viv-franja .viv-item-imagen { width: 64px; border-radius: 6px; }
.viv-franja .vivrdn-title { font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
	.vivrdn-home-grid3 { flex-direction: column; }
	.vivrd-ad-index-mobile { display: block; margin: 14px 0; }
	.viv-transversal, .viv-extra { grid-template-columns: 1fr; }
}

/* ---------- Más vistas ---------- */
.vivrdn-populares { margin-top: 44px; padding: 18px 24px; background: var(--viv-azul-panel); border-radius: 12px; }
.vivrdn-populares-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vivrdn-populares-titulo { margin: 0; font-size: 15px; font-weight: 800; color: var(--viv-azul); text-transform: uppercase; letter-spacing: .5px; }
.vivrdn-populares-selector { display: flex; gap: 6px; }
.vivrdn-periodo { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 14px; background: #fff; color: var(--viv-azul); text-decoration: none; }
.vivrdn-periodo.is-active { background: var(--viv-azul); color: #fff; }
.vivrdn-populares-items { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.vivrdn-pop-item { display: flex; flex-direction: column; text-decoration: none; color: var(--viv-tinta); }
.vivrdn-pop-item:hover h4 { color: var(--viv-azul); }
.vivrdn-pop-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background-image: linear-gradient(135deg, var(--viv-azul), var(--viv-azul-osc)); background-size: cover; background-position: center; margin-bottom: 8px; }
.vivrdn-pop-body h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.vivrdn-pop-catline { display: block; margin: 2px 0 4px; font-size: 11px; font-weight: 800; color: var(--viv-azul-osc); text-transform: uppercase; letter-spacing: .4px; }
.vivrdn-pop-catline.oficial { color: var(--viv-rojo-osc); }
.vivrdn-pop-excerpt { margin: 0; font-size: 12px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vivrdn-pop-featured { flex: 1.1 1 320px; min-width: 0; }
.vivrdn-pop-featured .vivrdn-pop-body h4 { font-size: 17px; }
.vivrdn-pop-grid { flex: 1 1 360px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .vivrdn-pop-grid { grid-template-columns: 1fr; } }

/* ---------- Artículo ---------- */
.viv-articulo { width: 100%; }
.viv-titular { margin: 6px 0 10px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; }
.viv-subtitulo { margin: 0 0 14px; font-size: 1.2rem; line-height: 1.45; color: var(--viv-texto-suave); }
.viv-meta { gap: 12px; margin-bottom: 18px; font-size: 14px; color: var(--viv-texto-suave); }
.viv-meta-seccion { font-weight: 800; color: var(--viv-azul-osc); text-decoration: none; }
.viv-meta-seccion:hover { text-decoration: underline; }
.viv-imagen-principal img { width: 100%; border-radius: var(--viv-radio); }
.viv-cuerpo { overflow: hidden; }
.viv-cuerpo::after { content: ""; display: table; clear: both; }
.viv-lectura p, .viv-lectura li { font-size: 1.125rem; line-height: 1.75; }
.viv-cuerpo img { border-radius: 8px; }
.viv-cuerpo .alignleft { float: left; margin: 4px 20px 14px 0; }
.viv-cuerpo .alignright { float: right; margin: 4px 0 14px 20px; }
.viv-cuerpo .aligncenter { display: block; margin-inline: auto; }
.viv-cuerpo blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--viv-ambar); font-style: italic; }
.viv-cuerpo iframe { max-width: 100%; }
.viv-cuerpo .wp-caption { max-width: 100%; }
.viv-cuerpo .wp-caption-text { font-size: 14px; color: var(--viv-texto-suave); }

/* ---------- PDF y ediciones impresas ---------- */
.viv-pdf { margin: 0; }
.viv-pdf-visor { width: 100%; height: min(90vh, 1100px); border: 1px solid var(--viv-borde); border-radius: var(--viv-radio); background: var(--viv-gris); }
.viv-pdf-acciones { margin-top: 12px; }
.viv-boton { display: inline-block; padding: 10px 22px; font-weight: 700; color: #fff; background: var(--viv-azul); border-radius: 999px; text-decoration: none; }
.viv-boton:hover { background: var(--viv-azul-osc); }
.viv-impresas-anio { margin: 28px 0 10px; font-size: 20px; padding-bottom: 6px; border-bottom: 2px solid var(--viv-tinta); }
.viv-impresas-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; margin: 0; padding: 0; }
.viv-impresas-lista a { display: block; padding: 8px 0; color: var(--viv-tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--viv-borde); }
.viv-impresas-lista a:hover { color: var(--viv-azul); }

/* ---------- Archivos y búsqueda ---------- */
.viv-archivo { margin-top: 18px; }
.viv-archivo .wp-block-post-featured-image img { border-radius: 8px; }
.viv-archivo-titulo { margin: 8px 0 4px; font-size: 17px; line-height: 1.3; }
.viv-archivo-titulo a { color: var(--viv-tinta); text-decoration: none; }
.viv-archivo-titulo a:hover { color: var(--viv-azul); }
.viv-archivo-fecha { font-size: 13px; color: var(--viv-texto-suave); }
.viv-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; font-weight: 700; }
.viv-paginacion a, .viv-paginacion .page-numbers { padding: 6px 12px; border-radius: 6px; text-decoration: none; }
.viv-paginacion .current { background: var(--viv-azul); color: #fff; }
.viv-buscador { margin: 12px 0 20px; max-width: 560px; }
.viv-404 { padding-top: 30px; }

/* ---------- Pie ---------- */
.viv-pie { width: 100%; max-width: var(--viv-ancho); margin: 56px auto 0; box-sizing: border-box; color: #e6e6e6; background: var(--viv-tinta); border-top: 3px solid var(--viv-ambar); }
.viv-pie-inner { max-width: var(--viv-ancho); margin: 0 auto; padding: 40px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 64px; }
.viv-pie-col h2 { margin: 0 0 10px; font-size: 15px; color: #fff; }
.viv-pie-col ul { list-style: none; margin: 0; padding: 0; }
.viv-pie-col li { margin: 6px 0; }
.viv-pie-col p { font-size: 13.5px; line-height: 1.6; color: #cfcfcf; margin: 0 0 10px; }
.viv-pie-col a { color: #cfcfcf; text-decoration: none; font-size: 14px; }
.viv-pie-col a:hover { color: #fff; text-decoration: underline; }
.viv-pie-badges { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.viv-pie-badges img { height: 70px; width: auto; display: block; }
.viv-contador { margin: 10px 0 0; font-size: 14px; color: #bdbdbd; }
.viv-contador strong { display: block; font-size: 30px; color: var(--viv-ambar); line-height: 1.1; }
.viv-pie-base { max-width: var(--viv-ancho); margin: 0 auto; padding: 16px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #a8a8a8; border-top: 1px solid #3a3a3a; text-align: center; }
.viv-pie-lema { font-weight: 800; color: var(--viv-azul); text-transform: uppercase; letter-spacing: .5px; }
.viv-pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.viv-pie-legal a { color: #a8a8a8; text-decoration: none; }
.viv-pie-legal a:hover { color: #fff; text-decoration: underline; }

/* 0.1.2: miniaturas sin estirar y titulares de la franja a 4 líneas */
.vivrdn-link { align-items: flex-start; }
.viv-item-imagen { height: auto; align-self: flex-start; }
.viv-franja .vivrdn-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* 0.2.0: cabecera fija real (el envoltorio de bloque no limita el sticky) */
.viv-parte-cabecera { display: contents; }

/* 0.2.0: anuncios (Vivir Ads) */
.viv-main .vrdesp-slot, .viv-main .vrdesp-unit { margin: 16px 0; }
.viv-main, .viv-pie { position: relative; z-index: 2; }
.viv-main { background: #fff; }
.vrdesp-fixed-brand-week-fondo { position: fixed; inset: 0; z-index: 1; display: none; }
.vrdesp-fixed-brand-week-fondo .vrdesp-unit, .vrdesp-fixed-brand-week-fondo a { display: block; width: 100%; height: 100%; }
.vrdesp-fixed-brand-week-fondo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center top; display: block; }
@media (min-width: 1600px) { .vrdesp-fixed-brand-week-fondo { display: block; } }
.vrdesp-fixed-brand-week-megabanner { position: relative; z-index: 2; max-width: 1200px; margin: 16px auto; box-sizing: border-box; }
.vrdesp-fixed-brand-week-megabanner img { width: 100%; height: auto; display: block; }
.vrdesp-fixed-brand-week-fijo-movil { display: none; }
@media (max-width: 640px) {
	.vrdesp-fixed-brand-week-fijo-movil { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .12); }
	.vrdesp-fixed-brand-week-fijo-movil img { width: 100%; height: auto; display: block; border-radius: 6px; }
	body.vivrd-menu-movil-bloqueo .vrdesp-fixed-brand-week-fijo-movil { display: none; }
}

/* 0.2.1: fila de anuncios (Espacio banner + Espacio index), proporción fija igualada a RD */
.viv-anuncios-fila { display: flex; align-items: flex-start; gap: 24px; margin: 16px 0; }
.viv-anuncio { min-width: 0; overflow: hidden; margin: 0; }
.viv-anuncio-espacio-banner { flex: 2.474 1 0; aspect-ratio: 1618 / 340; }
.viv-anuncio-espacio-index { flex: 1 1 0; aspect-ratio: 654 / 340; }
.viv-anuncio .vrdesp-unit, .viv-anuncio .vrdesp-placeholder { margin: 0 !important; width: 100%; height: 100%; }
.viv-anuncio img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 6px; }
.viv-articulo .viv-anuncios-fila { margin: 4px 0 22px; }
@media (max-width: 640px) {
	.viv-anuncios-fila { flex-direction: column; gap: 12px; }
	.viv-anuncio-espacio-banner { flex: none; width: 100%; aspect-ratio: 680 / 470; }
	.viv-anuncio-espacio-index { flex: none; width: 100%; aspect-ratio: 680 / 160; }
}

/* Sustitución (no duplicado): a partir del breakpoint en que aparece el
   anuncio incrustado a mitad de artículo (.vivrd-ad-index-mobile, 900px,
   bloque 3), espacio-index deja de mostrarse en la fila superior — solo
   queda banner ahí. En RD el mismo criterio usa 700px, el breakpoint al
   que .vivrd-ad-index-mobile se hace visible allí; aquí se usa 900px
   porque es el breakpoint que .vivrd-ad-index-mobile ya tenía establecido
   en este proyecto desde el bloque 3, para no abrir un hueco entre los
   dos puntos de corte dentro de este mismo código. */
@media (max-width: 900px) {
	.viv-anuncios-fila .viv-anuncio-espacio-index { display: none; }
}

/* ============================================================
   Navegación territorial (bloque vivir/menu-territorial) — bloque 2
   Portado de RD (plugins/vivir-rd-core + style.css), con las clases
   vivrd-* ya establecidas en bloque 1 y las variables de color de
   Vivir Ediciones en vez de las de RD.
   ============================================================ */
.vivrd-menu-territorial{ position:relative; padding-left:0; padding-right:0; }
.vivrd-menu-territorial ul{
	list-style:none; display:flex; flex-wrap:nowrap; gap:8px;
	margin:16px 0; padding:2px 20px 11px;
	overflow-x:auto; overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
}
.vivrd-menu-territorial li{ flex:0 0 auto; }
.vivrd-menu-territorial li a{
	display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
	padding:8px 15px; border:1.5px solid var(--viv-borde); border-radius:21px;
	font-size:13px; font-weight:700; color:var(--viv-tinta); text-decoration:none;
}
.vivrd-menu-territorial li a:hover{ border-color:var(--viv-azul); color:var(--viv-azul); }
.vivrd-menu-territorial li.vivrd-oficial a{ border-color:var(--viv-rojo); color:var(--viv-rojo); }
.vivrd-menu-territorial li.vivrd-activo a{ background:var(--viv-azul-panel); border-color:var(--viv-azul); color:var(--viv-azul); }
.vivrd-estrella{ color:var(--viv-rojo); font-size:11px; }

/* Indicador de progreso sin JS (scroll-driven), con repliegue para
   navegadores sin animation-timeline: scroll(). */
@property --vivrd-fade-izq{ syntax:"<length>"; inherits:false; initial-value:0px; }
@property --vivrd-fade-der{ syntax:"<length>"; inherits:false; initial-value:0px; }
@keyframes vivrd-terr-fade{
	0%   { --vivrd-fade-izq:0px;  --vivrd-fade-der:36px; }
	6%   { --vivrd-fade-izq:36px; --vivrd-fade-der:36px; }
	94%  { --vivrd-fade-izq:36px; --vivrd-fade-der:36px; }
	100% { --vivrd-fade-izq:36px; --vivrd-fade-der:0px;  }
}
@keyframes vivrd-terr-pista{ from,to{ opacity:1; } }
@keyframes vivrd-terr-cursor{
	from{ opacity:1; transform:translateX(0); }
	to  { opacity:1; transform:translateX(calc(233.333% - 40px)); }
}
@supports (animation-timeline: scroll()){
	.vivrd-menu-territorial{ timeline-scope:--vivrd-pastillas; padding-bottom:9px; }
	.vivrd-menu-territorial ul{
		scroll-timeline:--vivrd-pastillas inline;
		-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--vivrd-fade-izq), #000 calc(100% - var(--vivrd-fade-der)), transparent 100%);
		mask-image:linear-gradient(to right, transparent 0, #000 var(--vivrd-fade-izq), #000 calc(100% - var(--vivrd-fade-der)), transparent 100%);
		animation:vivrd-terr-fade linear both;
		animation-timeline:scroll(self inline);
		scrollbar-width:none;
	}
	.vivrd-menu-territorial ul::-webkit-scrollbar{ display:none; }
	.vivrd-menu-territorial::before, .vivrd-menu-territorial::after{
		content:""; position:absolute; bottom:0; height:3px; border-radius:2px; pointer-events:none; opacity:0;
	}
	.vivrd-menu-territorial::before{
		left:20px; right:20px; background:var(--viv-borde);
		animation:vivrd-terr-pista linear both; animation-timeline:--vivrd-pastillas;
	}
	.vivrd-menu-territorial::after{
		left:20px; width:30%; background:rgba(0,112,186,.55);
		animation:vivrd-terr-cursor linear both; animation-timeline:--vivrd-pastillas;
	}
}
@supports not (animation-timeline: scroll()){
	.vivrd-menu-territorial ul{
		padding-bottom:9px; scrollbar-width:thin;
		scrollbar-color:rgba(0,112,186,.45) var(--viv-borde);
	}
	.vivrd-menu-territorial ul::-webkit-scrollbar{ height:4px; }
	.vivrd-menu-territorial ul::-webkit-scrollbar-track{ background:var(--viv-borde); border-radius:2px; margin:0 20px; }
	.vivrd-menu-territorial ul::-webkit-scrollbar-thumb{ background:rgba(0,112,186,.45); border-radius:2px; }
	.vivrd-menu-territorial::after{
		content:""; position:absolute; top:0; right:0; bottom:0; width:36px;
		background:linear-gradient(to left, #fff, rgba(255,255,255,0)); pointer-events:none;
	}
}

/* Flechas + arrastre con ratón en escritorio (≥901px) */
.vivrd-menu-flecha{
	display:none !important; position:absolute; top:50%; transform:translateY(-50%);
	width:30px; height:30px; border-radius:50%;
	border:1.5px solid var(--viv-borde); background:#fff;
	align-items:center; justify-content:center;
	font-size:20px; line-height:1; color:var(--viv-azul);
	cursor:pointer; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.12);
	transition:opacity .2s ease, border-color .2s ease, transform .15s ease;
}
.vivrd-menu-flecha:hover{ border-color:var(--viv-azul); transform:translateY(-50%) scale(1.08); }
.vivrd-menu-flecha-izq{ left:6px; }
.vivrd-menu-flecha-der{ right:6px; }
.vivrd-menu-flecha-oculta{ opacity:0; pointer-events:none; }

@media (min-width:901px){
	.vivrd-menu-territorial.vivrd-menu-necesita-scroll .vivrd-menu-flecha{ display:flex !important; }
	.vivrd-menu-territorial.vivrd-menu-necesita-scroll ul{ padding-left:40px; padding-right:40px; }
	.vivrd-menu-territorial ul{ cursor:grab; user-select:none; scroll-behavior:smooth; }
	.vivrd-menu-territorial ul.vivrd-menu-arrastrando{ cursor:grabbing; scroll-behavior:auto; }
	.vivrd-menu-territorial ul.vivrd-menu-arrastrando li a{ pointer-events:none; }
}

/* viv-pie: alineacion uniforme en movil */
@media (max-width: 600px) {
	.viv-pie-inner { flex-direction: column; align-items: stretch; }
	.viv-pie-col { width: 100%; text-align: left; }
	.viv-pie-badges { justify-content: flex-start; }
}