/**
 * Kusikuna — estilos del tema.
 *
 * Índice
 *  1. Variables y base
 *  2. Cabecera y navegación
 *  3. Secciones decoradas (hero, banner, olas, textura, adornos)
 *  4. Tarjetas, fotos y botones
 *  5. Línea de tiempo
 *  6. Noticias y listados
 *  7. Pie de página
 *  8. Animaciones de aparición
 *  9. Ajustes del editor
 */

/* ============================================================
   1. Variables y base
   ============================================================ */

:root {
	--kusi-rojo: #af1e23;
	--kusi-guinda: #53020c;
	--kusi-morado: #672d8b;
	--kusi-naranja: #faa61a;
	--kusi-ambar: #e07e27;
	--kusi-verde: #49883f;
	--kusi-azul: #1890ba;
	--kusi-rosa: #ed145b;

	--kusi-radio-tarjeta: 1.5rem;
	--kusi-radio-suave: 1rem;
	--kusi-transicion-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Alto de la onda de transición entre secciones. */
	--kusi-ola-alto: 5rem;
	/* Color que "cae" desde la sección anterior. */
	--kusi-ola-color: #ffffff;
}

html {
	scroll-behavior: smooth;
	/* El diseño de Kusikuna es solo en claro: evita que el navegador
	   aplique su modo oscuro automático sobre los fondos de color. */
	color-scheme: light;
}

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

/* Texto secundario dentro de secciones de color. */
.has-blanco-color p,
.kusi-seccion-color p {
	line-height: 1.75;
}

/* Párrafos "suaves" sobre fondo de color. */
.kusi-texto-suave {
	opacity: 0.9;
}

/* ============================================================
   2. Cabecera y navegación
   ============================================================ */

.kusi-header {
	padding-inline: 1.5rem;
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 4px solid var(--kusi-rojo);
}

/* Admin bar: que el sticky no se esconda debajo. */
.admin-bar .kusi-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .kusi-header {
		top: 46px;
	}
}

/* El logotipo se muestra completo, sea horizontal o cuadrado: la altura la
   fija la cabecera y el ancho se deriva de la proporción del archivo. Nada de
   recortes ni de máscaras circulares. */
.kusi-header .wp-block-site-logo img {
	height: 2.75rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 782px) {
	.kusi-header .wp-block-site-logo img {
		height: 3.5rem;
	}
}

/* El envoltorio del bloque no debe recortar el ancho derivado. */
.kusi-header .wp-block-site-logo,
.kusi-header .wp-block-site-logo a {
	width: auto;
	max-width: 100%;
}

/* Enlaces del menú */
.kusi-nav .wp-block-navigation-item__content {
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: color 200ms ease-out;
}

.kusi-nav .wp-block-navigation-item__content:hover,
.kusi-nav .wp-block-navigation-item__content:focus-visible,
.kusi-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--kusi-rojo);
	text-decoration: none;
}

/* Submenú desplegable */
.kusi-nav .wp-block-navigation__submenu-container {
	border: 1px solid #f1f5f9;
	border-radius: var(--kusi-radio-suave);
	box-shadow: 0 20px 35px -18px rgba(15, 23, 42, 0.45);
	padding: 0;
	overflow: hidden;
	min-width: 14rem;
}

.kusi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid #f1f5f9;
	width: 100%;
}

.kusi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: 0;
}

.kusi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #f8fafc;
}

.kusi-nav .wp-block-navigation__submenu-icon svg {
	transition: transform 300ms ease-out;
}

.kusi-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg,
.kusi-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Botón hamburguesa y overlay móvil */
.kusi-nav .wp-block-navigation__responsive-container-open,
.kusi-nav .wp-block-navigation__responsive-container-close {
	color: var(--kusi-rojo);
}

.kusi-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
	padding: 2rem 1.5rem 3rem;
}

.kusi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.125rem;
	padding-block: 0.5rem;
}

/* Botón «Iniciativas» de la cabecera */
.kusi-boton-cabecera .wp-block-button__link {
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.5);
}

