/* ==========================================================================
   Juan Román Joyeros — Tema (Coodex)
   Diseño: Cormorant Garamond (títulos) + Jost (texto). Modo catálogo.
   ========================================================================== */

/* ---------- Fuentes auto-alojadas (variables, pesos 300–600) -------------- */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
	--jrj-text: #1a1a1a;
	--jrj-gold: #a98a5f;
	--jrj-overline: #e6d6bb;
	--jrj-muted: #6b6b6b;
	--jrj-muted-2: #767676;
	--jrj-cream: #efeae2;
	--jrj-cream-2: #f7f5f2;
	--jrj-cream-3: #f5f4f2;
	--jrj-cream-4: #f7f4ef;
	--jrj-hero-bg: #e9e4dd;
	--jrj-border: #ece8e2;
	--jrj-border-2: #e2ded8;
	--jrj-white: #ffffff;
	--jrj-star: #e8a33d;
	--jrj-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--jrj-sans: 'Jost', Helvetica, Arial, sans-serif;
	--jrj-max: 1920px;
	--jrj-pad: clamp(15px, 3.4vw, 65px);
	--jrj-header-h: 110px;
}

/* ---------- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--jrj-sans);
	color: var(--jrj-text);
	background: var(--jrj-white);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--jrj-text); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--jrj-gold); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
button { font-family: inherit; }
::selection { background: var(--jrj-overline); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.jrj-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: #fff; padding: 12px 20px;
}
.jrj-skip-link:focus { left: 8px; top: 8px; }

/* ---------- Layout ------------------------------------------------------- */
.jrj-container { max-width: var(--jrj-max); margin: 0 auto; padding: 0 var(--jrj-pad); }
.jrj-container--narrow { max-width: 1000px; }
.jrj-section { padding: clamp(50px, 5.5vw, 90px) 0; }
.jrj-section__title {
	font-family: var(--jrj-serif);
	font-weight: 400;
	font-size: clamp(32px, 3.9vw, 60px);
	line-height: 1.08;
	margin: 0 0 clamp(26px, 3vw, 44px);
}
.jrj-section__title--center { text-align: center; }

/* ---------- Botones ------------------------------------------------------ */
.jrj-btn {
	display: inline-block;
	font-family: var(--jrj-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
	border: 1px solid transparent;
}
.jrj-btn--light { background: var(--jrj-white); color: var(--jrj-text); padding: 17px 44px; }
.jrj-btn--light:hover { background: var(--jrj-gold); color: #fff; }
.jrj-btn--dark { background: var(--jrj-text); color: #fff; padding: 15px 34px; }
.jrj-btn--dark:hover { background: var(--jrj-gold); color: #fff; }
.jrj-btn--outline { border-color: var(--jrj-text); color: var(--jrj-text); padding: 15px 34px; letter-spacing: .12em; font-size: 14px; font-weight: 400; }
.jrj-btn--outline:hover { background: var(--jrj-text); color: #fff; }
.jrj-link { border-bottom: 1px solid transparent; padding-bottom: 3px; letter-spacing: .04em; }
.jrj-link:hover { border-color: currentColor; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.jrj-header { position: sticky; top: 0; z-index: 60; background: #fff; }
.jrj-header__inner {
	max-width: var(--jrj-max);
	margin: 0 auto;
	padding: 0 var(--jrj-pad);
	height: var(--jrj-header-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}
.jrj-nav { justify-self: start; }
.jrj-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 24px;
	font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400;
}
.jrj-nav__list a { display: block; padding: 8px 0; }
.jrj-nav__list .current-menu-item > a,
.jrj-nav__list .current_page_item > a { border-bottom: 1px solid var(--jrj-text); }
.jrj-nav__chev { font-size: 9px; opacity: .6; margin-left: 4px; }

/* Desplegable Catálogo */
.jrj-nav li.menu-item-has-children { position: relative; }
.jrj-nav .sub-menu {
	list-style: none; margin: 0; padding: 26px 28px;
	position: absolute; top: 100%; left: -28px;
	min-width: 230px;
	background: #fff; border: 1px solid var(--jrj-border);
	box-shadow: 0 24px 48px rgba(26,26,26,.08);
	display: grid; gap: 14px;
	text-transform: none; letter-spacing: .02em; font-size: 15px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 5;
}
.jrj-nav li.menu-item-has-children:hover > .sub-menu,
.jrj-nav li.menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.jrj-nav .sub-menu a { padding: 0; }

.jrj-header__logo { grid-column: 2; display: flex; align-items: center; justify-content: center; }
.jrj-header__logo img { height: 58px; width: auto; }

.jrj-header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px; }
.jrj-header__search-toggle { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--jrj-text); display: flex; }
.jrj-header__contact {
	display: inline-flex; align-items: center;
	padding: 13px 28px; border: 1px solid var(--jrj-text); background: #fff; color: var(--jrj-text);
	font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
	transition: background .3s ease, color .3s ease;
}
.jrj-header__contact:hover { background: var(--jrj-text); color: #fff; }

.jrj-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; cursor: pointer; }
.jrj-burger span { display: block; width: 24px; height: 1.4px; background: var(--jrj-text); transition: transform .3s ease, opacity .3s ease; }
.jrj-burger.is-open span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.jrj-burger.is-open span:nth-child(2) { opacity: 0; }
.jrj-burger.is-open span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

/* Buscador desplegable */
.jrj-header__search { border-top: 1px solid var(--jrj-border); background: #fff; }
.jrj-header__search-inner { max-width: var(--jrj-max); margin: 0 auto; padding: 22px var(--jrj-pad); }
.jrj-search-form { display: flex; height: 52px; max-width: 640px; margin: 0 auto; }
.jrj-search-form__input { flex: 1; min-width: 0; border: 1px solid var(--jrj-border-2); border-right: 0; outline: none; padding: 0 18px; font-family: var(--jrj-sans); font-size: 15px; }
.jrj-search-form__submit { background: var(--jrj-text); border: 0; color: #fff; padding: 0 22px; cursor: pointer; display: flex; align-items: center; }

/* Menú móvil */
.jrj-mobile-menu { border-top: 1px solid var(--jrj-border); padding: 22px var(--jrj-pad) 30px; }
.jrj-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.jrj-mobile-menu__list .sub-menu { list-style: none; margin: 12px 0 0; padding: 0 0 0 16px; display: grid; gap: 12px; text-transform: none; letter-spacing: .02em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.jrj-hero {
	position: relative; width: 100%;
	aspect-ratio: 1920 / 700; min-height: 400px; max-height: 78vh;
	overflow: hidden; background: var(--jrj-hero-bg);
}
.jrj-hero__track { position: absolute; inset: 0; }
.jrj-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; overflow: hidden; }
.jrj-hero__slide.is-active { opacity: 1; z-index: 2; }
.jrj-hero__bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: center; filter: blur(28px) saturate(1.1); }
.jrj-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.jrj-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,16,.46) 0%, rgba(20,18,16,.14) 55%, rgba(20,18,16,0) 100%); }
.jrj-hero__inner { position: relative; height: 100%; max-width: var(--jrj-max); margin: 0 auto; padding: 0 var(--jrj-pad); display: flex; align-items: center; z-index: 3; }
.jrj-hero__copy { max-width: 620px; color: #fff; }
.jrj-hero__overline { margin: 0 0 18px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: var(--jrj-overline); }
.jrj-hero__title { margin: 0 0 24px; font-family: var(--jrj-serif); font-weight: 300; font-size: clamp(34px, 3.9vw, 62px); line-height: 1.06; letter-spacing: -.01em; text-wrap: pretty; }
.jrj-hero__text { margin: 0 0 30px; font-size: 16px; line-height: 1.65; font-weight: 300; max-width: 460px; opacity: .9; }
/* Flechas del hero — idioma de la plantilla de referencia: circulo blanco de
   45px con sombra suave, oculto hasta que el raton entra en el carrusel. En
   tactil no hay hover, asi que alli se muestran siempre y algo mas pequenas.
   Los puntos de abajo no se tocan. */
.jrj-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 45px; height: 45px; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--jrj-white); color: var(--jrj-text); cursor: pointer;
	box-shadow: 0 8px 24px 0 rgba(150,158,166,.2);
	opacity: 0; visibility: hidden; z-index: 4;
	transition: opacity .25s linear, visibility .25s linear, background-color .25s linear, color .25s linear;
}
.jrj-hero__arrow--prev { left: 20px; }
.jrj-hero__arrow--next { right: 20px; }
.jrj-hero:hover .jrj-hero__arrow,
.jrj-hero__arrow:focus-visible { opacity: 1; visibility: visible; }
.jrj-hero__arrow:hover { background: var(--jrj-gold); color: var(--jrj-white); }
.jrj-hero__arrow:focus-visible { outline: 2px solid var(--jrj-gold); outline-offset: 3px; }
/* El hueco lateral del hero es `--jrj-pad`, que encoge con el ancho: a 1920px
   son 65px y la flecha (20 + 45) cabe justa, pero a 1200px son 41px y la flecha
   se comía la primera letra del titular. Se le reserva el sitio con un mínimo
   de 73px de padding en el hero —y sólo en el hero—, que a 1920px son 8px de
   diferencia (inapreciable) y a anchos medios es lo que hace falta. */
@media (min-width: 900px) {
	.jrj-hero .jrj-hero__inner { padding-inline: max(var(--jrj-pad), 73px); }
}
/* En pantallas tactiles no hay hover: si no, las flechas no aparecerian nunca. */
@media (hover: none) {
	.jrj-hero__arrow { opacity: 1; visibility: visible; }
}
/* MOVIL: flechas a los lados y centradas verticalmente, como en escritorio.

   El titular ocupaba todo el ancho, así que hay que estrecharlo para hacerles
   sitio (gana alguna línea, es el precio acordado). Para robarle lo mínimo se
   separan dos cosas que normalmente van juntas:

     - el BOTÓN mide 44x44, que es el área táctil mínima que recomiendan Apple
       (HIG) y la WCAG 2.1 (criterio 2.5.5). Puede solaparse con el titular sin
       molestar: el titular no es pulsable, y el botón "Ver colección" queda muy
       por debajo de la altura de las flechas.
     - el CÍRCULO VISIBLE mide 36px y se pinta con ::before. Es lo único que hay
       que apartar del texto de verdad.

   Con el círculo a 10px del borde, el texto tiene que empezar en 54px para
   dejar un margen de 8px. */
@media (max-width: 899px) {
	.jrj-hero__arrow {
		top: 50%; bottom: auto; transform: translateY(-50%);
		width: 44px; height: 44px;
		background: transparent; box-shadow: none;
		opacity: 1; visibility: visible;
	}
	.jrj-hero__arrow::before {
		content: ""; position: absolute; inset: 4px;
		border-radius: 50%; background: var(--jrj-white);
		box-shadow: 0 8px 24px 0 rgba(150,158,166,.2);
		transition: background-color .25s linear;
	}
	.jrj-hero__arrow svg { position: relative; z-index: 1; width: 13px; height: 13px; }
	.jrj-hero__arrow--prev { left: 6px; }
	.jrj-hero__arrow--next { right: 6px; }
	/* En táctil no hay hover, pero sí realimentación al pulsar. */
	.jrj-hero__arrow:active::before { background: var(--jrj-gold); }
	.jrj-hero__arrow:active { color: var(--jrj-white); }
	/* El sitio para las flechas se lo cede el titular. */
	.jrj-hero .jrj-hero__inner { padding-inline: 54px; }
}
/* Por debajo de 390px la columna de texto se queda muy estrecha (237px a 360,
   197px a 320) y el titular, que hasta ahora era 34px fijos, se iba a 3 y 4
   líneas hasta chocar con los puntos. Se le deja escalar: a 390px sigue dando
   34px exactos, así que el diseño aprobado no cambia, y por debajo encoge lo
   justo para no desbordar. */
@media (max-width: 389px) {
	.jrj-hero__title { font-size: clamp(26px, 8.7vw, 34px); }
	/* Y los espacios entre overline, titular, texto y botón se aprietan un poco,
	   que es lo que hace falta para que el slide más largo no llegue a los
	   puntos. Medido: sin esto se pasaba 3px a 320px de ancho. */
	.jrj-hero__overline { margin-bottom: 12px; }
	.jrj-hero__title { margin-bottom: 16px; }
	.jrj-hero__text { margin-bottom: 20px; }
}
.jrj-hero__dots { position: absolute; left: 0; right: 0; bottom: 38px; display: flex; justify-content: center; gap: 12px; z-index: 4; }
/* El dash visible mide 2px, pero el botón añade padding transparente para
   que el área táctil sea ~24px (accesible en móvil) sin engordar el guion. */
.jrj-hero__dot { width: 32px; padding: 11px 0; background: transparent; border: 0; cursor: pointer; display: block; }
.jrj-hero__dot::before { content: ""; display: block; height: 2px; background: rgba(255,255,255,.45); transition: background .3s ease; }
.jrj-hero__dot.is-active::before { background: var(--jrj-gold); }

/* ==========================================================================
   Colecciones destacadas
   ========================================================================== */
.jrj-collections { padding: clamp(34px, 3.5vw, 50px) 0 0; }
.jrj-collections__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.1vw, 20px); }
.jrj-collection-card { position: relative; display: block; overflow: hidden; background: var(--jrj-cream); }
.jrj-collection-card__media { display: block; aspect-ratio: 4 / 3.6; background-size: cover; background-position: center; background-color: var(--jrj-cream); transition: transform .9s ease; }
.jrj-collection-card:hover .jrj-collection-card__media { transform: scale(1.05); }
.jrj-collection-card__body { position: absolute; inset: auto 0 0 0; padding: clamp(26px, 2.6vw, 44px); background: linear-gradient(180deg, rgba(20,18,16,0) 0%, rgba(20,18,16,.6) 100%); color: #fff; display: block; }
.jrj-collection-card__label { display: block; margin-bottom: 14px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--jrj-overline); }
.jrj-collection-card__title { display: block; margin-bottom: 18px; font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(28px, 2.7vw, 48px); line-height: 1.12; }
.jrj-collection-card__link { display: inline-block; font-size: 16px; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.65); padding-bottom: 5px; }

