/* ===================== Base / Reset ===================== */
:root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --side-w: 72px;    /* ancho reservado para la columna de íconos */
    --gutter: 16px;    /* margen lateral */
  }
  
  *{ box-sizing: border-box; }
  html, body{
    margin:0; padding:0; height:100%;
    background:#000; color:#fff;
    font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    overscroll-behavior-y: contain;
    color-scheme: dark;
  }
  img, video{ display:block; }
  
  /* ===================== Loader ===================== */
  #spinnerLoader{
    position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    display:none; justify-content:center; align-items:center;
    z-index:9999;
  }
  .spinner{
    width:50px; height:50px;
    border:5px solid #fff; border-top:5px solid #f00;
    border-radius:50%; animation:spin 1s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  
  /* ===================== Scroll tipo TikTok ===================== */
  .reels-container{
    display:flex; flex-direction:column;
    height:100vh; overflow-y:auto;
    scroll-snap-type:y mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom: var(--safe-bottom);
  }
  .reels-container::-webkit-scrollbar{ display:none; }
  
  .reel{
    position:relative; width:100%;
    height:100vh; flex:0 0 100vh;
    scroll-snap-align:start; overflow:hidden;
  }
  
  /* Altura por defecto */
.reel{ height:100vh; flex-basis:100vh; }
.reels-container{ height:100vh; }

/* Safari/IOS antiguos: svh (small viewport) */
@supports (height: 100svh){
  .reel{ height:100svh; flex-basis:100svh; }
  .reels-container{ height:100svh; }
}

/* Navegadores modernos: dvh (dynamic viewport) – última para sobrescribir */
@supports (height: 100dvh){
  .reel{ height:100dvh; flex-basis:100dvh; }
  .reels-container{ height:100dvh; }
}

  
  /* ===================== Overlay (autor/caption/link) ===================== */
  .overlay{
    position:absolute;
    left:var(--gutter);
    bottom:calc(20px + var(--safe-bottom));
    background:linear-gradient(transparent, rgba(0,0,0,.55));
    color:#fff;
    padding:12px 12px 10px;
    border-radius:12px;
    max-width:calc(100% - var(--side-w) - (var(--gutter) * 2));
    z-index:2;
  }
  .overlay h3{ margin:0 0 6px; font-size:14px; font-weight:600; }
  .overlay p.caption{
    margin:0; font-size:12px; line-height:1.3;
    max-height:3.6em; /* ~3 líneas */
    overflow:hidden; transition:max-height .25s ease;
    text-wrap:pretty;
  }
  .overlay p.caption.expanded{ max-height:320px; }
  .overlay button.toggle-caption{
    display:inline-block; margin-top:6px;
    background:transparent; color:#fff; border:0;
    font-size:.9em; text-decoration:underline; cursor:pointer;
  }
  .overlay .tiktok-link{
    display:inline-flex; align-items:center; margin-top:8px;
    color:#fff; text-decoration:none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
  }
  .overlay .tiktok-link i{ margin-right:6px; font-size:1.2em; }
  .overlay .tiktok-link:hover{ color:#ff0050; }
  
  /* ===================== Columna de íconos (derecha) ===================== */
  .side-icons{
    position:absolute; right:12px;
    bottom:calc(120px + var(--safe-bottom)); /* alto suficiente para no tapar el link */
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:22px; color:#fff; z-index:2;
  }
  .side-icons i{ cursor:pointer; }
  .side-icons span{ font-size:12px; }
  
  /* ===================== Botón de sonido (más arriba) ===================== */
  .sound-toggle{
    position:fixed; right:16px;
    bottom:calc(72px + var(--safe-bottom));
    background:rgba(0,0,0,.72); color:#fff; border:none;
    border-radius:999px; padding:10px 16px; font-size:14px; cursor:pointer;
    z-index:3; backdrop-filter:saturate(120%) blur(2px);
  }
  .sound-toggle:hover{ background:rgba(255,0,0,.7); }
  
  /* ===================== Fade inferior para lectura ===================== */
  .reel::after{
    content:""; position:absolute; inset:auto 0 0 0; height:90px;
    background:linear-gradient(transparent, rgba(0,0,0,.35));
    pointer-events:none; z-index:1;
  }
  
  /* ===================== Ajustes extra para pantallas pequeñas ===================== */
  @media (max-width: 380px){
    .side-icons{ bottom:calc(110px + var(--safe-bottom)); font-size:20px; }
    .sound-toggle{ bottom:calc(84px + var(--safe-bottom)); font-size:13px; }
    .overlay{ max-width:calc(100% - var(--side-w) - (var(--gutter) * 1.5)); }
  }
  
  /* === Video sin recorte (sin zoom) === */
.reel{
  /* centra el video dentro del alto completo */
  display: flex;
  justify-content: center;
  align-items: center;
}

.reel video{
  height: 100%;
  width: auto;          /* evita estirarlo horizontalmente */
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;  /* ← clave: que se vea completo contain o cover */ 
  background: #000;     /* “barras” negras discretas si sobra espacio */
}