/**
 * MANMUNI Petén Itzá - theme.css
 * Estilos portados desde Portada5.html + bloque editable inspirado en index0.html.
 *
 * @author jveron <jveron@ereerea.com>
 */

:root {
	--navy:       #0f1f4a;
	--navy-2:     #142a5e;
	--navy-deep:  #0a163a;
	--blue:       #1e63b8;
	--blue-light: #4fa6dd;
	--blue-pale:  #cfe7f6;
	--yellow:     #f5c542;
	--ink:        #0e1a30;
	--ink-soft:   #43526b;
	--rule:       rgba(15, 31, 74, 0.14);
	--rule-soft:  rgba(15, 31, 74, 0.08);
	--paper:      #ffffff;
	--bone:       #f5f7fb;
	/* Gris del fondo de la imagen de la barra de logos: la sección usa el
	   mismo tono para que el JPG se funda con ella sin recuadro blanco. */
	--logo-bar:   #f7f7f7;

	/* Acentos del bloque editable (de index0.html) */
	--teal:       #2a8aa8;
	--teal-deep:  #14627d;
	--cream:      #f6f1e7;
}

* { box-sizing: border-box; }
html, body {
	margin: 0; padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

.wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

/* ============== TOP NAVY BAR ============== */
.topbar {
	background: var(--navy);
	color: white;
	padding: 22px 0 26px;
	position: relative;
}
.topbar .wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.topbar .util-l, .topbar .util-r {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}
.topbar .util-l { justify-self: start; }
.topbar .util-r { justify-self: end; }
.topbar .util-r .icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.topbar .util-r .icon:hover { background: rgba(255,255,255,0.18); }
.topbar .util-r .icon svg { width: 12px; height: 12px; fill: white; }

.topbar .crest {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-self: center;
	color: white;
}
.topbar .crest img,
.topbar .crest .custom-logo {
	width: 70px; height: 70px;
	border-radius: 50%;
	background: white;
	padding: 6px;
	object-fit: contain;
}
.topbar .crest .text {
	text-align: left;
	line-height: 1;
	max-width: 540px;
}
.topbar .crest .kicker {
	font-family: "Archivo", sans-serif;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255,255,255,0.78);
	margin: 0 0 7px;
	line-height: 1.3;
	max-width: 460px;
	text-wrap: balance;
}
.topbar .crest h1 {
	font-family: "Archivo", "Source Sans 3", sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 32px);
	letter-spacing: 0.04em;
	margin: 0 0 6px;
	color: white;
	display: inline-block;
	border-bottom: 2px solid var(--blue-light);
	padding-bottom: 4px;
}
.topbar .crest h1 .underline {
	display: inline;
	border: 0;
	padding: 0;
}
.topbar .crest .sub {
	font-family: "Source Sans 3", sans-serif;
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: rgba(255,255,255,0.82);
	margin: 7px 0 0;
	line-height: 1.35;
	max-width: 300px;
	text-wrap: pretty;
}

/* tri-color stripe */
.stripe {
	height: 8px;
	display: flex;
}
.stripe span:nth-child(1) { background: var(--blue-light); flex: 1; }
.stripe span:nth-child(2) { background: white; flex: 0 0 28%; }
.stripe span:nth-child(3) { background: var(--blue); flex: 1; }

/* ============== MAIN NAV ============== */
.mainnav {
	background: white;
	border-bottom: 1px solid var(--rule-soft);
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(255,255,255,0.96);
}
.mainnav .wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 38px);
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
}
/* ul/li generados por wp_nav_menu: que se comporten como fila horizontal */
.mainnav ul,
.mainnav #menu-principal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 38px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mainnav li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mainnav a {
	display: flex;
	align-items: center;
	height: 64px;
	padding: 0 6px;
	font-family: "Source Sans 3", sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.01em;
	color: var(--ink);
	border-bottom: 3px solid transparent;
	transition: color 0.2s, border-color 0.2s;
	white-space: nowrap;
}
.mainnav a .caret {
	font-size: 9px;
	margin-left: 6px;
	opacity: 0.6;
}
.mainnav a.active,
.mainnav .current-menu-item > a,
.mainnav .current_page_item > a {
	color: var(--navy);
	border-bottom-color: var(--navy);
	font-weight: 600;
}
.mainnav a:hover { color: var(--navy); border-bottom-color: var(--blue-light); }

.mainnav .search {
	margin-left: auto;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--bone);
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.mainnav .search:hover { background: var(--blue-pale); }
.mainnav .search svg { width: 14px; height: 14px; fill: currentColor; }

