/*!
Theme Name:  skldstudio
Theme URI:   https://garate.design
Author:      garate.design
Author URI:  https://garate.design
Description: Theme a medida para skld. (c) 2026 garate.design. Uso exclusivo skld.com. Ver LICENCIA.txt.
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     Proprietary
License URI: LICENCIA.txt
Text Domain: skldstudio
Tags:        custom-logo, custom-menu, featured-images, translation-ready

(c) 2026 garate.design. Todos los derechos reservados.
Este theme es propiedad intelectual exclusiva de garate.design.
Uso autorizado únicamente para skld en el dominio skld.com.
Ver LICENCIA.txt en la raíz del theme.
*/

/*
 * CSS View Transitions API (R10 · refinada 2026-04-17)
 * Transiciones cross-document entre páginas (MPA View Transitions).
 * Objetivo: elegancia y agilidad. Fade corto (150/220ms), sin translate
 * para evitar jitter en el paint. Header, footer y logo persisten como
 * shared elements entre páginas.
 * Requiere Speculation Rules activas (inc/skld-speculation.php) para
 * que la página destino esté precargada cuando arranca la transición.
 * Respeta prefers-reduced-motion.
 */
@view-transition {
	navigation: auto;
}

/* Página saliente: fade-out ágil */
::view-transition-old(root) {
	animation: vt-fade-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Página entrante: fade-in puro (sin translate → sin jitter en el paint real) */
::view-transition-new(root) {
	animation: vt-fade-in 220ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes vt-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes vt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Backdrop piedra para evitar flash blanco entre páginas */
::view-transition-group(root) {
	background: var(--piedra-background, #f1ede6);
}

/* Shared elements: persisten entre navegaciones (no hacen fade).
   Header fijo, footer y logo mantienen su presencia → sensación de
   "un solo lienzo" en vez de parpadeo de capas. */
#masthead.site-header {
	view-transition-name: skld-header;
}
#colophon.site-footer {
	view-transition-name: skld-footer;
}
.site-branding .site-logo__img {
	view-transition-name: skld-logo;
}

/* Duración casi imperceptible para los shared elements: su diferencia
   entre páginas es mínima (quizá aria-current en un link). */
::view-transition-group(skld-header),
::view-transition-group(skld-footer),
::view-transition-group(skld-logo) {
	animation-duration: 120ms;
}

/* Shared element transitions: product/collection/designer images "fly"
   between list and detail pages. Dynamic names set via PHP inline style. */
[style*="view-transition-name: prod-"],
[style*="view-transition-name: col-"],
[style*="view-transition-name: dis-"] {
	contain: layout paint;
}

/* Fallback para navegadores sin soporte VT (Firefox, Safari <18.2):
   micro-fade al body al aparecer la página. Elegante y no bloqueante. */
@supports not (view-transition-name: none) {
	body {
		animation: vt-fallback-in 220ms ease-out both;
	}
	@keyframes vt-fallback-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	@supports not (view-transition-name: none) {
		body { animation: none; }
	}
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design Tokens
--------------------------------------------------------------*/

:root {
	/* Colors */
	--negrotexto-background: #010102;
	--negrotitulares-background: #1d1d1b;
	--piedra-background: #f1ede6;
	--arena-background: #dcc3aa;
	--terracota-background: #d6aa86;
	--blanco-background: #ffffff;
	--mantequilla-background: #ffeccc;
	--gris-background: #dedbd5;

	/* Typography — from Figma */
	--font-header-nav: 0.875rem;        /* 14px */
	--lh-header-nav: 1rem;              /* 16px */
	--ls-header-nav: -0.02em;           /* -0.28px */

	--font-menu-section: 1.5rem;        /* 24px */
	--lh-menu-section: 1.5rem;          /* 24px */
	--ls-menu-section: -0.04em;         /* -0.96px */

	--font-menu-page: 2rem;             /* 32px */
	--lh-menu-page: 2rem;               /* 32px */
	--ls-menu-page: -0.04em;            /* -1.28px */

	--font-body-16: 1rem;               /* 16px */
	--lh-body-16: 1.5rem;               /* 24px */
	--ls-body-16: -0.02em;              /* -0.32px */

	--font-body-12: 0.75rem;            /* 12px */
	--lh-body-12: 1rem;                 /* 16px */
	--ls-body-12: -0.02em;              /* -0.24px */

	--font-quote: 3.5rem;               /* 56px */
	--lh-quote: 4.25rem;                /* 68px */
	--ls-quote: -0.04em;

	--font-heading-72: 4.5rem;          /* 72px */
	--lh-heading-72: 4.5rem;
	--ls-heading-72: -0.04em;

	--font-heading-64: 4rem;            /* 64px */
	--lh-heading-64: 4rem;
	--ls-heading-64: -0.04em;

	--font-heading-48: 3rem;            /* 48px */
	--lh-heading-48: 3rem;
	--ls-heading-48: -0.04em;

	--font-body-18: 1.125rem;           /* 18px */
	--lh-body-18: 1.5rem;
	--ls-body-18: -0.02em;

	--font-heading-24: 1.5rem;          /* 24px */
	--lh-heading-24: 2rem;              /* 32px */
	--ls-heading-24: -0.04em;

	--font-body-20: 1.25rem;            /* 20px */
	--lh-body-20: 2rem;                 /* 32px */
	--ls-body-20: -0.02em;

	--font-body-24-italic: 1.5rem;      /* 24px */
	--lh-body-24-italic: 2rem;          /* 32px */
	--ls-body-24-italic: -0.02em;

	--font-label-slider: 1.5rem;        /* 24px */
	--lh-label-slider: 1.5rem;
	--ls-label-slider: -0.04em;

	/* Spacing */
	--space-page: 3rem;                 /* 48px — main content padding */
	--space-header: 1.5rem;             /* 24px — header inline padding */
	--header-height: 4rem;              /* 64px desktop — altura del header fijo. Override mobile abajo. */

	/* Motion tokens — design-identity v1.0 */
	--motion-instant:    100ms;
	--motion-fast:       200ms;
	--motion-default:    300ms;
	--motion-slow:       500ms;
	--motion-deliberate: 700ms;

	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in:      cubic-bezier(0.4, 0, 1, 1);
	--ease-out:     cubic-bezier(0, 0, 0.2, 1);
	--ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

	--motion-distance: 24px;
	--motion-stagger:  80ms;

	accent-color: var(--negrotitulares-background);
}

@media (max-width: 767px) {
	:root {
		--header-height: 3.5rem;        /* 56px mobile — Figma 375 */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-default: var(--motion-instant);
		--motion-slow: var(--motion-instant);
		--motion-deliberate: var(--motion-instant);
		--motion-distance: 0px;
	}
}

/*--------------------------------------------------------------
# Typography — Inter Variable (self-hosted)
--------------------------------------------------------------*/

@font-face {
	font-family: 'Inter';
	src: url('fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	size-adjust: 107%;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/InterVariable-Italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	size-adjust: 107%;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	scroll-padding-top: calc(var(--header-height) + 1rem);
	scrollbar-gutter: stable;
}

/* Smooth scroll nativo en mobile/tablet (Lenis solo activo en desktop ≥1024 + pointer:fine) */
@media not all and (min-width: 64em) and (pointer: fine) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Premium UX polish — eliminar artefactos visuales de interacción */
*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent;
}

a,
button,
[role="button"],
input[type="submit"],
select,
label,
summary {
	cursor: pointer;
	-webkit-touch-callout: none;
}

img,
video,
svg {
	-webkit-user-drag: none;
	user-select: none;
}

/* Backface visibility — prevenir flicker en transiciones/transforms */
.home-hero,
.home-hero__bg,
.home-hero__logo,
.prod-card__image img,
.products-slider__card-image img,
.single-col__gallery-item img,
.single-dis__gallery-item img,
.col-card__image img,
.dis-card__image img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--negrotexto-background);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	text-wrap: balance;
}

p {
	margin-bottom: 1.5em;
	text-wrap: pretty;
}

::selection {
	background: var(--negrotitulares-background);
	color: var(--piedra-background);
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--blanco-background);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--negrotexto-background);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent white space below footer — stubborn 24px from WP/plugin */
body {
	margin: 0 !important;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--negrotitulares-background);
}

a:visited {
	color: var(--negrotitulares-background);
}

a:hover,
a:focus,
a:active {
	color: var(--negrotitulares-background);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.prod-card:focus-visible,
.col-card:focus-visible,
.dis-card:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 3px;
	border-radius: inherit;
}

a:hover,
a:active {
	outline: 0;
}

/* Embla carousels — global cursor drag/grab.
   Cualquier elemento [data-embla] es arrastrable → cursor grab, grabbing en :active. */
[data-embla] {
	position: relative;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}

[data-embla]:active {
	cursor: grabbing;
}

/* ── Embla arrows (optional, injected via JS when data-arrows present) ── */

.embla-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--motion-default) var(--ease-default);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	pointer-events: none;
}

.is-interacting > .embla-arrow {
	opacity: 1;
	pointer-events: auto;
}

.embla-arrow--prev {
	left: 0.75rem;
}

.embla-arrow--next {
	right: 0.75rem;
}

.embla-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.is-interacting > .embla-arrow:disabled {
	opacity: 0.25;
}

.embla-arrow:focus-visible {
	opacity: 1;
	pointer-events: auto;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.embla-arrow svg {
	width: 3rem;
	height: 3rem;
	fill: currentColor;
}

.embla-arrow--mobile-only {
	display: flex;
}

@media (min-width: 48em) {
	.embla-arrow--mobile-only {
		display: none;
	}
}

/* Animated underline — background-image grow L→R.
   3 invariantes:
   1. Grosor ∝ font-weight → --ul-h en em (bold más grueso)
   2. Offset ∝ font-size → padding-bottom en em
   3. Extensión = texto exacto en CADA línea (box-decoration-break: clone)

   Técnica: background linear-gradient como underline. background-size
   transiciona de 0% a 100% (grow izquierda→derecha). Con
   box-decoration-break: clone, cada línea de texto tiene su propio
   underline que crece independientemente. */

/* ── Sin borde por defecto: hover aparece desde izquierda, mouseout sale por derecha ── */
.megamenu__sections a,
.site-footer a,
.archive-productos__filters a,
.single-dis__collections-item a {
	--ul-h: max(1px, 0.055em);
	text-decoration: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: linear-gradient(currentColor, currentColor) no-repeat right bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.megamenu__sections a:hover,
.megamenu__sections a:focus,
.megamenu__sections a:active,
.megamenu__sections a.is-active,
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active,
.archive-productos__filters a:hover,
.archive-productos__filters a:focus,
.archive-productos__filters a:active,
.archive-productos__filters a.is-active,
.single-dis__collections-item a:hover,
.single-dis__collections-item a:focus,
.single-dis__collections-item a:active {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

/* ── Swipe-through: links con underline por defecto ──
   Normal: línea visible (100%, left). Hover: sale por la derecha (0%, right).
   Mouseout: vuelve desde la izquierda (0%→100%, left). Solo background-size
   transiciona; background-position cambia instantáneamente. */

/* Italic (400): designer name links */
.home-designer__label a,
.home-designer__link,
.products-slider__link,
.single-col__designer-top a,
.single-prod__designer-top a,
.single-dis__designer-top a,
.single-dis__portfolio {
	--ul-h: max(1px, 0.055em);
	letter-spacing: normal;
	text-decoration: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 100% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.home-designer__label a:hover,
.home-designer__label a:focus,
.home-designer__label a:active,
.home-designer__link:hover,
.home-designer__link:focus,
.home-designer__link:active,
.products-slider__link:hover,
.products-slider__link:focus,
.products-slider__link:active,
.single-col__designer-top a:hover,
.single-col__designer-top a:focus,
.single-col__designer-top a:active,
.single-prod__designer-top a:hover,
.single-prod__designer-top a:focus,
.single-prod__designer-top a:active,
.single-dis__designer-top a:hover,
.single-dis__designer-top a:focus,
.single-dis__designer-top a:active,
.single-dis__portfolio:hover,
.single-dis__portfolio:focus,
.single-dis__portfolio:active {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}

/* Bold (600): download / CTA underline links */
.single-prod__download,
.home-cta__button,
.cta-catalogo__button,
.area-b2b__link,
.contacto__submit {
	--ul-h: max(1px, 0.07em);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 100% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.single-prod__download:hover,
.single-prod__download:focus,
.single-prod__download:active,
.home-cta__button:hover,
.home-cta__button:focus,
.home-cta__button:active,
.cta-catalogo__button:hover,
.cta-catalogo__button:focus,
.cta-catalogo__button:active,
.area-b2b__link:hover,
.area-b2b__link:focus,
.area-b2b__link:active,
.contacto__submit:hover,
.contacto__submit:focus,
.contacto__submit:active {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}

/* ── Semi Bold (600): megamenu items (colecciones/diseñadores) ──
   El ancla es un flex item (blockified), así que el background-image al `bottom`
   se pinta solo debajo del bloque completo (una línea al fondo, aunque el texto
   tenga wrap). Solución moderna: aplicar el underline a un span INLINE dentro
   del ancla con `box-decoration-break: clone` → cada fragmento (cada línea) tiene
   su propio background anclado a su `left bottom`. Resultado: subrayado en cada
   línea del texto, crece L→R en hover/focus/activo. */
.megamenu__item {
	text-decoration: none;
	display: inline-block;               /* el ancla sólo ocupa el ancho de su contenido → underline = texto */
}

.megamenu__item-text {
	--ul-h: max(1px, 0.07em);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: linear-gradient(currentColor, currentColor) no-repeat right bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.12em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.megamenu__item:hover .megamenu__item-text,
.megamenu__item:focus .megamenu__item-text,
.megamenu__item:active .megamenu__item-text,
.megamenu__item.is-active .megamenu__item-text {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

@media (prefers-reduced-motion: reduce) {
	.megamenu__sections a,
	.megamenu__item-text,
	.products-slider__link,
	.site-footer a,
	.archive-productos__filters a,
	.single-dis__collections-item a,
	.single-dis__portfolio {
		transition: none;
	}
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--negrotitulares-background);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--negrotexto-background);
	-webkit-box-shadow: 0 0 0 1000px var(--piedra-background) inset;
	transition: background-color 5000s ease-in-out 0s;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header — fixed, logo left, nav right
--------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 1.5rem;                 /* 24px — alineado con padding izquierdo de titulos de página */
	height: 4rem;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: none;
	/* Transición premium: curva material "emphasized easing". Rápido pero suave (ágil). */
	transition: background-color var(--motion-default) var(--ease-out),
	            backdrop-filter var(--motion-default) var(--ease-out),
	            -webkit-backdrop-filter var(--motion-default) var(--ease-out);
}

/* `.scrolled` se activa cuando el usuario baja >90px (IntersectionObserver en navigation.js).
   Enfoque glassy moderno: rgba blanco translúcido + saturate/blur. Los navegadores sin
   backdrop-filter reciben el background sólido sin degradación visual mayor. */
.site-header.scrolled {
	background-color: rgba(255, 255, 255, 1);
}

/* Body offset for fixed header — 0 en todas las páginas.
   El header es transparente y flota sobre el contenido (mismo comportamiento
   que home). Cada página decide si el primer elemento queda parcialmente
   cubierto por el header o si añade su propio padding-top. */
.site {
	padding-top: 0;
}

/* Branding — left */
.site-branding {
	flex-shrink: 0;
}

/* Logo a11y — touch target ≥44px (padding virtual sin afectar layout visual) */
.site-logo {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                   /* 44px WCAG tap target */
	padding-block: 0.75rem;                /* 12px arriba y abajo: amplia touch area */
	margin-block: -0.75rem;                /* compensa para no desplazar layout */
}

.site-branding .custom-logo {
	max-height: 2rem;
	width: auto;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.site-title a {
	color: var(--negrotitulares-background);
	text-decoration: none;
}

.site-title a:hover {
	color: #555;
}

.site-description {
	display: none;
}

/* Right side — nav + lang + hamburger */
.site-header__right {
	display: flex;
	align-items: center;
	gap: 2rem;
}

/* Navigation */
.main-navigation ul {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                    /* 44px WCAG tap target */
	padding-block: 0.75rem;                 /* 12px — amplia touch area sin romper visual */
	margin-block: -0.75rem;                 /* compensa padding para no desplazar layout del nav */
	font-size: var(--font-header-nav);
	font-weight: 400;
	letter-spacing: var(--ls-header-nav);
	text-transform: none;
	text-decoration: none;
	color: var(--negrotitulares-background);
	transition: color var(--motion-fast) var(--ease-default);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--negrotexto-background);
}

/* Language switcher */
.language-switcher ul {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.language-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;                    /* 44px WCAG */
	min-height: 2.75rem;                   /* 44px WCAG */
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #595959;                        /* 7:1 contrast vs white — WCAG AA (antes #999 fallaba 2.85:1) */
	padding: 0.25rem 0.35rem;
	margin: -0.75rem -0.25rem;             /* compensa para no romper layout header */
	transition: color var(--motion-fast) var(--ease-default);
}

.language-switcher .current-lang a {
	color: var(--negrotitulares-background);
}

.language-switcher a:hover {
	color: var(--negrotitulares-background);
}

/* Live Search
---------------------------------------------- */
/* Search deshabilitado para visitantes — reservado para futuro.
   Para reactivar: quitar display:none aquí y en .megamenu__search,
   y desomentar wp_enqueue_script('skld-search') en functions.php. */
.site-search {
	display: none;
}

.site-search__toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.75rem;                       /* 12px → 26 icon + 24 padding = 50 ≥44 WCAG */
	margin: -0.75rem;                       /* compensa para no afectar layout visual */
	min-width: 2.75rem;                     /* 44px WCAG */
	min-height: 2.75rem;
	color: var(--negrotitulares-background);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--motion-fast) var(--ease-default);
}

.site-search__toggle:hover {
	color: #555;
}

.search-open .site-search__toggle {
	display: none;
}

.site-search__form {
	display: none;
	align-items: center;
	background: var(--piedra-background);
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0 0.5rem;
	gap: 0.4rem;
	transition: border-color var(--motion-fast) var(--ease-default);
}

.search-open .site-search__form {
	display: flex;
}

.site-search__form:focus-within {
	border-color: var(--negrotexto-background);
	background: var(--blanco-background);
}

/* Lupa icon inside the input */
.site-search__form::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
}

/* Spinner replaces the lupa when loading */
.search-loading .site-search__form::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23999' stroke-width='2' fill='none' stroke-dasharray='31.4' stroke-dashoffset='10'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
}

.site-search__input {
	font-family: inherit;
	font-size: 0.875rem;
	padding: 0.45rem 0;
	border: none;
	background: transparent;
	width: 200px;
	outline: none;
	-webkit-appearance: none;
}

/* Hide browser-native clear button on search inputs */
.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.site-search__close {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	color: #999;
	padding: 0.15rem 0.1rem;
	line-height: 1;
	transition: color var(--motion-fast) var(--ease-default);
}

.site-search__close:hover {
	color: var(--negrotitulares-background);
}

/* Dropdown */
.site-search__results {
	position: absolute;
	top: 100%;
	right: 0;
	width: 360px;
	max-height: 400px;
	overflow-y: auto;
	background: var(--blanco-background);
	border: 1px solid #e5e5e5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	margin-top: 0.5rem;
}

.site-search__group-label {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #999;
	padding: 0.75rem 1rem 0.25rem;
}

.site-search__item {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--negrotitulares-background);
	text-decoration: none;
	transition: background-color var(--motion-instant) var(--ease-default);
}

.site-search__item:hover,
.site-search__item.is-active {
	background-color: var(--piedra-background);
}

.site-search__item-title {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
}

.site-search__item-meta {
	display: block;
	font-size: 0.75rem;
	color: #888;
	margin-top: 0.15rem;
}

.site-search__item mark {
	background: #fef3c7;
	color: inherit;
	padding: 0;
}

.site-search__empty {
	padding: 1rem;
	font-size: 0.875rem;
	color: #888;
	text-align: center;
}

.site-search__view-all {
	display: block;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	color: #555;
	text-decoration: none;
	border-top: 1px solid #e5e5e5;
	text-align: center;
}

