/*
 * f6-b — CSS del frontend (look brutalista F5F5F5).
 *
 * Regla de oro: usar SIEMPRE las variables de la paleta de WordPress
 * (--wp--preset--color--lima, --contrast, --base). Así, si cambias el
 * color "Lima" desde Apariencia → Editor → Estilos, se propaga a todo.
 */

:root {
	/* Acento de marca con respaldo: usa "lima" si la paleta activa lo tiene;
	   si no, el acento de la paleta (accent-1); y si tampoco, el lima por
	   defecto. Así nunca queda transparente al cambiar de paleta. */
	--f6-lima: var(--wp--preset--color--lima, var(--wp--preset--color--accent-1, #C6F432));
	/* Fondo de tarjeta (blanco) con respaldo a blanco puro. */
	--f6-card-bg: var(--wp--preset--color--blanco, #ffffff);

	--f6-border: 2px solid var(--wp--preset--color--contrast);
	--f6-shadow: 8px 8px 0 0 var(--wp--preset--color--contrast);
	--f6-shadow-sm: 4px 4px 0 0 var(--wp--preset--color--contrast);
	--f6-shadow-lg: 12px 12px 0 0 var(--wp--preset--color--contrast);
}

/* Rescata cualquier elemento que use el color "lima" vía las clases que
   genera WordPress (badge de fecha, panel del hero, etc.): si el slug no
   existe en la paleta activa, cae en la cadena de respaldo en vez de quedar
   transparente. */
.has-lima-background-color {
	background-color: var(--f6-lima) !important;
}
.has-lima-color {
	color: var(--f6-lima) !important;
}
.has-lima-border-color {
	border-color: var(--f6-lima) !important;
}
/* El borde del logo está en línea en el markup; lo forzamos al acento. */
.f6-logo {
	border-color: var(--f6-lima) !important;
}

/* ---------- Accesibilidad ---------- */
.f6-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===================================================================
   HEADER — barra editorial "Artisan"
   Fondo configurable (color "lima" de la paleta, con respaldo).
   Tres zonas: menú izquierdo · marca centrada · menú derecho + hamburguesa.
   =================================================================== */
.f6-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.f6-bar > .f6-nav--left {
	grid-column: 1;
	justify-self: start;
}
.f6-bar > .f6-brand {
	grid-column: 2;
	justify-self: center;
}
.f6-bar > .f6-right {
	grid-column: 3;
	justify-self: end;
}

/* Marca centrada con las dos rayitas a los lados */
.f6-brand {
	gap: 1.1rem;
	align-items: center;
}
.f6-brand::before,
.f6-brand::after {
	content: "";
	display: block;
	width: clamp(1.5rem, 4vw, 3rem);
	height: 2px;
	background: currentColor;
	flex: none;
}
.f6-brand__title {
	margin: 0;
}
.f6-brand__title a,
.f6-brand__title {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}

/* Menús de los lados (bloques de Navegación nativos) */
.f6-bar .wp-block-navigation {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
}
.f6-bar .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.f6-bar .wp-block-navigation a:hover,
.f6-bar .wp-block-navigation .current-menu-item a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}
.f6-right {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* Botón hamburguesa (overlay) en negro sobre el fondo */
.f6-burger .wp-block-navigation__responsive-container-open,
.f6-burger .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

/* Responsive: en móvil ocultamos los menús en línea y dejamos
   marca + hamburguesa (la hamburguesa lleva todos los enlaces). */
@media (max-width: 781px) {
	.f6-bar {
		grid-template-columns: 1fr auto auto;
	}
	.f6-nav--left,
	.f6-nav--right,
	.f6-private-only {
		display: none;
	}
}

/* ===================================================================
   CITA / MANIFIESTO (patrón f6-b/quote-banner)
   Banner negro con etiqueta + cita a dos líneas + icono de compás.
   =================================================================== */
.f6-quote {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* Rotador: todas las slides ocupan la misma celda de grid (apiladas) y se
   funden. La activa está visible; el resto, ocultas. Sin JS se ve la primera
   (lleva .is-active en el markup). */
.f6-quote__slides {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
}
.f6-quote__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.f6-quote__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
}
.f6-quote__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--f6-lima);
}
.f6-quote__line {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-weight: 800;
	line-height: 0.98;
	text-transform: uppercase;
	font-size: clamp(2rem, 5.5vw, 3.75rem);
}
.f6-quote__line--accent {
	color: var(--f6-lima);
	font-style: italic;
	font-weight: 500;
}
.f6-quote__line--main {
	color: var(--wp--preset--color--base);
}
.f6-quote__icon {
	flex: none;
	/* Icono tenue: el acento a baja opacidad sobre el negro. */
	color: var(--f6-lima);
	opacity: 0.45;
}
.f6-quote__icon svg {
	display: block;
}

/* En móvil, el icono estorba: lo ocultamos. */
@media (max-width: 600px) {
	.f6-quote__icon {
		display: none;
	}
}

/* ===================================================================
   HOME — mini "about" de quien escribe (arriba, bajo el header)
   =================================================================== */
.f6-home-about {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	border-bottom: var(--f6-border);
}
.f6-home-about__avatar img {
	display: block;
	width: 88px;
	height: 88px;
	border: var(--f6-border);
	border-radius: 0;
	filter: grayscale(1) contrast(1.05);
}
.f6-home-about__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--fira-code);
	opacity: 0.7;
}
.f6-home-about__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}
.f6-home-about__bio {
	margin: 0;
	max-width: 60ch;
	line-height: 1.5;
}
.f6-home-about__bio p {
	margin: 0;
}

