/* ==========================================================
   Apunte · estilos del tema
   Sistema editorial limpio. Los tokens viven en theme.json,
   acá va solo lo que los bloques no resuelven solos.
   ========================================================== */

:root {
	--apunte-linea: var(--wp--preset--color--linea, #D9D7D1);
	--apunte-azul: var(--wp--preset--color--azul, #1E3A63);
	--apunte-gris: var(--wp--preset--color--gris, #676A70);
	--apunte-tinta: var(--wp--preset--color--tinta, #15171B);
	--apunte-vivo: var(--wp--preset--color--vivo, #B33A2B);
}

/* Los titulos largos de una sola palabra no tienen que desbordar la tarjeta. */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
	overflow-wrap: break-word;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--apunte-azul);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- barra utilitaria ---------- */
.apunte-utilidad {
	border-bottom: 1px solid var(--apunte-linea);
	font-size: 0.75rem;
	color: var(--apunte-gris);
}

/* El alto va en el hijo, no aca. Si esta franja fuera flex, el hijo que trae el
   layout constrained se encogeria a su contenido y el space-between no separaria
   nada: quedaria todo apilado en el centro. */
.apunte-utilidad > .wp-block-group {
	min-height: 44px;
}

.apunte-utilidad a:hover { color: var(--apunte-tinta); }

.apunte-vivo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--apunte-tinta);
	font-weight: 600;
	white-space: nowrap;
}

.apunte-punto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--apunte-vivo);
	flex: none;
	animation: apunte-latir 2.4s ease-in-out infinite;
}

@keyframes apunte-latir {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* ---------- cabecera y marca ---------- */
.apunte-cabecera { border-bottom: 1px solid var(--apunte-linea); }

.apunte-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.apunte-marca .wp-block-site-title,
.apunte-marca .wp-block-site-title a {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* ---------- navegación de ramos ---------- */
.apunte-ramos {
	border-bottom: 1px solid var(--apunte-linea);
}

/* El que desborda y scrollea es el <ul> interno, no el <nav>. Las reglas de
   overflow tienen que ir ahi o el menu queda cortado y sin forma de correrlo. */
.apunte-ramos .wp-block-navigation {
	min-height: 52px;
	align-items: center;
}

.apunte-ramos .wp-block-navigation__container {
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 24px;
	padding-bottom: 2px;
}

.apunte-ramos .wp-block-navigation__container::-webkit-scrollbar { display: none; }

.apunte-ramos .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--apunte-gris);
	white-space: nowrap;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.apunte-ramos .wp-block-navigation-item__content:hover {
	color: var(--apunte-tinta);
}

.apunte-ramos .current-menu-item .wp-block-navigation-item__content {
	color: var(--apunte-tinta);
	border-color: var(--apunte-azul);
}

/* ---------- píldoras ---------- */
.apunte-pildora-redonda .wp-block-button__link {
	width: 76px;
	height: 76px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.2;
	border-radius: 999px;
}

/* ---------- apertura ---------- */
/* 12ch partia palabras largas al medio y estiraba el titular a once lineas.
   Con 18ch manda el ancho de la columna y el titulo respira. */
.apunte-apertura .wp-block-post-title {
	max-width: 18ch;
	text-wrap: balance;
}

/* El layout constrained centra con margenes automaticos todo lo que sea mas
   angosto que la columna. Como la bajada y los parrafos traen max-width propio y
   el titulo no, quedaban tres margenes izquierdos distintos en la misma nota. */
/* El layout constrained de core centra con margin-left/right: auto !important
   todo hijo directo mas angosto que la columna. Como la bajada y los parrafos
   traen medida propia y el titulo no, quedaban tres margenes izquierdos
   distintos en la misma nota. Es el unico !important del tema y esta para
   contrarrestar el de core, que de otro modo no hay forma de vencer. */
.apunte-bajada.apunte-bajada,
.apunte-nota .wp-block-post-content > p {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.apunte-bajada {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: #3A3D44;
	max-width: 44ch;
}

/* ---------- grilla de notas ---------- */
/* La grilla se corre a la izquierda lo mismo que el relleno de las tarjetas.
   Asi la primera de cada fila alinea con el titulo de la seccion y, sobre todo,
   todas las tarjetas terminan con el mismo ancho. Antes la primera era 29 px
   mas ancha que las otras dos y las fotos salian de distinto tamano. */
.apunte-grilla .wp-block-post-template.is-layout-grid {
	margin-left: -28px;
}

.apunte-grilla .wp-block-post {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--apunte-linea);
	padding-left: 28px;
}

/* Transparente, no none: se conserva el pixel del borde para que la tarjeta que
   abre fila mida exactamente lo mismo que las demas. */
.apunte-grilla:not(.apunte-grilla-2) .wp-block-post:nth-child(3n + 1),
.apunte-grilla-2 .wp-block-post:nth-child(2n + 1) {
	border-left-color: transparent;
}

/* La foto va al pie de la tarjeta. Como las tarjetas de una fila tienen la
   misma altura, las fotos alinean abajo aunque los titulos y las bajadas sean
   de distinto largo. Antes cada foto arrancaba a una altura distinta. */
.apunte-grilla .wp-block-post-featured-image {
	margin-top: auto;
	padding-top: 1.25rem;
}

.apunte-grilla .wp-block-post-title a:hover { color: var(--apunte-azul); }

.apunte-grilla .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.apunte-grilla .wp-block-post-featured-image {
	transition: opacity 0.3s;
}

.apunte-grilla .wp-block-post:hover .wp-block-post-featured-image {
	opacity: 0.88;
}

/* ---------- encabezado de sección ---------- */
.apunte-encabezado {
	border-top: 1px solid var(--apunte-linea);
	padding-top: var(--wp--preset--spacing--50, 5rem);
}

/* Iba a 10ch para partirse en dos lineas al lado del icono de la marca. Sin el
   icono no hay motivo para partirlos: van en una linea. */
.apunte-encabezado h2 { text-wrap: balance; }

/* ---------- índice por ramo ---------- */
.apunte-indice .wp-block-categories-list,
.apunte-indice ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 64px;
}

