/*
Theme Name: Vamos Pa' Japón
Theme URI: https://vamospajapon.com
Author: Vamos Pa' Japón
Description: Block theme para el blog de viajes "Vamos Pa' Japón". Limpio, moderno, legible y pensado primero para el celular.
Version: 1.12.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vamospajapon
Domain Path: /languages
*/

/* ==========================================================================
   ¿Por qué hay tan poco CSS aquí?
   --------------------------------------------------------------------------
   En un block theme casi todo el diseño (colores, fuentes, tamaños,
   espaciados, botones…) se define en theme.json. Aquí solo ponemos lo que
   theme.json NO puede expresar: tarjetas, cajas de patrones, el índice, etc.

   Las variables tipo var(--wp--preset--color--indigo) las crea WordPress
   automáticamente a partir de la paleta de theme.json. Así, si cambias un
   color en theme.json, se actualiza también aquí.
   ========================================================================== */


/* ---------- 1. Básicos y accesibilidad ---------- */

/* Desplazamiento suave al pulsar enlaces del índice o "Ver artículos"… */
html {
	scroll-behavior: smooth;
}

/* …excepto si la persona pidió en su sistema "reducir movimiento". */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Contorno visible al navegar con el teclado (tecla Tab). */
:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--indigo);
	outline-offset: 3px;
}

/* Texto oculto a la vista pero leído por lectores de pantalla. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Las imágenes nunca se salen de su contenedor (clave en el celular). */
img {
	max-width: 100%;
	height: auto;
}


/* ---------- 2. Cabecera y pie ---------- */

.vpj-cabecera {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* Logo con nombre: un solo enlace con el sello y el nombre al lado. */
.vpj-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

/* El sello: celular primero (56 px); en pantallas grandes sube a 96 px (ver más abajo). */
.vpj-logo__sello {
	display: block;
	flex-shrink: 0; /* que no se aplaste si falta espacio */
	width: 56px;
	height: auto;
}

/* Pantallas muy estrechas (≤360 px): sello un poco menor para que quepa todo. */
@media (max-width: 360px) {
	.vpj-logo__sello {
		width: 48px;
	}
}

/* El nombre en dos líneas, Bricolage 800: "Vamos Pa'" índigo y "Japón!" carmín. */
.vpj-logo__nombre {
	display: flex;
	flex-direction: column;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.vpj-logo__vamos {
	color: var(--wp--preset--color--indigo);
}

.vpj-logo__japon {
	color: var(--wp--preset--color--carmin);
}

/* En el pie oscuro: nombre en papel y "Japón!" en carmín claro (guía de marca). */
.vpj-logo--pie .vpj-logo__nombre {
	font-size: 1.75rem;
}

.vpj-logo--pie .vpj-logo__vamos {
	color: var(--wp--preset--color--papel);
}

.vpj-logo--pie .vpj-logo__japon {
	color: var(--wp--preset--color--carmin-claro);
}

/* En el celular, el botón "Suscríbete" más compacto para que quepa todo. */
.vpj-boton-suscribete .wp-element-button {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* A partir de 782 px (tablet/computadora): sello de 96 px y nombre más grande. */
@media (min-width: 782px) {
	.vpj-logo__sello {
		width: 96px;
	}

	.vpj-logo__nombre {
		font-size: 1.5rem;
	}

	.vpj-boton-suscribete .wp-element-button {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
	}
}

/* Menú principal: colores de la marca.
   El texto índigo y el fondo blanco del menú del celular se eligen en el propio
   bloque de navegación (patterns/cabecera.php: textColor, overlayTextColor y
   overlayBackgroundColor). Así WordPress no aplica sus colores por defecto
   (negro en el submenú y en el menú desplegable del celular). */

/* Submenú (p. ej. "Regiones" → Tokyo, Osaka): tarjeta blanca con borde y radio 16 px. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--medio);
	background-color: var(--wp--preset--color--superficie);
}

/* Cada enlace del submenú: aire interno y esquinas suaves (radio 8 px). */
.vpj-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radio--pequeno);
}

/* Todos los enlaces del menú (escritorio, submenú y menú del celular), las flechas
   de los submenús y los botones de abrir/cerrar: índigo… */
.vpj-cabecera .wp-block-navigation .wp-block-navigation-item__content,
.vpj-cabecera .wp-block-navigation .wp-block-navigation-submenu__toggle,
.vpj-cabecera .wp-block-navigation__responsive-container-open,
.vpj-cabecera .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--indigo);
}