.site-search__view-all:hover {
	background-color: var(--piedra-background);
	color: var(--negrotitulares-background);
}

/* Mobile */
@media screen and (max-width: 47.99em) {
	.site-search {
		position: static;
	}

	.site-search__toggle {
		order: -1;
	}

	.search-open .site-search__form {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 4rem;
		background: var(--blanco-background);
		border: none;
		border-bottom: 1px solid #ddd;
		border-radius: 0;
		padding: 0 1rem;
		z-index: 1001;
		display: flex;
		align-items: center;
	}

	.search-open .site-search__input {
		width: 100%;
		flex: 1;
		font-size: 1rem;
	}

	.site-search__results {
		position: fixed;
		top: 4rem;
		left: 0;
		right: 0;
		width: auto;
		max-height: calc(100vh - 4rem);
	}

	/* Hide hamburger when search is open */
	.search-open .menu-toggle {
		display: none;
	}
}

/* Hamburger — visible on all viewports, 2 lines (Figma spec: 32×8px) */
.menu-toggle {
	display: flex;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.75rem 0.5rem;
	width: 3.5rem;
	height: 2.75rem;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 7px;
	margin: -0.5rem;
}

.menu-toggle span {
	display: block;
	height: 1px;
	background: var(--negrotitulares-background);
	border-radius: 0;
	transition: transform var(--motion-default) var(--ease-default), opacity var(--motion-fast) var(--ease-default);
}

/* Hamburger → X animation when megamenu is open */
.megamenu-open .menu-toggle span:nth-child(1) {
	transform: translateY(4px) rotate(30deg);
}

.megamenu-open .menu-toggle span:nth-child(2) {
	transform: translateY(-4px) rotate(-30deg);
}

/* ── Mobile (< 768px) ── */
@media screen and (max-width: 47.99em) {

	/* Hide inline nav + lang on mobile — only visible in megamenu */
	.main-navigation,
	.language-switcher {
		display: none;
	}

	.site-header {
		height: 3.5rem;                    /* 56px — Figma D-00 HOME 375px (222:...) mobile menu */
		/* padding-inline heredado de la regla base (24px) — alineado con titulos de página */
	}

	/* Mobile: padding-top ya es 0 en base — el header transparente flota sobre
	   el contenido. No se requiere override. */

	/* Hide header search on mobile — available in megamenu */
	.site-search {
		display: none;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Search results page
---------------------------------------------- */
.site-main--search {
	max-width: 100%;
}

.search-count {
	font-size: 0.85rem;
	color: #888;
	margin: 0.25rem 0 1.5rem;
}

/* Search results — row-based data layout
---------------------------------------------- */
.search-result {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.75rem 0;
}

.search-result__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: block;
	background: var(--piedra-background);
}

.search-result__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.search-result__body {
	flex-shrink: 0;
	min-width: 140px;
}

.search-result__type {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #999;
	line-height: 1;
	margin-bottom: 0.2rem;
}

.search-result__title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-decoration: none;
	line-height: 1.3;
}

.search-result__title:hover {
	color: #555;
}

.search-result__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	flex: 1;
	min-width: 0;
}

.search-result__field {
	font-size: 0.8rem;
	color: #555;
	white-space: nowrap;
}

.search-result__field strong {
	color: #999;
	font-weight: 500;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.search-result__img-count--zero {
	color: #c0392b;
}

.search-result__separator {
	border: none;
	border-top: 1px solid #eee;
	margin: 0;
}

@media screen and (max-width: 47.99em) {
	.search-result {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	.search-result__thumb {
		width: 48px;
		height: 48px;
	}

	.search-result__body {
		min-width: 0;
		flex: 1;
	}

	.search-result__fields {
		width: 100%;
		gap: 0.25rem 1rem;
	}
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# SKLD CPT — Classless styles
# Scoped via WP auto-generated body classes.
# All templates use semantic HTML, zero custom classes.
--------------------------------------------------------------*/

/* Layout base */
#primary {
	max-width: 72rem;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	padding-top: calc(2rem + var(--header-height));  /* offset por header fijo transparente */
}

/* Home page: full-width, no constraints, reset inherited styles.
   Uses #primary.home-main to beat the #primary ID specificity. */
#primary.home-main {
	max-width: none;
	padding: 0;
	margin: 0;
	overflow-x: clip;
}

/* Reset inherited typography/spacing for home sections */
#primary.home-main p {
	margin-bottom: 0;
}

#primary.home-main h1,
#primary.home-main h2,
#primary.home-main h3 {
	clear: none;
	margin: 0;
}

/* Reset genérico del home — excluye componentes con su propio esquema de
   color. El CTA Catálogo (.cta-catalogo__button) debe mantener el blanco
   sobre imagen oscura definido en su propia regla (ver ~línea 6811). */
#primary.home-main a:not(.cta-catalogo__button):not(.home-cta__button) {
	color: inherit;
	text-decoration: none;
}

#primary.home-main a:not(.cta-catalogo__button):not(.home-cta__button):visited {
	color: inherit;
}

#primary.home-main blockquote {
	margin: 0;
}

#primary.home-main ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary.home-main address {
	margin: 0;
	font-style: normal;
}

#primary.home-main figure {
	margin: 0;
}

/* Breadcrumbs — always below fixed header */
.breadcrumbs {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	padding-top: calc(0.75rem + var(--header-height));  /* offset por header fijo transparente */
}

/* Si las breadcrumbs existen, #primary pierde el offset (ya lo absorbió breadcrumbs). */
.breadcrumbs + #primary {
	padding-top: 2rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	color: #999;
}

.breadcrumbs li + li::before {
	content: "/";
	margin: 0 0.5rem;
	color: #ccc;
}

.breadcrumbs a {
	color: #888;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--negrotexto-background);
}

/* --- Single CPTs: shared --- */

.single-producto article,
.single-coleccion article,
.single-disenador article,
.single-proyecto article {
	max-width: 52rem;
	margin: 0 auto;
}

.single-coleccion article > figure:first-of-type {
	margin: 0 -1.5rem 2rem;
}

.single-coleccion article > figure:first-of-type img {
	width: 100%;
	height: auto;
	display: block;
}

.single-disenador article > figure:first-of-type {
	margin: 0 0 2rem;
}

.single-disenador article > figure:first-of-type img {
	max-width: 14rem;
	border-radius: 50%;
}

/* Header / title */
.single-producto article header h1,
.single-coleccion article header h1,
.single-disenador article header h1,
.single-proyecto article header h1 {
	font-size: 2rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

/* Definition lists (metadata) */
.single-producto article header dl,
.single-coleccion article header dl,
.single-proyecto article header dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 1rem 0 2rem;
	font-size: 0.9rem;
}

.single-producto article header dt,
.single-coleccion article header dt,
.single-proyecto article header dt {
	color: #888;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	align-self: center;
}

.single-producto article header dd,
.single-coleccion article header dd,
.single-proyecto article header dd {
	margin: 0;
}

/* Legacy rule ELIMINADA 2026-04-17 (R0 Fase 3): uppercase/colour #555 sobre
   todos los `section h2` de los singles rompe la paridad del
   products-slider y de cualquier h2 que usen los template-parts compartidos
   (el titulo "productos" del slider Figma es lowercase 48px #1D1D1B).
   Cada single tiene sus propios h2 con selectores especificos BEM. */

.single-producto section h3 {
	font-size: 0.85rem;
	font-weight: 600;
	color: #777;
	margin-bottom: 0.5rem;
}

/* Specs table */
.single-producto table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9rem;
}

.single-producto table th,
.single-producto table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
	text-align: left;
}

.single-producto table th {
	color: #888;
	font-weight: 400;
	width: 9rem;
}

/* Image gallery (aside element) — uniform grid with contain */
.single-producto aside,
.single-proyecto aside {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.single-producto aside figure,
.single-proyecto aside figure {
	margin: 0;
	aspect-ratio: 1/1;
	background: var(--piedra-background);
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-producto aside img,
.single-proyecto aside img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.single-producto figcaption {
	font-size: 0.8rem;
	color: #999;
	margin-top: 0.3rem;
}

/* Related products nav (scoped to article to avoid leaking into site header) */
.single-producto article nav {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid #eee;
}

.single-producto article nav h2 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #555;
	margin-bottom: 1rem;
}

.single-producto article nav ul,
.single-coleccion section ul,
.single-disenador section ul,
.single-proyecto section ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-producto article nav li,
.single-coleccion section li,
.single-disenador section li,
.single-proyecto section li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--piedra-background);
}

.single-coleccion section li small,
.single-producto article nav li small {
	color: #999;
	margin-left: 0.5rem;
}

/* --- Archive CPTs: shared --- */

.post-type-archive-producto section,
.post-type-archive-disenador section,
.post-type-archive-proyecto section,
.tax-tipologia section {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 2rem;
	align-items: start;
}

/* Colecciones: masonry layout (CSS columns) */
.post-type-archive-coleccion section {
	columns: 3 16rem;
	column-gap: 2rem;
}

.post-type-archive-coleccion article {
	break-inside: avoid;
	margin-bottom: 2rem;
}

.post-type-archive-producto article,
.post-type-archive-coleccion article,
.post-type-archive-disenador article,
.post-type-archive-proyecto article,
.tax-tipologia article {
	border: 1px solid #f0f0f0;
	padding: 0;
	overflow: hidden;
}

.post-type-archive-producto article figure,
.post-type-archive-coleccion article figure,
.post-type-archive-disenador article figure,
.post-type-archive-proyecto article figure,
.tax-tipologia article figure {
	margin: 0;
	background: var(--piedra-background);
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-type-archive-producto article img,
.post-type-archive-coleccion article img,
.post-type-archive-disenador article img,
.post-type-archive-proyecto article img,
.tax-tipologia article img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

.post-type-archive-producto article header,
.post-type-archive-coleccion article header,
.post-type-archive-disenador article header,
.post-type-archive-proyecto article header,
.tax-tipologia article header {
	padding: 1rem;
}

.post-type-archive-producto article h2,
.post-type-archive-coleccion article h2,
.post-type-archive-disenador article h2,
.post-type-archive-proyecto article h2,
.tax-tipologia article h2 {
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0 0 0.3rem;
	text-transform: capitalize;
}

.post-type-archive-producto article h2 a,
.post-type-archive-coleccion article h2 a,
.post-type-archive-disenador article h2 a,
.post-type-archive-proyecto article h2 a,
.tax-tipologia article h2 a {
	color: inherit;
	text-decoration: none;
	--ul-h: max(1px, 0.055em);
	background: linear-gradient(currentColor, currentColor) no-repeat right bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.post-type-archive-producto article h2 a:hover,
.post-type-archive-coleccion article h2 a:hover,
.post-type-archive-disenador article h2 a:hover,
.post-type-archive-proyecto article h2 a:hover,
.tax-tipologia article h2 a:hover {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

.post-type-archive-producto article p,
.post-type-archive-coleccion article p,
.post-type-archive-disenador article p,
.post-type-archive-proyecto article p,
.tax-tipologia article p {
	font-size: 0.8rem;
	color: #888;
	margin: 0;
	padding: 0 1rem 1rem;
}

.post-type-archive-producto article small,
.post-type-archive-coleccion article small,
.tax-tipologia article small {
	color: #aaa;
}

/* Archive page header */
.post-type-archive-producto #primary header h1,
.post-type-archive-coleccion #primary header h1,
.post-type-archive-disenador #primary header h1,
.post-type-archive-proyecto #primary header h1,
.tax-tipologia #primary header h1 {
	font-size: 1.6rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.5rem;
}

/* Tipología filter nav (scoped to #primary to avoid leaking into site header) */
.post-type-archive-producto #primary header nav ul,
.tax-tipologia #primary header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.post-type-archive-producto #primary header nav a,
.tax-tipologia #primary header nav a {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	text-decoration: none;
	border: 1px solid #ddd;
	color: #555;
}

.post-type-archive-producto #primary header nav a:hover,
.tax-tipologia #primary header nav a:hover,
.tax-tipologia #primary header nav a[aria-current="page"] {
	background: var(--negrotexto-background);
	color: var(--blanco-background);
	border-color: var(--negrotexto-background);
}

/* Pagination & post navigation */
.post-type-archive-producto .nav-links,
.post-type-archive-coleccion .nav-links,
.post-type-archive-disenador .nav-links,
.post-type-archive-proyecto .nav-links,
.tax-tipologia .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid #eee;
}

.post-navigation,
.posts-navigation {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid #eee;
}

/* Links (scoped to #primary) */
.single-producto #primary a,
.single-coleccion #primary a,
.single-disenador #primary a,
.single-proyecto #primary a {
	color: var(--negrotexto-background);
	text-decoration-color: #ccc;
}

.single-producto #primary a:hover,
.single-coleccion #primary a:hover,
.single-disenador #primary a:hover,
.single-proyecto #primary a:hover {
	text-decoration-color: var(--negrotexto-background);
}

/* --- Front Page (legacy — removed, see new sections below) --- */

/* --- Page: Nosotros / About --- */

.about-philosophy,
.about-production,
.about-designer-quote {
	max-width: 52rem;
	margin: 0 auto;
}

.about-philosophy {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #eee;
}

.about-philosophy h1 {
	font-size: 2rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	color: var(--negrotitulares-background);
}

.about-philosophy p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

.about-production {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #eee;
}

.about-production h2 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #555;
	margin-bottom: 1rem;
}

.about-production p {
	font-size: 1rem;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

.about-designer-quote {
	margin-bottom: 3rem;
}

.about-designer-quote blockquote {
	margin: 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--arena-background);
}

.about-designer-quote blockquote p {
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.7;
	color: #555;
	margin: 0 0 0.75rem;
}

.about-designer-quote blockquote cite {
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 500;
	color: #888;
	letter-spacing: 0.04em;
}

/* --- Footer (Figma: 1440×576, bg piedra, 4 cols + logo + legal) --- */

.site-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto none auto 36rem;
	margin-top: 0;
	/* Padding Figma 4 vp (fluid 375→768, estable 768→1920):
	   top    48 @375 → 72 @768+
	   sides  24 @375 → 48 @768+
	   bottom 40 @375 → 64 @768+  (offset de la línea copy/legal) */
	padding:
		clamp(3rem, 1.57rem + 6.11vw, 4.5rem)
		clamp(1.5rem, 0.07rem + 6.11vw, 3rem)
		clamp(2.5rem, 1.07rem + 6.11vw, 4rem)
		clamp(1.5rem, 0.07rem + 6.11vw, 3rem);
	min-height: 36rem;                         /* 576px — Figma 1440/1920 */
	background: var(--piedra-background);
	color: var(--negrotitulares-background);
	/* Font Figma: 12/16 @375 → 16/24 @768+.
	   Aplica a nav y address. Legal y copy se overridean a 12/16 siempre. */
	font-size:   clamp(0.75rem, 0.511rem + 1.018vw, 1rem);
	line-height: clamp(1rem, 0.523rem + 2.036vw, 1.5rem);
	letter-spacing: var(--ls-body-16);         /* -0.02em (igual valor em a 12 y 16) */
	display: flex;
	flex-direction: column;
}

.site-footer__columns {
	/* Mobile-first: 2 columnas apiladas. Desktop (≥64em) reemplaza por flex
	   con margin-left:auto sobre contact para replicar Figma 1920/1440
	   (3 cols pegadas 217/218/217 con gap 8 + address push-right 330). */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: auto;
}

/* Desktop ≥64em (1024px+): layout Figma D-00/01A/etc — cols 1-2-3 adyacentes
   con gap 8px, col 4 (address) pegada al borde derecho con margin-left:auto. */
@media (min-width: 64em) {
	.site-footer__columns {
		display: flex;
		gap: 0.5rem;                          /* 8px entre cols 1-2-3 — Figma 194:1657 */
	}

	.site-footer__col {
		flex: 0 1 13.5625rem;                 /* 217px — Figma Frame 11/12/13 */
		min-width: 0;
	}

	.site-footer__contact {
		flex: 0 1 20.625rem;                  /* 330px — Figma ancho fijo address */
		margin-left: auto;                    /* Push al borde derecho — Figma */
		min-width: 0;
	}
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;               /* underline = solo texto */
	gap: 0.5rem;
}

.site-footer__col a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                   /* 44px tap target mobile */
	padding-block: 0.75rem;
	margin-block: -0.75rem;                /* compensa sin romper layout */
	color: var(--negrotitulares-background);
	text-decoration: none;
	/* Solo anima el underline L→R (regla compartida). Sin fade de opacity/color. */
	transition: background-size var(--motion-default) var(--ease-default);
}

/* Desktop: liberar el touch-target para que el underline animado (background-position: left bottom) se ancle al baseline del texto y no al borde inferior de la caja de 44px. padding-bottom queda en 0.18em (regla compartida) para el descender. */
@media (pointer: fine) {
	.site-footer__col a {
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0.18em;
		margin-block: 0;
	}
}

.site-footer__contact {
	font-style: normal;
	text-align: right;
}

.site-footer__contact p {
	margin: 0 0 0.5rem;
}

.site-footer__contact p:last-child {
	margin-bottom: 0;
}

.site-footer__contact a {
	color: var(--negrotitulares-background);
	text-decoration: none;
	transition: opacity var(--motion-fast) var(--ease-default);
	/* WCAG 2.5.5 tap target en coarse pointer sin inflar layout visual.
	   Misma técnica que .site-footer__col a: min-height 44 + padding vertical
	   compensado con margin-block negativo para mantener la línea Figma. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}

@media (pointer: fine) {
	.site-footer__contact a {
		min-height: 0;
		padding-block: 0;
		margin-block: 0;
	}
}

.site-footer__contact a:hover {
	opacity: 0.6;
}

.site-footer__logo {
	/* Figma: 24px @768 | 40px @1440/1920. Fluid clamp 768→1440. */
	margin-bottom: clamp(1.5rem, 0.36rem + 2.38vw, 2.5rem);
}

.site-footer__logo img {
	width: 100%;
	max-width: 956px;
	height: auto;
}

/* Meta line — copy + legal en UNA SOLA LÍNEA en todos los viewports (375+).
   El wrapper fuerza contexto inline común + nowrap + truncado con ellipsis
   si el viewport es demasiado estrecho para el texto completo (< ~640px).
   Cliente 2026-04-17: "integrado en la misma línea de textos de todas las políticas". */
