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

@layer components {
	.icono-interfaz {
		display: inline-block;
		width: 1em;
		height: auto;
		flex: 0 0 auto;
		overflow: visible;
		aspect-ratio: 1;
		color: inherit;
		vertical-align: -0.125em;
	}
	.icono-interfaz use {
		pointer-events: none;
	}

	/* ERRORES */
	.error-page-body {
		min-height: 100dvh;
		background-color: var(--color1-4);
	}
	.error-page-main {
		min-height: 100dvh;
		align-items: stretch;
		justify-content: stretch;
		padding: 2rem;
		background: linear-gradient(135deg, var(--color1-4), var(--surface));
	}
	.error-page-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
	}
	.error-page-card {
		width: 100%;
		max-width: 46rem;
		padding: 2.5rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 1rem;
		background-color: var(--surface);
		box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%);
		text-align: center;
	}
	.error-page-icon {
		width: 5rem;
	}
	.error-page-label {
		margin: 1rem 0 0.5rem;
		color: var(--color5-1);
		font-size: 0.8rem;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.08rem;
	}
	.error-page-card h1 {
		margin-bottom: 1rem;
		font-size: 1.8rem;
	}
	.error-page-message {
		line-height: 1.6;
	}
	.error-page-id {
		margin-top: 1rem;
		color: var(--color0-2);
		font-size: 0.8rem;
	}
	.error-page-details {
		margin-top: 1.5rem;
		padding: 1rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.5rem;
		text-align: left;
	}
	.error-page-details summary {
		cursor: pointer;
		font-weight: bold;
	}
	.error-page-details pre {
		max-height: 18rem;
		margin-top: 1rem;
		padding: 1rem;
		overflow: auto;
		border-radius: 0.5rem;
		background-color: var(--color0-1);
		color: var(--text-inverse);
		font-size: 0.75rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
		white-space: pre-wrap;
	}
	.error-page-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2rem;
	}

	/* La estructura de la cabecera del ecommerce se define en ecommerce.css. */

	.site-header__cart-count span {
		position: absolute;
		top: -0.5rem;
		right: -0.8rem;
		padding: 0.15rem 0.25rem;
		background-color: var(--color1-1);
		color: var(--brand-primary-contrast);
		border-radius: 100%;
		font-weight: bold;
		text-align: center;
		font-size: 0.7rem;
		border: 0.05rem solid var(--surface);
	}
	.pricebefore {
		font-size: 0.8rem;
		text-decoration: line-through;
		color: var(--color0-2);
	}
	.priceafter {
		color: var(--color5-1);
		white-space: nowrap;
		font-weight: bold;
	}
	.discount {
		padding: 0 0.25rem;
		font-size: 0.8rem;
		font-weight: bold;
		color: var(--text-inverse);
		background-color: var(--color5-1);
		border-radius: 0.5rem;
		white-space: nowrap;
		margin-right: 0.5rem;
	}
	.productGrid .discount,
	.productList .discount {
		position: absolute;
		top: 1.5rem;
		right: -0.75rem;
		font-size: 0.8rem;
		border-radius: 1rem 0.15rem 0.15rem 1rem;
		padding: 0.1rem 1rem;
		background-color: var(--color1-1);
		color: var(--brand-primary-contrast);
	}

	.etiqueta-producto {
		border: 2px solid var(--color6-1);
		border-radius: 0.5rem;
		padding: 0.25rem 0.5rem;
		font-weight: bold;
		font-size: 0.7rem;
	}
	.etiqueta-producto:hover {
		background-color: var(--color6-1);
		color: var(--warning-contrast);
	}
	.etiqueta-recomendable {
		display: inline-flex;
		align-items: center;
		border-radius: 1rem;
		background: var(--color6-1);
		color: var(--warning-contrast);
		padding: 0.2rem 0.55rem;
		font-size: 0.7rem;
		font-weight: bold;
	}

	.ind-dev {
		position: absolute;
		top: 3.5rem;
		left: 3.3rem;
		z-index: 2;
	}

	/* NOTIFICACIONES */
	.notification-center {
		position: fixed;
		right: 5.5rem;
		bottom: max(1rem, env(safe-area-inset-bottom));
		z-index: 1300;
		display: flex;
		flex-flow: column nowrap;
		align-items: stretch;
		gap: 0.65rem;
		width: min(26rem, calc(100vw - 6.5rem));
		max-height: calc(100dvh - 2rem);
		padding: 0.25rem;
		overflow-y: auto;
		text-align: left;
		pointer-events: none;
	}
	.notification-center .notification-toast {
		position: relative;
		display: none;
		grid-template-columns: max(2.25rem, 36px) minmax(0, 1fr) max(2.25rem, 36px);
		align-items: start;
		gap: 0.75rem;
		min-width: 0;
		padding: 1rem;
		border: 1px solid var(--color0-3);
		border-left-width: 0.3rem;
		border-radius: 0.85rem;
		background: var(--surface);
		box-shadow: 0 0.8rem 2.25rem rgb(20 35 50 / 20%);
		color: var(--color0-1);
		font-size: max(0.9rem, 14px);
		line-height: 1.45;
		pointer-events: auto;
	}
	.notification-center .notification-icon {
		display: grid;
		width: max(2.25rem, 36px);
		height: max(2.25rem, 36px);
		place-items: center;
		border-radius: 50%;
		font-weight: bold;
		line-height: 1;
	}
	.notification-center .notification-content {
		align-self: center;
		min-width: 0;
	}
	.notification-center .notification-message {
		margin: 0;
		overflow-wrap: anywhere;
	}
	.notification-center .notification-action {
		display: inline-block;
		margin-top: 0.45rem;
		color: var(--color1-2);
		font-weight: bold;
		text-decoration: underline;
		text-underline-offset: 0.18rem;
	}
	.notification-center .notification-action:hover,
	.notification-center .notification-action:focus-visible {
		opacity: 0.75;
	}
	.notification-center .notification-close {
		display: grid;
		width: max(2.25rem, 36px);
		height: max(2.25rem, 36px);
		margin: 0;
		padding: 0;
		place-items: center;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: inherit;
		cursor: pointer;
		font-size: 1.4rem;
		line-height: 1;
		opacity: 0.58;
	}
	.notification-center .notification-close:hover,
	.notification-center .notification-close:focus-visible {
		background: var(--color0-5);
		opacity: 1;
	}
	.notification-center .notification-close:focus-visible,
	.notification-center .notification-action:focus-visible {
		outline: 0.15rem solid var(--color1-2);
		outline-offset: 0.15rem;
	}

	@media (width <= 600px) {
		.notification-center {
			right: 1rem;
			bottom: max(5.25rem, calc(env(safe-area-inset-bottom) + 4.25rem));
			left: 1rem;
			width: auto;
			max-height: calc(100dvh - 6.5rem);
		}
	}

	/* CONTENEDORES */
	.form-contact {
		background-color: var(--surface);
		padding: 2rem 4rem;
		border-radius: 0.5rem;
		box-shadow: 0 0.2rem 0.25rem 0.1rem var(--color0-3);
	}
	.contact-form {
		padding-left: 3rem;
	}
	.contacto {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		padding-right: 3rem;
		border-right: 1px solid var(--color0-3);
	}
	.contacto > *:not(:last-child) {
		margin-bottom: 2rem;
	}
	.grid-reseñas {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
	.reseñas {
		display: flex;
		gap: 1rem;
		transition: transform 0.5s ease-in-out;
	}
	.reseña {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		border-radius: 1rem;
		border: 1px solid var(--color0-3);
		padding: 2rem;
		background-color: var(--surface);
	}

	.halfDiv {
		width: 50%;
	}

	.menu-actions {
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		justify-content: center;
		width: auto;
	}
	.menu-actions button {
		width: 6.5rem;
	}

	.contacto-container {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.blog-cuerpo img:focus {
		opacity: 0.9;
	}
	.blog-cuerpo ul,
	.blog-cuerpo ol {
		margin-left: 2rem;
	}
	.blog-cuerpo ul > *:not(:last-child),
	.blog-cuerpo ol > *:not(:last-child) {
		margin-bottom: 1rem;
	}
	.blog-cuerpo h2 {
		margin: 2rem 0;
	}
	.blog-cuerpo p {
		margin-bottom: 1.5rem;
	}
	.blog-cuerpo a {
		color: var(--brand-text);
	}
	.blog-cuerpo a:hover,
	.blog-cuerpo a:focus {
		opacity: 0.7;
	}
	.blog-cuerpo img {
		max-width: 100%;
		height: auto;
	}

	/* SEARCH */
	.site-search--desktop {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		height: 3rem;
		border-radius: 5rem;
		overflow: hidden;
		background-color: var(--color1-1);
	}
	.site-search--desktop > div {
		border-right: 1px solid var(--color0-3);
		padding: 0 0.5rem 0 1rem;
	}
	.site-search--desktop label {
		font-size: 0.7rem;
	}
	.site-search--desktop select {
		border-radius: 0;
		width: auto;
	}
	.site-search--desktop select:active,
	.site-search--desktop select:focus {
		box-shadow: none;
	}

	.site-search--desktop input {
		border: none;
		width: 20rem;
		margin: 0;
		font-size: 0.9rem;
		padding: 0 1rem;
	}
	.site-search--desktop input::placeholder {
		color: var(--color0-2);
	}
	.site-search--desktop button {
		background-color: var(--brand-secondary);
	}
	.site-search--desktop button :is(img, .icono-interfaz) {
		width: 1rem;
		filter: brightness(0) invert(1);
	}

	.site-header__search-trigger :is(img, .icono-interfaz) {
		height: 1.7rem;
	}
	.site-search--panel {
		display: none;
	}
	.site-search--panel input {
		color: var(--color0-1);
		font-size: 0.9rem;
	}
	.site-search--panel input::placeholder {
		color: var(--color0-2);
	}
	.site-search--panel button {
		position: absolute;
		bottom: 2.9rem;
		right: 2.75rem;
	}
	.site-search--panel button :is(img, .icono-interfaz) {
		width: 1.5rem;
	}

	/* La navegación por categorías se define en ecommerce.css. */

	/* MENU OPCIONES */
	.menu-options {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 2rem;
	}
	.references {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}
	.references a {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		color: var(--color0-2);
	}
	.reference-arrow {
		margin: 0 0.5rem;
		font-size: 0.8rem;
		color: var(--color0-2);
	}
	.reference-arrow::after {
		content: '|';
	}
	.references a:last-of-type {
		color: var(--brand-text);
		font-style: italic;
		font-weight: bold;
	}
	.references a:hover,
	.references a:focus,
	.references a:active {
		color: var(--brand-text);
	}
	.sort {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}

	/* SIDEBAR USER */
	.section-sidebar {
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		background-color: var(--surface);
	}
	.section-sidebar > section {
		width: 100%;
		min-height: calc(100dvh - 7.5rem - 1.5rem);
		border-left: 0.05rem solid var(--color0-3);
		overflow: auto;
	}
	.sidebar-user {
		width: auto;
		max-width: 35%;
		min-height: calc(100dvh - 7.5rem - 1.5rem);
		text-align: center;
	}
	.sidebar-user li {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 0.25rem 1rem;
		flex-flow: row nowrap;
		list-style: none;
	}
	.sidebar-user li :is(img, .icono-interfaz) {
		filter: invert(56%) sepia(6%) saturate(0%) hue-rotate(143deg) brightness(96%) contrast(80%);
	}
	.sidebar-user a {
		padding: 0.5rem 0;
		color: var(--color0-1);
		display: flex;
		align-items: center;
		text-align: center;
		width: 100%;
	}
	.sidebar-user li a:hover,
	.sidebar-user li a:focus,
	.sidebar-user li a:active {
		color: var(--color1-2);
	}
	.sidebar-user li:hover :is(img, .icono-interfaz),
	.sidebar-user li:focus :is(img, .icono-interfaz),
	.sidebar-user li:active :is(img, .icono-interfaz) {
		filter: invert(81%) sepia(39%) saturate(6729%) hue-rotate(115deg) brightness(99%) contrast(102%);
	}
	.sidebar-user-active {
		background-color: var(--color1-1);
		width: 100%;
	}
	.sidebar-user-active a {
		color: var(--brand-primary-contrast);
	}
	.sidebar-user-active :is(img, .icono-interfaz) {
		filter: brightness(0) saturate(100%);
	}
	.sidebar-user-active li:hover :is(img, .icono-interfaz) {
		filter: brightness(0) saturate(100%);
	}

	/* CATÁLOGO DE PRODUCTOS */
	.catalogue {
		display: grid;
		grid-auto-flow: row;
		gap: 0.5rem;
		grid-template-columns: minmax(100px, 400px) minmax(100px, 400px) minmax(100px, 400px);
		place-items: center center;
	}

	/* GRID */
	.productGrid {
		position: relative;
		border-radius: 0.25rem;
		text-align: center;
	}
	.catalogue-img {
		display: flex;
		justify-content: center;
	}
	.catalogue-img img {
		width: 15rem;
		border-radius: 0.5rem;
	}
	.productGrid .catalogue-body {
		display: flex;
		flex-flow: column nowrap;
		padding: 0.5rem;
	}
	.productGrid .catalogue-resume,
	.productGrid .catalogue-details {
		display: none;
	}

	/* LIST */
	.productList {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		width: 100%;
		background-color: var(--surface);
		padding: 1rem;
	}
	.productList:not(:first-child) {
		border-top: 1px solid var(--color0-3);
	}
	.productList .catalogue-body {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 80%;
		padding-left: 1rem;
	}
	.productList .catalogue-body > div:nth-child(1) {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}
	.productList .catalogue-body > div:nth-child(2) {
		padding: 0 1rem;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: space-around;
	}
	.productList .catalogue-name {
		overflow: visible;
	}
	.productList .catalogue-details {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 1rem;
	}
	.productList .catalogue-details p {
		padding: 0.15rem 0.3rem;
		margin-right: 0.5rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.25rem;
		font-size: 0.8rem;
		color: var(--color0-2);
		text-align: center;
	}
	.productList .catalogue-resume {
		display: flex;
		padding: 1rem 2rem 1rem 0;
		overflow: hidden;
		max-height: 5rem;
		font-size: 1rem;
		line-height: 1.3rem;
		width: 100%;
	}

	.product-addcart {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}

	.catalogue-name {
		overflow: hidden;
		font-weight: bold;
		font-size: 1.1rem;
	}
	.tab,
	.button-filter {
		display: none;
	}

	/* FLOATINGS */
	.menu-center {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 2;
		overflow: auto;
		overscroll-behavior: contain;
		transform: translate(-50%, -50%);
		max-height: calc(100dvh - 2rem);
	}

	/* DESCRIPCIÓN DEL PRODUCTO */
	.product-detail__content {
		display: flex;
		flex-flow: row wrap;
		margin: 0 2rem;
		background-color: var(--surface);
		box-shadow: 0.1rem 0.1rem 0.5rem 0 var(--color0-3);
		border-radius: 1rem;
	}
	.product-gallery {
		display: flex;
		align-items: flex-start;
		flex-flow: column nowrap;
		justify-content: flex-start;
		width: 20%;
	}
	.product-gallery__main {
		width: 100%;
		padding: 2.5rem;
	}
	.product-gallery__main-image {
		display: block;
		width: 100%;
		border-radius: 1rem 0 0;
	}
	.product-gallery__thumbnails {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.minimage {
		width: 5rem;
		opacity: 0.75;
		cursor: pointer;
		padding: 0.25rem;
		margin-bottom: 0.25rem;
	}
	.minimage-activa {
		opacity: 1;
		border-bottom: 0.15rem solid var(--color1-1);
	}
	.dp-cover {
		position: relative;
		width: 80%;
		padding: 0 1rem;
	}
	.dp-variant {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}
	.dp-variant p {
		margin: 0 1rem;
	}
	.variant1 .item {
		width: 5rem;
	}
	.variant2 .item {
		width: 15rem;
	}
	.dp-variant .item {
		margin: 0.25rem;
		padding: 0.5rem;
		text-align: center;
		border: 0.05rem solid var(--color0-3);
		color: var(--color0-1);
		cursor: pointer;
		border-radius: 2rem;
		background-color: var(--color0-4);
	}
	.dp-variant .item:hover,
	.dp-variant .item:focus,
	.dp-variant .item:active {
		border: 0.05rem solid var(--color0-1);
		color: var(--color0-1);
	}
	.dp-variant .activeitem {
		border: 0.05rem solid var(--color1-1);
		font-weight: bold;
		color: var(--brand-primary-contrast);
		background-color: var(--color1-1);
	}
	.dp-detalle {
		display: flex;
		flex-flow: row nowrap;
		width: 100%;
		border-top: 0.05rem solid var(--color0-3);
	}
	.dp-detalle div {
		width: 100%;
	}
	.dp-detalle > div:nth-child(2) {
		border-left: 0.05rem solid var(--color0-3);
	}
	.dp-comment {
		position: relative;
		padding: 0.5rem 1rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.5rem;
	}
	.answer {
		margin-left: 1rem;
		width: calc(100% - 1rem);
		border: 0.1rem solid var(--color1-1);
	}
	.dp-descripcion {
		padding: 2rem;
	}
	.dp-descripcion ol,
	.dp-descripcion ul {
		margin-left: 2rem;
	}
	.dp-descripcion ol li:not(:last-child),
	.dp-descripcion p:not(:last-child),
	.dp-descripcion ul li:not(:last-child) {
		margin-bottom: 0.5rem;
		line-height: 1.5rem;
	}
	.dp-descripcion img {
		border-radius: 0 0 1rem 1rem;
		max-width: 100%;
	}

	/* --- CARRITO --- */
	.cart-panel__detail {
		overflow: auto;
		max-height: calc(100dvh - 7.6rem - 4.5rem);
		border-bottom: 1px solid var(--color0-3);
	}
	.cart-panel__totals {
		height: 4.5rem;
	}
	.cart-shopping {
		width: 100%;
		padding: 0.75rem 0;
	}
	.cart-shopping:not(:last-child) {
		border-bottom: 0.05rem solid var(--color0-3);
	}
	.cart-sku {
		padding: 0.5rem 0;
	}

	.cart-img {
		overflow: hidden;
		width: 7.5rem;
	}
	.cart-img img {
		width: 5rem;
		vertical-align: middle;
		border-radius: 100%;
		overflow: hidden;
	}
	.cart-total {
		text-align: right;
	}

	/* --- PASOS DE COMPRA --- */
	.transaction-steps {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 2rem;
	}
	.transaction-steps .step {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		width: 8rem;
	}
	.transaction-steps span {
		padding: 0.5rem 1rem;
		font-size: 1rem;
		border: 0.1rem solid var(--color0-3);
		border-radius: 0.25rem;
		background-color: var(--color0-4);
	}
	.transaction-steps .activetab span {
		background-color: var(--color1-2);
		color: var(--text-inverse);
	}
	.transaction-steps .finish span {
		color: var(--brand-primary-contrast);
		background-color: var(--color1-1);
	}
	.transaction-steps .wrong span {
		color: var(--text-inverse);
		background-color: var(--color5-1);
	}

	/* FORMULARIOS */
	.form-client {
		position: relative;
		width: auto;
		margin: 2rem;
		padding: 2rem;
		background-color: var(--surface);
		border-radius: 0.35rem;
		box-shadow: 0 0 0.5rem 0 var(--color0-3);
		overflow: auto;
	}
	.form-client-r {
		flex-flow: column nowrap;
		padding: 2rem;
		background-color: var(--surface);
		border-radius: 0.35rem;
		box-shadow: 0 0 0.5rem 0 var(--color0-3);
		overflow: auto;
	}
	form .website {
		display: none;
	}

	.login {
		display: flex;
		flex-flow: row nowrap;
	}
	.login > *:nth-child(1) {
		border-width: 0 0.05rem 0 0;
		border-style: solid;
		border-color: var(--color0-3);
	}
	.login > *:nth-child(2) > div {
		width: 100%;
	}

	/* INPUT */
	datalist {
		position: absolute;
		z-index: 1;
		background-color: var(--color0-4);
		border: 1px solid var(--color0-3);
		border-top: none;
		width: 100%;
		padding: 0.25rem;
		max-height: 50vh;
		overflow-y: auto;
	}

	input[type='number'] {
		appearance: textfield;
	}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		appearance: none;
	}
	input,
	select {
		display: block;
		width: 100%;
		color: var(--color0-1);
		border: none;
		font-size: 0.85rem;
	}
	select:disabled {
		background-color: var(--color0-4);
		opacity: 1;
	}
	textarea {
		resize: none;
		width: 100%;
		height: 5rem;
		border: 0.05rem solid var(--color0-3);
	}
	input[type='radio'] {
		width: 1.5rem;
		height: 1.5rem;
	}
	input[type='radio'] + label {
		width: auto;
		cursor: pointer;
	}
	input[type='radio']:checked + label {
		font-weight: bold;
	}
	.btn-radio-1,
	.rating-stars {
		position: absolute;
		width: 0;
		height: 0;
		display: none;
	}
	.opcionEnvio {
		text-align: left;
		border: 0.05rem solid var(--color0-3);
	}
	.opcionEnvio-active {
		font-weight: bold;
		border: 0.05rem solid var(--color1-1);
	}
	.opcionEnvio-contenido {
		flex: 1 1 auto;
		min-width: 0;
	}
	.opcionEnvio-logo {
		display: flex;
		flex: 0 0 7.5rem;
		align-items: center;
		justify-content: center;
		width: 7.5rem;
		height: 5rem;
		padding: 0.65rem;
	}
	.opcionEnvio-logo :is(img, .icono-interfaz) {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
	.opcionEnvio-contenido > span {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.opcionEnvio > :last-child {
		flex: 0 0 auto;
		min-width: 20%;
	}
	.btn-radio-1 + label {
		padding: 0.5rem 0.75rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.5rem;
		font-size: 0.85rem;
		font-weight: bold;
	}
	.btn-radio-1:checked + label {
		text-align: left;
		font-weight: bold;
		border: 0.15rem solid var(--color1-1);
	}
	.ratingStars :is(img, .icono-interfaz) {
		filter: grayscale(100%);
	}
	.rating-stars + :is(img, .icono-interfaz) {
		cursor: pointer;
	}
	.textarea-main {
		border-radius: 0.5rem;
		padding: 1rem;
	}
	.input-square,
	.select-square,
	.textarea-square,
	.input-square-basic,
	.select-square-basic,
	.textarea-square-basic {
		position: relative;
	}
	.contador-caracteres {
		position: absolute;
		right: 1rem;
		bottom: -0.1rem;
		padding: 0 0.25rem;
		background: #fff;
		font-size: 0.7rem;
	}
	.indicador-obligatorio {
		margin-left: 0.22rem;
		color: var(--color5-1);
	}
	.input-square label,
	.select-square label,
	.textarea-square label,
	.input-square-basic label,
	.select-square-basic label,
	.textarea-square-basic label {
		display: block;
		padding: 0.25rem 0.5rem;
		color: var(--color0-1);
		font-size: 0.8rem;
		font-weight: bold;
	}
	.input-square input,
	.select-square select,
	.select-square input,
	.textarea-square textarea,
	.input-square-basic input,
	.select-square-basic select,
	.select-square-basic input,
	.textarea-square-basic textarea {
		padding: 0.75rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.5rem;
	}

	.input-square input:focus,
	.input-square input:active,
	.select-square select:focus,
	.select-square select:active,
	.select-square input:focus,
	.select-square input:active,
	.textarea-square textarea:focus,
	.textarea-square textarea:active {
		box-shadow: 0 0 0.1rem 0.1rem var(--color3-1);
	}

	.input-square input::placeholder,
	.textarea-square textarea::placeholder,
	.input-square-basic input::placeholder,
	.textarea-square-basic textarea::placeholder {
		color: var(--color0-2);
	}

	.input-square-basic input:focus,
	.input-square-basic input:active,
	.select-square-basic select:focus,
	.select-square-basic select:active,
	.select-square-basic input:focus,
	.select-square-basic input:active,
	.textarea-square-basic textarea:focus,
	.textarea-square-basic textarea:active {
		box-shadow: 0 0 0.1rem 0.05rem var(--color1-2);
	}

	/* DIRECCIONES */
	.direccion-selector {
		position: relative;
	}
	.direccion-buscador > input,
	.direccion-complemento > input {
		padding: 0.85rem 1rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.65rem;
		background-color: var(--surface);
	}
	.direccion-buscador > input:focus,
	.direccion-complemento > input:focus {
		box-shadow: 0 0 0.1rem 0.1rem var(--color3-1);
	}
	.direccion-sugerencias {
		position: absolute;
		top: calc(100% + 0.25rem);
		left: 0;
		right: 0;
		z-index: 1001;
		display: none;
		overflow-y: auto;
		max-height: 12rem;
		padding: 0.25rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.65rem;
		background-color: var(--surface);
		box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
	}
	.direccion-sugerencias-visible {
		display: block;
	}
	.direccion-sugerencia {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-flow: column nowrap;
		gap: 0.1rem;
		width: 100%;
		padding: 0.5rem 0.65rem;
		border-radius: 0.45rem;
		line-height: 1.2;
		text-align: left;
	}
	.direccion-sugerencia:not(:last-child) {
		border-bottom: 0.05rem solid var(--color0-4);
	}
	.direccion-sugerencia:hover,
	.direccion-sugerencia:focus {
		background-color: var(--color0-4);
	}
	.direccion-sugerencia b,
	.direccion-sugerencia small {
		width: 100%;
		text-align: left;
	}
	.direccion-sugerencia b {
		font-size: 0.86rem;
		font-weight: 600;
	}
	.direccion-sugerencia small {
		color: var(--color0-2);
		font-size: 0.72rem;
	}
	.direccion-sugerencias-mensaje {
		display: block;
		padding: 0.55rem 0.65rem;
		color: var(--color0-2);
		text-align: left;
	}
	.direccion-manual-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		width: 100%;
		margin: 0.15rem 0 0.65rem;
		padding: 0.4rem;
		border: 0;
		background: transparent;
		color: var(--color1-2);
		font-size: 0.78rem;
		font-weight: 600;
		text-align: center;
	}
	.direccion-selector-activo .direccion-manual-toggle {
		display: flex;
	}
	.direccion-manual-toggle::before {
		flex: 1;
		height: 0.05rem;
		max-width: 5rem;
		background-color: var(--color0-3);
		content: '';
	}
	.direccion-manual-toggle:hover,
	.direccion-manual-toggle:focus {
		background: transparent;
		color: var(--brand-text);
	}
	.direccion-manual-toggle i {
		width: 0.42rem;
		height: 0.42rem;
		border-right: 0.1rem solid currentcolor;
		border-bottom: 0.1rem solid currentcolor;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}
	.direccion-manual-toggle[aria-expanded='true'] i {
		transform: rotate(225deg);
	}
	.direccion-selector-activo .direccion-manual {
		display: none;
	}
	.direccion-selector-activo .direccion-manual-visible {
		display: block;
	}
	.direccion-complemento {
		margin: 0.35rem 0 0.7rem;
	}
	.direccion-selector-activo .direccion-complemento {
		display: none;
	}
	.direccion-selector-activo .direccion-complemento-visible {
		display: block;
	}
	.direccion-complemento-pregunta {
		display: block;
		margin: 0 0 0.55rem;
		color: var(--color0-1);
		font-size: 0.84rem;
		font-weight: 600;
		line-height: 1.35;
	}
	.direccion-complemento-pregunta small {
		display: inline-block;
		margin-left: 0.3rem;
		color: var(--color0-2);
		font-size: 0.68rem;
		font-weight: normal;
	}
	.direccion-guardada {
		padding: 0.75rem;
		border: 0.05rem solid var(--color1-2);
		border-radius: 0.65rem;
		background-color: var(--color0-4);
		text-align: left;
	}
	.direccion-guardada:hover,
	.direccion-guardada:focus {
		box-shadow: 0 0 0.15rem 0.05rem var(--color1-2);
	}
	.direccion-guardada span {
		display: flex;
		flex-flow: column nowrap;
	}
	.direccion-guardada small {
		color: var(--color0-2);
	}
	.direccion-mapa {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		width: 100%;
		height: 0;
		margin-top: 0;
		border-radius: 0.75rem;
		background-color: var(--color0-4);
		color: var(--color0-2);
		transition:
			height 0.25s,
			margin 0.25s;
	}
	.direccion-mapa-visible {
		height: 16rem;
		margin-top: 1rem;
		border: 0.05rem solid var(--color0-3);
	}
	.direccion-mapa > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.direccion-marcador span {
		position: relative;
		display: block;
		width: 2rem;
		height: 2rem;
		border: 0.3rem solid var(--surface);
		border-radius: 50% 50% 50% 0;
		background-color: var(--color1-1);
		box-shadow: 0 0.15rem 0.4rem rgb(0 0 0 / 35%);
		transform: rotate(-45deg);
	}
	.direccion-marcador span::after {
		position: absolute;
		top: 0.45rem;
		left: 0.45rem;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background-color: var(--surface);
		content: '';
	}

	.input-checkbox {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.input-checkbox input {
		width: 1rem;
		margin-right: 0.75rem;
	}
	.input-checkbox label {
		cursor: pointer;
	}
	.input-round {
		padding: 0.25rem 0.75rem;
		border: 0.05rem solid var(--color1-1);
		border-radius: 1rem;
	}
	:is(input, select, textarea, label, .opcionEnvio).invalid {
		border: 0.05rem solid var(--color5-1);
	}
	.checkbox-select-all {
		width: 2rem;
		margin: 0 auto;
	}

	.input-suscribe {
		width: 12rem;
		padding-right: 2rem;
	}

	/* FILTRO */
	.filter-checkbox {
		display: flex;
		flex-flow: row wrap;
		list-style: none;
		font-size: 0.9rem;
	}
	.filter-checkbox li label {
		display: flex;
		background-color: var(--surface);
		border: 0.05rem solid var(--color1-1);
		color: var(--color0-1);
		border-radius: 1rem;
		margin: 0 0.25rem 0.5rem 0;
		transition:
			border-color 0.2s,
			background-color 0.2s,
			color 0.2s;
		padding: 0.25rem 0.5rem;
		cursor: pointer;
	}
	.filter-checkbox input:hover + label,
	.filter-checkbox input:focus + label,
	.filter-checkbox input:active + label {
		border: 0.05rem solid var(--color1-1);
		color: var(--brand-text);
	}
	.filter-checkbox input[type='checkbox'] {
		position: absolute;
		opacity: 0;
		width: auto;
	}
	.filter-checkbox input[type='checkbox']:checked + label::before {
		content: '\2713';
		font-size: 0.8rem;
		transform: rotate(-360deg);
		transition: transform 0.3s ease-in-out;
	}
	.filter-checkbox input[type='checkbox']:checked + label {
		background-color: var(--color1-1);
		color: var(--brand-primary-contrast);
	}
	.filter-checkbox label::before {
		display: inline-block;
		margin-right: 0.25rem;
		content: '+';
		transition: transform 0.3s ease-in-out;
	}
	.input-switch {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}
	.input-switch > div {
		margin-left: 0.75rem;
	}
	.input-switch > label {
		margin-left: 0.75rem;
	}
	.input-switch label {
		font-size: 0.9rem;
		color: var(--color0-1);
		display: block;
	}
	.input-switch input[type='checkbox'] {
		display: none;
	}
	.switch {
		position: relative;
		min-width: 3rem;
		height: 1.5rem;
	}
	.slider {
		position: absolute;
		cursor: pointer;
		inset: 0;
		background-color: #ccc;
		transition: background-color 0.4s;
		border-radius: 1rem;
	}
	.slider::before {
		position: absolute;
		content: '';
		height: 1rem;
		width: 1rem;
		left: 0.25rem;
		bottom: 0.25rem;
		background-color: var(--surface);
		transition: transform 0.4s;
		border-radius: 50%;
	}
	.switch input:checked + .slider {
		background-color: var(--color1-1);
	}
	.switch input:checked + .slider::before {
		transform: translateX(1.5rem);
	}

	/* TABLAS */
	table {
		border-collapse: collapse;
	}
	.table-admin {
		font-size: 0.8rem;
		border-radius: 2rem;
		text-align: center;
		width: 100%;
	}
	.table-admin th {
		padding: 0.5rem;
		background-color: var(--color1-2);
		color: var(--text-inverse);
		font-weight: normal;
	}
	.table-admin td {
		padding: 0.5rem;
		color: var(--color0-1);
		text-align: center;
	}
	.table-admin tr:nth-child(even) {
		background-color: #f5f5f5;
	}
	.table-admin tr:nth-child(odd) {
		background-color: var(--surface);
	}
	.table-admin th:first-child {
		border-radius: 1rem 0 0;
	}
	.table-admin th:last-child {
		border-radius: 0 1rem 0 0;
	}
	.table-admin tr:last-child td:first-child {
		border-radius: 0 0 0 1rem;
	}
	.table-admin tr:last-child td:last-child {
		border-radius: 0 0 1rem;
	}

	.detalleCompra {
		background-color: var(--color0-4);
		color: var(--color0-1);
		border-radius: 1rem;
		padding: 1rem;
		border: 0.05rem solid var(--color0-3);
	}
	.informacion-nutricional {
		color: black;
		border: 0.2rem solid black;
		width: 60%;
	}
	.informacion-nutricional th {
		font-size: 1rem;
		font-weight: bold;
		border-bottom: 0.3rem solid black;
		padding: 0.2rem 0;
	}
	.informacion-nutricional td:first-child {
		padding: 0 0.5rem;
	}
	.informacion-nutricional td:last-child {
		padding: 0 0.5rem;
		text-align: right;
	}
	.informacion-nutricional thead tr:nth-child(2) td,
	.informacion-nutricional tbody tr:first-child td,
	.informacion-nutricional tfoot tr:first-child td {
		padding-top: 0.5rem;
	}
	.informacion-nutricional thead tr:last-child td,
	.informacion-nutricional tbody tr:last-child td,
	.informacion-nutricional tfoot tr:last-child td {
		padding-bottom: 0.5rem;
		border-bottom: 0.15rem solid black;
	}

	/* OBJETOS */
	.button-quantity {
		border: 0.05rem solid var(--color0-3);
	}
	.button-quantity input {
		width: 3rem;
		min-height: 2.75rem;
		padding: 0.5rem;
		text-align: center;
	}
	.btn-operator {
		width: 100%;
		min-width: 2.75rem;
		min-height: 2.75rem;
		color: var(--color0-2);
		padding: 0.1rem 0.35rem;
	}
	.btn-operator:first-child {
		border-right: 0.05rem solid var(--color0-3);
	}
	.btn-operator:last-child {
		border-left: 0.05rem solid var(--color0-3);
	}
	.wishlist-off,
	.wishlist-on {
		display: inline-grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		color: var(--color0-2);
		opacity: 0.4;
	}
	.wishlist-off .icono-interfaz,
	.wishlist-on .icono-interfaz {
		width: 85%;
		height: 85%;
	}

	.wishlist-off:hover,
	.wishlist-off:focus,
	.wishlist-off:active {
		color: var(--color5-1);
		opacity: 0.6;
	}
	.wishlist-on {
		color: var(--color5-1);
		opacity: 1;
	}
	.loading-overlay {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2000;
		background-color: rgb(255 255 255 / 72%);
		backdrop-filter: blur(2px);
		cursor: wait;
	}
	.loading-content {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		padding: 0.85rem 1.15rem;
		color: var(--color0-1);
		font-size: 0.9rem;
		font-weight: bold;
		background-color: var(--surface);
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.65rem;
		box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 14%);
	}
	.loading-spinner,
	button.is-loading::before {
		content: '';
		flex: 0 0 auto;
		width: 1em;
		height: 1em;
		box-sizing: border-box;
		border: 0.14em solid currentcolor;
		border-left-color: transparent;
		border-radius: 50%;
		animation: loading-spin 0.7s linear infinite;
	}
	button.is-loading {
		gap: 0.5rem;
		cursor: wait;
	}
	button.is-loading[disabled] {
		opacity: 0.75;
	}

	@keyframes loading-spin {
		to {
			transform: rotate(360deg);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.loading-spinner,
		button.is-loading::before {
			animation: none;
			border-left-color: currentcolor;
			opacity: 0.65;
		}
	}
	.btn-help {
		cursor: pointer;
	}
	.btn-circle-black {
		display: inline-block;
		text-align: center;
		font-size: 0.7rem;
		font-weight: bold;
		border-radius: 100%;
		padding: 0.05rem 0.25rem 0;
		color: var(--text-inverse);
		background-color: black;
		line-height: 0.8rem;
	}
	.btn-circle-black:hover,
	.btn-circle-black:active {
		background-color: var(--color0-2);
	}
	.msg-help {
		position: absolute;
		z-index: 3;
		display: none;
		background-color: var(--surface);
		box-shadow: 0 0 0.25rem 0.1rem var(--color0-3);
		padding: 1rem;
		max-width: 50vw;
		max-height: 75vh;
		overflow: auto;
	}
	.rrss {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.rrss img {
		filter: invert(100%);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}

	.rrss-share,
	.rrss-share a,
	.rrss-share div {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.rrss-share img {
		width: 1.5rem;
		height: 1.5rem;
	}
	.rrss-share img:hover,
	.rrss-share img:focus,
	.rrss-share img:active {
		filter: invert(83%) sepia(31%) saturate(233%) hue-rotate(123deg) brightness(91%) contrast(86%);
	}

	/* BOTONES */
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color0-1);
		font-size: 0.85rem;
		border: none;
		cursor: pointer;
		text-align: center;
		background: none;
		transition:
			border-color 0.25s,
			background-color 0.25s,
			box-shadow 0.25s,
			color 0.25s,
			opacity 0.25s,
			transform 0.25s;
	}
	button[disabled]:not(.is-loading),
	button[disabled]:not(.is-loading):hover {
		opacity: 0.5;
	}
	.btn1-1 {
		background-color: var(--color1-1);
		padding: 0.5rem 1.5rem;
		color: var(--brand-primary-contrast);
		border-radius: 0.5rem;
		font-weight: bold;
		white-space: nowrap;
	}
	.btn1-1:hover,
	.btn1-1:focus,
	.btn1-1:active {
		opacity: 0.75;
	}
	.btn1-2 {
		background-color: var(--color1-2);
		padding: 0.5rem 2rem;
		color: var(--text-inverse);
		border-radius: 2.5rem;
		font-weight: bold;
	}
	.btn1-2:hover,
	.btn1-2:focus,
	.btn1-2:active {
		background-color: var(--brand-secondary-hover);
		color: var(--text-inverse);
		opacity: 0.95;
	}
	.btn1-3 {
		background-color: var(--color1-3);
		padding: 0.5rem 1.5rem;
		color: var(--brand-accent-contrast);
		border-radius: 2.5rem;
	}
	.btn1-3:hover,
	.btn1-3:focus,
	.btn1-3:active {
		opacity: 0.75;
	}
	.btn5-1 {
		background-color: var(--color5-1);
		padding: 0.75rem;
		color: var(--danger-contrast);
		margin: 0.5rem 0;
		border-radius: 2.5rem;
	}

	.btn-list {
		width: 100%;
		padding: 0.75rem;
		margin: 0.25rem 0;
		background-color: var(--color0-4);
		color: var(--color0-1);
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.25rem;
		font-size: 1rem;
	}
	.btn-list:hover,
	.btn-list:focus,
	.btn-list:active {
		background-color: var(--color1-2);
		box-shadow: 0 0.075rem 0.25rem 0 var(--color0-3);
		color: var(--text-inverse);
	}

	.btn-more {
		padding: 0.5rem 0.75rem;
		background-color: var(--color1-1);
		color: var(--brand-primary-contrast);
		border-width: 0 0.05rem 0.05rem;
		border-style: solid;
		border-color: var(--color0-3);
		border-radius: 0.25rem;
		font-size: 1rem;
	}
	.btn-more:hover,
	.btn-more:focus,
	.btn-more:active {
		background-color: var(--color1-3);
		color: var(--brand-accent-contrast);
		box-shadow: 0 0.075rem 0.25rem 0 var(--color0-3);
	}
	.btnLoadProduct {
		grid-column: span 3;
	}

	.button-arrow::after {
		content: '\2335';
		margin-left: 0.25rem;
		font-weight: bold;
	}
	.button-arrow:hover,
	.button-arrow:focus,
	.button-arrow:active {
		color: var(--color1-2);
	}

	.btn-pad {
		background-color: var(--surface);
		color: var(--color0-1);
		box-shadow: 0 0 0.25rem 0.05rem var(--color0-3);
		border-radius: 0.25rem;
	}
	.btn-pad:hover,
	.btn-pad:focus,
	.btn-pad:active {
		box-shadow: 0 0 0.25rem 0.05rem var(--focus-ring);
	}
	.shipping-options {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
	}
	.cobertura-proveedor-pendiente {
		gap: 0.65rem;
		padding: 1rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.6rem;
		background: var(--surface);
		text-align: center;
	}
	.cobertura-proveedor-pendiente select {
		width: min(100%, 25rem);
		padding: 0.65rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 0.35rem;
		background: var(--surface);
		color: var(--color0-1);
	}
	.cart-remove {
		color: var(--color0-1);
	}
	.cart-remove:hover,
	.cart-remove:focus,
	.cart-remove:active {
		color: var(--color5-1);
	}

	.btn-close {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 1.5rem;
		padding: 0.7rem 1rem;
		color: var(--color0-2);
		border-radius: 100%;
	}
	.btn-close:hover,
	.btn-close:focus,
	.btn-close:active {
		color: var(--color5-1);
	}

	/* DESPLEGABLES */
	.collapsible {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.collapsible::after {
		content: '\25b2';
		color: var(--color0-2);
	}
	.collapsible-active::after {
		content: '\25bc';
	}
	.collapsible-active::after,
	.collapsible:hover::after {
		color: black;
	}
	.collapsible-content {
		display: none;
		padding: 1rem;
		width: 100%;
	}

	/* DESLIZANTES */
	.slides {
		position: relative;
		padding: 0;
		height: calc(100dvh - 7.5rem);
		margin-top: 7.5rem;
		transition: transform 0.5s ease-in-out;
		background-color: var(--color1-4);
	}
	.slide {
		position: relative;
	}
	.slide,
	.slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.banner-principal-picture {
		display: block;
		width: 100%;
		height: 100%;
	}
	.banner-principal {
		object-position: var(--banner-posicion-pc, center);
	}

	.dots {
		position: absolute;
		bottom: 1.5rem;
		display: flex;
		flex-flow: row nowrap;
		z-index: 1;
	}
	.dot {
		width: 0.75rem;
		height: 0.75rem;
		border: 0.05rem solid var(--color0-3);
		border-radius: 100%;
		margin: 0 0.25rem;
		background-color: var(--color0-2);
		transition:
			width 0.5s ease,
			background-color 0.5s ease;
	}
	.dot:hover,
	.dot:focus,
	.dot:active {
		background-color: var(--color1-2);
	}
	.activeslide {
		background-color: var(--color1-1);
		width: 1.8rem;
		border-radius: 0.5rem;
	}
	.fade {
		animation-name: fade;
		animation-duration: 1s;
	}

	/* CARRUSEL */
	.carousel {
		overflow: hidden;
	}
	.carousel > div {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}

	.carousel-arrow {
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
	}

	@keyframes fade {
		from {
			opacity: 0.4;
		}
		to {
			opacity: 1;
		}
	}

	@media (width <= 840px) {
		.banner-principal {
			object-position: var(--banner-posicion-cel, center);
		}
	}

	/* PIE DE PÁGINA */
	footer {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: space-around;
		background-color: var(--brand-secondary);
		padding-bottom: 3rem; /* min-height: 100dvh; */
	}
	footer ul {
		list-style: none;
	}
	.footer-main {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 100%;
		padding: 5rem;
	}
	.footer-main > nav {
		font-size: 1.2rem;
	}
	.footer-list {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	.footer-list > div:not(:last-child) {
		margin-right: 5rem;
	}
	.footer-list button.footer-link-button {
		display: inline;
		width: auto;
		margin: 0;
		padding: 0;
		color: var(--text-inverse);
		font: inherit;
		line-height: inherit;
		text-align: left;
		vertical-align: baseline;
	}

	.footer-business {
		margin-right: 2rem;
	}
	.footer-business > div:first-child {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 3rem;
	}
	.footer-business > div:last-child {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
	}
	.footer-business > * {
		white-space: nowrap;
		overflow: hidden;
		line-height: 1.2rem;
	}
	.footer-business img {
		width: 8rem;
		margin-right: 1.5rem;
	}

	.footer-secondary {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 2.5rem;
		border-top: 0.05rem solid var(--color0-3);
		color: var(--text-inverse);
	}
	.footer-secondary ul {
		margin-right: 2rem;
	}
	footer a:link,
	.footer-business p {
		color: var(--text-inverse);
	}
	footer a:visited {
		color: var(--text-inverse);
	}
	footer a:hover,
	footer a:focus,
	footer a:active,
	footer nav button:hover,
	footer nav button:focus,
	footer nav button:active {
		color: var(--color1-3);
	}

	@media (width <= 1500px) {
		.grid-reseñas {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width <= 1024px) {
		.login {
			flex-flow: column-reverse nowrap;
		}
		.login > *:nth-child(1) {
			border-width: 0.05rem 0 0;
		}

		.references {
			padding: 1.5rem 0;
		}
		.product-detail__content > div {
			width: 100%;
			height: 100%;
		}
		.product-gallery__main-image {
			max-width: 100%;
			width: 50%;
			border-radius: 1rem 1rem 0 0;
			margin: 0 auto;
		}
		.dp-cover {
			border: none;
		}
		.dp-detalle {
			flex-flow: column wrap;
		}
		.dp-detalle > div:nth-child(2) {
			border-left: none;
		}
		.productList .catalogue-body {
			flex-flow: row wrap;
		}
		.productList .catalogue-body > div:nth-child(2) {
			flex-flow: row wrap;
			margin-top: 0.5rem;
		}
		.productList .catalogue-resume {
			padding: 1rem 0;
		}
		.catalogue-results__summary {
			text-align: center;
		}
		.grid-reseñas {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	@media (width <= 840px) {
		.slides {
			height: 110dvh;
		}
		.footer-main {
			flex-flow: column nowrap;
		}
		.footer-business {
			margin-right: 0;
			margin-bottom: 4rem;
		}
		.footer-list {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
		}
		.footer-list > div:not(:last-child) {
			margin-bottom: 3rem;
		}
		.cart-shopping > div > * {
			margin: 0.25rem;
		}
		.halfDiv {
			width: 100%;
		}

		.product-addcart {
			flex-flow: row wrap;
		}
	}

	@media (width <= 600px) {
		.error-page-main {
			padding: 1rem;
		}
		.error-page-content {
			padding: 1rem;
		}
		.error-page-card {
			padding: 2rem 1.25rem;
		}
		.error-page-card h1 {
			font-size: 1.5rem;
		}
		.grecaptcha-badge {
			/* stylelint-disable-next-line declaration-no-important -- Sobrescribe la posición en línea que entrega el proveedor. */
			top: 75% !important;
		}
		.slides {
			height: 100dvh;
		}
		.menu-options {
			flex-flow: column nowrap;
		}
		.form-client {
			padding: 1rem;
		}
		.footer-secondary {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
		}
		.footer-secondary > div {
			margin-bottom: 2rem;
		}
		.contacto-container {
			flex-flow: column-reverse nowrap;
		}
		.contacto {
			flex-flow: row nowrap;
			align-items: flex-start;
			border-top: 1px solid var(--color0-3);
			border-right: none;
			padding: 2rem 0 0;
		}
		.contacto > *:not(:last-child) {
			margin: 0 2rem 0 0;
		}
		.contact-form {
			padding: 0 0 3rem;
			width: 100%;
		}
	}

	@media (width <= 480px) {
		.productGrid {
			max-width: 100%;
		}
		.slides {
			height: calc(100dvh - 7.5rem);
		}
	}

	@media (width <= 360px) {
		.slides {
			height: 110dvh;
		}
	}

	@media (width <= 280px) {
		.catalogue {
			gap: 0.5rem;
			grid-template-columns: repeat(1, 1fr);
		}
		.btnLoadProduct {
			grid-column: span 1;
		}
		.catalogue .productGrid .catalogue-img img {
			width: 100%;
		}
	}
}