/* The Joker House — Home rediseñada. Estilo premium coherente con
   category/product (Inter, dorado, dark hero). Sin bloat Elementor. */
.jh-home{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#1c1c1c;background:#f4f4f5;--jh-gold:#d4af37;--jh-gold-dark:#b8860b;--jh-line:#ececec}
.jh-home *{box-sizing:border-box}

/* La home rompe el .container/.row/.col de Bootstrap para ser full-width
   real (el carrusel, las bandas y el footer llegan de borde a borde).
   Las secciones normales siguen centradas vía .jh-home-sec (max 1280). */
body#index #wrapper > .container,
body#index #wrapper > .container > .row,
body#index #content-wrapper.col-xs-12,
body#index #main{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  --bs-gutter-x:0 !important;
}
/* Sin hueco entre el menú y el banner */
body#index #wrapper,
body#index #wrapper > .container,
body#index #wrapper > .container > .row,
body#index #content-wrapper,
body#index #main,
body#index #content.jh-home{
  padding-top:0 !important;
  margin-top:0 !important;
}
body#index .notifications-container{margin:0 !important;padding:0 !important}
body#index #content.jh-home > .jh-home-slider:first-child{margin-top:0 !important}

/* ===== CARRUSEL DE BANNERS (editable desde dashboard) ===== */
.jh-home-slider{position:relative;overflow:hidden;background:#0d0d0f}
.jh-home-slider__track{display:flex;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.jh-home-slide{position:relative;flex:0 0 100%;min-width:100%;min-height:clamp(600px,72vh,840px);display:flex;align-items:center;justify-content:center;background:#0d0d0f center/cover no-repeat;overflow:hidden}
.jh-home-slide.has-img{background-color:#0d0d0f}
.jh-home-slide__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.42) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.78) 100%)}
.jh-home-slide__link{position:absolute;inset:0;z-index:3;display:block;text-indent:-9999px;overflow:hidden}
.jh-home-slide__cta{position:relative;z-index:4}
.jh-home-slide:not(.has-img) .jh-home-slide__overlay{background:linear-gradient(160deg,#0d0d0f 0%,#1a1a20 55%,#241f12 100%)}
.jh-home-slide__inner{position:relative;z-index:2;max-width:1000px;padding:56px 24px;text-align:center;color:#fff}
.jh-home-slide__tag{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--jh-gold);border:1px solid #ffffff33;border-radius:999px;padding:7px 16px;margin-bottom:20px;backdrop-filter:blur(4px)}
.jh-home-slide__title{font-size:clamp(30px,5.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.jh-home-slide__sub{font-size:clamp(15px,2vw,19px);color:#e8e8ee;max-width:62ch;margin:0 auto 28px;line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.jh-home-slide__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* flechas */
.jh-home-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff33;background:rgba(10,10,12,.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s ease,border-color .15s ease}
.jh-home-slider__arrow:hover{background:var(--jh-gold);color:#0d0d0f;border-color:var(--jh-gold)}
.jh-home-slider__arrow--prev{left:18px}.jh-home-slider__arrow--next{right:18px}
/* dots */
.jh-home-slider__dots{position:absolute;left:0;right:0;bottom:20px;z-index:5;display:flex;gap:9px;justify-content:center}
.jh-home-slider__dot{width:9px;height:9px;border-radius:50%;border:0;background:#ffffff55;cursor:pointer;padding:0;transition:background .2s ease,width .2s ease}
.jh-home-slider__dot.is-active{background:var(--jh-gold);width:26px;border-radius:5px}
.jh-home-slider.is-single .jh-home-slider__arrow,.jh-home-slider.is-single .jh-home-slider__dots{display:none}

/* ===== 2º BLOQUE explicativo (sobrio, claro) ===== */
.jh-home-intro{background:#fafafa;border-bottom:1px solid var(--jh-line)}
.jh-home-intro__inner{max-width:980px;margin:0 auto;padding:48px 24px 40px;text-align:center}
.jh-home-intro__tag{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--jh-gold-dark);font-weight:700;margin-bottom:14px}
.jh-home-intro__title{font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;color:#1c1c1c}
.jh-home-intro__sub{font-size:clamp(14px,1.8vw,17px);color:#555;max-width:62ch;margin:0 auto 26px;line-height:1.65}
.jh-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.jh-btn--primary{background:var(--jh-gold);color:#0d0d0f}
.jh-btn--primary:hover{background:#e6c14e;transform:translateY(-2px)}
.jh-btn--ghost{background:transparent;color:#fff;border:1px solid #ffffff33}
.jh-btn--ghost:hover{border-color:var(--jh-gold);color:var(--jh-gold)}
.jh-home-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;font-size:13px;color:#666}
.jh-home-trust li{display:flex;align-items:center;gap:8px}
.jh-home-trust svg{color:var(--jh-gold-dark);flex-shrink:0}

/* SECCIONES */
.jh-home-sec{max-width:1280px;margin:0 auto;padding:56px 24px 0}
.jh-home-sec:last-of-type{padding-bottom:24px}
.jh-home-sec__title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 26px;position:relative;padding-left:14px}
.jh-home-sec__title::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--jh-gold);border-radius:3px}

/* CATEGORÍAS */
.jh-home-catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.jh-home-cat{position:relative;border-radius:16px;overflow:hidden;text-decoration:none;background:#fff;aspect-ratio:5/7;display:block;border:1px solid var(--jh-line)}
.jh-home-cat__img{position:absolute;inset:0}
.jh-home-cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.jh-home-cat:hover .jh-home-cat__img img{transform:scale(1.05)}
.jh-home-cat__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 42%,transparent 70%)}
.jh-home-cat__name{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.01em}
.jh-home-cat__count{color:var(--jh-gold);font-size:13px;font-weight:600;margin-top:2px}
.jh-home-cat__count::after{content:' ›';opacity:.7}

/* PRODUCTOS */
.jh-home-prodgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.jh-home-prod{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--jh-line);border-radius:14px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.jh-home-prod:hover{box-shadow:0 12px 30px rgba(0,0,0,.08);transform:translateY(-3px)}
.jh-home-prod__img{background:#fff;overflow:hidden}
.jh-home-prod__img img{width:100%;height:auto;object-fit:contain;display:block}
.jh-home-prod__name{font-size:14px;font-weight:600;padding:14px 14px 0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px}
.jh-home-prod__price{padding:8px 14px 16px;display:flex;align-items:baseline;gap:8px}
.jh-home-prod__now{font-size:17px;font-weight:800}
.jh-home-prod__old{font-size:13px;color:#999;text-decoration:line-through}

/* SHOWCASE INTERACTIVO POR PESTAÑAS */
/* Banda blanca a todo el ancho (contraste de bloques) */
.jh-band{width:100%}
.jh-band--white{background:#fff;border-top:1px solid var(--jh-line);border-bottom:1px solid var(--jh-line);margin-top:42px}
/* Banda (fondo) full-width, pero el contenido sigue centrado a 1280
   como el resto de secciones — solo cambia el fondo, no el tamaño. */
.jh-band .jh-showcase.jh-home-sec{padding-top:56px;padding-bottom:56px}
.jh-showcase__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.jh-showcase__head .jh-home-sec__title{margin:0}
.jh-showcase__tabs{display:flex;gap:32px;flex-wrap:wrap;position:relative;border-bottom:1px solid var(--jh-line)}
.jh-showcase__tab{position:relative;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9a9a9a;background:none;border:0;padding:2px 1px 15px;cursor:pointer;transition:color .2s ease}
.jh-showcase__tab::before{content:'\2660';margin-right:9px;font-size:12px;color:var(--jh-gold-dark);opacity:0;transform:translateY(3px);transition:opacity .28s ease,transform .28s ease}
.jh-showcase__tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--jh-gold-dark),var(--jh-gold));transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.45,.05,.2,1)}
.jh-showcase__tab:hover{color:#1c1c1c}
.jh-showcase__tab:hover::after{transform:scaleX(.4);opacity:.45}
.jh-showcase__tab.is-active{color:#111}
.jh-showcase__tab.is-active::before{opacity:1;transform:translateY(0)}
.jh-showcase__tab.is-active::after{transform:scaleX(1);opacity:1}
.jh-showcase__panel{display:none;animation:jhFade .35s ease}
.jh-showcase__panel.is-active{display:block}
@keyframes jhFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jh-showcase__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jh-showcase__card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--jh-line);border-radius:18px;overflow:hidden;transition:box-shadow .22s ease,transform .22s ease}
.jh-showcase__card:hover{box-shadow:0 18px 44px rgba(0,0,0,.12);transform:translateY(-5px)}
/* Imagen como en la página de categoría: 4/5 (large_default 800x1000),
   cover para que llene el ancho de la tarjeta sin recorte real. */
.jh-showcase__img{position:relative;width:100%;aspect-ratio:4/5;background:#fff;overflow:hidden}
.jh-showcase__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.jh-showcase__card:hover .jh-showcase__img img{transform:scale(1.05)}
.jh-showcase__info{padding:16px 14px 18px;display:flex;flex-direction:column;gap:8px;flex:1;text-align:center}
.jh-showcase__name{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.jh-showcase__price{display:flex;align-items:baseline;gap:8px;margin-top:auto;justify-content:center}
.jh-showcase__now{font-size:19px;font-weight:800;color:#1c1c1c}
.jh-showcase__more{display:flex;justify-content:center;margin-top:34px}
.jh-showcase__more .jh-btn--primary{color:#0d0d0f}

/* MARCAS */
.jh-home-sec--brands{margin-top:8px}
.jh-home-brands{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.jh-home-brand{display:flex;align-items:center;justify-content:center;width:140px;height:80px;background:#fff;border:1px solid var(--jh-line);border-radius:12px;text-decoration:none;color:#666;font-weight:700;font-size:13px;padding:8px;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.jh-home-brand:hover{border-color:var(--jh-gold);transform:translateY(-2px)}
.jh-home-brand img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:1;transition:filter .15s ease,opacity .15s ease}
.jh-home-brand:hover img{filter:grayscale(1);opacity:.5}

/* SEO BLOCK */
.jh-home-seo{max-width:900px;margin:56px auto 0;padding:40px 24px 0;text-align:center}
.jh-home-seo h2{font-size:22px;font-weight:800;margin:0 0 14px}
.jh-home-seo p{color:#555;line-height:1.75;font-size:15px;margin:0}
.jh-home-seo a{color:var(--jh-gold-dark);text-decoration:none;border-bottom:1px solid transparent}
.jh-home-seo a:hover{border-bottom-color:var(--jh-gold-dark)}

@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100%}
  /* Slider móvil: más bajo, sin flechas (se usa swipe), dots más abajo */
  .jh-home-slide{min-height:clamp(440px,72vh,640px)}
  .jh-home-slide.has-mobile{background-image:var(--jh-bgm)!important}
  .jh-home-slide__inner{padding:40px 18px}
  .jh-home-slider__arrow{display:none}
  .jh-home-slider__dots{bottom:14px}
  .jh-home-slide__title{font-size:clamp(24px,7vw,34px)}
  .jh-home-slide__sub{font-size:14px}
  .jh-home-slide__cta{flex-direction:column;align-items:stretch;width:100%;max-width:300px;margin:0 auto}
  .jh-home-slide__cta .jh-btn{justify-content:center;width:100%}
  .jh-home-intro__inner{padding:36px 16px 32px}
  .jh-home-sec{padding:40px 16px 0}
  /* === Sliders horizontales en móvil ===
     Categorías, Novedades, Más vendido y Marcas pasan a carrusel:
     se ve la 1ª tarjeta completa y un trozo de la siguiente asomando,
     para que quede claro que se desliza con el dedo. */
  .jh-home-catgrid,.jh-home-prodgrid,.jh-showcase__grid,.jh-home-brands{
    display:flex;grid-template-columns:none;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-left:16px;margin:0 -16px;padding:0 16px 6px;
    justify-content:flex-start;scrollbar-width:none}
  .jh-home-catgrid::-webkit-scrollbar,.jh-home-prodgrid::-webkit-scrollbar,
  .jh-showcase__grid::-webkit-scrollbar,.jh-home-brands::-webkit-scrollbar{display:none}
  .jh-home-cat,.jh-home-prod,.jh-showcase__card,.jh-home-brand{
    scroll-snap-align:start}
  .jh-home-cat{flex:0 0 82%}
  .jh-showcase__card{flex:0 0 72%}
  .jh-home-prod{flex:0 0 60%}
  .jh-home-brand{flex:0 0 42%;width:auto;height:64px}

  .jh-home-seo{padding:32px 16px 0}

  /* Showcase: las 3 pestañas SIEMPRE visibles (reparto equitativo,
     sin scroll, texto compacto, sin el glifo ♠ para ganar sitio) */
  .jh-showcase__head{margin-bottom:18px}
  .jh-showcase__tabs{width:100%;display:flex;flex-wrap:nowrap;gap:4px;overflow:visible}
  .jh-showcase__tab{flex:1 1 0;min-width:0;text-align:center;font-size:11px;
    font-weight:700;letter-spacing:.02em;line-height:1.2;padding:0 2px 11px;
    white-space:normal;overflow-wrap:anywhere}
  .jh-showcase__tab::before{display:none}
  .jh-showcase__name{font-size:14px;min-height:38px}
  .jh-showcase__now{font-size:17px}
}
@media(max-width:420px){
  .jh-home-cat{flex:0 0 84%}
  .jh-showcase__card{flex:0 0 78%}
  .jh-home-prod{flex:0 0 66%}
  .jh-home-brand{flex:0 0 46%}
}