.site-footer__meta {
	font-size: var(--font-body-12);
	line-height: var(--lh-body-12);
	letter-spacing: var(--ls-body-12);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-footer__copy,
.site-footer__legal {
	display: inline;
}

.site-footer__copy p,
.site-footer__legal p {
	display: inline;
	margin: 0;
}

.site-footer__copy p::after {
	content: "\00a0\00a0|\00a0\00a0";   /* separador con NBSPs puros — no rompe línea */
}

.site-footer__legal a {
	color: var(--negrotitulares-background);
	text-decoration: none;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.site-footer__legal a:hover {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

.site-footer__sep {
	margin: 0 0.35em;
}

/* Single diseñador: layout mínimo */
.single-disenador article > header {
	margin-bottom: 1.5rem;
}

.single-disenador article > header p a {
	font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 40rem) {
	.post-type-archive-producto section,
	.post-type-archive-disenador section,
	.post-type-archive-proyecto section,
	.tax-tipologia section {
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
		gap: 1rem;
	}

	.post-type-archive-coleccion section {
		columns: 1;
	}

	.single-producto header dl,
	.single-coleccion header dl,
	.single-proyecto header dl {
		grid-template-columns: 1fr;
	}

	.single-producto aside,
	.single-proyecto aside {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
# Megamenu
--------------------------------------------------------------*/

.megamenu {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: var(--piedra-background);
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 250ms cubic-bezier(0.4, 0, 1, 1),
	            visibility 0ms 250ms;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ── Cascade fade-in animation ── */
@keyframes mm-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Section links: cascade on menu open */
.megamenu.is-open .megamenu__sections li {
	opacity: 0;
	animation: mm-fade-in 180ms ease forwards;
	animation-delay: calc(var(--i, 0) * 40ms + 80ms);
}

/* Close button: fade with first items */
.megamenu.is-open .megamenu__close {
	opacity: 0;
	animation: mm-fade-in 180ms ease forwards;
	animation-delay: 100ms;
}

/* Panel items: cascade on panel show */
.megamenu__panel .megamenu__item {
	opacity: 0;
}

.megamenu__panel.is-visible .megamenu__item {
	animation: mm-fade-in 160ms ease forwards;
	animation-delay: calc(var(--i, 0) * 30ms);
}

/* Preview image: fade in with panel */
.megamenu__preview {
	opacity: 0;
	transition: opacity var(--motion-default) var(--ease-default);
}

.megamenu__preview.is-visible {
	opacity: 1;
}

/* Logo + lang: late cascade */
.megamenu.is-open .megamenu__logo,
.megamenu.is-open .megamenu__lang {
	opacity: 0;
	animation: mm-fade-in 200ms ease forwards;
	animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
	.megamenu {
		clip-path: none;
		transition: opacity var(--motion-instant) linear, visibility 0ms;
	}
	.megamenu.is-open {
		clip-path: none;
		opacity: 1;
		transition: opacity var(--motion-instant) linear, visibility 0ms;
	}
	.megamenu.is-open .megamenu__sections li,
	.megamenu.is-open .megamenu__close,
	.megamenu__panel.is-visible .megamenu__item,
	.megamenu.is-open .megamenu__logo,
	.megamenu.is-open .megamenu__lang {
		animation: none;
		opacity: 1;
	}
}

.megamenu.is-open {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path 450ms cubic-bezier(0.23, 1, 0.32, 1),
	            visibility 0ms;
}

/* Prevent body scroll and hide scrollbar when megamenu is open */
body.megamenu-open {
	overflow: hidden;
}

html:has(body.megamenu-open) {
	scrollbar-gutter: auto;
	overflow: hidden;
}

.megamenu__inner {
	position: relative;
	min-height: 100vh;
	padding: 5rem var(--space-page) 4rem;
}

/* Close button */
.megamenu__close {
	position: absolute;
	top: calc(var(--space-header) - 0.875rem);
	right: calc(var(--space-header) - 0.5rem);
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 3.5rem;
	height: 2.75rem;
	padding: 0.75rem 0.5rem;
	gap: 7px;
	color: var(--negrotitulares-background);
	transition: opacity var(--motion-fast) var(--ease-default);
}

.megamenu__close span {
	display: block;
	height: 1px;
	background: currentColor;
}

.megamenu__close span:nth-child(1) {
	transform: translateY(4px) rotate(30deg);
}

.megamenu__close span:nth-child(2) {
	transform: translateY(-4px) rotate(-30deg);
}

.megamenu__close:hover {
	opacity: 0.5;
}

/* Main sections */
.megamenu__sections ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;               /* items NO se estiran → underline = solo texto */
	gap: 1.5rem;
}

.megamenu__sections a {
	font-size: var(--font-menu-section);
	line-height: var(--lh-menu-section);
	letter-spacing: var(--ls-menu-section);
	font-weight: 400;
	color: var(--negrotitulares-background);
}

/* Sub-content (colecciones columns) — hidden by default */
.megamenu__subcontent {
	display: none;
	gap: 2rem;
	position: relative;
}

.megamenu__subcontent.is-visible {
	display: block;
}

/* Panels: solo uno visible a la vez según sección hovered */
.megamenu__panel {
	display: none;
	gap: 2rem;
	width: 100%;
	height: 100%;
}

.megamenu__panel.is-visible {
	display: flex;
}

.megamenu__panel--productos {
	align-items: stretch;
	justify-content: flex-start;
}

/* Diseñadores: nombres largos requieren más aire entre columnas */
.megamenu__panel--disenadores.is-visible {
	gap: 5rem;                             /* 80px — aire generoso entre columnas de diseñadores */
}

.megamenu__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;               /* items NO se estiran → underline = solo texto */
	gap: 2rem;
}

/* Shared item style (colecciones + diseñadores) */
.megamenu__item,
.megamenu__collection-link {
	font-size: var(--font-menu-page);
	line-height: var(--lh-menu-page);
	letter-spacing: var(--ls-menu-page);
	font-weight: 600;
	color: var(--negrotitulares-background);
}

/* Productos autoplay container — preview inline del primer slide, mirror al
   megamenu__preview via JS. Aquí el contenedor sirve como dataset, no renderiza
   las imágenes directamente (la imagen activa se muestra en megamenu__preview). */
.megamenu__prod-autoplay {
	display: none; /* invisible, solo dataset */
}

.megamenu__prod-slide {
	display: none;
}

/* Image preview */
.megamenu__preview {
	display: none;
	overflow: hidden;
}

.megamenu__preview.is-visible {
	display: block;
}

.megamenu__preview-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Search in megamenu — deshabilitado, reservado para futuro */
.megamenu__search {
	display: none;
}

.megamenu__search-input {
	font-family: inherit;
	font-size: var(--font-body-16);
	padding: 0.5rem 0;
	border: none;
	border-bottom: 1px solid var(--negrotitulares-background);
	background: transparent;
	width: 100%;
	max-width: 20rem;
	outline: none;
	color: var(--negrotitulares-background);
}

.megamenu__search-input::placeholder {
	color: rgba(29, 29, 27, 0.4);
}

.megamenu__search-results {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-width: 20rem;
	background: var(--blanco-background);
	border: 1px solid #ddd;
	z-index: 10;
}

/* Language switcher in megamenu */
.megamenu__lang ul {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.megamenu__lang a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(29, 29, 27, 0.5);
	padding: 0.25rem 0.35rem;
	transition: color var(--motion-fast) var(--ease-default);
}

.megamenu__lang .current-lang a {
	color: var(--negrotitulares-background);
}

.megamenu__lang a:hover {
	color: var(--negrotitulares-background);
}

/* Logo in megamenu */
.megamenu__logo img {
	width: 212px;
	height: auto;
}

/* ── Desktop megamenu layout (≥ 768px) ──
   Figma 114:827 / 114:867 — absolute positioning to match Figma exactly.
   Sections: x=48, w=217  |  Col1: x=386  |  Col2: x=611
   Image: right=80, 324×432  |  Logo: right=75%−68, bottom=64
   Gap sections→cols = 121px, gap col1→col2 = 8px */
@media (min-width: 48em) {
	.megamenu__inner {
		display: grid;
		grid-template-columns: minmax(10rem, 14rem) 1fr auto;
		grid-template-rows: 1fr auto;
		column-gap: clamp(2rem, 5vw, 8rem);
		align-content: start;
		min-height: 100vh;
		padding: 5rem 3rem 4rem;
	}

	/* Close — alineado con menu-toggle del header */
	.megamenu__close {
		position: absolute;
		top: 0.625rem;
		right: 1rem;
	}

	/* Sections — left column */
	.megamenu__sections {
		grid-column: 1;
		grid-row: 1;
	}

	.megamenu__sections ul {
		gap: 1.5rem;
	}

	/* Subcontent — middle area */
	.megamenu__subcontent {
		grid-column: 2;
		grid-row: 1;
	}

	.megamenu__subcontent.is-visible {
		display: flex;
		gap: 0.5rem;
	}

	.megamenu__panel.is-visible {
		gap: 0.5rem;
	}

	.megamenu__panel--disenadores.is-visible {
		gap: clamp(2rem, 4vw, 5rem);
	}

	.megamenu__col {
		flex: 0 1 auto;
		min-width: 10rem;
		gap: 2rem;
	}

	.megamenu__panel--disenadores .megamenu__col {
		flex: 0 1 auto;
		min-width: 12rem;
	}

	/* Image preview — right side */
	.megamenu__preview {
		grid-column: 3;
		grid-row: 1;
		width: clamp(180px, 18vw, 324px);
		aspect-ratio: 3 / 4;
	}

	/* Search — hidden (deshabilitado) */
	.megamenu__search {
		display: none;
	}

	/* Language — bottom-left */
	.megamenu__lang {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
	}

	/* Logo — bottom-right */
	.megamenu__logo {
		grid-column: 3;
		grid-row: 2;
		align-self: end;
		justify-self: end;
	}
}

/* ── Large desktop (≥ 1440px) — pixel-perfect Figma ── */
@media (min-width: 90em) {
	.megamenu__inner {
		grid-template-columns: 13.5625rem 1fr auto;
		column-gap: clamp(3rem, 5vw, 8rem);
		padding: 5rem clamp(3rem, 4vw, 5rem) 4rem;
	}

	.megamenu__col {
		flex: 0 1 13.5625rem;
	}

	.megamenu__panel--disenadores .megamenu__col {
		flex: 0 1 auto;
		min-width: 12rem;
	}

	.megamenu__preview {
		width: clamp(200px, 18vw, 324px);
		aspect-ratio: 3 / 4;
	}
}

/*--------------------------------------------------------------
# Responsive — Footer
--------------------------------------------------------------*/

/* Tablet 48em–63.99em (768–1023) — Figma 222:257 @768:
   Col 1 (x=48): nav.primary (y=0-144) + nav.secondary (y=160-304), apiladas visualmente
     como una lista continua de 8 items (Figma las combina).
   Col 2 (x=327): nav.social (y=0-104) + address (y=184, h=120), apiladas.
   Gap entre items dentro de cada nav: 16 (Figma row 40 - item 24).
   Gap entre navs apilados en col1: 16 (continuidad visual).
   Gap social → address en col2: ~80 Figma (row1 height 144 + row-gap 16 + ajuste). */
@media (min-width: 48em) and (max-width: 63.99em) {
	.site-footer__columns {
		grid-template-columns: 13.5625rem 13.5625rem;  /* 217px cada col — Figma ancho fijo */
		grid-template-rows: auto auto;
		column-gap: 3.875rem;                           /* 62px — Figma (327-(48+217)) */
		row-gap: 1rem;                                  /* 16px entre navs apilados col1 */
		justify-content: flex-start;
	}

	.site-footer__col ul {
		gap: 1rem;                                       /* 16px items — Figma 768 row 40 */
	}

	.site-footer__col:nth-child(1) { grid-column: 1; grid-row: 1; }
	.site-footer__col:nth-child(2) { grid-column: 1; grid-row: 2; }
	.site-footer__col:nth-child(3) { grid-column: 2; grid-row: 1; align-self: start; }

	.site-footer__contact {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		text-align: left;
		/* Figma 222:257 @768: social termina y=176, address empieza y=256 → gap 80.
		   Grid row-gap ya aporta 16; faltan 64 en margin-top. */
		margin-top: 4rem;
	}

	.site-footer {
		min-height: 47.5rem;                             /* 760px — Figma 222:257 */
	}
}

/* Entre tablet y desktop (64em–no-aplica mobile/tablet) ya se usa el flex-desktop
   definido más arriba. Nada extra aquí. */

/* Mobile <48em (<768) — Figma 231:1449 @375:
   Columna única de 11 items (nav.primary 4 + nav.secondary 4 + nav.social 3),
   gap 8 entre cada item (continuidad visual entre navs).
   Address tras nav con gap 40. Legal tras address con gap 48.
   Logo tras legal con gap 64. Copy tras logo con gap 24.
   Orden vs HTML: se re-ordena con `order:` flex en .site-footer (column).
   HTML actual: columns → logo → copy → legal  →  mobile needs: columns → legal → logo → copy. */
@media (max-width: 47.99em) {
	.site-footer {
		min-height: auto;                  /* content-driven — evita distorsionar gaps con items ocultos */
	}

	/* Columns: 1 sola columna; navs apiladas con mismo gap que los items.
	   row-gap 16 = gap interno del ul → continuidad visual perfecta entre navs
	   (sin el "agrupamiento" que producía row-gap:0 en los límites de nav).
	   Reset margin-bottom:auto del base para no inflar el gap columns→legal. */
	.site-footer__columns {
		grid-template-columns: 1fr;
		row-gap: 1rem;                     /* 16px — match ul gap, Figma items uniformes */
		column-gap: 0;
		margin-bottom: 0;
	}

	/* Nav items: gap 16 — Figma 231:1449 @375 (gap-[16px] items-start) */
	.site-footer__col ul {
		gap: 1rem;
	}

	.site-footer__contact {
		text-align: left;
		grid-column: 1;
		margin-top: 3rem;                   /* 48px — Figma gap nav-end → address-start */
	}

	.site-footer__logo {
		margin-bottom: 1.5rem;              /* 24px — Figma logo-end → copy-start */
	}

	.site-footer__logo img {
		max-width: 100%;
	}

	/* Orden mobile: nav+address (dentro de __columns) → logo → meta (copy+legal inline).
	   __meta sustituye el bloque stacked anterior — el cliente quiere la línea
	   completa "© ... | Política... | ..." siempre en 1 sola línea. */
	.site-footer__columns { order: 1; }
	.site-footer__logo    { order: 2; margin-top: 4rem;   /* 64px — Figma gap address→logo */ }
	.site-footer__meta    { order: 3; margin-top: 0;      /* logo margin-bottom gestiona el gap */ }
}

/* Ultra-narrow ≤375 — Figma 231:1449 design original INTOCABLE:
   legal stacked block (4 líneas apiladas) entre address y logo, copy solo
   al bottom. El wrapper __meta se disuelve vía display:contents para que
   copy y legal vuelvan a comportarse como flex-items directos del footer
   con el orden Figma (legal.2 → logo.3 → copy.4).
   Cliente 2026-04-17: "en ningún momento te he dicho que en 375 se
   tuviese que cambiar el diseño. Desde 376 en adelante, copy inline". */
@media (max-width: 23.4375em) {
	.site-footer__meta {
		display: contents;                  /* disuelve wrapper — copy y legal vuelven a ser flex-items directos */
	}

	.site-footer__copy,
	.site-footer__legal {
		display: block;
	}

	.site-footer__copy p,
	.site-footer__legal p {
		display: block;
	}

	.site-footer__copy p::after {
		content: none;                      /* cancela separador inline — copy va solo */
	}

	/* Legal stacked — Figma 231:1481: 4 items apilados con mb=8 */
	.site-footer__legal p {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.site-footer__legal a {
		display: block;
	}

	.site-footer__sep {
		display: none;                      /* "|" oculto en stacked */
	}

	/* Orden Figma 375: nav+address (1) → legal (2) → logo (3) → copy (4).
	   Gana sobre el orden del media (max-width:47.99em) por venir después. */
	.site-footer__columns { order: 1; }
	.site-footer__legal   { order: 2; margin-top: 3rem;   /* 48px — Figma address→legal */ }
	.site-footer__logo    { order: 3; margin-top: 4rem;   /* 64px — Figma legal→logo */ }
	.site-footer__copy    { order: 4; margin-top: 0;      /* Figma copy solo tras logo */ }
}

/*--------------------------------------------------------------
# Responsive — Megamenu mobile
--------------------------------------------------------------*/

@media (max-width: 47.99em) {
	.megamenu__inner {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 4rem 1.5rem 1rem;
		min-height: 100dvh;
	}

	.megamenu__close {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}

	.megamenu__sections ul {
		gap: 1.25rem;
	}

	.megamenu__sections a {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}

	.megamenu__subcontent.is-visible {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.megamenu__col {
		gap: 1rem;
	}

	.megamenu__collection-link {
		font-size: 1.5rem;
		line-height: 1.75rem;
	}

	.megamenu__preview {
		width: 100%;
		height: 240px;
	}

	.megamenu__search-input {
		max-width: 100%;
	}

	.megamenu__lang {
		position: static;
		margin-top: auto;
	}

	.megamenu__logo {
		position: static;
		margin-top: 1.5rem;
	}

	.megamenu__logo img {
		height: 1rem;
		width: auto;
	}
}

/*--------------------------------------------------------------
# Header — white variant (front page)
--------------------------------------------------------------*/

.header-white .site-header {
	background: rgba(255, 255, 255, 0);  /* transparent white — smooth alpha transition */
	border-bottom: none;
}

.header-white .site-header.scrolled {
	background: rgba(255, 255, 255, 1);
}

.header-white .site-header.scrolled .site-title a,
.header-white .site-header.scrolled .main-navigation a,
.header-white .site-header.scrolled .menu-toggle span,
.header-white .site-header.scrolled .site-search__toggle {
	color: var(--negrotitulares-background);
}

.header-white .site-header.scrolled .menu-toggle span {
	background: var(--negrotitulares-background);
}

.header-white .site-header.scrolled .language-switcher a {
	color: #999;
}

.header-white .site-header.scrolled .language-switcher .current-lang a {
	color: var(--negrotitulares-background);
}

.header-white .site-title a {
	color: var(--blanco-background);
}

.header-white .main-navigation a {
	color: var(--blanco-background);
}

.header-white .site-search__toggle {
	color: var(--blanco-background);
}

.header-white .language-switcher a {
	color: rgba(255, 255, 255, 0.6);
}

.header-white .language-switcher .current-lang a {
	color: var(--blanco-background);
}

.header-white .menu-toggle span {
	background: var(--blanco-background);
}

/* Remove body offset for hero that goes behind the header */
.header-white .site {
	padding-top: 0;
}

.header-white .breadcrumbs {
	display: none;
}

/* Header logo */
.site-logo__img {
	display: block;
	height: 1rem;
	width: auto;
}

@media (max-width: 47.99em) {
	.site-logo__img {
		height: 0.75rem;
		width: 9.97125rem;
	}
}

/* Home: hide header logo — the hero logo animates into its place */
.header-white .site-branding {
	opacity: 0;
	transition: opacity var(--motion-default) var(--ease-default);
}

/* Show header logo once scroll animation completes */
.header-white .site-branding.is-visible {
	opacity: 1;
}

/* White variant of header logo (inverted for transparent header on home after animation) */
.header-white .site-logo__img {
	filter: brightness(0) invert(1);
}

.header-white .site-header.scrolled .site-logo__img {
	filter: none;
}

/* Hero logo — animated element on home */
.home-hero__logo {
	position: absolute;
	inset: auto 3.96% 3.98% 3.96%;
	z-index: 2;
	will-change: opacity;
	transition: opacity var(--motion-instant) linear;
}

/* .is-animating ya no se usa — el logo se queda en su lugar y fade out con scroll */

/*--------------------------------------------------------------
# Home — Hero (Figma: 1440×904)
--------------------------------------------------------------*/

.home-hero {
	position: relative;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.home-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
}

.home-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(111, 54, 12, 0.2) 0%,
		rgba(111, 54, 12, 0) 50%
	);
	pointer-events: none;
}

.home-hero__logo {
	position: absolute;
	inset: auto 3.96% 3.98% 3.96%;     /* Figma exact: 57px/1440=3.96%, 36px/904=3.98% */
}

.home-hero__logo img,
.home-hero__logo-svg {
	width: 100%;
	height: auto;
	display: block;
}

/*--------------------------------------------------------------
# Home — Quote / Filosofía (Figma D-00, node 163:1265)
# Section: 1440×592, bg white, pt 88px, pb 96px, px 24px
# Content area: 408px (592 - 88 - 96)
# Text (163:1262): SB 56/68, ls -2.24px, w 1392px (full - padding)
#   Indent: 15 spaces whitespace-pre-wrap = 156px (2.79em at 56px)
# Label (163:1263): Reg 18/24, ls -0.36px, abs top:112px left:24px
#   Sits in the indent gap of the first text line
--------------------------------------------------------------*/

/* ── Quote / Filosofía — componente compartido Figma DESKTOP/04.
   Se reutiliza en: Home (2. Filosofía), Nosotros (2. Filosofía + 4. Producción),
   Single Diseñador (cita).

   Valores fluidos clamp() entre los 4 viewports de referencia (375 → 768 → 1440 → 1920).
   padding-top : 48 @375 → 64 @768 → 88 @1440 → 88 @1920
   padding-bot : 56 @375 → 72 @768 → 96 @1440 → 96 @1920
   quote font  : 24 @375 → 36 @768 → 56 @1440 → 56 @1920
   quote lh    : 32 @375 → 48 @768 → 68 @1440 → 68 @1920
   label font  : 16 @375 → 18 @768 → 18 @1440 → 18 @1920
   A ≥48em la label se overlaza absolute sobre el texto; <48em flujo normal arriba. */

.home-quote {
	position: relative;
	padding-top:    clamp(3rem, 2.1197rem + 3.7559vw, 5.5rem);   /* 48 → 88 */
	padding-bottom: clamp(3.5rem, 2.6197rem + 3.7559vw, 6rem);   /* 56 → 96 */
	padding-inline: 1.5rem;                                       /* 24 — fijo todos los BPs */
	background: var(--blanco-background);
	max-width: 120rem;                                            /* 1920px cap */
	margin-inline: auto;
}

.home-quote__text {
	margin: 0;
	font-size:     clamp(1.5rem, 0.7958rem + 3.0047vw, 3.5rem);  /* 24 → 56 */
	line-height:   clamp(2rem, 1.2077rem + 3.3803vw, 4.25rem);   /* 32 → 68 */
	letter-spacing: -0.04em;                                      /* ratio constante Figma */
	font-weight: 600;
	color: var(--negrotitulares-background);
}

@media (min-width: 90em) {
	.home-quote__text {
		max-width: 95%;
	}
}

/* Label: enfoque moderno con float — el texto fluye alrededor naturalmente,
   sin depender de un `text-indent` hardcoded que exige matchear el ancho del
   label (patrón frágil que rompe cuando el label cambia de contenido).
   · Primera línea del quote arranca después del label + margen.
   · Segunda línea en adelante ocupa todo el ancho (flow natural post-float).
   · Imposible overlap porque el ancho real del label dicta el wrap.
   `margin-top` alinea al cap-center de la primera letra del quote (fórmula
   derivada de los 2 endpoints Figma: offset 15 @768, 24 @1440). */
.home-quote__label {
	float: left;
	margin: 0;
	margin-top: calc(
		clamp(0.9rem, 0.5435rem + 1.5211vw, 1.9125rem)    /* 0.45 × lh_quote */
		- 0.4125rem                                         /* −6.6px cap offset */
	);
	margin-right: 1.125rem;                                  /* 18px gap label ↔ texto */
	font-size:     clamp(1rem, 0.8807rem + 0.5085vw, 1.125rem);  /* 16 → 18 */
	line-height: var(--lh-body-18);                          /* 24px constante */
	letter-spacing: -0.02em;                                 /* ratio constante */
	font-weight: 400;
	color: var(--negrotitulares-background);
}

/*--------------------------------------------------------------
# Home — Featured Collections (Figma: 1440×880 each)
# Image: 953px wide (66.18%), Info: 487px (33.82%)
# Info padding: 40px horizontal, 48px vertical
# Title/subtitle: Semi Bold 72/72, tracking -2.88px
# Designer: Regular 64/64, tracking -2.56px
--------------------------------------------------------------*/

.home-collection {
	width: 100%;
	overflow: hidden;
}

.home-collection__link {
	display: flex;
	text-decoration: none;
	color: var(--negrotitulares-background);
}

.home-collection__image {
	flex: 0 0 66.18%;                   /* 953/1440 */
	/* 400px @ 375 | 680px @ 768 | 880px @ 1440 */
	height: clamp(25rem, 230.99px + 45.07vw, 55rem);
	overflow: hidden;
}

.home-collection__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-collection__info {
	flex: 0 0 33.82%;                   /* 487/1440 — Figma exact */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* padding-block: 24px @ 375 | 48px @ 768 | 48px @ 1440 */
	/* padding-inline: 24px @ 375 | 40px @ 768 | 40px @ 1440 */
	padding: clamp(1.5rem, 15.55px + 2.254vw, 3rem) clamp(1.5rem, 18.37px + 1.502vw, 2.5rem);
	/* 144px @ 375 | 240px @ 768 | 880px @ 1440 */
	min-height: clamp(9rem, -115.16px + 69.108vw, 55rem);
}

.home-collection__name {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 385px;
}

.home-collection__title {
	margin: 0;
	/* 32px @ 375 | 48px @ 768 | 72px @ 1440 */
	font-size:   clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	line-height: clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	letter-spacing: -0.04em;
	font-weight: 600;
}

.home-collection__subtitle {
	margin: 0;
	/* 32px @ 375 | 48px @ 768 | 72px @ 1440 */
	font-size:   clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	line-height: clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	text-align: right;
	max-width: 25.4375rem;              /* 407px — Figma exact */
	margin-left: auto;
}

.home-collection__designer {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                        /* 8px */
}

.home-collection__designer p {
	margin: 0;
	/* 24px @ 375 | 48px @ 768 | 64px @ 1440 */
	font-size:   clamp(1.5rem, 9.92px + 3.756vw, 4rem);
	line-height: clamp(1.5rem, 9.92px + 3.756vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 400;
}

/* Segunda línea del designer → alineada a la derecha. Simétrico con
   .home-collection__subtitle para crear el efecto staircase del bloque info.
   Mismo patrón que Figma 194:1248/1249/1250/1251. */
.home-collection__designer p:last-child {
	text-align: right;
}

/* Reversed layout: info left, image right */
.home-collection--reversed .home-collection__link {
	flex-direction: row-reverse;
}

/*--------------------------------------------------------------
# Home — Products Slider (Figma: 1888×672, bg gris, overflows)
# Title: Semi Bold 48/48, tracking -1.92px, left 40px, top 40px
# "ver más": Italic 18/24, underline 6%, at right
# Cards: ~24.68% of 1888px, image 600px height
# Card label: padding 16px, gap 6px, 24/24 tracking -0.96px
--------------------------------------------------------------*/

/* Home products slider: usa el componente shared `.products-slider--home`.
   Ver definición unificada abajo. Este bloque queda solo como referencia histórica. */

/*--------------------------------------------------------------
# Home — Designer Highlight (Figma: 1440×840, 50/50 split)
# Image: 720×840
# Content: 720×840, bg white, padding 40px
# Top: Regular 18/24, tracking -0.36px + Italic 18/24 underline 6%
# Bottom: name Semi Bold 64/64, tracking -2.56px
#          quote Italic 24/32, tracking -0.48px
--------------------------------------------------------------*/

.home-designer {
	display: flex;
	width: 100%;
	/* equal height when side-by-side: both children stretch to parent */
	/* 840px @ 768+ | 920px @ 1920 (overridden in 120em MQ) */
	height: clamp(25rem, -19.85px + 111.959vw, 52.5rem);
}

.home-designer__image {
	position: relative;
	flex: 0 0 50%;                      /* 720/1440 */
	height: 100%;
	overflow: hidden;
}

.home-designer__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s var(--ease-out-quad, ease-out);
}

.home-designer__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* padding fluid 24@375 → 40@768+ (Figma 241:2408/2187/2624 = 40; 241:2815 = 24). */
	padding: clamp(1.5rem, 0.5459rem + 4.071vw, 2.5rem);
	background: var(--blanco-background);
	height: 100%;
}

.home-designer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.home-designer__label {
	font-size: var(--font-body-18);     /* 18px */
	line-height: var(--lh-body-18);     /* 24px */
	letter-spacing: var(--ls-body-18);  /* -0.36px */
	color: var(--negrotitulares-background);
}

.home-designer__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                /* 44px tap target */
	padding-block: 0.625rem;
	margin-block: -0.625rem;
	font-size: var(--font-body-18);     /* 18px */
	line-height: var(--lh-body-18);     /* 24px */
	color: var(--negrotitulares-background);
	font-style: italic;
	background-origin: content-box;
}

.home-designer__bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;                          /* 16px */
}

.home-designer__name {
	margin: 0;
	/* fluid 32@375 → 64@768+ (Figma 241:2815 = 32; 241:2624/2187/2408 = 64). */
	font-size:   clamp(2rem, 0.0919rem + 8.142vw, 4rem);
	line-height: clamp(2rem, 0.0919rem + 8.142vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
}

.home-designer__quote {
	margin: 0;
}

.home-designer__quote p {
	margin: 0;
	/* fluid 16@375 → 24@768+ (Figma 241:2822 = 16; ≥768 = 24). */
	font-size:   clamp(1rem, 0.5229rem + 2.036vw, 1.5rem);
	line-height: clamp(1.5rem, 1.0228rem + 2.036vw, 2rem);
	letter-spacing: -0.02em;
	font-style: italic;                 /* override a `normal` en mobile vía MQ. */
	color: var(--negrotitulares-background);
}

/* Mobile: Figma 241:2822 usa Regular (no italic) en la quote. */
@media (max-width: 47.99em) {
	.home-designer__quote p {
		font-style: normal;
	}
}

/* Text fade for designer slider sync */
#ds-name,
#ds-quote {
	transition: opacity 0.3s var(--ease-out-quad, ease-out);
}

/*--------------------------------------------------------------
# Home — CTA Catálogo (Figma: 1440×904)
# Image: fullscreen, object-cover
# Title: Semi Bold 72/72, tracking -2.88px, white, centered
#   positioned at inset [46.02% top, 16.18% sides]
# Button: Semi Bold 18/24, white, underline 10%
#   positioned at inset [92.92% top, ~44% sides, 4.42% bottom]
--------------------------------------------------------------*/

.home-cta {
	position: relative;
	/* 680px @ 375 | 680px @ 768 | 848px @ 1440 */
	height: clamp(42.5rem, 488px + 25vw, 53rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 2.5rem;             /* 40px — Figma ~4.42% of 904 */
	overflow: hidden;
}

/* Legacy .home-cta__bg — aún referenciado por style.min.css en caché
   o plugins; mantiene consistencia visual con .cta-catalogo__bg.
   El HTML actual usa .cta-catalogo via template-parts/cta-catalogo.php. */
.home-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;            /* centrada — sync con .cta-catalogo__bg */
	z-index: 0;
}

.home-cta__title {
	position: absolute;
	top: 46%;                           /* Figma: 46.02% */
	left: 16.18%;
	right: 16.18%;
	z-index: 1;
	margin: 0;
	/* 32px @ 375 | 48px @ 768 | 72px @ 1440 */
	font-size:   clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	line-height: clamp(2rem, 17.92px + 3.756vw, 4.5rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--blanco-background);
	text-align: center;
}

.home-cta__button {
	position: relative;
	z-index: 1;
	font-size: var(--font-body-18);     /* 18px */
	line-height: var(--lh-body-18);     /* 24px */
	font-weight: 600;
	color: var(--blanco-background);
}

/*--------------------------------------------------------------
# Responsive — Home
--------------------------------------------------------------*/

/* Tablet */
/* Tablet + below — Figma D-00 HOME 768px (194:1722): destacados apilan y los
   titulares del bloque info colapsan a una sola línea inline. No hay frame
   tablet separado: aplicamos el layout 768 desde <64em hacia abajo. */
@media (max-width: 63.99em) {
	/* .home-quote: dimensiones/tipografía ahora fluidas (ver bloque base con clamp). */

	/* Destacados: imagen arriba, info abajo (Figma 194:1912) */
	.home-collection__link,
	.home-collection--reversed .home-collection__link {
		flex-direction: column;
	}

	.home-collection__image {
		flex: none;
		width: 100%;
		/* height: fluid clamp in base rule (400→680→880) */
	}

	.home-collection__info {
		flex: none;
		width: 100%;
		/* min-height + padding: fluid clamp in base rule */
	}

	/* Título y "collection" inline en una sola línea (Figma 194:1915 — "arata collection" único) */
	.home-collection__name {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 0.5ch;
		align-items: baseline;
	}

	.home-collection__title,
	.home-collection__subtitle {
		max-width: none;
		margin: 0;
		text-align: left;
	}

	/* "by valerio sommella" inline también (Figma 194:1920) */
	.home-collection__designer {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 0.5ch;
		align-items: baseline;
	}

	.home-collection__designer {
		justify-content: flex-end;
	}

	.home-collection__designer p,
	.home-collection__designer p:last-child {
		text-align: right;
	}

	/* Sección designer: Figma 222:210 (D-00 HOME 768px) — content arriba 400h,
	   image abajo 840h. DOM order: image → content, así que column-reverse. */
	.home-designer {
		flex-direction: column-reverse;
		height: auto;
	}

	.home-designer__image {
		flex: none;
		width: 100%;
		/* 400px @ 375 | 840px @ 768 */
		height: clamp(25rem, -19.85px + 111.959vw, 52.5rem);
	}

	.home-designer__content {
		flex: none;
		width: 100%;
		/* 400px @ 375→768 | grows to 840px @ 1440 */
		height: clamp(25rem, -103.06px + 65.476vw, 52.5rem);
	}

	/* .home-designer__name: fluid clamp base (32→64). */

	.home-cta__title {
		/* font-size/line-height: fluid clamp base handles 32→72 */
		padding: 0 2rem;
	}
}

/* Mobile < 48em — refinamientos sobre el layout apilado heredado del BP tablet.
   Figma D-00 HOME 375px (222:290) define alturas fijas por sección que NO
   coinciden con el layout desktop/tablet — esto es el grueso del fix mobile. */
@media (max-width: 47.99em) {
	.home-hero {
		height: 100vh;
		height: 100dvh;
	}

	/* Mobile: label en flujo normal encima del texto (no float overlay).
	   DOM: label → text. `margin-bottom` sustituye el `gap` del flex (innecesario). */
	.home-quote__label {
		float: none;
		margin-top: 0;
		margin-right: 0;
	}

	#primary p.home-quote__label {
		margin-bottom: 1rem;                /* 16px — gap label↔text mobile */
	}

	/* Destacados mobile: fluid clamp in base rule handles 400→680→880 / 144→240→880 (Figma 222:1689/1691) */

	/* collection title/designer font-size: fluid clamp base handles 32→72 / 24→64 */

	/* Designer mobile: fluid clamp in base rule handles 400→840 (Figma 231:1434) */

	/* Mobile label/link: Figma 231:1438/1439 (16/24 label, 16/16 link). */
	.home-designer__label {
		font-size: 1rem;
		line-height: 1.5rem;
		letter-spacing: -0.02em;
	}

	.home-designer__link {
		font-size: 1rem;
		line-height: 1rem;
	}

	/* .home-designer__name y .home-designer__quote p: fluid clamp base.
	   font-style: normal en quote ya cubierto por regla base @max-width 47.99em. */

	.home-cta {
		/* height: fluid clamp in base rule (680→848) */
		padding-bottom: 1.5rem;             /* 24px — Figma 231:1445 p=24 */
	}

	.home-cta__title {
		/* font-size/line-height: fluid clamp base handles 32→72 */
		padding: 0 1.5rem;
	}

	.home-cta__button {
		bottom: auto;                       /* reset — flows with flex */
	}

}

