/*
Theme Name: Carjativa
Theme URI: https://wordpress.org/themes/
Author: David Sebastián Chávez
Author URI: https://www.linkedin.com/in/dschavez0512
Description: Tema de bloques (Full Site Editing) para el sitio corporativo y catálogo técnico B2B de Importadora Carjativa. Catálogo con filtros y conteos reales, listado denso, panel de detalle por AJAX, fichas técnicas y solicitud de cotización por WhatsApp según ciudad y asesor. Sin funciones de comercio electrónico.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.10.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carjativa
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, editor-style, wide-blocks, translation-ready
*/

/* ==================================================
   01. VARIABLES
   ================================================== */

:root {
	--cj-blue: var(--wp--preset--color--primary, #233F92);
	--cj-blue-700: var(--wp--preset--color--primary-dark, #1A3078);
	--cj-navy: var(--wp--preset--color--navy, #0E1838);
	--cj-accent: var(--wp--preset--color--accent, #73BA00);
	--cj-accent-text: var(--wp--preset--color--accent-text, #487A00);
	--cj-ink: var(--wp--preset--color--ink, #202020);
	--cj-ink-2: var(--wp--preset--color--ink-2, #545B66);
	--cj-bg: var(--wp--preset--color--background, #F5F6F8);
	--cj-surface: var(--wp--preset--color--surface, #FFFFFF);
	--cj-border: var(--wp--preset--color--border, #DDE1E6);
	--cj-border-strong: #C3C9D2;
	--cj-selected: #EDF1FA;
	--cj-hover: #F8F9FB;
	--cj-danger: #B42318;

	/* Sobre fondos oscuros */
	--cj-on-dark: #FFFFFF;
	--cj-on-dark-2: #BCC5DD;
	--cj-line-dark: rgba(255, 255, 255, 0.14);

	--cj-font: var(--wp--preset--font-family--outfit, "Outfit", system-ui, sans-serif);
	--cj-radius: 4px;
	--cj-radius-sm: 2px;
	/* Tarjetas y medios */
	--cj-r-lg: 10px;
	--cj-r-xl: 14px;
	--cj-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 16px);
	/* Fondo navy con luces, igual en todas las cabeceras */
	--cj-glow:
		radial-gradient(42% 60% at 88% 18%, rgba(52, 86, 186, 0.55), transparent 70%),
		radial-gradient(34% 50% at 4% 100%, rgba(115, 186, 0, 0.12), transparent 70%);
	--cj-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cj-fast: 150ms;
	--cj-mid: 200ms;
	--cj-slow: 250ms;
	--cj-shadow: 0 1px 2px rgba(14, 24, 56, 0.06), 0 8px 24px rgba(14, 24, 56, 0.08);
	--cj-shadow-lg: 0 24px 64px rgba(14, 24, 56, 0.24);

	--cj-container: 1320px;
	--cj-gutter: clamp(16px, 4vw, 40px);
	--cj-top: 0px;
	--cj-header-h: 72px;
	--cj-sticky: calc(var(--cj-top) + 61px);

	/* Iconos técnicos, máscaras CSS sin SVG */
}

.admin-bar { --cj-top: 32px; }

@media (max-width: 782px) {
	.admin-bar { --cj-top: 46px; }
}

/* ==================================================
   02. BASE
   ================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
	margin: 0;
	font-family: var(--cj-font);
	color: var(--cj-ink);
	background: var(--cj-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.cj-lock { overflow: hidden; }

[hidden] { display: none !important; }

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

h1, h2, h3, h4 { font-family: var(--cj-font); margin: 0; text-wrap: balance; }


p { text-wrap: pretty; }

a {
	color: var(--cj-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--cj-fast) var(--cj-ease);
}

a:hover { color: var(--cj-blue-700); }

:focus-visible { outline: 2px solid var(--cj-blue); outline-offset: 2px; }

.cj-dark :focus-visible,
.cj-hero :focus-visible,
.cj-cta :focus-visible,
.cj-footer :focus-visible { outline-color: var(--cj-accent); }

::selection { background: var(--cj-blue); color: #fff; }

.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;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	top: calc(var(--cj-top) + 8px);
	left: 8px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--cj-navy);
	color: #fff;
	font-weight: 600;
	border-radius: var(--cj-radius);
	text-decoration: none;
}

/* Espaciado de componentes vía grid/flex + gap. */
.wp-block-group[class*="cj-"] > * { margin-block: 0; }

/* Header, main y footer pegados: sin el blockGap raíz de core. */
.wp-site-blocks > * { margin-block: 0; }

.cj-container {
	width: 100%;
	max-width: calc(var(--cj-container) + var(--cj-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--cj-gutter);
}

.cj-tnum { font-variant-numeric: tabular-nums; }

/* Jerarquía tipográfica */
.cj-title {
	font-size: clamp(1.875rem, 3.4vw, 2.875rem);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.cj-lead {
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	color: var(--cj-ink-2);
	max-width: 52ch;
	margin: 0;
}

.cj-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cj-accent-text);
}

.cj-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--cj-accent);
	flex: none;
}

.cj-dark .cj-eyebrow,
.cj-hero .cj-eyebrow { color: var(--cj-accent); }

.cj-kicker {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cj-ink-2);
}

/* Contenido pendiente (visible y claramente administrativo) */
.cj-pending {
	display: inline-block;
	margin: 0;
	padding: 0.5em 0.8em;
	border: 1px dashed var(--cj-border-strong);
	border-radius: var(--cj-radius);
	background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(84, 91, 102, 0.05) 6px 12px);
	color: var(--cj-ink-2);
	font-size: 0.9375rem;
	font-style: normal;
}

.cj-dark .cj-pending { color: var(--cj-on-dark-2); border-color: rgba(255, 255, 255, 0.28); }

/* Botones del tema */
.cj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--cj-radius);
	background: none;
	color: inherit;
	font: 600 0.9375rem/1.1 var(--cj-font);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cj-fast) var(--cj-ease), color var(--cj-fast) var(--cj-ease), border-color var(--cj-fast) var(--cj-ease), transform var(--cj-fast) var(--cj-ease);
}

.cj-btn svg { width: 20px; height: 20px; flex: none; }

.cj-btn:active { transform: translateY(1px); }

.cj-btn--primary { background: var(--cj-blue); color: #fff; }

.cj-btn--primary:hover { background: var(--cj-blue-700); color: #fff; }

.cj-btn--ghost { background: var(--cj-surface); border-color: var(--cj-border-strong); color: var(--cj-ink); }

.cj-btn--ghost:hover { border-color: var(--cj-blue); color: var(--cj-blue); }

.cj-btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }

.cj-btn--sm svg { width: 18px; height: 18px; }

.cj-btn--block { width: 100%; }

.cj-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.cj-btn.is-loading { opacity: 0.6; pointer-events: none; }

.cj-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid transparent;
	border-radius: var(--cj-radius);
	background: none;
	color: var(--cj-ink);
	cursor: pointer;
	transition: background-color var(--cj-fast), border-color var(--cj-fast);
}

.cj-icon-btn:hover { background: var(--cj-bg); border-color: var(--cj-border); }

.cj-icon-btn svg { width: 22px; height: 22px; }

.cj-badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--cj-blue);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	display: inline-grid;
	place-items: center;
}

/* Botones nativos (core/button) */
.wp-element-button,
.wp-block-button__link {
	font-family: var(--cj-font);
	transition: background-color var(--cj-fast) var(--cj-ease), color var(--cj-fast) var(--cj-ease), border-color var(--cj-fast) var(--cj-ease), transform var(--cj-fast) var(--cj-ease);
}

.wp-block-button__link:active { transform: translateY(1px); }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.is-style-cj-light .wp-block-button__link { background: #fff; color: var(--cj-navy); }

.is-style-cj-light .wp-block-button__link:hover { background: #E6EBF6; color: var(--cj-navy); }

.is-style-cj-outline-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.45);
}

