@layer reset, base, components, utilities, site, states;

@layer components {
	/* Sistema visual común del ecommerce. La identidad de cada tienda se define en theme.css. */

	body > main {
		background:
			radial-gradient(
				circle at 10% 0,
				color-mix(in srgb, var(--brand-primary) 8%, transparent),
				transparent 28rem
			),
			var(--surface-soft);
	}

	/* Confirmación reforzada para acciones sensibles */
	.confirmacion-sensible {
		width: min(31rem, calc(100vw - 2rem));
		max-height: calc(100dvh - 2rem);
		margin: auto;
		padding: 0;
		overflow: hidden;
		border: 1px solid rgb(20 61 50 / 12%);
		border-radius: var(--radius-lg);
		background: var(--surface);
		color: var(--text-primary);
		box-shadow: 0 1.8rem 5rem rgb(10 34 27 / 28%);
	}
	.confirmacion-sensible::backdrop {
		background: rgb(9 25 20 / 58%);
		backdrop-filter: blur(0.3rem);
	}
	.confirmacion-sensible-contenido {
		display: flex;
		overflow-y: auto;
		flex-direction: column;
		gap: 1.15rem;
		max-height: calc(100dvh - 2rem);
		padding: clamp(1.35rem, 4vw, 2rem);
	}
	.confirmacion-sensible-cabecera {
		display: grid;
		align-items: center;
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 0.9rem;
	}
	.confirmacion-sensible-cabecera h2 {
		margin: 0;
		font-size: clamp(1.15rem, 3vw, 1.4rem);
		line-height: 1.25;
	}
	.confirmacion-sensible-icono {
		display: grid;
		width: 3rem;
		height: 3rem;
		place-items: center;
		border-radius: 1rem;
		background: var(--color1-4);
		font-size: 1.25rem;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 24%, transparent);
	}
	.confirmacion-sensible-peligrosa .confirmacion-sensible-icono {
		background: color-mix(in srgb, var(--danger) 11%, var(--surface));
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent);
	}
	.confirmacion-sensible-mensaje {
		margin: 0;
		color: var(--text-secondary);
		font-size: 0.94rem;
		line-height: 1.6;
	}
	.confirmacion-sensible-campo {
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
	}
	.confirmacion-sensible-etiqueta {
		display: flex;
		align-items: center;
		gap: 0.45rem;
	}
	.confirmacion-sensible-etiqueta label {
		font-size: 0.85rem;
		font-weight: 700;
	}
	.confirmacion-sensible-campo input {
		width: 100%;
		min-height: 3rem;
		padding: 0.72rem 0.85rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
		color: var(--text-primary);
		font-size: 1rem;
		box-sizing: border-box;
		transition:
			border-color 0.16s ease,
			box-shadow 0.16s ease,
			background 0.16s ease;
	}
	.confirmacion-sensible-campo input:hover {
		border-color: color-mix(in srgb, var(--brand-secondary) 36%, var(--border-soft));
		background: var(--surface);
	}
	.confirmacion-sensible-campo input:focus {
		border-color: var(--brand-primary);
		background: var(--surface);
		box-shadow: 0 0 0 0.22rem var(--focus-ring);
	}
	.confirmacion-sensible-privacidad {
		margin: -0.25rem 0 0;
		color: var(--text-secondary);
		font-size: 0.76rem;
		line-height: 1.5;
	}
	.confirmacion-sensible-acciones {
		display: flex;
		justify-content: flex-end;
		gap: 0.7rem;
		margin-top: 0.15rem;
	}
	.confirmacion-sensible-acciones button {
		min-height: 2.75rem;
		padding: 0.68rem 1rem;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		font-weight: 700;
		cursor: pointer;
		transition:
			transform 0.14s ease,
			box-shadow 0.14s ease,
			background 0.14s ease;
	}
	.confirmacion-sensible-acciones button:hover {
		transform: translateY(-1px);
	}
	.confirmacion-sensible-cancelar {
		border-color: var(--border-soft);
		background: var(--surface);
		color: var(--text-secondary);
	}
	.confirmacion-sensible-confirmar {
		background: var(--brand-secondary);
		color: var(--text-inverse);
		box-shadow: 0 0.35rem 0.9rem rgb(20 61 50 / 18%);
	}
	.confirmacion-sensible-peligrosa .confirmacion-sensible-confirmar {
		background: var(--danger);
		color: var(--danger-contrast);
		box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--danger) 28%, transparent);
	}

	@media (width <= 36rem) {
		.confirmacion-sensible {
			width: calc(100vw - 1rem);
			max-height: calc(100dvh - 1rem);
		}
		.confirmacion-sensible-contenido {
			max-height: calc(100dvh - 1rem);
			padding: 1.25rem;
		}
		.confirmacion-sensible-acciones {
			align-items: stretch;
			flex-direction: column-reverse;
		}
		.confirmacion-sensible-acciones button {
			width: 100%;
		}
	}

	/* Estructura */
	.site-shell {
		width: min(100%, var(--content-width));
		margin-inline: auto;
		padding-inline: clamp(1rem, 3vw, 3rem);
	}
	.form-client,
	.form-client-r {
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		padding: clamp(1.25rem, 3vw, 2.5rem);
	}
	.secure-site {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		gap: 0.65rem;
		margin: 1.75rem 0 0;
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
		color: #61756f;
		text-align: left;
	}
	.secure-site > svg {
		width: 1.1rem;
		flex: 0 0 1.1rem;
		color: #159b70;
	}
	.secure-site > p {
		margin: 0;
		line-height: 1.4;
	}
	.secure-site strong,
	.secure-site span {
		display: block;
	}
	.secure-site strong {
		color: #294c43;
		font-size: 0.76rem;
	}
	.secure-site span {
		font-size: 0.68rem;
	}

	/* Checkout */
	.checkout-body > .checkout-page {
		display: block;
		min-height: 70dvh;
		padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 3vw, 3rem) clamp(3rem, 7vw, 6rem);
		background:
			radial-gradient(
				circle at 8% 4%,
				color-mix(in srgb, var(--brand-primary) 12%, transparent),
				transparent 25rem
			),
			radial-gradient(
				circle at 92% 18%,
				color-mix(in srgb, var(--brand-secondary) 7%, transparent),
				transparent 28rem
			),
			var(--surface-soft);
	}
	.checkout-shell {
		width: min(100%, 76rem);
		margin-inline: auto;
	}
	.checkout-intro {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 1.75rem;
	}
	.checkout-intro h1,
	.checkout-summary__heading h2,
	.checkout-card__heading h2,
	.checkout-empty h1 {
		margin: 0;
		color: var(--text-primary);
		letter-spacing: -0.025em;
	}
	.checkout-intro h1 {
		font-size: clamp(2rem, 4vw, 3.25rem);
		line-height: 1.08;
	}
	.checkout-intro > div > p:last-child {
		max-width: 39rem;
		margin: 0.6rem 0 0;
		color: var(--text-secondary);
		font-size: 0.98rem;
		line-height: 1.65;
	}
	.checkout-eyebrow {
		margin: 0 0 0.35rem;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}
	.checkout-back,
	.checkout-action-secondary {
		color: var(--brand-text);
		font-size: 0.82rem;
		font-weight: 750;
		text-decoration: none;
	}
	.checkout-back {
		flex: 0 0 auto;
		padding: 0.65rem 0;
	}
	.checkout-back::before {
		margin-right: 0.4rem;
		content: '←';
	}
	.checkout-back:hover,
	.checkout-action-secondary:hover {
		text-decoration: underline;
		text-underline-offset: 0.22rem;
	}
	.checkout-alert {
		margin: 0 0 1rem;
		padding: 0.85rem 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface);
		font-size: 0.86rem;
		line-height: 1.55;
	}
	.checkout-alert--success {
		border-color: color-mix(in srgb, var(--success) 25%, var(--border-soft));
		background: color-mix(in srgb, var(--success) 7%, var(--surface));
		color: var(--success);
	}
	.checkout-alert--demo {
		border-color: color-mix(in srgb, var(--warning) 28%, var(--border-soft));
		background: color-mix(in srgb, var(--warning-surface) 17%, var(--surface));
		color: var(--warning);
	}
	.checkout-shell .transaction-steps {
		display: flex;
		width: min(100%, 46rem);
		margin: 0 auto 2rem;
		padding: 0;
		list-style: none;
	}
	.checkout-shell .transaction-steps .step {
		position: relative;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		gap: 0.45rem;
		width: auto;
		color: var(--text-secondary);
		font-weight: 650;
	}
	.checkout-shell .transaction-steps .step:not(:last-child)::after {
		position: absolute;
		top: 1.1rem;
		left: calc(50% + 1.4rem);
		z-index: 0;
		width: calc(100% - 2.8rem);
		height: 0.12rem;
		border-radius: 1rem;
		background: var(--border-soft);
		content: '';
	}
	.checkout-shell .transaction-steps .step:has(~ .activetab)::after,
	.checkout-shell .transaction-steps .finish::after {
		background: var(--brand-primary);
	}
	.checkout-shell .transaction-steps span {
		position: relative;
		z-index: 1;
		display: grid;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		place-items: center;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
		background: var(--surface);
		color: var(--text-secondary);
		font-size: 0.78rem;
		font-weight: 800;
		box-shadow: 0 0.15rem 0.5rem rgb(20 61 50 / 7%);
	}
	.checkout-shell .transaction-steps small {
		font-size: 0.72rem;
	}
	.checkout-shell .transaction-steps .activetab {
		color: var(--text-primary);
	}
	.checkout-shell .transaction-steps .activetab span {
		border-color: var(--brand-secondary);
		background: var(--brand-secondary);
		color: var(--text-inverse);
		box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-secondary) 12%, transparent);
	}
	.checkout-shell .transaction-steps .finish span {
		border-color: var(--brand-primary);
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
		font-size: 0;
	}
	.checkout-shell .transaction-steps .finish span::after {
		font-size: 0.9rem;
		content: '✓';
	}
	.checkout-layout {
		display: grid;
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
		gap: clamp(1.25rem, 3vw, 2.5rem);
	}
	.checkout-form,
	.checkout-card {
		min-width: 0;
	}
	.checkout-card {
		gap: 1.1rem;
		padding: clamp(1.25rem, 3vw, 2.25rem);
		border: 1px solid color-mix(in srgb, var(--border-soft) 85%, transparent);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.checkout-card__heading {
		display: flex;
		align-items: center;
		gap: 0.9rem;
		padding-bottom: 1.1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.checkout-card__heading > span {
		display: grid;
		flex: 0 0 2.8rem;
		width: 2.8rem;
		height: 2.8rem;
		place-items: center;
		border-radius: 0.9rem;
		background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface));
		color: var(--brand-primary-contrast);
		font-size: 0.72rem;
		font-weight: 850;
		letter-spacing: 0.08em;
	}
	.checkout-card__heading p {
		margin: 0 0 0.16rem;
		color: var(--text-secondary);
		font-size: 0.7rem;
		font-weight: 750;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.checkout-card__heading h2 {
		font-size: clamp(1.35rem, 2.5vw, 1.75rem);
		line-height: 1.2;
	}
	.checkout-card__description {
		margin: -0.35rem 0 0;
		color: var(--text-secondary);
		font-size: 0.9rem;
		line-height: 1.55;
	}
	.checkout-card :is(.input-square, .select-square) :is(input, select),
	.checkout-card .direccion-buscador > input,
	.checkout-card .direccion-complemento > input,
	.checkout-comment textarea {
		min-height: 3.25rem;
		border-color: var(--border-soft);
		background: var(--surface-soft);
		color: var(--text-primary);
		transition:
			border-color 0.16s ease,
			box-shadow 0.16s ease,
			background 0.16s ease;
	}
	.checkout-card :is(.input-square, .select-square) :is(input, select):hover,
	.checkout-card .direccion-buscador > input:hover,
	.checkout-card .direccion-complemento > input:hover,
	.checkout-comment textarea:hover {
		border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--border-soft));
		background: var(--surface);
	}
	.checkout-card :is(.input-square, .select-square) :is(input, select):focus,
	.checkout-card .direccion-buscador > input:focus,
	.checkout-card .direccion-complemento > input:focus,
	.checkout-comment textarea:focus {
		border-color: var(--brand-secondary);
		background: var(--surface);
		box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--focus-ring) 16%, transparent);
	}
	.checkout-account-note {
		margin: 0;
		padding: 0.8rem 1rem;
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
		color: var(--text-secondary);
		font-size: 0.78rem;
		line-height: 1.5;
		text-align: center;
	}
	.checkout-section-title {
		margin: 0.5rem 0 0;
		color: var(--text-primary);
		font-size: 0.95rem;
	}
	.checkout-delivery-methods,
	.checkout-payment-methods {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.checkout-delivery-methods .btn-radio-1 + label {
		display: flex;
		min-width: 0;
		min-height: 5.25rem;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		cursor: pointer;
		transition:
			border-color 0.16s ease,
			box-shadow 0.16s ease,
			transform 0.16s ease;
	}
	.checkout-delivery-methods .btn-radio-1 + label:hover {
		border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--border-soft));
		transform: translateY(-0.1rem);
	}
	.checkout-delivery-methods .btn-radio-1:focus-visible + label {
		outline: 0.18rem solid var(--focus-ring);
		outline-offset: 0.15rem;
	}
	.checkout-delivery-methods .btn-radio-1:checked + label {
		border: 1px solid var(--brand-secondary);
		background: color-mix(in srgb, var(--brand-secondary) 6%, var(--surface));
		box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-secondary) 12%, transparent);
	}
	.checkout-delivery-methods label > span,
	.checkout-payment-option label > span {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
	}
	.checkout-delivery-methods label strong,
	.checkout-payment-option label strong {
		color: var(--text-primary);
		font-size: 0.84rem;
	}
	.checkout-delivery-methods label small,
	.checkout-payment-option label small {
		color: var(--text-secondary);
		font-size: 0.7rem;
		font-weight: 500;
		line-height: 1.4;
	}
	.checkout-delivery-methods label > :is(img, .icono-interfaz) {
		width: 1.55rem;
		height: 1.55rem;
		margin-left: 0.8rem;
		object-fit: contain;
		filter: opacity(0.72);
	}
	.checkout-payment-option {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 5.5rem;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		cursor: pointer;
		transition:
			border-color 0.16s ease,
			box-shadow 0.16s ease,
			transform 0.16s ease;
	}
	.checkout-payment-option:hover {
		border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--border-soft));
		transform: translateY(-0.1rem);
	}
	.checkout-payment-option:has(input[name='VIA_PAGO']:checked) {
		border-color: var(--brand-secondary);
		background: color-mix(in srgb, var(--brand-secondary) 6%, var(--surface));
		box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-secondary) 12%, transparent);
	}
	.checkout-payment-option--oneclick {
		align-items: stretch;
	}
	.checkout-payment-option--oneclick:has(input[name='VIA_PAGO']:checked) {
		grid-column: 1 / -1;
	}
	.checkout-oneclick-method {
		width: 100%;
		gap: 0.75rem;
	}
	.checkout-oneclick-details {
		width: 100%;
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
		cursor: default;
	}
	.checkout-payment-methods > .checkout-payment-option:only-child {
		grid-column: 1 / -1;
	}
	.checkout-payment-option input[type='radio'] {
		flex: 0 0 1.2rem;
		width: 1.2rem;
		height: 1.2rem;
		accent-color: var(--brand-secondary);
	}
	.checkout-payment-option label {
		flex: 1 1 auto;
		justify-content: space-between;
		gap: 0.75rem;
		min-width: 0;
	}
	.checkout-payment-option label :is(img, .icono-interfaz) {
		width: auto;
		max-width: 8.5rem;
		height: 2.7rem;
		object-fit: contain;
	}
	.checkout-card .shipping-options {
		gap: 0.65rem;
	}
	.checkout-card .opcionEnvio {
		min-height: 5.5rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		transition:
			border-color 0.16s ease,
			box-shadow 0.16s ease,
			transform 0.16s ease;
	}
	.checkout-card .opcionEnvio:hover {
		border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--border-soft));
		transform: translateY(-0.1rem);
	}
	.checkout-card .opcionEnvio-active {
		border-color: var(--brand-secondary);
		background: color-mix(in srgb, var(--brand-secondary) 5%, var(--surface));
		box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-secondary) 12%, transparent);
	}
	.checkout-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.7rem;
		margin-top: 0.75rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--border-soft);
	}
	.checkout-actions :is(.btn1-1, .btn1-2) {
		min-width: min(100%, 15rem);
		min-height: 3.15rem;
		border-radius: 0.8rem;
		box-shadow: 0 0.45rem 1rem rgb(20 61 50 / 14%);
		font-size: 0.9rem;
		transition:
			background 0.16s ease,
			box-shadow 0.16s ease,
			transform 0.16s ease;
	}
	.checkout-actions :is(.btn1-1, .btn1-2):not(:disabled):hover {
		box-shadow: 0 0.65rem 1.25rem rgb(20 61 50 / 19%);
		transform: translateY(-0.1rem);
	}
	.checkout-action-secondary {
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.checkout-review {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.8rem;
	}
	.checkout-review__section {
		min-width: 0;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface-soft);
	}
	.checkout-review__section h3 {
		margin: 0 0 0.65rem;
		color: var(--text-primary);
		font-size: 0.78rem;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}
	.checkout-review__section > p {
		margin: 0.2rem 0;
		color: var(--text-secondary);
		font-size: 0.76rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}
	.checkout-review__section > p b {
		color: var(--text-primary);
		font-weight: 700;
	}
	.checkout-transfer-data {
		margin-top: 0.8rem;
		padding: 0.8rem;
		border-left: 0.2rem solid var(--brand-primary);
		background: var(--surface);
		font-size: 0.75rem;
		line-height: 1.5;
	}
	.checkout-comment {
		margin-top: 0.35rem;
	}
	.checkout-comment label {
		position: static;
		display: block;
		margin-bottom: 0.4rem;
		color: var(--text-primary);
		font-size: 0.78rem;
		font-weight: 700;
	}
	.checkout-comment textarea {
		height: 5.5rem;
		padding: 0.8rem;
		border-style: solid;
		border-width: 1px;
		border-radius: var(--radius-sm);
	}
	.checkout-coupon {
		padding: 1rem;
		border: 1px dashed color-mix(in srgb, var(--brand-secondary) 30%, var(--border-soft));
		border-radius: var(--radius-md);
		background: color-mix(in srgb, var(--brand-secondary) 3%, var(--surface));
	}
	.checkout-coupon__heading {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		margin-bottom: 0.6rem;
	}
	.checkout-coupon__heading label {
		color: var(--text-primary);
		font-size: 0.78rem;
		font-weight: 750;
	}
	.checkout-coupon__control {
		display: flex;
	}
	.checkout-coupon__control input {
		min-width: 0;
		min-height: 2.9rem;
		padding: 0.65rem 0.8rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
		background: var(--surface);
	}
	.checkout-coupon__control button {
		flex: 0 0 auto;
		min-height: 2.9rem;
		padding: 0.65rem 1rem;
		border: 1px solid var(--brand-secondary);
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		background: var(--brand-secondary);
		color: var(--text-inverse);
		font-size: 0.78rem;
		font-weight: 750;
	}
	.checkout-coupon__control button:hover {
		background: var(--brand-secondary-hover);
	}
	.checkout-coupon__result {
		min-height: 1rem;
		margin: -0.45rem 0 0;
		color: var(--success);
		font-size: 0.72rem;
		line-height: 1.4;
	}
	.checkout-card .checkout-legal-acceptance {
		width: 100%;
		margin-top: 0.25rem;
		border-color: color-mix(in srgb, var(--success) 22%, var(--border-soft));
		background: color-mix(in srgb, var(--success) 5%, var(--surface));
	}
	.checkout-actions--final .btn1-1 {
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
	}
	.checkout-summary {
		position: sticky;
		top: 1.25rem;
		min-width: 0;
	}
	.checkout-summary__card {
		overflow: hidden;
		border: 1px solid color-mix(in srgb, var(--border-soft) 85%, transparent);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.checkout-summary__heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.25rem 1.25rem 1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.checkout-summary__heading h2 {
		font-size: 1.1rem;
	}
	.checkout-summary__heading a {
		padding: 0.2rem 0;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 750;
	}
	.checkout-summary__products {
		display: flex;
		max-height: 14rem;
		margin: 0;
		padding: 0.35rem 1.25rem;
		overflow: auto;
		flex-direction: column;
		list-style: none;
	}
	.checkout-summary__products li {
		display: grid;
		align-items: center;
		grid-template-columns: 3.2rem minmax(0, 1fr);
		gap: 0.75rem;
		padding: 0.75rem 0;
	}
	.checkout-summary__products li:not(:last-child) {
		border-bottom: 1px solid var(--border-soft);
	}
	.checkout-summary__products img {
		width: 3.2rem;
		height: 3.2rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.75rem;
		background: var(--surface-soft);
		object-fit: cover;
	}
	.checkout-summary__products div {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.18rem;
	}
	.checkout-summary__products strong {
		overflow: hidden;
		color: var(--text-primary);
		font-size: 0.78rem;
		line-height: 1.4;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.checkout-summary__products small {
		color: var(--text-secondary);
		font-size: 0.68rem;
	}
	.checkout-summary__totals {
		display: flex;
		padding: 1rem 1.25rem;
		border-top: 1px solid var(--border-soft);
		flex-direction: column;
		gap: 0.55rem;
	}
	.checkout-summary__totals p {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		margin: 0;
		color: var(--text-secondary);
		font-size: 0.76rem;
	}
	.checkout-summary__totals p strong {
		color: var(--text-primary);
		font-size: 0.8rem;
		white-space: nowrap;
	}
	.checkout-summary__totals .checkout-summary__subtotal {
		margin-top: 0.15rem;
		padding-top: 0.7rem;
		border-top: 1px solid var(--border-soft);
	}
	.checkout-summary__totals .checkout-summary__total {
		margin-top: 0.35rem;
		padding-top: 0.85rem;
		border-top: 1px solid var(--border-soft);
		color: var(--text-primary);
		font-size: 0.88rem;
		font-weight: 750;
	}
	.checkout-summary__totals .checkout-summary__total strong {
		font-size: 1.2rem;
	}
	.checkout-summary__trust {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		padding: 0.9rem 1.25rem;
		background: color-mix(in srgb, var(--success) 6%, var(--surface));
	}
	.checkout-summary__trust > span {
		display: grid;
		flex: 0 0 1.7rem;
		width: 1.7rem;
		height: 1.7rem;
		place-items: center;
		border-radius: 50%;
		background: var(--success);
		color: var(--text-inverse);
		font-size: 0.75rem;
		font-weight: 850;
	}
	.checkout-summary__trust p {
		display: flex;
		margin: 0;
		flex-direction: column;
		gap: 0.12rem;
	}
	.checkout-summary__trust strong {
		color: var(--text-primary);
		font-size: 0.7rem;
	}
	.checkout-summary__trust small {
		color: var(--text-secondary);
		font-size: 0.64rem;
		line-height: 1.35;
	}
	.checkout-empty {
		display: flex;
		width: min(100%, 34rem);
		margin: clamp(2rem, 8vw, 6rem) auto;
		padding: clamp(2rem, 6vw, 4rem);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-lg);
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.checkout-empty__icon {
		display: grid;
		width: 5.5rem;
		height: 5.5rem;
		margin-bottom: 1.25rem;
		place-items: center;
		border-radius: 1.8rem;
		background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface));
	}
	.checkout-empty__icon :is(img, .icono-interfaz) {
		width: 2.4rem;
		height: 2.4rem;
		object-fit: contain;
	}
	.checkout-empty h1 {
		font-size: clamp(1.7rem, 4vw, 2.25rem);
	}
	.checkout-empty > p:not(.checkout-eyebrow) {
		max-width: 25rem;
		margin: 0.75rem 0 1.5rem;
		color: var(--text-secondary);
		font-size: 0.9rem;
		line-height: 1.6;
	}
	.checkout-empty .btn1-2 {
		min-height: 3rem;
		padding: 0.8rem 1.4rem;
		border-radius: 0.8rem;
	}

	@media (width <= 62rem) {
		.checkout-layout {
			grid-template-columns: minmax(0, 1fr);
		}
		.checkout-summary {
			position: static;
			grid-row: 1;
		}
		.checkout-form {
			grid-row: 2;
		}
		.checkout-summary__products {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0 1rem;
		}
	}

	@media (width <= 42rem) {
		.checkout-body > .checkout-page {
			padding: 1.5rem 0.75rem 3rem;
		}
		.checkout-intro {
			align-items: flex-start;
			flex-direction: column;
			gap: 0.4rem;
			margin-bottom: 1.35rem;
		}
		.checkout-intro h1 {
			font-size: 2rem;
		}
		.checkout-back {
			padding-bottom: 0;
		}
		.checkout-shell .transaction-steps {
			margin-bottom: 1.25rem;
		}
		.checkout-shell .transaction-steps .step {
			gap: 0.35rem;
		}
		.checkout-shell .transaction-steps .step:not(:last-child)::after {
			top: 0.95rem;
			left: calc(50% + 1.15rem);
			width: calc(100% - 2.3rem);
		}
		.checkout-shell .transaction-steps span {
			width: 1.95rem;
			height: 1.95rem;
		}
		.checkout-shell .transaction-steps small {
			font-size: 0.61rem;
		}
		.checkout-card {
			padding: 1.1rem;
			border-radius: 1rem;
		}
		.checkout-card__heading {
			padding-bottom: 0.9rem;
		}
		.checkout-card__heading > span {
			flex-basis: 2.4rem;
			width: 2.4rem;
			height: 2.4rem;
		}
		.checkout-delivery-methods,
		.checkout-payment-methods,
		.checkout-review {
			grid-template-columns: minmax(0, 1fr);
		}
		.checkout-summary__products {
			display: flex;
			max-height: 10rem;
		}
		.checkout-summary__heading,
		.checkout-summary__totals,
		.checkout-summary__trust {
			padding-inline: 1rem;
		}
		.checkout-coupon__control button {
			padding-inline: 0.8rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.checkout-card :is(input, select, textarea),
		.checkout-delivery-methods .btn-radio-1 + label,
		.checkout-payment-option,
		.checkout-card .opcionEnvio,
		.checkout-actions :is(.btn1-1, .btn1-2) {
			transition: none;
		}
	}

	/* Cabecera */
	.site-header {
		position: relative;
		z-index: 40;
		flex: 0 0 auto;
		gap: 1rem;
		width: 100%;
		min-height: var(--header-height);
		height: auto;
		padding: 0.75rem clamp(1rem, 3vw, 3rem);
		border-bottom: 1px solid var(--border-soft);
		background: rgb(255 255 255 / 96%);
		box-shadow: 0 0.35rem 1.5rem rgb(21 61 49 / 8%);
		backdrop-filter: blur(1rem);
	}
	.site-header.header-fixed {
		position: relative;
		background: rgb(255 255 255 / 96%);
	}
	.site-header.header-sticky {
		position: sticky;
		top: 0;
		left: 0;
	}
	.site-header__main,
	.site-header__brand,
	.site-header__actions {
		display: flex;
		align-items: center;
		min-width: 0;
	}
	.site-header__main {
		flex: 1 1 auto;
		gap: clamp(0.45rem, 0.8vw, 0.75rem);
	}
	.site-header__brand {
		flex: 0 0 auto;
		gap: 0.5rem;
	}
	.site-header__actions {
		flex: 0 0 auto;
		margin-left: auto;
	}
	.site-header .site-header__brand {
		display: inline-flex;
		align-items: center;
		margin: 0 clamp(0.1rem, 0.35vw, 0.35rem);
	}
	.site-header .site-header__brand img {
		display: block;
		width: clamp(7rem, 10vw, 10rem);
		max-height: 4rem;
		object-fit: contain;
	}
	.site-header__category-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		min-height: 3rem;
		padding: 0.45rem 0.85rem 0.45rem 0.5rem;
		border: 1px solid color-mix(in srgb, var(--brand-primary) 75%, var(--border-soft));
		border-radius: 0.8rem;
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
		box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--brand-primary) 22%, transparent);
		font-weight: 800;
		white-space: nowrap;
	}
	.site-header__category-trigger:hover,
	.site-header__category-trigger:focus-visible,
	.site-header__category-trigger.is-active {
		border-color: var(--brand-primary-hover);
		background: var(--brand-primary-hover);
		color: var(--brand-primary-contrast);
		box-shadow: 0 0.55rem 1.35rem color-mix(in srgb, var(--brand-primary) 30%, transparent);
		transform: translateY(-0.08rem);
	}
	.site-header__category-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: 0.55rem;
		background: color-mix(in srgb, var(--brand-primary-contrast) 10%, transparent);
	}
	.site-header__category-icon :is(img, .icono-interfaz) {
		width: 1.15rem;
		filter: brightness(0) saturate(100%);
	}
	.site-header__category-trigger--icon-only {
		width: 3rem;
		min-width: 3rem;
		padding: 0.45rem;
	}
	.site-header__category-trigger--icon-only .site-header__category-label,
	.site-header__category-trigger--icon-only .arrow-dropdown {
		display: none;
	}
	.arrow-dropdown {
		width: 0.5rem;
		height: 0.5rem;
		border-top: 0.12rem solid currentcolor;
		border-right: 0.12rem solid currentcolor;
		border-bottom: 0;
		border-left: 0;
		transform: rotate(135deg);
		transition: transform 0.2s ease;
	}
	.site-header__category-trigger[aria-expanded='true'] .arrow-dropdown {
		transform: rotate(315deg) translate(-0.08rem, 0.08rem);
	}
	.site-header .site-header__location {
		display: inline-flex;
		align-items: center;
		flex: 0 1 14rem;
		gap: 0.55rem;
		max-width: 14rem;
		min-width: 9rem;
		min-height: 3rem;
		margin: 0;
		padding: 0.42rem 0.65rem;
		overflow: hidden;
		border: 1px solid transparent;
		border-left-color: var(--border-soft);
		border-radius: 0 0.8rem 0.8rem 0;
		background: transparent;
		box-shadow: none;
		text-align: left;
	}
	.site-header .site-header__location:hover,
	.site-header .site-header__location:focus-visible {
		border-color: color-mix(in srgb, var(--brand-primary) 65%, var(--border-soft));
		background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
	}
	.site-header__location-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 0.5rem;
		background: var(--surface-soft);
	}
	.site-header__location-icon :is(img, .icono-interfaz) {
		width: 1.05rem;
		height: 1.05rem;
		object-fit: contain;
	}
	.site-header__location-copy {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		min-width: 0;
		line-height: 1.12;
	}
	.site-header__location-copy strong,
	.site-header__location-copy small {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.site-header__location-copy strong {
		color: var(--text-primary);
		font-size: 0.73rem;
		font-weight: 800;
	}
	.site-header__location-copy small {
		margin-top: 0.15rem;
		color: var(--text-secondary);
		font-size: 0.64rem;
		font-weight: 600;
	}
	.site-search--desktop {
		display: flex;
		flex: 1 1 24rem;
		align-items: stretch;
		width: auto;
		min-width: 12rem;
		max-width: none;
		height: 3.1rem;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: 0.85rem;
		background: var(--surface);
		box-shadow: 0 0.2rem 0.8rem rgb(21 61 49 / 4%);
	}
	.site-search--desktop:focus-within {
		border-color: var(--brand-secondary);
		box-shadow: 0 0 0 0.2rem var(--focus-ring);
	}
	.site-search--desktop > div {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 0.25rem 0.75rem;
		border-right: 1px solid var(--border-soft);
	}
	.site-search--desktop label {
		color: var(--text-secondary);
		font-size: 0.62rem;
		font-weight: 650;
		line-height: 1;
	}
	.site-search--desktop select {
		min-height: 1.25rem;
		padding: 0 1.25rem 0 0;
		background-color: transparent;
		font-size: 0.72rem;
		font-weight: 750;
	}
	.site-search--desktop input {
		flex: 1;
		min-width: 7rem;
		padding: 0.7rem 1rem;
		background: transparent;
	}
	.site-search--desktop button {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 3rem;
		padding-inline: 0.9rem;
		background: var(--brand-secondary);
	}
	.site-search--desktop button:hover {
		background: color-mix(in srgb, var(--brand-secondary) 88%, black);
	}
	.site-search--desktop button :is(img, .icono-interfaz) {
		width: 1.15rem;
	}
	.site-header__express nav {
		gap: 0.35rem;
		margin: 0;
	}
	.site-header__action {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		min-height: 3rem;
		padding: 0.45rem 0.65rem;
		border: 1px solid transparent;
		border-radius: 0.8rem;
		background: transparent;
		color: var(--text-primary);
		text-align: left;
	}
	.site-header__action:hover,
	.site-header__action:focus-visible,
	.site-header__action[aria-expanded='true'] {
		border-color: var(--border-soft);
		background: var(--surface-soft);
		transform: translateY(-0.08rem);
	}
	.site-header__action > :is(img, .icono-interfaz) {
		width: 1.4rem;
		height: 1.4rem;
		object-fit: contain;
	}
	.site-header__action > span:not(.site-header__cart-count) {
		display: flex;
		justify-content: center;
		flex-direction: column;
		line-height: 1.05;
		white-space: nowrap;
	}
	.site-header__action small {
		color: var(--text-secondary);
		font-size: 0.68rem;
		font-weight: 600;
	}
	.site-header__action strong {
		font-size: 0.82rem;
		font-weight: 800;
	}
	.site-header__action--more > :is(img, .icono-interfaz) {
		width: 1.15rem;
	}
	.site-header__cart-count > span {
		position: absolute;
		top: -0.18rem;
		right: -0.18rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.15rem;
		height: 1.15rem;
		padding: 0;
		border: 0.12rem solid var(--surface);
		border-radius: 50%;
		background: var(--brand-secondary);
		box-shadow: 0 0.12rem 0.35rem rgb(0 0 0 / 18%);
		color: var(--text-inverse);
		font-size: 0.62rem;
		font-weight: 800;
		line-height: 1;
	}
	.site-header__search-trigger {
		display: none;
		align-items: center;
		justify-content: center;
		width: 3rem;
		min-width: 3rem;
		height: 3rem;
		padding: 0.7rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.8rem;
		background: var(--surface);
	}
	.site-header__search-trigger:hover {
		background: var(--surface-soft);
	}
	.category-menu {
		position: fixed;
		top: var(--header-height);
		right: clamp(1rem, 3vw, 3rem);
		left: clamp(1rem, 3vw, 3rem);
		z-index: 38;
		flex-direction: column;
		width: auto;
		max-height: calc(100dvh - var(--header-height) - 1rem);
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-top: 0;
		border-radius: 0 0 1.25rem 1.25rem;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.category-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.25rem 1.5rem;
		border-bottom: 1px solid var(--border-soft);
		background: linear-gradient(
			120deg,
			color-mix(in srgb, var(--brand-primary) 10%, var(--surface)),
			var(--surface) 55%
		);
	}
	.category-menu__header p,
	.header-more-menu__heading p {
		margin-bottom: 0.15rem;
		color: var(--brand-secondary);
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.category-menu__header h2,
	.header-more-menu__heading h2 {
		font-size: clamp(1.25rem, 2vw, 1.65rem);
	}
	.category-menu__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		padding: 0.7rem;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
		background: var(--surface);
	}
	.category-menu__close:hover {
		border-color: var(--brand-primary);
		background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
		transform: rotate(4deg);
	}
	.category-menu__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
		min-height: 0;
		overflow: hidden;
	}
	.category-menu__catalogue {
		min-width: 0;
		padding: 1.25rem 1.5rem 1.5rem;
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
	.category-menu__section-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1rem;
	}
	.category-menu__section-heading h3 {
		font-size: 1rem;
	}
	.category-menu__section-heading > a {
		color: var(--brand-secondary);
		font-size: 0.82rem;
		font-weight: 800;
		white-space: nowrap;
	}
	.category-menu__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.category-menu__group {
		min-width: 0;
		padding: 0.85rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.9rem;
		background: var(--surface);
	}
	.category-menu__group:hover {
		border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border-soft));
		box-shadow: var(--shadow-sm);
	}
	.category-menu__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		margin: -0.2rem -0.2rem 0.45rem;
		padding: 0.45rem;
		border-radius: 0.55rem;
		color: var(--text-primary);
		font-weight: 800;
	}
	.category-menu__title:hover {
		background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
		color: var(--brand-secondary);
	}
	.category-menu__title-main,
	.category-menu__item > a {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		min-width: 0;
	}
	.category-menu__title-main :is(img, .icono-interfaz) {
		flex: 0 0 2rem;
		width: 2rem;
		height: 2rem;
		padding: 0.2rem;
		border-radius: 0.55rem;
		background: var(--surface-soft);
		object-fit: contain;
	}
	.category-menu__item-icon {
		flex: 0 0 1.25rem;
		width: 1.25rem;
		height: 1.25rem;
		object-fit: contain;
	}
	.category-menu__group ul {
		display: grid;
		gap: 0.15rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.category-menu__group li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.category-menu__group li > a {
		display: block;
		padding: 0.35rem 0.45rem;
		border-radius: 0.45rem;
		color: var(--text-secondary);
		font-size: 0.82rem;
		font-weight: 650;
	}
	.category-menu__group li > a:hover {
		background: var(--surface-soft);
		color: var(--brand-secondary);
	}
	.category-menu__group .category-menu__nested {
		margin: 0.1rem 0 0.25rem 0.8rem;
		padding-left: 0.55rem;
		border-left: 1px solid var(--border-soft);
	}
	.category-menu__navigation {
		min-width: 0;
		padding: 1.25rem;
		overflow-y: auto;
		border-left: 1px solid var(--border-soft);
		background: var(--surface-soft);
	}
	.category-menu__navigation-title {
		margin-bottom: 0.75rem;
		color: var(--text-secondary);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.category-menu__navigation > a,
	.category-menu__navigation-group {
		display: flex;
		flex-direction: column;
		margin-bottom: 0.45rem;
		padding: 0.7rem 0.75rem;
		border: 1px solid transparent;
		border-radius: 0.65rem;
		background: var(--surface);
		color: var(--text-primary);
		font-size: 0.82rem;
		font-weight: 750;
	}
	.category-menu__navigation > a {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		gap: 0.5rem;
	}
	.category-menu__navigation > a:hover {
		border-color: var(--border-soft);
		color: var(--brand-secondary);
		transform: translateX(0.15rem);
	}
	.category-menu__navigation-group > p {
		margin-bottom: 0.35rem;
		font-weight: 800;
	}
	.category-menu__navigation-group a {
		padding: 0.28rem 0;
		color: var(--text-secondary);
		font-size: 0.78rem;
		font-weight: 650;
	}
	.category-menu__navigation-group a:hover {
		color: var(--brand-secondary);
	}
	.category-menu__empty {
		padding: 2rem;
		border: 1px dashed var(--border-soft);
		border-radius: 0.9rem;
		background: var(--surface-soft);
		text-align: center;
	}
	.category-menu__empty a {
		display: inline-flex;
		margin-top: 0.75rem;
		color: var(--brand-secondary);
		font-weight: 800;
	}
	.header-more-menu {
		padding: 1.15rem;
		border: 1px solid var(--border-soft);
		border-top: 0;
		background: var(--surface);
	}
	.header-more-menu__heading {
		padding: 0.15rem 0.25rem 1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.header-more-menu nav {
		display: grid;
		gap: 0.45rem;
		padding-top: 0.85rem;
	}
	.header-more-menu nav a {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.75rem;
		border: 1px solid transparent;
		border-radius: 0.75rem;
		color: var(--text-primary);
	}
	.header-more-menu nav a:hover {
		border-color: var(--border-soft);
		background: var(--surface-soft);
		transform: translateX(0.15rem);
	}
	.header-more-menu nav :is(img, .icono-interfaz) {
		width: 1.55rem;
		height: 1.55rem;
		object-fit: contain;
	}
	.header-more-menu nav span {
		display: flex;
		flex-direction: column;
		line-height: 1.25;
	}
	.header-more-menu nav strong {
		font-size: 0.88rem;
	}
	.header-more-menu nav small {
		color: var(--text-secondary);
		font-size: 0.74rem;
	}

	/* Los paneles del header se alinean con su altura real, actualizada desde Header. */
	.menu-top-right {
		position: fixed;
		top: var(--header-height);
		right: clamp(1rem, 3vw, 3rem);
		z-index: 30;
		width: min(calc(100% - 2rem), 27rem);
		max-height: calc(100dvh - var(--header-height) - 1rem);
		margin: 0;
		overflow: hidden auto;
		overscroll-behavior: contain;
		border-top: 0;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		box-shadow: var(--shadow-md);
	}
	.menu-center {
		top: 50%;
		left: 50%;
		z-index: 50;
		width: min(calc(100% - 2rem), 36rem);
		max-height: calc(100dvh - 2rem);
		margin: 0;
		transform: translate(-50%, -50%);
	}

	/* Botones y campos */
	.btn1-1,
	.btn1-2,
	.btn1-3,
	.btn5-1 {
		min-height: 2.75rem;
		padding: 0.65rem 1.15rem;
		border-radius: 999px;
		font-weight: 750;
		letter-spacing: 0.01em;
	}
	.btn1-1 {
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
		box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--brand-primary) 24%, transparent);
	}
	.btn1-1:hover,
	.btn1-1:focus-visible {
		opacity: 1;
		transform: translateY(-0.1rem);
		box-shadow: 0 0.6rem 1.4rem color-mix(in srgb, var(--brand-primary) 32%, transparent);
	}
	.btn1-2 {
		background: var(--brand-secondary);
		color: var(--text-inverse);
	}
	.btn1-3 {
		background: var(--brand-accent);
		color: var(--brand-accent-contrast);
	}
	.btn-pad {
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface);
		box-shadow: none;
	}
	.btn-pad:hover {
		border-color: var(--brand-primary);
		background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
		box-shadow: none;
	}
	:where(.input-square, .input-square-basic, .select-square, .textarea-square, .input-round) {
		border-color: var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface);
	}
	:where(.input-square, .input-square-basic, .select-square, .textarea-square):focus-within {
		border-color: var(--brand-secondary);
		box-shadow: 0 0 0 0.2rem var(--focus-ring);
	}
	input,
	select,
	textarea {
		color: var(--text-primary);
	}

	/* Catálogo */
	.catalogue-page {
		align-items: stretch;
		width: 100%;
		padding-bottom: clamp(3rem, 7vw, 6rem);
	}
	.catalogue-category-hero {
		position: relative;
		isolation: isolate;
		width: min(calc(100% - 2rem), var(--content-width));
		min-height: clamp(13rem, 28vw, 22rem);
		margin: 1.5rem auto 0;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--text-primary);
		box-shadow: var(--shadow-md);
		color: var(--text-inverse);
	}
	.catalogue-category-hero--plain {
		min-height: 11rem;
		background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
	}
	.catalogue-category-hero__banner {
		position: absolute;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.catalogue-category-hero__overlay {
		position: absolute;
		z-index: -1;
		inset: 0;
		background: linear-gradient(90deg, rgb(9 18 38 / 78%), rgb(9 18 38 / 18%));
	}
	.catalogue-category-hero__content {
		position: absolute;
		right: clamp(1.25rem, 5vw, 4rem);
		bottom: clamp(1.25rem, 5vw, 3rem);
		left: clamp(1.25rem, 5vw, 4rem);
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	.catalogue-category-hero__content p {
		margin-bottom: 0.2rem;
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.catalogue-category-hero__content h1 {
		color: var(--text-inverse);
		font-size: clamp(2rem, 5vw, 4rem);
		line-height: 1;
		text-shadow: 0 0.15rem 0.9rem rgb(0 0 0 / 25%);
	}
	.catalogue-category-hero__icon {
		width: clamp(3.5rem, 7vw, 5.5rem);
		height: clamp(3.5rem, 7vw, 5.5rem);
		padding: 0.6rem;
		border: 1px solid rgb(255 255 255 / 35%);
		border-radius: 1rem;
		background: rgb(255 255 255 / 92%);
		object-fit: contain;
		box-shadow: var(--shadow-sm);
	}
	.catalogue-toolbar {
		position: static;
		top: auto;
		z-index: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		width: min(calc(100% - 2rem), var(--content-width));
		height: auto;
		min-height: 0;
		margin: 1.5rem auto 0.25rem;
		padding: 1rem 1.25rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		transition: none;
	}
	.catalogue-toolbar__title {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		min-width: 0;
	}
	.catalogue-toolbar__actions {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		min-width: 0;
	}
	.catalogue-filter {
		display: grid;
		grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
		gap: 1.25rem;
		width: min(calc(100% - 2rem), var(--content-width));
		margin: 0 auto;
		padding: 1rem 0;
	}
	.catalogue-filter .catalogue-filter__panel {
		position: sticky;
		top: calc(var(--header-height) + 1rem);
		align-self: start;
		width: 100%;
		min-width: 0;
		height: auto;
		max-height: calc(100dvh - var(--header-height) - 2rem);
		margin: 0;
		padding: 0;
		overflow: hidden auto;
		scrollbar-gutter: stable;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}
	.catalogue-results {
		display: grid;
		align-content: start;
		gap: 0.85rem;
		min-width: 0;
		container-name: catalogue-results;
		container-type: inline-size;
	}
	.catalogue-results__status {
		display: grid;
		gap: 0.65rem;
		min-height: 2rem;
	}
	.catalogue-results__status > p {
		color: var(--text-secondary);
		font-size: 0.9rem;
	}
	.catalogue-filter .catalogue {
		display: grid;
		place-items: stretch stretch;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.catalogue-filter .catalogue.catalogue--list {
		display: flex;
		flex-flow: column nowrap;
	}
	.catalogue-filter .catalogue.is-loading {
		opacity: 0.55;
		pointer-events: none;
	}
	.catalogue-filter .btnLoadProduct {
		grid-column: 1 / -1;
		justify-self: center;
	}
	.catalogue-toolbar__heading {
		min-width: 0;
	}
	.catalogue-toolbar__title h1 {
		overflow: hidden;
		color: var(--text-primary);
		font-size: clamp(1.35rem, 3vw, 2rem);
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.catalogue-toolbar__actions .select-square {
		min-width: 12rem;
		border-color: var(--border-soft);
	}
	.catalogue-filter .catalogue-filter__panel > div {
		margin: 0;
		padding: 1rem;
	}
	.catalogue-filter .catalogue-filter__panel > div + div {
		border-top: 1px solid var(--border-soft);
	}
	.catalogue-filter__heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.75rem;
	}
	.catalogue-filter__heading small {
		color: var(--text-secondary);
	}
	.catalogue-filter__heading .catalogue-filter__clear {
		margin: 0;
		padding: 0.2rem 0;
		color: var(--brand-secondary);
		font-size: 0.82rem;
	}
	.catalogue-filter .catalogue-filter__panel .title1 {
		margin-bottom: 0.75rem;
		color: var(--text-primary);
		font-size: 0.78rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.catalogue-filter .filter-checkbox {
		display: grid;
		gap: 0.4rem;
	}
	.catalogue-filter .filter-checkbox li {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.catalogue-filter .filter-checkbox li label {
		align-items: center;
		width: 100%;
		margin: 0;
		padding: 0.55rem 0.7rem;
		border-color: var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
		line-height: 1.3;
	}
	.catalogue-filter .filter-checkbox li label span {
		flex: 1;
		min-width: 0;
	}
	.catalogue-filter .filter-checkbox li label small {
		margin-left: 0.5rem;
		opacity: 0.75;
		font-variant-numeric: tabular-nums;
	}
	.catalogue-filter .filter-checkbox li label:hover {
		border-color: var(--brand-primary);
		color: var(--text-primary);
	}
	.catalogue-filter .filter-checkbox input[type='checkbox']:checked + label {
		border-color: var(--brand-primary);
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
	}
	.catalogue-facet-options {
		max-height: 17rem;
		padding-right: 0.15rem;
		overflow-y: auto;
		scrollbar-width: thin;
	}
	.catalogue-filter .catalogue-filter__panel .catalogue-facet-search {
		margin-bottom: 0.65rem;
	}
	.catalogue-filter__price > div {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 0.5rem 0.65rem;
	}
	.catalogue-filter__price label {
		color: var(--text-secondary);
		font-size: 0.8rem;
	}
	.catalogue-filter .catalogue-filter__panel .input-round {
		width: 100%;
		min-width: 0;
		max-width: none;
		padding: 0.65rem 0.7rem;
		border-color: var(--border-soft);
		border-radius: var(--radius-sm);
	}
	.catalogue-filter__options .input-switch {
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.45rem 0;
	}
	.catalogue-filter__options .input-switch > label:last-child {
		order: -1;
		margin: 0;
	}
	.catalogue-filter__options .switch {
		margin: 0;
	}
	.catalogue-active-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	.catalogue-active-filters button {
		margin: 0;
		padding: 0.35rem 0.65rem;
		border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border-soft));
		border-radius: 999px;
		background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
		color: var(--text-primary);
		font-size: 0.8rem;
	}
	.catalogue-active-filters button:hover {
		border-color: var(--brand-primary);
		color: var(--brand-secondary);
	}
	.button-filter .button-filter__count {
		display: inline-grid;
		place-items: center;
		min-width: 1.25rem;
		height: 1.25rem;
		padding: 0 0.3rem;
		border-radius: 999px;
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
		font-size: 0.72rem;
	}
	.button-filter .button-filter__count[hidden] {
		display: none;
	}
	.catalogue-empty {
		grid-column: 1 / -1;
		display: grid;
		justify-items: center;
		gap: 1rem;
		width: 100%;
		padding: clamp(2rem, 6vw, 4rem) 1.5rem;
		border: 1px dashed var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		text-align: center;
	}
	.catalogue-empty > :is(img, .icono-interfaz) {
		width: 4rem;
		opacity: 0.55;
	}
	.catalogue-empty p {
		margin-top: 0.35rem;
		color: var(--text-secondary);
	}
	.catalogue-empty__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.6rem;
	}
	.catalogue-recommendations-heading {
		grid-column: 1 / -1;
		margin-top: 1rem;
	}
	.catalogue-recommendations-heading p {
		color: var(--brand-secondary);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.productGrid,
	.productList {
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: 0 0.35rem 1.2rem color-mix(in srgb, var(--brand-ink) 6%, transparent);
	}
	.productGrid {
		display: flex;
		flex-direction: column;
		min-width: 0;
		text-align: left;
	}
	.productGrid:hover {
		border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border-soft));
		box-shadow: 0 1rem 2.8rem color-mix(in srgb, var(--brand-ink) 12%, transparent);
		transform: translateY(-0.25rem);
	}
	.product-card__media {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: linear-gradient(145deg, var(--surface-soft), var(--surface));
	}
	.product-card__media img {
		width: 100%;
		height: 100%;
		padding: clamp(0.85rem, 2vw, 1.35rem);
		object-fit: contain;
		transition: transform 0.35s ease;
	}
	.productGrid:hover .product-card__media img {
		transform: scale(1.035);
	}
	.productGrid .catalogue-body {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		gap: 1.2rem;
		padding: 1.25rem;
	}
	.catalogue-name {
		font-size: 1.02rem;
		line-height: 1.35;
	}
	.catalogue-name a {
		color: var(--text-primary);
	}
	.catalogue-resume {
		color: var(--text-secondary);
	}
	.product-card__purchase {
		display: grid;
		gap: 0.75rem;
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
	}
	.product-card__price {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
	}
	.product-card__purchase > .flex-row {
		gap: 0.6rem;
		margin: 0;
	}
	.product-card__purchase .btnComprar {
		flex: 1;
		min-width: 0;
	}
	.priceafter {
		color: var(--danger);
		font-size: 1.15rem;
	}
	.productGrid .discount,
	.productList .discount {
		top: 0.75rem;
		right: 0.75rem;
		margin: 0;
		padding: 0.3rem 0.65rem;
		border-radius: 999px;
		background: var(--danger);
		box-shadow: var(--shadow-sm);
	}
	.wishlist-off,
	.wishlist-on {
		min-width: 2.75rem;
		min-height: 2.75rem;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
		background-size: 1.15rem;
	}
	.productList {
		gap: 1rem;
		padding: 1rem;
	}
	.productList .product-card__media {
		flex: 0 0 min(15rem, 30%);
	}
	.product-addcart {
		gap: clamp(1rem, 3vw, 2rem);
	}

	/* Portada */

	/* Ficha de producto */
	.product-page {
		align-items: stretch;
		padding-bottom: clamp(3rem, 6vw, 6rem);
	}
	.product-toolbar {
		width: min(100%, var(--content-width));
		margin: 0 auto;
		padding: 1.25rem clamp(1rem, 3vw, 3rem);
	}
	.product-detail {
		width: min(calc(100% - 2rem), var(--content-width));
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.product-detail .product-detail__content {
		display: grid;
		grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 1fr);
		gap: clamp(1rem, 3vw, 3rem);
		padding: clamp(1rem, 3vw, 2.5rem);
	}
	.product-detail .product-gallery,
	.product-detail .dp-cover {
		width: 100%;
		padding: 0;
	}
	.product-detail .product-gallery__main {
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--surface-soft);
	}
	.product-detail .product-gallery__main-image {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 0;
		object-fit: contain;
	}
	.product-detail .dp-cover h1 {
		color: var(--text-primary);
		font-size: clamp(1.8rem, 3vw, 2.75rem);
	}
	.product-detail .dp-cover > div {
		padding-inline: 0;
	}
	.product-detail .dp-variant {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
	}
	.product-detail .dp-variant > p {
		margin: 0.65rem 0 0;
		font-weight: 750;
	}
	.product-detail .dp-variant > div {
		display: flex;
		flex: 1 1 15rem;
		flex-wrap: wrap;
		gap: 0.5rem;
		min-width: 0;
	}
	.product-detail .dp-variant .item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 5rem;
		min-height: 2.75rem;
		margin: 0;
		padding: 0.55rem 0.85rem;
		border-color: var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface);
		line-height: 1.2;
		text-align: center;
	}
	.product-detail .dp-variant .activeitem {
		border-color: var(--brand-primary);
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
	}
	.selector-producto {
		width: 100%;
	}
	.selector-producto[aria-busy='true'] {
		cursor: progress;
	}
	.selector-producto[aria-busy='true'] .js-variante-producto {
		opacity: 0.65;
	}
	.selector-producto .js-variante-producto {
		font: inherit;
	}
	.selector-producto__estado {
		display: inline-flex;
		min-height: 2.75rem;
		align-items: center;
		color: var(--text-secondary);
	}
	.selector-producto__error {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
		padding: 0.85rem 1rem;
		border: 1px solid color-mix(in srgb, var(--color5-1) 45%, transparent);
		border-radius: var(--radius-sm);
		background: color-mix(in srgb, var(--color5-1) 8%, var(--surface));
		color: var(--text-primary);
	}
	.selector-producto__error p {
		flex: 1 1 14rem;
	}
	.selector-producto [data-acciones-producto] {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.product-detail .dp-descripcion,
	.product-detail .dp-detalle {
		border-color: var(--border-soft);
	}
	.product-related {
		width: min(100%, var(--content-width));
		margin: 0 auto;
	}
	.product-related .product-card {
		max-width: 22rem;
	}

	/* Carrito flotante */
	.cart-panel {
		align-items: stretch;
		padding: 0;
	}
	.cart-panel > .flex-column {
		align-items: stretch;
		width: 100%;
		min-width: 0;
	}
	.cart-panel .cart-panel__detail {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding: 1rem;
		overflow: hidden auto;
	}
	.cart-panel .cart-shopping {
		display: grid;
		grid-template-columns: 3.75rem minmax(0, 1fr);
		gap: 0.75rem;
		width: 100%;
		min-width: 0;
	}
	.cart-panel .cart-img {
		width: 3.75rem;
		min-width: 0;
	}
	.cart-panel .cart-img img {
		width: 3.5rem;
		height: 3.5rem;
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
		object-fit: contain;
	}
	.cart-panel .cart-shopping > .flex-column {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}
	.cart-panel .catalogue-name {
		width: 100%;
		overflow-wrap: anywhere;
	}
	.cart-panel .cart-sku {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 0.55rem;
		width: 100%;
		min-width: 0;
		margin: 0;
	}
	.cart-panel .cart-sku > * {
		margin-right: 0;
	}
	.cart-panel .cart-sku > .w100p {
		grid-column: 1 / -1;
		min-width: 0;
	}
	.cart-panel .button-quantity {
		min-width: 6.5rem;
		overflow: hidden;
	}
	.cart-panel .word-nowrap {
		align-items: flex-end;
		min-width: 0;
		white-space: normal;
	}
	.cart-panel .btnCartRemove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		min-width: 2.75rem;
		height: 2.75rem;
		padding: 0.5rem;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
	}
	.cart-panel .btnCartRemove :is(img, .icono-interfaz) {
		width: 1rem;
		height: 1rem;
	}
	.cart-panel .cart-panel__totals {
		width: 100%;
		height: auto;
		min-height: 4.5rem;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}
	.cart-panel .cart-panel__totals > .flex {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.cart-panel .cart-panel__totals > .flex > * {
		margin-right: 0;
	}
	.cart-panel .cart-total {
		flex: 1 1 10rem;
		text-align: left;
	}

	/* Stock por sucursal */
	.stock-sucursales {
		width: min(100%, 30rem);
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: linear-gradient(145deg, var(--surface-soft), var(--surface));
	}
	.stock-sucursales-title {
		margin-bottom: 0.65rem;
		color: var(--text-primary);
		font-size: 0.82rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
	.stock-sucursales ul {
		display: grid;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.stock-sucursales li {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--border-soft);
	}
	.stock-sucursales li span {
		color: var(--text-secondary);
	}
	.stock-sucursales strong {
		color: var(--brand-ink);
		white-space: nowrap;
	}

	/* Tablas y paneles transaccionales */
	.table-admin {
		border-collapse: separate;
		border-spacing: 0;
		overflow: hidden;
		border-radius: var(--radius-md);
	}
	.table-admin th {
		padding: 0.85rem;
		background: var(--brand-secondary);
		color: var(--text-inverse);
		font-weight: 700;
	}
	.table-admin td {
		padding: 0.8rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.table-admin tr:nth-child(even) {
		background: var(--surface-soft);
	}

	/* Lista pública de precios */
	.price-page {
		display: block;
		min-height: 70vh;
		padding: 0 1rem clamp(4rem, 8vw, 7rem);
		background: var(--surface-soft);
	}
	.price-page__heading {
		position: static;
		z-index: auto;
		display: block;
		width: min(100%, var(--content-width));
		height: auto;
		margin: 0 auto;
		padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		background: linear-gradient(
			135deg,
			var(--brand-ink),
			color-mix(in srgb, var(--brand-ink) 72%, var(--brand-secondary))
		);
		color: rgb(255 255 255 / 78%);
		transition: none;
	}
	.price-page__heading > p:first-child {
		margin-bottom: 0.7rem;
		color: var(--brand-primary);
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.price-page__heading h1 {
		margin-bottom: 0.7rem;
		color: var(--text-inverse);
		font-size: clamp(2.3rem, 5vw, 4.25rem);
	}
	.price-page__content {
		width: min(calc(100% - 2rem), calc(var(--content-width) - 4rem));
		margin: clamp(-3rem, -5vw, -2rem) auto 0;
		padding: clamp(1rem, 3vw, 2rem);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.price-page__actions {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}
	.price-search,
	.price-downloads {
		display: flex;
		align-items: flex-end;
		gap: 0.65rem;
	}
	.price-search .input-square {
		min-width: min(20rem, 55vw);
	}
	.price-page__empty {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.25rem;
		padding: 1rem;
		border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, var(--border-soft));
		border-radius: var(--radius-md);
		background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
	}
	.price-page__empty :is(img, .icono-interfaz) {
		width: 2.25rem;
	}
	.price-table-shell {
		overflow-x: auto;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
	}
	.price-table {
		width: 100%;
		min-width: 58rem;
		border-radius: 0;
	}
	.price-table td:first-child {
		width: 6rem;
	}
	.price-table td:first-child img {
		width: 4rem;
		height: 4rem;
		border-radius: var(--radius-sm);
		object-fit: contain;
		background: var(--surface-soft);
	}
	.price-table tbody tr:last-child td {
		border-bottom: 0;
	}

	/* Carruseles */
	.carousel-arrow {
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		min-width: 2.75rem;
		height: 2.75rem;
		padding: 0.75rem;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
		background: rgb(255 255 255 / 94%);
		color: var(--brand-secondary);
		box-shadow: var(--shadow-md);
		backdrop-filter: blur(0.5rem);
	}
	.carousel-arrow :is(img, .icono-interfaz) {
		width: 1rem;
		height: 1rem;
		object-fit: contain;
	}
	.carousel-arrow:hover {
		border-color: var(--brand-primary);
		transform: translateY(-50%) scale(1.05);
	}
	.base-hero .carousel-arrow {
		width: 3rem;
		min-width: 3rem;
		height: 3rem;
		padding: 0;
		font-size: 0;
	}
	.base-hero .carousel-arrow :is(img, .icono-interfaz) {
		display: none;
	}
	.base-hero .carousel-arrow::before {
		width: 0.75rem;
		height: 0.75rem;
		border-top: 0.16rem solid currentcolor;
		border-right: 0.16rem solid currentcolor;
		content: '';
	}
	.base-hero__arrow--previous::before {
		transform: rotate(-135deg);
	}
	.base-hero__arrow--next::before {
		transform: rotate(45deg);
	}
	.dot {
		border-color: var(--brand-primary);
		background: var(--surface);
	}
	.activeslide {
		background: var(--brand-primary);
	}

	/* Páginas informativas */
	.institutional-page {
		display: block;
		padding: clamp(3rem, 8vw, 7rem) 1rem;
	}
	.institutional-card {
		width: min(100%, 58rem);
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.institutional-card > header {
		position: static;
		z-index: auto;
		display: block;
		width: auto;
		height: auto;
		padding: clamp(2rem, 5vw, 4rem);
		background: linear-gradient(
			135deg,
			var(--brand-ink),
			color-mix(in srgb, var(--brand-ink) 76%, var(--brand-secondary))
		);
		color: rgb(255 255 255 / 80%);
		transition: none;
	}
	.institutional-card > header h1 {
		margin: 0.4rem 0 1rem;
		color: var(--text-inverse);
		font-size: clamp(2.2rem, 5vw, 4rem);
	}
	.institutional-card > header > p:first-child {
		color: var(--brand-primary);
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.institutional-content {
		padding: clamp(2rem, 5vw, 4rem);
		color: var(--text-secondary);
		font-size: 1.05rem;
	}
	.institutional-content p + p {
		margin-top: 1rem;
	}

	/* Documentos legales compartidos por todos los ecommerce. */
	.legal-page {
		display: block;
		padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem);
		background: var(--surface-muted);
	}
	.legal-document {
		width: min(100%, 64rem);
		margin-inline: auto;
		padding: clamp(1.5rem, 5vw, 4.5rem);
		border: 1px solid var(--border-soft);
		border-radius: 1.5rem;
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		color: var(--text-primary);
		font-size: 1rem;
		line-height: 1.8;
	}
	.legal-document__heading {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 3rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.legal-document__heading p {
		margin: 0 0 0.35rem;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 850;
		letter-spacing: 0.12em;
	}
	.legal-document__heading h1 {
		max-width: 42rem;
		font-size: clamp(2.1rem, 4vw, 3.7rem);
		letter-spacing: -0.04em;
	}
	.legal-document__heading small {
		color: var(--text-secondary);
		white-space: nowrap;
	}
	.legal-document p {
		margin-bottom: 1.35rem;
	}
	.legal-document ul,
	.legal-document ol {
		margin: 0 0 1.5rem 1.5rem;
	}
	.legal-document li {
		margin-bottom: 0.8rem;
	}
	.legal-document h2 {
		margin: 3.5rem 0 1.2rem;
		font-size: 1.8rem;
		letter-spacing: -0.02em;
	}
	.legal-document h3 {
		margin: 2rem 0 0.8rem;
		font-size: 1.3rem;
	}
	.legal-document a {
		color: var(--brand-text);
		font-weight: 700;
	}
	.legal-summary {
		margin-bottom: 2rem;
		padding: clamp(1.35rem, 4vw, 2.25rem);
		border: 1px solid #bde6d8;
		border-radius: 1.25rem;
		background: #f0fbf7;
	}
	.legal-summary h2 {
		margin: 0.2rem 0 1rem;
		font-size: clamp(1.45rem, 3vw, 2rem);
	}
	.legal-summary ul {
		margin-bottom: 0;
	}
	.legal-summary__eyebrow {
		margin: 0;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 850;
		letter-spacing: 0.12em;
	}
	.legal-index {
		padding: 1.35rem 1.5rem;
		border-radius: 1rem;
		background: var(--surface-soft);
	}
	.legal-index > p {
		margin-bottom: 0.6rem;
		font-weight: 800;
	}
	.legal-index ol {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.35rem 2rem;
		margin-bottom: 0;
	}
	.legal-index li {
		margin-bottom: 0;
		color: var(--text-secondary);
	}
	.legal-note {
		margin: 1.5rem 0;
		padding: 1.25rem 1.5rem;
		border-left: 0.3rem solid #0b8f6d;
		border-radius: 0 0.75rem 0.75rem 0;
		background: #f0fbf7;
	}
	.legal-note p {
		margin: 0;
	}
	.legal-contact {
		margin-top: 4rem;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		border-radius: 1.25rem;
		background: var(--brand-ink);
		color: var(--text-inverse);
	}
	.legal-contact h2 {
		margin: 0.25rem 0 1rem;
		color: var(--text-inverse);
	}
	.legal-contact p:last-child {
		margin: 0;
	}
	.legal-contact a {
		color: #8ce6c9;
	}
	.legal-table-wrapper {
		margin: 1.5rem 0;
		overflow-x: auto;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
	}
	.legal-table {
		width: 100%;
		min-width: 42rem;
		border-collapse: collapse;
		line-height: 1.55;
	}
	.legal-table th,
	.legal-table td {
		padding: 1rem;
		border-bottom: 1px solid var(--border-soft);
		text-align: left;
		vertical-align: top;
	}
	.legal-table th {
		background: var(--surface-soft);
		font-size: 0.85rem;
	}
	.legal-table tr:last-child td {
		border-bottom: 0;
	}
	.legal-table code {
		font-size: 0.85rem;
	}
	.legal-cookie-settings {
		padding: 0.8rem 1rem;
		border: 1px solid var(--brand-text);
		border-radius: 0.65rem;
		color: var(--brand-text);
		font-weight: 750;
	}
	.checkout-legal-acceptance {
		width: min(100%, 34rem);
		margin: 1.5rem auto 0;
		padding: 1rem;
		border: 1px solid #bde6d8;
		border-radius: 0.85rem;
		background: #f0fbf7;
	}
	.checkout-legal-acceptance .input-checkbox {
		align-items: flex-start;
		margin-bottom: 0.65rem;
	}
	.checkout-legal-acceptance label {
		width: auto;
		margin-left: 0.65rem;
	}
	.checkout-legal-acceptance p {
		margin: 0;
		color: var(--text-secondary);
		line-height: 1.55;
	}

	@media (width <= 700px) {
		.legal-document__heading {
			align-items: flex-start;
			flex-direction: column;
			gap: 1rem;
		}
		.legal-document__heading small {
			white-space: normal;
		}
		.legal-index ol {
			grid-template-columns: 1fr;
		}
	}

	/* Centro de ayuda */
	.help-page {
		display: block;
		padding: clamp(3rem, 8vw, 7rem) 1rem;
	}
	.help-shell {
		width: min(100%, var(--content-width));
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	.help-heading {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: clamp(2rem, 5vw, 4rem);
		background: linear-gradient(
			135deg,
			var(--brand-ink),
			color-mix(in srgb, var(--brand-ink) 74%, var(--brand-secondary))
		);
		color: rgb(255 255 255 / 80%);
		transition: none;
	}
	.help-heading > p:first-child {
		color: var(--brand-primary);
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.help-heading h1 {
		margin: 0.45rem 0 0.8rem;
		color: var(--text-inverse);
		font-size: clamp(2.2rem, 5vw, 4rem);
	}
	.help-layout {
		display: grid;
		grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
		min-height: 28rem;
	}
	.help-tabs {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 0.35rem;
		padding: 1rem;
		border-right: 1px solid var(--border-soft);
		background: var(--surface-soft);
	}
	.help-tab {
		width: 100%;
		padding: 0.8rem 1rem;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--text-secondary);
		font-weight: 750;
		text-align: left;
	}
	.help-tab:hover {
		border-color: var(--border-soft);
		background: var(--surface);
		color: var(--text-primary);
	}
	.help-tab[aria-selected='true'] {
		border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border-soft));
		background: color-mix(in srgb, var(--brand-primary) 11%, var(--surface));
		color: var(--brand-ink);
	}
	.help-panels {
		min-width: 0;
		padding: clamp(1.25rem, 4vw, 3rem);
	}
	.help-panel > h2 {
		margin-bottom: 1.25rem;
		font-size: clamp(1.5rem, 3vw, 2rem);
	}
	.help-questions {
		display: grid;
		gap: 0.65rem;
	}
	.help-question {
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface);
	}
	.help-question h3 {
		margin: 0;
	}
	.help-question button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 1rem 1.15rem;
		color: var(--text-primary);
		font-size: 1rem;
		font-weight: 750;
		text-align: left;
	}
	.help-question button:hover {
		background: var(--surface-soft);
	}
	.help-question__icon {
		position: relative;
		flex: 0 0 auto;
		width: 1rem;
		height: 1rem;
	}
	.help-question__icon::before,
	.help-question__icon::after {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 0.12rem;
		background: currentcolor;
		content: '';
		transform: translateY(-50%);
		transition: transform 0.2s ease;
	}
	.help-question__icon::after {
		transform: translateY(-50%) rotate(90deg);
	}
	.help-question button[aria-expanded='true'] .help-question__icon::after {
		transform: translateY(-50%) rotate(0);
	}
	.help-answer {
		padding: 0 1.15rem 1.15rem;
		color: var(--text-secondary);
	}

	/* Contacto */
	.contact-page {
		display: block;
		padding: clamp(3rem, 8vw, 7rem) 1rem;
	}
	.contact-page .form-contact {
		display: grid;
		grid-template-columns: minmax(19rem, 0.82fr) minmax(0, 1.18fr);
		width: min(100%, 76rem);
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.contact-heading {
		position: relative;
		isolation: isolate;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		gap: clamp(2.5rem, 6vw, 5rem);
		width: auto;
		min-height: 43rem;
		height: auto;
		margin: 0;
		padding: clamp(2rem, 5vw, 4.5rem);
		overflow: hidden;
		background:
			radial-gradient(
				circle at 18% 12%,
				color-mix(in srgb, var(--brand-primary) 24%, transparent),
				transparent 17rem
			),
			var(--brand-secondary);
		color: rgb(255 255 255 / 72%);
		text-align: left;
		transition: none;
	}
	.contact-heading::after {
		position: absolute;
		z-index: -1;
		right: -10rem;
		bottom: -10rem;
		width: 24rem;
		aspect-ratio: 1;
		border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
		border-radius: 50%;
		box-shadow: 0 0 0 5rem color-mix(in srgb, var(--brand-primary) 4%, transparent);
		content: '';
	}
	.contact-heading__copy > p:first-child,
	.contact-form__heading > p:first-child,
	.contacto__eyebrow {
		margin: 0;
		color: var(--brand-primary);
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.contact-heading h1 {
		max-width: 34rem;
		margin: 0.75rem 0 1.25rem;
		color: var(--text-inverse);
		font-size: clamp(2.4rem, 5vw, 4.5rem);
		letter-spacing: -0.055em;
		line-height: 0.98;
	}
	.contact-heading__copy > p:last-child {
		max-width: 34rem;
		color: rgb(255 255 255 / 72%);
		font-size: 1.02rem;
		line-height: 1.7;
	}
	.contact-heading__steps {
		display: grid;
		gap: 1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.contact-heading__steps li {
		display: grid;
		align-items: center;
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: 0.9rem;
	}
	.contact-heading__steps li > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		aspect-ratio: 1;
		border: 1px solid rgb(255 255 255 / 14%);
		border-radius: 0.9rem;
		background: rgb(255 255 255 / 7%);
		color: var(--brand-primary);
	}
	.contact-heading__steps svg {
		width: 1.2rem;
	}
	.contact-heading__steps strong,
	.contact-heading__steps small {
		display: block;
	}
	.contact-heading__steps strong {
		color: var(--text-inverse);
		font-size: 0.94rem;
	}
	.contact-heading__steps small {
		margin-top: 0.18rem;
		color: rgb(255 255 255 / 58%);
		line-height: 1.45;
	}
	.contact-page .contacto-container {
		display: flex;
		align-items: stretch;
		justify-content: center;
		flex-direction: column;
		gap: 2rem;
		padding: clamp(2rem, 5vw, 4.5rem);
	}
	.contact-page .contacto {
		display: block;
		padding: 1.75rem 0 0;
		border-top: 1px solid var(--border-soft);
		border-right: 0;
	}
	.contact-page .contacto > *:not(:last-child) {
		margin: 0;
	}
	.contacto__channels {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: 0.75rem;
		margin-top: 0.75rem;
	}
	.contact-channel {
		display: grid;
		align-items: center;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.75rem;
		min-width: 0;
		padding: 0.8rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
		color: var(--text-primary);
		text-decoration: none;
		transition:
			border-color 0.2s ease,
			transform 0.2s ease;
	}
	.contact-channel:hover,
	.contact-channel:focus-visible {
		border-color: var(--brand-primary);
		color: var(--text-primary);
		transform: translateY(-0.1rem);
	}
	.contact-channel__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		aspect-ratio: 1;
		border-radius: 0.8rem;
		background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
		color: var(--brand-secondary);
	}
	.contact-channel__icon svg {
		width: 1.2rem;
	}
	.contact-channel small,
	.contact-channel strong {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.contact-channel small {
		color: var(--text-secondary);
		font-size: 0.75rem;
	}
	.contact-channel strong {
		margin-top: 0.12rem;
		font-size: 0.86rem;
		white-space: nowrap;
	}
	.contact-page .contact-form {
		display: grid;
		gap: 1.5rem;
		width: 100%;
		padding: 0;
	}
	.contact-form__heading h2 {
		margin: 0.45rem 0 0.6rem;
		font-size: clamp(1.7rem, 3vw, 2.35rem);
		letter-spacing: -0.04em;
	}
	.contact-form__heading > p:last-child {
		color: var(--text-secondary);
		line-height: 1.6;
	}
	.contact-form__fields {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
	.contact-form__field--wide {
		grid-column: 1 / -1;
	}
	.contact-form__fields textarea {
		min-height: 8.5rem;
		resize: vertical;
	}
	.contact-form__actions {
		display: grid;
		align-items: center;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 1rem;
	}
	.contact-form__actions .btn1-1 {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.65rem;
		min-width: 11rem;
	}
	.contact-form__actions .btn1-1 svg {
		width: 1rem;
	}
	.contact-form__actions > p {
		color: var(--text-secondary);
		font-size: 0.76rem;
		line-height: 1.45;
	}
	.contact-form__actions a {
		color: var(--brand-text);
		font-weight: 700;
	}
	.contact-form__success {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		min-height: 25rem;
		text-align: center;
	}
	.contact-form__success > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface));
		color: var(--brand-secondary);
	}
	.contact-form__success svg {
		width: 2rem;
	}
	.contact-form__success h2 {
		margin: 1.25rem 0 0.5rem;
		font-size: 2rem;
	}
	.contact-form__success p {
		max-width: 28rem;
		color: var(--text-secondary);
		line-height: 1.6;
	}

	/* Pie */
	.site-footer {
		position: relative;
		overflow: hidden;
		padding: 0;
		background: var(--brand-secondary);
		color: rgb(255 255 255 / 90%);
	}
	.site-footer::before {
		position: absolute;
		top: -14rem;
		left: -10rem;
		width: 30rem;
		height: 30rem;
		border-radius: 50%;
		background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
		content: '';
		filter: blur(1rem);
	}
	.site-footer .footer-main {
		position: relative;
		gap: clamp(2rem, 6vw, 6rem);
		width: min(100%, var(--content-width));
		margin: 0 auto;
		padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 3vw, 3rem);
	}
	.site-footer .footer-business {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 2rem;
		max-width: 26rem;
		min-width: min(100%, 18rem);
		margin: 0;
	}
	.site-footer .footer-business > * {
		overflow: visible;
		white-space: normal;
	}
	.site-footer .footer-business > div {
		align-items: flex-start;
		margin: 0;
	}
	.site-footer .footer-business__logo {
		display: inline-flex;
		padding: 0.65rem 0.85rem;
		border-radius: 0.85rem;
		background: var(--surface);
		box-shadow: 0 0.65rem 1.5rem rgb(0 0 0 / 12%);
	}
	.site-footer .footer-business__logo img {
		display: block;
		width: 6.5rem;
		margin: 0;
		filter: none;
	}
	.site-footer .footer-business__brand p {
		max-width: 24rem;
		margin-top: 1rem;
		color: rgb(255 255 255 / 72%);
		line-height: 1.7;
	}
	.site-footer .footer-list {
		display: grid;
		flex: 1;
		grid-template-columns: repeat(3, minmax(8rem, 1fr));
		gap: clamp(1.5rem, 4vw, 4rem);
	}
	.site-footer .footer-list > div:not(:last-child) {
		margin: 0;
	}
	.site-footer .footer-list li + li {
		margin-top: 0.65rem;
	}
	.site-footer a,
	.site-footer nav button {
		color: rgb(255 255 255 / 76%);
	}
	.site-footer a:hover,
	.site-footer nav button:hover {
		color: var(--text-inverse);
		text-decoration: underline;
		text-underline-offset: 0.2rem;
	}
	.site-footer .footer-secondary {
		position: relative;
		width: min(100%, var(--content-width));
		margin: 0 auto;
		padding: 1.5rem clamp(1rem, 3vw, 3rem) max(6rem, calc(1.5rem + env(safe-area-inset-bottom)));
		border-color: rgb(255 255 255 / 14%);
	}

	@media (width <= 1280px) {
		.site-header__action {
			justify-content: center;
			width: 3rem;
			min-width: 3rem;
			padding: 0.6rem;
		}
		.site-header__action > span:not(.site-header__cart-count) {
			display: none;
		}
	}

	@media (width <= 1100px) {
		.category-menu__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@container catalogue-results (width <= 54rem) {
		.catalogue-filter .catalogue {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@container catalogue-results (width <= 34rem) {
		.catalogue-filter .catalogue {
			grid-template-columns: 1fr;
		}
	}

	@media (width <= 1024px) {
		.site-header__category-trigger {
			width: 3rem;
			min-width: 3rem;
			padding: 0.45rem;
		}
		.site-header__category-trigger .site-header__category-label,
		.site-header__category-trigger .arrow-dropdown {
			display: none;
		}
		.catalogue-toolbar {
			align-items: flex-start;
			flex-direction: column;
		}
		.catalogue-toolbar__actions {
			flex-wrap: wrap;
			width: 100%;
		}
		.catalogue-filter {
			grid-template-columns: 1fr;
		}
		.catalogue-filter .catalogue-filter__panel {
			position: static;
			display: none;
			max-height: none;
		}
		.catalogue-filter .catalogue-filter__panel.is-open {
			display: block;
		}
		.button-filter {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			min-height: 2.75rem;
			padding: 0.65rem 0.9rem;
			border: 1px solid var(--border-soft);
			border-radius: var(--radius-sm);
			background: var(--surface);
			color: var(--text-primary);
		}
		.button-filter:hover,
		.button-filter:focus-visible,
		.button-filter-active {
			border-color: var(--brand-secondary);
			background: color-mix(in srgb, var(--brand-secondary) 7%, var(--surface));
			color: var(--brand-secondary);
		}
	}

	@media (width <= 960px) {
		.site-header .site-header__location {
			justify-content: center;
			flex-basis: 3rem;
			width: 3rem;
			min-width: 3rem;
			padding: 0.55rem;
			border: 1px solid transparent;
			border-radius: 0.8rem;
		}
		.site-header__location-copy {
			display: none;
		}
	}

	@media (width <= 840px) {
		:root {
			--header-height: 4.75rem;
		}
		.site-header {
			padding: 0.65rem 1rem;
		}
		.site-header .site-header__brand img {
			width: 6rem;
		}
		.site-search--desktop {
			display: none;
		}
		.site-header__search-trigger {
			display: inline-flex;
		}
		.category-menu {
			right: 1rem;
			left: 1rem;
		}
		.category-menu__body {
			grid-template-columns: 1fr;
			overflow-y: auto;
		}
		.category-menu__catalogue,
		.category-menu__navigation {
			overflow: visible;
		}
		.category-menu__navigation {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.45rem;
			border-top: 1px solid var(--border-soft);
			border-left: 0;
		}
		.category-menu__navigation-title {
			grid-column: 1 / -1;
			margin-bottom: 0.25rem;
		}
		.category-menu__navigation > a,
		.category-menu__navigation-group {
			margin-bottom: 0;
		}
		.productList {
			align-items: stretch;
			flex-direction: column;
		}
		.productList .catalogue-body {
			width: 100%;
			padding: 1rem 0 0;
		}
		.product-detail .product-detail__content {
			grid-template-columns: 1fr;
		}
		.price-page__actions {
			align-items: stretch;
			flex-direction: column;
		}
		.price-search,
		.price-downloads {
			flex-wrap: wrap;
		}
		.price-search .input-square {
			flex: 1;
			min-width: min(100%, 16rem);
		}
		.site-footer .footer-main {
			flex-direction: column;
		}
		.site-footer .footer-list {
			width: 100%;
		}
		.help-layout {
			grid-template-columns: 1fr;
		}
		.help-tabs {
			flex-direction: row;
			padding: 0.75rem;
			overflow-x: auto;
			border-right: 0;
			border-bottom: 1px solid var(--border-soft);
			scrollbar-width: thin;
		}
		.help-tab {
			width: auto;
			min-width: max-content;
			text-align: center;
		}
		.contact-page .form-contact {
			grid-template-columns: 1fr;
		}
		.contact-heading {
			min-height: 0;
		}
		.contact-heading__steps {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.contact-heading__steps li {
			align-items: flex-start;
			grid-template-columns: 1fr;
		}
	}

	@media (width <= 560px) {
		.site-header {
			gap: 0.35rem;
			padding: 0.5rem 0.75rem;
		}
		.site-header__main {
			gap: 0.35rem;
		}
		.site-header .site-header__brand {
			margin-right: 0;
		}
		.site-header .site-header__brand img {
			width: 5.1rem;
			max-height: 2.6rem;
		}
		.site-header__category-trigger {
			width: 2.75rem;
			min-width: 2.75rem;
			height: 2.75rem;
			min-height: 2.75rem;
			padding: 0.28rem;
			border-radius: 0.65rem;
		}
		.site-header__category-trigger > span:not(.site-header__category-icon) {
			display: none;
		}
		.site-header__category-icon {
			width: 1.7rem;
			height: 1.7rem;
		}
		.site-header .site-header__location {
			flex-basis: 2.75rem;
			width: 2.75rem;
			min-width: 2.75rem;
			height: 2.75rem;
			min-height: 2.75rem;
			padding: 0.45rem;
		}
		.site-header__location-icon {
			width: 1.5rem;
			height: 1.5rem;
			background: transparent;
		}
		.site-header__action,
		.site-header__search-trigger {
			width: 2.75rem;
			min-width: 2.75rem;
			height: 2.75rem;
			min-height: 2.75rem;
			padding: 0.45rem;
		}
		.site-header__express nav {
			gap: 0.15rem;
		}
		.site-header__action > :is(img, .icono-interfaz) {
			width: 1.25rem;
			height: 1.25rem;
		}
		.site-header__action--more {
			display: inline-flex;
		}
		.category-menu {
			right: 0.75rem;
			left: 0.75rem;
			max-height: calc(100dvh - var(--header-height) - 0.5rem);
		}
		.category-menu__header {
			padding: 1rem;
		}
		.category-menu__catalogue {
			padding: 1rem;
		}
		.category-menu__section-heading {
			align-items: flex-start;
			flex-direction: column;
			gap: 0.35rem;
		}
		.category-menu__grid {
			grid-template-columns: 1fr;
		}
		.category-menu__navigation {
			grid-template-columns: 1fr;
			padding: 1rem;
		}
		.header-more-menu {
			right: 0.75rem;
			width: min(calc(100% - 1.5rem), 27rem);
		}
		.catalogue-toolbar {
			gap: 0.75rem;
		}
		.catalogue-toolbar__actions {
			display: grid;
			grid-template-columns: minmax(0, 1fr) repeat(3, auto);
			gap: 0.4rem;
		}
		.catalogue-toolbar__actions > * {
			margin: 0;
		}
		.catalogue-toolbar__actions .select-square,
		.catalogue-toolbar__actions select {
			width: 100%;
			min-width: 0;
		}
		.catalogue-toolbar__actions .catalogue-view-toggle {
			width: 2.75rem;
			min-width: 2.75rem;
			padding: 0.55rem;
		}
		.catalogue-toolbar__actions .button-filter {
			width: auto;
			min-width: 4.75rem;
			padding: 0.55rem 0.65rem;
		}
		.catalogue-empty__actions {
			align-items: stretch;
			flex-direction: column;
			width: min(100%, 18rem);
		}
		.product-card__media {
			aspect-ratio: 16 / 11;
		}
		.product-related .product-card {
			max-width: 100%;
		}
		.site-footer .footer-list {
			grid-template-columns: 1fr 1fr;
		}
		.site-footer .footer-secondary {
			align-items: flex-start;
			flex-direction: column;
			gap: 1rem;
		}
		.contact-page {
			padding-inline: 0.75rem;
		}
		.contact-heading,
		.contact-page .contacto-container {
			padding: 1.75rem;
		}
		.contact-heading__steps {
			grid-template-columns: 1fr;
		}
		.contact-heading__steps li {
			grid-template-columns: 2.75rem minmax(0, 1fr);
		}
		.contact-form__fields,
		.contact-form__actions {
			grid-template-columns: 1fr;
		}
		.contact-form__actions .btn1-1 {
			width: 100%;
		}
	}

	@media (width <= 380px) {
		.site-header {
			gap: 0.2rem;
			padding: 0.4rem 0.6rem;
		}
		.site-header__main,
		.site-header__express nav {
			gap: 0.1rem;
		}
		.site-header .site-header__brand img {
			width: 4.5rem;
		}
		.site-footer .footer-list {
			grid-template-columns: 1fr;
		}
	}

	+

/* Centro de notificaciones de ecommerce */
.ecommerce-notificaciones {
		position: relative;
	}
	.ecommerce-notificaciones__trigger > .ecommerce-notificaciones__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ecommerce-notificaciones__icon svg {
		width: 1.4rem;
		height: 1.4rem;
		fill: none;
		stroke: currentcolor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.ecommerce-notificaciones__counter {
		position: absolute;
		top: -0.6rem;
		right: -0.65rem;
		min-width: 1.15rem;
		height: 1.15rem;
		padding: 0 0.2rem;
		border: 2px solid var(--surface);
		border-radius: 1rem;
		background: var(--danger);
		color: var(--text-inverse);
		font-size: 0.6rem;
		font-weight: 800;
		line-height: 0.9rem;
		text-align: center;
	}
	.ecommerce-notificaciones__panel {
		position: absolute;
		top: calc(100% + 0.75rem);
		right: 0;
		z-index: 55;
		width: min(27rem, calc(100vw - 2rem));
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.ecommerce-notificaciones__panel > header {
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: auto;
		height: auto;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid var(--border-soft);
		background: var(--surface);
	}
	.ecommerce-notificaciones__panel > header > div {
		display: flex;
		flex-direction: column;
		gap: 0.08rem;
	}
	.ecommerce-notificaciones__panel > header strong {
		font-size: 0.9rem;
	}
	.ecommerce-notificaciones__panel > header small {
		color: var(--text-secondary);
		font-size: 0.7rem;
	}
	.ecommerce-notificaciones__panel > header button {
		border: 0;
		background: transparent;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 750;
	}
	.ecommerce-notificaciones__list {
		display: flex;
		flex-direction: column;
		max-height: 28rem;
		overflow-y: auto;
	}
	.ecommerce-notificaciones__list > p {
		padding: 2rem 1rem;
		color: var(--text-secondary);
		text-align: center;
	}
	.ecommerce-notificacion {
		display: grid;
		grid-template-columns: 0.55rem minmax(0, 1fr);
		gap: 0.65rem;
		align-items: start;
		min-width: 0;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--border-soft);
		color: inherit;
	}
	.ecommerce-notificacion:hover,
	.ecommerce-notificacion:focus-visible,
	.ecommerce-notificacion.is-unread {
		background: var(--surface-soft);
	}
	.ecommerce-notificacion__indicator {
		width: 0.55rem;
		height: 0.55rem;
		margin-top: 0.25rem;
		border-radius: 50%;
		background: var(--text-secondary);
	}
	.ecommerce-notificacion.nivel-exito .ecommerce-notificacion__indicator {
		background: var(--success);
	}
	.ecommerce-notificacion.nivel-advertencia .ecommerce-notificacion__indicator {
		background: var(--warning);
	}
	.ecommerce-notificacion.nivel-critica .ecommerce-notificacion__indicator {
		background: var(--danger);
	}
	.ecommerce-notificacion > span:last-child {
		display: flex;
		flex-direction: column;
		gap: 0.12rem;
		min-width: 0;
	}
	.ecommerce-notificacion strong,
	.ecommerce-notificacion > span > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ecommerce-notificacion strong {
		font-size: 0.78rem;
	}
	.ecommerce-notificacion > span > span,
	.ecommerce-notificacion small {
		color: var(--text-secondary);
		font-size: 0.68rem;
	}
	.ecommerce-notificacion.is-unread strong {
		color: var(--brand-text);
	}
	.ecommerce-notificaciones__center {
		display: block;
		padding: 0.7rem 1rem;
		background: var(--surface-soft);
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 750;
		text-align: center;
	}
	.sidebar-user__notification-icon {
		display: inline-grid;
		flex: 0 0 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
		place-items: center;
		color: var(--text-secondary);
		font-size: 0.55rem;
	}

	.cuenta-notificaciones {
		padding: clamp(1.25rem, 3vw, 2.5rem);
		background: var(--surface-muted);
	}
	.cuenta-notificaciones__heading {
		position: static;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
		width: auto;
		height: auto;
		margin-bottom: 1rem;
		padding: 0;
		background: transparent;
	}
	.cuenta-notificaciones__heading p {
		margin: 0 0 0.15rem;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.cuenta-notificaciones__heading h1 {
		margin: 0 0 0.3rem;
		font-size: clamp(1.65rem, 3vw, 2.25rem);
	}
	.cuenta-notificaciones__heading span {
		color: var(--text-secondary);
		font-size: 0.85rem;
	}
	.cuenta-notificaciones__saved {
		margin-bottom: 1rem;
		padding: 0.7rem 1rem;
		border: 1px solid var(--success);
		border-radius: 0.65rem;
		background: var(--surface);
		color: var(--success);
	}
	.cuenta-notificaciones__layout {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
		gap: 1rem;
		align-items: start;
	}
	.cuenta-notificaciones__activity,
	.cuenta-notificaciones__preferences {
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}
	.cuenta-notificaciones__section-heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 1.1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.cuenta-notificaciones__section-heading > div {
		display: flex;
		flex-direction: column;
		gap: 0.12rem;
	}
	.cuenta-notificaciones__section-heading h2 {
		margin: 0;
		font-size: 1.05rem;
	}
	.cuenta-notificaciones__section-heading span {
		color: var(--text-secondary);
		font-size: 0.72rem;
	}
	.cuenta-notificaciones__empty {
		padding: 3rem 1rem;
		text-align: center;
	}
	.cuenta-notificaciones__empty p {
		margin-top: 0.25rem;
		color: var(--text-secondary);
	}
	.cuenta-notificaciones__list {
		display: flex;
		flex-direction: column;
	}
	.cuenta-notificacion {
		display: grid;
		grid-template-columns: 0.55rem minmax(0, 1fr) auto;
		gap: 0.7rem;
		align-items: start;
		padding: 0.9rem 1.1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.cuenta-notificacion:last-child {
		border-bottom: 0;
	}
	.cuenta-notificacion.is-unread {
		background: var(--surface-soft);
	}
	.cuenta-notificacion__indicator {
		width: 0.55rem;
		height: 0.55rem;
		margin-top: 0.3rem;
		border-radius: 50%;
		background: var(--text-secondary);
	}
	.cuenta-notificacion.nivel-exito .cuenta-notificacion__indicator {
		background: var(--success);
	}
	.cuenta-notificacion.nivel-advertencia .cuenta-notificacion__indicator {
		background: var(--warning);
	}
	.cuenta-notificacion.nivel-critica .cuenta-notificacion__indicator {
		background: var(--danger);
	}
	.cuenta-notificacion > div {
		display: flex;
		flex-direction: column;
		gap: 0.18rem;
		min-width: 0;
	}
	.cuenta-notificacion > div > a {
		color: var(--text-primary);
		font-size: 0.86rem;
		font-weight: 800;
	}
	.cuenta-notificacion > div > p {
		margin: 0;
		color: var(--text-secondary);
		font-size: 0.75rem;
		line-height: 1.4;
	}
	.cuenta-notificacion > div > small {
		color: var(--text-secondary);
		font-size: 0.66rem;
	}
	.cuenta-notificacion__actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.25rem;
	}
	.cuenta-notificacion__actions button {
		border: 0;
		background: transparent;
		color: var(--brand-text);
		font-size: 0.66rem;
		font-weight: 700;
		white-space: nowrap;
	}
	.cuenta-notificaciones__preference-list {
		display: flex;
		flex-direction: column;
	}
	.cuenta-notificaciones__preference {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 0.7rem;
		align-items: center;
		padding: 0.8rem 1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.cuenta-notificaciones__preference > div {
		display: flex;
		flex-direction: column;
		gap: 0.12rem;
		min-width: 0;
	}
	.cuenta-notificaciones__preference strong {
		font-size: 0.78rem;
	}
	.cuenta-notificaciones__preference span {
		color: var(--text-secondary);
		font-size: 0.68rem;
		line-height: 1.35;
	}
	.cuenta-notificaciones__preference label {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		font-size: 0.7rem;
		white-space: nowrap;
	}
	.cuenta-notificaciones__save {
		display: block;
		margin: 1rem 1rem 1rem auto;
	}

	@media (width <= 1100px) {
		.ecommerce-notificaciones__trigger > .ecommerce-notificaciones__icon {
			display: flex;
		}
		.cuenta-notificaciones__layout {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (width <= 700px) {
		.ecommerce-notificaciones__panel {
			position: fixed;
			top: 4.5rem;
			right: 1rem;
			left: 1rem;
			width: auto;
		}
		.cuenta-notificaciones {
			padding: 1rem;
		}
		.cuenta-notificaciones__heading {
			align-items: flex-start;
			flex-direction: column;
		}
		.cuenta-notificacion {
			grid-template-columns: 0.55rem minmax(0, 1fr);
		}
		.cuenta-notificacion__actions {
			grid-column: 2;
			align-items: flex-start;
			flex-direction: row;
		}
		.cuenta-notificaciones__preference {
			grid-template-columns: minmax(0, 1fr) auto auto;
		}
	}

	/* Páginas transaccionales y de soporte con una presentación consistente. */
	.utility-body > .utility-page {
		display: flex;
		min-height: calc(100dvh - var(--header-height));
		padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
		background:
			radial-gradient(
				circle at 10% 8%,
				color-mix(in srgb, var(--brand-primary) 13%, transparent),
				transparent 27rem
			),
			var(--surface-soft);
	}
	.utility-card {
		width: min(100%, 74rem);
		min-height: 0;
		margin: auto;
		padding: clamp(1.5rem, 4vw, 3.25rem);
		overflow-x: auto;
		border: 1px solid var(--border-soft);
		border-radius: 1.5rem;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.utility-card--compact {
		width: min(100%, 42rem);
	}
	.utility-card--centered {
		display: flex;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}
	.utility-heading {
		margin-bottom: clamp(1.5rem, 4vw, 2.4rem);
	}
	.utility-heading h1,
	.reviews-hero h1 {
		margin: 0.25rem 0 0.55rem;
		color: var(--text-primary);
		font-size: clamp(2rem, 4vw, 3.25rem);
		line-height: 1.03;
		letter-spacing: -0.045em;
	}
	.utility-heading > span,
	.utility-heading > div > span {
		display: block;
		max-width: 46rem;
		color: var(--text-secondary);
		line-height: 1.65;
	}
	.utility-heading--centered {
		max-width: 40rem;
		text-align: center;
	}
	.utility-heading--row {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.utility-card__content {
		padding-top: 0.5rem;
	}
	.utility-icon {
		display: grid;
		width: 4rem;
		height: 4rem;
		margin-bottom: 1.25rem;
		place-items: center;
		border-radius: 1.2rem;
		background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
		color: var(--brand-text);
		font-size: 1.65rem;
		font-weight: 900;
		box-shadow: var(--shadow-sm);
	}
	.utility-icon--payment {
		border-radius: 50%;
	}
	.utility-status-copy {
		max-width: 32rem;
		color: var(--text-secondary);
		font-size: 1rem;
		line-height: 1.7;
	}
	.utility-back-link,
	.utility-note a {
		color: var(--brand-text);
		font-weight: 800;
	}
	.utility-back-link {
		display: inline-flex;
		margin-top: 1.5rem;
		padding: 0.7rem 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 999px;
	}
	.utility-note {
		max-width: 38rem;
		margin-top: 1.5rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--border-soft);
		color: var(--text-secondary);
		font-size: 0.82rem;
		line-height: 1.55;
		text-align: center;
	}
	.payment-card:has(> .utility-icon--payment) {
		width: min(100%, 50rem);
	}
	.payment-search {
		width: min(100%, 30rem);
		gap: 1rem;
	}
	.payment-search > .input-square,
	.payment-search > button {
		width: 100%;
	}
	.payment-card > form:not(.payment-search) {
		min-width: 0;
	}
	.payment-card .table-admin {
		min-width: 48rem;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		box-shadow: none;
	}
	.cart-page__card {
		width: min(100%, 80rem);
	}
	.cart-page__content {
		width: 100%;
	}

	/* Reseñas comerciales. */
	.reviews-page {
		min-height: calc(100dvh - var(--header-height));
		background: var(--surface-soft);
	}
	.reviews-hero {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr);
		gap: clamp(2rem, 6vw, 6rem);
		padding: clamp(4rem, 9vw, 8rem) max(1rem, calc((100vw - 82rem) / 2));
		background: radial-gradient(circle at 90% 20%, rgb(0 220 165 / 13%), transparent 24rem), var(--color1-2);
	}
	.reviews-hero > div:first-child {
		max-width: 42rem;
	}
	.reviews-hero h1 {
		color: var(--text-inverse);
		font-size: clamp(2.8rem, 6vw, 5rem);
	}
	.reviews-hero > div:first-child > span {
		display: block;
		max-width: 38rem;
		color: rgb(255 255 255 / 72%);
		font-size: 1.05rem;
		line-height: 1.75;
	}
	.reviews-summary {
		display: grid;
		grid-template-columns: minmax(8rem, 0.65fr) minmax(13rem, 1fr);
		gap: 2rem;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		border: 1px solid rgb(255 255 255 / 14%);
		border-radius: 1.5rem;
		background: rgb(255 255 255 / 8%);
		box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 16%);
		backdrop-filter: blur(1rem);
	}
	.reviews-summary__score {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}
	.reviews-summary__score strong {
		color: var(--text-inverse);
		font-size: 4rem;
		line-height: 1;
	}
	.reviews-summary__score div,
	.reviews-card__rating {
		color: #f6bd3c;
		letter-spacing: 0.08em;
	}
	.reviews-summary__score small {
		margin-top: 0.5rem;
		color: rgb(255 255 255 / 65%);
	}
	.reviews-summary__distribution {
		display: grid;
		align-content: center;
		gap: 0.6rem;
	}
	.reviews-summary__row {
		display: grid;
		align-items: center;
		grid-template-columns: 2rem minmax(5rem, 1fr) 2.5rem;
		gap: 0.6rem;
		color: rgb(255 255 255 / 72%);
	}
	.reviews-summary__row > div {
		height: 0.5rem;
		overflow: hidden;
		border-radius: 999px;
		background: rgb(255 255 255 / 15%);
	}
	.reviews-summary__row span {
		display: block;
		max-width: 100%;
		height: 100%;
		border-radius: inherit;
		background: var(--brand-primary);
	}
	.reviews-content {
		padding: clamp(3.5rem, 8vw, 7rem) max(1rem, calc((100vw - 82rem) / 2));
	}
	.reviews-content > header {
		max-width: 46rem;
		margin-bottom: 2.5rem;
	}
	.reviews-content h2 {
		margin-top: 0.25rem;
		font-size: clamp(2rem, 4vw, 3.25rem);
		line-height: 1.08;
		letter-spacing: -0.04em;
	}
	.reviews-grid {
		align-items: stretch;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
	.reviews-card {
		align-items: stretch;
		min-height: 14rem;
		padding: 1.5rem;
		border-color: var(--border-soft);
		border-radius: 1.2rem;
		box-shadow: var(--shadow-sm);
	}
	.reviews-card > header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
	}
	.reviews-card > header p {
		color: var(--text-primary);
		font-size: 1rem;
		font-weight: 850;
	}
	.reviews-card > header small {
		color: var(--text-secondary);
		font-size: 0.72rem;
	}
	.reviews-card > p {
		margin-top: 1.5rem;
		color: var(--text-secondary);
		line-height: 1.75;
	}

	@media (width <= 72rem) {
		.reviews-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (width <= 58rem) {
		.reviews-hero {
			grid-template-columns: minmax(0, 1fr);
		}
		.reviews-summary {
			width: min(100%, 38rem);
		}
	}

	@media (width <= 42rem) {
		.utility-body > .utility-page {
			padding: 1.25rem 0.8rem 2.5rem;
		}
		.utility-card {
			padding: 1.35rem;
			border-radius: 1.15rem;
		}
		.utility-heading--row,
		.reviews-summary {
			align-items: flex-start;
			grid-template-columns: minmax(0, 1fr);
			flex-direction: column;
		}
		.reviews-hero {
			padding-block: 3.5rem;
		}
		.reviews-hero h1 {
			font-size: clamp(2.6rem, 14vw, 4rem);
		}
		.reviews-summary__distribution {
			width: 100%;
		}
		.reviews-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* Cuenta comercial: disponible como base compartida y adoptada primero por utomaki.com. */
	.account-menu {
		padding: 0;
		overflow: hidden auto;
		border: 1px solid var(--border-soft);
		border-top: 0;
		background: var(--surface);
	}
	.account-menu__heading {
		display: grid;
		align-items: center;
		grid-template-columns: 3.4rem minmax(0, 1fr);
		gap: 0.85rem;
		padding: 1.15rem;
		border-bottom: 1px solid var(--border-soft);
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--brand-primary) 13%, var(--surface)),
			var(--surface)
		);
	}
	.account-menu__avatar {
		display: grid;
		width: 3.4rem;
		height: 3.4rem;
		overflow: hidden;
		place-items: center;
		border: 0.18rem solid var(--surface);
		border-radius: 1rem;
		background: var(--surface-soft);
		box-shadow: var(--shadow-sm);
	}
	.account-menu__avatar :is(img, .icono-interfaz) {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.account-menu__avatar--fallback :is(img, .icono-interfaz) {
		width: 1.65rem;
		height: 1.65rem;
		filter: opacity(0.6);
		object-fit: contain;
	}
	.account-menu__heading > div:last-child {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}
	.account-menu__heading p {
		margin: 0 0 0.12rem;
		color: var(--brand-text);
		font-size: 0.65rem;
		font-weight: 850;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}
	.account-menu__heading h2 {
		overflow: hidden;
		font-size: 1rem;
		line-height: 1.25;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.account-menu__heading small {
		overflow: hidden;
		color: var(--text-secondary);
		font-size: 0.68rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.account-menu__navigation {
		display: grid;
		gap: 0.35rem;
		padding: 0.75rem;
	}
	.account-menu__navigation > a {
		display: grid;
		align-items: center;
		grid-template-columns: 2.55rem minmax(0, 1fr);
		gap: 0.75rem;
		padding: 0.7rem;
		border: 1px solid transparent;
		border-radius: 0.8rem;
		color: var(--text-primary);
	}
	.account-menu__navigation > a:hover,
	.account-menu__navigation > a:focus-visible {
		border-color: var(--border-soft);
		background: var(--surface-soft);
		transform: translateX(0.12rem);
	}
	.account-menu__icon {
		display: grid;
		width: 2.55rem;
		height: 2.55rem;
		place-items: center;
		border-radius: 0.75rem;
		background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
	}
	.account-menu__icon :is(img, .icono-interfaz) {
		width: 1.25rem;
		height: 1.25rem;
		filter: opacity(0.7);
		object-fit: contain;
	}
	.account-menu__icon--notification {
		color: var(--brand-primary);
		font-size: 0.72rem;
	}
	.account-menu__navigation a > span:last-child {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.08rem;
	}
	.account-menu__navigation strong {
		font-size: 0.8rem;
	}
	.account-menu__navigation small {
		color: var(--text-secondary);
		font-size: 0.68rem;
	}
	.account-menu__logout {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.85rem 1rem;
		border-top: 1px solid var(--border-soft);
		background: var(--surface-soft);
		color: var(--danger);
		font-size: 0.74rem;
		font-weight: 800;
	}
	.account-menu__logout :is(img, .icono-interfaz) {
		width: 1rem;
		height: 1rem;
		filter: opacity(0.75);
	}

	.auth-body > .auth-page {
		display: flex;
		min-height: calc(100dvh - var(--header-height));
		padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem);
		background:
			radial-gradient(
				circle at 12% 12%,
				color-mix(in srgb, var(--brand-primary) 15%, transparent),
				transparent 25rem
			),
			linear-gradient(145deg, var(--surface-soft), var(--surface) 65%);
	}
	.auth-layout {
		display: grid;
		align-items: stretch;
		grid-template-columns: minmax(19rem, 0.85fr) minmax(24rem, 1.15fr);
		width: min(100%, 72rem);
		margin: auto;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: clamp(1.2rem, 2.5vw, 2rem);
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.auth-layout--wide {
		grid-template-columns: minmax(20rem, 0.65fr) minmax(32rem, 1.35fr);
		width: min(100%, 86rem);
	}
	.auth-intro {
		position: relative;
		display: flex;
		justify-content: center;
		padding: clamp(2.2rem, 5vw, 4.5rem);
		overflow: hidden;
		flex-direction: column;
		background:
			radial-gradient(circle at 110% -10%, rgb(0 221 151 / 26%), transparent 18rem), var(--brand-secondary);
		color: rgb(255 255 255 / 76%);
	}
	.auth-intro::after {
		position: absolute;
		right: -9rem;
		bottom: -10rem;
		width: 22rem;
		height: 22rem;
		border: 1px solid rgb(255 255 255 / 12%);
		border-radius: 50%;
		content: '';
	}
	.auth-eyebrow,
	.account-eyebrow {
		margin: 0 0 0.35rem;
		color: var(--brand-text);
		font-size: 0.68rem;
		font-weight: 850;
		letter-spacing: 0.085em;
		text-transform: uppercase;
	}
	.auth-intro .auth-eyebrow {
		color: var(--brand-primary);
	}
	.auth-intro h2 {
		max-width: 31rem;
		color: var(--text-inverse);
		font-size: clamp(2rem, 3.6vw, 3.4rem);
		letter-spacing: -0.045em;
		line-height: 1.02;
	}
	.auth-intro > p:not(.auth-eyebrow) {
		max-width: 31rem;
		margin-top: 1.2rem;
		font-size: 0.92rem;
		line-height: 1.7;
	}
	.auth-intro ul {
		display: grid;
		gap: 0.75rem;
		margin: 2rem 0 0;
		padding: 0;
		list-style: none;
	}
	.auth-intro li {
		position: relative;
		padding-left: 1.35rem;
		font-size: 0.8rem;
		font-weight: 700;
	}
	.auth-intro li::before {
		position: absolute;
		top: 0.25rem;
		left: 0;
		display: grid;
		width: 0.8rem;
		height: 0.8rem;
		place-items: center;
		border-radius: 50%;
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
		font-size: 0.52rem;
		content: '\2713';
	}
	.auth-card {
		display: flex;
		justify-content: center;
		padding: clamp(2rem, 5vw, 4rem);
		flex-direction: column;
		background: var(--surface);
	}
	.auth-card--register {
		padding-block: clamp(2rem, 4vw, 3.5rem);
	}
	.auth-card__heading {
		margin-bottom: 1.6rem;
	}
	.auth-card__heading h1 {
		margin-bottom: 0.45rem;
		font-size: clamp(2rem, 4vw, 3rem);
		letter-spacing: -0.035em;
	}
	.auth-card__heading > span {
		display: block;
		max-width: 34rem;
		color: var(--text-secondary);
		font-size: 0.84rem;
		line-height: 1.55;
	}
	.auth-form {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 0.85rem;
	}
	.auth-form .input-square,
	.auth-form .select-square,
	.auth-verification-form .input-square {
		width: 100%;
		margin: 0;
	}
	.auth-form__submit {
		width: 100%;
		min-height: 3.15rem;
		margin-top: 0.3rem;
		border-radius: 0.85rem;
	}
	.auth-form__links {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 0.2rem;
	}
	.auth-form__links a,
	.auth-form__actions a,
	.auth-back-link {
		color: var(--brand-text);
		font-size: 0.74rem;
		font-weight: 750;
	}
	.auth-divider {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		margin: 1.3rem 0;
		color: var(--text-secondary);
		font-size: 0.68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	.auth-divider::before,
	.auth-divider::after {
		flex: 1 1 auto;
		height: 1px;
		background: var(--border-soft);
		content: '';
	}
	.auth-social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.65rem;
		flex-direction: column;
	}
	.auth-social--register {
		min-height: 2.6rem;
	}
	.auth-provider-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.7rem;
		width: 250px;
		max-width: 100%;
		min-height: 40px;
		padding: 0.55rem 0.9rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.3rem;
		font-family: Arial, sans-serif;
		font-size: 0.78rem;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
	}
	.auth-provider-button__mark {
		font-size: 1rem;
		font-weight: 850;
	}
	.auth-provider-button--facebook {
		border-color: #1877f2;
		background: #1877f2;
		color: white;
	}
	.auth-provider-button--facebook:disabled {
		cursor: wait;
		opacity: 0.65;
	}
	.auth-security {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		margin-top: 1.6rem;
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
	}
	.auth-security > span {
		display: grid;
		flex: 0 0 1.8rem;
		width: 1.8rem;
		height: 1.8rem;
		place-items: center;
		border-radius: 50%;
		background: color-mix(in srgb, var(--success) 12%, var(--surface));
		color: var(--success);
		font-size: 0.75rem;
		font-weight: 900;
	}
	.auth-security p {
		display: flex;
		margin: 0;
		flex-direction: column;
		gap: 0.08rem;
	}
	.auth-security strong {
		font-size: 0.72rem;
	}
	.auth-security small {
		color: var(--text-secondary);
		font-size: 0.66rem;
		line-height: 1.4;
	}
	.auth-form__fields {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}
	.auth-terms {
		align-items: flex-start;
		margin: 1rem 0;
		padding: 0.9rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.8rem;
		background: var(--surface-soft);
	}
	.auth-form__actions,
	.feedback-actions,
	.account-form-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1rem;
		margin-top: 0.5rem;
	}
	.auth-alert,
	.account-alert {
		margin-bottom: 1rem;
		padding: 0.8rem 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.75rem;
		background: var(--surface);
		color: var(--text-secondary);
		font-size: 0.78rem;
	}
	.auth-alert--error {
		border-color: color-mix(in srgb, var(--danger) 35%, var(--border-soft));
		background: color-mix(in srgb, var(--danger) 5%, var(--surface));
		color: var(--danger);
	}
	.auth-recovery-options {
		margin-top: 1rem;
	}
	.auth-recovery-option {
		display: flex;
		width: 100%;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.8rem;
		background: var(--surface-soft);
		color: var(--text-primary);
		text-align: left;
		flex-direction: column;
		gap: 0.2rem;
	}
	.auth-recovery-option:hover {
		border-color: var(--brand-primary);
		background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
	}
	.auth-recovery-option small,
	.auth-form__description {
		color: var(--text-secondary);
		font-size: 0.75rem;
		line-height: 1.5;
	}
	.auth-back-link {
		display: inline-flex;
		margin-top: 1.2rem;
	}
	.auth-verification-form {
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
	}
	.auth-verification-form button:not(.btn-help) {
		min-height: 3rem;
		border-radius: 0.8rem;
	}
	.auth-card--mfa .auth-form {
		align-items: stretch;
	}
	.auth-qr {
		width: min(100%, 14rem);
		margin: 0.5rem auto;
		padding: 0.55rem;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}
	.auth-mfa-complete {
		display: flex;
		align-items: stretch;
		flex-direction: column;
	}
	.auth-success-icon {
		display: grid;
		width: 3.5rem;
		height: 3.5rem;
		margin-bottom: 1rem;
		place-items: center;
		border-radius: 1rem;
		background: color-mix(in srgb, var(--success) 10%, var(--surface));
	}
	.auth-success-icon :is(img, .icono-interfaz) {
		width: 1.8rem;
	}
	.auth-recovery-codes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.9rem;
		background: var(--surface-soft);
	}
	.auth-recovery-codes code {
		padding: 0.45rem;
		border-radius: 0.45rem;
		background: var(--surface);
		font-size: 0.8rem;
		text-align: center;
	}
	.auth-warning {
		margin: 1rem 0;
		padding: 0.8rem;
		border-left: 0.2rem solid var(--warning);
		background: color-mix(in srgb, var(--warning) 7%, var(--surface));
		font-size: 0.75rem;
		line-height: 1.5;
	}

	.account-body > .account-layout {
		display: grid;
		align-items: start;
		grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
		min-height: calc(100dvh - var(--header-height));
		background: var(--surface-muted);
	}
	.account-layout > .account-sidebar {
		position: sticky;
		top: var(--header-height);
		display: flex;
		align-self: start;
		width: 100%;
		max-width: none;
		min-height: calc(100dvh - var(--header-height));
		padding: 1rem;
		border-right: 1px solid var(--border-soft);
		background: var(--surface);
		text-align: left;
		flex-direction: column;
	}
	.account-sidebar__profile {
		display: grid;
		align-items: center;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: 0.85rem;
		padding: 0.75rem 0.65rem 1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.account-sidebar__photo {
		position: relative;
		display: grid;
		width: 4.5rem;
		height: 4.5rem;
		padding: 0;
		overflow: hidden;
		place-items: center;
		border: 0.18rem solid var(--surface);
		border-radius: 1.25rem;
		background: var(--surface-soft);
		box-shadow: var(--shadow-sm);
	}
	.account-sidebar__photo > :is(img, .icono-interfaz) {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.account-sidebar__photo--fallback > :is(img, .icono-interfaz) {
		width: 2rem;
		height: 2rem;
		filter: opacity(0.55);
		object-fit: contain;
	}
	.account-sidebar__photo > span {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0.28rem;
		background: rgb(10 34 27 / 78%);
		color: white;
		font-size: 0.55rem;
		font-weight: 750;
		text-align: center;
		opacity: 0;
		transition: opacity 0.16s ease;
	}
	.account-sidebar__photo:hover > span,
	.account-sidebar__photo:focus-visible > span {
		opacity: 1;
	}
	.account-sidebar__profile > div {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.1rem;
	}
	.account-sidebar__profile strong,
	.account-sidebar__profile small,
	.account-sidebar__profile span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.account-sidebar__profile strong {
		font-size: 0.88rem;
	}
	.account-sidebar__profile small,
	.account-sidebar__profile span {
		color: var(--text-secondary);
		font-size: 0.65rem;
	}
	.account-sidebar nav {
		margin-top: 1rem;
	}
	.account-sidebar__label {
		margin: 0 0 0.45rem;
		padding: 0 0.65rem;
		color: var(--text-secondary);
		font-size: 0.62rem;
		font-weight: 850;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}
	.account-sidebar ul {
		display: grid;
		gap: 0.25rem;
		margin: 0;
		padding: 0;
	}
	.account-sidebar nav li,
	.account-sidebar .sidebar-user-active {
		display: block;
		width: 100%;
		padding: 0;
		border-radius: 0.75rem;
		list-style: none;
	}
	.account-sidebar nav a {
		display: grid;
		align-items: center;
		grid-template-columns: 2.2rem minmax(0, 1fr);
		gap: 0.65rem;
		width: 100%;
		padding: 0.58rem 0.65rem;
		border: 1px solid transparent;
		border-radius: 0.75rem;
		color: var(--text-secondary);
		text-align: left;
	}
	.account-sidebar nav a:hover {
		border-color: var(--border-soft);
		background: var(--surface-soft);
		color: var(--text-primary);
	}
	.account-sidebar nav a > span {
		display: grid;
		width: 2.2rem;
		height: 2.2rem;
		place-items: center;
		border-radius: 0.65rem;
		background: var(--surface-soft);
	}
	.account-sidebar nav a :is(img, .icono-interfaz) {
		width: 1.1rem;
		height: 1.1rem;
		filter: opacity(0.58);
		object-fit: contain;
	}
	.account-sidebar nav a p {
		margin: 0;
		font-size: 0.76rem;
		font-weight: 750;
	}
	.account-sidebar .sidebar-user-active {
		background: transparent;
	}
	.account-sidebar .sidebar-user-active a {
		border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-soft));
		background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface));
		color: var(--brand-secondary);
	}
	.account-sidebar .sidebar-user-active a > span {
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
	}
	.account-sidebar .sidebar-user-active :is(img, .icono-interfaz) {
		filter: brightness(0) saturate(100%);
	}
	.account-sidebar__logout {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		margin-top: auto;
		padding: 0.75rem;
		border-top: 1px solid var(--border-soft);
		color: var(--danger);
		font-size: 0.72rem;
		font-weight: 750;
	}
	.account-sidebar__logout :is(img, .icono-interfaz) {
		width: 1rem;
		height: 1rem;
		filter: opacity(0.7);
	}
	.account-layout > .account-main {
		width: 100%;
		min-height: calc(100dvh - var(--header-height));
		padding: clamp(1.25rem, 3vw, 2.75rem);
		overflow: visible;
		border: 0;
		background: transparent;
	}
	.account-heading {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
		margin-bottom: 1.35rem;
	}
	.account-heading > div {
		min-width: 0;
	}
	.account-heading h1 {
		margin-bottom: 0.3rem;
		font-size: clamp(1.8rem, 3vw, 2.55rem);
		letter-spacing: -0.035em;
	}
	.account-heading > div > span {
		display: block;
		max-width: 48rem;
		color: var(--text-secondary);
		font-size: 0.84rem;
		line-height: 1.55;
	}
	.account-heading__action,
	.account-panel__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.7rem;
		padding: 0.65rem 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.75rem;
		background: var(--surface);
		color: var(--brand-text);
		font-size: 0.74rem;
		font-weight: 800;
		white-space: nowrap;
	}
	.account-heading__action:hover,
	.account-panel__action:hover {
		border-color: var(--brand-primary);
		box-shadow: var(--shadow-sm);
	}
	.account-heading__action--primary {
		border-color: var(--brand-primary);
		background: var(--brand-primary);
		color: var(--brand-primary-contrast);
	}
	.account-sections,
	.account-record-list,
	.account-subscription-list,
	.account-payment-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.account-panel,
	.account-record,
	.account-subscription,
	.account-payment-card {
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}
	.account-panel {
		overflow: hidden;
	}
	.account-panel__heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.15rem 1.25rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.account-panel__heading h2 {
		font-size: 1.1rem;
	}
	.account-panel__heading > div > span {
		display: block;
		margin-top: 0.18rem;
		color: var(--text-secondary);
		font-size: 0.72rem;
	}
	.account-profile-form,
	.account-email-preferences {
		padding: 1.25rem;
	}
	.account-form-actions {
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
	}
	.account-form-actions a {
		color: var(--text-secondary);
		font-size: 0.74rem;
		font-weight: 750;
	}
	.account-email-preferences > form {
		display: grid;
		gap: 0.65rem;
	}
	.account-settings-list {
		display: flex;
		flex-direction: column;
	}
	.account-setting {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.account-setting:last-child {
		border-bottom: 0;
	}
	.account-setting__copy {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.18rem;
	}
	.account-setting__title {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}
	.account-setting__title strong {
		font-size: 0.82rem;
	}
	.account-setting__copy small {
		color: var(--text-secondary);
		font-size: 0.7rem;
		line-height: 1.45;
	}
	.account-connected-alert {
		margin: 1rem 1.25rem 0;
		padding: 0.75rem 0.9rem;
		border: 1px solid;
		border-radius: 0.75rem;
		font-size: 0.72rem;
		font-weight: 750;
	}
	.account-provider {
		justify-content: flex-start;
	}
	.account-provider__mark {
		display: grid;
		width: 2.4rem;
		height: 2.4rem;
		flex: 0 0 2.4rem;
		place-items: center;
		border: 1px solid var(--border-soft);
		border-radius: 0.75rem;
		background: var(--surface-soft);
		font-size: 1rem;
		font-weight: 850;
	}
	.account-provider__mark--google {
		color: #4285f4;
	}
	.account-provider__mark--facebook {
		background: #1877f2;
		color: white;
		font-family: Arial, sans-serif;
		font-size: 1.35rem;
	}
	.account-provider .account-setting__copy {
		margin-right: auto;
	}
	.account-provider__status {
		padding: 0.2rem 0.45rem;
		border-radius: 99rem;
		background: var(--surface-soft);
		color: var(--text-secondary);
		font-size: 0.58rem;
		font-weight: 800;
	}
	.account-provider__status--connected {
		background: color-mix(in srgb, var(--success) 12%, var(--surface));
		color: var(--success);
	}
	.account-setting__action,
	.account-link-action {
		border: 0;
		background: transparent;
		color: var(--brand-text);
		font-size: 0.72rem;
		font-weight: 800;
		white-space: nowrap;
	}
	.account-setting__action:hover,
	.account-link-action:hover {
		text-decoration: underline;
		text-underline-offset: 0.2rem;
	}
	.account-setting--danger {
		background: color-mix(in srgb, var(--danger) 3%, var(--surface));
	}
	.account-setting__action--danger,
	.account-link-action--danger {
		color: var(--danger);
	}
	.account-alert--success {
		border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
		background: color-mix(in srgb, var(--success) 5%, var(--surface));
		color: var(--success);
	}
	.account-alert--warning {
		border-color: color-mix(in srgb, var(--warning) 38%, var(--border-soft));
		background: color-mix(in srgb, var(--warning) 6%, var(--surface));
		color: var(--text-primary);
	}
	.account-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 20rem;
		padding: 2rem;
		border: 1px dashed var(--border-soft);
		border-radius: 1rem;
		background: var(--surface);
		text-align: center;
		flex-direction: column;
	}
	.account-empty > span {
		display: grid;
		width: 3.8rem;
		height: 3.8rem;
		margin-bottom: 1rem;
		place-items: center;
		border-radius: 1.1rem;
		background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
		color: var(--brand-secondary);
		font-size: 1.4rem;
		font-weight: 500;
	}
	.account-empty h2 {
		font-size: 1.25rem;
	}
	.account-empty p {
		max-width: 31rem;
		margin: 0.4rem 0 1.2rem;
		color: var(--text-secondary);
		font-size: 0.78rem;
		line-height: 1.5;
	}
	.account-record {
		overflow: hidden;
	}
	.account-record__trigger {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(10rem, 1.5fr) repeat(3, minmax(7rem, 0.8fr)) auto;
		gap: 1rem;
		width: 100%;
		padding: 1rem 1.15rem;
		border: 0;
		background: transparent;
		color: var(--text-primary);
		text-align: left;
	}
	.account-record__trigger:hover {
		background: var(--surface-soft);
	}
	.account-record__identity,
	.account-record__metric {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.15rem;
	}
	.account-record__trigger small,
	.account-subscription__metrics small {
		color: var(--text-secondary);
		font-size: 0.62rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.account-record__trigger strong {
		overflow: hidden;
		font-size: 0.76rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.account-record__identity strong {
		color: var(--brand-text);
		font-size: 0.82rem;
	}
	.account-record__detail {
		padding: 1.15rem;
		border-top: 1px solid var(--border-soft);
		background: var(--surface-soft);
	}
	.account-badge {
		display: inline-flex;
		align-items: center;
		width: fit-content;
		padding: 0.3rem 0.55rem;
		border-radius: 999px;
		background: var(--surface-soft);
		color: var(--text-secondary);
		font-size: 0.62rem;
		font-weight: 800;
		white-space: nowrap;
	}
	.account-badge--success {
		background: color-mix(in srgb, var(--success) 10%, var(--surface));
		color: var(--success);
	}
	.account-favorites {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		place-items: stretch;
	}
	.account-favorites > .account-empty {
		grid-column: 1 / -1;
	}
	.account-payment-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.account-payment-card {
		padding: 1.15rem;
	}
	.account-payment-card--default {
		border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
	}
	.account-payment-card--pending {
		border-style: dashed;
		background: var(--surface-soft);
	}
	.account-payment-card__heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.75rem;
		margin-bottom: 0.35rem;
	}
	.account-payment-card__heading small {
		color: var(--brand-text);
		font-size: 0.6rem;
		font-weight: 850;
		letter-spacing: 0.05em;
	}
	.account-payment-card__heading h2 {
		font-size: 1.05rem;
	}
	.account-payment-card__description {
		margin-bottom: 1rem;
		color: var(--text-secondary);
		font-size: 0.7rem;
		line-height: 1.45;
	}
	.account-payment-card__rename {
		display: flex;
		align-items: flex-end;
		gap: 0.65rem;
		padding: 0.85rem;
		border-radius: 0.75rem;
		background: var(--surface-soft);
	}
	.account-payment-card__field {
		flex: 1 1 auto;
		min-width: 0;
	}
	.account-payment-card__metrics {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
		gap: 1rem;
		margin-top: 1rem;
	}
	.account-payment-card__metrics p {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.25rem;
	}
	.account-payment-card__metrics small {
		color: var(--text-secondary);
		font-size: 0.62rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.account-payment-card__metrics strong {
		font-size: 0.78rem;
		overflow-wrap: anywhere;
	}
	.account-payment-card__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.65rem 1rem;
		margin-top: 0.85rem;
	}
	.account-subscription {
		overflow: hidden;
	}
	.account-subscription__summary {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1fr) auto;
		gap: 1rem;
		padding: 1.15rem 1.25rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.account-subscription__summary-trigger {
		width: 100%;
		border-top: 0;
		border-right: 0;
		border-left: 0;
		background: transparent;
		color: var(--text-primary);
		text-align: left;
	}
	.account-subscription__summary-trigger:hover {
		background: var(--surface-soft);
	}
	.account-subscription__summary-trigger::after {
		align-self: center;
	}
	.account-subscription__identity {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 0.25rem;
	}
	.account-subscription__identity > small {
		color: var(--brand-text);
		font-size: 0.6rem;
		font-weight: 850;
		letter-spacing: 0.06em;
	}
	.account-subscription__identity h2 {
		font-size: 1rem;
	}
	.account-subscription__metrics {
		display: flex;
		gap: 1.5rem;
	}
	.account-subscription__metrics p {
		display: flex;
		margin: 0;
		flex-direction: column;
		gap: 0.12rem;
	}
	.account-subscription__summary-trigger .account-subscription__metrics > span {
		display: flex;
		flex-direction: column;
		gap: 0.12rem;
	}
	.account-subscription__metrics strong {
		font-size: 0.78rem;
	}
	.account-subscription__management {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		gap: 0.2rem;
	}
	.account-subscription__management p {
		color: var(--danger);
		font-size: 0.65rem;
	}
	.account-subscription__billing,
	.account-subscription__products {
		padding: 1.15rem 1.25rem;
	}
	.account-subscription__billing {
		border-bottom: 1px solid var(--border-soft);
		background: var(--surface-soft);
	}
	.account-subscription__section-heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.65rem;
		margin-bottom: 0.85rem;
	}
	.account-subscription__section-heading h3 {
		font-size: 0.95rem;
	}
	.account-subscription__billing-form {
		display: flex;
		align-items: flex-end;
		gap: 0.7rem;
	}
	.account-subscription__billing-form label {
		align-self: center;
		font-size: 0.7rem;
	}
	.account-subscription__billing-form select {
		min-width: 15rem;
	}
	.account-subscription__product {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--border-soft);
	}
	.account-subscription__product:last-child {
		border-bottom: 0;
	}
	.account-subscription__product p {
		font-size: 0.78rem;
	}
	.account-subscription__product small {
		color: var(--text-secondary);
		font-size: 0.66rem;
	}
	.account-main--notifications.cuenta-notificaciones {
		padding: clamp(1.25rem, 3vw, 2.75rem);
	}
	.account-modal {
		border-radius: 1rem;
		box-shadow: var(--shadow-lg);
	}

	.feedback-body > .feedback-page {
		padding: clamp(2rem, 5vw, 5rem) 1rem;
		background:
			radial-gradient(
				circle at 15% 0,
				color-mix(in srgb, var(--brand-primary) 13%, transparent),
				transparent 25rem
			),
			var(--surface-soft);
	}
	.feedback-card {
		width: min(100%, 58rem);
		margin: auto;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		border-radius: 1.5rem;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
	}
	.feedback-heading {
		padding: clamp(1.5rem, 4vw, 2.5rem);
		border-bottom: 1px solid var(--border-soft);
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--brand-primary) 10%, var(--surface)),
			var(--surface)
		);
	}
	.feedback-heading h1 {
		margin-bottom: 0.4rem;
		font-size: clamp(2rem, 5vw, 3.2rem);
	}
	.feedback-heading span,
	.feedback-products > header > span {
		display: block;
		max-width: 42rem;
		color: var(--text-secondary);
		font-size: 0.8rem;
		line-height: 1.5;
	}
	.feedback-form {
		display: flex;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		flex-direction: column;
		gap: 1rem;
	}
	.feedback-overall {
		padding: 1.2rem;
		border: 1px solid var(--border-soft);
		border-radius: 1rem;
		background: var(--surface-soft);
	}
	.feedback-overall h2,
	.feedback-products h2 {
		font-size: 1.15rem;
	}
	.feedback-overall > p {
		margin: 0.2rem 0 0.8rem;
		color: var(--text-secondary);
		font-size: 0.72rem;
	}
	.feedback-overall .textarea-main,
	.feedback-product .textarea-main {
		width: 100%;
		margin-top: 1rem;
	}
	.feedback-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.9rem 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.8rem;
		background: var(--surface);
		color: var(--brand-text);
		font-size: 0.78rem;
		font-weight: 800;
	}
	.feedback-toggle:hover {
		border-color: var(--brand-primary);
		background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
	}
	.feedback-products {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}
	.feedback-products > header {
		margin-bottom: 0.35rem;
	}
	.feedback-product {
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.9rem;
	}
	.feedback-product__summary {
		display: grid;
		align-items: center;
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: 0.8rem;
		margin-bottom: 0.8rem;
		color: var(--text-primary);
	}
	.feedback-product__summary :is(img, .icono-interfaz) {
		width: 4rem;
		height: 4rem;
		border: 1px solid var(--border-soft);
		border-radius: 0.75rem;
		object-fit: cover;
	}
	.feedback-product__summary div {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}
	.feedback-product__summary strong {
		font-size: 0.82rem;
	}
	.feedback-product__summary small {
		color: var(--text-secondary);
		font-size: 0.68rem;
	}
	.feedback-actions {
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
	}
	.feedback-actions > a {
		color: var(--text-secondary);
		font-size: 0.74rem;
		font-weight: 750;
	}

	@media (width <= 72rem) {
		.account-body > .account-layout {
			grid-template-columns: 15rem minmax(0, 1fr);
		}
		.account-record__trigger {
			grid-template-columns: minmax(10rem, 1.4fr) repeat(2, minmax(7rem, 0.8fr)) auto;
		}
		.account-record__metric:nth-of-type(4) {
			display: none;
		}
		.account-payment-list {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (width <= 58rem) {
		.auth-layout,
		.auth-layout--wide {
			grid-template-columns: minmax(0, 1fr);
			max-width: 42rem;
		}
		.auth-intro {
			padding: 2rem;
		}
		.auth-intro h2 {
			font-size: 2rem;
		}
		.auth-intro ul {
			display: none;
		}
		.auth-intro > p:not(.auth-eyebrow) {
			margin-top: 0.65rem;
		}
		.account-body > .account-layout {
			grid-template-columns: minmax(0, 1fr);
		}
		.account-layout > .account-sidebar {
			position: static;
			min-height: 0;
			padding: 0.85rem 1rem;
			border-right: 0;
			border-bottom: 1px solid var(--border-soft);
		}
		.account-sidebar__profile {
			grid-template-columns: 3.5rem minmax(0, 1fr);
			padding: 0 0 0.75rem;
		}
		.account-sidebar__photo {
			width: 3.5rem;
			height: 3.5rem;
		}
		.account-sidebar nav {
			margin-top: 0.75rem;
			overflow-x: auto;
		}
		.account-sidebar__label,
		.account-sidebar__logout {
			display: none;
		}
		.account-sidebar ul {
			display: flex;
			width: max-content;
			min-width: 100%;
		}
		.account-sidebar nav li,
		.account-sidebar .sidebar-user-active {
			width: auto;
		}
		.account-sidebar nav a {
			grid-template-columns: 1.8rem auto;
			padding: 0.45rem 0.6rem;
			white-space: nowrap;
		}
		.account-sidebar nav a > span {
			width: 1.8rem;
			height: 1.8rem;
		}
		.account-subscription__summary {
			grid-template-columns: minmax(0, 1fr) auto;
		}
		.account-subscription__metrics {
			grid-column: 1 / -1;
			grid-row: 2;
		}
		.account-favorites {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (width <= 42rem) {
		.auth-body > .auth-page {
			padding: 1rem 0.75rem 2rem;
		}
		.auth-layout {
			border-radius: 1.2rem;
		}
		.auth-intro {
			padding: 1.4rem;
		}
		.auth-intro h2 {
			font-size: 1.55rem;
		}
		.auth-intro > p:not(.auth-eyebrow) {
			font-size: 0.76rem;
		}
		.auth-card {
			padding: 1.4rem;
		}
		.auth-card__heading h1 {
			font-size: 2rem;
		}
		.auth-form__links,
		.auth-form__actions,
		.feedback-actions,
		.account-form-actions {
			align-items: stretch;
			flex-direction: column;
		}
		.auth-form__links {
			align-items: center;
			flex-direction: row;
		}
		.auth-recovery-codes {
			grid-template-columns: minmax(0, 1fr);
		}
		.account-layout > .account-main,
		.account-main--notifications.cuenta-notificaciones {
			padding: 1rem;
		}
		.account-heading,
		.account-panel__heading {
			align-items: flex-start;
			flex-direction: column;
		}
		.account-heading__action,
		.account-heading > form,
		.account-heading > form .account-heading__action,
		.account-panel__action {
			width: 100%;
		}
		.account-panel__heading,
		.account-profile-form,
		.account-email-preferences {
			padding: 1rem;
		}
		.account-setting {
			align-items: flex-start;
			flex-direction: column;
		}
		.account-record__trigger {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 0.6rem;
		}
		.account-record__metric {
			display: none;
		}
		.account-record__identity {
			grid-column: 1;
		}
		.account-record__trigger > .account-badge {
			grid-column: 1 / -1;
		}
		.account-favorites {
			grid-template-columns: minmax(0, 1fr);
		}
		.account-payment-card__rename,
		.account-subscription__billing-form {
			align-items: stretch;
			flex-direction: column;
		}
		.account-subscription__billing-form select {
			width: 100%;
			min-width: 0;
		}
		.account-subscription__summary {
			grid-template-columns: minmax(0, 1fr);
		}
		.account-subscription__management,
		.account-subscription__metrics {
			align-items: flex-start;
			grid-column: 1;
		}
		.account-subscription__product {
			align-items: flex-start;
			flex-direction: column;
		}
		.feedback-body > .feedback-page {
			padding: 1rem 0.75rem 2rem;
		}
		.feedback-card {
			border-radius: 1.1rem;
		}
		.feedback-heading,
		.feedback-form {
			padding: 1.25rem;
		}
	}
}

@layer states {
	@media (width <= 42rem) {
		.checkout-card .flex-row.mgnH-5 {
			flex-direction: column;
			margin-inline: 0;
		}
		.checkout-card .flex-row.mgnH-5 > :is(.input-square, .select-square) {
			width: 100%;
		}
		.auth-form--register .flex-row.mgnH-5,
		.account-profile-form .flex-row.mgnH-5 {
			flex-direction: column;
			margin-inline: 0;
		}
		.auth-form--register .flex-row.mgnH-5 > :is(.input-square, .select-square),
		.account-profile-form .flex-row.mgnH-5 > :is(.input-square, .select-square) {
			width: 100%;
		}
	}
}

@layer components {
	/* Carrito compartido: página completa y panel flotante. */
	.cart-shell {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}
	.cart-panel__header {
		display: none;
	}
	.cart-page__card {
		box-sizing: border-box;
		max-width: 100%;
		overflow: hidden;
	}
	.cart-page__card *,
	.cart-panel * {
		box-sizing: border-box;
	}
	.cart-panel .cart-panel__detail,
	.cart-page .cart-panel__detail {
		width: 100%;
		min-width: 0;
		padding: 0;
		border: 0;
	}
	.cart-shopping {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 1.25rem;
		width: 100%;
		padding: 1.5rem 0;
		border-bottom: 1px solid var(--border-soft);
	}
	.cart-shopping:first-child {
		padding-top: 0;
	}
	.cart-img {
		display: grid;
		width: 6.5rem;
		height: 6.5rem;
		overflow: hidden;
		place-items: center;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface-soft);
	}
	.cart-img img,
	.cart-panel .cart-img img {
		width: 100%;
		height: 100%;
		border-radius: 0;
		object-fit: contain;
	}
	.cart-shopping__content,
	.cart-shopping__variants {
		display: grid;
		min-width: 0;
		gap: 0.8rem;
	}
	.cart-shopping > .cart-shopping__content > * {
		margin: 0;
	}
	.cart-shopping .catalogue-name {
		width: 100%;
		max-width: 100%;
		color: var(--text-primary);
		font-size: 1.05rem;
		font-weight: 800;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}
	.cart-sku,
	.cart-panel .cart-sku {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
		width: 100%;
		margin: 0;
		padding: 1rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		background: var(--surface-soft);
	}
	.cart-sku__description {
		min-width: 0;
		color: var(--text-secondary);
		line-height: 1.4;
	}
	.cart-sku__description small {
		display: block;
		overflow-wrap: anywhere;
	}
	.cart-sku__code {
		display: block;
		margin-bottom: 0.15rem;
		color: var(--text-primary);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.04em;
	}
	.cart-sku .button-quantity {
		display: grid;
		grid-template-columns: 2.35rem 3rem 2.35rem;
		width: auto;
		min-width: 0;
		height: 2.5rem;
		overflow: hidden;
		border: 1px solid var(--border-strong, var(--border-soft));
		border-radius: 999px;
		background: var(--surface);
	}
	.cart-sku__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-width: 0;
		padding-top: 0.85rem;
		border-top: 1px solid var(--border-soft);
	}
	.cart-sku .button-quantity :is(button, input) {
		width: 100%;
		height: 100%;
		min-width: 0;
		border: 0;
		background: transparent;
	}
	.cart-sku .button-quantity button {
		color: var(--brand-text);
		font-size: 1rem;
		transition: background-color 160ms ease;
	}
	.cart-sku .button-quantity button:hover {
		background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
	}
	.cart-sku .button-quantity input {
		border-inline: 1px solid var(--border-soft);
		color: var(--text-primary);
		font-weight: 800;
		appearance: textfield;
	}
	.cart-sku__price {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		min-width: 8rem;
		color: var(--text-secondary);
		line-height: 1.3;
		text-align: right;
	}
	.cart-sku__price small,
	.cart-sku__price .pricebefore {
		display: block;
		max-width: 15rem;
		overflow-wrap: anywhere;
	}
	.cart-sku__total {
		margin-top: 0.25rem;
		color: var(--text-primary);
		font-size: 1.05rem;
		font-weight: 900;
	}
	.cart-panel .btnCartRemove,
	.cart-page .btnCartRemove {
		display: inline-grid;
		width: 2.5rem;
		height: 2.5rem;
		min-width: 2.5rem;
		padding: 0.65rem;
		place-items: center;
		border: 1px solid transparent;
		border-radius: 50%;
		background: transparent;
		transition:
			background-color 160ms ease,
			border-color 160ms ease;
	}
	.cart-panel .btnCartRemove:hover,
	.cart-page .btnCartRemove:hover {
		border-color: color-mix(in srgb, var(--error, #c73d4d) 20%, transparent);
		background: color-mix(in srgb, var(--error, #c73d4d) 8%, var(--surface));
	}
	.cart-panel__totals,
	.cart-panel .cart-panel__totals {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 1.25rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}
	.cart-panel__summary {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(10rem, 1fr) auto 2.5rem;
		gap: 1rem;
	}
	.cart-total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		text-align: left;
	}
	.cart-total span {
		color: var(--text-secondary);
		font-size: 0.8rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}
	.cart-total strong {
		color: var(--text-primary);
		font-size: clamp(1.25rem, 2vw, 1.65rem);
		font-weight: 900;
	}
	.cart-panel__summary .begin_checkout {
		min-height: 3rem;
		padding-inline: 1.5rem;
		border-radius: 999px;
		font-weight: 800;
	}
	.cart-panel__information {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--border-soft);
		color: var(--text-secondary);
		line-height: 1.55;
	}
	.cart-panel__information:empty {
		display: none;
	}
	.cart-panel__package {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 0.8rem;
		margin-top: 0.75rem;
	}
	.cart-panel__package small:not(:last-child)::after {
		margin-left: 0.8rem;
		content: '·';
	}
	.cart-panel__subscription {
		display: grid;
		gap: 0.25rem;
		margin-top: 1rem;
		padding: 0.85rem;
		border-radius: var(--radius-sm);
		background: var(--surface-soft);
	}
	.cart-panel__empty-action {
		margin-top: 1rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--border-soft);
		text-align: center;
	}
	.cart-panel__empty-action button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		min-height: 2.5rem;
		padding: 0.5rem 0.8rem;
		border-radius: 999px;
	}
	.cart-panel__exchange-rate {
		display: block;
		margin-top: 0.5rem;
		color: var(--text-secondary);
		text-align: right;
	}
	.cart-empty {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: clamp(3rem, 8vw, 6rem) 1.5rem;
		text-align: center;
	}
	.cart-empty__icon {
		display: grid;
		width: 5rem;
		height: 5rem;
		margin-bottom: 1.25rem;
		place-items: center;
		border-radius: 50%;
		background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
	}
	.cart-empty > span:not(.cart-empty__icon) {
		margin-top: 0.5rem;
		color: var(--text-secondary);
	}
	.cart-empty .btn1-1 {
		margin-top: 1.5rem;
		border-radius: 999px;
	}
	.cart-page__content {
		padding-top: 1.5rem;
	}
	.cart-page .cart-shell:has(.cart-panel__detail) {
		display: grid;
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
		gap: clamp(1.5rem, 4vw, 3rem);
	}
	.cart-page .cart-panel__detail {
		max-height: none;
		overflow: visible;
	}
	.cart-page .cart-panel__totals {
		position: sticky;
		top: calc(var(--header-height) + 1.5rem);
	}
	.cart-page .cart-panel__summary {
		grid-template-columns: 1fr;
	}
	.cart-page .cart-total,
	.cart-page .begin_checkout {
		grid-column: 1 / -1;
	}
	.cart-page .cart-total {
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.cart-panel .cart-panel__detail {
		flex: 1 1 auto;
		max-height: none;
		padding: 1.25rem;
		overflow: hidden auto;
	}
	.cart-panel.menu-top-right {
		top: var(--header-height);
		right: 0;
		bottom: 0;
		width: min(100%, 30rem);
		max-height: none;
		border: 0;
		border-left: 1px solid var(--border-soft);
		border-radius: 0;
		box-shadow: -1.25rem 0 3rem rgb(20 61 50 / 16%);
	}
	.cart-panel .cart-shell {
		display: flex;
		height: 100%;
		min-height: 0;
		flex-direction: column;
	}
	.cart-panel .cart-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.1rem 1.25rem;
		border-bottom: 1px solid var(--border-soft);
	}
	.cart-panel__header > div {
		display: grid;
		gap: 0.1rem;
	}
	.cart-panel__header small {
		color: var(--text-secondary);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}
	.cart-panel__header strong {
		color: var(--text-primary);
		font-size: 1.25rem;
	}
	.cart-panel__close {
		display: grid;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0.7rem;
		place-items: center;
		border: 1px solid var(--border-soft);
		border-radius: 50%;
		background: var(--surface-soft);
	}
	.cart-panel .cart-shopping {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: 0.75rem;
		padding: 1rem 0;
	}
	.cart-panel .cart-img {
		width: 4.5rem;
		height: 4.5rem;
	}
	.cart-panel .cart-shopping__content {
		display: contents;
	}
	.cart-panel .catalogue-name {
		align-self: center;
		grid-row: 1;
		grid-column: 2;
		margin: 0;
	}
	.cart-panel .cart-shopping__variants {
		grid-row: 2;
		grid-column: 1 / -1;
	}
	.cart-panel .cart-sku {
		gap: 0.75rem;
		padding: 0.75rem;
	}
	.cart-panel .cart-sku__actions {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.cart-panel .button-quantity {
		grid-column: 1;
		justify-self: start;
		flex-shrink: 0;
	}
	.cart-panel .cart-sku__price {
		align-items: flex-end;
		grid-row: 2;
		grid-column: 1 / -1;
		min-width: 0;
		text-align: right;
	}
	.cart-panel .btnCartRemove {
		grid-row: 1;
		grid-column: 2;
	}
	.cart-panel .cart-panel__totals {
		border-width: 1px 0 0;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}
	.cart-panel .cart-panel__summary {
		grid-template-columns: 1fr;
	}
	.cart-panel .cart-total,
	.cart-panel .begin_checkout {
		grid-column: 1 / -1;
	}

	@media (width <= 62rem) {
		.cart-page .cart-shell:has(.cart-panel__detail) {
			grid-template-columns: minmax(0, 1fr);
		}
		.cart-page .cart-panel__totals {
			position: static;
		}
	}

	@media (width <= 42rem) {
		.utility-heading--row {
			align-items: flex-start;
			flex-direction: column;
		}
		.utility-heading--row .utility-back-link {
			margin-top: 0;
		}
		.cart-shopping {
			grid-template-columns: minmax(0, 1fr);
			gap: 0.8rem;
		}
		.cart-img {
			width: 4.5rem;
			height: 4.5rem;
		}
		.cart-shopping__content,
		.cart-shopping__variants,
		.cart-sku,
		.cart-sku__actions {
			width: 100%;
			max-width: 100%;
		}
		.cart-sku {
			gap: 0.75rem;
			padding: 0.75rem;
		}
		.cart-sku__actions {
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.cart-sku__price {
			align-items: flex-start;
			flex: 1 1 100%;
			order: 3;
			text-align: left;
		}
		.cart-sku .btnCartRemove {
			margin-left: auto;
		}
		.cart-panel__summary {
			grid-template-columns: 1fr 2.5rem;
		}
		.cart-panel__summary .cart-total,
		.cart-panel__summary .begin_checkout {
			grid-column: 1 / -1;
		}
	}
}