/*!
Theme Name:  skldstudio
Theme URI:   https://garate.design
Author:      garate.design
Author URI:  https://garate.design
Description: Tema a medida para SKLD Studio (Joenfa, S.L.) en skldstudio.com.
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     GPL v2 o posterior
License URI: LICENSE
Text Domain: skldstudio
Tags:        custom-logo, custom-menu, featured-images, translation-ready

© 2026 garate.design · Nacho Garate · ignacio@garate.design
Autoría y alcance del trabajo a medida: ver LICENCIA.txt.
Basado en Underscores (https://underscores.me/), (C) 2012-2020 Automattic, Inc. — GPLv2 o posterior.
*/

/*
 * 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;
	/* Recursos sensibles bloqueados (F8, ref. Kettal). Fondo tenue; el texto se
	   mantiene a contraste pleno (AA) y el candado lleva la atenuación. */
	--recurso-locked-bg: color-mix(in srgb, var(--gris-background) 55%, transparent);
	--recurso-lock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
	--recurso-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231d1d1b' stroke-width='1.5'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");

	/* 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-14: 0.875rem;           /* 14px — Figma body 14 Reg (alias semantico de --font-header-nav) */
	--lh-body-14: 1rem;                 /* 16px */
	--ls-body-14: -0.02em;              /* -0.28px */

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

/* Voolcan Grupo brand — "una marca de" + logo (Bloque G) */
.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: clamp(1rem, 0.52rem + 2.04vw, 1.5rem);
}

.site-footer__brand span {
	font-size: var(--font-body-12);
	line-height: var(--lh-body-12);
	letter-spacing: var(--ls-body-12);
	white-space: nowrap;
}

.site-footer__brand img {
	height: clamp(1rem, 0.76rem + 1.02vw, 1.25rem);
	width: auto;
	mix-blend-mode: multiply;              /* JPG white bg → transparent on piedra */
}

/* 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__brand   { order: 3; margin-top: 0.75rem; }
	.site-footer__meta    { order: 4; 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__brand   { order: 4; margin-top: 0.75rem; }
	.site-footer__copy    { order: 5; 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;
}

/* Cliente 2026-06-22: en estas colecciones el encuadre centrado del hero recortaba
   el mobiliario (situado en la franja inferior). Encuadre hacia abajo para mostrarlo
   completo. Verificado colección a colección; las no listadas (lenis, ronda, velair,
   ventus) se dejan en center porque solo recortaban suelo, no mobiliario.
   IDs ES/EN: arata 100/101 · aris 104/105 · eki 90/91 · koro 92/93 · lacus 84/85 ·
   olma 94/95 · serra 96/97 · tempo 80/81 · umbra 82/83. */
body.postid-80 .single-col__hero img, body.postid-81 .single-col__hero img,
body.postid-82 .single-col__hero img, body.postid-83 .single-col__hero img,
body.postid-84 .single-col__hero img, body.postid-85 .single-col__hero img,
body.postid-90 .single-col__hero img, body.postid-91 .single-col__hero img,
body.postid-92 .single-col__hero img, body.postid-93 .single-col__hero img,
body.postid-94 .single-col__hero img, body.postid-95 .single-col__hero img,
body.postid-96 .single-col__hero img, body.postid-97 .single-col__hero img,
body.postid-100 .single-col__hero img, body.postid-101 .single-col__hero img,
body.postid-104 .single-col__hero img, body.postid-105 .single-col__hero img {
	object-position: center bottom;
}

/* 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;
		align-items: flex-start;            /* override baseline — Safari column+baseline miscalculates height (Bloque F) */
		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;
}

/* Hero wrapper — keeps pill + thumbs as a single grid item in column 2 */
.single-prod__hero-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

/* Thumbnails — Skyline-style indicators below hero pill */
.single-prod__thumbs {
	display: flex;
	gap: 0.375rem;
	justify-content: center;
}

.single-prod__thumb {
	/* 28px × 40px @ 375 → 40px × 56px @ 1440 */
	width: clamp(1.75rem, 1.375rem + 0.94vw, 2.5rem);
	height: clamp(2.5rem, 2rem + 1.25vw, 3.5rem);
	padding: 0;
	border: none;
	background: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity var(--dur-fast, 0.2s) var(--ease-out, ease-out);
}

.single-prod__thumb.is-active {
	opacity: 1;
}

.single-prod__thumb:hover {
	opacity: 0.8;
}

.single-prod__thumb.is-active:hover {
	opacity: 1;
}

.single-prod__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

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

.single-prod__detail-slide[data-slide-type="ambient"] img {
	object-position: center;
}

/* Cliente 2026-06-19: en estos productos el ambiente tiene el producto en la
   franja inferior y el encuadre centrado lo recortaba por abajo. Encuadre hacia
   abajo para mostrarlo completo. Acotado por post-id (umbra rt/rd dining, lacus
   high coffee; ES+EN). */
body.postid-156 .single-prod__detail-slide[data-slide-type="ambient"] img,
body.postid-157 .single-prod__detail-slide[data-slide-type="ambient"] img,
body.postid-158 .single-prod__detail-slide[data-slide-type="ambient"] img,
body.postid-159 .single-prod__detail-slide[data-slide-type="ambient"] img,
body.postid-178 .single-prod__detail-slide[data-slide-type="ambient"] img,
body.postid-179 .single-prod__detail-slide[data-slide-type="ambient"] img {
	object-position: center bottom;
}

/* ── 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;
}

/* ════════════════════════════════════════════════════════════════════
 * Recursos v2 — Dropdown de descargas en single producto (Fase 3).
 * Estructura semántica <details>/<summary>, sin JS de apertura.
 * Reemplaza al enlace plano .single-prod__download (conservado arriba).
 *
 * Animación: opacity + slide-in al abrir. Sin animación al cerrar
 * (limitación de <details> sin interpolate-size estable).
 * Respeta prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════════════ */
.prod-downloads {
	width: 100%;
	color: var(--negrotitulares-background);
	/* Reset estilos nativos de <details> en Safari/Chrome */
	border: 0;
	padding: 0;
	margin: 0;
}

.prod-downloads__summary {
	display: flex;
	align-items: center;
	justify-content: flex-end;             /* Figma: alineado a la derecha del bloque detail */
	gap: 0.5rem;                            /* 8px entre label y chevron */
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 1px;
	text-transform: lowercase;
	cursor: pointer;
	list-style: none;                      /* Quita el triángulo nativo */
	transition: color var(--motion-fast) var(--ease-default);
}

/* WebKit specific: ocultar marker nativo */
.prod-downloads__summary::-webkit-details-marker {
	display: none;
}

.prod-downloads__summary:hover,
.prod-downloads__summary:focus-visible {
	color: rgba(29, 29, 27, 0.7);
}

.prod-downloads__summary:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 4px;
	border-radius: 2px;
}

.prod-downloads__chevron {
	display: inline-block;
	transition: transform var(--motion-default) var(--ease-default);
	flex-shrink: 0;
}

.prod-downloads[open] .prod-downloads__chevron {
	transform: rotate(180deg);
}

/* Lista de archivos — aparece debajo del summary cuando abre */
.prod-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.prod-downloads[open] .prod-downloads__list {
	animation: prod-downloads-slide-in var(--motion-default) var(--ease-default);
}

@keyframes prod-downloads-slide-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.prod-downloads__chevron {
		transition: none;
	}
	.prod-downloads[open] .prod-downloads__list {
		animation: none;
	}
}

.prod-downloads__item {
	margin: 0;
}

/* Cada link: misma estructura visual que las specs (border-top + flex justify-between) */
.prod-downloads__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;                     /* 16px — Figma divider gap */
	padding-bottom: 0.5rem;                /* 8px */
	border-top: 1px solid rgba(29, 29, 27, 0.15);
	color: var(--negrotitulares-background);
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	text-transform: lowercase;
	text-decoration: none;
	transition: color var(--motion-fast) var(--ease-default),
	            background-color var(--motion-fast) var(--ease-default);
}

.prod-downloads__item:first-child .prod-downloads__link {
	margin-top: 1rem;                      /* gap entre summary y primer item */
}

.prod-downloads__link:hover,
.prod-downloads__link:focus-visible {
	color: rgba(29, 29, 27, 0.7);
}

.prod-downloads__link:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
	border-radius: 2px;
}

.prod-downloads__link-label {
	font-weight: 400;
	flex: 1 1 auto;
	text-align: left;
}

.prod-downloads__link-formato {
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;                      /* Semi Bold — alineado con specs dd */
	text-align: right;
	flex-shrink: 0;
}

/* ── Recursos sensibles bloqueados (F8, ref. Kettal) ──────────────────
   Estado .is-locked: fondo tenue + verbo "solicitar acceso" con candado.
   El texto conserva contraste pleno (AA); solo el candado se atenúa. */
.prod-downloads__link.is-locked,
.recursos-v2__card-archivo-link.is-locked,
.recursos-v2__list-file.is-locked {
	background-color: var(--recurso-locked-bg);
}

.prod-downloads__link-cta,
.recursos-v2__card-archivo-cta,
.recursos-v2__list-file-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
}

.prod-downloads__link-cta::before,
.recursos-v2__card-archivo-cta::before,
.recursos-v2__list-file-cta::before {
	content: "";
	inline-size: 0.75rem;
	block-size: 0.75rem;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: 0.7;
	-webkit-mask: var(--recurso-lock-icon) no-repeat center / contain;
	        mask: var(--recurso-lock-icon) no-repeat center / contain;
}