/* ===================================================================
   PÁGINA (About y otras)
   =================================================================== */
.f6-page-title {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.02;
}
.f6-about-page {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
}
.f6-about-page .wp-block-avatar img {
	display: block;
	border: var(--f6-border);
	border-radius: 0;
	filter: grayscale(1) contrast(1.05);
}
.f6-about-page .f6-home-about__name {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--x-large);
}
.f6-about-page .f6-home-about__bio {
	margin: 0;
	max-width: 60ch;
	line-height: 1.6;
}

/* ===================================================================
   ARCHIVO (etiqueta/categoría) — cabecera con título
   =================================================================== */
.f6-archive-head {
	border-bottom: var(--f6-border);
}
.f6-archive-kicker {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--fira-code);
	opacity: 0.7;
}
.f6-archive-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1;
}
.f6-archive-desc {
	margin: 0.8rem 0 0;
	max-width: 60ch;
}

/* ===================================================================
   HOME / BLOG — rejilla de tarjetas
   =================================================================== */
.f6-blog__grid {
	/* Grid de 2 columnas: las entradas se colocan en FILAS (izquierda→derecha),
	   respetando el orden por fecha. align-items:start deja que cada tarjeta
	   tenga su altura natural sin estirarse. */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem 2.5rem;
	align-items: start;
	padding: 0;
	/* Hueco arriba para que el badge de la primera fila no se corte. */
	padding-top: 1rem;
	margin: 0;
	list-style: none;
}

.f6-blog__grid > li {
	margin: 0;
	padding: 0;
}

/* Tarjeta brutalista.
   La tarjeta es un CSS Grid de una columna: la imagen va en la fila 1, el
   cuerpo en la fila 2 y el badge se SUPERPONE en la fila 1 (misma celda) con
   un margen negativo que lo monta sobre el borde superior. Evitamos
   `position:absolute`, que dentro de un contenedor `columns` (masonry) es
   frágil en Safari (el badge desaparecía, perdía el borde o se descolocaba). */
.f6-card {
	display: grid;
	grid-template-columns: 100%;
	background: var(--f6-card-bg);
	border: var(--f6-border);
	box-shadow: var(--f6-shadow);
	/* Contexto de apilado propio: el badge (z-index 2) queda siempre por
	   encima de la capa del `filter` de la imagen (gris→color) en Safari. */
	isolation: isolate;
	/* Solo animamos la sombra (transform dentro de `columns` glitchea). */
	transition: box-shadow 0.15s ease;
}
.f6-card:hover {
	box-shadow: 13px 13px 0 0 var(--wp--preset--color--contrast);
}

/* Neutralizamos los márgenes que WP inyecta a los hijos por su layout de
   bloque (blockGap / centrado): la tarjeta se compone con grid, no con flujo. */
.f6-card > * {
	margin-block: 0 !important;
	margin-inline: 0 !important;
}

