/**
 * Javier Torices — CSS de componentes que Elementor no cubre de serie.
 *
 * CÓMO USARLO: cada clase de aquí la escribes en el widget de Elementor
 * correspondiente, pestaña "Avanzado" → campo "Clases CSS". No hace falta
 * tocar el editor de Elementor para nada de esto, solo escribir el nombre
 * de la clase.
 */

:root {
	--jt-azul: #1A2F3B;
	--jt-verde-mar: #3A5A65;
	--jt-turquesa: #3A7472; /* oscurecido desde #498F8D para cumplir WCAG AA (Kit Digital):
	                           como texto pequeño sobre arena y como fondo de píldora con
	                           texto blanco, el #498F8D se quedaba en ~3.2-3.5:1 (min 4.5). */
	--jt-turquesa-claro: #6AAEAC; /* sincronizado con la marca en Elementor. SOLO
	                                para fondos OSCUROS (sobre azul da 5.46:1). Sobre
	                                fondo claro NO cumple AA (~2.2:1): ahí usar --jt-turquesa. */
	--jt-acento: #5389B0; /* azul del acento de titulares (.jt-acento). El tono claro
	                         de marca (#6f9fc2/#85A8C1) no cumple AA sobre fondo claro ni
	                         sobre blanco; este es el más cercano que pasa 3:1 en texto
	                         grande sobre arena (3.20). SOLO para titulares (texto grande). */
	--jt-arena: #F1ECE1;
	--jt-espuma: #F4F7F6;
	--jt-gris: #E2E8E6;
	--jt-verde-oscuro: #2A3A3A;
	--jt-easing: cubic-bezier(.2, .7, .2, 1);
}

/* Movimiento suave en toda la web, respetando accesibilidad */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 1) CABECERA — fondo con blur al hacer sticky
 * Clase en el Header (contenedor raíz) desde Theme Builder.
 * ---------------------------------------------------------------------- */
.jt-header {
	background: rgba(241, 236, 225, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* -------------------------------------------------------------------------
 * 2) MENÚ — subrayado animado al hover, izq. a der.
 * Clase en el widget "Menú de navegación" (Nav Menu).
 * ---------------------------------------------------------------------- */
.jt-nav-menu .elementor-item {
	position: relative;
}
.jt-nav-menu .elementor-item::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: var(--jt-verde-mar);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--jt-easing);
}
.jt-nav-menu .elementor-item:hover::after,
.jt-nav-menu .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
 * 3) MENÚ MÓVIL DESPLEGABLE (≤980) — panel Verde Mar, enlaces blancos 18px
 * Clase en el widget Nav Menu (su "Dropdown"/panel en modo hamburguesa).
 * ---------------------------------------------------------------------- */
.jt-nav-menu.elementor-nav-menu--dropdown,
.jt-nav-menu .elementor-nav-menu--dropdown {
	background: var(--jt-verde-mar) !important;
}
.jt-nav-menu .elementor-nav-menu--dropdown .elementor-item {
	color: var(--jt-espuma) !important;
	font-size: 1.125rem;
	padding: 15px 0 !important;
	border-bottom: 1px solid rgba(244, 247, 246, 0.35);
}

/* -------------------------------------------------------------------------
 * 4) BADGE DE ESTADO — pill sobre tarjeta de obra
 * Clase en el widget de texto/etiqueta dentro del Loop Grid.
 * Añade además .is-reservada o .is-vendida.
 * ---------------------------------------------------------------------- */
.jt-badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 14px;
	border-radius: 999px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--jt-espuma);
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}
.jt-badge.is-reservada { background: var(--jt-turquesa); }
.jt-badge.is-vendida { background: var(--jt-verde-mar); }

/* -------------------------------------------------------------------------
 * 5) ZOOM DE IMAGEN — tarjetas de obra / ficha (hover)
 * Clase en el contenedor que envuelve la imagen (overflow hidden).
 * position: relative es necesario aquí (y no solo "recomendado") porque el
 * badge de estado (sección 4) se ancla con position: absolute a este mismo
 * contenedor — sin esto, el badge se saldría de la tarjeta.
 * ---------------------------------------------------------------------- */
.jt-zoom {
	position: relative;
	overflow: hidden;
}
.jt-zoom img {
	transition: transform 0.8s var(--jt-easing);
	will-change: transform;
}
.jt-zoom:hover img {
	transform: scale(1.035);
}
/* Obras con imagen transparente (círculos): al crecer en hover NO se recortan
 * (overflow visible en vez de hidden). La clase .is-transp la pone por
 * detección automática assets/js/img-transparente.js; las fotos rectangulares
 * (JPG opaco) mantienen el recorte de .jt-zoom de arriba. */
.jt-zoom.is-transp { overflow: visible; }

/* -------------------------------------------------------------------------
 * 6) LIFT DE PORTADA — Libros y catálogos (hover)
 * Clase en el contenedor de la portada.
 * ---------------------------------------------------------------------- */
.jt-lift {
	transition: transform 0.5s var(--jt-easing);
}
.jt-lift:hover {
	transform: translateY(-6px);
}

/* -------------------------------------------------------------------------
 * 7) TARJETA DE SERIE — oscurecido + CTA "Explorar →" al hover
 * Clase en el contenedor de la tarjeta (Series, índice).
 * Dentro debe ir un elemento con clase .jt-serie-cta para el texto del CTA.
 * ---------------------------------------------------------------------- */
.jt-serie-card {
	position: relative;
	overflow: hidden;
}
.jt-serie-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(26, 47, 59, 0);
	transition: background 0.5s var(--jt-easing);
	z-index: 1;
	pointer-events: none;
}
.jt-serie-card:hover::before {
	background: rgba(26, 47, 59, 0.28);
}
.jt-serie-card .jt-serie-cta {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	color: var(--jt-espuma);
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s var(--jt-easing), transform 0.4s var(--jt-easing);
}
.jt-serie-card:hover .jt-serie-cta {
	opacity: 1;
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * 8) PILL DE FILTRO — catálogo de obra
 * Clase en cada botón/enlace de filtro; añade .is-active al activo por JS/PHP.
 * ---------------------------------------------------------------------- */
/* FIX 2026-07-17: se cualifica con .jt-cat-pills (especificidad 0,2,0) porque
 * al ser <button>, sin esto pierden contra dos reglas ajenas con especificidad
 * (0,1,1): reset.css de Hello Elementor pone TODO <button>:hover/:focus en
 * rosa #c36 (fuera de paleta), y el Kit global de Elementor rellena TODO
 * <button> con el color secundario sólido + padding 54px. No se usa
 * !important a propósito: subir la especificidad basta y es más mantenible. */
.jt-cat-pills .jt-pill {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	border-radius: 999px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--jt-verde-mar);
	border: 1px solid rgba(58, 90, 101, 0.35);
	background: transparent;
	transition: background 0.3s var(--jt-easing), color 0.3s var(--jt-easing), border-color 0.3s var(--jt-easing);
	cursor: pointer;
}
.jt-cat-pills .jt-pill:hover,
.jt-cat-pills .jt-pill:focus-visible {
	border-color: var(--jt-azul);
	color: var(--jt-azul);
	outline: none;
}
.jt-cat-pills .jt-pill.is-active {
	background: var(--jt-azul);
	border-color: var(--jt-azul);
	color: var(--jt-espuma);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 9) TOGGLE "Solo disponibles"
 * Apagado = Gris placeholder, encendido = Verde Mar (antes se quedaba
 * siempre en Verde Mar, sin distinguir estado — corregido).
 * ---------------------------------------------------------------------- */
.jt-toggle {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
}
.jt-toggle input { display: none; }
.jt-toggle .track {
	position: absolute;
	inset: 0;
	background: var(--jt-gris);
	border-radius: 999px;
	transition: background 0.3s var(--jt-easing);
}
.jt-toggle input:checked ~ .track {
	background: var(--jt-verde-mar);
}
.jt-toggle .thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--jt-espuma);
	transition: transform 0.3s var(--jt-easing);
}
.jt-toggle input:checked ~ .thumb {
	transform: translateX(18px);
}

/* -------------------------------------------------------------------------
 * 10) BOTONES — variantes ghost (el default sólido ya vive en Estilo del tema)
 * Clase en el widget Botón de Elementor, ADEMÁS del estilo por defecto.
 * ---------------------------------------------------------------------- */
.jt-btn-ghost {
	background: transparent !important;
	border: 1.5px solid var(--jt-verde-mar) !important;
	color: var(--jt-verde-mar) !important;
}
.jt-btn-ghost:hover {
	background: var(--jt-verde-mar) !important;
	color: var(--jt-espuma) !important;
}
.jt-btn-ghost-claro {
	background: transparent !important;
	border: 1.5px solid var(--jt-turquesa) !important;
	color: var(--jt-turquesa) !important;
}
.jt-btn-ghost-claro:hover {
	background: var(--jt-turquesa) !important;
	color: var(--jt-espuma) !important; /* blanco sobre turquesa oscuro = 4.97:1 (antes azul, que sobre el turquesa nuevo no llegaba) */
}

/* -------------------------------------------------------------------------
 * 11) MINIATURA DE GALERÍA (ficha de obra) — opacidad + estado activo
 * ---------------------------------------------------------------------- */
.jt-thumb {
	width: 92px;
	height: 62px;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.3s var(--jt-easing);
	object-fit: cover;
}
.jt-thumb:hover,
.jt-thumb.is-active {
	opacity: 1;
}
.jt-thumb.is-active {
	outline: 2px solid var(--jt-espuma);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * 12) SEGURIDAD DE MARCA — por si algún widget de Elementor deja pasar negro
 * puro por defecto (iconos, bordes de sistema). Red de seguridad, no la
 * fuente de verdad: los colores correctos van por Global Colors.
 * ---------------------------------------------------------------------- */
.jt-no-black, .jt-no-black * {
	color: var(--jt-azul);
}

/* -------------------------------------------------------------------------
 * 13) ENLACES SIN CAMBIO DE COLOR — pie, columna Contacto (email/teléfono)
 * Clase en el widget que contiene el texto/enlace de mailto: y tel:.
 * Anula el color de enlace global (Turquesa / hover Azul Atlántico) y lo
 * deja fijo en Blanco Espuma, estado normal, hover y visitado.
 * ---------------------------------------------------------------------- */
.jt-link-static a,
.jt-link-static a:hover,
.jt-link-static a:visited,
.jt-link-static a:active,
.jt-link-static a:focus {
	color: var(--jt-espuma) !important;
	text-decoration: none !important;
}

/* -------------------------------------------------------------------------
 * 14) PRECIO O ESTADO — línea bajo el título de la tarjeta de obra
 * No hace falta aplicar esta clase a mano: la escribe directamente el
 * shortcode [jt_precio_o_estado] (plugin javiertorices-core v0.9.1+),
 * que decide cuál de las dos variantes usar según el estado de la obra.
 * ---------------------------------------------------------------------- */
.jt-precio {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.4; /* propio: sin esto hereda el 1.85 del cuerpo global de
	                     Elementor (~30px) y abre huecos enormes en la tarjeta. */
}
.jt-precio.is-valor {
	font-weight: 600;
	color: var(--jt-azul);
}
.jt-precio.is-estado {
	font-weight: 400;
	color: var(--jt-verde-mar);
}

/* -------------------------------------------------------------------------
 * 15) META DE OBRA — línea "195 × 63 cm · 2024" bajo el título de la tarjeta
 * No hace falta aplicar esta clase a mano: la escribe directamente el
 * shortcode [jt_meta_obra] (plugin javiertorices-core v0.9.2+). El widget
 * "Shortcode" de Elementor no tiene pestaña de tipografía propia, por eso
 * el estilo va en CSS y no en ajustes del widget.
 * ---------------------------------------------------------------------- */
.jt-meta {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 0.78rem; /* 12.5px */
	line-height: 1.4; /* propio: evita heredar el interlineado del cuerpo global. */
	color: var(--jt-verde-mar);
}

/* -------------------------------------------------------------------------
 * 15b) TARJETA DE OBRA — piezas compartidas por el catálogo (§16) y la rejilla
 * de la ficha de serie (§20). Rediseño Juan 2026-07:
 *   - .jt-card-titlerow  → fila flex: título a la izquierda, estado a la derecha.
 *   - .jt-estado-inline  → "Reservada"/"Vendida" en línea con el título (antes
 *                          era un badge en overlay sobre la imagen, ya retirado).
 *   - .jt-card-serie     → enlace discreto "Serie: Nombre" bajo la meta.
 * ---------------------------------------------------------------------- */