/* ==========================================================================
   Categorías (círculos)
   ========================================================================== */
.jrj-categories { padding: clamp(50px, 5.5vw, 80px) 0 clamp(64px, 7vw, 100px); }
.jrj-categories__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 30px); }
.jrj-cat-circle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.jrj-cat-circle__media { background: var(--jrj-cream-2); border-radius: 50%; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20%; }
.jrj-cat-circle__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s ease; }
.jrj-cat-circle:hover .jrj-cat-circle__media img { transform: scale(1.06); }
.jrj-cat-circle__name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid transparent; padding-bottom: 4px; }
.jrj-cat-circle:hover .jrj-cat-circle__name { border-color: var(--jrj-text); }

/* ==========================================================================
   Nuestros Productos (tabs) + tarjeta
   ========================================================================== */
.jrj-products { padding: 0 0 clamp(64px, 7vw, 110px); }
.jrj-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); margin-bottom: clamp(32px, 3.5vw, 54px); }
.jrj-tab { background: none; border: 0; border-bottom: 1px solid transparent; padding: 6px 2px 10px; cursor: pointer; font-family: var(--jrj-sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8b8b8b; transition: color .25s ease, border-color .25s ease; }
.jrj-tab:hover { border-color: var(--jrj-text); }
.jrj-tab.is-active { color: var(--jrj-text); border-color: var(--jrj-text); }
.jrj-tab-panel { display: none; }
.jrj-tab-panel.is-active { display: block; }
.jrj-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(30px, 3vw, 50px) clamp(14px, 1.1vw, 20px); }

.jrj-product-card { display: block; }
.jrj-product-card__media { position: relative; overflow: hidden; background: var(--jrj-cream-4); }
.jrj-product-card__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 600 / 750; padding: 8%; }
.jrj-product-card__thumb img, .jrj-product-card__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s ease; }
.jrj-product-card:hover .jrj-product-card__img { transform: scale(1.06); }
.jrj-product-card__badge { position: absolute; top: 16px; left: 16px; background: var(--jrj-text); color: #fff; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; }
.jrj-product-card__actions { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(6px); transition: all .3s ease; }
.jrj-product-card:hover .jrj-product-card__actions { opacity: 1; transform: translateX(0); }
.jrj-product-card__icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--jrj-text); }
.jrj-product-card__ficha { position: absolute; left: 0; right: 0; bottom: 0; background: var(--jrj-text); color: #fff; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 13px 0; transform: translateY(100%); transition: transform .3s ease; }
.jrj-product-card__media:hover .jrj-product-card__ficha { transform: translateY(0); }
.jrj-product-card__body { padding-top: 18px; text-align: center; }
.jrj-product-card__title { margin: 0 0 8px; font-family: var(--jrj-sans); font-size: 13px; font-weight: 400; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; text-wrap: pretty; }
.jrj-product-card__title a { color: var(--jrj-text); }
.jrj-product-card__price { margin: 0; font-size: 15px; font-weight: 500; color: var(--jrj-text); }
.jrj-product-card__price del { color: #9a9a9a; font-weight: 400; margin-right: 8px; }
.jrj-product-card__price ins { text-decoration: none; }

/* ==========================================================================
   Bloque destacado (banners + texto)
   ========================================================================== */
.jrj-about { padding: clamp(20px, 2vw, 30px) 0 clamp(60px, 6vw, 100px); }
.jrj-about__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 2.5vw, 36px); align-items: start; }
.jrj-about__grid--noimg { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.jrj-about__banner { display: block; overflow: hidden; background: var(--jrj-cream); }
.jrj-about__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.jrj-about__banner:hover img { transform: scale(1.04); }
.jrj-about__text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(24px, 4vw, 60px) clamp(10px, 2vw, 30px); align-self: center; }
.jrj-about__title { margin: 0 0 22px; font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.12; text-wrap: pretty; }
.jrj-about__body { margin-bottom: 34px; max-width: 460px; }
.jrj-about__body p { margin: 0 0 20px; font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--jrj-muted); text-wrap: pretty; }
.jrj-about__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Testimonios
   ========================================================================== */
.jrj-testimonials { padding: 0 0 clamp(70px, 7vw, 110px); }
.jrj-testimonials .jrj-container--narrow { text-align: center; }
.jrj-testimonials__track { position: relative; }
.jrj-testimonial { display: none; }
.jrj-testimonial.is-active { display: block; animation: jrjFade .6s ease; }
/* Procedencia de la reseña: logo de Google discreto, encima de las estrellas.
   El SVG lleva los colores de marca de Google y no debe recolorearse. */
.jrj-testimonial__source { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0 0 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-testimonial__source a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; transition: color .3s ease; }
.jrj-testimonial__source a:hover { color: var(--jrj-text); }
.jrj-testimonial__source svg { flex: 0 0 auto; display: block; width: 15px; height: 15px; }
.jrj-testimonial__stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 22px; color: var(--jrj-star); }
.jrj-testimonial__when { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .04em; opacity: .75; }
.jrj-testimonial__author { margin: 0 0 26px; font-size: 18px; font-weight: 400; color: var(--jrj-muted); letter-spacing: .02em; }
.jrj-testimonial__quote { margin: 0 0 44px; font-family: var(--jrj-serif); font-size: clamp(21px, 2.2vw, 32px); line-height: 1.45; color: var(--jrj-text); text-wrap: pretty; }
.jrj-testimonials__dots { display: flex; justify-content: center; gap: 10px; }
.jrj-testimonials__dot { width: 28px; height: 2px; border: 0; padding: 0; cursor: pointer; background: #d8d3cc; transition: background .3s ease; }
.jrj-testimonials__dot.is-active { background: var(--jrj-text); }

/* Flechas laterales de los testimonios. Mismo lenguaje que las del hero, pero
   este bloque va sobre blanco: ahí un círculo blanco con sombra no se vería,
   así que el círculo lleva borde. Se ven siempre (no hay imagen sobre la que
   aparecer al pasar el ratón) y son discretas hasta que se pasa por encima. */
.jrj-testimonials .jrj-container--narrow { position: relative; }
.jrj-testimonials__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 45px; height: 45px; padding: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--jrj-white); border: 1px solid var(--jrj-border-2);
	color: var(--jrj-muted); cursor: pointer; z-index: 2;
	transition: background-color .25s linear, border-color .25s linear, color .25s linear;
}
.jrj-testimonials__arrow--prev { left: 0; }
.jrj-testimonials__arrow--next { right: 0; }
.jrj-testimonials__arrow:hover { background: var(--jrj-gold); border-color: var(--jrj-gold); color: var(--jrj-white); }
.jrj-testimonials__arrow:focus-visible { outline: 2px solid var(--jrj-gold); outline-offset: 3px; }
/* El hueco lateral lo da `--jrj-pad`, que encoge con el ancho (65px a 1920,
   41px a 1200). Sólo se le quita sitio al texto cuando ese hueco no basta para
   la flecha, así que a partir de ~1780px el bloque queda exactamente como
   estaba aprobado y por debajo se aprieta lo justo. */
.jrj-testimonials__track { padding-inline: max(0px, calc(60px - var(--jrj-pad))); }

/* En móvil se aplica el mismo criterio que en el hero (§3.3 del handoff):
   área táctil de 44×44 —el mínimo de Apple HIG y de la WCAG 2.1 SC 2.5.5— y
   círculo visible de 36px pintado con ::before, que es lo único que hay que
   apartar del texto. Así la cita pierde el mínimo de ancho posible. */