/* Ultra-wide ≥120em (1920px) — Figma D-00 HOME 1920px (194:1371):
   hero 1040h, quote 456h, collections image=flex-1 info=487px fixed,
   designer 920h 50/50. */
@media (min-width: 120em) {
	.home-hero {
		height: 100vh;
		height: 100dvh;
	}

	/* .home-quote: altura emerge del content (padding + texto) — no se fija. */

	/* At 1920 the info panel stays 487px fixed; image fills the rest (Figma 194:1375) */
	.home-collection__image {
		flex: 1 1 0%;                       /* fill remaining space */
	}

	.home-collection__info {
		flex: 0 0 30.4375rem;               /* 487px — Figma exact, fixed at 1920 */
	}

	.home-designer {
		height: 57.5rem;                    /* 920px — Figma 194:1648 */
	}

	/* At 1920 the designer split is 50/50 = 960px each (Figma 194:1649/1650) */
	.home-designer__image {
		flex: 0 0 50%;
	}

	.home-designer__content {
		flex: 0 0 50%;
	}

	/* CTA: fluid clamp in base rule handles 680→848. At 1920 clamp caps at 53rem (848px). */
}

/*--------------------------------------------------------------
# Archive — Colecciones (Figma D-01A)
# Title: Semi Bold 64/64, left 24px, top 168px (64 header + 104 gap)
# Big card: 1440×808 image + label
# Grid: 2 cols × 716px, gap 8px, image 472px
# Label: 18px, tracking -0.72px, lowercase, padding 16px
--------------------------------------------------------------*/

#primary.archive-colecciones {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* Figma D-01A Colecciones: título y=168 @1920/1440/768, y=128 @375. Menu h=64 @≥768, 56 @375.
   Margin-top fluid: 72@375 → 104@768+ (mobile bump de 32px). Font fluid: 32@375 → 48@768 → 64@1440+. */
.archive-colecciones__title {
	/* margin-top fluido 72→104 entre 375 y 768 */
	margin: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 1.5rem;
	padding: 0 1.5rem;                   /* 24px lateral — Figma left: 24 */
	/* font-size fluido 48→64 entre 768 y 1440. Mobile override abajo. */
	font-size: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64); /* -0.04em */
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
}

/* Card shared styles */
.col-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--negrotitulares-background);
}

.col-card__image {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.col-card__image img,
.col-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;       /* reunión 2026-04-16: criterio global de recorte */
	display: block;
	transition: opacity var(--motion-slow) var(--ease-default), transform var(--motion-slow) var(--ease-default);
}

.col-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.col-card.has-hover:hover .col-card__img--default,
.col-card.has-hover.is-touching .col-card__img--default {
	opacity: 0;
}

.col-card.has-hover:hover .col-card__img--hover,
.col-card.has-hover.is-touching .col-card__img--hover {
	opacity: 1;
}

/* Cliente 2026-04-17: archive de colecciones conserva el swap de imágenes por opacity
   en hover pero sin el zoom (scale). Solo crossfade de imagen default → hover. */

.col-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem;                        /* 16px */
	font-size: 1.125rem;                  /* 18px */
	line-height: 1.5rem;                  /* 24px */
	letter-spacing: var(--ls-body-18);     /* -0.36px — Figma label-sb/label */
	text-transform: lowercase;
	white-space: nowrap;                  /* Figma node 119:1479 — single line */
	overflow: hidden;
}

.col-card__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
}

.col-card__designer {
	font-weight: 400;
	font-size: 0.875rem;                  /* 14px — Figma node 119:1479 */
	line-height: 1rem;                    /* 16px */
	letter-spacing: -0.28px;
	text-align: right;
	flex-shrink: 0;
}

/* BIG card — first collection, full-width.
   Cliente 2026-04-17 (iter 2): replicar las medidas fijas de
   .single-col__hero (altura 808px) para mantener consistencia visual
   entre archive-coleccion y single-coleccion. */
.col-card--big {
	width: 100%;
}

.col-card--big .col-card__image {
	aspect-ratio: auto;                   /* override del ratio por defecto */
	/* 280px @375 | 552px @768 | 808px @1440 */
	height: clamp(17.5rem, 94.08px + 49.58vw, 50.5rem);
}

/* Grid — remaining collections, 2 columns */
.col-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.5rem;                   /* 8px col */
	/* 16px @375 | 24px @768 | 32px @1440 */
	row-gap: clamp(1rem, 10.37px + 1.502vw, 2rem);
	/* 16px @375 | 24px @768 | 32px @1440 */
	margin-top: clamp(1rem, 10.37px + 1.502vw, 2rem);
	margin-bottom: 4rem;                  /* 64px gap antes del footer — Figma 1440/1920 */
	container-type: inline-size;
}

.col-grid .col-card__image {
	aspect-ratio: 716 / 472;              /* cliente 2026-04-17: card image landscape 716×472 */
}

/* ── Responsive — Archive Colecciones ── */

/* Tablet: single column, cards uniformes 768×528 (Figma 241:1672 sin variante BIG) */
@media (max-width: 63.99em) {
	/* .archive-colecciones__title: Pasada 4 — eliminado height fijo + padding all-sides.
	   Figma 768 (241:1672): title y=168 (=104 from menu), grid y=240.
	   margin-top clamp base ya entrega 104 @768; margin-bottom base 24 entrega gap correcto. */

	.col-grid {
		grid-template-columns: 1fr;
		/* row-gap, margin-top: fluid via clamp in base rule */
		margin-bottom: 4rem;                /* 64px antes footer */
	}

	/* .col-card--big .col-card__image height: fluid via clamp in base rule */

	.col-grid .col-card__image {
		aspect-ratio: 716 / 472;
	}
}