/* P-12: sensible con captación bloqueada para el idioma actual — elemento
   inerte (span, sin destino). Mismo tratamiento visual que .is-locked pero
   sin affordance de acción: cursor por defecto, contenido atenuado. */
.prod-downloads__link.is-unavailable,
.recursos-v2__card-archivo-link.is-unavailable,
.recursos-v2__list-file.is-unavailable {
	cursor: default;
	opacity: 0.6;
}

/* 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-wrap {
		width: 100%;
		order: 1;
		margin-top: 1.5rem;
	}

	.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: 0;
		order: unset;
	}

	.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-wrap {
		margin-top: 1rem;
	}

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

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

/* ── Intro: statement + datos de contacto (cliente 2026-07-22) ──
 * Estructura de la sección intro del contacto de Skyline (statement grande
 * arriba-izquierda, bloque menor abajo-derecha) con la voz tipográfica SKLD:
 * reutiliza el componente .home-quote (24→56 fluid, weight 600). */

.home-quote--contacto {
	display: flex;
	flex-direction: column;
}

/* Datos de contacto (vuelven del módulo retirado el 21-07): cuerpo 16 con los
 * enlaces de subrayado animado del design system. Su borde izquierdo se alinea
 * con el ARRANQUE de la 2.ª columna del form del panel inferior (feedback Nacho
 * 2026-07-22: anclado al filo derecho quedaba huérfano). Geometría: panel al
 * 50vw y form a 2 col simétricas ⇒ col-2 = 75vw + gap/2 (1.25rem), sea cual sea
 * el padding fluido del panel; menos el padding-inline 1.5rem de esta sección. */
.contacto__datos {
	font-style: normal;
	align-self: flex-start;
	margin-inline-start: calc(75vw + 1.25rem - 1.5rem);
	/* 40px @ 375 → 80px @ 1440 — misma pendiente que los paddings de .home-quote */
	margin-top: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
	max-width: 28rem;                      /* 448px — bloque menor, texto a la izquierda */
	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__datos a {
	color: inherit;
	--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__datos a:hover,
.contacto__datos a:focus-visible {
	background-position: left bottom;
	background-size: 100% var(--ul-h);
}

/* ── Contact section: 50/50 split ── */

.contacto__section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Sin margen propio: el aire lo da el padding-bottom fluido (56→96) de la
	 * sección de statement que la precede desde 2026-07-22. */
	margin-top: 0;
	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;
	/* flex-start (antes space-between): con el form corto de 3 campos el
	 * sobrante del panel quedaba ARRIBA del form y con el set unificado de 10
	 * campos ese aire variable resultaba exagerado (cliente 2026-07-20). El
	 * sobrante pasa abajo del CTA, donde respira de forma natural. */
	justify-content: flex-start;
}

/* 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;
}

/* Subtítulo del módulo de registro (cliente 2026-07-21). Sin negrita, cuerpo 16
 * como el resto del panel; el aire con el titular lo da el gap de .contacto__info. */
.contacto__intro {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);
	margin: 0;
	max-width: 36.25rem;                   /* 580px — evita líneas >~75c en el panel ancho */
}

/* ── Form ── */

.contacto__form {
	/* 2 columnas (cliente 2026-07-20: el set unificado en 1 columna era muy
	 * largo). auto-fit + minmax con `max(13.5rem, 40%)`: cada columna exige
	 * ≥40% del form → NUNCA caben 3; y con columnas <13.5rem (216px) apila
	 * FLUIDO sin salto de media query (el form mide ~505-630px según layout). */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13.5rem, 40%)), 1fr));
	gap: 2rem 2.5rem;
	margin-top: 2rem;                       /* = 1 gap del grid; aire consistente con flex-start */
}

/* A ancho completo: consentimientos, submit, spinner y mensajes de respuesta. */
.contacto__form > .contacto__field--checkbox,
.contacto__form > .contacto__submit,
.contacto__form > .wpcf7-spinner,
.contacto__form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* El submit con su ancho de contenido y a la izquierda (el stretch de grid lo
 * estiraba a todo el form y "send" quedaba flotando centrado). */
.contacto__form > .contacto__submit {
	justify-self: start;
}

/* El fieldset oculto de CF7 y el wrap suelto del honeypot NO deben generar
 * fila de grid (fila fantasma + 2 gaps de aire muerto). El fieldset acepta
 * display:contents; al wrap del honeypot su plugin le fuerza display:block
 * (verificado en vivo), así que se saca del flujo con position:absolute —
 * el honeypot sigue operativo con su ocultación inline propia. */
.contacto__form > .hidden-fields-container {
	display: contents;
}
.contacto__form > span.wpcf7-form-control-wrap[class*="honeypot"] {
	position: absolute;
}

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

/* ── Set de campos unificado con Skyline (cliente 2026-07-20):
 * select de actividad + consentimientos. Mismo lenguaje que los inputs
 * underline del propio formulario y que el modal de descargas. ── */

.contacto__field select {
	width: 100%;                            /* el UA lo encoge al contenido */
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--negrotitulares-background);
	border-radius: 0;
	padding: 0.25rem 0;
	padding-inline-end: 1.5rem;
	font-family: 'Inter', sans-serif;
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	color: var(--negrotitulares-background);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: var(--recurso-select-caret);
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	background-size: 0.7rem;
}
.contacto__field select:focus-visible {
	outline: none;
	border-bottom-color: var(--negrotexto-background);
}

/* CF7 acceptance: el control vive anidado en .wpcf7-list-item */
.contacto__field--checkbox .wpcf7-form-control-wrap { display: block; }
.contacto__field--checkbox .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
}
.contacto__field--checkbox .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
}
.contacto__field--checkbox input[type="checkbox"] {
	margin: 0.2rem 0 0;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	border-bottom: none;
	accent-color: var(--negrotitulares-background);
}
.contacto__field--checkbox .wpcf7-list-item-label {
	font-size: var(--font-body-14);
	line-height: 1.5;                       /* frase legal multi-línea */
	letter-spacing: var(--ls-body-14);
	color: var(--negrotitulares-background);
	text-transform: none;
}
.contacto__field--checkbox .wpcf7-list-item-label a {
	color: var(--negrotitulares-background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ── 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) {
	/* Panel apilado a ancho completo ⇒ la 2.ª columna del form arranca en
	 * 50vw + gap/2 (misma derivación que la base con panel al 50vw). */
	.contacto__datos {
		margin-inline-start: calc(50vw + 1.25rem - 1.5rem);
	}

	.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) {
	/* Datos de contacto del statement: el form pasa a 1 columna ⇒ ya no hay
	 * eje al que alinearse; en columna estrecha leen mejor a la izquierda. */
	.contacto__datos {
		margin-inline-start: 0;
	}

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

/* ── Recursos v2 — category nav + product filters + download modal ── */

.recursos__nav {
	display: flex;
	gap: clamp(1rem, 0.5rem + 2vw, 2rem);
	padding: 0 1.5rem;
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.recursos__nav-btn {
	all: unset;
	font-size: clamp(0.875rem, 11.8px + 0.509vw, 1.125rem);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	opacity: 0.35;
	cursor: pointer;
	--ul-h: max(1px, 0.07em);
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.18em;
	transition:
		opacity var(--motion-fast) var(--ease-default),
		background-size var(--motion-default) var(--ease-default);
}

.recursos__nav-btn.is-active {
	opacity: 1;
	background-size: 100% var(--ul-h);
}

@media (hover: hover) and (pointer: fine) {
	.recursos__nav-btn:hover {
		opacity: 0.7;
	}
	.recursos__nav-btn.is-active:hover {
		opacity: 1;
	}
}

.recursos__nav-btn:focus-visible {
	opacity: 1;
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 4px;
}

/* Sub-type pills (v1: solo fichas técnicas) */

.recursos__subtypes {
	display: flex;
	gap: 1rem;
	padding: 0 1.5rem;
	margin-bottom: 1rem;
}

.recursos__subtype-btn {
	all: unset;
	font-size: clamp(0.8125rem, 11px + 0.4vw, 1rem);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	opacity: 0.35;
	cursor: pointer;
	--ul-h: max(1px, 0.07em);
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 0% var(--ul-h);
	padding-bottom: 0.15em;
	transition:
		opacity var(--motion-fast) var(--ease-default),
		background-size var(--motion-default) var(--ease-default);
}

.recursos__subtype-btn.is-active {
	opacity: 1;
	background-size: 100% var(--ul-h);
}

/* Product group filters */

.recursos__filters {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.5rem, 0.25rem + 1vw, 1rem);
	padding: 0 1.5rem;
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.recursos__filter {
	all: unset;
	font-size: clamp(0.75rem, 10px + 0.3vw, 0.875rem);
	font-weight: 400;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	opacity: 0.5;
	cursor: pointer;
	padding: 0.25em 0.6em;
	border: 1px solid transparent;
	transition:
		opacity var(--motion-fast) var(--ease-default),
		border-color var(--motion-fast) var(--ease-default);
}

.recursos__filter.is-active {
	opacity: 1;
	font-weight: 600;
	border-color: var(--negrotitulares-background);
}

@media (hover: hover) and (pointer: fine) {
	.recursos__filter:hover {
		opacity: 0.8;
	}
}

.recursos__filter:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}

/* Product list */

.recursos__products {
	display: flex;
	flex-direction: column;
	padding: 0 1.5rem;
	margin-bottom: clamp(3rem, 4rem + 2vw, 6rem);
}

.recursos__product-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--negrotitulares-background);
	padding: clamp(0.625rem, 0.25rem + 1.5vw, 1rem) 0;
	color: var(--negrotitulares-background);
	transition: opacity var(--motion-fast) var(--ease-default);
}