@media (max-width: 699px) {
	.jrj-testimonials__arrow {
		width: 44px; height: 44px;
		background: transparent; border: 0;
	}
	.jrj-testimonials__arrow::before {
		content: ""; position: absolute; inset: 4px;
		border-radius: 50%; background: var(--jrj-white);
		border: 1px solid var(--jrj-border-2);
		transition: background-color .25s linear, border-color .25s linear;
	}
	.jrj-testimonials__arrow svg { position: relative; z-index: 1; width: 13px; height: 13px; }
	/* En táctil no hay hover, pero sí realimentación al pulsar. */
	.jrj-testimonials__arrow:active::before { background: var(--jrj-gold); border-color: var(--jrj-gold); }
	.jrj-testimonials__arrow:active { color: var(--jrj-white); }
	.jrj-testimonials__track { padding-inline: max(0px, calc(48px - var(--jrj-pad))); }
	/* El sitio para las flechas se lo cede el margen lateral de 40px que el
	   navegador le pone por su cuenta a <figure> y que aquí no pinta nada. Sin
	   esto la cita se quedaba en 199px a 390 y en 129px a 320, ilegible. Con
	   esto queda incluso algo más ancha que antes de haber flechas. */
	.jrj-testimonial { margin-inline: 0; }
}
@keyframes jrjFade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Inspírate (Instagram) + Ventajas (fondo crema compartido)
   ========================================================================== */
.jrj-inspire { background: var(--jrj-cream-3); padding: clamp(60px, 6vw, 96px) 0 clamp(56px, 6vw, 90px); }
.jrj-inspire__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.3vw, 22px); }
.jrj-inspire__item { position: relative; display: block; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; }
.jrj-inspire__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.jrj-inspire__item:hover img { transform: scale(1.06); }
.jrj-inspire__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; background: rgba(20,18,16,.28); color: #fff; font-size: 14px; opacity: 0; transition: opacity .35s ease; }
.jrj-inspire__item:hover .jrj-inspire__overlay { opacity: 1; }
.jrj-inspire__overlay span { display: flex; align-items: center; gap: 8px; }

.jrj-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(34px, 3.5vw, 50px); text-align: center; margin-top: clamp(56px, 5.5vw, 86px); }
.jrj-feature__icon { display: block; margin: 0 auto 20px; color: var(--jrj-text); }
.jrj-feature__icon svg { display: inline-block; }
.jrj-feature__title { margin: 0 0 10px; font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(23px, 2.1vw, 32px); }
.jrj-feature__text { margin: 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 300; color: var(--jrj-muted-2); line-height: 1.65; }

/* ==========================================================================
   Footer
   ========================================================================== */
.jrj-footer { background: #fff; color: var(--jrj-text); padding: clamp(60px, 6vw, 96px) 0 0; }
.jrj-footer__top { max-width: 1510px; margin: 0 auto; padding: 0 clamp(15px, 3.4vw, 50px); display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: clamp(30px, 3vw, 50px) clamp(30px, 3.4vw, 60px); }
/* Alto intermedio (78px) y selector con especificidad suficiente para ganar a
   `.woocommerce-page img { height: auto }` de WooCommerce, que en las fichas de
   producto devolvía el logo a su tamaño intrínseco (105px). Así el logo del
   footer mide igual en toda la web. */
.jrj-footer .jrj-footer__logo { height: 78px; width: auto; margin-bottom: 28px; }
.jrj-footer__brand p { margin: 0 0 15px; font-size: 15px; color: var(--jrj-muted); }
.jrj-footer__brand a { color: #000; }
.jrj-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; font-size: 15px; }
.jrj-footer__menu a { color: #000; }
.jrj-footer__news-title { margin: 0 0 28px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.jrj-footer__news-text { margin: 0 0 26px; font-size: 15px; line-height: 1.7; color: var(--jrj-muted); text-wrap: pretty; }
/* Boletín del pie. El contenedor ya NO es la fila: desde que el formulario es un
   CF7 con casilla de consentimiento y texto legal, dentro van tres bloques y no
   uno. La fila de email + botón es ahora `.jrj-news__fila`, que conserva el alto
   de 52px y el aspecto pegado del diseño original. */
.jrj-footer__news-form { display: block; }
/* CF7 pasa el marcado por wpautop pase lo que pase, así que puede meter un <p>
   entre la fila y los campos. La regla vale para las dos formas: si el <p> está,
   es él quien hace de fila; si no, la hace el div. */
.jrj-news__fila,
.jrj-news__fila > p { display: flex; height: 52px; margin: 0; align-items: stretch; }
.jrj-news__fila > p { flex: 1; min-width: 0; }
.jrj-news__fila .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: flex; }
/* Los otros dos bloques también pueden venir envueltos en <p>: sin esto se
   colaba el margen por defecto del párrafo. */
.jrj-footer__news-form .jrj-cf7__consent > p,
.jrj-footer__news-form .jrj-cf7__legal > p { margin: 0; }
.jrj-footer__news-form input[type="email"] { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--jrj-border-2); border-right: 0; outline: none; padding: 0 18px; font-family: var(--jrj-sans); font-size: 14px; font-weight: 300; background: #fff; color: var(--jrj-text); border-radius: 0; -webkit-appearance: none; appearance: none; }
.jrj-footer__news-form input[type="email"]:focus { border-color: var(--jrj-gold); }
.jrj-footer__news-form input[type="email"]::placeholder { color: var(--jrj-muted); opacity: 1; }
.jrj-footer__news-form input[type="submit"] { background: var(--jrj-text); border: 0; color: #fff; padding: 0 26px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; font-family: var(--jrj-sans); border-radius: 0; -webkit-appearance: none; appearance: none; }
.jrj-footer__news-form input[type="submit"]:hover { background: var(--jrj-gold); }
/* El consentimiento y el legal van debajo de la fila, no dentro. */
.jrj-footer__news-form .jrj-cf7__consent { margin: 14px 0 0; }
.jrj-footer__news-form .jrj-cf7__legal { margin: 10px 0 0; }
/* CF7 mete su spinner y su caja de respuesta dentro del formulario. */
.jrj-footer__news-form .wpcf7-spinner { position: absolute; margin: 16px 0 0 10px; }
.jrj-footer__news-form .wpcf7-response-output { margin: 14px 0 0; font-size: 13px; }
.jrj-footer__news-form .wpcf7-not-valid-tip { font-size: 12px; margin-top: 6px; }
.jrj-footer__social { display: flex; gap: 22px; margin-top: 30px; align-items: center; }
.jrj-footer__social a { color: var(--jrj-text); display: flex; }
.jrj-footer__social a:hover { color: var(--jrj-gold); }
.jrj-footer__bottom { max-width: 1510px; margin: clamp(50px, 5vw, 76px) auto 0; padding: 28px clamp(15px, 3.4vw, 50px); border-top: 1px solid var(--jrj-border); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; font-size: 15px; color: var(--jrj-muted); }
.jrj-footer__bottom a { color: #000; }
@media (max-width: 700px) { .jrj-footer__bottom { font-size: 12px; } }

/* Botón volver arriba */
.jrj-to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; background: var(--jrj-text); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; z-index: 55; }
.jrj-to-top.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Páginas genéricas / WooCommerce base
   ========================================================================== */
.jrj-page { padding-top: clamp(40px, 4vw, 70px); padding-bottom: clamp(50px, 6vw, 90px); }
.jrj-page__header { margin-bottom: clamp(24px, 3vw, 44px); }
.jrj-page__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1; }
.jrj-entry__content { font-size: 16px; line-height: 1.75; }
.jrj-entry__content img { margin: 1.5em 0; }
.jrj-woo { padding-top: clamp(30px, 3vw, 50px); padding-bottom: clamp(50px, 6vw, 90px); }
.jrj-consulta { margin: 1.6em 0; }
.jrj-consulta__titulo { font-family: var(--jrj-serif); font-weight: 400; font-size: 26px; margin-bottom: 14px; }
.jrj-breadcrumb { font-size: 13px; letter-spacing: .04em; color: var(--jrj-muted); margin-bottom: 20px; text-transform: uppercase; }
/* Móvil: migas de la ficha en una sola línea y con puntos suspensivos si la
   ruta/nombre de producto es muy largo. El tamaño se fija en el bloque "Migas
   de pan en móvil" del final de la hoja (aquí no se pone: hace falta más
   especificidad para ganar a WooCommerce). */
@media (max-width: 700px) {
	.jrj-breadcrumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}
.jrj-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.jrj-post-card__thumb { display: block; overflow: hidden; margin-bottom: 16px; }
.jrj-post-card__thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s ease; }
.jrj-post-card:hover .jrj-post-card__thumb img { transform: scale(1.04); }
.jrj-post-card__title { font-family: var(--jrj-serif); font-size: 24px; margin: 0 0 10px; }

/* WooCommerce: nunca mostrar controles de compra en modo catálogo */
.jrj .add_to_cart_button,
.jrj .single_add_to_cart_button,
.jrj .cart,
.jrj .added_to_cart,
.woocommerce .cart .quantity { display: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
	:root { --jrj-header-h: 84px; }
	.jrj-nav { display: none; }
	.jrj-header__contact { display: none; }
	.jrj-burger { display: flex; }
	.jrj-header__logo { grid-column: 2; }
	.jrj-header__actions { gap: 16px; }

	.jrj-categories__grid { grid-template-columns: repeat(3, 1fr); }
	.jrj-inspire__grid { grid-template-columns: repeat(3, 1fr); }
	.jrj-products__grid { grid-template-columns: repeat(2, 1fr); }
	.jrj-about__grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
	.jrj-about__banner { max-height: 60vh; }
	.jrj-footer__top { grid-template-columns: 1fr 1fr; }
	.jrj-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 699px) {
	.jrj-header__inner { grid-template-columns: auto 1fr auto; }
	.jrj-header__logo { justify-self: start; }
	.jrj-nav { display: none; }

	/* Cabecera más baja en móvil (petición del cliente): 84 → 68px. El logo
	   pasa de 58 a 48px para que el recorte no lo deje pegado a los bordes. */
	:root { --jrj-header-h: 68px; }
	.jrj-header__logo img { height: 48px; }

	.jrj-hero { aspect-ratio: 3 / 4; max-height: none; min-height: 460px; }
	.jrj-hero__overlay { background: linear-gradient(180deg, rgba(20,18,16,.15) 0%, rgba(20,18,16,.55) 100%); }
	.jrj-hero__copy { max-width: 100%; }

	.jrj-collections__grid { grid-template-columns: 1fr; }
	.jrj-categories__grid { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
	.jrj-cat-circle { gap: 10px; }
	.jrj-cat-circle__media { padding: 16%; }
	.jrj-cat-circle__name { font-size: 10px; letter-spacing: .08em; }
	.jrj-inspire__grid { grid-template-columns: repeat(2, 1fr); }

	/* Footer a una columna y TODO centrado (petición del cliente): logo, datos
	   de contacto, los dos menús, newsletter, redes y la línea legal. */
	.jrj-footer__top { grid-template-columns: 1fr; text-align: center; }
	/* El logo es un <img> y el reset del tema le pone `display:block`, así que
	   el text-align no lo centra: hace falta margen automático. */
	.jrj-footer .jrj-footer__logo { margin-inline: auto; }
	/* La fila de email + botón se queda a ancho completo, y el consentimiento y
	   el legal se alinean a la izquierda dentro de ella: una casilla centrada
	   con su texto a dos líneas se lee fatal. */
	.jrj-news__fila { justify-content: center; }
	.jrj-footer__news-form .jrj-cf7__consent,
	.jrj-footer__news-form .jrj-cf7__legal { text-align: left; }
	.jrj-footer__news-form .jrj-cf7__consent .wpcf7-list-item { justify-content: flex-start; }
	.jrj-footer__social { justify-content: center; }
	.jrj-footer__bottom { justify-content: center; text-align: center; }
	.jrj-posts { grid-template-columns: 1fr; }
	.jrj-tabs { gap: 20px; }
}

@media (max-width: 699px) {
	/* Productos siempre a 2 columnas en móvil (nunca 1). */
	.jrj-products__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
	.jrj-product-card__title { font-size: 12px; }
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Fase 2 — Archivo de catálogo (tienda / categoría / marca / colección)
   ========================================================================== */
.jrj-archive__head { text-align: center; max-width: 760px; margin: 0 auto clamp(30px, 3.5vw, 52px); }
.jrj-archive__overline { display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--jrj-gold); }
/* Migas de pan mostradas como overline (misma línea/estilo, cabecera compacta). */
.jrj-archive__crumbs { line-height: 1.5; }
.jrj-archive__crumbs a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
.jrj-archive__crumbs a:hover { opacity: .6; }
.jrj-archive__crumbs .jrj-crumb-sep { margin: 0 .5em; opacity: .55; }
.jrj-archive__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(34px, 4vw, 60px); line-height: 1.08; }
.jrj-archive__desc { margin-top: 16px; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--jrj-muted); text-wrap: pretty; }
.jrj-archive__desc p:last-child { margin-bottom: 0; }
.jrj-archive__desc .term-description { margin: 0; }