/* …y carmín al pasar el ratón, con el teclado o si es la página en la que estás. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation-item__content:hover,
.vpj-cabecera .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.vpj-cabecera .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vpj-cabecera .wp-block-navigation [aria-current="page"],
.vpj-cabecera .wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.vpj-cabecera .wp-block-navigation__responsive-container-open:hover,
.vpj-cabecera .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--carmin);
}

/* El panel del menú del celular (☰) tiene su propio diseño: apartado 15. */

/* Secciones con fondo oscuro (pie, hero y serie): el contorno de foco índigo
   no se vería, así que va en papel. */
.vpj-pie :focus-visible,
.vpj-fondo-oscuro :focus-visible {
	outline-color: var(--wp--preset--color--papel);
}

/* Tarjetas sobre fondo índigo (serie "Vamos a Comer Pa'"): cada tarjeta es una
   "hoja" blanca con radio 16 px y relleno interno, la imagen arriba y el texto dentro.
   Dentro de la tarjeta se usan los colores normales de las tarjetas de la portada.
   Las reglas empiezan por .vpj-fondo-oscuro .vpj-tarjeta para ganar a los colores
   claros (blanco/papel) que la sección índigo da a sus títulos y enlaces.
   box-sizing: border-box = el relleno queda DENTRO del alto/ancho de la tarjeta. */
.vpj-fondo-oscuro .vpj-tarjeta {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radio--medio);
	background-color: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
}

/* La imagen, dentro del relleno, con esquinas un poco menores (8 px) para que encaje. */
.vpj-fondo-oscuro .vpj-tarjeta .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radio--pequeno);
}

.vpj-fondo-oscuro .vpj-tarjeta .vpj-etiqueta-categoria a {
	color: var(--wp--preset--color--carmin-700);
}

.vpj-fondo-oscuro .vpj-tarjeta .wp-block-post-title,
.vpj-fondo-oscuro .vpj-tarjeta .wp-block-post-title a {
	color: var(--wp--preset--color--indigo);
}

.vpj-fondo-oscuro .vpj-tarjeta .wp-block-post-date {
	color: var(--wp--preset--color--texto-suave);
}

/* Sin margen bajo el último elemento: el relleno de la tarjeta ya da el aire. */
.vpj-fondo-oscuro .vpj-tarjeta__texto > :last-child {
	margin-bottom: 0;
}

/* Quitamos el hueco blanco que WordPress deja encima del pie
   (en la portada se vería una franja entre el newsletter y el pie). */
.wp-site-blocks > footer {
	margin-block-start: 0;
}


/* ---------- 3. Escala tipográfica: estilos que theme.json no puede dar ---------- */

/* "Display" (título grande de la portada): 56/53 px → interlínea muy cerrada. */
.has-display-font-size {
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/* "Pequeño" (metadatos, pies de foto): 15/22 px, peso 500. */
.has-small-font-size {
	font-weight: 500;
	line-height: 1.47;
}

/* "Etiqueta" (categorías): 12/16 px, MAYÚSCULAS, espaciado 0.2em, peso 700, carmin-700. */
.vpj-etiqueta-categoria {
	color: var(--wp--preset--color--carmin-700);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 700;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.vpj-etiqueta-categoria a {
	color: var(--wp--preset--color--carmin-700);
	text-decoration: none;
}


/* ---------- 4. Tarjetas de post (portada y listados) ---------- */

/* Guía de marca: imagen con radio 16 px, etiqueta de categoría en carmin-700,
   título en índigo y fecha en texto-suave. Sin caja alrededor: la imagen manda. */
.vpj-tarjeta {
	height: 100%;
	color: var(--wp--preset--color--texto);
}

.vpj-tarjeta .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radio--medio);
}

.vpj-tarjeta .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}

/* Al pasar el ratón, la foto se acerca un poquito. */
.vpj-tarjeta:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.vpj-tarjeta__texto {
	padding-top: var(--wp--preset--spacing--30);
}

