:root {
	--une-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--une-font-body: "Manrope", "Segoe UI", Arial, sans-serif;
	--une-font-ui: var(--une-font-body);
	--une-text-base-size: 1rem;
	--une-text-base-line-height: 1.68;
	--une-heading-weight: 500;
	--une-heading-line-height: 1.04;
	--une-display-title-size: clamp(3rem, 6vw, 5.2rem);
	--une-section-title-size: clamp(2rem, 4vw, 3.05rem);
	--une-card-title-size: clamp(1.08rem, 1.2vw, 1.24rem);
	--une-ui-letter-spacing: 0.08em;
	--une-bg-900: #f4f0f5;
	--une-bg-850: #e7dfe8;
	--une-bg-800: #e7dfe8;
	--une-home-narrow-max: 1280px;
	--une-surface: #ffffff;
	--une-surface-strong: #e7dfe8;
	--une-text: #2f2031;
	--une-text-soft: #79657b;
	--une-muted: #79657b;
	--une-champagne: #644b68;
	--une-champagne-soft: #79657b;
	--une-border: #d3c8d5;
	--une-shadow: 0 24px 60px rgba(47, 30, 51, 0.08);
	--une-radius-xl: 30px;
	--une-radius-lg: 22px;
	--une-radius-md: 16px;
}

body.home.une-theme-dark {
	--une-bg-900: #1f1424;
	--une-bg-850: #2f2031;
	--une-bg-800: #3a2440;
	--une-surface: #3a2440;
	--une-surface-strong: #2f2031;
	--une-text: #f2edf4;
	--une-text-soft: #c9c1cf;
	--une-muted: #79657b;
	--une-champagne: #644b68;
	--une-champagne-soft: #644b68;
	--une-border: #4d4852;
	--une-shadow: 0 24px 60px rgba(10, 6, 12, 0.38);
}

html {
	scroll-behavior: smooth;
}

html,
body {
	margin: 0;
	padding: 0;
}

body.home {
	font-family: var(--une-font-body);
	background:
		radial-gradient(circle at 10% 6%, rgba(139, 127, 147, 0.16), transparent 34%),
		radial-gradient(circle at 86% 78%, rgba(204, 208, 203, 0.2), transparent 44%),
		linear-gradient(145deg, var(--une-bg-900) 0%, var(--une-bg-850) 56%, var(--une-bg-800) 100%);
	color: var(--une-text);
}

.une-home,
.une-home p,
.une-home a,
.une-home button,
.une-home input,
.une-home textarea,
.une-home select {
	font-family: var(--une-font-body);
}

.une-home-page {
	min-height: 100%;
}

.une-home {
	position: relative;
	overflow: clip;
}

.une-home-container {
	width: min(var(--une-home-wide-max), calc(100vw - (var(--une-home-edge-space) * 2)));
	margin: 0 auto;
}

.une-home-container--bleed {
	width: min(var(--une-home-shell-max), calc(100vw - (var(--une-home-edge-space) * 2)));
}

.une-home-container--wide {
	width: min(var(--une-home-wide-max), calc(100vw - (var(--une-home-edge-space) * 2)));
}

.une-home-container--narrow {
	width: min(var(--une-home-narrow-max), calc(100vw - (var(--une-home-edge-space) * 2)));
}

.une-home-main {
	padding: 0 0 86px;
}

.une-home-section {
	padding: 42px 0;
	position: relative;
}

.une-home-anchor-target {
	scroll-margin-top: var(--une-home-header-offset);
}

.une-home-section__head {
	margin-bottom: 20px;
}

.une-home-section__head p,
.une-home-story p,
.une-home-final-cta p,
.une-home-campaign p {
	color: var(--une-text-soft);
	line-height: 1.75;
}

.une-home-hero__layout {
	display: block;
}