/* Barra de herramientas: recuento + orden */
.jrj-shop__toolbar { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding-bottom: 22px; margin-bottom: clamp(30px, 3vw, 46px); border-bottom: 1px solid var(--jrj-border); }
.jrj-shop__toolbar .woocommerce-result-count { margin: 0; font-size: 11px; letter-spacing: .04em; color: var(--jrj-muted); text-transform: uppercase; }
.jrj-shop__toolbar .woocommerce-ordering { margin: 0; }
.jrj-shop__toolbar .woocommerce-ordering select,
.jrj-woo select.orderby {
	appearance: none; -webkit-appearance: none;
	font-family: var(--jrj-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--jrj-text); background: transparent;
	border: 1px solid var(--jrj-border-2); border-radius: 0;
	padding: 11px 40px 11px 16px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a98a5f' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2 6 8Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center;
}
.jrj-shop__toolbar .woocommerce-ordering select:focus { outline: none; border-color: var(--jrj-gold); }

/* Filtros de marca y precio, en la misma fila que el orden (no en sidebar). */
.jrj-shop__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.jrj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.jrj-filters__field { display: block; margin: 0; }
.jrj-filters select {
	appearance: none; -webkit-appearance: none;
	font-family: var(--jrj-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--jrj-text); background: transparent;
	border: 1px solid var(--jrj-border-2); border-radius: 0;
	padding: 11px 40px 11px 16px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a98a5f' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2 6 8Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center;
}
.jrj-filters select:focus { outline: none; border-color: var(--jrj-gold); }
.jrj-filters__go { font-family: var(--jrj-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--jrj-text); background: var(--jrj-text); color: var(--jrj-white); cursor: pointer; }
.jrj-filters__reset { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--jrj-gold); border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.jrj-filters__reset:hover { color: var(--jrj-text); }
.jrj-shop__empty .jrj-filters__reset { display: inline-block; margin-left: 10px; }

/* Círculos de categoría dentro del catálogo. */
.jrj-catalog-cats { margin-bottom: clamp(34px, 4vw, 58px); }

@media (max-width: 699px) {
	/* En tablet estrecha los dos selectores comparten fila (la mitad cada uno). */
	.jrj-shop__tools { width: 100%; }
	.jrj-filters { width: 100%; }
	.jrj-filters__field { flex: 1 1 calc(50% - 6px); }
	.jrj-filters select,
	.jrj-shop__toolbar .woocommerce-ordering,
	.jrj-shop__toolbar .woocommerce-ordering select { width: 100%; }
	.jrj-filters select { padding-left: 12px; font-size: 11px; letter-spacing: .06em; }
}
@media (max-width: 520px) {
	/* En móvil se apilan a ancho completo para que no se corte la etiqueta
	   ("Todas las marcas" / "Cualquier precio"). */
	.jrj-filters__field { flex: 1 1 100%; }
	.jrj-filters select { font-size: 12px; }
}

/* Texto de cierre del listado (descripción de la colección, al pie). */
.jrj-archive__outro { max-width: 760px; margin: clamp(30px, 4vw, 56px) auto 0; padding-top: clamp(30px, 3.5vw, 50px); border-top: 1px solid var(--jrj-border); text-align: center; }
.jrj-archive__outro-title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); margin: 0 0 14px; }

/* Rejilla del catálogo: separación algo mayor que en la Home */
.jrj-shop__grid { margin-bottom: clamp(40px, 4vw, 64px); }
.jrj-shop__empty { text-align: center; font-size: 16px; color: var(--jrj-muted); padding: 40px 0; }

/* Paginación — estilo editorial (ver bloque unificado al final de la hoja) */

/* ==========================================================================
   Fase 2 — Ficha de producto
   ========================================================================== */
.jrj-woo .woocommerce-breadcrumb { margin-bottom: clamp(24px, 3vw, 40px); }

/* Layout imágenes / resumen a dos columnas (sustituye los floats por defecto) */
.jrj-woo div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 72px); align-items: start; }
.jrj-woo div.product .woocommerce-product-gallery,
.jrj-woo div.product .summary,
.jrj-woo div.product .summary.entry-summary { width: 100% !important; float: none !important; margin: 0 !important; }
.jrj-woo div.product .woocommerce-product-gallery { position: relative; }
.jrj-woo div.product .woocommerce-tabs,
.jrj-woo div.product .upsells,
.jrj-woo div.product .related { grid-column: 1 / -1; }

/* Galería */
.jrj-woo .woocommerce-product-gallery__wrapper { margin: 0; }
.jrj-woo .woocommerce-product-gallery__image,
.jrj-woo .woocommerce-product-gallery__image a { display: block; background: var(--jrj-cream-4); }
.jrj-woo .woocommerce-product-gallery__image > a > img { mix-blend-mode: multiply; }
/* La capa de zoom y el lightbox NO deben usar fusión (si no, se transparentan). */
.jrj-woo .zoomImg,
.pswp img,
.pswp__img { mix-blend-mode: normal !important; }
.pswp__bg { background: #f4f1ec; }
/* Fondo claro: los iconos/flechas del sprite blanco de PhotoSwipe se pierden.
   Se invierten a negro (flechas, cerrar, zoom, pantalla completa). */
.pswp__button { filter: invert(1); }
.pswp__counter,
.pswp__caption__center { color: #1a1a1a; }
/* Rejilla en vez de flex: reparte las 6 columnas en fracciones exactas, así las
   miniaturas quedan pegadas sin que el redondeo deje rendijas de medio píxel. */
.jrj-woo .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
/* El crema va en el <li>, NO en la imagen: mix-blend-mode mezcla el elemento
   con lo que tiene DETRÁS, así que si el fondo se pone sobre la propia imagen
   ésta acaba mezclándose contra el blanco de la página. Misma estructura que
   la foto grande de la galería. */
.jrj-woo .flex-control-thumbs li { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; background: var(--jrj-cream-4); }
/* multiply igual que la imagen grande: el blanco de la foto se lee como crema. */
.jrj-woo .flex-control-thumbs img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .6; transition: opacity .25s ease; cursor: pointer; }
.jrj-woo .flex-control-thumbs img.flex-active,
.jrj-woo .flex-control-thumbs img:hover { opacity: 1; }
.jrj-woo .woocommerce-product-gallery__trigger { top: 16px; right: 16px; }

/* Resumen */
.jrj-woo div.product .product_title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; margin: 0 0 18px; }
.jrj-woo div.product p.price,
.jrj-woo div.product .price { font-family: var(--jrj-sans); font-size: clamp(22px, 2vw, 28px); font-weight: 500; color: var(--jrj-text); margin: 0 0 24px; }
.jrj-woo div.product p.price del { color: #9a9a9a; font-weight: 400; margin-right: 10px; }
.jrj-woo div.product p.price ins { text-decoration: none; color: var(--jrj-gold); }
.jrj-woo .woocommerce-product-details__short-description { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--jrj-muted); margin-bottom: 26px; }
.jrj-woo .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.jrj-woo .product_meta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--jrj-border); font-size: 13px; letter-spacing: .04em; color: var(--jrj-muted); }
.jrj-woo .product_meta > span { display: block; margin-bottom: 8px; }
.jrj-woo .product_meta .sku_wrapper,
.jrj-woo .product_meta .posted_in,
.jrj-woo .product_meta .tagged_as { text-transform: none; }
.jrj-woo .product_meta a { color: var(--jrj-text); }
.jrj-woo .product_meta a:hover { color: var(--jrj-gold); }

/* Etiqueta "Oferta" */
.jrj-woo span.onsale { background: var(--jrj-text); color: #fff; font-family: var(--jrj-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; min-height: auto; min-width: auto; line-height: 1; padding: 6px 12px; border-radius: 0; margin: 0; top: 16px; left: 16px; right: auto; }

/* CTA de consulta + perks + modal */
.jrj-woo .jrj-consulta { margin: 28px 0 0; }
.jrj-consulta__open { width: 100%; max-width: 340px; text-align: center; }
.jrj-product-perks { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--jrj-border); display: grid; gap: 16px; }
.jrj-product-perks li { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 300; color: var(--jrj-muted); }
.jrj-product-perks svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--jrj-gold); }

body.jrj-modal-open { overflow: hidden; }
.jrj-modal[hidden] { display: none; }
.jrj-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.jrj-modal__overlay { position: absolute; inset: 0; background: rgba(20, 18, 16, .55); animation: jrjFade .25s ease; }
.jrj-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: #fff; padding: clamp(28px, 4vw, 48px); animation: jrjModalIn .3s ease; }
@keyframes jrjModalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.jrj-modal__close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--jrj-muted); cursor: pointer; transition: color .2s ease; }
.jrj-modal__close:hover { color: var(--jrj-text); }
.jrj-modal .jrj-overline { margin-bottom: 10px; }
.jrj-modal__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; margin: 0 0 10px; }
.jrj-modal__product { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--jrj-border); font-size: 15px; color: var(--jrj-text); }
.jrj-modal__ref { display: inline-block; margin-left: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-modal__note { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--jrj-muted); margin: 0 0 22px; }
.jrj-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Contact Form 7 — estilo Lamora (página de Contacto y modal de producto)
   ========================================================================== */
