@font-face{font-family:'Assistant';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/assistant-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/frankruhl-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/frankruhl-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Otzar HaMaasiot — diseño de filas (tipo «Chabad Kids Videos») en colores ciruela y mango */
:root{
  --bg:#fff6ec;--ink:#2a1430;--muted:#7b6470;--line:#f0dccb;--card:#fff;
  --plum:#5a1a5e;--plum-d:#34103d;--plum-l:#8a2f7c;--mango:#ffb547;--mango-d:#e8901a;--coral:#ff6f59;--cream:#fff1dc;
  --violet:#5a1a5e;--pink:#ff6f59;--orange:#ff9a3c;--sun:#ffb547;--teal:#13897a;--sky:#2f74b5;
  --r:18px;
  --t:Fredoka,ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;
  --b:Assistant,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s:"Frank Ruhl Libre",Georgia,serif;
  --round:var(--t);--sans:var(--b);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--b);overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:10px;z-index:9}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--mango-d);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- Cabecera: franja ciruela a todo lo ancho ---------- */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:0 0 20px;
  background:radial-gradient(130% 120% at 15% 0%,var(--plum-l) 0%,var(--plum) 45%,var(--plum-d) 100%)}
.hero .sk{position:absolute;color:var(--mango);opacity:.7;font-size:14px;pointer-events:none;animation:tw 3.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.2;transform:scale(.7)}}
.top{display:flex;align-items:center;gap:10px;max-width:1200px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 14px 10px;text-align:left;position:relative;z-index:1}
.lg{display:flex;align-items:center;gap:10px;min-width:0}
.mk{flex:none;width:44px;height:44px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.lgt{min-width:0}
h1{margin:0;font:700 23px/1.05 var(--s);letter-spacing:.005em;color:#fff;white-space:nowrap}
h1 span{color:var(--mango)}
.tag{margin:2px 0 0;font:600 12.5px/1.2 var(--b);color:#f3d6ea;letter-spacing:.02em}
.he{margin:0 0 0 auto;flex:none;font:700 17px/1 var(--s);color:#f3d6ea}
.thx{position:relative;z-index:1;max-width:880px;margin:0 10px 12px;padding:9px 16px 10px;border-radius:12px;
  border:1px solid rgba(255,181,71,.45);background:rgba(30,6,36,.28)}
.lead{margin:0 auto;color:#ffe2b0;font:700 clamp(15px,3.9vw,19px)/1.3 var(--s);letter-spacing:.01em}

/* Carrusel de cuentos nuevos */
.hs{position:relative;margin:0;overflow:hidden;background:var(--plum-d);animation:fadein .7s ease both}
@keyframes fadein{from{opacity:0}}
.ht{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ht::-webkit-scrollbar{display:none}
.sl{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:block;background:var(--plum-d);color:#fff;text-align:left;min-width:0}
.si{position:relative;display:block;aspect-ratio:4/3;background:#3f1646;overflow:hidden;cursor:pointer}
.si img{display:block;width:100%;height:100%;object-fit:cover}
.lbl{position:absolute;left:10px;top:10px;display:inline-block;font:700 12px/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--c,var(--coral));border-radius:999px;padding:6px 11px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.bp{position:absolute;left:calc(50% - 27px);top:calc(36% - 27px);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 3px 14px rgba(0,0,0,.4);animation:pulse 2.2s 1.2s ease-in-out infinite}
.bp:after{content:"";position:absolute;left:21px;top:15px;border-left:18px solid var(--c,var(--coral));border-top:12px solid transparent;border-bottom:12px solid transparent}
@keyframes pulse{50%{transform:scale(1.08)}}
.sp{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:44px 14px 12px;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,6,36,0) 0,rgba(30,6,36,.62) 36%,rgba(30,6,36,.92))}
.sp a,.sp button{pointer-events:auto}
.st{font:600 clamp(20px,5.4vw,30px)/1.15 var(--t);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss{color:#f6dcee;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sb{display:flex;align-items:center;gap:14px;margin-top:8px}
.go{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--mango);color:#3a1d00;font:600 16px/1 var(--t);cursor:pointer;box-shadow:0 3px 0 var(--mango-d)}
.go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--mango-d)}
.sall{font:700 15px var(--b);color:#ffd28a;text-decoration:none;white-space:nowrap;padding:8px 2px}
.ha{display:none}
.hdots{display:flex;justify-content:center;gap:8px;margin:12px 0 0;position:relative;z-index:1}
.hdots button{width:12px;height:12px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s,background .3s}
.hdots button.on{width:32px;background:var(--mango)}

/* Botones de la cabecera (donde ellos tienen sus «chips») */
.cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin:14px auto 0;padding:0 10px}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font:600 16px/1.1 var(--t);padding:9px 16px;border-radius:999px;min-height:46px;border:0;cursor:pointer;transition:transform .15s ease}
.btn small{font:600 11.5px/1.2 var(--b);opacity:.8;margin-top:2px}
.btn.lib{background:var(--mango);color:#3a1d00;box-shadow:0 3px 0 var(--mango-d)}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn.auto{background:var(--coral);color:#fff;box-shadow:0 3px 0 #d94f3c}
.btn.auto small{color:#fff}
.btn:active{transform:translateY(2px)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}

/* ---------- Videos ---------- */
main{max-width:1200px;margin:0 auto;padding:22px 0 10px}
.head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 16px 2px}
.head::before{content:"";width:14px;height:34px;border-radius:8px;background:linear-gradient(var(--coral),var(--mango))}
h2{margin:0;font:600 28px/1.1 var(--t);color:var(--plum)}
.count{font:700 14px/1 var(--b);color:var(--muted)}
.ap-chip{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:6px 14px;border-radius:999px;border:0;cursor:pointer;
  background:var(--coral);color:#fff;font:600 15px/1 var(--t);box-shadow:0 3px 0 #d94f3c}
.hint{margin:4px 16px 10px;color:var(--muted);font-size:15px}
.credit{margin:4px 16px 6px;font-size:14px;color:var(--muted);line-height:1.5}
.credit a{color:var(--plum);font-weight:700;text-decoration:none}
.credit a::after{content:" ↗"}
.badge-mini{display:inline-block;background:var(--teal);color:#fff;font:700 12px/1 var(--b);padding:4px 8px;border-radius:999px;vertical-align:1px}

/* Menú de categorías: «chips» de colores, cada sección con su color */
.filtros{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 6px;padding:10px 16px;
  background:rgba(255,246,236,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 14px -10px rgba(52,16,61,.4)}
.fbtn{--c:var(--plum);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 13px 4px 5px;border-radius:999px;border:2px solid var(--c);background:#fff;color:var(--c);
  font:600 15px/1.1 var(--t);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .15s}
.fbtn .fn{order:-1;min-width:30px;height:30px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--c);color:#fff;font:700 13px/1 var(--b)}
.fbtn:active{transform:translateY(2px)}
.fbtn[aria-pressed="true"]{background:var(--c);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.fbtn[aria-pressed="true"] .fn{background:rgba(255,255,255,.26)}
.fbtn.tzb{--c:#1f6fd6}

/* Filas de cada sección (desliza de lado), como en su sitio */
.rows{display:block}
.rw{--c:var(--plum);margin:16px 0 4px;scroll-margin-top:72px}
.rh{display:flex;align-items:center;gap:8px;padding:0 16px}
.rh h3{margin:0;font:600 21px/1.2 var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--ink)}
.rh .ct{flex:none;font:700 13px/1 var(--b);color:#fff;background:var(--c);border-radius:999px;padding:4px 9px}
.sa{flex:none;margin-left:auto;border:0;background:none;color:var(--c);font:700 15px var(--b);padding:10px 4px;min-height:44px;cursor:pointer;white-space:nowrap}
.rwrap{position:relative}
.sc{list-style:none;margin:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 14px;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.sc::-webkit-scrollbar{display:none}
.ar{display:none}
@media (hover:hover) and (min-width:640px){
  .ar{display:grid;place-items:center;position:absolute;top:52px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2);font:400 30px/1 var(--b);color:var(--ink);cursor:pointer;transition:opacity .2s}
  .ar.l{left:4px}.ar.r{right:4px}
  .ar.off{opacity:0;pointer-events:none}
}

/* Tarjetas */
.card{--c:var(--plum);position:relative;flex:0 0 46%;max-width:250px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.05),0 4px 14px rgba(52,16,61,.09);scroll-margin-top:130px;transition:transform .2s ease,box-shadow .2s ease}
@media (min-width:640px){.card{flex-basis:230px}}
@media (hover:hover){.card:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(0,0,0,.05),0 10px 22px rgba(52,16,61,.16)}}
.card[hidden]{display:none}
.card.hl{animation:pop .9s ease 2}
@keyframes pop{50%{transform:scale(1.03)}}
.player{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#ecd9e4;cursor:pointer;overflow:hidden}
.player img,.player video{position:absolute;inset:0;width:100%;height:100%;display:block}
.player img{object-fit:cover;transition:transform .35s ease}
@media (hover:hover){.card:hover .player img{transform:scale(1.04)}}
.player video{background:#000;object-fit:contain}
.num{position:absolute;top:7px;left:7px;min-width:28px;height:24px;padding:0 7px;border-radius:999px;background:var(--c);color:#fff;font:700 13px/24px var(--b);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.badge{position:absolute;top:7px;left:7px;height:24px;padding:0 9px;border-radius:999px;background:var(--teal);color:#fff;font:700 12.5px/24px var(--b);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.dur{position:absolute;left:7px;bottom:7px;background:rgba(30,10,36,.74);color:#fff;font:700 12px/1 var(--b);padding:4px 7px;border-radius:7px}
.play{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--c);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .2s ease}
.play svg{width:18px;height:18px;margin-left:2px}
@media (hover:hover){.card:hover .play{transform:scale(1.12)}}
.card.on .num,.card.on .badge,.card.on .dur,.card.on .play,.card.on .player img{display:none}
.info{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column}
.info h3{margin:0;font:700 15px/1.25 var(--b);color:var(--ink)}
.meta{margin:3px 0 0;display:flex;flex-wrap:wrap;gap:0 4px;font:600 12.5px/1.35 var(--b);color:var(--muted)}
.chip{padding:0;border-radius:0}
.chip.cat{display:none}
.chip.len::before{content:"·";margin-right:4px}
.chip.dubchip{color:#0b6e5f;font-weight:700}
.actions{margin-top:auto;padding-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.share,.src{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 10px;border-radius:999px;font:700 13px/1 var(--b);text-decoration:none;cursor:pointer}
.share{border:0;background:#e3f8ea;color:#11663a;font-size:0;gap:0;width:34px;justify-content:center;padding:0}
.share svg{width:16px;height:16px}
.card.on .share{font-size:13px;gap:5px;width:auto;padding:5px 12px}
.src{background:#f6ecf3;color:var(--plum)}
@media (max-width:639px){
  .head{flex-wrap:wrap}
  h2{font-size:25px}
  .count{order:5;flex-basis:100%;padding-left:24px}
  .ap-chip{min-height:38px;padding:6px 12px;font-size:14px}
}

/* En las filas: título en 2 líneas y datos en 1, para que todas las tarjetas midan igual */
.rw:not(.all) .card:not(.on) .info h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.rw:not(.all) .card:not(.on) .meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.rw:not(.all) .card:not(.on) .meta .chip{overflow:hidden;text-overflow:ellipsis;min-width:0}
.rw:not(.all) .card:not(.on) .meta .chip.len,.rw:not(.all) .card:not(.on) .meta .dubchip{flex:none}
.card:not(.on) .actions{flex-wrap:nowrap}
.card:not(.on) .src{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:24px}
.rw.all .dubchip,.card.on .dubchip{flex-basis:100%}
.rw.all .dubchip ~ .chip.len::before,.card.on .dubchip ~ .chip.len::before{content:none}
/* Una sección abierta: todas sus tarjetas en cuadrícula (como su «See all») */
.rw.all{margin-top:10px}
.rw.all .rh h3{font-size:26px;color:var(--c)}
.rw.all .rh::before{content:"";flex:none;width:14px;height:32px;border-radius:8px;background:var(--c)}
.rw.all .sc{align-items:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding:8px 16px 14px}
@media (min-width:640px){.rw.all .sc{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.rw.all .card{max-width:none}
.rw.all .ar{display:none}
/* El cuento que se está viendo se agranda */
.sc .card.on{flex-basis:min(560px,calc(100vw - 32px));max-width:560px;box-shadow:0 0 0 3px var(--c),0 10px 26px rgba(52,16,61,.2)}
.rw.all .card.on{grid-column:1/-1;width:100%;max-width:820px}
.card.on .info h3{font:600 19px/1.25 var(--t)}
.card.on .meta{font-size:14px}

/* Banda de la biblioteca y tarjeta de videos en inglés */
.band{margin:26px 0 0;padding:0 12px}
.band-in{max-width:1176px;text-align:center;color:#fff;border-radius:26px;padding:30px 20px 32px;
  background:radial-gradient(130% 120% at 15% 0%,var(--plum-l) 0%,var(--plum) 50%,var(--plum-d) 100%);box-shadow:0 14px 30px rgba(52,16,61,.25)}
.band-k{margin:0 0 6px;font:700 13px/1 var(--b);text-transform:uppercase;letter-spacing:.14em;color:var(--mango)}
.band h2{color:#fff;font-size:clamp(24px,6.4vw,32px)}
.band p{margin:10px auto 20px;max-width:30em;color:#f3d6ea}
.more{padding:18px 12px 0}
.more-card{max-width:1176px;margin:0 auto;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#4a2400;border-radius:22px;padding:22px 20px;
  background:linear-gradient(135deg,#ffd27a 0%,var(--mango) 55%,#ff9a6a 100%);box-shadow:0 8px 22px rgba(232,144,26,.25);transition:transform .15s ease}
.more-card:hover{transform:translateY(-3px)}
.more-k{font:700 12.5px/1 var(--b);text-transform:uppercase;letter-spacing:.14em;opacity:.8}
.more-t{font:600 25px/1.15 var(--t);color:var(--plum-d)}
.more-d{font-size:15.5px}
.more-u{margin-top:8px;align-self:flex-start;background:#fff;color:var(--plum);font:600 15px/1 var(--t);padding:11px 16px;border-radius:999px}
.foot{text-align:center;color:var(--muted);font-size:14px;padding:22px 16px 40px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 16px;border-radius:14px;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:10}

/* ---------- Tzivos Hashem Argentina ---------- */
.tz{margin:10px 16px 0}
.tz-head{display:flex;gap:12px;align-items:flex-start;border-radius:20px;padding:16px 16px 14px;margin:0 0 14px;color:#fff;
  background:linear-gradient(135deg,#1f5fbf 0%,#2f86d6 60%,#13897a 100%);box-shadow:0 10px 24px rgba(31,95,191,.2)}
.tz-logo{flex:none;width:44px;height:44px;border-radius:14px;background:var(--mango);color:#1f3f8a;display:grid;place-items:center;font:600 24px/1 var(--t);box-shadow:0 3px 0 var(--mango-d)}
.tz-head h3{margin:0 0 4px;font:600 21px/1.15 var(--t)}
.tz-head p{margin:0;font-size:14.5px;line-height:1.45;color:#eaf6ff}
.tz-subs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.tzsub{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px 4px 5px;border-radius:999px;border:2px solid #1f6fd6;background:#fff;color:#1f5fbf;
  font:600 14px/1.1 var(--t);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tzsub .fn{order:-1;min-width:26px;height:26px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:700 12px/1 var(--b);background:#1f6fd6;color:#fff}
.tzsub[aria-pressed="true"]{background:#1f6fd6;color:#fff}
.tzsub[aria-pressed="true"] .fn{background:rgba(255,255,255,.26)}
.tzjump{display:block;width:100%;max-width:420px;min-height:44px;margin:0 0 14px;padding:8px 12px;border-radius:12px;border:1.5px solid #cfe0f5;background:#fff;color:#0d3f70;font:700 15px/1.2 var(--b)}
.tzg{scroll-margin-top:130px;margin:0 0 22px}
.tzh{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 19px/1.2 var(--t);color:var(--ink)}
.tzh .fn{font:700 12.5px/1 var(--b);background:#1f6fd6;color:#fff;border-radius:999px;padding:4px 9px}
.tzgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.tzgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.tzc{min-width:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.05),0 4px 14px rgba(31,60,120,.09)}
.tzp{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#2b4f8f,#3f7ec9)}
.tzp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#2b4f8f}
.tzph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px 10px 24px;text-align:center}
.tzph-t{color:#fff;font:600 13px/1.2 var(--t);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:.92}
.tzbadge{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 48px);background:rgba(13,40,90,.82);color:#fff;font:700 10px/1 var(--b);
  padding:4px 6px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tzp .play{width:32px;height:32px;color:#1f6fd6}
.tzp .play svg{width:16px;height:16px}
.tzt{margin:0;padding:7px 9px 9px;font:700 14px/1.25 var(--b);overflow-wrap:anywhere}
.tzx{margin:8px 16px 0}
.tzx .tzh{font-size:18px}

/* Ventana del reproductor de Drive */
.modal{position:fixed;inset:0;z-index:20;background:rgba(24,6,28,.88);display:flex;align-items:center;justify-content:center;padding:12px}
.modal-on,.modal-on body{overflow:hidden}
.modal-box{width:100%;max-width:960px;background:#2a0f30;color:#fff;border-radius:18px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.modal-k{background:#1f6fd6;font:600 13px/1 var(--t);padding:7px 11px;border-radius:999px}
.modal-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#2a0f30;font:700 20px/1 var(--b);cursor:pointer}
.modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal-box h3{margin:10px 4px 2px;font:600 17px/1.25 var(--t)}
.modal-foot{margin:0 4px 4px;font-size:13.5px;color:#e2c6dc}
.modal-drive{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin:10px 4px 8px;border-radius:999px;background:var(--mango);color:#3a1d00;font:600 17px/1 var(--t);text-decoration:none;box-shadow:0 3px 0 var(--mango-d)}
.modal-drive:active{transform:translateY(2px);box-shadow:0 1px 0 var(--mango-d)}

/* ---------- Auto Play ---------- */
.ap-panel{position:fixed;inset:0;z-index:30;background:rgba(24,6,28,.7);display:flex;align-items:flex-end;justify-content:center;padding:12px}
@media (min-width:640px){.ap-panel{align-items:center}}
.ap-box{width:100%;max-width:460px;background:#fff;border-radius:24px;padding:20px 18px 18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ap-box h3{margin:0 0 6px;font:600 24px/1.1 var(--t);color:var(--plum)}
.ap-box p{margin:0 0 14px;color:var(--muted);font-size:15px}
.ap-mins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
.ap-min{min-height:48px;border-radius:999px;border:2px solid #ead3e2;background:#fff;color:var(--ink);font:600 15px/1 var(--t);cursor:pointer}
.ap-min[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
.ap-acts{display:flex;gap:10px}
.ap-go{flex:1;min-height:52px;border:0;border-radius:999px;background:var(--mango);color:#3a1d00;font:600 18px/1 var(--t);cursor:pointer;box-shadow:0 4px 0 var(--mango-d)}
.ap-cancel{min-height:52px;padding:0 18px;border-radius:999px;border:2px solid #ead3e2;background:#fff;color:var(--muted);font:600 15px/1 var(--t);cursor:pointer}
.ap-player{position:fixed;inset:0;z-index:40;background:#1c0820;color:#fff;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom))}
.ap-top{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px}
.ap-txt{flex:1;min-width:0}
.ap-cat{display:inline-block;font:700 12px/1 var(--b);background:var(--coral);padding:5px 9px;border-radius:999px;margin:0 0 5px}
.ap-top h3{margin:0;font:600 18px/1.25 var(--t);overflow-wrap:anywhere}
.ap-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#1c0820;font:700 20px/1 var(--b);cursor:pointer}
.ap-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;border-radius:14px;overflow:hidden}
.ap-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.ap-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:radial-gradient(130% 120% at 15% 0%,var(--plum-l) 0%,var(--plum) 50%,var(--plum-d) 100%)}
.ap-end p{margin:0;font-size:16px}
.ap-end .ap-end-t{font:600 26px/1.2 var(--t);margin:0 0 4px;color:var(--mango)}
.ap-end .ap-go{flex:none;min-width:160px;margin-top:14px}
.ap-info{margin:8px 2px;font:700 14px/1.2 var(--b);color:#e2c6dc;text-align:center}
.ap-ctrl{display:flex;gap:8px;justify-content:center}
.ap-ctrl button{min-height:48px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font:600 15px/1 var(--t);cursor:pointer}
.ap-ctrl #ap-pause{background:var(--mango);color:#3a1d00;min-width:108px}
.ap-player:fullscreen{padding:10px}
.ap-player.done #ap-pause,.ap-player.done #ap-next,.ap-player.done #ap-full,.ap-player.done .ap-cat{display:none}
.ap-cat:empty{display:none}
#ap-full{display:inline-flex;align-items:center;justify-content:center;min-width:48px}
.ap-frame{width:100%;height:100%;border:0;background:#000}
.ap-hint{margin:8px 2px 0;text-align:center;font:700 14px/1.2 var(--b);color:#e2c6dc}
.ap-hint button{margin-left:6px;min-height:36px;padding:0 12px;border-radius:999px;border:0;background:rgba(255,255,255,.18);color:#fff;font:600 14px/1 var(--t);cursor:pointer}

/* ---------- Pantallas grandes: carrusel con imagen a la izquierda y texto a la derecha ---------- */
@media (min-width:760px){
  .top{padding:16px 24px 14px}
  .mk{width:48px;height:48px}
  h1{font-size:28px}
  .tag{font-size:13.5px}
  .he{font-size:21px}
  .thx{margin:0 auto 14px}
  .sl{display:flex;flex-direction:row;height:clamp(300px,34vw,470px)}
  .si{flex:0 0 70%;aspect-ratio:auto;height:100%}
  .sp{position:static;flex:1;justify-content:center;padding:20px 26px;background:var(--plum-d);border-left:8px solid var(--c,var(--coral));pointer-events:auto}
  .st{font-size:clamp(24px,2.4vw,34px);-webkit-line-clamp:3}
  .ss{font-size:16px;white-space:normal}
  .sb{flex-wrap:wrap;margin-top:14px}
  .bp{width:64px;height:64px;left:calc(50% - 32px);top:calc(50% - 32px)}
  .bp:after{left:25px;top:18px;border-left-width:21px;border-top-width:14px;border-bottom-width:14px}
  .ha{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(0,0,0,.3);font:400 30px/1 var(--b);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .2s}
  .ha.l{left:10px}.ha.r{left:calc(70% - 54px)}
  .hs:hover .ha,.ha:focus-visible{opacity:1}
  main{padding-top:28px}
  .head,.hint,.credit{margin-left:24px;margin-right:24px}
  .rh{padding:0 24px}
  .sc,.rw.all .sc{padding-left:24px;padding-right:24px;scroll-padding:0 24px}
  .tz,.tzx{margin-left:24px;margin-right:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Menú de categorías en celulares: UNA fila que se desliza de lado (caben todas las secciones, también las que vengan).
   El ::after es un degradado pegado al borde derecho que avisa que hay más; script.js le pone .fin al llegar al final. */
@media (max-width:639px){
  .filtros{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;gap:6px;padding-left:12px;padding-right:12px}
  .filtros::-webkit-scrollbar{display:none}
  .fbtn{flex:0 0 auto;padding:3px 12px 3px 4px;gap:5px;font-size:14.5px}
  .fbtn .fn{min-width:28px;height:28px;font-size:12.5px}
  .filtros::after{content:"";position:sticky;right:0;flex:0 0 34px;margin-left:-34px;align-self:stretch;pointer-events:none;
    background:linear-gradient(to right,rgba(255,246,236,0),rgba(255,246,236,.97) 75%);transition:opacity .2s}
  .filtros.fin::after{opacity:0}
}