/* Mobile 375: single column, cards 375×368 (Figma 241:1839) */
@media (max-width: 47.99em) {
	.archive-colecciones__title {
		/* Pasada 4 — eliminado height fijo + padding all-sides. Figma 375 (241:1839):
		   title y=128 (=72 from menu h=56), grid y=184. margin-top clamp base entrega
		   72 @375; margin-bottom base 24 entrega gap correcto. */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	}

	.col-grid {
		/* row-gap: fluid via clamp in base rule */
		margin-bottom: 4rem;                /* 64px — Figma footer spacing */
	}

	/* .col-card--big .col-card__image height: fluid via clamp in base rule */

	.col-grid .col-card__image {
		aspect-ratio: 716 / 472;
	}

	.col-card__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;                       /* 4px — Figma gap-[4px] */
		white-space: normal;                /* allow wrap on mobile */
	}

	.col-card__designer {
		text-align: left;
	}
}

/*--------------------------------------------------------------
# Single — Colección (Figma D-01B)
# Titlebar: 64px both sides, hero 1440×808
# Description 640px left + vertical 720px right
# Gallery: horizontal scroll 760px, alternating 1200/600 widths
# Designer: 720+720, photo + color block
--------------------------------------------------------------*/

#primary.single-col {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* Reset inherited styles */
#primary.single-col p { margin-bottom: 0; }
#primary.single-col h1,
#primary.single-col h2 { clear: none; margin: 0; }
#primary.single-col a { color: inherit; text-decoration: none; }
#primary.single-col a:visited { color: inherit; }
#primary.single-col blockquote { margin: 0; }

/* Title bar — Figma 241:2182 cabecera: 88px title area + 808px image = 896px total */
.single-col__titlebar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;                  /* text at top of 88px row — Figma inset top=0 */
	padding: 0 1.5rem;                     /* 24px sides — Figma left-[1.67%] of 1440 = 24px */
	/* 48px @375 | 80px @768 | 104px @1440 */
	margin-top: clamp(3rem, 28.28px + 5.258vw, 6.5rem);
	height: 5.5rem;                        /* 88px — Figma cabecera title area (896 * 9.82%) */
}

.single-col__name {
	/* Figma: 32@375 | 48@768 | 64@1440+. Fluid 768→1440 en base, mobile override abajo. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	color: var(--negrotitulares-background);
}

.single-col__titlebar .single-col__designer {
	margin: 0;                              /* reset UA p margins */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 400;
	color: var(--negrotitulares-background);
	text-align: right;
}

/* Hero image — Figma 241:2574 image 22 w=1440 h=808 (desktop: 896 - 88 title) */
.single-col__hero {
	width: 100%;
	/* 552px @768 | 808px @1440 — mobile uses aspect-ratio override */
	height: clamp(34.5rem, 259.27px + 38.095vw, 50.5rem);
	overflow: hidden;
}

.single-col__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Description + vertical image */
.single-col__body {
	display: flex;
	align-items: stretch;
}

/* Description + materials — Figma D-01B "Img+Texto" (4 viewports):
   1920 241:2400 | 1440 241:2189 | 768 241:2587 | 375 241:2799
   - padding: 40 @desktop/tablet, 24 @mobile → clamp fluido 24→40.
   - desc font: 20/32 @≥768, 16/24 @375 → clamp fluido 16→20, 24→32.
   - gap desc→materials: 120 mínimo. En desktop con height fijo (904/1080) el
     `justify-content: space-between` estira el hueco hasta el fondo del panel.
   - label, material: constantes (no cambian entre viewports). */
.single-col__description {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 7.5rem;                                                      /* 120px mínimo */
	/* clamp 375→768 (salto Figma ocurre en 768, no 1440). Desktop+ queda en max. */
	padding: clamp(1.5rem, 0.5459rem + 4.071vw, 2.5rem);              /* 24 @375 → 40 @768+ */
	color: var(--negrotitulares-background);
}

.single-col__description-text {
	font-size:   clamp(1rem, 0.7614rem + 1.018vw, 1.25rem);           /* 16 @375 → 20 @768+ */
	line-height: clamp(1.5rem, 1.0228rem + 2.036vw, 2rem);            /* 24 @375 → 32 @768+ */
	letter-spacing: -0.02em;                                           /* ratio constante */
}

.single-col__vertical {
	flex: 0 0 50%;
	height: 56.5rem;                       /* 904px */
	overflow: hidden;
}

.single-col__vertical img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Materials — pushed to bottom of description panel via justify-between */
.single-col__materials {
	display: flex;
	flex-direction: column;
}

.single-col__materials-label {
	font-size: 0.875rem;                   /* 14px — Figma 149:457 text-[14px] */
	line-height: 1rem;                     /* 16px — Figma leading-[16px] */
	letter-spacing: -0.02em;               /* -0.28px — Figma tracking-[-0.28px] */
	font-weight: 400;
	text-transform: lowercase;
	margin-bottom: 0.5rem;                 /* 8px — Figma gap-[8px] */
}

.single-col__material {
	font-size: 1.5rem;                     /* 24px */
	line-height: 1rem;                     
	font-weight: 600;
	letter-spacing: -0.04em;               /* Figma tracking -0.96px */
	text-transform: lowercase;
}

/* Gallery — Embla carousel (Figma D-01B: inicia left 0, no gap vertical) */
.single-col__gallery {
	overflow: hidden;
	height: 47.5rem;                       /* 760px */
}

.single-col__gallery-track {
	display: flex;
	gap: 0.5rem;                           /* 8px */
	height: 100%;
}

.single-col__gallery-item {
	flex: 0 0 auto;
	height: 100%;
}

.single-col__gallery-item img {
	height: 100%;
	width: auto;
	display: block;
}

/* Designer section */
.single-col__designer-section {
	content-visibility: auto;
	contain-intrinsic-size: auto none auto 57.5rem;
	display: flex;
	width: 100%;
	margin-top: 0;
}

.single-col__designer-image {
	flex: 0 0 50%;
	/* 400px @375 | 840px @768+ */
	height: clamp(25rem, -19.85px + 111.96vw, 52.5rem);
	overflow: hidden;
}

.single-col__designer-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-col__designer-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.5rem, 0.5459rem + 4.071vw, 2.5rem);  /* 24→40 fluid */
	/* 400px @375-768 | 840px @1440 */
	height: clamp(25rem, -103.05px + 65.476vw, 52.5rem);
	background: var(--mantequilla-background);
}

.single-col__designer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-body-18);        /* 18px — Figma label */
	line-height: var(--lh-body-18);        /* 24px */
	letter-spacing: var(--ls-body-18);     /* -0.02em */
	color: var(--negrotitulares-background);
}

.single-col__designer-top a {
	font-style: italic;
}

.single-col__designer-bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.single-col__designer-name {
	font-size:   clamp(2rem, 0.0919rem + 8.142vw, 4rem);   /* 32→64 fluid */
	line-height: clamp(2rem, 0.0919rem + 8.142vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
}

.single-col__designer-quote p {
	font-size:   clamp(1rem, 0.5229rem + 2.036vw, 1.5rem);   /* 16→24 fluid */
	line-height: clamp(1.5rem, 1.0228rem + 2.036vw, 2rem);    /* 24→32 fluid */
	letter-spacing: -0.02em;
	font-style: italic;                     /* override a `normal` en mobile (<48em) */
	color: var(--negrotitulares-background);
}

@media (max-width: 47.99em) {
	.single-col__designer-quote p { font-style: normal; }
}

/* ── Responsive — Single Colección ── */

/* Tablet 768 — Figma D-01B FICHA COLECCION 768px (241:2475) */
@media (max-width: 63.99em) {
	.single-col__titlebar {
		flex-direction: column;
		gap: 0.5rem;
		/* margin-top: fluid via clamp in base rule */
		height: auto;
		padding: 1.5rem;                   /* 24px */
		padding-bottom: 1.5rem;            /* 24px gap to hero — matches single-dis__title */
	}

	/* .single-col__name / .single-col__designer: font-size ya fluid en la base (48→64 @768→1440). */
	/* .single-col__hero height: fluid via clamp in base rule (552→808) */

	/* Body tablet stacked: text arriba 576 + image abajo 904, total 1480 */
	.single-col__body {
		flex-direction: column;
	}

	.single-col__description {
		flex: none;
		width: 100%;
		/* padding, font, lh fluidos vía clamp base. Altura definida por sibling
		   .single-col__vertical (tablet 576) + align-items:stretch del body. */
	}

	.single-col__vertical {
		flex: none;
		width: 100%;
		height: 56.5rem;                   /* 904px — Figma 241:2592 tablet */
	}

	.single-col__gallery {
		height: 23.75rem;                  /* 380px — Figma 241:2593 tablet */
	}

	.single-col__gallery-track {
		gap: 0.25rem;                      /* 4px — Figma 241:2593 gap-[4px] */
	}

	/* gallery items: width auto from base (image determines width at gallery height) */

	/* Designer section tablet stacked: content 400 + image 840, total 1240 */
	.single-col__designer-section {
		flex-direction: column-reverse;    /* content arriba, image abajo — Figma 241:2624 */
	}

	.single-col__designer-image {
		flex: none;
		width: 100%;
		/* height: fluid via clamp in base rule (400→840) */
	}

	.single-col__designer-content {
		flex: none;
		width: 100%;
		/* height: fluid via clamp in base rule (400→840 @768→1440) */
		/* padding fluid vía clamp base. */
	}
}

/* Mobile 375 — Figma D-01B FICHA COLECCION 375px (241:2661) */
@media (max-width: 47.99em) {
	.single-col__titlebar {
		/* margin-top: fluid via clamp in base rule */
		height: auto;
		padding: 1.5rem;
		padding-bottom: 1.5rem;            /* 24px gap to hero — matches single-dis__title */
	}

	.single-col__name,
	.single-col__titlebar .single-col__designer {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	}

	.single-col__titlebar .single-col__designer {
		text-align: left;
	}

	.single-col__hero {
		height: auto;
		aspect-ratio: 375 / 400;
	}

	/* Body mobile stacked: text auto + image 480.
	   .single-col__description: padding, font, lh, gap ya fluidos vía clamp base. */

	.single-col__vertical {
		height: auto;
		aspect-ratio: 375 / 400;
	}

	.single-col__gallery {
		height: 23.75rem;                  /* 380px — Figma 241:2807 */
		margin-left: 0;
		margin-top: 0.5rem;                /* 8px — Figma mobile body-to-gallery gap */
	}

	.single-col__gallery-track {
		gap: 0.25rem;                      /* 4px — Figma 241:2807 gap-[4px] */
	}

	/* Designer section mobile stacked: content 400 + image 400, total 800 */
	.single-col__designer-section {
		flex-direction: column-reverse;
	}

	.single-col__designer-image {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 375 / 400;
	}

	.single-col__designer-content {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 375 / 400;
		/* padding, font-size/lh de name y quote p: fluid vía clamp base. */
	}

	/* Mobile label/link: Figma 241:2819 (16/16 link) + 16/24 label */
	.single-col__designer-top {
		font-size: 1rem;
	}
	.single-col__designer-top a {
		font-size: 1rem;
		line-height: 1rem;
	}
}

/* Large ≥120em (1920) — body IMG+Texto 1080h + designer 920h (Figma 241:2408) */
@media (min-width: 120em) {
	.single-col__description,
	.single-col__vertical {
		height: 67.5rem;                   /* 1080px — Figma 241:2399 large */
	}

	.single-col__designer-image,
	.single-col__designer-content {
		height: 57.5rem;                   /* 920px — Figma 241:2408 large */
	}
}

/*--------------------------------------------------------------
# Archive — Productos (Figma D-02A)
# Background: piedra, 4 cols × 354px, image 472px
# Title: Semi Bold 64px, filters: 14px gap 16px
# Label: Semi Bold 16px, tracking -0.64px, lowercase
--------------------------------------------------------------*/

#primary.archive-productos {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	background: var(--piedra-background);
}

.archive-productos__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Padding-top fluid 72→104 @375→768. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 0 1.5rem;
	text-transform: lowercase;
}

/* Filter bar — Figma D-02A fija 72h, nowrap + scroll-x para data > mockup */
.archive-productos__filters {
	display: flex;
	gap: 1rem;                             /* 16px — Figma */
	align-items: center;
	height: 4.5rem;                        /* 72px — Figma D-02A h=72 */
	margin-top: 1rem;                      /* 16px — Figma gap title-filter (232→248) */
	padding: 0 1.5rem;                     /* 24px horizontal, sin vertical (height fija) */
	font-size: var(--font-body-16);        /* 16px — Figma D-02A filters */
	line-height: var(--lh-body-16);        /* 24px */
	letter-spacing: var(--ls-body-16);     /* -0.32px */
	color: var(--negrotitulares-background);
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.archive-productos__filters::-webkit-scrollbar {
	display: none;
}

.archive-productos__filters a {
	color: #595959;                        /* WCAG AA — antes opacity 0.5 daba 2.85:1 vs piedra bg */
	text-decoration: none;
	transition: color var(--motion-fast) var(--ease-default);
	white-space: nowrap;
	flex-shrink: 0;
}

.archive-productos__filters a:hover,
.archive-productos__filters a.is-active {
	color: var(--negrotitulares-background);
}

.prod-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 0.5rem;                    /* 8px — Figma D-02A col-gap */
	row-gap: 1.5rem;                       /* 24px — Figma D-02A delta 552-528 */
	margin-top: 1rem;                      /* 16px — Figma gap filter-grid (320→336) */
	container-type: inline-size;
}

.prod-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--negrotitulares-background);
}

.prod-card__image {
	aspect-ratio: 354 / 472;
	overflow: hidden;
}

.prod-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-default) var(--ease-default);
}

.prod-card:hover .prod-card__image img {
	transform: scale(1.05);
}

.prod-card__name {
	display: block;
	padding: 1rem;                         /* 16px todos lados — Figma Frame 61 label 56h */
	/* 14px @ 375 | 18px @ 768 */
	font-size:   clamp(0.875rem, 11.8px + 0.509vw, 1.125rem);
	line-height: clamp(1rem, 12.94px + 0.764vw, 1.5rem);
	font-weight: 600;
	letter-spacing: var(--ls-body-18);     /* -0.02em = -0.36px */
	text-transform: lowercase;
}

/* ── Pagination ── */
.archive-productos .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 1rem;
}

.archive-productos .nav-links a,
.archive-productos .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	letter-spacing: -0.28px;
	color: var(--negrotitulares-background);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-fast) var(--ease-default);
}

.archive-productos .nav-links a:hover,
.archive-productos .nav-links a:focus-visible {
	border-bottom-color: var(--negrotitulares-background);
}

.archive-productos .nav-links .current {
	font-weight: 600;
	border-bottom-color: var(--negrotitulares-background);
}

.archive-productos .nav-links .prev,
.archive-productos .nav-links .next {
	font-size: 1.125rem;
}

/* ── Responsive — Archive Productos ── */

/* Tablet 768 — Figma D-02A 768px (241:3822) 2-col, card 380×528 */
@media (max-width: 63.99em) {
	/* .archive-productos__title: font-size ya fluid en la base (48→64 @768→1440) */

	.archive-productos__filters {
		margin-top: 0.5rem;                 /* 8px — Figma tablet filter y=224 vs title end ~216 */
	}

	.prod-grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 0.5rem;                 /* 8px — Figma tablet gap filter-grid (296→304) */
	}

	.prod-card__image {
		aspect-ratio: 380 / 472;            /* Figma tablet card image 380×472 */
	}
}

/* Mobile 375 — Figma D-02A 375px (241:4167) 2-col, card 183.5×260 */
@media (max-width: 47.99em) {
	.archive-productos__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 4.5rem 1rem 0;             /* 72px top (Figma 128 - header 56) */
	}

	.archive-productos__filters {
		height: 4rem;                       /* 64px — Figma mobile (241:4303) */
		margin-top: 0;                      /* Figma mobile gap title-filter = 0 */
		padding: 0 1rem;
		font-size: 0.875rem;                /* 14px */
		gap: 0.75rem;                       /* 12px */
	}

	.prod-grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 0;                      /* Figma mobile grid starts at 224 = filter end */
	}

	.prod-card__image {
		aspect-ratio: 183.5 / 212;          /* Figma mobile card image 183.5×212 */
	}

	.prod-grid {
		row-gap: 1rem;                      /* 16px — Figma mobile delta 276-260 = 16 */
	}

	.prod-card__name {
		padding: 0.75rem 1rem;              /* 12px top/bottom + 16 sides → label 48h */
		/* font-size/line-height: fluid clamp base handles 14→18 */
	}
}

/* Large ≥120em (1920) — Figma D-02A 1920 (241:3010): rows 704px (vs 528 en desktop) */
@media (min-width: 120em) {
	.prod-card__image {
		aspect-ratio: 472 / 648;            /* Figma 1920: image fills flex-1 dentro de row 704, label 56 → image ~648 */
	}
}

/*--------------------------------------------------------------
# Single — Producto (Figma D-02B)
# Hero: pill-shape 575×800, centered
# Title: Semi Bold 48/48, tracking -1.92px
# Detail: bg gris, image left 41.67%, content right
# Specs: table with separator lines
# Designer: 50/50 photo + color block
--------------------------------------------------------------*/

#primary.single-prod {
	max-width: none;
	padding: 0;
	overflow-x: clip;
}

#primary.single-prod p { margin-bottom: 0; }
#primary.single-prod h1,
#primary.single-prod h2 { clear: none; margin: 0; }
#primary.single-prod a { color: inherit; text-decoration: none; }
#primary.single-prod a:visited { color: inherit; }
#primary.single-prod blockquote { margin: 0; }
#primary.single-prod dl { margin: 0; }

/* Hero — pill shape + títulos a los lados (Figma Component 2: 1440×848) */
/* Hero producto — Figma D-02B (2 diseños, 4 viewports):
   · Desktop ≥1024: 3-col horizontal (título | pill 575×h | diseñador)
   · Tablet/mobile <1024: texto apilado + imagen full-width NO rounded abajo.
   Fonts fluid clamp 32@375 → 48@768+ (step en 768, constante arriba). */
.single-prod__hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	height: 100dvh;
	padding: 0 1.5rem;
	margin-top: 0;
}

.single-prod__hero-pill {
	/* scales with viewport width */
	width: clamp(18rem, 10rem + 18vw, 36rem);
	height: min(50rem, calc(100dvh - var(--header-height) - 4rem));
	/* border-radius: 18.75rem; */
	overflow: hidden;
	z-index: 0;
}

.single-prod__hero-pill img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.single-prod__name,
.single-prod__designer-name {
	/* 32px @ 375 | 48px @ 768 | 48px @ 1440 | 48px @ 1920 */
	font-size:   clamp(2rem, 16.73px + 4.07vw, 3rem);
	line-height: clamp(2rem, 16.73px + 4.07vw, 3rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	text-transform: lowercase;
	position: relative;
	z-index: 1;
}

.single-prod__name {
	grid-column: 1;
	text-align: left;
}

.single-prod__designer-name {
	grid-column: 3;
	font-weight: 400;
	text-align: right;
}

/* Ambient lifestyle — NO aparece en ningún viewport Figma D-02B (verificado
   con baselines 1920/1440/768/375 en Fase 3 R0, 2026-04-17). El slot entre
   hero-pill y detail está reservado para: nada (desktop 1440/1920), o para
   gallery 2×2 (tablet/mobile). Regla: ambient siempre oculto. Se mantiene
   el markup condicional en el template por compatibilidad legacy, pero el
   CSS garantiza que nunca es visible. */
.single-prod__ambient {
	display: none;
}

/* Gallery thumbs 2×2 — Figma D-02B 241:5372 (768) / 241:5745 (375)
   Sustituye el ambient en tablet/mobile. Oculta en desktop. */
.single-prod__gallery {
	display: none;
}

/* Detail block — Figma: imagen 599×848 cover (sin bg) + panel gris 841×848 */
.single-prod__data {
	display: flex;
	align-items: stretch;
	min-height: 53rem;                     /* 848px — Figma 1440 */
	margin-top: 1.5rem;                    /* 24px — Figma desktop 1440 gap hero→data (912→936) */
}

.single-prod__detail {
	flex: 1;
	background: var(--gris-background);
	display: flex;
	flex-direction: column;
}

/* Detail-image = Embla carousel con 2 modos según viewport:
   · ≥64em (desktop): fade slideshow con autoplay (clase `.is-fade` vía JS).
   · <64em (tablet/mobile): drag-scroll horizontal con slides fijos 600×760 (Figma).
   cursor grab/grabbing viene de la regla global `[data-embla]`. */
.single-prod__detail-image {
	flex: 0 0 41.60%;                      /* 599/1440 desktop */
	overflow: hidden;
	position: relative;                     /* anchor para slides absolute en fade */
}

.single-prod__detail-slides {
	display: flex;
	height: 100%;
}

.single-prod__detail-slide {
	flex: 0 0 100%;                        /* 1 slide visible en desktop */
	min-width: 0;
	height: 100%;
	cursor: pointer;
}

.single-prod__detail-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* ── Modo fade (desktop ≥64em): JS añade `.is-fade` cuando vw ≥ data-fade-min.
   Slides absolute superpuestos; solo `.is-selected` visible. Embla dispara
   el cambio de slide (autoplay) y sincroniza la clase vía event `select`. */
.single-prod__detail-image.is-fade .single-prod__detail-slides {
	transform: none !important;            /* anular translate del Embla drag */
}

.single-prod__detail-image.is-fade .single-prod__detail-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--motion-deliberate) var(--ease-default);
	pointer-events: none;
}

