/* ══════════════════════════════════════════════════════════════
   CARRUSEL APP NSS · las mismas 7 tarjetas del bento, en un riel
   Este CSS se carga DESPUÉS de nss-bento-vN.css y solo aporta la capa
   de carrusel (nbc-*): tabs con barra de avance, flechas, riel con
   scroll-snap y fundido en los costados. Las tarjetas no se tocan:
   cualquier ajuste al bento se hereda aquí.

   Sin JS igual funciona: queda un riel scrolleable con snap y fades;
   el JS agrega tabs/flechas/auto-avance y el atenuado de las laterales.
   ══════════════════════════════════════════════════════════════ */
.nb-root{ --nbc-w:min(620px, 88vw); --nbc-gap:24px; }

/* ── fila de control: tabs a la izquierda, flechas a la derecha ── */
.nbc-controls{ display:flex; align-items:center; justify-content:space-between;
  gap:22px; margin:34px 0 26px; }
.nbc-tabs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.nbc-tabs::-webkit-scrollbar{ display:none; }
.nbc-tab{ appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  color:rgba(201,182,232,.6); font-size:11.5px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; padding:9px 13px 14px; white-space:nowrap; position:relative;
  transition:color .2s ease; }
.nbc-tab:hover{ color:rgba(255,255,255,.85); }
.nbc-tab[aria-selected="true"]{ color:#fff; }
/* la barra de avance vive bajo el tab activo — mismo lenguaje que el
   rotador de casos del Home */
.nbc-prog{ position:absolute; left:13px; right:13px; bottom:5px; height:1.5px;
  background:rgba(255,255,255,.13); border-radius:2px; overflow:hidden;
  opacity:0; transition:opacity .25s ease; }
.nbc-tab[aria-selected="true"] .nbc-prog{ opacity:1; }
.nbc-fill{ display:block; height:100%; background:#C9B6E8;
  transform:scaleX(0); transform-origin:left center; }

.nbc-arrows{ display:flex; gap:10px; flex:none; }
.nbc-btn{ appearance:none; width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .2s ease, border-color .2s ease; }
.nbc-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(201,182,232,.5); }
.nbc-btn svg{ width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ── el riel ──
   Sale a sangre completa (100vw) y el fundido de los costados es una
   máscara sobre el visor: funciona sobre el fondo de vigas sin duplicar
   degradados. El centrado del primero y el último lo hace el padding
   lateral del track, no un truco de JS. */
.nbc-view{ width:100vw; margin-left:calc(50% - 50vw);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x mandatory;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  outline:none; }
.nbc-view::-webkit-scrollbar{ display:none; }
/* Los bordes que centran la primera y la última tarjeta son ITEMS flex
   (::before/::after), no padding: el padding derecho de un track scrolleado
   no cuenta completo en el scrollWidth (quirk de los motores) y la última
   tarjeta quedaba 50px corta de centro. Un pseudo-item sí cuenta siempre.
   Miden contra el ancho del visor (cqw) y descuentan el gap que el flex
   les agrega como item. */
.nbc-view{ container-type:inline-size; }
.nbc-track{ display:flex; gap:var(--nbc-gap); align-items:stretch; padding:6px 0 10px; }
.nbc-track::before,
.nbc-track::after{ content:""; flex:0 0 calc((100cqw - var(--nbc-w)) / 2 - var(--nbc-gap)); }
.nbc-track > .nb-tile{ width:var(--nbc-w); flex:none;
  scroll-snap-align:center; scroll-snap-stop:always; }

/* ── assets a UNA sola altura ──
   La ventana de todos los mocks copia la fórmula del asistente:
   0.5833 = 700/1200 (su lienzo de diseño) sobre el ancho del glass,
   más el sangrado (34) y el padding superior del glass (9). Así el borde
   inferior de los siete assets cae exactamente en la misma línea.
   El asistente queda fuera: ya trae su propia ventana (.nb-iawrap). */
.nbc-track .nb-asset{ container-type:inline-size; }
.nbc-track .nb-tile:not(.nb-ia) .nb-glass{
  /* En desktop la tarjeta está fijada en 620px (min() de --nbc-w), así que
     la ventana del asistente también es fija: 372px medidos. Un valor
     calculado aquí solo agregaría error de redondeo. */
  height:372px;
  overflow:hidden;
}
/* Los mocks se agrandan con zoom (no transform: el zoom SÍ relayouta, así
   que height/min-height siguen funcionando en %). min-height llena la
   ventana con el fondo del propio mock cuando el contenido es corto. */
.nbc-track .nb-tile:not(.nb-ia) .nb-app,
.nbc-track .nb-code{
  zoom: var(--nbc-zoom, 1.2);
  min-height: 100%;
}
/* Los mocks con poco contenido suben más el zoom para llenar su ventana
   sin que el tipo quede en miniatura; el conciliador va más abajo del
   default porque es el más denso y a 1.2 se le cortaban los botones.
   El zoom va por la CLASE del asset, no por nth-child: el loop inserta
   clones en los bordes y las posiciones dejan de ser estables. */
.nbc-track .nb-asset.nb-tint-conc .nb-app{ zoom:1.1;  }
.nbc-track .nb-asset.nb-tint-imp  .nb-app{ zoom:1.32; }
.nbc-track .nb-asset.nb-tint-nom  .nb-app{ zoom:1.5;  }
.nbc-track .nb-asset.nb-tint-mail .nb-app{ zoom:1.5;  }
.nbc-track .nb-tile.nb-api .nb-code{ zoom:1.45; }

/* dentro de un clon nada es interactivo por sí mismo: el clic cae en el
   clon entero y navega a la tarjeta real */
.nbc-clone *{ pointer-events:none; }

/* el atenuado de las laterales solo existe con JS (clase nbc-ready):
   sin JS todas quedan a plena opacidad y el riel sigue siendo usable */
.nbc-ready .nbc-track > .nb-tile{
  transition:opacity .45s ease, transform .45s ease,
             border-color .22s ease, background .22s ease; }
.nbc-ready .nbc-track > .nb-tile:not(.is-active){ opacity:.42; transform:scale(.975); cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .nbc-ready .nbc-track > .nb-tile{ transition:none; }
  .nbc-ready .nbc-track > .nb-tile:not(.is-active){ transform:none; }
  .nbc-fill{ transform:scaleX(1) !important; transition:none !important; }
}

@media (max-width:767px){
  .nb-root{ --nbc-w:88vw; --nbc-gap:14px; }
  .nbc-controls{ margin:26px 0 18px; }
  .nbc-btn{ width:38px; height:38px; }
  /* en móvil la tarjeta mide ~330px: el mock vuelve casi a escala natural
     (es el mismo tamaño al que ya se ve el bento en un teléfono). Estas dos
     reglas empatan la especificidad (0,4,0) de los zoom por clase de arriba
     y ganan por ir después en el archivo. */
  .nbc-track .nb-tile .nb-asset .nb-app,
  .nbc-track .nb-tile .nb-glass .nb-code{ zoom:1.05; }
  /* en angosto el asistente cambia a su variante móvil, cuyo alto lo manda
     el texto, no el ancho: la ventana de los mocks se calza a ese alto
     (397px medidos en 375px de viewport) */
  .nbc-track .nb-tile:not(.nb-ia) .nb-glass{ height:397px; }
  .nbc-view{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
}