/* =========================================================================
   JOMAR — sistema visual
   Tokens muestreados del catálogo original: marfil #F6F3EC (páginas
   interiores), greige #ECE2D9 (portada), filete #D8CDBB, tinta casi negra.
   ========================================================================= */
/* Newsreader 400, subconjunto latin, servido desde el propio dominio.
   Precargado en functions.php: llega antes del primer pintado y el swap
   con Georgia casi nunca llega a verse. Licencia en assets/fonts/README.txt. */
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}


:root {
	/* Color */
	--ivory: #f6f3ec;
	--sand: #ece2d9;
	--sand-deep: #e2d6c8;
	--line: #d8cdbb;
	--ink: #1a1a1a;
	--ink-soft: #55504a;
	--accent: #7a5c3a;          /* texto y bordes: 5.5:1 sobre marfil */
	--accent-quiet: #c1a480;    /* solo decorativo: filetes y reglas, nunca contenido */
	--field-border: #8f8067;    /* borde de control interactivo: ≥3:1, WCAG 1.4.11 */
	--white: #fffdfa;
	--warn-bg: #f3e9d8;
	--warn-line: #b08a4e;
	--warn-ink: #5a4320;
	--ok-bg: #e8f0e6;
	--ok-line: #4d7c4d;
	--error-bg: #f6e3e0;
	--error-line: #a63b2f;
	--error-ink: #8c2f24;

	/* Tipografía: pilas del sistema, sin peticiones externas ni CLS.
	   Sustituir por la fuente de marca cambiando solo estas dos variables. */
	--font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
	--step-2: clamp(1.45rem, 1.29rem + 0.75vw, 1.9rem);
	--step-3: clamp(1.75rem, 1.45rem + 1.45vw, 2.6rem);
	--step-4: clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem);

	/* Espaciado */
	--sp-1: 0.375rem;
	--sp-2: 0.75rem;
	--sp-3: 1.125rem;
	--sp-4: 1.75rem;
	--sp-5: 2.75rem;
	--sp-6: 4rem;
	--sp-7: 6rem;

	--wrap: 74rem;
	--wrap-narrow: 44rem;
	--gutter: clamp(1.15rem, 4vw, 3rem);
	--radius: 2px;
	--speed: 180ms;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

img,
picture,
video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.012em;
	margin: 0 0 var(--sp-3);
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

.on-dark :focus-visible { outline-color: var(--sand); }

::selection { background: var(--sand-deep); }

.skip-link {
	position: absolute;
	left: var(--sp-2);
	top: -4rem;
	z-index: 100;
	background: var(--ink);
	color: var(--ivory);
	padding: var(--sp-2) var(--sp-3);
	text-decoration: none;
	transition: top var(--speed);
}
.skip-link:focus { top: var(--sp-2); }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */

.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); }

.section { padding-block: clamp(var(--sp-6), 8vw, var(--sp-7)); }
.section--tight { padding-block: var(--sp-6); }
.section--sand { background: var(--sand); }
.section--rule { border-top: 1px solid var(--line); }

.section__head { max-width: 46rem; margin-bottom: var(--sp-5); }
.section__head p { color: var(--ink-soft); font-size: var(--step-1); }

.eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-2);
}

.rule {
	width: 3.5rem;
	height: 1px;
	background: var(--accent-quiet);
	border: 0;
	margin: var(--sp-3) 0;
}

.lede { font-size: var(--step-1); color: var(--ink-soft); }

/* ── Cabecera y navegación ──────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--ivory) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(6px);
	border-bottom: 1px solid var(--line);
}

/* Cabecera a pantalla completa: ignora el tope de .wrap y usa solo margen lateral. */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-height: 4.5rem;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--gutter);
}

.brand {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	margin-right: auto;
}
.brand__name {
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 0.22em;
	text-indent: 0.22em;
}
.brand__sub {
	font-size: 0.62rem;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 0.3rem;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: inherit;
	font: inherit;
	font-size: var(--step--1);
	padding: 0.55rem 0.85rem;
	cursor: pointer;
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-2), 2vw, var(--sp-4));
}

.nav ul { list-style: none; display: flex; align-items: center; gap: clamp(var(--sp-2), 2vw, var(--sp-4)); margin: 0; padding: 0; }

.nav a {
	text-decoration: none;
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 0.4rem;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}
.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--accent); }
.nav .current-menu-item > a,
.nav [aria-current="page"] { border-bottom-color: var(--accent); }

