/*
 * Super Landing Lazuri -- arquitectura visual bloqueada segun la imagen de
 * referencia aprobada. Namespace propio .lvs-super, completamente
 * independiente de lazuri-venta (otra paleta, otra arquitectura, otro
 * archivo).
 */

.lvs-super {
	--lvs-teal: #073f3b;
	--lvs-plum: #5c2342;
	--lvs-coral: #f26457;
	--lvs-cream: #fff7e8;
	--lvs-cobalt: #3155e7;
	--lvs-mango: #f4b942;
	--lvs-ink: #17201e;
	--lvs-navy: #14253a;
	--lvs-green: #169447;
	--lvs-white: #ffffff;
	--lvs-muted: #66707d;
	--lvs-leaf: #e7b9a8;
	--lvs-border: rgba(20, 37, 58, .16);
	--lvs-shadow: 0 18px 40px rgba(36, 23, 22, .14);

	background: var(--lvs-cream);
	color: var(--lvs-ink);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.lvs-super,
.lvs-super *,
.lvs-super *::before,
.lvs-super *::after {
	box-sizing: border-box;
}

.lvs-super button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
}

body.lvs-super-page {
	margin: 0;
	max-width: 100vw;
	background: var(--lvs-cream);
	overflow-x: hidden;
}

/* -- Franja de confianza -- */

.lvs-topstrip {
	min-height: 30px;
	background: var(--lvs-teal);
	color: var(--lvs-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* -- Header -- */

.lvs-header {
	position: relative;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(20px, 4vw, 48px);
	background: var(--lvs-cream);
}

.lvs-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .12em;
	color: var(--lvs-ink);
}

/* Logo oficial (wp_get_attachment_image): solo se limita la ALTURA -- el
   ancho queda en automatico para conservar su proporcion real sin
   deformarlo. No toca min-height de .lvs-header ni la posicion del
   carrito, que siguen definidos por .lvs-header en si. */
.lvs-header__logo-img {
	display: block;
	height: 34px;
	width: auto;
	max-width: 100%;
}

.lvs-header__tagline {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lvs-muted);
	font-weight: 700;
	white-space: nowrap;
}

.lvs-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lvs-ink);
	text-decoration: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Agrupa el selector ES|EN y el carrito para que .lvs-header conserve
   exactamente los mismos DOS elementos en su distribucion
   justify-content:space-between (marca a la izquierda, este grupo a la
   derecha) -- el logo, el texto central y la posicion final del carrito
   no se mueven. */
.lvs-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.lvs-header__lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.lvs-header__lang-link {
	color: var(--lvs-muted);
	text-decoration: none;
}

.lvs-header__lang-link.is-active {
	color: var(--lvs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lvs-header__lang-link.is-disabled {
	opacity: .4;
}

.lvs-header__lang-sep {
	color: var(--lvs-muted);
	opacity: .5;
}

/* -- Hero: grid foto / compra -- */

.lvs-hero {
	max-width: 1488px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 58.5% 1fr;
	gap: clamp(24px, 3vw, 44px);
	padding: clamp(10px, 2vw, 18px) clamp(20px, 4vw, 48px) 120px;
	align-items: start;
}

/* -- Media -- */

.lvs-media {
	position: relative;
	min-width: 0;
}

.lvs-media__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	overflow: hidden;
	background: var(--lvs-white);
	box-shadow: var(--lvs-shadow);
}

.lvs-media__image,
.lvs-media__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Correccion 1 (2026-09-15): la fotografia principal, unicamente, se
   reduce un 10% (dentro del 8%-12% pedido) para que la parte baja de la
   prenda quede completa y con espacio antes de las tres tarjetas
   inferiores. Se aplica sobre el elemento ya centrado por object-fit
   (mismo ancho/alto de marco, mismo contain) -- scale() desde el centro
   conserva proporcion, no recorta y no toca .lvs-media__video ni
   .lvs-media__frame (arquitectura exterior intacta). Funciona igual con
   fotografias verticales u horizontales porque no depende de una
   relacion de aspecto fija. */
.lvs-media__image {
	transform: scale(0.9);
}

.lvs-media__image[hidden],
.lvs-media__video[hidden] {
	display: none !important;
}

.lvs-media__quote {
	position: absolute;
	max-width: 140px;
	margin: 0;
	color: var(--lvs-ink);
	font-family: 'Archivo Narrow', sans-serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(15px, 1.6vw, 20px);
	line-height: 1.22;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(255, 255, 255, .5);
}

.lvs-media__quote--top {
	top: 24px;
	left: 24px;
}

.lvs-media__quote-dash {
	display: block;
	margin-top: 6px;
	font-style: normal;
	opacity: .85;
}

.lvs-media__quote--bottom {
	bottom: 92px;
	left: 24px;
	/* Unica frase manuscrita -- se sobreescribe aqui, no en la clase base
	   .lvs-media__quote, para no alterar "Mas que ropa..." (--top), que
	   conserva su itálica Archivo Narrow oscura tal cual. Color: mismo
	   vino/morado exacto del titulo "MANGA LARGA" (.lvs-buy__name-light),
	   reutilizando su propia variable --lvs-plum -- nunca un tono elegido
	   a mano. Sin text-shadow propio: hereda el halo claro ya definido en
	   la clase base .lvs-media__quote (pensado para texto oscuro sobre
	   foto), el mismo que ya usa --top. */
	font-family: 'Caveat', cursive;
	font-style: normal;
	font-weight: 600;
	color: var(--lvs-plum);
}

.lvs-media__quote-squiggle {
	display: block;
	width: 72px;
	height: 33px;
	color: var(--lvs-mango);
	margin-bottom: 10px;
}

.lvs-media__play {
	position: absolute;
	top: 42%;
	left: 30%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--lvs-white);
}