.vpj-tarjeta__texto > * {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.vpj-tarjeta .wp-block-post-date {
	color: var(--wp--preset--color--texto-suave);
}

.vpj-tarjeta .wp-block-post-excerpt__excerpt {
	font-size: 1rem;
	line-height: 1.6;
}


/* ---------- 5. Artículo (single) ---------- */

/* Fila de autor · fecha · tiempo de lectura */
.vpj-meta p,
.vpj-meta .wp-block-post-author {
	margin: 0;
}

.vpj-meta .wp-block-post-author__avatar img {
	border-radius: 50%;
}

/* Los H2 de un artículo largo: más separación arriba para que cada
   sección "respire", y margen al saltar desde el índice. */
.wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--60);
	scroll-margin-top: 1.5rem;
}

.wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--50);
}


/* ---------- 6. Tabla de contenidos (shortcode [vpj_indice]) ---------- */

.vpj-indice {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--medio);
	background: var(--wp--preset--color--papel);
}

.vpj-indice__titulo {
	color: var(--wp--preset--color--indigo);
}

.vpj-indice__titulo {
	font-weight: 800;
	cursor: pointer;
}

.vpj-indice ol {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.vpj-indice li {
	margin-bottom: 0.35rem;
	line-height: 1.5;
}


/* ---------- 7. Cajas de los patrones (afiliado, producto, cómo llegar, consejo) ---------- */

/* Radios de la guía: 16 px para cajas normales, 28 px para cajas destacadas. */
.vpj-caja {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--medio);
}

/* Afiliado (destacada): fondo blanco, borde suave, radio 28 px. */
.vpj-caja-afiliado {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--grande);
	background: var(--wp--preset--color--superficie);
}

/* Producto propio (destacada): fondo papel, radio 28 px. */
.vpj-producto {
	border-radius: var(--wp--custom--radio--grande);
	background: var(--wp--preset--color--papel);
}

/* Cómo llegar: fondo papel, borde suave, radio 16 px. */
.vpj-como-llegar {
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--papel);
}

/* Consejo: fondo sakura-100, radio 16 px. (Sakura solo como fondo, nunca en texto.) */
.vpj-consejo {
	background: var(--wp--preset--color--sakura-100);
}

.vpj-consejo > :first-child {
	margin-top: 0;
}

.vpj-consejo > :last-child {
	margin-bottom: 0;
}

/* Imágenes dentro de las cajas: radio 16 px. */
.vpj-caja .wp-block-image img {
	border-radius: var(--wp--custom--radio--medio);
}

.vpj-lista-datos {
	padding-left: 0;
	list-style: none;
}

.vpj-lista-datos li {
	margin-bottom: 0.4rem;
}

.vpj-aviso-afiliado {
	color: var(--wp--preset--color--texto-suave);
}


/* ---------- 8. Regiones (shortcode [vpj_regiones] y plantilla de región) ---------- */

/* La sección ocupa todo el ancho; su interior se limita al ancho amplio (1200px). */
.vpj-seccion-regiones {
	padding-block: var(--wp--preset--spacing--60);
}

.vpj-seccion-regiones__interior {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	text-align: center; /* título centrado */
}

/* Mismo espacio arriba y abajo: sin margen extra encima del título ni debajo
   de las tarjetas; solo cuenta el padding de la sección (igual arriba y abajo). */
.vpj-seccion-regiones__interior > h2 {
	margin-top: 0;
}

/* Tarjetas centradas en una fila que se reparte en varias si no caben.
   Con flex + justify-content: center, aunque haya solo 2 regiones quedan
   en el centro (una cuadrícula las dejaría pegadas a la izquierda). */
.vpj-regiones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	text-align: left; /* el texto de cada tarjeta, alineado a la izquierda */
}

/* Cada tarjeta mide 16rem; en el celular ocupa todo el ancho disponible. */
.vpj-regiones > li {
	flex: 0 1 16rem;
}

@media (max-width: 480px) {
	.vpj-regiones > li {
		flex-basis: 100%;
	}
}

/* Toda la tarjeta es un enlace (más fácil de pulsar con el dedo). */
.vpj-region {
	/* border-box: el relleno y el borde van DENTRO del 100 % de alto.
	   Sin esto, la tarjeta medía 100 % + 52 px y se salía por abajo de la sección,
	   dejando menos espacio abajo que arriba. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--medio);
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.vpj-region:hover {
	border-color: var(--wp--preset--color--indigo);
	transform: translateY(-3px);
}

.vpj-region__nombre {
	color: var(--wp--preset--color--indigo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.2;
}

.vpj-region__total {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--small);
}

.vpj-region__enlace {
	margin-top: auto; /* empuja "Ver guía →" al fondo de la tarjeta */
	padding-top: 0.5rem;
	color: var(--wp--preset--color--carmin-700);
	font-weight: 700;
}