/* Único punto de contacto directo en escritorio: en móvil ya lo cubre la
   barra de acciones rápidas del pie, así que aquí se retira. */
.nav__phone {
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
}
.nav__phone:hover,
.nav__phone:focus-visible { border-bottom-color: var(--accent); }

/* Menú de soluciones: CSS puro, abierto por hover y por foco. */
.has-panel { position: relative; }

.panel {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	width: min(20rem, 90vw);
	background: var(--white);
	border: 1px solid var(--line);
	padding: var(--sp-2);
	display: none;
	box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.4);
}

.has-panel:hover > .panel,
.has-panel:focus-within > .panel { display: block; }

/* Sube especificidad para ganar a `.nav ul`, que centra y aplica gap grande. */
ul.panel__grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0 0 var(--sp-1);
	padding: 0;
	list-style: none;
}
.panel__grid li + li { border-top: 1px solid var(--line); }
.panel__grid a {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--step--1);
	display: block;
	padding: 0.55rem 0.6rem;
	border-bottom: 0;
	transition: background-color 0.12s ease;
}
.panel__grid a:hover,
.panel__grid a:focus-visible { background: var(--sand); border-bottom: 0; }
.panel__foot {
	border-top: 1px solid var(--line);
	margin-top: var(--sp-1);
	padding: var(--sp-2) 0.6rem 0.3rem;
	font-size: var(--step--1);
	color: var(--ink-soft);
}
.panel__foot a { text-transform: none; letter-spacing: 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--ivory);
	cursor: pointer;
	transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }

.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--sand); color: var(--ink); border-color: var(--accent-quiet); }

.on-dark .btn--ghost { color: var(--ivory); border-color: var(--sand); }
.on-dark .btn--ghost:hover { background: var(--ivory); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.link-more {
	display: inline-block;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--accent-quiet);
	padding-bottom: 2px;
}
.link-more:hover { border-bottom-color: var(--accent); }

/* ── Héroe ──────────────────────────────────────────────────────────────── */

/* Base compartida por los tres héroes (portada, familia, ficha): rejilla de
   dos columnas, texto e imagen. La portada la especializa .hero--bleed. */
.hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	align-items: center;
	padding-block: clamp(var(--sp-5), 6vw, var(--sp-7));
}

@media (min-width: 62rem) {
	.hero { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--sp-6); }
}

.hero__title { margin-bottom: var(--sp-3); }
.hero__text { max-width: 34rem; }
.hero__text p { color: var(--ink-soft); font-size: var(--step-1); }
.hero__actions { margin-top: var(--sp-4); margin-bottom: 0; }

.hero__media { position: relative; margin: 0; display: flex; flex-direction: column; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.hero__caption {
	font-size: var(--step--1);
	color: var(--ink-soft);
	margin-top: var(--sp-3);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--line);
}

/* ── Portada: composición del héroe ─────────────────────────────────────── */

/* Banda greige a sangre, a ras de la cabecera (portada = greige en los
   tokens). Es la sección más alta del sitio. */
.hero-band { background: var(--sand); }

/* Rejilla rígida: columna de texto estrecha y contenida contra un filete
   vertical a toda altura (el recurso de .pillars girado), y foto ancha que
   rompe la caja por la derecha. Nada flota: el texto se apoya en la línea. */
.hero--bleed { padding-block: clamp(var(--sp-6), 8vw, var(--sp-7)); }

.hero--bleed .eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: var(--sp-3);
}
.hero--bleed .eyebrow::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1px;
	background: var(--accent-quiet);
}

/* Tira de datos: cierra el bloque de texto sobre un filete. En columna con
   guión, mismo recurso que .list-check, para que no envuelva nunca. */
.hero__facts {
	display: grid;
	gap: 0.4rem;
	margin: var(--sp-4) 0 0;
	padding: var(--sp-2) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.hero__facts li { position: relative; padding-left: 1.5rem; }
.hero__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.8rem;
	height: 1px;
	background: var(--accent-quiet);
}

@media (min-width: 62rem) {
	.hero--bleed {
		grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}
	.hero--bleed .hero__text {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: none;
		padding-right: var(--sp-5);
		border-right: 1px solid var(--line);
	}
	/* Canalón entre el filete y la foto + sangrado hasta el borde del viewport. */
	.hero--bleed .hero__media {
		margin-left: clamp(var(--sp-5), 5vw, var(--sp-7));
		margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2));
	}
	/* La imagen estira a la altura de la columna de texto: sin aspect-ratio no
	   queda hueco arriba ni abajo. El mínimo cubre un texto corto. */
	.hero--bleed .hero__media img,
	.hero--bleed .hero__media .media__placeholder {
		aspect-ratio: auto;
		flex: 1;
		min-height: 30rem;
	}
	.hero--bleed .hero__caption {
		text-align: right;
		padding: 0 var(--gutter) 0 0;
		margin-top: var(--sp-2);
		border-top: 0;
	}
}