.f6-card__image {
	grid-area: 1 / 1;
}
.f6-card__body {
	grid-area: 2 / 1;
}

/* Badge de fecha en lima, superpuesto en la fila 1 y montado sobre el borde.
   El !important gana a las reglas .is-layout-* de WordPress. */
.f6-card__date {
	grid-area: 1 / 1;
	align-self: start;
	justify-self: start;
	z-index: 2;
	margin: -0.9rem 0 0 1.25rem !important;
	display: inline-block;
	width: auto;
	padding: 0.3rem 0.7rem;
	border: var(--f6-border);
	background-color: var(--f6-lima);
	color: var(--wp--preset--color--contrast);
	line-height: 1.1;
}

/* Imagen destacada a sangre dentro de la tarjeta */
.f6-card__image {
	margin: 0;
}
.f6-card__image img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/* Imágenes destacadas en gris de alto contraste (look brutalista):
   el lima es el único color de la paleta. Al pasar el ratón sobre la
   tarjeta (o sobre la imagen del hero) la foto recupera su color real. */
.f6-card__image img,
.f6-hero__image img {
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.35s ease;
}
.f6-card:hover .f6-card__image img,
.f6-hero__media:hover .f6-hero__image img {
	filter: grayscale(0) contrast(1);
}

.f6-card__title {
	margin: 0;
	line-height: 1.05;
}

/* Entradas SIN título (posts que son solo una cita): el <li> lleva la clase
   `f6-quote` (añadida en post_class). Se muestran como un banner negro tipo
   "manifiesto" a TODO EL ANCHO, con la imagen destacada de fondo, la frase en
   acento cursiva, el autor pequeño y el icono de compás. */
.f6-blog__grid > li.f6-quote {
	grid-column: 1 / -1;
}
.f6-quote .f6-card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(240px, 26vw, 340px);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
/* Imagen destacada de fondo, llenando la banda. `aspect-ratio: auto` anula el
   4/3 que trae el bloque (si no, la imagen crece a su alto natural y se sale
   de la banda). El contenedor recorta el excedente. */
.f6-quote .f6-card__image {
	display: block;
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	/* !important para ganar al aspect-ratio:4/3 en línea del bloque. */
	aspect-ratio: auto !important;
	height: auto !important;
	overflow: hidden;
}
.f6-quote .f6-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Capa oscura sobre la imagen para que se lea la cita. */
.f6-quote .f6-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(17, 17, 17, 0.68);
}
/* En las citas no mostramos la fecha (es una cita, no una entrada fechada). */
.f6-quote .f6-card__date {
	display: none;
}
.f6-quote .f6-card__body {
	position: relative;
	z-index: 2;
	background: none;
	padding-right: 6rem;
}
/* Sin "Leer más": es una cita. */
.f6-quote .wp-block-read-more {
	display: none;
}
/* Título de la cita (si el formato Cita lleva título): etiqueta pequeña
   arriba de la frase, estilo "MANDATE". */
.f6-quote .f6-card__title {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	line-height: 1.2;
}
.f6-quote .f6-card__title a {
	color: var(--f6-lima);
	text-decoration: none;
}
/* La cita, grande en acento cursiva (estilo manifiesto). */
.f6-quote .f6-card__excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
	line-height: 1.05;
	color: var(--f6-lima);
}
/* Autor (el <cite>) más pequeño, en línea aparte, como atribución. */
.f6-quote .f6-cite {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--base);
	opacity: 0.85;
}
/* Icono de compás a la derecha (mask para seguir el color de la paleta). */
.f6-quote .f6-card::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--50);
	z-index: 2;
	width: 46px;
	height: 58px;
	transform: translateY(-50%);
	background-color: var(--f6-lima);
	opacity: 0.4;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Ccircle cx='60' cy='22' r='14' fill='none' stroke='%23000' stroke-width='9'/%3E%3Cline x1='60' y1='34' x2='26' y2='138' stroke='%23000' stroke-width='13' stroke-linecap='round'/%3E%3Cline x1='60' y1='34' x2='94' y2='138' stroke='%23000' stroke-width='13' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='22' r='4' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Ccircle cx='60' cy='22' r='14' fill='none' stroke='%23000' stroke-width='9'/%3E%3Cline x1='60' y1='34' x2='26' y2='138' stroke='%23000' stroke-width='13' stroke-linecap='round'/%3E%3Cline x1='60' y1='34' x2='94' y2='138' stroke='%23000' stroke-width='13' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='22' r='4' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.f6-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.f6-card__title a:hover {
	text-decoration: underline;
}