/* ============== HERO ============== */
.hero {
	position: relative;
	background: var(--bone);
	overflow: hidden;
}
.hero .picture {
	width: 100%;
	height: clamp(440px, 64vh, 600px);
	object-fit: cover;
	object-position: center 40%;
	display: block;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(15, 31, 74, 0.78) 0%,
		rgba(15, 31, 74, 0.45) 40%,
		rgba(15, 31, 74, 0.08) 100%);
	pointer-events: none;
}

/* ----- Hero modo libre: overlay blanco semitransparente + contenido editable ----- */
.hero-free .picture {
	height: clamp(480px, 72vh, 720px);
}
.hero-free-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 5vw, 64px);
	/* Reservar espacio para la status bar superior y un margen inferior,
	   así el contenido centrado no se solapa con ella. */
	padding-top: clamp(96px, 12vh, 140px);
	padding-bottom: clamp(28px, 5vw, 48px);
	pointer-events: none;
}
/* Sin overlay global: la foto se ve completa; solo el contenido lleva fondo blanco. */
.hero-free::after {
	content: none;
}
/* Status bar fuera del translúcido: label a la izquierda, desc a la derecha, sobre la imagen */
.hero-free-statusbar {
	position: absolute;
	top: clamp(20px, 4vw, 40px);
	left: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 40px);
	padding: 0 clamp(24px, 5vw, 64px);
	pointer-events: none;
}
.hero-free-statusbar .status-left,
.hero-free-statusbar .status-right {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Archivo", sans-serif;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: white;
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.hero-free-statusbar .status-left .dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 4px rgba(245, 197, 66, 0.2);
	animation: ec-pulse 2.4s ease-in-out infinite;
	flex: none;
}
.hero-free-statusbar .status-right {
	font-family: "Source Sans 3", sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
	text-align: right;
	max-width: 50ch;
}
@media (max-width: 760px) {
	.hero-free-statusbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		top: 16px;
		padding: 0 20px;
	}
	.hero-free-statusbar .status-right {
		text-align: left;
	}
}
.hero-free-inner {
	position: relative;
	z-index: 3;
	width: var(--hero-free-width, 56%);
	max-height: var(--hero-free-height, 80%);
	overflow: auto;
	background: rgba(255, 255, 255, var(--hero-overlay-alpha, 0.88));
	color: var(--ink);
	font-family: "Source Sans 3", system-ui, sans-serif;
	pointer-events: auto;
	padding: clamp(32px, 4vw, 56px);
	border-radius: 8px;
	box-shadow: 0 20px 50px -12px rgba(10, 22, 58, 0.35);
}
/* Tipografía del contenido libre (the_content de una página) */
.hero-free-inner h1,
.hero-free-inner h2,
.hero-free-inner h3 {
	font-family: "Archivo", "Source Sans 3", sans-serif;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
.hero-free-inner h1 { font-size: clamp(30px, 4vw, 46px); }
.hero-free-inner h2 { font-size: clamp(24px, 3vw, 34px); }
.hero-free-inner h3 { font-size: clamp(20px, 2.4vw, 26px); }
.hero-free-inner p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 14px;
	text-wrap: pretty;
}
.hero-free-inner ul,
.hero-free-inner ol {
	margin: 0 0 16px;
	padding-left: 22px;
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.65;
}
.hero-free-inner li { margin: 0 0 6px; }
.hero-free-inner a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hero-free-inner a:hover { color: var(--navy); }
.hero-free-inner a.cta-primary,
.hero-free-inner a.button,
.hero-free-inner .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--navy);
	color: white;
	text-decoration: none;
	transition: transform 0.15s, background 0.2s;
}
.hero-free-inner a.cta-primary:hover,
.hero-free-inner a.button:hover,
.hero-free-inner .wp-block-button__link:hover {
	transform: translateY(-1px);
	background: var(--blue);
}
.hero-free-inner img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
.hero-free-inner blockquote {
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 3px solid var(--blue-light);
	color: var(--ink-soft);
	font-style: italic;
}
.hero-free-inner strong { color: var(--ink); }
.hero-free-inner hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 20px 0;
}