.is-style-cj-outline-light .wp-block-button__link:hover { border-color: var(--cj-accent); color: #fff; }

/* Campos */
.cj-field { display: grid; gap: 8px; }

.cj-field__label { font-size: 0.875rem; font-weight: 600; color: var(--cj-ink); }

.cj-field__control {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border-strong);
	border-radius: var(--cj-radius);
	transition: border-color var(--cj-fast), box-shadow var(--cj-fast);
}

.cj-field__control:focus-within { border-color: var(--cj-blue); box-shadow: 0 0 0 3px rgba(35, 63, 146, 0.16); }

.cj-field__control svg { width: 18px; height: 18px; color: var(--cj-ink-2); flex: none; }

.cj-field__control input {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--cj-ink);
	font: 500 1rem var(--cj-font);
}

.cj-field__control input:focus { outline: none; }

.cj-field__control input::placeholder,
.cj-search__input::placeholder { color: #697080; opacity: 1; }

.cj-select {
	width: 100%;
	height: 48px;
	padding: 0 40px 0 12px;
	border: 1px solid var(--cj-border-strong);
	border-radius: var(--cj-radius);
	background: var(--cj-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545B66' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
	color: var(--cj-ink);
	font: 500 1rem var(--cj-font);
	appearance: none;
	cursor: pointer;
}

.cj-select:focus-visible { border-color: var(--cj-blue); }

/* Imagen ausente */
.cj-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: #A0A7B2; }

.cj-noimg svg { width: 40%; height: 40%; max-width: 64px; }

.cj-more-link,
.cj-more-link a {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.cj-more-link a,
a.cj-more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.cj-more-link a::after,
a.cj-more-link::after { content: "→"; transition: transform var(--cj-fast) var(--cj-ease); }

.cj-more-link a:hover::after,
a.cj-more-link:hover::after { transform: translateX(3px); }

.cj-section { padding-block: clamp(56px, 8vw, 112px); }

.cj-section > .cj-container { display: grid; gap: clamp(32px, 4vw, 56px); }

.cj-section--white { background: var(--cj-surface); }

.cj-dark { background: var(--cj-navy); color: var(--cj-on-dark); }

.cj-dark .cj-lead,
.cj-dark p { color: var(--cj-on-dark-2); }

.cj-dark .cj-title,
.cj-dark h1,
.cj-dark h2 { color: #fff; }

.cj-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}

.cj-section-head__text { display: grid; gap: 14px; max-width: 760px; }

/* Migas de pan */
.cj-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--cj-ink-2);
}

.cj-breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.cj-breadcrumbs li + li::before { content: "/"; color: var(--cj-border-strong); }

.cj-breadcrumbs a { color: var(--cj-ink-2); text-decoration: none; }

.cj-breadcrumbs a:hover { color: var(--cj-blue); text-decoration: underline; }

.cj-breadcrumbs [aria-current] { color: var(--cj-ink); font-weight: 500; }

.cj-dark .cj-breadcrumbs ol,
.cj-dark .cj-breadcrumbs a { color: var(--cj-on-dark-2); }

.cj-dark .cj-breadcrumbs [aria-current] { color: #fff; }

.cj-dark .cj-breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.3); }

/* Cabecera de página interior */
.cj-page-head { position: relative; overflow: hidden; isolation: isolate; }

.cj-page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cj-glow), var(--cj-hatch);
	pointer-events: none;
}

.cj-page-head__inner { display: grid; gap: 16px; padding-block: clamp(56px, 7vw, 96px); }

.cj-page-head__title,
.cj-page-head .wp-block-post-title,
.cj-page-head .wp-block-query-title {
	margin: 0;
	font-size: clamp(2.125rem, 4.4vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
}

.cj-page-head__lead { margin: 0; max-width: 60ch; color: var(--cj-on-dark-2); font-size: 1.125rem; }

.cj-page-head .cj-search { max-width: 640px; }

.cj-content { padding-block: clamp(40px, 6vw, 72px); }

.cj-content .wp-block-post-content > *:first-child { margin-top: 0; }

.cj-post-list { list-style: none; padding: 0; margin: 0; display: grid; }

.cj-post-list > li { padding-block: 24px; border-bottom: 1px solid var(--cj-border); display: grid; gap: 6px; }

.cj-post-list__title { font-size: 1.5rem; }

.cj-post-list__title a { color: var(--cj-ink); text-decoration: none; }

.cj-post-list__title a:hover { color: var(--cj-blue); }

.cj-post-list__date { font-size: 0.875rem; color: var(--cj-ink-2); }

/* ==================================================
   03. HEADER
   ================================================== */

.cj-site-header,
header.wp-block-template-part {
	position: sticky;
	top: var(--cj-top);
	z-index: 60;
}

.cj-header {
	position: relative;
	background: var(--cj-surface);
	border-bottom: 1px solid var(--cj-border);
	transition: box-shadow var(--cj-mid) var(--cj-ease);
}

.is-scrolled .cj-header { box-shadow: 0 6px 24px rgba(14, 24, 56, 0.08); }

.cj-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
	min-height: var(--cj-header-h);
	transition: min-height var(--cj-mid) var(--cj-ease);
}

.is-scrolled .cj-header__inner { min-height: 60px; }

.cj-brand { display: flex; align-items: center; flex: none; }

.cj-brand .wp-block-site-logo img { max-height: 54px; width: auto; transition: max-height var(--cj-mid) var(--cj-ease); }

.is-scrolled .cj-brand .wp-block-site-logo img { max-height: 42px; }

.cj-brand .wp-block-site-logo ~ .wp-block-site-title { display: none; }

.wp-block-site-title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.wp-block-site-title a { color: var(--cj-blue); text-decoration: none; }

.cj-nav { margin-left: auto; }

.cj-nav .wp-block-navigation__container { gap: clamp(18px, 2vw, 32px); }

.cj-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 10px 0;
	color: var(--cj-ink);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.cj-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--cj-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cj-mid) var(--cj-ease);
}

.cj-nav .wp-block-navigation-item__content:hover { color: var(--cj-blue); }

.cj-nav .wp-block-navigation-item__content:hover::after,
.cj-nav [aria-current="page"]::after { transform: scaleX(1); }

.cj-nav [aria-current="page"] { color: var(--cj-blue); }

/* Sin media query, empata specificity con core y gana por orden — abría el hamburguesa en desktop también. */
@media (max-width: 599.98px) {
	/* Teléfono: logo · buscar · cotización · menú */
	.cj-header__actions { margin-left: auto; gap: 8px; }

	.cj-nav { order: 3; margin-left: 0; flex: none; }

	.cj-nav .wp-block-navigation__responsive-container-open,
	.cj-nav .wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		border: 1px solid var(--cj-border);
		border-radius: var(--cj-radius);
		color: var(--cj-ink);
	}
}

.cj-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* Sin !important, pierde contra el guard de core (0,5,0) y queda blanco sobre blanco. */
	background: var(--cj-navy) !important;
	color: #fff;
	padding: calc(var(--cj-top) + 16px) var(--cj-gutter) 32px;
}

.cj-nav .is-menu-open .wp-block-navigation__responsive-container-close { border-color: var(--cj-line-dark); color: #fff; }

/* Menú móvil: lista a la izquierda con separadores y flecha */
.cj-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 28px; }

.cj-nav .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Menú";
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cj-accent);
}

.cj-nav .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0; width: 100%; }

.cj-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--cj-line-dark); }

.cj-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 18px 0;
	color: #fff;
	font-size: 1.625rem;
	font-weight: 500;
}

.cj-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "→";
	position: static;
	width: auto;
	height: auto;
	background: none;
	transform: none;
	font-size: 1.25rem;
	color: var(--cj-on-dark-2);
	transition: transform var(--cj-fast) var(--cj-ease), color var(--cj-fast);
}

.cj-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--cj-accent); }

.cj-nav .is-menu-open .wp-block-navigation-item__content:hover::after { transform: translateX(4px); color: var(--cj-accent); }

.cj-nav .is-menu-open [aria-current="page"] { color: var(--cj-accent); }