.jt-card-titlerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.jt-estado-inline {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jt-espuma); /* texto claro sobre el fondo de color (como el badge antiguo) */
}
.jt-estado-inline.is-reservada { background: var(--jt-turquesa); }
.jt-estado-inline.is-vendida { background: var(--jt-verde-mar); }
.jt-card-serie {
	display: block;
	margin-top: 8px; /* mismo hueco que serie→medidas (título→serie) */
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 0.78rem; /* 12.5px, igual que la meta */
	line-height: 1.4; /* propio: evita heredar el interlineado del cuerpo global. */
	color: var(--jt-verde-mar);
	text-decoration: none;
	transition: color 0.2s var(--jt-easing);
}
.jt-card-serie:hover { color: var(--jt-turquesa); }

/* -------------------------------------------------------------------------
 * 16) CATÁLOGO DE OBRA — shortcode [jt_catalogo_obra] (plugin
 * javiertorices-core v0.9.3+). Sustituye a los widgets nativos de
 * Elementor "Filtro de taxonomía" + "Loop Grid": tres rondas de bugs de
 * temporización contra su AJAX interno (ver historial de versiones de
 * assets/js/filtro-movil.js, retirado) más un bug propio de su modo
 * "Cargar más" con ≤6 resultados hicieron más fiable construirlo por
 * código. El filtrado es 100% en cliente vía assets/js/catalogo-filtro.js
 * — sin AJAX, sin recarga, sin depender de nada de Elementor.
 * Reutiliza .jt-pill (8), .jt-toggle (9), .jt-badge (4), .jt-precio (14)
 * y .jt-meta (15) ya definidos arriba.
 *
 * El desplegable nativo en tablet/móvil (en vez de las pills) replica el
 * propio prototipo (Handoff Elementor - Obra disponible.dc.html), que ya
 * especifica un <select> ahí, no un acordeón.
 * ---------------------------------------------------------------------- */
.jt-cat-filtros {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 8px 0 44px;
	border-top: 1px solid rgba(58, 90, 101, 0.16);
	margin-top: 4px;
}
.jt-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* FIX 2026-07-17: se añade la flecha SVG propia (igual que el prototipo,
 * assets/chevron.svg) como background-image en base64 -- con appearance:none
 * y sin esto no se veía NINGUNA flecha, ni la nativa ni una propia. */
.jt-cat-select {
	display: none;
	height: 44px;
	padding: 0 40px 0 18px;
	border-radius: 999px;
	border: 1px solid rgba(58, 90, 101, 0.35);
	background: var(--jt-arena) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBkPSJNMiA0bDQgNCA0LTQiIHN0cm9rZT0iIzNBNUE2NSIgc3Ryb2tlLXdpZHRoPSIxLjQiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPg==") no-repeat right 16px center;
	color: var(--jt-azul);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.jt-cat-toggle-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 400;
	color: var(--jt-verde-mar);
	white-space: nowrap;
	cursor: pointer;
}

/* REJILLA, NO COLUMNAS CSS (2026-08-19). Antes esto era `column-count: 3`, que
 * rellena la primera columna ENTERA de arriba abajo antes de pasar a la segunda:
 * con el catálogo ordenado por estado (disponible → reservada → vendida), las 18
 * disponibles quedaban apiladas en la columna izquierda y arriba a la derecha se
 * veían vendidas. Quien lee de izquierda a derecha veía "disponible, vendida,
 * vendida" y parecía que el orden estaba mal (no lo estaba: el HTML sale bien).
 * La rejilla rellena POR FILAS, así que el orden que se lee es el orden real.
 * Se pierde el efecto masonry: cada fila se alinea a la tarjeta más alta y la
 * página crece un ~17 %. Mismo criterio que la rejilla de las series. */
.jt-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 52px 40px;
	align-items: start; /* sin esto la tarjeta se estira a la altura de la fila y
	                       el enlace-cobertura se comería el hueco de debajo */
	padding-bottom: 40px;
}
.jt-cat-card {
	display: block;
	margin-bottom: 0; /* el hueco vertical lo pone ahora el gap de la rejilla */
	color: inherit;
	position: relative; /* ancla del enlace-cobertura (stretched link) */
}
.jt-cat-card.is-oculta {
	display: none;
}
/* Enlace-cobertura: hace clicable TODA la tarjeta hacia la obra. La tarjeta
 * ya no puede ser un <a> porque contiene el enlace de serie (anidar <a> es
 * ilegal y rompía la maqueta). */
.jt-cat-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* El enlace de serie va POR ENCIMA de la cobertura para poder navegar a su
 * término (el resto de la tarjeta lleva a la obra). */
.jt-cat-body .jt-card-serie {
	position: relative;
	z-index: 2;
}
/* El zoom en hover ahora se dispara al pasar por toda la tarjeta: la cobertura
 * tapa la imagen, así que .jt-zoom:hover (§5) por sí solo ya no se activaría. */
.jt-cat-card:hover .jt-zoom img {
	transform: scale(1.035);
}
.jt-cat-img-wrap {
	/* Sin fondo: las obras con PNG transparente (p. ej. las circulares) se ven
	 * sobre el fondo de la página, no sobre un gris. Las fotos rectangulares
	 * llenan la caja igual, así que para ellas no cambia nada. */
	background: transparent;
}
.jt-cat-img-wrap img {
	width: 100%;
	height: auto;
	display: block;
}
.jt-cat-body {
	padding-top: 16px;
}
.jt-cat-body h2 {
	/* margin:0 mata el margen que el estilo global de encabezados de Elementor
	 * añade al título y que abría de más el hueco título→meta (comparativa de
	 * Juan, 2026-07). El espaciado real lo controla el margin-top de la meta.
	 * Es <h2> (no h3) por jerarquía AA: cuelga del H1 de la página. */
	margin: 0;
	font-family: 'Instrument Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	color: var(--jt-azul);
}
.jt-cat-body .jt-meta {
	display: block;
	margin-top: 8px;
}
.jt-cat-body .jt-precio {
	display: block;
	margin-top: 16px; /* doble hueco antes del precio */
}
.jt-cat-vacio {
	padding: 40px 0;
	color: var(--jt-verde-mar);
}

@media (max-width: 980px) {
	.jt-cat-pills {
		display: none !important;
	}
	.jt-cat-select {
		display: block !important;
	}
	.jt-cat-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 680px) {
	.jt-cat-filtros {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}
	.jt-cat-select {
		width: 100%;
	}
	.jt-cat-grid {
		grid-template-columns: 1fr !important;
	}
}

/* -------------------------------------------------------------------------
 * 17) PALABRA DE ACENTO EN TITULARES — segunda palabra en cursiva y color
 * Turquesa claro (patrón repetido en toda la web: "Obra disponible",
 * "Las Series", "La mirada"...). El editor visual del widget Editor de
 * texto no siempre deja aplicar un color de fuente puntual a una sola
 * palabra de forma fiable — mejor envolverla a mano en HTML (pestaña
 * "Texto"/vista de código del widget) con esta clase, en vez de pelear con
 * el selector de color del editor visual.
 * Uso: <span class="jt-acento">original</span> (o <em>, da igual la
 * etiqueta, el estilo lo pone esta clase).
 * ---------------------------------------------------------------------- */
.jt-acento {
	font-style: italic;
	color: var(--jt-acento);
}


/* -------------------------------------------------------------------------
 * 17) APARICIÓN PROGRESIVA AL SCROLL — catálogo de obra (2026-07-17)
 * Ver assets/js/catalogo-filtro.js para el IntersectionObserver que añade
 * .is-visible. Las tarjetas ya están todas en el DOM; esto es solo la
 * animación de entrada, no carga diferida de datos.
 * ---------------------------------------------------------------------- */
/* SIN animación de entrada en las tarjetas del catálogo — y es deliberado.
 * FIX 2026-07-18: una versión previa las ocultaba con `opacity: 0` a la
 * espera de que un JS (IntersectionObserver) les añadiera `.is-visible` para
 * revelarlas al hacer scroll. Ese JS nunca llegó a existir, así que el grid
 * entero quedaba INVISIBLE (solo se veían el filtro y el toggle). Prioridad
 * absoluta: que las obras SIEMPRE se vean, sin depender de ningún script.
 * El movimiento ya lo aporta el hover/zoom de cada tarjeta (.jt-zoom).
 * NO reintroduzcas aquí un `opacity: 0` de entrada sin un mecanismo de
 * revelado a prueba de fallos. */

/* -------------------------------------------------------------------------
 * 18) GRID DE SERIES — shortcode [jt_grid_series] (plugin
 * javiertorices-core v0.9.4+). Índice de series en la página "Series".
 * Reutiliza la TARJETA DE SERIE (sección 7: oscurecido + CTA "Explorar →")
 * y el ZOOM DE IMAGEN (sección 5): cada tarjeta lleva las clases
 * .jt-serie-card .jt-zoom en el contenedor de imagen. Aquí solo se define
 * el LAYOUT del grid (flex "3 + 2" centrado) y la tipografía de
 * nombre/descripción, igual que el grid del catálogo (sección 16) solo
 * añadía su propio layout sobre componentes ya existentes.
 *
 * El "3 + 2" se consigue con flex + justify-content:center: la primera fila
 * llena las 3 columnas y la segunda (2 tarjetas) queda centrada sola, sin
 * depender de un número fijo de elementos.
 * ---------------------------------------------------------------------- */
.jt-series-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px 40px;
}
.jt-series-grid .jt-serie-item {
	flex: 0 0 calc((100% - 80px) / 3); /* 3 por fila, 2 gaps de 40px */
	max-width: calc((100% - 80px) / 3);
	display: block;
	color: inherit;
}
.jt-series-grid .jt-serie-card {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--jt-azul);
}
.jt-series-grid .jt-serie-card .jt-serie-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jt-serie-nombre {
	margin-top: 22px;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.05;
	color: var(--jt-azul);
}
.jt-serie-desc {
	margin-top: 10px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: var(--jt-azul);
}

