/* ============================================================
   HEADER — ACORDE AL INICIO (maximalista claro)
	Navbar marfil que armoniza con la paleta editorial del home:
	fondo marfil, carbón y acentos rosa viejo.
   Los textos del menú son BOTONES grandes sin íconos
   decorativos. NO toca funcionalidad (clases JS intactas).
   Se carga globalmente vía app.blade.php después de style.css.
   ============================================================ */

:root {
	--hdr-fondo:      #EAE8E4;
	--hdr-fondo-2:    #D8D5CE;
	--hdr-tinta:      #232526;
	--hdr-texto:      #434B4D;
	--hdr-texto-soft: #6E7476;
	--hdr-crema:      #F7F6F3;
	--hdr-esmeralda:  #232526;
	--hdr-esmeralda-3:#C9B88C;
	--hdr-terracota:  #D6C7A1;
	--hdr-terracota-2:#C8B78F;
	--hdr-ocre:       #434B4D;
	--hdr-ocre-2:     #5A6264;
	--hdr-blanco:     #ffffff;
	--hdr-linea:      #D8D5CE;
	--hdr-sep:        34px;
}

/* ============================================================
   HEADER BASE — crema claro
   ============================================================ */
.header {
	background: var(--hdr-fondo) !important;
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid var(--hdr-linea);
	box-shadow: 0 4px 18px rgba(35,37,38,0.08);
}

/* ============================================================
   TOP BAR — franja esmeralda
   ============================================================ */
.header__top {
	background: var(--hdr-esmeralda) !important;
	padding: 8px 0;
}

.header__top__links,
.header__top__links a,
.header__top__links .header__top__info {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}
.header__top__links a { text-decoration: none; }
.header__top__links a:hover { color: var(--hdr-ocre); }
.header__top__links a i { color: var(--hdr-ocre); margin-right: 6px; }

/* ============================================================
   TOP BAR — CAROUSEL DE FRASES
   Rotación suave con crossfade entre las frases de empresa.
   ============================================================ */
.header__top__links {
	display: flex;
	align-items: center;
	justify-content: center;
}
.header__top__carousel {
	position: relative;
	width: 100%;
	min-width: 0;
	height: 20px;
	overflow: hidden;
}
.header__top__carousel-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	will-change: opacity, transform;
}
.header__top__carousel-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.header__top__carousel-item {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
}

/* ============================================================
   HEADER PRINCIPAL — crema claro
   ============================================================ */
.header__main { background: var(--hdr-fondo) !important; border-bottom: none !important; }

.header__main > .container {
	width: 100%;
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	padding-right: clamp(16px, 2.5vw, 40px);
	padding-left: clamp(16px, 2.5vw, 40px);
}

.header__main__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 1.5vw, 24px);
	height: 76px;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

/* logo */
.header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.header__logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--hdr-crema);
	border: 1px solid var(--hdr-linea);
}
.img_logo {
	width: 100%;
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
	object-fit: contain;
	transition: transform 0.25s ease;
}
.header__logo a:hover .img_logo { transform: scale(1.03); }

/* ============================================================
   NAV — textos grandes separados por "/", el activo se pinta
   ============================================================ */