.cj-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.cj-quote-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px 0 14px;
	border: 1px solid var(--cj-border-strong);
	border-radius: var(--cj-radius);
	background: var(--cj-surface);
	color: var(--cj-ink);
	font: 500 0.9375rem/1 var(--cj-font);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--cj-fast), color var(--cj-fast);
}

.cj-quote-toggle:hover { border-color: var(--cj-blue); color: var(--cj-blue); }

.cj-quote-toggle svg { width: 20px; height: 20px; }

.cj-quote-toggle__count {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 12px;
	background: var(--cj-bg);
	color: var(--cj-ink-2);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--cj-mid), color var(--cj-mid);
}

.cj-quote-toggle.has-items .cj-quote-toggle__count { background: var(--cj-accent); color: var(--cj-ink); }

.cj-quote-toggle.is-bump { animation: cj-shake 400ms var(--cj-ease); }

@keyframes cj-shake {
	30% { transform: translateY(-2px) scale(1.04); }
	60% { transform: translateY(1px); }
}

/* Buscador compacto en header */
.cj-hsearch { display: flex; align-items: center; }

.cj-hsearch__toggle { display: none; border-color: var(--cj-border-strong); }

.cj-search--header { width: clamp(220px, 19vw, 280px); }

.cj-search--header .cj-search__box { min-height: 44px; }

.cj-search--header .cj-search__input { height: 42px; font-size: 0.9375rem; padding-inline: 8px; }

.cj-search--header .cj-search__icon { padding-left: 12px; }

.cj-search--header .cj-search__submit { display: none; }

/* ==================================================
   04. HOME
   ================================================== */

/* ---- Buscador ---- */
.cj-search { position: relative; display: grid; gap: 10px; }

.cj-search__label { font-size: 1rem; font-weight: 600; color: var(--cj-ink); }

.cj-search__field { position: relative; }

.cj-search__box {
	display: flex;
	align-items: center;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border-strong);
	border-radius: var(--cj-radius);
	transition: border-color var(--cj-fast), box-shadow var(--cj-fast);
}

.cj-search__box:focus-within { border-color: var(--cj-blue); box-shadow: 0 0 0 3px rgba(35, 63, 146, 0.16); }

.cj-search__icon { display: flex; padding-left: 16px; color: var(--cj-ink-2); }

.cj-search__icon svg { width: 22px; height: 22px; }

.cj-search.is-loading .cj-search__icon { color: var(--cj-blue); }

.cj-search__input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: var(--cj-ink);
	font: 500 1.0625rem var(--cj-font);
	letter-spacing: 0.01em;
}

.cj-search__input:focus { outline: none; }

.cj-search__input::-webkit-search-cancel-button { cursor: pointer; }

.cj-search__submit {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 5px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--cj-radius-sm); /* Botón dentro de la caja (4px) con 5px de margen: radio interior menor. */
	background: var(--cj-blue);
	color: #fff;
	font: 600 0.9375rem var(--cj-font);
	cursor: pointer;
	transition: background-color var(--cj-fast);
}

.cj-search__submit:hover { background: var(--cj-blue-700); }

.cj-search__submit svg { width: 18px; height: 18px; transition: transform var(--cj-fast) var(--cj-ease); }

.cj-search__submit:hover svg { transform: translateX(2px); }

.cj-search__hint { margin: 0; font-size: 0.875rem; color: var(--cj-ink-2); }

.cj-search--hero .cj-search__label,
.cj-dark .cj-search__label { color: #fff; font-size: 1.125rem; }

.cj-search--hero .cj-search__hint,
.cj-dark .cj-search__hint { color: var(--cj-on-dark-2); }

.cj-search--hero .cj-search__box,
.cj-dark .cj-search__box {
	min-height: 64px;
	border-color: transparent;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px rgba(0, 0, 0, 0.32);
}

.cj-search--hero .cj-search__box:focus-within,
.cj-dark .cj-search__box:focus-within { box-shadow: 0 0 0 3px var(--cj-accent), 0 24px 48px rgba(0, 0, 0, 0.32); }

.cj-search--hero .cj-search__input,
.cj-search--page .cj-search__input { height: 62px; font-size: 1.1875rem; }

.cj-search__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius);
	box-shadow: var(--cj-shadow-lg);
	max-height: min(440px, 60vh);
	overflow-y: auto;
	animation: cj-in var(--cj-mid) var(--cj-ease);
}

.cj-search--header .cj-search__list { left: auto; width: min(420px, 90vw); }

.cj-suggest__opt {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--cj-radius-sm);
	color: var(--cj-ink);
	text-decoration: none;
}

[aria-selected="true"] > .cj-suggest__opt,
.cj-suggest__opt:hover { background: var(--cj-selected); color: var(--cj-ink); }

.cj-suggest__thumb { width: 44px; height: 44px; background: var(--cj-bg); border-radius: var(--cj-radius-sm); overflow: hidden; }

.cj-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }

.cj-suggest__main { display: grid; min-width: 0; }

.cj-suggest__sku { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

.cj-suggest__name { font-size: 0.875rem; color: var(--cj-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cj-suggest__brand { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cj-ink-2); }

.cj-suggest__none { padding: 14px 10px; font-size: 0.9375rem; color: var(--cj-ink-2); }

.cj-suggest__all { border-top: 1px solid var(--cj-border); margin-top: 6px; }

.cj-suggest__all a { display: block; padding: 12px 10px 8px; font-weight: 600; font-size: 0.9375rem; }

/* ---- Hero ---- */
.cj-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--cj-navy);
	color: var(--cj-on-dark);
}

/* Mismo fondo que las portadas interiores */
.cj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--cj-glow), var(--cj-hatch);
}

/* Luz de estudio detrás del producto */
.cj-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(34% 48% at 75% 50%, rgba(52, 86, 186, 0.55), transparent 72%),
		linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.3));
}

.cj-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	min-height: clamp(540px, calc(100vh - var(--cj-header-h) - var(--cj-top) - 40px), 760px);
	padding-block: clamp(40px, 5vw, 72px);
}

/* Espacio para la tarjeta de cifras que monta sobre el hero */
.cj-hero:has(+ .cj-kpis) .cj-hero__grid { padding-bottom: calc(clamp(40px, 5vw, 72px) + clamp(64px, 8vw, 96px)); }

.cj-hero__copy { display: grid; gap: 20px; max-width: 640px; }

.cj-hero__title {
	max-width: 15ch;
	font-size: clamp(2.5rem, 4.4vw, 4.125rem);
	line-height: 1.02;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: #fff;
}

.cj-hero__lead { margin: 0; max-width: 50ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--cj-on-dark-2); }

.cj-hero__copy .cj-search { margin-top: 8px; gap: 14px; }

/* Laptops de poca altura (1280×720, 1366×768): todo el bloque, botones incluidos, en la primera pantalla. */
@media (min-width: 900px) and (max-height: 820px) {
	.cj-hero__grid { padding-top: 32px; }

	.cj-hero__copy { gap: 16px; }

	.cj-hero__title { font-size: clamp(2.5rem, 4vw, 3.5rem); }
}

/* El placeholder ya lo pide: etiqueta solo para lectores de pantalla */
.cj-search--hero .cj-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.cj-hero__actions { margin-top: 4px; }

/* Accesos rápidos bajo el buscador */
.cj-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

.cj-quick__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cj-on-dark-2); }

.cj-quick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.cj-quick__chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--cj-fast), background-color var(--cj-fast), color var(--cj-fast);
}

.cj-quick__chip:hover { border-color: var(--cj-accent); background: rgba(115, 186, 0, 0.12); color: #fff; }

/* Escenario del producto */
.cj-hero__stage {
	position: relative;
	width: 100%;
	max-width: 580px;
	aspect-ratio: 1 / 1;
	justify-self: end;
}

/* Anillos: uno sólido tenue y uno punteado */
.cj-hero__stage::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: radial-gradient(closest-side, rgba(79, 116, 216, 0.22), transparent 72%);
	box-shadow: inset 0 0 0 36px rgba(255, 255, 255, 0.015);
}