.recursos__product-row[hidden] {
	display: none;
}

.recursos__product-row:last-child {
	border-bottom: 1px solid var(--negrotitulares-background);
}

@media (hover: hover) and (pointer: fine) {
	.recursos__product-row:hover {
		opacity: 0.6;
	}
}

.recursos__product-title {
	font-size: clamp(0.9375rem, 0.75rem + 0.75vw, 1.375rem);
	line-height: 1.4;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: -0.02em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recursos__product-download {
	font-size: clamp(0.75rem, 10px + 0.3vw, 0.875rem);
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	color: var(--negrotitulares-background);
	flex-shrink: 0;
	--ul-h: max(1px, 0.07em);
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 100% var(--ul-h);
	padding-bottom: 0.15em;
	transition: background-size var(--motion-default) var(--ease-default);
}

.recursos__product-download:hover,
.recursos__product-download:focus {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}

/* ── Download modal ── */

.recursos__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.recursos__modal[hidden] {
	display: none;
}

.recursos__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 27, 0.55);
}

.recursos__modal-panel {
	position: relative;
	background: var(--blanco-background);
	max-width: 26rem;
	width: 100%;
	padding: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.recursos__modal-close {
	all: unset;
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--negrotitulares-background);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.recursos__modal-close:hover,
.recursos__modal-close:focus-visible {
	opacity: 1;
}

.recursos__modal-title {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	margin: 0 0 2rem;
	padding-right: 2rem;
}

.recursos__modal-field {
	margin-bottom: 1.25rem;
}

.recursos__modal-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	margin-bottom: 0.375rem;
}

.recursos__modal-field input[type="text"],
.recursos__modal-field input[type="email"] {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--negrotitulares-background);
	padding: 0.5rem 0;
	font-size: 1rem;
	font-family: inherit;
	color: var(--negrotitulares-background);
	background: transparent;
	outline: none;
	transition: border-color var(--motion-fast) var(--ease-default);
}

.recursos__modal-field input[type="text"]:focus,
.recursos__modal-field input[type="email"]:focus {
	border-bottom: 2px solid var(--negrotitulares-background);
	padding-bottom: calc(0.5rem - 1px);
}

.recursos__modal-field--consent {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.recursos__modal-field--consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	text-transform: none;
	font-size: 0.8125rem;
	line-height: 1.5;
	cursor: pointer;
}

.recursos__modal-field--consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.15em;
	accent-color: var(--negrotitulares-background);
}

.recursos__modal-field--consent a {
	color: var(--negrotitulares-background);
	text-decoration: underline;
}

.recursos__modal-error {
	display: block;
	font-size: 0.75rem;
	color: #b91c1c;
	margin-top: 0.25rem;
}

.recursos__modal-global-error {
	font-size: 0.8125rem;
	color: #b91c1c;
	padding: 0.75rem;
	background: #fef2f2;
	margin-bottom: 1rem;
}

.recursos__modal-success {
	font-size: 0.8125rem;
	color: #166534;
	padding: 0.75rem;
	background: #f0fdf4;
	margin-bottom: 1rem;
}

.recursos__modal-submit {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.875rem 0;
	background: var(--negrotitulares-background);
	color: var(--blanco-background);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.recursos__modal-submit:hover {
	opacity: 0.85;
}

.recursos__modal-submit:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 3px;
}

.recursos__modal-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Responsive — Recursos v2 ── */

@media (max-width: 47.99em) {
	.recursos__nav {
		padding: 0 1rem;
		margin-top: 1.25rem;
	}

	.recursos__subtypes,
	.recursos__filters {
		padding: 0 1rem;
	}

	.recursos__products {
		padding: 0 1rem;
	}

	.recursos__product-title {
		font-size: 0.875rem;
	}

	.recursos__product-download {
		font-size: 0.6875rem;
	}
}

/*--------------------------------------------------------------
# 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;
	}
}

/*--------------------------------------------------------------
# Proyectos — Archive (Figma D-04A)
--------------------------------------------------------------*/

#primary.proyectos {
	display: flow-root;
	max-width: none;
	padding: var(--header-height) 0 0;
	overflow-x: clip;
	background: var(--arena-background);
}

.proyectos__title {
	margin: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 1.5rem;
	padding: 0 1.5rem;
	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);
	text-transform: lowercase;
}

.proyectos__empty {
	padding: 0 1.5rem 4rem;
	color: var(--negrotitulares-background);
}

/* Card — shared between big and grid */
.proy-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--negrotitulares-background);
}

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

.proy-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--motion-slow) var(--ease-default);
}

@media (hover: hover) and (pointer: fine) {
	.proy-card:hover .proy-card__img {
		transform: scale(1.03);
	}
}

.proy-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem;
	font-size: 1.125rem;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	white-space: nowrap;
	overflow: hidden;
}

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

.proy-card__year {
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.05em;
	margin-left: 0.5em;
}

.proy-card__location {
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1rem;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

/* Big card — first project */
.proy-card--big {
	width: 100%;
}

.proy-card--big .proy-card__image {
	aspect-ratio: auto;
	height: clamp(17.5rem, 94.08px + 49.58vw, 50.5rem);
}

/* Grid — remaining projects */
.proy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.5rem;
	row-gap: clamp(1rem, 10.37px + 1.502vw, 2rem);
	margin-top: clamp(1rem, 10.37px + 1.502vw, 2rem);
	margin-bottom: 4rem;
	container-type: inline-size;
}

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

/* ── Responsive — Archive Proyectos ── */

@media (max-width: 63.99em) {
	.proy-grid {
		grid-template-columns: 1fr;
		margin-bottom: 4rem;
	}
}

@media (max-width: 47.99em) {
	.proyectos__title {
		font-size: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	}

	.proy-card__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		white-space: normal;
	}

	.proy-card__location {
		text-align: left;
	}
}

/*--------------------------------------------------------------
# Noticias — Archive (Figma D-06A)
--------------------------------------------------------------*/

#primary.noticias {
	max-width: none;
	padding: var(--header-height) 0 0;
	overflow-x: clip;
}

.noticias__title {
	margin: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 0 1.5rem;
	padding: 0 1.5rem;
	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);
	text-transform: lowercase;
}

.noticias__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0.5rem;
	row-gap: clamp(1.5rem, 10.37px + 2.5vw, 2.5rem);
	margin-bottom: 4rem;
}

.noticias__empty {
	padding: 0 1.5rem 4rem;
	color: var(--negrotitulares-background);
}

.noticias__pagination {
	padding: 0 1.5rem 4rem;
	text-align: center;
}

.noticias__pagination ul {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.noticias__pagination a,
.noticias__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	font-size: 0.875rem;
	color: var(--negrotitulares-background);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	transition: border-color var(--motion-fast) var(--ease-default);
}

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

.noticias__pagination .current {
	font-weight: 600;
	border-color: var(--negrotitulares-background);
}

/* ── News Card — componente reutilizable ── */

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

.news-card__image {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 475 / 472;
}

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

@media (hover: hover) and (pointer: fine) {
	.news-card:hover .news-card__image img {
		transform: scale(1.03);
	}
}

.news-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
}