.header__nav {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header__nav-list {
	display: flex;
	align-items: center;
	gap: clamp(2px, 0.5vw, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.header__nav-list li {
	position: relative;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.header__nav-list li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hdr-texto-soft);
	padding: 0 clamp(8px, 1vw, 15px);
	transition: color 0.2s ease;
	overflow: visible;
	white-space: nowrap;
}
.header__nav-list li a i {
	font-size: 14px;
	color: var(--hdr-tinta);
	transition: color 0.2s ease, transform 0.2s ease;
}
.header__nav-list li a:hover {
	color: var(--hdr-terracota);
}
.header__nav-list li a:hover i {
	color: var(--hdr-tinta);
	transform: translateY(-1px);
}

/* == paralelogramo ACTIVO: cubre todo el li de punta a punta con
   la forma inclinada (↙/↘) aprobada. Sin separadores "/". */
.header__nav-list li.active a {
	color: var(--hdr-esmeralda);
	font-weight: 800;
	z-index: 1;
}
.header__nav-list li.active a i {
	color: var(--hdr-esmeralda);
}
.header__nav-list li.active::before {
	content: '';
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 3px;
	background: var(--hdr-terracota);
	border-radius: 3px;
	z-index: 0;
	pointer-events: none;
}

/* ============================================================
   ACCIONES — íconos en botones redondeados
   ============================================================ */
.header__actions {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	margin-left: 0;
}

.header__action-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 8px;
	color: var(--hdr-tinta);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.header__action-icon:hover {
	background: var(--hdr-crema);
	border-color: var(--hdr-terracota);
	color: var(--hdr-esmeralda);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(35,37,38,0.08);
}
.header__action-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	flex-shrink: 0;
}

/* toggle tema */
.header__actions .theme-toggle { display: none; }
@media (min-width: 768px) {
	.header__actions .theme-toggle { display: inline-flex; }
}

/* búsqueda */
.header__search-inline {
	display: flex;
	align-items: center;
	gap: 4px;
	width: clamp(120px, 11vw, 170px);
	box-sizing: border-box;
	background: transparent;
	border: 1px solid var(--hdr-linea);
	border-radius: 8px;
	padding: 2px 5px 2px 9px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.header__search-inline:focus-within {
	border-color: var(--hdr-terracota);
	background: var(--hdr-blanco);
}
.header__search-inline-btn {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--hdr-texto-soft);
	transition: all 0.2s ease;
}
.header__search-inline-btn:hover {
	background: var(--hdr-ocre);
	color: var(--hdr-tinta);
}
.header__search-inline-input {
	width: 100%;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--hdr-tinta);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	padding: 6px 0;
	transition: width 0.3s ease;
}
.header__search-inline-input::placeholder { color: var(--hdr-texto-soft); }
.header__search-inline:focus-within .header__search-inline-input { width: 100%; }

/* badges */
.header__badge {
	position: absolute;
	top: -6px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hdr-terracota) !important;
	color: #fff !important;
	font-family: 'Poppins', sans-serif;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	border: 2px solid var(--hdr-fondo);
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* carrito total — oculto dentro del contenedor circular */
.header__cart-total {
	display: none;
}

/* VER TIENDA — botón destacado (navy → coral al hover) */
.header__shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	margin-left: 15px;
	min-width: 80px;
	border-radius: 8px;
	background: var(--hdr-esmeralda);
	color: var(--hdr-blanco);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--hdr-esmeralda);
	transition: all 0.2s ease;
	animation: headerShopPulse 2.8s ease-in-out infinite;
	position: relative;
	z-index: 100;
	cursor: pointer;
}
.header__shop-btn:hover {
	background: var(--hdr-terracota);
	border-color: var(--hdr-terracota);
	color: var(--hdr-blanco);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(35,37,38,0.12);
	animation-play-state: paused;
}
@keyframes headerShopPulse {
	0%, 68%, 100% {
		box-shadow: 0 0 0 0 rgba(200,183,143,0);
	}
	78% {
		box-shadow: 0 0 0 6px rgba(200,183,143,0.24);
	}
}
@media (prefers-reduced-motion: reduce) {
	.header__shop-btn { animation: none; }
}
@media (max-width: 575.98px) {
	.header__shop-btn { display: none; }
}

/* usuario / iniciar sesión — contenedor circular con solo el ícono */
.header__action-link { text-decoration: none; }
.header__user-img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 0;
}
/* ocultar texto para que el contenedor quede circular limpio */
.header__action-link .header__user-name,
.header__action-link .header__user-arrow {
	display: none;
}