.une-home-hero {
	position: relative;
	overflow: hidden;

	/*
	 * Degradado y no color plano: una superficie lisa del tamano de un hero se
	 * lee vacia. La luz cae desde arriba a la derecha, que es de donde viene en
	 * la vitrina 3D, y muere en un ciruela apenas mas cargado abajo a la
	 * izquierda. Es sutil a proposito - se tiene que notar como profundidad, no
	 * como degradado.
	 */
	background:
		radial-gradient(90% 70% at 76% 4%,
			rgba(255, 255, 255, 0.98) 0%,
			rgba(255, 255, 255, 0) 62%),
		linear-gradient(158deg,
			#fbf9fb 0%,
			#eee7f0 38%,
			#ddd2e0 78%,
			#cec0d2 100%);

	--une-hero-overlay: 0.36;
	--une-hero-bg-position: center center;
	--une-hero-bg-desktop: none;
	--une-hero-bg-mobile: var(--une-hero-bg-desktop);
}

.une-home-hero::before,
.une-home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.une-home-hero::before {
	background-image: var(--une-hero-bg-desktop);
	background-position: var(--une-hero-bg-position);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.46;
	filter: saturate(0.94) contrast(1.05);
}

/* Solo cuando hay foto detras: su unico trabajo es hacer legible el texto
   sobre la imagen. Sin foto lo unico que consigue es aplanar el degradado. */
.une-home-hero:not(.une-home-hero--photo)::after { background: none; }

.une-home-hero::after {
	background: linear-gradient(90deg, rgba(244, 240, 245, calc(var(--une-hero-overlay) + 0.18)) 0%, rgba(244, 240, 245, calc(var(--une-hero-overlay) + 0.04)) 46%, rgba(244, 240, 245, 0.08) 100%);
}

.une-home-hero__content {
	position: relative;
	z-index: 1;
	min-height: min(52vh, 520px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(84px, 14vh, 148px) 0 clamp(72px, 12vh, 122px);
	max-width: 920px;
}

.une-home-title,
.une-home-section-title,
.une-home-category-card h3,
.une-home-value-card h3,
.une-home-product-card h3,
.une-home-arrival-card h3 {
	margin: 0;
	font-family: var(--une-font-display);
	font-weight: var(--une-heading-weight);
	line-height: var(--une-heading-line-height);
	letter-spacing: -0.018em;
	color: var(--une-text);
}

.une-home-title {
	font-size: var(--une-display-title-size);
	max-width: 760px;
	line-height: 0.96;
	letter-spacing: -0.02em;
}

.une-home-lead {
	margin: 16px 0 0;
	max-width: 620px;
	font-size: clamp(1rem, 1.22vw, 1.08rem);
	font-weight: 400;
	line-height: 1.78;
	letter-spacing: -0.01em;
	color: var(--une-text-soft);
}

.une-home-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.une-home-actions--center {
	justify-content: center;
}

.une-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 196px;
	padding: 13px 24px;
	border-radius: var(--une-radius-btn, 10px);
	font-family: var(--une-font-ui);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/*
 * El boton habla el mismo idioma material que la cabecera, pero mas fuerte.
 *
 * Tenia `linear-gradient(135deg, #644b68, #644b68)`: las dos paradas del mismo
 * color, o sea un plano disfrazado de degradado — resto de alguna iteracion
 * anterior. La cabecera usa tres recursos (degradado vertical, filo claro
 * arriba, canto oscuro abajo) y el boton usaba uno solo, la sombra proyectada.
 * No se leian como dos cosas distintas a proposito; se leia como que a una le
 * faltaba terminar.
 *
 * Mismo idioma, no mismo volumen: la cabecera es mobiliario y este boton es la
 * accion principal de la pagina, asi que el filo va en 0.16 contra el 0.11 de
 * la cabecera. Y queda mas claro que ella a proposito — esos grados de
 * luminosidad son parte de por que salta sobre la foto.
 *
 * EL COLOR, medido en pixeles sobre la pagina y no elegido a ojo. Los dos
 * comparten tono exacto (292°), asi que nunca fueron colores distintos; lo que
 * los separaba era otra cosa:
 *
 *   cabecera   292° / 24% / 26%
 *   boton antes 292° / 16% / 35%   <- 8 puntos menos saturado y 9 mas claro
 *   boton hoy   292° / 25% / 30%
 *
 * Los 8 puntos de saturacion de menos eran el problema real. Al aclarar un
 * color hay que SUBIRLE la saturacion para que se siga leyendo como el mismo;
 * mas claro y mas apagado a la vez no se lee como «el mismo ciruela iluminado»
 * sino como ciruela desteñido, y por eso parecia otro color teniendo el mismo
 * tono.
 *
 * La luminosidad baja de 35 a 30 y no se queda en 35: con la saturacion
 * corregida y esa claridad, el boton pasaba a ser lo mas vivo de la pantalla y
 * competia con la foto en vez de anclarla — se perdia el registro oscuro de la
 * marca. A 30 sigue estando 4 puntos por sobre la cabecera, que basta para que
 * se despegue sin gritar.
 *
 * Nota de sistema: este ciruela ya NO es el token --une-color-brand (#644b68,
 * 16% de saturacion). Es una excepcion consciente. Lo correcto a la larga seria
 * subir el token y alinear todo, pero eso toca textos y bordes de todo el sitio
 * y hay que revisar contraste de lectura antes: es una revision aparte.
 */
.une-home-btn--primary {
	background: linear-gradient(180deg, #6a4370 0%, #5b3960 55%, #4b3050 100%);
	color: #f4f0f5;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 -1px 0 rgba(0, 0, 0, 0.24),
		0 12px 26px rgba(100, 75, 104, 0.22);
}

.une-home-btn--secondary {
	background: #ffffff;
	color: #644b68;
	border: 1px solid var(--une-border);
}

.une-home-btn:hover,
.une-home-btn:focus-visible,
.une-home-category-card:hover,
.une-home-value-card:hover,
.une-home-arrival-card:hover,
.une-home-product-card:hover {
	transform: translateY(-2px);
}

.une-home-section-title {
	font-size: var(--une-section-title-size);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.015em;
	margin-bottom: 6px;
}

#colecciones .une-home-section__head {
	margin-bottom: 26px;
}

#colecciones .une-home-section-title {
	font-size: clamp(1.95rem, 3vw, 2.7rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--une-text);
}

.une-home-categories-grid,
.une-home-value-grid,
.une-home-arrivals-grid {
	display: grid;
	gap: 16px;
}

.une-home-categories-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(18px, 1.55vw, 28px);
}

.une-home-collection-slider {
	position: relative;
	overflow: visible;
}

.une-home-collection-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 18.5%);
	gap: clamp(18px, 1.55vw, 28px);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding-top: 8px;
	padding-bottom: 12px;
	scroll-snap-type: x proximity;
}

.une-home-collection-track::-webkit-scrollbar {
	display: none;
}

.une-home-category-card,
.une-home-value-card,
.une-home-arrival-card,
.une-home-product-card,
.une-home-campaign,
.une-home-story,
.une-home-final-cta {
	border: 1px solid var(--une-border);
	border-radius: var(--une-radius-lg);
	background: var(--une-surface);
	box-shadow: var(--une-shadow);
	backdrop-filter: blur(5px);
	transition: transform 0.22s ease;
}

.une-home-category-card {
	position: relative;
	text-decoration: none;
	padding: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
	scroll-snap-align: start;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	gap: 12px;
}

.une-home-category-card__image-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 0.88 / 1.12;
	border-radius: 20px;
	border: 1px solid var(--une-border);
	background: linear-gradient(160deg, #ffffff, #e7dfe8);
	box-shadow: 0 18px 42px rgba(47, 30, 51, 0.08);
	transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.une-home-category-card__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.55s ease;
}

.une-home-category-card__title {
	margin: 0;
	padding: 0 4px;
	font-family: var(--une-font-ui);
	font-size: var(--une-card-title-size);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--une-text);
}

.une-home-category-card:hover,
.une-home-category-card:focus-visible {
	transform: none;
}