.jrj-cf7__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jrj-cf7__field { margin: 0 0 16px; }
.jrj-cf7 input.wpcf7-form-control:not(.wpcf7-submit),
.jrj-cf7 textarea.wpcf7-form-control,
.jrj-cf7 select.wpcf7-form-control {
	width: 100%; padding: 15px 18px; border: 1px solid var(--jrj-border-2); background: #fff;
	font-family: var(--jrj-sans); font-size: 15px; line-height: 1.5; color: var(--jrj-text);
	border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color .25s ease;
}
.jrj-cf7 input.wpcf7-form-control::placeholder,
.jrj-cf7 textarea.wpcf7-form-control::placeholder { color: var(--jrj-muted); opacity: 1; }
.jrj-cf7 input.wpcf7-form-control:focus,
.jrj-cf7 textarea.wpcf7-form-control:focus { outline: none; border-color: var(--jrj-gold); }
.jrj-cf7 textarea.wpcf7-form-control { min-height: 200px; resize: vertical; display: block; }
.jrj-cf7__submit { margin: 6px 0 0; }
.jrj-cf7 input.wpcf7-submit {
	display: inline-block; width: auto; padding: 15px 40px; border: 0; background: var(--jrj-text); color: #fff;
	font-family: var(--jrj-sans); font-size: 13px; font-weight: 500; letter-spacing: .08em;
	cursor: pointer; transition: background .25s ease;
}
.jrj-cf7 input.wpcf7-submit:hover { background: var(--jrj-gold); }
.jrj-cf7 .wpcf7-spinner { margin: 0 6px; }

/* Validación / respuesta */
.jrj-cf7 .wpcf7-not-valid-tip { color: #b3261e; font-size: 12.5px; margin-top: 6px; }
.jrj-cf7 input.wpcf7-not-valid,
.jrj-cf7 textarea.wpcf7-not-valid { border-color: #b3261e; }
.wpcf7 .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; font-size: 14px; border-width: 1px; border-radius: 0; }

/* Consentimiento e información básica de protección de datos (RGPD-3).
   La casilla va alineada arriba porque el texto ocupa dos líneas en móvil. */
.jrj-cf7__consent { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--jrj-muted); }
.jrj-cf7__consent .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: 9px; }
.jrj-cf7__consent input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--jrj-gold); }
.jrj-cf7__consent a { color: var(--jrj-text); text-decoration: underline; text-underline-offset: 2px; }
.jrj-cf7__consent a:hover { color: var(--jrj-gold); }
.jrj-cf7__legal { margin: 0 0 16px; font-size: 11.5px; line-height: 1.55; color: var(--jrj-muted); }

/* Modal: versión compacta y botón a ancho completo */
.jrj-cf7--compact .jrj-cf7__consent { font-size: 12px; margin-bottom: 10px; }
.jrj-cf7--compact .jrj-cf7__legal { font-size: 11px; margin-bottom: 12px; }
.jrj-cf7--compact .jrj-cf7__field { margin-bottom: 12px; }
.jrj-cf7--compact textarea.wpcf7-form-control { min-height: 0; height: 104px; }
.jrj-cf7--compact input.wpcf7-submit { width: 100%; text-align: center; }

/* Móvil: en el form de contacto apilar los campos; en el modal NO (ver abajo). */
@media (max-width: 520px) {
	.jrj-cf7:not(.jrj-cf7--compact) .jrj-cf7__row { grid-template-columns: 1fr; gap: 0; }
}

/* Móvil: el popup de producto se comprime para caber sin scroll. Email y
   Teléfono se mantienen en 2 columnas y se recortan paddings/márgenes/alturas. */
@media (max-width: 600px) {
	#jrj-consulta-modal .jrj-modal__dialog { padding: 22px 20px 24px; }
	#jrj-consulta-modal .jrj-overline { margin-bottom: 6px; }
	#jrj-consulta-modal .jrj-modal__title { font-size: 22px; margin-bottom: 6px; }
	#jrj-consulta-modal .jrj-modal__product { margin-bottom: 14px; padding-bottom: 12px; font-size: 14px; }
	.jrj-cf7--compact .jrj-cf7__row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.jrj-cf7--compact .jrj-cf7__field { margin-bottom: 10px; }
	.jrj-cf7--compact input.wpcf7-form-control,
	.jrj-cf7--compact textarea.wpcf7-form-control { padding: 12px 14px; font-size: 14px; }
	.jrj-cf7--compact textarea.wpcf7-form-control { height: 82px; }
	.jrj-cf7--compact input.wpcf7-submit { padding: 13px 24px; }
}

/* Pestañas de información */
.jrj-woo .woocommerce-tabs { margin-top: clamp(50px, 6vw, 90px); }
.jrj-woo .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0 0 0; list-style: none; border-bottom: 1px solid var(--jrj-border); }
.jrj-woo .woocommerce-tabs ul.tabs::before { display: none; }
.jrj-woo .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.jrj-woo .woocommerce-tabs ul.tabs li::before,
.jrj-woo .woocommerce-tabs ul.tabs li::after { display: none; }
.jrj-woo .woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 16px; font-family: var(--jrj-sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--jrj-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.jrj-woo .woocommerce-tabs ul.tabs li.active a,
.jrj-woo .woocommerce-tabs ul.tabs li a:hover { color: var(--jrj-text); border-bottom-color: var(--jrj-gold); }
.jrj-woo .woocommerce-tabs .panel { margin: 0; padding: 0; font-size: 15px; line-height: 1.8; color: var(--jrj-text); }
.jrj-woo .woocommerce-tabs .panel h2 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 18px; }
.jrj-woo .woocommerce-tabs .panel p { color: var(--jrj-muted); font-weight: 300; }
.jrj-woo .woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.jrj-woo .woocommerce-tabs table.shop_attributes th,
.jrj-woo .woocommerce-tabs table.shop_attributes td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--jrj-border); font-size: 14px; }
.jrj-woo .woocommerce-tabs table.shop_attributes th { font-weight: 500; width: 30%; }
.jrj-woo .woocommerce-tabs table.shop_attributes td { color: var(--jrj-muted); font-weight: 300; }
.jrj-woo .woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* Cuando solo queda una pestaña, la solapa no lleva a ninguna parte: se oculta
   y el panel se lee como un bloque más. */
.jrj-woo .woocommerce-tabs ul.tabs:has(li:only-child) { display: none; }

/* Bloques bajo el producto (ficha técnica, información adicional, descripción).
   Sin margen propio: la separación la da el gap de la rejilla de .product, así
   todos los bloques quedan a la misma distancia por arriba y por abajo. */
.jrj-specs-block,
.jrj-woo-block { grid-column: 1 / -1; margin: 0; }
.jrj-specs__title,
.jrj-woo-block > h2 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 18px; }
.jrj-woo-block p { color: var(--jrj-muted); font-weight: 300; font-size: 15px; line-height: 1.8; }
.jrj-woo-block p:last-child { margin-bottom: 0; }

/* Tabla de atributos de WooCommerce ("Información adicional"), ya fuera de las pestañas. */
.jrj-woo table.shop_attributes { width: 100%; border-collapse: collapse; }
.jrj-woo table.shop_attributes th,
.jrj-woo table.shop_attributes td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--jrj-border); }
.jrj-woo table.shop_attributes th { width: 38%; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.jrj-woo table.shop_attributes td { font-size: 15px; font-weight: 300; color: var(--jrj-muted); }
.jrj-woo table.shop_attributes td p { margin: 0; }
.jrj-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.jrj-specs__row { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--jrj-border); }
.jrj-specs dt { flex: 0 0 38%; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-text); }
.jrj-specs dd { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--jrj-muted); text-wrap: pretty; }
@media (max-width: 899px) {
	.jrj-specs { grid-template-columns: 1fr; }
}

/* Relacionados */
/* Sin filete ni margen propio: separa el mismo gap que al resto de bloques. */
.jrj-related { margin-top: 0; padding-top: 0; border-top: 0; }
.jrj-related__title { margin-bottom: clamp(30px, 3.5vw, 52px); }

@media (max-width: 899px) {
	.jrj-woo div.product { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 699px) {
	.jrj-shop__toolbar { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Relacionados: una fila limpia en cada tamaño. Se piden 6 productos y se
   ocultan los que sobren, para no dejar nunca una segunda fila coja.
   Pantalla muy grande 6 · escritorio y portátil 4 · tablet 3 · móvil 2.
   -------------------------------------------------------------------------- */
.jrj-related__grid { grid-template-columns: repeat(4, 1fr); }
.jrj-related__grid > :nth-child(n+5) { display: none; }

@media (min-width: 1600px) {
	.jrj-related__grid { grid-template-columns: repeat(6, 1fr); }
	.jrj-related__grid > :nth-child(n+5) { display: block; }
}

@media (max-width: 899px) {
	.jrj-related__grid { grid-template-columns: repeat(3, 1fr); }
	.jrj-related__grid > :nth-child(n+4) { display: none; }
}

@media (max-width: 699px) {
	/* En móvil sí se aceptan dos filas de dos: es lo natural en vertical. */
	.jrj-related__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
	.jrj-related__grid > :nth-child(n+4) { display: block; }
	.jrj-related__grid > :nth-child(n+5) { display: none; }
}

/* ==========================================================================
   Fase 2 (Lamora) — utilidades comunes
   ========================================================================== */
.jrj-overline { display: block; margin: 0 0 16px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--jrj-gold); }

/* ==========================================================================
   Fase 2 (Lamora) — Página de Contacto
   ========================================================================== */
.jrj-contact-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.jrj-contact-hero.no-media { grid-template-columns: 1fr; }
.jrj-contact-hero__media { min-height: clamp(340px, 46vw, 620px); background-size: cover; background-position: center; }
.jrj-contact-hero__panel { background: var(--jrj-cream-2); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 100px) clamp(24px, 5vw, 96px); }
.jrj-contact-hero.no-media .jrj-contact-hero__panel { align-items: center; text-align: center; }
.jrj-contact-hero__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.06; margin: 0 0 22px; }
.jrj-contact-hero__text { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--jrj-muted); margin: 0 0 32px; max-width: 46ch; }
.jrj-contact-hero.no-media .jrj-contact-hero__text { margin-inline: auto; }
.jrj-contact-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.jrj-contact-body { padding-top: clamp(50px, 6vw, 96px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(36px, 5vw, 90px); align-items: start; }
.jrj-contact__h2 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; margin: 0 0 16px; }
.jrj-contact__lead { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--jrj-muted); margin: 0 0 30px; max-width: 52ch; }
.jrj-contact-form__fallback p { font-size: 15px; color: var(--jrj-muted); margin-bottom: 22px; }

