/* Motor de carruseles Bwit, calcado del de apple.com (iPhone 17 / iPhone Air, medido el 16-10-2026).
   Copia para la RS-2 v2 (prototipo) de INV/carruseles-datos/galeria.css, con lo que pide la spec v2 (§1.3 y v2-2): frase de 24/600 con la
   primera parte en azul, cifra abajo, SIM abajo a la derecha, el vídeo se oculta 0,5 s después de acabar y el mando entra como en Apple.
   Dos tipos: .bw-galeria--media (n.º 2: vídeos grandes con autoplay) y .bw-galeria--fotos (n.º 8, 10, 18, 19, 21). */

/* 1 · Rejilla: la misma que el resto de la página. Apple: 1260 px como mucho y, por debajo, 87,5 % del ancho. */
.bw-galeria {
  --bw-max: 1260px;
  container-type: inline-size;              /* cqw = ancho de la galería, que va a sangre (todo el ancho de la ventana) */
  --bw-ancho: min(var(--bw-max), 87.5cqw);
  --bw-canal: calc((100cqw - var(--bw-ancho)) / 2);   /* 90 px a 1440, 330 px a 1920, 24 px a 390 */
  position: relative;
}
/* El titular de la sección tiene que usar el mismo canal para que su borde izquierdo coincida con la 1.ª tarjeta:
   .ap-in { max-width: 1260px; width: 87.5%; margin-inline: auto; }  (y quitar el padding lateral de 20 px de .ap-sec) */

.bw-galeria__pista {
  position: relative;                       /* para que offsetLeft de las tarjetas se mida desde aquí */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;           /* el gesto lateral del trackpad no hace «atrás» en el navegador */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bw-canal);   /* el imán respeta el canal izquierdo, no el borde de la ventana */
  scrollbar-width: none;
  padding-block: 10px 30px;                 /* aire para sombras y para la entrada escalonada (30 px) */
  margin-block: -10px -30px;
}
.bw-galeria__pista::-webkit-scrollbar { display: none; }
.bw-galeria.animando .bw-galeria__pista { pointer-events: none; }   /* Apple: no se interrumpe un paso a medias */

.bw-galeria__fila {
  display: flex;
  gap: 20px;
  width: max-content;
  margin: 0;
  padding: 0 var(--bw-canal);               /* a la izquierda, alineada con el titular; a la derecha, sin tope */
  list-style: none;
}
.bw-tarjeta { flex: none; scroll-snap-align: start; margin: 0; }
.bw-tarjeta:last-child { scroll-snap-align: start end; }  /* la última se para con su borde derecho en la rejilla */

/* 2 · Galería de vídeos (n.º 2). Medidas de Apple: 1260 × 680, radio 28, texto 28/32 a 48 px de la esquina. */
.bw-galeria--media .bw-tarjeta {
  width: var(--bw-ancho);
  height: 680px;
  scroll-snap-align: center;
  --d: calc(var(--i) - var(--p, 0));        /* distancia a la tarjeta actual, continua mientras se mueve */
}
@media (max-width: 1068px) { .bw-galeria--media .bw-tarjeta { height: 628px; } }
@media (max-width: 734px)  { .bw-galeria--media .bw-tarjeta { width: calc(var(--bw-ancho) - 20px); height: 480px; scroll-snap-align: start; } }  /* en móvil asoma la siguiente */
.bw-galeria--media .bw-tarjeta:not(.actual) { cursor: pointer; }   /* clic en la que asoma = ir a ella */

.bw-media { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #fff; display: grid;
  grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }   /* la fila no crece hasta el alto natural del vídeo: la cifra y el SIM quedan dentro */
.bw-media > * { grid-area: 1 / 1; }
.bw-media video, .bw-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* fuera del flujo: no empujan la rejilla */
.bw-media .bw-fin { opacity: 0; }
.bw-media.terminado .bw-fin { opacity: 1; }              /* al acabar el clip queda su último fotograma en imagen */