@media (max-width: 599px) {
	/* En móvil «Iniciativas» ya está dentro del menú desplegable. */
	.kusi-header .kusi-boton-cabecera {
		display: none;
	}
}

/* Elementos que solo aparecen a partir de tableta. */
@media (max-width: 781px) {
	.kusi-ocultar-movil {
		display: none;
	}
}

/* ============================================================
   3. Secciones decoradas
   ============================================================ */

.kusi-seccion {
	position: relative;
	overflow: hidden;
}

/* Cabecera, contenido y pie se tocan entre sí: el blockGap de la raíz dejaba
   una franja blanca de 1,5 rem bajo la cabecera y encima del pie. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Las secciones se tocan entre sí: sin separación heredada del blockGap. */
:is(.entry-content, .wp-site-blocks, main) > :is(.kusi-seccion, .kusi-hero, .kusi-banner),
:is(.kusi-seccion, .kusi-hero, .kusi-banner) {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Que las franjas de color lleguen de borde a borde aunque estén anidadas. */
main > .entry-content > .alignfull,
main > .alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* El margen lateral vive en cada sección, no en la raíz: así los fondos
   de color llegan al borde y el texto nunca se pega a la pantalla. */
:is(.kusi-seccion, .kusi-hero, .kusi-banner) {
	padding-inline: 1.5rem;
}

@media (min-width: 782px) {
	:is(.kusi-seccion, .kusi-hero, .kusi-banner) {
		padding-inline: 2.5rem;
	}
}

/* --- Textura de papel sobre los fondos de color --- */
.kusi-textura::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/textura.png");
	background-size: 130px 130px;
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 0.14;
	pointer-events: none;
}

/* --- Hero de portada: rojo + curvas verde y naranja --- */
.kusi-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--kusi-rojo);
	isolation: isolate;
}

.kusi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/textura.png");
	background-size: 130px 130px;
	mix-blend-mode: multiply;
	opacity: 0.14;
	pointer-events: none;
	z-index: -2;
}

/* Curvas verde y naranja + nube, en una sola capa (el ::before lleva la textura). */
.kusi-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("../img/nube.png"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23faa61a' d='M0,813 C500,772 1000,660 1440,352 L1440,1000 L0,1000 Z'/%3E%3Cpath fill='%2349883f' d='M0,744 C500,700 1000,540 1440,122 L1440,352 C1000,660 500,772 0,813 Z'/%3E%3C/svg%3E");
	/* En pantallas estrechas las curvas se limitan a la franja inferior:
	   estiradas a toda la altura se verían casi diagonales. */
	background-size: 7rem auto, 100% 45%;
	background-position: right 1.5rem bottom 2rem, bottom center;
	background-repeat: no-repeat, no-repeat;
}

@media (min-width: 782px) {
	.kusi-hero::after {
		background-size: 11rem auto, 100% 100%;
		background-position: right 1.5rem bottom 2rem, center;
	}
}

/* --- Banner de páginas internas: rojo con textura --- */
.kusi-banner {
	position: relative;
	overflow: hidden;
	background-color: var(--kusi-rojo);
}

.kusi-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/textura.png");
	background-size: 130px 130px;
	mix-blend-mode: multiply;
	opacity: 0.14;
	pointer-events: none;
}

.kusi-banner > * {
	position: relative;
	z-index: 1;
}