/* ----- Elementos del bloque editable dentro del hero libre ----- */
.hero-free-inner .ec-status {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--rule);
	flex-wrap: wrap;
}
.hero-free-inner .ec-status .dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--teal);
	box-shadow: 0 0 0 4px rgba(42, 138, 168, 0.15);
	animation: ec-pulse 2.4s ease-in-out infinite;
	flex: none;
}
.hero-free-inner .ec-status .label {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 600;
}
.hero-free-inner .ec-status .desc {
	font-size: 13.5px;
	color: var(--ink-soft);
	margin-left: auto;
	text-align: right;
	max-width: 50ch;
}
.hero-free-inner .ec-municipios-list {
	list-style: none;
	margin: 18px 0 22px;
	padding: 18px 0 0;
	border-top: 1px dashed var(--rule);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 18px;
}
.hero-free-inner .ec-municipios-list li {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 15px;
	color: var(--ink);
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}
.hero-free-inner .ec-municipios-list li::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--teal);
	flex: none;
	transform: translateY(-2px);
}
.hero-free-inner .ec-directiva-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hero-free-inner .ec-directiva-list li {
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink);
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rule-soft);
}
.hero-free-inner .ec-directiva-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-free-inner .ec-directiva-list .role {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 600;
	margin-right: 8px;
}
.hero-free-inner .note {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-soft);
	padding: 14px 16px;
	background: #faf7f1;
	border-radius: 3px;
	border-left: 2px solid #cdb480;
}
@media (max-width: 760px) {
	.hero-free .picture { height: auto; min-height: 60vh; }
	.hero-free-overlay {
		align-items: flex-start;
		padding: 20px;
		/* En mobile el status bar ocupa ~2 líneas; reservamos debajo. */
		padding-top: 110px;
	}
	.hero-free-inner {
		padding: 22px;
		width: var(--hero-free-width-mob, 92%);
		max-height: var(--hero-free-height-mob, 70%);
	}
	.hero-free-inner .ec-status .desc { margin-left: 0; text-align: left; flex: 1 1 100%; }
	.hero-free-inner .ec-municipios-list { grid-template-columns: repeat(2, 1fr); }
}

.hero-content {
	position: absolute;
	left: clamp(20px, 5vw, 72px);
	top: 50%;
	transform: translateY(-50%);
	max-width: min(720px, 60%);
	color: white;
	z-index: 2;
}
.hero-content .pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 10px;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--navy-deep);
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.hero-content .pill .dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--navy-deep);
}
.hero-content h2 {
	font-family: "Archivo", "Source Sans 3", sans-serif;
	font-weight: 900;
	font-size: clamp(46px, 7.5vw, 100px);
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0 0 12px;
	text-shadow: 0 4px 28px rgba(0,0,0,0.4);
}
.hero-content h2 .accent {
	display: inline-block;
	color: var(--yellow);
}
.hero-content .lead {
	font-size: 18px;
	line-height: 1.5;
	max-width: 48ch;
	color: rgba(255,255,255,0.94);
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
	margin: 0 0 28px;
}
.hero-content .ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.hero-content .ctas a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 999px;
	transition: transform 0.15s, background 0.2s, color 0.2s;
}
.hero-content .ctas .primary {
	background: var(--yellow);
	color: var(--navy-deep);
}
.hero-content .ctas .primary:hover { transform: translateY(-1px); }
.hero-content .ctas .ghost {
	border: 2px solid white;
	color: white;
}
.hero-content .ctas .ghost:hover { background: rgba(255,255,255,0.12); }

/* slider dots (decorative) */
.hero .dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}
.hero .dots span {
	width: 30px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255,255,255,0.35);
}
.hero .dots span.active { background: var(--yellow); }

/* arrows */
.hero .arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 64px;
	background: rgba(15,31,74,0.55);
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s;
}
.hero .arrow:hover { background: var(--navy); }
.hero .arrow.left { left: 0; border-radius: 0 4px 4px 0; }
.hero .arrow.right { right: 0; border-radius: 4px 0 0 4px; }
.hero .arrow svg { width: 14px; height: 14px; fill: white; }

/* ============== ACCESS BANNERS (3) ============== */
.access {
	padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 36px);
	background: var(--paper);
}
.access .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 28px);
}
.access .grid.grid-double {
	grid-template-columns: repeat(2, 1fr);
}
.access .grid.grid-single {
	grid-template-columns: 1fr;
}
.access .grid.grid-single .card {
	min-height: 220px;
}
.access .card {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	min-height: 180px;
	padding: 28px 26px;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	isolation: isolate;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
}
.access .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(15, 31, 74, 0.18);
}
.access .card .bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
}
.access .card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.access .card .label {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--yellow);
	margin: 0 0 12px;
}
.access .card h3 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.05;
	margin: 0 0 18px;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	max-width: 18ch;
}
.access .card .cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: white;
	align-self: flex-start;
	padding: 8px 0 4px;
	border-bottom: 1.5px solid var(--yellow);
	transition: gap 0.2s;
}
.access .card:hover .cta { gap: 16px; }