.news-card__title {
	font-size: clamp(1.125rem, 0.911rem + 0.893vw, 1.5rem);
	line-height: clamp(1.5rem, 1.286rem + 0.893vw, 2rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	margin: 0;
}

.news-card__excerpt {
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	font-weight: 400;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__link {
	font-size: 1.125rem;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	font-weight: 400;
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ── Responsive — Noticias Archive ── */

@media (max-width: 63.99em) {
	.noticias__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 47.99em) {
	.noticias__title {
		font-size: clamp(2rem, 1.046rem + 4.071vw, 3rem);
		line-height: clamp(2rem, 1.046rem + 4.071vw, 3rem);
	}

	.noticias__grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Proyectos — Single (Figma D-04B)
--------------------------------------------------------------*/

#primary.single-proy {
	max-width: none;
	padding: var(--header-height) 0 0;
	overflow-x: clip;
}

/* Titlebar: título + ubicación en línea */
.single-proy__titlebar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 1.5rem 1rem;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
}

.single-proy__name {
	font-size: clamp(1.5rem, 0.643rem + 3.571vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 600;
}

.single-proy__year {
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.05em;
	margin-left: 0.3em;
}

.single-proy__location {
	font-size: clamp(0.875rem, 0.518rem + 1.488vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 400;
	flex-shrink: 0;
	text-align: right;
}

/* Hero image */
.single-proy__hero {
	width: 100%;
	overflow: hidden;
}

.single-proy__hero img {
	width: 100%;
	height: clamp(14rem, 94.08px + 49.58vw, 50.5rem);
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Quote / descripción */
.single-proy__quote {
	position: relative;
	padding: clamp(3rem, 1.286rem + 7.143vw, 5.5rem) 1.5rem clamp(3rem, 0.429rem + 10.714vw, 6rem);
	background: var(--blanco-background);
}

.single-proy__quote-label {
	display: block;
	font-size: 1.125rem;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--negrotitulares-background);
	margin-bottom: 1rem;
}

.single-proy__quote-text {
	font-size: clamp(1.5rem, 0.357rem + 4.762vw, 3.5rem);
	line-height: clamp(1.75rem, 0.321rem + 5.952vw, 4.25rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	max-width: 86.67%;
	margin-left: auto;
}

.single-proy__quote-text p {
	margin: 0;
}

/* Galería horizontal — Embla carousel */
.single-proy__gallery {
	position: relative;
	overflow: hidden;
}

.single-proy__gallery-track {
	display: flex;
	gap: 0.5rem;
}

.single-proy__gallery-item {
	flex: 0 0 auto;
	height: clamp(18rem, 7.143rem + 45.238vw, 47.5rem);
	width: clamp(12rem, 4.286rem + 32.143vw, 37.5rem);
}

.single-proy__gallery-item--wide {
	width: clamp(24rem, 8.571rem + 64.286vw, 75rem);
}

.single-proy__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.single-proy__gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.8);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--negrotitulares-background);
	transition: opacity var(--motion-fast) var(--ease-default);
	z-index: 2;
}

.single-proy__gallery-arrow:hover {
	background: rgba(255, 255, 255, 0.95);
}

.single-proy__gallery-arrow--prev {
	left: 1rem;
}

.single-proy__gallery-arrow--next {
	right: 1rem;
}

/* ── Responsive — Single Proyecto ── */

@media (max-width: 47.99em) {
	.single-proy__titlebar {
		flex-direction: column;
		gap: 0.5rem;
	}

	.single-proy__location {
		text-align: left;
		font-size: 0.875rem;
		line-height: 1rem;
	}

	.single-proy__quote-text {
		max-width: 100%;
		margin-left: 0;
	}
}

/*--------------------------------------------------------------
# Noticias — Single (Figma D-06B)
--------------------------------------------------------------*/

#primary.single-not {
	max-width: none;
	padding: var(--header-height) 0 0;
	overflow-x: clip;
}

/* Titlebar */
.single-not__titlebar {
	padding: clamp(4.5rem, 2.59rem + 8.14vw, 6.5rem) 1.5rem 1rem;
	color: var(--negrotitulares-background);
}

.single-not__name {
	font-size: clamp(1.5rem, 0.643rem + 3.571vw, 3rem);
	line-height: clamp(1.75rem, 0.75rem + 4.167vw, 3rem);
	letter-spacing: -0.04em;
	font-weight: 600;
	max-width: 48rem;
}

/* Hero */
.single-not__hero {
	width: 100%;
	overflow: hidden;
}

.single-not__hero img {
	width: 100%;
	height: clamp(14rem, 94.08px + 49.58vw, 50.5rem);
	object-fit: cover;
	object-position: center;
	display: block;
}

@keyframes skld-fade-up { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .single-not__content { animation: none; } }

/* Contenido del artículo — entrada CSS-only segura (no depende de IntersectionObserver) */
.single-not__content {
	animation: skld-fade-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
	max-width: 57.875rem;
	margin: 0 auto;
	padding: clamp(2rem, 0.571rem + 5.952vw, 4.5rem) 1.5rem;
}

.single-not__date {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--negrotitulares-background);
	margin-bottom: 1rem;
}

.single-not__lead {
	font-size: clamp(1rem, 0.786rem + 0.893vw, 1.125rem);
	line-height: 1.5rem;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--negrotitulares-background);
	margin-bottom: 2rem;
}

.single-not__body {
	font-size: 1rem;
	line-height: 1.75rem;
	letter-spacing: -0.02em;
	color: var(--negrotitulares-background);
}

.single-not__body p {
	margin: 0 0 1.5rem;
}

.single-not__body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 2rem 0;
}

.single-not__body a {
	color: var(--negrotitulares-background);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Noticias relacionadas */
.single-not__related {
	padding: clamp(2rem, 0.571rem + 5.952vw, 4rem) 1.5rem 4rem;
}

.single-not__related-title {
	font-size: clamp(1.5rem, 0.643rem + 3.571vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 600;
	color: var(--negrotitulares-background);
	text-transform: lowercase;
	margin: 0 0 2rem;
}

.single-not__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0.5rem;
	row-gap: 1.5rem;
}

/* ── Responsive — Single Noticia ── */

@media (max-width: 63.99em) {
	.single-not__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 47.99em) {
	.single-not__related-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# 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;
	}
}


/* ════════════════════════════════════════════════════════════════════
 * RECURSOS V2 — Fase 4 (refactor paridad Figma 2026-06-09)
 * Página /recursos: sidebar jerárquico + grids + filtros.
 *
 * Layout: FULL-WIDTH (vence el constraint default de #primary que limita
 * a 72rem). Cards de archivo: aspect-ratio fijo 1:1, tipografía interna
 * fluida via container queries (cqi) para que "instrucciones de montaje"
 * y "ficha técnica" coexistan en cards iguales.
 *
 * Paleta cards heredada del proyecto (inc/acf/acf-recursos.php):
 *   arena #DCC3AA · terracota #D6AA86 · piedra #F1EDE6 · mantequilla #FFECCC
 * ════════════════════════════════════════════════════════════════════ */

/* Full-width override del #primary (que por default es max-width: 72rem) */
#primary.recursos-v2,
.recursos-v2 {
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--blanco-background);
	color: var(--negrotitulares-background);
	/* 16px@375 → 24px@768 (satura en 24px desde 768) */
	padding-inline: clamp(1rem, 8.36px + 2.036vw, 1.5rem);
	/* 64px@375 → 104px@1440 */
	padding-block-start: clamp(4rem, 49.91px + 3.756vw, 6.5rem);
	/* 48px@375 → 80px@1440 */
	padding-block-end: clamp(3rem, 36.73px + 3.005vw, 5rem);
}

.recursos-v2__title {
	/* 40px@375 | 48px@768 | 64px@1440 */
	font-size: clamp(2.5rem, 31.55px + 2.254vw, 4rem);
	line-height: 1;                          /* lh64 = 1:1 */
	letter-spacing: var(--ls-heading-64);    /* -0.04em */
	font-weight: 600;                        /* Semi Bold */
	text-transform: lowercase;
	/* Aire entre H1 y el layout (sidebar/contenido). Figma: 48px @1440. */
	margin-block-end: clamp(2rem, 1rem + 1.5vw, 3rem);
}

.recursos-v2__layout {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.5vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.recursos-v2__layout {
		/* sidebar 176px@768 → 225px@1440 (max 14.0625rem) */
		grid-template-columns: clamp(11rem, 7.5rem + 7.292vw, 14.0625rem) 1fr;
		/* gap 40px@768 → 125px@1440 */
		column-gap: clamp(2.5rem, -57.06px + 12.649vw, 7.8125rem);
		row-gap: 0;
		align-items: start;
	}
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.recursos-v2__sidebar { border: 0; padding: 0; margin: 0; max-width: 14.0625rem; } /* tope 225px */

.recursos-v2__sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
	padding-inline: 0;
	border-block-end: 1px solid var(--negrotitulares-background);
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	font-weight: 600;
	text-transform: lowercase;
	cursor: pointer;
	list-style: none;
	color: var(--negrotitulares-background);
}

.recursos-v2__sidebar-toggle::-webkit-details-marker { display: none; }
.recursos-v2__sidebar[open] .recursos-v2__sidebar-toggle svg { transform: rotate(180deg); }
.recursos-v2__sidebar-toggle svg {
	transition: transform var(--motion-default) var(--ease-default);
	flex-shrink: 0;
}

@media (min-width: 48em) {
	.recursos-v2__sidebar-toggle { display: none; }
	.recursos-v2__sidebar-content { display: block !important; }
}

.recursos-v2__sidebar-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1rem;
}

@media (min-width: 48em) { .recursos-v2__sidebar-content { padding-top: 0; } }

/* Buscador — Figma: solo input con placeholder italic + underline */
.recursos-v2__search-label {
	/* Visualmente oculto (lo registramos para a11y, placeholder visible) */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.recursos-v2__search {
	padding-block-end: 0;   /* el gap 1.5rem del flex-column separa del 1er item */
}

.recursos-v2 .recursos-v2__search-input {
	width: 100%;
	padding: 0;
	font-size: var(--font-body-16);
	font-family: inherit;
	font-style: italic;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	color: var(--negrotitulares-background);
}

.recursos-v2__search-input::placeholder {
	color: rgba(29, 29, 27, 0.5);
	font-style: italic;
}

.recursos-v2__search-input:focus { outline: none; }

/* Cats — Figma D-08: cada categoría con border-top + 24px pad + label, separadas
 * por 24px de aire entre bloques → distancia label-to-label ~72px (Figma exact).
 * Sin el gap, los items aparecen pegados. */
.recursos-v2__cats {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                            /* 24px entre cat-blocks → 72px label-to-label */
}

.recursos-v2__cat {
	display: block;
	padding-block-start: 1.5rem;   /* 24px — gap entre border-top y el label */
	padding-block-end: 0;
	padding-inline: 0;
	border-block-start: 1px solid var(--negrotitulares-background);
	font-size: var(--font-body-16);          /* 16px SB (era 18px) */
	line-height: var(--lh-body-16);          /* 24px */
	letter-spacing: var(--ls-body-16);       /* -0.02em */
	font-weight: 600;
	text-transform: lowercase;
	text-decoration: none;
	color: var(--negrotitulares-background);
	transition: color var(--motion-fast) var(--ease-default);
}

.recursos-v2__cat:hover { color: rgba(29, 29, 27, 0.55); }
.recursos-v2__cat:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}

/* Subcats (dentro de "productos") — Figma: pegados al borde izq, sin sangrado. */
.recursos-v2__subcats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;                              /* 16px Figma */
}

.recursos-v2__subcat {
	display: block;
	padding: 0;
	font-size: var(--font-body-14);         /* 14px (era 16px) */
	line-height: var(--lh-body-14);         /* 16px */
	letter-spacing: var(--ls-body-14);      /* -0.02em */
	font-weight: 400;
	/* SIN text-transform: Figma preserva el caso (archivo 3D, BIM Revit) */
	text-decoration: none;
	color: var(--negrotitulares-background);
	transition: color var(--motion-fast) var(--ease-default);
}