.lvs-media__play-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--lvs-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
	transition: transform .15s ease;
}

.lvs-media__play:hover .lvs-media__play-icon {
	transform: scale(1.06);
}

.lvs-media__play-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.lvs-media__spin-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(20, 37, 58, .78);
	color: var(--lvs-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.25;
}

.lvs-media__spin-hint {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(20, 37, 58, .78);
	color: var(--lvs-white);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 3px;
}

/* -- Tira de color flotante -- */

.lvs-colorstrip {
	position: absolute;
	top: 22px;
	right: 10px;
	bottom: 90px;
	width: 74px;
	z-index: 3;
	background: var(--lvs-white);
	border-radius: 12px;
	box-shadow: var(--lvs-shadow);
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.lvs-colorstrip__hint {
	position: absolute;
	top: -34px;
	right: 0;
	margin: 0;
	white-space: nowrap;
	background: var(--lvs-navy);
	color: var(--lvs-white);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 6px;
	text-align: center;
}

.lvs-colorstrip__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lvs-colorstrip__list::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.lvs-swatch {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 4px;
	border: 2px solid var(--lvs-white);
	outline: 1px solid var(--lvs-border);
	background-size: cover;
	background-position: center;
	background-color: var(--lvs-cream);
	transition: outline-color .15s ease, outline-width .15s ease, transform .15s ease;
}

.lvs-swatch.is-selected {
	outline: 3px solid var(--lvs-mango);
	outline-offset: 1px;
	transform: scale(1.05);
}

.lvs-swatch.is-light-color,
.lvs-swatch[aria-label*="blanco" i],
.lvs-swatch[aria-label*="white" i],
.lvs-swatch[aria-label*="marfil" i],
.lvs-swatch[aria-label*="ivory" i],
.lvs-swatch[data-value*="blanco" i],
.lvs-swatch[data-value*="white" i] {
	border: 2px solid #6b7280;
	outline: none;
}

.lvs-swatch.is-light-color.is-selected,
.lvs-swatch[aria-label*="blanco" i].is-selected,
.lvs-swatch[aria-label*="white" i].is-selected,
.lvs-swatch[aria-label*="marfil" i].is-selected,
.lvs-swatch[aria-label*="ivory" i].is-selected,
.lvs-swatch[data-value*="blanco" i].is-selected,
.lvs-swatch[data-value*="white" i].is-selected {
	border: 2px solid #6b7280;
	outline: none;
}

/* -- Panel de compra -- */

.lvs-buy {
	position: relative;
	min-width: 0;
	padding-top: 4px;
}

.lvs-buy__botanical {
	position: absolute;
	top: -2px;
	right: -6px;
	width: 175px;
	height: 300px;
	pointer-events: none;
}

.lvs-buy__leaf-deco {
	position: absolute;
	color: var(--lvs-leaf);
}

.lvs-buy__leaf-deco--large {
	top: -12px;
	right: -5px;
	width: 178px;
	height: 158px;
	opacity: .52;
}

.lvs-buy__leaf-deco--small {
	top: 278px;
	right: -39px;
	width: 74px;
	height: 132px;
	opacity: .26;
}

.lvs-buy__leaf-caption {
	position: absolute;
	top: 100px;
	right: 8px;
	width: 118px;
	margin: 0;
	text-align: center;
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.05;
	color: var(--lvs-navy);
	opacity: .9;
	transform: rotate(-7deg);
}

.lvs-buy__leaf-rule {
	position: absolute;
	top: 176px;
	right: 35px;
	width: 62px;
	height: 1px;
	background: var(--lvs-navy);
	opacity: .3;
}

.lvs-buy__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--lvs-coral);
	margin: 0 0 8px;
}