.single-prod__detail-image.is-fade .single-prod__detail-slide.is-selected {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.single-prod__detail-content {
	flex: 1;
	/* 24px @ 375 | 64px @ 768 | 64px @ 1440 */
	padding: clamp(1.5rem, -14.17px + 10.18vw, 4rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.single-prod__detail-top {
	display: flex;
	flex-direction: column;
	gap: 1rem;                             /* 16px — Figma */
}

.single-prod__detail-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;                 /* Figma: items-end */
	gap: 2rem;                             /* 32px — Figma */
	margin-top: auto;                      /* empuja al fondo sin cortar contenido */
}

.single-prod__ref {
	font-size: var(--font-header-nav);
	line-height: 1rem;
	letter-spacing: var(--ls-header-nav);
	color: var(--negrotitulares-background);
}

.single-prod__description {
	font-size: 1.25rem;
	line-height: 2rem;
	letter-spacing: var(--ls-body-20);     /* -0.02em — Figma body-copy */
	color: var(--negrotitulares-background);
}

.single-prod__description p {
	margin-bottom: 1rem;
}

.single-prod__description p:last-child {
	margin-bottom: 0;
}

.single-prod__download {
	font-size: var(--font-body-18);
	font-weight: 600;
}

/* Specs table — Figma: 3 rows, gap 24 entre rows, cada row con line-separator top + content gap 16 */
.single-prod__specs {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                           /* 24px — Figma gap entre rows */
	width: 100%;
}

.single-prod__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 1rem;                     /* 16px — Figma gap entre line y contenido */
	border-top: 1px solid rgba(29, 29, 27, 0.15);
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	text-transform: lowercase;
}

.single-prod__spec dt {
	font-weight: 400;
}

.single-prod__spec dd {
	font-size: var(--font-body-18);        /* 18px — Figma label-sb */
	line-height: var(--lh-body-18);        /* 24px */
	letter-spacing: var(--ls-body-18);     /* -0.36px */
	font-weight: 600;                      /* Semi Bold — Figma spec */
	text-align: right;
	margin: 0;
}

/* Gris spacer — Figma D-02B desktop 1440 únicamente (Rectangle 21 y=1784 h=72).
   NO existe en large (1920) donde data→slider sin gap; tampoco en tablet/mobile
   donde la gallery 768/375 ocupa el espacio entre detail y slider. */
.single-prod__gris-spacer {
	height: 4.5rem;                        /* 72px — Figma desktop 1440 */
	background: var(--gris-background);
}

@media (min-width: 120em) {
	.single-prod__gris-spacer { display: none; }
}

@media (max-width: 63.99em) {
	.single-prod__gris-spacer { display: none; }
}

/* Designer section — reuses single-col pattern */
.single-prod__designer-section {
	display: flex;
	width: 100%;
}

.single-prod__designer-image {
	flex: 0 0 50%;
	/* 400px @ 375 | 840px @ 768 | 840px @ 1440 */
	height: clamp(25rem, -19.85px + 111.96vw, 52.5rem);
	overflow: hidden;
}

.single-prod__designer-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-prod__designer-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.5rem, 0.5459rem + 4.071vw, 2.5rem);  /* 24→40 fluid */
	/* 400px @ 375 | 400px @ 768 | 840px @ 1440 */
	height: clamp(25rem, -102.86px + 65.48vw, 52.5rem);
	background: var(--mantequilla-background);
}

.single-prod__designer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	color: var(--negrotitulares-background);
}

.single-prod__designer-top a {
	font-style: italic;
}

.single-prod__designer-bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.single-prod__designer-bottom h2 {
	font-size:   clamp(2rem, 0.0919rem + 8.142vw, 4rem);   /* 32→64 fluid */
	line-height: clamp(2rem, 0.0919rem + 8.142vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
}

.single-prod__designer-quote {
	font-size:   clamp(1rem, 0.5229rem + 2.036vw, 1.5rem);   /* 16→24 fluid */
	line-height: clamp(1.5rem, 1.0228rem + 2.036vw, 2rem);    /* 24→32 fluid */
	letter-spacing: -0.02em;
	font-style: italic;                     /* override a `normal` en mobile (<48em) */
	color: var(--negrotitulares-background);
	margin: 0;
}

@media (max-width: 47.99em) {
	.single-prod__designer-quote { font-style: normal; }
}

/* ── Responsive — Single Producto ── */

/* Tablet 768 — Figma D-02B 768 (241:5176): hero 848 (title 152 + image 680),
   gallery nueva 380 (bleed 1512 — ACF pendiente), data 848 stacked, slider 672,
   designer 1240 (content 400 + image 840) */
@media (max-width: 63.99em) {
	.single-prod__hero {
		grid-template-columns: 1fr;
		min-height: 100dvh;
		height: auto;
		margin-top: 0;
		padding: var(--header-height) 1.5rem 1.5rem;
		gap: 0.5rem;
		align-content: center;
	}

	.single-prod__hero-pill {
		width: 100%;
		/* 475px @ 375 | 680px @ 768 — Figma 411:1404 / 241:5290 */
		height: min(clamp(29.6875rem, 279.4px + 52.16vw, 42.5rem), calc(100dvh - var(--header-height) - 7rem));
		border-radius: 0;
		justify-self: stretch;
		margin-top: 1.5rem;
		order: 1;
	}

	.single-prod__hero-pill img {
		object-fit: cover;
	}

	.single-prod__name,
	.single-prod__designer-name {
		grid-column: 1;
		text-align: left;
	}

	/* Gallery visible ≤1023px (tablet/mobile) */
	.single-prod__gallery {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0.5rem;                         /* 8px */
		list-style: none;
		margin: 1.5rem 0 0;                  /* 24px gap hero→gallery */
		padding: 0 1.5rem;                   /* 24px lateral — Figma tablet */
		height: 23.75rem;                    /* 380px — Figma 241:5372 */
	}
	.single-prod__gallery-item {
		overflow: hidden;
		background: var(--gris-background);
		margin: 0;
	}
	.single-prod__gallery-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.single-prod__data {
		flex-direction: column;
		height: auto;
		margin-top: 1.5rem;                  /* 24px — gallery ya ocupa el slot */
	}

	.single-prod__detail {
		flex: none;                          /* override base flex:1 in column layout */
		min-height: 53rem;                   /* 848px — Figma tablet content block */
		height: auto;
	}

	/* Tablet: embla carousel as independent horizontal scroll gallery.
	   Height determined by slide aspect-ratio (375/475 — designer decision). */
	.single-prod__detail-image {
		display: block;
		flex: none;
		width: 100%;
		height: auto;
	}

	.single-prod__detail-slides {
		gap: 0.25rem;                        /* 4px — Figma gap-1 */
		padding-inline: 1.5rem;              /* 24px inset Figma */
		height: auto;
	}

	.single-prod__detail-slide {
		flex: 0 0 37.5rem;                   /* 600px — Figma slide width */
		aspect-ratio: 375 / 475;
		height: auto;
	}

	.single-prod__detail-content {
		/* padding fluid vía clamp base (24→64) */
	}

	/* Designer section — Figma 241:5403 tablet: content 400 arriba + image 840 abajo */
	.single-prod__designer-section {
		flex-direction: column-reverse;
	}

	.single-prod__designer-image {
		flex: none;
		width: 100%;
		/* height fluid vía clamp base (400→840) */
	}

	.single-prod__designer-content {
		flex: none;
		width: 100%;
		/* height fluid vía clamp base (400→840 over 768→1440) */
		padding: 2.5rem;
	}
}

/* Mobile 375 — Figma D-02B 375 (241:5610) */
@media (max-width: 47.99em) {
	.single-prod__hero {
		min-height: 100dvh;
		height: auto;
		padding: var(--header-height) 1.5rem 1.5rem;
	}

	.single-prod__hero-pill {
		/* height fluid vía clamp tablet MQ (475→680) */
		margin-top: 1rem;
	}

	/* .single-prod__name / __designer-name: font-size/lh fluid vía clamp base (32→48). */

	.single-prod__description {
		font-size: 1rem;                     /* 16px — Figma mobile 251:5756 */
		line-height: 1.5rem;                 /* 24px — Figma mobile leading-[24px] (era 26px) */
	}

	/* Gallery mobile: 190px — Figma 241:5745 */
	.single-prod__gallery {
		height: 11.875rem;                   /* 190px */
		gap: 0.25rem;                        /* 4px */
		padding: 0 1rem;                     /* 16px lateral — Figma mobile */
		margin-top: 1rem;                    /* 16px gap hero→gallery */
	}

	.single-prod__data {
		margin-top: 1rem;                    /* 16px — Figma mobile gap */
	}

	.single-prod__detail-image {
		height: auto;                        /* let slides determine height via aspect-ratio */
	}

	.single-prod__detail-slide {
		flex: 0 0 85%;                       /* ~319px at 375vw — near full-width peek */
		aspect-ratio: 375 / 475;
		height: auto;
	}

	.single-prod__detail-slides {
		gap: 0.125rem;                       /* 2px — Figma gap-0.5 */
		padding-inline: 1rem;                /* 16px — Figma mobile */
	}

	.single-prod__detail {
		height: auto;
		min-height: 47.5rem;                 /* 760px — Figma 241:5753 Frame 57 mobile */
	}

	.single-prod__detail-content {
		/* padding fluid vía clamp base (24→64) */
	}

	/* Specs mobile: 14px both dt and dd — Figma 251:5762 mobile */
	.single-prod__spec {
		font-size: 0.875rem;                 /* 14px — Figma mobile */
		line-height: 1rem;                   /* 16px — Figma mobile leading-[16px] */
	}

	.single-prod__spec dd {
		font-size: 0.875rem;                 /* 14px — Figma mobile (was 18px) */
		line-height: 1rem;
	}

	/* Designer mobile: height fluid vía clamp base */
	.single-prod__designer-image {
		/* height fluid vía clamp base (400→840) */
	}

	.single-prod__designer-content {
		/* height fluid vía clamp base (400→840 over 768→1440) */
		padding: 1.5rem;
	}

	.single-prod__designer-bottom h2 {
		font-size: 2rem;
		line-height: 2rem;                   /* 32px — Figma 251:5782 leading-[32px] (era 36px) */
	}

	/* Quote mobile: no italic, 16px — Figma 251:5783 */
	.single-prod__designer-quote {
		font-size: 1rem;                     /* 16px — Figma mobile */
		line-height: 1.5rem;                 /* 24px */
		font-style: normal;                  /* Figma mobile: Regular, not Italic */
		letter-spacing: var(--ls-body-16);   /* -0.32px — Figma mobile */
	}
}

/* Large ≥120em (1920) — Figma D-02B 1920 (241:4529): hero 960, data 1024, designer 920 */
@media (min-width: 120em) {
	.single-prod__hero {
		height: 100dvh;
	}

	.single-prod__detail {
		min-height: 64rem;                   /* 1024px — Figma 241:5038 Data Producto large */
		height: auto;
		margin-top: 0;                       /* Figma large: data empieza exactamente en hero end */
	}

	.single-prod__designer-image,
	.single-prod__designer-content {
		height: 57.5rem;                     /* 920px — Figma 241:5137 designer large */
	}
}

/*--------------------------------------------------------------
# Shared — Products Slider (Figma: DESKTOP / 06 Slider Productos)
# gris bg, 672px height, 4+ product cards, horizontal scroll
# Used in: single-coleccion, single-producto, (future: home refactor)
--------------------------------------------------------------*/

.products-slider {
	content-visibility: auto;
	contain-intrinsic-size: auto none auto clamp(35rem, 453.13px + 28.50vw, 42rem);
	position: relative;
	background: var(--gris-background);
	/* 560px @ 375 | 672px @ 768 | 672px @ 1440 */
	height: clamp(35rem, 453.13px + 28.50vw, 42rem);
	padding: 0.5rem 0;                    /* 8px top/bottom */
	overflow: hidden;
}

.products-slider__header {
	position: absolute;
	top: 2.5rem;                          /* 40px */
	left: 2.5rem;                         /* 40px */
	right: 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	z-index: 1;
	pointer-events: none;
}

.products-slider__header > * {
	pointer-events: auto;
}

.products-slider__title {
	margin: 0;
	/* 24px @ 375 | 48px @ 768 | 48px @ 1440 */
	font-size: clamp(1.5rem, 1.10px + 6.11vw, 3rem);
	line-height: clamp(1.5rem, 1.10px + 6.11vw, 3rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: none;                 /* override legacy `.single-* section h2 { uppercase }` */
}

.products-slider__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                  /* 44px tap target */
	padding-block: 0.625rem;
	margin-block: -0.625rem;              /* compensa */
	font-size: var(--font-body-18);       /* 18px */
	line-height: var(--lh-body-18);
	color: var(--negrotitulares-background);
	font-style: italic;
	background-origin: content-box;
}

.products-slider__embla {
	overflow: hidden;
	height: 100%;
	padding-left: 1.5rem;                 /* 24px */
}

.products-slider__track {
	display: flex;
	height: 100%;
	/* No CSS gap — Embla loop requires margin on slides for consistent spacing */
}

.products-slider__card {
	flex: 0 0 28.625rem;                  /* 458px — Figma fijo en 1920/1440/768 (node 241:2447-2462) */
	margin-right: 0.5rem;                 /* 8px — gap between slides (Embla loop compatible) */
	text-decoration: none;
	color: var(--negrotitulares-background);
	display: flex;
	flex-direction: column;
}

/* Home variant: card 458px fijo igual que base (Figma 36:290 — bleed sobre 1888px).
   Regla heredada; se mantiene el selector por estabilidad de cascada. */
.products-slider--home .products-slider__card {
	flex: 0 0 28.625rem;
}

.products-slider__card-image {
	height: calc(100% - 3.5rem);          /* full height minus label */
	overflow: hidden;
}

.products-slider__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-default) var(--ease-default);
}

.products-slider__card:hover .products-slider__card-image img {
	transform: scale(1.03);
}

.products-slider__card-label {
	display: flex;
	gap: 0.375rem;                        /* 6px */
	align-items: center;
	padding: 1rem;                        /* 16px */
	font-size: var(--font-label-slider);  /* 24px */
	line-height: var(--lh-label-slider);
	letter-spacing: var(--ls-label-slider);
	text-transform: lowercase;
}

.products-slider__card-collection {
	font-weight: 600;
}

.products-slider__card-type {
	font-weight: 400;
}

/* ── Responsive — Products Slider ── */

@media (max-width: 63.99em) {
	/* Tablet (Figma 241:2601 @768): card 458px se mantiene fijo — scroll horizontal muestra ~1.5 cards */
	.products-slider__card {
		flex: 0 0 28.625rem;
	}
}

@media (max-width: 47.99em) {
	.products-slider {
		/* height fluid vía clamp base (560→672) */
	}

	.products-slider__title {
		/* font-size/line-height fluid vía clamp base (24→48) */
		/* letter-spacing constant -0.04em vía base */
	}

	.products-slider__link {
		font-size: 1rem;                  /* 16px — Figma 231:1431 exact */
		line-height: 1rem;                /* 16px */
	}

	.products-slider__header {
		top: 1.6875rem;                   /* 27px — Figma 231:1430 y=27 */
		left: 1.5rem;                     /* 24px — Figma 231:1430 x=24 */
		right: 1.5rem;
	}

	/* Mobile 375: Figma 231:1409 primera card en x=0 (full-width, sin peek).
	   No aplicamos padding-left → card ocupa 100% del viewport. */
	.products-slider__embla {
		padding-left: 0;
	}

	/* Mobile 375 (Figma 241:2825): card ocupa 100% del viewport, image 496h.
	   El slider usa scroll horizontal mostrando 1 card a la vez. */
	.products-slider__card {
		flex: 0 0 100%;
		min-width: 0;
	}

	.products-slider--home .products-slider__card {
		flex: 0 0 100%;
		min-width: 0;
	}

	.products-slider__card-label {
		padding: 1rem;                    /* 16px — Figma 231:1412 p=16 */
	}

	/* Mobile: name 18px SB, type 14px Reg — Figma 231:1413/1414 */
	.products-slider__card-collection {
		font-size: 1.125rem;              /* 18px — Figma 231:1413 exact */
		line-height: 1.5rem;              /* 24px */
		letter-spacing: -0.02em;          /* -0.36px */
	}

	.products-slider__card-type {
		font-size: 0.875rem;              /* 14px — Figma 231:1414 exact */
		line-height: 1rem;                /* 16px */
		letter-spacing: -0.02em;          /* -0.28px */
	}
}

/*--------------------------------------------------------------
# Archive — Diseñadores (Figma D-03A, node 163:687)
# Grid 2 cols, square images 716×716, gap 8px
# Title: Semi Bold 64px, card name: Semi Bold 32px
--------------------------------------------------------------*/

#primary.archive-disenadores {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* Reset inherited styles */
#primary.archive-disenadores p { margin-bottom: 0; }
#primary.archive-disenadores h1,
#primary.archive-disenadores h2 { clear: none; margin: 0; }
#primary.archive-disenadores a { color: inherit; text-decoration: none; }
#primary.archive-disenadores a:visited { color: inherit; }

.archive-disenadores__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Padding-top fluid 72→104 @375→768. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 0 1.5rem;
	text-transform: lowercase;
}

/* Grid — 2 columns desktop, Figma D-03A (251:5911 716×800) */
.dis-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.5rem;                   /* 8px — Figma D-03A */
	/* 24px @ 375 | 24px @ 768 | 32px @ 1440 */
	row-gap: clamp(1.5rem, 14.86px + 1.19vw, 2rem);
	margin-top: 1.5rem;                   /* 24px gap después del título (Figma 232→256) */
	margin-bottom: 4.5rem;                /* 72px gap antes del footer (Figma 4352→4424) */
	container-type: inline-size;
}

/* Card — altura fija para cerrar cascade al footer */
.dis-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: var(--negrotitulares-background);
	/* 440px @ 375 | 800px @ 768 | 800px @ 1440 */
	height: clamp(27.5rem, 96.49px + 91.6vw, 50rem);
}

.dis-card__image {
	width: 100%;
	flex: 1;                              /* fill card, leave label space */
	overflow: hidden;
	background: var(--gris-background);    /* fallback when no photo */
}

.dis-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dis-card:hover .dis-card__image img {
	transform: scale(1.03);
}

.dis-card__label {
	width: 100%;
	padding: 1.5rem;                      /* 24px */
}

.dis-card__name {
	/* 24px @ 375 | 32px @ 768 */
	font-size:   clamp(1.5rem, 16.36px + 2.036vw, 2rem);
	line-height: 2rem;
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
}

/* ── Responsive — Archive Diseñadores ── */

/* Large ≥120em (1920) — Figma D-03A 1920 (251:5821): card 956×856 */
@media (min-width: 120em) {
	.dis-card {
		height: 53.5rem;                  /* 856px — Figma 251:5824 */
	}

	.dis-grid {
		margin-bottom: 5rem;              /* 80px — Figma 4632→4712 footer */
	}
}

