/* NOTAS — galería-carrusel de últimas notas (componente común; ver inc/notas/galeria.php). Usa las variables --nt-* del tema de cada medio y la capa de marca (.nt-mk).
   Escritorio: nota principal grande + lista de las demás al lado. Móvil: principal arriba y tira deslizable debajo. Todas las diapositivas comparten la misma celda: sin CLS.
   Sin estilos en línea (CSP). Respeta prefers-reduced-motion (sin fundido ni barra de progreso; el JS tampoco avanza solo). */

.ng{--ng-gap:clamp(12px,1.6vw,20px);--ng-r:var(--nt-radio,20px);--ng-ms:6s;display:grid;gap:14px;min-width:0;color:var(--nt-fg,#f7f1fa)}
.ng *,.ng *::before,.ng *::after{box-sizing:border-box}
.ng__scene{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:var(--ng-gap);align-items:stretch}
.ng--uno .ng__scene{grid-template-columns:minmax(0,1fr)}

/* escenario */
.ng__viewport{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--ng-r) 8px var(--ng-r) 8px;background:var(--nt-tarjeta2,#2f1049);border:1px solid var(--nt-linea,rgba(195,175,214,.2));box-shadow:var(--nt-sombra,none);touch-action:pan-y}
.ng__slides{display:grid}
.ng__slide{grid-area:1/1;position:relative;display:grid;min-width:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.ng__slide.is-activa{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.ng__img{grid-area:1/1;display:block;position:relative;aspect-ratio:16/10;min-height:0;border-radius:0}
.ng__img>img,.ng__img .nt-im{display:block;width:100%;height:100%;object-fit:cover}
.ng__ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 90% at 78% 24%,rgba(255,255,255,.12),transparent 60%),linear-gradient(145deg,var(--mk-a,#1b0628),var(--mk-b,#552189) 70%,var(--mk-c,#f05613) 160%)}
.ng__ph .nt-ico{width:clamp(56px,9vw,110px);height:auto;aspect-ratio:1;color:rgba(255,255,255,.2);stroke-width:1.2}
.ng__txt{grid-area:1/1;align-self:end;position:relative;z-index:2;display:grid;gap:10px;padding:clamp(56px,9vw,120px) clamp(18px,3vw,34px) clamp(18px,2.6vw,30px);color:#fff;
  background:linear-gradient(to top,rgba(14,4,22,.94) 0%,rgba(14,4,22,.82) 48%,rgba(14,4,22,0) 100%)}
.ng__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ng__sec,.ng__soon{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:.5em .85em;border-radius:99px;background:var(--nt-acento,#ff7a3d);color:var(--nt-on-acento,#1b0628)}
.ng__sec{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.ng__t{margin:0;font-size:clamp(1.3rem,2.7vw,2.2rem);font-weight:900;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ng__t a{color:inherit;text-decoration:none}
.ng__t a::after{content:"";position:absolute;inset:0;z-index:1}
.ng__t a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ng__b{margin:0;max-width:62ch;font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.5;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ng__txt .nt-meta{color:rgba(255,255,255,.78);margin:0}
.ng__txt .nt-tipo{position:relative;z-index:2}

/* flechas */
.ng__nav{position:absolute;top:calc(50% - 22px);z-index:5;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(14,4,22,.6);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,transform .2s,opacity .2s}
.ng__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ng__nav--prev{left:12px}.ng__nav--prev svg{transform:scaleX(-1)}
.ng__nav--next{right:12px}
.ng__nav:hover{background:var(--nt-acento,#ff7a3d);color:var(--nt-on-acento,#1b0628)}
.ng__nav:focus-visible,.ng__dot:focus-visible,.ng__pausa:focus-visible,.ng__item:focus-visible{outline:3px solid var(--nt-acento,#ff7a3d);outline-offset:3px}
@media(hover:hover) and (min-width:760px){.ng__nav{opacity:0}.ng__viewport:hover .ng__nav,.ng__nav:focus-visible{opacity:1}}

/* lista lateral */
.ng__side{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:10px;align-content:start;min-width:0;contain:size;overflow:hidden} /* contain:size = la lista no empuja la altura: manda la nota principal */
.ng__side>li{display:flex;min-width:0;max-height:140px}
.ng__item{position:relative;flex:1;display:grid;grid-template-columns:clamp(80px,7.5vw,104px) minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:8px 12px 8px 8px;overflow:hidden;color:inherit;text-decoration:none;
  border-radius:calc(var(--ng-r) * .7) 6px calc(var(--ng-r) * .7) 6px;background:var(--nt-tarjeta,#250a3a);border:1px solid var(--nt-linea,rgba(195,175,214,.2));transition:border-color .25s,background-color .25s,transform .25s}
.ng__item:hover{border-color:color-mix(in srgb,var(--nt-acento,#ff7a3d) 60%,transparent);transform:translateX(-3px)}
.ng__item.is-activa{border-color:var(--nt-acento,#ff7a3d);background:var(--nt-tarjeta2,#2f1049)}
.ng__th{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.ng__th .nt-im,.ng__th img{display:block;width:100%;height:100%;object-fit:cover}
.ng__th .nt-mk__k,.ng__th .nt-mk__l{display:none}
.ng__th .nt-mk__g{background:linear-gradient(to top,color-mix(in srgb,var(--mk-a,#1b0628) 55%,transparent),transparent 70%)}
.ng__th .nt-ph,.ng__th .ng__ph{border-radius:inherit}
.ng__th .ng__ph .nt-ico{width:34%}
.ng__it{display:grid;gap:3px;min-width:0}
.ng__itk{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-enlace,#ffb38f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ng__itt{font-size:.92rem;font-weight:800;line-height:1.22;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ng__itm{font-size:.76rem;font-weight:600;color:var(--nt-mute,#c3afd6)}
.ng__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--nt-acento2,#f05613),var(--nt-acento,#ff7a3d))}
.ng.is-auto .ng__item.is-activa::after{animation:ng-prog var(--ng-ms) linear forwards}
.ng.is-pausa .ng__item.is-activa::after{animation-play-state:paused}
@keyframes ng-prog{to{transform:scaleX(1)}}

/* controles inferiores */
.ng__ctl{display:flex;align-items:center;justify-content:center;gap:14px}
.ng__pausa{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--nt-linea,rgba(195,175,214,.3));border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.ng__pausa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ng__pausa .ng__ic-play{display:none;fill:currentColor;stroke:none}
.ng__pausa[aria-pressed="true"] .ng__ic-pausa{display:none}.ng__pausa[aria-pressed="true"] .ng__ic-play{display:block}
.ng__pausa:hover{border-color:var(--nt-acento,#ff7a3d)}
.ng__dots{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.ng__dots li{display:grid;place-items:center}
.ng__dot{position:relative;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.ng__dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:99px;background:var(--nt-linea,rgba(195,175,214,.5));box-shadow:inset 0 0 0 1px rgba(195,175,214,.4);transition:width .3s,margin .3s,background-color .3s}
.ng__dot.is-activa::before{width:26px;margin-left:-13px;background:var(--nt-acento,#ff7a3d);box-shadow:none}
.ng__cuenta{margin:0;font-size:.82rem;font-weight:700;color:var(--nt-mute,#c3afd6);min-width:3.2em;text-align:center}
.ng__cuenta b{color:var(--nt-fg,#fff)}

/* tableta y móvil: principal arriba y tira deslizable debajo */
@media(max-width:979px){
  .ng__scene{grid-template-columns:minmax(0,1fr)}
  .ng__side{contain:none;grid-auto-flow:column;grid-auto-rows:auto;grid-auto-columns:min(82%,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ng__side::-webkit-scrollbar{display:none}
  .ng__side>li{scroll-snap-align:start;max-height:none}
  .ng__item{grid-template-columns:92px minmax(0,1fr);padding:8px}
  .ng__item:hover{transform:none}
}
/* móvil: texto debajo de la foto */
@media(max-width:759px){
  .ng__slide{display:flex;flex-direction:column}
  .ng__img{aspect-ratio:16/9}
  .ng__txt{padding:16px 16px 18px;background:none;color:var(--nt-fg,#fff);gap:9px}
  .ng__b{color:var(--nt-mute,#c3afd6);-webkit-line-clamp:3}
  .ng__txt .nt-meta{color:var(--nt-mute,#c3afd6)}
  .ng__sec{background:color-mix(in srgb,var(--nt-acento,#ff7a3d) 18%,transparent);color:var(--nt-enlace,#ffb38f);border-color:color-mix(in srgb,var(--nt-acento,#ff7a3d) 45%,transparent)}
  .ng__t{font-size:1.32rem}
  .ng__nav{top:calc(28vw - 22px)}
}
@media(max-width:380px){.ng__ctl{gap:6px}}

@media(prefers-reduced-motion:reduce){
  .ng__slide,.ng__slide.is-activa{transition:none}
  .ng__item,.ng__item:hover,.ng__dot::before,.ng__nav{transition:none;transform:none}
  .ng.is-auto .ng__item.is-activa::after{animation:none;transform:scaleX(1)}
}
@media(forced-colors:active){.ng__item.is-activa,.ng__dot.is-activa::before{outline:2px solid Highlight}}
@media print{.ng__nav,.ng__ctl,.ng__side{display:none}.ng__slide{opacity:1;visibility:visible}}