@font-face {
    font-family: 'BarlowLight';
    src: url('./../fonts/Barlow-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'BarlowMedium';
    src: url('./../fonts/Barlow-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'BarlowBold';
    src: url('./../fonts/Barlow-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'MoreSugarRegular';
    src: url('./../fonts/MoreSugar-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

:root {
	/* Radios */
	--r-sm: 12px;
	--radius: .3em;
	
	/* por el menu vista mobil */
	--hauteur-franja: 0px;
	--hauteur-bloque-menu: 0px;

	/* Colores */
	--naranja: #d08006;
	--marron_c: #dcd0b8;
	--marron: #633612;
	--marronRGBA: rgba(99, 54, 18, 1);
	--marronRGBAo: rgba(99, 54, 18, 0.5);
	--marronRGBAso: rgba(99, 54, 18, 0.3);
	--marron2: #341c06;

	/* Tipografía */
	--fontBL: 'BarlowLight', Roboto, sans-serif;
	--fontBM: 'BarlowMedium', Roboto, sans-serif;
	--fontBB: 'BarlowBold', Roboto, sans-serif;
	--fontMSR: 'MoreSugarRegular', Roboto, serif;

	/* Contenedor general */
	--contenedor-max: 90rem;
	--contenedor-padding: 3rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-size: 1rem;
	font-family: var(--fontBL);
	color: var(--marron);
	min-height: 100vh;
	line-height: 1.5;
	background-color: #fff;
}

body.menu-open {
	overflow: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

body > header,
main,
body > footer {
	width: 100%;
}

p {
	text-wrap: balance;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-underline-offset: 5px;
	text-decoration: underline;
}

button,
input,
textarea,
select {
	font: inherit;
}

.invisible {
	display: none;
}

input::-ms-input-placeholder {
	color: var(--marron_c) !important;
	opacity: .4 !important;
}

textarea::-ms-input-placeholder {
	color: var(--marron_c) !important;
	opacity: .4 !important;
}

input::-moz-placeholder {
	color: var(--marron_c) !important;
	opacity: .4 !important;
}

textarea::-moz-placeholder {
	color: var(--marron_c) !important;
	opacity: .4 !important;
}

input::-webkit-input-placeholder {
	color: var(--marron_c) !important;
	opacity: 1 !important;
}

textarea::-webkit-input-placeholder {
	color: var(--marron_c) !important;
	opacity: 1 !important;
}

input::placeholder {
	color: var(--marron_c) !important;
	opacity: .6 !important;
}

textarea::placeholder {
	color: var(--marron_c) !important;
	opacity: .6 !important;
}

/*********************************
    UTILIDADES GENERALES
**********************************/

/* Contenedor horizontal reutilizable */
.container_site {
	width: min(100% - (2 * var(--contenedor-padding)), var(--contenedor-max));
	margin-inline: auto;
}

/* por los circulos de los iconos del footer */
.fontASCircle {
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	border-radius: 50%;
	position: relative;
	margin: auto 0;
	margin-left: 2px;
}

.fontASCircle  > .fa-map-marker-alt,
 .fontASCircle  > .fa-whatsapp,
 .fontASCircle  > .fa-instagram,
 .fontASCircle  > .fa-facebook-f,
 .fontASCircle  > .fa-tiktok {
	color: var(--marron);
	background-color: transparent;
	font-size: .6rem;
	line-height: 16px;
}

 .fontASCircle  > .fa-whatsapp,
 .fontASCircle  > .fa-instagram,
 .fontASCircle  > .fa-facebook-f,
 .fontASCircle  > .fa-tiktok {
	font-size: .65rem;
}

.fontASCircle  > .fa-map-marker-alt::before,
 .fontASCircle  > .fa-whatsapp::before,
 .fontASCircle  > .fa-instagram::before,
 .fontASCircle  > .fa-facebook-f::before,
 .fontASCircle  > .fa-tiktok::before {
	position: absolute;
	bottom: 0;
	left: -1px;
}
 .fontASCircle  > .fa-whatsapp::before,
 .fontASCircle  > .fa-instagram::before,
 .fontASCircle  > .fa-facebook-f::before,
 .fontASCircle  > .fa-tiktok::before {
	left: -1px;
	bottom: -.5px;
}

 .fontASCircle  > .fa-instagram::before {
	left: -2px;
}

/*********************************
    HEADER
**********************************/

body > header {
	position: sticky;
	top: 0;
	z-index: 2222;
	background-color: #fff;
}

@media (min-width: 1151px) {
	body > header {
		transition: transform .2s ease;
		will-change: transform;
	}

	body > header.scrolled {
		transform: translate3d(0, calc(0px - var(--hauteur-franja)), 0);
	}
}

/* Franja superior de aviso */
body > header > .franja_superior {
	background-color: var(--naranja);
	padding: 1rem;
}

body > header > .franja_superior > p {
	max-width: 75rem;
	margin: 0 auto;
	text-align: center;
	line-height: 1.4;
	color: #fff;
	font-family: var(--fontBL);
	font-size: 1.1rem;
}

/* Cabecera principal */
.cabecera_principal {
	padding: 0 3rem;
	display: flex;
}

.cabecera_principal > .logo_header {
	text-align: center;
}

.cabecera_principal > .logo_header img {
	margin-inline: auto;
	width: 240px;
}

.cabecera_principal > .cabecera_derecha {
	flex-grow: 1;
	display: grid;
}

/* Bloques utilitarios: saludo, búsqueda, WhatsApp, accesos */
.cabecera_principal .cabecera_utiles {
	width: min(100%, var(--contenedor-max));
	margin: 0 auto;
	display: flex;
	align-items: end;
	justify-content: space-evenly;
}

/* Saludo */
body > header .bloque_hola {
	display: flex;
	align-items: center;
	font-family: var(--fontBB);
	font-size: 1.2rem;
	margin-top: .5rem;
}

body > header .bloque_hola > p {
	margin-left: 15%;
}

/* Búsqueda */
body > header .bloque_busqueda form {
	display: flex;
	width: 40rem;
}

body > header .bloque_busqueda input {
	width: 100%;
	min-width: 0;
	height: 2.75rem;
	padding: .3rem .75rem;
	margin: 0;
	font-size: 1.2rem;
	font-family: var(--fontBM);
	font-weight: 500;
	border: 1px solid var(--marron);
	border-right: none;
	border-radius: .2em 0 0 .2em;
	color: var(--marron);
	background-color: #fff;
}

body > header .bloque_busqueda input::placeholder,
body > header .bloque_busqueda input::-webkit-input-placeholder,
body > header .bloque_busqueda input::-moz-placeholder,
body > header .bloque_busqueda input::-ms-input-placeholder {
	color: var(--marron_c);
	opacity: .4;
}

body > header .bloque_busqueda button {
	width: 3.5rem;
	height: 2.75rem;
	margin: 0;
	border: 1px solid var(--marron);
	border-left: none;
	border-radius: 0 .2em .2em 0;
	background-color: var(--marron);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Icono de lupa */
body > header .bloque_busqueda .fa-search {
	color: #fff;
	font-size: 1.2rem;
}
body > header .bloque_busqueda .fa-search:hover {
	color: var(--naranja);
}

/* WhatsApp */
body > header .bloque_whatsapp > a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: .75rem;
	width: fit-content;
	transition: transform 0.3s ease;
}

body > header .bloque_whatsapp > a:hover {
	transform: scale(1.1);
}

body > header .bloque_whatsapp > a > div:first-of-type {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 2rem;
}

body > header .bloque_whatsapp > a > div:first-of-type > .iconeWA:after {
	content: '\f4a3';
	font-size: 1rem;
	position: absolute;
	left: 9px;
	bottom: 8px;
	background-color: #fff;
}

body > header .bloque_whatsapp > a > div:first-of-type img {
	width: 35px;
	height: 40px;
}

body > header .bloque_whatsapp > a > div:last-of-type span {
	display: block;
	font-size: .85rem;
	line-height: 1.3;
}

body > header .bloque_whatsapp > a > div:last-of-type span:first-of-type {
	font-size: 1rem;
	font-family: var(--fontBB);
}

/* Accesos rápidos */
body > header .bloque_accesos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	flex-wrap: wrap;
	width: fit-content;
}

body > header .bloque_accesos > span {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-size: 0;
	cursor: pointer;
}

body > header .bloque_accesos > span::after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	font-size: 1.5rem;
}

/* perfil */
.perfilHeader {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagina_actual.acceso_perfil.perfilHeader {
	width: 42px;
	height: 42px;
}

.pagina_actual.acceso_perfil.perfilHeader > i {
	font-weight: 600;
	height: 25px;
	width: 25px;
	font-size: 1.5rem;
}

.btnAbrirPerfil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	background: transparent;
	color: var(--marron);
	font-size: 1.6rem;
	cursor: pointer;
	text-decoration: none;
}

.btnAbrirPerfil:hover > i {
	font-weight: 600;
}

.menuPerfilLogin {
	position: absolute;
	top: calc(100% + 14px);
	right: -11px;
	z-index: 1000;
	width: 430px;
	max-width: calc(100vw - 32px);
	padding: 10px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.menuPerfilLogin::before {
	content: "";
	position: absolute;
	top: -13px;
	right: 18px;
	width: 26px;
	height: 26px;
	background: #fff;
	transform: rotate(45deg);
	border-left: 1px solid rgba(0, 0, 0, 0.08);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 0;
}

.menuPerfilLoginTitulo {
	margin: 0;
	margin-bottom: 1rem;
	text-align: center;
	font-size: 1.35rem;
	font-weight: 400;
	color: #000;
}

#formPerfilCodigoEmail .perfilCampo {
	padding: 1rem 0;
}

.perfilFormulario .perfilCampo {
	padding: .3rem 0;
}

.perfilFormulario .perfilCampo input {
	width: 50%;
	margin: 0 25%;
}

.perfilFormulario .perfilCampoPassword button {
	border: 0;
	background-color: transparent;
	position: absolute;
	right: 20%;
	cursor: pointer;
	color: var(--marron);
}

.perfilFormulario .perfilCampoPassword button:hover {
	color: var(--naranja);
}

.perfilFormulario .perfilCampoPassword input[type=text] + button > i {
	font-weight: 400;
}

.perfilFormularioAcciones {
	display: flex;
	justify-content: space-around;
}

.perfilFormularioAcciones .btnPerfilVolver {
	border: 0;
	background-color: transparent;
	color: var(--naranja);
}

.perfilFormularioAcciones .btnPerfilEnviar {
	border: 1px solid var(--naranja);
	padding: .2rem 1rem;
	border-radius: .5rem;
	background-color: var(--naranja);
	color: #fff;
}

.perfilFormularioAcciones .btnPerfilEnviar:hover {
	background-color: #fff;
	color: var(--naranja);
}

.perfilFormularioAcciones .btnPerfilVolver:hover,
 .perfilFormularioAcciones .btnPerfilEnviar:hover {
	cursor: pointer;
}

.perfilRegistro {
	text-align: center;
	font-size: .8rem;
	margin-top: 1rem;
}

.perfilOlvido {
	text-align: center;
	font-size: .8rem;
}

.perfilOlvido > button,
 .perfilRegistro > button {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.perfilOlvido > button:hover,
  .perfilRegistro > button:hover {
	text-decoration: underline;
	color: var(--naranja);
}

.perfilTextoAyuda,
 .perfilMensajeError {
	text-align: center;
}

.perfilMensajeError {
	border: 1px solid #c0392b;
	background-color: #fdecea;
	color: #8e1b12;
}

.perfilSeparador {
	height: 1px;
	background-color: var(--marron_c);
	margin: 1rem 0;
}

.perfilVista {
	z-index: 1000;
	position: relative;
}

.perfilVista a:hover {
	color: var(--naranja);
	padding: .5rem .87rem;
}

.perfilLoginOpcion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	min-height: 50px;
	margin-bottom: 10px;
	padding: 8px 16px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f0f5f7;
	color: #064fa8;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.5px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.perfilLoginOpcion:hover {
	background: #e4eef2;
	border-color: #cfd8dc;
}

.perfilLoginOpcion:active {
	transform: scale(0.99);
}

.perfilLoginOpcion:last-child {
	margin-bottom: 0;
}

.perfilLoginSocial {
	position: relative;
	background: #fff;
	color: var(--verde, #00a651);
	font-size: 1rem;
}

.perfilLoginSocial strong {
	font-weight: 700;
}

.menuPerfilCuenta {
	width: 395px;
	width: max-content;
	padding: 0;
}

.perfilCuentaEnlace,
.perfilCuentaSalir {
	display: block;
	width: 100%;
	padding: .5rem 1rem;
	border: none;
	background: transparent;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	color: var(--marron);
}

.perfilCuentaEnlace:hover,
.perfilCuentaSalir:hover {
	background: #f2f2f2;
	font-weight: 600;
}

.perfilCuentaSeparador {
	width: 100%;
	height: 1px;
	margin: 0;
	background: #d4d4d4;
}

.perfilCuentaFormSalir {
	margin: 0;
}

/* perfil estado abierto */
.menuPerfilLogin.activo {
	display: block;
}

/* =========================
   FAVORITOS
========================= */

.favoritos {
	cursor: pointer;
}

.favoritos:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.favoritos.favoritoActivo {
	color: #c62828;
}

.favoritos.favoritoProcesando {
	cursor: wait;
	opacity: .55;
	pointer-events: none;
}

.favoritosNotificacion {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 10000;
	width: min(25rem, calc(100vw - 2rem));
	padding: .9rem 1rem;
	border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
	font-size: .95rem;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-.75rem);
	transition: opacity .2s ease, transform .2s ease;
}

.favoritosNotificacionVisible {
	opacity: 1;
	transform: translateY(0);
}

.favoritosNotificacionExito {
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #81c784;
}

.favoritosNotificacionError {
	background: #ffebee;
	color: #b71c1c;
	border: 1px solid #ef9a9a;
}

/* tienda */

body > header .bloque_accesos > .acceso_tienda {
	padding: 0 1.2em;
	line-height: 2.75rem;
	border-radius: var(--radius);
	background-color: var(--marron);
	border: 1px solid var(--marron);
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	position: relative;
	padding-right: 3rem;
}

body > header .bloque_accesos > .acceso_tienda::after {
	content: '\f49c';
	position: absolute;
	right: 1rem;
	font-weight: 300;
	font-size: 1.3rem;
}

body > header .bloque_accesos > .acceso_tienda:hover {
	background-color: #fff;
	border: 1px solid var(--marron);
	color: var(--marron);
}

body > header .bloque_accesos > .acceso_tienda:hover::after {
	font-weight: 600;
}

body > header .bloque_accesos > .acceso_carrito::after {
	content: '\f07a';
}

body > header .bloque_accesos > .acceso_carrito:hover::after {
	font-weight: 600;
}

body > header .bloque_accesos > .acceso_carrito > a {
	position: relative;
}

body > header .bloque_accesos span#contadorCarrito {
	position: absolute;
	right: -30px;
	top: -20px;
	text-align: center;
	background-color: #f0a65d;
	border-radius: 50%;
	color: #FFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
}

/* Barra de navegación principal */
body > header .barra_menu {
	background-color: var(--marron_c);
	padding: 1.1rem var(--contenedor-padding);
	font-weight: 600;
	font-size: .95rem;
	position: relative;
}

body > header .barra_menu > nav {
	width: min(100%, var(--contenedor-max));
	margin: 0 auto;
}

body > header .barra_menu > nav > ul {
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: .75rem 1.5rem;
	flex-wrap: wrap;
}

body > header .barra_menu > nav > ul > li {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1rem;
	line-height: 1.2;
}

body > header .barra_menu > nav > ul > li > a,
body > header .barra_menu > nav > ul > li > .submenu_titulo {
	text-decoration: none;
	color: var(--marron);
	padding: .35rem .2rem;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	width: min-content;
}

body > header .barra_menu > nav > ul > li > a:hover,
body > header .barra_menu > nav > ul > li > a:focus-visible,
body > header .barra_menu > nav > ul > li.submenu:hover > .submenu_titulo,
body > header .barra_menu > nav > ul > li.submenu:focus-within > .submenu_titulo {
	text-decoration: underline;
	color: var(--naranja);
	text-underline-offset: 5px;
}

body > header .barra_menu > nav > ul > li.submenu > .submenu_titulo {
	cursor: pointer;
}

/* Flecha */
body > header .barra_menu > nav > ul > li.submenu > .submenu_titulo::after {
	content: '\f078';
	font-family: "Font Awesome 5 Pro";
	font-weight: 500;
}

/* Submenu */
body > header .barra_menu > nav > ul > li.submenu > .submenu_lista {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 50px;
	margin: 0;
	padding: .35rem 0;
	background-color: var(--marron_c);
	border: 1px solid var(--marron);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 1000;
}

/* Mostrar el submenu cuando pasa el mouse o en el enfoque del teclado */
body > header .barra_menu > nav > ul > li.submenu:hover > .submenu_lista,
body > header .barra_menu > nav > ul > li.submenu:focus-within > .submenu_lista {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Elementos de los submenus */
body > header .barra_menu > nav > ul > li.submenu > .submenu_lista > li {
	display: block;
}

body > header .barra_menu > nav > ul > li.submenu > .submenu_lista > li > a {
	display: block;
	padding: .65rem 1rem;
	text-align: left;
	text-decoration: none;
	color: var(--marron);
	white-space: nowrap;
}

body > header .barra_menu > nav > ul > li.submenu > .submenu_lista > li > a:hover,
body > header .barra_menu > nav > ul > li.submenu > .submenu_lista > li > a:focus-visible {
	background-color: rgba(0,0,0,0.05);
	color: var(--naranja);
}

body > header .barra_menu > nav > ul > li:nth-of-type(10) > a {
	padding: .8em 1em;
	border-radius: var(--radius);
	background-color: var(--naranja);
	color: #fff;
	border: 1px solid var(--naranja);
	text-transform: uppercase;
}

body > header .barra_menu > nav > ul > li:nth-of-type(10) > a:hover {
	background-color: #fff;
	color: var(--naranja);
	border: 1px solid var(--naranja);
	text-decoration: none;
}

body > header .barra_menu > nav > ul > li:nth-of-type(11) > a {
	white-space: nowrap;
}

/* Éléments mobiles cachés sur desktop */
.menu_mobile_toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cabecera-mob,
#buscar-mob,
 .menu_mobile_bouton,
 .menu_mobile_overlay {
	display: none;
}

.pagina_actual {
	font-family: var(--fontBB);
	color: var(--naranja);
	cursor: not-allowed;
}

/*********************************
    RUTA DE NAVEGACION
**********************************/

main > .rutaDeNagigacion {
	padding: 0;
	position: absolute;
}

main > .rutaDeNagigacion > ul {
	display: flex;
	list-style: none;
	margin-left: 5rem;
}

main > .rutaDeNagigacion > ul > li {
	margin-left: .5rem;
}

main > .rutaDeNagigacion > ul > li:not(:first-of-type)::before {
	content: '\f054\0000A0';
	font-family: "Font Awesome 5 Pro";
	font-size: .8rem;
}

/*********************************
    FOOTER
**********************************/

body > footer {
	color: #fff;
}

/* Parte superior del footer */
body > footer > .footer_superior {
	background-color: var(--marron);
	padding: 1.5rem var(--contenedor-padding);
	display: grid;
	grid-template-columns: minmax(0, 22rem) 1fr;
	gap: 2rem;
	align-items: start;
}

body > footer > .footer_superior > div:first-of-type {
	width: min-content;
}

body > footer > .footer_superior > div:first-of-type > div {
	margin-bottom: 1rem;
	width: max-content;
}

body > footer > .body > .footer_superior > div:first-of-type > p {
	max-width: 28rem;
	font-size: .95rem;
	line-height: 1.5;
}

body > footer > .footer_superior > .footer_columnas {
	width: 70%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	height: fit-content;
	margin-top: auto;
	margin-left: 30%;
}

body > footer > .footer_superior > .footer_columnas a {
	text-decoration: none;
}

body > footer > .footer_superior > .footer_columnas a:hover {
	text-decoration: underline;
}

body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) > span {
	display: inline-block;
	margin-bottom: -.5rem;
	font-size: 1.2rem;
	font-family: var(--fontBM);
	font-weight: bold;
	color: var(--naranja);
}

body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) > ul {
	list-style: none;
}

body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) > ul > li {
	display: flex;
	align-items: flex-start;
	margin: .5rem 0;
	min-height: 20px;
	font-size: .9rem;
	line-height: 1.35;
}

body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li {
	text-indent: .35rem;
}

body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li > a {
	display: block;
	width: 20px;
	padding-bottom: 2px;
}

body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li > a:hover {
	border-bottom: 2px solid #FFF;
	border-radius: 1rem;
	transform: scale(1.1);
}

body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li > a:hover > .fontASCircle  > .fa-instagram::before,
  body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li > a:hover > .fontASCircle  > .fa-facebook-f::before,
  body > footer > .footer_superior > .footer_columnas > div:nth-of-type(2) > ul > li > a:hover > .fontASCircle  > .fa-tiktok::before {
	bottom: 1px;
}

body > footer > .footer_superior > .footer_columnas > div:last-of-type {
	display: flex;
	align-items: center;
	justify-content: center;
}

body > footer > .footer_superior > .footer_columnas > div:last-of-type img {
	margin-inline: auto;
}

/* Franja inferior legal */
body > footer > .footer_inferior {
	background-color: var(--marron2);
	padding: 1rem var(--contenedor-padding);
	font-size: .9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

body > footer > .footer_inferior > div > span:first-of-type {
	margin-right: 2em;
}

body > footer > .footer_inferior > div > span > a {
	color: #fff;
	text-decoration: none;
}

body > footer > .footer_inferior > div > span > a:hover {
	text-decoration: underline;
}

/*********************************
    MAIN
**********************************/

main {
	width: 100%;
}

/****  botón WhatsApp ****/
.whatsapp-boton {
	position: fixed;
	bottom: 10%;
	right: 5%;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	transition: transform 0.3s ease;
}

.whatsapp-boton:hover {
	transform: scale(1.1);
}

.whatsapp-boton img {
	width: 50px;
	height: 50px;
}

/* aside error validación formulario */

aside.error_validacion {
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(250, 250, 250, 0.6);
	z-index: 15;
}

aside.error_validacion > div {
	transition: display 1s;
	display: block;
	position: relative;
	width: fit-content;
	background-color: rgb(252, 210, 210);
	border: 0.5em solid rgb(255, 129, 129);
	border-radius: 1em;
	padding: 1em;
	font-size: 1em;
	text-align: center;
	z-index: 55;
}

aside.error_validacion > div > p {
	margin-bottom: 1em;
}

aside.error_validacion > div > ul {
	text-align: left;
	padding-left: 1em;
}

aside.error_validacion > div > p:nth-of-type(2) {
	padding-left: 1em;
}

aside.error_validacion > div > p:last-of-type {
	width: auto;
	margin: auto;
	padding: 0.2em;
	display: inline-block;
	background-color: rgb(255, 255, 255);
	border: 0.2em solid rgb(255, 129, 129);
	border-radius: 0.5em;
	cursor: pointer;
	color: rgb(0, 0, 0);
	transition: borderColor 1s;
}

aside.error_validacion > div > p:last-of-type::hover {
	background-color: rgb(255, 129, 129);
	border: 0.2em solid rgb(255, 255, 255);
	color: rgb(f, f, f);
}

/*********************************
    MEDIA QUERIES
**********************************/

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 1550px) {
	:root {
		--contenedor-padding: 1rem;
	}
	body > header .barra_menu > nav > ul {
		gap: .75rem;
	}
}

@media (max-width: 1400px) {
	body > header .bloque_busqueda form {
	  width: 35rem;
	}
}

@media (max-width: 1320px) {
	body > header .bloque_busqueda form {
	  width: 30rem;
	}
}

@media (max-width: 1240px) {
	body > header .bloque_busqueda form {
	  width: 25rem;
	}
}

@media (max-width: 1200px) {
	.cabecera_principal > .cabecera_utiles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 1.5rem;
		justify-items: center;
	}
	.cabecera_principal > .cabecera_utiles form {
		width: 20rem;
	}
}