.cj-hero__stage::after {
	content: "";
	position: absolute;
	inset: 16%;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

.cj-hero__slides { position: absolute; inset: 0; z-index: 1; }

/* Sombra de apoyo */
.cj-hero__slides::after {
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	bottom: 13%;
	height: 26px;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
	z-index: -1;
}

.cj-hero__slides .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(12px) scale(0.97) rotate(-4deg);
	transition: opacity 700ms var(--cj-ease), transform 900ms var(--cj-ease);
	pointer-events: none;
}

.cj-hero__slides .wp-block-image:first-child { opacity: 1; transform: none; }

.js .cj-hero__slides .wp-block-image:first-child { opacity: 0; transform: translateY(12px) scale(0.97) rotate(-4deg); }

.js .cj-hero__slides .wp-block-image.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* Antes de que main.js prepare las pestañas del buscador, solo se ve la primera (sin salto al cargar). */
.js .cj-finder__tabs:not(.is-ready) .cj-finder__panel + .cj-finder__panel { display: none; }

.cj-hero__slides img {
	width: 78%;
	height: 78%;
	object-fit: contain;
	filter: drop-shadow(0 34px 42px rgba(0, 0, 0, 0.5));
}

/* El nombre va en las pestañas */
.cj-hero__slides .wp-element-caption { display: none; }

/* Pestañas del producto destacado */
.cj-slider-tabs {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 5px;
	border: 1px solid var(--cj-line-dark);
	border-radius: 999px;
	background: rgba(14, 24, 56, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transform: translateX(-50%);
	white-space: nowrap;
}

.cj-slider-tab {
	position: relative;
	display: grid;
	gap: 6px;
	padding: 9px 16px 8px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--cj-on-dark-2);
	font: 600 0.8125rem/1 var(--cj-font);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color var(--cj-fast), background-color var(--cj-fast);
}

.cj-slider-tab:hover { color: #fff; }

.cj-slider-tab.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); }

.cj-slider-tab__bar { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }

.cj-slider-tab__bar span { display: block; height: 100%; background: var(--cj-accent); transform: scaleX(0); transform-origin: left; }

.cj-slider-tab.is-active .cj-slider-tab__bar span { animation: cj-progress 6s linear forwards; }

.cj-hero__stage.is-held .cj-slider-tab.is-active .cj-slider-tab__bar span,
.cj-hero__stage.is-away .cj-slider-tab.is-active .cj-slider-tab__bar span { animation-play-state: paused; }

.cj-hero__stage.is-paused .cj-slider-tab.is-active .cj-slider-tab__bar span { animation: none; transform: scaleX(1); }

@keyframes cj-progress {
	to { transform: scaleX(1); }
}

.cj-slider-pause {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: 2px;
	border: 1px solid var(--cj-line-dark);
	border-radius: 50%;
	background: none;
	color: var(--cj-on-dark-2);
	cursor: pointer;
	transition: border-color var(--cj-fast), color var(--cj-fast);
}

.cj-slider-pause:hover { border-color: var(--cj-accent); color: #fff; }

/* ---- Sobre la empresa ---- */
.cj-about { position: relative; overflow: hidden; isolation: isolate; }

.cj-about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 16px);
}

.cj-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.cj-about__text { display: grid; gap: 20px; justify-items: start; }

.wp-block-image.cj-about__media { position: relative; margin: 0; }

.cj-about__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--cj-r-lg); box-shadow: var(--cj-shadow-lg); }

.cj-about__media::before,
.cj-about__media::after {
	content: "";
	position: absolute;
	width: 56px;
	height: 56px;
	pointer-events: none;
}

.cj-about__media::before { top: -12px; left: -12px; border-top: 2px solid var(--cj-accent); border-left: 2px solid var(--cj-accent); }

.cj-about__media::after { right: -12px; bottom: -12px; border-right: 2px solid var(--cj-accent); border-bottom: 2px solid var(--cj-accent); }

/* ---- Misión y visión ---- */
.cj-mv { background: var(--cj-surface); }

.cj-mv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cj-mv__item { display: grid; gap: 18px; align-content: start; padding: 32px clamp(20px, 3vw, 48px) 8px 0; }

.cj-mv__item + .cj-mv__item { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--cj-border); }

.cj-mv__label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cj-accent-text);
}

.cj-mv__label::before { content: ""; width: 28px; height: 2px; background: var(--cj-accent); }

.cj-mv__text { margin: 0; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.35; color: var(--cj-ink); justify-self: start; }

/* ---- Marcas ---- */
.cj-brands-section { background: var(--cj-bg); }

.cj-brands {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(45%, 168px), 1fr));
	gap: 12px;
}

.cj-brand-cell {
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
	align-items: center;
	gap: 10px;
	height: 132px;
	padding: 20px 16px 16px;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-r-lg);
	color: var(--cj-ink);
	text-decoration: none;
	transition: border-color var(--cj-mid), box-shadow var(--cj-slow) var(--cj-ease), transform var(--cj-slow) var(--cj-ease);
}

.cj-brand-cell__logo { display: grid; place-items: center; transition: transform var(--cj-mid) var(--cj-ease); }

.cj-brand-cell img { max-height: 52px; max-width: 140px; width: auto; height: auto; object-fit: contain; }

.cj-brand-cell .cj-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; }

.cj-brand-cell__count { font-size: 0.8125rem; color: var(--cj-ink-2); transition: color var(--cj-fast); }

.cj-brand-cell__count.is-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cj-accent-text); }

.cj-brand-cell__count.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cj-accent); box-shadow: 0 0 0 3px rgba(115, 186, 0, 0.18); }

.cj-brand-cell:hover { border-color: #C9D3EA; box-shadow: var(--cj-shadow); transform: translateY(-3px); color: var(--cj-ink); }

.cj-brand-cell:hover .cj-brand-cell__logo { transform: scale(1.04); }

.cj-brand-cell:hover .cj-brand-cell__count { color: var(--cj-blue); }

/* ---- CTA: tarjeta navy dentro del contenedor ---- */
.cj-cta { padding-block: 0 clamp(56px, 8vw, 112px); }

.cj-cta__grid {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding: clamp(36px, 5vw, 64px) calc(var(--cj-gutter) + clamp(24px, 4vw, 64px));
	color: #fff;
}

.cj-cta__grid::before {
	content: "";
	position: absolute;
	inset: 0 var(--cj-gutter);
	z-index: -1;
	border-radius: var(--cj-r-xl);
	background:
		radial-gradient(40% 90% at 100% 0%, rgba(115, 186, 0, 0.2), transparent 70%),
		radial-gradient(50% 100% at 0% 100%, rgba(52, 86, 186, 0.7), transparent 70%),
		var(--cj-hatch),
		var(--cj-navy);
	box-shadow: var(--cj-shadow-lg);
}

.cj-cta__text { display: grid; gap: 10px; max-width: 640px; }

.cj-cta__title { color: #fff; font-size: clamp(1.625rem, 2.8vw, 2.25rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }

.cj-cta p { margin: 0; color: var(--cj-on-dark-2); font-size: 1.0625rem; }

/* ---- Datos de contacto ---- */
.cj-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.cj-contact__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }

.cj-contact__icon { width: 22px; height: 22px; color: var(--cj-accent-text); margin-top: 2px; }

.cj-contact__label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cj-ink-2); }

.cj-contact__value { display: block; overflow-wrap: anywhere; }

.cj-contact a { color: inherit; text-decoration: none; }

.cj-contact a:hover { color: var(--cj-blue); text-decoration: underline; }

.cj-map { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--cj-border); border-radius: var(--cj-radius); overflow: hidden; background: var(--cj-surface); }

.cj-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==================================================
   05. CATALOGO
   ================================================== */

.cj-catalog-main { background: var(--cj-bg); }

.cj-catalog {
	--cj-filters-w: 288px;
	--cj-detail-w: clamp(380px, 31vw, 480px);
	background: var(--cj-bg);
}

.cj-catalog__head { position: relative; isolation: isolate; overflow: hidden; }

