/* =========================================================
   HERO / CAROUSEL — BANCO SOL (FINAL ESTÁVEL)
   ========================================================= */

:root {
  --header-height: 132px; /* desktop */
}

/* O CAROUSEL COMEÇA DEPOIS DO HEADER */
#heroSlider {
  margin-top: var(--header-height);
}

/* =========================================================
   HERO BASE (ALTURA ESTÁVEL)
   ========================================================= */
.hero {
  height: calc(70vh - var(--header-height));
  min-height: 420px;   /* nunca colapsa */
  max-height: 820px;   /* nunca fica gigante */

  display: flex;
  align-items: center;
  position: relative;

  background-size: cover;
  background-position: center;
}

/* HERO COMPACTO (ex: 24 anos) */
.hero-compact {
  height: calc(55vh - var(--header-height));
  min-height: 340px;
  max-height: 560px;
}

/* =========================================================
   VARIAÇÕES
   ========================================================= */
.hero-dark {
  color: #fff;
}

.hero-light {
  background: #fff;
  color: #111;
}


/* =====================================================
   HERO OVERLAY — AMARELO BANCO SOL (OFICIAL)
===================================================== */

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 0, 0.55) 0%,   /* amarelo forte à esquerda */
    rgba(255, 210, 0, 0.35) 35%,
    rgba(255, 210, 0, 0.15) 60%,
    rgba(255, 210, 0, 0.05) 80%,
    rgba(255, 210, 0, 0) 100%
  );
}

/* =========================================================
   CONTEÚDO
   ========================================================= */
.hero-content {
  position: relative;
  max-width: 560px;
}

.hero-content h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   HERO 24 ANOS
   ========================================================= */
.hero-24 span {
  font-size: 1.4em;
  color: #f2c300;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 991.98px) {
  :root {
    --header-height: 72px;
  }

  .hero {
    height: calc(65vh - var(--header-height));
    min-height: 360px;
    max-height: 640px;
  }

  .hero-compact {
    height: calc(50vh - var(--header-height));
    min-height: 300px;
    max-height: 480px;
  }
}

/* =====================================================
   HERO — BANCO SOL
===================================================== */

.hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

/* overlay amarelo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,210,0,0.65) 0%,
    rgba(255,210,0,0.25) 45%,
    rgba(255,210,0,0.0) 75%
  );
}

/* =====================================================
   COLAR ESTE BLOCO NO FINAL
===================================================== */

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  color: #111;
  font-weight: 700;
}

.hero-content p {
  color: #333;
}
/* =====================================================
   SETAS HERO — ESTILO PREMIUM
===================================================== */

.carousel-control-prev,
.carousel-control-next {
  width: 6%;
  opacity: 0.9;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0,0,0,0.45);
  border-radius: 50%;
  padding: 22px;
  background-size: 60%;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(255,210,0,0.9);
}


/* INDICADORES */

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.carousel-indicators .active {
  background-color: #FFD200;
}
/* =====================================================
   HERO — BANCO SOL (SWIPE + ANIMAÇÃO + PREMIUM)
===================================================== */

.hero-carousel { position: relative; }

.hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Overlay amarelo Banco Sol */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,210,0,0.65) 0%,
    rgba(255,210,0,0.25) 45%,
    rgba(255,210,0,0.0) 75%
  );
}

/* Conteúdo acima do overlay */
.hero-content{
  position:relative;
  z-index:2;
  max-width: 560px;
}

.hero-content h1{
  color:#111;
  font-weight:700;
  line-height:1.15;
}

.hero-content p{
  color:#333;
  margin-top:12px;
}

/* 24 anos */
.hero-24 span{
  font-size: 1.6em;
  font-weight: 800;
}

/* Botões */
.btn-sol{
  background:#FFD200;
  border-color:#FFD200;
  color:#111;
  font-weight:700;
}

.btn-sol:hover{
  background:#e6bd00;
  border-color:#e6bd00;
  color:#111;
}

/* Setas premium */
.carousel-control-prev,
.carousel-control-next{
  width:6%;
  opacity:0.95;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color: rgba(0,0,0,0.45);
  border-radius: 50%;
  padding: 22px;
  background-size: 60%;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
  background-color: rgba(255,210,0,0.95);
}

/* Indicadores */
.carousel-indicators button{
  width:10px;
  height:10px;
  border-radius:50%;
  background-color:#cfcfcf;
}

.carousel-indicators .active{
  background-color:#FFD200;
}

