/* ===================== ALUGAR SERVIDOR – ESTILO DA PÁGINA ===================== */

:root{
  --demo-green: #00c853;
  --demo-card: rgba(0, 44, 0, 0.75); /* estilo lista de servidores */
  --demo-card-2: rgba(0, 70, 0, 0.70);
  --demo-border: rgba(255,255,255,.12);
}

/* Skip link (acessibilidade) */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
  z-index:99999;
}
.skip-link:focus{ left:10px; }

/* Container main desta página */
.demonstracao-main{
  padding: 1rem;
}

/* (Opcional) Caso você use um wrapper externo no futuro */
.demo-hero{
  width: min(1100px, 95%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;

  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ✅ Container principal (onde está TUDO) */
.demo-slider{
  width: 100%;
  max-width: 980px;

  background: linear-gradient(to bottom, var(--demo-card), var(--demo-card-2));
  border: 1px solid var(--demo-border);
  border-radius: 20px;
  box-shadow: 5px 5px 25px rgba(0,0,0,1);
  backdrop-filter: blur(1.5px);

  padding: 14px;
}

/* Header interno (título + texto + badges) */
.demo-header{
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 14px rgba(0,0,0,.65);
  text-align: center;
}

.demo-title{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 14px rgba(0,200,83,.20);
}

.demo-subtitle{
  margin: 0 auto 12px;
  max-width: 900px;
  color: rgba(255,255,255,.95);
  line-height: 1.6;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* ===================== BADGES (EMBLEMAS) ===================== */

.demo-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  justify-content:center;

  margin-top: 14px;
  margin-bottom: 20px; /* ✅ distância desejada para o slider/anexos */
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(0, 60, 0, .75);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.6),
    0 4px 10px rgba(0,0,0,.6);

  color:#fff;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change: transform;
}

.badge i{
  color: #00ff88;
  text-shadow: 0 0 6px rgba(0,255,136,.6);
}

/* Badge de destaque (Garantia) */
.badge--highlight{
  background: linear-gradient(to right, rgba(0,120,0,.95), rgba(0,180,0,.95));
  border-color: rgba(0,255,120,.65);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.6),
    0 0 14px rgba(0,255,120,.45);
}

/* Hover elegante */
.badge:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.85);
  filter: saturate(1.08);
}

/* ===================== SWIPER ===================== */

.swiper{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 14px;
  overflow:hidden;

  background: rgba(0, 44, 0, 0.85);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 20px rgba(0,0,0,.8);
}

.swiper-slide a{ display:block; }

.swiper-slide img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  cursor: zoom-in;
  filter: saturate(1.02) contrast(1.02);
}

.swiper-button-next,
.swiper-button-prev{
  color: var(--demo-green);
  text-shadow: 0 0 10px rgba(0,200,83,.5);
}

/* Paginação */
.swiper-pagination-bullet{
  background: rgba(0, 200, 83, .5) !important;
  opacity: .75;
}
.swiper-pagination-bullet-active{
  background: rgba(0, 255, 100, .95) !important;
  opacity: 1;
  box-shadow: 0 0 10px rgba(0,255,100,.6);
}

/* Hint inferior (centralizado) */
.demo-hint{
  border-radius: 10px;
  padding: 6px 10px;
  margin: 10px auto 0 auto;
  max-width: 900px;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}

.demo-hint kbd{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 800;
}

/* ===================== LIGHTBOX (MODERNO + ACESSÍVEL) ===================== */

.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 18px;
}

.lightbox-overlay.active{
  display:flex;
  animation: demoFadeIn .18s ease;
}

@keyframes demoFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.lightbox-content{
  max-width: min(1100px, 94vw);
  width: 100%;
}

.lightbox-img{
  width: 100%;
  height: auto;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  cursor: zoom-out;
}

.lightbox-caption{
  margin-top: 10px;
  color: rgba(255,255,255,.92);
  text-align:center;
  font-weight: 800;
}

/* ===================== RESPONSIVO ===================== */

@media (max-width: 768px){
  .demo-slider{
    padding: 12px;
    border-radius: 18px;
  }

  .demo-header{
    padding: 12px;
    border-radius: 14px;
  }

  .demo-title{
    font-size: 18px;
  }

  .badge{
    font-size: 13px;
    padding: 7px 12px;
  }
}

.demo-title{
  text-align: center;
  line-height: 1.3;
}

.demo-title .fs-icon{
  height: 30px;          /* ajuste fino */
  width: auto;
  vertical-align: middle;
  margin: 0 0px;
  position: relative;
  top: -5px;
}

/* Mobile */
@media (max-width: 768px){
  .demo-title .fs-icon{
    height: 20px;
  }
}