/* ============================================================
   INICIO — REDISEÑO MODERNO MAXIMALISTA
	Estilo: maximalismo editorial — negro carbón, marfil y rosa viejo,
   tonos tierra saturados, tipografía display bold, grids
   asimétricos y mucho contraste.
   Se carga DESPUÉS de style.css vía @stack('styles').
   ============================================================ */

:root {
	--ix-fondo:        #EAE8E4;
	--ix-fondo-2:      #D8D5CE;
	--ix-crema:        #F7F6F3;
	--ix-tinta:        #232526;
	--ix-texto:        #434B4D;
	--ix-texto-soft:   #7A7F81;
	--ix-linea:        #D8D5CE;

	--ix-esmeralda:    #232526;
	--ix-esmeralda-2:  #333638;
	--ix-esmeralda-3:  #C9B88C;
	--ix-terracota:    #D6C7A1;
	--ix-terracota-2:  #C8B78F;
	--ix-ocre:         #434B4D;
	--ix-arena:        #D8D5CE;
	--ix-sombra-verde: #B8B4AA;
	--ix-blanco:       #ffffff;

	--ix-font-sans:  'Poppins', sans-serif;
	--ix-font-mono:  'Space Mono', monospace;
}

/* dark mode para el bloque de producto se mantiene coherente */
body.dark {
	--ix-fondo:        #1f2222;
	--ix-fondo-2:      #2a2d2e;
	--ix-crema:        #333638;
	--ix-tinta:        #e9e7e2;
	--ix-texto:        #d3d2cc;
	--ix-texto-soft:   #9ca1a3;
	--ix-linea:        #3c4041;
	--ix-esmeralda:    #1d2021;
	--ix-esmeralda-2:  #2a2d2e;
	--ix-esmeralda-3:  #7a6f52;
	--ix-terracota:    #CDBD97;
	--ix-terracota-2:  #D9CCAC;
	--ix-ocre:         #c9c4b8;
	--ix-arena:        #565b5c;
	--ix-sombra-verde: #6f7475;
}

body.dark .inicio-stats {
	background: #0f0d0e;
	color: #f7eeeb;
}
body.dark .inicio-stats__item span {
	color: #bda9aa;
}
body.dark .ix-featured .featured__item {
	background: var(--ix-crema);
}
body.dark .ix-featured .featured__item__text h6 {
	color: var(--ix-texto);
}

/* ============================================================
   HERO — gran bloque esmeralda con marquesina y formas orgánicas
   ============================================================ */
.inicio-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(201,130,140,0.30), transparent 70%),
		radial-gradient(900px 500px at 5% 110%, rgba(212,154,160,0.22), transparent 70%),
		radial-gradient(900px 500px at 5% 110%, rgba(201,130,140,0.24), transparent 70%),
		linear-gradient(160deg, #171214 0%, var(--ix-esmeralda) 55%, #3a252b 100%);
	color: var(--ix-blanco);
	padding: 72px 0 96px;
}

/* marquesina decorativa */
.inicio-hero__marquee {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0.5;
}
.inicio-hero__marquee span {
	position: absolute;
	font-family: var(--ix-font-mono);
	font-size: 190px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.04);
	white-space: nowrap;
	top: 34%;
	left: -10%;
	transform: rotate(-6deg);
	text-transform: uppercase;
}

.inicio-hero__blob {
	position: absolute;
	border-radius: 50%;
	background: var(--ix-terracota-2);
	width: 420px;
	height: 420px;
	top: -120px;
	right: -100px;
	opacity: 0.15;
	filter: blur(30px);
}

.inicio-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.inicio-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ix-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ix-ocre);
	margin-bottom: 22px;
}
.inicio-hero__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--ix-terracota-2);
}

.inicio-hero__title {
	font-family: var(--ix-font-sans);
	font-weight: 800;
	font-size: clamp(2.6rem, 5.6vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--ix-blanco);
	margin: 0 0 20px;
	text-transform: uppercase;
}
.inicio-hero__title em {
	font-style: normal;
	color: var(--ix-ocre);
}

.inicio-hero__desc {
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.78);
	max-width: 42ch;
	margin-bottom: 34px;
}