/* Descripción de la región en su archivo: caja de introducción tipo guía. */
.vpj-intro-region {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio--grande);
	background: var(--wp--preset--color--papel);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.vpj-intro-region > :first-child {
	margin-top: 0;
}

.vpj-intro-region > :last-child {
	margin-bottom: 0;
}


/* ---------- 9. Newsletter (solo diseño) ---------- */

.vpj-newsletter {
	display: flex;
	flex-wrap: wrap; /* en el celular el botón baja debajo del campo */
	gap: 0.75rem;
	max-width: 32rem;
	margin-inline: auto;
}

.vpj-newsletter input[type="email"] {
	flex: 1 1 14rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--pequeno); /* campos: radio 8 px */
	background: var(--wp--preset--color--superficie);
	font: inherit;
}

.vpj-newsletter input[type="email"]:focus {
	border-color: var(--wp--preset--color--indigo);
}

.vpj-newsletter button {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
}

/* Campo trampa antispam de Mailchimp: fuera de la pantalla (no se ve ni se puede
   enfocar), pero sigue en el formulario para que los robots lo rellenen.
   Se esconde así, y no con display:none, igual que en los formularios de Mailchimp. */
.vpj-newsletter__trampa {
	position: absolute;
	left: -5000px;
}


/* ---------- 10. Portada: secciones (fondos alternos y animación) ---------- */

/* Fondos alternos ESTRICTOS entre las secciones claras de la portada.
   Cada sección clara lleva la clase .vpj-seccion-clara (últimos, cada categoría,
   regiones y newsletter). ":nth-child(odd of .vpj-seccion-clara)" cuenta SOLO
   las secciones con esa clase, saltándose el hero y la serie (que son índigo).
   Así: 1ª blanco, 2ª papel, 3ª blanco… aunque falte alguna categoría. */
.vpj-seccion-clara:nth-child(odd of .vpj-seccion-clara) {
	background-color: var(--wp--preset--color--superficie);
}

.vpj-seccion-clara:nth-child(even of .vpj-seccion-clara) {
	background-color: var(--wp--preset--color--papel);
}

/* Secciones de categoría y serie "Vamos a Comer Pa'" en el celular (menos de 600 px, el mismo punto en el que
   WordPress cambia al menú de celular): solo 2 posts, para que la portada no se
   haga eterna. El servidor sigue enviando 3, que se ven en tablet y computadora.
   ":nth-child(n+3)" = del 3.º en adelante. */
@media (max-width: 599px) {
	.vpj-query-seccion .wp-block-post-template > li:nth-child(n+3) {
		display: none;
	}
}

/* Animación al aparecer (la controla assets/js/aparecer.js).
   Importante: este CSS NO oculta nada por sí solo. Solo cuando el script añade
   .vpj-oculta a una sección que aún está fuera de la pantalla, su contenido
   queda transparente y 16 px más abajo. Al llegar a ella, el script quita la
   clase y el contenido sube y aparece en 400 ms. Sin JavaScript, todo se ve. */
.vpj-seccion > * {
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.vpj-seccion.vpj-oculta > * {
	opacity: 0;
	transform: translateY(16px);
}

/* "Reducir movimiento" activado en el sistema: nada de animaciones, todo visible. */
@media (prefers-reduced-motion: reduce) {
	.vpj-seccion > * {
		transition: none;
	}

	.vpj-seccion.vpj-oculta > * {
		opacity: 1;
		transform: none;
	}
}


/* ---------- 11. Cabecera: Instagram y buscador (lupa) ---------- */

/* Icono de Instagram (lo añade inc/menu-redes.php al final del menú):
   índigo, carmín al pasar el ratón o con el teclado, sin fondo. */
.vpj-cabecera .wp-block-social-links.vpj-redes .wp-social-link {
	background: none;
	color: var(--wp--preset--color--indigo);
}

.vpj-cabecera .wp-block-social-links.vpj-redes .wp-social-link:hover,
.vpj-cabecera .wp-block-social-links.vpj-redes .wp-social-link:focus-within {
	color: var(--wp--preset--color--carmin);
}

/* La cabecera es la referencia para colocar el campo de búsqueda desplegado. */
.vpj-cabecera {
	position: relative;
}

/* Lupa: sin el estilo de botón carmín; solo el icono en índigo (carmín en hover). */
.vpj-cabecera .vpj-buscador .wp-block-search__button {
	padding: 0.25rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--indigo);
	box-shadow: none;
}

