body { margin:0; padding:0 !important; height:100vh; overflow:hidden;max-width:1000px !important; margin-top: 0 !important;   -webkit-touch-callout: none;  /* Desactiva el menú emergente en iOS */}
   .site-header {
  background-color: #f1f1f1;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  transform: translateY(0);
  transition: transform 0.1s ease-in-out;
}


 

  .site-header {
  
  position:absolute !important;
   display:inline-flex !important;
  
  /* Arranca visible */
  transform: none !important;
  /* Transición casi instantánea */
  transition:none !important;
}

.live-badge {
      position: absolute;
      top:55px;
      left:15px;
      font-size:12px;
      background: red;
      color: white;
      font-weight: bold;
      border:0;
      padding: 2px 6px;
      border-radius: 3px;
      z-index: 10;
      pointer-events: none;
    }


/* Botones comunes */
#nav-up,
#nav-down {
  position: fixed;
  right: 100px;        /* 100px del borde derecho */
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 20px;
  z-index: 10002;
  font-size: 24px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  /* 60% respecto al top, centrado verticalmente */
  top: 60%;
  transform: translateY(-50%);
}

/* Mostrar sólo en pantallas de puntero fino */
@media (pointer: fine) {
  #nav-up,
  #nav-down {
    display: flex;
  }
}

#nav-up {
  top: calc(50% - 50px);
  right: 100px;
}

#nav-down {
  top: calc(50% + 20px);
  right: 100px;
}


img {
  -webkit-tap-highlight-color: transparent; /* Safari/Chrome */
  -webkit-user-select: none; /* Opcional: evita que se seleccione al tocar */
  user-select: none;
}



/* En lugar de dar padding al body, movemos el feed */
#feed {
  position: absolute;
  top: 50px;    /* igual a la altura de tu header (ajusta si cambia) */
  left: 0; right: 0; bottom: 0;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#feed::-webkit-scrollbar { display: none; }


/* === ITEMS CON FONDO FIJO + BLUR + OVERLAY === */
.item, .ad-item {
  position: relative;
  display: grid;
  place-items: center;   /* centra X & Y */
  height: 100%;          /* ahora 100% de #feed, que ya está reducido */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-color: #000;
  overflow: hidden;
}

/* Pseudo-fondo fijo y difuminado */
.item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: inherit;        /* debe venir de JS con sec.style.backgroundImage */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;     /* ¡esto fija la imagen, no se mueve con el scroll! */
  filter: blur(12px);
  transform: scale(1.05);           /* evita bordes vacíos al blurear */
  opacity: 0.9;                     /* 50% de la imagen, más overlay abajo */
  z-index: 0;
}

/* Overlay negro al 90% */
.item::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1;
}

/* Tu contenido real (la img, botones, etc.) sobre todo */
.item > * {
  position: relative;
  z-index: 2;
}

/* Imagen principal, perfectamente centrada */
img.main-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  justify-self: center;
  align-self: center;
  
   -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  
}

video.main-video {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin-top: -25px;
  object-fit: contain;
  display: block;
  pointer-events: auto;
}