.inicio-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.inicio-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ix-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 30px;
	border: 1px solid transparent;
	transition: all 0.25s ease;
	border-radius: 2px;
}
.inicio-hero__btn--terracota {
	background: var(--ix-terracota);
	color: var(--ix-blanco);
	border-color: var(--ix-terracota);
}
.inicio-hero__btn--terracota:hover {
	background: var(--ix-terracota-2);
	border-color: var(--ix-terracota-2);
	color: var(--ix-blanco);
}
.inicio-hero__btn--ghost {
	background: transparent;
	color: var(--ix-blanco);
	border-color: rgba(255,255,255,0.35);
}
.inicio-hero__btn--ghost:hover {
	border-color: var(--ix-ocre);
	color: var(--ix-ocre);
}
a.inicio-hero__btn { text-decoration: none; }

.inicio-hero__visual {
	position: relative;
}
.inicio-hero__frame {
	position: relative;
	background:
		radial-gradient(80% 80% at 20% 15%, rgba(201,130,140,0.45), transparent 70%),
		radial-gradient(80% 80% at 85% 90%, rgba(212,154,160,0.35), transparent 70%),
		var(--ix-esmeralda-3);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 50%;
	aspect-ratio: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 460px;
	margin-left: auto;
	box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.inicio-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.inicio-hero__badge {
	position: absolute;
	background: var(--ix-crema);
	color: var(--ix-tinta);
	border-radius: 50%;
	width: 128px;
	height: 128px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}
.inicio-hero__badge b {
	font-family: var(--ix-font-mono);
	font-size: 20px;
	color: var(--ix-terracota);
}
.inicio-hero__badge span {
	font-family: var(--ix-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ix-texto-soft);
	margin-top: 4px;
	padding: 0 14px;
}
.inicio-hero__badge--tl { top: -10%; left: -4%; }

/* barra de stats bajo el hero */
.inicio-stats {
	background: var(--ix-tinta);
	color: var(--ix-crema);
	border-top: 1px solid rgba(255,255,255,0.08);
}
.inicio-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-left: 1px solid rgba(255,255,255,0.08);
}
.inicio-stats__item {
	padding: 26px 24px;
	border-right: 1px solid rgba(255,255,255,0.08);
}
.inicio-stats__item b {
	display: block;
	font-family: var(--ix-font-mono);
	font-size: 28px;
	font-weight: 700;
	color: var(--ix-terracota-2);
}
.inicio-stats__item span {
	font-family: var(--ix-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
}

/* ============================================================
   SECCIÓN CABECERA (tipo maximalista)
   ============================================================ */
.ix-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
	padding-bottom: 22px;
	border-bottom: 2px solid var(--ix-tinta);
}
.ix-head__num {
	font-family: var(--ix-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--ix-terracota);
}
.ix-head__title {
	font-family: var(--ix-font-sans);
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ix-tinta);
	margin: 6px 0 0;
	line-height: 1;
}
.ix-head__title::after {
	content: "";
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-left: 14px;
	border-radius: 50%;
	background: var(--ix-terracota);
	vertical-align: middle;
}
.ix-head__sub {
	font-size: 0.98rem;
	color: var(--ix-texto-soft);
	max-width: 34ch;
	text-align: right;
}

/* ============================================================
   CATEGORÍAS — grid asimétrico de tarjetas
   ============================================================ */
.ix-categories { background: var(--ix-fondo); padding: 64px 0; }

@media (min-width: 1200px) {
	.ix-categories .container { max-width: 1280px; }
}

.ix-catgrid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px;
}

.ix-cat {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	min-height: 0;
	box-shadow: 0 6px 20px rgba(29,26,20,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ix-cat:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(29,26,20,0.14);
	text-decoration: none;
}
.ix-cat__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}
.ix-cat:hover .ix-cat__bg { transform: scale(1.08); }
.ix-cat__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.78) 100%);
}