.recursos-v2__subcat:hover { color: rgba(29, 29, 27, 0.55); }
.recursos-v2__subcat:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}

/* Subtipo inactivo: tipo de descarga sin contenido para ningún producto.
 * Opacidad reducida → comunica "no hay descargas disponibles de este tipo".
 * El enlace sigue activable (navega a la vista vacía con su empty state). */
.recursos-v2__subcat--inactive {
	opacity: 0.35;
}
.recursos-v2__subcat--inactive:hover { opacity: 0.55; color: rgba(29, 29, 27, 0.55); }

/* Estado activo:
 * - Subcats hijos: underline (patrón del theme).
 * - Cats madre: NO underline (una "línea inferior" bajo una categoría con hijos
 *   se lee como "fin de bloque"; visualmente compite con la línea de la siguiente
 *   categoría). En su lugar, opacidad reducida → gris suave. */
.recursos-v2__subcat.is-active {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 1px;
}
.recursos-v2__cat.is-active {
	color: rgba(29, 29, 27, 0.55);
}

/* ── Main ────────────────────────────────────────────────────────── */
.recursos-v2 .recursos-v2__main { display: block; min-width: 0; }

/* Filtros tipología — Figma: texto plano, sin border-bottom de la nav,
 * activo solo en peso normal (sin bold dramático). */
.recursos-v2__tipologias {
	display: flex;
	flex-wrap: wrap;                        /* mobile: envuelve a 2 filas (6 filtros cortos), sin scroll oculto */
	gap: 1rem;                              /* 16px Figma */
	/* ~28px@375 → 40px@1440 */
	margin-block-end: clamp(1.75rem, 1rem + 1.953vw, 2.5rem);
}

.recursos-v2__tipologia {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	font-weight: 400;
	text-transform: lowercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--negrotitulares-background);
	transition: color var(--motion-fast) var(--ease-default);
	/* tap-target 44px en mobile sin alterar layout */
	padding-block: max(0.625rem, (44px - var(--lh-body-16)) / 2);
	padding-inline: 0;
	flex-shrink: 0;
}
.recursos-v2__tipologia:hover {
	color: color-mix(in oklch, var(--negrotitulares-background) 55%, transparent);
}
.recursos-v2__tipologia:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
	border-radius: 1px;
}
.recursos-v2__tipologia.is-active {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 1px;
}

@media (min-width: 48em) {
	.recursos-v2__tipologias { overflow-x: visible; flex-wrap: wrap; }
	.recursos-v2__tipologia  { padding-block: 0; }
}

/* Breadcrumb — Figma: texto plano, sin caja ni borde */
.recursos-v2__breadcrumb {
	display: inline-flex;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0 0 clamp(1.5rem, 1rem + 1vw, 2.5rem);
	font-size: var(--font-body-14);          /* 14px (era 16px) */
	line-height: var(--lh-body-14);          /* 16px */
	letter-spacing: var(--ls-body-14);       /* -0.02em */
	color: rgba(29, 29, 27, 0.8);            /* negro 80% Figma */
	text-transform: lowercase;
}

.recursos-v2__breadcrumb a {
	color: rgba(29, 29, 27, 0.8);
	text-decoration: none;
	transition: color var(--motion-fast) var(--ease-default);
}

.recursos-v2__breadcrumb a:hover { color: rgba(29, 29, 27, 0.55); }
.recursos-v2__breadcrumb a:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}
.recursos-v2__breadcrumb [aria-hidden="true"] {
	color: rgba(29, 29, 27, 0.4);            /* separador en 40% (jerarquia) */
	user-select: none;
}

/* Header de la vista de archivos de UN producto (VISTA 3) — v2.1A:
 * nombre del producto + contador de recursos disponibles. */
.recursos-v2__producto-header {
	margin: 0 0 clamp(1.5rem, 1rem + 1vw, 2.5rem);
}
.recursos-v2__producto-titulo {
	margin: 0;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
}
.recursos-v2__producto-count {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.8125rem;                    /* 13px — etiqueta secundaria */
	line-height: 1.3;
	font-weight: 500;
	color: color-mix(in oklch, var(--negrotitulares-background) 55%, transparent);
}

/* Grids */
.recursos-v2__grid {
	display: grid;
	gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/* Grid productos + archivos — Figma: cards fijas 225 con auto-fill: la CUENTA de
 * columnas se adapta al ancho disponible (nunca desborda; fix overflow @960).
 * Mobile (<768): fluido (2-col, cards estiran). col-gap 8 / row-gap 32. */
.recursos-v2__grid--productos,
.recursos-v2__grid--archivos {
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	column-gap: 8px;
	row-gap: 2rem;
	justify-content: start;
}
@media (min-width: 48em) {
	.recursos-v2__grid--productos,
	.recursos-v2__grid--archivos {
		grid-template-columns: repeat(auto-fill, 225px);
	}
}

/* Cards genericas (catalogos/acabados/cert/prensa) — 4 col fluidas (sin frame Figma especifico). */
.recursos-v2__grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
@media (min-width: 48em) {
	.recursos-v2__grid--cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* (Grid productos unificado con archivos arriba — auto-fill 225px, sin overflow.) */

/* ── Cards base ─────────────────────────────────────────────────── */
.recursos-v2__card { position: relative; }
.recursos-v2__card[hidden] { display: none; }

.recursos-v2__card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.recursos-v2__card-link:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Media base (compartida por genericas) — aspect 1, object-fit contain.
 * El override 224/225 + cover es SOLO para --producto (abajo). */
.recursos-v2__card-media {
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 1rem;
}

.recursos-v2__card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Cards de producto (vista grid productos) — media 224/225 cover + title SB18 */
.recursos-v2__card--producto { background: transparent; }

.recursos-v2__card--producto .recursos-v2__card-media {
	aspect-ratio: 225 / 224;                /* ≈1.0045 — Figma 225x224 */
	background: var(--blanco-background);
	margin-block-end: 0;                    /* el padding del title separa */
}
.recursos-v2__card--producto .recursos-v2__card-media img {
	object-fit: cover;                      /* Figma muestra recorte */
	transition: scale var(--motion-fast) var(--ease-default);
}
.recursos-v2__card--producto .recursos-v2__card-link:hover .recursos-v2__card-media img,
.recursos-v2__card--producto .recursos-v2__card-link:focus-visible .recursos-v2__card-media img {
	scale: 1.03;
}

.recursos-v2__card-title,
.recursos-v2__card--producto .recursos-v2__card-title {
	font-size: var(--font-body-18);          /* 18px SB (era 16px) */
	line-height: var(--lh-body-18);          /* 24px */
	letter-spacing: var(--ls-body-18);       /* -0.02em */
	font-weight: 600;
	text-transform: lowercase;
	margin: 0;
	padding-block-start: 1rem;               /* 16px distancia imagen→nombre */
	padding-inline: 1rem;                    /* 16px — Figma label px-16 */
	color: var(--negrotitulares-background);
}

/* Contador de recursos descargables por producto (browse + resultados). */
.recursos-v2__card-count {
	display: block;
	margin: 0;
	padding-block-start: 0.25rem;            /* 4px bajo el nombre */
	padding-inline: 1rem;                    /* alineado con el título */
	font-size: 0.8125rem;                    /* 13px — etiqueta secundaria */
	line-height: 1.3;
	font-weight: 500;
	color: color-mix(in oklch, var(--negrotitulares-background) 55%, transparent);
}

/* Resultados de búsqueda full-catalog (Modo A): cabecera "N en todo el catálogo". */
.recursos-v2__results-header {
	margin: 0 0 clamp(1rem, 0.5rem + 1vw, 1.5rem);
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	color: color-mix(in oklch, var(--negrotitulares-background) 55%, transparent);
}

/* Buscador global: el buscador busca productos por nombre/ref desde CUALQUIER
 * vista. Al escribir, `.recursos-v2__main` recibe `.is-searching`: se muestran
 * los resultados y se oculta la vista actual (catálogos, productos, acabados…).
 * Sin búsqueda, los resultados quedan ocultos y la vista original visible. */
.recursos-v2__main > .recursos-v2__results { display: none; }
.recursos-v2__main.is-searching > .recursos-v2__results { display: block; }
.recursos-v2__main.is-searching > *:not(.recursos-v2__results) { display: none; }

/* ── Resultados en LISTA (búsqueda) — índice editorial ───────────
 * Filas divididas por HAIRLINES NEGRAS. Título protagonista + meta
 * (ref · nº recursos) debajo; recursos como tags "ghost" (borde 1px
 * negro, sin relleno, texto pequeño) alineadas a la derecha que
 * invierten a negro en hover. Sin imagen. Lenguaje tipográfico
 * recursos-v2 (lowercase, tokens). */
.recursos-v2__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--negrotitulares-background);
}
.recursos-v2__list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	flex-wrap: wrap;
	padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
	border-block-end: 1px solid var(--negrotitulares-background);
}
.recursos-v2__list-main { min-width: 0; }

.recursos-v2__list-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
.recursos-v2__list-link:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 4px;
}
.recursos-v2__list-title {
	display: block;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	transition: opacity var(--motion-fast) var(--ease-default);
}
.recursos-v2__list-link:hover .recursos-v2__list-title { opacity: 0.55; }