/* ============== MUNICIPIOS BAND ============== */
.municipios {
	background: var(--bone);
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	padding: clamp(36px, 5vw, 56px) 0;
}
/* Modo compacto: padding mínimo */
.municipios.municipios-compact {
	padding: 12px 0;
}
.municipios.municipios-compact .head {
	margin-bottom: 12px;
	padding-bottom: 8px;
}
.municipios.municipios-compact .grid {
	border-radius: 4px;
}
.municipios.municipios-compact .item {
	padding: 10px 14px;
	gap: 4px;
}
.municipios.municipios-compact .item .pin {
	width: 16px; height: 16px;
}
.municipios.municipios-compact .item .pin svg {
	width: 13px; height: 13px;
}
.municipios.municipios-compact .item .name {
	font-size: 12.5px;
}
.municipios.municipios-compact .item .role {
	font-size: 10.5px;
}
.municipios .head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-soft);
	flex-wrap: wrap;
}
.municipios .head .l {
	display: flex;
	align-items: end;
	gap: 18px;
}
.municipios .head .pill {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	background: var(--navy);
	color: white;
	padding: 6px 14px;
	border-radius: 999px;
}
.municipios .head h2 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	font-size: clamp(24px, 3vw, 36px);
	margin: 0;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--navy);
	text-transform: uppercase;
}
.municipios .head h2 .yel { color: var(--yellow); }
.municipios .head .count {
	font-size: 12.5px;
	color: var(--ink-soft);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.municipios .grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	border: 1px solid var(--rule);
	border-radius: 6px;
	overflow: hidden;
	background: white;
}
.municipios .item {
	padding: 22px 18px;
	border-right: 1px solid var(--rule-soft);
	transition: background 0.2s;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.municipios .item:last-child { border-right: 0; }
.municipios .item:hover {
	background: var(--blue-pale);
}
.municipios .item:hover .name { color: var(--navy); }
/* Tarjeta sin enlace (enlaces deshabilitados en el Personalizador). */
.municipios div.item { cursor: default; }
.municipios div.item:hover { background: white; }
.municipios div.item:hover .name { color: var(--ink); }
.municipios div.item:hover .pin { color: var(--blue); transform: none; opacity: 0.85; }
.municipios .item .pin {
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
	opacity: 0.85;
	transition: color 0.2s, transform 0.2s;
}
.municipios .item .pin svg {
	width: 18px; height: 18px;
	fill: currentColor;
}
.municipios .item:hover .pin {
	color: var(--navy);
	transform: translateY(-2px) scale(1.08);
	opacity: 1;
}
.municipios .item .name {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color 0.2s;
}
.municipios .item .role {
	font-size: 11.5px;
	color: var(--ink-soft);
	letter-spacing: 0.04em;
}

/* ============== NEWS ROW ============== */
.news {
	background: white;
	padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 5vw, 56px);
}
.news .head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-soft);
}
.news .head h2 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	font-size: clamp(24px, 3vw, 36px);
	margin: 0;
	line-height: 1;
	color: var(--navy);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.news .head a.all {
	font-family: "Archivo", sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--navy);
	border-bottom: 2px solid var(--yellow);
	padding-bottom: 2px;
}
.news .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
}
.news article .img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--bone);
}
.news article .img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.6s ease;
}
.news article:hover .img img { transform: scale(1.04); }
.news article .meta {
	margin: 16px 0 6px;
	font-family: "Archivo", sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--blue);
	font-weight: 700;
}
.news article h3 {
	font-family: "Source Sans 3", sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var(--ink);
}
.news article p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
	text-wrap: pretty;
}

/* ============== PARTNERS ============== */
.partners {
	background: var(--logo-bar);
	padding: 30px clamp(20px, 4vw, 56px);
	border-top: 1px solid var(--rule);
}
.partners .wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 28px;
	padding: 0;
}
.partners .head-l {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 4px;
}
.partners .sub-l {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.5;
}
.partners img.logo-bar {
	width: 100%;
	max-width: 920px;
	height: auto;
	display: block;
}

/* ============== COLOFON ============== */
.colofon {
	background: var(--navy-deep);
	color: rgba(255,255,255,0.7);
	padding: 18px clamp(20px, 4vw, 56px);
	font-family: "Archivo", sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.colofon .wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	gap: 16px;
	flex-wrap: wrap;
}

/* ============== BLOQUE EDITABLE (inspirado en index0.html) ============== */
.editable-card {
	background: var(--bone);
	padding: clamp(40px, 5vw, 64px) 0;
}
.ec-card {
	width: min(1080px, 100%);
	margin: 0 auto;
	background: var(--paper);
	border-radius: 6px;
	padding: 48px clamp(28px, 5vw, 64px) 44px;
	box-shadow:
		0 30px 80px -20px rgba(0,0,0,0.25),
		0 2px 6px rgba(0,0,0,0.10);
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(28px, 5vw, 64px);
}
.ec-status {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--rule);
}
.ec-status .dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--teal);
	box-shadow: 0 0 0 4px rgba(42, 138, 168, 0.15);
	animation: ec-pulse 2.4s ease-in-out infinite;
}
@keyframes ec-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(42, 138, 168, 0.15); }
	50%      { box-shadow: 0 0 0 8px rgba(42, 138, 168, 0.05); }
}
.ec-status .label {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 600;
}
.ec-status .desc {
	font-size: 14px;
	color: var(--ink-soft);
	margin-left: auto;
	text-align: right;
	max-width: 60ch;
}