/* dropdown usuario */
.header__user-dropdown { position: relative; }
.header__user-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 190px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: var(--hdr-blanco);
	border: 1px solid var(--hdr-linea);
	border-top: 3px solid var(--hdr-ocre);
	box-shadow: 0 18px 40px rgba(29,26,20,0.16);
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.22s ease;
	z-index: 999;
}
.header__user-dropdown:hover .header__user-menu,
.header__user-dropdown:focus-within .header__user-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.header__user-menu li a {
	display: block;
	padding: 10px 14px;
	color: var(--hdr-texto);
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	transition: all 0.2s ease;
}
.header__user-menu li a:hover {
	background: var(--hdr-terracota);
	color: #fff;
	padding-left: 18px;
}

/* ============================================================
   MOBILE / HAMBURGER MENÚ
   ============================================================ */
.humberger__open { color: var(--hdr-tinta); }
.humberger__menu__overlay { background: rgba(23,21,21,0.55); }
.humberger__menu__wrapper {
	background: var(--hdr-fondo) !important;
	border-right: 4px solid var(--hdr-terracota) !important;
	box-shadow: 14px 0 44px rgba(0,0,0,0.25);
}
.humberger__menu__logo a {
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hdr-esmeralda) !important;
}
/* botón Inicio destacado en el drawer */
.humberger__menu__logo { margin: 0 0 22px; }
.humberger__menu__logo a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 10px;
	background: var(--hdr-terracota);
	border-radius: 10px;
}
.humberger__menu__logo a:hover {
	background: var(--hdr-terracota-2);
	color: var(--hdr-tinta) !important;
}
.humberger__menu__logo a i { color: var(--hdr-esmeralda); }
.humberger__menu__nav a,
.humberger__menu__auth-link {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hdr-texto) !important;
}
/* sin separadores "/" en el menú móvil */
.humberger__menu__nav li:not(:last-child)::after { display: none; }
.humberger__menu__nav a:hover,
.humberger__menu__auth-link:hover {
	color: var(--hdr-terracota) !important;
}
.humberger__menu__auth-link i { color: var(--hdr-ocre); }
.humberger__menu__user-name {
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	color: var(--hdr-esmeralda) !important;
}

/* ============================================================
   DARK MODE — mantiene la paleta orgánica sobre negro
   ============================================================ */
