/* ==========================================================================
   haBoutique — Home (requiere base.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paneles con forma (hero, colores, productos)
   l = curva y texto a la izquierda, imagen a la derecha
   r = curva y texto a la derecha, imagen a la izquierda
   -------------------------------------------------------------------------- */
.hb-panel {
	position: relative;
	display: flex; align-items: center;
	min-height: clamp(400px, 36vw, 540px);
	padding: clamp(56px, 6vw, 90px) 0;
}
.elementor-widget-hb-colours, .elementor-widget-hb-product + .elementor-widget-hb-product,
.elementor-widget-hb-colours + .elementor-widget-hb-product, .elementor-widget-hb-hero + .elementor-widget-hb-product { margin-top: -2.6vw !important; }
.elementor-widget-hb-hero + .elementor-widget-hb-colours { margin-top: -2.6vw !important; }

.hb-panel__visual { position: absolute; inset: 0; }
.hb-media { position: absolute; inset: 0; overflow: hidden; }
.hb-panel--l .hb-media { -webkit-clip-path: url(#hb-clip-l); clip-path: url(#hb-clip-l); }
.hb-panel--r .hb-media { -webkit-clip-path: url(#hb-clip-r); clip-path: url(#hb-clip-r); }

.hb-slides { position: absolute; top: 0; bottom: 0; width: 66%; }
.hb-panel--l .hb-slides { right: 0; }
.hb-panel--r .hb-slides { left: 0; }

.hb .hb-slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	opacity: 0; transform: scale(1.04);
	transition: opacity 1.2s var(--ease), transform 7s var(--ease);
}
.hb .hb-slide.is-active { opacity: 1; transform: scale(1); }

/* Degradado: funde la foto con el negro del lado del texto */
.hb-shade { position: absolute; inset: 0; pointer-events: none; }
.hb-panel--l .hb-shade {
	background: linear-gradient(90deg, var(--ink) 33%, rgba(5, 5, 5, .82) 40%, rgba(5, 5, 5, .25) 54%, rgba(5, 5, 5, 0) 66%);
}
.hb-panel--r .hb-shade {
	background: linear-gradient(270deg, var(--ink) 33%, rgba(5, 5, 5, .82) 40%, rgba(5, 5, 5, .25) 54%, rgba(5, 5, 5, 0) 66%);
}
.hb-shade::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 50% 50%, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .55) 100%);
}

/* Línea dorada */
.hb .hb-frame {
	position: absolute; inset: 0; width: 100%; height: 100%;
	overflow: visible; pointer-events: none;
	fill: none; stroke: var(--line); stroke-width: 1.2;
}

/* Flechas del carrusel */
.hb-arrows {
	position: absolute; top: 50%; z-index: 3;
	display: flex; gap: 10px; transform: translateY(-50%);
}
.hb-panel--r .hb-arrows { left: clamp(20px, 3vw, 44px); }
.hb-panel--l .hb-arrows { right: clamp(20px, 3vw, 44px); }
.hb .hb-arrow {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--gold); color: var(--gold-2);
	background: rgba(5, 5, 5, .55);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	transition: background-color .3s, color .3s;
}
.hb .hb-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hb .hb-arrow--next svg { transform: scaleX(-1); }
.hb .hb-arrow:hover { background: var(--gold); color: var(--ink); }