.ec-col h2 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 14px;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.ec-col h2::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--teal);
	vertical-align: middle;
	margin-right: 12px;
	transform: translateY(-3px);
}
.ec-col p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 14px;
	text-wrap: pretty;
}
.ec-municipios-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px dashed var(--rule);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 18px;
}
.ec-municipios-list li {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 16px;
	color: var(--ink);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.ec-municipios-list li::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--teal);
	flex: none;
	transform: translateY(-2px);
}
.ec-right-col {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.ec-directiva {
	background: linear-gradient(180deg, #f4f8fa 0%, #eef3f6 100%);
	border-radius: 4px;
	border-left: 3px solid var(--teal);
	overflow: hidden;
}
.ec-directiva .photo {
	width: 100%;
	aspect-ratio: 960 / 214;
	object-fit: cover;
	display: block;
	object-position: center 40%;
}
.ec-directiva .body {
	padding: 20px 24px 22px;
}
.ec-directiva .body h2 { margin-top: 0; }
.ec-directiva ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ec-directiva li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 12px;
	align-items: baseline;
	font-size: 14.5px;
	line-height: 1.4;
}
.ec-directiva .role {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 600;
	padding-top: 2px;
}
.ec-directiva .name {
	color: var(--ink);
}
.ec-directiva .name strong {
	font-weight: 600;
}
.ec-directiva .municipality {
	display: block;
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 2px;
}
.ec-directiva .gerente {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(15,42,61,0.08);
}
.ec-contact h2 { margin-bottom: 8px; }
.ec-contact a {
	display: inline-block;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 18px;
	color: var(--teal-deep);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.2s;
}
.ec-contact a:hover { color: var(--ink); }
.ec-contact .note {
	margin-top: 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-soft);
	padding: 14px 16px;
	background: #faf7f1;
	border-radius: 3px;
	border-left: 2px solid #cdb480;
}
.ec-footer-credit {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 8px;
	opacity: 0.7;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1080px) {
	.access .grid { grid-template-columns: 1fr 1fr; }
	.access .card.noticias { grid-column: span 2; }
	.municipios .grid { grid-template-columns: repeat(3, 1fr); }
	.municipios .item:nth-child(3) { border-right: 0; }
	.municipios .item:nth-child(-n+3) { border-bottom: 1px solid var(--rule-soft); }
	.news .grid { grid-template-columns: 1fr 1fr; }
	.news article:first-child { grid-column: span 2; }
}
@media (max-width: 820px) {
	.ec-card {
		grid-template-columns: 1fr;
		padding: 32px 22px 28px;
	}
	.ec-municipios-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.ec-status { flex-wrap: wrap; }
	.ec-status .desc {
		margin-left: 0;
		text-align: left;
		flex: 1 1 100%;
	}
}
@media (max-width: 760px) {
	.topbar .wrap { grid-template-columns: 1fr; text-align: center; gap: 14px; }
	.topbar .util-l, .topbar .util-r { justify-self: center; }
	.topbar .crest { flex-direction: column; gap: 10px; text-align: center; }
	.topbar .crest .text { text-align: center; }
	.access .grid { grid-template-columns: 1fr; }
	.access .card.noticias { grid-column: auto; }
	.municipios .grid { grid-template-columns: 1fr 1fr; }
	.municipios .item { border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
	.municipios .item:nth-child(even) { border-right: 0; }
	.municipios .item:nth-last-child(-n+2) { border-bottom: 0; }
	.news .grid { grid-template-columns: 1fr; }
	.news article:first-child { grid-column: auto; }
	.mainnav .wrap { overflow-x: auto; justify-content: flex-start; }
	.mainnav ul, .mainnav #menu-principal { justify-content: flex-start; flex-wrap: nowrap; }
	.mainnav a { height: 56px; font-size: 14px; }
	.mainnav .search { display: none; }
	.partners .wrap { grid-template-columns: 1fr; }
	.hero-content { max-width: 92%; padding-right: 12px; }
	.hero .arrow { display: none; }
}

/* ============================================================
 * Bloque: Aviso de construcción (texto centrado)
 * ============================================================ */
.construccion {
	background: var(--bone);
	padding: clamp(28px, 4vw, 48px) 0;
}
.construccion .wrap {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 40px);
}
.construccion .construccion-note {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-soft);
	text-wrap: pretty;
}
.construccion.construccion-yellow {
	background: var(--yellow);
}
.construccion.construccion-yellow .construccion-note {
	color: var(--navy-deep);
	font-weight: 500;
}

