/* ---------- El cuerpo de una publicación ----------
   Los estilos de los bloques que arma el constructor. Los cargan las dos pantallas que
   tienen que mostrar lo mismo: la vista previa del panel y la página que ve el ciudadano.

   Son dos portales con paletas distintas —el público y el privado tienen cada uno su
   hoja—, así que acá no se nombra ningún color directamente. Se declaran variables
   propias, y cada una se resuelve contra la del portal que esté cargado:

       var(--tinta, var(--texto))

   La primera es la de la landing y la segunda la del área privada. La que exista gana, y
   como las dos hojas redefinen las suyas en modo oscuro, los bloques acompañan el tema
   sin enterarse de cuál está puesto.

   Todo cuelga de .nt para que nada de acá se escape sobre el resto de la página. */

.nt{
	--nt-tinta: var(--tinta, var(--texto));
	--nt-suave: var(--tinta-2, var(--texto-medio));
	--nt-acento: var(--verde, var(--acento));
	--nt-fondo: var(--tarjeta, var(--superficie-2));
	--nt-linea: var(--linea, var(--borde));
	--nt-radio: var(--radio-2, 18px);
	--nt-radio-chico: var(--radio-3, 14px);

	color: var(--nt-tinta);
	font-size: 1rem;
	line-height: 1.72;
}

/* El aire entre bloques es del bloque que llega, no del que se va: así el primero de la
   publicación no empuja nada hacia abajo y el cuerpo arranca pegado a donde tiene que
   arrancar. */
.nt > * + *{ margin-top: 22px; }

/* ---- Títulos ----
   El de arriba respira más que el de abajo: es lo que hace que se lean como dos niveles
   distintos sin tener que mirar los tamaños uno al lado del otro. */
.nt-titulo{
	margin-top: clamp(34px, 4vw, 48px);
	font-size: clamp(1.45rem, 2.6vw, 1.85rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.02em;
}

.nt-subtitulo{
	margin-top: clamp(26px, 3vw, 34px);
	font-size: clamp(1.1rem, 1.8vw, 1.25rem);
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: -.01em;
	color: var(--nt-suave);
}

/* Un título seguido de otro no necesita el aire de los dos. */
.nt-titulo + .nt-subtitulo{ margin-top: 14px; }

.nt-texto p + p{ margin-top: 18px; }

/* ---- Banner ----
   La franja ancha con la imagen de fondo y el texto encima. La imagen va en un <img> y no
   en un background: así el navegador la carga con la misma prioridad que al resto —y la
   puede diferir cuando corresponde—, que con un fondo de CSS no se puede pedir. */
.nt-banner{
	position: relative;
	display: grid;
	align-items: end;
	min-height: 240px;
	padding: clamp(24px, 4vw, 40px);
	overflow: hidden;
	border-radius: var(--nt-radio);
	background: var(--nt-fondo);
	isolation: isolate;
}

.nt-banner.is-alto{ min-height: 380px; }

.nt-banner-foto{ position: absolute; inset: 0; z-index: -2; }

.nt-banner-foto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo. Sin él, un titular blanco sobre una fotografía clara no se lee, y no hay forma
   de saber de antemano qué fotografía van a subir. */
.nt-banner-foto::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 28, 21, .15) 0%, rgba(4, 28, 21, .78) 100%);
}

/* El texto va blanco sólo cuando hay foto debajo. Un banner sin imagen es una caja
   grisada, y ahí el blanco desaparecería. */
.nt-banner:has(.nt-banner-foto) .nt-banner-titulo,
.nt-banner:has(.nt-banner-foto) .nt-banner-bajada{ color: #fff; }

.nt-banner-caja{ position: relative; max-width: 42em; }

.nt-banner-titulo{
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
}

.nt-banner-bajada{
	margin-top: 10px;
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	line-height: 1.5;
	opacity: .92;
}

/* ---- Imágenes ----
   La normal ocupa la columna de lectura. "A todo el ancho" se sale de ella hacia los dos
   lados con un margen negativo, que es la forma de que una fotografía respire sin sacarla
   del flujo del texto; el clamp lo limita para que en una pantalla angosta no se escape
   de la página. */
.nt-figura{ margin: clamp(28px, 4vw, 40px) 0; }

.nt-figura img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nt-radio);
}