@media (max-width: 980px) {
	.jt-series-grid {
		gap: 44px 32px;
	}
	.jt-series-grid .jt-serie-item {
		flex-basis: calc((100% - 32px) / 2);
		max-width: calc((100% - 32px) / 2);
	}
}
@media (max-width: 680px) {
	.jt-series-grid {
		gap: 40px;
	}
	.jt-series-grid .jt-serie-item {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* =========================================================================
 * 19) FICHA DE OBRA — plantilla single-obra.php (child theme v1.3.0+).
 * 100% código, sin fragmento de Elementor. Reutiliza: .jt-badge (sección 4,
 * neutralizando su position:absolute en la cabeza del escenario), .jt-thumb
 * (sección 11), .jt-btn-ghost / .jt-btn-ghost-claro (sección 10) y
 * .jt-precio (sección 14).
 *
 * NOTA DE ESPECIFICIDAD (ver sección 8 y §2 del contexto): TODOS los <button>
 * de esta ficha se cualifican con un contenedor propio (.jt-photo, .jt-gallery,
 * .jt-tec-list, .jt-modal, .jt-nl-form, .jt-zoomer-controls…) para tener
 * especificidad ≥ (0,2,0) y ganar a las dos reglas globales de <button>:
 * el reset rosa de Hello Elementor y el Kit de Elementor Pro. Nunca se deja
 * un selector de <button> "a secas".
 * ===================================================================== */

/* Bloqueo de scroll cuando hay un overlay abierto */
.jt-noscroll { overflow: hidden; }

/* [hidden] pierde ante una clase con display:flex/grid; hay que forzarlo */
.jt-modal[hidden],
.jt-videobox[hidden],
.jt-zoomer[hidden] { display: none; }

/* ---- Bloque 1 · Escenario (fondo oscuro) ----
 * Layout (child v2.50.0, diseño "Ficha Obra nueva"): la obra ocupa el máximo
 * espacio a la izquierda y las miniaturas se agrupan en una COLUMNA LATERAL a la
 * derecha (tiles Obra · Vídeo · Detalle + galería de detalle). Al pinchar una
 * miniatura, el visor de la izquierda pasa a modo "slide" con flechas ‹ ›.
 * En tablet/móvil (≤980) la columna baja bajo la foto en fila horizontal. */
.jt-stage {
	background: var(--jt-azul);
	display: flex;
	flex-direction: column;
	/* En variables porque la banda de la ficha técnica las necesita para salir a
	 * sangre con margen negativo. Clavar los números allí ya falló: en móvil el
	 * relleno es otro y la lengüeta se salía 6px por debajo del pliegue. */
	--jt-stage-padx: 56px;
	--jt-stage-padb: 26px;
	padding: 22px var(--jt-stage-padx) var(--jt-stage-padb);
	/* Ocupa el alto de ventana menos la cabecera → máximo espacio para la obra.
	 * Esto es sólo FALLBACK: ficha-obra.js (initStageHeight) mide la cabecera
	 * real (+ admin-bar) y fija el min-height EXACTO inline. 71px = alto medido
	 * de la cabecera interior de Elementor sin admin-bar. */
	--jt-stage-off: 71px;
	min-height: calc(100vh - var(--jt-stage-off));
	/* Ancla del aspa de cierre. Comprobado que NO mueve el badge de estado: ese
	 * se ancla a .jt-photo, que ya era relative. */
	position: relative;
}
/* Aspa de cierre de la ficha (obra Y encargo) → vuelve al listado. Mismo lenguaje
 * visual que el cierre del visor de series. Sustituye al breadcrumb "← Encargos",
 * que ya no se imprime. 44px = objetivo táctil mínimo. */
.jt-stage-close {
	position: absolute;
	top: 14px;
	right: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(244, 247, 246, 0.4);
	background: rgba(26, 47, 59, 0.7);
	color: var(--jt-espuma) !important;
	text-decoration: none;
	transition: background 0.2s var(--jt-easing), border-color 0.2s var(--jt-easing);
}
/* Sin esto el icono se aplasta dentro del flex (mismo fix que en el visor). */
.jt-stage-close svg { flex: 0 0 auto; }
.jt-stage-close:hover,
.jt-stage-close:focus-visible {
	background: rgba(26, 47, 59, 0.95);
	border-color: rgba(244, 247, 246, 0.75);
	outline: none;
}
/* (SIN USO desde que el aspa lo sustituye) Breadcrumb de la ficha de ENCARGO
 * ("← Encargos"), claro sobre el escenario
 * oscuro (equivalente a .jt-serie-crumb pero en fondo azul). */
.jt-stage-crumb {
	flex: 0 0 auto;
	margin: 0 0 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.jt-stage-crumb a {
	color: rgba(244, 247, 246, 0.7) !important;
	text-decoration: none;
	transition: color 0.2s var(--jt-easing);
}
.jt-stage-crumb a:hover { color: var(--jt-espuma) !important; }
.jt-stage-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
/* Reutiliza .jt-badge (sección 4) pero en línea, no como overlay absoluto */
.jt-stage-head .jt-badge {
	position: static;
	top: auto;
	left: auto;
	height: 24px;
	padding: 0 11px;
	font-size: 10px;
	letter-spacing: 0.14em;
}
.jt-stage-title {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1;
	/* !important: sobre el fondo azul debe ir en espuma (claro). El color global
	 * de encabezados de Elementor/Hello lo pisaba y lo dejaba en azul oscuro
	 * (ilegible sobre azul). Mismo patrón que el resto de botones/títulos (§2). */
	color: var(--jt-espuma) !important;
}

/* Cuerpo del escenario: foto (izq., crece) + columna lateral (der., 92px). */
.jt-stagebody {
	flex: 1 1 auto;
	display: flex;
	gap: 22px;
	min-height: 0;
	padding-top: 18px;
}

/* ---- Visor principal ---- */
.jt-photo {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}
.jt-photo.is-zoomable:not(.is-zoom-off) { cursor: zoom-in; }
/* Área de la imagen: CRECE y centra la obra. El pie ("<nombre> · n/N") va en su
 * propia franja DEBAJO (nunca pisa la obra). La imagen se ajusta por altura →
 * cualquier proporción encaja sin recortes ni desbordes. */
.jt-photo-box {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}
.jt-photo-img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	box-shadow: 0 30px 80px rgba(26, 47, 59, 0.55);
	/* Fundido al cambiar de vista (lo controla ficha-obra.js con opacity). */
	transition: opacity 0.25s var(--jt-easing);
}
.jt-photo-placeholder {
	width: 60%;
	height: 80%;
	background: var(--jt-verde-oscuro);
}
/* Píldora "Ampliar" — <button>, cualificada con .jt-photo.
 * Mismo estilo que los controles del visor de zoom (§19): fondo OSCURO
 * (rgba azul atlántico) + borde muy fino, para que se lea sobre cualquier
 * obra, incluso las de horizonte muy claro (petición de Juan 2026-07).
 * !important en background: neutraliza el fondo que el Kit de Elementor
 * impone a los <button> (§2), igual que en .jt-zoom-ctrl. */
.jt-photo .jt-ampliar {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 999px;
	border: 1px solid rgba(244, 247, 246, 0.28);
	background: rgba(26, 47, 59, 0.55) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--jt-espuma);
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 2;
	transition: background 0.25s var(--jt-easing), color 0.25s var(--jt-easing);
}
.jt-photo .jt-ampliar:hover,
.jt-photo .jt-ampliar:focus-visible {
	background: rgba(26, 47, 59, 0.8) !important;
	color: var(--jt-espuma);
	outline: none;
}
.jt-photo .jt-ampliar.is-hidden { display: none; }

/* Flechas de navegación de las vistas de detalle (a los lados de la foto).
 * Redondas, fondo sólido + borde claro + sombra: se leen sobre CUALQUIER obra
 * (antes eran casi invisibles sobre el mar). Centradas en el ÁREA de la imagen
 * (top:50% del .jt-photo-box, no del pie). */
.jt-photo .jt-photo-box .jt-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--jt-espuma);
	background: rgba(26, 47, 59, 0.6) !important;
	border: 1px solid rgba(244, 247, 246, 0.5);
	border-radius: 999px !important;
	box-shadow: 0 2px 14px rgba(10, 20, 26, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	/* z-index 5: por ENCIMA del overlay de vídeo (3) y su cierre (4), para que
	 * las flechas se puedan pulsar también durante la reproducción del vídeo. */
	z-index: 5;
	transition: background 0.2s var(--jt-easing), transform 0.1s var(--jt-easing);
}
/* El chevron es un <svg> hijo flex → sin esto se APLASTA (colapsaba a 2px de
 * ancho y las flechas parecían vacías). flex:0 0 auto + tamaño explícito. */
.jt-photo .jt-photo-box .jt-arrow svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}
.jt-photo .jt-photo-box .jt-arrow:hover { background: rgba(26, 47, 59, 0.8) !important; }
.jt-photo .jt-photo-box .jt-arrow:active { transform: translateY(-50%) scale(0.94); }
.jt-photo .jt-photo-prev { left: 16px; }
.jt-photo .jt-photo-next { right: 16px; }
/* (0,3,1) para ganar a la regla de estilo .jt-photo .jt-photo-box .jt-arrow (0,3,0). */
.jt-photo .jt-photo-box .jt-arrow[hidden] { display: none; }

/* Pie de la vista de detalle: DEBAJO de la imagen, en franja propia (nunca la
 * pisa). Reservada siempre que hay galería → sin salto al entrar/salir. */
.jt-photo-cap {
	flex: 0 0 auto;
	min-height: 20px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	text-align: center;
	white-space: nowrap;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: rgba(244, 247, 246, 0.72);
}

/* Overlay de vídeo DENTRO del visor (no lightbox a pantalla completa) */
.jt-photo-video {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--jt-azul);
	z-index: 3;
}
.jt-photo-video[hidden] { display: none; }
.jt-photo-video-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: 16 / 9;
}
.jt-photo-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.jt-photo .jt-photo-video-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--jt-espuma);
	background: rgba(26, 47, 59, 0.72) !important;
	border: 1px solid rgba(244, 247, 246, 0.5);
	border-radius: 999px !important;
	z-index: 4;
	transition: background 0.25s var(--jt-easing);
}
/* Mismo fix que las flechas: el <svg> hijo flex se aplastaba (icono invisible). */
.jt-photo .jt-photo-video-close svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.jt-photo .jt-photo-video-close:hover { background: rgba(26, 47, 59, 0.9) !important; }

/* ---- Columna lateral: tiles + galería de detalle ---- */
.jt-side {
	flex: 0 0 auto;
	width: 92px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
}
/* Tiles Obra / Vídeo / Detalle. Botones cualificados con .jt-side (§2). */
.jt-side .jt-obratile,
.jt-side .jt-vidbtn,
.jt-side .jt-detbtn {
	flex: 0 0 auto;
	position: relative;
	padding: 0;
	height: 62px;
	cursor: pointer;
	background: var(--jt-verde-oscuro) !important;
	border: 1px solid rgba(244, 247, 246, 0.24);
	border-radius: 0 !important;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.25s var(--jt-easing), border-color 0.25s var(--jt-easing), transform 0.25s var(--jt-easing), box-shadow 0.25s var(--jt-easing);
}
.jt-side .jt-obratile:hover,
.jt-side .jt-vidbtn:hover,
.jt-side .jt-detbtn:hover { opacity: 1; }
.jt-side .jt-obratile img,
.jt-side .jt-vidbtn img,
.jt-side .jt-detbtn img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jt-side .jt-obratile.is-on,
.jt-side .jt-vidbtn.is-on,
.jt-side .jt-detbtn.is-on {
	opacity: 1;
	border-color: var(--jt-espuma);
}
.jt-side .jt-vidbtn img { opacity: 0.55; }
.jt-side .jt-vidbtn.is-on img { opacity: 0.8; }
.jt-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 0 4px;
	background: rgba(26, 47, 59, 0.72);
	font-family: 'Open Sans', sans-serif;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jt-espuma);
	text-align: center;
}
.jt-vidbtn-in {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 100%;
}
.jt-vidbtn-play {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(244, 247, 246, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jt-vidbtn-tri {
	width: 0;
	height: 0;
	border-left: 9px solid var(--jt-azul);
	border-top: 5.5px solid transparent;
	border-bottom: 5.5px solid transparent;
	margin-left: 2px;
}
/* La etiqueta "Vídeo" va centrada bajo el play (no como barra inferior). */
.jt-tile-label--vid {
	position: static;
	padding: 0;
	background: none;
}
/* El tile "Detalle" sólo aparece en móvil (≤680). En escritorio/tablet la
 * galería lateral hace ese papel. */
.jt-side .jt-detbtn { display: none; }

/* Galería de detalle (grid 2×4, 8 por página) */
.jt-galwrap {
	flex: 1 1 auto;
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}
.jt-gallabel {
	flex: 0 0 auto;
	padding-bottom: 2px;
	font-family: 'Open Sans', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(244, 247, 246, 0.45);
	text-align: center;
}
.jt-gallery {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, 1fr);
	gap: 6px;
	max-height: 226px;
	min-height: 0;
	align-content: start;
	overflow: hidden;
}
.jt-gallery .jt-thumb {
	position: relative;
	padding: 0;
	border: none;
	border-radius: 0 !important; /* mata el redondeo que hereda de Elementor */
	background: var(--jt-verde-oscuro);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s var(--jt-easing);
}
.jt-gallery .jt-thumb.is-page-hidden { display: none; }
.jt-gallery .jt-thumb:hover,
.jt-gallery .jt-thumb.is-active { opacity: 1; }
.jt-gallery .jt-thumb.is-active {
	outline: 2px solid var(--jt-espuma);
	outline-offset: -2px;
}
.jt-gallery .jt-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Paginador ▲/▼ + contador */
.jt-side .jt-arrow.jt-pager-prev,
.jt-side .jt-arrow.jt-pager-next {
	flex: 0 0 auto;
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--jt-espuma);
	background: transparent !important;
	border: 1px solid rgba(244, 247, 246, 0.2);
	border-radius: 0 !important;
	transition: opacity 0.2s var(--jt-easing);
}
.jt-pager-bottom {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.jt-page-label {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 9px;
	letter-spacing: 0.1em;
	color: rgba(244, 247, 246, 0.45);
}
.jt-side .jt-arrow.is-off {
	opacity: 0.25;
	pointer-events: none;
}

/* ---- Bloque 2 · Información (fondo arena) ---- */
.jt-infogrid {
	background: var(--jt-arena);
	color: var(--jt-azul);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 90px;
	/* Fondo Arena a ancho completo, pero CONTENIDO en caja (1320) y centrado:
	 * el gutter lateral crece en pantallas anchas para centrar la info, con un
	 * mínimo de 56px. Mismo modelo de caja que la cabecera y el resto de páginas. */
	padding: 76px max(56px, (100% - 1320px) / 2) 92px;
	align-items: start;
}
/* Cualificado con .jt-info-main (0,2,0) para GANAR al Kit de Elementor, que
 * estila los <h2> (.elementor-kit-N h2 = 0,1,1) y le imponía ~26px pisando el
 * tamaño propio (gotcha project-wide). Por eso el título "se quedaba pequeño". */
.jt-info-main .jt-info-title {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 34px; /* mismo tamaño que el h1 del hero (.jt-stage-title). */
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--jt-azul);
}
/* Cualificado con .jt-info-main (0,2,0) para GANAR al Kit de Elementor, que en
 * algunos entornos (p. ej. calaveuro) estila los <p> a 1rem (.elementor-kit-N p
 * = 0,1,1) y le pisaba el tamaño → la serie se veía grande. Mismo gotcha que el
 * título .jt-info-title. */