.vpj-cabecera .vpj-buscador .wp-block-search__button:hover,
.vpj-cabecera .vpj-buscador .wp-block-search__button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--carmin);
}

.vpj-cabecera .vpj-buscador .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
}

/* Campo desplegado: aparece DEBAJO de la cabecera, alineado a la derecha,
   para no empujar el menú ni el logo (en el celular no cabría en la fila). */
.vpj-cabecera .vpj-buscador:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	position: absolute;
	z-index: 20;
	top: 100%;
	right: var(--wp--style--root--padding-right);
	width: min(24rem, calc(100% - 2 * var(--wp--style--root--padding-right)));
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--pequeno);
	background: var(--wp--preset--color--superficie);
	box-shadow: 0 8px 24px rgba(21, 34, 74, 0.12);
}

.vpj-cabecera .vpj-buscador .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--indigo);
}

/* Celular (menos de 600 px): Suscríbete · lupa · ☰ (la lupa junto al icono del menú). */
@media (max-width: 599px) {
	.vpj-cabecera .vpj-boton-suscribete {
		order: 1;
	}

	.vpj-cabecera .vpj-buscador {
		order: 2;
	}

	/* Solo el <nav>: la lista de enlaces del panel también lleva la clase
	   .wp-block-navigation y no debe moverse. */
	.vpj-cabecera nav.wp-block-navigation {
		order: 3;
	}
}

/* Celulares estrechos (≤400 px, p. ej. iPhone de 375 px): menos separación en la
   cabecera para que quepan el logo, Suscríbete, la lupa y el ☰ sin salirse. */
@media (max-width: 400px) {
	.vpj-cabecera .vpj-logo {
		gap: 0.5rem;
	}

	.vpj-cabecera .vpj-logo__sello {
		width: 44px;
	}

	.vpj-cabecera .vpj-logo__nombre {
		font-size: 1rem;
	}

	.vpj-cabecera .wp-block-group:has(> .vpj-boton-suscribete) {
		gap: 0.5rem;
	}

	.vpj-cabecera .vpj-boton-suscribete .wp-element-button {
		padding: 0.5rem 0.625rem;
		font-size: 0.875rem;
	}

	.vpj-cabecera .vpj-buscador .wp-block-search__button {
		padding: 0;
	}
}

/* Celulares muy estrechos (≤340 px): no cabe todo; el botón "Suscríbete" de la
   cabecera se oculta porque también está dentro del menú ☰. */
@media (max-width: 340px) {
	.vpj-cabecera .vpj-boton-suscribete {
		display: none;
	}
}

/* Buscador de la página de resultados (search.html): campo con borde suave y radio 8 px. */
.vpj-buscador-pagina {
	max-width: 32rem;
}

.vpj-buscador-pagina .wp-block-search__input {
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--pequeno);
}

.vpj-buscador-pagina .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--indigo);
}

/* Cabecera en pantallas grandes: que nada se parta en varias líneas.
   - El logo (sello + nombre) y el botón "Suscríbete" no se encogen ni se cortan.
   - El menú usa algo menos de separación entre enlaces para que quepan junto a
     Instagram, Suscríbete y la lupa. Si aun así no caben (tablets), es el menú
     el que pasa a dos líneas, nunca el logo ni el botón. */
.vpj-cabecera .vpj-logo,
.vpj-cabecera .vpj-boton-suscribete,
.vpj-cabecera .vpj-buscador {
	flex-shrink: 0;
}

