/**
 * Configurador Trione — dirección "editorial claro lujo".
 * Blanco, serif display fina, acento dorado sutil, hairlines. Tokens propios
 * para que se vea igual en esta web y en la definitiva, sin heredar del tema.
 */

.neik-configurator {
	--neik-bg: #ffffff;
	--neik-soft: #faf9f7;
	--neik-ink: #161512;
	--neik-muted: #8b8880;
	--neik-line: #e7e4dd;
	--neik-line-ink: #161512;
	--neik-gold: #b3924f;
	--neik-gold-soft: #e9dcc0;
	--neik-ok: #6b7d4f;
	--neik-err: #9a5b45;

	--neik-serif: "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
	--neik-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
	color: var(--neik-ink);
	background: var(--neik-bg);
	font-family: var(--neik-sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.neik-configurator *,
.neik-configurator *::before,
.neik-configurator *::after {
	box-sizing: border-box;
}

/* Cormorant trae cifras oldstyle: el 0 parece "O" y el 1 parece "I", fatal en
 * un campo numérico. Forzar cifras de caja alta y tabulares donde haya dígitos. */
.neik-stepper__input,
.neik-total,
.neik-panels__counter,
.neik-step__num,
.neik-unit {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- cabecera ---------- */

.neik-header {
	margin: 0 0 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--neik-line);
	text-align: center;
}

.neik-overline {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--neik-muted);
}

.neik-title {
	margin: 0;
	font-family: var(--neik-serif);
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.neik-title__slash {
	color: var(--neik-gold);
	font-style: italic;
	padding: 0 0.15em;
}

.neik-title__sub {
	color: var(--neik-muted);
	font-size: 0.5em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-family: var(--neik-sans);
	vertical-align: middle;
}

/* ---------- pasos ---------- */

.neik-step {
	margin: 0 0 2.75rem;
}

.neik-step__head {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin: 0 0 1.1rem;
}

.neik-step__num {
	font-family: var(--neik-serif);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--neik-gold);
	min-width: 1.6em;
}

.neik-step__label {
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--neik-ink);
	font-weight: 500;
}

/* ---------- opciones (material, medida, continuidad) ---------- */

.neik-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.neik-option {
	position: relative;
	padding: 0.75rem 1.6rem;
	border: 1px solid var(--neik-line);
	background: var(--neik-bg);
	color: var(--neik-ink);
	font-family: var(--neik-sans);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* El tema pinta button:hover con el rosa corporativo de Neikers, que rompe la
 * paleta editorial del configurador. Se fijan aquí los tres estados con el
 * contenedor por delante para ganar en especificidad sin recurrir a !important. */
.neik-configurator .neik-option:hover,
.neik-configurator .neik-option:focus {
	background: var(--neik-soft);
	border-color: var(--neik-ink);
	color: var(--neik-ink);
}

.neik-configurator .neik-option.is-active,
.neik-configurator .neik-option.is-active:hover,
.neik-configurator .neik-option.is-active:focus {
	background: var(--neik-ink);
	border-color: var(--neik-ink);
	color: #fff;
}

/* ---------- pasos desactivados (visibles pero bloqueados) ---------- */

.neik-step.is-disabled {
	opacity: 0.45;
	filter: grayscale(0.4);
}

.neik-step.is-disabled .neik-step__num { color: var(--neik-muted); }

.neik-step.is-disabled .neik-option,
.neik-step.is-disabled .neik-model,
.neik-step.is-disabled .neik-carousel__nav,
.neik-stepper.is-disabled,
.neik-stepper.is-disabled * {
	cursor: not-allowed;
	pointer-events: none;
}

.neik-step.is-disabled .neik-option:hover {
	border-color: var(--neik-line);
}

.neik-option:focus-visible,
.neik-submit:focus-visible,
.neik-model:focus-visible,
.neik-carousel__nav:focus-visible,
.neik-stepper__arrows button:focus-visible {
	outline: 1px solid var(--neik-gold);
	outline-offset: 3px;
}

/* ---------- carrusel de modelos ---------- */

.neik-carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.neik-carousel__strip {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.35rem 0.25rem 0.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.neik-carousel__strip::-webkit-scrollbar { display: none; }

.neik-carousel__nav {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--neik-line);
	border-radius: 50%;
	background: var(--neik-bg);
	color: var(--neik-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.neik-configurator .neik-carousel__nav:hover,
.neik-configurator .neik-carousel__nav:focus {
	background: var(--neik-ink);
	border-color: var(--neik-ink);
	color: #fff;
}

.neik-model {
	flex: 0 0 232px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

/* Retrato en vez de cuadrado: la plancha es vertical y así el swatch se lee
 * como muestra de material, no como icono. */
.neik-model__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--neik-soft);
	border: 1px solid var(--neik-line);
	transition: border-color 0.25s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.neik-model__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
	opacity: 0.92;
}

/* La tarjeta es un <button> y el tema le pinta el fondo rosa en hover; además
 * aplica img{height:auto}, que dejaba la foto sin llenar el marco y con una
 * banda crema debajo. Se fijan los dos con el contenedor por delante. */
.neik-configurator .neik-model,
.neik-configurator .neik-model:hover,
.neik-configurator .neik-model:focus {
	background: transparent;
	color: inherit;
}

.neik-configurator .neik-model__img {
	height: 100%;
	width: 100%;
	max-width: none;
}

.neik-configurator .neik-hero__img {
	height: 100%;
	width: 100%;
	max-width: none;
}

.neik-model:hover .neik-model__frame {
	border-color: var(--neik-gold-soft);
	box-shadow: 0 14px 34px -20px rgba(22, 21, 18, 0.55);
	transform: translateY(-3px);
}

.neik-model:hover .neik-model__img {
	transform: scale(1.05);
	opacity: 1;
}

/* Seleccionado: hairline dorado por dentro y marco tinta. Sin rellenos de
 * color, que romperían la calma de la página. */
.neik-model.is-active .neik-model__frame {
	border-color: var(--neik-ink);
	box-shadow: 0 16px 38px -22px rgba(22, 21, 18, 0.6);
}

.neik-model.is-active .neik-model__frame::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid var(--neik-gold-soft);
	pointer-events: none;
}

.neik-model__name {
	font-family: var(--neik-serif);
	font-size: 1.32rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--neik-muted);
	transition: color 0.2s ease;
}

