/* La nota del blog (issue #48), contra la p.7 de ABRASIVO_Complete.pdf.

   Medidas de la propuesta: banda gris #d5dce2 de 540 de alto con el disco de
   la marca asomando a la derecha, rótulo y titular en Rubik Black 55px del
   mismo gris azulado del kit, año en Inter 24px, y el cuerpo sobre el
   contenido de 1200 con la foto en un marco de 1204x722.

   El cuerpo va en Rubik 45px: es casi el doble de los 24px del resto del
   sitio, pero sobre la columna de 1200 deja unos 53 caracteres por renglón,
   que es medida de lectura. Es una nota para leerse, no un bloque de portada. */

.abrasivomx-nota {
	--abrasivomx-nota-gris: #d5dce2;
	--abrasivomx-nota-tinta: #5a6066;
}

/* -- La banda del encabezado ---------------------------------------------- */

/* De orilla a orilla. El ancho sale de la variable que publica js/slider.js
   -el ancho de la ventana sin la barra de scroll-, porque 100vw sí la cuenta. */
.abrasivomx-nota__cabecera {
	--abrasivomx-banda: var(--abrasivomx-vw, 100vw);
	width: var(--abrasivomx-banda);
	margin-left: calc(50% - var(--abrasivomx-banda) / 2);
	background-color: var(--abrasivomx-nota-gris);
	/* El disco de la marca, apenas más oscuro que la banda. Va a 117 del borde
	   derecho de la página, no del contenido, y por eso se ancla a la ventana. */
	background-image: url(../images/blog-disco.png);
	background-repeat: no-repeat;
	background-position: right 6.1% center;
	background-size: auto 84.6%;
}

.abrasivomx-nota__cabecera-interior {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 15px 52px;
}

.abrasivomx-nota__seccion,
.abrasivomx-nota__titulo {
	color: var(--abrasivomx-nota-tinta);
	font-family: 'Rubik', sans-serif;
	/* 55px sobre el contenido de 1200, igual que los demás titulares del kit. */
	font-size: clamp(28px, 4.6vw, 55px);
	font-weight: 900;
	line-height: 1.18;
	text-transform: uppercase;
}

.abrasivomx-nota__seccion {
	display: inline-block;
	margin-bottom: 34px;
	text-decoration: none;
}

.abrasivomx-nota__seccion:hover,
.abrasivomx-nota__seccion:focus {
	color: #0f0f0f;
}

.abrasivomx-nota__titulo {
	margin: 0;
	/* El titular de la propuesta ocupa 770 de los 1204 del contenido -el resto
	   lo deja para el disco- y ahí cae en cuatro renglones. Sin balance: el
	   reparto parejo le agrega uno. */
	max-width: 66%;
}

.abrasivomx-nota__anio {
	margin: 62px 0 0;
	color: #000000;
	font-family: 'Inter', sans-serif;
	font-size: clamp(15px, 2vw, 24px);
	line-height: 1;
}

/* -- El cuerpo ------------------------------------------------------------ */

.abrasivomx-nota__cuerpo {
	max-width: 1200px;
	margin: 72px auto 0;
	padding: 80px 15px 0;
	border-top: 1px solid var(--abrasivomx-nota-gris);
}

.abrasivomx-nota__foto {
	margin: 0 0 98px;
	border: 1px solid #d8d8d8;
	border-radius: 16px;
	overflow: hidden;
}

.abrasivomx-nota__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1204 / 722;
	object-fit: cover;
}

.abrasivomx-nota__foto figcaption {
	padding: 14px 18px;
	color: var(--abrasivomx-nota-tinta);
	font-family: 'Inter', sans-serif;
	font-size: clamp(13px, 1.4vw, 17px);
	line-height: 1.4;
}

.abrasivomx-nota__texto {
	color: #000000;
	font-family: 'Rubik', sans-serif;
	font-size: clamp(19px, 3.75vw, 45px);
	font-weight: 400;
	line-height: 1.33;
}

.abrasivomx-nota__texto > *:first-child { margin-top: 0; }
.abrasivomx-nota__texto > *:last-child { margin-bottom: 0; }

.abrasivomx-nota__texto p {
	/* El tema le fija tamaño e interlineado propios a los <p>, así que
	   heredarlos del contenedor no alcanza. */
	font-size: inherit;
	line-height: inherit;
	/* Un renglón completo entre párrafos, como la propuesta. */
	margin: 0 0 1.33em;
}

.abrasivomx-nota__texto h2,
.abrasivomx-nota__texto h3 {
	margin: 1.33em 0 .5em;
	color: var(--abrasivomx-nota-tinta);
	font-weight: 700;
	line-height: 1.2;
}

.abrasivomx-nota__texto h2 { font-size: clamp(24px, 3.3vw, 40px); }
.abrasivomx-nota__texto h3 { font-size: clamp(21px, 2.7vw, 32px); }

.abrasivomx-nota__texto img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.abrasivomx-nota__texto a {
	color: #0f0f0f;
	text-decoration: underline;
}

/* -- El cierre ------------------------------------------------------------ */

.abrasivomx-nota .abrasivomx-contacto-directo {
	margin-top: 95px;
	padding-top: 139px;
	border-top: 1px solid var(--abrasivomx-nota-gris);
}

@media (max-width: 782px) {
	/* El disco es marca de agua: en una columna angosta le quitaría lugar al
	   titular sin aportar nada. */
	.abrasivomx-nota__cabecera { background-image: none; }

	.abrasivomx-nota__cabecera-interior { padding: 34px 15px 32px; }

	.abrasivomx-nota__seccion { margin-bottom: 18px; }

	.abrasivomx-nota__titulo { max-width: none; }

	.abrasivomx-nota__anio { margin-top: 28px; }

	.abrasivomx-nota__cuerpo {
		margin-top: 36px;
		padding-top: 36px;
	}

	.abrasivomx-nota__foto { margin-bottom: 40px; }

	.abrasivomx-nota .abrasivomx-contacto-directo {
		margin-top: 48px;
		padding-top: 48px;
	}
}