.jt-info-main .jt-info-serie {
	margin-top: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.7rem; /* label pequeña (era 0.8rem, se veía grande). */
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
/* El nombre de serie es un <a>. El Kit de Elementor estila los enlaces
 * (.elementor-kit-N a = 0,1,1) con font-size:1rem, font-family/weight propios y
 * color de realce → pisaba el tamaño (misma especificidad que .jt-info-serie a,
 * ganaba por orden). Cualificado con .jt-info-main (0,2,1) para GANAR y que el
 * enlace HEREDE la tipografía del <p> (0.7rem, turquesa…). */
.jt-info-main .jt-info-serie a {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s var(--jt-easing);
}
.jt-info-main .jt-info-serie a:hover { opacity: 0.7; }
.jt-info-lugar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--jt-verde-mar);
}
.jt-info-sep {
	width: 1px;
	height: 15px;
	background: rgba(58, 90, 101, 0.4);
	display: inline-block;
}
.jt-info-img {
	width: 100%;
	max-width: 520px;
	display: block;
	margin-top: 26px;
}
.jt-info-desc {
	margin-top: 26px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--jt-verde-mar);
	max-width: 560px;
}
.jt-info-desc p { margin-bottom: 1em; }
.jt-info-desc p:last-child { margin-bottom: 0; }

/* Ficha técnica */
.jt-tec-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-tec-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 22px;
}
.jt-tec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.jt-tec-k {
	font-family: 'Open Sans', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-tec-v {
	margin-top: 4px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--jt-verde-mar);
}
/* Botón "Ver" vídeo — <button>, cualificado con .jt-tec-list */
.jt-tec-list .jt-ver-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	/* !important: sin esto, Elementor/Hello rellenan el fondo del <button> en
	 * hover/focus. El botón "Ver" debe quedar SIEMPRE sin fondo (solo icono). */
	background: transparent !important;
	color: var(--jt-verde-mar);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.25s var(--jt-easing);
	font-family: 'Open Sans', sans-serif;
}
.jt-tec-list .jt-ver-btn:hover,
.jt-tec-list .jt-ver-btn:focus,
.jt-tec-list .jt-ver-btn:focus-visible,
.jt-tec-list .jt-ver-btn:active {
	opacity: 1;
	background: transparent !important;
	/* En hover, icono + texto en Azul Atlántico. !important: el kit de Elementor
	 * fija el color de los <button> en hover (§2). El icono usa currentColor. */
	color: var(--jt-azul) !important;
	outline: none;
}
.jt-tec-list .jt-ver-btn span {
	font-size: 12px;
	font-weight: 300;
}

.jt-tec-sep {
	height: 1px;
	background: rgba(58, 90, 101, 0.2);
	margin: 30px 0;
}
.jt-ficha-precio {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: var(--jt-azul);
}
.jt-ficha-iva {
	font-size: 13px;
	font-weight: 400;
	color: var(--jt-verde-mar);
}
.jt-ficha-estado .jt-precio { font-size: 22px; }
/* Nota de la ficha de ENCARGO (sustituye al precio: no se vende). */
.jt-ficha-encargo-nota {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	color: var(--jt-azul);
	margin: 0 0 4px;
}

/* CTAs de la ficha y de los modales (son <a>, sin trampa de <button>) */
.jt-ficha-ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}
.jt-ficha-ctas a,
.jt-modal-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-decoration: none;
}
.jt-cta-adq {
	background: var(--jt-verde-mar);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background 0.25s var(--jt-easing);
}
/* !important en color: Elementor aplica su color de enlace (turquesa) a
 * cualquier <a>; sin esto, el texto salía verde en vez de blanco. */
.jt-cta-adq,
.jt-cta-adq:hover,
.jt-cta-adq:focus,
.jt-cta-adq:visited { color: var(--jt-espuma) !important; }
.jt-cta-adq:hover { background: #2f4d58; }

/* ---- Modales (adquisición / novedades) ---- */
.jt-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
}
.jt-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 47, 59, 0.6);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.jt-modal-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: var(--jt-arena);
	padding: 36px 32px 32px;
	box-shadow: 0 30px 80px rgba(26, 47, 59, 0.4);
}
.jt-modal .jt-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	/* !important: Elementor/Hello no rellenan el fondo del <button> en hover/focus */
	background: transparent !important;
	color: var(--jt-verde-mar);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.jt-modal .jt-modal-close:hover,
.jt-modal .jt-modal-close:focus,
.jt-modal .jt-modal-close:focus-visible,
.jt-modal .jt-modal-close:active {
	color: var(--jt-azul);
	background: transparent !important;
	outline: none;
}
.jt-modal-title {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 28px;
	color: var(--jt-azul);
}
.jt-modal-text {
	margin-top: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--jt-verde-mar);
}
.jt-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}

/* Formulario de newsletter — <input> + <button> cualificado */
.jt-nl-form {
	display: flex;
	flex-direction: column;
	margin-top: 22px;
}
.jt-nl-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-nl-input {
	margin-top: 8px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid rgba(58, 90, 101, 0.35);
	border-radius: 0;
	background: var(--jt-espuma);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: var(--jt-azul);
}
.jt-nl-input:focus {
	outline: none;
	border-color: var(--jt-turquesa);
}
.jt-nl-form .jt-nl-submit {
	margin-top: 14px;
	height: 50px;
	padding: 0; /* neutraliza el padding:54px del Kit de Elementor (§2) */
	border: none;
	background: var(--jt-verde-mar);
	color: var(--jt-espuma);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s var(--jt-easing);
}
.jt-nl-form .jt-nl-submit:hover,
.jt-nl-form .jt-nl-submit:focus-visible {
	background: #2f4d58;
	outline: none;
}
.jt-nl-msg {
	margin-top: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	min-height: 1em;
}
.jt-nl-msg.is-ok { color: var(--jt-turquesa); }
/* Rojo tierra: único color de aviso, escogido para no chirriar sobre Arena */
.jt-nl-msg.is-error { color: #A24B3B; }

/* ---- Lightbox de vídeo ---- */
.jt-videobox {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
}
.jt-videobox-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 47, 59, 0.82);
}
.jt-videobox-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
}
.jt-videobox-frame {
	width: 100%;
	height: 100%;
	background: var(--jt-azul);
}
.jt-videobox-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.jt-videobox .jt-videobox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--jt-espuma);
	font-size: 30px;
	cursor: pointer;
}
.jt-videobox .jt-videobox-close:hover { color: var(--jt-turquesa-claro); } /* sobre overlay oscuro: turquesa-claro sí cumple (5.46:1) */
/* Animación de entrada del lightbox de vídeo (ficha técnica + "Ver vídeo" de libro). */
.jt-videobox:not([hidden]) { animation: jtVideoboxIn 0.28s var(--jt-easing); }
.jt-videobox:not([hidden]) .jt-videobox-inner { animation: jtVideoboxInner 0.34s var(--jt-easing); }
@keyframes jtVideoboxIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes jtVideoboxInner {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jt-videobox:not([hidden]),
	.jt-videobox:not([hidden]) .jt-videobox-inner { animation: none; }
}

/* ---- Visor de zoom (pan/zoom "Museo del Prado") ---- */
.jt-zoomer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(26, 47, 59, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Entrada suave al abrir el visor: fundido del fondo + la obra que "entra"
 * acercándose ligeramente (escala del stage, independiente del transform que el
 * JS aplica a la imagen). */
.jt-zoomer:not([hidden]) { animation: jtZoomerIn 0.28s var(--jt-easing); }
.jt-zoomer:not([hidden]) .jt-zoomer-stage { animation: jtZoomerStageIn 0.36s var(--jt-easing); }
@keyframes jtZoomerIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes jtZoomerStageIn {
	from { opacity: 0; transform: scale(0.965); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jt-zoomer:not([hidden]),
	.jt-zoomer:not([hidden]) .jt-zoomer-stage { animation: none; }
}

/* ---- LIGHTBOX del slideshow de detalle ----
 * Al pulsar la imagen grande en una vista de detalle se abre a pantalla casi
 * completa para verla a mayor tamaño, con flechas ‹ › para recorrer las vistas
 * y animación de entrada. Botones cualificados (§2). */
.jt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 6vw;
}
.jt-lightbox[hidden] { display: none; }
.jt-lightbox-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 47, 59, 0.92);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.jt-lightbox-fig {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.jt-lightbox-img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	display: block;
	/* drop-shadow (NO box-shadow): sigue el canal alfa, así una obra CIRCULAR con
	 * fondo transparente proyecta una sombra circular, no un rectángulo de color
	 * por detrás (box-shadow sombreaba la caja rectangular de la imagen). */
	filter: drop-shadow(0 20px 50px rgba(10, 20, 26, 0.55));
}
.jt-lightbox-cap {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: rgba(244, 247, 246, 0.8);
	text-align: center;
}
/* Botones redondos (mismo look que las flechas del visor). !important en fondo:
 * neutraliza el reset de <button> de Hello/Elementor (§2). */
.jt-lightbox button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--jt-espuma);
	background: rgba(26, 47, 59, 0.7) !important;
	border: 1px solid rgba(244, 247, 246, 0.5);
	border-radius: 999px !important;
	z-index: 2;
	transition: background 0.2s var(--jt-easing);
}
/* Mismo fix del SVG que en flechas/cierre: sin esto el icono se aplasta. */
.jt-lightbox button svg { flex: 0 0 auto; }
.jt-lightbox button:hover { background: rgba(26, 47, 59, 0.9) !important; }
.jt-lightbox-prev,
.jt-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
}
.jt-lightbox-prev { left: 2.5vw; }
.jt-lightbox-next { right: 2.5vw; }
.jt-lightbox-prev svg,
.jt-lightbox-next svg { width: 26px; height: 26px; }
.jt-lightbox-close {
	top: 3vh;
	right: 3vw;
	width: 44px;
	height: 44px;
}
.jt-lightbox-close svg { width: 20px; height: 20px; }
/* Sin vistas suficientes para navegar: ocultar flechas. */
.jt-lightbox.is-single .jt-lightbox-prev,
.jt-lightbox.is-single .jt-lightbox-next { display: none; }
/* Cursor "ampliar" sobre la imagen de detalle (invita a abrir el lightbox). */
.jt-photo.is-detail .jt-photo-box { cursor: zoom-in; }
/* Animación de entrada. */
.jt-lightbox:not([hidden]) { animation: jtLbIn 0.28s var(--jt-easing); }
.jt-lightbox:not([hidden]) .jt-lightbox-fig { animation: jtLbFigIn 0.34s var(--jt-easing); }
@keyframes jtLbIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes jtLbFigIn {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jt-lightbox:not([hidden]),
	.jt-lightbox:not([hidden]) .jt-lightbox-fig { animation: none; }
}
@media (max-width: 680px) {
	.jt-lightbox-prev,
	.jt-lightbox-next { width: 48px; height: 48px; }
	.jt-lightbox-prev { left: 8px; }
	.jt-lightbox-next { right: 8px; }
	.jt-lightbox-img { max-height: 74vh; }
}

/* Variante del lightbox para las OBRAS de una serie: bajo la imagen, título +
 * medidas + botón "ver ficha". Reutiliza el shell .jt-lightbox (overlay, fig,
 * botones, animación); sólo cambia el pie. */