/* Tablet 768 — Figma D-03A 768 (252:6049): 1-col, card 768×800 */
@media (max-width: 63.99em) {
	/* .archive-disenadores__title: font-size ya fluid en la base (48→64 @768→1440) */

	.dis-grid {
		grid-template-columns: 1fr;
		margin-top: 1.5rem;
		margin-bottom: 3.75rem;           /* 60px gap antes footer — Figma 8144+240→8445 */
	}

	/* .dis-card height: fluid clamp in base (440→800 @375→768) */
}

/* Mobile 375 — Figma D-03A 375 (252:6230): 1-col, card 375×440 */
@media (max-width: 47.99em) {
	.archive-disenadores__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 4.5rem 0 0 1.5rem;       /* 72px top (128-56), 24px left — Figma 252:6319 */
	}

	.dis-grid {
		grid-template-columns: 1fr;
		margin-top: 1.5rem;
		margin-bottom: 4rem;              /* 64px gap antes footer — Figma mobile 4800→4864 */
	}

	/* .dis-card height: fluid clamp in base (440→800 @375→768) */

	/* dis-card__name: fluid clamp base handles 24→32 */

	.dis-card__label {
		padding: 1rem;
	}
}

/*--------------------------------------------------------------
# Single — Diseñador / Ficha (Figma D-03B, node 163:1136)
# Title: 64pt Semi Bold
# Hero: 720+720, 904px, photo left + bio right on colored bg
# Gallery: horizontal scroll 760px, mix 1200/600 widths
# Quote: 56pt Semi Bold, indented, label at top
# Full-width image: 1440×(aspect), 100% width
--------------------------------------------------------------*/

#primary.single-dis {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* Reset inherited styles.
   Excluye .home-quote__label — ese elemento es parte del componente compartido
   .home-quote y necesita conservar su margin-top calculado (cap-center align
   del texto del quote). Sin el :not(), el label queda desalineado en single-dis
   vs nosotros. Reunión 2026-04-17. */
#primary.single-dis p:not(.home-quote__label) { margin: 0; }
#primary.single-dis h1,
#primary.single-dis h2 { clear: none; margin: 0; }
#primary.single-dis a { color: inherit; text-decoration: none; }
#primary.single-dis a:visited { color: inherit; }
#primary.single-dis blockquote { margin: 0; }

/* Title */
.single-dis__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Padding-top fluid 72→104 @375→768. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	color: var(--negrotitulares-background);
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 1.5rem 1.5rem;
	text-transform: lowercase;
}

/* Hero: photo + bio — Figma D-03B IMG+Texto 1440×904 desktop */
.single-dis__hero {
	display: flex;
	width: 100%;
	height: 56.5rem;                     /* 904px — Figma 252:6555 desktop */
	background: var(--blanco-background); /* Figma: panel blanco (override inline bg_color) */
}

.single-dis__photo {
	flex: 0 0 50%;
	height: 56.5rem;                     /* 904px — Figma exact */
	overflow: hidden;
}

.single-dis__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-dis__bio {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* 24px @ 375 | 40px @ 768 | 40px @ 1440 */
	padding: clamp(1.5rem, 8.73px + 4.071vw, 2.5rem);
	height: 56.5rem;                     /* 904px */
	background: inherit;                 /* inherits hero inline bg_color — Figma: bio panel = same color as hero */
	color: var(--negrotitulares-background);
}

.single-dis__text {
	font-size: var(--font-body-20);      /* 20px */
	line-height: var(--lh-body-20);      /* 32px */
	letter-spacing: var(--ls-body-20);   /* -0.02em */
	font-weight: 400;
}

.single-dis__text p {
	margin-bottom: 1rem;                 /* 16px between paragraphs */
}

.single-dis__text p:last-child {
	margin-bottom: 0;
}

/* Collections designed */
.single-dis__collections {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                         /* 8px */
}

.single-dis__collections-label {
	font-size: 0.875rem;                 /* 14px — Figma mobile/label across all breakpoints */
	line-height: 1rem;                   /* 16px */
	letter-spacing: -0.02em;             /* -0.28px at 14px */
	font-weight: 400;
	text-transform: lowercase;
}

.single-dis__collections-item {
	font-size: var(--font-heading-24);   /* 24px */
	line-height: var(--lh-heading-24);   /* 32px */
	letter-spacing: var(--ls-heading-24); /* -0.04em */
	font-weight: 600;
}

.single-dis__collections-item a {
	text-decoration: none;
	color: var(--negrotitulares-background);
}


.single-dis__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.single-dis__portfolio {
	flex: 0 0 auto;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.625rem;
	margin-block: -0.625rem;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	color: var(--negrotitulares-background);
	font-style: italic;
	background-origin: content-box;
}

.single-dis__portfolio:visited {
	color: var(--negrotitulares-background);
}

/* Gallery — Embla carousel (same pattern as single-col__gallery).
   Wrapper siempre render (wp plantilla) con is-empty placeholder cuando ACF vacío. */
.single-dis__gallery {
	overflow: hidden;
	height: 47.5rem;                     /* 760px — Figma desktop/large D-03B */
	margin-top: 0.5rem;                  /* 8px — Figma D-03B 1440 gap hero→gallery (1160→1168) */
}

.single-dis__gallery.is-empty {
	/* Placeholder fijo para mantener layout Figma mientras ACF pendiente */
	background: var(--piedra-background);
}

.single-dis__gallery-track {
	display: flex;
	gap: 0.5rem;                         /* 8px */
	height: 100%;
}

.single-dis__gallery-item {
	flex: 0 0 auto;
	height: 100%;
}

.single-dis__gallery-item img {
	height: 100%;
	width: auto;
	display: block;
}

/* Fewer than 3 images — center items instead of leaving empty space on the right */
.single-dis__gallery--few .single-dis__gallery-track {
	justify-content: center;
}

/* Quote section — ahora consolidado en .home-quote (Figma DESKTOP/04).
   El template single-disenador usa .home-quote.home-quote--dis. */

/* Full-width image with play button — Figma D-03B Group 1 1920×1080 large / 1440×810 desktop */
.single-dis__fullimage {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 1080;            /* Figma exact (large) */
	overflow: hidden;
}

.single-dis__fullimage.is-empty {
	background: var(--piedra-background);
}

.single-dis__fullimage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-dis__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6rem;                           /* 96px — Figma exact */
	height: 6rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	opacity: 0.9;
	transition: opacity var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}

.single-dis__play:hover {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}

.single-dis__play svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* ── Responsive — Single Diseñador ── */

/* Large ≥120em (1920) — Figma D-03B 1920 (252:6483): IMG+Texto 960h */
@media (min-width: 120em) {
	.single-dis__hero,
	.single-dis__photo,
	.single-dis__bio {
		height: 60rem;                    /* 960px — Figma 252:6660 */
	}

	.single-dis__play {
		width: 8rem;                      /* 128px — Figma 1920 play button */
		height: 8rem;
	}
}

/* Tablet 768 — Figma D-03B 768 (252:6715): stacked image 840 + bio 576 = 1416 */
@media (max-width: 63.99em) {
	.single-dis__title {
		/* font-size base ya fluid (48→64 @768→1440); mantener padding horizontal tablet */
		padding: 6.5rem 1.5rem 1.5rem;    /* title h 176 → ends 240 (Figma hero start) */
	}

	.single-dis__hero {
		flex-direction: column;
		height: auto;                     /* Figma tablet: auto from stacked photo + bio */
	}

	.single-dis__photo {
		flex: none;
		width: 100%;
		/* 768×840 — Figma 252:6823 */
		height: auto;
		aspect-ratio: 768 / 840;
	}

	.single-dis__bio {
		flex: none;
		width: 100%;
		height: auto;                     /* Figma tablet: auto height from content */
		/* padding: fluid clamp in base (24→40 @375→768) */
		justify-content: flex-start;      /* Figma tablet: items-start, not space-between */
		/* 80px @ 375 | 120px @ 768 | 120px @ 1440 */
		gap: clamp(5rem, 41.83px + 10.178vw, 7.5rem);
	}

	.single-dis__gallery {
		height: 23.75rem;                 /* 380px — Figma 252:6829 tablet */
		margin-top: 0;                    /* Figma tablet: no gap hero→gallery */
	}

	.single-dis__gallery-track {
		gap: 0.25rem;                     /* 4px — Figma tablet/mobile gallery gap */
	}

	/* gallery items: width auto from base (image determines width at gallery height) */

	/* .single-dis__quote: consolidado en .home-quote (fluid clamp). */

	.single-dis__fullimage {
		aspect-ratio: 1920 / 1080;        /* Figma 252:6842 tablet — same as desktop */
	}
}

/* Mobile 375 — Figma D-03B 375 (252:6872): stacked image 400 + bio 584 = 984 */
@media (max-width: 47.99em) {
	.single-dis__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 4.5rem 1.5rem 1.5rem;    /* 72px top, 24px sides — Figma left=24px */
	}

	.single-dis__hero {
		height: auto;                     /* Figma mobile: auto from stacked photo + bio */
	}

	.single-dis__photo {
		/* 375×400 — Figma 252:6958 */
		height: auto;
		aspect-ratio: 375 / 400;
	}

	.single-dis__bio {
		height: auto;                     /* Figma mobile: auto from content */
		/* padding: fluid clamp in base (24→40 @375→768) */
		/* gap: fluid clamp in tablet MQ (80→120 @375→768) */
	}

	.single-dis__text {
		font-size: 1rem;                  /* 16px — Figma 252:6960 */
		line-height: 1.5rem;              /* 24px — Figma (was 26px, corrected) */
	}

	.single-dis__text p {
		margin-bottom: 0.5rem;            /* 8px — Figma mobile paragraph gap */
	}

	.single-dis__gallery {
		height: 23.75rem;                 /* 380px — Figma 252:6965 mobile */
		margin-top: 0;                    /* Figma mobile: no gap hero→gallery */
	}

	/* gallery items: width auto from base */

	/* .single-dis__quote mobile: consolidado en .home-quote. */

	.single-dis__fullimage {
		aspect-ratio: 1920 / 1080;        /* Figma 252:6977 — same aspect as desktop */
	}

	.single-dis__collections-item {
		font-size: 1.125rem;              /* 18px */
		line-height: 1.5rem;              /* 24px */
	}

	.single-dis__bottom {
		flex-direction: row;
		align-items: flex-end;
	}

	.single-dis__portfolio {
		font-size: 1rem;
		line-height: 1rem;
	}
}

/*--------------------------------------------------------------
# Page: Contacto (D-09)
--------------------------------------------------------------*/

#primary.page-contacto {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* ── Title ── */

.contacto__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Fluid 768→1440 en base, mobile override abajo. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	text-transform: lowercase;
	margin: 0;
	padding: 6.5rem var(--space-header) 0;
}

/* ── Contact section: 50/50 split ── */

.contacto__section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 1.5rem;                    /* 24px — Figma: 256 - 168 - 64 = 24px gap */
	min-height: 52.5rem;                   /* 840px — Figma exact; min- so CF7 response can grow */
}

/* Left: image */

.contacto__image-wrap {
	position: relative;
	overflow: hidden;
}

.contacto__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contacto__image-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--gris-background);
}

/* Right: content panel */

.contacto__content {
	background-color: var(--gris-background);
	/* 24px @ 375 | 64px @ 768 | 64px @ 1440 */
	padding: clamp(1.5rem, -14.17px + 10.178vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Info block (top) */

.contacto__info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contacto__heading {
	/* Figma: 32@375 | 48@768+. Fluid clamp 375→768, capped en 48. */
	font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
	line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	letter-spacing: var(--ls-heading-48);
	font-weight: 600;
	text-transform: lowercase;
	margin: 0;
}

.contacto__address {
	font-style: normal;
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
	display: flex;
	flex-direction: column;
}

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

.contacto__address a {
	--ul-h: max(1px, 0.055em);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat right bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
	width: fit-content;
}

.contacto__address a:hover,
.contacto__address a:focus-visible {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

/* ── Form ── */

.contacto__form {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 2.5rem;
}

.contacto__field {
	display: flex;
	flex-direction: column;
}

.contacto__field label {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
	margin-bottom: 0.5rem;
	text-transform: lowercase;
}

.contacto__field input,
.contacto__field textarea {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--negrotitulares-background);
	border-radius: 0;
	padding: 0.25rem 0;
	font-family: 'Inter', sans-serif;
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
	outline: none;
	width: 100%;
	transition: border-color var(--motion-fast) var(--ease-default);
}

.contacto__field input:focus-visible,
.contacto__field textarea:focus-visible {
	border-bottom-color: var(--negrotexto-background);
}

.contacto__field textarea {
	min-height: 9rem; /* 144px */
	resize: vertical;
}

.contacto__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;                  /* 44px WCAG tap target submit */
	background: none;
	border: none;
	padding: 0.625rem 0;                  /* 10px top/bottom → 44h total */
	margin-block: -0.625rem;              /* compensa para no afectar layout */
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
}

.contacto__submit:hover,
.contacto__submit:focus-visible {
	opacity: 0.7;
}

.contacto__submit:active {
	opacity: 0.5;
}

/* ── Feedback messages ── */

.contacto__success {
	margin-top: 2.5rem;
}

.contacto__success p {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
}

.contacto__error {
	margin-top: 1rem;
}

.contacto__error p {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	color: #a94442;
	margin: 0;
}

/* ── Responsive ── */

/* Large ≥120em — Figma 256:11476 Contacto 960h */
@media (min-width: 120em) {
	.contacto__section {
		min-height: 60rem;                 /* 960px — Figma 256:11476 large */
	}
}

/* Tablet 768 — Figma 256:11760: stacked image 840 + panel 840 = 1680 */
@media (max-width: 63.99em) {
	/* .contacto__title: font-size ya fluid en la base (48→64 @768→1440) */

	.contacto__section {
		grid-template-columns: 1fr;
		height: auto;                      /* stacked: children determine height */
	}

	.contacto__image-wrap,
	.contacto__image-placeholder {
		/* 480px @ 375 | 840px @ 768 — fluid across mobile→tablet */
		height: clamp(30rem, 136.49px + 91.6vw, 52.5rem);
	}

	/* .contacto__content padding: fluid clamp in base (24→64 @375→768) */
}

/* Mobile 375 — Figma 256:11826: stacked image 480 + panel 768 = 1248 */
@media (max-width: 47.99em) {
	.contacto__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 7rem 1.5rem 1.5rem;       /* 112 top, 24px sides — Figma left-[24px] */
	}

	.contacto__section {
		margin-top: 0;                     /* título con padding-bottom 24 ya cierra a 240 */
		/* height: auto from tablet MQ; image-wrap clamp covers 480→840 */
	}

	/* .contacto__image-wrap/.contacto__image-placeholder: fluid clamp in tablet MQ (480→840 @375→768) */

	/* .contacto__content padding: fluid clamp in base (24→64 @375→768) */

	/* .contacto__heading: font-size ya fluid en la base (32@375 → 48@768) */

	.contacto__form {
		gap: 2rem;
	}
}

/* ── Contact Form 7 shims (R11.1) ── */

/* CF7 envuelve el form en <div class="wpcf7">: que se comporte como bloque y
   herede el sitio del form antiguo dentro del flex column de .contacto__content. */
.contacto__content .wpcf7 {
	display: contents;
}

/* CF7 añade <fieldset class="hidden-fields-container"> con los hidden inputs.
   Sacarlo del flex flow para no sumar gap encima del primer campo. */
.contacto__form .hidden-fields-container {
	border: none;
	padding: 0;
	margin: 0;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Cada control va en <span class="wpcf7-form-control-wrap">. Forzar block para
   que el input de 100% ancho ocupe toda la celda .contacto__field. */
.contacto__form .wpcf7-form-control-wrap {
	display: block;
}

/* Response output + spinner: cero ruido visual cuando no hay estado.
   Specificity ≥ CF7 default (.wpcf7 form .wpcf7-response-output = 0,2,1). */
.wpcf7 .contacto__form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0;
	border: none;
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	color: var(--negrotitulares-background);
}
.contacto__form .wpcf7-response-output:empty {
	display: none;
}
.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	color: var(--negrotitulares-background);
}
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
	color: #a94442;
}
.contacto__form .wpcf7-spinner {
	display: none;
}
.contacto__form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: #a94442;
}

/* Honeypot antispam: fuera de pantalla, inaccesible al teclado/AT. */
.contacto__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit: CF7 renderiza <input type="submit">. Reset de estilos UA. */
.contacto__form input[type="submit"].contacto__submit {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	padding-inline: 0;
}

/*--------------------------------------------------------------
# Page — Nosotros / About (Figma D-05, node 163:1293)
# Cabecera: title 64/64 SB, image below
# Quote sections: reuse .home-quote
# Producción: terracota bg, 50/50 split, 904px
# Designer: reuse .home-designer with gris bg
--------------------------------------------------------------*/

#primary.page-nosotros {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

/* ── Cabecera ──
   Patrón compartido con archives (diseñadores, colecciones, productos):
   título con padding-top fluido (72→104 @375→768) + contenido en flujo natural.
   Elimina alturas fijas e imágenes absolutas que causaban saltos al cambiar
   viewport y desalineaban el título respecto al resto de archives. */

.page-nosotros__cabecera {
	position: relative;
}

/* Nosotros: las alturas de los dos quotes (filo/prod) emergen del contenido
   + padding fluido del componente .home-quote. No se fijan en CSS. */

@media (min-width: 120em) {
	.page-nosotros__produccion {
		/* height: auto — children determine height (large same as desktop) */
	}

	.page-nosotros__designer,
	.page-nosotros__designer .home-designer__image,
	.page-nosotros__designer .home-designer__content {
		height: 57.5rem;                    /* 920px — Figma 252:7208 large */
	}
}

.page-nosotros__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Padding-top fluid 72→104 @375→768+
	   (mismo patrón que .archive-disenadores__title y .archive-colecciones__title). */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 0 1.5rem;
	text-transform: lowercase;
}

.page-nosotros__hero-image {
	/* Flujo natural bajo el título (no absolute). Altura fluida entre Figma
	   anchors: 472@768 → 896@1440+. Mobile override abajo (280@375 → 472@768). */
	width: 100%;
	margin-top: 1.5rem;                     /* 24px — gap título→imagen (match .dis-grid) */
	height: clamp(29.5rem, -0.786rem + 63.095vw, 56rem);
	overflow: hidden;
}

.page-nosotros__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Producción — terracota block ── */

.page-nosotros__produccion {
	display: flex;
	width: 100%;
	background: var(--terracota-background);
	/* height: auto — let children determine height */
}

.page-nosotros__produccion-text {
	flex: 0 0 50%;                          /* 720/1440 */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;              /* Texto anclado al bottom — cliente 2026-04-17 */
	gap: 1rem;                              /* Separación entre hidden y visible */
	padding: 2.5rem;                        /* 40px — Figma exact */
}

.page-nosotros [aria-hidden="true"] {
	display: none;
}

.page-nosotros__produccion-hidden {
	margin: 0;
	font-size: var(--font-body-20);         /* 20px */
	line-height: var(--lh-body-20);         /* 32px */
	letter-spacing: var(--ls-body-20);      /* -0.4px */
	font-weight: 400;
	color: var(--negrotitulares-background);
}

.page-nosotros__produccion-visible {
	margin: 0;
	font-size: var(--font-heading-24);      /* 24px */
	line-height: var(--lh-heading-24);      /* 32px */
	letter-spacing: var(--ls-heading-24);   /* -0.96px */
	font-weight: 600;
	color: var(--negrotitulares-background);
}

.page-nosotros__produccion-image {
	flex: 0 0 50%;                          /* 720/1440 */
	/* 400px @ 375 | 840px @ 768 | 904px @ 1440 */
	height: clamp(52.5rem, 766.86px + 9.524vw, 56.5rem);
	overflow: hidden;
}

.page-nosotros__produccion-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Designer override: gris background ── */

.page-nosotros__designer-content {
	background: var(--gris-background);
}

/*--------------------------------------------------------------
# Responsive — Page Nosotros
--------------------------------------------------------------*/