/* ── Rejillas y tarjetas ────────────────────────────────────────────────── */

.grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	height: 100%;
}

.card__media { overflow: hidden; background: var(--sand); }
.card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: scale var(--speed) ease-out;
}
.card:hover .card__media img { scale: 1.03; }

.card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.card__kicker { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.card__title { font-size: var(--step-1); margin: 0; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__text { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
.card__meta { margin-top: auto; padding-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); }

.card--link { position: relative; }
.card--link:hover { border-color: var(--accent-quiet); }
.card--link:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.media__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
	color: var(--ink-soft);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Contenido editorial ────────────────────────────────────────────────── */

.prose { max-width: 40rem; }
.prose h2 { margin-top: var(--sp-5); }
.prose h3 { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: var(--sp-1); }
.prose img { margin-block: var(--sp-4); }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.list-check li { padding-left: 1.6rem; position: relative; }
.list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.7rem;
	height: 1px;
	background: var(--accent-quiet);
}

.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.tag {
	font-size: var(--step--1);
	border: 1px solid var(--line);
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	color: var(--ink-soft);
	background: var(--white);
}

/* ── Migas de pan ───────────────────────────────────────────────────────── */

.breadcrumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--sp-3) 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--accent-quiet); }
.breadcrumbs li:last-child::after { content: none; }

/* ── Especificaciones y avisos ──────────────────────────────────────────── */

.specs { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); }
.specs caption { text-align: left; font-size: var(--step--1); color: var(--ink-soft); padding-bottom: var(--sp-2); }
.specs th,
.specs td { text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--step-0); }
.specs th { font-weight: 600; width: 42%; padding-right: var(--sp-3); }

.flag {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
	color: var(--warn-ink);
	border-radius: var(--radius);
	padding: 0.1rem 0.45rem;
	margin-left: 0.4rem;
	white-space: nowrap;
}

.notice {
	border-left: 3px solid var(--warn-line);
	background: var(--warn-bg);
	padding: var(--sp-3);
	font-size: var(--step--1);
	margin-bottom: var(--sp-4);
}
.notice--info { border-left-color: var(--accent-quiet); background: var(--sand); }
.notice--ok { border-left-color: var(--ok-line); background: var(--ok-bg); }
.notice--error { border-left-color: var(--error-line); background: var(--error-bg); }
.notice p:last-child { margin-bottom: 0; }
.notice:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.notice__fields { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.notice__fields a { font-size: var(--step--1); text-decoration-color: var(--error-line); }

.jomar-pending {
	background: var(--warn-bg);
	border-bottom: 1px dashed var(--warn-line);
	padding: 0 0.25rem;
	font-size: 0.92em;
	color: var(--warn-ink);
}

/* ── Acordeón nativo ────────────────────────────────────────────────────── */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
	cursor: pointer;
	padding: var(--sp-3) 2.5rem var(--sp-3) 0;
	font-size: var(--step-1);
	font-family: var(--font-display);
	position: relative;
	list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
	content: "+";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	translate: 0 -50%;
	font-family: var(--font-sans);
	font-size: 1.4rem;
	color: var(--accent);
}
.accordion details[open] summary::after { content: "–"; }
.accordion details > *:not(summary) { padding-bottom: var(--sp-3); max-width: 46rem; color: var(--ink-soft); }

/* ── Buscador de soluciones ─────────────────────────────────────────────── */

.finder { background: var(--sand); }
.finder fieldset { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
.finder legend { font-weight: 600; padding: 0; margin-bottom: var(--sp-2); font-size: var(--step-0); }

.choice-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: var(--white);
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	padding: 0.75rem 0.9rem;
	cursor: pointer;
	font-size: var(--step--1);
	transition: border-color var(--speed), background var(--speed);
}
.choice:hover { border-color: var(--accent-quiet); }
.choice input { margin: 0.22rem 0 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--white); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.results { margin-top: var(--sp-5); }
.results__why { font-size: var(--step--1); color: var(--ink-soft); }