.cj-catalog__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cj-glow), var(--cj-hatch); pointer-events: none; }

.cj-catalog__head-inner { padding: clamp(24px, 3vw, 36px) var(--cj-gutter) clamp(22px, 2.6vw, 32px); }

.cj-catalog__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }

.cj-catalog__sub { margin: 0; font-size: 0.9375rem; color: var(--cj-on-dark-2); font-variant-numeric: tabular-nums; }

.cj-catalog__body {
	display: grid;
	grid-template-columns: var(--cj-filters-w) minmax(0, 1fr) var(--cj-detail-w);
	align-items: start;
}

/* ---- Columna 1: filtros ---- */
.cj-filters {
	position: sticky;
	top: var(--cj-sticky);
	height: calc(100vh - var(--cj-sticky));
	height: calc(100dvh - var(--cj-sticky));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 20px 20px 32px;
	background: var(--cj-surface);
	border-right: 1px solid var(--cj-border);
}

.cj-filters__head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 16px; }

.cj-filters__close { display: none; }

.cj-filters__form { display: grid; gap: 20px; }

.cj-facet { border-top: 1px solid var(--cj-border); padding-top: 12px; }

.cj-facet summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	font-size: 0.9375rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.cj-facet summary::-webkit-details-marker { display: none; }

.cj-facet summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 1.5px solid var(--cj-ink-2);
	border-bottom: 1.5px solid var(--cj-ink-2);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--cj-mid) var(--cj-ease);
}

.cj-facet[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.cj-facet fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.cj-facet__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px; }

.cj-opt {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin-inline: -8px;
	padding: 6px 8px;
	border-radius: var(--cj-radius-sm);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--cj-ink);
	cursor: pointer;
	transition: background-color var(--cj-fast) var(--cj-ease);
}

.cj-opt:hover { background: var(--cj-bg); }

.cj-opt input {
	appearance: none;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--cj-border-strong);
	border-radius: var(--cj-radius-sm);
	background: var(--cj-surface);
	cursor: pointer;
	transition: background-color var(--cj-fast), border-color var(--cj-fast);
}

.cj-opt input[type="radio"] { border-radius: 50%; }

.cj-opt input:checked { background: var(--cj-blue); border-color: var(--cj-blue); }

.cj-opt input[type="checkbox"]:checked::after {
	content: "";
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

.cj-opt input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

.cj-opt input:focus-visible { outline: 2px solid var(--cj-blue); outline-offset: 2px; }

.cj-opt:has(input:checked) { background: var(--cj-selected); }

.cj-opt:has(input:checked) .cj-opt__name { font-weight: 600; color: var(--cj-blue); }

.cj-opt__count { min-width: 3ch; text-align: right; font-size: 0.8125rem; color: var(--cj-ink-2); font-variant-numeric: tabular-nums; transition: opacity var(--cj-fast); }

.cj-opt.is-empty .cj-opt__name { color: var(--cj-ink-2); }

.cj-filters__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

.js .cj-filters__apply { display: none; }

.cj-filters-overlay { display: none; }

/* ---- Columna 2: listado ---- */
.cj-results { min-width: 0; min-height: calc(100vh - var(--cj-sticky)); }

.cj-results__bar {
	position: sticky;
	top: var(--cj-sticky);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-height: 56px;
	padding: 10px 20px;
	background: var(--cj-bg);
	border-bottom: 1px solid var(--cj-border);
}

.cj-results__filters-btn { display: none; }

.cj-results__count { margin: 0; font-size: 0.9375rem; color: var(--cj-ink-2); white-space: nowrap; }

.cj-results__count strong { color: var(--cj-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.cj-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cj-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 8px 0 10px;
	border: 1px solid var(--cj-border-strong);
	border-radius: 3px;
	background: var(--cj-surface);
	color: var(--cj-ink);
	font: 500 0.8125rem var(--cj-font);
	cursor: pointer;
	animation: cj-in var(--cj-mid) var(--cj-ease);
	transition: border-color var(--cj-fast), color var(--cj-fast);
}

.cj-chip:hover { border-color: var(--cj-blue); color: var(--cj-blue); }

.cj-chip--clear { border-color: transparent; background: none; color: var(--cj-blue); text-decoration: underline; text-underline-offset: 3px; }

.cj-list-wrap { position: relative; }

.cj-list { list-style: none; margin: 0; padding: 0; transition: opacity var(--cj-fast) var(--cj-ease); }

.cj-list-wrap[aria-busy="true"] .cj-list { opacity: 0.55; }

.cj-row {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 96px 20px;
	align-items: center;
	gap: 16px;
	min-height: 76px;
	padding: 10px 20px;
	background: var(--cj-surface);
	border-bottom: 1px solid var(--cj-border);
	color: var(--cj-ink);
	text-decoration: none;
	transition: background-color var(--cj-fast) var(--cj-ease);
}

.cj-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--cj-border-strong);
	transform: scaleY(0);
	transition: transform var(--cj-mid) var(--cj-ease), background-color var(--cj-mid);
}

.cj-row:hover { background: var(--cj-hover); color: var(--cj-ink); }

.cj-row:hover::before { transform: scaleY(1); }

.cj-row:active { background: #EEF1F6; }

.cj-row:focus-visible { outline: 2px solid var(--cj-blue); outline-offset: -2px; }

.cj-row[aria-current="true"] { background: var(--cj-selected); }

.cj-row[aria-current="true"]::before { transform: scaleY(1); background: var(--cj-accent); width: 4px; }

.cj-row[aria-current="true"] .cj-row__sku { color: var(--cj-blue); }

.cj-row__thumb {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--cj-bg);
	border-radius: var(--cj-radius-sm);
}

.cj-row__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.cj-row__thumb .cj-noimg svg { width: 24px; height: 24px; }

.cj-row__main { display: grid; gap: 1px; min-width: 0; }

.cj-row__sku {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	transition: color var(--cj-fast);
}

.cj-row__name { font-size: 0.9375rem; color: var(--cj-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cj-row__meta {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cj-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cj-row__brand { display: flex; justify-content: flex-end; }

.cj-row__brand img { max-height: 28px; max-width: 96px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }

.cj-row__brand .cj-brand-name,
.cj-detail__brand .cj-brand-name {
	padding: 3px 7px;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cj-ink-2);
}

.cj-row__go { display: flex; color: var(--cj-ink-2); transition: transform var(--cj-fast) var(--cj-ease), color var(--cj-fast); }

.cj-row__go svg { width: 20px; height: 20px; }

.cj-row:hover .cj-row__go,
.cj-row[aria-current="true"] .cj-row__go { color: var(--cj-blue); transform: translateX(2px); }

.cj-list__item.is-new { animation: cj-in var(--cj-mid) var(--cj-ease) both; }

@keyframes cj-in {
	from { opacity: 0; transform: translateY(4px); }
}

/* Skeleton */
.cj-skel {
	display: block;
	border-radius: var(--cj-radius-sm);
	background: linear-gradient(90deg, #ECEEF2 0, #F6F7F9 40%, #ECEEF2 80%);
	background-size: 200% 100%;
	animation: cj-shimmer 1.2s linear infinite;
}

@keyframes cj-shimmer {
	to { background-position: -200% 0; }
}

.cj-skel-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	height: 76px;
	padding: 10px 20px;
	background: var(--cj-surface);
	border-bottom: 1px solid var(--cj-border);
}

.cj-skel-row__lines { display: grid; gap: 8px; }

.cj-skel--thumb { width: 56px; height: 56px; }

.cj-skel--sku { width: 120px; height: 16px; }

.cj-skel--name { width: 60%; height: 12px; }

.cj-skel--badge { width: 140px; height: 36px; }

.cj-skel--img { width: 100%; aspect-ratio: 1 / 1; }

.cj-detail-skel { display: grid; gap: 16px; padding: 20px 24px; }

.cj-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 72px 24px;
	text-align: center;
	color: var(--cj-ink-2);
}

.cj-empty p { margin: 0; }

.cj-empty__icon { width: 40px; height: 40px; color: var(--cj-border-strong); }

.cj-empty__title { font-size: 1.125rem; font-weight: 600; color: var(--cj-ink); }

.cj-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px 56px; }

