/* ==========================================================================
   css/mutador/11-carousel-sticker.css — parte 11/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §25 carrusel Swiper + sticker giratorio + elementos flotantes (fix de anclaje en SPBuilder).
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* =========================================================
   §25 · CAROUSEL — Swiper 11 · loop + autoplay + grab
   (+ Sticker badge rotante + Float image editorial)
   ========================================================= */
.bs-carousel-section{
  background: var(--ink);
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
  overflow-x: hidden;  /* recorta los slides que peekean por los bordes */
}
.bs-carousel-header{
  padding: 0 var(--gutter) clamp(20px, 3vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bs-carousel-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(239,236,228,.38);
}
.bs-carousel-count{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(239,236,228,.38);
}

/* El contenedor .swiper reemplaza .bs-carousel-track.
   overflow: visible permite que los slides peekeen;
   el overflow-x: hidden de la sección los recorta.
   touch-action: pan-y impide que el navegador interprete el drag
   horizontal como scroll de la página (causa típica de scroll-x en
   móvil al arrastrar el carrusel). */
#bsCarousel.swiper{
  overflow: visible;
  padding: 0 var(--gutter);
  user-select: none;
  touch-action: pan-y;
}
#bsCarousel .swiper-wrapper{ touch-action: pan-y; }

/* Swiper gestiona el flex del .swiper-wrapper internamente.
   Sólo anulamos sus estilos por defecto que chocan con el diseño. */
#bsCarousel .swiper-wrapper{
  align-items: stretch;
}

/* Tamaño del slide: ancho fijo para que Swiper pueda calcular
   cuántos caben (slidesPerView: 'auto'). */
.bs-slide{
  width: calc(100% - var(--gutter));  /* móvil: casi full-width */
  flex-shrink: 0;
}
.bs-slide-inner{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1e1c18;
}
.bs-slide-img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .9s ease;
}
.bs-slide:hover .bs-slide-img{ transform: scale(1.04); }
.bs-slide-caption{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(18px, 3vw, 32px);
  background: linear-gradient(
    to top,
    rgba(26,24,20,.92) 0%,
    rgba(26,24,20,.4) 55%,
    transparent 100%
  );
}
.bs-slide-tag{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,236,228,.5);
  margin-bottom: 8px;
}
.bs-slide-title{
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -.01em;
  font-weight: 400;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 5px;
}
.bs-slide-title em{
  font-family: var(--body);
  font-style: italic;
  color: rgba(239,236,228,.65);
  font-size: .86em;
}
.bs-slide-client{
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: rgba(239,236,228,.45);
  margin: 0;
}

/* Dots editoriales (gestionados por nuestro JS, no por Swiper) */
.bs-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: clamp(18px, 3vw, 30px) var(--gutter) 0;
}
.bs-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(239,236,228,.22);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.bs-dot.on{
  background: var(--paper);
  transform: scale(1.5);
}

/* Desktop: slide más estrecho → se ven ~2 + peek del siguiente */
@media (min-width: 721px){
  .bs-slide{ width: clamp(360px, 48vw, 620px); }
  .bs-slide-inner{ aspect-ratio: 3 / 4; }
}
@media (min-width: 1100px){
  .bs-slide{ width: clamp(420px, 42vw, 580px); }
}

/* ---- Sticker badge rotante ---- */
.bs-sticker{
  position: absolute;
  bottom: -54px;
  right: calc(var(--gutter) * 2);
  width: 108px;
  height: 108px;
  z-index: 10;
  pointer-events: none;
}
.bs-sticker-ring{
  position: absolute;
  inset: 0;
  animation: bs-sticker-spin 22s linear infinite;
}
.bs-sticker-ring svg{ width: 100%; height: 100%; }
.bs-sticker-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.bs-section--dark  .bs-sticker { color: var(--paper); }
.bs-section--light .bs-sticker { color: var(--ink); }
@keyframes bs-sticker-spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   Elementos flotantes dentro de SPBuilder — fix de anclaje
   --------------------------------------------------------------------------
   Sumario:
   - Aplica a `.bs-sticker` y `.bs-float-img` (cualquier elemento que
     necesite romper hacia la `.bs-section` outer con `position: absolute`).
   - SPBuilder los envuelve en .sppb-row > .sppb-row-column > .sppb-column
     > .sppb-column-addons (+ a veces .sppb-addon-wrapper > .clearfix).
   - Esos wrappers traen `position: relative` y/o `overflow: hidden`,
     lo que impide que el flotante se ancle a la sección.
   - Solución: con `:has(:is(...))` neutralizamos position y overflow SOLO
     en los wrappers que contienen un flotante, sin tocar el resto.
   - Para añadir un nuevo flotante, basta con añadir su clase al :is().
   ========================================================================== */

.bs-section:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-container-inner:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column-addons:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)) > .clearfix{
  overflow: visible;
}

.bs-section .sppb-container-inner:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column-addons:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)) > .clearfix{
  position: static;
}

/* ---- Imagen flotante editorial ---- */
.bs-float-img{
  position: absolute;
  top: clamp(48px, 8vw, 88px);
  right: var(--gutter);
  width: clamp(100px, 12vw, 172px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  transform: rotate(-3.5deg);
  box-shadow: 0 6px 28px rgba(26,24,20,.22), 0 1px 4px rgba(26,24,20,.12);
  animation: bs-float 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
@keyframes bs-float{
  0%, 100%{ transform: rotate(-3.5deg) translateY(0px); }
  50%{ transform: rotate(-3.5deg) translateY(-11px); }
}

/* Mobile overrides */
@media (max-width: 720px){
  .bs-section{ padding: clamp(56px, 14vw, 80px) var(--gutter); }
  .bs-pullquote{ font-size: clamp(28px, 9vw, 44px); }
  .bs-client-item > span:last-child{ display: none; }
  .bs-sticker{ display: none; }
  .bs-float-img{ display: none; }
}