.neik-model:hover .neik-model__name,
.neik-model.is-active .neik-model__name {
	color: var(--neik-ink);
}

.neik-model__tier {
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--neik-muted);
	margin-top: -0.35rem;
}

.neik-model.is-active .neik-model__name {
	position: relative;
	display: inline-block;
}

.neik-model.is-active .neik-model__name::after {
	content: "";
	display: block;
	width: 1.75rem;
	height: 1px;
	margin-top: 0.35rem;
	background: var(--neik-gold);
}

/* ---------- modelo elegido ---------- */

.neik-selected {
	margin: 0 0 2.75rem;
	font-family: var(--neik-serif);
	font-size: 1.6rem;
	color: var(--neik-muted);
}

.neik-selected strong {
	color: var(--neik-ink);
	font-weight: 500;
}

/* ---------- stepper numérico ---------- */

.neik-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--neik-line);
	background: var(--neik-bg);
	width: max-content;
}

.neik-stepper__input {
	width: 3.75rem;
	padding: 0.6rem 0.5rem;
	border: 0;
	background: transparent;
	font-family: var(--neik-serif);
	font-size: 1.25rem;
	color: var(--neik-ink);
	text-align: center;
	-moz-appearance: textfield;
}

.neik-stepper__input::-webkit-outer-spin-button,
.neik-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.neik-stepper__arrows {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--neik-line);
}

.neik-stepper__arrows button {
	flex: 1;
	min-width: 2rem;
	padding: 0 0.4rem;
	border: 0;
	background: transparent;
	color: var(--neik-muted);
	font-size: 0.65rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.neik-stepper__arrows button:first-child { border-bottom: 1px solid var(--neik-line); }
.neik-configurator .neik-stepper__arrows button:hover,
.neik-configurator .neik-stepper__arrows button:focus { background: var(--neik-soft); color: var(--neik-ink); }

/* ---------- rejilla de paneles ---------- */

.neik-panels { margin: 0 0 2.75rem; }

.neik-panels__counter {
	margin: 0 0 1.25rem;
	font-family: var(--neik-serif);
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.neik-panels__counter::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.neik-panels__counter.is-ok { color: var(--neik-ok); }
.neik-panels__counter.is-pending { color: var(--neik-err); }

.neik-panels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	gap: 1.25rem;
}

.neik-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.neik-panel__img {
	width: 100%;
	aspect-ratio: 2 / 5;
	object-fit: cover;
	border: 1px solid var(--neik-line);
	transition: border-color 0.2s ease;
}

.neik-panel:hover .neik-panel__img { border-color: var(--neik-ink); }

/* ---------- pie / CTA ---------- */

.neik-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	margin-top: 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--neik-line);
}

.neik-price {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.neik-unit {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--neik-muted);
}

.neik-total {
	margin: 0;
	font-family: var(--neik-serif);
	font-size: 2rem;
	line-height: 1;
}