.lvs-buy__name {
	font-family: 'Oswald', 'Archivo Narrow', sans-serif;
	max-width: 74%;
	margin: 0 0 8px;
	line-height: .96;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.lvs-buy__name-strong {
	display: block;
	font-weight: 700;
	font-size: clamp(38px, 4.2vw, 64px);
	color: var(--lvs-plum);
}

.lvs-buy__name-light {
	display: block;
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 52px);
	color: var(--lvs-plum);
	opacity: .85;
}

.lvs-buy__price {
	margin: 0 0 6px;
	font-size: clamp(32px, 3.2vw, 50px);
	font-weight: 700;
	color: var(--lvs-coral);
	font-variant-numeric: tabular-nums;
}

.lvs-buy__price-currency {
	display: inline-block;
	vertical-align: baseline;
	font-size: 20px;
	font-weight: 700;
	margin-left: 4px;
}

.lvs-buy__price-notice {
	background: var(--lvs-mango);
	color: var(--lvs-ink);
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 3px;
	margin: 0 0 12px;
	max-width: max-content;
}

.lvs-buy__tagline {
	color: var(--lvs-muted);
	font-size: 14px;
	margin: 0 0 12px;
	max-width: 42ch;
}

.lvs-buy__details {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid rgba(35, 35, 35, .14);
	background: rgba(255, 255, 255, .55);
}

.lvs-buy__details-title {
	margin: 0 0 9px;
	font-family: var(--lvs-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.lvs-buy__details-content,
.lvs-buy__details-content p,
.lvs-buy__details-content ul {
	margin-top: 0;
}

.lvs-buy__details-content {
	font-size: 14px;
	line-height: 1.55;
}

.lvs-buy__details-content > :last-child {
	margin-bottom: 0;
}

.lvs-buy__details-content ul {
	margin-bottom: 0;
	padding-left: 20px;
}

.lvs-buy__size-change {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.lvs-size-row {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0 0 10px;
}

.lvs-size-block__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--lvs-ink);
	margin: 0 0 8px;
}

.lvs-selector__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lvs-size-btn {
	min-width: 44px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--lvs-border);
	border-radius: 6px;
	background: var(--lvs-white);
	color: var(--lvs-ink);
	font-weight: 700;
	font-size: 13px;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.lvs-size-btn.is-selected {
	border-color: var(--lvs-cobalt);
	background: var(--lvs-cobalt);
	color: var(--lvs-white);
}

.lvs-size-btn.is-disabled {
	opacity: .35;
	text-decoration: line-through;
	cursor: not-allowed;
}

.lvs-fit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	margin-left: 0;
	border: 2px solid #090909;
	border-radius: 6px;
	background: var(--lvs-white);
	color: #090909;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: .055em;
	white-space: nowrap;
}

.lvs-fit-btn:hover {
	background: var(--lvs-navy);
	color: var(--lvs-white);
}

.lvs-fit-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
}

.lvs-size-chart-btn {
	min-height: 30px;
	padding: 0 12px;
	border: 0;
	border-bottom: 1px solid rgba(35, 35, 35, .42);
	background: transparent;
	color: rgba(35, 35, 35, .72);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: center;
}

.lvs-size-chart-btn:hover,
.lvs-size-chart-btn:focus-visible {
	color: #090909;
	border-bottom-color: #090909;
}

.lvs-size-chart-modal,
.lvs-size-chart-backdrop {
	position: fixed;
	inset: 0;
}

.lvs-size-chart-backdrop {
	z-index: 100040;
	background: rgba(9, 9, 9, .72);
	backdrop-filter: blur(3px);
}

.lvs-size-chart-modal {
	z-index: 100041;
	display: grid;
	place-items: center;
	padding: 22px;
	overflow: auto;
}

.lvs-size-chart-modal[hidden],
.lvs-size-chart-backdrop[hidden] {
	display: none !important;
}

.lvs-size-chart-modal__inner {
	position: relative;
	width: min(680px, 100%);
	margin: auto;
	background: #f8f3e8;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.lvs-size-chart-modal__inner img {
	display: block;
	width: 100%;
	height: auto;
}