@media (max-width: 1150px) {

	body > header,
	main,
	body > footer {
		width: 100vw;
	}
	
	body > header {
		position: relative;
		padding-top: calc(var(--hauteur-franja) + var(--hauteur-bloque-menu));
	}
	
	body > header.scroll-desc {
		padding-top: var(--hauteur-bloque-menu);
	}

	body > header.scroll-desc > .franja_superior {
		transform: translateY(-100%);
		opacity: 0;
		pointer-events: none;
	}
	
	body > header > .franja_superior {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 2100;
		transition: transform .28s ease, opacity .28s ease;
		will-change: transform, opacity;
	}
	
	body > header > .franja_superior > p {
		font-size: .7rem;
		width: 40%;
	}

	.cabecera_principal {
		display: none;
	}

	body > header.scroll-desc > .bloque_menu {
		top: 0;
	}
	
	body > header > .bloque_menu {
		position: fixed;
		top: var(--hauteur-franja);
		left: 0;
		width: 100vw;
		z-index: 2000;
		background-color: #fff;
		transition: top .28s ease;
		box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
	}

	body > header .barra_menu {
		padding: .75rem 1rem;
		min-height: 4rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	body > header .cabecera-mob {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	body > header .cabecera-mob > div.logo_header-mob {
		width: calc(100% - 95px);
	}
	
	body > header .cabecera-mob > div.logo_header-mob img {
		margin: 0 auto;
		height: 50px;
		width: auto;
	}
	
	body > header .bloque_accesos-mob {
		display: flex;
	}
	
	body > header .bloque_accesos-mob > span {
		margin-left: .5em;
		font-size: 0;
		display: inline-block;
		position: relative;
	}
	
	body > header .bloque_accesos-mob > span > a {
		font-size: 0;
		display: inline-block;
		height: 30px;
		width: 25px;
	}
	
	body > header .bloque_accesos-mob .perfilVista form input {
		margin-top: .5rem;
		margin-bottom: .5rem;
	}
	
	body > header .bloque_accesos-mob .perfilVista form input:last-of-type {
		margin-top: 0;
		margin-bottom: .5rem;
	}

	body > header .bloque_accesos-mob > .pagina_actual::after,
	body > header .bloque_accesos-mob > span > a::after {
		font-family: "Font Awesome 5 Pro";
		font-weight: 400;
		font-size: 1.5rem;
		position: absolute;
		left: 0;
	}
	
	body > header .bloque_accesos-mob > span > a:hover,
	body > header .bloque_accesos-mob > span > a:hover::after {
		cursor: pointer;
	}
	
	body > header .bloque_accesos-mob > .acceso_tienda {
		padding: .2rem;
		display: inline-block;
		background-color: var(--marron);
		border-radius: .3rem;
		height: 37px;
		width: 37px;
	}
	
	body > header .bloque_accesos-mob > .acceso_perfil.perfilHeaderMob {
		height: 37px;
		width: 37px;
	}
	
	body > header .bloque_accesos-mob > .acceso_tienda > a {
		width: 31px;
		height: 31px;
	}

	body > header .bloque_accesos-mob > .acceso_tienda.pagina_actual,
	body > header .bloque_accesos-mob > .acceso_tienda:hover {
		background-color: #fff;
	}
	
	body > header .bloque_accesos-mob > .acceso_tienda.pagina_actual::after,
	body > header .bloque_accesos-mob > .acceso_tienda > a::after {
		content: '\f49c';
		font-weight: 300;
		font-size: 1.2rem;
		color: #fff;
		bottom: 3px;
		left: 6px;
	}
	
	body > header .bloque_accesos-mob > .acceso_tienda.pagina_actual::after,
	body > header .bloque_accesos-mob > .acceso_tienda:hover > a::after,
	body > header .bloque_accesos-mob > .acceso_tienda > a:hover::after	{
		color: var(--marron);
	}
	
	body > header .bloque_accesos-mob > .acceso_carrito > a::after {
		content: '\f07a';
	}
	
	body > header .bloque_accesos-mob > .acceso_carrito.pagina_actual::after,
	body > header .bloque_accesos-mob > .acceso_carrito:hover > a::after {
		font-weight: 600;
	}
	
	body > header .bloque_accesos-mob span#contadorCarrito {
		position: absolute;
		right: -5px;
		text-align: center;
		background-color: #f0a65d;
		border-radius: 50%;
		color: #FFF;
		font-size: 12px;
		line-height: 16px;
		width: 16px;
		height: 16px;
		font-weight: bold;
		z-index: 555;
	}

	/* Bouton hamburger */
	.menu_mobile_bouton {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: .32rem;
		width: 2.9rem;
		height: 2.9rem;
		cursor: pointer;
		border-radius: .4rem;
		background-color: #fff;
		z-index: 1101;
		flex: 0 0 auto;
	}

	.menu_mobile_bouton span {
		display: block;
		width: 1.55rem;
		height: 2px;
		background-color: var(--marron);
		border-radius: 999px;
		transition: transform .25s ease, opacity .25s ease;
	}

	.menu_mobile_toggle:checked + .menu_mobile_bouton span:nth-child(1) {
		transform: translateY(0.4rem) rotate(45deg);
	}

	.menu_mobile_toggle:checked + .menu_mobile_bouton span:nth-child(2) {
		opacity: 0;
	}

	.menu_mobile_toggle:checked + .menu_mobile_bouton span:nth-child(3) {
		transform: translateY(-0.4rem) rotate(-45deg);
	}

	/* Overlay obscuro */
	.menu_mobile_overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.38);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .28s ease, visibility .28s ease;
		z-index: 1090;
	}

	.menu_mobile_toggle:checked + .menu_mobile_bouton + .menu_mobile_overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Panel lateral */
	body > header .barra_menu > .nav_principal {
		position: fixed;
		top: 0;
		left: 0;
		width: min(86vw, 22rem);
		max-height: 100vh;
		overflow-y: auto;
		background-color: var(--marron_c);
		border-right: 1px solid var(--marron);
		box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .22);
		display: block;
		transform: translateX(-100%);
		transition: transform .28s ease;
		z-index: 1100;
		padding-top: 6rem;
		margin: 0;
	}

	.menu_mobile_toggle:checked + .menu_mobile_bouton + .menu_mobile_overlay ~ .nav_principal {
		transform: translateX(0);
	}

	/* Menu vertical */
	body > header .barra_menu > .nav_principal > ul {
		display: block;
		list-style: none;
		margin: 0;
		padding: .35rem 0;
	}

	body > header .barra_menu > .nav_principal > ul > li {
		display: block;
		position: static;
		text-align: left;
		border-bottom: 1px solid rgba(99, 54, 18, 0.18);
	}

	body > header .barra_menu > .nav_principal > ul > li:last-child {
		border-bottom: none;
	}

	body > header .barra_menu > .nav_principal > ul > li > a,
	body > header .barra_menu > .nav_principal > ul > li > .submenu_titulo,
	body > header .barra_menu > .nav_principal > ul > li.pagina_actual {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: .95rem 1rem;
		text-align: left;
		line-height: 1.3;
	}

	/* Submenus mobil cerrado por defecto */
	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_lista {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background-color: transparent;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	body > header .activo {
		/* background-color: transparent; */
	}

	/* Abrir solo si .activo */
	body > header .barra_menu > .nav_principal > ul > li.submenu.activo > .submenu_lista {
		display: block;
		padding: 0 0 .45rem 0;
	}

	/* Neutralizar el hover desktop en los mobiles */
	body > header .barra_menu > .nav_principal > ul > li.submenu:hover > .submenu_lista,
	body > header .barra_menu > .nav_principal > ul > li.submenu:focus-within > .submenu_lista {
		display: none;
		padding: 0;
	}

	body > header .barra_menu > .nav_principal > ul > li.submenu.activo:hover > .submenu_lista,
	body > header .barra_menu > .nav_principal > ul > li.submenu.activo:focus-within > .submenu_lista {
		display: block;
		padding: 0 0 .45rem 0;
	}

	/* Titulo susbmenu mobile */
	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_titulo {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: .95rem 1rem;
		text-align: left;
		line-height: 1.3;
		cursor: pointer;
		user-select: none;
		color: var(--marron);
	}

	/* Flecha mobil */
	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_titulo::after {
		margin-left: auto;
		transition: transform .25s ease;
	}

	body > header .barra_menu > .nav_principal > ul > li.submenu.activo > .submenu_titulo::after {
		transform: rotate(180deg);
	}

	/* Enlace susbmenu mobil */
	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_lista > li {
		display: block;
	}

	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_lista > li > a {
		display: block;
		padding: .65rem 1rem .65rem 2rem;
		font-size: .95rem;
		line-height: 1.3;
		color: var(--marron);
		background-color: transparent;
		text-decoration: none;
		white-space: normal;
	}

	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_lista > li > a:hover,
	body > header .barra_menu > .nav_principal > ul > li.submenu > .submenu_lista > li > a:focus-visible {
		background-color: rgba(0, 0, 0, 0.05);
		color: var(--naranja);
	}

	/* Neutralization de los estylos desktop especiales */
	body > header .barra_menu > .nav_principal > ul > li:nth-of-type(10) > a {
		padding: .95rem 1rem;
		border-radius: 0;
		background-color: transparent;
		color: var(--marron);
		border: 0;
		text-transform: none;
	}

	body > header .barra_menu > .nav_principal > ul > li:nth-of-type(10) > a:hover {
		background-color: rgba(0, 0, 0, 0.05);
		color: var(--naranja);
		border: 0;
		text-decoration: none;
	}

	body > header .barra_menu > .nav_principal > ul > li:nth-of-type(11) > a {
		white-space: normal;
	}

	.pagina_actual {
		padding: .95rem 1rem;
	}

	body > header #buscar-mob {
		background-color: var(--marron_c);
		padding: .5rem 0;
		display: inherit;
	}

	body > header #buscar-mob > form {
		margin: 0 auto;
		width: 95%;
	}
	
	body > footer > .footer_superior {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	body > footer > .footer_superior > div:first-of-type {
		margin: 0 auto;
		width: 80%;
	}

	body > footer > .footer_superior > div:first-of-type > div {
		margin: 0 auto;
		margin-bottom: 1rem;
	}

	body > footer > .footer_superior > div:first-of-type img {
		display: inline;
		width: 220px;
	}

	body > footer > .footer_superior > div:first-of-type > p {
		text-align: center;
		margin: 0 auto;
		width: 100%;
	}

	body > footer > .footer_superior > .footer_columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0 auto;
	}

	body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) {
		margin: 0 auto;
	}
	
	body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) > span {
		margin-bottom: 0;
	}
	
	body > footer > .footer_superior > .footer_columnas > div:not(:last-of-type) > ul > li {
		margin: 0;
		font-weight: 500;
	}

	body > footer > .footer_superior > .footer_columnas > div:last-of-type {
		grid-column: 1 / 3;
	}
	
	body > footer > .footer_superior > .footer_columnas > div:last-of-type img {
		width: 160px;
	}

	body > footer > .footer_inferior {
		flex-direction: column;
		text-align: center;
	}

	body > footer > .footer_inferior > span {
		display: inline-block;
		width: 70%;
	}
}