.une-home-category-card:hover .une-home-category-card__image-wrap,
.une-home-category-card:focus-visible .une-home-category-card__image-wrap {
	transform: translateY(-2px);
	border-color: #644b68;
	box-shadow: 0 24px 50px rgba(47, 30, 51, 0.12);
}

.une-home-category-card:hover .une-home-category-card__image,
.une-home-category-card:focus-visible .une-home-category-card__image {
	transform: scale(1.04);
}

.une-home-value-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.une-home-value-card {
	padding: 24px;
}

.une-home-value-card h3 {
	font-size: 2rem;
}

.une-home-value-card p {
	margin: 10px 0 0;
	line-height: 1.7;
	color: var(--une-text-soft);
}

.une-home-section__head--split {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
}

.une-home-slider-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.une-home-slider-arrow {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid var(--une-border);
	background: #ffffff;
	color: #644b68;
	font-family: var(--une-font-ui);
	font-size: 1rem;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.une-home-slider-arrow:hover,
.une-home-slider-arrow:focus-visible {
	transform: translateY(-1px);
	border-color: #644b68;
	background: #e7dfe8;
}

.une-home-slider-arrow:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.une-home-best-sellers-slider {
	position: relative;
	overflow: visible;
}

.une-home-best-sellers-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 22.5%);
	gap: clamp(16px, 1.25vw, 24px);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding-top: 8px;
	padding-bottom: 12px;
	scroll-snap-type: x proximity;
}

.une-home-best-sellers-track::-webkit-scrollbar {
	display: none;
}

.une-best-seller-card {
	min-width: 0;
	scroll-snap-align: start;
}

.une-best-seller-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 24px;
	border: 2px solid transparent;
	background: linear-gradient(160deg, #ffffff, #e7dfe8);
	box-shadow: 0 20px 46px rgba(47, 30, 51, 0.08);
	aspect-ratio: 1 / 1;
	text-decoration: none;
	transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease, outline-color 0.26s ease, outline-width 0.26s ease;
	outline: 0 solid transparent;
	outline-offset: 0;
}

.une-best-seller-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(100, 75, 104, 0.12);
	background: rgba(255, 255, 255, 0.92);
	font-family: var(--une-font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #644b68;
}

.une-best-seller-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.42s ease, transform 0.55s ease;
}

.une-best-seller-card__image--primary {
	opacity: 1;
	z-index: 1;
}

.une-best-seller-card__image--hover {
	opacity: 0;
	z-index: 2;
}

.une-best-seller-card:hover .une-best-seller-card__media,
.une-best-seller-card:focus-within .une-best-seller-card__media {
	transform: translateY(-1px);
	border-color: rgba(100, 75, 104, 0.72);
	outline: 3px solid rgba(100, 75, 104, 0.72);
	box-shadow:
		0 0 0 1px rgba(100, 75, 104, 0.28),
		0 0 0 6px rgba(100, 75, 104, 0.14),
		0 24px 54px rgba(47, 30, 51, 0.14);
}

.une-best-seller-card:hover .une-best-seller-card__image--primary,
.une-best-seller-card:focus-within .une-best-seller-card__image--primary {
	opacity: 0;
	transform: scale(1.03);
}

.une-best-seller-card:hover .une-best-seller-card__image--hover,
.une-best-seller-card:focus-within .une-best-seller-card__image--hover {
	opacity: 1;
	transform: scale(1.03);
}

.une-best-seller-card__body {
	padding: 14px 4px 0;
}

.une-best-seller-card__title {
	margin: 0;
	font-family: var(--une-font-ui);
	font-size: clamp(1rem, 1.08vw, 1.1rem);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--une-text);
}

.une-best-seller-card__title a {
	color: inherit;
	text-decoration: none;
}

.une-best-seller-card__price {
	margin: 8px 0 0;
	font-family: var(--une-font-ui);
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #644b68;
}

.une-best-seller-card__price del {
	margin-right: 8px;
	color: var(--une-text-soft);
	text-decoration-thickness: 1px;
	opacity: 0.9;
}

.une-best-seller-card__price ins {
	color: #644b68;
	font-weight: 700;
	text-decoration: none;
}

