/*
	Brand landing (shop-in-shop) — cromo oscuro + hero de marca para categorías con
	registro activo en la tabla brand_landings (admin: brand_landings.php).
	Este fichero SOLO se carga en esas categorías (listener header_add_meta en
	categories.php), por lo que todas las reglas quedan scoped sin tocar el resto
	de la tienda. Paleta oscura fija: fondo #0c0a0e, paneles #16121a, bordes #241d2b,
	texto #f2eef0 / #b9b0bf, muted #8d8494. Lo configurable por landing llega en
	variables CSS inyectadas inline desde categories.php:
	--bl-accent, --bl-accent-rgb, --bl-accent-dark, --bl-bg-desktop, --bl-bg-mobile.
	Primera landing: GhostFace cat. 1615 (diseño en .planning/ghostface/design/).
*/

@font-face {
	font-family: "Creepster";
	src: url(fonts/Creepster.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html { scroll-behavior: smooth; }

.bl-boris { font-family: "Boris Black Bloxx", "Arial Black", sans-serif; font-weight: 400; }
.bl-creep { font-family: "Creepster", "Arial Black", cursive; font-weight: 400; }

/* ============================================================
   CROMO OSCURO GENERAL
   ============================================================ */
body { background: #0c0a0e; color: #b9b0bf; }

/* Franja #mano */
#mano { background: #16121a; border-bottom: 1px solid #241d2b; padding: 9px 0 10px; }
#mano a, #mano a:hover { color: #cfc8d4; }
#mano .tt { color: #cfc8d4; }
#mano .tlf, #mano .mail { color: #f2eef0; }

/* Cabecera #head-wrpr */
#head-wrpr, body.fixed #head-wrpr { background: #120f15; border-bottom: 1px solid #241d2b; margin-bottom: 0; }
/* Los monigotes rosas del tema (custom/3.png y 4.png) cambian por las escenas que
   se suban en la landing ("Adorno cabecera" izquierda y derecha en el admin, que
   llegan como --bl-head-izq/-der desde blAssetsHtml). Sin ellas no se pinta nada.
   El tema las escondía por debajo de 1650px; aquí se ven desde 1280 porque van por
   DETRÁS de todo (z-index 0): al encoger la ventana se meten bajo la hamburguesa y
   la cesta en vez de desaparecer. */
@media (min-width: 1280px) {
	/* Un poco más de aire vertical: las escenas son casi cuadradas y en los 111px
	   de serie salían muy recortadas */
	#head-wrpr { padding: 15px 0; }

	/* Ancho: hasta donde arranca el logo (el contenido va en un contenedor de
	   1300px centrado y el logo empieza 88px después del margen), con un mínimo
	   para que en pantallas justas la escena siga viéndose metiéndose por detrás
	   de la hamburguesa y de la cesta.
	   "auto 124%": la escena se encaja por su ALTO en vez de estirarse al ancho,
	   así se recorta lo justo. La máscara la funde hacia el centro, de modo que
	   vale cualquier dibujo subido desde el admin sin prepararle el degradado.
	   z-index 0 con los hijos a 1: los pseudos son absolutos y el logo es
	   estático, así que sin esto la escena se pintaría por encima del logo.
	   Y hay que repetir el selector del tema ("body #head-wrpr:before"), que
	   los apaga por debajo de 1650px y pesa más. */
	body #head-wrpr:after, body #head-wrpr:before { display: block; height: 100%; z-index: 0; width: max(210px, calc((100vw - 1300px) / 2 + 88px)); background-size: auto 124%; background-repeat: no-repeat; opacity: 0.92; }
	body #head-wrpr:after { background-image: var(--bl-head-izq, none); background-position: left center;
		-webkit-mask-image: linear-gradient(to right, #000 58%, transparent 100%); mask-image: linear-gradient(to right, #000 58%, transparent 100%); }
	body #head-wrpr:before { background-image: var(--bl-head-der, none); background-position: right center;
		-webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%); mask-image: linear-gradient(to left, #000 58%, transparent 100%); }
	#head-wrpr > .web-cntd, #head-wrpr .logo, #head-wrpr .srch-wrpr, #head-wrpr .menu-fake,
	#head-wrpr .csta, #head-wrpr .login, #head-wrpr .fvrt, #head-wrpr .langImgWrapper { position: relative; z-index: 1; }
	/* Sin escena subida la variable no llega, no se pinta nada y el pseudo se
	   queda transparente: justo lo que queremos */
	body.fixed #head-wrpr:after, body.fixed #head-wrpr:before { display: none !important; }
}
/* En pantallas justas la escena queda debajo de los iconos: se atenúa para que
   la cesta y los favoritos se sigan leyendo bien */
@media (min-width: 1280px) and (max-width: 1649.98px) {
	body #head-wrpr:after, body #head-wrpr:before { opacity: 0.55; }
}
/* Logo blanco (custom/7.png) en cabecera */
#head-wrpr .logo img { content: url("../images/custom/7.png"); aspect-ratio: 304 / 90; height: auto; }
/* Iconos de cabecera en claro */
#head-wrpr .menu-fake, #head-wrpr .login .tt, #head-wrpr .fvrt,
#head-wrpr #header_language, #head-wrpr .icon-srch { color: #f2eef0; }
/* Buscador: placeholder e icono en acento rojo */
#head-wrpr .srch-wrpr input::placeholder { color: var(--bl-accent); }
#head-wrpr .srch-wrpr input:-ms-input-placeholder { color: var(--bl-accent); }
#head-wrpr .srch-wrpr input::-ms-input-placeholder { color: var(--bl-accent); }
#head-wrpr .srch-wrpr .tt-20 { top: 4px; right: 4px; width: 34px; height: 31px; font-size: 15px; line-height: 31px; text-align: center; color: #fff; background: var(--bl-accent); border-radius: 2px; }
/* Por debajo de 992px el tema baja el buscador de 39px a 33px de alto: con las
   medidas de escritorio el botón de la lupa se salía por abajo */
@media (max-width: 991.98px) {
	#head-wrpr .srch-wrpr .tt-20 { top: 3px; right: 3px; width: 30px; height: 27px; font-size: 14px; line-height: 27px; }
}
/* Cesta */
#cbcr-crrt .top .tt { color: #f2eef0; }
#head-wrpr .csta .top .dty-cart-ic .nmbr, #head-wrpr .csta .trget .nmbr { background: var(--bl-accent); color: #fff; }

/* Banda de título #titu-ctgr */
#titu-ctgr { background-color: #16121a; border-top: 1px solid #241d2b; border-bottom: 1px solid #241d2b; }
#titu-ctgr h1, #titu-ctgr .estas-en-wrpr { color: #f2eef0; }
#titu-ctgr .estas-en-wrpr .estas-en { color: var(--bl-accent); }
#titu-ctgr a, #titu-ctgr a label { color: #8d8494; }
#titu-ctgr a span { color: var(--bl-accent); }
#titu-ctgr a b { color: #cfc8d4; }

/* Filtros (selects custom .xfselect + slider de precio) */
#fltr .nmbr { color: #b9b0bf; }
#fltr .nmbr b { color: #f2eef0; }
#fltr .xfselect div { background: #1d1822; border: 1px solid #2e2636; color: #cfc8d4; }
/* El texto largo ("Todos los generos") se pegaba a la flecha del select: aire + ellipsis */
#fltr .xfselect > div { padding-right: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fltr .xfselect div:before { background: transparent; }
#fltr .xfselect div:after { color: #8d8494; }
#fltr .menu-fake { background: #1d1822; border: 1px solid #2e2636; color: #cfc8d4; }
#fltr .rstr { color: #8d8494; }
#fltr .fltr-cntd-prco, #dx_box_filtro { color: #cfc8d4; }
#fltr-prce { color: #cfc8d4; }
#fltr-prce .dmin { color: var(--bl-accent); }
#fltr-prce .dmax { color: #cfc8d4; }
#fltr-prce-ok { background: var(--bl-accent); }
#fltr-prce .ui-state-default, #fltr-prce .ui-slider .ui-slider-range + .ui-state-default { background: var(--bl-accent); }

/* Parrilla: cada producto es una pastilla blanca completa sobre el fondo oscuro
   (los textos mantienen los colores del tema, que ya van sobre blanco) */
.prdt .prdt-wrpr { background-color: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.prdt-grop-4 .prdt { box-sizing: border-box; padding-left: 8px; padding-right: 8px; margin-bottom: 16px; }
.prdt .titu a:hover { color: var(--bl-accent); }
.prdt .delv, .prdt .delv b, .prdt .delv strong { color: var(--bl-accent); font-weight: 700; }

/* Paginación */
#pgnc a, #pgnc span { background: #1d1822; border-color: #2e2636; color: #cfc8d4; }
#pgnc span, #pgnc a:hover { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }

/* Texto SEO: plegado funcional (el markup real no lleva el div que espera el tema,
   así que el colapso se hace aquí con :has sobre el checkbox) + márgenes de lectura */
#text-seo.xmore { color: #9b939e; max-height: 170px; overflow: hidden; position: relative; padding-bottom: 40px; }
#text-seo.xmore:has(> input[type=checkbox]:checked) { max-height: none; }
#text-seo.xmore > input[type=checkbox] { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 130px; height: 32px; opacity: 0; cursor: pointer; margin: 0; z-index: 3; }
#text-seo.xmore > span:last-child { position: absolute !important; bottom: 6px; left: 0 !important; right: 0; width: auto !important; display: flex !important; justify-content: center; z-index: 2; }
#text-seo.xmore > span:last-child span { display: inline-block; }
#text-seo.xmore > span:last-child span + span { display: none; }
#text-seo.xmore:has(> input[type=checkbox]:checked) > span:last-child span:first-child { display: none; }
#text-seo.xmore:has(> input[type=checkbox]:checked) > span:last-child span + span { display: inline-block; }
#text-seo.xmore:not(:has(> input[type=checkbox]:checked)):before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, #0c0a0e 35%, rgba(12, 10, 14, 0)); z-index: 1; pointer-events: none; }
#text-seo.xmore { line-height: 1.7; }
#text-seo.xmore p { margin: 0 0 16px; }
#text-seo.xmore h2 { margin: 28px 0 12px; }
#text-seo.xmore h3 { margin: 24px 0 10px; }
#text-seo.xmore ul, #text-seo.xmore ol { margin: 14px 0 22px; padding-left: 30px; }
#text-seo.xmore li { margin: 8px 0; padding-left: 4px; }
#text-seo.xmore h2, #text-seo.xmore h3, #text-seo.xmore strong, #text-seo.xmore b { color: #f2eef0; }
#text-seo.xmore h2 span, #text-seo.xmore h3 span { color: #f2eef0 !important; }
#text-seo.xmore a { color: var(--bl-accent); }
#text-seo.xmore > span:last-child span { background: var(--bl-accent); }
#text-seo.xmore > span:last-child span:after { background: transparent; width: 0; }
#text-seo-up { color: #9b939e; }

/* Breadcrumbs */
#bread, #bread a { color: #8d8494; }
#bread a:hover { color: var(--bl-accent); }

/* Menú lateral de categorías (hamburguesa #menu-panel): del rosa/blanco del tema al cromo oscuro */
#menu-panel { background: #191320; }
#menu-panel .panels > .mm, #menu-panel .panels .mm:first-child { background: #14101a; }
#menu-panel .prnt2 a, #menu-panel .prnt3 a { color: #cfc8d4; }
#menu-panel .prnt2:hover { background: #241b30; }
#menu-panel .prnt2:hover a { color: #fff; }
#menu-panel .titul { background: #241b30; color: #cfc8d4; }
#menu-panel .infr-contacto .tlf, #menu-panel .infr-contacto .mail { color: var(--bl-accent); }
#menu-panel .infr-contacto .redes .tt { color: var(--bl-accent); }
/* El horario se salía del panel: el tema lo deja a ancho completo y con
   line-height 13px, así que las dos líneas se tocaban y la segunda se cortaba */
#menu-panel .infr-contacto .tlf small { padding: 0 18px; line-height: 1.35; }
/* Barra superior del panel (banderas, cuenta, favoritos): rosa del tema -> cromo */
#menu-panel .wrpr-accs { background: #241b30; }
#menu-panel .wrpr-accs .sepa { background: rgba(255, 255, 255, 0.3); }
/* "Disfraces por temáticas" y su etiqueta "también puedes buscar": hay que
   repetir los selectores del tema, que ganan por especificidad y por !important */
#menu-panel .tema > a { color: var(--bl-accent) !important; }
#menu-panel .tema a span { background: var(--bl-accent); }
#menu-panel .tema a span:after { border-top-color: var(--bl-accent); }
/* Los sub-paneles de categorías los pinta el tema en blanco */
#menu-panel .sub-panel, #menu-panel .subsub-panel { background: #14101a; }
#menu-panel .sub-panel .titul, #menu-panel .subsub-panel .titul { background: #241b30; color: #cfc8d4; }
#menu-panel .sub-panel .prnt2 a, #menu-panel .subsub-panel .prnt2 a { color: #cfc8d4; }
#menu-panel .sub-panel .prnt2:hover, #menu-panel .subsub-panel .prnt2:hover { background: #241b30; }
#menu-panel .sub-panel .prnt2:hover a, #menu-panel .subsub-panel .prnt2:hover a { color: #fff; }
#menu-panel .sub-panel .prnt2.mm-child:before, #menu-panel .subsub-panel .prnt2.mm-child:before { color: #6d6377; }
#menu-panel .sub-panel .prnt2.mm-child:hover:before, #menu-panel .subsub-panel .prnt2.mm-child:hover:before { color: #fff; }
#menu-panel .sub-panel .prnt2.ver-todos, #menu-panel .subsub-panel .prnt2.ver-todos { border-bottom-color: #2b2336; }
#menu-panel .sub-panel .prnt2.ver-todos a, #menu-panel .subsub-panel .prnt2.ver-todos a { background: var(--bl-accent); }
/* Velo sobre la página con el menú abierto: el tema lo tiñe de rosa */
#mm-close { background: #000; }
/* El tema empuja 310px todo lo que lleva .target-panel-open (la banda del H1, el
   pie); con el hero a pantalla completa quieto detrás, ese desfase canta. En la
   landing el panel pasa por encima y la página se queda donde está. */
.mm-panel-open .target-panel-open { transform: none !important; }

/* Barra social lateral (#redsoc): filos blancos y toggle en oscuro */
#redsoc > div a, #redsoc a, #redsoc a:last-child { border-color: #241d2b; }
#redsoc span { border-color: #241d2b; background-color: #16121a; }
#redsoc span:before { border-right-color: #8d8494; }
#redsoc.show span:before { border-left-color: #8d8494; }

/* Newsletter */
#nwlt { background: #16121a; border-top: 1px solid #241d2b; }
#nwlt .wrpr i, #nwlt .fa-envelope { color: var(--bl-accent); }

/* Pie */
#fotr { background: #120f15; border-top: 1px solid #241d2b; border-bottom-color: #241d2b; }
#fotr .help, #fotr .help[class] { background: transparent; }
#fotr .help .titu { color: var(--bl-accent); }
#fotr .help .tlf, #fotr .help .hour, #fotr .help .mail { color: #b9b0bf; }
#fotr .menu a { color: #8d8494; }
#fotr .menu a:hover { color: var(--bl-accent); }
#fotr .paym .tt { color: #8d8494; }
#fotr-btom { background: #0c0a0e; }
#fotr-btom .text { color: #8d8494; }
#fotr-btom .text span { color: #f2eef0; }
#fotr-btom .rdes a { color: #8d8494; }
#fotr-btom .rdes a:hover { color: var(--bl-accent); }
#fotr-btom .denox { background-image: url(../images/custom/brand-landing/denox-gris.png); background-size: contain; }

/* El bloque estándar de subcategorías del tema lo sustituyen los chips */
#fltr-ctgr { display: none; }

/* Muñeco de la newsletter: GhostFace con cuchillo en vez del alien (custom/8.png) */
#nwlt .d-flex > img { content: url("../images/custom/ghostface/cat-disfraz.webp"); aspect-ratio: 335 / 440; height: 210px; width: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7)); }

/* Tooltip RGPD (jquery-ui sin CSS propio: salía a todo el ancho y por detrás) */
.ui-tooltip.rgpd-tooltip { z-index: 99999; max-width: 340px; background: #1d1822; border: 1px solid #2e2636; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); color: #cfc8d4; font-size: 12px; line-height: 1.5; padding: 12px 14px; }
.ui-tooltip.rgpd-tooltip ul { margin: 0; padding-left: 16px; }
.ui-tooltip.rgpd-tooltip strong { color: #f2eef0; }
.ui-tooltip.rgpd-tooltip .arrow { display: none; }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================
   Solo cuando la landing tiene marcado "También en las fichas": ahí
   product_info.php carga este mismo CSS (ver includes/functions/brand_landing.php).
   La caja central de la ficha se queda BLANCA, como en el resto de la tienda: es
   donde va la foto del producto (recortada sobre blanco), la descripción y las
   opiniones, y en oscuro quedaba fatal. Lo que se viste de marca es el marco
   —cabecera, banda del H1, breadcrumb, newsletter y pie, que ya cubre el cromo
   general— más los detalles que el tema pinta de rosa o amarillo. */

/* Productos relacionados: este bloque SÍ va sobre el fondo oscuro */
#fich-rlcd .titu { color: var(--bl-accent); }

/* Detalles que el tema pinta en rosa o amarillo, al rojo de la marca */
#fich .fa-star, #fich-cmmt .fa-star, #fich-rlcd .fa-star { color: var(--bl-accent); }
#cmnt .opin-left .titu { color: var(--bl-accent); }
#cmnt .opin-left .butt { background: var(--bl-accent); }
#cmnt .opin-left .star span { background: var(--bl-accent); }
#cmnt .opin-left .infr .bar span { background: var(--bl-accent); }
#cmnt .opin-righ .qstn span { color: var(--bl-accent); }

/* ============================================================
   HERO DE MARCA
   ============================================================ */
/* max-width 100vw: el tema desborda en horizontal en móvil (comportamiento previo);
   así los bloques de marca quedan centrados en el viewport visible igualmente */
#bl-hero, .bl-cinta, .bl-chips-cntd, .bl-sellos-cntd, .bl-bs-cntd, .bl-vertodos-wrpr { max-width: 100vw; }
#bl-hero { position: relative; overflow: hidden; background: #0c0a0e; }
#bl-hero:before { content: ""; position: absolute; top: -4%; left: -4%; right: -4%; bottom: -4%; background: var(--bl-bg-desktop, none) center / cover no-repeat; pointer-events: none; z-index: 0; }
.bl-hero-marca { position: absolute; top: 50%; margin-top: -105px; left: 0; right: 0; text-align: center; font-size: 200px; line-height: 1; color: rgba(var(--bl-accent-rgb), 0.055); letter-spacing: 6px; white-space: nowrap; pointer-events: none; }
.bl-marca-mov { display: none; }
.bl-hero-cntd { display: flex; align-items: center; gap: 60px; padding: 24px 10px 8px; max-width: 1300px; margin: 0 auto; position: relative; box-sizing: border-box; }
.bl-hero-text { flex-grow: 1; display: flex; flex-direction: column; gap: 13px; max-width: 600px; }
.bl-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 3.5px; color: var(--bl-accent); text-transform: uppercase; line-height: 1.3; }
.bl-kicker-line { display: inline-block; width: 26px; height: 2px; background: var(--bl-accent); flex-shrink: 0; }
.bl-kicker-line-mov { display: none; }
.bl-logo { font-size: 96px; line-height: 0.88; color: var(--bl-accent); text-shadow: 0 0 48px rgba(var(--bl-accent-rgb), 0.45), 5px 6px 0 #2a0a10; }
.bl-claim { font-size: 27px; line-height: 1.12; color: #f2eef0; text-transform: uppercase; }
.bl-claim span { color: var(--bl-accent); }
.bl-apoyo { font-size: 15px; line-height: 1.65; color: #b9b0bf; max-width: 470px; }
.bl-apoyo b { color: #f2eef0; }
.bl-cta-wrpr { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
a.bl-cta { display: inline-block; background: var(--bl-accent); color: #fff; font-size: 16px; line-height: 1; text-transform: uppercase; padding: 16px 34px; border-radius: 3px; letter-spacing: 0.5px; box-shadow: 0 10px 28px rgba(var(--bl-accent-rgb), 0.35); }
a.bl-cta:hover { background: var(--bl-accent-dark); color: #fff; }
.bl-cta-note { font-size: 13px; line-height: 1.4; color: #8d8494; }
.bl-trust-mov { display: none; font-size: 11px; color: #8d8494; }
.bl-hero-mask { flex-shrink: 0; position: relative; margin-bottom: 10px; }
.bl-mask-frame { position: absolute; top: 14px; left: 14px; width: 270px; height: 100%; border: 2px solid rgba(var(--bl-accent-rgb), 0.5); border-radius: 6px; transform: rotate(2deg); }
.bl-hero-mask img { position: relative; width: 270px; height: auto; border-radius: 6px; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.8), 0 0 100px rgba(var(--bl-accent-rgb), 0.25); transform: rotate(-2deg); }
.bl-mask-badge { position: absolute; top: 14px; left: -20px; background: var(--bl-accent); color: #fff; font-size: 13px; line-height: 1.2; text-transform: uppercase; padding: 8px 14px; border-radius: 2px; transform: rotate(-5deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.bl-arrow-wrpr { position: relative; display: flex; justify-content: center; padding: 0 0 14px; z-index: 3; }
a.bl-arrow { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--bl-accent); border-radius: 50%; background: rgba(var(--bl-accent-rgb), 0.08); }
.bl-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to top, #0c0a0e, rgba(12, 10, 14, 0)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
	@keyframes gfBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
	a.bl-arrow { animation: gfBounce 1.6s ease-in-out infinite; }
}

/* Hero en modo banner-imagen (subido desde el admin) */
a.bl-hero-banner { display: block; background: #0c0a0e; }
a.bl-hero-banner img { display: block; width: 100%; max-width: 1300px; height: auto; margin: 0 auto; }

/* Cinta advertencia */
.bl-cinta { background: #45060f; border-top: 1px solid rgba(var(--bl-accent-rgb), 0.75); border-bottom: 1px solid rgba(var(--bl-accent-rgb), 0.75); color: #fff; text-align: center; font-size: 16px; line-height: 1.3; letter-spacing: 2.5px; text-transform: uppercase; padding: 13px 20px; margin: 20px 0; }

/* Chips subcategorías */
.bl-chips-cntd { max-width: 1300px; margin: 0 auto; padding: 30px 10px 30px; display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; }
.bl-chips-titu-wrpr { display: flex; align-items: center; gap: 16px; }
.bl-chips-titu { font-size: 24px; line-height: 1.2; color: #f2eef0; text-transform: uppercase; }
.bl-chips-titu span { color: var(--bl-accent); }
.bl-chips-titu-line { flex-grow: 1; height: 1px; background: #241d2b; }
.bl-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Chips y carrusel se recorren arrastrando: la barra de scroll solo estorba */
.bl-chips, .bl-bs-track { scrollbar-width: none; -ms-overflow-style: none; }
.bl-chips::-webkit-scrollbar, .bl-bs-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
a.bl-chip { container-type: inline-size; display: flex; flex-direction: column; background: #16121a; border: 1px solid #241d2b; border-radius: 10px; overflow: hidden; }
.bl-chip-scene { position: relative; height: 306px; background: url(../images/custom/brand-landing/bg-scene.webp) center / cover no-repeat #150a0e; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.bl-chip-letra { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 250px; line-height: 1; color: rgba(242, 238, 240, 0.05); pointer-events: none; }
.bl-chip-scene img { position: relative; max-height: 258px; width: auto; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.8)); }
.bl-chip-grad { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, rgba(21, 8, 12, 0.95) 18%, rgba(21, 8, 12, 0)); pointer-events: none; }
/* El nombre sale del ancho del chip (container query) para que un rotulo largo
   —"Accesorios Ghost Face"— no parta a dos lineas ni desborde */
.bl-chip-name { font-size: clamp(15px, 7.7cqw, 32px); line-height: 1.05; color: #f2eef0; text-shadow: 0 0 22px rgba(var(--bl-accent-rgb), 0.8), 2px 3px 0 #2a0a10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bl-chip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bl-accent); }
.bl-chip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px 15px; min-width: 0; }
.bl-chip-btn { flex: 0 0 auto; }
.bl-chip-sub { font-size: 12px; line-height: 1.3; color: #8d8494; }
.bl-chip-btn { background: var(--bl-accent); color: #fff; font-size: 13px; line-height: 1; text-transform: uppercase; padding: 10px 22px; border-radius: 3px; }
a.bl-chip:hover .bl-chip-btn { background: var(--bl-accent-dark); }

/* Sellos de confianza */
.bl-sellos-cntd { max-width: 1300px; margin: 0 auto; padding: 18px 10px 28px; box-sizing: border-box; }
.bl-sellos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bl-sello { display: flex; align-items: center; gap: 13px; background: #16121a; border: 1px solid #241d2b; border-radius: 8px; padding: 14px 16px; }
.bl-sello-icon { flex-shrink: 0; width: 34px; height: 34px; color: var(--bl-accent); }
.bl-sello-icon svg { width: 100%; height: 100%; }
.bl-sello-titu { font-size: 14px; line-height: 1.25; color: #f2eef0; text-transform: uppercase; }
.bl-sello-sub { font-size: 12px; line-height: 1.35; color: #8d8494; }

/* Carrusel más vendidos (tarjetas con caja blanca: las fotos tienen fondo blanco) */
.bl-bs-cntd { max-width: 1300px; margin: 0 auto; padding: 26px 10px 18px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.bl-bs-flecha { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #1d1822; border: 1px solid #2e2636; border-radius: 4px; color: #cfc8d4; cursor: pointer; padding: 0; }
.bl-bs-flecha:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-bs-track { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 4px 22px; margin: -10px -4px -6px; }
.bl-bs-track::-webkit-scrollbar { display: none; }
a.bl-bs-card { flex-shrink: 0; width: 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 9px; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); padding: 10px 12px 14px; box-sizing: border-box; color: #42484e; }
.bl-bs-tile { display: flex; align-items: center; justify-content: center; padding: 4px; height: 240px; }
.bl-bs-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bl-bs-name { font-size: 13px; font-weight: 600; line-height: 1.35; color: #42484e; text-align: center; min-height: 35px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
a.bl-bs-card:hover .bl-bs-name { color: var(--bl-accent); }
.bl-bs-price { font-size: 20px; line-height: 1; color: #707070; text-align: center; }
.bl-bs-price s { color: #b5b5b5; font-size: 15px; }

/* Ancla del listado: respiro fijo entre la portada y la banda al desplegar */
#bl-listado { height: 14px; }

/* Botón Ver todos los productos (despliega banda + filtros + listado, ocultos de inicio) */
.bl-vertodos-wrpr { display: flex; justify-content: center; padding: 8px 10px 20px; }
button.bl-vertodos { background: var(--bl-accent); border: 0; color: #fff; font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: 0.5px; padding: 17px 38px; border-radius: 3px; cursor: pointer; box-shadow: 0 10px 28px rgba(var(--bl-accent-rgb), 0.35); }
button.bl-vertodos:hover { background: var(--bl-accent-dark); }

/* ============================================================
   ANIMACIONES (entrada del hero + reveals al hacer scroll + hovers)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	/* Entrada del hero al cargar (fill-mode backwards: sin JS ni soporte, todo queda visible) */
	@keyframes blFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
	@keyframes blFadeIn { from { opacity: 0; } to { opacity: 1; } }
	@keyframes blMaskIn { from { opacity: 0; transform: rotate(-9deg) scale(0.88); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
	@keyframes blCintaIn { from { opacity: 0; letter-spacing: 8px; } to { opacity: 1; } }
	@keyframes blGlow { 0%, 100% { box-shadow: 0 10px 28px rgba(var(--bl-accent-rgb), 0.35); } 50% { box-shadow: 0 10px 38px rgba(var(--bl-accent-rgb), 0.6); } }

	/* Intro "apagón": la landing enciende como un fluorescente estropeado */
	@keyframes blApagon { 0% { opacity: 1; } 14% { opacity: 1; } 18% { opacity: 0.1; } 24% { opacity: 0.95; } 30% { opacity: 0.2; } 38% { opacity: 0.85; } 46% { opacity: 0; } 100% { opacity: 0; } }
	#bl-hero:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #050308; z-index: 40; pointer-events: none; animation: blApagon 1.35s steps(1, end) forwards; }
	#bl-hero.bl-fx-tormenta:after { animation: blApagon 1.35s steps(1, end) forwards, blRayo 7s linear 3s infinite; }

	/* Rayos visibles: dos descargas SVG sincronizadas con los flashes */
	.bl-rayos { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 41; }
	.bl-rayo { position: absolute; top: -2%; width: 90px; height: 62%; opacity: 0; filter: drop-shadow(0 0 14px #b9c6ff) drop-shadow(0 0 34px rgba(160, 175, 255, 0.8)); }
	.bl-rayo-1 { right: 24%; animation: blRayoBolt1 7s linear 3s infinite; }
	.bl-rayo-2 { left: 16%; height: 52%; animation: blRayoBolt2 7s linear 3s infinite; }
	@keyframes blRayoBolt1 { 0%, 41%, 43.4%, 100% { opacity: 0; } 41.3%, 42.4% { opacity: 1; } 41.9% { opacity: 0.15; } 43.1% { opacity: 0.5; } }
	@keyframes blRayoBolt2 { 0%, 78%, 80%, 100% { opacity: 0; } 78.4%, 79.6% { opacity: 0.95; } 79.1% { opacity: 0.1; } }

	/* Destellos: partículas de luz flotando hacia arriba (efecto genérico, vale para cualquier marca) */
	@keyframes blSubir { from { transform: translateY(0); } to { transform: translateY(-50%); } }
	.bl-destellos { position: absolute; top: 0; left: 0; right: 0; height: 200%; pointer-events: none; opacity: 0.6; z-index: 1;
		background-image:
			radial-gradient(2px 2px at 8% 12%, #fff, transparent),
			radial-gradient(1.5px 1.5px at 22% 44%, rgba(255, 255, 255, 0.9), transparent),
			radial-gradient(2.5px 2.5px at 37% 23%, rgba(var(--bl-accent-rgb), 0.9), transparent),
			radial-gradient(1.5px 1.5px at 52% 61%, #fff, transparent),
			radial-gradient(2px 2px at 66% 33%, rgba(255, 255, 255, 0.85), transparent),
			radial-gradient(1.5px 1.5px at 78% 52%, rgba(var(--bl-accent-rgb), 0.8), transparent),
			radial-gradient(2px 2px at 90% 18%, #fff, transparent),
			radial-gradient(1.5px 1.5px at 14% 76%, rgba(255, 255, 255, 0.8), transparent),
			radial-gradient(2px 2px at 44% 88%, rgba(255, 255, 255, 0.9), transparent),
			radial-gradient(1.5px 1.5px at 84% 81%, rgba(var(--bl-accent-rgb), 0.85), transparent);
		background-size: 100% 50%; background-repeat: repeat-y;
		animation: blSubir 22s linear infinite; will-change: transform; }

	/* Nieve: dos capas de copos variados (nítidos, difusos y motas lejanas) con parallax y deriva lateral */
	@keyframes blCaer { from { transform: translateY(-50%); } to { transform: translateY(0); } }
	@keyframes blCaerDeriva {
		0% { transform: translateY(-50%) translateX(0); }
		25% { transform: translateY(-37.5%) translateX(9px); }
		50% { transform: translateY(-25%) translateX(-7px); }
		75% { transform: translateY(-12.5%) translateX(6px); }
		100% { transform: translateY(0) translateX(0); }
	}
	.bl-nieve { position: absolute; top: 0; left: 0; right: 0; height: 200%; pointer-events: none; z-index: 1; }
	.bl-nieve:before, .bl-nieve:after { content: ""; position: absolute; top: 0; left: -12px; right: -12px; height: 100%; background-size: 100% 50%; background-repeat: repeat-y; will-change: transform; }
	/* Capa cercana: copos gordos, mezcla de nítidos y difusos (con halo) */
	.bl-nieve:before { opacity: 0.9; animation: blCaerDeriva 14s linear infinite;
		background-image:
			radial-gradient(4px 4px at 11% 15%, #fff 45%, transparent 55%),
			radial-gradient(6px 6px at 26% 38%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.3) 55%, transparent 75%),
			radial-gradient(3px 3px at 41% 9%, #fff 45%, transparent 55%),
			radial-gradient(5px 5px at 55% 55%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.25) 60%, transparent 78%),
			radial-gradient(4.5px 4.5px at 69% 27%, #fff 40%, transparent 52%),
			radial-gradient(3px 3px at 82% 48%, rgba(255, 255, 255, 0.9) 45%, transparent 58%),
			radial-gradient(6px 6px at 93% 12%, rgba(255, 255, 255, 0.95) 18%, rgba(255, 255, 255, 0.28) 55%, transparent 75%),
			radial-gradient(3.5px 3.5px at 18% 72%, #fff 45%, transparent 56%),
			radial-gradient(5px 5px at 48% 86%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.25) 60%, transparent 78%),
			radial-gradient(4px 4px at 76% 79%, #fff 42%, transparent 54%),
			radial-gradient(3px 3px at 33% 62%, rgba(255, 255, 255, 0.85) 45%, transparent 58%),
			radial-gradient(5.5px 5.5px at 62% 68%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.25) 55%, transparent 75%); }
	/* Capa lejana: motas pequeñas y tenues, más lenta (profundidad) */
	.bl-nieve:after { opacity: 0.55; animation: blCaerDeriva 26s linear -8s infinite;
		background-image:
			radial-gradient(2px 2px at 7% 22%, rgba(255, 255, 255, 0.8) 45%, transparent 60%),
			radial-gradient(1.5px 1.5px at 19% 51%, rgba(255, 255, 255, 0.7) 45%, transparent 62%),
			radial-gradient(2.5px 2.5px at 31% 12%, rgba(255, 255, 255, 0.75) 35%, rgba(255, 255, 255, 0.2) 60%, transparent 80%),
			radial-gradient(1.5px 1.5px at 45% 40%, rgba(255, 255, 255, 0.7) 45%, transparent 62%),
			radial-gradient(2px 2px at 59% 18%, rgba(255, 255, 255, 0.8) 45%, transparent 60%),
			radial-gradient(1.5px 1.5px at 72% 58%, rgba(255, 255, 255, 0.65) 45%, transparent 62%),
			radial-gradient(2px 2px at 87% 34%, rgba(255, 255, 255, 0.75) 45%, transparent 60%),
			radial-gradient(1.5px 1.5px at 12% 82%, rgba(255, 255, 255, 0.7) 45%, transparent 62%),
			radial-gradient(2.5px 2.5px at 52% 74%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 0.18) 60%, transparent 80%),
			radial-gradient(1.5px 1.5px at 81% 88%, rgba(255, 255, 255, 0.7) 45%, transparent 62%); }

	/* Confeti: papelitos grandes de colores en dos capas (carnaval) — elipses alargadas simulan el papel girando */
	.bl-confeti { position: absolute; top: 0; left: 0; right: 0; height: 200%; pointer-events: none; z-index: 1; }
	.bl-confeti:before, .bl-confeti:after { content: ""; position: absolute; top: 0; left: -14px; right: -14px; height: 100%; background-size: 100% 50%; background-repeat: repeat-y; will-change: transform; }
	/* Capa cercana: papelitos gordos, caída rápida con vaivén */
	.bl-confeti:before { opacity: 0.95; animation: blCaerDeriva 9s linear infinite;
		background-image:
			radial-gradient(6px 12px at 9% 18%, #ffd166 60%, transparent 68%),
			radial-gradient(12px 6px at 23% 42%, #06d6a0 60%, transparent 68%),
			radial-gradient(7px 13px at 38% 11%, #4cc9f0 60%, transparent 68%),
			radial-gradient(11px 6px at 52% 58%, #ef476f 60%, transparent 68%),
			radial-gradient(6px 11px at 67% 29%, #ffd166 60%, transparent 68%),
			radial-gradient(12px 7px at 80% 51%, #b5179e 60%, transparent 68%),
			radial-gradient(7px 12px at 92% 15%, #06d6a0 60%, transparent 68%),
			radial-gradient(11px 6px at 16% 76%, #4cc9f0 60%, transparent 68%),
			radial-gradient(6px 12px at 46% 88%, #ef476f 60%, transparent 68%),
			radial-gradient(12px 6px at 74% 81%, #ffd166 60%, transparent 68%),
			radial-gradient(8px 8px at 31% 30%, #ff9f1c 55%, transparent 65%),
			radial-gradient(8px 8px at 60% 45%, #fff 55%, transparent 65%),
			radial-gradient(6px 11px at 85% 68%, #ff9f1c 60%, transparent 68%),
			radial-gradient(11px 6px at 40% 66%, #b5179e 60%, transparent 68%),
			radial-gradient(7px 12px at 4% 48%, #06d6a0 60%, transparent 68%),
			radial-gradient(12px 6px at 13% 6%, #ef476f 60%, transparent 68%),
			radial-gradient(6px 11px at 28% 60%, #ffd166 60%, transparent 68%),
			radial-gradient(11px 6px at 45% 33%, #4cc9f0 60%, transparent 68%),
			radial-gradient(7px 12px at 57% 74%, #ff9f1c 60%, transparent 68%),
			radial-gradient(12px 6px at 64% 8%, #b5179e 60%, transparent 68%),
			radial-gradient(6px 11px at 72% 55%, #fff 60%, transparent 68%),
			radial-gradient(11px 6px at 88% 35%, #ffd166 60%, transparent 68%),
			radial-gradient(7px 12px at 97% 62%, #ef476f 60%, transparent 68%),
			radial-gradient(12px 6px at 33% 94%, #06d6a0 60%, transparent 68%),
			radial-gradient(6px 11px at 61% 95%, #4cc9f0 60%, transparent 68%),
			radial-gradient(11px 6px at 96% 90%, #ff9f1c 60%, transparent 68%); }
	/* Capa lejana: papelitos medianos, más lenta y desfasada (relleno de fondo) */
	.bl-confeti:after { opacity: 0.75; animation: blCaerDeriva 15s linear -5s infinite;
		background-image:
			radial-gradient(5px 9px at 14% 25%, #ef476f 58%, transparent 66%),
			radial-gradient(9px 5px at 29% 8%, #ffd166 58%, transparent 66%),
			radial-gradient(5px 9px at 44% 48%, #06d6a0 58%, transparent 66%),
			radial-gradient(8px 4px at 58% 20%, #4cc9f0 58%, transparent 66%),
			radial-gradient(5px 9px at 71% 60%, #ffd166 58%, transparent 66%),
			radial-gradient(9px 5px at 88% 38%, #ef476f 58%, transparent 66%),
			radial-gradient(5px 8px at 8% 62%, #b5179e 58%, transparent 66%),
			radial-gradient(8px 5px at 36% 84%, #ff9f1c 58%, transparent 66%),
			radial-gradient(5px 9px at 64% 90%, #4cc9f0 58%, transparent 66%),
			radial-gradient(9px 5px at 91% 78%, #06d6a0 58%, transparent 66%),
			radial-gradient(5px 9px at 21% 50%, #fff 58%, transparent 66%),
			radial-gradient(9px 5px at 50% 70%, #ffd166 58%, transparent 66%),
			radial-gradient(5px 8px at 78% 12%, #06d6a0 58%, transparent 66%),
			radial-gradient(8px 5px at 5% 90%, #4cc9f0 58%, transparent 66%),
			radial-gradient(5px 9px at 95% 55%, #b5179e 58%, transparent 66%),
			radial-gradient(9px 5px at 68% 40%, #ef476f 58%, transparent 66%); }

	/* Murciélagos: siluetas cruzando el hero con vuelo ondulado y aleteo */
	@keyframes blVuelo { 0% { transform: translateX(-8vw) translateY(0) scale(1); } 25% { transform: translateX(28vw) translateY(-38px) scale(0.92); } 50% { transform: translateX(58vw) translateY(14px) scale(1.05); } 75% { transform: translateX(84vw) translateY(-30px) scale(0.95); } 100% { transform: translateX(112vw) translateY(-6px) scale(1); } }
	@keyframes blAleteo { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
	.bl-bats { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; overflow: hidden; }
	/* Silueta algo más clara que el fondo (casi negro) + halo del color de marca para que se lea */
	.bl-bat { position: absolute; left: 0; width: 46px; height: 19px; color: #3d3150; filter: drop-shadow(0 0 7px rgba(var(--bl-accent-rgb), 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); animation: blVuelo 13s linear infinite; }
	.bl-bat path { animation: blAleteo 0.4s ease-in-out infinite; transform-origin: 50% 45%; }
	.bl-bat-1 { top: 14%; }
	.bl-bat-2 { top: 30%; width: 32px; height: 13px; animation-duration: 17s; animation-delay: 4s; opacity: 0.85; }
	.bl-bat-3 { top: 8%; width: 26px; height: 11px; animation-duration: 21s; animation-delay: 9s; opacity: 0.7; }

	/* Tormenta: relámpagos breves e irregulares que iluminan el hero */
	@keyframes blRayo {
		0%, 14%, 16.5%, 41%, 44.5%, 78%, 81%, 100% { opacity: 0; }
		14.4%, 15.6% { opacity: 0.18; background: radial-gradient(ellipse at 45% 0%, #dfe6ff 0%, transparent 55%); }
		15% { opacity: 0.05; }
		41.3% { opacity: 0.4; background: radial-gradient(ellipse at 68% 0%, #dfe6ff 0%, rgba(160, 175, 255, 0.35) 35%, transparent 70%); }
		41.9% { opacity: 0; }
		42.4% { opacity: 0.65; background: radial-gradient(ellipse at 72% 0%, #ffffff 0%, rgba(190, 200, 255, 0.45) 30%, transparent 65%); }
		43.1% { opacity: 0.12; background: radial-gradient(ellipse at 70% 0%, #dfe6ff 0%, transparent 60%); }
		78.4% { opacity: 0.5; background: radial-gradient(ellipse at 22% 0%, #eef2ff 0%, rgba(170, 185, 255, 0.4) 32%, transparent 68%); }
		79.1% { opacity: 0; }
		79.6% { opacity: 0.28; background: radial-gradient(ellipse at 18% 0%, #dfe6ff 0%, transparent 55%); }
	}

	/* El título entra con un golpe: grande y desenfocado -> nítido */
	@keyframes blSlam { from { opacity: 0; transform: scale(1.45); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

	.bl-kicker { animation: blFadeUp 0.55s ease-out 0.55s backwards; }
	.bl-claim { animation: blFadeUp 0.6s ease-out 0.95s backwards; }
	.bl-apoyo { animation: blFadeUp 0.6s ease-out 1.1s backwards; }
	.bl-cta-wrpr { animation: blFadeUp 0.6s ease-out 1.22s backwards; }
	.bl-trust-mov { animation: blFadeUp 0.6s ease-out 1.32s backwards; }
	.bl-mask-frame { animation: blFadeIn 0.8s ease-out 1.3s backwards; }
	.bl-arrow-wrpr { animation: blFadeIn 0.8s ease-out 1.7s backwards; }
	a.bl-hero-banner img { animation: blFadeIn 0.7s ease-out backwards; }
	a.bl-cta { animation: blGlow 2.8s ease-in-out 1.4s infinite; }

	/* Niebla viva: el fondo del hero respira y deriva muy lento */
	@keyframes blFog { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-1.6%); } }
	#bl-hero.bl-fx-niebla:before { animation: blFog 26s ease-in-out infinite alternate; will-change: transform; }

	/* La máscara levita tras su entrada */
	@keyframes blFloat { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(-2deg) translateY(-8px); } }
	.bl-hero-mask img { animation: blMaskIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.85s backwards, blFloat 5.5s ease-in-out 2s infinite alternate; }

	/* Parpadeo de fluorescente del título, cada pocos segundos */
	@keyframes blFlicker {
		0%, 38%, 41.5%, 84%, 87.5%, 100% { opacity: 1; text-shadow: 0 0 48px rgba(var(--bl-accent-rgb), 0.45), 5px 6px 0 #2a0a10; }
		38.5%, 40.8% { opacity: 0.25; text-shadow: 0 0 12px rgba(var(--bl-accent-rgb), 0.2), 5px 6px 0 #2a0a10; }
		39.6% { opacity: 0.9; text-shadow: 3px 0 0 rgba(var(--bl-accent-rgb), 0.9), -3px 6px 0 #2a0a10, 0 0 60px rgba(var(--bl-accent-rgb), 0.8); }
		84.6%, 86.8% { opacity: 0.3; }
		85.7% { opacity: 1; text-shadow: -3px 0 0 rgba(var(--bl-accent-rgb), 0.9), 5px 6px 0 #2a0a10, 0 0 70px rgba(var(--bl-accent-rgb), 0.9); }
	}
	.bl-logo { animation: blSlam 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards, blFlicker 4.6s linear 2.4s infinite; }

	/* Marca de agua gigante con deriva lateral lenta */
	@keyframes blDrift { from { transform: translateX(0); } to { transform: translateX(-2.5%); } }
	.bl-hero-marca { animation: blFadeIn 1.8s ease-out 0.8s backwards, blDrift 30s ease-in-out 2.6s infinite alternate; }

	/* Badge oscilando como colgado */
	@keyframes blSwing { from { transform: rotate(-6.5deg); } to { transform: rotate(-3.5deg); } }
	.bl-mask-badge { animation: blFadeUp 0.5s ease-out 1.5s backwards, blSwing 3.2s ease-in-out 2.2s infinite alternate; transform-origin: top left; }

	/* Cinta: entrada + un brillo que la recorre de vez en cuando */
	.bl-cinta { animation: blCintaIn 0.9s ease-out 0.5s backwards; position: relative; overflow: hidden; }
	@keyframes blShine { 0% { left: -30%; } 55%, 100% { left: 130%; } }
	.bl-cinta:after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), transparent); animation: blShine 5.5s ease-in-out 2s infinite; pointer-events: none; }

	/* Sellos: el icono se agita al pasar el ratón */
	@keyframes blWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }
	.bl-sello:hover .bl-sello-icon { animation: blWiggle 0.45s ease-in-out; }

	/* Chips: la letra gigante asoma al pasar el ratón */
	.bl-chip-letra { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
	a.bl-chip:hover .bl-chip-letra { transform: translateX(-50%) translateY(8px); }

	/* Reveals al hacer scroll (la clase bl-anim la pone el JS: sin JS no se oculta nada) */
	body.bl-anim .bl-rvl { opacity: 0; transform: translateY(24px); }
	body.bl-anim .bl-rvl.bl-rvl-in { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

	/* Micro-interacciones */
	.bl-chip-scene img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
	a.bl-chip:hover .bl-chip-scene img { transform: scale(1.06); }
	.bl-chip-name { transition: text-shadow 0.3s ease; }
	a.bl-chip:hover .bl-chip-name { text-shadow: 0 0 34px rgba(var(--bl-accent-rgb), 1), 2px 3px 0 #2a0a10; }
	a.bl-bs-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
	a.bl-bs-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); }
	.bl-sello { transition: border-color 0.3s ease; }
	.bl-sello:hover { border-color: var(--bl-accent); }
	a.bl-cta, button.bl-vertodos { transition: transform 0.2s ease, background 0.2s ease; }
	a.bl-cta:hover, button.bl-vertodos:hover { transform: translateY(-2px); }
}

/* Por debajo de escritorio el "Ver" del chip se reduce a una flecha: el chip
   entero ya es un enlace y así el nombre de la categoría —que puede ser largo,
   "Accesorios Ghost Face"— dispone de casi todo el ancho y no se corta */
@media (max-width: 1279.98px) {
	.bl-chip-btn { font-size: 0; padding: 7px 11px; }
	.bl-chip-btn:after { content: "\2192"; font-size: 15px; line-height: 1; }
}

/* ============================================================
   TABLET (ajuste intermedio)
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
	.bl-hero-cntd { gap: 40px; padding: 40px 30px 20px; }
	.bl-logo { font-size: 88px; }
	.bl-claim { font-size: 25px; }
	.bl-mask-frame, .bl-hero-mask img { width: 260px; }
	.bl-hero-marca { font-size: 200px; }
	.bl-chips-cntd { padding: 38px 30px 52px; }
	.bl-chip-scene { height: 250px; }
	.bl-chip-scene img { max-height: 205px; }
	.bl-chip-letra { font-size: 190px; }
	.bl-chip-name { font-size: clamp(15px, 7.7cqw, 30px); }
	/* Tres columnas en tablet dejan el chip muy justo: menos margen interior para
	   que el nombre de la categoría entre entero */
	.bl-chip-foot { padding: 10px 11px 12px; gap: 6px; }
}

/* ============================================================
   MÓVIL (Movil.dc.html, 390)
   ============================================================ */
@media (max-width: 767px) {
	/* Hero en columna centrada */
	#bl-hero:before { background-image: var(--bl-bg-mobile, var(--bl-bg-desktop, none)); }
	.bl-hero-marca { top: 116px; left: 50%; transform: translateX(-50%); font-size: 118px; letter-spacing: 0; color: rgba(var(--bl-accent-rgb), 0.06); }
	.bl-marca-desk { display: none; }
	.bl-marca-mov { display: inline; }
	.bl-hero-cntd { flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 4px; text-align: center; }
	/* display:contents: los hijos del bloque de texto pasan a ser items del flex
	   para poder intercalar la máscara entre el claim y el CTA (orden de Movil.dc.html) */
	.bl-hero-text { display: contents; }
	.bl-kicker { order: 1; }
	.bl-logo { order: 2; }
	.bl-claim { order: 3; }
	.bl-kicker { font-size: 11px; letter-spacing: 2.4px; gap: 8px; }
	.bl-kicker-line { width: 18px; }
	.bl-kicker-line-mov { display: inline-block; }
	.bl-logo { font-size: 66px; line-height: 0.9; text-shadow: 0 0 36px rgba(var(--bl-accent-rgb), 0.5), 3px 4px 0 #2a0a10; }
	.bl-claim { font-size: 18px; line-height: 1.2; }
	.bl-apoyo { display: none; }
	.bl-hero-mask { order: 4; margin: 6px 0 2px; }
	.bl-mask-frame { top: 12px; left: 12px; width: 218px; }
	.bl-hero-mask img { width: 218px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.8), 0 0 80px rgba(var(--bl-accent-rgb), 0.25); }
	.bl-mask-badge { top: 10px; left: -14px; font-size: 11px; padding: 7px 11px; box-shadow: none; }
	.bl-cta-wrpr { order: 5; width: 100%; justify-content: center; margin-top: 0; }
	a.bl-cta { width: 86%; text-align: center; font-size: 15px; padding: 15px 26px; box-shadow: 0 10px 26px rgba(var(--bl-accent-rgb), 0.35); }
	.bl-cta-note { display: none; }
	.bl-trust-mov { display: block; order: 6; }
	.bl-arrow-wrpr { padding: 2px 0 18px; }
	a.bl-arrow { width: 40px; height: 40px; }

	/* Cinta */
	.bl-cinta { font-size: 12px; letter-spacing: 1.6px; padding: 11px 10px; margin: 14px 0; }

	/* Panel desplegable de filtros (el tema lo pinta blanco en móvil) */
	#fltr .fltr-wrpr { background: #16121a; }
	#fltr .bg { background-color: #000; }

	/* Banda de título centrada en móvil (Movil.dc.html) */
	#titu-ctgr .web-cntd { flex-direction: column; align-items: center; }
	#titu-ctgr .estas-en-wrpr, #titu-ctgr h1 { text-align: center; padding-right: 0; }
	#titu-ctgr a { text-align: center; max-width: none; margin-top: 4px; }

	/* Sellos 2x2 compactos */
	.bl-sellos-cntd { padding: 16px 12px 8px; }
	.bl-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.bl-sello { gap: 9px; padding: 10px 11px; border-radius: 6px; }
	.bl-sello-icon { width: 26px; height: 26px; }
	.bl-sello-titu { font-size: 11px; }
	.bl-sello-sub { font-size: 10px; }

	/* Carrusel sin flechas (scroll táctil). El margin negativo de la regla base
	   se comía la separación con el titular, así que aquí solo se conserva el
	   lateral, que es el que compensa el padding de las sombras. */
	.bl-bs-cntd { padding: 20px 0 18px; gap: 14px; }
	.bl-bs-cntd .bl-chips-titu-wrpr { padding: 0 16px; }
	.bl-bs-flecha { display: none; }
	.bl-bs-track { padding: 8px 16px 4px; margin: 0 -4px -6px; }
	/* El ancho sale del viewport para que SIEMPRE asome la tarjeta siguiente y
	   se vea que el carrusel se arrastra, den 360px o 430px de pantalla.
	   1,6 tarjetas por pantalla; el tile va en proporción, no en alto fijo. */
	a.bl-bs-card { width: calc((100vw - 44px) / 1.6); max-width: 280px; padding: 8px 9px 12px; }
	.bl-bs-tile { height: auto; aspect-ratio: 178 / 212; padding: 2px; }
	.bl-bs-name { font-size: 12px; min-height: 32px; }
	.bl-bs-price { font-size: 17px; }

	/* Chips: scroll horizontal */
	.bl-chips-cntd { padding: 24px 0 30px; gap: 12px; }
	.bl-chips-titu-wrpr { padding: 0 16px; }
	.bl-chips-titu { font-size: 18px; }
	.bl-chips-titu-line { display: none; }
	.bl-chips { display: flex; gap: 12px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* Igual que el carrusel: una categoría entera y un trozo de la siguiente,
	   sea cual sea el ancho del móvil (1,3 chips por pantalla) */
	a.bl-chip { flex-shrink: 0; width: calc((100vw - 44px) / 1.3); max-width: 340px; }
	.bl-chip-scene { height: auto; aspect-ratio: 236 / 262; }
	.bl-chip-letra { top: -18px; font-size: 205px; }
	.bl-chip-scene img { max-height: 84%; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.8)); }
	.bl-chip-grad { height: 74px; }
	.bl-chip-name { font-size: clamp(15px, 7.7cqw, 28px); text-shadow: 0 0 16px rgba(var(--bl-accent-rgb), 0.8), 2px 2px 0 #2a0a10; }
	.bl-chip-foot { justify-content: space-between; padding: 9px 11px 11px; }
	.bl-chip-sub { display: none; }
	.bl-chip-btn { padding: 7px 10px; }
}