/* ===== Mono · mega menú transparente + feed swipe-video-full-screen ===== */
:root{
  --glass:rgba(12,14,18,.38);
  --glass-line:rgba(255,255,255,.22);
  --glass-text:#fff;
  --reel-info-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}

/* ---------- Barra superior izquierda (transparente) ---------- */
.topbar-wrap{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:900;display:flex;align-items:center;gap:8px}
.topbar{position:relative;display:flex;flex-direction:row;align-items:center;gap:10px}
/* Logo del sitio SOBRE el botón del menú: fuera del vidrio, 100% opaco */
.topbar__logo{order:2;display:block;flex:none;line-height:0;opacity:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.topbar__logo img{display:block;height:34px;width:auto;min-width:24px;max-width:180px;object-fit:contain;object-position:left center;opacity:1;filter:var(--brand-filter,none)}
@media (max-width:1099px){.topbar__logo img{height:28px}}
.topbar__btn{display:flex;align-items:center;gap:.55rem;padding:.38rem .8rem .38rem .68rem;
  color:var(--glass-text);background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  font:600 .85rem/1 var(--font-menu,system-ui,sans-serif);cursor:pointer;transition:background .25s,transform .25s}
.topbar__btn:hover,.topbar__btn:focus-visible{background:rgba(12,14,18,.6)}
.topbar__btn img{display:block;max-height:18px;width:auto}
.burger{display:grid;gap:3px;width:15px}
.burger i{display:block;height:2px;background:currentColor;border-radius:2px}

/* ---------- Mega menú compacto (se abre al pasar el mouse) ---------- */
.mega{position:absolute;top:100%;left:0;margin-top:8px;z-index:1000;
  width:max-content;max-width:calc(100vw - 24px);max-height:calc(100vh - 90px);max-height:calc(100svh - 90px);overflow:auto;
  padding:12px 16px 14px;color:#fff;
  background:rgba(12,14,18,.5);border:1px solid var(--glass-line);border-radius:16px;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* puente para no perder el hover */
.mega.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}
/* Menú VERTICAL: una columna; los submenús se pliegan y se abren con la flechita */
.mega{width:max-content;min-width:230px;max-width:min(340px,calc(100vw - 24px))}
.mega__cols{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:.15rem}
.mega__cols>li{margin:0;padding:0;min-width:0;max-width:none;border-bottom:1px solid var(--glass-line)}
.mega__cols>li:last-child{border-bottom:0}
.mega__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mega__head{display:block;flex:1;min-width:0;color:#fff;text-decoration:none;font:700 .95rem/1.25 var(--font-heading,inherit);
  padding:.55rem 0}
a.mega__head:hover{opacity:.75}
.mega__sub{list-style:none;margin:0;padding:0 0 .45rem}
.mega__sub .mega__sub{padding:0 0 .2rem .8rem}
.mega__sub li{margin:0;padding:0}
.mega__sub a,.mega__sub span{display:block;flex:1;min-width:0;color:rgba(255,255,255,.88);text-decoration:none;padding:.3rem 0;font-size:.85rem;line-height:1.3}
.mega__sub a:hover{color:#fff;transform:translateX(3px);transition:transform .15s}
/* Flechita (solo aparece en los ítems que tienen submenú) */
.mega__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0;
  border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mega__toggle:hover,.mega__toggle:focus-visible{background:rgba(255,255,255,.18)}
.mega__toggle svg{display:block;transition:transform .2s ease}
li.is-open>.mega__row>.mega__toggle svg{transform:rotate(180deg)}
/* Con JS los submenús arrancan plegados; sin JS quedan todos visibles */
.mega--js li:not(.is-open)>.mega__sub{display:none}

/* ---------- Páginas sin sidebar izquierda: contenido centrado ---------- */
.left-bar{display:none}

/* ---------- Feed vertical a pantalla completa ---------- */
.home-template,.tag-template,.pagination-template{background:#000;overflow:hidden}
.home-template .container,.tag-template .container,.pagination-template .container{display:block;padding:0;margin:0;max-width:none}
.reels{height:100vh;height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;background:#000;margin:0;padding:0;max-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100vh;height:100svh;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;background:#000;color:#fff}
.reel__player,.reel__poster{position:absolute;inset:0;width:100%;height:100%}
.reel__poster{object-fit:cover;opacity:.55}
.reel__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.reel__poster{transition:opacity var(--feat-time,3.5s) ease .6s}
.reel.is-playing .reel__poster{opacity:0;pointer-events:none}
.reel__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0) 38%),linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 22%)}
.reel__info{position:absolute;left:0;right:0;bottom:var(--reel-info-bottom);padding:0 20px 0 20px;max-width:640px;pointer-events:none}
.reel__info a{pointer-events:auto}
.reel__tag{display:inline-block;margin-bottom:.5rem;padding:.2rem .65rem;border-radius:999px;font-size:.78rem;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reel__title{margin:0 0 .35rem;font-size:clamp(1.25rem,1rem + 1.6vw,2rem);line-height:1.2}
.reel__title a{color:#fff;text-decoration:none}
.reel__excerpt{font-size:.95rem;opacity:.85}
.reel__excerpt p{margin:0 0 .5rem;color:inherit}
.reel.is-playing .reel__excerpt{display:none}
.reel--pagination{display:flex;align-items:center;justify-content:center}
.reel--pagination .pagination{display:flex;gap:1rem}
.reels-nav{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:800;display:grid;gap:.5rem;justify-items:center;color:#fff}
.reels-nav__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);color:#fff;font-size:1.1rem;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reels-nav__count{font:600 .75rem var(--font-menu,system-ui)}

/* ---------- Post individual: player a pantalla completa arriba ---------- */
.reel--single{height:100vh;height:100svh;width:100vw;margin-left:calc(50% - 50vw);scroll-snap-align:none}
.post-template .container,.page-template .container{display:block}
.post-template .main,.page-template .main{max-width:none}
.post-template .main__inner,.page-template .main__inner{max-width:var(--entry-width,660px);margin-left:auto;margin-right:auto;padding-left:var(--page-margin,25px);padding-right:var(--page-margin,25px)}
@media (prefers-reduced-motion:reduce){.mega,.topbar__btn,.mega__toggle svg{transition:none}}


/* ---------- Fondo animado detrás del video (aurora + ecualizador) ---------- */
@property --c0{syntax:'<color>';inherits:true;initial-value:#0a0e1a}
@property --c1{syntax:'<color>';inherits:true;initial-value:#2f80ed}
@property --c2{syntax:'<color>';inherits:true;initial-value:#a855f7}
@property --c3{syntax:'<color>';inherits:true;initial-value:#14b8a6}
@property --c4{syntax:'<color>';inherits:true;initial-value:#ec4899}
.reel__player{overflow:hidden}
.reel__ambient{position:absolute;inset:0;overflow:hidden;background:var(--c0);opacity:0;
  transition:opacity .8s ease,--c0 1.8s ease,--c1 1.8s ease,--c2 1.8s ease,--c3 1.8s ease,--c4 1.8s ease}
.reel__ambient.on{opacity:1}
.aur{position:absolute;display:block;width:95vmax;height:95vmax;border-radius:50%;opacity:calc(var(--aur-op,80) / 100);will-change:transform}
.aur--1{left:-35vmax;top:-30vmax;background:radial-gradient(circle,var(--c1) 0,transparent 62%);animation:aur1 24s ease-in-out infinite alternate}
.aur--2{right:-40vmax;top:-10vmax;background:radial-gradient(circle,var(--c2) 0,transparent 62%);animation:aur2 29s ease-in-out infinite alternate}
.aur--3{left:-20vmax;bottom:-45vmax;background:radial-gradient(circle,var(--c3) 0,transparent 62%);animation:aur3 33s ease-in-out infinite alternate}
.aur--4{right:-30vmax;bottom:-40vmax;background:radial-gradient(circle,var(--c4) 0,transparent 62%);animation:aur4 27s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(32vmax,26vmax) scale(1.18)}}
@keyframes aur2{to{transform:translate(-30vmax,34vmax) scale(.9)}}
@keyframes aur3{to{transform:translate(34vmax,-26vmax) scale(1.12)}}
@keyframes aur4{to{transform:translate(-28vmax,-30vmax) scale(1.2)}}
.eq{position:absolute;left:0;right:0;bottom:0;height:34%;display:flex;align-items:flex-end;gap:.6%;padding:0 1.2%;opacity:calc(var(--eq-op,55) / 100);pointer-events:none}
.eq i{flex:1;display:block;height:100%;border-radius:4px 4px 0 0;transform-origin:50% 100%;transform:scaleY(.12);
  background:linear-gradient(to top,var(--c2),var(--c3));
  animation:eq var(--d,1s) ease-in-out infinite alternate;animation-delay:var(--s,0s)}
@keyframes eq{from{transform:scaleY(.1)}to{transform:scaleY(var(--h,.7))}}
.reel.is-paused .aur,.reel.is-paused .eq i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.aur,.eq i{animation:none}}

/* Contenedor del reproductor: columna 9:16 centrada (el tamaño lo calcula swipe.js) */
.reel__frame{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;
  transition:width .35s ease,height .35s ease,left .35s ease,top .35s ease}

/* Oscurecedor general del fondo animado (se regula desde las opciones del theme) */
.reel__ambient::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--amb-dark,35) / 100);pointer-events:none}

/* ---------- SEO / AEO ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aeo-answer{margin:0 0 1.5rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid currentColor;font-size:1.15em;font-weight:600;line-height:1.5}
.aeo-faq{margin-top:2.5rem}
.aeo-faq__title{font-size:1.3em;margin:0 0 1rem}
.aeo-faq h3{font-size:1.05em;margin:1.2rem 0 .3rem}
.aeo-faq p{margin:0}
.reel__noscript{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;z-index:2}
.reel__noscript a{color:#fff;font-weight:600}

/* ---------- Panel de texto a la derecha ---------- */
.reel__panel{position:absolute;top:0;right:0;bottom:0;z-index:6;width:min(92vw,520px);display:flex;flex-direction:column;
  color:#fff;background:rgba(10,12,18,.8);border-left:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  overflow:hidden;transform:translateX(100%);transition:transform .3s ease}
.reel.is-panel-open .reel__panel{transform:none}
.reel.is-panel-open .reel__info{opacity:0;pointer-events:none}
.reel__panelbar{flex:none;display:flex;justify-content:flex-end;padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 8px 12px}
.reel__back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel__back:hover,.reel__back:focus-visible{background:rgba(255,255,255,.26)}
.reel__back svg{display:block}
.reel__panelbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 18px calc(36px + env(safe-area-inset-bottom,0px));font-size:1rem;line-height:1.6;text-align:left}
.reel__panel-title{margin:0 0 .8rem;font-size:1.15rem;line-height:1.3}
.reel__panel-title a{color:#fff;text-decoration:none}
.reel__text>*:first-child{margin-top:0}
.reel__text h2,.reel__text h3,.reel__text h4{color:#fff;margin:1.4em 0 .5em;line-height:1.3}
.reel__text h2{font-size:1.25rem}
.reel__text h3{font-size:1.1rem}
.reel__text p,.reel__text li{color:rgba(255,255,255,.9)}
.reel__text a,.aeo-faq a{color:#9ad1ff}
.reel__text img,.reel__text video,.reel__text iframe,.reel__text figure{max-width:100%;height:auto;border-radius:8px}
.reel__text table{display:block;max-width:100%;overflow-x:auto}
.reel__panel .content__lead{margin:0 0 1rem;font-size:1.05rem;opacity:.85}
.reel__panel .aeo-faq h5{font-size:1rem;margin:1rem 0 .25rem;color:#fff}
.reel__panel .aeo-faq h4,.reel__panel .aeo-faq__title{color:#fff}
.reel__panel .aeo-faq p{color:rgba(255,255,255,.9)}
.reel__handle{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:7;width:30px;height:64px;
  border:1px solid var(--glass-line);border-right:0;border-radius:14px 0 0 14px;background:var(--glass);color:#fff;
  font-size:1.7rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel.is-panel-open .reel__handle{display:none}
.reel--pagination .reel__handle{display:none}
@media (max-width:1099px){.reels-nav{display:none}}
@media (min-width:1100px){
  .reel__panel{width:clamp(320px,28vw,440px);transform:none}
  .reel__handle,.reel__back,.reel__panelbar{display:none}
  .reel__panelbody{padding-top:calc(86px + env(safe-area-inset-top,0px))}
  .reel__excerpt{display:none}
  .reel__info{max-width:max(180px,calc((100vw - 100svh * .5625) / 2 - 40px))}
  .reels-nav{right:calc(clamp(320px,28vw,440px) + 14px)}
  .reel.is-panel-open .reel__info{opacity:1;pointer-events:none}
}

/* ---------- Imagen destacada como fondo ---------- */
.reel__bg{display:none}
.reel__panelbg{display:none;position:absolute;inset:-24px;z-index:-1;background-size:cover;background-position:center;
  filter:blur(22px) brightness(.38) saturate(1.2);pointer-events:none}
.reel.has-feat .reel__panelbg{display:block}
@media (min-width:1100px){
  .reel__bg{display:block;position:absolute;inset:-30px;background-size:cover;background-position:center;pointer-events:none;
    opacity:0;filter:none;transition:opacity .8s ease}
  .reel__bg.bg-ready{opacity:1}
  .reel.bg-settle .reel__bg.bg-ready{filter:blur(calc(var(--feat-blur,20) * 1px)) brightness(calc(var(--feat-bright,45) / 100)) saturate(1.2);
    transition:opacity .8s ease,filter var(--feat-time,3.5s) ease .6s}
  .reel.has-feat .reel__ambient{background:transparent}
  .reel.has-feat .aur{mix-blend-mode:screen;opacity:calc(var(--feat-aur,30) / 100)}
  .reel.has-feat .reel__ambient::after{opacity:0}
}

/* ---------- Botonera de compartir ---------- */
.reel__share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--glass-line)}
.reel__share[hidden],.reel__share [hidden]{display:none!important}
.reel__share-label{font-size:.85rem;opacity:.75;margin-right:.3rem}
.reel__share-native{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--glass-line);background:rgba(255,255,255,.1);
  color:#fff;font:600 .85rem system-ui,sans-serif;text-decoration:none;cursor:pointer}
.reel__share-native:hover{background:rgba(255,255,255,.22)}
/* Logos oficiales de cada red (fondo blanco, logo en el color de la marca) */
.reel__share-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:#fff;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.reel__share-btn:hover,.reel__share-btn:focus-visible{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.reel__share-btn svg{display:block}
.reel__share-btn[data-net="whatsapp"]{color:#25D366}
.reel__share-btn[data-net="facebook"]{color:#0866FF}
.reel__share-btn[data-net="x"]{color:#000}


/* ---------- Logo del sitio ("Website logo") como marca de agua ---------- */
/* Se regula desde las opciones del tema (pestaña "Logo"): --brand-op (opacidad %) y --brand-filter (color) */
.reel__info{isolation:isolate}
.reel__brand{position:absolute;z-index:-1;display:block;max-width:none;object-fit:contain;pointer-events:none;
  filter:var(--brand-filter,none)}
/* Texto del post (panel derecho): arriba a la derecha, DEBAJO del texto. PC y celular */
.reel__brand--panel{z-index:2;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:clamp(110px,40%,180px);height:56px;
  object-position:right top;opacity:calc(var(--brand-op,35) / 100)}
/* Título del post: abajo a la izquierda, DEBAJO del título (solo PC, donde el título vive en el costado) */
.reel__brand--title{display:none}
@media (min-width:1100px){
  .reel__brand--title{display:block;left:12px;bottom:-14px;width:calc(100% - 24px);height:clamp(110px,22vh,200px);
    object-position:left bottom;opacity:calc(var(--brand-op,35) / 100)}
}
/* en celular el botón de cerrar ocupa la esquina: el logo queda a su izquierda */
@media (max-width:1099px){
  .reel__brand--panel{top:calc(10px + env(safe-area-inset-top,0px));right:calc(12px + 44px + 14px + env(safe-area-inset-right,0px));
    height:44px;width:clamp(90px,34%,150px);object-position:right center}
}
/* El logo dentro del botón del menú también respeta la opción "Color del logo" */


/* ---------- Botón de WhatsApp junto al menú (opciones del tema, pestaña "WhatsApp") ---------- */
/* Está FUERA de #topbar a propósito: así pasar el mouse por encima no abre el menú. */
.topbar__wa{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:50%;
  background:#25d366;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .2s ease,filter .2s ease;-webkit-tap-highlight-color:transparent}
.topbar__wa svg{display:block;width:24px;height:24px}
.topbar__wa:hover,.topbar__wa:focus-visible{color:#fff;transform:scale(1.08);filter:brightness(1.08)}
/* Titileo suave: aro que se expande + leve "respiración" del ícono */
.topbar__wa--pulse{animation:wa-pulse 2.6s ease-in-out infinite}
.topbar__wa--pulse svg{animation:wa-glow 2.6s ease-in-out infinite}
@keyframes wa-pulse{0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 0 rgba(37,211,102,.55)}
  60%{box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 14px rgba(37,211,102,0)}}
@keyframes wa-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
.topbar__wa--pulse:hover,.topbar__wa--pulse:focus-visible{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.topbar__wa--pulse,.topbar__wa--pulse svg{animation:none}}

/* ---------- Redes sociales (perfiles) debajo de "Compartir" — opciones del tema, pestaña "Redes sociales" ---------- */
.reel__follow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.25rem}
.reel__follow-label{font-size:.85rem;opacity:.75;margin-right:.3rem}
.reel__follow-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:#fff;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.reel__follow-btn:hover,.reel__follow-btn:focus-visible{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.reel__follow-btn svg{display:block;width:22px;height:22px}
.reel__follow-btn[data-net="instagram"]{color:#E4405F}
.reel__follow-btn[data-net="facebook"]{color:#0866FF}
.reel__follow-btn[data-net="x"],.reel__follow-btn[data-net="tiktok"]{color:#000}
.reel__follow-btn[data-net="youtube"]{color:#FF0000}
.reel__follow-btn[data-net="linkedin"]{color:#0A66C2}
.reel__follow-btn[data-net="pinterest"]{color:#E60023}
.reel__follow-btn[data-net="telegram"]{color:#26A5E4}
.reel__follow-btn[data-net="vimeo"]{color:#1AB7EA}


/* Aviso cuando YouTube rechaza un video */
.reel__yterr{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;pointer-events:auto}
.reel__yterr a{display:inline-block;padding:.45rem .9rem;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;
  font:600 .8rem system-ui,sans-serif;text-decoration:none;border:1px solid rgba(255,255,255,.25);white-space:nowrap}

/* Botón del menú más compacto en celular */
@media (max-width:1099px){
  .topbar-wrap{top:calc(8px + env(safe-area-inset-top,0px));left:8px}
  .topbar__btn{gap:.5rem;padding:.32rem .7rem .32rem .6rem;font-size:.8rem}
  .topbar__btn img{max-height:16px}
}


/* ---------- Panel a la IZQUIERDA del video (opciones del tema, pestaña "Panel izquierdo") ---------- */
/* Celular: se desliza desde la izquierda; flechita en el borde izquierdo para abrir y cruz arriba a la derecha del panel para cerrar */
.reel__left{position:absolute;top:0;left:0;bottom:0;z-index:6;width:min(92vw,520px);display:flex;flex-direction:column;
  color:#fff;background:rgba(10,12,18,.8);border-right:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  overflow:hidden;transform:translateX(-100%);transition:transform .3s ease}
.reel.is-left-open .reel__left{transform:none}
.reel.is-left-open .reel__info{opacity:0;pointer-events:none}
.reel__leftbar{flex:none;display:flex;justify-content:flex-end;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px 12px}
.reel__leftclose{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel__leftclose:hover,.reel__leftclose:focus-visible{background:rgba(255,255,255,.26)}
.reel__leftclose svg{display:block}
.reel__leftbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 18px calc(36px + env(safe-area-inset-bottom,0px));font-size:1rem;line-height:1.6;text-align:left}
.reel__left-title{margin:0 0 .8rem;font-size:1.15rem;line-height:1.3;color:#fff}
.reel__lefttext>*:first-child{margin-top:0}
.reel__lefttext h2,.reel__lefttext h3,.reel__lefttext h4{color:#fff;margin:1.2em 0 .5em;line-height:1.3}
.reel__lefttext h2{font-size:1.25rem}
.reel__lefttext h3{font-size:1.1rem}
.reel__lefttext p,.reel__lefttext li{color:rgba(255,255,255,.9)}
.reel__lefttext a{color:#9ad1ff}
.reel__lefttext img,.reel__lefttext video,.reel__lefttext iframe,.reel__lefttext figure{max-width:100%;height:auto;border-radius:8px}
.reel__lefttext table{display:block;max-width:100%;overflow-x:auto}
.reel__lhandle{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:7;width:30px;height:64px;
  border:1px solid var(--glass-line);border-left:0;border-radius:0 14px 14px 0;background:var(--glass);color:#fff;
  font-size:1.7rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel.is-left-open .reel__lhandle,.reel.is-panel-open .reel__lhandle{display:none}
.reel.is-left-open .reel__handle{display:none}
.reel--pagination .reel__lhandle,.reel--pagination .reel__left{display:none}
/* PC: tarjeta fija a la izquierda del video, debajo del botón del menú y por encima del título */
@media (min-width:1100px){
  .reel__left{top:calc(70px + env(safe-area-inset-top,0px));left:12px;bottom:auto;height:auto;transform:none;
    width:clamp(220px,calc((100vw - 100svh * .5625) / 2 - 36px),400px);
    max-height:max(120px,calc(100svh - 70px - var(--reel-info-bottom) - 190px));
    border:1px solid var(--glass-line);border-radius:16px}
  .reel__lhandle,.reel__leftbar{display:none}
  .reel__leftbody{padding-top:18px;padding-bottom:20px}
}