.jt-lightbox--serie .jt-lightbox-img { max-height: 68vh; }
.jt-lightbox--serie .jt-lightbox-cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	max-width: 90vw;
}
.jt-lb-title {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	color: var(--jt-espuma);
	text-align: center;
}
.jt-lb-medidas {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: rgba(244, 247, 246, 0.7);
}
/* Botón "Ver ficha" — <a> cualificado con contenedor para ganar al kit (§2). */
.jt-lightbox--serie .jt-lb-ficha {
	margin-top: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border: 1px solid rgba(244, 247, 246, 0.6);
	border-radius: 999px;
	color: var(--jt-espuma);
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s var(--jt-easing), color 0.2s var(--jt-easing);
}
.jt-lightbox--serie .jt-lb-ficha:hover,
.jt-lightbox--serie .jt-lb-ficha:focus-visible {
	background: var(--jt-espuma);
	color: var(--jt-azul);
	outline: none;
}
@media (max-width: 680px) {
	.jt-lightbox--serie .jt-lightbox-img { max-height: 58vh; }
	.jt-lb-title { font-size: 20px; }
}

.jt-zoomer-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
.jt-zoomer-stage.is-grabbing { cursor: grabbing; }
/* iOS: sin esto, dos toques rápidos sobre los botones +/−/Ajustar/aspa los
 * interpreta Safari como "doble-toque para ampliar" de PÁGINA (el viewport usa
 * initial-scale=1, escalable) → magnifica todo el visor fijo y los controles se
 * salen de pantalla (Mayte, iOS, 13 ago 2026). `manipulation` desactiva ese
 * gesto SOLO en estos elementos (mantiene el clic normal y quita el retardo de
 * ~300 ms). El stage ya está cubierto por su touch-action:none. */
.jt-zoomer,
.jt-zoomer-controls .jt-zoom-ctrl,
.jt-zoomer .jt-zoomer-close { touch-action: manipulation; }
.jt-zoomer-img {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}
.jt-zoomer-controls {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
}
.jt-zoomer-controls .jt-zoom-ctrl {
	min-width: 44px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(244, 247, 246, 0.35);
	/* fondo OSCURO (no blanco tenue): así los controles y el icono blanco se
	 * ven sobre cualquier obra, incluso las de horizonte muy claro. */
	background: rgba(26, 47, 59, 0.55) !important;
	color: var(--jt-espuma);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background 0.25s var(--jt-easing);
}
.jt-zoomer-controls .jt-zoom-ctrl:hover,
.jt-zoomer-controls .jt-zoom-ctrl:focus-visible {
	background: rgba(26, 47, 59, 0.8) !important;
	outline: none;
}
.jt-zoomer .jt-zoomer-close {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0; /* neutraliza el padding:54px del Kit de Elementor (§2) */
	border: 1px solid rgba(244, 247, 246, 0.35);
	/* mismo fondo oscuro que los controles: visible en obras claras */
	background: rgba(26, 47, 59, 0.55) !important;
	color: var(--jt-espuma);
	font-size: 26px;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.jt-zoomer .jt-zoomer-close:hover { background: rgba(26, 47, 59, 0.8) !important; }

/* Responsive ficha — TABLET y MÓVIL comparten el MISMO layout (decisión Mayte
 * 12 ago): foto arriba y, debajo, TRES tiles (Obra · Vídeo · Detalle) que
 * reparten el ancho; la galería lateral se oculta y las vistas de detalle se
 * recorren desde el tile "Detalle" con las flechas ‹ ›. */
@media (max-width: 980px) {
	.jt-stage {
		--jt-stage-padx: 22px;
		--jt-stage-padb: 20px;
		padding: 20px var(--jt-stage-padx) var(--jt-stage-padb);
		min-height: calc(100dvh - var(--jt-stage-off));
	}
	.jt-stagebody {
		flex-direction: column;
		gap: 14px;
		padding-top: 14px;
	}
	.jt-photo { flex: 1 1 auto; min-height: 0; }
	.jt-side {
		width: auto;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		justify-content: flex-start;
	}
	.jt-galwrap { display: none; }
	.jt-side .jt-obratile,
	.jt-side .jt-vidbtn,
	.jt-side .jt-detbtn {
		display: block;
		flex: 1 1 0;
		width: auto;
		height: 58px;
	}
	/* Estado activo reforzado en táctil. */
	.jt-side .jt-obratile.is-on,
	.jt-side .jt-vidbtn.is-on,
	.jt-side .jt-detbtn.is-on {
		transform: scale(1.04);
		box-shadow: 0 8px 20px rgba(26, 47, 59, 0.5);
	}
	.jt-infogrid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 56px 22px;
	}
}
@media (max-width: 680px) {
	.jt-stage-title { font-size: 30px; }
	.jt-photo .jt-photo-box .jt-arrow { width: 44px; height: 44px; }
	.jt-photo .jt-ampliar { bottom: 8px; padding: 7px 11px; }
	.jt-info-main .jt-info-title { font-size: 30px; }
	.jt-info-img { display: none; }
	.jt-modal-box { padding: 30px 22px 26px; }
}

/* =========================================================================
 * 20) FICHA DE SERIE — plantilla taxonomy-serie.php (child theme v1.4.0+).
 * Archivo de la taxonomía `serie` (/serie/<término>/), 100% código. Reutiliza
 * .jt-zoom (5), .jt-badge (4), .jt-meta (15), .jt-precio (14) y el componente
 * de vídeo .jt-videobox (19). Botones cualificados con contenedor propio (§2).
 * ===================================================================== */
.jt-serie-page {
	/* 1432 = 1320 de CONTENIDO + 2×56 de gutter. Elementor usa "1320" como
	 * ancho de contenido con el gutter FUERA, así que para que el contenido
	 * quede exactamente a 1320 (alineado con la cabecera y el resto de páginas
	 * de Elementor), la caja debe incluir el gutter: 1320 + 112 = 1432. */
	max-width: 1432px;
	margin: 0 auto;
	padding: 40px 56px 0;
}
.jt-serie-crumb {
	margin: 44px 0 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jt-verde-mar);
}
.jt-serie-crumb a { color: var(--jt-verde-mar); }
.jt-serie-crumb span { margin: 0 8px; }
.jt-serie-h1 {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 108px; /* unificado con el global "H1 página" (antes 128px) */
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--jt-azul);
}
.jt-serie-cita {
	margin-top: 32px;
	max-width: 780px;
	font-family: 'Instrument Serif', serif;
	font-size: 30px;
	line-height: 1.3;
	color: var(--jt-azul);
}
.jt-serie-contexto {
	column-count: 2;
	column-gap: 56px;
	max-width: 1000px;
	margin: 64px 0 88px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--jt-azul);
}
.jt-serie-contexto p { margin-bottom: 1em; }
.jt-serie-contexto p:last-child { margin-bottom: 0; }

/* Imagen 21:9 de la serie (con vídeo opcional) */
.jt-serie-hero {
	position: relative;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--jt-azul);
	/* margin-top como red de seguridad: si una serie no tuviera contexto, la
	 * imagen nunca queda pegada a la cita. Con contexto delante, los márgenes
	 * colapsan y manda el 88px inferior del contexto (fiel al prototipo). */
	margin-top: 72px;
	margin-bottom: 96px;
}
/* Variante VÍDEO: el vídeo (Vimeo, autoplay muted loop) se reproduce INLINE en
 * el sitio del hero, a su proporción natural 16:9; el iframe rellena la caja. */
.jt-serie-hero--video { aspect-ratio: 16 / 9; }
.jt-serie-hero-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.jt-serie-hero.has-video { cursor: pointer; }
.jt-serie-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--jt-easing);
}
.jt-serie-hero.has-video:hover .jt-serie-hero-img { transform: scale(1.02); }
.jt-serie-hero .jt-serie-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 78px;
	height: 78px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(244, 247, 246, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s var(--jt-easing);
}
.jt-serie-hero.has-video:hover .jt-serie-play { transform: scale(1.08); }
.jt-serie-play-tri {
	width: 0;
	height: 0;
	border-left: 21px solid var(--jt-azul);
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	margin-left: 5px;
}

/* Cabecera "Obras de la serie" + grid */
.jt-serie-obras-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 40px;
}
.jt-serie-obras-head h2 {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	color: var(--jt-azul);
}
.jt-serie-obras-count {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jt-verde-mar);
}
/* Contador + interruptor "Solo disponibles", juntos a la derecha del H2. El
 * interruptor reutiliza .jt-cat-toggle-wrap y .jt-toggle del catálogo (§9 y §16),
 * así el control es el MISMO en las dos páginas sin duplicar estilos. */
.jt-serie-obras-tools {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
/* Tarjeta filtrada (assets/js/serie-obras.js). Selector cualificado a propósito:
 * el kit de Elementor pisa las clases sueltas. */
.jt-serie-obras-grid .jt-obra-card.is-oculta {
	display: none;
}
.jt-serie-obras-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 40px;
}
/* Encargos: MASONRY (CSS columns, como el catálogo) — las obras tienen
 * proporciones muy dispares (cuadradas, apaisadas, panorámicas 400×200), así
 * encajan empaquetadas sin dejar huecos bajo las más bajas. */
.jt-encargos-grid {
	column-count: 3;
	column-gap: 40px;
	padding-bottom: 40px;
}
.jt-encargos-grid .jt-obra-card {
	display: block;
	break-inside: avoid;
	margin-bottom: 44px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
/* Tarjeta de obra = <a> con enlace directo a la ficha (Juan 2026-07: retirado
 * el lightbox de navegación por las obras de la serie). Es <a> y no <button>
 * a propósito: evita las rarezas de render y la herencia de estilos de
 * <button> con Elementor (§2). */
.jt-serie-obras-grid .jt-obra-card {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.jt-obra-card-img {
	display: block;
	position: relative;
	overflow: hidden;
	/* Sin fondo, mismo motivo que .jt-cat-img-wrap: respeta los PNG transparentes. */
	background: transparent;
}
.jt-obra-card-img .jt-img { width: 100%; height: auto; display: block; }
.jt-obra-card-body { display: block; padding-top: 16px; }
.jt-obra-titulo {
	display: block;
	margin: 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	color: var(--jt-azul);
}
.jt-obra-card-body .jt-meta { display: block; margin-top: 8px; }
.jt-obra-card-body .jt-precio { display: block; margin-top: 16px; }

/* Navegación anterior / siguiente serie */
.jt-serie-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 72px;
	padding: 44px 0 96px;
	border-top: 1px solid rgba(58, 90, 101, 0.2);
}
.jt-serie-nav a { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.jt-serie-nav-next { text-align: right; }
.jt-serie-nav-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jt-verde-mar);
}
.jt-serie-nav-name {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	color: var(--jt-azul);
	transition: color 0.25s var(--jt-easing);
}
.jt-serie-nav a:hover .jt-serie-nav-name { color: var(--jt-turquesa); }

/* Responsive ficha de serie */
@media (max-width: 980px) {
	.jt-serie-h1 { font-size: 74px; }
	.jt-serie-contexto { column-count: 1; }
	.jt-serie-obras-grid { grid-template-columns: 1fr 1fr; }
	.jt-encargos-grid { column-count: 2; }
}
@media (max-width: 680px) {
	.jt-serie-page { padding-left: 22px; padding-right: 22px; }
	.jt-serie-h1 { font-size: 52px; }
	.jt-serie-obras-grid { grid-template-columns: 1fr; }
	.jt-encargos-grid { column-count: 1; }
	.jt-serie-nav { gap: 20px; }
}

/* =========================================================================
 * 21) "VER MÁS" — despliegue de contenido inline, reutilizable (child v1.6.0+).
 * Para Trayectoria, Encargos o cualquier página de Elementor. Uso (clases en
 * la pestaña Avanzado de Elementor):
 *   .jt-vermas         → contenedor que agrupa el bloque
 *   .jt-vermas-extra   → lo que se oculta hasta pulsar
 *   .jt-vermas-toggle  → el botón/enlace "Ver más → / Ver menos ↑"
 * Lógica en assets/js/vermas.js. La ocultación SOLO aplica cuando el JS ha
 * marcado el bloque (.jt-vermas-js) y está cerrado → sin JS, el contenido se
 * ve entero (mejora progresiva). Al abrir, .jt-vermas-extra recupera su
 * display natural de Elementor (flex/grid), por eso solo se AÑADE el ocultar.
 * ===================================================================== */
