/*
Theme Name: JJE Theme
Theme URI: https://eligeparatubebe.es
Author: JJEGroup
Author URI: https://github.com/jjegroupcoop/jjegroup
Description: Tema propio de Elige Para Tu Bebé. Implementa el Design System (Design System CSS), la librería de componentes (UI Components Specification) y la arquitectura de páginas (Page Templates & Responsive Wireframes). Mobile-first.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jje-group
Tags: e-commerce, blog, custom-logo, custom-menu
*/

/* ==========================================================================
	FASE 1 — LAYOUT/CONTAINER, COMPONENTES BASE, HEADER Y FOOTER
	Orden seguido (regla 200 del Page Templates): 1 tokens (jje-brand),
	2 layout/container, 3 componentes base, 4 header/footer.
	Los design tokens globales (--color-*, --space-*, --radius-*, ...) viven
	en el mu-plugin jje-brand.php (siempre disponible). Este tema los consume.
	========================================================================== */

/* --------------------------------------------------------------------------
	2. LAYOUT Y CONTAINER
	-------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* clip (no hidden) to avoid creating a scroll container that breaks
		position: sticky on the header. Supported in all modern browsers. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var( --color-off-white, #FCFBF9 );
	color: var( --color-text, #3F3C39 );
	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Container principal (layout por defecto) */
.jje-container {
	width: min( calc( 100% - 48px ), var( --container-content, 1280px ) );
	margin-inline: auto;
}

/* Ancho amplio (header/footer/bandas) */
.jje-container--wide {
	width: min( calc( 100% - 48px ), var( --container-wide, 1440px ) );
	margin-inline: auto;
}

/* Lectura editorial */
.jje-container--reading {
	width: min( calc( 100% - 48px ), var( --container-reading, 760px ) );
	margin-inline: auto;
}

