/* Historias destacadas estilo Instagram — usa con historias.js + historias-data.js
   Marcado: <div class="ef-hl" data-historias data-cta="Texto del botón"></div> */

.ef-hl{position:relative}
.ef-hl-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;padding:4px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ef-hl-row::-webkit-scrollbar{display:none}
.ef-hl-item{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;scroll-snap-align:start;cursor:pointer;background:none;border:0;color:inherit;font:inherit;padding:0}
.ef-hl-ring{width:74px;height:74px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#EE2737,#FF6B78,#F2B33D,#EE2737);transition:transform .15s}
.ef-hl-item:active .ef-hl-ring{transform:scale(.94)}
.ef-hl-item.seen .ef-hl-ring{background:rgba(255,255,255,.18)}
.ef-hl-ring span{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--ink,#0A0A0E);background:#18181B center/cover no-repeat}
.ef-hl-name{font-size:12px;font-weight:600;color:#F4F4F5;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.ef-hl-badge{font-size:11px;font-weight:800;color:#22C55E;margin-top:-4px;line-height:1}
.ef-hl-hint{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke-2,#71717A);text-align:center;margin-top:10px}
.ef-hl-count{text-align:center;font-size:13.5px;color:var(--smoke,#A1A1AA);margin:-10px 0 18px}
.ef-hl-count b{color:#fff}

/* visor */
.ef-sv{position:fixed;inset:0;z-index:200;background:#000;display:none;touch-action:none;user-select:none;-webkit-user-select:none}
.ef-sv.open{display:block;animation:efsvIn .22s ease-out}
@keyframes efsvIn{from{opacity:0;transform:scale(.96)}}
.ef-sv-stage{position:absolute;inset:0;margin:auto;max-width:min(100vw,calc(100vh * 9 / 16));height:100%;overflow:hidden;background:#000}
.ef-sv-bg{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(30px) brightness(.45);transform:scale(1.1)}
.ef-sv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ef-sv-top{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 10px 28px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:3}
.ef-sv-bars{display:flex;gap:3px}
.ef-sv-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.ef-sv-bars i b{display:block;height:100%;width:0;background:#fff}
.ef-sv-head{display:flex;align-items:center;gap:10px;margin-top:10px}
.ef-sv-av{width:34px;height:34px;border-radius:50%;background:#222 center/cover;border:2px solid #EE2737;flex:none}
.ef-sv-who{flex:1;min-width:0;color:#fff;line-height:1.2}
.ef-sv-who b{font-size:14px;display:block}
.ef-sv-who span{font-size:12px;color:#22C55E;font-weight:700}
.ef-sv-x{width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.ef-sv-tap{position:absolute;top:0;bottom:0;z-index:2}
.ef-sv-tap.l{left:0;width:33%}.ef-sv-tap.r{right:0;width:67%}
.ef-sv-bot{position:absolute;left:0;right:0;bottom:0;padding:24px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);z-index:3}
.ef-sv-bot .cta{margin:0 auto;max-width:none}
.ef-sv-nav{position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;display:none}
.ef-sv-nav.p{left:calc(50% - min(50vw, 50vh * 9 / 16) - 60px)}.ef-sv-nav.n{right:calc(50% - min(50vw, 50vh * 9 / 16) - 60px)}
@media (min-width:700px){
  .ef-hl-row{justify-content:flex-start;padding:4px 24px 8px}
  .ef-hl-item{width:88px}.ef-hl-ring{width:86px;height:86px}.ef-hl-name{max-width:88px}
  .ef-sv-stage{border-radius:14px;height:calc(100% - 32px);top:16px;bottom:16px}
  .ef-sv-nav{display:block}
}