.jrj-contact-info { background: var(--jrj-cream-2); padding: clamp(30px, 3vw, 46px); }
.jrj-contact-info .jrj-contact__h2 { margin-bottom: 28px; }
.jrj-contact-info__item { padding: 18px 0; border-top: 1px solid var(--jrj-border-2); }
.jrj-contact-info__item:first-of-type { border-top: 0; padding-top: 0; }
.jrj-contact-info__label { display: block; margin-bottom: 7px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--jrj-gold); font-weight: 500; }
.jrj-contact-info__value { margin: 0; font-size: 16px; line-height: 1.65; color: var(--jrj-text); font-weight: 300; }
.jrj-contact-info__value a { color: var(--jrj-text); }
.jrj-contact-info__value a:hover { color: var(--jrj-gold); }
.jrj-contact-info__map { display: inline-block; margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-gold); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.jrj-contact-info__social { display: flex; gap: 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--jrj-border-2); }
.jrj-contact-info__social a { color: var(--jrj-text); display: flex; }
.jrj-contact-info__social a:hover { color: var(--jrj-gold); }

.jrj-contact-map { line-height: 0; position: relative; }
.jrj-contact-map iframe { filter: grayscale(0.2); }
/*
 * Mapa bloqueado por Complianz hasta que hay consentimiento. Su marcador de
 * posición calcula la altura por la proporción de la imagen sobre el ancho del
 * contenedor, y aquí el mapa va a ancho completo: sin esto salen ~1800px de
 * alto. Le damos la misma altura que al iframe y le quitamos la caja blanca,
 * que en un mapa a sangre desentona. La regla de Complianz es
 * `.cmplz-placeholder-N` y va sin !important, así que basta con ganarle en
 * especificidad.
 */
.jrj-contact-map .cmplz-placeholder-parent {
	height: 460px; border-radius: 0; box-shadow: none;
	background-size: cover; background-position: center;
}
/* Rótulo con el nombre de la joyería sobre el mapa. */
.jrj-contact-map__card {
	position: absolute; left: clamp(15px, 3.4vw, 65px); bottom: clamp(18px, 2.4vw, 34px);
	display: flex; flex-direction: column; gap: 6px;
	max-width: min(330px, calc(100% - 30px));
	padding: 20px 24px; background: var(--jrj-white);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .13); line-height: 1.5;
}
.jrj-contact-map__name { font-family: var(--jrj-serif); font-size: 22px; font-weight: 400; }
.jrj-contact-map__addr { font-size: 13px; font-weight: 300; color: var(--jrj-muted); }
.jrj-contact-map__link { align-self: flex-start; margin-top: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-gold); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.jrj-contact-map__link:hover { color: var(--jrj-text); }
@media (max-width: 699px) {
	.jrj-contact-map__card { position: static; max-width: none; box-shadow: none; border-top: 1px solid var(--jrj-border); }
}
.jrj-contact-extra { padding-top: clamp(40px, 4vw, 70px); }

@media (max-width: 899px) {
	.jrj-contact-hero { grid-template-columns: 1fr; }
	.jrj-contact-hero__media { min-height: 300px; order: -1; }
	.jrj-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   Fase 2 (Lamora) — Quiénes Somos
   ========================================================================== */
.jrj-about-hero { background: var(--jrj-cream-2); text-align: center; padding: clamp(50px, 6vw, 96px) 0; }
.jrj-about-hero__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.05; margin: 0; }
.jrj-about-hero__lead { margin: 20px auto 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; line-height: 1.7; color: var(--jrj-muted); text-wrap: pretty; }
.jrj-about-banner { max-width: var(--jrj-max); margin: 0 auto; }
.jrj-about-banner img { width: 100%; max-height: 68vh; object-fit: cover; display: block; }
.jrj-about-narrative { padding-top: clamp(46px, 5vw, 84px); padding-bottom: clamp(20px, 2vw, 40px); }
.jrj-about-narrative .jrj-entry__content { font-size: 17px; line-height: 1.85; color: #3a3a3a; }
.jrj-about-narrative .jrj-entry__content p { margin: 0 0 1.4em; font-weight: 300; }
.jrj-about-narrative .jrj-entry__content p:first-child { font-size: 1.18em; line-height: 1.7; color: var(--jrj-text); }
.jrj-about-values { background: var(--jrj-cream-3); }
.jrj-about-values .jrj-features { margin-top: 0; }
.jrj-about-cta { text-align: center; padding: clamp(56px, 6vw, 96px) 0; }
.jrj-about-cta__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; margin: 0 0 16px; }
.jrj-about-cta__text { margin: 0 auto 30px; max-width: 46ch; font-size: 16px; font-weight: 300; color: var(--jrj-muted); }

/* ==========================================================================
   Fase 2 (Lamora) — Páginas genéricas / legales
   ========================================================================== */
.jrj-page__hero { background: var(--jrj-cream-2); text-align: center; padding: clamp(46px, 5.5vw, 88px) 0; }
.jrj-page__hero .jrj-page__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: 1.06; margin: 0; }
.jrj-page__lead { margin: 18px auto 0; max-width: 56ch; font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; line-height: 1.7; color: var(--jrj-muted); }
.jrj-page__body { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-page__body .jrj-entry__content { font-size: 16px; line-height: 1.85; color: #3a3a3a; }
.jrj-page__body .jrj-entry__content > *:first-child { margin-top: 0; }
.jrj-page__body .jrj-entry__content p { margin: 0 0 1.3em; font-weight: 300; }
.jrj-page__body .jrj-entry__content h2 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; margin: 1.8em 0 .6em; }
.jrj-page__body .jrj-entry__content h3 { font-family: var(--jrj-sans); font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 1.8em 0 .7em; }
.jrj-page__body .jrj-entry__content ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.jrj-page__body .jrj-entry__content li { margin: 0 0 .6em; font-weight: 300; }
.jrj-page__body .jrj-entry__content a { color: var(--jrj-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Fase 2 (Lamora) — 404
   ========================================================================== */
.jrj-404 { text-align: center; }
.jrj-404__inner { max-width: 760px; margin: 0 auto; padding: clamp(50px, 7vw, 120px) var(--jrj-pad); }
.jrj-404__code { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(120px, 22vw, 300px); line-height: .9; letter-spacing: .02em; margin: 0 0 10px; color: var(--jrj-text); }
.jrj-404__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(28px, 4vw, 52px); line-height: 1.1; margin: 0 0 26px; }
.jrj-404__divider { display: block; width: 90px; height: 2px; background: var(--jrj-gold); margin: 0 auto 26px; }
.jrj-404__text { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--jrj-muted); margin: 0 auto 30px; max-width: 46ch; }
.jrj-404__search { max-width: 420px; margin: 0 auto 30px; }
.jrj-404__btn { margin-top: 4px; }

/* ==========================================================================
   Fase 2 (Lamora) — Blog
   ========================================================================== */
.jrj-blog { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(36px, 4vw, 70px); align-items: start; }
.jrj-blog__main { min-width: 0; }

/* Tarjeta de entrada (listado) */
.jrj-post-card--list { margin-bottom: clamp(44px, 5vw, 76px); }
.jrj-post-card--list .jrj-post-card__thumb { position: relative; display: block; overflow: hidden; margin-bottom: 24px; background: var(--jrj-cream); }
.jrj-post-card--list .jrj-post-card__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s ease; }
.jrj-post-card--list:hover .jrj-post-card__thumb img { transform: scale(1.04); }
.jrj-post-card__date { position: absolute; top: 18px; left: 18px; background: #fff; color: var(--jrj-text); padding: 10px 14px; text-align: center; line-height: 1; display: flex; flex-direction: column; gap: 4px; }
.jrj-post-card__date strong { font-family: var(--jrj-serif); font-size: 24px; font-weight: 500; }
.jrj-post-card__date span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-post-card__cat { display: inline-block; margin-bottom: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--jrj-gold); font-weight: 500; }
.jrj-post-card--list .jrj-post-card__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; margin: 0 0 14px; }
.jrj-post-card--list .jrj-post-card__title a { color: var(--jrj-text); }
.jrj-post-card--list .jrj-post-card__title a:hover { color: var(--jrj-gold); }
.jrj-post-card__excerpt { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--jrj-muted); margin-bottom: 18px; }
.jrj-post-card__more { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--jrj-text); padding-bottom: 4px; }
.jrj-post-card__more:hover { color: var(--jrj-gold); border-color: var(--jrj-gold); }

/* Estado vacío */
.jrj-blog__empty { text-align: center; padding: clamp(30px, 5vw, 70px) 0; }
.jrj-blog__empty-title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); margin: 0 0 16px; }
.jrj-blog__empty p { max-width: 48ch; margin: 0 auto 28px; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--jrj-muted); }

/* Paginación de entradas — ver bloque unificado al final de la hoja */

/* Sidebar / widgets */
.jrj-blog__sidebar { display: grid; gap: clamp(30px, 3vw, 44px); }
.jrj-widget__title { font-family: var(--jrj-serif); font-weight: 400; font-size: 24px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--jrj-border); }
.jrj-widget__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jrj-widget__list a { color: var(--jrj-text); font-size: 15px; font-weight: 300; }
.jrj-widget__list a:hover { color: var(--jrj-gold); }
.jrj-widget__empty { font-size: 14px; font-weight: 300; color: var(--jrj-muted); margin: 0; }
.jrj-widget__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.jrj-widget__post { display: flex; gap: 14px; align-items: center; }
.jrj-widget__post-thumb { flex: 0 0 64px; }
.jrj-widget__post-thumb img { width: 64px; height: 64px; object-fit: cover; }
.jrj-widget__post-body { display: flex; flex-direction: column; gap: 4px; }
.jrj-widget__post-title { font-family: var(--jrj-serif); font-size: 17px; line-height: 1.25; color: var(--jrj-text); }
.jrj-widget__post-title:hover { color: var(--jrj-gold); }
.jrj-widget__post-date { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-blog__sidebar .search-form { display: flex; height: 50px; }
.jrj-blog__sidebar .search-form label { flex: 1; display: flex; }
.jrj-blog__sidebar .search-field { flex: 1; width: 100%; min-width: 0; border: 1px solid var(--jrj-border-2); border-right: 0; padding: 0 16px; font-family: var(--jrj-sans); font-size: 14px; font-weight: 300; outline: none; }
.jrj-blog__sidebar .search-submit { border: 0; background: var(--jrj-text); color: #fff; padding: 0 20px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

/* Entrada individual */
.jrj-single__meta { margin: 16px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-single__thumb { margin: 0 0 clamp(28px, 3.5vw, 48px); }
.jrj-single__thumb img { width: 100%; height: auto; display: block; }
.jrj-single__content { font-size: 17px; line-height: 1.85; color: #3a3a3a; }
.jrj-single__content p { margin: 0 0 1.4em; font-weight: 300; }
.jrj-single__content h2 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); margin: 1.6em 0 .5em; }
.jrj-single__content h3 { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); margin: 1.4em 0 .5em; }
.jrj-single__content img { margin: 1.5em 0; height: auto; }
.jrj-single__tags { margin-top: 36px; font-size: 13px; color: var(--jrj-muted); }
.jrj-single__tags-label { letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.jrj-single__tags a { color: var(--jrj-text); }
.jrj-single__nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--jrj-border); font-size: 14px; }
.jrj-single__nav a { color: var(--jrj-text); }
.jrj-single__nav a:hover { color: var(--jrj-gold); }
.jrj-single__nav-next { text-align: right; margin-left: auto; }