.cj-more__status { margin: 0; font-size: 0.875rem; color: var(--cj-ink-2); font-variant-numeric: tabular-nums; }

/* ---- Columna 3: panel de detalle ---- */
.cj-detail {
	position: sticky;
	top: var(--cj-sticky);
	height: calc(100vh - var(--cj-sticky));
	height: calc(100dvh - var(--cj-sticky));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	background: var(--cj-surface);
	border-left: 1px solid var(--cj-border);
}

.cj-detail__inner { min-height: 100%; transition: opacity var(--cj-fast) var(--cj-ease); }

.cj-detail__inner.is-loading { opacity: 0.4; }

.cj-detail__inner.is-in { animation: cj-in var(--cj-slow) var(--cj-ease); }

.cj-detail__empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	min-height: 60vh;
	padding: 40px;
	text-align: center;
	color: var(--cj-ink-2);
}

.cj-detail__empty p { margin: 0; max-width: 28ch; }

.cj-detail__empty-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
	border: 1px dashed var(--cj-border-strong);
	border-radius: var(--cj-radius);
	color: var(--cj-blue);
}

.cj-detail__empty-icon svg { width: 26px; height: 26px; }

.cj-detail__empty-title { font-size: 1.125rem; font-weight: 600; color: var(--cj-ink); }

.cj-detail__top {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 12px 24px;
	background: var(--cj-surface);
	border-bottom: 1px solid var(--cj-border);
}

.cj-detail__close { display: none; }

.cj-detail .cj-gallery { padding: 20px 24px 0; }

.cj-detail__body { display: grid; gap: 22px; padding: 20px 24px 40px; }

.cj-detail__head { display: grid; gap: 6px; justify-items: start; }

.cj-detail__brand img { max-height: 28px; width: auto; }

.cj-detail__title { font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }

.cj-detail__meta { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cj-ink-2); }

.cj-detail__actions { display: grid; gap: 8px; }

.cj-detail__section { display: grid; gap: 10px; justify-items: start; }

.cj-detail__section > * { justify-self: stretch; }

.cj-detail__section > .cj-more-link { justify-self: start; }

.cj-app-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cj-border); }

.cj-app-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cj-border);
	font-size: 0.9375rem;
}

.cj-app-list__y { color: var(--cj-ink-2); font-variant-numeric: tabular-nums; }

/* ==================================================
   06. PRODUCTO
   ================================================== */

.cj-sku-badge {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--cj-navy);
	color: #fff;
	border-radius: var(--cj-radius);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cj-sku-badge__k {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: var(--cj-blue);
	border-right: 2px solid var(--cj-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
}

.cj-sku-badge__v {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cj-sku-badge--sm .cj-sku-badge__k { padding: 0 9px; font-size: 0.6875rem; }

.cj-sku-badge--sm .cj-sku-badge__v { padding: 9px 12px; font-size: 1.25rem; }

/* Galería */
.cj-gallery { display: grid; gap: 10px; }

.cj-gallery__main {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: radial-gradient(75% 75% at 50% 42%, #FFFFFF 0%, #E8EBF0 100%);
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-r-lg);
}

/* Marcas de encuadre técnico */
.cj-gallery__main::before {
	content: "";
	position: absolute;
	inset: 14px;
	pointer-events: none;
	background:
		linear-gradient(var(--cj-border-strong), var(--cj-border-strong)) top left / 16px 1px no-repeat,
		linear-gradient(var(--cj-border-strong), var(--cj-border-strong)) top left / 1px 16px no-repeat,
		linear-gradient(var(--cj-border-strong), var(--cj-border-strong)) bottom right / 16px 1px no-repeat,
		linear-gradient(var(--cj-border-strong), var(--cj-border-strong)) bottom right / 1px 16px no-repeat;
}

.cj-gallery__main img {
	width: 86%;
	height: 86%;
	object-fit: contain;
	transition: opacity var(--cj-mid) var(--cj-ease);
}

.cj-gallery__main.is-swapping img { opacity: 0; }

.cj-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }

.cj-gallery__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius-sm);
	background: var(--cj-surface);
	cursor: pointer;
	transition: border-color var(--cj-fast), box-shadow var(--cj-fast);
}

.cj-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

.cj-gallery__thumb:hover { border-color: var(--cj-border-strong); }

.cj-gallery__thumb[aria-pressed="true"] { border-color: var(--cj-blue); box-shadow: inset 0 -3px 0 var(--cj-accent); }

/* Especificaciones */
.cj-specs { display: grid; gap: 12px; }

.cj-spec-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; border-top: 2px solid var(--cj-ink); }

.cj-spec-table thead th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cj-border);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cj-ink-2);
}

.cj-spec-table tbody th {
	width: 45%;
	padding: 10px 12px;
	border-bottom: 1px solid var(--cj-border);
	font-weight: 500;
	text-align: left;
	color: var(--cj-ink-2);
}

.cj-spec-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cj-border);
	font-weight: 600;
	color: var(--cj-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.cj-spec-table tbody tr { transition: background-color var(--cj-fast); }

.cj-spec-table tbody tr:nth-child(even) { background: #FAFBFC; }

.cj-spec-table tbody tr:hover { background: var(--cj-selected); }

/* Ficha */
.cj-product-main { background: var(--cj-bg); }

.cj-product-wrap { display: grid; gap: 20px; padding-top: 24px; }

.cj-product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.cj-product__media { position: sticky; top: calc(var(--cj-sticky) + 24px); }

.cj-product__info { display: grid; gap: 24px; }

.cj-product__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.cj-product__badges .cj-btn.is-copied { border-color: var(--cj-accent-text); color: var(--cj-accent-text); }

.cj-product__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }

.cj-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin: 0;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-r-lg);
}

.cj-facts > div { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 14px 16px; border-left: 1px solid var(--cj-border); }

.cj-facts > div:first-child { border-left: 0; }

.cj-facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cj-ink-2); }

.cj-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.cj-facts dd a { color: var(--cj-ink); text-decoration: none; }

.cj-facts dd a:hover { color: var(--cj-blue); text-decoration: underline; }

.cj-facts img { max-height: 28px; width: auto; }

.cj-facts .cj-brand-name { font-weight: 700; letter-spacing: 0.04em; }

.cj-product__cta {
	display: grid;
	gap: 12px;
	justify-items: stretch;
	padding: 20px;
	background: var(--cj-surface);
	border: 1px solid var(--cj-border);
	border-top: 2px solid var(--cj-navy);
	border-radius: var(--cj-r-lg);
}

.cj-product__note { margin: 0; font-size: 0.875rem; color: var(--cj-ink-2); }

/* Información técnica */
.cj-tech { padding-block: clamp(40px, 5vw, 72px); background: var(--cj-surface); border-top: 1px solid var(--cj-border); }

.cj-tech__inner { display: grid; gap: 40px; }

/* Sin esto, la fila de pestañas empuja el ancho. */
.cj-tabs { min-width: 0; }

.cj-tabs__list {
	display: flex;
	gap: 4px;
	margin-bottom: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--cj-border);
}

.cj-tabs__list::-webkit-scrollbar { display: none; }

html:not(.js) .cj-tabs__list { display: none; }

.cj-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 16px;
	border: 0;
	background: none;
	color: var(--cj-ink-2);
	font: 600 0.9375rem var(--cj-font);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--cj-fast);
}

.cj-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--cj-blue);
	transform: scaleX(0);
	transition: transform var(--cj-mid) var(--cj-ease);
}

.cj-tab:hover { color: var(--cj-ink); }

.cj-tab[aria-selected="true"] { color: var(--cj-blue); }

.cj-tab[aria-selected="true"]::after { transform: scaleX(1); }

.cj-tab:focus-visible { outline-offset: -2px; }

.cj-tabs__count {
	padding: 2px 7px;
	border-radius: var(--cj-radius-sm);
	background: var(--cj-bg);
	color: var(--cj-ink-2);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--cj-fast), color var(--cj-fast);
}

