.hb{position:relative;width:100%;max-width:var(--hb-max,none);margin:0 auto;overflow:hidden;line-height:0}
.hb[hidden]{display:none}
.hb-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.hb-track::-webkit-scrollbar{display:none}
.hb-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center}
.hb-slide[hidden]{display:none}
.hb-link,.hb picture{display:block;width:100%}
.hb img{display:block;width:100%;height:auto;max-width:none;border:0;border-radius:0}
.hb-link:focus-visible{outline:3px solid #111;outline-offset:-3px}
.hb .hb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px!important;height:44px!important;min-width:0!important;min-height:0!important;border-radius:50%!important;border:0!important;background:rgba(255,255,255,.85)!important;color:#111!important;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0!important;margin:0!important;opacity:0;transition:opacity .2s;box-shadow:0 2px 8px rgba(0,0,0,.12)!important;line-height:1!important}
.hb .hb-nav[hidden]{display:none}
.hb .hb-nav:hover{background:#fff!important}
.hb-prev{left:16px}
.hb-next{right:16px}
.hb-next svg{transform:rotate(180deg)}
.hb:hover .hb-nav,.hb-nav:focus-visible{opacity:1}
.hb-nav:focus-visible{outline:2px solid #111;outline-offset:2px}
@media (hover:none){.hb .hb-nav{display:none}}
.hb-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:2px;line-height:1}
.hb-dots[hidden]{display:none}
.hb .hb-dot,.hb .hb-dot:hover,.hb .hb-dot:focus{width:28px!important;height:28px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1!important}
.hb-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:width .25s,background .25s}
.hb-dot[aria-current="true"]::before{width:22px;background:#fff}
.hb-dot:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.hb-track{scroll-behavior:auto}.hb-dot::before,.hb-nav{transition:none}}
/* Diseño «Carrusel con asomo»: banner a la izquierda, el siguiente asoma a la derecha. Las medidas de celular van en línea (dependen del ajuste «Foto de celular hasta»). */
.hb--asomo{--hb-w:85%;--hb-gap:8px;--hb-r:8px;--hb-ink:#111;--hb-rail:#dcdcdc;max-width:none}
.hb--asomo .hb-viewport{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.hb--asomo .hb-viewport.is-dragging{cursor:grabbing}
.hb--asomo .hb-track{gap:var(--hb-gap);overflow:visible;scroll-snap-type:none;scroll-behavior:auto;will-change:transform}
.hb--asomo .hb-track.is-anim{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hb--asomo .hb-slide{flex:0 0 var(--hb-w);border-radius:var(--hb-r);overflow:hidden;background:#efedea;scroll-snap-align:none;align-items:stretch}
.hb--asomo img{-webkit-user-drag:none;pointer-events:none}
.hb--asomo .hb-link:focus-visible{outline-offset:-3px}
.hb-bar{display:flex;align-items:center;gap:16px;padding:14px 16px 0 0;line-height:1}
.hb-bar[hidden]{display:none}
.hb-line{position:relative;flex:1;height:2px;background:var(--hb-rail);border-radius:2px;overflow:hidden}
.hb-line span{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--hb-ink);border-radius:2px;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hb-arrows{display:flex;gap:6px;margin-left:auto}
.hb .hb-arrow,.hb .hb-arrow:hover,.hb .hb-arrow:focus{all:unset;box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;width:34px!important;height:34px!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--hb-ink)!important;cursor:pointer;box-shadow:none!important;min-width:0!important;min-height:0!important}
.hb .hb-arrow:hover{background:#f0eeeb!important}
.hb .hb-arrow:focus-visible{outline:2px solid var(--hb-ink);outline-offset:1px}
.hb .hb-arrow svg{width:20px;height:20px;display:block;stroke:var(--hb-ink);fill:none;transform:none}
@media (prefers-reduced-motion:reduce){.hb--asomo .hb-track.is-anim,.hb-line span{transition:none}}