a {
	color: var( --color-sage, #969D8C );
	text-decoration: none;
}
a:hover {
	color: var( --color-heading, #737D6B );
}

img {
	max-width: 100%;
	height: auto;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
	3. COMPONENTES BASE — TIPOGRAFÍA
	-------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Lora", Georgia, serif;
	color: var( --color-heading, #737D6B );
	line-height: 1.2;
	margin: 0 0 0.5em;
	scroll-margin-top: 110px;
}

h1 { font-size: clamp( 1.75rem, 4vw, 2.5rem ); }
h2 { font-size: clamp( 1.4rem, 3vw, 2rem ); }
h3 { font-size: clamp( 1.15rem, 2vw, 1.4rem ); }

/* --------------------------------------------------------------------------
	4. HEADER — Desktop (spec 3-8 del UI Components)
	-------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var( --z-header, 500 );
	/* Prácticamente opaco: evita el artefacto de recorte del contenido sticky
		que provoca backdrop-filter: blur() en algunos navegadores al hacer scroll. */
	background: rgba( 255, 255, 255, .98 );
	border-bottom: 1px solid rgba( 232, 229, 225, .75 );
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 88px;
	padding-block: 16px;
}

/* Logo */
.site-header__logo {
	width: 150px;
	max-width: 170px;
	flex: none;
	display: inline-flex;
	align-items: center;
}
.site-header__logo img {
	width: 100%;
	max-width: 170px;
	height: auto;
	display: block;
	box-shadow: none;
	border: 0;
	background: transparent;
	filter: none;
}
.site-header__logo .site-title {
	font-family: "Lora", Georgia, serif;
	font-size: 1.25rem;
	color: var( --color-heading, #737D6B );
	line-height: 1.1;
}

/* Navegación principal */
.site-header__nav {
	flex: none;
}
.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__nav li {
	position: relative;
}
.site-header__nav a {
	display: inline-block;
	padding-block: 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var( --color-text, #3F3C39 );
}
.site-header__nav a:hover {
	color: var( --color-sage, #969D8C );
}
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a {
	color: var( --color-heading, #737D6B );
	border-bottom: 2px solid var( --color-sage, #969D8C );
}
/* Submenu */
.site-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border-radius: var( --radius-sm, 8px );
	box-shadow: var( --shadow-md, none );
	padding: 8px 0;
	min-width: 200px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.site-header__nav li:hover > .sub-menu,
.site-header__nav li:focus-within > .sub-menu {
	display: block;
}
.site-header__nav .sub-menu a {
	padding: 10px 16px;
	font-size: 14px;
}

/* Toggle "Categorías" (mismo aspecto que un enlace del nav) */
.jje-nav-categories__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	border-radius: 0;
	padding-inline: 0;
	padding-block: 12px;
	margin: 0;
	cursor: pointer;
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	text-align: left;
	color: var( --color-text, #3F3C39 );
	appearance: none;
	-webkit-appearance: none;
}
.jje-nav-categories__toggle:hover {
	color: var( --color-sage, #969D8C );
}
.jje-nav-categories__chevron {
	width: 16px;
	height: 16px;
	transition: transform var( --transition-fast, 150ms ease );
}
.jje-nav-categories.is-open .jje-nav-categories__chevron {
	transform: rotate( 180deg );
	color: var( --color-sage, #969D8C );
}

/* Panel del mega-dropdown jerárquico de categorías */
.jje-nav-categories__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: auto;
	right: 0;
	z-index: 50;
	min-width: 320px;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var( --radius-sm, 8px );
	box-shadow: var( --shadow-md, none );
	padding: 10px 0;
}
.jje-nav-categories.is-open > .jje-nav-categories__panel {
	display: block;
}
.jje-nav-categories__panel .sub-menu {
	display: block;
	position: static;
	box-shadow: none;
	border-radius: 0;
	flex-direction: column;
}
.jje-nav-categories .menu-item-has-children > a {
	font-weight: 600;
	color: var( --color-heading, #737D6B );
}
/* Los hijos del árbol se muestran siempre indentados dentro del dropdown */
.jje-nav-categories .sub-menu .sub-menu {
	position: static;
	display: block;
	box-shadow: none;
	border-radius: 0;
	padding: 2px 0 6px;
	margin: 0 10px 0 18px;
	border-left: 1px solid var( --color-gray-200, #E8E5E1 );
}
.jje-nav-categories .sub-menu .sub-menu a {
	padding: 8px 12px;
	font-weight: 400;
	color: var( --color-text-muted, #73706C );
}

/* Raíces del árbol: colapsadas por defecto. El nombre es un enlace que navega
	a la categoría; el chevron de la derecha despliega las subcategorías con un
	acordeón suave (grid-rows, mismo patrón que .jje-collapse/.jje-faq). */
.jje-nav-categories .jje-nav-root {
	display: block;
}
.jje-nav-root__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 8px;
}
.jje-nav-root__link {
	flex: 1 1 auto;
	font-weight: 600;
	color: var( --color-heading, #737D6B );
}
.jje-nav-root__link:hover {
	color: var( --color-sage, #969D8C );
}
.jje-nav-root__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var( --radius-pill, 999px );
	background: var( --color-gray-100, #F4F0EB );
	color: var( --color-sage, #969D8C );
	cursor: pointer;
	transition: transform var( --transition-base, 220ms ease ), background var( --transition-fast, 150ms ease );
}
.jje-nav-root__toggle:hover {
	background: var( --color-gray-200, #E8E5E1 );
}
.jje-nav-root__chevron {
	width: 16px;
	height: 16px;
	transition: transform var( --transition-base, 220ms ease );
}
.jje-nav-root.is-open .jje-nav-root__chevron {
	transform: rotate( 180deg );
}
.jje-nav-root__children {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	visibility: hidden;
	transition: grid-template-rows 220ms ease 380ms, visibility 0s linear 620ms;
}
.jje-nav-root.is-open .jje-nav-root__children {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var( --transition-base, 220ms ease ), visibility 0s;
}
.jje-nav-root__children > .jje-nav-root__list {
	min-height: 0;
	overflow: hidden;
}
.jje-nav-root__children li {
	animation: jje-nav-item-out 340ms ease both;
}
.jje-nav-root.is-open .jje-nav-root__children li {
	animation: jje-nav-item-in 320ms cubic-bezier( .22, 1, .36, 1 ) both;
}
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( 1 ) { animation-delay: 30ms; }
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( 2 ) { animation-delay: 60ms; }
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( 3 ) { animation-delay: 90ms; }
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( 4 ) { animation-delay: 120ms; }
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( 5 ) { animation-delay: 150ms; }
.jje-nav-root.is-open .jje-nav-root__children li:nth-child( n+6 ) { animation-delay: 180ms; }
@keyframes jje-nav-item-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes jje-nav-item-out {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY( 4px );
	}
}

/* Espacio flexible */
.site-header__spacer {
	flex: 1 1 auto;
}

/* Buscador (spec 9) */
.site-header__search {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var( --color-gray-300, #DAD7D3 );
	border-radius: var( --radius-md, 14px );
	padding: 6px 12px;
	background: #fff;
	width: 240px;
}
.site-header__search input {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	width: 100%;
	color: var( --color-text, #3F3C39 );
}
.site-header__search:focus-within {
	border-color: var( --color-sage, #969D8C );
	box-shadow: 0 0 0 3px rgba( var( --color-sage-rgb, 150,157,140 ), .15 );
}
.site-header__search svg {
	width: 18px;
	height: 18px;
	color: var( --color-text-muted, #73706C );
	flex: none;
}

/* Iconos de acción (spec 6) */
.site-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.site-header__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var( --radius-pill, 999px );
	color: var( --color-text, #3F3C39 );
	position: relative;
	transition: background var( --transition-fast, 150ms ease ), color var( --transition-fast, 150ms ease );
}
.site-header__action:hover {
	background: var( --color-gray-100, #F5F4F2 );
	color: var( --color-sage, #969D8C );
}
.site-header__action svg {
	width: 22px;
	height: 22px;
}
.site-header__action--label {
	font-size: 11px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
	4b. HEADER — Mobile (spec 7-8)
	Menú drawer desde la derecha. Mostrar solo iconos.
	-------------------------------------------------------------------------- */
.site-header__toggle {
	display: none;
}
.header-mobile-actions {
	display: none;
}

/* Drawer mobile */
@media ( max-width: 1023px ) {
	.site-header__nav,
	.site-header__search,
	.site-header__desktop-actions {
		display: none;
	}
	.site-header__inner {
		min-height: 68px;
		gap: 12px;
		padding-inline: 20px;
	}
	.site-header__logo {
		width: 115px;
		max-width: 115px;
	}
	.site-header__toggle {
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		color: var( --color-text, #3F3C39 );
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}
	.site-header__toggle svg {
		width: 22px;
		height: 22px;
	}
	.header-mobile-actions {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-left: auto;
	}
	.site-header__toggle--menu {
		margin-left: 0;
	}
	.site-header__logo {
		margin-right: auto;
	}
	/* Keep logo centered-ish: menu left, actions right handled by flex order */
	.site-header__inner .site-header__logo {
		margin-right: 0;
	}
}

/* Drawer lateral */
.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: var( --z-modal, 1000 );
	width: min( 88vw, 360px );
	height: 100%;
	background: #fff;
	transform: translateX( 100% );
	transition: transform var( --transition-slow, 400ms ease );
	display: flex;
	flex-direction: column;
	box-shadow: var( --shadow-lg, none );
}
.mobile-menu.is-open {
	transform: translateX( 0 );
}
.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
}
.mobile-menu__close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var( --color-text, #3F3C39 );
	cursor: pointer;
}
.mobile-menu__close svg {
	width: 22px;
	height: 22px;
}
.mobile-menu__nav {
	overflow-y: auto;
	padding: 8px 0;
	flex: 1;
}
.mobile-menu__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile-menu__nav li {
	padding-inline: 24px;
}
.mobile-menu__nav a {
	display: block;
	min-height: 52px;
	line-height: 52px;
	font-size: 17px;
	color: var( --color-text, #3F3C39 );
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
}
.mobile-menu__nav .jje-nav-categories__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	background: none;
	border: 0;
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
	padding: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 17px;
	color: var( --color-text, #3F3C39 );
	cursor: pointer;
}
.mobile-menu__nav .jje-nav-categories.is-open > .jje-nav-categories__panel {
	display: block;
}
.mobile-menu__nav .jje-nav-categories__panel {
	display: none;
	position: static;
	box-shadow: none;
	border-radius: 0;
	max-height: none;
	padding: 0;
}
.mobile-menu__nav .jje-nav-categories__panel .sub-menu {
	display: block;
	position: static;
	box-shadow: none;
	border-radius: 0;
}
.mobile-menu__nav .sub-menu a {
	min-height: 48px;
	line-height: 48px;
	font-size: 15px;
	padding-left: 12px;
	color: var( --color-text-muted, #73706C );
}
.mobile-menu__nav .jje-nav-root__row {
	padding: 4px 0;
}
.mobile-menu__nav .jje-nav-root__link {
	font-size: 17px;
	font-weight: 600;
	color: var( --color-text, #3F3C39 );
}
.mobile-menu__nav .jje-nav-root__toggle {
	width: 40px;
	height: 40px;
}
/* Overlay */
.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: calc( var( --z-modal, 1000 ) - 1 );
	background: rgba( 63, 60, 57, .35 );
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --transition-fast, 150ms ease );
}
.mobile-menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
	90-94. FOOTER (spec UI Components)
	-------------------------------------------------------------------------- */
.site-footer {
	background: #F4F0EB;
	padding: 72px 0 32px;
	margin-top: 96px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}
.site-footer__brand-logo {
	width: 150px;
}
.site-footer__brand-logo img {
	width: 100%;
	max-width: 170px;
	height: auto;
}
.site-footer__description {
	font-size: 13px;
	max-width: 280px;
	margin: 12px 0 0;
	color: var( --color-text-muted, #73706C );
}
.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 13px;
	font-weight: 500;
	color: var( --color-text, #3F3C39 );
	text-decoration: none;
	transition: color var( --transition, .2s ease );
}
.site-footer__social svg {
	width: 18px;
	height: 18px;
	color: var( --color-text-muted, #73706C );
	transition: color var( --transition, .2s ease );
}
.site-footer__social:hover,
.site-footer__social:hover svg {
	color: var( --color-sage, #969D8C );
}
.site-footer__title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var( --color-heading, #737D6B );
	margin: 0 0 12px;
}
.site-footer__links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__links a {
	font-size: 14px;
	line-height: 2;
	color: var( --color-text, #3F3C39 );
}
.site-footer__links a:hover {
	color: var( --color-sage, #969D8C );
}
/* Footer categorías desplegables (raíz -> subcategorías) */
.jje-footer-cats {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jje-footer-cat__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 8px;
	border: 0;
	background: none;
	padding: 4px 0;
	text-align: left;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: var( --color-text, #3F3C39 );
	cursor: pointer;
}
.jje-footer-cat__toggle:hover {
	color: var( --color-sage, #969D8C );
}
.jje-footer-cat__chevron {
	font-weight: 700;
	color: var( --color-sage, #969D8C );
	flex-shrink: 0;
}
.jje-footer-cat__children {
	margin: 0 0 4px 14px;
	padding: 0;
	list-style: none;
}
.jje-footer-cat__children.is-collapsed {
	display: none;
}
.jje-footer-cat__children a {
	font-size: 13px;
	color: var( --color-text-muted, #73706C );
}
/* Disclosure de afiliación (spec 94 — obligatorio por programa Amazon) */
.site-footer__disclosure {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var( --color-gray-300, #DAD7D3 );
	font-size: 12px;
	line-height: 1.55;
	color: var( --color-text-muted, #73706C );
}

/* --------------------------------------------------------------------------
	RESPONSIVE GRID (regla 81 / 82 del Page Templates)
	-------------------------------------------------------------------------- */
@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media ( max-width: 767px ) {
	.jje-container,
	.jje-container--wide,
	.jje-container--reading {
		width: calc( 100% - 40px );
	}
	.site-footer {
		padding: 56px 0 24px;
		margin-top: 56px;
	}
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer__disclosure {
		margin-top: 32px;
	}
}

@media ( min-width: 1024px ) {
	/* Desktop overrides already default; ensure container max widths */
}

/* --------------------------------------------------------------------------
	HOME — Componentes (wireframes §7-19 del Page Templates)
	-------------------------------------------------------------------------- */

/* Botones (spec UI Components) */
.jje-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var( --radius-pill, 999px );
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background var( --transition-fast, 150ms ease ), color var( --transition-fast, 150ms ease ), box-shadow var( --transition-fast, 150ms ease ), transform var( --transition-fast, 150ms ease );
	cursor: pointer;
}
.jje-btn:active {
	transform: scale( .97 );
}
.jje-btn--primary {
	background: var( --color-sage, #969D8C );
	color: #fff;
}
.jje-btn--primary:hover {
	background: var( --color-heading, #737D6B );
	color: #fff;
}
.jje-btn--secondary {
	background: transparent;
	color: var( --color-text, #3F3C39 );
	border: 1px solid var( --color-gray-300, #DAD7D3 );
}
.jje-btn--secondary:hover {
	border-color: var( --color-sage, #969D8C );
	color: var( --color-sage, #969D8C );
}

/* Sección genérica */
.jje-section {
	padding-block: 96px;
}
.jje-section__title {
	font-family: "Lora", Georgia, serif;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	margin-bottom: 40px;
}

/* Eyebrow */
.jje-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --color-sage, #969D8C );
	margin: 0 0 16px;
}

/* HERO (wireframe §8-10) */
.jje-hero {
	padding-block: 96px;
	background:
		radial-gradient( 1200px 600px at 90% -10%, rgba( 220, 169, 165, .18 ), transparent 60% ),
		radial-gradient( 800px 500px at 0% 110%, rgba( 150, 157, 140, .18 ), transparent 60% ),
		var( --color-off-white, #FCFBF9 );
}
.jje-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.jje-hero__title {
	font-size: clamp( 2rem, 5vw, 3.25rem );
	line-height: 1.08;
	margin: 0 0 20px;
}
.jje-hero__lead {
	font-size: 1.125rem;
	color: var( --color-text-muted, #73706C );
	max-width: 520px;
	margin: 0 0 32px;
}
.jje-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}
.jje-hero__microbenefits {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.jje-hero__microbenefits li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var( --color-text, #3F3C39 );
}
.jje-hero__microbenefits li::before {
	content: "✓";
	color: var( --color-sage, #969D8C );
	font-weight: 700;
}
.jje-hero__visual {
	min-height: 380px;
	border-radius: var( --radius-lg, 20px );
	position: relative;
	overflow: hidden;
	background: var( --color-gray-100, #F5F4F2 );
}
.jje-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jje-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 200deg, transparent 55%, rgba( 63, 60, 57, .28 ) );
	pointer-events: none;
}
.jje-hero__badge {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 1;
	background: #fff;
	color: var( --color-heading, #737D6B );
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: var( --radius-pill, 999px );
	box-shadow: var( --shadow-md, none );
}
.jje-hero__credit {
	position: absolute;
	bottom: 12px;
	right: 16px;
	z-index: 1;
	font-size: 11px;
	color: rgba( 255, 255, 255, .85 );
	background: rgba( 63, 60, 57, .35 );
	padding: 3px 10px;
	border-radius: var( --radius-pill, 999px );
}

/* DOS CAMINOS (wireframe §11-12) */
.jje-paths {
	padding-block: 64px;
}
.jje-paths__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.jje-path-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 40px;
	border-radius: var( --radius-lg, 20px );
	background: #fff;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
	text-decoration: none;
	transition: transform var( --transition-fast, 150ms ease ), box-shadow var( --transition-fast, 150ms ease );
}
.jje-path-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --shadow-lg, none );
}
.jje-path-card--emphasis {
	border-color: var( --color-sage, #969D8C );
}
.jje-path-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var( --radius-md, 14px );
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .15 );
	color: var( --color-sage, #969D8C );
}
.jje-path-card__icon svg {
	width: 26px;
	height: 26px;
}
.jje-path-card__title {
	font-family: "Lora", Georgia, serif;
	font-size: 1.35rem;
	margin: 0;
	color: var( --color-heading, #737D6B );
}
.jje-path-card__text {
	margin: 0;
	color: var( --color-text-muted, #73706C );
	font-size: 15px;
}
.jje-path-card__cta {
	font-weight: 600;
	font-size: 15px;
	color: var( --color-sage, #969D8C );
	margin-top: 8px;
}

/* TRUST STRIP (wireframe §13) */
.jje-trust {
	background: #fff;
	border-block: 1px solid var( --color-gray-200, #E8E5E1 );
	padding-block: 28px;
}
.jje-trust__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.jje-trust__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.jje-trust__item strong {
	font-size: 15px;
	color: var( --color-heading, #737D6B );
}
.jje-trust__item span {
	font-size: 13px;
	color: var( --color-text-muted, #73706C );
}

/* HOME OFFERS — High-visibility conversion carousel, kept compact vertically. */
.jje-home-offers {
	position: relative;
	padding-block: 54px;
	background:
		radial-gradient( 900px 320px at 100% 0, rgba( 220, 169, 165, .2 ), transparent 68% ),
		linear-gradient( 110deg, #f6f5ef 0%, #fcf8f3 52%, #f8f4ef 100% );
	border-block: 1px solid rgba( var( --color-warning-rgb, 200, 162, 110 ), .3 );
}
.jje-home-offers::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient( 180deg, #d8a16c, #c98278 );
	content: "";
}
.jje-home-offers__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}
.jje-home-offers__intro {
	max-width: 760px;
}
.jje-home-offers__intro .jje-eyebrow {
	margin-bottom: 8px;
	color: #9a6659;
}
.jje-home-offers__title {
	margin: 0 0 8px;
	font-family: "Lora", Georgia, serif;
	font-size: clamp( 1.55rem, 3vw, 2.15rem );
	line-height: 1.18;
	color: var( --color-heading, #737D6B );
}
.jje-home-offers__lead {
	margin: 0;
	color: var( --color-text-muted, #73706C );
	font-size: 14px;
}
.jje-home-offers__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}
.jje-home-offers__controls[hidden] {
	display: none;
}
.jje-home-offers__arrow {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba( 115, 125, 107, .3 );
	border-radius: 50%;
	background: rgba( 255, 255, 255, .88 );
	color: var( --color-heading, #737D6B );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}
.jje-home-offers__arrow:not( :disabled ):hover {
	transform: translateY( -2px );
	background: #fff;
}
.jje-home-offers__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}
.jje-home-offers__arrow:disabled {
	opacity: .38;
	cursor: default;
}
.jje-home-offers__arrow:focus-visible,
.jje-home-offer-card__cta:focus-visible {
	outline: 3px solid var( --color-coral, #9a6659 );
	outline-offset: 3px;
}
.jje-home-offers__track {
	display: flex;
	gap: 16px;
	margin-inline: -3px;
	padding: 3px 3px 10px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-color: rgba( 115, 125, 107, .42 ) transparent;
	scrollbar-width: thin;
}
.jje-home-offers__track--centered {
	justify-content: center;
}
.jje-home-offers__track--centered .jje-home-offer-card {
	flex-basis: min( 100%, 320px );
}
.jje-home-offer-card {
	display: flex;
	flex: 0 0 clamp( 220px, calc( ( 100% - 48px ) / 4 ), 280px );
	min-width: 0;
	flex-direction: column;
	border: 1px solid rgba( 115, 125, 107, .16 );
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 5px 18px rgba( 63, 60, 57, .07 );
	transition: transform 180ms ease, box-shadow 180ms ease;
	scroll-snap-align: start;
}
.jje-home-offer-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 10px 26px rgba( 63, 60, 57, .12 );
}
.jje-home-offer-card__media {
	position: relative;
	display: block;
	height: 142px;
	padding: 0;
	border-radius: 15px 15px 0 0;
	background: linear-gradient( 145deg, #fff 0%, #f8f7f3 100% );
}
.jje-home-offer-card__image {
	position: absolute;
	inset: 12px;
	width: calc( 100% - 24px );
	height: calc( 100% - 24px );
	max-width: none;
	object-fit: contain;
}
.jje-home-offer-card__media .jje-oferta {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	font-size: 10px;
}
.jje-home-offer-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 13px 16px 15px;
}
.jje-home-offer-card__category {
	margin: 0 0 5px;
	color: var( --color-text-muted, #73706C );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .045em;
	text-transform: uppercase;
}
.jje-home-offer-card__title {
	display: -webkit-box;
	min-height: 2.7em;
	margin: 0 0 12px;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --color-text, #3F3C39 );
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.jje-home-offer-card__cta {
	display: flex;
	width: 100%;
	min-height: 38px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 8px 12px;
	border-radius: 9px;
	background: var( --color-sage, #969D8C );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background 150ms ease;
}
.jje-home-offer-card__cta:hover {
	background: var( --color-heading, #737D6B );
	color: #fff;
}
.jje-home-offers__disclosure {
	margin: 8px 0 0;
	color: var( --color-text-muted, #73706C );
	font-size: 11px;
	line-height: 1.5;
}

/* CATEGORÍAS (wireframe §14) */
.jje-categories {
	padding-block: 96px 64px;
}
.jje-categories__grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 20px;
}
.jje-category-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	min-height: 130px;
	border-radius: var( --radius-md, 14px );
	background: #fff;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
	text-decoration: none;
	transition: transform var( --transition-fast, 150ms ease ), box-shadow var( --transition-fast, 150ms ease );
}
.jje-category-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --shadow-md, none );
}
.jje-category-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var( --radius-md, 14px );
	background: var( --color-sage-soft, #E7EBE1 );
	color: var( --color-sage, #969D8C );
}
.jje-category-card__icon svg {
	width: 24px;
	height: 24px;
}
.jje-category-card__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex: 1;
}
.jje-category-card__name {
	font-family: "Lora", Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
	color: var( --color-heading, #737D6B );
	line-height: 1.3;
}
.jje-category-card__arrow {
	color: var( --color-sage, #969D8C );
	font-weight: 700;
	flex-shrink: 0;
	transition: transform var( --transition-base, 220ms ease );
}
.jje-category-card:hover .jje-category-card__arrow {
	transform: translateX( 4px );
}

/* COMPARATIVAS DESTACADAS (wireframe §15-16) */
.jje-featured {
	padding-block: 64px 96px;
}
.jje-featured__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.jje-comparison-card,
.jje-guide-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: var( --radius-md, 14px );
	background: #fff;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
}
.jje-comparison-card__tag,
.jje-guide-card__tag {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #656A5E;
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .12 );
	padding: 4px 10px;
	border-radius: var( --radius-pill, 999px );
}
.jje-comparison-card__title,
.jje-guide-card__title {
	font-family: "Lora", Georgia, serif;
	font-size: 1.1rem;
	margin: 0;
	line-height: 1.35;
}
.jje-comparison-card__title a,
.jje-guide-card__title a {
	color: var( --color-heading, #737D6B );
}
.jje-comparison-card__title a:hover,
.jje-guide-card__title a:hover {
	color: var( --color-sage, #969D8C );
}
.jje-comparison-card__excerpt,
.jje-guide-card__excerpt {
	margin: 0;
	font-size: 14px;
	color: var( --color-text-muted, #73706C );
	flex: 1;
}
.jje-comparison-card__cta,
.jje-guide-card__cta {
	font-weight: 600;
	font-size: 14px;
	color: var( --color-sage, #969D8C );
}

/* GUÍAS (wireframe §18) */
.jje-guides {
	padding-block: 64px 96px;
	background: var( --color-off-white, #FCFBF9 );
}
.jje-guides__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

/* CTA FINAL (wireframe §19) */
.jje-cta {
	padding-block: 96px;
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .15 );
	text-align: center;
}
.jje-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.jje-cta__title {
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	margin: 0;
}
.jje-cta__text {
	margin: 0 0 8px;
	color: var( --color-text-muted, #73706C );
}

/* HOME — Responsive */
@media ( max-width: 1023px ) {
	.jje-categories__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 767px ) {
	.jje-section {
		padding-block: 56px;
	}
	.jje-hero {
		padding-block: 56px;
	}
	.jje-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.jje-hero__visual {
		min-height: 220px;
		order: 10;
	}
	.jje-hero__microbenefits {
		flex-direction: column;
		gap: 12px;
	}
	.jje-paths__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.jje-trust__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jje-categories__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.jje-featured__grid,
	.jje-guides__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.jje-home-offers {
		padding-block: 42px;
	}
	.jje-home-offers__header {
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 16px;
	}
	.jje-home-offers__title {
		font-size: 1.55rem;
	}
	.jje-home-offers__lead {
		max-width: 38ch;
		font-size: 13px;
	}
	.jje-home-offers__arrow {
		width: 36px;
		height: 36px;
	}
	.jje-home-offers__track {
		gap: 12px;
		margin-right: -24px;
		padding-right: 24px;
	}
	.jje-home-offer-card {
		flex-basis: min( 76vw, 270px );
	}
	.jje-cta {
		padding-block: 56px;
	}
}

/* --------------------------------------------------------------------------
	STATIC PAGES (page.php) — hero con respiro bajo el header
	-------------------------------------------------------------------------- */
.page-hero {
	padding-block: 64px 44px;
	background:
		radial-gradient( 800px 400px at 100% 0%, rgba( 150, 157, 140, .12 ), transparent 60% ),
		var( --color-off-white, #FCFBF9 );
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
}
.page-hero h1 {
	margin: 0;
}

/* --------------------------------------------------------------------------
	CATEGORY PAGE (wireframes §20-33)
	-------------------------------------------------------------------------- */

/* Breadcrumbs */
.jje-breadcrumbs {
	padding-block: 20px;
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
	background: #fff;
}
.jje-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var( --color-text-muted, #73706C );
}
.jje-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.jje-breadcrumbs__item + .jje-breadcrumbs__item::before {
	content: "›";
	color: var( --color-gray-300, #DAD7D3 );
}
.jje-breadcrumbs__item a {
	color: var( --color-sage, #969D8C );
}
.jje-breadcrumbs__item[aria-current="page"] {
	color: var( --color-text, #3F3C39 );
	font-weight: 500;
}

/* Hero categoría (§22-23) */
.jje-cat-hero {
	padding-block: 64px;
	background:
		radial-gradient( 800px 400px at 100% 0%, rgba( 150, 157, 140, .14 ), transparent 60% ),
		var( --color-off-white, #FCFBF9 );
}
.jje-cat-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}
.jje-cat-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .15 );
	color: var( --color-sage, #969D8C );
	margin-bottom: 12px;
}
.jje-cat-hero__icon svg {
	width: 28px;
	height: 28px;
}
.jje-cat-hero__title {
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	margin: 0;
}
.jje-cat-hero__desc {
	max-width: 640px;
	margin: 8px 0 0;
	color: var( --color-text-muted, #73706C );
	font-size: 1.0625rem;
}

/* Subcategorías (§24) */
.jje-subcats {
	padding-block: 64px;
}
.jje-subcats__grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 20px;
}
.jje-subcat-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	min-height: 88px;
	border-radius: var( --radius-md, 14px );
	background: #fff;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
	text-decoration: none;
	transition: transform var( --transition-fast, 150ms ease ), box-shadow var( --transition-fast, 150ms ease );
}
.jje-subcat-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --shadow-md, none );
}
.jje-subcat-card__name {
	font-family: "Lora", Georgia, serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --color-heading, #737D6B );
	line-height: 1.3;
}
.jje-subcat-card__arrow {
	color: var( --color-sage, #969D8C );
	font-weight: 700;
	transition: transform var( --transition-base, 220ms ease );
}
.jje-subcat-card:hover .jje-subcat-card__arrow {
	transform: translateX( 4px );
}

/* CTA inline (§25) */
.jje-cta-inline {
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .12 );
	padding-block: 48px;
}
.jje-cta-inline__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.jje-cta-inline__title {
	font-size: clamp( 1.25rem, 2.5vw, 1.6rem );
	margin: 0 0 8px;
}
.jje-cta-inline__text {
	margin: 0;
	color: var( --color-text-muted, #73706C );
}

/* Contenido categoría */
.jje-cat-content {
	padding-block: 64px 96px;
}
.jje-cat-content__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.jje-cat-empty {
	padding-block: 64px;
	text-align: center;
	color: var( --color-text-muted, #73706C );
}

/* Category — Responsive */
@media ( max-width: 1023px ) {
	.jje-subcats__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
	.jje-cat-content__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {
	.jje-subcats__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.jje-cat-content__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.jje-cta-inline__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
	SINGLE / EDITORIAL (comparativas y guías)
	-------------------------------------------------------------------------- */
.jje-article__header {
	padding-block: 64px 40px;
	background: var( --color-off-white, #FCFBF9 );
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
}
.jje-article__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #656A5E;
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .12 );
	padding: 4px 10px;
	border-radius: var( --radius-pill, 999px );
	margin-bottom: 16px;
}
.jje-article__title {
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	line-height: 1.15;
	margin: 0;
}
.jje-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	font-size: 13px;
	color: var( --color-text-muted, #73706C );
}
.jje-article__body {
	padding-block: 24px 48px;
}
.jje-article__body p {
	line-height: 1.7;
}
.jje-article__body p a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.jje-article__body h2,
.jje-article__body h3 {
	margin-top: 1.6em;
}
.jje-article__body img {
	border-radius: var( --radius-md, 14px );
}

/* --------------------------------------------------------------------------
	FIGURAS EDITORIALES (.jje-media) — imágenes en guías y comparativas
	Efecto "wow": esquina decorativa offset en gradiente del brand kit (sage→rose),
	asomando detrás de la esquina superior derecha. Respeta reduced motion.
	-------------------------------------------------------------------------- */
.jje-media {
	position: relative;
	margin: 1.8em auto;
}
.jje-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --radius-lg, 20px );
	box-shadow: var( --shadow-md, none );
	position: relative;
	z-index: 1;
}
.jje-media figcaption {
	margin-top: 10px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var( --color-text-muted, #73706C );
	text-align: center;
}

/* Figuras inline en el cuerpo: compactas y centradas para integrarse en el texto.
	Las verticales se muestran aún más pequeñas (--portrait) para no dominar la lectura. */
.jje-article__body .jje-media {
	width: min( 100%, 420px );
}
.jje-article__body .jje-media--portrait {
	width: min( 100%, 300px );
}

/* Esquina decorativa "wow" (gradiente del brand kit) */
.jje-media::before {
	content: "";
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 0;
	width: 42%;
	max-width: 120px;
	aspect-ratio: 1;
	background: linear-gradient( 135deg, var( --color-rose, #DCA9A5 ), var( --color-sage, #969D8C ) );
	pointer-events: none;
}

/* Hero de imagen destacada de las guías (single.php): compacto, centrado y con
	separación clara del header (padding superior). Las verticales, más estrechas.
	El padding inferior se mantiene discreto para no separar la imagen del texto. */
.jje-article__hero {
	background: var( --color-off-white, #FCFBF9 );
	padding-block: 56px 24px;
}
.jje-article__hero .jje-media {
	margin: 0 auto;
	width: min( 100%, 460px );
}
.jje-article__hero .jje-media--portrait {
	width: min( 100%, 340px );
}
.jje-article__hero .jje-media::before {
	top: -16px;
	right: -16px;
}

@media ( max-width: 767px ) {
	.jje-media::before {
		top: -10px;
		right: -10px;
		max-width: 90px;
	}
	.jje-article__hero {
		padding-block: 28px 16px;
	}
	.jje-article__body {
		padding-block: 20px 40px;
	}
}

/* --------------------------------------------------------------------------
	TABLAS EN CONTENIDO EDITORIAL (metodología, guías, comparativas…)
	-------------------------------------------------------------------------- */
.entry-content table,
.entry table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 0.95rem;
	line-height: 1.5;
}
.entry-content th,
.entry-content td,
.entry th,
.entry td {
	border: 1px solid var( --color-gray-200, #E4E1DC );
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.entry-content thead th,
.entry thead th {
	background: var( --color-gray-100, #F5F4F2 );
	font-weight: 600;
	color: var( --color-heading, #3F3C39 );
}
.entry-content tbody tr:nth-child( even ),
.entry tbody tr:nth-child( even ) {
	background: var( --color-gray-50, #F7F6F4 );
}
.entry-content table a,
.entry table a {
	text-decoration: underline;
}
/* Envoltorio horizontal para evitar desbordamiento en pantallas estrechas */
.entry-content .wp-block-table,
.entry .wp-block-table {
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
	CATÁLOGO / RESULTADOS DE BÚSQUEDA (index.php con ?s=)
	-------------------------------------------------------------------------- */

/* Hero compacto del catálogo */
.jje-catalog-hero {
	padding-block: 48px;
	background:
		radial-gradient( 800px 400px at 100% 0%, rgba( 150, 157, 140, .12 ), transparent 60% ),
		var( --color-off-white, #FCFBF9 );
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
}
.jje-catalog-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.jje-catalog-hero__title {
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	margin: 0;
}
.jje-catalog-hero__desc {
	max-width: 640px;
	margin: 0;
	color: var( --color-text-muted, #73706C );
	font-size: 1.0625rem;
}

/* Navegación sticky de categorías */
.jje-catalog-nav {
	position: sticky;
	top: 88px;
	z-index: 400;
	background: #fff;
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
	padding-block: 12px;
}
.jje-catalog-nav__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.jje-catalog-nav__pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --color-gray-300, #DAD7D3 );
	border-radius: var( --radius-pill, 999px );
	background: #fff;
	color: var( --color-text, #3F3C39 );
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 16px;
	cursor: pointer;
	transition: background var( --transition-fast, 150ms ease ), color var( --transition-fast, 150ms ease ), border-color var( --transition-fast, 150ms ease );
}
.jje-catalog-nav__pill:hover {
	border-color: var( --color-sage, #969D8C );
	color: var( --color-sage, #969D8C );
}
.jje-catalog-nav__pill--active,
.jje-catalog-nav__pill--active:hover {
	background: var( --color-heading, #737D6B );
	border-color: var( --color-heading, #737D6B );
	color: #fff;
}

/* Listado del catálogo */
.jje-catalog {
	padding-block: 64px 96px;
}
.jje-catalog-entry {
	display: block;
	background: #fff;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
	border-radius: var( --radius-lg, 20px );
	box-shadow: var( --shadow-sm, none );
	padding: clamp( 24px, 4vw, 48px );
	margin-bottom: 64px;
}
.jje-catalog-entry:last-child {
	margin-bottom: 0;
}
.jje-catalog-entry.is-hidden {
	display: none;
}

/* Encabezado del artículo */
.jje-catalog-entry__header {
	margin-bottom: 32px;
}
.jje-catalog-entry__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #656A5E;
	background: rgba( var( --color-sage-rgb, 150,157,140 ), .12 );
	padding: 5px 12px;
	border-radius: var( --radius-pill, 999px );
	margin-bottom: 16px;
}
.jje-catalog-entry__title {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	margin: 0 0 12px;
	line-height: 1.2;
}
.jje-catalog-entry__title a {
	color: var( --color-heading, #737D6B );
}
.jje-catalog-entry__title a:hover {
	color: var( --color-sage, #969D8C );
}
.jje-catalog-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var( --color-text-muted, #73706C );
}
.jje-catalog-entry__meta-sep {
	color: var( --color-gray-300, #DAD7D3 );
}

/* Contenido del artículo hereda estilos editoriales; se airea el espaciado */
.jje-catalog-entry__content h2 {
	margin-top: 1.6em;
}
.jje-catalog-entry__content .jje-tabla-envoltorio,
.jje-catalog-entry__content .jje-caja {
	margin-block: 40px;
}

/* Pie del artículo */
.jje-catalog-entry__footer {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var( --color-gray-200, #E8E5E1 );
}

/* Bloque colapsable (Qué mirar antes de comprar / Preguntas frecuentes) */
.jje-collapse {
	margin: 48px 0;
	border: 1px solid var( --color-gray-200, #E8E5E1 );
	border-radius: var( --radius-md, 14px );
	background: var( --color-off-white, #FCFBF9 );
}
.jje-collapse__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	border: 0;
	background: none;
	padding: 20px 24px;
	text-align: left;
	cursor: pointer;
}
.jje-collapse__trigger h2 {
	margin: 0;
	font-size: 1.25rem;
}
.jje-collapse__chevron {
	flex: none;
	width: 24px;
	height: 24px;
	color: var( --color-sage, #969D8C );
	transition: transform var( --transition-base, 220ms ease );
}
.jje-collapse__chevron svg {
	width: 20px;
	height: 20px;
}
.jje-collapse.is-open .jje-collapse__chevron {
	transform: rotate( 180deg );
}
.jje-collapse__body {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	padding: 0 24px;
	border-top: 1px solid var( --color-gray-200, #E8E5E1 );
	border-top-width: 0;
	transition: grid-template-rows var( --transition-base, 220ms ease ), padding var( --transition-base, 220ms ease ), border-top-width var( --transition-base, 220ms ease );
}
.jje-collapse.is-open .jje-collapse__body {
	grid-template-rows: 1fr;
	padding: 4px 24px 24px;
	border-top-width: 1px;
}
.jje-collapse__body > .jje-collapse__inner {
	min-height: 0;
	overflow: hidden;
}
.jje-collapse__inner > p:first-child,
.jje-collapse__inner > .jje-faq:first-child {
	margin-top: 20px;
}

/* FAQ — acordeón interno */
.jje-collapse__body .jje-faq {
	border-bottom: 1px solid var( --color-gray-200, #E8E5E1 );
	padding-block: 16px;
}
.jje-collapse__body .jje-faq:last-child {
	border-bottom: 0;
}
.jje-faq__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-family: "DM Sans", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var( --color-heading, #737D6B );
}
.jje-faq h3,
.jje-faq__pregunta {
	margin: 0;
}
.jje-faq__trigger:hover {
	color: var( --color-sage, #969D8C );
}
.jje-faq__chevron {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var( --color-sage, #969D8C );
	transition: transform var( --transition-base, 220ms ease );
}
.jje-faq__chevron svg {
	width: 18px;
	height: 18px;
}
.jje-faq.is-open .jje-faq__chevron {
	transform: rotate( 180deg );
}
.jje-faq:not(.is-open) .jje-faq__answers {
	margin-top: 0;
}
.jje-faq__answers {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 8px;
	transition: grid-template-rows var( --transition-base, 220ms ease ), margin-top var( --transition-base, 220ms ease );
}
.jje-faq.is-open .jje-faq__answers {
	grid-template-rows: 1fr;
}
.jje-faq__answers > * {
	min-height: 0;
	overflow: hidden;
}
.jje-faq__answers p {
	margin: 0 0 8px;
	color: var( --color-text, #3F3C39 );
}
.jje-faq__answers p:last-child {
	margin-bottom: 0;
}

/* Catálogo — Responsive */
@media ( max-width: 1023px ) {
	.jje-catalog-nav {
		top: 68px;
	}
}
@media ( max-width: 767px ) {
	.jje-catalog {
		padding-block: 48px 64px;
	}
	.jje-catalog-entry {
		padding: 24px 20px;
		margin-bottom: 40px;
	}
	.jje-catalog-entry__header {
		margin-bottom: 24px;
	}
	.jje-catalog-entry__content .jje-tabla-envoltorio,
	.jje-catalog-entry__content .jje-caja {
		margin-block: 28px;
	}
	.jje-collapse {
		margin: 32px 0;
	}
	.jje-collapse__trigger {
		padding: 16px 18px;
	}
	.jje-collapse__body {
		padding: 0 18px;
	}
	.jje-collapse.is-open .jje-collapse__body {
		padding: 4px 18px 18px;
	}
}

/* --------------------------------------------------------------------------
	ACCESIBILIDAD / FOCO (regla 65 Design System CSS)
	-------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var( --color-sage, #969D8C );
	outline-offset: 2px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: #fff;
	padding: 8px 16px;
}
.skip-link:focus {
	left: 0;
}

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

/* Scroll-reveal softening (JS: assets/animations.js).
 * The hidden state only applies when JS ran (html.jje-js) AND motion is allowed
 * AND IntersectionObserver exists. Without those, content stays fully visible
 * (progressive enhancement: reduced-motion and no-JS users never see blanks). */
html.jje-js:not( .jje-no-reveal ) .jje-reveal:not( .is-visible ) {
	opacity: 0;
	transform: translateY( 28px );
	visibility: hidden;
}
/* backwards (not both): the "from" state covers the stagger delay, but after
 * the animation ends the fill no longer applies, so :hover transforms
 * (card lift, etc.) are not overridden by a frozen transform:none. */
.jje-reveal.is-visible {
	animation: jje-reveal-up 850ms cubic-bezier( .22, 1, .36, 1 ) backwards;
	animation-delay: calc( var( --reveal-order, 0 ) * 130ms );
}
@keyframes jje-reveal-up {
	from {
		opacity: 0;
		transform: translateY( 28px );
		visibility: hidden;
	}
	to {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
}

/* Hero entrance — one-time fade/slide on load, text only (the hero photo stays
 * static so LCP is unaffected). Disabled by the reduced-motion block above. */
.jje-hero__content,
.jje-hero__badge {
	animation: jje-hero-in 900ms cubic-bezier( .22, 1, .36, 1 ) backwards;
}
.jje-hero__badge {
	animation-delay: 200ms;
}
@keyframes jje-hero-in {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Instagram bridge landing (page-instagram.php): focused single CTA. */
.jje-instagram-bridge__cta {
	margin-block: 2rem 1rem;
	text-align: center;
}
.jje-instagram-bridge__btn {
	font-size: 1.15rem;
	padding: 1rem 2rem;
}
.jje-instagram-bridge__hint {
	text-align: center;
	color: var( --color-text-muted, #686562 );
	font-size: 0.95em;
}

/* Floating WhatsApp share button (bottom-left to avoid list bar collision). */
.jje-wa-fab {
	position: fixed;
	bottom: var(--space-6);
	left: var(--space-6);
	z-index: calc(var(--z-header, 500) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: #25d366;
	color: var(--color-white);
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

.jje-wa-fab svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	stroke-width: 1.75;
}

.jje-wa-fab:hover,
.jje-wa-fab:focus {
	transform: scale(1.05);
	filter: brightness(0.92);
	color: var(--color-white);
}

@media (max-width: 768px) {
	.jje-wa-fab {
		bottom: var(--space-4);
		left: var(--space-4);
		width: 48px;
		height: 48px;
	}

	.jje-wa-fab svg {
		width: 24px;
		height: 24px;
	}
}