/* ==========================
   HERO ESTILO BRISNET (LEGADO)
   - Esse bloco é da versão antiga com texto + imagem lado a lado.
   - Pode deixar ou remover depois, não afeta o novo slider.
   ========================== */

.hero--brisnet {
  background: #001b3d;           /* azulão de fundo */
  color: #ffffff;
  padding: 3.5rem 0 3rem;
}

.hero-brisnet-bg {
  position: relative;
}

.hero-brisnet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
}

/* Texto da esquerda */

.hero-brisnet-copy {
  max-width: 520px;
}

.hero-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-speed {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.hero-speed-number {
  font-size: clamp(3.5rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: #ffd53b; /* amarelo oferta */
}

.hero-speed-unit {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: lowercase;
}

.hero-wifi {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.5rem;
}

.hero-price-box {
  background: #ffd53b;
  color: #1c2340;
  padding: 1rem 1.4rem;
  border-radius: 0.9rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.hero-price-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.hero-price-line {
  margin: 0;
  font-size: 0.95rem;
}

.hero-price-value {
  font-size: 1.4rem;
  font-weight: 800;
}

.hero-price-sub {
  font-size: 0.8rem;
}

.hero-cta {
  margin-bottom: 1rem;
}

.hero-obs {
  font-size: 0.75rem;
  opacity: 0.8;
  max-width: 380px;
}

/* Imagem da direita */

.hero-brisnet-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
}

/* Responsivo */

@media (max-width: 900px) {
  .hero-brisnet-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-brisnet-art {
    order: -1; /* imagem primeiro no mobile, se quiser inverter tira isso */
  }

  .hero--brisnet {
    padding-top: 2.5rem;
  }
}

@media (max-width: 600px) {
  .hero-speed-number {
    font-size: 3rem;
  }
}


/* =========================================
   HERO SLIDER — BANNER GIGANTE (BRISNET STYLE)
   - Usado na home com 3 slides (slide1, slide2, slide3)
   ========================================= */

.hero--slider {
  padding: 0;
  margin: 0;
  background: #001b3d; /* cor de fundo por trás do banner */
}

.hero-slider-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Swiper ocupa 100% da largura e deixa o conteúdo se ajustar */
.hero--slider .swiper {
  width: 100%;
  height: auto;
  position: relative;
}

/* Garantir que o wrapper e slides não recebam altura fixa de outro CSS */
.hero--slider .swiper-wrapper,
.hero--slider .swiper-slide {
  width: 100%;
  height: auto !important;
}

/* Cada slide em bloco */
.hero--slider .swiper-slide {
  display: block;
}

/* Imagens dos banners — NÃO vamos cortar */
.hero--slider .swiper-slide img {
  width: 100%;
  height: auto;          /* evita corte */
  display: block;
  border-radius: 0;      /* coloca 16px se quiser cantos arredondados */
}

/* Paginação e setas */
.hero-slider-pagination {
  bottom: 18px !important;
}

.hero-slider-prev,
.hero-slider-next {
  color: #ffffff;
}

/* Ajustes opcionais em mobile */
@media (max-width: 768px) {
  .hero--slider .swiper-slide img {
    /* Se quiser limitar a altura no celular, pode usar:
       height: 260px;
       object-fit: cover;
    */
  }
}