.bw-texto, .bw-cifra {
  /* La animación del texto (nota 2): va ligada al desplazamiento, no a un temporizador.
     Se mueve 312 px por tarjeta (2,6 × 120 px), más deprisa que la tarjeta, y se apaga en el primer 31 % del recorrido. */
  transform: translateX(calc(var(--d) * 312px));
  opacity: calc(1 - max(var(--d), -1 * var(--d)) * 3.2);
  will-change: transform, opacity;
  position: relative; z-index: 1;
}
.bw-texto {
  align-self: start; justify-self: start;
  margin: 48px; max-width: 584px;
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
  color: var(--tinta, #15283D);
}
.bw-texto b { color: var(--azul, #004C97); font-weight: 600; }
.bw-cifra { align-self: end; justify-self: start; margin: 0 48px 44px; display: grid; gap: 2px; }
.bw-cifra b { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--azul, #004C97); }
.bw-cifra b small { font-size: 21px; font-weight: 600; margin-left: 6px; letter-spacing: -.01em; }
.bw-cifra span { font-size: 17px; color: var(--gris, #5E6E81); }
.bw-cifra em { font-style: normal; font-size: 12px; color: var(--gris2, #8391A2); }
.bw-sello { align-self: end; justify-self: end; margin: 0 24px 22px; position: relative; z-index: 1; }
.bw-media video { transition: opacity .3s linear; }
.bw-media.terminado video { opacity: 0; transition-delay: .5s; }   /* Apple: el <video> se oculta 0,5 s después y queda la imagen */
@media (max-width: 734px) {
  .bw-texto { margin: 28px 24px; font-size: 19px; }
  .bw-cifra { margin: 0 24px 48px; } .bw-cifra b { font-size: 32px; } .bw-cifra span { font-size: 15px; }   /* la cifra, encima del sello: no se pisan */
  .bw-sello { margin: 0 16px 16px; }
}

/* 3 · Mando flotante: píldora de puntos + botón, pegada abajo mientras se ve la galería. */
.bw-mando {
  position: sticky; bottom: 32px; z-index: 2;
  display: flex; justify-content: center; gap: 16px;
  margin: 32px 0 0; pointer-events: none;
}
@media (max-width: 734px) { .bw-mando { position: static; margin-top: 16px; } }   /* en el móvil, debajo de la tarjeta (como Apple): no tapa la cifra ni el SIM */
.bw-mando > * { pointer-events: auto; }
.bw-puntos, .bw-play {
  height: 56px; border-radius: 28px; border: 0;
  background: rgba(232, 232, 237, .72);
  -webkit-backdrop-filter: blur(7px) saturate(1.8); backdrop-filter: blur(7px) saturate(1.8);
}
.bw-puntos { display: flex; align-items: center; gap: 16px; padding: 0 24px; margin: 0; list-style: none; }
.bw-play { width: 56px; display: grid; place-items: center; cursor: pointer; color: #15283D; }
.bw-play svg { width: 18px; height: 18px; fill: currentColor; }
.bw-play .i-pausa, .bw-play .i-otra { display: none; }
.bw-play[data-estado=reproduciendo] .i-play { display: none; } .bw-play[data-estado=reproduciendo] .i-pausa { display: block; }
.bw-play[data-estado=terminada] .i-play { display: none; } .bw-play[data-estado=terminada] .i-otra { display: block; }
/* Entrada del mando (Apple): puntos a los 740 ms y botón a los 940 ms (opacidad 100 ms, escala 200 ms) */
.bw-galeria[data-entrada] .bw-puntos, .bw-galeria[data-entrada] .bw-play { opacity: 0; transform: scale(.6); }
.bw-galeria[data-entrada].vista .bw-puntos, .bw-galeria[data-entrada].vista .bw-play { opacity: 1; transform: none; transition: opacity .1s linear, transform .2s cubic-bezier(.455,.03,.515,.955); }
.bw-galeria[data-entrada].vista .bw-puntos { transition-delay: .74s; } .bw-galeria[data-entrada].vista .bw-play { transition-delay: .94s; }
.bw-punto {
  --d: calc(var(--i) - var(--p, 0));
  --abierto: max(0, 1 - max(var(--d), -1 * var(--d)));   /* 1 en la actual, 0 a una tarjeta o más */
  position: relative; overflow: hidden; display: block;
  height: 8px; width: calc(8px + 40px * var(--abierto));  /* 8 px → 48 px, siguiendo el dedo */
  border: 0; padding: 0; border-radius: 10px;
  background: rgba(29, 29, 31, .6); cursor: pointer;
}
.bw-punto.actual::after {                                  /* barra de tiempo: animación CSS lineal, sin JS por fotograma */
  content: ""; position: absolute; inset: 0 auto 0 0; margin-left: -15%; min-width: 15%;
  border-radius: 10px; background: var(--azul, #004C97);
  animation: bw-llenar var(--bw-permanencia, 6.15s) linear forwards paused;
}
.bw-galeria.reproduciendo .bw-punto.actual::after { animation-play-state: running; }
@keyframes bw-llenar { from { width: 0; } to { width: 115%; } }

/* 4 · Galería de fotos (n.º 8, 10, 18, 19, 21). Apple: 372 px normal, 696 px ancha, 20 px de hueco; 260 px en móvil. */
.bw-galeria--fotos .bw-tarjeta { width: 372px; }
.bw-galeria--fotos .bw-tarjeta.ancha { width: 696px; }
@media (max-width: 734px) { .bw-galeria--fotos .bw-tarjeta, .bw-galeria--fotos .bw-tarjeta.ancha { width: 260px; } }
/* Flechas: dentro de la galería (que va a sangre), alineadas con el borde derecho de la rejilla */
.bw-flechas {
  display: flex; justify-content: flex-end; gap: 18px;
  width: var(--bw-ancho); margin: 48px auto 0;              /* alineadas con el borde DERECHO de la rejilla */
}
.bw-flechas button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56);
  transition: background .1s linear, color .1s linear, opacity .1s linear;
}
.bw-flechas button:disabled { opacity: .36; cursor: default; }
.bw-galeria.sin-paso .bw-flechas { display: none; }                  /* todo cabe: sin flechas muertas */

/* 5 · Entrada escalonada (las dos galerías): cada tarjeta 0,15 s después de la anterior. */
.bw-galeria[data-entrada] .bw-tarjeta { opacity: 0; transform: translateY(30px); }
.bw-galeria[data-entrada].vista .bw-tarjeta {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.455, .03, .515, .955), transform .7s cubic-bezier(.455, .03, .515, .955);  /* easeInOutQuad */
  transition-delay: calc(var(--i) * .15s);
}

/* 6 · Menos movimiento: sin autoplay (lo decide el JS), sin parallax, sin entrada, saltos instantáneos. */
@media (prefers-reduced-motion: reduce) {
  .bw-texto, .bw-cifra { transform: none; opacity: 1; }
  .bw-galeria[data-entrada] .bw-puntos, .bw-galeria[data-entrada] .bw-play { opacity: 1; transform: none; }
  .bw-galeria[data-entrada] .bw-tarjeta { opacity: 1; transform: none; transition: none; }
}