/* ==========================================================
   Portada: tres columnas con filetes, secciones y columna de visitas/archivo
   ========================================================== */
.portada { display: grid; grid-template-columns: 1fr 2fr 1fr; padding-block: 22px 32px; }
.portada__col { padding-inline: clamp(20px, 1.6vw, 32px); min-width: 0; }
.portada__col:first-child { padding-left: 0; }
.portada__col:last-child { padding-right: 0; }
.portada__col + .portada__col { border-left: 1px solid var(--filete-fuerte); }

.principal__titulo { font-weight: 900; font-size: clamp(32px, 4vw, 48px); line-height: 1.02; margin: 4px 0 12px; }
.principal .bajada { margin-bottom: 14px; }
.principal .media { aspect-ratio: 16 / 10; }
.principal__texto { margin-top: 14px; columns: 2; column-gap: 22px; column-rule: 1px solid var(--filete); font-size: 16px; }
.principal__texto p { margin: 0 0 .8em; }

.lista-ultimo { list-style: none; margin: 0 0 18px; padding: 0; }
.lista-ultimo li {
	display: flex; gap: 2px; padding: 9px 0; border-bottom: 1px dotted #a99f8a; font-size: 15px; line-height: 1.35;
}
.lista-ultimo .pir { margin-top: 5px; }
.lista-ultimo time {
	display: block; font-family: var(--f-rotulo); font-size: 11px; font-weight: 800; color: var(--acento); letter-spacing: .06em;
}

/* Recuadro de nota */
.nota-card { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--filete); }
.nota-card:last-child { border-bottom: 0; margin-bottom: 0; }
.nota-card .media { margin-bottom: 10px; }
.nota-card__titulo { font-size: 20px; line-height: 1.15; margin: 0 0 6px; }
.nota-card__bajada { font-size: 15px; color: var(--tinta-suave); margin: 0 0 6px; }
.nota-card__fecha {
	font-family: var(--f-rotulo); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-claro);
}

/* Bloques por sección */
.seccion-portada { padding-block: 10px 28px; }
.seccion-portada__cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.seccion-portada__cab h2 {
	margin: 0; font-family: var(--f-rotulo); font-weight: 800; font-size: 18px; text-transform: uppercase;
	letter-spacing: .12em; white-space: nowrap;
}
.seccion-portada__cab h2 a { display: flex; align-items: center; }
.seccion-portada__cab .ruta { flex: 1; }
.seccion-portada__mas {
	font-family: var(--f-rotulo); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}

.grilla-4, .grilla-3 { display: grid; gap: 0; }
.grilla-4 { grid-template-columns: repeat(4, 1fr); }
.grilla-3 { grid-template-columns: repeat(3, 1fr); }
.grilla-4 > .nota-card, .grilla-3 > .nota-card { padding: 0 16px; border-bottom: 0; margin: 0; }
.grilla-4 > .nota-card + .nota-card, .grilla-3 > .nota-card + .nota-card { border-left: 1px solid var(--filete); }
.grilla-4 > .nota-card:first-child, .grilla-3 > .nota-card:first-child { padding-left: 0; }
.grilla-4 > .nota-card:last-child, .grilla-3 > .nota-card:last-child { padding-right: 0; }


@media (max-width: 1000px) {
	.grilla-4 { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
	.grilla-4 > .nota-card:nth-child(odd) { padding-left: 0; border-left: 0; }
	.grilla-4 > .nota-card:nth-child(even) { padding-right: 0; }
}

@media (max-width: 860px) {
	.portada { grid-template-columns: 1fr; padding-top: 12px; }
	.portada__col { padding: 16px 0; }
	.portada__col + .portada__col { border-left: 0; border-top: 1px solid var(--filete-fuerte); }
	.portada__col--centro { order: -1; padding-top: 0; }
	.principal__texto { columns: 1; }
	.grilla-3 { grid-template-columns: 1fr; }
	.grilla-3 > .nota-card { padding: 0 0 16px; }
	.grilla-3 > .nota-card + .nota-card { border-left: 0; padding-top: 16px; border-top: 1px solid var(--filete); }
}

@media (max-width: 520px) {
	.grilla-4 { grid-template-columns: 1fr; }
	.grilla-4 > .nota-card { padding: 0 !important; border-left: 0 !important; }
	.seccion-portada__cab .ruta { display: none; }
	.seccion-portada__cab { justify-content: space-between; }
}


/* Debajo de las notas principales: secciones a la izquierda, visitas y archivo a la derecha */
.portada-baja {
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 18vw, 300px);
	gap: clamp(28px, 3vw, 48px); align-items: start; padding-bottom: 36px;
}
.portada-baja__lateral {
	display: grid; gap: 24px; position: sticky; top: 20px;
	border-left: 1px solid var(--filete-fuerte); padding-left: clamp(20px, 1.6vw, 32px);
}
.admin-bar .portada-baja__lateral { top: 52px; }

@media (max-width: 960px) {
	.portada-baja { grid-template-columns: 1fr; }
	.portada-baja__lateral { position: static; border-left: 0; padding-left: 0; border-top: 3px double var(--tinta); padding-top: 18px; }
}