@media (max-width: 899px) {
	.jrj-blog__grid { grid-template-columns: 1fr; }
	.jrj-blog__sidebar { margin-top: 20px; }
}

/* ==========================================================================
   Fase 2 (Lamora) — Página Marcas
   ========================================================================== */
.jrj-brands { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-brands__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 50px) clamp(18px, 2vw, 36px); }
.jrj-brand-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(14px, 2vw, 26px); transition: transform .3s ease; }
.jrj-brand-card:hover { transform: translateY(-4px); }
.jrj-brand-card__media { display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; margin-bottom: 16px; }
.jrj-brand-card__media img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: opacity .3s ease; }
.jrj-brand-card:hover .jrj-brand-card__media img { opacity: .7; }
.jrj-brand-card__media.is-text { height: auto; min-height: 110px; }
.jrj-brand-card__name { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); color: var(--jrj-text); line-height: 1.1; }
.jrj-brand-card:hover .jrj-brand-card__name { color: var(--jrj-gold); }
.jrj-brand-card__count { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-brands__intro { margin: clamp(40px, 4vw, 64px) auto 0; }

/* Página Colecciones (grid independiente, misma tarjeta que la Home) */
.jrj-collections-page { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }

@media (max-width: 1099px) { .jrj-brands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px)  { .jrj-brands__grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Fase 2 (Lamora) — Búsqueda global (productos + contenidos + taxonomías)
   ========================================================================== */
.jrj-search__count { margin: 16px 0 22px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--jrj-muted); }
.jrj-page__hero .jrj-search-form { max-width: 460px; margin: 0 auto; }
.jrj-search-results { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-search-block { margin-bottom: clamp(46px, 5vw, 80px); }
.jrj-search-block:last-child { margin-bottom: 0; }
.jrj-search-block__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; margin: 0 0 clamp(22px, 2.4vw, 34px); padding-bottom: 16px; border-bottom: 1px solid var(--jrj-line, #e7e0d5); }

/* Coincidencias de taxonomías */
.jrj-search-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.jrj-search-term { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--jrj-cream-2); border: 1px solid transparent; transition: border-color .25s ease, background .25s ease; }
.jrj-search-term:hover { background: #fff; border-color: var(--jrj-gold); }
.jrj-search-term__kind { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--jrj-gold); }
.jrj-search-term__name { font-family: var(--jrj-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; color: var(--jrj-text); }
.jrj-search-term__count { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--jrj-muted); }

/* Los artículos/páginas usan la tarjeta de blog en una sola columna estrecha */
.jrj-search-pages { max-width: 760px; }

@media (max-width: 899px) { .jrj-search-terms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .jrj-search-terms { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fase 2 (Lamora) — Paginación editorial unificada (tienda, blog y búsqueda)
   Números sin caja en Jost; página activa en negro con subrayado dorado;
   anterior/siguiente como chevrones finos; hairline superior de separación.
   ========================================================================== */
.jrj-woo .woocommerce-pagination,
.jrj-blog .navigation.pagination,
.jrj-search-results .navigation.pagination {
	margin-top: clamp(44px, 5vw, 80px);
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid var(--jrj-border-2);
	text-align: center;
}
.jrj-woo .woocommerce-pagination ul.page-numbers,
.jrj-blog .nav-links,
.jrj-search-results .nav-links {
	display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: clamp(2px, .6vw, 12px); list-style: none; margin: 0; padding: 0; border: 0;
}
.jrj-woo .woocommerce-pagination ul.page-numbers li { margin: 0; padding: 0; border: 0; }

/* Números y flechas — base */
.jrj-woo .woocommerce-pagination .page-numbers,
.jrj-blog .nav-links .page-numbers,
.jrj-search-results .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 4px;
	font-family: var(--jrj-sans); font-size: 15px; font-weight: 400; letter-spacing: .1em; line-height: 1;
	color: var(--jrj-muted); background: transparent; border: 0; border-radius: 0;
	position: relative; transition: color .3s ease;
}
.jrj-woo .woocommerce-pagination a.page-numbers:hover,
.jrj-blog .nav-links a.page-numbers:hover,
.jrj-search-results .nav-links a.page-numbers:hover { color: var(--jrj-gold); }

/* Anula la caja/borde por defecto de WooCommerce (gana en especificidad de serie). */
.jrj-woo .woocommerce-pagination ul li a.page-numbers,
.jrj-woo .woocommerce-pagination ul li span.page-numbers { background: transparent !important; border: 0 !important; }

/* Página activa: tinta + subrayado dorado corto */
.jrj-woo .woocommerce-pagination .page-numbers.current,
.jrj-blog .nav-links .page-numbers.current,
.jrj-search-results .nav-links .page-numbers.current { color: var(--jrj-text); }
.jrj-woo .woocommerce-pagination .page-numbers.current::after,
.jrj-blog .nav-links .page-numbers.current::after,
.jrj-search-results .nav-links .page-numbers.current::after {
	content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
	width: 16px; height: 1.5px; background: var(--jrj-gold);
}

/* Puntos suspensivos */
.page-numbers.dots { color: var(--jrj-muted-2); letter-spacing: .12em; min-width: 24px; }

/* Anterior / Siguiente como chevrones (se oculta el texto/flecha por defecto) */
.jrj-woo .woocommerce-pagination .page-numbers.prev,
.jrj-woo .woocommerce-pagination .page-numbers.next,
.jrj-blog .nav-links .page-numbers.prev,
.jrj-blog .nav-links .page-numbers.next,
.jrj-search-results .nav-links .page-numbers.prev,
.jrj-search-results .nav-links .page-numbers.next {
	color: var(--jrj-text); font-size: 0; width: 40px; margin: 0 clamp(2px, .6vw, 10px);
}
.page-numbers.prev::before,
.page-numbers.next::before {
	content: ""; display: block; width: 8px; height: 8px;
	border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
	transition: border-color .3s ease;
}
.page-numbers.prev::before { transform: rotate(-135deg); position: relative; left: 2px; }
.page-numbers.next::before { transform: rotate(45deg); position: relative; right: 2px; }

/* ==========================================================================
   Blog — Listado en GRID (estilo Lamora, tokens propios)
   ========================================================================== */
.jrj-blog-list { padding-top: clamp(40px, 4.5vw, 76px); padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3vw, 48px) clamp(24px, 2.4vw, 34px); }

.jrj-grid-card { display: flex; flex-direction: column; }
.jrj-grid-card__thumb { display: block; overflow: hidden; background: var(--jrj-cream); margin-bottom: 22px; }
.jrj-grid-card__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .7s ease; }
.jrj-grid-card:hover .jrj-grid-card__thumb img { transform: scale(1.05); }
.jrj-grid-card__thumb-ph { display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--jrj-cream); }
.jrj-grid-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.jrj-grid-card__date { color: var(--jrj-muted); }
.jrj-grid-card__cat { position: relative; padding-left: 11px; color: var(--jrj-gold); font-weight: 500; }
.jrj-grid-card__cat::before { content: "·"; position: absolute; left: 0; color: var(--jrj-muted); }
.jrj-grid-card__cat:hover { color: var(--jrj-text); }
.jrj-grid-card__title { font-family: var(--jrj-serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.18; margin: 0 0 12px; }
.jrj-grid-card__title a { color: var(--jrj-text); }
.jrj-grid-card__title a:hover { color: var(--jrj-gold); }
.jrj-grid-card__excerpt { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--jrj-muted); margin: 0 0 18px; }
.jrj-grid-card__more { margin-top: auto; align-self: flex-start; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--jrj-text); border-bottom: 1px solid var(--jrj-text); padding-bottom: 4px; }
.jrj-grid-card__more:hover { color: var(--jrj-gold); border-color: var(--jrj-gold); }

@media (max-width: 899px) { .jrj-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .jrj-blog-grid { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 48px); } }

/* ==========================================================================
   Blog — Entrada individual ONE COLUMN (estilo Lamora, tokens propios)
   ========================================================================== */
.jrj-single__hero { padding-bottom: clamp(28px, 3vw, 44px); }
.jrj-single__cat { display: inline-block; }
a.jrj-single__cat:hover { color: var(--jrj-text); }
.jrj-single__title { margin-top: 6px; }
.jrj-single__meta-sep { color: var(--jrj-border-2); }
.jrj-single__banner { margin: 0 0 clamp(32px, 4vw, 56px); }
/* La imagen no ocupa todo el ancho: sobresale ~80px a cada lado de la columna
   de texto (columna ≈870px → imagen 1030px), centrada. En móvil llena el ancho. */
.jrj-single__banner img { width: 100%; max-width: 1030px; height: auto; margin: 0 auto; display: block; aspect-ratio: 16 / 8.5; object-fit: cover; background: var(--jrj-cream); }
.jrj-single__main { padding-bottom: clamp(50px, 6vw, 96px); }
.jrj-single__content h2:first-child,
.jrj-single__content p:first-child { margin-top: 0; }

/* ==========================================================================
   Catálogo — filtros y orden en POP-UP solo en móvil
   Los controles se pintan una única vez dentro de un contenedor de modal
   (.jrj-modal--tools). En escritorio el modal se "desactiva" aquí y queda en
   línea en la barra, igual que antes; en móvil se abre con el botón "Filtros".
   ========================================================================== */
.jrj-filters-toggle { display: none; }

@media (min-width: 700px) {
	/* Escritorio: deja de ser modal (nada cambia respecto al diseño aprobado). */
	.jrj-modal--tools,
	.jrj-modal--tools[hidden] { display: block; position: static; inset: auto; z-index: auto; padding: 0; }
	.jrj-modal--tools .jrj-modal__overlay,
	.jrj-modal--tools .jrj-modal__close,
	.jrj-modal--tools .jrj-modal__title { display: none; }
	.jrj-modal--tools .jrj-modal__dialog {
		width: auto; max-width: none; max-height: none; overflow: visible;
		background: transparent; padding: 0; animation: none;
	}
}

