* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #0b0f12; overflow: hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }

#app { width: 100%; height: 100%; position: relative; }

.hidden { display: none !important; }

.empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 12px;
  color: white;
  text-align: center;
  padding: 24px;
}
.empty h1 { font-size: clamp(24px, 4vw, 56px); }
.empty p { opacity: .8; font-size: clamp(14px, 2vw, 20px); }

.slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.media {
  position: absolute;
  inset: 0;
}

.media {
  position: absolute;
  inset: 0;
  background: #000;
}

.media img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: 0.55;
}

.media img.main {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;      
  object-position: center;
}

.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.85) 100%
  );
}

.content {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 5%;
  color: white;
  display: grid;
  gap: 14px;

  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(0,0,0,0.45);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  max-height: none;
  overflow: visible;
}

.top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.badge {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  background: #314e45; /* default */
}

.meta {
  opacity: .9;
  font-size: clamp(12px, 1.6vw, 18px);
  display: flex;
  gap: 10px;
  align-items: center;
}

#title {
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);

  display: -webkit-box;
  -webkit-line-clamp: 3;   
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#text {
  width: 100%;
  max-width: none;        
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1.35;
  opacity: .95;

  white-space: pre-line;  
  overflow: visible;      
}

/* transición suave */
.fade {
  animation: fade 700ms ease-in-out;
}
@keyframes fade {
  from { opacity: 0; transform: scale(1.01); }
  to { opacity: 1; transform: scale(1); }
}

body {
  cursor: none;                 /* oculta cursor */
  user-select: none;            /* no seleccionar texto */
  -webkit-user-select: none;
  -ms-user-select: none;
  touch-action: manipulation;   /* evita zoom raro */
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;         /* evita clicks sobre la imagen */
}

/* Oculta scrollbars por si acaso */
::-webkit-scrollbar { width: 0; height: 0; }

.fs-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.55);
  z-index: 50;
}

.fs-card {
  max-width: 520px;
  width: min(92%, 520px);
  padding: 22px 20px;
  border-radius: 18px;
  background: rgba(15,20,26,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fs-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.fs-text { opacity: 0.9; margin-bottom: 10px; }
.fs-small { opacity: 0.7; font-size: 13px; }