/* ── Formulario ─────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--sp-3); }
.form__row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.field { display: grid; gap: 0.35rem; }
.field > label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
	font: inherit;
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	padding: 0.7rem 0.85rem;
	width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--accent); }
.field--error input,
.field--error textarea { border-color: var(--error-line); }
.field--error .hint,
.hint--error { color: var(--error-ink); }

.field--check { display: flex; align-items: flex-start; gap: 0.6rem; }
.field--check input { margin-top: 0.28rem; accent-color: var(--accent); }
.field--check label { font-weight: 400; font-size: var(--step--1); }

.form details summary { cursor: pointer; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.form details[open] { padding-bottom: var(--sp-2); }
.form details > .form__row { margin-top: var(--sp-3); }

.required { color: var(--accent); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Proceso ────────────────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--accent);
	margin-bottom: var(--sp-1);
}
.steps h2,
.steps h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 600; margin-bottom: var(--sp-1); }
.steps p { font-size: var(--step--1); color: var(--ink-soft); }

/* ── Bloque oscuro y pie ────────────────────────────────────────────────── */

.on-dark { background: var(--ink); color: var(--ivory); }
.on-dark h2, .on-dark h3 { color: var(--ivory); }
.on-dark p { color: color-mix(in srgb, var(--ivory) 82%, transparent); }
.on-dark .eyebrow { color: var(--accent-quiet); }
.on-dark .rule { background: var(--accent-quiet); }
.on-dark .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.on-dark .btn:hover { background: var(--accent-quiet); border-color: var(--accent-quiet); color: var(--ink); }

/* Cierre de sección: banda propia en color de marca, centrada, para que no
   se funda con el pie oscuro que va justo debajo. */