/* Contenido */
.hb-panel__content { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.hb-panel__content a, .hb-panel__content button { pointer-events: auto; }
.hb-copy { width: min(440px, 36%); }
.hb-panel--r .hb-copy { margin-left: auto; width: min(380px, 31%); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hb-hero {
	min-height: min(100svh, 880px);
	padding-top: calc(var(--header-h) + 40px);
}
.hb-hero .hb-slides { width: 70%; }
.hb-hero .hb-copy { width: min(560px, 44%); }
.hb-hero__title {
	font-size: clamp(52px, 6.6vw, 96px);
	line-height: .98; letter-spacing: -.015em;
}
.hb-hero__title span, .hb-hero__title em { display: block; }
.hb-hero .hb-btn { margin-top: clamp(32px, 4vw, 52px); }
.hb-hero .hb-slide.is-active { animation: hb-zoom 16s var(--ease) both; }
@keyframes hb-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* --------------------------------------------------------------------------
   Colores
   -------------------------------------------------------------------------- */
.hb-touch__title { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.02; }
.hb-touch__title em { display: block; }
.hb .hb-swatches {
	display: grid; grid-template-columns: repeat(5, auto); justify-content: start;
	gap: 18px clamp(14px, 1.6vw, 22px);
	margin-top: clamp(28px, 3vw, 40px);
}
.hb-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; text-align: center; }
.hb-swatch__chip {
	width: clamp(46px, 4.4vw, 62px); aspect-ratio: 1; border-radius: 50%;
	background-size: cover; background-position: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .65);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hb-swatch:hover .hb-swatch__chip {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px var(--gold), 0 12px 24px rgba(0, 0, 0, .7);
}
.hb-swatch__name { white-space: nowrap; }
.hb .hb-touch__text { margin-top: 24px; color: var(--muted); max-width: 34ch; }

/* --------------------------------------------------------------------------
   Productos
   -------------------------------------------------------------------------- */
.hb-product__title {
	font-size: clamp(26px, 2.2vw, 33px); font-weight: 500;
	letter-spacing: .05em; text-transform: uppercase; line-height: 1.1;
}
.hb-dash { display: block; width: 26px; height: 1px; background: var(--gold); margin: 20px 0 22px; }
.hb-product__text { font-size: 19px; line-height: 1.45; }
.hb-product .hb-btn { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Pasos
   -------------------------------------------------------------------------- */
.hb-steps {
	position: relative; text-align: center;
	margin-top: -1vw;
	padding: clamp(100px, 10vw, 150px) 0 clamp(110px, 11vw, 170px);
}
.hb-steps__title { font-style: italic; color: var(--gold-2); font-size: clamp(42px, 4.6vw, 66px); line-height: 1.05; }
.hb .hb-steps__list {
	display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
	max-width: 1000px; margin: clamp(36px, 4vw, 56px) auto 0;
}
.hb .hb-steps__list li { position: relative; padding: 4px 18px 8px; display: flex; flex-direction: column; align-items: center; }
.hb .hb-steps__list li + li::before {
	content: ""; position: absolute; left: 0; top: 12%; bottom: 8%; width: 1px;
	background: linear-gradient(var(--gold), rgba(201, 164, 92, .35));
}
.hb-steps__num { font-variant-numeric: lining-nums; font-style: italic; color: var(--gold-2); font-size: clamp(60px, 6.4vw, 92px); line-height: 1; }
.hb-steps__text { margin-top: 12px; font-size: 18px; line-height: 1.35; max-width: 18ch; }
.hb .hb-steps__note { margin-top: clamp(40px, 4vw, 60px); font-size: 19px; }

@media (max-width: 1100px) {
	.hb-copy { width: min(400px, 40%); }
	.hb-panel--r .hb-copy { width: min(360px, 36%); }
	.hb-hero .hb-copy { width: min(480px, 46%); }
	.hb .hb-swatches { grid-template-columns: repeat(5, auto); }
}

@media (max-width: 860px) {
	.hb-panel {
		flex-direction: column; align-items: stretch;
		min-height: 0; padding: 0 0 8px;
	}
	.elementor-widget-hb-colours, .elementor-widget-hb-product + .elementor-widget-hb-product, .elementor-widget-hb-colours + .elementor-widget-hb-product, .elementor-widget-hb-hero + .elementor-widget-hb-product, .elementor-widget-hb-hero + .elementor-widget-hb-colours { margin-top: 36px !important; }
	.hb-panel__visual { position: relative; inset: auto; height: 92vw; max-height: 560px; }
	.hb .hb-slides { width: 100%; left: 0; right: 0; }
	.hb-panel--l .hb-shade,
	.hb-panel--r .hb-shade {
		background: linear-gradient(0deg, var(--ink) 2%, rgba(5, 5, 5, .55) 26%, rgba(5, 5, 5, 0) 50%);
	}
	.hb-panel__content { margin-top: -16vw; }
	.hb .hb-copy, .hb .hb-panel--r .hb-copy { width: auto; margin: 0; }
	.hb-panel--r .hb-panel__content { text-align: right; }
	.hb-panel--r .hb-dash { margin-left: auto; }
	.hb-arrows { top: 42%; }

	.hb-hero { padding-top: var(--header-h); min-height: 0; }
	.hb-hero .hb-panel__visual { height: 112vw; max-height: 720px; }
	.hb-hero .hb-copy { width: auto; }
	.hb-hero__title { font-size: clamp(46px, 13vw, 64px); }
	.hb-hero .hb-panel__content { margin-top: -38vw; }

	.hb .hb-swatches { grid-template-columns: repeat(5, 1fr); gap: 16px 8px; }
	.hb-swatch { font-size: 12px; }
	.hb-swatch__chip { width: min(54px, 13vw); }

	.hb-steps { padding: 90px 0 110px; }
	.hb .hb-steps__list { grid-template-columns: 1fr 1fr; row-gap: 36px; }
	.hb .hb-steps__list li:nth-child(odd)::before { display: none; }
}

/* Colores: libro ilustrativo que cambia de color */
.hb-touch__book { position: absolute; inset: 9% 0; display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(40px, 9vw, 160px); pointer-events: none; }
.hb .hb-touch__book canvas { width: auto; height: auto; max-height: 100%; max-width: 46%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: opacity .4s; }
.hb-swatch { cursor: pointer; }
.hb-swatch[aria-pressed="true"] .hb-swatch__chip { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 2px var(--ink), 0 0 0 3px var(--gold-2); }
.hb-swatch__chip { background-blend-mode: overlay; }
.hb .hb-swatch__chip.has-grain { background-image: var(--grain); background-size: 120px; }
.hb-touch .hb-shade { background: radial-gradient(70% 90% at 72% 50%, rgba(227,194,124,.10), rgba(5,5,5,0) 60%), linear-gradient(90deg, var(--ink) 30%, rgba(5,5,5,.6) 50%, rgba(5,5,5,.15) 70%) !important; }
@media (max-width: 860px) {
	.hb-touch__book { place-items: center; padding: 0; }
	.hb .hb-touch__book canvas { max-width: 60%; max-height: 80%; }
}