.f6-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.55;
}

/* Pie de la tarjeta: extracto a la izquierda y "Leer más" a la derecha, en la
   misma fila y alineados abajo, para que el botón no ocupe una línea propia. */
.f6-card__foot {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40);
}
.f6-card__foot .f6-card__excerpt {
	flex: 1 1 auto;
	min-width: 0;
}
.f6-card__foot .wp-block-read-more {
	flex: 0 0 auto;
	margin-top: 0;
	white-space: nowrap;
}
/* En las citas no aplica la fila (el botón está oculto): se apila normal. */
.f6-quote .f6-card__foot {
	display: block;
}

/* Botón "LEER MÁS" (también sirve para cualquier .wp-block-read-more) */
.wp-block-read-more {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.6rem 1.2rem;
	background-color: var(--f6-lima);
	color: var(--wp--preset--color--contrast);
	border: var(--f6-border);
	box-shadow: var(--f6-shadow-sm);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}
.wp-block-read-more:hover {
	box-shadow: 7px 7px 0 0 var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Paginación brutalista: números en cajas con borde (el actual relleno de
   lima) y "Anteriores/Siguientes" como botones. */
.f6-pagination {
	margin-top: 3.5rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--fira-code);
}
.f6-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.f6-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: var(--f6-border);
	background: var(--f6-card-bg);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}
.f6-pagination .page-numbers:hover {
	box-shadow: var(--f6-shadow-sm);
}
.f6-pagination .page-numbers.current {
	background: var(--f6-lima);
	box-shadow: var(--f6-shadow-sm);
}
.f6-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	box-shadow: none;
}
.f6-pagination .wp-block-query-pagination-previous,
.f6-pagination .wp-block-query-pagination-next {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: var(--f6-border);
	background: var(--f6-card-bg);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	box-shadow: var(--f6-shadow-sm);
	transition: box-shadow 0.15s ease;
}
.f6-pagination .wp-block-query-pagination-previous:hover,
.f6-pagination .wp-block-query-pagination-next:hover {
	box-shadow: 7px 7px 0 0 var(--wp--preset--color--contrast);
}

/* ===================================================================
   SINGLE — hero partido (panel lima + imagen)
   =================================================================== */
.f6-hero {
	border: var(--f6-border);
	box-shadow: var(--f6-shadow-lg);
	overflow: hidden;
	align-items: stretch;
	/* Más ancho que el content pero centrado; !important para ganar a la regla
	   .is-layout-constrained > .alignwide de WordPress. */
	max-width: 1000px !important;
	margin-inline: auto;
}

/* Hero más bajo (rectángulo apaisado): recortamos el padding vertical del
   panel, el espaciador y el gap, para que no quede tan alto. */
.f6-hero__panel {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
	gap: 0.5rem !important;
}
.f6-hero__panel .wp-block-spacer {
	display: none;
}
.f6-hero.wp-block-columns {
	gap: 0;
}

.f6-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.f6-hero__panel .wp-block-post-date {
	color: var(--wp--preset--color--contrast);
}

.f6-hero__title {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.05;
	font-size: 56px !important;
}