/* ============================================================
 * Bloque editable: estilo hero (imagen de fondo + panel translúcido)
 * Reutiliza .hero-free / .hero-free-overlay / .hero-free-inner.
 * ============================================================ */
.editable-card.ec-hero {
	position: relative;
	padding: 0;
	background: none;
	overflow: hidden;
}
.editable-card.ec-hero .picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.editable-card.ec-hero .hero-free-inner {
	width: min(1080px, 92%);
	max-height: none;
}
/* La tarjeta dentro del panel translúcido no necesita su propio fondo/sombra. */
.ec-card-hero {
	width: 100%;
	margin: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
@media (max-width: 760px) {
	.editable-card.ec-hero .ec-card-hero {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Bloque: Hero Portada 3 (texto editable + junta + noticias sobre imagen)
 * Inspirado en manmuni2/Portada3.html
 * ============================================================ */
.hero-p3 {
	position: relative;
	overflow: hidden;
	background: #06141d;
	min-height: clamp(560px, 80vh, 780px);
	display: flex;
}
.hero-p3 .picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	z-index: 0;
}
.hero-p3::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(8,26,38,0.80) 0%, rgba(8,26,38,0.46) 42%, rgba(8,26,38,0.12) 100%);
	z-index: 1;
	pointer-events: none;
}
.hp3-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr min(384px, 38%);
	align-items: start;
	gap: clamp(20px, 3vw, 44px);
	padding: clamp(28px, 5vw, 64px);
}
.hp3-inner--no-rail { grid-template-columns: 1fr; }
.hp3-inner--no-text { grid-template-columns: min(384px, 92%); justify-content: end; }

/* ----- Texto de la izquierda ----- */
.hp3-overlay { color: white; max-width: 620px; align-self: center; }
.hp3-tag {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Archivo", sans-serif;
	font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700;
	color: white;
	padding: 6px 16px 6px 12px;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 999px;
	background: rgba(8,26,38,0.25);
	margin-bottom: 22px;
}
.hp3-tag .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 4px rgba(245,197,66,0.22);
	animation: ec-pulse 2.4s ease-in-out infinite;
	flex: none;
}
.hp3-overlay h2 {
	font-family: "Archivo", "Source Sans 3", sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.hp3-overlay h2 .accent { color: var(--yellow); }
.hp3-overlay .lead {
	font-size: 17px; line-height: 1.55; max-width: 46ch;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
	margin: 0 0 24px;
}
.hp3-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hp3-actions a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px;
	font-family: "Archivo", sans-serif;
	font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
	border-radius: 999px;
	transition: transform 0.15s, background 0.2s;
}
.hp3-actions .primary { background: white; color: var(--navy-deep); }
.hp3-actions .primary:hover { transform: translateY(-1px); background: var(--bone); }
.hp3-actions .ghost { color: white; border: 1px solid rgba(255,255,255,0.6); }
.hp3-actions .ghost:hover { background: rgba(255,255,255,0.12); }

/* ----- Rail de la derecha ----- */
.hp3-rail { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 18px); }
.hp3-card { border-radius: 8px; box-shadow: 0 24px 50px rgba(0,0,0,0.32); }

/* Junta Directiva (glass oscuro) */
.hp3-junta {
	background: rgba(8,26,38,0.62);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.16);
	padding: 16px 18px;
	color: white;
}
.hp3-junta-top {
	display: flex; flex-direction: column; align-items: stretch; gap: 10px;
	padding-bottom: 12px; margin-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.16);
}
.hp3-junta-top .photo {
	width: 100%; height: auto; border-radius: 6px;
	display: block; object-fit: contain;
	background: rgba(255,255,255,0.06);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hp3-junta-titles .lbl {
	display: block; font-size: 10px; letter-spacing: 0.24em;
	text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 600;
}
.hp3-junta-titles h3 {
	margin: 2px 0 0; font-family: "Archivo", sans-serif;
	font-weight: 700; font-size: 16px; color: white; letter-spacing: -0.01em;
}
.hp3-junta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hp3-junta li {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 4px 10px;
	align-items: baseline;
	padding: 7px 0; border-bottom: 1px dotted rgba(255,255,255,0.12);
}
.hp3-junta li:last-child { border-bottom: 0; padding-bottom: 0; }
.hp3-junta .role {
	font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--yellow); font-weight: 700; line-height: 1.3;
}
.hp3-junta .name {
	display: flex; flex-direction: column; gap: 1px;
	font-size: 12.5px; line-height: 1.25; color: rgba(255,255,255,0.95);
	min-width: 0;
}
.hp3-junta .name strong { font-weight: 600; }
.hp3-junta .name .mun { color: rgba(255,255,255,0.6); font-size: 11px; }