.cj-tab[aria-selected="true"] .cj-tabs__count { background: var(--cj-blue); color: #fff; }

.cj-tabs__panel { display: grid; gap: 24px; animation: cj-in var(--cj-mid) var(--cj-ease); }

html:not(.js) .cj-tabs__panel + .cj-tabs__panel { margin-top: 48px; }

.cj-tabs__heading { font-size: 1.375rem; }

.js .cj-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.cj-apps { display: grid; gap: 24px; }

.cj-apps__filter { display: grid; gap: 8px; max-width: 420px; }

.cj-apps__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
	gap: 32px 48px;
	align-items: start;
}

.cj-apps__group { display: grid; gap: 4px; }

.cj-apps__make {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cj-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.cj-apps__make span { font-size: 0.8125rem; font-weight: 500; color: var(--cj-ink-2); font-variant-numeric: tabular-nums; }

.cj-apps__none { margin: 0; color: var(--cj-ink-2); }

.cj-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.cj-table th {
	padding: 8px 12px 8px 0;
	border-bottom: 1px solid var(--cj-border);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cj-ink-2);
}

.cj-table td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--cj-border);
	vertical-align: top;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.cj-table tbody tr { transition: background-color var(--cj-fast); }

.cj-table tbody tr:hover { background: var(--cj-hover); }

.cj-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px 40px; }

.cj-codes__group { display: grid; gap: 12px; align-content: start; }

.cj-codes__brand {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cj-border);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cj-codes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.cj-code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius-sm);
	background: var(--cj-bg);
	color: var(--cj-ink);
	font: 600 0.9375rem var(--cj-font);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color var(--cj-fast), background-color var(--cj-fast), color var(--cj-fast);
}

.cj-code svg { width: 14px; height: 14px; color: var(--cj-ink-2); opacity: 0.35; transition: opacity var(--cj-fast); }

.cj-code:hover { border-color: var(--cj-blue); background: var(--cj-surface); }

.cj-code:hover svg,
.cj-code:focus-visible svg { opacity: 1; }

.cj-code.is-copied { border-color: var(--cj-accent-text); color: var(--cj-accent-text); background: var(--cj-surface); }

.cj-code.is-copied svg { color: var(--cj-accent-text); opacity: 1; }

.cj-product-desc:empty { display: none; }

/* ==================================================
   08. FOOTER
   ================================================== */

.cj-footer {
	position: relative;
	background: var(--cj-navy);
	color: var(--cj-on-dark-2);
	font-size: 0.9375rem;
}

.cj-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--cj-gutter);
	width: 96px;
	height: 3px;
	background: var(--cj-accent);
}

.cj-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	padding-block: 64px 48px;
}

.cj-footer__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }

/* Logo en blanco sobre navy (el PNG es transparente) */
.cj-footer .wp-block-site-logo img { max-height: 68px; width: auto; filter: brightness(0) invert(1); }

.cj-footer .wp-block-site-logo ~ .wp-block-site-title { display: none; }

.cj-footer .wp-block-site-title a { color: #fff; }

.cj-footer__tagline,
.cj-footer__desc { margin: 0; max-width: 36ch; color: var(--cj-on-dark-2); }

/* La descripción ya lo dice */
.cj-footer__tagline { display: none; }

.cj-footer__col { display: grid; gap: 16px; align-content: start; }

.cj-footer__title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }

.cj-footer a { color: var(--cj-on-dark-2); text-decoration: none; }

.cj-footer a:hover { color: #fff; text-decoration: underline; }

.cj-footer-nav .wp-block-navigation__container { gap: 10px; }

.cj-footer-nav .wp-block-navigation-item__content { padding: 2px 0; color: var(--cj-on-dark-2); }

.cj-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.cj-footer-list__all { font-weight: 600; color: #fff !important; }

.cj-footer .cj-contact__icon { color: var(--cj-accent); }

.cj-footer .cj-contact__label { color: #fff; }

.cj-footer .cj-pending { color: var(--cj-on-dark-2); border-color: rgba(255, 255, 255, 0.28); }

.cj-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px 24px;
	border-top: 1px solid var(--cj-line-dark);
	font-size: 0.8125rem;
}

.cj-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.cj-legal p,
.cj-footer__note { margin: 0; }


/* ==================================================
   09. RESPONSIVE
   ================================================== */

/* Laptop: panel de detalle como hoja lateral */
@media (max-width: 1279px) {
	.cj-catalog__body { grid-template-columns: var(--cj-filters-w) minmax(0, 1fr); }

	.cj-detail {
		position: fixed;
		top: var(--cj-top);
		right: 0;
		bottom: 0;
		z-index: 80;
		width: min(460px, 92vw);
		height: auto;
		border-left: 1px solid var(--cj-border);
		box-shadow: var(--cj-shadow-lg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--cj-slow) var(--cj-ease), visibility 0s linear var(--cj-slow);
	}

	.cj-catalog.is-detail-open .cj-detail { transform: none; visibility: visible; transition: transform var(--cj-slow) var(--cj-ease); }

	.cj-detail__close { display: grid; }

	.cj-catalog.is-detail-open .cj-filters-overlay,
	.cj-catalog.is-filters-open .cj-filters-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 75;
		background: rgba(14, 24, 56, 0.4);
		animation: cj-fade var(--cj-slow) var(--cj-ease);
	}

	/* Lupa que despliega el buscador bajo la cabecera */
	.cj-hsearch__toggle { display: grid; }

	.cj-hsearch.is-open .cj-hsearch__toggle { border-color: var(--cj-blue); color: var(--cj-blue); background: var(--cj-selected); }

	.cj-hsearch__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: 14px var(--cj-gutter) 18px;
		background: var(--cj-surface);
		border-bottom: 1px solid var(--cj-border);
		box-shadow: 0 18px 36px rgba(14, 24, 56, 0.12);
	}

	.cj-hsearch.is-open .cj-hsearch__panel { display: block; animation: cj-in var(--cj-mid) var(--cj-ease); }

	.cj-hsearch__panel .cj-search--header { width: 100%; max-width: 760px; margin-inline: auto; }

	.cj-hsearch__panel .cj-search--header .cj-search__submit { display: inline-flex; }

	.cj-hsearch__panel .cj-search--header .cj-search__list { left: 0; width: auto; }
}

@keyframes cj-fade {
	from { opacity: 0; }
}

@media (max-width: 1100px) {
	.cj-quote-toggle__label { display: none; }

	.cj-quote-toggle { padding: 0 10px; }

	.cj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cj-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }

	.cj-slider-tab { padding-inline: 12px; }
}

/* Tablet: filtros en drawer */
@media (max-width: 1023px) {
	.cj-catalog__body { grid-template-columns: minmax(0, 1fr); }

	.cj-filters {
		position: fixed;
		top: var(--cj-top);
		left: 0;
		bottom: 0;
		z-index: 80;
		width: min(340px, 88vw);
		height: auto;
		box-shadow: var(--cj-shadow-lg);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform var(--cj-slow) var(--cj-ease), visibility 0s linear var(--cj-slow);
	}

	.cj-catalog.is-filters-open .cj-filters { transform: none; visibility: visible; transition: transform var(--cj-slow) var(--cj-ease); }

	.cj-filters__close { display: grid; }

	.js .cj-filters__apply { display: inline-flex; flex: 1; }

	.cj-results__filters-btn { display: inline-flex; }

	.cj-about__grid,
	.cj-product { grid-template-columns: minmax(0, 1fr); }

	.cj-product__media { position: static; max-width: 560px; }
}

@media (max-width: 900px) {
	.cj-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }

	/* Texto y buscador primero; producto debajo con sus pestañas.
	   Doble clase: la regla general de grupos pone margin-block 0. */
	.cj-hero__grid > .cj-hero__stage { max-width: 340px; justify-self: center; margin-bottom: 56px; }

	.cj-slider-tabs { bottom: -56px; }
}