.recursos-v2__list-meta {
	display: flex;
	flex-wrap: wrap;
	margin: 0.375rem 0 0;
	font-size: 0.75rem;                      /* 12px — meta secundaria */
	line-height: 1.3;
	color: color-mix(in oklch, var(--negrotitulares-background) 55%, transparent);
}
.recursos-v2__list-meta > * + *::before {
	content: '·';
	margin-inline: 0.5rem;
}
.recursos-v2__list-ref {
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.recursos-v2__list-ref::before {
	content: 'REF. ';
}

.recursos-v2__list-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}
/* Tag de descarga "ghost": borde 1px negro, sin relleno, texto pequeño;
 * invierte a negro en hover/focus (interacción premium). */
.recursos-v2__list-file {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.375rem 0.6875rem;
	border: 1px solid var(--negrotitulares-background);
	background: transparent;
	text-decoration: none;
	color: var(--negrotitulares-background);
	font-size: 0.6875rem;                    /* 11px — pequeño */
	line-height: 1.2;
	letter-spacing: 0.01em;
	transition: background-color var(--motion-fast) var(--ease-default),
	            color var(--motion-fast) var(--ease-default);
}
.recursos-v2__list-file:hover,
.recursos-v2__list-file:focus-visible {
	background: var(--negrotitulares-background);
	color: var(--blanco-background);
	outline: none;
}
.recursos-v2__list-file-label { text-transform: lowercase; }
.recursos-v2__list-file-ext {
	flex-shrink: 0;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.06em;
}

@media (max-width: 47.99em) {
	.recursos-v2__list-item  { align-items: flex-start; }
	.recursos-v2__list-files { justify-content: flex-start; }
}

/* Cards de archivo — Figma D-08 RECURSOS-2/3:
 *   Cuadrado coloreado por tipo, padding generoso, layout:
 *     - REF arriba izq pequeño
 *     - Tipo del archivo arriba (semibold grande, 1-2 líneas)
 *     - Formato abajo izq (semibold grande)
 *     - Botón download arriba derecha en hover (en Figma aparece sobre BIM Revit por defecto)
 *   Tono fondo según data-tipo. */

/* Container en la CARD (sin padding) → cqi se mide vs los 225px reales de la card,
 * no vs el content-box del link (225-48 de padding). Asi 10.67cqi=24, 6.22cqi=14, 14.22cqi=32. */
.recursos-v2__card--archivo {
	container-type: inline-size;
	container-name: archivo-card;
}
.recursos-v2__card--archivo .recursos-v2__card-archivo-link {
	position: relative;
	display: flex;              /* columna: body (flex:1) + cta DENTRO del padding */
	flex-direction: column;
	aspect-ratio: 225 / 224;    /* Figma 225x224 */
	min-width: 0;               /* evita overflow en grid */
	padding: clamp(0.75rem, 10.67cqi, 1.5rem);   /* 12-24px (24px@225) */
	text-decoration: none;
	color: var(--negrotitulares-background);
	background: var(--gris-background); /* fallback "otro" */
	transition: filter var(--motion-fast) var(--ease-default);
	overflow: hidden;            /* contiene cualquier desbordamiento accidental */
}

.recursos-v2__card--archivo .recursos-v2__card-archivo-link:hover { filter: brightness(0.96); }

/* Tonos por tipo — escala terracota via color-mix (Figma D-08).
 * Contraste negro #1D1D1B verificado: 40%=12.79:1, 60%=11.00:1 (PASS AA). */
.recursos-v2__card--tipo-ficha_tecnica .recursos-v2__card-archivo-link {
	background: var(--terracota-background);                                   /* 100% */
}
.recursos-v2__card--tipo-archivo_3d .recursos-v2__card-archivo-link {
	background: color-mix(in srgb, var(--terracota-background) 80%, transparent);
}
.recursos-v2__card--tipo-archivo_2d .recursos-v2__card-archivo-link {
	background: color-mix(in srgb, var(--terracota-background) 60%, transparent);
}
.recursos-v2__card--tipo-bim_revit .recursos-v2__card-archivo-link {
	background: color-mix(in srgb, var(--terracota-background) 40%, transparent);
}
.recursos-v2__card--tipo-certificado_producto .recursos-v2__card-archivo-link {
	background: var(--gris-background);
}
.recursos-v2__card--tipo-instrucciones_montaje .recursos-v2__card-archivo-link {
	background: var(--piedra-background);
}
.recursos-v2__card--tipo-fotos_producto .recursos-v2__card-archivo-link {
	background: color-mix(in srgb, var(--terracota-background) 25%, transparent);
}
.recursos-v2__card--tipo-otro .recursos-v2__card-archivo-link {
	background: var(--gris-background);     /* era #FFECCC mantequilla — corregido a gris */
}

.recursos-v2__card-archivo-body {
	flex: 1 1 auto;             /* ocupa el alto restante; el cta queda debajo SIN
	                               desbordar el padding inferior (petición cliente 2026-07-16).
	                               min-height auto (implícito): el body nunca encoge por debajo
	                               de su contenido → sin solapes en cards pequeñas. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;         /* Figma: grupo ref+tipo arriba, formato abajo */
}

/* Grupo ref + tipo (Figma Frame60): juntos arriba con gap 4px (cqi).
 * Sin esto, justify-between centraria el tipo entre ref y formato. */
.recursos-v2__card-archivo-top {
	display: flex;
	flex-direction: column;
	gap: clamp(0.1875rem, 1.78cqi, 0.25rem);  /* 4px@225 */
}

/* Tipografía interna FLUIDA via container queries (cqi = % del ancho de la card).
 * Garantiza que "ficha técnica" y "instrucciones de montaje" caben en cards
 * iguales sin desbordamiento, escalando con el tamaño real del contenedor. */

/* Tipografía calibrada para matchear Figma D-08 RECURSOS-2 a tamaño de
 * card normal (~260-320px en desktop). Los clamps permiten escalado para
 * cards más pequeñas (mobile) o más grandes (full-width 1920) sin romper. */

.recursos-v2__card-archivo-ref {
	font-size: clamp(0.625rem, 6.22cqi, 0.875rem);   /* 10-14px (14px@225) */
	line-height: 1rem;                                /* 16px */
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--negrotitulares-background);
	margin: 0;                                        /* el gap lo gestiona .card-archivo-top */
}

.recursos-v2__card-archivo-tipo {
	font-size: clamp(0.875rem, 10.67cqi, 1.5rem);    /* 14-24px (24px@225) */
	line-height: 1.333;                               /* ~32px @ 24px */
	letter-spacing: -0.04em;
	font-weight: 600;
	/* SIN text-transform: Figma preserva el caso (BIM Revit, archivo 3D) */
	margin: 0;
	flex: 0 1 auto;
	/* Limita a 3 líneas máx con elipsis si excede (defensa) */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}

.recursos-v2__card-archivo-formato {
	font-size: clamp(0.875rem, 10.67cqi, 1.5rem);    /* 14-24px */
	line-height: 1.333;
	letter-spacing: -0.04em;
	font-weight: 600;
	text-transform: lowercase;
	margin: 0;
	align-self: flex-start;
}

/* Respiro entre formato y cta (dentro del padding de la card).
 * 2px@84 - 4px@225 fluido por cqi. */
.recursos-v2__card--archivo .recursos-v2__card-archivo-cta {
	margin-block-start: clamp(0.125rem, 1.78cqi, 0.25rem);
}

/* Botón download (esquina inferior derecha en hover/focus).
 * Circulo 32px@225 (14.22cqi). Alineado al padding de la caja. */
.recursos-v2__card-archivo-download {
	position: absolute;
	bottom: clamp(0.75rem, 10.67cqi, 1.5rem);
	right: clamp(0.75rem, 10.67cqi, 1.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(1.25rem, 14.22cqi, 2rem);            /* 20-32px */
	height: clamp(1.25rem, 14.22cqi, 2rem);
	border-radius: 50%;
	border: 1px solid var(--negrotitulares-background);
	background: transparent;
	color: var(--negrotitulares-background);
	opacity: 0;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.recursos-v2__card-archivo-download svg {
	width: 45%;
	height: 45%;
}

.recursos-v2__card--archivo .recursos-v2__card-archivo-link:hover .recursos-v2__card-archivo-download,
.recursos-v2__card--archivo .recursos-v2__card-archivo-link:focus-visible .recursos-v2__card-archivo-download {
	opacity: 1;
}

/* Nombre del producto BAJO la card de archivo (fuera del cuadrado coloreado) */
.recursos-v2__card-archivo-producto {
	font-size: var(--font-body-18);          /* 18px */
	line-height: var(--lh-body-18);          /* 24px */
	letter-spacing: var(--ls-body-18);       /* -0.02em */
	font-weight: 600;                        /* era 400 */
	text-transform: lowercase;
	margin: 0;
	padding-block-start: 1rem;               /* 16px */
	padding-inline: 1rem;                    /* 16px (nuevo) */
	color: var(--negrotitulares-background);
}

/* Cards genéricas (catálogos / acabados / cert empresa / prensa) */
.recursos-v2__card-generic-body { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.75rem; }

.recursos-v2__card-generic-fecha {
	font-size: var(--font-body-12);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(29, 29, 27, 0.6);
}

.recursos-v2__card-generic-title {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	font-weight: 400;
	text-transform: lowercase;
	margin: 0;
}

.recursos-v2__card-generic-desc {
	font-size: var(--font-body-12);
	line-height: var(--lh-body-12);
	color: rgba(29, 29, 27, 0.7);
	margin: 0;
}

/* F9 — tarjetas de sección estilo Sancal: nombre + extensión + peso + color por categoría */
.recursos-v2__card-generic-meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-block-start: 0.25rem;
}
.recursos-v2__card-generic-ext {
	font-size: var(--font-body-12);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--negrotitulares-background);
}
.recursos-v2__card-generic-peso {
	font-size: var(--font-body-12);
	color: rgba(29, 29, 27, 0.6);
}