body.dark .header {
	background: #1f2222 !important;
	border-bottom-color: var(--hdr-terracota);
}
body.dark .header__main { background: #1f2222 !important; }
body.dark .header__top { background: #21191c !important; }
body.dark .header__nav-list li a {
	color: #bda9aa;
}
body.dark .header__nav-list li a:hover {
	color: var(--hdr-terracota-2);
}
body.dark .header__nav-list li a i { color: #bda9aa; }
body.dark .header__nav-list li a:hover i { color: var(--hdr-terracota-2); }
body.dark .header__nav-list li.active a,
body.dark .header__nav-list li.active a i { color: var(--hdr-esmeralda-3); }
body.dark .header__nav-list li:not(:last-child)::after {
	background:
		linear-gradient(to bottom right,
			transparent calc(50% - 1px),
			#493c3e calc(50% - 1px),
			#493c3e calc(50% + 1px),
			transparent calc(50% + 1px));
}
body.dark .header__action-icon,
body.dark .header__search-inline {
	background: #2d2527;
	border-color: #493c3e;
	color: #f7eeeb;
}
body.dark .header__search-inline-input { color: #f7eeeb; }
body.dark .header__search-inline-input::placeholder { color: #bda9aa; }
body.dark .header__user-menu { background: #2d2527; border-color: #493c3e; }
body.dark .header__user-menu li a { color: #eadcda; }
body.dark .header__user-name { color: #f7eeeb; }
body.dark .header__badge { border-color: #1f2222; }

/* ============================================================
   DARK MODE — menú hamburguesa (drawer) oscuro
   Estos overrides con !important ganan a las reglas claras de
   la sección MOBILE/HAMBURGER MENÚ (var(--hdr-*) claro).
   ============================================================ */
body.dark .humberger__menu__wrapper {
	background: #1f2222 !important;
	border-right-color: var(--hdr-terracota-2) !important;
}
body.dark .humberger__menu__nav a,
body.dark .humberger__menu__auth-link {
	color: #bda9aa !important;
}
body.dark .humberger__menu__nav a i,
body.dark .humberger__menu__wrapper .slicknav_nav a i {
	color: #c8b78f;
}
body.dark .humberger__menu__nav a:hover,
body.dark .humberger__menu__auth-link:hover {
	color: var(--hdr-terracota-2) !important;
}
body.dark .humberger__menu__auth-link i { color: #c8b78f; }
body.dark .humberger__menu__user-name {
	color: #f7eeeb !important;
}
body.dark .humberger__menu__contact ul li,
body.dark .humberger__menu__contact ul li a { color: #b0a99e; }
body.dark .humberger__menu__contact ul li a:hover { color: #d6c7a1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
	:root { --hdr-sep: 24px; }
	.header__main__inner { gap: 10px; }
	.header__nav-list { gap: 0; }
	.header__nav-list li a {
		font-size: 11px;
		letter-spacing: 0.03em;
		padding: 0 7px;
	}
	.header__nav-list li a i { font-size: 12px; }
	.header__actions { gap: 4px; }
	.header__search-inline { width: 118px; }
	.header__shop-btn { padding-right: 10px; padding-left: 10px; }
}

@media (max-width: 991.98px) {
	.header__nav { display: none; }
	.header__main > .container {
		padding-right: 16px;
		padding-left: 16px;
	}
	.header__main__inner { height: 72px; }
	.header__actions { gap: 6px; }
	.header__action-icon { width: 38px; height: 38px; }
}

@media (max-width: 575.98px) {
	.header__action-icon { width: 38px; height: 38px; }
}

/* ============================================================
   NAVBAR MOBILE — layout hamburguesa | logo centrado | fav+fav+carrito
   Hamburguesa a la izquierda, logo centrado y a la derecha
   SOLO favoritos + carrito. El usuario vive dentro del menú
   hamburguesa. Estilo flat (sin sombras). Se aplica ≤767px.
   ============================================================ */
@media (max-width: 767.98px) {
	/* franja de frases (carrusel) visible en mobile: style.css la oculta ≤767px */
	.header__top { display: block; }
	.header__top__links { font-size: 10px; letter-spacing: 0.14em; }
	/* re-ancla hamburguesa y logo absolutos a la barra principal (antes anclaban
	   al header completo; al reaparecer la franja arriba se descolocarían) */
	.header__main { position: relative; }

	/* barra plana, sin sombra */
	.header { box-shadow: none; }

	/* hamburguesa: botón redondeado, centrado verticalmente */
	.humberger__open {
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 7px;
		color: var(--hdr-tinta);
		background: none;
		border: none;
		border-radius: 8px;
	}
	.humberger__open svg { width: 22px; height: 22px; }
	.humberger__open:hover { color: var(--hdr-terracota); }

	/* logo ya centrado por style.css (absolute 50%); lo reafirmo */
	.header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	/* acciones solo favoritos + carrito, pegadas a la derecha */
	.header__actions { margin-left: auto; }

	/* usuario fuera de la barra visible → dentro del menú mobile */
	.header__actions .header__user-dropdown,
	.header__actions > .header__action-link { display: none; }

	/* extras ocultos en la barra mobile */
	.header__search-inline { display: none; }
	.header__shop-btn { display: none; }

	/* iconos flat: sin sombras ni elevaciones */
	.header__action-icon,
	.header__action-icon:hover,
	.header__shop-btn,
	.header__shop-btn:hover { box-shadow: none; transform: none; }
	.header__badge {
		box-shadow: none;
		border: 2px solid var(--hdr-fondo);
	}
	.header__shop-btn { animation: none; }
}

/* ============================================================
   SCROLL REVEAL - animaciones suaves al scroll
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
[data-reveal].reveal-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   PRELOADER / LOADING SCREEN - acorde a la paleta
   ============================================================ */
#preloder {
	background: #1f2222 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
#preloder .loader {
	position: static;
	margin: 0;
	border-radius: 50%;
	animation: preloderSpin 0.8s linear infinite;
	border: 4px solid var(--hdr-terracota) !important;
	border-top-color: transparent !important;
	border-right-color: transparent !important;
}
@keyframes preloderSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ============================================================
   FOOTER — esmeralda profundo, acorde al home (maximalista claro)
   Fondo esmeralda oscuro, textos crema, acentos ocre/terracota.
   Tipografía Space Mono (labels) + Poppins (cuerpo).
   ============================================================ */
.footer {
	background:
		linear-gradient(180deg, #1f2222 0%, #333638 100%) !important;
	padding-top: 64px;
	border-top: 4px solid var(--hdr-terracota);
	position: relative;
	overflow: hidden;
}

/* monograma decorativo tenue al fondo */
.footer__monograma {
	position: absolute;
	right: -20px;
	bottom: -24px;
	width: 260px;
	height: 260px;
	color: rgba(255,255,255,0.04);
	pointer-events: none;
	z-index: 0;
}
.footer__monograma svg {
	width: 100%;
	height: 100%;
}

.footer .container {
	position: relative;
	z-index: 1;
	max-width: 1080px;
}

/* --- columna sobre nosotros --- */
.footer__about__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.footer__about__logo {
	position: relative;
	z-index: 1;
}
.footer__about__logo img {
	max-height: 46px;
	width: auto;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25));
}
.footer__about__info ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer__about__info li {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: rgba(247,238,235,0.86);
	line-height: 34px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.footer__about__info li i {
	color: var(--hdr-ocre);
	width: 16px;
	text-align: center;
	font-size: 14px;
	flex-shrink: 0;
}
.footer__about__info li a {
	color: rgba(247,238,235,0.86);
	text-decoration: none;
	transition: color 0.2s ease;
}
.footer__about__info li a:hover { color: var(--hdr-terracota-2); }

/* --- email con logo real de Gmail --- */
.footer__contact-mail {
	display: flex;
	align-items: center;
}
.footer__contact-mail a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(247,238,235,0.86);
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	transition: color 0.2s ease;
}
.footer__contact-mail a svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	display: block;
}
.footer__contact-mail a:hover { color: var(--hdr-terracota-2); }

/* --- widgets de enlaces --- */
.footer__widget {
	position: relative;
}
.footer__widget h6 {
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--hdr-ocre);
	margin-bottom: 22px;
	padding-bottom: 12px;
	position: relative;
}
/* subrayado decorativo debajo del título */
.footer__widget h6::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--hdr-terracota);
}
.footer__widget__links {
	display: flex;
	gap: 46px;
}
.footer__widget ul {
	width: auto;
	margin: 0;
	padding: 0;
}
.footer__widget ul li {
	list-style: none;
	margin-bottom: 11px;
}
.footer__widget ul li a {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: rgba(247,238,235,0.82);
	text-decoration: none;
	line-height: 1.4;
	position: relative;
	padding-left: 0;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer__widget ul li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 5px;
	background: var(--hdr-ocre);
	transition: width 0.2s ease;
}
.footer__widget ul li a:hover {
	color: var(--hdr-terracota-2);
	padding-left: 16px;
}
.footer__widget ul li a:hover::before { width: 8px; }

/* --- redes sociales --- */
.footer__widget__social {
	display: flex;
	gap: 14px;
	margin-top: 10px;
}
.footer__widget__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	width: 42px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	margin-right: 0;
}
.footer__widget__social a svg {
	width: 22px;
	height: 22px;
	display: block;
}
.footer__widget__social a:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}

/* --- barra de copyright --- */
.footer__copyright {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding: 26px 0;
	margin-top: 54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.footer__copyright__text p {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247,238,235,0.62);
	margin: 0;
	text-align: left;
}
.footer__copyright__dev,
.footer__copyright__dev p {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	color: rgba(247,238,235,0.62);
	margin: 2px 0 0;
}
.footer__copyright__dev a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #42a866;
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease;
}
.footer__copyright__dev a:hover { color: #6bc487; }

/* logo Codeland circular al lado del hipervínculo */
.footer__copyright__dev-logo {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	vertical-align: middle;
}

.footer__copyright__dots { display: none; }

.footer__copyright__payment {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.footer__copyright__payment img {
	height: 26px;
	width: auto;
	opacity: 0.95;
	filter: none;
	background: #fff;
	border-radius: 4px;
	padding: 3px 6px;
	transition: transform 0.3s ease;
}
.footer__copyright__payment img:hover {
	transform: translateY(-2px);
}

/* --- dark mode: el footer ya es oscuro, se mantiene igual --- */
body.dark .footer {
	background:
		linear-gradient(180deg, #1f2222 0%, #333638 100%) !important;
	border-top-color: var(--hdr-terracota);
}

/* --- responsive --- */
@media (max-width: 991.98px) {
	.footer__widget__links { gap: 24px; }
	.footer { padding-top: 52px; }
}
@media (max-width: 767.98px) {
	.footer__about { text-align: center; }
	.footer__about__inner { align-items: center; }
	.footer__about__info { width: 100%; }
	.footer__about__info ul,
	.footer__about__info li { width: 100%; }
	.footer__about__info li { justify-content: center; }
	.footer__widget { text-align: center; }
	.footer__widget h6::after {
		left: 50%;
		transform: translateX(-50%);
	}
	.footer__widget__social {
		text-align: center;
		justify-content: center;
	}
	.footer__widget__links {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.footer__widget__links ul { width: 100%; }
	.footer__widget { margin-top: 10px; }
}
@media (max-width: 575.98px) {
	.footer__copyright { flex-direction: column; text-align: center; }
	.footer__copyright__text p { text-align: center; }
	.footer__copyright__payment { justify-content: center; }
	.footer__widget__links { gap: 18px; }
}

/* ============================================================
   DRAWER (menú hamburguesa) — REDISEÑO
   Cabecera con marca + botón cerrar, navegación agrupada con
   encabezado e ítem activo resaltado, sección cuenta/
   preferencias con switch de tema, y contacto al final.
   Flat, minimalista, dos modos (claro beige / oscuro
   grafito-violeta), acentos dorados/mostaza. Se carga después
   de style.css y de las reglas previas del drawer (gana por
   cascada sobre los !important anteriores del wrapper).
   ============================================================ */
.humberger__menu__wrapper {
	--hm-bg: #F1EFEA;
	--hm-text: #232526;
	--hm-text-soft: #6E7476;
	--hm-line: #DCD7CC;
	--hm-gold: #D9A441;
	--hm-gold-strong: #B8860B;
	--hm-active-bg: rgba(217,164,65,0.16);
	--hm-sw-track: #D6D1C7;
	--hm-knob: #FFFFFF;
}
body.dark .humberger__menu__wrapper {
	--hm-bg: #1B1A22;
	--hm-text: #EDE7E1;
	--hm-text-soft: #B8B0A7;
	--hm-line: #35313E;
	--hm-gold: #D9A441;
	--hm-gold-strong: #E8C062;
	--hm-active-bg: rgba(217,164,65,0.22);
	--hm-sw-track: #3A3648;
	--hm-knob: #EFE9E2;
	background: var(--hm-bg) !important;
	border-right: 1px solid var(--hm-line) !important;
}

.humberger__menu__wrapper {
	width: 300px !important;
	left: -300px;
	padding: 20px 18px 22px;
	background: var(--hm-bg) !important;
	border-right: 1px solid var(--hm-line) !important;
	box-shadow: none !important;
	transition: left 0.32s ease, opacity 0.32s ease !important;
	opacity: 0;
	z-index: 1001;
}
.humberger__menu__overlay { z-index: 1000; }
.humberger__menu__wrapper.show__humberger__menu__wrapper {
	left: 0 !important;
	opacity: 1;
}
.humberger__menu__wrapper::-webkit-scrollbar { width: 4px; }
.humberger__menu__wrapper::-webkit-scrollbar-thumb { background: var(--hm-line); border-radius: 4px; }

/* --- Cabecera: marca + cerrar (X) --- */
.hm__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.hm__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}
.hm__brand:hover { text-decoration: none; }
.hm__brand-mark {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	padding: 7px;
	border-radius: 10px;
	background: var(--hm-active-bg);
	color: var(--hm-gold-strong);
	stroke: var(--hm-gold-strong);
}
.hm__brand-name {
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-text) !important;
	text-decoration: none;
}
.hm__close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: var(--hm-text);
	font-size: 17px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.hm__close:hover { background: var(--hm-active-bg); color: var(--hm-gold-strong); }

/* --- Secciones --- */
.hm__section { padding: 13px 0; }
.hm__section + .hm__section { border-top: 1px solid var(--hm-line); }
.hm__label {
	display: block;
	margin: 0 0 8px;
	padding: 0 6px;
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--hm-gold-strong);
}

/* --- Navegación agrupada --- */
.hm__nav .header__nav-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}
.hm__nav li { position: relative; }
.hm__nav li:not(:last-child)::after { display: none !important; }
.hm__nav li a::after { display: none !important; content: none !important; }
.hm__nav li.active::before { display: none !important; content: none !important; }
.hm__nav li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border-radius: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--hm-text) !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.hm__nav li a i { width: 18px; text-align: center; color: inherit; }
.hm__nav li a:hover { background: var(--hm-active-bg); }
.hm__nav li.active a {
	background: var(--hm-active-bg);
	color: var(--hm-text) !important;
}
.hm__nav li.active a i { color: var(--hm-gold-strong); }
.hm__nav li.active a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 22px;
	border-radius: 4px;
	background: var(--hm-gold-strong);
}