.jt-vermas-js:not(.is-open) .jt-vermas-extra { display: none !important; }
/* Variante para listas en columnas (colección, distinciones): se ocultan los
 * ELEMENTOS extra individualmente (no un contenedor), para no romper el flujo
 * de columnas CSS. */
.jt-vermas-js:not(.is-open) .jt-vermas-item { display: none !important; }

.jt-vermas-toggle {
	display: inline-block;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--jt-turquesa);
	transition: color 0.25s var(--jt-easing);
}
.jt-vermas-toggle:hover,
.jt-vermas-toggle:focus-visible {
	color: var(--jt-azul);
	outline: none;
}

/* =========================================================================
 * 22) TRAYECTORIA — tabla de exposiciones + listas (child v1.6.2+).
 * Lo pintan los shortcodes del plugin ([jt_exposiciones],
 * [jt_coleccion_publica], [jt_distinciones], [jt_bibliografia]); el cliente
 * solo rellena formularios en Escritorio → Trayectoria. Combinado con el
 * componente "Ver más" (sección 21).
 *
 * Exposiciones — desktop: rejilla año | (tipo · nombre · lugar).
 *                móvil: cada año es un acordeón (año + botón +) con checkbox,
 *                sin JS (truco CSS, el marcado ya lo genera el shortcode).
 * ===================================================================== */
.jt-expo-table { border-top: 1px solid rgba(58, 90, 101, 0.22); }
.jt-expo-group {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: baseline;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(58, 90, 101, 0.22);
}
.jt-expo-toggle { display: none; }        /* checkbox: solo actúa en móvil */
.jt-expo-yearrow { display: contents; }   /* el año entra directo en la rejilla */
.jt-expo-icon { display: none; }          /* el +/- solo aparece en móvil */
.jt-expo-year {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	color: var(--jt-turquesa);
}
.jt-expo-items { display: flex; flex-direction: column; gap: 16px; }
.jt-expo-item {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	align-items: baseline;
	gap: 24px;
}
.jt-expo-type {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jt-verde-mar);
}
.jt-expo-name {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--jt-azul);
}
.jt-expo-place {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: var(--jt-verde-mar);
}

/* Obra en colección pública — 2 columnas con guion turquesa */
.jt-colec {
	list-style: none;
	columns: 2;
	column-gap: 56px;
	max-width: 1000px;
}
.jt-colec li {
	break-inside: avoid;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--jt-azul);
	padding: 10px 0;
	border-bottom: 1px solid rgba(58, 90, 101, 0.22);
}
.jt-colec li::before {
	content: "\2014";
	color: var(--jt-turquesa);
	margin-right: 10px;
}

/* Distinciones — 2 columnas */
.jt-dist {
	column-count: 2;
	column-gap: 64px;
	max-width: 1000px;
	border-top: 1px solid rgba(58, 90, 101, 0.22);
}
.jt-dist-item {
	break-inside: avoid;
	display: flex;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(58, 90, 101, 0.22);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--jt-azul);
}
.jt-dist-item::before {
	content: "\2014";
	flex: none;
	color: var(--jt-turquesa);
}

/* Bibliografía seleccionada — lista simple */
.jt-biblio {
	list-style: none;
	max-width: 780px;
	border-top: 1px solid rgba(58, 90, 101, 0.22);
}
.jt-biblio li {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--jt-azul);
	padding: 16px 0;
	border-bottom: 1px solid rgba(58, 90, 101, 0.22);
}

@media (max-width: 680px) {
	/* Exposiciones: acordeón por año (el año abre/cierra sus exposiciones) */
	.jt-expo-group { grid-template-columns: 1fr; gap: 0; padding: 0; }
	.jt-expo-yearrow {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
		cursor: pointer;
	}
	.jt-expo-year { font-style: italic; }
	.jt-expo-icon {
		display: block !important;
		color: var(--jt-turquesa);
		font-size: 26px;
		font-weight: 300;
		line-height: 1;
	}
	.jt-expo-icon::before { content: "+"; }
	.jt-expo-toggle:checked ~ .jt-expo-yearrow .jt-expo-icon::before { content: "\2212"; }
	.jt-expo-items { display: none !important; }
	.jt-expo-toggle:checked ~ .jt-expo-items { display: flex !important; padding-bottom: 18px; }
	.jt-expo-item { grid-template-columns: 1fr; gap: 3px; }
	/* Colección y distinciones a 1 columna */
	.jt-colec { columns: 1; }
	.jt-dist { column-count: 1; }
}

/* =========================================================================
 * 23) FOCO DE TECLADO VISIBLE (WCAG 2.4.7, accesibilidad Kit Digital)
 * Anillo de doble capa (azul + espuma) para que el foco se vea sobre CUALQUIER
 * fondo del sitio, claro (arena) u oscuro (escenario azul). Solo aparece al
 * navegar con TECLADO (:focus-visible) — con ratón no se ve nada, así que no
 * afecta al diseño. El `outline` transparente deja un indicador en el modo de
 * alto contraste de Windows (donde los box-shadow se descartan). !important
 * para ganar al `outline: none` que ponían las reglas de cada componente y a
 * los estilos de foco de Elementor/Hello.
 * Se aplica a los elementos interactivos DENTRO de mis componentes; el menú y
 * el pie (Elementor) usan su propio foco por defecto del navegador.
 * ===================================================================== */
.jt-catalogo :focus-visible,
.jt-ficha :focus-visible,
.jt-serie-page :focus-visible,
.jt-modal :focus-visible,
.jt-zoomer :focus-visible,
.jt-videobox :focus-visible,
.jt-vermas-toggle:focus-visible {
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px var(--jt-azul), 0 0 0 5px var(--jt-espuma) !important;
}

/* =========================================================================
 * 24) REVEAL — entrada suave (fade-in-up) al aparecer en pantalla.
 * Marcador: clase .jt-reveal en el elemento (título/intro del hero en Elementor,
 * o tarjetas de los grids desde el código). El escalonado y el retardo los pone
 * assets/js/reveal.js vía transition-delay inline.
 *
 * A PRUEBA DE FALLOS: el estado oculto SOLO se aplica bajo .jt-anim (que añade
 * un inline en <head> tras comprobar soporte + reduced-motion). Sin JS o con
 * "reducir movimiento", no hay .jt-anim → el contenido se ve siempre. Nunca se
 * repite el bug de contenido invisible por opacity:0 sin su JS.
 * ===================================================================== */
.jt-anim .jt-reveal {
	opacity: 0;
	/* Recorrido (subida) y escala salen de variables para poder cambiar la
	 * INTENSIDAD del efecto por variante (interruptor ?rev=N; ver reveal.js).
	 * Los valores por defecto = Variante 1 «Suave» (la de siempre): 20px, sin
	 * escala, 1,2s. */
	transform: translateY(var(--jt-rev-shift, 20px)) scale(var(--jt-rev-scale, 1));
	/* Longhands (NO el shorthand) para no pisar el transition-delay que reveal.js
	 * pone inline (escalonado). !important en propiedad/duración/curva para que
	 * Elementor no anule el transition del transform — eso provocaba el "fade y
	 * luego salto de posición" (la opacidad animaba pero el transform daba un
	 * brinco). El delay NO lleva !important: lo controla el JS. */
	transition-property: opacity, transform !important;
	transition-duration: var(--jt-rev-dur, 1.2s) !important;
	transition-timing-function: var(--jt-easing) !important;
}
.jt-anim .jt-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Variantes de INTENSIDAD del reveal (para que Javier elija).
 * El interruptor es ?rev=1|2|3 en la URL (se recuerda en localStorage); reveal.js
 * pone la clase jt-rev-N en <html> y ajusta la CASCADA (ms entre tarjetas).
 * Aquí solo cambian recorrido / escala / duración vía variables.
 *   rev-1 «Suave»  → valores por defecto de arriba (20px, —, 1,2s, cascada 70ms).
 *   rev-2 «Medio»  → 44px, —,        0,95s, cascada 120ms.
 *   rev-3 «Amplio» → 64px, 0,94→1,   1,0s,  cascada 150ms.  ← DEFAULT (2.49.1).
 * Los valores por defecto de la regla de arriba siguen siendo los de rev-1: son
 * el fallback cuando reveal.js NO puede correr (sin JS) — nunca queda invisible. */
.jt-anim.jt-rev-2 .jt-reveal { --jt-rev-shift: 44px; --jt-rev-dur: .95s; }
.jt-anim.jt-rev-3 .jt-reveal { --jt-rev-shift: 64px; --jt-rev-scale: .94; --jt-rev-dur: 1s; }
/* Red de seguridad accesibilidad: aunque el JS fallara la comprobación, con
 * "reducir movimiento" del sistema no se anima ni oculta nada. */
@media (prefers-reduced-motion: reduce) {
	.jt-anim .jt-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 25) REALCE DE FRASES (home cinemática) — cursiva + color arena claro.
 *
 * Uso: envolver la palabra o grupo en <em class="jt-realce"> dentro del widget
 * de texto. El TAMAÑO se controla aparte, en la propia etiqueta y en `em`
 * (relativo al texto normal), p. ej.:
 *     <em class="jt-realce" style="font-size:1.2em">Buscamos</em>
 *
 * ⚠️ SOLO SOBRE FONDO OSCURO (home / secciones azules). Sobre Arena o blanco
 * este tono NO cumple contraste AA — ahí usar --jt-turquesa.
 * Contraste medido sobre el azul #1A2F3B: 8,8:1 ✅ (AAA).
 * ---------------------------------------------------------------------- */
.jt-realce {
	font-style: italic;
	color: #E0CCA0;
}

/* =========================================================================
 * 25) LIBROS Y CATÁLOGOS — rejilla de 3 (child v2.30.0).
 * La pinta el shortcode [jt_grid_libros] (plugin, CPT `libro`). El H1
 * "Libros y catálogos" + subtítulo los monta la usuaria en Elementor; aquí
 * solo el bloque dinámico (rejilla + nota de envíos). Fiel al prototipo
 * (Handoff - Libros y catálogos.dc.html); colores por tokens AA del tema.
 * Line-height explícito en las etiquetas Open Sans para no heredar el ~1.85
 * global de Elementor (gotcha ya conocido de las tarjetas del catálogo).
 * ---------------------------------------------------------------------- */
.jt-libros-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 48px;
	padding-bottom: 80px;
}
.jt-libro-card {
	display: flex;
	flex-direction: column;
}
.jt-libro-cover {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	box-shadow: 0 20px 44px rgba(26, 47, 59, 0.2);
	transition: transform 0.5s var(--jt-easing), box-shadow 0.5s ease;
}
.jt-libro-card:hover .jt-libro-cover {
	transform: translateY(-6px);
	box-shadow: 0 34px 60px rgba(26, 47, 59, 0.28);
}
.jt-libro-card .jt-libro-titulo {
	margin: 26px 0 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.05;
	color: var(--jt-azul);
}
.jt-libro-datos {
	margin: 8px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 1.4;
	color: var(--jt-verde-mar);
}
.jt-libro-precio {
	margin: 10px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jt-azul);
}
.jt-libro-sinopsis {
	margin: 16px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--jt-azul);
}
/* "Ver vídeo" del libro — enlace discreto con icono play, entre la sinopsis y
 * "Adquirir ejemplar". <button> cualificado con .jt-libro-card (§2: el kit de
 * Elementor rellena el fondo de los <button>). */
.jt-libro-card .jt-libro-video {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding: 0;
	border: none;
	background: transparent !important;
	color: var(--jt-verde-mar);
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.2s var(--jt-easing);
}
.jt-libro-card .jt-libro-video:hover,
.jt-libro-card .jt-libro-video:focus-visible { color: var(--jt-azul); outline: none; }
.jt-libro-card .jt-libro-video svg { flex: 0 0 auto; }

.jt-libro-buy {
	position: relative;
	align-self: flex-start;
	margin-top: 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jt-turquesa);
	text-decoration: none;
}
.jt-libro-buy::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -3px;
	height: 1px;
	background: var(--jt-turquesa);
	transition: right 0.3s ease;
}
.jt-libro-buy:hover::after,
.jt-libro-buy:focus-visible::after {
	right: 0;
}
.jt-libros-nota {
	border-top: 1px solid var(--jt-gris);
	margin-top: 24px;
	padding: 40px 0 0;
	text-align: center;
}
.jt-libros-nota p {
	max-width: 620px;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--jt-verde-mar);
}
/* Utilidad de texto solo para lectores de pantalla (por si el tema padre no la trae). */
.jt-libro-buy .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 980px) {
	.jt-libros-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
}
@media (max-width: 680px) {
	.jt-libros-grid { grid-template-columns: 1fr; gap: 56px; }
	.jt-libro-card .jt-libro-titulo { font-size: 28px; }
}