.vpj-logo__vamos,
.vpj-logo__japon,
.vpj-boton-suscribete .wp-element-button {
	white-space: nowrap;
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__container {
	align-items: center;
	gap: 0.5rem 1.25rem;
}

/* La lupa centrada en vertical con el menú y el botón. */
.vpj-cabecera .vpj-buscador {
	align-self: center;
	margin: 0;
}

.vpj-cabecera .vpj-buscador .wp-block-search__button {
	display: flex;
	align-items: center;
}


/* ---------- 12. Carrusel de "Últimos artículos" (solo celular) ---------- */

/* "Desliza →" y los puntos solo existen en el celular. */
.vpj-desliza,
.vpj-carrusel__puntos {
	display: none;
}

@media (max-width: 599px) {
	.vpj-desliza {
		display: block;
		margin: 0;
		white-space: nowrap;
	}

	/* La cuadrícula pasa a ser una fila que se desliza en horizontal.
	   - scroll-snap-type: al soltar el dedo, la fila "encaja" en una tarjeta.
	   - La fila va de borde a borde de la pantalla (márgenes negativos) para que
	     se vean asomar las tarjetas vecinas.
	   (El selector es largo para ganar a la cuadrícula que pone WordPress.) */
	.vpj-carrusel .wp-block-post-template.is-layout-grid {
		position: relative;  /* las posiciones de las tarjetas se miden desde la fila (carrusel.js) */
		display: flex;
		max-width: none;     /* WordPress limita la fila al 100 %; la queremos de borde a borde */
		gap: 0.75rem;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left));
		padding: 0.25rem 7.5vw 0.75rem; /* 7.5vw a cada lado = la 1.ª y la última también quedan centradas */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 7.5vw;
		overscroll-behavior-x: contain; /* el gesto no "arrastra" la página */
		scrollbar-width: none;          /* sin barra de desplazamiento (Firefox) */
	}

	.vpj-carrusel .wp-block-post-template.is-layout-grid::-webkit-scrollbar {
		display: none;                  /* sin barra (Chrome, Safari) */
	}

	/* Cada tarjeta ocupa el 85 % del ancho y se detiene centrada. */
	.vpj-carrusel .wp-block-post-template > li {
		flex: 0 0 85vw;
		scroll-snap-align: center;
	}

	/* Con el teclado, la fila enfocada muestra el contorno de foco. */
	.vpj-carrusel .wp-block-post-template:focus-visible {
		outline: 3px solid var(--wp--preset--color--indigo);
		outline-offset: 2px;
	}

	/* Puntos indicadores (los crea assets/js/carrusel.js): redondos como los del
	   anillo del sello; el activo en carmín y el resto en color borde. */
	.vpj-carrusel__puntos {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		margin-top: var(--wp--preset--spacing--20);
	}

	.vpj-carrusel__punto {
		/* Zona táctil de 28 px (cómoda para el dedo) con el punto de 10 px en el centro. */
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.vpj-carrusel__punto::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--wp--preset--color--borde);
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.vpj-carrusel__punto[aria-current="true"]::before {
		background: var(--wp--preset--color--carmin);
		transform: scale(1.2);
	}

	/* Empujón de pista: la fila va 30 px a la izquierda y vuelve (una vez). */
	.vpj-carrusel--empujon .wp-block-post-template {
		animation: vpj-empujon 0.9s ease-in-out;
	}
}

@keyframes vpj-empujon {
	0%,
	100% { transform: translateX(0); }
	40%  { transform: translateX(-30px); }
}

/* "Reducir movimiento": sin empujón (el script tampoco lo lanza) ni desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
	.vpj-carrusel--empujon .wp-block-post-template {
		animation: none;
	}
}


/* ---------- 13. Botón "Volver arriba" (inc/volver-arriba.php + assets/js/volver-arriba.js) ---------- */

/* Círculo carmín de 48 px, fijo abajo a la derecha, con flecha blanca. */
.vpj-arriba {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50; /* por encima del contenido, por debajo del menú del celular */
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--carmin);
	color: var(--wp--preset--color--superficie);
	box-shadow: 0 6px 16px rgba(21, 34, 74, 0.25);
	cursor: pointer;
	/* Oculto hasta que el script añada .vpj-arriba--visible.
	   visibility: hidden también lo saca del orden del teclado (Tab). */
	opacity: 0;
	visibility: hidden;
	/* --vpj-arriba-subir: lo que el script lo sube para no tapar el carrusel o el newsletter. */
	transform: translateY(calc(-1 * var(--vpj-arriba-subir, 0px)));
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
}

/* Anillo punteado fino por dentro, como el anillo punteado del sello. */
.vpj-arriba::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dotted rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	pointer-events: none;
}

.vpj-arriba svg {
	position: relative; /* por encima del anillo */
}

.vpj-arriba:hover {
	background-color: var(--wp--preset--color--carmin-700);
}

.vpj-arriba:focus-visible {
	outline: 3px solid var(--wp--preset--color--indigo);
	outline-offset: 3px;
}

.vpj-arriba--visible {
	opacity: 1;
	visibility: visible;
}