/* El conteo de notas lo escribe wp_list_categories como texto suelto despues de
   cerrar el <a>. Con el <a> en block caia a la linea siguiente, asi que el <li>
   es flex y el numero queda como item anonimo alineado a la derecha. */
.apunte-indice li {
	break-inside: avoid;
	border-bottom: 1px solid var(--apunte-linea);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.75rem;
	color: var(--apunte-gris);
	font-variant-numeric: tabular-nums;
}

.apunte-indice li a {
	display: block;
	flex: 1;
	padding: 20px 0;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--apunte-tinta);
	transition: padding-left 0.25s;
}

.apunte-indice li a:hover { padding-left: 10px; }

/* ---------- boton de lectura ---------- */
/* core/read-more, no core/button: dentro del loop el button sale sin href y
   queda un ancla muerta, sin foco de teclado y sin destino. */
.apunte-boton {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--apunte-azul);
	border-radius: 999px;
	color: var(--apunte-azul);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.apunte-boton:hover,
.apunte-boton:focus-visible {
	background: var(--apunte-azul);
	color: #FFFFFF;
}

/* ---------- espacio publicitario ---------- */
.apunte-publi {
	/* Sin esto los 34 px de relleno se suman al ancho de la columna y la caja
	   sobresale del texto. */
	box-sizing: border-box;
	border: 1px dashed var(--apunte-linea);
	background: rgba(255, 255, 255, 0.5);
	padding: 34px;
	text-align: center;
	color: var(--apunte-gris);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.apunte-publi:empty::before {
	content: "Espacio publicitario";
}

/* ---------- boletín ---------- */
.apunte-boletin {
	background: var(--apunte-azul);
	color: #FFFFFF;
}

.apunte-boletin h2 { color: #FFFFFF; }

.apunte-boletin p { color: rgba(255, 255, 255, 0.78); }

.apunte-boletin input[type="email"],
.apunte-boletin input[type="text"] {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #FFFFFF;
	padding: 15px 18px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.875rem;
	min-width: 220px;
}

.apunte-boletin input::placeholder { color: rgba(255, 255, 255, 0.5); }

/* Sobre fondo azul el outline azul de arriba no se ve, asi que se cambia por uno
   blanco. Nunca outline:none: el campo tiene que mostrar el foco de teclado. */
.apunte-boletin input:focus-visible,
.apunte-boletin button:focus-visible,
.apunte-boletin input[type="submit"]:focus-visible {
	border-color: #FFFFFF;
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.apunte-boletin input:focus { border-color: #FFFFFF; }

.apunte-boletin input[type="submit"],
.apunte-boletin button {
	background: #FFFFFF;
	color: var(--apunte-azul);
	border: none;
	border-radius: 999px;
	padding: 15px 28px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.apunte-boletin input[type="submit"]:hover,
.apunte-boletin button:hover { background: rgba(255, 255, 255, 0.85); }

/* ---------- nota individual ---------- */
.apunte-nota .wp-block-post-content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.7;
}

.apunte-nota .wp-block-post-content p { max-width: 68ch; }

.apunte-nota .wp-block-post-content h2,
.apunte-nota .wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--display);
	margin-top: 2.5em;
}

.apunte-nota .wp-block-post-title { max-width: 20ch; }

.apunte-nota blockquote {
	border-left: 2px solid var(--apunte-azul);
	padding-left: 24px;
	font-size: 1.3125rem;
	line-height: 1.45;
	font-style: normal;
}

/* ---------- pie ---------- */
.apunte-pie {
	border-top: 1px solid var(--apunte-linea);
	font-size: 0.8125rem;
	color: var(--apunte-gris);
}

.apunte-pie h3,
.apunte-pie .wp-block-heading {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--apunte-tinta);
	font-weight: 600;
}

/* Las listas del pie quedaban demasiado juntas para tocarlas con el dedo. */
.apunte-pie li a {
	display: inline-block;
	padding: 7px 0;
}

.apunte-pie a:hover { color: var(--apunte-tinta); }

.apunte-legal {
	border-top: 1px solid var(--apunte-linea);
	font-size: 0.75rem;
}

/* ---------- paginación ---------- */
.wp-block-query-pagination {
	border-top: 1px solid var(--apunte-linea);
	padding-top: 32px;
	font-size: 0.875rem;
}

.wp-block-query-pagination-numbers .current {
	color: var(--apunte-azul);
	font-weight: 600;
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
	/* columnCount de core no trae media queries: sin este bloque la portada
	   muestra tres columnas apretadas tambien en telefono. */
	.apunte-grilla .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
		margin-left: 0;
	}

	.apunte-grilla .wp-block-post {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--apunte-linea);
		padding-top: 32px;
	}

	.apunte-grilla .wp-block-post:first-child {
		border-top: none;
		padding-top: 0;
	}

	.apunte-indice .wp-block-categories-list,
	.apunte-indice ul { columns: 1; }

	.apunte-apertura .wp-block-post-title { max-width: none; }
}

@media (max-width: 600px) {
	/* 2 rem de margen a cada lado se comen demasiado ancho en un telefono. */
	body {
		--wp--style--root--padding-left: 1.25rem;
		--wp--style--root--padding-right: 1.25rem;
	}

	.apunte-grilla .wp-block-post { padding-top: 24px; }

	.apunte-publi { padding: 24px 16px; }
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.apunte-punto { opacity: 1; }
}