/* Color por categoría (ref. Sancal): tintes suaves de la paleta de marca; el
   texto se mantiene en negro (contraste AA sobre todos ellos).
   Excepción: catálogos SIN tinte (fondo transparente) — petición del cliente 2026-07-16. */
.recursos-v2__card--generic { border-radius: 2px; }
.recursos-v2__card--generic .recursos-v2__card-generic-body {
	padding-inline: 1rem;
	padding-block-end: 1rem;
}
.recursos-v2__card--generic.recursos-v2__card--categoria-catalogos {
	background-color: transparent;
}
.recursos-v2__card--generic.recursos-v2__card--categoria-acabados {
	background-color: color-mix(in srgb, var(--arena-background) 45%, var(--blanco-background));
}
.recursos-v2__card--generic.recursos-v2__card--categoria-certificados-empresa {
	background-color: color-mix(in srgb, var(--piedra-background) 75%, var(--blanco-background));
}
.recursos-v2__card--generic.recursos-v2__card--categoria-prensa {
	background-color: color-mix(in srgb, var(--mantequilla-background) 55%, var(--blanco-background));
}

/* Empty + pagination */
.recursos-v2__empty {
	padding-block: clamp(2rem, 1rem + 2vw, 3rem);
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	letter-spacing: var(--ls-body-16);
	color: var(--negrotitulares-background);  /* negro 100% */
	font-style: normal;
	font-weight: 400;
}

.recursos-v2__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.5rem;
	margin-top: clamp(2rem, 1rem + 2vw, 4rem);
}

.recursos-v2__pagination .page-numbers {
	min-width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
	font-size: var(--font-body-16);
	text-decoration: none;
	color: var(--negrotitulares-background);
}

.recursos-v2__pagination .page-numbers:hover { color: rgba(29, 29, 27, 0.55); }
.recursos-v2__pagination .page-numbers.current {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.recursos-v2__card-archivo-download,
	.recursos-v2__sidebar-toggle svg,
	.recursos-v2__card--producto .recursos-v2__card-media img {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MODAL DE DESCARGAS (lead-capture) — sin diseño Figma propio.
 * Reutiliza el look&feel del sitio: inputs underline del formulario de contacto,
 * submit con subrayado animado (patrón CTA), tipografía y tokens del theme.
 * Es un div[role=dialog] con `hidden` toggle (JS interceptor con focus-trap+ESC).
 * Razón documentada para no migrar a <dialog> nativo: la implementación JS ya
 * está completa y verificada (web-platform-modern: legacy vigente, fuera de scope).
 * ═══════════════════════════════════════════════════════════════════════════ */
.skld-dl-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;                          /* sobre el header (1000/1001) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 0.5rem + 2vw, 2rem);
}
.skld-dl-modal[hidden] { display: none; }   /* gana al display:flex por especificidad */

.skld-dl-modal__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--negrotitulares-background) 55%, transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: pointer;
	animation: skld-dl-modal-fade var(--motion-default) var(--ease-out) both;
}

.skld-dl-modal__panel {
	position: relative;
	width: 100%;
	max-width: 30rem;                       /* 480px */
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	background: var(--blanco-background);
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	animation: skld-dl-modal-panel var(--motion-default) var(--ease-out) both;
}

@keyframes skld-dl-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes skld-dl-modal-panel {
	from { opacity: 0; transform: translateY(1rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.skld-dl-modal__close {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1rem);
	right: clamp(0.5rem, 1.5vw, 1rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;                     /* 44px tap */
	min-height: 2.75rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--negrotitulares-background);
	cursor: pointer;
	transition: color var(--motion-fast) var(--ease-default);
}
.skld-dl-modal__close:hover { color: rgba(29, 29, 27, 0.55); }
.skld-dl-modal__close:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}

.skld-dl-modal__title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);   /* 20 → 24px */
	line-height: 1.25;                       /* títulos de 2 líneas — algo más apretado que body */
	letter-spacing: -0.02em;
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	margin: 0;
	padding-right: 2rem;                    /* hueco para la X */
}

.skld-dl-modal__desc {
	font-size: var(--font-body-14);
	line-height: 1.5;                       /* texto multi-línea — respiración de párrafo */
	letter-spacing: var(--ls-body-14);
	color: rgba(29, 29, 27, 0.7);
	margin: 0.75rem 0 0;
	text-transform: lowercase;
}
.skld-dl-modal__desc:empty { display: none; }

.skld-dl-modal__form {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 2rem;
}

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

.skld-dl-modal__field { display: flex; flex-direction: column; }

.skld-dl-modal__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;
}

/* Inputs y selects = estilo underline del formulario de contacto (no caja) */
.skld-dl-modal__field input[type="text"],
.skld-dl-modal__field input[type="email"],
.skld-dl-modal__field input[type="tel"],
.skld-dl-modal__field select {
	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);
	color: var(--negrotitulares-background);
}
.skld-dl-modal__field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-inline-end: 1.5rem;
	background-image: var(--recurso-select-caret);
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	background-size: 0.7rem;
}
.skld-dl-modal__field input:focus-visible,
.skld-dl-modal__field select:focus-visible {
	outline: none;
	border-bottom-color: var(--negrotexto-background);
}

/* Consentimiento (checkbox + enlace privacidad) */
.skld-dl-modal__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.625rem;
}
.skld-dl-modal__field--checkbox input {
	margin: 0.2rem 0 0;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	accent-color: var(--negrotitulares-background);
}
.skld-dl-modal__field--checkbox label {
	margin: 0;
	font-size: var(--font-body-14);
	line-height: 1.5;                       /* frase legal multi-línea — respiración */
	letter-spacing: var(--ls-body-14);
	color: var(--negrotitulares-background);
	text-transform: none;                   /* la frase legal en su caso normal */
}
.skld-dl-modal__field--checkbox a {
	color: var(--negrotitulares-background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.skld-dl-modal__field-error {
	margin-top: 0.375rem;
	font-size: var(--font-body-12);
	line-height: var(--lh-body-12);
	color: #9b2c2c;
}

.skld-dl-modal__status {
	font-size: var(--font-body-14);
	line-height: var(--lh-body-14);
	letter-spacing: var(--ls-body-14);
}
.skld-dl-modal__status--error   { color: #9b2c2c; }
.skld-dl-modal__status--success { color: var(--negrotitulares-background); font-weight: 600; }

/* Submit = patrón CTA del sitio (texto + subrayado animado, 44px tap) */
.skld-dl-modal__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	background: none;
	border: none;
	padding: 0.625rem 0;
	font-family: inherit;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	cursor: pointer;
	--ul-h: max(1px, 0.07em);
}
.skld-dl-modal__submit-text,
.skld-dl-modal__submit-loading {
	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);
}
.skld-dl-modal__submit:hover .skld-dl-modal__submit-text,
.skld-dl-modal__submit:focus-visible .skld-dl-modal__submit-text {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}
.skld-dl-modal__submit:disabled { opacity: 0.55; cursor: default; }
.skld-dl-modal__submit:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.skld-dl-modal__backdrop,
	.skld-dl-modal__panel {
		animation-name: skld-dl-modal-fade;
		animation-duration: var(--motion-fast);
	}
	.skld-dl-modal__submit-text,
	.skld-dl-modal__submit-loading { transition: none; }
}

