/*
 * Cataleya — CSS complementario.
 *
 * Regla de la casa: si algo se puede expresar en theme.json, va en theme.json.
 * Aquí solo lo que el JSON aún no cubre: estilos de bloque registrados en
 * functions.php, accesibilidad y pequeños detalles de interacción.
 */

/* ---- Accesibilidad ------------------------------------------------------ */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--acento);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}

/* ---- Interacción -------------------------------------------------------- */

.wp-block-button__link,
.wp-block-navigation a,
.wp-block-post-title a {
	transition: color var(--wp--custom--transicion), background-color var(--wp--custom--transicion), border-color var(--wp--custom--transicion);
}

/* ---- Estilos de bloque (register_block_style en functions.php) ---------- */

/* Grupo → Tarjeta */
.wp-block-group.is-style-tarjeta {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radio--l);
	box-shadow: var(--wp--preset--shadow--suave);
	padding: var(--wp--preset--spacing--40);
}

/* Imagen → Esquinas redondeadas */
.wp-block-image.is-style-redondeada img {
	border-radius: var(--wp--custom--radio--l);
}

/* Lista → Con marcas de verificación */
.wp-block-list.is-style-marcas {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-marcas li {
	padding-left: 1.75em;
	position: relative;
}

.wp-block-list.is-style-marcas li::before {
	color: var(--wp--preset--color--secundario);
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* ---- Detalles ----------------------------------------------------------- */

/* Imagen destacada en listados: proporción fija para que la rejilla no baile. */
.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radio--m);
}