/**
 * Pegamento entre los bloques de WordPress y MDB.
 *
 * Aqui NO se define el sistema de diseño: eso es MDB, y theme.json lo repite en
 * el vocabulario del editor. Este archivo solo resuelve los sitios donde los dos
 * mundos se tocan y no encajan solos.
 *
 * Regla 2 del proyecto: ningún color escrito a mano. Todo sale de --mdb-* o de
 * los presets que genera theme.json. Si algo necesita un color que no existe en
 * la paleta, el sitio donde se arregla es theme.json, no este archivo.
 *
 * 1 · Base
 * 2 · Enlaces, foco y accesibilidad
 * 3 · Estilos de bloque (las variantes registradas en inc/arranque.php)
 * 4 · Bloques de WordPress que necesitan ayuda
 * 5 · Regiones que se refrescan solas
 * 6 · Campos convertidos a MDB
 * 7 · Opciones largas en un desplegable
 * 8 · Lo que decide el Personalizador
 * 9 · Un radio grande no cabe en la muesca
 * 10 · El paginador
 */

/* ─────────────────────────────────────────────────────────── 1 · Base ── */

/*
 * MDB pone scroll-behavior: smooth en :root. Con la barra de administración
 * puesta, saltar a un ancla deja el destino debajo de la barra; el offset lo
 * arregla sin desactivar el suavizado.
 */
:root {
	scroll-padding-top: var(--owari-desplazamiento, 0px);
}

body.admin-bar {
	--owari-desplazamiento: 46px;
}

@media screen and (min-width: 783px) {
	body.admin-bar {
		--owari-desplazamiento: 32px;
	}
}

/*
 * El fondo lo pone theme.json en el body. Se repite en html para que el rebote
 * del scroll en móviles no enseñe el blanco del navegador debajo del tema
 * oscuro.
 */
html {
	background-color: var(--mdb-body-bg);
}

/* ──────────────────────────────── 2 · Enlaces, foco y accesibilidad ── */

/*
 * MDB no subraya los enlaces y en un texto largo eso deja el color como única
 * señal, que no basta. Dentro del contenido sí se subrayan; en menús, botones y
 * tarjetas no, que ahí la forma ya dice que se puede pulsar.
 */
.wp-block-post-content a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration: underline;
}

/*
 * Un anillo de foco visible en los dos temas. MDB lo apaga en varios
 * componentes y sin esto navegar con teclado es a ciegas.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--mdb-primary);
	outline-offset: 2px;
	border-radius: var(--mdb-border-radius);
}

/* El salto al contenido solo aparece cuando alguien lo enfoca con el teclado. */
.skip-link.screen-reader-text:focus {
	background-color: var(--mdb-body-bg);
	color: var(--mdb-body-color);
	box-shadow: var(--wp--preset--shadow--nivel-2);
	border-radius: var(--mdb-border-radius);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* ──────────────────────────────────────────── 3 · Estilos de bloque ── */

/*
 * Las variantes registradas en inc/arranque.php se escriben con los tokens de
 * MDB en vez de copiar sus clases: así un cambio de tema (data-mdb-theme) o de
 * versión de MDB las arrastra sin tocar nada de aquí.
 */

/*
 * Botón · contorno
 *
 * El color solo se pone SI EL BLOQUE NO TRAE EL SUYO. Antes se ponía siempre, y
 * eso dejaba el selector de color del bloque sin efecto: se elegía «Secundario»
 * y el botón seguía saliendo del color primario. Con `:not(.has-text-color)` el
 * tema pone el color por defecto y se aparta en cuanto alguien elige otro.
 *
 * Y el de por defecto es el primario AJUSTADO para que se lea, no el primario a
 * secas: un contorno en un color muy claro sobre fondo blanco no se ve. Por eso
 * un botón relleno y uno de contorno pueden no parecer el mismo color: el
 * relleno lleva el color detrás del texto y el de contorno ES el texto.
 */
.wp-block-button.is-style-owari-contorno .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	box-shadow: none;
}