.lvs-size-chart-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background: rgba(70, 12, 22, .94);
	color: #fff;
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
}

body.lvs-size-chart-is-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.lvs-size-chart-modal { padding: 10px; }
	.lvs-size-chart-modal__close { top: 8px; right: 8px; width: 38px; height: 38px; }
}

.lvs-buy__stock {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 10px;
}

.lvs-buy__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lvs-muted);
}

.lvs-buy__stock--instock .lvs-buy__stock-dot { background: var(--lvs-green); }
.lvs-buy__stock--instock { color: var(--lvs-green); }
.lvs-buy__stock--backorder .lvs-buy__stock-dot { background: var(--lvs-mango); }
.lvs-buy__stock--backorder { color: #96760f; }
.lvs-buy__stock--outofstock .lvs-buy__stock-dot,
.lvs-buy__stock--unavailable .lvs-buy__stock-dot { background: var(--lvs-coral); }
.lvs-buy__stock--outofstock,
.lvs-buy__stock--unavailable { color: var(--lvs-coral); }
.lvs-buy__stock--select .lvs-buy__stock-dot { background: var(--lvs-cobalt); }
.lvs-buy__stock--select { color: var(--lvs-cobalt); }

.lvs-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--lvs-border);
	border-radius: 6px;
	overflow: hidden;
	width: 118px;
	margin: 0 0 12px;
}

.lvs-qty__btn {
	flex: 0 0 34px;
	background: var(--lvs-white);
	color: var(--lvs-teal);
	font-size: 15px;
	font-weight: 700;
}

.lvs-qty__btn:hover {
	background: var(--lvs-cream);
}