.neik-total strong { font-weight: 500; }

.neik-submit {
	padding: 1rem 2.75rem;
	border: 1px solid var(--neik-ink);
	background: var(--neik-bg);
	color: var(--neik-ink);
	font-family: var(--neik-sans);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.neik-configurator .neik-submit:hover:not(:disabled),
.neik-configurator .neik-submit:focus:not(:disabled) {
	background: var(--neik-ink);
	color: #fff;
}

.neik-submit:disabled {
	border-color: var(--neik-line);
	color: var(--neik-muted);
	cursor: not-allowed;
}

.neik-feedback {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9rem;
}

.neik-feedback.is-error { color: var(--neik-err); }
.neik-feedback.is-ok { color: var(--neik-ok); }

.neik-feedback a {
	color: var(--neik-gold);
	text-underline-offset: 3px;
}

.neik-empty,
.neik-loading {
	color: var(--neik-muted);
	font-family: var(--neik-serif);
	font-size: 1.3rem;
}

/* ---------- hero (banner a ancho completo de página) ---------- */

.neik-hero {
	/* Rompe el ancho máximo del contenedor y ocupa todo el viewport. */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 3rem;
	background: var(--neik-soft);
}

.neik-hero__frame {
	position: relative;
	overflow: hidden;
	height: clamp(220px, 30vw, 440px);
}

.neik-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Recorte real de panel: textura limpia, se centra. */
.neik-hero__img.is-clean {
	object-position: center center;
}

/* Swatch: lleva el nombre y "by neikers" incrustados en la mitad superior, así
 * que el banner se queda con la franja baja. Solo se lee el rótulo del plugin. */
/* Swatch: lleva el nombre incrustado en la mitad superior. Recortar no basta
 * en móvil, donde el banner es casi tan alto como ancho y esa banda vuelve a
 * entrar; con un zoom anclado en la zona baja el texto se sale del marco en
 * cualquier proporción y solo queda el rótulo del plugin. */
.neik-hero__img.is-swatch {
	object-position: center 88%;
	transform: scale(1.55);
	transform-origin: 50% 88%;
}

/* Sin velo: una mancha oscura sobre un Carrara casi blanco se ve sucia y
 * estropea justo lo que se vende, la textura. El contraste lo pone el halo
 * del propio rótulo. */
.neik-hero__veil {
	display: none;
}

.neik-hero__name {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-family: var(--neik-serif);
	font-size: clamp(1.9rem, 4.2vw, 3.6rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: #fff;
	text-align: center;
	padding: 0 4.5rem;
	/* Halo en varias capas: legible sobre mármol blanco y sobre Black Marquina
	 * sin tapar la textura. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 12px rgba(0, 0, 0, 0.5),
		0 0 34px rgba(0, 0, 0, 0.42);
}

/* Textura clara (Carrara, Calacatta): tinta oscura con halo blanco. */
.neik-hero__name.is-on-light {
	color: #23211e;
	text-shadow:
		0 1px 2px rgba(255, 255, 255, 0.75),
		0 2px 14px rgba(255, 255, 255, 0.7),
		0 0 38px rgba(255, 255, 255, 0.6);
}

.neik-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	/* Chip oscuro translúcido con flecha blanca: se distingue igual sobre un
	 * Carrara casi blanco que sobre un Black Marquina. */
	background: rgba(0, 0, 0, 0.32);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	transition: background-color 0.2s ease;
}

.neik-hero__nav--prev { left: clamp(0.75rem, 3vw, 2.5rem); }
.neik-hero__nav--next { right: clamp(0.75rem, 3vw, 2.5rem); }

.neik-hero__nav:hover { background: rgba(0, 0, 0, 0.55); }
.neik-hero__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.neik-hero__nav[disabled] { opacity: 0; pointer-events: none; }

/* ---------- nota de producto ---------- */

.neik-note {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--neik-line);
	color: var(--neik-muted);
	max-width: 46rem;
}

.neik-note__line {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
}

.neik-note__made {
	margin: 1.25rem 0 0.35rem;
	color: var(--neik-ink);
}

.neik-note__warranty {
	margin: 0;
	font-family: var(--neik-serif);
	font-size: 1.35rem;
	color: var(--neik-ink);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
	.neik-configurator { padding: 1.75rem 1.15rem 3rem; }
	.neik-hero__name { padding: 0 3.25rem; }
	.neik-hero__nav { width: 2.5rem; height: 2.5rem; font-size: 1.6rem; }
	.neik-model { flex-basis: 150px; }
	.neik-footer { flex-direction: column; align-items: flex-start; }
	.neik-total { font-size: 1.65rem; }
}