/* Tablet 768 — Figma D-05 tablet (252:7247): image 472 @ 768.
   Cabecera sin altura fija (flujo natural); image height ya fluida en la base
   (clamp 472→896 @ 768→1440+), no requiere override aquí. */
@media (max-width: 63.99em) {
	/* .page-nosotros__title: font-size ya fluid en la base (48→64 @768→1440) */
	/* .page-nosotros__cabecera: sin altura fija — emerge del contenido */
	/* .page-nosotros__hero-image: altura ya fluida base clamp(29.5rem, ..., 56rem) = 472px @768 */

	/* .home-quote--filo / --prod: tipografía, padding y label top ya fluidos
	   vía clamp en la base .home-quote. Altura emerge del contenido. */

	.page-nosotros__produccion {
		flex-direction: column;
		/* height: auto — children determine height */
	}

	.page-nosotros__produccion-text {
		flex: none;
		width: 100%;
		height: 17rem;                      /* 272px — Figma 252:7354 Frame 34 tablet */
		padding: 2.5rem;
	}

	.page-nosotros__produccion-image {
		flex: none;
		width: 100%;
		/* height: base clamp covers 840@768 → 904@1440; mobile MQ overrides for 375→768 range */
	}

	/* Produccion visible text stays 24/32 SB at tablet — same as desktop (Figma 252:7355) */

	/* Designer tablet stack — Figma 252:7360 */
	.page-nosotros__designer {
		flex-direction: column-reverse;
		height: auto;                       /* children have fluid heights */
	}

	.page-nosotros__designer .home-designer__image {
		flex: none;
		width: 100%;
		/* height: fluid clamp in base (400→840 @375→768) */
	}

	.page-nosotros__designer .home-designer__content {
		flex: none;
		width: 100%;
		/* height: fluid clamp in base (400@375 → 400@768 → 840@1440) */
		/* padding: inherits base clamp (24→40 @375→768) */
	}

	/* Designer name stays 64/64 on nosotros tablet — Figma 252:7366 */
	.page-nosotros__designer .home-designer__name {
		font-size: var(--font-heading-64);  /* 64px */
		line-height: var(--lh-heading-64);  /* 64px */
		letter-spacing: var(--ls-heading-64);
	}
}

/* Mobile 375 — Figma D-05 375 (252:7398): image 280 @375, quote filo 560,
   produccion 720 stack, quote prod 304, designer 800. Cabecera en flujo
   natural (sin altura fija), image height fluida 280→472 entre 375→768. */
@media (max-width: 47.99em) {
	.page-nosotros__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		/* padding-top ya fluido 72→104 desde la base. Right 24 para evitar overflow. */
		padding-right: 1.5rem;
	}

	.page-nosotros__hero-image {
		/* Altura fluida 280@375 → 472@768 (override del base). */
		height: clamp(17.5rem, 6.05rem + 48.85vw, 29.5rem);
	}

	/* Excepción nosotros: Figma especifica que en mobile la label de producción
	   es 18px mientras que filosofía (= base) es 16px. Overrideamos solo la prod. */
	.home-quote--prod .home-quote__label {
		font-size: var(--font-body-18);     /* 18px — Figma 252:7495 */
	}

	.page-nosotros__produccion {
		flex-direction: column;
		/* height: auto — children determine height */
	}

	.page-nosotros__produccion-text {
		flex: none;
		width: 100%;
		height: 20rem;                      /* 320px — Figma 252:7490 Frame 34 mobile */
		padding: 2.5rem;                    /* 40px — Figma 252:7490 p-[40px] */
	}

	.page-nosotros__produccion-image {
		flex: none;
		width: 100%;
		/* 400px @ 375 | 840px @ 768 — fluid across mobile→tablet */
		height: clamp(25rem, -19.85px + 111.96vw, 52.5rem);
	}

	.page-nosotros__produccion-visible {
		font-size: 1.125rem;                /* 18px — Figma 252:7491 */
		line-height: 1.5rem;                /* 24px — Figma exact */
		text-transform: lowercase;          /* Figma 252:7491 lowercase */
	}

	/* Designer mobile 800h stack — Figma 252:7497 */
	.page-nosotros__designer {
		flex-direction: column-reverse;
		height: auto;                       /* children have fluid heights */
	}

	.page-nosotros__designer .home-designer__image {
		flex: none;
		width: 100%;
		/* height: fluid clamp in base (400→840 @375→768) */
	}

	.page-nosotros__designer .home-designer__content {
		flex: none;
		width: 100%;
		/* height: fluid clamp in base (400@375 → 400@768 → 840@1440) */
		/* padding: fluid clamp in base (24→40 @375→768) */
	}

	/* Designer name: 32/32 SB — Figma 252:7503 */
	.page-nosotros__designer .home-designer__name {
		font-size: 2rem;                    /* 32px */
		line-height: 2rem;                  /* 32px — Figma exact (not 36px) */
		letter-spacing: -0.04em;            /* -1.28px — Figma exact */
	}

	/* Designer quote: 16/24 Reg (not italic) — Figma 252:7504 */
	.page-nosotros__designer .home-designer__quote p {
		font-size: var(--font-body-16);     /* 16px */
		line-height: var(--lh-body-16);     /* 24px */
		letter-spacing: var(--ls-body-16);  /* -0.32px */
		font-style: normal;                 /* Figma: Inter Regular, not italic */
	}
}

/*--------------------------------------------------------------
# Page: Recursos / Downloads (D-08, node 163:1623)
# Title: SB 64/64 ls-2.56px, left 24px, top 168px
# Filters: top 248px, p24px, Reg 16/24 ls-0.32px, gap 16px
# Grid: 4 cols, gap 8px, caption 16px gap + Reg 16/24
# Card heights per breakpoint (Figma exact):
#   1920: 472px card, row total 512px
#   1440: 352px card, row total 392px
#   768:  384px card, row total 424px, 2-col, 24px row-gap
#   375:  384px card, row total 424px, 1-col, 24px row-gap
# Text card: bg arena, p40px, nombre SB 64/64, tipo SB 24/32,
#   ref Reg 20/32, "PDF" SB 24/32 at bottom
--------------------------------------------------------------*/

#primary.recursos {
	max-width: none;
	padding: var(--header-height) 0 0;
}

.recursos__title {
	/* 32px @ 375 | 48px @ 768 | 64px @ 1440 */
	font-size:   clamp(2rem, 1.47px + 8.142vw, 4rem);
	line-height: clamp(2rem, 1.47px + 8.142vw, 4rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	padding: 6.5rem 0 0 1.5rem;
	text-transform: lowercase;
}

/* ── List layout — Figma D-08 nuevo (256:9924) ── */

.recursos__list {
	display: flex;
	flex-direction: column;
	padding: 0 1.5rem;                       /* 24px lateral */
	margin-top: 2.5rem;
	margin-bottom: clamp(3rem, 4rem + 2vw, 6rem);
}

.recursos__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--negrotitulares-background);
	/* 40px @ 1440 | 32px @ 768 | 24px @ 375 */
	padding: clamp(1.5rem, 0.5459rem + 4.071vw, 2.5rem) 0;
	text-decoration: none;
	color: var(--negrotitulares-background);
	/* Altura fija por breakpoint para consistencia entre filas */
	height: clamp(4rem, 2.5rem + 4vw, 6.5rem);
	cursor: pointer;
	transition: opacity var(--motion-fast, 150ms) var(--ease-default, ease);
}

.recursos__row:last-of-type {
	border-bottom: 1px solid var(--negrotitulares-background);
}

@media (hover: hover) and (pointer: fine) {
	.recursos__row:hover {
		opacity: 0.6;
	}
}

.recursos__row-title {
	/* 24px @ 375 | 36px @ 768 | 48px @ 1440 */
	font-size:   clamp(1.5rem, 9.92px + 3.756vw, 3rem);
	line-height: clamp(1.5rem, 9.92px + 3.756vw, 3rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	text-transform: lowercase;
}

.recursos__row-download {
	/* 14px @ 375 | 18px @ 768+ */
	font-size:   clamp(0.875rem, 11.8px + 0.509vw, 1.125rem);
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	--ul-h: max(1px, 0.07em);
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 100% var(--ul-h);
	padding-bottom: 0.18em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.recursos__row-download:hover,
.recursos__row-download:focus {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}

/* Chevron — mobile only, rotates on toggle open */
.recursos__row-chevron {
	display: none;
}

@media (max-width: 63.99em) {
	.recursos__row .recursos__row-download {
		display: none;
	}

	.recursos__row-image .recursos__row-download {
		display: block;
		cursor: pointer;
	}

	.recursos__row-chevron {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		flex-shrink: 0;
		margin-right: 4px;
		align-self: center;
		transition: transform var(--motion-default) var(--ease-default);
	}

	.recursos__row-chevron::before {
		content: '';
		display: block;
		width: clamp(0.75rem, 0.5rem + 0.8vw, 1rem);
		height: clamp(0.75rem, 0.5rem + 0.8vw, 1rem);
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-15%);
	}

	.recursos__row.is-open .recursos__row-chevron {
		transform: rotate(180deg);
	}
}

/* Row image — mobile/tablet toggle, hidden on desktop (hover-follow replaces it) */
.recursos__row-image {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 0;
}

.recursos__row-image[hidden] {
	display: none;
}

.recursos__row-image:not([hidden]) + .recursos__row {
	border-top: none;
}

.recursos__row-image img {
	width: 168px;
	height: 224px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

@media (min-width: 64em) {
	.recursos__row-image {
		display: none;
	}
}

/* Hover-follow image box — desktop only (bato reference pattern) */
.recursos__image-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 220px;
	aspect-ratio: 210 / 297;
	overflow: hidden;
	pointer-events: none;
}

.recursos__image-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

@media (max-width: 63.99em) {
	.recursos__image-box {
		display: none;
	}
}

.recursos__empty {
	padding: 3rem 1.5rem;
}

/* ── Responsive — Recursos ── */

@media (max-width: 47.99em) {
	.recursos__title {
		padding: 4.5rem 1rem 0;
	}

	.recursos__list {
		padding: 0 1.5rem;
		margin-top: 1.5rem;
	}
}

/*--------------------------------------------------------------
# Page: Area Profesional (D-07)
# Title: SB 64/64, ls -2.56px, left 24px, top 168px
# B2B: 1440x840 split 50/50 — image left, piedra content right
# CTA: shared .cta-catalogo pattern (fullscreen bg + title + button)
--------------------------------------------------------------*/

#primary.area-pro {
	max-width: none;
	padding: var(--header-height) 0 0;     /* offset por header fijo transparente */
	overflow-x: clip;
}

.area-pro__title {
	/* Figma: 32@375 | 48@768 | 64@1440+. Fluid 768→1440 en base, mobile override abajo. */
	font-size:   clamp(3rem, 1.857rem + 2.381vw, 4rem);
	line-height: clamp(3rem, 1.857rem + 2.381vw, 4rem);
	letter-spacing: var(--ls-heading-64);
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	padding: 6.5rem 0 0 1.5rem;         /* 104px top + 24px left */
	text-transform: lowercase;
}

/* ── B2B split section ── */
.area-b2b {
	display: flex;
	width: 100%;
	height: 52.5rem;                     /* 840px — Figma exact */
	margin-top: 1.5rem;                  /* 24px — Figma: B2B top 256px - title bottom 232px */
}

.area-b2b__image {
	flex: 0 0 50%;
	overflow: hidden;
}

.area-b2b__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.area-b2b__content {
	flex: 0 0 50%;
	background: var(--piedra-background);
	/* 48px @ 375 | 48px @ 768 | 48px @ 1440 | 48px @ 1920 */
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 4rem;
}

.area-b2b__top {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                         /* 24px */
}

.area-b2b__heading {
	/* Figma: 32@375 | 48@768+. Fluid clamp 375→768, capped en 48. */
	font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
	line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	letter-spacing: var(--ls-heading-48);
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
	/* Sin text-transform: Figma "plataforma B2B" mantiene B2B en mayúsculas */
}

.area-b2b__desc {
	font-size: var(--font-body-20);
	line-height: var(--lh-body-20);
	letter-spacing: var(--ls-body-20);
	font-weight: 400;
	color: var(--negrotitulares-background);
	margin: 0;
}

.area-b2b__links {
	display: flex;
	justify-content: space-between;
}

.area-b2b__link {
	font-size: var(--font-body-18);      /* 18px */
	line-height: var(--lh-body-18);      /* 24px */
	letter-spacing: 0;                   /* Figma btn-big token: ls 0 */
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
}

.area-b2b__link:hover,
.area-b2b__link:focus-visible {
	opacity: 0.7;
}

/* ── CTA Catalogo (shared pattern) ── */
.cta-catalogo {
	content-visibility: auto;
	contain-intrinsic-size: auto none auto 53rem;
	position: relative;
	/* 680px @ 375 | 680px @ 768 | 848px @ 1440 */
	height: clamp(42.5rem, 488px + 25vw, 53rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 2.5rem;             /* 40px — Figma 4.42% of 904 */
	overflow: hidden;
}

.cta-catalogo__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;                  /* fill area sin distorsionar */
	object-position: center;            /* Cliente 2026-04-17: centrada totalmente */
	z-index: 0;
}

.cta-catalogo__title {
	/* Figma: 32@375 | 48@768 | 72@1440+. Fluid 768→1440 en base, mobile override abajo. */
	position: absolute;
	top: 46%;
	left: 16.18%;
	right: 16.18%;
	z-index: 1;
	margin: 0;
	font-size:   clamp(3rem, 1.286rem + 3.571vw, 4.5rem);
	line-height: clamp(3rem, 1.286rem + 3.571vw, 4.5rem);
	letter-spacing: -0.04em;            /* ratio constante */
	font-weight: 600;
	color: var(--blanco-background);
	text-align: center;
	text-transform: lowercase;
}

.cta-catalogo__button {
	position: relative;
	z-index: 1;
	font-size: var(--font-body-18);      /* 18px */
	line-height: var(--lh-body-18);      /* 24px */
	letter-spacing: 0;                   /* Figma btn-big: ls 0 */
	font-weight: 600;
	color: var(--blanco-background);
	text-transform: lowercase;
	--ul-h: max(2px, 0.1em);
}

.cta-catalogo__button:visited {
	color: var(--blanco-background);
}

/*--------------------------------------------------------------
# Responsive — Area Profesional
--------------------------------------------------------------*/

/* Tablet 768 — Figma D-07 tablet (252:7659): B2B stack image 840 + content 512 = 1352 */
@media (max-width: 63.99em) {
	.area-pro__title {
		/* font-size ya fluid en la base (48→64 @768→1440). Mantener padding tablet. */
		padding: 6.5rem 1.5rem 0;         /* 104 top + 48 font = 152 → ends 216 */
	}

	.area-b2b {
		flex-direction: column;
		height: auto;                     /* stacked: children determine height */
		margin-top: 1.5rem;               /* 24px → Figma tablet B2B y=240 */
	}

	.area-b2b__image {
		flex: none;
		width: 100%;
		/* 280px @ 375 | 840px @ 768 — fluid across mobile→tablet */
		height: clamp(17.5rem, -254.35px + 142.494vw, 52.5rem);
	}

	.area-b2b__content {
		flex: none;
		width: 100%;
		/* padding: fluid clamp in base (24→48 @375→768) */
	}

	/* .area-b2b__heading stays at 48px (base) — Figma tablet 256:7899 confirms 48px */

	.cta-catalogo__title {
		/* font-size ya fluid en la base (48→72 @768→1440). Mantener padding tablet. */
		padding: 0 2rem;
	}
}

/* Mobile 375 — Figma D-07 mobile (252:7721): B2B 880 (image 280 + content 600), CTA 680 */
@media (max-width: 47.99em) {
	.area-pro__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 4.5rem 1.5rem 1.5rem;   /* 72 top, 24px sides, 24 bottom */
	}

	.area-b2b {
		flex-direction: column;
		height: auto;                     /* stacked: children determine height */
		margin-top: 0;
	}

	/* .area-b2b__image: fluid clamp in tablet MQ (280→840 @375→768) */

	/* .area-b2b__content padding: fluid clamp in base (24→48 @375→768) */

	/* .area-b2b__heading: font-size ya fluid en la base (32@375 → 48@768) */

	.area-b2b__desc {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	/* Links stay horizontal on mobile — Figma 256:8097 shows flex row justify-between */

	/* .cta-catalogo height: fluid clamp in base rule (680→848) — Figma D-07 mobile CTA (256:8059) */

	.cta-catalogo__title {
		/* fluid 32@375 → 48@768 (override base para rango mobile) */
		font-size:   clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		padding: 0 1.5rem;
	}

	.cta-catalogo__button {
		bottom: 2rem;
	}
}

/*--------------------------------------------------------------
# Micro-animations (ADR-011)
--------------------------------------------------------------*/

.no-js .js-reveal,
.no-js .js-reveal--fade {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}

.js-reveal {
	opacity: 0;
	transform: translateY(var(--motion-distance));
	transition: opacity var(--motion-deliberate) cubic-bezier(0.16, 1, 0.3, 1),
	            transform var(--motion-deliberate) cubic-bezier(0.16, 1, 0.3, 1),
	            background-size var(--motion-default) var(--ease-default);
	transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}

.js-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.js-reveal--fade {
	opacity: 0;
	clip-path: inset(-0.15em 100% -0.15em 0);
	transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
	            clip-path 900ms cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: calc(var(--i, 0) * 250ms);
}

.js-reveal--fade.is-visible {
	opacity: 1;
	clip-path: inset(-0.15em 0 -0.15em 0);
}

.js-reveal--img {
	opacity: 0;
	transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 250ms);
}

.js-reveal--img.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal,
	.js-reveal--fade,
	.js-reveal--img {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# Image Fade-In (lazy-loaded images)
--------------------------------------------------------------*/

img[loading="lazy"]:not(.col-card__img--hover) {
	opacity: 0;
	transition: opacity var(--motion-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

img[loading="lazy"].is-loaded:not(.col-card__img--hover) {
	opacity: 1;
}

#ds-img-a,
#ds-img-b {
	opacity: 1;
	transition: opacity 0.6s var(--ease-out-quad, ease-out);
}

@media (prefers-reduced-motion: reduce) {
	img[loading="lazy"] {
		opacity: 1;
		transition: none;
	}
}

/* Hover-scale images: re-declare transition AFTER the global lazy rule
   so both transform (hover) and opacity (fade-in) animate. */
.dis-card__image img {
	transition: transform var(--motion-slow, 500ms) var(--ease-default, ease),
	            opacity var(--motion-slow, 500ms) cubic-bezier(0.16, 1, 0.3, 1);
}

/*--------------------------------------------------------------
# Empty States
--------------------------------------------------------------*/

.archive-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 40vh;
	padding: 3rem var(--space-page);
	text-align: center;
}

.archive-empty__message {
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	color: var(--negrotitulares-background);
	opacity: 0.6;
	margin: 0 0 1.5rem;
}

.archive-empty__reset {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
	text-decoration: none;
	border-bottom: 1px solid var(--negrotitulares-background);
	padding-bottom: 0.18em;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.archive-empty__reset:hover {
	opacity: 0.6;
}

/*--------------------------------------------------------------
# Container Queries — Cards
--------------------------------------------------------------*/

@container (max-width: 600px) {
	.prod-card__name {
		padding: 0.75rem 1rem;
		/* font-size/line-height: fluid clamp base handles 14→18 */
	}
}

@container (max-width: 400px) {
	.prod-card__image {
		aspect-ratio: 183.5 / 212;
	}
}

@container (max-width: 600px) {
	.col-card__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		white-space: normal;
	}

	.col-card__designer {
		text-align: left;
	}
}

@container (max-width: 500px) {
	.dis-card {
		height: 27.5rem;
	}

	/* dis-card__name: fluid clamp base handles 24→32 */

	.dis-card__label {
		padding: 1rem;
	}
}

/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/

@media print {
	.site-header,
	.site-footer,
	.megamenu,
	.archive-productos__filters,
	.cta-catalogo,
	.products-slider {
		display: none;
	}

	body {
		padding: 0;
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}

	nav a[href]::after,
	.site-branding a[href]::after {
		content: none;
	}
}