/* Noticias (glass claro) */
.hp3-news {
	background: rgba(255,255,255,0.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.6);
	padding: 14px 16px 8px;
	color: var(--ink);
}
.hp3-news .head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-soft);
}
.hp3-news .head .title {
	font-family: "Archivo", sans-serif; font-weight: 700; font-size: 15px;
	letter-spacing: -0.01em; color: var(--ink);
}
.hp3-news .head .all {
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--blue); font-weight: 700; border-bottom: 1px solid currentColor;
	padding-bottom: 1px; white-space: nowrap;
}
.hp3-news ul { list-style: none; margin: 0; padding: 0; }
.hp3-news li { border-bottom: 1px solid var(--rule-soft); }
.hp3-news li:last-child { border-bottom: 0; }
.hp3-news li .hp3-news-row { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; padding: 9px 0; color: inherit; }
.hp3-news li img, .hp3-news li .ph { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; flex: none; }
.hp3-news li .ph { background: var(--blue-pale); display: block; }
.hp3-news li .txt { min-width: 0; }
.hp3-news li .meta {
	display: block; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--blue); font-weight: 700; margin-bottom: 2px;
}
.hp3-news li .ttl { display: block; font-size: 13px; line-height: 1.25; color: var(--ink); font-weight: 500; }
a.hp3-news-row:hover .ttl { color: var(--navy); }

/* Crédito de la foto */
.hp3-credit {
	position: absolute; right: 16px; bottom: 12px; z-index: 2;
	color: rgba(255,255,255,0.7); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
	.hero-p3 { min-height: 0; }
	.hp3-inner,
	.hp3-inner--no-rail,
	.hp3-inner--no-text { grid-template-columns: 1fr; justify-content: stretch; }
	.hp3-overlay { align-self: start; }
}

/* ============================================================
   BIBLIOTECA DIGITAL (CPT recurso)
   Ficha inspirada en las publicaciones del CDE.
   ============================================================ */

.bib-archive,
.bib-single { padding-top: 48px; padding-bottom: 72px; }

.bib-pill {
	display: inline-block; margin: 0 0 10px;
	color: var(--blue); font-family: "Archivo", sans-serif;
	font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
.bib-archive-head h1 {
	font-family: "Archivo", sans-serif;
	font-size: clamp(32px, 4.5vw, 52px);
	color: var(--navy); text-transform: uppercase; letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.bib-archive-sub { color: var(--ink-soft); font-size: 16px; margin: 0 0 28px; }
.bib-archive-sub a { color: var(--blue); text-decoration: underline; }

/* --- Filtros --- */
.bib-filtros {
	background: var(--bone);
	border: 1px solid var(--rule-soft);
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 36px;
}
.bib-filtros-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 10px;
}
.bib-filtros-row + .bib-filtros-row { margin-top: 12px; }
.bib-filtros input[type="search"],
.bib-filtros input[type="number"],
.bib-filtros select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	font: inherit;
	font-size: 14px;
	color: var(--ink);
}
.bib-filtros-fechas {
	grid-template-columns: auto auto auto 1fr;
	align-items: end;
}
.bib-filtros-fechas label {
	display: flex; flex-direction: column; gap: 4px;
	font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 600; color: var(--ink-soft);
}
.bib-filtros-fechas input[type="number"] { width: 130px; }
.bib-filtros-reset {
	justify-self: end; align-self: center;
	font-size: 13px; color: var(--ink-soft); text-decoration: underline;
}
.bib-filtros-reset:hover { color: var(--navy); }

/* --- Botón principal --- */
.bib-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--blue); color: #fff;
	font-family: "Archivo", sans-serif; font-weight: 700;
	font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 12px 22px; border-radius: 4px; border: 0; cursor: pointer;
	transition: background 0.15s;
}
.bib-btn:hover { background: var(--navy); }
.bib-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Grilla de tarjetas --- */
.bib-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
}
.bib-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bib-card-cover {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	background: var(--bone);
	border: 1px solid var(--rule-soft);
	margin-bottom: 12px;
}
.bib-card-cover img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.25s ease;
}
.bib-card:hover .bib-card-cover img { transform: scale(1.03); }
.bib-cover-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
}
.bib-cover-placeholder span {
	font-family: "Anton", sans-serif;
	font-size: clamp(48px, 8vw, 110px);
	color: rgba(255,255,255,0.35);
}
.bib-card-kicker {
	display: flex; justify-content: space-between; gap: 8px;
	margin: 0 0 4px;
	font-family: "Archivo", sans-serif; font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
	color: var(--blue);
}
.bib-card-kicker .bib-card-anio { color: var(--ink-soft); }
.bib-card-title {
	font-family: "Archivo", sans-serif;
	font-size: 16px; line-height: 1.3; margin: 0 0 4px; color: var(--ink);
}
.bib-card-title a:hover { color: var(--blue); }
.bib-card-autoria { margin: 0; font-size: 13px; color: var(--ink-soft); }