/* =========================================================================
 * 26) LA MIRADA — blog de vídeos (child v2.30.0).
 * La pinta el shortcode [jt_grid_mirada] (plugin): pills de categoría +
 * entrada destacada + rejilla; posts NATIVOS con categorías El Estudio /
 * Esencia / Crónica. Filtro y lightbox en assets/js/mirada.js; el lightbox
 * reutiliza el componente .jt-videobox (§19). El H1 "La mirada" lo monta la
 * usuaria en Elementor. Fiel al prototipo (Handoff - La mirada.dc.html).
 * ---------------------------------------------------------------------- */

/* Fondo de página de "La mirada" (listado + entradas): Blanco Espuma, en vez
 * del Arena del resto de interiores. La clase la pone jt_body_class_mirada()
 * (functions.php). En la Página del listado (Elementor), si su sección lleva
 * fondo propio hay que dejarla transparente para que se vea este. */
body.jt-mirada-page {
	background-color: var(--jt-espuma);
}

/* Pills de categoría — mismas reglas que §8 pero cualificadas con el
 * contenedor propio (especificidad 0,2,0 para ganar al reset de Hello y al
 * Kit global de Elementor sobre <button>, sin !important). */
.jt-mirada-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 56px;
}
.jt-mirada-filtros .jt-pill {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--jt-verde-mar);
	border: 1px solid rgba(58, 90, 101, 0.35);
	background: transparent;
	transition: background 0.3s var(--jt-easing), color 0.3s var(--jt-easing), border-color 0.3s var(--jt-easing);
	cursor: pointer;
}
.jt-mirada-filtros .jt-pill:hover,
.jt-mirada-filtros .jt-pill:focus-visible {
	border-color: var(--jt-azul);
	color: var(--jt-azul);
	outline: none;
}
.jt-mirada-filtros .jt-pill.is-active {
	background: var(--jt-azul);
	border-color: var(--jt-azul);
	color: var(--jt-espuma);
	font-weight: 600;
}

/* Eyebrow de categoría (compartido destacada + rejilla). Mismo estilo que las
 * etiquetas de la ficha de obra (.jt-tec-label, §19): Open Sans 11px, peso 600
 * (sin negrita fuerte), letter-spacing 0.16em, uppercase, turquesa AA. */
.jt-mirada-cat {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-mirada-anio {
	margin: 8px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--jt-verde-mar);
}

/* Entrada destacada (solo en "Todas") */
.jt-mirada-feat {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 48px;
	align-items: center;
	padding-bottom: 72px;
	margin-bottom: 64px;
	border-bottom: 1px solid var(--jt-gris);
	color: inherit;
	text-decoration: none;
}
.jt-mirada-feat.is-oculta { display: none; }
.jt-mirada-feat-img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
/* Título cualificado con .jt-mirada-feat (0,2,0) para ganar a Elementor
 * (`.elementor-kit-6 h2` = 0,1,1, que si no fuerza los h2 a 1.625rem/26px). */
.jt-mirada-feat .jt-mirada-feat-titulo {
	margin: 16px 0 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 1.02;
	color: var(--jt-azul);
	transition: color 0.3s ease;
}
.jt-mirada-feat:hover .jt-mirada-feat-titulo {
	color: var(--jt-turquesa);
}
.jt-mirada-feat-extracto {
	margin: 20px 0 0;
	max-width: 420px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--jt-azul);
}

/* Rejilla de entradas */
.jt-mirada-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px 40px;
}
.jt-mirada-post {
	display: block;
	color: inherit;
	text-decoration: none;
}
.jt-mirada-post.is-oculta { display: none; }
.jt-mirada-post-img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.jt-mirada-post .jt-mirada-cat { margin-top: 18px; }
.jt-mirada-post .jt-mirada-post-titulo {
	margin: 8px 0 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.12;
	color: var(--jt-azul);
	transition: color 0.3s ease;
}
.jt-mirada-post:hover .jt-mirada-post-titulo {
	color: var(--jt-turquesa);
}

@media (max-width: 980px) {
	.jt-mirada-feat { grid-template-columns: 1fr; gap: 28px; }
	.jt-mirada-feat .jt-mirada-feat-titulo { font-size: 40px; }
	.jt-mirada-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; }
}
@media (max-width: 680px) {
	.jt-mirada-grid { grid-template-columns: 1fr; gap: 44px; }
	.jt-mirada-feat .jt-mirada-feat-titulo { font-size: 34px; }
}

/* =========================================================================
 * 27) SINGLE DE LIBRO — ficha por título (child v2.31.0).
 * La pinta single-libro.php. La rejilla de Libros NO enlaza aquí (el botón va
 * a la tienda), pero la plantilla queda lista. Dos columnas: portada sticky +
 * datos. Fiel al prototipo (Libro - Origen.dc.html); tokens AA del tema.
 * Reutiliza la tarjeta de §25 (.jt-libro-*) en "Otros títulos".
 * ---------------------------------------------------------------------- */
.jt-libro-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 56px 0;
}
.jt-libro-single-volver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--jt-turquesa);
	text-decoration: none;
}
.jt-libro-single-volver:hover {
	color: var(--jt-azul);
}
.jt-libro-single-cols {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: start;
}
.jt-libro-single-cover {
	position: sticky;
	top: 110px;
	background: var(--jt-gris);
	overflow: hidden;
}
.jt-libro-single-coverimg {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.jt-libro-single-eyebrow {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-libro-single-titulo {
	margin: 16px 0 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 92px;
	line-height: 0.94;
	letter-spacing: -0.01em;
	color: var(--jt-azul);
}
.jt-libro-single-precio {
	margin: 34px 0 0;
	font-family: 'Instrument Serif', serif;
	font-size: 46px;
	line-height: 1;
	color: var(--jt-azul);
}
/* Mismo botón que "Solicitar adquisición" de la ficha de obra (.jt-cta-adq +
 * base .jt-ficha-ctas a, §19): rectángulo sólido verde mar, alto 54px, Open
 * Sans 14px/600, icono + texto centrados. El color en espuma va con !important
 * porque Elementor pinta cualquier <a> con su color de enlace (turquesa). */
.jt-libro-single-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
	padding: 0 32px;
	height: 54px;
	background: var(--jt-verde-mar);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.25s var(--jt-easing);
}
.jt-libro-single-buy,
.jt-libro-single-buy:hover,
.jt-libro-single-buy:focus,
.jt-libro-single-buy:visited { color: var(--jt-espuma) !important; }
.jt-libro-single-buy:hover { background: #2f4d58; }
.jt-libro-single-nota {
	margin: 12px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--jt-verde-mar);
}
.jt-libro-single-desc {
	margin-top: 48px;
	padding-top: 34px;
	border-top: 1px solid var(--jt-gris);
}
.jt-libro-single-desc p {
	margin: 0 0 1em;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--jt-azul);
	max-width: 520px;
}
.jt-libro-single-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 40px 0 0;
}
.jt-libro-single-specs dt {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--jt-turquesa);
}
.jt-libro-single-specs dd {
	margin: 8px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--jt-azul);
}
.jt-libro-related {
	max-width: 1180px;
	margin: 0 auto;
	padding: 110px 56px 96px;
}
.jt-libro-related .jt-libro-related-titulo {
	margin: 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	color: var(--jt-azul);
}
.jt-libro-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px 48px;
	margin-top: 44px;
	max-width: 880px;
}
/* La tarjeta de §25 usada como enlace en "Otros títulos" */
a.jt-libro-card {
	color: inherit;
	text-decoration: none;
}
@media (max-width: 980px) {
	.jt-libro-single-cols { grid-template-columns: 1fr; gap: 40px; }
	.jt-libro-single-cover { position: static; max-width: 420px; }
	.jt-libro-single-titulo { font-size: 62px; }
}
@media (max-width: 680px) {
	.jt-libro-single { padding: 40px 24px 0; }
	.jt-libro-single-titulo { font-size: 46px; }
	.jt-libro-single-precio { font-size: 38px; }
	.jt-libro-single-buy { width: 100%; justify-content: center; }
	.jt-libro-single-specs { grid-template-columns: 1fr; }
	.jt-libro-related { padding: 64px 24px 56px; }
	.jt-libro-related-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
}

/* =========================================================================
 * 28) SINGLE DE "LA MIRADA" — entrada del blog (child v2.31.0).
 * La pinta single.php (post nativo). Hero + cabecera (categoría·fecha·H1·lead)
 * + cuerpo the_content() (el vídeo va como bloque de Gutenberg) + pie
 * (volver + compartir). Fiel al prototipo (Post - ORIGEN.dc.html); tokens AA.
 * ---------------------------------------------------------------------- */
.jt-mirada-single-hero {
	width: 100%;
	height: 66vh;
	min-height: 380px;
	background: var(--jt-azul);
	overflow: hidden;
}
.jt-mirada-single-heroimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jt-mirada-single-head {
	max-width: 900px;
	margin: 0 auto;
	padding: 72px 56px 0;
}
.jt-mirada-single-meta {
	display: flex;
	align-items: center;
	gap: 14px;
}
.jt-mirada-single-sep {
	width: 18px;
	height: 1px;
	background: var(--jt-gris);
}
.jt-mirada-single-fecha {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--jt-verde-mar);
}
.jt-mirada-single-titulo {
	margin: 22px 0 0;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 80px;
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: var(--jt-azul);
	text-wrap: pretty;
}
.jt-mirada-single-lead {
	margin: 30px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 23px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--jt-azul);
	text-wrap: pretty;
}
/* El cuerpo se ensancha hasta el ancho del VÍDEO (1120, como el prototipo); el
 * TEXTO va más estrecho (800) y centrado, y los vídeos/embeds de Gutenberg
 * ocupan todo el ancho → el vídeo queda más ancho que el título y el contenido. */
.jt-mirada-single-body {
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 56px 0;
}
/* Bloques de TEXTO: medida de lectura 800, centrados en el cuerpo ancho. */
.jt-mirada-single-body > p,
.jt-mirada-single-body > h2,
.jt-mirada-single-body > h3,
.jt-mirada-single-body > h4,
.jt-mirada-single-body > ul,
.jt-mirada-single-body > ol,
.jt-mirada-single-body > blockquote,
.jt-mirada-single-body > figure.wp-block-image {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.jt-mirada-single-body p {
	margin-top: 0;
	margin-bottom: 1.2em;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--jt-azul);
}
.jt-mirada-single-body h2,
.jt-mirada-single-body h3 {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	color: var(--jt-azul);
}
.jt-mirada-single-body img {
	max-width: 100%;
	height: auto;
}
/* Vídeos incrustados de Gutenberg (YouTube/Vimeo): 16:9 a todo el ancho. */
.jt-mirada-single-body .wp-block-embed__wrapper,
.jt-mirada-single-body figure.wp-block-embed {
	position: relative;
	margin: 32px 0;
}
.jt-mirada-single-body .wp-block-embed iframe,
.jt-mirada-single-body iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	display: block;
	background: var(--jt-azul);
}
.jt-mirada-single-pie {
	max-width: 900px;
	margin: 64px auto 0;
	padding: 34px 56px 40px;
	border-top: 1px solid var(--jt-gris);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.jt-mirada-single-volver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--jt-turquesa);
	text-decoration: none;
}
.jt-mirada-single-volver:hover {
	color: var(--jt-azul);
}
.jt-mirada-single-share {
	display: flex;
	align-items: center;
	gap: 16px;
}
.jt-mirada-single-sharelbl {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jt-verde-mar);
}
.jt-mirada-single-share a {
	display: inline-flex;
	color: var(--jt-verde-mar);
	transition: color 0.3s var(--jt-easing);
}
.jt-mirada-single-share a:hover {
	color: var(--jt-turquesa);
}

/* "Seguir leyendo" — rejilla de 3 relacionados (otras entradas + libros),
 * reutiliza la tarjeta .jt-mirada-post y la rejilla .jt-mirada-grid. */
.jt-mirada-related {
	max-width: 1320px;
	margin: 0 auto;
	padding: 48px 56px 96px;
}
.jt-mirada-related .jt-mirada-related-titulo {
	margin: 0 0 44px;
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	color: var(--jt-azul);
}