.nt-figura.is-ancha{
	margin-left: clamp(-56px, -4vw, 0px);
	margin-right: clamp(-56px, -4vw, 0px);
}

.nt-figura.is-angosta{ max-width: 460px; margin-inline: auto; }

.nt-pie-foto{
	margin-top: 10px;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--nt-suave);
	text-align: center;
}

/* ---- Galería ----
   El número de columnas lo dice el atributo que escribe el dibujante: con dos fotos, dos
   columnas. Una rejilla fija de tres deja la última fila coja cada vez que el número no
   es múltiplo de tres, y eso se ve como un error de maquetación. */
.nt-galeria{ margin: clamp(28px, 4vw, 40px) 0; }

.nt-galeria-rejilla{
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nt-galeria-rejilla[data-cuantas="1"]{ grid-template-columns: 1fr; }
.nt-galeria-rejilla[data-cuantas="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nt-galeria-rejilla img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--nt-radio-chico);
}

/* ---- Cita ----
   La barra de color a la izquierda y nada de comillas dibujadas: la sangría ya dice que
   es una cita, y unas comillas gigantes compiten con el texto que citan. */
.nt-cita{
	margin: clamp(28px, 4vw, 38px) 0;
	padding: 4px 0 4px clamp(18px, 3vw, 26px);
	border-left: 3px solid var(--nt-acento);
}

.nt-cita blockquote p{
	font-size: clamp(1.08rem, 2vw, 1.22rem);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -.01em;
}

.nt-cita blockquote p + p{ margin-top: 12px; }

.nt-cita-autor{
	margin-top: 12px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nt-acento);
}

/* ---- Listas ---- */
.nt-lista{ padding-left: 1.3em; }
.nt-lista li + li{ margin-top: 8px; }
.nt-lista li::marker{ color: var(--nt-acento); font-weight: 700; }

/* ---- Botón ---- */
.nt-boton-caja{ margin: clamp(26px, 3vw, 34px) 0; }

.nt-boton{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: .92rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--nt-acento);
	border-radius: 999px;
	transition: filter .2s ease, transform .2s ease;
}

.nt-boton:hover{ filter: brightness(1.08); transform: translateY(-2px); }

/* ---- Separador ---- */
.nt-separador{
	margin: clamp(34px, 4vw, 46px) auto;
	width: 64px;
	height: 3px;
	border: 0;
	border-radius: 2px;
	background: var(--nt-acento);
	opacity: .45;
}

/* ---- Pie de página ----
   El cierre de la publicación: de dónde salió y a quién preguntarle. Va en una caja de
   fondo suave porque no es parte del relato — es la ficha. */
.nt-pie{
	margin-top: clamp(34px, 4vw, 46px);
	padding: clamp(18px, 3vw, 24px);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--nt-suave);
	background: var(--nt-fondo);
	border-radius: var(--nt-radio-chico);
}

.nt-pie p + p{ margin-top: 10px; }

.nt-pie-fuente{
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.nt-enlace{
	color: var(--nt-acento);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ---- Pantallas chicas ----
   La imagen "a todo el ancho" deja de salirse: en un teléfono no hay márgenes de los que
   escaparse, y el margen negativo la empujaría fuera de la pantalla. */
@media (max-width: 720px){
	.nt-figura.is-ancha{ margin-left: 0; margin-right: 0; }
	.nt-galeria-rejilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nt-banner{ min-height: 200px; }
	.nt-banner.is-alto{ min-height: 280px; }
}

@media (max-width: 460px){
	.nt-galeria-rejilla,
	.nt-galeria-rejilla[data-cuantas="2"]{ grid-template-columns: 1fr; }
}

/* Quien pidió menos movimiento en su sistema no recibe el salto del botón. */
@media (prefers-reduced-motion: reduce){
	.nt-boton{ transition: none; }
	.nt-boton:hover{ transform: none; }
}

/* Sin efectos de brillo: el botón cambia de color al pasar por encima, y nada más. */
.nt-boton:hover{ filter: none; transform: none; }