@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

    :root {
      --accent: #3665e4;
      --accent2:rgb(15, 51, 151);
      --bg: #121212
    }

    * {
      box-sizing: border-box
    }

    body {
      font-family: Poppins, sans-serif;
      background: var(--bg);
      color: #eee;
      margin: 0;
      scroll-behavior: smooth
    }

    a {
      text-decoration: none !important
    }

    /* ========== NAVBAR ================================================= */
    .main-nav {
      backdrop-filter: blur(6px);
      background: #fff;
      border-radius: 2.5rem;
      padding: .55rem 1.4rem;
      box-shadow: 0 6px 16px rgb(0 0 0/.10);
      transition: .3s
    }

    .main-nav a {
      color: #000;
      font-weight: 600;
      font-size: .95rem;
      margin: 0 .8rem
    }

    .btn-cta {
      background: var(--accent);
      border: none;
      border-radius: 2rem;
      color: #fff;
      padding: .55rem 1.6rem;
      font-weight: 600
    }

    .btn-cta:hover {
      filter: brightness(1.12)
    }

    .nav-hidden .main-nav {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-24px) scale(.95)
    }

    @media(max-width:575.98px) {
      .main-nav {
        padding: .55rem 1rem
      }

      .main-nav a {
        font-size: .83rem;
        margin: 0 .5rem
      }
    }

    /* ========== SLIDER / HERO ========================================= */
    .hero-swiper {
      height: 100vh;
      width: 100%
    }

    .hero-swiper .swiper-slide {
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: center;
      animation: kenburns 14s ease-in-out infinite alternate
    }

    @keyframes kenburns {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.08)
      }
    }

    .hero-swiper .swiper-slide::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .35);
      pointer-events: none
    }

    .slide-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 680px;
      width: 90%;
      text-align: center;
      color: #fff;
      z-index: 2
    }

    .slide-overlay h1 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.05;
      margin: 0;
      background: linear-gradient(90deg, #fff 0%, #e8e8e8 50%, #fff 100%);
      -webkit-background-clip: text;
      color: transparent;
      background-size: 200%;
      animation: shine 6s linear infinite 1s
    }

    @keyframes shine {
      0% {
        background-position: 200%
      }

      100% {
        background-position: -200%
      }
    }

    @media(max-width:575.98px) {
      .slide-overlay h1 {
        font-size: 2.6rem
      }
    }

    .btn-anim {
      border: none;
      border-radius: 3rem;
      padding: 1rem 2.7rem;
      font-weight: 700;
      background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent));
      background-size: 220%;
      color: #fff;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
      transition: .4s
    }

    .btn-anim:hover {
      background-position: 120%;
      transform: translateY(-3px)
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.05)
      }
    }

    .anim-pulse {
      animation: pulse 3s infinite
    }

    header {
      margin-bottom: 100px
    }

    /* ========== DESTAQUE, CLOSE FRIENDS, etc. (idem versões anteriores) */
    .featured-wrapper {
      background: #1e1e1e;
      border-radius: 2rem;
      padding: 3.5rem 4rem;
      border: 2px solid var(--accent)
    }

    .featured-img {
      border-radius: 1.5rem;
      overflow: hidden
    }

    #descText {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: .3s
    }

    #descText.expanded {
      -webkit-line-clamp: unset
    }

    .toggle-link {
      color: var(--accent);
      cursor: pointer
    }

    .toggle-link:hover {
      opacity: .85
    }

    .btn-participar {
      background: var(--accent);
      border: none;
      border-radius: 3rem;
      color: #fff;
      padding: .55rem 1.6rem;
      font-weight: 600
    }

    .btn-participar:hover {
      filter: brightness(1.1)
    }

    /* CLOSE FRIENDS card */
    .cf-card-new {
      position: relative;
      overflow: hidden;
      border-radius: 2rem;
      min-height: 260px;
      color: #fff;
      background: radial-gradient(circle at 30% 30%, #FF8147 0%, #3665e4 60%)
    }

    .badge-exclusive {
      background: #1e1e1e;
      color: var(--accent);
      padding: .4rem 1rem;
      border-radius: 2rem;
      font-size: .8rem;
      font-weight: 700
    }

    .cf-photo-new {
      position: absolute;
      right: -60px;
      top: 50%;
      transform: translateY(-50%);
      height: 130%;
      pointer-events: none
    }

    .cf-photo-new img {
      height: 100%;
      width: auto;
      object-fit: contain;
      display: block
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: .35
    }

    .orb-1 {
      width: 120px;
      height: 120px;
      top: -30px;
      left: -30px;
      background: #fff
    }

    .orb-2 {
      width: 180px;
      height: 180px;
      bottom: -60px;
      left: 20%;
      background: #ffd8c7
    }

    .orb-3 {
      width: 100px;
      height: 100px;
      bottom: 10%;
      right: 30%;
      background: #fff
    }

    @media(max-width:575.98px) {
      .cf-photo-new {
        display: none
      }
    }

    /* cards de rifas, passo-a-passo, regras, etc. — iguais às versões anteriores */
    .card-raffle {
      background: #1e1e1e;
      border: none;
      border-radius: 1rem;
      overflow: hidden;
      transition: .3s
    }

    .card-raffle:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, .35)
    }

    .card-raffle img {
      width: 100%;
      height: 200px;
      object-fit: cover
    }

    .status-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      padding: .35rem .9rem;
      border-radius: .7rem;
      font-size: .75rem
    }

    .step-card {
      background: #1e1e1e;
      border-radius: 1rem;
      transition: .3s
    }

    .step-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .4)
    }

    .icon-circle {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-inline: auto;
      background: var(--accent);
      color: #fff;
      font-size: 1.8rem
    }

    .progress-wrapper {
      height: 28px
    }

    .progress {
      border-radius: 1.5rem;
      overflow: hidden
    }

    .progress-label {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-weight: 600
    }

    .rules-box {
      background: #1e1e1e;
      border-radius: 1rem;
      padding: 2rem;
      margin-top: 3rem
    }

    .prize-card {
      background: #1e1e1e;
      border-radius: 1rem;
      transition: .3s
    }

    .prize-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .4)
    }

    .whats-box {
      background: #25D36615;
      border: 2px solid #25D366;
      color: #fff
    }

    .whats-box h2 i {
      color: #25D366
    }
    .product-card .ribbon {
  position: absolute;
  top: 12px;
  left: -40px;
  width: 160px;
  text-align: center;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 0.75rem;
  padding: 4px 0;
  z-index: 10;
}
/* Hover suave na imagem */
.product-card:hover img.card-img-top {
  transform: scale(1.05);
}
/* Levanta card ao passar o mouse */
.product-card {
  transition: transform .2s, box-shadow .2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}


  .video-widget {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 360px;
      border-radius: 8px;
      overflow: hidden;
      background-color: #3665e4;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      font-family: sans-serif;
      color: #fff;
      /* altura inicial = só o header (≈40px) */
      height: 40px;
      transition: height 0.3s ease;
      z-index: 10000;
    }

    /* Quando expandido: header + vídeo (180px) */
    .video-widget.expanded {
      height: calc(40px + 180px);
    }

    /* === Header com título e toggle === */
    .video-widget .vw-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 0 12px;
      background: rgba(0,0,0,0.15);
    }
    .video-widget .vw-title {
      font-size: 14px;
      font-weight: bold;
    }
    .video-widget .vw-toggle {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
    }

    /* === Área do vídeo === */
    .video-widget .vw-content {
      width: 100%;
      height: 0;
      transition: height 0.3s ease;
      background: #000;
    }
    .video-widget.expanded .vw-content {
      height: 180px; /* mantem 16:9 dentro de 360px Largura */
    }
    .video-widget .vw-content iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }