/* ===========================================================================
   Fe, Ciudadanía y Bien Común
   ---------------------------------------------------------------------------
   Esta página NO lleva la identidad del sitio: lleva la del proyecto, que es
   co-branding de la Pastoral con DECIDAMOS y el apoyo de AECID. Otra paleta,
   otras tipografías, su propia barra y su propio pie. Así estaba publicada y
   así la quiere el cliente.

   TODO acá está MEDIDO sobre la copia congelada del sitio vivo servida de
   verdad (referencia/ciudadania-original/, con `python -m http.server`), no
   sacado de una captura ni de memoria: tamaños, familias, pesos, interletrado,
   colores y rellenos salen de getComputedStyle a 1440 px de ancho. Si alguna
   vez hay que discutir un valor, se vuelve a medir ahí.

   Todo cuelga de .pagina-ciudadania para que no se filtre ni una regla al
   resto del sitio, que comparte hoja de estilos.
   ========================================================================= */

.pagina-ciudadania {
	/* ---- Paleta, contada sobre r/post-3335.css ---- */
	--ciu-bordo:     #7F1912;  /* rojo del proyecto, NO el bordó del sitio */
	--ciu-naranja:   #F39200;
	--ciu-marfil:    #FBF5EC;
	--ciu-crema:     #F4E7D6;
	--ciu-tan:       #EEDCC5;  /* la barra de navegación */
	--ciu-tinta:     #430C08;  /* títulos oscuros y el pie */
	--ciu-texto:     #6F6A6A;  /* el gris del cuerpo */
	--ciu-vicariato: #5E120D;

	/* ---- Las CINCO familias que usa la página publicada ----
	   Alegreya SC solo para el título del hero, Spectral solo para el H2 del
	   proyecto. No son de adorno: son las que están. */
	--ciu-titulo:   "Alegreya SC", "Roboto Slab", Georgia, serif;
	--ciu-display:  "Roboto Slab", Georgia, serif;
	--ciu-spectral: "Spectral", Georgia, serif;
	--ciu-cuerpo:   "Roboto", system-ui, sans-serif;
	--ciu-ui:       "Montserrat", system-ui, sans-serif;

	/* El original NO tiene contenedor angosto: las secciones van a ancho
	   completo con 40 o 60 px de relleno. El tope de 2200 no se activa en
	   ninguna pantalla real (a 1920 el contenido arranca en 60, igual que allá);
	   está solo para que en un monitor ultra ancho los renglones no se vuelvan
	   ilegibles. */
	--ciu-relleno: 60px;

	background: var(--ciu-marfil);
	color: var(--ciu-texto);
	font-family: var(--ciu-cuerpo);
	font-size: 17px;
	line-height: 26px;
}

/* estilos.css trae `text-wrap: balance` para todos los títulos del sitio. Acá
   NO va: reparte los renglones a su criterio y el título del hero se cortaba
   en "FE, CIUDADANÍA / Y BIEN COMÚN" en vez de "FE, CIUDADANÍA Y BIEN /
   COMÚN", que es como está publicado. */
.pagina-ciudadania h1,
.pagina-ciudadania h2,
.pagina-ciudadania h3,
.pagina-ciudadania h4 { margin: 0; line-height: 1.05; text-wrap: wrap; }

.ciu-ancho {
	width: 100%;
	max-width: 2200px;
	margin-inline: auto;
	padding-inline: var(--ciu-relleno);
}
.ciu-ancho-40 { --ciu-relleno: 40px; }

/* Solo el hero, los encabezados de sección, Territorios, Sumate y el pie van a
   ancho completo. Las rejillas, las cifras y las listas viven dentro de una
   caja de 1140 px centrada (el 'content-width' de 1151 que declara el CSS del
   original). Sin esto las tarjetas quedan mucho más anchas que allá, que fue
   justamente lo que se veía mal. Medido a 1440: cifras y listas x=143 w=1140. */
.ciu-caja { max-width: 1140px; margin-inline: auto; }

.ciu-seccion { padding-block: 80px; }

/* El rótulo chico que encabeza cada sección. La rayita es un pseudo-elemento y
   no un guion largo escrito: el copy del sitio no lleva em-dashes. */
.ciu-rotulo {
	font-family: var(--ciu-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--ciu-tinta);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}
.ciu-rotulo::before {
	content: "";
	width: 24px;
	height: 2px;
	background: currentColor;
	flex: none;
}
.ciu-centrado { text-align: center; }
.ciu-centrado .ciu-rotulo { justify-content: center; }

/* --------------------------------------------------------------- Botones */
.ciu-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 32px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--ciu-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 13px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Con el interletrado, "Contacto 1" se partía en dos renglones. */
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.ciu-btn:active { transform: translateY(1px); }

.ciu-btn-lleno { background: var(--ciu-bordo); color: #fff; }
.ciu-btn-lleno:hover { background: var(--ciu-vicariato); color: #fff; }

.ciu-btn-linea { background: transparent; color: var(--ciu-bordo); border-color: var(--ciu-bordo); }
.ciu-btn-linea:hover { background: var(--ciu-bordo); color: #fff; }

.ciu-btn-claro { background: transparent; color: #fff; border-color: #fff; }
.ciu-btn-claro:hover { background: #fff; color: var(--ciu-bordo); }

/* Enlace de texto, sin caja. */
.ciu-enlace {
	font-family: var(--ciu-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ciu-bordo);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ciu-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.ciu-enlace svg { width: 13px; height: 13px; flex: none; }

/* ================================================== Barra de teléfonos */
.ciu-barra { background: var(--ciu-bordo); color: #fff; font-size: 14px; }
.ciu-barra-int {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-items: center;
	justify-content: space-between;
	padding-block: 8px;
}
.ciu-barra-tels { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ciu-barra-tels a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ciu-barra-tels a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ciu-barra-tels svg { width: 15px; height: 15px; }

.ciu-barra-fin { display: flex; align-items: center; gap: 18px; }
/* Volver al sitio: no estaba en la página original y sin esto la página queda
   huérfana, sin manera de llegar al resto. Va en la franja de arriba para que
   el menú del proyecto quede con sus cuatro ítems y nada más, como allá. */
.ciu-barra-volver {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}
.ciu-barra-volver:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.ciu-barra-redes { display: flex; gap: 8px; }
.ciu-barra-redes a {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	display: grid;
	place-items: center;
	color: #fff;
	transition: background-color .2s;
}
.ciu-barra-redes a:hover { background: rgba(255, 255, 255, .32); }
.ciu-barra-redes svg { width: 14px; height: 14px; fill: currentColor; }

/* ================================================== Navegación propia */
.ciu-nav { background: var(--ciu-tan); position: sticky; top: 0; z-index: 60; }
.ciu-nav-int {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 20px;
}
/* En la página publicada el logo NO va pegado al borde: queda centrado en su
   mitad de la barra. Con dos mitades iguales cae exactamente donde está allá
   (x=251 a 1440 px de ancho). */
.ciu-nav-marca { flex: 1; display: flex; justify-content: center; }
.ciu-nav-marca img { width: 250px; height: auto; display: block; }

.ciu-nav-cajon {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 28px;
}
.ciu-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 46px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ciu-nav-menu a {
	font-family: var(--ciu-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--ciu-bordo);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color .2s;
}
.ciu-nav-menu a:hover { border-bottom-color: var(--ciu-bordo); }


/* ================================================== Barra social fija */
.ciu-redes-lateral {
	position: fixed;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ciu-redes-lateral a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	box-shadow: 0 3px 10px rgba(67, 12, 8, .28);
	transition: transform .2s;
}
.ciu-redes-lateral a:hover { transform: scale(1.09); }
.ciu-redes-lateral svg { width: 17px; height: 17px; fill: currentColor; }
.ciu-red-fb { background: #3B5998; }
.ciu-red-ig { background: #262626; }
.ciu-red-tw { background: #1DA1F2; }
.ciu-red-yt { background: #FF0000; }

/* ================================================== Hero */
.ciu-hero {
	background: var(--ciu-marfil);
	padding-block: 70px 90px;
	overflow: hidden;
	position: relative;
}
/* El cuadrado naranja del proyecto. NO va detrás de la foto: asoma apenas por
   el borde derecho, arriba. Es un guiño al logo (el rompecabezas naranja con
   bordó), no un bloque de color. */
.ciu-hero::after {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	right: -262px;
	top: -196px;
	background: var(--ciu-naranja);
	border-radius: 44px;
	transform: rotate(-20deg);
	z-index: 0;
	pointer-events: none;
}
.ciu-hero-int {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.ciu-hero h1 {
	font-family: var(--ciu-titulo);
	font-size: clamp(2.4rem, 4.6vw, 4rem);   /* 64px a 1440 */
	font-weight: 900;
	line-height: 1;
	/* Alegreya SC hace versalitas con las minusculas. El titulo publicado esta
	   escrito en mayusculas; se llega al mismo dibujo sin gritar en la base. */
	text-transform: uppercase;
	/* estilos.css le pone -0.015em a todo h1; el original va sin apretar. */
	letter-spacing: normal;
	color: var(--ciu-bordo);
	margin-bottom: 18px;
}
.ciu-hero-sub {
	font-family: var(--ciu-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.15rem, 1.6vw, 1.375rem);   /* 22px */
	line-height: 1;
	color: var(--ciu-tinta);
	margin: 0 0 20px;
}
.ciu-hero-txt { margin: 0 0 30px; }
.ciu-hero-acciones { display: flex; flex-wrap: wrap; gap: 16px; }

/* La foto viene con su marco blanco y su sombra ya dibujados en el archivo
   (así estaba en el sitio vivo). Acá solo se la inclina y se le agrega el
   punto rojo del borde, que allá era un pseudo-elemento. */
.ciu-hero-arte { position: relative; }
.ciu-hero-foto { position: relative; transform: rotate(-1.6deg); }
.ciu-hero-foto img { width: 100%; height: auto; display: block; }
.ciu-hero-foto::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ciu-bordo);
	top: 48%;
	left: 4%;
}

/* ================================================== Recursos educativos */
.ciu-recursos { background: var(--ciu-crema); padding-block: 70px 80px; }

/* Los H2 de sección: Roboto Slab 800 en versalitas apretadas. */
.ciu-recursos h2,
.ciu-actividades h2,
.ciu-campanias h2,
.ciu-territorios h2,
.ciu-manifiesto h2,
.ciu-sumate h2 {
	font-family: var(--ciu-display);
	font-size: clamp(1.9rem, 3.3vw, 2.875rem);   /* 46px a 1440 */
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ciu-bordo);
}
.ciu-intro { max-width: 80ch; margin: 18px auto 0; }
.ciu-intro-izq { margin-inline: 0; }

/* Medido a 1440: cada tarjeta 475 px y 97 de calle, o sea 1047 de contenido.
   Es más angosta que la caja de 1140 del resto. */
.ciu-ejes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 97px;
	max-width: 1050px;
	margin: 50px auto 0;
}
.ciu-eje {
	background: #fff;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-shadow: 0 14px 34px rgba(67, 12, 8, .07);
}
.ciu-eje-cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 30px;
	background: var(--ciu-bordo);
}
/* Damero: bordó, naranja / naranja, bordó. Así están las cuatro en el sitio. */
.ciu-eje:nth-child(2) .ciu-eje-cabeza,
.ciu-eje:nth-child(3) .ciu-eje-cabeza { background: var(--ciu-naranja); }
.ciu-eje-cabeza h3 {
	font-family: var(--ciu-display);
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);   /* 26px */
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}
.ciu-eje-num {
	font-family: var(--ciu-display);
	font-size: clamp(2.4rem, 4.6vw, 4rem);        /* 64px */
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, .25);
	flex: none;
}
.ciu-eje-cuerpo {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 26px;
	flex: 1;
}
.ciu-eje-cuerpo p { margin: 0; font-size: 15px; }
.ciu-eje-desc { flex: 1; }
.ciu-eje-materiales {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 22px;
}
.ciu-eje-medios {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 30px;
}

/* ================================================== Manifiesto */
.ciu-manifiesto {
	background: var(--ciu-bordo);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding-block: 70px;
}
.ciu-manifiesto::before,          /* los dos círculos tenues del original */
.ciu-manifiesto::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .05);
	pointer-events: none;
}
.ciu-manifiesto::before { width: 240px; height: 240px; right: -70px; top: -70px; }
.ciu-manifiesto::after  { width: 160px; height: 160px; right: 120px; bottom: -90px; }
.ciu-manifiesto-int {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.ciu-manifiesto h2 { color: #fff; }
.ciu-manifiesto h2 em {
	color: var(--ciu-naranja);
	font-style: italic;
	/* Los descendentes de la itálica se cortan con interlineado 1: hay una "y"
	   en "democracia" que quedaba comida. */
	line-height: 1.1;
}
.ciu-manifiesto p { margin: 0 0 16px; color: rgba(255, 255, 255, .94); }
.ciu-manifiesto p:last-child { margin-bottom: 0; font-weight: 700; font-style: italic; }

/* ================================================== El proyecto */
.ciu-proyecto { background: var(--ciu-marfil); padding-block: 80px; }
/* Este H2 es el único en Spectral y en caja alta y baja: así está publicado. */
.ciu-proyecto h2 {
	font-family: var(--ciu-spectral);
	font-size: clamp(2.1rem, 4.1vw, 3.5625rem);   /* 57px a 1440 */
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1;
	/* El original lo escribe en caja alta y baja con text-transform:capitalize,
	   no en versalitas como los otros H2. */
	text-transform: capitalize;
	color: var(--ciu-tinta);
	/* 622 px medidos: con una medida más angosta se partía en tres renglones. */
	max-width: 622px;
}
.ciu-proyecto-txt { max-width: 635px; margin: 24px 0 0; }

.ciu-cifras {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin-top: 54px;
}
.ciu-listas { gap: 80px; }   /* 2 columnas de 530 en 1140 */
.ciu-cifra-num {
	font-family: var(--ciu-display);
	font-size: clamp(2.2rem, 3.6vw, 3.125rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ciu-bordo);
}
.ciu-cifra p { margin: 10px 0 0; font-size: 15px; }

.ciu-listas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
	margin-top: 60px;
	padding-top: 52px;
	border-top: 1px solid rgba(127, 25, 18, .16);
}
.ciu-lista h3 {
	font-family: var(--ciu-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.ciu-lista-naranja h3 { color: var(--ciu-naranja); }
.ciu-lista-bordo h3   { color: var(--ciu-bordo); }
.ciu-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ciu-lista li { display: flex; gap: 12px; align-items: flex-start; }
.ciu-lista li::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-top: .55em;
	flex: none;
}
.ciu-lista-naranja li::before { background: var(--ciu-naranja); }
.ciu-lista-bordo li::before   { background: var(--ciu-bordo); }

/* ================================================== Quiénes lo impulsan */
.ciu-impulsan { background: var(--ciu-marfil); padding-block: 40px 50px; }
.ciu-impulsan-int {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px 60px;
}
.ciu-impulsan-rot {
	font-family: var(--ciu-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8A7F79;
	margin: 0;
}
.ciu-impulsan-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 72px; }
/* En el original van a su tamaño natural (Pastoral 280x163, DECIDAMOS 110x68) y
   por eso se leen. Achicados a una altura pareja quedaban dos sellitos. */
.ciu-impulsan-logos img { width: auto; max-width: 100%; height: auto; display: block; }
.ciu-impulsan-logos img:first-child { width: 280px; }
.ciu-impulsan-logos img + img { width: 110px; }

/* ================================================== Territorios y mapa */
.ciu-territorios { background: var(--ciu-bordo); color: #fff; padding-block: 80px; }
.ciu-terr-int {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}
.ciu-territorios h2 { color: var(--ciu-naranja); margin-bottom: 22px; }
.ciu-territorios p { color: rgba(255, 255, 255, .94); }
.ciu-terr-cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 42px;
}
.ciu-terr-cifras .ciu-cifra-num { color: var(--ciu-naranja); }
.ciu-terr-cifras p { color: #fff; }

.ciu-mapa-caja {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 20px 46px rgba(0, 0, 0, .24);
}
#ciu-mapa {
	height: 480px;   /* 480 medidos en el original */
	border-radius: 8px;
	background: var(--ciu-crema);
}
/* Los mosaicos son de OpenStreetMap (CARTO ahora pide clave de API y estampa
   "API KEY REQUIRED" encima del mapa). Se desatura por CSS para acercarlo al
   gris claro que tenía el original. */
#ciu-mapa .leaflet-tile-pane { filter: grayscale(.72) brightness(1.06); }
.ciu-mapa-rotulo.leaflet-tooltip {
	background: var(--ciu-bordo);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-family: var(--ciu-ui);
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}
.ciu-mapa-rotulo.leaflet-tooltip-top::before { border-top-color: var(--ciu-bordo); }

.ciu-leyenda {
	position: absolute;
	right: 22px;
	bottom: 26px;
	background: #fff;
	border-radius: 8px;
	padding: 14px 18px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	z-index: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ciu-texto);
}
.ciu-leyenda h3 {
	font-family: var(--ciu-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--ciu-bordo);
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ciu-naranja);
}
.ciu-leyenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ciu-leyenda li { display: flex; align-items: center; gap: 9px; }
.ciu-leyenda i { width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* ================================================== Noticias del proyecto */
.ciu-actividades { background: var(--ciu-crema); padding-block: 80px; }
.ciu-campanias   { background: var(--ciu-marfil); padding-block: 80px; }

/* Medido a 1440: 3 tarjetas de 360 con 30 de calle = 1140 justos. */
.ciu-notis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	max-width: 1140px;
	margin: 48px auto 0;
}
.ciu-noti {
	background: #fff;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 30px rgba(67, 12, 8, .09);
}
.ciu-noti-foto {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ciu-tan);
}
.ciu-noti-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.ciu-noti:hover .ciu-noti-foto img { transform: scale(1.05); }
.ciu-noti-fecha {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #1B1B1B;
	color: #fff;
	font-family: var(--ciu-ui);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 3px;
	z-index: 2;
}
.ciu-noti-cuerpo {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.ciu-noti-cats { font-size: 14px; color: #8A7F79; margin: 0; }
.ciu-noti-cats a { color: inherit; text-decoration: none; }
.ciu-noti-cats a:hover { text-decoration: underline; }
.ciu-noti h3 {
	font-family: var(--ciu-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.4;
	text-transform: uppercase;
}
.ciu-noti h3 a { color: var(--ciu-bordo); text-decoration: none; }
.ciu-noti h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ciu-noti-extracto { margin: 0; flex: 1; font-size: 15px; }
.ciu-noti-mas {
	align-self: flex-start;
	color: var(--ciu-bordo);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid var(--ciu-bordo);
	padding-bottom: 2px;
}
.ciu-noti-mas:hover { color: var(--ciu-vicariato); border-bottom-color: var(--ciu-vicariato); }
/* En campañas el "Ver más" del original es un botón lleno, no un enlace. */
.ciu-campanias .ciu-noti-mas {
	border-bottom: 0;
	background: var(--ciu-bordo);
	color: #fff;
	padding: 14px 28px;
	border-radius: 4px;
	font-size: 15px;
}
.ciu-campanias .ciu-noti-mas:hover { background: var(--ciu-vicariato); }

.ciu-vacio {
	margin-top: 40px;
	padding: 26px 30px;
	background: rgba(127, 25, 18, .06);
	border-radius: 8px;
	font-size: 15px;
}

/* ================================================== Sumate */
.ciu-sumate {
	background: var(--ciu-naranja);
	text-align: center;
	position: relative;
	overflow: hidden;
	padding-block: 90px;
}
.ciu-sumate::before,
.ciu-sumate::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(127, 25, 18, .16);
	pointer-events: none;
}
.ciu-sumate::before { width: 280px; height: 280px; left: -90px; top: -90px; }
.ciu-sumate::after  { width: 340px; height: 340px; right: -120px; bottom: -120px; }
.ciu-sumate-int { position: relative; z-index: 1; }
.ciu-sumate .ciu-rotulo { color: var(--ciu-vicariato); justify-content: center; }
.ciu-sumate h2 { color: var(--ciu-vicariato); max-width: 24ch; margin-inline: auto; }
.ciu-sumate-guarani {
	font-family: var(--ciu-display);
	font-style: italic;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ciu-vicariato);
	margin: 20px 0 30px;
}
.ciu-sumate-acciones { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ================================================== Pie del proyecto */
.ciu-pie { background: var(--ciu-tinta); color: #E8D9CC; padding-block: 70px 30px; }
.ciu-pie-int {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
}
.ciu-pie h3 {
	font-family: var(--ciu-display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}
.ciu-pie-sub { color: var(--ciu-naranja); margin: 0; font-family: var(--ciu-ui); font-size: 14px; }
.ciu-pie-rot {
	font-family: var(--ciu-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ciu-naranja);
	margin: 0 0 14px;
}
.ciu-pie-rot + .ciu-pie-logos { margin-bottom: 30px; }
.ciu-pie-logos { display: flex; flex-wrap: wrap; gap: 14px; }
/* Las cajas blancas no son decoración: los logos son oscuros y sobre el pie
   granate desaparecen. Así estaban en la página publicada. */
.ciu-pie-logos span {
	background: #fff;
	border-radius: 4px;
	padding: 12px 16px;
	display: grid;
	place-items: center;
}
.ciu-pie-logos img { height: 44px; width: auto; display: block; }

.ciu-pie-legal {
	margin-top: 46px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(232, 217, 204, .8);
}
.ciu-pie-legal p { margin: 0 0 6px; }
.ciu-pie-legal p:last-child { margin-bottom: 0; }

/* ================================================== Movimiento */
/* Los revelados y los contadores los maneja main.js, que ya observa .revelar y
   [data-contar] en todo el sitio. No hay una segunda implementación acá: la
   página usa las mismas clases que el resto y hereda el gate .js, que deja
   todo visible si el JavaScript no llega a correr. */
@media (prefers-reduced-motion: reduce) {
	.ciu-hero-foto { transform: none; }
	.ciu-noti:hover .ciu-noti-foto img { transform: none; }
}

/* ================================================== Adaptación a pantallas */
@media (max-width: 1199px) {
	.pagina-ciudadania { --ciu-relleno: 40px; }
	.ciu-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ciu-notis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ciu-redes-lateral { display: none; }
	/* Se termina el hueco a la derecha y el naranja pasa de guiño a mancha. */
	.ciu-hero::after { display: none; }
}

@media (max-width: 900px) {
	.pagina-ciudadania { --ciu-relleno: 24px; }
	.ciu-seccion,
	.ciu-recursos, .ciu-manifiesto, .ciu-proyecto,
	.ciu-territorios, .ciu-actividades, .ciu-campanias,
	.ciu-sumate { padding-block: 58px; }
	.ciu-hero { padding-block: 48px 60px; }
	.ciu-hero-int,
	.ciu-manifiesto-int,
	.ciu-terr-int,
	.ciu-pie-int { grid-template-columns: minmax(0, 1fr); }
	.ciu-terr-int { gap: 36px; }
	.ciu-ejes,
	.ciu-listas { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ciu-listas { margin-top: 44px; padding-top: 38px; }
	.ciu-notis  { grid-template-columns: minmax(0, 1fr); }
	/* La barra deja de ser dos mitades: el logo vuelve a la izquierda. */
	.ciu-nav-int { flex-wrap: wrap; row-gap: 14px; padding-block: 14px; }
	.ciu-nav-marca { flex: none; justify-content: flex-start; }
	.ciu-nav-marca img { width: 168px; }
	.ciu-nav-cajon { flex: none; justify-content: flex-start; width: 100%; }
	.ciu-nav-menu { gap: 6px 24px; }
	.ciu-nav-menu a { font-size: 15px; }
	/* El mapa deja de arrastrarse en el teléfono (lo hace ciudadania.js con
	   L.Browser.mobile): el dedo tiene que poder scrollear la página. */
	#ciu-mapa { height: 340px; }
	.ciu-leyenda { right: 12px; bottom: 14px; padding: 10px 13px; font-size: 12px; }
}

@media (max-width: 560px) {
	.ciu-cifras { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.ciu-terr-cifras { grid-template-columns: minmax(0, 1fr); }
	.ciu-eje-cabeza, .ciu-eje-cuerpo { padding: 22px; }
	.ciu-btn { padding: 14px 24px; }
	.ciu-impulsan-logos { gap: 26px; }
	.ciu-impulsan-logos img { height: 42px; }
}