/* --- Nube decorativa (abajo a la derecha) --- */
.kusi-nube::after {
	content: "";
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 6rem;
	height: 4rem;
	background-image: url("../img/nube.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 782px) {
	.kusi-nube::after {
		width: 9rem;
		height: 6rem;
	}
}

/* --- Onda de transición entre secciones --- */
.kusi-ola {
	position: relative;
	overflow: hidden;
}

.kusi-ola::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: var(--kusi-ola-alto);
	background-color: var(--kusi-ola-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,90 C240,180 480,0 720,50 C960,100 1200,190 1440,110 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,90 C240,180 480,0 720,50 C960,100 1200,190 1440,110 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	z-index: 3;
}

@media (min-width: 782px) {
	.kusi-ola {
		--kusi-ola-alto: 7rem;
	}
}

/* Colores de origen de la onda, según la sección anterior. Hay uno por cada
   color de la paleta de theme.json: si falta alguno, la onda se dibuja blanca
   en silencio y parece un hueco entre franjas. */
.kusi-ola-desde-blanco  { --kusi-ola-color: #ffffff; }
.kusi-ola-desde-crema   { --kusi-ola-color: #f8fafc; }
.kusi-ola-desde-rojo    { --kusi-ola-color: var(--kusi-rojo); }
.kusi-ola-desde-guinda  { --kusi-ola-color: var(--kusi-guinda); }
.kusi-ola-desde-morado  { --kusi-ola-color: var(--kusi-morado); }
.kusi-ola-desde-naranja { --kusi-ola-color: var(--kusi-naranja); }
.kusi-ola-desde-ambar   { --kusi-ola-color: var(--kusi-ambar); }
.kusi-ola-desde-verde   { --kusi-ola-color: var(--kusi-verde); }
.kusi-ola-desde-azul    { --kusi-ola-color: var(--kusi-azul); }
.kusi-ola-desde-rosa    { --kusi-ola-color: var(--kusi-rosa); }

/* El contenido nunca queda tapado por la onda. */
.kusi-ola > * {
	position: relative;
	z-index: 4;
}

/* ============================================================
   4. Tarjetas, fotos y botones
   ============================================================ */

/* --- Tarjeta de color (principios, misión/visión/valores) --- */
.is-style-tarjeta {
	border-radius: var(--kusi-radio-tarjeta);
	padding: 2rem;
	box-shadow: 0 12px 24px -14px rgba(15, 23, 42, 0.4);
	transition: transform 350ms var(--kusi-transicion-rebote), box-shadow 300ms ease-out;
	height: 100%;
}

.is-style-tarjeta:hover {
	transform: translateY(-8px) rotate(var(--kusi-inclinacion, -1.5deg)) scale(1.02);
	box-shadow: 0 22px 40px -12px rgba(15, 23, 42, 0.45);
}

.is-style-tarjeta :where(h1, h2, h3, h4, h5, h6),
.is-style-tarjeta p {
	color: #fff;
}

/* --- Tarjeta clara (convenios, iniciativas, pasos) --- */
.is-style-tarjeta-clara {
	background: #fff;
	border: 2px solid #f1f5f9;
	border-radius: var(--kusi-radio-tarjeta);
	padding: 2rem;
	box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.3);
	transition: transform 350ms var(--kusi-transicion-rebote), box-shadow 300ms ease-out;
	height: 100%;
}

.is-style-tarjeta-clara:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 20px 35px -14px rgba(15, 23, 42, 0.3);
}

/* Inclinaciones alternas: se aplican por posición dentro de una fila de columnas. */
.kusi-inclinar > .wp-block-column:nth-child(odd)  { --kusi-inclinacion: -1.5deg; }
.kusi-inclinar > .wp-block-column:nth-child(even) { --kusi-inclinacion: 1.5deg; }

/* --- Icono circular dentro de las tarjetas --- */
.kusi-icono {
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.kusi-icono svg {
	width: 2.75rem;
	height: 2.75rem;
}

.kusi-icono--pequeno {
	width: 5rem;
	height: 5rem;
}

.kusi-icono--pequeno svg {
	width: 2.25rem;
	height: 2.25rem;
}

.kusi-icono--claro {
	width: 4rem;
	height: 4rem;
	background: rgba(73, 136, 63, 0.1);
}

.kusi-icono--claro svg {
	width: 2rem;
	height: 2rem;
}

.is-style-tarjeta:hover .kusi-icono,
.is-style-tarjeta-clara:hover .kusi-icono {
	animation: kusi-bailar 550ms ease-in-out;
}

@keyframes kusi-bailar {
	0%, 100% { transform: rotate(0deg) scale(1); }
	25%      { transform: rotate(-12deg) scale(1.12); }
	50%      { transform: rotate(10deg) scale(1.15); }
	75%      { transform: rotate(-6deg) scale(1.08); }
}

/* --- Fotos circulares con marco blanco --- */
.wp-block-image.is-style-foto-circular img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
	outline: 10px solid #fff;
	outline-offset: -1px;
	transition: transform 500ms var(--kusi-transicion-rebote);
	width: 100%;
}

.wp-block-image.is-style-foto-circular:hover img {
	transform: scale(1.05) rotate(var(--kusi-inclinacion, -2deg));
}

/* --- Fotos rectangulares redondeadas con marco --- */
.wp-block-image.is-style-foto-marco img {
	border-radius: var(--kusi-radio-tarjeta);
	object-fit: cover;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4);
	outline: 8px solid #fff;
	outline-offset: -1px;
	transition: transform 500ms var(--kusi-transicion-rebote);
	width: 100%;
}