.lvs-qty__input {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	border-left: 1px solid var(--lvs-border);
	border-right: 1px solid var(--lvs-border);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

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

.lvs-cta {
	width: 100%;
	height: 52px;
	border-radius: 26px;
	background: linear-gradient(180deg, #f47767, var(--lvs-coral));
	color: var(--lvs-white);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: filter .15s ease;
}

.lvs-cta:hover {
	filter: brightness(1.04);
}

.lvs-cta:disabled {
	background: var(--lvs-muted);
	cursor: not-allowed;
}

.lvs-cta__error {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--lvs-coral);
	font-weight: 700;
	text-align: center;
}

.lvs-buy__assurance {
	text-align: center;
	font-size: 12px;
	color: var(--lvs-muted);
	margin: 8px 0 10px;
	line-height: 1.4;
}

.lvs-buy__payment {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding-top: 16px;
	white-space: nowrap;
}

.lvs-buy__payment-line {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--lvs-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}
.lvs-payment-lock { font-size: 20px; }
.lvs-payment-separator { width: 1px; height: 34px; background: #9ba4b1; opacity: .7; }
.lvs-pay-logo { display: inline-flex; align-items: center; font-style: normal; line-height: .82; }
.lvs-pay-logo--openpay { color: #075ac8; font-size: 23px; letter-spacing: -.05em; }
.lvs-pay-logo--mercado { color: #075ac8; font-size: 13px; gap: 5px; }
.lvs-mercado-mark { display: grid; place-items: center; width: 35px; height: 25px; border: 2px solid #1685e5; border-radius: 50%; font-size: 16px; overflow: hidden; }
.lvs-pay-logo--visa { color: #123da3; font-size: 27px; font-style: italic; letter-spacing: -.08em; }
.lvs-pay-logo--mastercard { position: relative; width: 55px; height: 32px; }
.lvs-pay-logo--mastercard i { position: absolute; top: 2px; width: 29px; height: 29px; border-radius: 50%; background: #eb001b; }
.lvs-pay-logo--mastercard i:first-child { left: 3px; }
.lvs-pay-logo--mastercard i:last-child { right: 3px; background: #f79e1b; opacity: .92; }

/* -- 3 tarjetas fotograficas, superpuestas al borde inferior de la foto -- */

.lvs-detail-cards {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 55%);
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 88%;
	z-index: 2;
}

.lvs-detail-card {
	flex: 0 1 30%;
	min-width: 0;
	margin: 0;
	background: var(--lvs-white);
	border: 4px solid var(--lvs-white);
	border-radius: 8px;
	box-shadow: var(--lvs-shadow);
}

/* Correccion 2 (2026-09-15): boton nativo (foco/teclado/Enter/espacio
   gratis, sin ARIA adicional) que envuelve cada fotografia de las tres
   ventanas -- box-sizing:border-box ya esta activo en toda la landing,
   asi que el borde de "seleccionado" no cambia el tamano de la tarjeta
   ni desplaza al resto. */
/* button.lvs-detail-card__btn (no solo .lvs-detail-card__btn): iguala en
   especificidad a la regla base ".lvs-super button{border:0}" de arriba
   y gana por orden de aparicion -- si no, ese reset dejaba el borde de
   seleccion en 0px pese a fijar border:2px aqui. */
button.lvs-detail-card__btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
}

button.lvs-detail-card__btn:focus-visible {
	outline: 2px solid var(--lvs-cobalt);
	outline-offset: 2px;
}

button.lvs-detail-card__btn[aria-pressed="true"] {
	border-color: var(--lvs-mango);
}

.lvs-detail-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	object-position: center;
	display: block;
	background: var(--lvs-white);
	border-radius: 4px;
}

.lvs-detail-card figcaption {
	margin: 3px 0 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lvs-ink);
	text-align: center;
}

/* -- Barra inferior -- */

.lvs-bottombar {
	background: var(--lvs-plum);
	color: var(--lvs-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 64px);
	padding: 14px 24px;
	flex-wrap: wrap;
}

.lvs-bottombar__col {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lvs-cream);
	opacity: .92;
}

.lvs-bottombar__col strong {
	display: block;
	font-size: 13px;
	letter-spacing: .04em;
	margin-bottom: 2px;
}

.lvs-bottombar__divider {
	width: 1px;
	height: 34px;
	background: rgba(255, 247, 232, .3);
}

/* -- Barra fija movil -- */

.lvs-mobilebar {
	display: none;
}

/* -- Fidelidad de la composicion aprobada (1536 x 1024) -- */

@media (min-width: 1025px) {
	.lvs-topstrip { min-height: 40px; font-size: 14px; letter-spacing: .12em; }
	.lvs-header { min-height: 71px; padding: 0 clamp(20px, 4.3vw, 66px); }
	.lvs-header__brand { font-size: 29px; letter-spacing: .045em; }
	.lvs-header__brand { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
	.lvs-header__logo-img { height: 44px; }
	.lvs-header__tagline { letter-spacing: .38em; }
	.lvs-header__cart { font-size: 20px; }
	.lvs-hero {
		max-width: none;
		width: 100%;
		grid-template-columns: minmax(0, 58.3%) minmax(0, 41.7%);
		gap: 0;
		/* Ajuste 2026-09-15 (tercera pasada): -100px respecto del valor
		   anterior (312px) porque las dos pasadas previas dejaron un hueco
		   excesivo entre la foto y las tres ventanas. Se reduce el
		   padding reservado en la misma medida en que se subieron las
		   ventanas (.lvs-detail-cards { bottom } mas abajo) para que la
		   separacion frente a .lvs-bottombar ("HECHO EN MEXICO") no crezca
		   de mas. */
		padding: 0 20px 212px;
	}
	.lvs-media__frame { height: 677px; aspect-ratio: auto; border-radius: 16px; }
	.lvs-media__image { object-fit: contain; object-position: center center; }
	.lvs-media__video { object-fit: contain; object-position: center center; background: #000; }
	.lvs-media__quote { font-size: clamp(18px, 1.65vw, 25px); }
	.lvs-media__quote--top { top: 66px; left: 32px; }
	.lvs-media__quote--bottom { bottom: 104px; left: 30px; }
	.lvs-media__quote-squiggle { width: 120px; height: 55px; margin-bottom: 14px; }
	.lvs-media__play { top: 48%; left: 20%; }
	.lvs-media__play-icon { width: 104px; height: 104px; font-size: 34px; }
	.lvs-media__play-label { font-size: 18px; }
	.lvs-media__spin-badge { top: 132px; right: 132px; width: 116px; height: 116px; font-size: 12px; }
	.lvs-colorstrip { top: 74px; right: 14px; bottom: 40px; width: 78px; border-radius: 14px; }
	.lvs-colorstrip__hint { top: -56px; font-size: 12px; }
	.lvs-swatch { width: 50px; height: 50px; }
	.lvs-buy {
		min-height: 677px;
		padding: 24px 26px 18px 44px;
		background: rgba(255,255,255,.5);
		border-radius: 16px 16px 0 0;
	}
	.lvs-buy__label { font-size: 20px; }
	.lvs-buy__name-strong { font-size: clamp(54px, 4.2vw, 66px); }
	.lvs-buy__name-light { font-size: clamp(44px, 3.4vw, 54px); }
	.lvs-buy__price { font-size: clamp(42px, 3.2vw, 52px); }
	.lvs-buy__tagline { font-size: 20px; margin-bottom: 22px; }
	.lvs-size-block__label { font-size: 18px; }
	.lvs-size-row { flex-wrap: nowrap; align-items: flex-end; gap: 12px; }
	.lvs-selector__options { flex-wrap: nowrap; gap: 7px; }
	.lvs-size-btn { min-width: 58px; height: 54px; padding: 0 10px; font-size: 16px; }
	.lvs-fit-btn { width: 220px; height: 54px; padding: 0 18px; justify-content: center; font-size: 14px; }
	.lvs-buy__stock { font-size: 16px; }
	.lvs-qty { width: 172px; height: 48px; }
	.lvs-cta { height: 74px; border-radius: 18px; font-size: 23px; }
	.lvs-buy__assurance { font-size: 14px; }
	.lvs-buy__payment { gap: clamp(9px, 1vw, 16px); }
	/* Ajuste 2026-09-15 (tercera pasada): -100px (subir) respecto del valor
	   anterior (-292px), calibrado contra la captura real del usuario con
	   la linea azul de referencia -- las dos pasadas previas subieron el
	   padding de mas y dejaron un hueco excesivo entre la foto y las tres
	   ventanas. Se conserva object-fit:contain y el ancho/tamano de las
	   tarjetas sin cambios. */
	.lvs-detail-cards { bottom: -192px; transform: translateX(-50%); width: 90%; }
	.lvs-detail-card { border-width: 7px; border-radius: 14px; }
	.lvs-detail-card img { aspect-ratio: 1.8 / 1; object-fit: contain; object-position: center center; }
	.lvs-detail-card figcaption { font-size: 12px; }
	.lvs-bottombar { justify-content: space-between; gap: 24px; min-height: 124px; padding: 20px clamp(70px, 6.5vw, 100px); }
	.lvs-bottombar__col { font-size: 14px; }
	.lvs-bottombar__col strong { font-size: 15px; }
	.lvs-bottombar__divider { height: 70px; }
}

/* -- Responsive -- */

@media (max-width: 1024px) {
	.lvs-hero {
		grid-template-columns: 1fr;
		padding-bottom: clamp(20px, 4vw, 32px);
	}

	.lvs-media {
		margin-bottom: 130px;
	}

	.lvs-colorstrip {
		right: 10px;
	}
}

/* Ajuste 2026-09-15: tableta (781px-1024px) es el unico rango, aparte de
   escritorio arriba, donde las tres ventanas de verdad se superponen con
   la fotografia principal -- aqui la franja de colores todavia flota
   sobre la foto (position:absolute), a diferencia de movil (<=780px,
   regla siguiente) donde ya pasa a flujo normal y por eso ahi NO existe
   superposicion real (se confirmo midiendo coordenadas antes de tocar
   nada); por eso movil se deja intacto. Mismo mecanismo que en
   escritorio: se baja el conjunto de tarjetas y se reserva mas espacio
   antes del panel de compra (que en este rango queda apilado debajo,
   no al costado) para no encimarse con el. */
@media (min-width: 781px) and (max-width: 1024px) {
	.lvs-detail-cards {
		transform: translate(-50%, calc(55% + 103px));
	}

	.lvs-media {
		margin-bottom: 200px;
	}
}

/* Ajuste 2026-09-17: en tableta, .lvs-media__frame heredaba el
   aspect-ratio:3/2 (apaisado) de la regla base -- pensado para el marco
   de escritorio/movil, no para tableta -- lo que dejaba franjas vacias a
   los lados de la fotografia (las fotos reales de este producto son
   practicamente cuadradas, ~1254x1254). Se ajusta el marco a 1/1 (la
   proporcion real de las fotos) para que object-fit:contain la muestre
   completa sin bandas vacias, y se quita el transform:scale(0.9) de la
   regla base (calibrado para el marco apaisado de escritorio, no
   necesario aqui) -- unicos dos ajustes, nada mas de la imagen ni de
   ningun otro elemento se toca. */
@media (min-width: 768px) and (max-width: 1024px) {
	.lvs-media__frame {
		aspect-ratio: 1 / 1;
	}

	.lvs-media__image {
		transform: none;
	}

	/* Ajuste 2026-09-17 (segunda pasada, tablet): el tablero de colores
	   usaba top+bottom simultaneos (sin height propio), lo que lo
	   obligaba a ESTIRARSE para llenar todo el espacio entre esos dos
	   anclajes -- con el marco ahora cuadrado (mas alto que antes) ese
	   hueco crecio mucho, dejando una tarjeta blanca vacia debajo del
	   ultimo color. Se fija con un height real, calculado para terminar
	   justo 12px despues del boton de video (ver mas abajo): 22px top +
	   10px padding-top + 369px de los 8 colores + 14px de separacion +
	   84px del boton + 12px de padding inferior = 511px de fondo real,
	   511-22=489px de alto. */
	.lvs-colorstrip {
		bottom: auto;
		height: 489px;
	}

	/* Boton de video: se mueve visualmente al interior del tablero de
	   colores, debajo del ultimo color. Sigue siendo hijo de
	   .lvs-media__frame en el HTML (no se toco el marcado, solo su
	   posicion) -- por eso usa el MISMO right/width que .lvs-colorstrip
	   (right:10px; width:74px) para quedar centrado exactamente debajo de
	   el sin depender de calculos independientes, y se posiciona con
	   "top" (no "bottom") para anclarse desde el mismo origen que el
	   tablero, en vez del borde inferior del marco (que cambia de alto
	   segun el ancho real del viewport dentro de este rango). */
	.lvs-media__play {
		top: 415px;
		right: 10px;
		left: auto;
		bottom: auto;
		width: 74px;
		transform: none;
		/* El texto/color base es blanco (pensado para foto de fondo
		   oscura/variable); sobre el fondo blanco del tablero de colores
		   quedaba invisible -- se oscurece solo aqui para que "VER VIDEO"
		   sea legible. El circulo conserva su fondo/sombra propios. */
		color: var(--lvs-ink);
		/* .lvs-colorstrip tiene z-index:3 (fondo blanco opaco) y es
		   hermano de .lvs-media__frame (padre real del boton en el HTML)
		   -- sin esto, el fondo del tablero pintaba encima del boton y lo
		   ocultaba por completo pese a que sus coordenadas coincidian. */
		z-index: 4;
	}

	.lvs-media__play-label {
		text-shadow: none;
	}
}

/* -- Movil (<=767px): unica fuente de reglas visuales para este rango,
   reconstruida sobre la imagen de referencia aprobada (2026-09-17).
   Sustituye por completo los dos bloques anteriores (<=780px y <=560px,
   que se peleaban entre si con reglas repetidas) -- nada de esto toca
   tablet (781px-1024px) ni escritorio (>=1025px). */
@media (max-width: 767px) {
	.lvs-hero {
		padding: 16px 16px 24px;
		gap: 20px;
	}

	/* Encabezado compacto: solo logo + carrito en una fila. El eslogan
	   ("DISEÑO MEXICANO...") no aparece en la referencia movil -- se
	   oculta aqui (display:none, el texto sigue intacto en el HTML) sin
	   afectar tablet/escritorio, donde continua visible igual que
	   siempre. */
	.lvs-header {
		min-height: auto;
		padding: 14px 16px;
	}

	.lvs-header__tagline {
		display: none;
	}

	/* Imagen/video principal: retrato real a todo el ancho disponible --
	   causa raiz del aspecto de "tarjeta encogida": el marco heredaba el
	   aspect-ratio:3/2 (apaisado) pensado para escritorio/tablet, que
	   comprimia una foto vertical dentro de una caja mucho mas ancha que
	   alta. */
	.lvs-media__frame {
		aspect-ratio: 3 / 4;
		border-radius: 12px;
	}

	/* El scale(0.9) de la regla base se calibro para el marco apaisado de
	   escritorio (evitar que se recortara la parte baja de la prenda);
	   con el marco retrato de movil esa causa no existe y solo encogia
	   la foto de mas. */
	.lvs-media__image {
		transform: none;
	}

	.lvs-media__quote {
		max-width: 58%;
		font-size: 13px;
		line-height: 1.2;
	}

	.lvs-media__quote--top {
		top: 16px;
		left: 16px;
	}

	.lvs-media__quote--bottom {
		bottom: 20px;
		left: 16px;
	}

	.lvs-media__quote-squiggle {
		width: 48px;
		height: 22px;
		margin-bottom: 6px;
	}

	/* Boton de video: esquina inferior derecha del marco, ~16px de los
	   bordes derecho e inferior -- zona libre de fondo, nunca sobre la
	   prenda ni sobre "Raices que visten hoy" (que queda a la izquierda).
	   Se anula el transform:translate(-50%,-50%) de la regla base (pensado
	   para centrar el boton sobre un punto top/left) para que right/bottom
	   ubiquen la esquina del boton directamente, sin desplazamientos. */
	.lvs-media__play {
		top: auto;
		left: auto;
		right: 16px;
		bottom: 16px;
		transform: none;
	}

	.lvs-media__play-icon {
		width: 52px;
		height: 52px;
		font-size: 18px;
	}

	.lvs-media__spin-badge {
		top: 14px;
		right: 14px;
		width: 60px;
		height: 60px;
		font-size: 8px;
	}

	/* Paleta de color: pasa a flujo normal (ya no flota superpuesta sobre
	   la foto), sin tarjeta propia -- "Cambia color e imagen" oculto, sin
	   fondo/sombra/relleno -- inmediatamente debajo de la imagen. Los 8
	   colores usan flex-basis igual (nunca un ancho fijo en px) para
	   garantizar una sola fila sin salto ni scroll tanto en 390px como en
	   360px. */
	.lvs-colorstrip {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		margin-top: 14px;
	}

	.lvs-colorstrip__hint {
		display: none;
	}

	.lvs-colorstrip__list {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 6px;
		width: 100%;
		max-height: none;
		overflow: visible;
	}

	.lvs-swatch {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Tres miniaturas: flujo normal (ya no superpuestas con position:
	   absolute/transform), inmediatamente debajo de la paleta, 3 columnas
	   iguales en una sola fila via CSS grid -- se adapta sola a 390px y
	   360px sin necesitar otro punto de quiebre. */
	.lvs-detail-cards {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		transform: none;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		gap: 8px;
		margin-top: 14px;
	}

	.lvs-detail-card img {
		aspect-ratio: 1 / 1;
	}

	.lvs-detail-card figcaption {
		font-size: 9px;
	}

	/* Elimina el hueco vacio: la causa real era este margin-bottom fijo
	   de 130px (heredado de la regla <=1024px), reservado para cuando
	   las miniaturas aun flotaban superpuestas sobre el borde inferior de
	   la foto. Con las miniaturas ya en flujo normal (arriba), .lvs-media
	   no necesita reservar ningun espacio extra -- el "gap" del grid de
	   .lvs-hero ya separa limpiamente el bloque de medios del panel de
	   compra, que ahora empieza justo despues del contenido real. */
	.lvs-media {
		margin-bottom: 0;
	}

	/* Decoracion de hojas superpuesta al panel de compra: no aparece en
	   la referencia movil y, a este ancho, su caja de 175px se monta
	   sobre el titulo/precio -- puramente decorativa (aria-hidden), se
	   oculta solo aqui. */
	.lvs-buy__botanical {
		display: none;
	}

	.lvs-buy__name-strong {
		font-size: 30px;
	}

	.lvs-buy__name-light {
		font-size: 22px;
	}

	/* La fila de metodos de pago usa white-space:nowrap en la regla base
	   (pensada para el ancho de escritorio/tablet) -- a 390px/360px esa
	   fila es mas ancha que el viewport y, como el body tiene
	   overflow-x:hidden, se recortaba por ambos lados (se veia
	   "Openpay"/"mercado pago" pero no Visa/Mastercard, y "Pago 100%
	   protegido" perdia la primera palabra). Se permite el salto de
	   linea solo aqui. */
	.lvs-buy__payment {
		flex-wrap: wrap;
		white-space: normal;
		row-gap: 10px;
	}

	.lvs-bottombar {
		flex-direction: column;
		gap: 16px;
		text-align: center;
		padding-bottom: 76px;
	}

	.lvs-bottombar__col {
		flex-direction: column;
		gap: 6px;
	}

	.lvs-bottombar__divider {
		display: none;
	}

	/* Barra fija inferior: existe desde la carga pero permanece invisible
	   (opacity/pointer-events) hasta que landing.js le agregue la clase
	   "is-visible" -- solo ocurre cuando el boton principal #lvs-cta ya
	   salio por arriba del viewport (ver landing.js, IntersectionObserver
	   sobre #lvs-cta). Nunca tapa la ficha al cargar la pagina. */
	.lvs-mobilebar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--lvs-white);
		border-top: 1px solid var(--lvs-border);
		box-shadow: 0 -6px 20px rgba(20, 37, 58, .12);
		opacity: 0;
		pointer-events: none;
		transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease;
	}

	.lvs-mobilebar.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.lvs-mobilebar__price {
		font-weight: 700;
		font-size: 16px;
		color: var(--lvs-ink);
		white-space: nowrap;
	}

	.lvs-mobilebar .lvs-cta {
		height: 46px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lvs-super * {
		transition: none !important;
	}
}