.audio-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top:30px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.audio-btn img {
  border-radius: none !important;
  border:0 !important;
  max-width: 24px;
  max-height: 24px;
  
}


    .profile-info {
      position:absolute; right:20px; top:60%;
      transform:translateY(-50%);
      display:flex; flex-direction:column; align-items:center; gap:8px;
      color:#fff; font-family:sans-serif;
       -webkit-tap-highlight-color: transparent;
  outline: none;
    }
    .profile-info img {
  margin-bottom: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff; /* Borde blanco */
   -webkit-tap-highlight-color: transparent;
  outline: none;
 
}


    


    .like-btn {font-size:32px; background:none; border:none; color:#fff; cursor:pointer; -webkit-tap-highlight-color: transparent;
  outline: none; }
    .likes-count { font-size:14px; margin-top:-8px;margin-bottom:5px;}
    .share-btn {
    
  margin-top:5px;
  width: 35px;
  height: 35px;
  background-color: #0000;
  background-image: url('http://sunoti.com/explore/i/share.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block; /* Asegura que se comporte como botón */
  border: none;          /* Opcional, si no quieres bordes */
  cursor: pointer;       /* Opcional, para que el cursor cambie al pasar */
   -webkit-tap-highlight-color: transparent;
  outline: none;
}

 
    .video-container, .image-container { position: relative; margin-top:-80px; }
    .video-container .spinner,
    .image-container .spinner {
      position: absolute;
      top:50%; left:50%;
      width:40px; height:40px;
      margin:-20px 0 0 -20px;
      border:4px solid rgba(255,255,255,0.3);
      border-top-color:#fff;
      border-radius:50%;
      animation: spin 1s linear infinite;
      z-index:1;
    }
    @keyframes spin { to { transform:rotate(360deg) } }
    .video-container video,
    .image-container img {
      opacity:0;
      transition: opacity .2s;
    }
    .video-container video.loaded,
    .image-container img.loaded {
      opacity:1;
    }
    .play-overlay {
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:50px; height:50px;
      pointer-events:none;
      z-index:2;
    }
    
    .icon-no-like{
 width: 35px;
  height: 35px;
  background-image: url('https://sunoti.com/explore/i/no-like.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-bottom:-5px;
}

.icon-like{
 width: 35px;
  height: 35px;
  background-image: url('https://sunoti.com/explore/i/like.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-bottom:-5px;
}


@keyframes parpadear {
  0% {
    border-color: #ffffff; /* Blanco */
  }
  100% {
    border-color: #ff0000; /* Negro */
  }
}


/* Default (igual a lo que ya tienes) */
#floating-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  z-index: 10000;
  padding: 0;
}

/* <= 800px: bottom = 70px */
@media (max-width: 800px) {
  #floating-ad{
    bottom: 80px;
  }
}


.info-box {
  position: absolute;
  bottom: 15px;
  left: 50%; /* Lo movemos al 50% del ancho del contenedor padre */
  transform: translateX(-50%); /* Lo movemos hacia la izquierda la mitad de su propio ancho */
  width: 90%; /* Ocupa el 90% del ancho del contenedor padre */
  max-width: 600px;
  background: #fff;
  color: white; /* ¡Ojo! El fondo es blanco, el texto también. ¿Quizás querías otro color? */
  padding: 15px 25px;
  margin-bottom: 10px;
  padding-bottom: 100px;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 20;
  min-height: 180px;
  cursor: pointer;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  font-family: sans-serif;
  
}

    .titulo {
      margin-left: 90px;
      margin-right: 20px;
      color:#000;
      font-weight: bold;
      font-size: clamp(1.3em, 1.3vw, 2.3rem);
      
    }

  .descripcion {
  margin-left: 90px;
  font-size: clamp(1rem, 1vw, 1.2rem);
  margin-top: 6px;
  color: #888;
  max-height: 50px; /* Establece la altura máxima */
  overflow: hidden;
  display: -webkit-box; /* Convierte el elemento en un contenedor flexible de línea */
  -webkit-line-clamp: 2; /* Limita el contenido a un máximo de 2 líneas */
  -webkit-box-orient: vertical; /* Orienta el contenido de forma vertical */
}

.cover{
    
    position: absolute;
    background: #000;
    left: 15px;
    top:15px;
    width: 90px; 
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    
}
.market{position:absolute;width:22px;top:15px;right:15px;}

    .btn-comprar {
      position: absolute;
      text-align:center;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 20px 0;
      background: #01BF61;
      color: white;
      border: none;
      font-size: 22px;
      cursor: pointer;
      -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
    }
    .btn-comprar img{width:16px;margin-bottom:-2px;margin-left:5px;}
 .logo{
    
    position:absolute;
    left:6vw;
    top:10vw;
    background:url("https://playshopy.com/i/logo-rand.svg") no-repeat center;
    height: 10vw !important;
    max-height:35px;
    aspect-ratio: 500 / 143 !important;
background-size: 100% auto !important;
z-index: 1000;
cursor:pointer;
    }
    
/* Indicador fijo centrado */
#scroll-indicator {
  position: fixed;
  bottom: 190px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 0.3s forwards, bounce 2s infinite 0.3s;
  z-index: 1000;
  font-family: sans-serif;
  color: #fff;
}

#scroll-indicator .arrow {
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(135deg); /* -45° + 180° = 135°, flecha apuntando hacia arriba */
}

/* Animaciones */
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-6px); }
  60% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes fadeOut {
  to { opacity: 0; }
}