/* Etiqueta de categoría: caja negra, texto base */
.f6-tag a {
	display: inline-block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.2rem 0.6rem;
	font-family: var(--wp--preset--font-family--fira-code);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.f6-readtime {
	font-family: var(--wp--preset--font-family--fira-code);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.f6-back a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.f6-back a:hover {
	text-decoration: underline;
}

/* Imagen del hero a sangre, rellenando toda la columna */
.f6-hero__media {
	align-self: stretch;
}
.f6-hero__media .wp-block-post-featured-image,
.f6-hero__media figure,
.f6-hero__media img {
	height: 100%;
	margin: 0;
	/* Anulamos el aspect-ratio 3/4 (vertical) del bloque para que la imagen no
	   alargue el hero; la altura la manda el panel. */
	aspect-ratio: auto !important;
}
.f6-hero__media img {
	width: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* ===================================================================
   SINGLE — autor (bloque nativo core/post-author), arriba del artículo
   =================================================================== */
.f6-author {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	border: var(--f6-border);
	box-shadow: var(--f6-shadow-sm);
	background: var(--f6-card-bg);
}
.f6-author .wp-block-post-author__avatar img {
	display: block;
	width: 72px;
	height: 72px;
	border: var(--f6-border);
	border-radius: 0;
	filter: grayscale(1) contrast(1.05);
}
.f6-author .wp-block-post-author__byline {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--fira-code);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
}
.f6-author .wp-block-post-author__name {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
}
.f6-author .wp-block-post-author__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.f6-author .wp-block-post-author__bio {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1rem;
	line-height: 1.55;
}

/* ===================================================================
   SINGLE — cuerpo del artículo (serif + letra capital)
   =================================================================== */
.f6-article {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.2rem;
	line-height: 1.7;
}
.f6-article p {
	font-family: var(--wp--preset--font-family--roboto-slab);
	/* Texto justificado (bordes izquierdo y derecho alineados). */
	text-align: justify;
	hyphens: auto;
}

/* Letra capital en el primer párrafo */
.f6-article > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-weight: 800;
	font-size: 4.5rem;
	line-height: 0.8;
	padding: 0.1em 0.12em 0 0;
}

/* Pies de foto en monospace */
.f6-article figcaption {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
	text-align: left;
}

/* Imágenes del cuerpo del artículo centradas (salvo que uses alineación
   izquierda/derecha/ancha en el editor, que se respeta). */
.f6-article .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
	margin-inline: auto;
	text-align: center;
}
.f6-article .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img {
	margin-inline: auto;
}

/* ===================================================================
   COMENTARIOS
   =================================================================== */
.f6-comments__title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--40);
}
.f6-comment .wp-block-avatar img {
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--contrast);
}
.f6-comment .wp-block-comment-author-name,
.f6-comment .wp-block-comment-author-name a {
	font-family: var(--wp--preset--font-family--fira-code);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.f6-comment .wp-block-comment-date,
.f6-comment .wp-block-comment-reply-link {
	font-family: var(--wp--preset--font-family--fira-code);
	opacity: 0.7;
}
/* Formulario de comentario: campos con borde brutalista. */
.f6-comment-form input[type="text"],
.f6-comment-form input[type="email"],
.f6-comment-form input[type="url"],
.f6-comment-form textarea {
	border: var(--f6-border);
	border-radius: 0;
	background: var(--wp--preset--color--blanco, #fff);
	font-family: var(--wp--preset--font-family--fira-code);
	padding: 0.6rem 0.8rem;
}
.f6-comment-form .wp-block-button__link,
.f6-comment-form .submit {
	border-radius: 0;
}

/* Navegación entre entradas */
.f6-postnav {
	padding-top: var(--wp--preset--spacing--40);
}
.f6-postnav a {
	font-family: var(--wp--preset--font-family--fira-code);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

/* ===================================================================
   BLOQUES DE CITA NATIVOS (para escribir un post que sea una cita)
   Bloque "Cita" (core/quote) y "Cita destacada" (core/pullquote).
   =================================================================== */
.wp-block-quote {
	margin: var(--wp--preset--spacing--50) 0;
	padding: 0.25rem 0 0.25rem var(--wp--preset--spacing--40);
	border-left: 6px solid var(--f6-lima);
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.5rem;
	line-height: 1.35;
	font-weight: 500;
}
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* Cita destacada: grande, centrada, entre dos líneas gruesas. */
.wp-block-pullquote {
	margin: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--50) 0;
	border-top: var(--f6-border);
	border-bottom: var(--f6-border);
	text-align: center;
}
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.1;
	font-weight: 800;
}
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.8rem;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--f6-lima);
}

/* ===================================================================
   FOOTER
   =================================================================== */
.f6-copyright {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 781px) {
	.f6-blog__grid {
		grid-template-columns: 1fr;
	}
	.f6-hero.wp-block-columns {
		flex-wrap: wrap;
	}
	.f6-hero__panel,
	.f6-hero__media {
		flex-basis: 100% !important;
	}
}