/* =====================================================
   ANIMAÇÃO DO TEXTO (por slide)
===================================================== */
.hero-animate{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

.carousel-item.active .hero-animate{
  opacity:1;
  transform: translateY(0);
}

/* Mobile: mais alto e setas menores */
@media (max-width: 991px){
  .hero{ min-height: 70vh; }
  .carousel-control-prev,
  .carousel-control-next{ width: 14%; }
  .carousel-control-prev-icon,
  .carousel-control-next-icon{ padding: 18px; }
}
/* =====================================================
   HERO — MOBILE FIX (menos altura + setas fora do texto)
===================================================== */
@media (max-width: 991px){

  /* 1) Menos altura, menos “vazio” */
  .hero{
    min-height: 52vh;          /* antes 70vh */
    padding: 26px 0;
    align-items: center;
  }

  /* 2) Conteúdo com largura e espaçamento melhor */
  .hero-content{
    max-width: 92%;
  }

  .hero-content h1{
    font-size: 1.9rem;
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .hero-content p{
    font-size: 1.05rem;
    line-height: 1.45;
    margin: 0 0 16px 0;
  }

  /* 3) Botões mais “mobile friendly” */
  .hero-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .hero-actions .btn{
    width: auto;
    padding: 12px 18px;
    border-radius: 14px;
  }

  /* 4) Setas: mais pequenas e bem nas laterais */
  .carousel-control-prev,
  .carousel-control-next{
    width: 14%;
    opacity: 1;
  }

  .carousel-control-prev{ justify-content: flex-start; }
  .carousel-control-next{ justify-content: flex-end; }

  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    background-color: rgba(17,17,17,0.35);
    border-radius: 999px;
    padding: 14px;            /* antes 18/22 */
    background-size: 58%;
  }

  /* empurra as setas um pouco para baixo para não tocar no texto */
  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    margin-top: 110px;
  }

  /* 5) Indicadores: subir um pouco e dar contraste */
  .carousel-indicators{
    margin-bottom: 10px;      /* sobe os dots */
  }

  .carousel-indicators button{
    width: 9px;
    height: 9px;
    opacity: .9;
  }
}

/* =====================================================
   PATCH — HERO VOLTOU A APARECER (COLAR NO FIM)
===================================================== */

/* Se já estás a usar padding-top no body, isto evita empurrar o hero para baixo demais */
#heroSlider{
  margin-top: 0 !important;
}

/* Garante altura no desktop */
.hero{
  min-height: 65vh !important;
}

/* Evita o carousel colapsar */
#heroSlider .carousel-inner,
#heroSlider .carousel-item{
  min-height: 65vh;
}

/* Mobile mantém compacto */
@media (max-width: 991.98px){
  #heroSlider .carousel-inner,
  #heroSlider .carousel-item{
    min-height: 52vh;
  }
}
/* =====================================================
   HERO — MOBILE TUNING (botões na mesma linha + texto mais abaixo)
===================================================== */
@media (max-width: 991.98px){

  /* 1) Descer o bloco do texto */
  .hero{
    align-items: flex-start !important;
    padding-top: 44px !important;  /* aumenta/desce o conteúdo */
    padding-bottom: 22px !important;
  }

  /* 2) Botões pequenos na mesma linha */
  .hero-actions{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .hero-actions .btn{
    width: auto !important;
    max-width: none !important;
    padding: 10px 12px !important;     /* mais pequeno */
    font-size: 0.95rem !important;      /* mais pequeno */
    border-radius: 14px !important;
    white-space: nowrap;
  }

  /* 3) O botão outline estava muito “grande” visualmente */
  .hero-actions .btn-outline-light{
    background: rgba(255,255,255,0.45) !important;
    border-color: rgba(17,17,17,0.25) !important;
  }
}
/* =====================================================
   HERO — MOBILE FINAL (texto mais em baixo + menos vazio)
===================================================== */
@media (max-width: 991.98px){

  /* altura e alinhamento correctos */
  .hero{
    min-height: 50vh !important;
    padding: 18px 0 !important;
    align-items: center !important;     /* volta ao centro */
  }

  /* desce o conteúdo de forma controlada */
  .hero-content{
    margin-top: 22px !important;        /* ajusta aqui: 16–30 */
  }

  /* botões pequenos na mesma linha */
  .hero-actions{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .hero-actions .btn{
    width: auto !important;
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
    border-radius: 14px !important;
    white-space: nowrap;
  }

  /* setas centradas verticalmente */
  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    margin-top: 0 !important;           /* remove aquele empurrão */
  }

  /* dots um pouco acima do fundo */
  .carousel-indicators{
    margin-bottom: 12px !important;
  }
}
/* =====================================================
   HERO — REMOVER SETAS NO TELEMÓVEL
===================================================== */
@media (max-width: 991.98px){

  .carousel-control-prev,
  .carousel-control-next{
    display: none !important;
  }

}

/* =====================================================
   BOTÃO "CONHECER SERVIÇOS" — TEXTO PRETO + BORDA AMARELA
===================================================== */

.hero-actions .btn-outline-light{
  color: #111 !important;                /* texto preto */
  border: 2px solid #FFD200 !important; /* borda amarela */
  background: transparent !important;
  font-weight: 700;
}

/* hover premium */
.hero-actions .btn-outline-light:hover{
  background: #FFD200 !important;
  color: #111 !important;
  border-color: #FFD200 !important;
}

/* mobile — garantir legibilidade */
@media (max-width: 991.98px){

  .hero-actions .btn-outline-light{
    color: #111 !important;
    border: 2px solid #FFD200 !important;
    background: rgba(255,255,255,0.25) !important;
  }

}
/* =====================================================
   HERO — DESKTOP: BAIXAR MAIS O CONTEÚDO
===================================================== */
@media (min-width: 992px){

  .hero-content{
    margin-top: 70px;
  }

}

.hero-bg{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}