/* Celular: un poco más pegado a la esquina (16 px). */
@media (max-width: 599px) {
	.vpj-arriba {
		right: 16px;
		bottom: 16px;
	}
}

/* "Reducir movimiento": aparece y se mueve sin animación. */
@media (prefers-reduced-motion: reduce) {
	.vpj-arriba {
		transition: none;
	}
}

/* La cabecera recibe el foco al volver arriba (solo desde el script): sin contorno. */
.wp-site-blocks > header[tabindex="-1"]:focus {
	outline: none;
}


/* ---------- 14. Caja de autor al final de cada artículo (patterns/plantilla-articulo.php) ---------- */

/* Caja con los colores de la marca: fondo papel, borde suave y radio de 16 px. */
.vpj-caja-autor {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--medio);
	background-color: var(--wp--preset--color--papel);
}

/* Foto a la izquierda y el texto a la derecha. */
.vpj-caja-autor .wp-block-post-author {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.vpj-caja-autor .wp-block-post-author__avatar {
	flex-shrink: 0;
	margin: 0;
}

.vpj-caja-autor .wp-block-post-author__avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

/* "Escrito por": estilo etiqueta (12 px, mayúsculas, carmín oscuro). */
.vpj-caja-autor .wp-block-post-author__byline {
	margin: 0;
	color: var(--wp--preset--color--carmin-700);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.vpj-caja-autor .wp-block-post-author__name {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--indigo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}

.vpj-caja-autor .wp-block-post-author__bio {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--texto);
	font-size: 1rem;
	line-height: 1.6;
}

/* Enlace a "Sobre nosotros", alineado con el texto (no con la foto). */
.vpj-caja-autor__enlace {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-left: calc(72px + var(--wp--preset--spacing--30));
	font-weight: 700;
}

/* En el celular, el enlace va debajo de todo, sin sangría. */
@media (max-width: 599px) {
	.vpj-caja-autor__enlace {
		padding-left: 0;
	}
}


/* ---------- 15. Panel del menú en el celular (☰) (inc/menu-celular.php) ---------- */

/* En el celular, el botón ☰ abre un panel a pantalla completa (clase .is-menu-open).
   Orden: arriba el logo y la X; en medio los enlaces; abajo Suscríbete, buscador
   e Instagram. Todas las reglas empiezan por .vpj-cabecera .wp-block-navigation
   para ganar a los estilos de WordPress. En computadora nada de esto se aplica. */

/* Cabecera y pie del panel: ocultos siempre… */
.vpj-panel__cabecera,
.vpj-panel__pie {
	display: none;
}

/* …salvo con el panel abierto. */
.vpj-cabecera .wp-block-navigation .is-menu-open .vpj-panel__cabecera,
.vpj-cabecera .wp-block-navigation .is-menu-open .vpj-panel__pie {
	display: flex;
}

/* El panel: fondo blanco y sin el relleno de WordPress (lo ponemos abajo).
   Si el contenido no cabe, el panel se desplaza (overflow: auto). */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	overflow: auto;
	background-color: var(--wp--preset--color--superficie);
}