.ix-cat__num {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 2;
	font-family: var(--ix-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #EADFC3;
	background: rgba(24,22,20,0.55);
	padding: 5px 10px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.ix-cat__label {
	position: relative;
	z-index: 2;
	padding: 16px 18px;
	width: 100%;
}
.ix-cat__label b {
	display: block;
	font-family: var(--ix-font-sans);
	font-weight: 700;
	font-size: clamp(15px, 1.3vw, 18px);
	color: var(--ix-blanco);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
}

/* tamaños asimétricos — 12 columnas */
.ix-cat--big  { grid-column: span 4; grid-row: span 2; }
.ix-cat--wide { grid-column: span 8; aspect-ratio: 8 / 3; }
.ix-cat--sq   { grid-column: span 4; aspect-ratio: 5 / 4; }
.ix-cat--half { grid-column: span 6; aspect-ratio: 4 / 3; }

.ix-cat--big .ix-cat__label  { padding: 20px; }
.ix-cat--big .ix-cat__label b { font-size: clamp(18px, 2vw, 28px); }

/* ============================================================
   DESTACADOS — bloque claro con filtros
   ============================================================ */
.ix-featured { background: var(--ix-crema); padding: 64px 0; }

.ix-featured__filters { margin-bottom: 34px; }
.ix-featured__filters ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	margin: 0;
}
.ix-featured__filters li {
	font-family: var(--ix-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ix-texto-soft);
	padding: 10px 18px;
	border: 2px solid var(--ix-linea);
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}
.ix-featured__filters li:hover { border-color: var(--ix-terracota); color: var(--ix-terracota); }
.ix-featured__filters li.active {
	background: var(--ix-esmeralda);
	border-color: var(--ix-esmeralda);
	color: var(--ix-blanco);
}

/* re-estilizado de tarjetas de producto heredadas */
.ix-featured .featured__item {
	border-radius: 14px;
	border: 1px solid var(--ix-linea);
	background: var(--ix-blanco);
	box-shadow: 0 12px 30px rgba(29,26,20,0.07);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
	margin-bottom: 24px;
}
.ix-featured .featured__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 50px rgba(29,26,20,0.16);
}
.ix-featured .featured__item__pic {
	border-radius: 14px 14px 0 0;
	height: 210px;
	border-bottom: 1px solid var(--ix-linea);
}
.ix-featured .featured__item__pic::before { display: none; }
.ix-featured .featured__item__text h6 { color: var(--ix-texto); }
.ix-featured .featured__item__text h5 { color: var(--ix-terracota); }

/* ============================================================
   BANNER — franja esmeralda de marca
   ============================================================ */
.ix-banner {
	position: relative;
	background:
		radial-gradient(700px 400px at 15% 20%, rgba(201,130,140,0.24), transparent 70%),
		linear-gradient(135deg, var(--ix-esmeralda) 0%, var(--ix-esmeralda-3) 100%);
	color: var(--ix-blanco);
	padding: 80px 0;
	overflow: hidden;
}
.ix-banner__label {
	font-family: var(--ix-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ix-ocre);
	margin-bottom: 18px;
}
.ix-banner__title {
	font-family: var(--ix-font-sans);
	font-weight: 800;
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ix-blanco);
	max-width: 20ch;
	margin-bottom: 22px;
}
.ix-banner__title em { font-style: normal; color: var(--ix-terracota-2); }
.ix-banner__text {
	max-width: 42ch;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255,255,255,0.78);
	margin-bottom: 30px;
}
.ix-banner__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.ix-banner__pics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.ix-banner__pic {
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 4 / 5;
	box-shadow: 0 22px 44px rgba(0,0,0,0.32);
	transform: rotate(-2deg);
}
.ix-banner__pic:nth-child(2) { transform: rotate(2deg) translateY(16px); }
.ix-banner__pic img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   COLECCIÓN — listas de productos con pestañas maximizadas
   Fondo acorde a la página (beige claro), tarjetas beige más claro,
   acentos dorados/mostaza.
   ============================================================ */
.ix-collection {
	--ix-gold:        #B8860B;
	--ix-gold-strong: #9C6A0A;
	background: var(--ix-fondo-2);
	padding: 64px 0;
}

/* numerito + punto decorativo dorados */
.ix-collection .ix-head__num { color: var(--ix-gold); }
.ix-collection .ix-head__title::after { background: var(--ix-gold); }

.ix-tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: fit-content;
	margin-bottom: 40px;
	background: var(--ix-crema);
	border: 2px solid var(--ix-linea);
	border-radius: 999px;
	padding: 5px;
}
.ix-tabs__indicator {
	position: absolute;
	z-index: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ix-gold) 0%, var(--ix-gold-strong) 100%);
	box-shadow: 0 6px 16px rgba(184,134,11,0.35);
	pointer-events: none;
	transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1),
	            top 0.35s cubic-bezier(0.65, 0, 0.35, 1),
	            width 0.35s cubic-bezier(0.65, 0, 0.35, 1),
	            height 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.ix-tabs__tab {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--ix-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ix-texto-soft);
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 12px 26px;
	cursor: pointer;
	transition: color 0.25s ease;
}
.ix-tabs__tab:hover { color: var(--ix-tinta); }
.ix-tabs__tab.active { color: var(--ix-blanco); font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }

.ix-tabpanel { display: none; }
.ix-tabpanel.active { display: block; animation: ixFadeUp 0.45s ease both; }
@keyframes ixFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ix-rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.ix-row {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ix-crema);
	border: 1px solid var(--ix-linea);
	border-radius: 12px;
	padding: 16px 20px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ix-row:hover {
	transform: translateX(6px);
	border-color: var(--ix-gold);
	box-shadow: 0 10px 24px rgba(21,19,26,0.20);
	text-decoration: none;
}
.ix-row__pic {
	flex-shrink: 0;
	width: 92px;
	height: 92px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ix-arena), var(--ix-fondo-2));
	display: flex;
	align-items: center;
	justify-content: center;
}
.ix-row__pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-row__pic svg { width: 34px; height: 34px; opacity: 0.55; }
.ix-row__info { flex: 1; min-width: 0; }
.ix-row__info b {
	display: block;
	font-family: var(--ix-font-sans);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--ix-tinta);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.ix-row__info span {
	font-family: var(--ix-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ix-texto-soft);
}
.ix-row__price {
	display: block;
	margin-top: 9px;
	font-family: var(--ix-font-mono);
	font-weight: 700;
	font-size: 15px;
	color: var(--ix-gold-strong);
}
.ix-row__arrow {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--ix-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ix-gold);
	transition: all 0.2s ease;
}
.ix-row:hover .ix-row__arrow {
	background: var(--ix-gold);
	border-color: var(--ix-gold);
	color: #1B1A22;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
	.inicio-hero__inner { grid-template-columns: 1fr; }
	.inicio-hero__frame { margin: 0 auto; }
	.inicio-hero__badge--tl { left: 50%; transform: translateX(-50%); top: -12%; }
	.inicio-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.ix-catgrid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 14px; }
	.ix-cat--big  { grid-column: span 2; grid-row: span 2; }
	.ix-cat--wide { grid-column: span 2; }
	.ix-cat--sq   { grid-column: span 1; }
	.ix-cat--half { grid-column: span 1; }
	.ix-banner__cta { flex-direction: column; }
}

@media (max-width: 767.98px) {
	.inicio-hero { padding: 48px 0 64px; }
	.ix-head { flex-direction: column; align-items: flex-start; }
	.ix-head__sub { text-align: left; }
	.inicio-hero__frame { max-width: 300px; }
	.inicio-hero__badge { width: 92px; height: 92px; }
	.ix-stats__item b { font-size: 20px; }
	.ix-banner__pics { grid-template-columns: 1fr; }
	.ix-row { flex-wrap: wrap; gap: 14px; padding: 14px; }
	.ix-row__info { flex: 1 1 150px; }
	.ix-row__arrow { margin-left: auto; }
}


/* ============================================================
   HERO � CIUDAD DEL MUEBLE (adaptado a Aneley / moda)
   Full-bleed con foto parallax, overlay oscuro, sello circular
   ============================================================ */
.hero-cdm {
	position: relative;
	min-height: 650px;
	height: calc(100vh - 118px);
	overflow: hidden;
	background: #1a1a1f;
	color: #fff;
}

/* Foto absoluta full-bleed con inset vertical para parallax */
.hero-cdm__photo {
	position: absolute;
	inset: -8% 0;
	background-position: center 20%;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	animation: heroCdmPhotoDrift 24s ease-in-out infinite alternate;
}
@keyframes heroCdmPhotoDrift {
	from { transform: translate3d(0, -1.5%, 0) scale(1.04); }
	to   { transform: translate3d(0, 1.5%, 0) scale(1.04); }
}

/* Overlay: gradiente horizontal, fuerte a la izquierda, casi transparente a la derecha */
.hero-cdm__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(10, 10, 14, 0.92) 0%,
		rgba(10, 10, 14, 0.72) 34%,
		rgba(10, 10, 14, 0.25) 62%,
		rgba(10, 10, 14, 0.05) 100%
	);
	pointer-events: none;
}

/* Contenido absoluto a la izquierda, centrado verticalmente */
.hero-cdm__content {
	position: absolute;
	left: 7.5vw;
	top: 50%;
	transform: translateY(-48%);
	z-index: 2;
	max-width: 42vw;
}