/* Mobile */
@media (max-width: 767px) {
	:root { --cj-header-h: 64px; }

	.cj-header__inner { gap: 12px; }

	.cj-brand .wp-block-site-logo img { max-height: 42px; }

	.cj-nav .wp-block-navigation__container { gap: 16px; }

	.cj-hero__grid { padding-block: 24px 48px; gap: 20px; }

	.cj-hero__grid > .cj-hero__stage { max-width: 240px; }

	.cj-hero__title { font-size: clamp(2.25rem, 10vw, 2.75rem); }

	.cj-slider-tab { padding: 8px 10px 7px; font-size: 0.75rem; }

	.cj-search--hero .cj-search__input,
	.cj-search--page .cj-search__input { height: 56px; font-size: 1.0625rem; padding-inline: 10px; }

	.cj-search--hero .cj-search__box,
	.cj-dark .cj-search__box { min-height: 58px; }

	.cj-search__submit { padding: 0 14px; }

	.cj-search__submit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

	.cj-mv__grid { grid-template-columns: minmax(0, 1fr); }

	.cj-mv__item,
	.cj-mv__item + .cj-mv__item { padding: 28px 0; border-left: 0; }

	.cj-mv__item + .cj-mv__item { border-top: 1px solid var(--cj-border); }

	.cj-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

	.cj-brand-cell { height: 104px; gap: 6px; padding: 14px 8px 10px; }

	.cj-brand-cell img { max-width: 84px; max-height: 34px; }

	.cj-brand-cell__count { font-size: 0.6875rem; line-height: 1.2; text-align: center; }

	.cj-cta__grid { flex-direction: column; align-items: flex-start; }

	.cj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-block: 48px 32px; }

	.cj-footer__brand,
	.cj-footer__col:last-child { grid-column: 1 / -1; }

	.cj-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* Catálogo: una columna, filas compactas, navega ficha */
	.cj-catalog__head-inner { padding-block: 16px 14px; }

	.cj-results__bar { padding: 10px 16px; }

	.cj-results__count { margin-left: auto; }

	.cj-chips { width: 100%; }

	.cj-chip { min-height: 36px; }

	.cj-row { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; padding: 10px 16px; min-height: 72px; }

	.cj-row__thumb { width: 52px; height: 52px; }

	.cj-row__brand { display: none; }

	.cj-row__sku { font-size: 1.125rem; }

	.cj-skel-row { padding: 10px 16px; }

	.cj-detail { width: 100vw; }

	/* Ficha */
	.cj-product-wrap { padding-top: 16px; }

	.cj-sku-badge__v { padding: 10px 14px; }

	.cj-facts { grid-template-columns: minmax(0, 1fr); }

	.cj-facts > div { border-left: 0; border-top: 1px solid var(--cj-border); display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }

	.cj-facts > div:first-child { border-top: 0; }

	.cj-spec-table tbody th { width: 50%; }

	/* Tablas de aplicaciones apiladas */
	.cj-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

	.cj-table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--cj-border); }

	.cj-table--stack td { display: grid; gap: 2px; padding: 0; border: 0; }

	.cj-table--stack td::before {
		content: attr(data-label);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--cj-ink-2);
	}

	.cj-tab { padding: 0 12px; }
}

@media (max-width: 400px) {
	.cj-hero__title { font-size: 2.125rem; }
}

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

/* Impresión de fichas técnicas */
@media print {
	.cj-site-header,
	footer.wp-block-template-part,
	.cj-product__cta,
	.cj-cta,
	.cj-tabs__list,
	.cj-apps__filter { display: none !important; }

	.cj-tabs__panel[hidden] { display: grid !important; }

	.cj-product { grid-template-columns: 1fr 1fr; }

	body { background: #fff; }
}

/* Botón "Agregar a cotización" del plugin: mismo lenguaje que los botones principales */
.licot-btn { min-height: 44px; padding: 0 20px; border-radius: var(--cj-radius); background: var(--cj-blue); font: 600 0.9375rem/1.1 var(--cj-font); letter-spacing: 0.01em; box-shadow: none; }

.licot-btn:hover { background: var(--cj-blue-700); filter: none; }

.licot-btn .licot-icono { color: var(--cj-accent); }

.licot-btn.is-added .licot-icono { color: inherit; }

.cj-btn--block .licot-btn,
.cj-product__cta .licot-btn { width: 100%; justify-content: center; }

/* "Mi cotización" con la misma cabecera que los demás diálogos (lista de códigos, cookies) */
.licot-cabecera { padding: 22px 16px 16px 24px; background: var(--cj-surface); color: var(--cj-ink); border-bottom: 1px solid var(--cj-border); }

.licot-cabecera h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cj-ink); }

.licot-cerrar { width: 44px; min-width: 44px; height: 44px; border-radius: var(--cj-radius); color: var(--cj-ink); font-size: 1.75rem; font-weight: 300; }

.licot-cerrar:hover { background: var(--cj-bg); }

.licot-cerrar:focus-visible { outline: 2px solid var(--cj-blue); outline-offset: 2px; }

/* Cotizador con los tokens del tema */
:root {
	--li-font: var(--cj-font);
	--li-navy: var(--cj-blue);
	--li-green: var(--cj-accent);
	--li-green-texto: var(--cj-accent-text);
	--li-ink: var(--cj-ink);
	--li-ink-muted: var(--cj-ink-2);
	--li-bg: var(--cj-bg);
	--li-surface: var(--cj-surface);
	--li-border: var(--cj-border);
	--li-border-strong: var(--cj-border-strong);
	--li-hover: var(--cj-hover);
	--li-danger: var(--cj-danger);
	--li-radius: var(--cj-radius);
}

/* Marca en la ficha: logo y nombre */
.cj-facts__brand { display: inline-flex; align-items: center; gap: 8px; }

/* Productos relacionados */
.cj-related-wrap { padding-block: clamp(40px, 5vw, 72px); }
.cj-related { display: grid; gap: 20px; }
.cj-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cj-related__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.cj-related__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
@media (min-width: 900px) { .cj-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cj-related__card {
	display: grid; gap: 6px; height: 100%; padding: 12px;
	border: 1px solid var(--cj-border); border-radius: var(--cj-r-lg);
	background: var(--cj-surface); color: var(--cj-ink); text-decoration: none;
	transition: border-color var(--cj-fast), box-shadow var(--cj-fast), transform var(--cj-fast) var(--cj-ease);
}
.cj-related__card:hover { border-color: var(--cj-blue); box-shadow: var(--cj-shadow); transform: translateY(-2px); color: var(--cj-ink); }
.cj-related__card:focus-visible { outline: 2px solid var(--cj-blue); outline-offset: 2px; }
.cj-related__img { display: grid; place-items: center; aspect-ratio: 1; background: var(--cj-bg); border-radius: 6px; overflow: hidden; }
.cj-related__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cj-related__sku { font-weight: 700; color: var(--cj-blue); font-variant-numeric: tabular-nums; }
.cj-related__name { font-size: 0.875rem; line-height: 1.35; color: var(--cj-ink-2); }
@media (prefers-reduced-motion: reduce) { .cj-related__card:hover { transform: none; } }

/* Marca distribuida sin catálogo en línea */
.cj-brand-pending__body {
	display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
	max-width: var(--cj-container); margin-inline: auto; padding: clamp(40px, 6vw, 88px) var(--cj-gutter);
}
.cj-brand-pending__logo { display: grid; place-items: center; aspect-ratio: 1; padding: 24px; border: 1px solid var(--cj-border); border-radius: var(--cj-r-lg); background: var(--cj-surface); }
.cj-brand-pending__logo img { max-width: 100%; height: auto; }
.cj-brand-pending__logo .cj-brand-name { font-size: 1.5rem; font-weight: 700; }
.cj-brand-pending__text { display: grid; gap: 16px; max-width: 62ch; }
.cj-brand-pending__text p { margin: 0; }
.cj-brand-pending__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 599.98px) {
	.cj-brand-pending__body { grid-template-columns: minmax(0, 1fr); }
	.cj-brand-pending__logo { max-width: 180px; }
}