@media (max-width: 699px) {
	/* Recuento a la izquierda y botón de filtros a la derecha, en la misma
	   línea: el recuento parte su texto en dos líneas antes que bajar el botón. */
	.jrj-shop__toolbar { justify-content: space-between; flex-wrap: nowrap; gap: 14px 16px; }
	.jrj-shop__toolbar .woocommerce-result-count { flex: 1 1 auto; min-width: 0; }
	.jrj-filters-toggle { flex: 0 0 auto; }

	.jrj-filters-toggle {
		display: inline-flex; align-items: center; gap: 9px;
		font-family: var(--jrj-sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
		color: var(--jrj-text); background: transparent;
		border: 1px solid var(--jrj-border-2); border-radius: 0;
		padding: 11px 16px; cursor: pointer; transition: border-color .3s ease;
	}
	.jrj-filters-toggle svg { color: var(--jrj-gold); }
	.jrj-filters-toggle.is-active { border-color: var(--jrj-gold); }
	.jrj-filters-toggle__count {
		display: inline-flex; align-items: center; justify-content: center;
		width: 18px; height: 18px; border-radius: 50%;
		background: var(--jrj-gold); color: var(--jrj-white);
		font-size: 11px; letter-spacing: 0;
	}

	/* Dentro del pop-up: una columna y controles a ancho completo. */
	.jrj-modal--tools .jrj-modal__dialog { max-width: 420px; padding: 26px 22px 28px; }
	.jrj-modal--tools .jrj-modal__title { font-size: 24px; margin-bottom: 20px; }
	.jrj-modal--tools .jrj-shop__tools,
	.jrj-modal--tools .jrj-filters { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
	.jrj-modal--tools .jrj-filters__field { flex: 1 1 auto; width: 100%; }
	.jrj-modal--tools .jrj-filters select,
	.jrj-modal--tools .woocommerce-ordering,
	.jrj-modal--tools .woocommerce-ordering select { width: 100%; }
	.jrj-modal--tools .jrj-filters select,
	.jrj-modal--tools select.orderby { padding: 13px 40px 13px 14px; font-size: 12px; letter-spacing: .08em; }
	.jrj-modal--tools .jrj-filters__reset { align-self: center; margin-top: 6px; }
}

/* ==========================================================================
   Migas de pan en móvil — 11px (petición del cliente): en el listado salían a
   12px y en la ficha a 14,7px, demasiado grandes.
   Ojo con la ficha: `woocommerce.css` carga DESPUÉS y su
   `.woocommerce-breadcrumb{font-size:.92em}` empata en especificidad con
   `.jrj-breadcrumb`, así que ganaba siempre; hay que prefijar con `.jrj-woo`.
   ========================================================================== */
/* DEUDA-5 · En escritorio pasaba lo mismo y se había resuelto solo en móvil: la
   ficha servía las migas a 14,7px mientras el resto del sitio las tiene a 13.
   El mismo prefijo `.jrj-woo` que ya se usa abajo basta para ganar el empate. */
.jrj-woo .woocommerce-breadcrumb { font-size: 13px; }

@media (max-width: 699px) {
	.jrj-archive__crumbs,
	.jrj-woo .woocommerce-breadcrumb { font-size: 11px; }
}

/* ==========================================================================
   Paginación en móvil — siempre en UNA sola línea
   Se compactan números y chevrones y, con :has(), se dejan a la vista solo
   prev, la primera, la actual y sus vecinas, los puntos y la última, para que
   la flecha "siguiente" nunca caiga a una segunda línea (hay 17 páginas).
   ========================================================================== */
@media (max-width: 699px) {
	.jrj-woo .woocommerce-pagination ul.page-numbers,
	.jrj-blog .nav-links,
	.jrj-search-results .nav-links { flex-wrap: nowrap; gap: 3px; }

	.jrj-woo .woocommerce-pagination .page-numbers,
	.jrj-blog .nav-links .page-numbers,
	.jrj-search-results .nav-links .page-numbers { min-width: 30px; height: 34px; padding: 0 2px; font-size: 14px; }

	.jrj-woo .woocommerce-pagination .page-numbers.prev,
	.jrj-woo .woocommerce-pagination .page-numbers.next,
	.jrj-blog .nav-links .page-numbers.prev,
	.jrj-blog .nav-links .page-numbers.next,
	.jrj-search-results .nav-links .page-numbers.prev,
	.jrj-search-results .nav-links .page-numbers.next { width: 30px; min-width: 30px; margin: 0; }

	.page-numbers.dots { min-width: 18px; }
}

/* El recorte de números va aparte y bajo @supports: si un navegador no
   entendiera :has(), la regla de excepciones se descartaría y desaparecerían
   TODOS los números. Así, sin :has() simplemente no se recorta nada. */
@supports selector(:has(+ *)) {
	@media (max-width: 699px) {
		/* WooCommerce pinta la paginación como <ul><li>.
		   El recorte solo entra si WordPress ya ha metido puntos suspensivos:
		   con pocas páginas caben todas y no hay que dejar huecos raros. */
		.jrj-woo .woocommerce-pagination ul.page-numbers:has(.dots) > li { display: none; }
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:first-child,
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:last-child,
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(> .dots),
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(> .current),
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(> .prev) + li,
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(> .current) + li,
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(+ li > .current),
		.jrj-woo .woocommerce-pagination ul.page-numbers > li:has(+ li > .next) { display: block; }

		/* Blog y búsqueda: the_posts_pagination pinta los enlaces sin <li>. */
		.jrj-blog .nav-links:has(.dots) > .page-numbers,
		.jrj-search-results .nav-links:has(.dots) > .page-numbers { display: none; }
		/* Las excepciones repiten el :has(.dots) del contenedor: si no, empatan
		   por debajo de la regla que oculta y se perderían los puntos y la
		   página actual (aquí no hay <li> que sume especificidad). */
		.jrj-blog .nav-links:has(.dots) > .page-numbers:first-child,
		.jrj-blog .nav-links:has(.dots) > .page-numbers:last-child,
		.jrj-blog .nav-links:has(.dots) > .dots,
		.jrj-blog .nav-links:has(.dots) > .current,
		.jrj-blog .nav-links:has(.dots) > .prev + .page-numbers,
		.jrj-blog .nav-links:has(.dots) > .current + .page-numbers,
		.jrj-blog .nav-links:has(.dots) > .page-numbers:has(+ .current),
		.jrj-blog .nav-links:has(.dots) > .page-numbers:has(+ .next),
		.jrj-search-results .nav-links:has(.dots) > .page-numbers:first-child,
		.jrj-search-results .nav-links:has(.dots) > .page-numbers:last-child,
		.jrj-search-results .nav-links:has(.dots) > .dots,
		.jrj-search-results .nav-links:has(.dots) > .current,
		.jrj-search-results .nav-links:has(.dots) > .prev + .page-numbers,
		.jrj-search-results .nav-links:has(.dots) > .current + .page-numbers,
		.jrj-search-results .nav-links:has(.dots) > .page-numbers:has(+ .current),
		.jrj-search-results .nav-links:has(.dots) > .page-numbers:has(+ .next) { display: inline-flex; }
	}
}

/* ==========================================================================
   Entrada del blog — migas de pan y artículos relacionados (28/08)
   ========================================================================== */

/* Las migas de Yoast dentro de la cabecera crema del post. Van centradas
   porque toda la cabecera lo está, y el enlace activo (el propio título) se
   pinta apagado para que no parezca pulsable. */
.jrj-single__breadcrumb { margin-bottom: 18px; text-align: center; }
.jrj-single__breadcrumb a { color: var(--jrj-muted); }
.jrj-single__breadcrumb a:hover { color: var(--jrj-gold); }
.jrj-single__breadcrumb .breadcrumb_last { color: var(--jrj-text); }

/* Bloque de relacionadas: mismo patrón que "También te puede interesar" de la
   ficha de producto (título centrado + rejilla), pero con la tarjeta del blog.
   Va a ancho de la columna de lectura, que es donde vive el resto del post. */
.jrj-post-related { margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--jrj-border); }
.jrj-post-related__title { margin-bottom: clamp(26px, 3vw, 44px); }
.jrj-post-related__grid { gap: clamp(20px, 2.4vw, 32px); }
/* Con 2 o 3 artículos la rejilla de 3 columnas deja huecos raros en la columna
   estrecha del post: se pasa a 2 columnas y, en móvil, a una. */
.jrj-post-related__grid { grid-template-columns: repeat(2, 1fr); }
.jrj-post-related__grid .jrj-grid-card__title { font-size: clamp(19px, 1.6vw, 23px); }
@media (max-width: 599px) {
	.jrj-post-related__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Preguntas frecuentes — acordeón (28/08)
   Patrón de la plantilla de referencia: sin cajas ni bordes gruesos, pregunta
   en serif grande a la izquierda y chevron a la derecha, separación generosa
   entre items. Aquí se le añade un hairline entre preguntas porque nuestra
   tipografía serif es más ligera y sin él la lista se lee blanda.
   ========================================================================== */
.jrj-faqs__hero { text-align: center; }
.jrj-faqs__breadcrumb { margin-bottom: 18px; text-align: center; }
.jrj-faqs__breadcrumb a { color: var(--jrj-muted); }
.jrj-faqs__breadcrumb a:hover { color: var(--jrj-gold); }
.jrj-faqs__breadcrumb .breadcrumb_last { color: var(--jrj-text); }
.jrj-faqs__intro { margin: 18px auto 0; max-width: 620px; color: var(--jrj-muted); font-size: 16px; line-height: 1.7; font-weight: 300; }

.jrj-accordion { border-top: 1px solid var(--jrj-border); }
.jrj-accordion__item { border-bottom: 1px solid var(--jrj-border); }
.jrj-accordion__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.jrj-accordion__toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: clamp(20px, 2.2vw, 28px) 0; margin: 0;
	background: transparent; border: 0; cursor: pointer; text-align: left;
	color: var(--jrj-text); transition: color .25s ease;
}
.jrj-accordion__toggle:hover { color: var(--jrj-gold); }
.jrj-accordion__toggle:focus-visible { outline: 2px solid var(--jrj-gold); outline-offset: 4px; }
.jrj-accordion__question {
	font-family: var(--jrj-serif); font-weight: 400;
	font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25; letter-spacing: -.005em;
}
/* El chevron del tema apunta hacia abajo; al abrir gira 180°. */
.jrj-accordion__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--jrj-gold); transition: transform .3s ease; }
.jrj-accordion__item.is-open .jrj-accordion__icon { transform: rotate(180deg); }
/* El icono `chevron` del tema es de 9px, pensado para los desplegables del
   menú. Aquí necesita presencia, como en la plantilla de referencia. */
.jrj-accordion__icon svg { width: 15px; height: 15px; }

.jrj-accordion__panel { padding-bottom: clamp(20px, 2.2vw, 28px); }
.jrj-accordion__answer { max-width: 780px; font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--jrj-muted); }
.jrj-accordion__answer p { margin: 0 0 1.1em; }
.jrj-accordion__answer p:last-child { margin-bottom: 0; }
.jrj-accordion__answer a { color: var(--jrj-text); text-decoration: underline; text-underline-offset: 3px; }
.jrj-accordion__answer a:hover { color: var(--jrj-gold); }

.jrj-faqs__content { margin-top: clamp(32px, 3.5vw, 48px); }
.jrj-faqs__cta { margin-top: clamp(40px, 4.5vw, 68px); text-align: center; }
.jrj-faqs__cta-text { margin: 0 0 18px; font-family: var(--jrj-serif); font-size: clamp(20px, 2vw, 26px); font-weight: 400; }