.bib-pagination { margin-top: 40px; text-align: center; }
.bib-pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; }
.bib-pagination .page-numbers {
	display: inline-block; padding: 8px 14px; border-radius: 4px;
	border: 1px solid var(--rule); font-size: 14px; color: var(--ink);
}
.bib-pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.bib-empty { color: var(--ink-soft); font-size: 16px; padding: 24px 0; }

/* --- Ficha (single) --- */
.bib-breadcrumb {
	font-size: 13px; color: var(--ink-soft); margin: 0 0 28px;
	display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.bib-breadcrumb a { color: var(--blue); text-decoration: underline; }

.bib-ficha {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: 1180px;
}
.bib-ficha-cover {
	position: sticky; top: 24px;
	border-radius: 8px; overflow: hidden;
	border: 1px solid var(--rule-soft);
	background: var(--bone);
	aspect-ratio: 3 / 4;
	box-shadow: 0 18px 40px rgba(15, 31, 74, 0.14);
}
.bib-ficha-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bib-title {
	font-family: "Archivo", sans-serif;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.15; color: var(--navy);
	text-transform: uppercase; letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.bib-badge-restricted {
	display: inline-block;
	margin: 0 0 12px;
	background: #b32d2e; color: #fff;
	font-family: "Archivo", sans-serif;
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 3px;
}
.bib-card-cover .bib-badge-restricted {
	position: absolute; top: 10px; left: 10px; margin: 0; z-index: 2;
}

/* --- Compartir --- */
.bib-share {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 22px;
}
.bib-share-label {
	font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
	font-weight: 700; color: var(--ink-soft); margin-right: 4px;
}
.bib-share-btn {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--bone); border: 1px solid var(--rule-soft);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.15s, border-color 0.15s;
}
.bib-share-btn svg { width: 16px; height: 16px; fill: var(--navy); }
.bib-share-btn:hover { background: var(--blue-pale); border-color: var(--blue); }

/* --- Metadatos --- */
.bib-meta {
	list-style: none; margin: 0 0 24px; padding: 18px 20px;
	background: var(--bone);
	border-left: 4px solid var(--yellow);
	border-radius: 0 6px 6px 0;
}
.bib-meta li { font-size: 15px; line-height: 1.5; padding: 4px 0; color: var(--ink); }
.bib-meta li strong { color: var(--navy); }
.bib-meta li a { color: var(--blue); text-decoration: underline; }

.bib-actions { margin: 0 0 26px; }

.bib-descripcion { line-height: 1.75; font-size: 16px; color: var(--ink); max-width: 720px; }
.bib-descripcion p { margin: 0 0 16px; }

/* --- Relacionados --- */
.bib-related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule-soft); max-width: 1180px; }
.bib-related h2 {
	font-family: "Archivo", sans-serif; font-size: 22px; color: var(--navy);
	text-transform: uppercase; margin: 0 0 20px;
}

/* --- Aviso de recurso restringido --- */
.bib-restricted-notice {
	max-width: 640px; margin: 40px auto; text-align: center;
	background: var(--bone); border: 1px solid var(--rule-soft);
	border-radius: 8px; padding: 48px 32px;
}
.bib-restricted-notice h1 {
	font-family: "Archivo", sans-serif; color: var(--navy);
	text-transform: uppercase; font-size: 28px; margin: 0 0 12px;
}
.bib-restricted-notice p { color: var(--ink-soft); line-height: 1.6; }

/* --- Responsive --- */
@media (max-width: 1100px) {
	.bib-grid { grid-template-columns: repeat(3, 1fr); }
	.bib-filtros-row { grid-template-columns: 1fr 1fr; }
	.bib-filtros-row input[type="search"] { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.bib-grid, .bib-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
	.bib-ficha { grid-template-columns: 1fr; }
	.bib-ficha-cover { position: static; max-width: 320px; }
	.bib-filtros-fechas { grid-template-columns: 1fr 1fr; }
	.bib-filtros-reset { justify-self: start; }
}
@media (max-width: 480px) {
	.bib-grid, .bib-grid-3 { grid-template-columns: 1fr; }
}