.cta { background: var(--accent); color: var(--ivory); text-align: center; }
.cta .wrap { max-width: 44rem; }
.cta h2 { color: var(--ivory); font-size: var(--step-3); }
.cta p { color: color-mix(in srgb, var(--ivory) 88%, transparent); }
.cta .rule { margin-inline: auto; background: var(--accent-quiet); }
.cta .btn-row { justify-content: center; }
.cta .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.cta .btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.cta .btn--ghost { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.cta .btn--ghost:hover { background: var(--ivory); color: var(--ink); }

.site-footer { background: var(--ink); color: var(--ivory); padding-block: var(--sp-6) var(--sp-4); }
/* El pie ocupa todo el ancho: como la cabecera, ignora el tope de .wrap. */
.site-footer > .wrap { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--gutter); }
.site-footer a { color: var(--ivory); }
.site-footer__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer h2 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__bottom {
	margin-top: var(--sp-5);
	padding-top: var(--sp-3);
	border-top: 1px solid color-mix(in srgb, var(--ivory) 22%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: space-between;
	font-size: var(--step--1);
}
.site-footer .jomar-pending { background: transparent; color: var(--sand); border-bottom-color: var(--accent-quiet); }

/* ── Acciones rápidas móviles ───────────────────────────────────────────── */

.quick-actions { display: none; }

/* ── Paginación y listados de artículos ─────────────────────────────────── */

.pagination { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--line);
	text-decoration: none;
	font-size: var(--step--1);
}
.pagination .current { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.empty-state {
	border: 1px dashed var(--line);
	background: var(--white);
	padding: var(--sp-5);
	text-align: center;
	color: var(--ink-soft);
}
.empty-state h2 { color: var(--ink); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* La nav de escritorio necesita ~1135px para caber con el CTA. */
@media (max-width: 72rem) {
	.site-header__inner { flex-wrap: wrap; }
	.nav-toggle { display: inline-flex; }
	.nav-toggle[hidden] { display: none; }
	.nav__phone { display: none; }

	/* Sin JS el botón se queda con su "hidden" del marcado (main.js es quien lo
	   retira), así que el menú nunca pasa a superposición fija: sigue en el
	   flujo normal, visible entero y sin necesitar un cierre que no existiría. */
	.nav {
		display: block;
		padding: var(--sp-3) var(--gutter) var(--sp-5);
	}
	.site-header:has(.nav-toggle:not([hidden])) .nav {
		position: fixed;
		inset: 4.5rem 0 auto;
		background: var(--ivory);
		border-bottom: 1px solid var(--line);
		max-height: calc(100dvh - 4.5rem);
		overflow-y: auto;
	}
	.nav[hidden] { display: none; }
	.nav ul { display: block; }
	.nav > ul > li { border-bottom: 1px solid var(--line); }
	.nav a { display: block; padding-block: var(--sp-3); font-size: var(--step-0); }
	.nav .btn { margin-top: var(--sp-3); width: 100%; }

	.panel {
		position: static;
		display: block;
		translate: none;
		width: auto;
		border: 0;
		box-shadow: none;
		padding: 0 0 var(--sp-3) var(--sp-3);
		background: transparent;
	}
	.panel__grid { gap: 0; }
	.panel__grid a { padding-block: var(--sp-2); font-size: var(--step--1); }
	.panel__foot { padding-top: var(--sp-2); }

	.quick-actions {
		position: sticky;
		bottom: 0;
		z-index: 40;
		display: flex;
		border-top: 1px solid var(--line);
		background: var(--white);
	}
	.quick-actions a,
	.quick-actions span {
		flex: 1;
		text-align: center;
		padding: 0.9rem 0.5rem;
		font-size: var(--step--1);
		text-decoration: none;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.quick-actions a + a,
	.quick-actions span + a,
	.quick-actions a + span { border-left: 1px solid var(--line); }
	.quick-actions .is-primary { background: var(--ink); color: var(--ivory); }
}

@media (max-width: 40rem) {
	.specs th, .specs td { display: block; width: auto; padding-block: 0.25rem; border: 0; }
	.specs th { padding-top: var(--sp-2); }
	.specs td { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); color: var(--ink-soft); }
}

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

@media print {
	.site-header, .site-footer, .quick-actions, .btn { display: none !important; }
	body { background: #fff; }
}

/* ── Ritmo de portada ───────────────────────────────────────────────────── */

/* Titular de portada: la pieza tipográfica más grande del sitio. Interlineado
   casi macizo y tracking negativo para que pese como un rótulo, no como texto. */
.hero__title--xl {
	font-size: clamp(2.5rem, 1.4rem + 3.4vw, 3.9rem);
	line-height: 1.05;
	letter-spacing: -0.022em;
	margin-bottom: var(--sp-4);
}

/* Mosaico a sangre completa: la única sección sin márgenes del sitio. */
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.bleed-grid {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.bleed-grid figure { margin: 0; }
.bleed-grid img,
.bleed-grid .media__placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 62rem) {
	.bleed-grid > *:first-child { grid-column: span 2; }
	.bleed-grid > *:first-child img,
	.bleed-grid > *:first-child .media__placeholder { aspect-ratio: 8 / 3; }
}

/* Pilares: filete lateral y titular grande. Deliberadamente distintos de las
   tarjetas del catálogo y de los pasos numerados del proceso. */
.pillars {
	display: grid;
	gap: var(--sp-5) var(--sp-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pillars > div { border-left: 1px solid var(--line); padding-left: var(--sp-3); }
.pillars h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.pillars p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

/* ── Ficha: orden de lectura en móvil ───────────────────────────────────── */

/* Cuando la ficha se apila en una sola columna, las características van
   antes que el texto largo: son lo que se compara entre modelos. */
@media (max-width: 41rem) {
	.detail__specs { order: -1; }
}

/* ── Buscador con resultados en vivo ────────────────────────────────────── */

.results[aria-busy="true"] { opacity: 0.45; transition: opacity var(--speed); }
.results:not(:has(*)) { margin-top: 0; }   /* :empty no vale: el div lleva espacios */

/* «Empezar de nuevo» solo tiene sentido con algo marcado. */
.finder form:not(:has(input:checked:not(.is-default))) .finder__reset { display: none; }
/* Editorial premium: contraste, proporción y espacio sin dependencias. */
:root { --ivory:#f7f5ef; --sand:#eee9df; --ink:#242923; --ink-soft:#555b53; --accent:#716044; }
.site-header { background:var(--ivory); backdrop-filter:none; }
.site-header__inner { min-height:5.25rem; }
.brand__name { font-size:1.8rem; }
.nav a { letter-spacing:.055em; font-size:.76rem; }
.nav .btn { padding:.8rem 1.1rem; }
.btn { min-height:48px; letter-spacing:.055em; }
[id] { scroll-margin-top:6.5rem; }
.premium-hero { background:var(--ivory); overflow:hidden; }
.premium-hero .hero--bleed { padding-block:3.5rem 2.5rem; }
.premium-hero .hero__text { border:0; padding-right:2.4rem; }
.premium-hero .hero__title { font-size:clamp(2.7rem,4.2vw,4.5rem); line-height:1.03; letter-spacing:-.035em; }
.premium-hero .hero__title em { font-style:normal; color:var(--accent); }
.premium-hero .hero__text > p { font-size:1.05rem; max-width:29rem; }
.premium-hero .hero__actions { align-items:flex-start; flex-direction:column; gap:1.25rem; }
.premium-hero .hero__signature { margin:2.4rem 0 0; padding-top:1rem; border-top:1px solid var(--line); font-size:.8rem !important; }
.premium-hero .hero__media { margin-left:1rem; }
.premium-hero .hero__media img { min-height:0; height:100%; max-height:40rem; object-position:50% 50%; }
.premium-hero .hero__caption { display:flex; justify-content:space-between; gap:1rem; text-align:left; font-size:.66rem; letter-spacing:.05em; padding-top:.75rem; }
.trust-strip { border-block:1px solid var(--line); }
.trust-strip .wrap { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-strip p { margin:0; padding:1.6rem 2rem; display:flex; flex-direction:column; gap:.3rem; }
.trust-strip p:first-child { padding-left:0; }
.trust-strip p + p { border-left:1px solid var(--line); }
.trust-strip strong { font-family:var(--font-display); font-size:1.8rem; font-weight:400; }
.trust-strip span { color:var(--ink-soft); font-size:.8rem; }
.editorial-split { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.editorial-split h2 { font-size:clamp(2.4rem,4vw,3.7rem); }
.collection__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.5rem; }
.collection .card { background:transparent; border:0; }
.collection .card__media img { aspect-ratio:5/4; }
.collection .card__body { padding:1.2rem 0 0; }
.collection .card__kicker { font-size:.67rem; letter-spacing:.09em; }
.collection .card__title { font-size:1.65rem; padding-right:1.3rem; }
.collection .card__title a::before { content:'↗'; position:absolute; right:0; font-family:var(--font-sans); font-size:1rem; }
.collection .card__meta { font-size:.76rem; padding-top:.4rem; }
.collection__more { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.collection__more p { color:var(--ink-soft); font-size:.85rem; }
.collection__links { display:flex; flex-wrap:wrap; gap:.7rem 2rem; padding:0; list-style:none; margin:0; }
.collection__links a { display:inline-block; padding:.5rem 0; text-decoration:none; border-bottom:1px solid var(--accent-quiet); }
.heritage { background:#26352e; }
.heritage .prose p { color:#e2e4d9; }
.heritage .link-more { color:var(--ivory); }
.heritage .eyebrow { color:#d1b88f; }
.heritage h2 { color:var(--ivory); }
.cta h2 { font-size:clamp(2.5rem,4vw,3.8rem); }
.form > details { margin-block:1.5rem; }
.form > details > summary { cursor:pointer; padding:.7rem 0; }
@media (min-width:62rem) { .premium-hero .hero--bleed { grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); } }
@media (max-width:72rem) {
 .site-header:has(.nav-toggle:not([hidden])) .nav { inset:5.25rem 0 auto; max-height:calc(100dvh - 5.25rem); }
 .nav a { font-size:.95rem; }
 .quick-actions { padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:62rem) {
 .premium-hero .hero__text { max-width:42rem; padding-right:0; }
 .premium-hero .hero__title { max-width:15ch; }
 .premium-hero .hero__media { margin:0; }
 .premium-hero .hero__media img { height:auto; aspect-ratio:16/10; }
 .premium-hero .hero__actions { flex-direction:row; align-items:center; }
 .collection__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:40rem) {
 .premium-hero .hero--bleed { padding-top:2.5rem; gap:2rem; }
 .premium-hero .hero__title { font-size:2.75rem; }
 .premium-hero .hero__caption { flex-direction:column; gap:.15rem; }
 .trust-strip p { padding:1.1rem .8rem; }
 .trust-strip strong { font-size:1.25rem; }
 .trust-strip span { font-size:.69rem; line-height:1.45; }
 .editorial-split { grid-template-columns:1fr; gap:1.5rem; }
 .collection__grid { grid-template-columns:1fr; gap:2rem; }
 .collection .card__media img { aspect-ratio:4/3; }
 .collection__links { gap:.5rem 1.2rem; }
}
.contact-direct { margin-top:1.25rem; }
.section__head .contact-direct { font-size:1rem; }
.contact-direct a { display:inline-block; padding:.5rem 0; }
@media (max-width:24rem) { .hero__actions .btn { width:100%; padding-inline:.8rem; font-size:.75rem; } }