@media (max-width: 980px) {
	.jt-mirada-single-hero { height: 52vh; }
	.jt-mirada-single-head,
	.jt-mirada-single-body,
	.jt-mirada-single-pie,
	.jt-mirada-related { padding-left: 40px; padding-right: 40px; }
	.jt-mirada-single-titulo { font-size: 62px; }
}
@media (max-width: 680px) {
	.jt-mirada-single-head,
	.jt-mirada-single-body,
	.jt-mirada-single-pie,
	.jt-mirada-related { padding-left: 22px; padding-right: 22px; }
	.jt-mirada-single-titulo { font-size: 40px; }
	.jt-mirada-single-lead { font-size: 19px; margin-top: 22px; }
	.jt-mirada-single-pie { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Ficha de obra · enlace "Ficha técnica ↓"
   El visor (.jt-stage) ocupa el alto de la ventana, así que el precio y los
   botones de contacto quedan siempre bajo el pliegue y pasan desapercibidos.
   Este enlace, al pie del visor, es la única pista de que hay más abajo.
   ---------------------------------------------------------------------- */
/* BANDA de la ficha técnica, al pie del escenario, con la lengüeta centrada.
 * Color Arena, el mismo de la sección de información: se lee como el borde
 * superior de esa ficha asomando por debajo de la obra.
 *
 * Es un hijo flex más de .jt-stage (alto exacto, hijos con min-height:0), así
 * que el visor le cede este alto SOLO — no hay que tocar initStageHeight.
 * El clamp evita el fallo clásico de fiarlo todo a vh: 5vh son 54px en un
 * monitor de 1080 pero solo 40 en un portátil de 800, por debajo del objetivo
 * táctil de 44. */
.jt-tecbar {
	/* Lo que la lengüeta sobresale por encima de la banda. En una variable
	 * porque el hueco de arriba depende de ello: si se toca el alto de una,
	 * el aire se recalcula solo. */
	--jt-tec-asoma: 12px;
	flex: 0 0 clamp(40px, 4.5vh, 52px);
	/* SIN esto la banda se ESTIRA para contener la lengüeta y ésta no asoma: los
	 * elementos flex traen min-height:auto y no encogen por debajo de su
	 * contenido. Con min-height:0 la banda respeta su alto y la lengüeta, que es
	 * más alta, desborda hacia arriba — que es justo el efecto que se busca. */
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Hueco ARRIBA para que la lengüeta no se monte sobre lo que tiene encima:
	 * los 12px que asoma + 12 de aire. Va aquí y no en .jt-side porque el hueco
	 * pertenece a quien tiene la lengüeta, y así sirve para los dos casos: en
	 * móvil se montaba sobre la fila de miniaturas y en escritorio tapaba el
	 * borde inferior de la obra. El escenario tiene alto exacto, así que estos
	 * 24px se los cede el visor solo, como el resto de la banda.
	 * A los lados y abajo, a sangre: cancela el relleno de .jt-stage, sea el que
	 * sea en cada breakpoint (de ahí las variables). */
	margin: calc(var(--jt-tec-asoma) + 12px) calc(var(--jt-stage-padx) * -1) calc(var(--jt-stage-padb) * -1);
	background: var(--jt-arena);
}
/* La LENGÜETA: más alta que la banda, así sobresale hacia la obra como el
 * índice de una ficha de archivador. */
.jt-tec-jump {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-width: 128px;
	min-height: 52px;
	padding: 5px 26px 4px;
	border-radius: 12px 12px 0 0;
	background: var(--jt-arena);
	color: var(--jt-azul) !important;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s var(--jt-easing), opacity 0.3s var(--jt-easing),
		transform 0.3s var(--jt-easing);
}
/* Al bajar desaparece: ya ha cumplido, y así no se cuela bajo la cabecera
 * pegajosa. La clase la pone ficha-obra.js (initTecFade). Se oculta la LENGÜETA,
 * no la banda: la banda es el borde de la ficha y debe seguir ahí. */
.jt-tecbar.is-scrolled .jt-tec-jump {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.jt-tec-jump:hover,
.jt-tec-jump:focus-visible {
	background: #E7E0D0; /* Arena un punto más oscuro: el único hover posible sin
	                        romper la ilusión de que la lengüeta es la ficha. */
	outline: none;
}
/* La flecha late despacio para llamar la atención sin marear. */
.jt-tec-jump svg { animation: jtTecJump 2.6s var(--jt-easing) infinite; }
@keyframes jtTecJump {
	0%, 72%, 100% { transform: translateY(0); }
	82%           { transform: translateY(3px); }
}
/* Aire al aterrizar, para que el título no quede pegado a la cabecera. */
#jt-info { scroll-margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
	.jt-tec-jump svg { animation: none; }
}
@media (max-width: 680px) {
	.jt-tec-jump { margin-top: 10px; padding: 8px 14px; font-size: 11px; }
}

/* -------------------------------------------------------------------------
   Formularios de Elementor · casilla de aceptación y encaje en los modales
   ---------------------------------------------------------------------- */

/* El enlace a la política de privacidad HEREDA el color del texto que lo
   rodea, en vez de fijar uno. El mismo formulario vive sobre fondos distintos
   (secciones oscuras de Contacto y el modal de la ficha, que es arena), así
   que cualquier color fijo se pierde en uno de los dos. Con `inherit` siempre
   contrasta y se distingue por el subrayado.
   Los !important son necesarios: el kit de Elementor pisa el color de enlace. */
.elementor-field-type-acceptance .elementor-field-option a,
.elementor-field-type-acceptance .elementor-field-option a:visited {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.2s var(--jt-easing);
}
.elementor-field-type-acceptance .elementor-field-option a:hover,
.elementor-field-type-acceptance .elementor-field-option a:focus-visible {
	color: inherit !important;
	opacity: 0.72;
}

/* Formulario de adquisición dentro del modal (fondo arena, ancho contenido). */
.jt-modal-form {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(58, 90, 101, 0.22);
}
.jt-modal-form .elementor-field-group { margin-bottom: 0; }
.jt-modal-form .elementor-field-textual {
	width: 100%;
	background: transparent;
}
.jt-modal-form textarea.elementor-field-textual { min-height: 84px; }
/* En un modal estrecho, los campos a una sola columna se leen mejor. */
.jt-modal-form .elementor-form-fields-wrapper .elementor-field-group {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}
.jt-modal-form .elementor-field-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   Modal de adquisición con formulario · encaje y botón de envío
   ---------------------------------------------------------------------- */

/* La caja no tenía tope de alto: con el formulario dentro se salía de la
   pantalla y el texto de arriba quedaba cortado. Ahora se limita al alto de
   la ventana y desplaza su propio contenido. */
.jt-modal-box {
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Botón de envío con el mismo aspecto que el de WhatsApp, para que se lean
   como dos vías equivalentes de contacto.
   !important: Elementor pinta sus botones con el color global del kit. */
.jt-modal-form .elementor-field-type-submit .elementor-button,
.jt-modal-form button[type="submit"] {
	width: 100%;
	justify-content: center;
	background-color: var(--jt-verde-mar) !important;
	color: var(--jt-espuma) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 14px 20px !important;
	transition: background-color 0.25s var(--jt-easing);
}
.jt-modal-form .elementor-field-type-submit .elementor-button:hover,
.jt-modal-form button[type="submit"]:hover {
	background-color: #2f4d58 !important;
	color: var(--jt-espuma) !important;
}
/* El botón de envío no necesita el hueco inferior de los demás campos. */
.jt-modal-form .elementor-field-type-submit { margin-bottom: 0 !important; }

@media (max-width: 680px) {
	.jt-modal-box { padding-left: 22px; padding-right: 22px; }
}

/* Texto de la casilla de aceptación dentro del modal: es letra pequeña legal,
   no contenido, así que va a menor tamaño para no comerse el modal. Además se
   coloca en fila con la casilla, para que las líneas siguientes no caigan
   debajo del cuadradito.
   !important: la tipografía de los campos la fija el kit de Elementor y
   la casilla no tiene control propio de tamaño en el widget. */
.jt-modal-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.jt-modal-form .elementor-field-type-acceptance .elementor-field-option label,
.jt-modal-form .elementor-field-type-acceptance .elementor-field-option {
	font-size: 12px !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
}
.jt-modal-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
}
/* El enlace, al ir en letra pequeña, gana algo de aire bajo el subrayado. */
.jt-modal-form .elementor-field-type-acceptance a { text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   "Ficha técnica ↓" en la columna lateral
   Se movió aquí (bajo las miniaturas) para no restarle alto al visor: la obra
   es lo que tiene que ocupar la pantalla. Toma el aspecto de un tile más.
   ---------------------------------------------------------------------- */
.jt-side .jt-tec-jump {
	flex: 0 0 auto;
	width: 100%;
	min-height: 62px;
	margin: 0;
	padding: 8px 4px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	border-radius: 0;
	border: 1px solid rgba(244, 247, 246, 0.24);
	background: var(--jt-verde-oscuro);
	font-size: 10px;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-align: center;
	opacity: 0.85;
	transition: opacity 0.25s var(--jt-easing), border-color 0.25s var(--jt-easing);
}
.jt-side .jt-tec-jump:hover,
.jt-side .jt-tec-jump:focus-visible {
	opacity: 1;
	background: var(--jt-verde-oscuro);
	border-color: rgba(244, 247, 246, 0.5);
}
.jt-side .jt-tec-jump svg { flex: 0 0 auto; }

@media (max-width: 980px) {
	/* En táctil la columna es una fila de miniaturas: el enlace baja a su
	   propia línea a todo el ancho, para no estrechar los tiles. */
	.jt-side { flex-wrap: wrap; }
	.jt-side .jt-tec-jump {
		flex: 1 0 100%;
		flex-direction: row;
		justify-content: center;
		gap: 8px;
		min-height: 0;
		padding: 11px 14px;
		font-size: 11px;
		letter-spacing: 0.12em;
	}
}


/* -------------------------------------------------------------------------
   "Ficha técnica" en arena: resalta sobre el azul del visor y anticipa el
   color del bloque al que lleva.
   ---------------------------------------------------------------------- */
.jt-side .jt-tec-jump {
	background: var(--jt-arena);
	border-color: var(--jt-arena);
	color: var(--jt-azul) !important;
	opacity: 1;
}
.jt-side .jt-tec-jump:hover,
.jt-side .jt-tec-jump:focus-visible {
	background: var(--jt-espuma);
	border-color: var(--jt-espuma);
	color: var(--jt-azul) !important;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * 29) CAJA DE ICONO ENLAZADA AL COMPLETO (Contacto, 2026-08-20)
 * El widget "Caja de icono" de Elementor solo enlaza el icono y el título: la
 * DESCRIPCIÓN (que es justo donde está el teléfono, el WhatsApp y el email) se
 * quedaba fuera y no se podía pulsar. Aquí se estira el enlace del título hasta
 * cubrir la caja entera con el patrón "stretched link", el mismo que ya usa la
 * tarjeta del catálogo (.jt-cat-cover, §16): un ::after vacío en posición
 * absoluta que tapa toda la caja y recoge el clic.
 *
 * SIN JAVASCRIPT y sin anidar etiquetas: meter la descripción dentro del <a>
 * habría exigido tocar el marcado que genera Elementor, que se rehace en cada
 * guardado.
 *
 * Se aplica SOLO a las cajas cuyo título ya es un enlace (:has), así que las
 * cajas decorativas sin enlace —como la de "¿Quieres recibir novedades?" de la
 * plantilla de archivo— no se ven afectadas. No hay que añadir ninguna clase en
 * Elementor: funciona en las 3 cajas de Contacto y en las 3 de Contact.
 *
 * El widget ya trae position:relative de serie, pero se declara igualmente para
 * no depender de ello (§2: el kit de Elementor cambia de un día para otro).
 *
 * ⚠️ EFECTO SECUNDARIO ACEPTADO: con la caja entera enlazada, el texto del
 * teléfono y del email deja de poder seleccionarse arrastrando el ratón. En
 * móvil da igual (se pulsa y llama), en escritorio alguien podría querer copiar
 * el email. Si molesta, se quita el ::after de esa caja y se deja como estaba.
 * ---------------------------------------------------------------------- */
.elementor-widget-icon-box:has(.elementor-icon-box-title a) {
	position: relative;
}
.elementor-widget-icon-box:has(.elementor-icon-box-title a) .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}