@media (max-width: 800px) {
	main > .rutaDeNagigacion > ul {
		margin-left: 0;
	}
	
	body > footer > .footer_inferior > span {
		margin: 0 auto;
	}
}

/* Móvil */
@media (max-width: 600px) {
	body > header > .franja_superior > p {
		width: 50%;
	}
	.menuPerfilLogin {
		position: fixed;
		top: 125px;
		left: 60%;
		right: auto;
		transform: translateX(-50%);
		width: calc(100vw - 32px);
		width: 70vw;
		padding: 32px 14px 22px;
		z-index: 2000;
	}

	.menuPerfilLogin::before {
		right: 30px;
	}

	.menuPerfilLoginTitulo {
		font-size: 1.2rem;
	}

	.perfilLoginOpcion {
		font-size: 1rem;
	}

	.perfilIconGoogle,
	.perfilIconFacebook {
		left: 42px;
	}
}

/* Móvil */
@media (max-width: 520px) {
	body > footer > .footer_superior > .footer_columnas {
	  width: 100%;
	}
}

/* Móvil */
@media (max-width: 500px) {
	body > header > .franja_superior > p {
		width: 60%;
	}
}

/* Móvil */
@media (max-width: 500px) {
	body > header > .franja_superior > p {
		width: 70%;
	}
}

/* Móvil */
@media (max-width: 360px) {
	body > header > .franja_superior > p {
		width: 75%;
	}
}