.hero-cdm__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ix-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #f2e3a9;
	margin-bottom: 22px;
	opacity: 0;
	animation: heroCdmLineUp 0.6s ease both 0.15s;
}
.hero-cdm__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: #f2e3a9;
}

.hero-cdm__title {
	margin: 0 0 34px;
	font-family: var(--ix-font-sans);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-size: clamp(2.8rem, 6.2vw, 5.4rem);
}
.hero-line {
	display: block;
	overflow: hidden;
}
.hero-line > span {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	animation: heroCdmLineUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-line:nth-child(1) > span { animation-delay: 0.2s; }
.hero-line:nth-child(2) > span { animation-delay: 0.33s; }
.hero-line:nth-child(3) > span { animation-delay: 0.46s; }
.hero-line:nth-child(3) > span { color: #f2e3a9; }

/* frases 1 y 2 en blanco con contorno/sombra negro muy leve */
.hero-line:nth-child(1) > span,
.hero-line:nth-child(2) > span {
	color: #ffffff;
	-webkit-text-stroke: 1px rgba(0,0,0,0.35);
	text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

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

/* CTAs */
.hero-cdm__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	opacity: 0;
	animation: heroCdmLineUp 0.6s ease both 0.6s;
}
.hero-cdm__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ix-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 17px 32px;
	border: 1px solid transparent;
	border-radius: 2px;
	transition: all 0.25s ease;
	color: #fff;
}
.hero-cdm__btn--coral {
	background: #c2554f;
	border-color: #c2554f;
	color: #fff;
}
.hero-cdm__btn--coral:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #1b2a4a;
}
.hero-cdm__btn--ghost {
	background: transparent;
	border-color: rgba(255,255,255,0.45);
	color: #fff;
}
.hero-cdm__btn--ghost:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #1b2a4a;
}
a.hero-cdm__btn { text-decoration: none; }

/* Sello circular rotado, abajo a la derecha */
.hero-cdm__seal {
	position: absolute;
	right: 4vw;
	bottom: 5vh;
	z-index: 2;
	width: 170px;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: heroCdmSealSpin 18s linear infinite;
}
.hero-cdm__seal-circle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: heroCdmSealSpin 18s linear infinite reverse;
}
.hero-cdm__seal-circle text {
	font-family: var(--ix-font-mono);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	fill: #ffffff;
	text-transform: uppercase;
}
.hero-cdm__seal-num {
	font-family: var(--ix-font-sans);
	font-weight: 800;
	font-size: 3rem;
	color: #c2554f;
}
@keyframes heroCdmSealSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-cdm__photo,
	.hero-cdm__video,
	.hero-cdm__seal,
	.hero-cdm__seal-circle { animation: none !important; }
	.hero-cdm__eyebrow,
	.hero-line > span,
	.hero-cdm__cta { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Responsive mobile */
@media (max-width: 767.98px) {
	.hero-cdm { height: 700px; min-height: 700px; }
	.hero-cdm__content { left: 6vw; max-width: 88vw; }
	.hero-cdm__title { font-size: clamp(2.1rem, 9vw, 3rem); }
	.hero-cdm__seal { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.hero-cdm { height: calc(100vh - 90px); min-height: 660px; }
	.hero-cdm__content { max-width: 55vw; }
}

@media (max-width: 767.98px) {
	.ix-tabs {
		flex-wrap: wrap;
		gap: 4px;
		width: 100%;
		border-radius: 20px;
		padding: 4px;
	}
	.ix-tabs__tab {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
		padding: 11px 10px;
		font-size: 10px;
		letter-spacing: 0.04em;
	}
	.ix-tabpanel.active { animation-duration: 0.35s; }
	.ix-collection { padding: 48px 0; }
}

/* Fondo de respaldo (sin imagen configurada): degrad� liso de marca */
.hero-cdm--video {
	background:
		radial-gradient(1000px 600px at 85% -10%, rgba(201,130,140,0.30), transparent 70%),
		radial-gradient(800px 500px at 5% 115%, rgba(23,21,21,0.9), transparent 70%),
		linear-gradient(150deg, #2a1f24 0%, #171515 55%, #3a252b 100%);
}
.hero-cdm__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	animation: heroCdmPhotoDrift 24s ease-in-out infinite alternate;
}