/* =========================================================================
   Página general del blog
   -------------------------------------------------------------------------
   Se carga SOLO en la página de entradas, así que no puede afectar a la
   portada, al catálogo, a la entrada individual ni a ninguna otra página.

   Todos los colores salen de las variables del tema. El naranja es
   --OZ-Color-3. Aquí no hay ni un azul.
   ========================================================================= */

/* El envoltorio .site del tema está limitado a --OZ-Container-PC (1440 px) y
   no lleva márgenes automáticos, así que en pantallas anchas queda pegado a la
   izquierda. Es el mismo caso que la entrada individual. Se suelta a ancho
   completo solo aquí; los bloques de dentro llevan su propio contenedor. */
body.blog .site {
	max-width: none;
}

.blog .site-main--blog {
	--ozb-naranja: var(--OZ-Color-3, #ea580c);
	--ozb-negro: var(--OZ-Color-1, #000);
	--ozb-texto: #3f3f46;
	--ozb-suave: #71717a;
	--ozb-borde: var(--OZ-Color-6, #e5e5e5);
	--ozb-gris: #f4f4f5;
	--ozb-naranja-10: color-mix(in srgb, var(--ozb-naranja) 10%, #fff);
	--ozb-ancho: 1200px;
	--ozb-radio: 10px;

	background: #fff;
	color: var(--ozb-texto);
	font-family: var(--OZ-Font-Base);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.blog .site-main--blog {
		--ozb-naranja-10: #fdf1e9;
	}
}

/* -------------------------------------------------------------- Migas --- */
/* Mismas clases y mismo aspecto que en la entrada. Se repiten aquí porque el
   CSS de la entrada no se carga en esta página y no quiero que una dependa de
   la otra: son 20 líneas y evitan tocar la plantilla individual. */
.blog .site-main--blog .oz-crumbs {
	border-bottom: 1px solid var(--ozb-borde);
	background: #fff;
}

.blog .site-main--blog .oz-crumbs__inner {
	max-width: var(--ozb-ancho);
	margin: 0 auto;
	padding: 14px 20px;
	font-size: 13px;
	color: var(--ozb-suave);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.blog .site-main--blog .oz-crumbs a {
	color: var(--ozb-suave);
	text-decoration: none;
}

.blog .site-main--blog .oz-crumbs a:hover {
	color: var(--ozb-naranja);
	text-decoration: underline;
}

.blog .site-main--blog .oz-crumbs__sep {
	color: #d4d4d8;
}

.blog .site-main--blog .oz-crumbs__current {
	color: var(--ozb-negro);
	font-weight: 500;
}

/* ------------------------------------------------------------ Portada --- */
.ozb-hero {
	background: var(--ozb-gris);
	border-bottom: 1px solid var(--ozb-borde);
	overflow: hidden;
}

.ozb-hero__inner {
	max-width: var(--ozb-ancho);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0;
}

.ozb-hero__text {
	padding: 34px 0 26px;
}

.ozb-hero__badge {
	display: inline-block;
	background: var(--ozb-naranja);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.ozb-hero__title {
	margin: 0 0 14px;
	color: var(--ozb-negro);
	font-size: clamp(28px, 5.2vw, 44px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.ozb-hero__desc {
	margin: 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.62;
	color: #52525b;
}

.ozb-hero__media {
	background: var(--ozb-naranja);
	border-radius: var(--ozb-radio);
	overflow: hidden;
	margin-bottom: 30px;
}

.ozb-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* La portada sin imagen no deja hueco: el texto ocupa todo el ancho. */
.ozb-hero--sin-imagen .ozb-hero__text {
	padding-bottom: 34px;
}

@media (min-width: 992px) {
	.ozb-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: 340px;
	}

	.ozb-hero__text {
		align-self: center;
		padding: 48px 44px 48px 0;
	}

	/* SIN corte en diagonal, a propósito. La referencia lo llevaba porque su
	   imagen era una foto de producto, donde cortar una esquina no se lleva
	   nada. Las imágenes de este blog son banners CON TEXTO pegado al borde
	   izquierdo: la diagonal se comía 96 px y "CATÁLOGO" se leía "LOGO".
	   Se deja el naranja de fondo como detalle y la imagen entera. */
	.ozb-hero__media {
		margin-bottom: 0;
		align-self: center;
		/* La misma proporción que los banners: así object-fit no recorta nada. */
		aspect-ratio: 2 / 1;
	}

	.ozb-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ozb-hero--sin-imagen .ozb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.ozb-hero--sin-imagen .ozb-hero__text {
		padding: 48px 0;
	}
}

/* ------------------------------------------- Cabecera de "Últimos" ------ */
.ozb-list__inner {
	max-width: var(--ozb-ancho);
	margin: 0 auto;
	padding: 40px 20px 8px;
}

.ozb-list__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 26px;
}

.ozb-list__title {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	color: var(--ozb-negro);
	font-size: clamp(24px, 3.6vw, 32px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* La línea naranja corta bajo el título */
.ozb-list__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	border-radius: 2px;
	background: var(--ozb-naranja);
}

.ozb-list__lema {
	margin: 0;
	font-size: 14.5px;
	color: var(--ozb-suave);
}

/* En pantallas pequeñas el lema baja debajo del título, no se pierde. */
@media (max-width: 639px) {
	.ozb-list__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ----------------------------------------------------------- Rejilla --- */
.ozb-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* Dos por fila en cuanto hay ancho de sobra. Con dos entradas ocupan la fila
   entera y no queda ninguna columna vacía al lado. */
@media (min-width: 768px) {
	.ozb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

/* ---------------------------------------------------------- Tarjetas --- */
.ozb-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ozb-borde);
	border-radius: 12px;
	padding: 12px;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ozb-card:hover {
	border-color: #d4d4d8;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ozb-card {
		transition: none;
	}

	.ozb-card:hover {
		transform: none;
	}
}

/* 2:1, la proporción real de las imágenes del blog. Todas las tarjetas quedan
   a la misma altura y no se recorta el texto de los banners. */
.ozb-card__media {
	display: block;
	aspect-ratio: 2 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ozb-borde);
}

.ozb-card__media img,
.ozb-card__img,
.ozb-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ozb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 8px 6px;
}

.ozb-card__cat {
	align-self: flex-start;
	background: var(--ozb-naranja-10);
	color: var(--ozb-naranja);
	border: 1px solid var(--ozb-naranja);
	border-radius: 4px;
	padding: 3px 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ozb-card__title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ozb-card__title-link {
	color: var(--ozb-negro);
	text-decoration: none;
	border: 0;
	/* Tope solo visual: el título completo sigue en el HTML y en el enlace. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ozb-card__title-link:hover,
.ozb-card__title-link:focus-visible {
	color: var(--ozb-naranja);
	text-decoration: none;
}

.ozb-card__excerpt {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--ozb-suave);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ozb-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ozb-borde);
	font-size: 13px;
	color: var(--ozb-suave);
}

.ozb-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ozb-card__meta-item svg {
	color: var(--ozb-naranja);
	flex: 0 0 auto;
}

.ozb-card__more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ozb-naranja);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	/* Zona de pulsación cómoda en móvil sin descuadrar la fila */
	padding: 6px 0;
}

.ozb-card__more:hover,
.ozb-card__more:focus-visible {
	color: var(--ozb-naranja);
	text-decoration: underline;
}

.ozb-card__arrow {
	transition: transform .18s ease;
}

.ozb-card:hover .ozb-card__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ozb-card__arrow {
		transition: none;
	}

	.ozb-card:hover .ozb-card__arrow {
		transform: none;
	}
}

/* ------------------------------------------------------ Sin entradas --- */
.ozb-vacio {
	margin: 0;
	padding: 44px 20px;
	text-align: center;
	font-size: 16px;
	color: var(--ozb-suave);
	background: var(--ozb-gris);
	border-radius: 12px;
}

/* ------------------------------------------------------- Paginación --- */
.blog .site-main--blog .pagination {
	margin-top: 34px;
}

.blog .site-main--blog .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.blog .site-main--blog .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ozb-borde);
	border-radius: 8px;
	color: var(--ozb-texto);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.blog .site-main--blog .pagination .page-numbers:hover {
	border-color: var(--ozb-naranja);
	color: var(--ozb-naranja);
}

.blog .site-main--blog .pagination .page-numbers.current {
	background: var(--ozb-naranja);
	border-color: var(--ozb-naranja);
	color: #fff;
}

/* -------------------------------------------- Franja informativa ------- */
.ozb-franja {
	padding: 34px 0 56px;
}

.ozb-franja__inner {
	max-width: var(--ozb-ancho);
	margin: 0 auto;
	padding: 0 20px;
}

.ozb-franja__box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	background: #f7f7f8;
	border: 1px solid #efeff1;
	border-radius: 12px;
	padding: 24px 22px;
	text-align: center;
}

.ozb-franja__icon {
	display: inline-flex;
	color: var(--ozb-naranja);
	flex: 0 0 auto;
}

.ozb-franja__text {
	margin: 0;
	font-size: 15px;
	color: var(--ozb-texto);
}

/* ------------------------------------------------------------ Foco ----- */
.blog .site-main--blog a:focus-visible {
	outline: 3px solid var(--ozb-naranja);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --------------------------------------------------------- Móvil ------- */
@media (max-width: 575px) {
	.ozb-list__inner {
		padding-top: 30px;
	}

	.ozb-card__body {
		padding: 14px 6px 4px;
	}

	.ozb-card__title {
		font-size: 18.5px;
	}

	.ozb-card__meta {
		gap: 6px 14px;
	}

	/* En móvil el enlace baja a su propia línea y se pulsa cómodo. */
	.ozb-card__more {
		margin-left: 0;
		width: 100%;
		padding-top: 10px;
	}

	.ozb-franja {
		padding: 26px 0 44px;
	}
}