.wp-block-image.is-style-foto-marco:hover img {
	transform: scale(1.04) rotate(var(--kusi-inclinacion, -1.5deg));
}

/* --- Botones con rebote --- */
.wp-block-button__link {
	transition: transform 300ms var(--kusi-transicion-rebote), box-shadow 300ms ease-out, background-color 200ms ease-out;
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.45);
}

.wp-block-button__link:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 14px 24px -10px rgba(15, 23, 42, 0.35);
}

.wp-block-button__link:active {
	transform: translateY(-1px) scale(1.02);
}

/* Botón blanco sobre fondos de color. */
.kusi-boton-claro .wp-block-button__link {
	background-color: #fff;
	color: #0f172a;
}

.kusi-boton-claro .wp-block-button__link:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

/* --- Avatares del equipo --- */
.kusi-avatar {
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.4);
	outline: 4px solid #fff;
	transition: transform 400ms var(--kusi-transicion-rebote);
}

.kusi-avatar:hover {
	transform: translateY(-4px) rotate(var(--kusi-inclinacion, -2deg)) scale(1.06);
}

.kusi-avatar svg {
	width: 3rem;
	height: 3rem;
}

@media (min-width: 782px) {
	.kusi-avatar {
		width: 7rem;
		height: 7rem;
	}

	.kusi-avatar svg {
		width: 3.5rem;
		height: 3.5rem;
	}
}

.kusi-persona p {
	margin-top: 1rem;
	font-family: "Baloo 2", ui-rounded, sans-serif;
	font-weight: 700;
	color: var(--kusi-guinda);
	text-align: center;
}

/* --- Pasos numerados (iniciativas) --- */
.kusi-pasos {
	list-style: none;
	padding-left: 0;
	margin: 0;
	counter-reset: kusi-paso;
}

.kusi-pasos li {
	counter-increment: kusi-paso;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
}

.kusi-pasos li::before {
	content: counter(kusi-paso);
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--kusi-rojo);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Bloque de mapa --- */
.kusi-mapa {
	border: 2px solid #1e293b;
	border-radius: var(--kusi-radio-suave);
	overflow: hidden;
	min-height: 22rem;
	height: 100%;
}

.kusi-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 22rem;
	border: 0;
}

/* --- Datos de contacto --- */
.kusi-dato {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
}

.kusi-dato .kusi-dato__icono {
	flex: 0 0 auto;
	background: #fce7ef;
	color: var(--kusi-rojo);
	border-radius: 50%;
	padding: 0.5rem;
	display: flex;
}

.kusi-dato svg {
	width: 1.25rem;
	height: 1.25rem;
}

.kusi-dato p {
	margin: 0;
}

.kusi-dato strong {
	display: block;
	color: #1e293b;
}

/* ============================================================
   5. Línea de tiempo
   ============================================================ */

.kusi-timeline {
	position: relative;
	margin-top: 4rem;
}

.kusi-timeline__linea {
	position: absolute;
	left: 1.75rem;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 999px;
	background: #e2e8f0;
}

