/* SUNOTI Discover - CSS blindado */
/* SUNOTI Discover - FULL BLEED sin overflow por scrollbar (PC) */
/* Página Discover: evita overflow horizontal por 100vw en PC */


/* Anti “guardar imagen/video” (disuasivo) */
body.sunoti-discover-body #sunoti-discover-root,
body.sunoti-discover-body #sunoti-discover-root *{
  -webkit-user-select: none;
  user-select: none;
}

/* iOS Safari: evita menú de “Guardar imagen/video” por mantener pulsado */
body.sunoti-discover-body #sunoti-discover-root{
  -webkit-touch-callout: none;
}

/* Evita drag/arrastre de medios */
body.sunoti-discover-body #sunoti-discover-root img,
body.sunoti-discover-body #sunoti-discover-root video{
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}






html.sunoti-discover-body,
body.sunoti-discover-body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* fallback abajo */
}

@supports not (overflow: clip){
  html.sunoti-discover-body,
  body.sunoti-discover-body{ overflow-x: hidden; }
}

/* Full-bleed sin 100vw (evita sumar el ancho del scrollbar) */
#sunoti-discover-root{
  --sd-gap: 6px;
  --sd-radius: 16px;
  --sd-shadow: 0 6px 22px rgba(0,0,0,.08);
  --sd-bg: rgba(255,255,255,.92);
  --sd-bd: rgba(0,0,0,.08);

  position: relative;
  left: 50%;
  transform: translateX(-50%);

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow-x: clip;
}

/* Fallback si el navegador no soporta dvw (evita sumar la scrollbar) */
@supports not (width: 100dvw){
  #sunoti-discover-root{
    --sbw: calc(100vw - 100%); /* ancho scrollbar */
    width: calc(100vw - var(--sbw)) !important;
  }
}

/* Por si algún CSS del theme fuerza overflow */
html, body{
  overflow-x: clip;
}

#sunoti-discover-root,
#sunoti-discover-root *{
  box-sizing: border-box;
}

#sunoti-discover-root .sunoti-discover-shell{
  width: 100% !important;
  max-width: 2000px !important; /* ancho máximo real */
  margin: 0 auto !important;
  padding: 10px 6px 40px !important;
}

/* H1 grande y responsivo */
#sunoti-discover-root .sunoti-discover-title{
  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 900;
  font-size: clamp(28px, 2.2vw + 16px, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;

  margin: 0;
  padding: 12px 2px 18px;

  max-width: none !important;
}

#sunoti-discover-root .sunoti-discover-title i{
  font-size: clamp(22px, 1.6vw + 12px, 44px);
  line-height: 1;
}

/* Grid masonry por columnas */
/* Masonry real por columnas físicas (no reordena al cargar más) */
#sunoti-discover-root .sunoti-discover-grid{
  width: 100%;
  display: flex;
  gap: var(--sd-gap);
  align-items: flex-start;
}

#sunoti-discover-root .sd-col{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sd-gap);
}


/* Card */
#sunoti-discover-root .sd-item{
  width: 100%;
  border-radius: var(--sd-radius);
  overflow: hidden;
  background: var(--sd-bg);
  border: 1px solid var(--sd-bd);
  box-shadow: var(--sd-shadow);
  position: relative;
  transform: translateZ(0);
}

#sunoti-discover-root .sd-link{
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Thumbnail overlay para videos (NO ads) */
#sunoti-discover-root .sd-media{
  position: relative; /* ya lo tienes, pero lo refuerzo */
}

/* Capa de thumbnail encima del fondo y debajo del video */
#sunoti-discover-root .sd-media .sd-vthumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease;
}

/* Video por encima del thumb */
#sunoti-discover-root .sd-media video{
  position: relative;
  z-index: 2;
}


/* Evita saltos: se define por CSS vars */
#sunoti-discover-root .sd-media.sd-ar{
  aspect-ratio: var(--sdw) / var(--sdh);
}

#sunoti-discover-root .sd-media img,
#sunoti-discover-root .sd-media video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Evita negro: el thumbnail overlay será el que se vea si el video no dibuja frame */
#sunoti-discover-root .sd-media video{
  background: transparent !important;
}


/* Label patrocinado */
#sunoti-discover-root .sd-sponsored{
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

#sunoti-discover-root .sd-sponsored i{ font-size: 12px; }

/* Icono fullscreen: mobile-first (esquina, siempre visible) */
#sunoti-discover-root .sd-full{
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  pointer-events: none;

  opacity: 1;
  transform: translateZ(0);
  transition: opacity .18s ease, transform .18s ease;
}

#sunoti-discover-root .sd-full i{ font-size: 12px; }

/* PC con hover: centrado, aparece solo al hover (tipo play) */
@media (hover: hover) and (pointer: fine){
  #sunoti-discover-root .sd-full{
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%) scale(.92);
    opacity: 0;

    width: 64px;
    height: 64px;
    background: rgba(0,0,0,.58);
  }

  #sunoti-discover-root .sd-full i{ font-size: 22px; }

  #sunoti-discover-root .sd-item:hover .sd-full{
    opacity: 1;
    transform: translate(50%, 50%) scale(1);
  }
}

#sunoti-discover-root .sunoti-discover-sentinel{
  width: 100%;
  height: 1px;
}

#sunoti-discover-root .sunoti-discover-loading{
  width: 100%;
  display: grid;
  place-items: center;
  padding: 16px 0 0;
}

#sunoti-discover-root .sunoti-discover-spinner{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  animation: sdspin 0.9s linear infinite;
}

@keyframes sdspin{ to{ transform: rotate(360deg); } }

/* ===== Skeleton / Fantasma tipo Pinterest ===== */
#sunoti-discover-root .sd-skel{
  width: 100%;
  border-radius: var(--sd-radius);
  background: rgba(0,0,0,.055);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

#sunoti-discover-root .sd-skel::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  transform: translateX(-60%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: sdShimmer 1.05s linear infinite;
}

@keyframes sdShimmer{
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

/* respeta el mismo “aspect-ratio” que tus items */
#sunoti-discover-root .sd-skel.sd-ar{
  aspect-ratio: var(--sdw) / var(--sdh);
}
#sunoti-discover-root .sd-end{
  width: 100%;
  border-radius: var(--sd-radius);
  padding: 14px 12px;
  text-align: center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
  opacity: .75;
}

/* FIX: evitar negro cuando hay poster (thumbnail) */
#sunoti-discover-root .sd-media video{
  background: transparent !important;
}

/* Si NO hay poster (patrocinados u otros), recién ahí dejo negro */
#sunoti-discover-root .sd-media video:not([poster]){
  background: #000 !important;
}