/* Contenido: 24 px de margen a los lados; nada pegado a los bordes. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0 1.5rem 2.5rem;
	align-items: stretch;
	gap: 0;
}

/* Arriba: el logo pequeño a la izquierda; a la derecha queda sitio para la X. */
.vpj-cabecera .wp-block-navigation .is-menu-open .vpj-panel__cabecera {
	align-items: center;
	min-height: 4.5rem;
	margin-bottom: 0.5rem;
	padding-right: 3.5rem;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.vpj-logo--panel .vpj-logo__sello {
	width: 40px;
}

.vpj-logo--panel .vpj-logo__nombre {
	font-size: 1rem;
}

/* La X de cerrar: zona de toque de 48 px, centrada con el logo y con su icono
   a 24 px del borde derecho. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radio--pequeno);
}

/* Enlaces: alineados a la izquierda y a todo el ancho, uno debajo de otro. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* Cada elemento del menú con un separador fino color "borde" debajo. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* Enlaces grandes y fáciles de tocar: mínimo 48 px de alto. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.5rem 0;
	font-size: 1.125rem;
	font-weight: 600;
}

/* Instagram ya está en el pie del panel: lo quitamos de la lista de enlaces. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(> .vpj-redes) {
	display: none;
}

/* Submenú de Regiones: Tokyo y Osaka debajo, con sangría de 16 px, sin caja ni
   línea vertical, y un separador fino entre ellos. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	align-items: stretch;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 1rem;
	gap: 0;
	border: 0;
	border-radius: 0;
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: stretch;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0;
	border-radius: 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: 1rem;
	font-weight: 500;
}

/* La página actual (y al tocar o con el teclado), en carmín, también en el submenú. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--carmin);
}

/* Abajo: Suscríbete, buscador e Instagram, uno debajo de otro. */
.vpj-cabecera .wp-block-navigation .is-menu-open .vpj-panel__pie {
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

/* "Suscríbete": botón principal (carmín, texto blanco) a todo el ancho. */
.vpj-cabecera .wp-block-navigation .vpj-panel__suscribete {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	text-decoration: none;
}

/* Buscador: campo a lo ancho con borde suave, radio 8 px y la lupa dentro. */
.vpj-cabecera .vpj-buscador-panel {
	margin: 0;
}

.vpj-cabecera .vpj-buscador-panel .wp-block-search__inside-wrapper {
	padding: 0.25rem;
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--pequeno);
	background: var(--wp--preset--color--superficie);
}

.vpj-cabecera .vpj-buscador-panel .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--indigo);
}

/* 16 px de letra: con menos, el iPhone hace zoom al escribir. */
.vpj-cabecera .vpj-buscador-panel .wp-block-search__input {
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 0;
	font-size: 1rem;
}

.vpj-cabecera .vpj-buscador-panel .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--indigo);
}

.vpj-cabecera .vpj-buscador-panel .wp-block-search__button:hover,
.vpj-cabecera .vpj-buscador-panel .wp-block-search__button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--carmin);
}

/* Instagram: icono con zona de toque de 48 px. */
.vpj-cabecera .wp-block-navigation .vpj-panel__pie .vpj-redes {
	margin: 0;
}

.vpj-cabecera .wp-block-navigation .vpj-panel__pie .vpj-redes .wp-block-social-link-anchor {
	padding: 0.75rem;
}

/* Acordeón de los submenús en el panel (Regiones → Tokyo, Osaka…).
   El botón y "Ver todas las regiones" los añade inc/menu-celular.php; el JS
   (assets/js/menu-acordeon.js) pone o quita .vpj-acordeon--abierto.
   Fuera del panel (computadora) no existen: el submenú funciona como siempre. */
.vpj-cabecera .wp-block-navigation .vpj-acordeon__boton,
.vpj-cabecera .wp-block-navigation .vpj-acordeon__ver-todas {
	display: none;
}

/* La fila: el botón arriba y la lista debajo. La lista vive en una fila de
   "grid" que pasa de 0fr (cerrada, alto 0) a 1fr (abierta, su alto natural):
   así se puede animar el alto sin saber cuántas regiones hay. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon {
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows 0.2s ease-out;
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon--abierto {
	grid-template-rows: auto 1fr;
}

/* El enlace "Regiones" de WordPress se oculta en el panel: lo sustituye el botón. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon > .wp-block-navigation-item__content {
	display: none;
}

/* El botón ocupa toda la fila (48 px) y se ve como los demás enlaces;
   la flecha, a la derecha. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: content-box; /* mismo alto que los enlaces: 48 px + relleno */
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--indigo);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon__boton:hover {
	color: var(--wp--preset--color--carmin);
}

/* La flecha gira al abrir. */
.vpj-acordeon__flecha {
	flex-shrink: 0;
	transition: transform 0.2s ease-out;
}

.vpj-acordeon--abierto .vpj-acordeon__flecha {
	transform: rotate(180deg);
}

/* La lista: cerrada no se ve ni se puede alcanzar con el teclado
   (visibility: hidden, que se aplica al terminar la animación de cierre). */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon > .wp-block-navigation__submenu-container {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.2s;
}

.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon--abierto > .wp-block-navigation__submenu-container {
	visibility: visible;
	transition-delay: 0s;
}

/* "Ver todas las regiones": visible solo dentro del panel. */
.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon__ver-todas {
	display: flex;
}

/* "Reducir movimiento" activado: el acordeón se abre y cierra sin animación. */
@media (prefers-reduced-motion: reduce) {
	.vpj-cabecera .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .vpj-acordeon,
	.vpj-acordeon__flecha {
		transition: none;
	}
}