/* ── Notice "sesión activa" + "cambiar datos" (solo cuando reabres el modal manualmente) */
.skld-dl-modal__session-notice {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--negrotitulares-background) 12%, transparent);
	font-size: var(--font-body-14);
	line-height: var(--lh-body-14);
	letter-spacing: var(--ls-body-14);
	color: rgba(29, 29, 27, 0.7);
}
.skld-dl-modal__session-notice[hidden] { display: none; }
.skld-dl-modal__session-change {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--negrotitulares-background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.skld-dl-modal__session-change:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TOAST (rama B: feedback de descarga sin modal).
 * Reutiliza tokens del modal. Top-right desktop, top full-width mobile.
 * Respeta safe-area; aria-live=polite gestionado en JS.
 * ═══════════════════════════════════════════════════════════════════════════ */
.skld-dl-toast {
	position: fixed;
	z-index: 2001;                          /* sobre el modal (2000) por si coinciden */
	top: calc(env(safe-area-inset-top, 0px) + 1rem);
	right: calc(env(safe-area-inset-right, 0px) + 1rem);
	max-width: 22rem;
	padding: 0.875rem 1.125rem;
	background: var(--negrotitulares-background);
	color: var(--blanco-background);
	font-family: 'Inter', sans-serif;
	font-size: var(--font-body-14);
	line-height: var(--lh-body-14);
	letter-spacing: var(--ls-body-14);
	text-transform: lowercase;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition: opacity var(--motion-default) var(--ease-out),
	            transform var(--motion-default) var(--ease-out),
	            visibility 0s linear var(--motion-default);
	pointer-events: none;                    /* no bloquea clicks debajo */
}
.skld-dl-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--motion-default) var(--ease-out),
	            transform var(--motion-default) var(--ease-out),
	            visibility 0s linear 0s;
}
.skld-dl-toast--error { background: #9b2c2c; }

@media (max-width: 47.9375em) {
	.skld-dl-toast {
		top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
		left: calc(env(safe-area-inset-left, 0px) + 1rem);
		right: calc(env(safe-area-inset-right, 0px) + 1rem);
		max-width: none;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skld-dl-toast { transition: opacity var(--motion-fast) linear; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FORMULARIO DE RESPALDO SIN-JS (páginas del mu-plugin: v2 13 campos y v1
 * legacy comparten clases). Reutiliza el lenguaje del modal de descargas:
 * labels lowercase, inputs underline, checkbox accent y CTA con subrayado
 * animado. El main hereda #primary.recursos + .recursos__title.
 * ═══════════════════════════════════════════════════════════════════════════ */

#primary.recursos--form {
	padding-bottom: clamp(3rem, 4rem + 2vw, 6rem);
}

/* Nombre del recurso solicitado, bajo el título global */
.recursos__form-resource {
	margin: 1rem 0 0;
	padding-inline: 1.5rem;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	color: rgba(29, 29, 27, 0.7);
	text-transform: lowercase;
}

.recursos__fallback-form {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 30rem;                       /* 480px — mismo ancho que el panel del modal */
	margin-block: 2.5rem 0;
	margin-inline: 1.5rem;
}

.recursos__fallback-field { display: flex; flex-direction: column; }

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

/* Inputs y selects = estilo underline del modal (no caja) */
.recursos__fallback-field input[type="text"],
.recursos__fallback-field input[type="email"],
.recursos__fallback-field input[type="tel"],
.recursos__fallback-field select {
	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);
	color: var(--negrotitulares-background);
}
.recursos__fallback-field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-inline-end: 1.5rem;
	background-image: var(--recurso-select-caret);
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	background-size: 0.7rem;
}
.recursos__fallback-field input:focus-visible,
.recursos__fallback-field select:focus-visible {
	outline: none;
	border-bottom-color: var(--negrotexto-background);
}

/* Consentimientos (privacidad obligatoria + marketing opcional) */
.recursos__fallback-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.625rem;
}
.recursos__fallback-field--checkbox input {
	margin: 0.2rem 0 0;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	accent-color: var(--negrotitulares-background);
}
.recursos__fallback-field--checkbox label {
	margin: 0;
	font-size: var(--font-body-14);
	line-height: 1.5;                       /* frase legal multi-línea — respiración */
	letter-spacing: var(--ls-body-14);
	color: var(--negrotitulares-background);
	text-transform: none;
}
.recursos__fallback-field--checkbox a {
	color: var(--negrotitulares-background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Submit = patrón CTA del sitio; el subrayado vive en el propio botón
 * (aquí no hay spans internos como en el modal) */
.recursos__fallback-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	border: none;
	padding: 0.625rem 0 0.18em;
	font-family: inherit;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	font-weight: 600;
	text-transform: lowercase;
	color: var(--negrotitulares-background);
	cursor: pointer;
	--ul-h: max(1px, 0.07em);
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
	background-size: 100% var(--ul-h);
	transition: background-size var(--motion-default) var(--ease-default);
}
.recursos__fallback-submit:hover,
.recursos__fallback-submit:focus-visible {
	background-position: right bottom;
	background-size: 0% var(--ul-h);
}
.recursos__fallback-submit:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 4px;
}

@media (max-width: 47.99em) {
	.recursos__form-resource { padding-inline: 1rem; }
	.recursos__fallback-form { margin-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.recursos__fallback-submit { transition: none; }
}

/* =============================================================================
   404 — página de error (sin buscador, composición del sistema)
   ========================================================================== */
.page-404__section {
	background-color: var(--piedra-background);
	padding: clamp(4rem, 10vw, 8rem) var(--space-page);
	min-height: clamp(26rem, 46vh, 40rem);
	display: flex;
	align-items: center;
}

.page-404__inner {
	max-width: 46rem;
	margin: 0 auto;
	width: 100%;
}

.page-404__label {
	font-size: var(--font-body-14);
	line-height: var(--lh-body-14);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--negrotexto-background);
	opacity: 0.6;
	margin: 0 0 0.75rem;
}

.page-404__title {
	font-size: clamp(2rem, 4.4vw, var(--font-heading-48));
	line-height: 1.05;
	letter-spacing: var(--ls-heading-48);
	font-weight: 600;
	color: var(--negrotitulares-background);
	margin: 0;
}

.page-404__body {
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	letter-spacing: var(--ls-body-18);
	color: var(--negrotexto-background);
	margin: 1.5rem 0 0;
	max-width: 46ch;
}

.page-404__cta {
	margin: 2.5rem 0 0;
}

.page-404__cta-link {
	display: inline-block;
	font-size: var(--font-body-18);
	line-height: var(--lh-body-18);
	font-weight: 500;
	color: var(--negrotitulares-background);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15rem;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.page-404__cta-link:hover,
.page-404__cta-link:focus-visible {
	opacity: 0.6;
}

.page-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(1, 1, 2, 0.12);
}

.page-404__link {
	font-size: var(--font-body-16);
	line-height: var(--lh-body-16);
	color: var(--negrotexto-background);
	text-decoration: none;
	transition: opacity var(--motion-fast) var(--ease-default);
}

.page-404__link:hover,
.page-404__link:focus-visible {
	opacity: 0.6;
}

.page-404__cta-link:focus-visible,
.page-404__link:focus-visible {
	outline: 2px solid var(--negrotitulares-background);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.page-404__section {
		padding-inline: var(--space-header);
	}
}

/* Approved footer: VOOLCAN | другие бренды + Skyline Design */
.site-footer__brand { flex-wrap: wrap; gap: 1rem; }
.site-footer__brand-owner { display: flex; align-items: center; gap: .5rem; }
.site-footer__other-brands { display: flex; align-items: center; gap: .75rem; }
.site-footer__skyline { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.site-footer__skyline:hover { opacity: .7; }
.site-footer__skyline-crop { position: relative; display: block; width: clamp(104px, 26vw, 162px); aspect-ratio: 1292 / 319; overflow: hidden; }
.site-footer__skyline-crop img { position: absolute; display: block; width: 131.65635%; max-width: none; height: auto; left: -15.78947%; top: -104.07524%; mix-blend-mode: multiply; }
@media (max-width: 420px) { .site-footer__brand { gap: .625rem; } }

/* Resource requests are sent to Mailchimp; files are supplied manually. */
.skld-resource-request .contacto__section { padding-top: 4rem; }
.skld-resource-request .skld-request-context { margin: 1.5rem 0 .5rem; font-weight: 500; }
.skld-request-form { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 32px; margin-top: 32px; }
.skld-request-form .contacto__field { display: flex; flex-direction: column; min-width: 0; }
.skld-request-form label { margin-bottom: 8px; font-size: 16px; line-height: 1.5; }
.skld-request-form input:not([type="hidden"]), .skld-request-form select, .skld-request-form textarea { box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.skld-request-form textarea { resize: vertical; }
.skld-request-form :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skld-request-full { grid-column: 1 / -1; }
.skld-request-small { margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
.skld-request-submit { justify-self: start; min-height: 44px; padding: 10px 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 600; }
.skld-request-submit:disabled { opacity: .5; cursor: wait; }
.skld-request-trap { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 580px) { .skld-request-form { grid-template-columns: 1fr; gap: 24px; } }

/* Resource navigation and protected prices section. */
.recursos-v2__card--categoria-catalogos .recursos-v2__card-generic-title { text-transform: none; }
.skld-prices-access { max-width: 580px; padding: 2rem 0 4rem; }
.skld-prices-access h2 { font-size: clamp(24px,3vw,36px); line-height: 1.15; margin: 0 0 24px; }
.skld-prices-access p { margin: 0 0 24px; }
.skld-prices-access label { display: block; }
.skld-prices-access input[type=password] { display: block; width: 100%; max-width: 360px; margin: 12px 0 20px; padding: 12px; border: 1px solid #999; background: transparent; }
.skld-prices-access input[type=submit] { padding: 12px 24px; border: 1px solid #1d1d1b; background: #1d1d1b; color: white; cursor: pointer; }

/* Prices and stock now live in the professional area. */
.area-b2b--prices { height: auto; min-height: 52.5rem; scroll-margin-top: 90px; }
.area-b2b--prices .area-b2b__content { min-width: 0; justify-content: flex-start; gap: 2rem; }
.area-b2b--prices .area-b2b__links { margin-top: auto; }
.area-b2b--prices .skld-prices-access { padding: 0; width: 100%; }
.area-b2b--prices .skld-prices-access [role=status] { margin: 16px 0 0; }
.area-b2b--prices .recursos-v2__grid--cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.area-b2b--prices .recursos-v2__card-media { aspect-ratio: 4 / 5; }
.area-b2b--prices .recursos-v2__card-generic-title { text-transform: none; }
@media(max-width: 47.99em) { .area-b2b--prices { min-height: 0; } .area-b2b--prices .area-b2b__content { gap: 2rem; } }

/* Shared site links directly below the professional password field. */
.area-b2b__copy { display: grid; gap: 1rem; }
.skld-prices-actions { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 32px; }
.skld-prices-actions button.area-b2b__link { border: 0; border-radius: 0; padding: 0 0 0.18em; font-family: inherit; cursor: pointer; }
.skld-prices-actions button.area-b2b__link:disabled { opacity: 0.5; cursor: wait; }

/* Product links back to their owning collection. */
.single-prod__intro { grid-column: 1; min-width: 0; position: relative; z-index: 1; }
.single-prod__intro .single-prod__collection-return { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; }
@media (max-width: 63.99em) { .single-prod__intro .single-prod__collection-return { margin-bottom: 12px; } }

/* A second collection link at the end of product details. */
.single-prod__collection-footer { width: 100%; align-self: stretch; }
.single-prod__collection-footer .single-prod__collection-return { display: inline-flex; align-items: center; min-height: 44px; }