/* --- Cuenta y preferencias --- */
.hm__account { padding: 0 6px; }
.hm__user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px 12px;
}
.hm__user-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--hm-gold);
}
.hm__user-name {
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hm-text) !important;
}
.hm__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--hm-text) !important;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.hm__link i { width: 18px; text-align: center; color: var(--hm-gold-strong); }
.hm__link:hover { background: var(--hm-active-bg); }
.hm__link--logout { color: var(--hm-text-soft) !important; }

/* Modo oscuro: switch real (reusa #theme-toggle-mobile y los iconos
   .theme-toggle__icon--moon/sun que maneja main.js) */
.hm__theme {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding: 12px 8px 2px;
	border-top: 1px dashed var(--hm-line);
}
.hm__theme-text {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--hm-text);
}
.hm__theme-text i { color: var(--hm-gold-strong); }
.hm__switch {
	position: relative;
	width: 50px;
	height: 28px;
	flex: 0 0 auto;
	border: none;
	border-radius: 999px;
	background: var(--hm-sw-track);
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease;
}
.hm__switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hm-knob);
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	transition: transform 0.25s ease;
	z-index: 1;
}
body.dark .hm__switch { background: var(--hm-gold); }
body.dark .hm__switch::after { transform: translateX(22px); }

/* --- Contacto --- */
.hm__section--contact { padding-bottom: 6px; }
.hm__contact-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hm-text-soft) !important;
	text-decoration: none;
}
.hm__contact-link i { color: var(--hm-gold-strong); }
.hm__social {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 8px 0;
}
.hm__social a {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--hm-active-bg);
}
.hm__social a svg { width: 18px; height: 18px; }

/* ============================================================
   TOASTS — nunca deben bloquear clics mientras están inactivos
   El toast invisible (opacity:0 sin .show) quedaba superpuesto
   sobre el header y tragaba los clics del botón "Ver tienda".
   ============================================================ */
.toast:not(.show),
.cdm-toast:not(.show),
.toastSubscripcionError:not(.show) {
	display: none !important;
	pointer-events: none;
}