.kusi-timeline__progreso {
	position: absolute;
	left: 1.75rem;
	top: 0;
	width: 4px;
	height: 0;
	border-radius: 999px;
	background: linear-gradient(to bottom, var(--kusi-rojo), var(--kusi-naranja), var(--kusi-azul));
	transition: height 150ms linear;
}

.kusi-timeline__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

.kusi-hito {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	column-gap: 1.5rem;
	align-items: start;
}

.kusi-hito__punto {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: "Baloo 2", ui-rounded, sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	outline: 4px solid #fff;
	box-shadow: 0 8px 16px -10px rgba(15, 23, 42, 0.5);
	position: relative;
	z-index: 2;
	transition: transform 400ms var(--kusi-transicion-rebote), box-shadow 300ms ease-out;
}

.kusi-hito.in-view .kusi-hito__punto {
	transform: scale(1.12);
	box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.55);
}

.kusi-hito__texto h3 {
	margin: 0;
}

.kusi-hito__texto p {
	margin-top: 0.5rem;
	color: #475569;
}

@media (min-width: 782px) {
	.kusi-timeline__linea,
	.kusi-timeline__progreso {
		left: 50%;
		transform: translateX(-50%);
	}

	.kusi-timeline__lista {
		gap: 5rem;
	}

	.kusi-hito {
		grid-template-columns: 1fr 3.5rem 1fr;
		column-gap: 2.5rem;
	}

	.kusi-hito__punto {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.kusi-hito__texto {
		grid-row: 1;
	}

	.kusi-hito--izquierda .kusi-hito__texto {
		grid-column: 1;
		text-align: right;
		padding-right: 0.5rem;
	}

	.kusi-hito--derecha .kusi-hito__texto {
		grid-column: 3;
		text-align: left;
		padding-left: 0.5rem;
	}
}

/* ============================================================
   6. Noticias y listados
   ============================================================ */

.kusi-listado .wp-block-post {
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: var(--kusi-radio-tarjeta);
	overflow: hidden;
	box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.35);
	transition: transform 350ms var(--kusi-transicion-rebote), box-shadow 300ms ease-out;
	display: flex;
	flex-direction: column;
}

.kusi-listado .wp-block-post:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 40px -14px rgba(15, 23, 42, 0.35);
}

.kusi-listado .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kusi-listado .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--kusi-transicion-rebote);
}

.kusi-listado .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

.kusi-listado .kusi-tarjeta-cuerpo {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1 1 auto;
}

.kusi-listado .wp-block-post-title {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0;
	color: #1e293b;
}

.kusi-listado .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.kusi-listado .wp-block-post-title a:hover {
	color: var(--kusi-rojo);
}

.kusi-listado .wp-block-post-excerpt {
	margin: 0;
	color: #475569;
	font-size: 0.9375rem;
}

.kusi-listado .wp-block-post-excerpt__more-link {
	font-weight: 700;
	color: var(--kusi-rojo);
	text-decoration: none;
}

.kusi-listado .wp-block-post-date {
	color: #94a3b8;
	font-size: 0.75rem;
	margin: 0;
}