.wp-block-button.is-style-owari-contorno .wp-block-button__link:not(.has-text-color) {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

/* El relleno del hover sigue al color del botón, sea el del tema o el elegido. */
.wp-block-button.is-style-owari-contorno .wp-block-button__link:hover {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	box-shadow: none;
}

/* Botón · plano (sin fondo ni relieve, para acciones secundarias) */
.wp-block-button.is-style-owari-plano .wp-block-button__link {
	background-color: transparent;
	box-shadow: none;
	padding-left: 1rem;
	padding-right: 1rem;
}

.wp-block-button.is-style-owari-plano .wp-block-button__link:not(.has-text-color) {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

.wp-block-button.is-style-owari-plano .wp-block-button__link:hover {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	box-shadow: none;
}

/*
 * Un botón con un color de la paleta elegido a mano.
 *
 * Elegir el fondo es fácil —el panel de color del bloque lo ofrece— pero el
 * TEXTO se quedaba con el que theme.json pone para el botón, que está calculado
 * sobre el primario. Con un fondo amarillo y el texto blanco no se lee, y quien
 * lo eligió no tiene por qué saber que además hay que cambiar el texto.
 *
 * Aquí cada color de la paleta trae el suyo, el que ya calcula el motor de
 * contraste. Solo si nadie ha elegido texto: `:not(.has-text-color)` deja pasar
 * a quien sí quiera decidirlo.
 */
.wp-block-button__link.has-primario-background-color:not(.has-text-color) {
	color: var(--owari-sobre-primary, #fff);
}

.wp-block-button__link.has-secundario-background-color:not(.has-text-color) {
	color: var(--owari-sobre-secondary, #212121);
}

.wp-block-button__link.has-exito-background-color:not(.has-text-color) {
	color: var(--owari-sobre-success, #fff);
}

.wp-block-button__link.has-peligro-background-color:not(.has-text-color) {
	color: var(--owari-sobre-danger, #fff);
}

.wp-block-button__link.has-aviso-background-color:not(.has-text-color) {
	color: var(--owari-sobre-warning, #212121);
}

.wp-block-button__link.has-info-background-color:not(.has-text-color) {
	color: var(--owari-sobre-info, #212121);
}

/* Botón · pastilla */
.wp-block-button.is-style-owari-pastilla .wp-block-button__link {
	border-radius: var(--mdb-border-radius-pill);
}

/* Grupo · tarjeta */
.wp-block-group.is-style-owari-tarjeta {
	background-color: var(--mdb-tertiary-bg);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius-lg);
	padding: var(--wp--preset--spacing--30);
}

/* Grupo · elevado */
.wp-block-group.is-style-owari-elevado {
	background-color: var(--mdb-tertiary-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
	padding: var(--wp--preset--spacing--30);
}

/*
 * Grupo · los fondos de una banda.
 *
 * Una seccion de portada casi nunca es un color plano: lleva una cuadricula muy
 * tenue, un resplandor saliendo de una esquina y a veces un desvanecido por
 * abajo para engancharla con lo que viene despues. Eso no se puede pedir desde
 * el editor —un bloque admite UN fondo, y esto son tres capas— y escribirlo a
 * mano cada vez termina en tres hexadecimales distintos en tres paginas.
 *
 * Los tres se suman: la cuadricula va en el fondo del propio bloque y los otros
 * dos en sus dos pseudoelementos, asi que ninguno pisa a los demas y una banda
 * puede llevar los que quiera.
 *
 * La linea de la cuadricula sale del color del texto y no de un gris escrito: en
 * una banda oscura el texto es claro y la linea sale clara, y en una banda clara
 * al reves. Sin eso habria que tener una version para cada fondo.
 */
.wp-block-group[class*='is-style-owari-fondo-'] {
	position: relative;
	isolation: isolate;
}

.wp-block-group[class*='is-style-owari-fondo-'] > * {
	position: relative;
	z-index: 1;
}

.wp-block-group[class*='is-style-owari-fondo-']::before,
.wp-block-group[class*='is-style-owari-fondo-']::after {
	pointer-events: none;
}

/* Grupo · fondo de cuadricula */
.wp-block-group.is-style-owari-fondo-reticula {
	--owari-reticula-paso: 72px;
	--owari-reticula-linea: color-mix(in srgb, currentColor 7%, transparent);

	background-image:
		repeating-linear-gradient(
			to right,
			var(--owari-reticula-linea) 0 1px,
			transparent 1px var(--owari-reticula-paso)
		),
		repeating-linear-gradient(
			to bottom,
			var(--owari-reticula-linea) 0 1px,
			transparent 1px var(--owari-reticula-paso)
		);
}

/* Grupo · resplandor desde una esquina */
.wp-block-group.is-style-owari-fondo-resplandor::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(
		60% 60% at var(--owari-resplandor-x, 14%) var(--owari-resplandor-y, 100%),
		rgba(var(--mdb-primary-rgb), 0.28) 0%,
		transparent 70%
	);
}

/* Grupo · desvanecido por abajo */
.wp-block-group.is-style-owari-fondo-difuminado::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(
		180deg,
		transparent 55%,
		rgba(var(--mdb-body-bg-rgb), 0.9) 100%
	);
}

/* Imagen · redondeada y con sombra */
.wp-block-image.is-style-owari-redondeada img {
	border-radius: var(--mdb-border-radius-lg);
}

.wp-block-image.is-style-owari-sombra img {
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * Imagen · circular.
 *
 * `aspect-ratio` además del radio: un círculo sobre una foto rectangular sale
 * óvalo. Con la proporción cuadrada y `object-fit: cover` se recorta por el
 * centro, que es lo que hace MDB con su `.rounded-circle` sobre imágenes ya
 * cuadradas y lo que aquí hay que forzar porque las del sitio no lo son.
 */
.wp-block-image.is-style-owari-circular img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Imagen · con marco, el `.img-thumbnail` de MDB. */
.wp-block-image.is-style-owari-marco img {
	padding: 0.25rem;
	background-color: var(--mdb-body-bg);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

/* Imagen · sombra fuerte, el nivel 3. */
.wp-block-image.is-style-owari-sombra-fuerte img {
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-3);
}

/*
 * Imagen · velo al pasar el cursor, la «mask» de MDB.
 *
 * MDB la monta envolviendo la imagen en un `.bg-image` con un `.mask` dentro.
 * Aquí no se puede envolver nada —el marcado lo escribe el bloque—, así que el
 * velo es un pseudoelemento de la figura. Sale igual y no toca el marcado.
 *
 * La figura tiene que crear contexto de apilado y recortar, o el velo se saldría
 * por las esquinas redondeadas.
 */
.wp-block-image.is-style-owari-mascara {
	position: relative;
	overflow: hidden;
	border-radius: var(--mdb-border-radius);
	isolation: isolate;
}

.wp-block-image.is-style-owari-mascara::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(var(--mdb-primary-rgb), 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.wp-block-image.is-style-owari-mascara:hover::after,
.wp-block-image.is-style-owari-mascara:focus-within::after {
	opacity: 1;
}

/*
 * El pie de foto se queda ENCIMA del velo.
 *
 * Sin esto el velo lo taparía —va después en el marcado— y al pasar el cursor
 * desaparecería el texto justo cuando se resalta la imagen.
 */
.wp-block-image.is-style-owari-mascara figcaption {
	position: relative;
	z-index: 1;
}

/*
 * Aviso · los seis colores de MDB.
 *
 * MDB los pinta con un fondo tenue del color y el texto en una versión oscura
 * del mismo, no con el color a pleno: un aviso a todo color compite con el
 * contenido y cansa. Aquí se arma con `color-mix` sobre el token, así que sigue
 * al color que elija el Personalizador y funciona igual en claro y en oscuro.
 */
.wp-block-group[class*="is-style-owari-aviso-"] {
	padding: 1rem 1.25rem;
	border-radius: var(--mdb-border-radius);
	border-inline-start: 4px solid;
}

.wp-block-group[class*="is-style-owari-aviso-"] > *:last-child {
	margin-bottom: 0;
}

.wp-block-group.is-style-owari-aviso-primario {
	background-color: color-mix(in srgb, var(--mdb-primary) 12%, transparent);
	border-color: var(--mdb-primary);
}

.wp-block-group.is-style-owari-aviso-exito {
	background-color: color-mix(in srgb, var(--mdb-success) 12%, transparent);
	border-color: var(--mdb-success);
}

.wp-block-group.is-style-owari-aviso-peligro {
	background-color: color-mix(in srgb, var(--mdb-danger) 12%, transparent);
	border-color: var(--mdb-danger);
}

.wp-block-group.is-style-owari-aviso-aviso {
	background-color: color-mix(in srgb, var(--mdb-warning) 14%, transparent);
	border-color: var(--mdb-warning);
}

.wp-block-group.is-style-owari-aviso-info {
	background-color: color-mix(in srgb, var(--mdb-info) 14%, transparent);
	border-color: var(--mdb-info);
}

.wp-block-group.is-style-owari-aviso-secundario {
	background-color: color-mix(in srgb, var(--mdb-secondary) 14%, transparent);
	border-color: var(--mdb-secondary);
}

/* Tabla · con borde */
.wp-block-table.is-style-owari-borde table,
.wp-block-table.is-style-owari-borde td,
.wp-block-table.is-style-owari-borde th {
	border: 1px solid var(--mdb-border-color);
}

/*
 * Tabla · cabecera de color.
 *
 * El texto lo decide el contraste que ya calcula el Personalizador, no un #fff
 * fijo: con un primario claro, un blanco fijo dejaría la cabecera ilegible.
 */
.wp-block-table.is-style-owari-cabecera thead th {
	background-color: var(--mdb-primary);
	color: var(--owari-sobre-primary, #fff);
	border-color: var(--mdb-primary);
}

/*
 * Lista · grupo de lista.
 *
 * Cada elemento es una fila con su separador, como el `.list-group` de MDB. Los
 * bordes se solapan para que entre dos filas quede una sola línea y no dos.
 */
.wp-block-list.is-style-owari-grupo-lista {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
	border-radius: var(--mdb-border-radius);
	overflow: hidden;
	border: 1px solid var(--mdb-border-color);
}

.wp-block-list.is-style-owari-grupo-lista li {
	padding: 0.75rem 1.25rem;
	background-color: var(--mdb-body-bg);
}

.wp-block-list.is-style-owari-grupo-lista li + li {
	border-top: 1px solid var(--mdb-border-color);
}

/*
 * Cita · la de MDB: una barra de color a la izquierda y nada más.
 *
 * El borde va con `border-inline-start` y no con `border-left` para que en un
 * idioma escrito de derecha a izquierda cambie de lado solo.
 */
.wp-block-quote.is-style-owari-cita {
	border: 0;
	border-inline-start: 4px solid var(--mdb-primary);
	padding: 0.25rem 0 0.25rem 1.25rem;
	margin-inline-start: 0;
	font-style: normal;
}

.wp-block-quote.is-style-owari-cita cite {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	color: var(--mdb-secondary-color);
	font-style: normal;
}

/* Tabla · rayada */
.wp-block-table.is-style-owari-rayada tbody tr:nth-child(odd) > * {
	background-color: rgba(var(--mdb-emphasis-color-rgb), 0.04);
}

/* ───────────────────────── 4 · Bloques que necesitan ayuda ── */

/*
 * Una palabra de un titular en otro color no lleva subrayador amarillo.
 *
 * El editor escribe ese color con un <mark>, que es el elemento de resaltar, y
 * le apaga el fondo con un estilo en linea. Ese estilo no siempre llega: al
 * guardar, el filtro de estilos de WordPress se come el `background-color`
 * transparente y queda el amarillo que trae el navegador de fabrica. Se apaga
 * aqui, que ademas vale para todas las paginas y no solo para las que se
 * guardaron con suerte.
 */
mark.has-inline-color {
	background-color: transparent;
}

/*
 * Las tablas del editor no heredan nada de MDB porque no llevan .table. Se les
 * da el mínimo para que se lean: bordes del tema y aire en las celdas.
 */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--mdb-border-color);
	padding: 0.6rem 0.75rem;
}

.wp-block-table th {
	font-weight: 500;
	text-align: start;
}

/* Campos de formulario (búsqueda, comentarios) alineados con los de MDB. */
.wp-block-search__input,
.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea {
	background-color: var(--mdb-body-bg);
	color: var(--mdb-body-color);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	padding: 0.55rem 0.75rem;
	transition: border-color var(--wp--custom--transicion), box-shadow var(--wp--custom--transicion);
}

.wp-block-search__input:focus,
.wp-block-post-comments-form input:not([type="submit"]):focus,
.wp-block-post-comments-form textarea:focus {
	border-color: var(--mdb-primary);
	box-shadow: 0 0 0 1px var(--mdb-primary);
	outline: none;
}

/* La navegación toma el color del texto del tema, no el azul de enlace. */
.wp-block-navigation {
	--wp--preset--color--texto: var(--mdb-body-color);
}

.wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--mdb-body-color);
	text-decoration: none;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

/* El submenú desplegable con la superficie y el relieve del tema. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--mdb-tertiary-bg);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/* Separador visible en claro y en oscuro sin escribir un color. */
.wp-block-separator:not(.is-style-dots) {
	border: none;
	border-top: 1px solid var(--mdb-border-color);
	opacity: 1;
}

/* La imagen destacada y las de galería redondean como el resto del tema. */
.wp-block-post-featured-image img {
	border-radius: var(--mdb-border-radius-lg);
}

/* ────────────────────── 5 · Regiones que se refrescan solas ── */

/*
 * Una región marcada con data-owari-region cambia de contenido sin recargar la
 * página. El cambio se anuncia con una transición mínima para que se note que
 * algo se movió y no parezca un fallo de pintado.
 *
 * Quien prefiera no ver movimiento no lo ve: el bloque de más abajo lo apaga.
 */
[data-owari-region] {
	transition: opacity var(--wp--custom--transicion);
}

[data-owari-region].owari-refrescando {
	opacity: 0.55;
}

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

	[data-owari-region] {
		transition: none;
	}
}

/* ─────────────────── 6 · Campos convertidos a MDB ── */

/*
 * owari-formularios.js envuelve los campos en un <span class="form-outline">
 * —y no en un <div>— porque WooCommerce mete la contraseña dentro de un <span>
 * y un <div> ahí sería anidamiento inválido. MDB busca la clase, no la etiqueta,
 * así que basta con devolverle el comportamiento de bloque.
 */
span.form-outline {
	display: block;
}

/*
 * La etiqueta flotante se recorta sobre el borde del campo, y para eso MDB pinta
 * la muesca con el color de fondo. Si el fondo lo hereda de un contenedor
 * distinto —una tarjeta, el pie— se ve una franja del color equivocado cruzando
 * el trazo.
 */

/*
 * El color de un campo sale de lo que tiene alrededor, no de la raíz.
 *
 * MDB resuelve el borde, la etiqueta y el texto de sus campos con variables que
 * declara UNA vez, en `:root`, y con los grises del modo claro. Dentro de una
 * banda oscura —una sección a contraluz, el pie, una portada— eso deja el borde
 * casi invisible, la etiqueta menos, y lo que se escriba en gris oscuro sobre
 * marrón. No es que el color esté mal elegido: es que se eligió sin saber sobre
 * qué iba a caer.
 *
 * `currentColor` lo hereda de la sección, así que el mismo campo vale sobre
 * claro y sobre oscuro sin que nadie tenga que decir cuál es. Y sigue a la
 * paleta, que es lo que se espera al cambiarla.
 */
.form-outline .form-control ~ .form-notch div {
	border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.form-outline .form-control:focus ~ .form-notch div {
	border-color: var(--mdb-primary);
}

.form-outline .form-label,
.form-outline .form-control ~ .form-label {
	color: color-mix(in srgb, currentColor 68%, transparent);
}

.form-outline .form-control,
.wp-block-post-comments-form .form-outline .form-control {
	color: inherit;
}

.form-outline .form-control::placeholder {
	color: color-mix(in srgb, currentColor 58%, transparent);
	opacity: 1;
}

/* ─────────── 7 · Opciones largas en un desplegable de MDB ── */

/*
 * MDB corta las opciones que no caben: les pone `white-space: nowrap` con
 * puntos suspensivos y una altura fija de 38 px. Con etiquetas largas —«Ordenar
 * por puntuación media», «Ordenar por precio: bajo a alto»— el texto se sale y
 * se lee a medias, que es justo lo que no puede pasar en una lista de la que hay
 * que elegir.
 *
 * Se arregla aquí y no en assets/vendor/mdb: aquello es un build, y cualquier
 * cambio se pierde en la próxima actualización de MDB.
 *
 * La altura lleva `!important` porque MDB la escribe como atributo `style` en
 * cada opción —la calcula desde su ajuste `optionHeight`— y a un estilo en línea
 * no se le gana de otra forma. El `min-height` conserva el ritmo de siempre para
 * las que sí caben en una línea, que son casi todas.
 *
 * El contenedor no se toca: MDB le pone su `max-height` y sigue haciendo scroll.
 */
.select-option {
	height: auto !important;
	min-height: 38px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	padding-block: 0.35rem;
}

.select-option .select-option-text {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.35;

	/*
	 * La opción es una fila flex, y un hijo flex se niega por defecto a encoger
	 * por debajo de su contenido (`min-width: auto`). Sin esta línea el texto
	 * sigue saliéndose por mucho que se le permita partir.
	 */
	min-width: 0;
	flex: 1 1 auto;
}

/* ─────────────── 8 · Lo que decide el Personalizador ── */

/*
 * Casi todo lo que se elige en el Personalizador viaja como token —un color, un
 * radio, un relleno— y no necesita ni una regla aquí. Lo que sí la necesita es
 * lo que no cabe en una variable.
 */

/*
 * Densidad: MDB fija el relleno de sus campos en `.form-outline .form-control`.
 * Aquí se le pasa el token para que el mando de densidad los mueva también.
 */
.form-outline .form-control {
	padding-top: var(--owari-campo-relleno-y, 0.32rem);
	padding-bottom: var(--owari-campo-relleno-y, 0.32rem);
}

/*
 * Etiquetas en modo «encima del campo».
 *
 * Que floten o no es un COMPORTAMIENTO, no un valor: cambia dónde se coloca la
 * etiqueta. Por eso va con una clase en el <body> y no con un token.
 *
 * Los campos de texto ya no se convierten —eso lo decide el JavaScript, que
 * recibe el modo—, así que aquí solo queda lo que pinta React en el pago: su
 * etiqueta flota por su cuenta y hay que bajarla al flujo.
 */
/* Los campos de los bloques de WooCommerce se apagan en su propia hoja: sus
   reglas de etiqueta flotada estan alli y hay que ganarles por orden. */

/*
 * Los desplegables también, que si no se quedan flotando solos.
 *
 * MDB monta su Select con la etiqueta flotada por dentro y no acepta otra cosa:
 * es su componente. Pero la etiqueta es un nodo normal, así que se saca del
 * trazo y se sube encima del campo.
 *
 * La muesca se cambia por un borde de toda la vida. Existe solo para abrirle
 * hueco a una etiqueta flotante —MDB le calcula el ancho y se lo escribe en
 * línea, 77.6 px para «País/Región»—, así que sin etiqueta dentro sería un
 * agujero en el trazo sin nada que lo tape.
 *
 * En este modo los campos de texto ni siquiera se convierten, así que el único
 * .form-outline que queda en la página es el que monta el Select. Por eso basta
 * con acotar a .select-wrapper.
 */
body.owari-etiquetas-normal .select-wrapper .form-outline {
	margin-top: 1.4rem;
}

body.owari-etiquetas-normal .select-wrapper .form-outline .select-label {
	top: -1.4rem !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	background: none !important;
	font-size: 0.875rem;
	color: var(--mdb-secondary-color);
}

body.owari-etiquetas-normal .select-wrapper .form-outline .form-notch {
	display: none;
}

/* La clase repetida no es adorno: `body.owari-etiquetas-normal` es UN
   elemento y UNA clase, asi que sin repetirla esto empata en (0,4,1) con
   `body .form-outline.form-outline .form-control.form-control` de la hoja de
   WooCommerce —que pone `border: 0` porque el borde lo dibuja la muesca— y
   pierde por orden de carga. Aqui la muesca esta oculta, asi que el borde
   tiene que volver. */
body.owari-etiquetas-normal .select-wrapper.select-wrapper .form-outline .form-control {
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

body.owari-etiquetas-normal .select-wrapper.select-wrapper .form-outline .form-control:focus {
	border-color: var(--mdb-primary);
	box-shadow: inset 0 0 0 1px var(--mdb-primary);
}



/*
 * El radio de la muesca. MDB lo escribe a mano —`border-radius: .25rem 0 0 .25rem`
 * en .form-notch-leading— y no lo expone como variable, así que el mando de
 * esquinas no llegaba hasta aquí: el campo se quedaba con las esquinas de
 * fábrica mientras las tarjetas de al lado se redondeaban.
 */
/* La cadena completa, que es la que usa MDB: .form-outline .form-control ~
   .form-notch .form-notch-leading, cuatro clases. Con el selector corto (0,2,0)
   no se le gana. */
body .form-outline .form-control ~ .form-notch .form-notch-leading {
	border-radius: var(--mdb-border-radius) 0 0 var(--mdb-border-radius);
}

body .form-outline .form-control ~ .form-notch .form-notch-trailing {
	border-radius: 0 var(--mdb-border-radius) var(--mdb-border-radius) 0;
}

/* ───────────── 9 · Un radio grande no cabe en la muesca ── */

/*
 * El borde de un campo de MDB no lo dibuja el input: lo dibujan las tres piezas
 * de la muesca, y la de la izquierda mide 9 px. MDB se lo escribe en línea desde
 * JavaScript: `notchLeading.style.width = labelMarginLeft + 9`.
 *
 * Con el radio de fábrica —4 px— sobra. Pero al pedir «muy redondeado» el radio
 * son 16 px, y un radio de 16 no cabe en una caja de 9: el navegador lo escala
 * hasta que quepa y la esquina sale casi recta. De ahí que el desplegable no
 * redondeara por la izquierda mientras los campos de texto sí.
 *
 * No basta con ensanchar la pieza: el hueco de la etiqueta empieza donde acaba,
 * así que si crece y la etiqueta no, la etiqueta se monta sobre el trazo. Tienen
 * que moverse las tres cosas a la vez —pieza, etiqueta y relleno del campo—, y
 * por eso el desplazamiento es un token derivado y no un número suelto.
 *
 * Los 3 px de más son la holgura que deja MDB entre el final de la pieza y el
 * principio de la etiqueta.
 */
:root {
	--owari-campo-relleno-x: max(0.75rem, calc(var(--mdb-border-radius) + 3px));
}

.form-outline .form-notch-leading {
	min-width: var(--mdb-border-radius);
}

.form-outline .form-control ~ .form-label {
	left: var(--owari-campo-relleno-x);
}

/* ────────────────────────────── 10 · El paginador ── */

/*
 * El paginador de WordPress, con la paginación de MDB.
 *
 * No tenía estilo ninguno: salía como texto suelto con guiones, dentro y fuera
 * del editor. MDB sí trae paginación —`.page-link`, `.page-item`— pero WordPress
 * no le pone esas clases a `core/query-pagination`, así que se leen sus TOKENS
 * en vez de copiar sus valores: si MDB cambia, o si el Personalizador mueve el
 * radio, esto se mueve con ellos.
 *
 * Las piezas van SEPARADAS y no soldadas en una tira. Una tira obliga a redondear
 * solo los extremos, y entonces la forma circular es imposible: un círculo no
 * tiene extremos. Separadas, el mismo CSS sirve para cuadrada, redondeada y
 * redonda, y solo cambia el radio.
 */
.wp-block-query-pagination,
.wp-block-comments-pagination {
	align-items: center;
}

.wp-block-query-pagination-numbers,
.wp-block-comments-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-comments-pagination .page-numbers,
.wp-block-comments-pagination-previous,
.wp-block-comments-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--mdb-pagination-padding-y, 0.375rem) var(--mdb-pagination-padding-x, 0.75rem);
	font-size: var(--mdb-pagination-font-size, 1rem);
	color: var(--mdb-pagination-color, var(--mdb-body-color));
	background-color: var(--mdb-pagination-bg, var(--mdb-body-bg));
	border: var(--mdb-pagination-border-width, 1px) solid var(--mdb-pagination-border-color, var(--mdb-border-color));
	border-radius: var(--owari-paginacion-radio, var(--mdb-border-radius));
	text-decoration: none;
	transition: all 0.3s linear;
}

/*
 * Los números son cuadrados; anterior y siguiente no.
 *
 * Sin `aspect-ratio` un «1» sale estrecho y un «10» ancho, y con el radio al 50%
 * saldrían óvalos de distinto tamaño en vez de círculos. Anterior y siguiente
 * llevan texto y tienen que poder crecer.
 */
.wp-block-query-pagination .page-numbers,
.wp-block-comments-pagination .page-numbers {
	/* Alto Y ancho mínimos, iguales, en vez de `aspect-ratio`: el alto lo fija el
	   relleno vertical más la línea de texto, y una proporción no puede con un
	   `min-width` ya puesto. Medido, salían 38×40 y el círculo era un óvalo. */
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.35rem;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-comments-pagination .page-numbers:hover {
	color: var(--mdb-pagination-hover-color, var(--mdb-body-color));
	background-color: var(--mdb-pagination-hover-bg, var(--mdb-tertiary-bg));
	border-color: var(--mdb-pagination-hover-border-color, var(--mdb-border-color));
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-comments-pagination .page-numbers.current {
	color: var(--mdb-pagination-active-color, var(--owari-sobre-primary, #fff));
	background-color: var(--mdb-pagination-active-bg, var(--mdb-primary));
	border-color: var(--mdb-pagination-active-border-color, var(--mdb-primary));
	font-weight: var(--mdb-pagination-active-font-weight, 500);
}

/* Los puntos suspensivos no son un botón: no se pintan como uno. */
.wp-block-query-pagination .page-numbers.dots,
.wp-block-comments-pagination .page-numbers.dots {
	background-color: transparent;
	border-color: transparent;
}

/*
 * Lo que no lleva a ninguna parte no se pinta como si llevara.
 *
 * La página actual va rellena de primario, que la hace la pieza más llamativa
 * de la fila —y es la única que NO es un enlace: WordPress la escribe como
 * <span>—. Pulsarla no hace nada, y estando en la primera página eso se ve
 * igual que «me ha devuelto a la 1».
 *
 * El cursor lo dice antes de pulsar, y las flechas de anterior y siguiente
 * dejan claro por dónde se avanza.
 */
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.dots,
.wp-block-comments-pagination .page-numbers.current,
.wp-block-comments-pagination .page-numbers.dots {
	cursor: default;
}

.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after,
.owari-galeria__paginas .prev::before,
.owari-galeria__paginas .next::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.7em;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* fa-chevron-left */
.wp-block-query-pagination-previous::before,
.owari-galeria__paginas .prev::before {
	content: "\f053";
	margin-inline-end: 0.45rem;
}

/* fa-chevron-right */
.wp-block-query-pagination-next::after,
.owari-galeria__paginas .next::after {
	content: "\f054";
	margin-inline-start: 0.45rem;
}

/*
 * Un carrusel cuya diapositiva activa está vacía no deja las flechas flotando.
 *
 * Los mandos van con posición absoluta sobre el carrusel. Si la diapositiva que
 * toca no tiene nada dentro, el carrusel se queda con altura cero —no ocupa, no
 * se ve— pero las flechas y los puntos siguen dibujados, y acaban encima de lo
 * que haya debajo: se ven mandos sueltos que no gobiernan nada visible y que
 * parecen de otro bloque.
 *
 * Con la diapositiva vacía no hay nada que pasar, así que tampoco hay nada que
 * mandar. En cuanto se le mete algo dentro, vuelven solos.
 */
.carousel:not(:has(.carousel-item.active *)) .carousel-control-prev,
.carousel:not(:has(.carousel-item.active *)) .carousel-control-next,
.carousel:not(:has(.carousel-item.active *)) .carousel-indicators {
	display: none;
}

/*
 * La portada va pegada al menú.
 *
 * La plantilla separa el contenido del menú con un margen arriba: bien para una
 * página normal, ridículo para una portada, que se queda con una franja de
 * blanco entre el menú y la foto. Con portada, ese margen sobra.
 *
 * Lleva `!important` a regañadientes, y por un motivo concreto: el margen lo
 * escribe la plantilla en el atributo `style` del propio `<main>`, y contra un
 * estilo en línea no hay clase que gane. La alternativa —sacar el margen de la
 * plantilla y traerlo aquí— cambiaría lo que se ve en el editor del sitio para
 * todas las páginas, tengan portada o no.
 */
.owari-con-portada main.wp-block-group {
	margin-top: 0 !important;
	padding-top: 0;
}

/*
 * Y la primera cosa de dentro tampoco se despega.
 *
 * El reparto en flujo da margen superior a todos los hijos menos al primero,
 * pero el primero del contenido no es el primero de `<main>`: el título de la
 * página iba delante, y aunque ahora se quita, WordPress cuenta los bloques
 * antes de que PHP los borre.
 */
.owari-con-portada main.wp-block-group > .wp-block-post-content > .owari-portada:first-child {
	margin-top: 0;
}

/*
 * Dentro del carrusel no hay huecos entre piezas.
 *
 * Los mandos —flechas y puntos— van con posición absoluta y se escriben antes
 * que las diapositivas, así que la tira nunca es el primer hijo del grupo. El
 * reparto en flujo solo exime del margen al primero, de modo que la tira recibe
 * el que separa a los hermanos… y como el carrusel no tiene ni borde ni relleno
 * arriba, ese margen se cuela hacia afuera por colapso y acaba separando el
 * carrusel entero de lo que tenga encima. Es decir: la franja entre el menú y la
 * portada no la ponía el menú ni la página, la ponía una diapositiva.
 *
 * Ninguna pieza del carrusel se separa de otra: se turnan en el mismo sitio.
 */
.wp-block-group.carousel > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ─────────────────────────────── El listado de entradas ── */

/*
 * Los estilos de imagen valen igual para la foto destacada.
 *
 * Es una imagen: que se pueda redondear o darle sombra no debería depender de
 * si la puso una persona o el bucle. Solo cambia el nombre del bloque, así que
 * las reglas se comparten en vez de escribirse dos veces.
 */
.wp-block-post-featured-image.is-style-owari-redondeada img {
	border-radius: var(--mdb-border-radius-lg);
}

.wp-block-post-featured-image.is-style-owari-sombra img {
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.wp-block-post-featured-image.is-style-owari-circular img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

.wp-block-post-featured-image.is-style-owari-marco img {
	padding: 0.25rem;
	background-color: var(--mdb-body-bg);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

.wp-block-post-featured-image.is-style-owari-sombra-fuerte img {
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-3);
}

.wp-block-post-featured-image.is-style-owari-mascara {
	position: relative;
	overflow: hidden;
	border-radius: var(--mdb-border-radius);
	isolation: isolate;
}

.wp-block-post-featured-image.is-style-owari-mascara::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(var(--mdb-primary-rgb), 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.wp-block-post-featured-image.is-style-owari-mascara:hover::after,
.wp-block-post-featured-image.is-style-owari-mascara:focus-within::after {
	opacity: 1;
}

/*
 * Los diseños del listado: la foto arriba, a un lado, al otro, o alternando.
 *
 * Cada entrada son dos piezas —la foto y el texto—, así que colocarlas es
 * cambiar la dirección del reparto y cuánto ocupa cada una. Nada de posiciones
 * absolutas ni de contar hermanos: si alguien añade un bloque al texto, sigue
 * cayendo donde debe.
 *
 * El estilo va en el bloque que envuelve el bucle y no en cada entrada, porque
 * una lista donde cada fila se coloca a su manera no es una lista.
 */
.wp-block-post-template.is-style-owari-lista-foto-izquierda > li > .owari-entrada,
.wp-block-post-template.is-style-owari-lista-foto-derecha > li > .owari-entrada {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-post-template.is-style-owari-lista-foto-izquierda > li > .owari-entrada > .wp-block-post-featured-image,
.wp-block-post-template.is-style-owari-lista-foto-derecha > li > .owari-entrada > .wp-block-post-featured-image {
	flex: 0 0 38%;
	margin-bottom: 0;
}

.wp-block-post-template.is-style-owari-lista-foto-izquierda > li > .owari-entrada > .owari-entrada__texto,
.wp-block-post-template.is-style-owari-lista-foto-derecha > li > .owari-entrada > .owari-entrada__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-post-template.is-style-owari-lista-foto-derecha > li > .owari-entrada {
	flex-direction: row-reverse;
}

/* Alternando: las pares al revés que las impares. */
.wp-block-post-template.is-style-owari-lista-alterna > li > .owari-entrada {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-post-template.is-style-owari-lista-alterna > li > .owari-entrada > .wp-block-post-featured-image {
	flex: 0 0 38%;
	margin-bottom: 0;
}

.wp-block-post-template.is-style-owari-lista-alterna > li > .owari-entrada > .owari-entrada__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-post-template.is-style-owari-lista-alterna > li:nth-child(even) > .owari-entrada {
	flex-direction: row-reverse;
}

/*
 * En móvil, siempre apilado.
 *
 * Una foto al 38 % de una pantalla estrecha es un sello, y el texto de al lado
 * se queda en dos palabras por línea. Debajo de 782 px —el corte que usa
 * WordPress para sus propias columnas— se deshace el reparto.
 */
@media (max-width: 781px) {
	.wp-block-post-template[class*="is-style-owari-lista-"] > li > .owari-entrada {
		display: block;
	}

	.wp-block-post-template[class*="is-style-owari-lista-"] > li > .owari-entrada > .wp-block-post-featured-image {
		margin-bottom: var(--wp--preset--spacing--20);
	}
}

/* ───────────────────── El listado, en tarjetas ── */

/*
 * Las cuatro variantes de tarjeta comparten el mismo cuerpo: superficie propia,
 * esquinas redondeadas, relieve y la foto pegada al borde de arriba.
 *
 * `height: 100%` porque en rejilla las entradas no miden lo mismo —un titular de
 * dos líneas y otro de una— y sin ello las tarjetas de una fila quedan a
 * distinta altura, cada una acabando donde le apetece.
 *
 * La foto pierde su propio redondeo: ya lo pone la tarjeta, y dos radios
 * distintos en el mismo canto se ven como un error.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] > li > .owari-entrada {
	height: 100%;
	overflow: hidden;
	background-color: var(--mdb-body-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * La foto, pegada al borde de la tarjeta.
 *
 * Con `!important` y no por gusto: el bloque de la foto lleva su separación
 * escrita en el atributo `style` —hace falta cuando el texto va debajo, sin
 * tarjeta—, y contra un estilo en línea no hay clase que gane. Sin esto queda
 * una franja blanca de 16 px entre la foto y el texto que delata el truco.
 *
 * `display: block` en la imagen por lo de siempre: una imagen en línea deja
 * debajo el hueco del renglón.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] > li > .owari-entrada > .wp-block-post-featured-image {
	margin-bottom: 0 !important;
}

.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] > li > .owari-entrada > .wp-block-post-featured-image img {
	display: block;
}

.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] > li > .owari-entrada > .wp-block-post-featured-image img {
	border-radius: 0;
	box-shadow: none;
}

.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] > li > .owari-entrada > .owari-entrada__texto {
	padding: var(--wp--preset--spacing--40);
}

/* Centrada: el texto y lo que venga detrás, botón incluido. */
.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .owari-entrada__texto {
	text-align: center;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .owari-entrada__texto .wp-block-group {
	justify-content: center;
}

/*
 * Con onda: la foto termina en una curva, no en una línea recta.
 *
 * MDB lo hace con un SVG encima de la imagen. Aquí es un pseudoelemento con el
 * color de la tarjeta y las esquinas de arriba redondeadas al 100 %: la misma
 * curva, sin traer un archivo ni tocar el marcado del bloque. Se sale por los
 * lados a propósito —el óvalo tiene que ser más ancho que la tarjeta— para que
 * la curva sea suave y no un semicírculo.
 */
.wp-block-post-template.is-style-owari-lista-tarjeta-onda > li > .owari-entrada > .wp-block-post-featured-image {
	position: relative;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-onda > li > .owari-entrada > .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -1px;
	left: -12%;
	height: 2.25rem;
	background-color: var(--mdb-body-bg);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}

/*
 * Ancha: la foto ocupa la mitad izquierda, a sangre, y el texto la otra.
 *
 * Una por fila, para leerse de un vistazo. La foto se estira a lo alto de la
 * tarjeta —`object-fit: cover` recorta por el centro— porque si conservara su
 * proporción dejaría un hueco blanco debajo cuando el texto es más largo.
 */
.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada {
	display: flex;
	align-items: stretch;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada > .wp-block-post-featured-image {
	flex: 0 0 42%;
	align-self: stretch;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada > .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada > .owari-entrada__texto {
	flex: 1 1 auto;
	min-width: 0;
	align-self: center;
	padding: var(--wp--preset--spacing--50);
}

/* En móvil, la ancha también se apila: media tarjeta no es media pantalla. */
@media (max-width: 781px) {
	.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada {
		display: block;
	}

	.wp-block-post-template.is-style-owari-lista-tarjeta-ancha > li > .owari-entrada > .owari-entrada__texto {
		padding: var(--wp--preset--spacing--40);
	}
}

/*
 * Las tarjetas van una al lado de otra.
 *
 * Un listado de tarjetas a una por fila, cada una a todo el ancho, no es lo que
 * nadie llama tarjetas: son bandas. Así que en cuanto se elige un modelo de
 * tarjeta, la lista pasa a rejilla y caben las que quepan.
 *
 * `auto-fill` con un mínimo y no un número fijo: la rejilla se ajusta sola al
 * ancho que haya, sin que nadie tenga que decidir nada. Y quien quiera decidirlo
 * lo dice en el propio bloque —Ajustes → Reparto → Rejilla → Columnas—: eso pone
 * `is-layout-grid`, y entonces esta regla se aparta y manda lo que se eligió.
 *
 * La ancha se queda a una por fila: la foto ocupa media tarjeta, y media tarjeta
 * dentro de una columna estrecha es un sello.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"]:not(.is-layout-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.wp-block-post-template.is-style-owari-lista-tarjeta-ancha:not(.is-layout-grid) {
	grid-template-columns: 1fr;
}

/*
 * Y sin el margen que separa a los hermanos de una pila.
 *
 * La lista sigue marcada como reparto en flujo aunque aqui se pinte en
 * rejilla, asi que WordPress le da margen superior a todas menos a la
 * primera. En una columna eso separa; en una fila hunde a la segunda y a la
 * tercera media pulgada por debajo de la primera. La separacion ya la pone el
 * hueco de la rejilla.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"]:not(.is-layout-grid) > li {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * La centrada lleva la foto levantada, dentro de la tarjeta y no pegada al
 * borde: es la de MDB con la imagen «flotando», con su propio redondeo y su
 * propia sombra, y aire alrededor.
 */
.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .wp-block-post-featured-image {
	padding: var(--wp--preset--spacing--20);
}

.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .wp-block-post-featured-image img {
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .owari-entrada__texto {
	padding-top: var(--wp--preset--spacing--20);
}

/*
 * Y el «Seguir leyendo» del extracto, como botón.
 *
 * En una tarjeta el enlace suelto se pierde entre el texto; lo que se espera es
 * algo que se pueda pulsar y se vea. Se viste con los tokens del tema, así que
 * sigue al color primario, al radio y al relieve que se elijan.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0.55rem 1.4rem;
	color: var(--owari-primario-texto-contraste, #fff);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--mdb-primary);
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-1);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] .wp-block-post-excerpt__more-link:hover,
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] .wp-block-post-excerpt__more-link:focus-visible {
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/* En la centrada el botón es de pastilla, como en el modelo de MDB. */
.wp-block-post-template.is-style-owari-lista-tarjeta-centrada .wp-block-post-excerpt__more-link {
	border-radius: 10rem;
}

/*
 * El titular, a la medida de la tarjeta.
 *
 * En una columna estrecha, 1,75 rem hace que una palabra como «MIENTRAS» sea
 * más ancha que la tarjeta, y el navegador la parte por donde puede: «MIENT /
 * RAS». Dentro de una tarjeta el titular baja a 1,25 rem, que es donde las
 * palabras normales caben enteras.
 *
 * Con `!important` porque el tamaño va escrito en el atributo `style` del propio
 * encabezado —la composición lo pone ahí para el listado a todo lo ancho— y
 * contra un estilo en línea no hay clase que gane.
 */
.wp-block-post-template[class*="is-style-owari-lista-tarjeta"] .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medio) !important;
	line-height: 1.3;
	overflow-wrap: normal;
	hyphens: none;
}

/*
 * La foto de la tarjeta centrada sale por arriba del recuadro.
 *
 * Es lo que hace el modelo de MDB: la imagen se levanta y asoma por encima del
 * canto superior, de modo que la tarjeta parece sostenerla. Para eso el recuadro
 * no puede recortar —`overflow: visible`— y la foto sube con margen negativo.
 */
.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada {
	/*
	 * En columna flexible, no en flujo: los margenes verticales de un hijo en
	 * flujo se COLAPSAN hacia afuera cuando el padre no tiene borde ni relleno
	 * arriba, asi que el margen negativo movia la tarjeta entera hacia arriba
	 * en vez de sacar la foto. En reparto flexible no hay colapso.
	 */
	display: flex;
	flex-direction: column;
	overflow: visible;
	margin-top: 2rem;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-centrada > li > .owari-entrada > .wp-block-post-featured-image {
	/* El relleno de la figura se come parte del tiron: 2rem arriba menos 1rem
	   de relleno dejan 1rem de foto asomando, que es lo que se ve en el modelo. */
	margin-top: -2rem !important;
}

/*
 * La onda es una ONDA, no un arco.
 *
 * El primer intento era medio óvalo: el blanco subía en el centro y bajaba por
 * los lados, todo simétrico. En el modelo de MDB el borde hace una ese —baja por
 * un lado y sube por el otro—, que es lo que le da el aire de ola.
 *
 * Se recorta la propia imagen con una máscara SVG en vez de tapar con un
 * pseudoelemento del color de la tarjeta: así la onda funciona sobre cualquier
 * fondo, no solo sobre el blanco de la tarjeta.
 */
.wp-block-post-template.is-style-owari-lista-tarjeta-onda > li > .owari-entrada > .wp-block-post-featured-image::after {
	content: none;
}

.wp-block-post-template.is-style-owari-lista-tarjeta-onda > li > .owari-entrada > .wp-block-post-featured-image img {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 H100 V78 C72,102 66,72 38,86 C20,95 12,88 0,92 Z" fill="black"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 H100 V78 C72,102 66,72 38,86 C20,95 12,88 0,92 Z" fill="black"/></svg>');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ─────────────────────────────────────── El lateral ── */

/*
 * El lateral del blog: buscador, entradas recientes, categorías y archivo.
 *
 * Se pega arriba al bajar, pero solo donde hay sitio: en una pantalla corta o
 * en móvil el lateral es más alto que la ventana y `sticky` no sirve de nada
 * —se queda quieto igual—, así que se activa a partir del ancho en el que deja
 * de ir debajo del contenido.
 */
@media (min-width: 782px) {
	.owari-lateral {
		position: sticky;
		top: var(--owari-desplazamiento, 1.5rem);
	}
}

/*
 * Las listas del lateral, sin la viñeta ni la sangría de una lista de texto.
 *
 * Son navegación, no prosa: una columna de enlaces con su cuenta al lado. Con
 * la viñeta parecen una enumeración dentro de un artículo.
 */
.owari-lateral .wp-block-categories,
.owari-lateral .wp-block-archives,
.owari-lateral .wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
}

.owari-lateral .wp-block-categories li,
.owari-lateral .wp-block-archives li,
.owari-lateral .wp-block-latest-posts li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-lateral .wp-block-categories li:last-child,
.owari-lateral .wp-block-archives li:last-child,
.owari-lateral .wp-block-latest-posts li:last-child {
	border-bottom: 0;
}

.owari-lateral .wp-block-latest-posts__post-date {
	display: block;
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* La cuenta de entradas, en voz baja: acompaña al nombre, no compite con él. */
.owari-lateral .wp-block-categories li .count,
.owari-lateral .wp-block-archives li .count {
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno);
}