.une-best-seller-card__swatches {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.une-best-seller-card__swatch {
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(100, 75, 104, 0.18);
	background: var(--swatch-color, #dcc08f);
	box-shadow: inset 0 0 0 1px rgba(47, 30, 51, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.une-best-seller-card__swatch:hover,
.une-best-seller-card__swatch:focus-visible,
.une-best-seller-card__swatch.is-active {
	transform: scale(1.08);
	border-color: #644b68;
	box-shadow: 0 0 0 4px rgba(107, 61, 107, 0.12);
}

.une-home-product-rail {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 24px);
}

.une-home-product-card {
	overflow: hidden;
}

.une-home-product-card__image {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 20%, rgba(223, 197, 152, 0.18), transparent 48%),
		linear-gradient(160deg, #241739, #170e28);
	color: #d9c7e9;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.une-home-product-card__body {
	padding: 16px;
}

.une-home-product-card__tag {
	display: inline-block;
	font-size: 0.69rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--une-champagne-soft);
	margin-bottom: 8px;
}

.une-home-product-card h3 {
	font-size: 1.58rem;
}

.une-home-product-card p {
	margin: 8px 0 0;
	color: #f2e5ca;
	font-weight: 600;
}

.une-home-product-card a,
.une-home-arrival-card a {
	display: inline-flex;
	margin-top: 12px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: #dfcff2;
}

.une-home-story {
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr 0.82fr;
	gap: 20px;
	align-items: center;
}

.une-home-story__media {
	min-height: 280px;
	border-radius: 16px;
	border: 1px solid rgba(235, 215, 184, 0.2);
	background:
		radial-gradient(circle at 22% 14%, rgba(228, 198, 150, 0.26), transparent 44%),
		linear-gradient(150deg, #2d1d45, #180f29);
	display: grid;
	place-items: center;
	color: #e7d7f5;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.une-home-campaign {
	padding: 38px;
	background:
		radial-gradient(circle at 15% 20%, rgba(223, 194, 148, 0.28), transparent 35%),
		linear-gradient(140deg, rgba(47, 31, 71, 0.92), rgba(24, 15, 37, 0.92));
}

.une-home-campaign .une-home-btn {
	margin-top: 18px;
}

.une-home-arrivals-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.une-home-arrival-card {
	padding: 24px;
}

.une-home-arrival-card h3 {
	font-size: 1.82rem;
}

.une-home-arrival-card p {
	margin: 9px 0 0;
	color: var(--une-text-soft);
	line-height: 1.72;
}

.une-home-section--final-cta {
	padding-bottom: 24px;
}

.une-home-final-cta {
	text-align: center;
	padding: 38px 24px;
	background: linear-gradient(145deg, rgba(34, 22, 52, 0.8), rgba(20, 12, 31, 0.88));
}

.une-fade-in {
	opacity: 0;
	transform: translateY(14px);
	animation: uneFadeUp 0.7s ease forwards;
}

@keyframes uneFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1100px) {
.une-home-best-sellers-track {
		grid-auto-columns: minmax(260px, 31%);
	}

.une-home-collection-track {
		grid-auto-columns: minmax(190px, 24%);
	}

.une-home-categories-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

.une-home-product-rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.une-home-arrivals-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.une-home-story {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 860px) {
.une-home-section__head--split {
		align-items: start;
		flex-direction: column;
	}

.une-home-best-sellers-track {
		grid-auto-columns: minmax(240px, 42%);
	}

.une-home-collection-track {
		grid-auto-columns: minmax(190px, 31%);
	}

.une-home-hero__layout {
		display: block;
	}

.une-home-title {
		max-width: 560px;
	}

}

@media (max-width: 640px) {
.une-home-slider-controls {
		gap: 8px;
	}

.une-home-slider-arrow {
		width: 42px;
		height: 34px;
	}

.une-home-best-sellers-track {
		grid-auto-columns: 78%;
	}

.une-home-collection-track {
		grid-auto-columns: 62%;
	}

.une-home-container,
.une-home-container--bleed,
.une-home-container--wide,
.une-home-container--narrow {
		width: min(var(--une-home-shell-max), calc(100vw - 28px));
	}

.une-home-hero__content {
		min-height: 66vh;
		padding: 64px 0 54px;
	}

.une-home-title {
		font-size: clamp(2.1rem, 9vw, 3.1rem);
	}

.une-home-hero::before {
		background-image: var(--une-hero-bg-mobile, var(--une-hero-bg-desktop));
	}

.une-home-section {
		padding: 32px 0;
	}

.une-home-hero__content,
.une-home-campaign,
.une-home-story,
.une-home-final-cta {
		padding: 24px 18px;
	}

.une-home-categories-grid,
.une-home-value-grid,
.une-home-arrivals-grid,
.une-home-product-rail {
		grid-template-columns: 1fr;
	}

.une-home-categories-grid {
		gap: 16px;
	}

.une-home-category-card__image-wrap {
		aspect-ratio: 0.92 / 1.05;
	}

.une-home-product-rail {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

.une-home-product-card {
		scroll-snap-align: start;
	}

.une-home-btn {
		width: 100%;
		min-width: 0;
	}

}

/* ------------------------------------------------------------------
   Hero partido: texto a un lado, foto al otro.

   Reemplaza al hero de una sola columna con foto de fondo, por dos
   razones. La foto de fondo obliga a un velo oscuro para que el titular
   se lea, y ese velo termina tapando la joya, que era lo único que la
   foto tenía que mostrar. Y el hero suelto medía 76vh casi vacíos, que
   empujaban fuera de pantalla todo lo que venía después: nadie llegaba
   a ver las tres tarjetas.

   Va al final del archivo a propósito. Así estas reglas ganan los
   empates de especificidad contra las de arriba sin tener que inflar
   los selectores.
   ------------------------------------------------------------------ */
.une-home-hero__layout--split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.une-home-hero__layout--split .une-home-hero__content {
	min-height: 0;
	padding: clamp(44px, 6vh, 72px) 0;
	/* Sin tope en "ch": ese cap media unos 370px y era la causa real de que
	   el titular se viera apretado y partido en tres. El ancho lo define la
	   columna de la grilla. */
	max-width: none;
}

/* El titular a pantalla completa escalaba con 6vw, que en media columna
   son unos 86px. Acá manda el ancho de la columna, no el de la ventana. */
.une-home-hero__layout--split .une-home-title {
	font-size: clamp(2.4rem, 3.6vw, 3.7rem);
	line-height: 1.08;
}

.une-home-hero__layout--split .une-home-lead {
	font-size: clamp(1.02rem, 1.15vw, 1.15rem);
	line-height: 1.6;
	max-width: 44ch;
	margin-top: 18px;
}

.une-home-hero__layout--split .une-home-actions {
	margin-top: 30px;
}

.une-home-hero__media {
	position: relative;
	/* Sube por encima de .une-home-hero::after, que tiende un velo lavanda
	   sobre todo el hero. Ese velo existe para que el titular se lea sobre
	   una foto a sangre completa; con el layout partido no hay tal foto, y
	   lo único que consigue es lavar la imagen o dejar la vitrina gris. */
	z-index: 1;
	aspect-ratio: 1 / 1;
	max-height: 520px;
	max-height: min(74vh, 720px);
	overflow: hidden;
	border-radius: var(--une-radius-lg);
	background: var(--une-surface-alt, #e7dfe8);
	/* Sin esto la imagen se estira a lo ancho de su columna y el tope de
	   altura no sirve de nada. */
	margin-inline: auto;
	width: 100%;
}

/* La vitrina 3D. Fondo oscuro deliberado: la plata sobre fondo claro se
   renderiza como plástico gris, porque no tiene color propio y es
   enteramente lo que refleja. Sobre la portada clara se lee como una
   vitrina iluminada, que es exactamente lo que es. */
/* El ciruela oscuro es el mismo que Spinshop ya definió como escenario de
   UNE en assets/themes/une.css: --sc-stage / --sc-stage-edge. Se toma por
   token con el valor como respaldo, para que el día que ese archivo cambie
   de tinte la portada lo siga sola en vez de quedar desincronizada. */
.une-home-hero__media--showcase {
	background: radial-gradient(
		120% 90% at 50% 38%,
		var(--sc-stage-core, #422b46) 0%,
		var(--sc-stage, #332135) 46%,
		var(--sc-stage-edge, #241726) 100%
	);
	aspect-ratio: 1 / 1;
	max-height: min(74vh, 720px);
}

/* Póster: un render fijo de la primera argolla, debajo del canvas.
   Mientras baja el bundle de 207 KB la caja estaría vacía, y como la
   vitrina es el elemento más grande del hero, es probable que sea la que
   Google mide como LCP. Con el póster hay algo pintado en el primer
   cuadro y la espera deja de existir para el visitante.
   Se genera desde el propio visor, así que calza exacto y el cambio a 3D
   no se nota. */
.une-home-hero__media--showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/hero-argollas-poster.jpg") center / cover no-repeat;
	opacity: 1;
	transition: opacity 0.45s ease;
}

/* Se retira cuando el 3D ya está pintando; si se quedara, se vería a
   través del canvas, que es transparente, y saldrían argollas dobles. */
.une-home-hero__media--showcase.is-ready::before {
	opacity: 0;
}

.une-home-hero__media--showcase canvas {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	/* El canvas aparece cuando el modelo ya está armado. Sin esto se ve un
	   parpadeo del lienzo vacío antes del primer cuadro. */
	opacity: 0;
	transition: opacity 0.5s ease;
}

.une-home-hero__media--showcase.is-ready canvas {
	opacity: 1;
}

/* Cruce entre modelos: el canvas se apaga, se cambia la geometría y se
   vuelve a encender. */
.une-home-hero__media--showcase.is-swapping canvas {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
.une-home-hero__media--showcase canvas {
		transition: none;
	}

}

/* ---- Tarjetas bajo el hero ----------------------------------------
   El h3 venía en 2rem, tamaño de título de sección, no de tarjeta: tres
   de esos seguidos compiten con el titular del hero y hunden el resto de
   la portada. */
.une-home-value-card {
	padding: 20px 22px 22px;
	/* Ahora la tarjeta es un enlace: hereda el color en vez del azul del
	   navegador, y el subrayado se reserva para el título en hover. */
	display: block;
	color: inherit;
	text-decoration: none;
}

a.une-home-value-card:hover h3,
a.une-home-value-card:focus-visible h3 {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.une-home-value-card h3 {
	font-size: 1.2rem;
	line-height: 1.25;
}

.une-home-value-card p {
	margin-top: 8px;
	font-size: 0.94rem;
	line-height: 1.55;
}

.une-home-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La joya vive en el tercio inferior de estas fotos. Un encuadre
	   centrado deja media cara y ninguna pieza, que es exactamente el
	   problema de la portada actual. */
	object-position: 50% 78%;
}

@media (max-width: 860px) {
.une-home-hero__layout--split {
		grid-template-columns: 1fr;
		gap: 26px;
	}

.une-home-hero__layout--split .une-home-hero__content {
		max-width: none;
		padding: 36px 0 4px;
	}

/* La fotografía se achata para no comerse la pantalla entera. */
.une-home-hero__media {
		aspect-ratio: 3 / 2;
	}

/* La vitrina no: cuadrada le da a la argolla el mismo aire por los
	   cuatro lados, y en un teléfono la pieza tiene que ser lo grande de
	   la pantalla. Achatada la argolla queda chica en el medio y se pierde
	   justo lo que vale la pena mirar. */
.une-home-hero__media--showcase {
		aspect-ratio: 1 / 1;
		max-height: none;
	}

}

/* En teléfono la portada es solo la pieza y la decisión: primero las
   argollas girando, después el titular, después los dos botones. La
   vitrina va arriba porque es lo único que ninguna otra joyería tiene, y
   porque en una pantalla angosta lo que aparece primero es lo único que
   mucha gente va a ver.

   Las tres tarjetas de información salen de la portada móvil. Apiladas
   eran tres pantallazos de scroll antes de llegar al catálogo, y en riel
   horizontal quedaban estrechas y peor. Su contenido pertenece a la
   sección informativa de más abajo, no al primer golpe de vista. */
@media (max-width: 860px) {
.une-home-hero__media {
		order: -1;
	}

}

@media (max-width: 640px) {
.une-home-section--values {
		display: none;
	}

}

/* ==================================================================
   Barra de categorias, pegada al hero
   ================================================================== */

/*
 * Sube a tocar el hero y pierde su titulo. Es la segunda cosa que se ve y su
 * trabajo es contradecir de inmediato la lectura de "aca solo venden
 * argollas": con la vitrina 3D arriba, sin esto la visita necesitaba dos
 * pantallas de scroll para enterarse de que tambien hay aros, cadenas y
 * colgantes.
 *
 * Cruza de lado a lado por debajo del copy Y de la vitrina, asi que se lee
 * como el piso del hero y no como una seccion aparte.
 */
.une-home-section--collection-slider {
	padding-top: 0;
	/* Los nombres son ahora la ultima linea de la primera pantalla, asi que este
	   respiro es lo unico que los separa del canto. A 8px se leian pegados al
	   borde. Sale del hero, que cede el alto solo — antes habia que recalibrar
	   una constante para cambiar este numero. */
	padding-bottom: 16px;
}

/*
 * Sin margen: el titulo de esta seccion es solo para lectores de pantalla y las
 * flechas estan ocultas, asi que este head no pinta nada — su margen era aire
 * entre el hero y las fotos separando de algo invisible.
 *
 * CON EL ID, a proposito. Los 26px los pone `#colecciones .une-home-section__head`
 * mas arriba en esta misma hoja, y un selector con id le gana a cualquier
 * cadena de clases: dos versiones de esta regla con clases, una con tres
 * niveles, se subieron creyendo que anulaban el margen y el margen seguia ahi.
 * Medido: 34px sobre la primera foto contra 20 debajo del nombre. La leccion
 * es la de siempre en este tema — verificar lo que se ve, no la regla escrita.
 */
#colecciones .une-home-section__head {
	margin-bottom: 0;
}

/* El aire real sobre las fotos vive aca, en un solo numero, y calza con el que
   queda bajo los nombres (4 del track + 16 de la seccion). */
.une-home-portada .une-home-collection-track {
	padding-top: 16px;
}

/* ==================================================================
   Portada sobre el pliegue
   ==================================================================
   Medido en una ventana de 984px de alto: el hero ocupaba 804 y la barra de
   categorias 517, o sea 1321 para un sitio de 891 una vez descontados anuncio
   y header. Sobraban 430px y por eso la barra quedaba cortada.

   De donde salen:
     vitrina 720 -> 400   (era cuadrada al ancho de su columna, y esa columna
                           es enorme en pantallas anchas)
     copy    377 -> 300
     tarjetas 399 -> 190
   ================================================================== */

/*
 * La vitrina deja de escalar con el ancho de su columna.
 *
 * Con aspect-ratio 1/1 y ancho de columna, en una pantalla de 2000px la caja
 * salia de 720px de alto: mientras mas grande el monitor, mas se comia la
 * pantalla. Ahora manda el ALTO y el ancho lo sigue, que es lo correcto para un
 * objeto que compite por altura con todo lo demas.
 */
/*
 * Cuadrado explicito, no `width: auto`.
 *
 * Con ancho automatico la caja se encogia al tamano del canvas vacio -300px por
 * defecto del navegador- y se quedaba ahi sin importar el monitor. Dando alto y
 * ancho iguales, el tamano lo manda la ALTURA disponible, que es lo escaso.
 */
.une-home-hero__layout--split .une-home-hero__media {
	/* El ancho manda y el alto lo sigue por proporcion: asi la caja nunca deja
	   de ser cuadrada aunque la columna se estreche, que es lo que pasaba al
	   fijar los dos lados y dejar que max-width recortara solo uno. */
	width: min(54vh, 560px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	/* Al borde derecho del contenedor, no centrada: crece hacia abajo y hacia
	   la derecha, que es donde estaba el aire.
	   Con margen y no con justify-self: ese computaba 'end' y aun asi dejaba la
	   caja a mitad del sobrante. El margen automatico a la izquierda no admite
	   interpretacion. */
	justify-self: stretch;
	margin-inline: auto 0;
}

.une-home-hero__layout--split .une-home-hero__content {
	min-height: min(40vh, 390px);
}

.une-home-hero {
	padding-top: 22px;
	/* Abajo casi nada: lo que sigue es la franja de categorias, que se lee como
	   el piso del hero y no como otra seccion. El aire de aca las separaba. */
	padding-bottom: 6px;
}

/* Las tarjetas de categoria: eran casi cuadradas y de 400px de alto. La
   ilustracion se lee igual a la mitad, y aca lo escaso es el alto. */
.une-home-category-card__image-wrap {
	aspect-ratio: 4 / 3;
	max-height: 190px;
}

.une-home-category-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.une-home-collection-track {
	grid-auto-columns: minmax(150px, 15.5%);
	padding-bottom: 4px;
}

/*
 * Ventanas bajas: un portatil de 800px de alto no da para lo mismo que un
 * monitor. Se recorta donde menos duele - el aire y la ilustracion de las
 * tarjetas - antes que la joya.
 */
@media (max-height: 880px) {
.une-home-hero {
		padding-top: 6px;
		padding-bottom: 6px;
	}

.une-home-category-card__image-wrap {
		max-height: 140px;
	}

.une-home-hero__layout--split .une-home-hero__content {
		min-height: min(34vh, 330px);
	}

}

/* ==================================================================
   Portada: ancho contenido y barra que se arrastra
   ================================================================== */

/*
 * El hero usaba el contenedor mas ancho del tema, 1720px. En un monitor de
 * 2000 eso deja el copy pegado al borde izquierdo y la vitrina al derecho, con
 * medio metro de vacio en medio: se lee como dos cosas sueltas y no como una
 * composicion. Mismo ancho para la barra de categorias, para que todo caiga
 * sobre la misma linea de margen.
 */
.une-home-hero .une-home-container {
	width: min(1360px, calc(100vw - (var(--une-home-edge-space) * 2)));
}

/*
 * La barra de categorias, en cambio, va de borde a borde.
 *
 * Es lo unico de la pagina que se mueve solo, y contenida se leia como un
 * bloque que empieza y termina; a sangre se lee como algo que sigue mas alla
 * del cuadro, que es justo lo que una marquesina quiere decir. La mascara de
 * los extremos ya se encarga de que no aparezcan y desaparezcan de golpe.
 */
.une-home-section--collection-slider .une-home-container {
	width: 100%;
	max-width: none;
}

/* Sin flechas: la barra se arrastra con el dedo o con el mouse, y encima se
   mueve sola. Un control que duplica un gesto mas natural solo ocupa sitio. */
.une-home-section--collection-slider .une-home-slider-controls {
	display: none;
}

/*
 * La ventana recorta, y ademas difumina los dos bordes: sin eso las tarjetas
 * aparecen y desaparecen de golpe contra el margen y se ve como un corte, no
 * como algo que sigue mas alla.
 */
.une-home-collection-slider {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/*
 * El movimiento no es una animacion CSS: lo escribe `home.js` en el transform,
 * cuadro a cuadro, porque una animacion CSS no se puede tomar con el dedo. Por
 * eso aca NO va `animation`: una animacion activa sobre transform le gana al
 * estilo en linea, y la cinta dejaria de responder al arrastre sin avisar.
 *
 * `touch-action: pan-y` es el reparto de gestos con el navegador: el vertical
 * sigue siendo scroll de pagina, el horizontal es de la cinta. Sin esto, en el
 * celular el primer intento de arrastrar la cinta movia la pagina.
 */
.une-home-collection-track.is-marquesina {
	display: flex;
	width: max-content;
	overflow: visible;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform;
}

.une-home-collection-track.is-marquesina.is-arrastrando {
	cursor: grabbing;
}

/* Que el mouse no arranque el arrastre nativo de la foto o del enlace. */
.une-home-collection-track.is-marquesina a,
.une-home-collection-track.is-marquesina img {
	-webkit-user-drag: none;
}

.une-home-collection-track.is-marquesina > * {
	flex: 0 0 190px;
}

/*
 * Tarjetas de categoria cuadradas.
 *
 * Las fotos de categoria de WooCommerce son cuadradas, asi que un marco 4:3 les
 * recorta arriba y abajo justo donde suele estar la joya. Y una fila de
 * cuadrados se lee como coleccion; una de rectangulos anchos se lee como banner.
 *
 * De 168px a 124: el alto de esta tarjeta es lo unico que le queda por dar a la
 * foto del hero, porque el hero se lleva lo que sobra de la pantalla despues de
 * esta franja (mas abajo). A 168 la franja se leia como una segunda seccion que
 * competia con la portada; a 124 se lee como el piso del hero, que es lo que
 * tiene que ser — y la joya sigue reconociendose, que es todo lo que se le pide
 * a esta miniatura: el nombre va debajo y el detalle esta a un clic.
 */
/*
 * EL ANCHO DE LA TARJETA LO MANDA EL NOMBRE, NO LA FOTO.
 *
 * Se descubrio al achicar la foto: bajarla de 168 a 124 no encogio la franja ni
 * un pixel, la dejo IGUAL DE ALTA. Con la foto y el ancho atados, angostar la
 * foto angosta la columna del nombre, y los nombres largos se parten en dos
 * lineas — lo que se ahorraba en foto se pagaba en texto.
 *
 * Por eso el nombre baja a 0.86rem: no es un capricho de tamano, es lo que
 * decide el ancho de la columna. Medido con la tipografia real a 17.8px,
 * «Fotograbados» pedia 168px de ancho y «Encendedores» 166; a este cuerpo piden
 * unos 132, y de ahi los 138 del item — el nombre mas largo mas un respiro. Un
 * item de 172 con una foto de 124 dejaba 48px de hueco a la derecha de cada
 * foto, que es el aire que se veia entre categorias.
 *
 * Si algun dia entra una categoria de nombre mas largo, lo que se sube es ESE
 * ancho. El alto de la franja ya no lo calcula nadie: el hero cede lo que haga
 * falta (ver el bloque de la primera pantalla, mas abajo).
 *
 * La foto necesita ancho propio: sin el se estiraria a 138x124 y dejaria de ser
 * cuadrada, que es lo que hace que la fila se lea como coleccion.
 */
.une-home-collection-track .une-home-category-card__image-wrap {
	aspect-ratio: 1 / 1;
	max-height: 132px;
	width: min(100%, 132px);
	margin-inline: 0 auto;
}

.une-home-collection-track.is-marquesina > * {
	flex: 0 0 148px;
}

/*
 * La separacion entre fotos son DOS cosas sumadas, y por eso apretar una sola
 * no se notaba: el hueco que deja el item mas ancho que su foto (16px) y este
 * gap. Estaba en 28 y con el hueco daban 44px entre foto y foto.
 */
.une-home-collection-track.is-marquesina {
	gap: 12px;
}

/*
 * En el celular las fotos se veian muy separadas, y no era el gap: medido en
 * la portada real, 46px entre foto y foto contra 26 en escritorio. La regla de
 * pantallas bajas (max-height 880, y un telefono siempre lo es) achica la foto
 * a 112px, pero el item seguia en 148, y esos 36 de sobra se sumaban al gap.
 * Aca el item mide lo que la foto y la separacion queda en el gap solo: 16px,
 * un 65% menos. Los nombres caben: el mas largo, Deco-Hogar, mide 82px.
 */
@media (max-width: 640px) {
.une-home-collection-track.is-marquesina > * {
		flex-basis: 112px;
	}

.une-home-collection-track.is-marquesina {
		gap: 16px;
	}

}

.une-home-collection-track .une-home-category-card {
	/* De 12px a 6: el nombre pertenece a su foto, y a 12 flotaba entre las dos
	   filas sin decidir de cual era. */
	gap: 6px;
}

.une-home-collection-track .une-home-category-card__title {
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
}

@media (max-height: 880px) {
.une-home-collection-track .une-home-category-card__image-wrap {
		max-height: 112px;
		width: min(100%, 112px);
	}

}


/* ==================================================================
   La primera pantalla: el hero cede el alto que ocupe la franja
   ==================================================================
   La barra de categorias es lo unico que contradice de entrada la lectura de
   «aca solo venden argollas», asi que tiene que entrar entera sobre el pliegue.
   Antes no entraba: el hero se dimensionaba solo y la franja terminaba entre
   114 y 201px por debajo, cortada justo donde empiezan los nombres.

   El primer arreglo le restaba al hero una CONSTANTE con lo que yo habia medido
   que ocupaba la franja. Entraba en las cuatro resoluciones que probe... por 7px.
   Y 7px no es holgura: en el equipo de Piero la franja media un poco mas —otra
   tipografia cargada, otro redondeo— y los nombres volvieron a cortarse.

   Asi que ya no se calcula nada. El envoltorio mide una pantalla, la franja
   toma el alto que necesite y el hero se queda con el resto. Lo mide el
   navegador con la tipografia que de verdad cargo, no yo con una regla.
   ================================================================== */
@media (min-width: 861px) {
.une-home-portada {
		/* Cinta de anuncios (35) mas cabecera (58). Estos dos SI son constantes,
		   pero de alto fijo declarado en nuestro propio CSS, no medido a ojo. */
		--une-home-chrome: 93px;
		/*
		 * Y un respiro al final, que no es decoracion.
		 *
		 * Sin el, la primera pantalla cerraba en el ULTIMO PIXEL: 0px de sobra
		 * en las seis resoluciones medidas. Eso se lee como precision y es lo
		 * contrario — deja los nombres al ras del canto, y basta que la ventana
		 * mida dos pixeles menos, o que una barra del navegador ocupe algo, para
		 * que se corten. Paso: aca cerraba exacto y en la pantalla de Piero los
		 * nombres no aparecian.
		 *
		 * Con el respiro se ve ademas que la fila esta COMPLETA, que es lo que
		 * tiene que comunicar: si termina justo en el borde, parece cortada
		 * aunque no lo este.
		 */
		min-height: calc(100vh - var(--une-home-chrome) - 22px);
		display: flex;
		flex-direction: column;
	}

	/* Con la cinta de anuncios apagada sobran 35px, y son del hero. */
body:not(:has(.une-announcement)) .une-home-portada {
		--une-home-chrome: 58px;
	}

	/* Lo que sobra es del hero; la franja toma lo suyo y no cede. */
.une-home-portada > .une-home-hero {
		flex: 1 1 auto;
		min-height: 0;
		/*
		 * Y el hero reparte ese alto hacia adentro, en vez de quedarselo.
		 *
		 * Un elemento estirado NO le pasa su alto a sus hijos: el contenedor se
		 * quedaba del tamano del texto y lo dejaba pegado arriba, con el resto
		 * del hero vacio abajo. El titular centrado se veia alto, y no habia
		 * nada en el bloque del texto que lo explicara — el `justify-content:
		 * center` estaba puesto y era correcto; lo que faltaba era el alto
		 * sobre el cual centrar.
		 */
		display: flex;
		flex-direction: column;
	}

.une-home-portada > .une-home-hero > .une-home-hero__layout {
		flex: 1 1 auto;
		min-height: 0;
	}

.une-home-portada > .une-home-section--collection-slider {
		flex: 0 0 auto;
	}

	/*
	 * Y el alto del hero baja hasta su contenido, que es quien lo centra. Sin
	 * esto el hero se estira pero el texto se queda arriba: un elemento estirado
	 * no le pasa su alto al hijo salvo que se lo pida.
	 *
	 * Solo el hero sin vitrina. El de dos columnas tiene su propio alto atado a
	 * la caja de las argollas, mas arriba.
	 */
.une-home-hero__layout:not(.une-home-hero__layout--split) {
		display: flex;
		flex-direction: column;
	}

.une-home-hero__layout:not(.une-home-hero__layout--split) .une-home-hero__content {
		flex: 1 1 auto;
		min-height: 0;
		padding: clamp(28px, 5vh, 64px) 0;
	}

}

/* ==================================================================
   Portada movil con la vitrina 3D arriba (modo «imagen-argollas-movil»)
   ==================================================================
   En escritorio no cambia nada: la foto de la modelo, el texto encima, y
   este montaje con display:none — que ademas es lo que evita que Spinshop
   descargue el 3D en una pantalla que no lo muestra (monta por observer).

   En el celular la foto de la modelo quedaba reducida a un pedazo de cara
   detras del texto, y se apaga. En su lugar, primero la vitrina, despues el
   titular y los botones. El alto de la vitrina se ata a la pantalla y no al
   ancho: cuadrada al ancho completo de un telefono se comia 390px y dejaba
   el texto y la franja de categorias fuera de la primera pantalla.
   ================================================================== */
.une-home-hero__media--movil {
	display: none;
}

@media (max-width: 860px) {
.une-home-hero--argollas-movil::before,
.une-home-hero--argollas-movil::after {
		display: none;
	}

.une-home-hero--argollas-movil {
		/* El mismo aire arriba que a los lados. Medido en un telefono de 390:
		   la caja queda a 31px del borde de la pantalla (13 del contenedor mas
		   18 del texto), asi que del canto de la cabecera a la caja van 30. Con
		   8 la vitrina se leia pegada a la barra, como si se hubiera caido. */
		padding-top: 30px;
	}

.une-home-hero--argollas-movil .une-home-hero__media--movil {
		display: block;
		/*
		 * Del ancho de la columna del texto, no cuadrada y centrada: una caja
		 * mas angosta que el titular de abajo se leia como una foto pegada, no
		 * como parte de la misma composicion. Y 4:3 en vez de 1:1 a proposito:
		 * el visor encaja la argolla al lado corto, asi que la pieza se ve del
		 * mismo tamano que cuadrada y la caja mide 90px menos de alto — que es
		 * lo que deja asomar la franja de categorias en la primera pantalla.
		 */
		/* Alineada con el TEXTO, no con el contenedor. El bloque de texto lleva
		   18px de relleno lateral en telefono, asi que la caja al ancho del
		   contenedor sobresalia 18px por cada lado del titular: dos margenes
		   distintos en la misma columna, y se veia desordenado. Medido: caja
		   en 13, titulo en 31. Ahora los dos parten en 31. */
		width: auto;
		aspect-ratio: 4 / 3;
		max-height: 38vh;
		margin: 0 18px 20px;
	}

	/* El texto deja de reservar dos tercios de pantalla: la vitrina ya ocupa
	   la suya, y lo que sobra es para que la franja de categorias alcance a
	   asomarse en la primera pantalla. */
.une-home-hero--argollas-movil .une-home-hero__content {
		min-height: 0;
		padding-top: 0;
		padding-bottom: 10px;
	}

.une-home-hero--argollas-movil .une-home-title {
		font-size: clamp(1.9rem, 8vw, 2.6rem);
	}

.une-home-hero--argollas-movil .une-home-lead {
		margin-top: 12px;
		font-size: 0.98rem;
		line-height: 1.55;
	}

.une-home-hero--argollas-movil .une-home-actions {
		margin-top: 18px;
	}

}