.kusi-listado .kusi-tarjeta-pie {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Paginación */
.wp-block-query-pagination {
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3.5rem;
}

.wp-block-query-pagination .page-numbers {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #475569;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 200ms ease-out;
}

.wp-block-query-pagination .page-numbers:hover {
	background: #f1f5f9;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--kusi-rojo);
	color: #fff;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	padding: 0 1rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
	background: #f1f5f9;
}

/* Entrada individual */
.kusi-entrada .wp-block-post-title {
	color: var(--kusi-guinda);
}

.kusi-entrada .wp-block-post-featured-image img {
	border-radius: var(--kusi-radio-tarjeta);
	width: 100%;
	object-fit: cover;
}

.kusi-entrada .wp-block-post-content > * + * {
	margin-top: 1.25rem;
}

/* ============================================================
   7. Pie de página
   ============================================================ */

.kusi-footer {
	padding-inline: 1.5rem;
	position: relative;
	background: var(--kusi-rojo);
	color: #fff;
	margin-top: 0;
}

/* Hojas de árbol sobre el borde superior del pie. */
.kusi-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(-96%);
	height: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%232f5a28' fill-opacity='0.55' d='M0,100 L0,68 Q60,12 120,68 Q180,12 240,68 Q300,12 360,68 Q420,12 480,68 Q540,12 600,68 Q660,12 720,68 Q780,12 840,68 Q900,12 960,68 Q1020,12 1080,68 Q1140,12 1200,68 Q1260,12 1320,68 Q1380,12 1440,68 L1440,100 Z'/%3E%3Cpath fill='%2349883f' stroke='%232a4a24' stroke-width='2' stroke-linejoin='round' d='M0,100 L0,74 Q48,20 96,74 Q144,20 192,74 Q240,20 288,74 Q336,20 384,74 Q432,20 480,74 Q528,20 576,74 Q624,20 672,74 Q720,20 768,74 Q816,20 864,74 Q912,20 960,74 Q1008,20 1056,74 Q1104,20 1152,74 Q1200,20 1248,74 Q1296,20 1344,74 Q1392,20 1440,74 L1440,100 Z'/%3E%3Ccircle cx='96' cy='26' r='9' fill='%236fae5f'/%3E%3Ccircle cx='288' cy='26' r='7' fill='%236fae5f'/%3E%3Ccircle cx='480' cy='26' r='10' fill='%236fae5f'/%3E%3Ccircle cx='864' cy='26' r='8' fill='%236fae5f'/%3E%3Ccircle cx='1056' cy='26' r='9' fill='%236fae5f'/%3E%3Ccircle cx='1344' cy='26' r='7' fill='%236fae5f'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 5;
}

@media (min-width: 782px) {
	.kusi-footer::before {
		height: 4rem;
	}
}

.kusi-footer,
.kusi-footer p,
.kusi-footer a {
	color: #fff;
	font-size: 0.875rem;
}

.kusi-footer a {
	text-decoration: underline;
	font-weight: 700;
}

.kusi-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.15);
	transition: transform 300ms var(--kusi-transicion-rebote), background-color 200ms ease-out;
}

.kusi-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-3px) scale(1.1);
	background: rgba(255, 255, 255, 0.28);
}

.kusi-footer .wp-block-social-link-anchor svg {
	fill: #fff;
}

/* ============================================================
   8. Animaciones de aparición
   ============================================================ */

.kusi-aparece,
.kusi-aparece-pop {
	transition-duration: 700ms;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.kusi-aparece {
	opacity: 0;
	transform: translateY(28px);
	transition-property: opacity, transform;
}

.kusi-aparece.in-view {
	opacity: 1;
	transform: translateY(0);
}

.kusi-aparece-pop {
	opacity: 0;
	transform: scale(0.9) translateY(16px);
	transition-property: opacity, transform;
	transition-duration: 650ms;
	transition-timing-function: var(--kusi-transicion-rebote);
}

.kusi-aparece-pop.in-view {
	opacity: 1;
	transform: scale(1) translateY(0);
}

.kusi-retraso-1 { transition-delay: 100ms; }
.kusi-retraso-2 { transition-delay: 200ms; }
.kusi-retraso-3 { transition-delay: 300ms; }
.kusi-retraso-4 { transition-delay: 500ms; }
.kusi-retraso-5 { transition-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.kusi-aparece,
	.kusi-aparece-pop {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.is-style-tarjeta,
	.is-style-tarjeta-clara,
	.kusi-avatar,
	.kusi-icono,
	.wp-block-button__link,
	.wp-block-image img,
	.kusi-timeline__progreso,
	.kusi-hito__punto,
	.kusi-listado .wp-block-post {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   9. Ajustes del editor
   ============================================================ */

/* En el editor las animaciones deben verse siempre. */
.editor-styles-wrapper .kusi-aparece,
.editor-styles-wrapper .kusi-aparece-pop {
	opacity: 1;
	transform: none;
}

/* Que el hero y las olas se dibujen también dentro del editor. */
.editor-styles-wrapper .kusi-hero,
.editor-styles-wrapper .kusi-banner {
	min-height: 12rem;
}