/* =========================
   HERO
   ========================= */

:root{
  --gutter: 16px;
  --brand: #F2C14E;
  --bg: #0E2239;
  --text: #ffffff;
  --muted: rgba(255,255,255,.86);
}

/* Controla os painéis de conteúdo do HERO (1 por vez) */
.hero-panel{ display:none; }
.hero-panel.is-active{ display:block; }

/* === DESKTOP / TABLET === */
.hero{
  position:relative;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
  padding-top: var(--page-sticky-offset, 120px);
  padding-bottom: 0;
  height: 630px;              /* mantém seu layout desktop */
  z-index: 100;
}

/* No desktop, a imagem mobile do painel fica escondida */
.hero-visual{display:none;}

/* SLIDES (desktop/tablet) */
.hero-slider{ position:absolute; inset:0; z-index:1; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transform:scale(1.02);
  transition: opacity .6s ease, transform .8s ease;
}
.hero-slide.is-active{ opacity:1; transform:scale(1); }

/* CONTEÚDO FIXO */
.hero-content{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 50px var(--gutter) 70px;
  z-index:50;
}
.hero-content::before{ content:""; flex:0 0 50%; height:100%; pointer-events:none; }
.hero-box{ flex:1 1 50%; max-width:560px; margin-right:5%; text-align:left; }

.hero-title{ margin:0 0 12px; font-weight:800; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.1; }
.hero-title .gold{ color:var(--brand); }
.hero-sub{ margin:0 0 26px; color:var(--muted); font-size:clamp(1rem, 1.5vw, 1.15rem); line-height:1.5; }

.btn-cta{
  display:inline-block;
  background:var(--brand);
  color:#0b1325;
  font-weight:800;
  padding:16px 20px;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:.3px;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  border:0;
  transition:filter .2s ease;
}
.btn-cta:hover{ filter:brightness(1.30); }

/* SETAS */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:72px; height:72px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,16,32,.35); backdrop-filter:blur(6px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  z-index:100;
}
.nav-prev{ left:16px; }
.nav-next{ right:16px; }

/* DOTS (desktop oculto) */
.hero-dots-container{ display:none; justify-content:center; gap:10px; margin-top:30px; }
.hero-dot{ width:10px; height:10px; background:rgba(255,255,255,.4); border-radius:50%; transition:background .3s ease, width .3s ease, height .3s ease; }
.hero-dot.is-active{ background:var(--brand); width:12px; height:12px; }

/* Tablet refinado */
@media (max-width:1199px){
  .hero-content::before{ flex:0 0 55%; }
  .hero-box{ flex:1 1 45%; }
  .nav-arrow{ width:60px; height:60px; }
}

/* === MOBILE (≤767px) ===
   - Grid estável (zero salto)
   - Sem “banner atrás”
   - Dots visíveis
   - Swipe no JS
*/
@media (max-width:767px){

  /* 1) Some camada de slides e setas no mobile (evita banner "atrás") */
  .hero-slider{ display:none !important; }
  .nav-arrow{ display:none !important; }

  /* 2) Área do hero estável (sem pulo) */
  .hero{
    height:auto;
    min-height: 780px;
    padding-top: var(--page-sticky-offset, 92px);
    padding-bottom: 20px;
    background-color:#14213D;
  }

  /* 3) Conteúdo em grid (1 coluna) */
  .hero-content{
    position:relative;
    display:block;
    padding:0;
  }
  #hero .container { padding-inline:0; }

  /* ⚠️ Painéis: só o ativo aparece */
  .hero-panel{ display:none !important; }
  .hero-panel.is-active{
    display:grid !important;
    width:100%;
    max-width:600px;
    margin:0 auto;
    text-align:center;
    padding-inline:var(--gutter);
    grid-template-columns:1fr;
    grid-template-rows: auto /*h1*/ auto /*banner*/ auto /*texto*/ auto /*cta*/ auto /*dots*/;
    row-gap:16px;
  }


  /* 4) Banner mobile (visível só no mobile; 1 por painel) */
  .hero-visual{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:#14213D;
    display: block;
  }
  .hero-image-mobile{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
    object-fit:contain;
    border-radius:0;
  }

  /* 5) Título fixo ≈3 linhas (zero CLS) */
  .hero-title{
    margin:24px 0 4px;
    font-size:1.8rem;
    line-height:1.1;
    min-height:3.4em;      /* reserva 3 linhas */
    text-wrap:balance;
    position: relative;
    top: 30px;
  }

  /* 6) Texto fixo: clamp + altura reservada (zero CLS) */
  .hero-sub{
    margin:0;
    font-size:1rem;
    line-height:1.5;
    display:-webkit-box;
    position:relative;
    top: -20px;
    min-height: calc(1.5em * 5);
  }

  /* 7) CTA consistente */
  .btn-cta{
    width:100%;
    max-width:380px;
    justify-self:center;
    padding:20px;
  }

  /* 8) Dots visíveis */
  .hero-dots-container{ display:flex; margin-top:6px; }
}

/* Telas muito pequenas */
@media (max-width:400px){
  .hero-title{ font-size:1.6rem; }
}

/* =========================
   BARRA DE VANTAGENS (ADV)
   ========================= */

/* ——— DESKTOP/TABLET ——— */
.adv-overlay{
  position: relative;          /* no fluxo */
  z-index: 900;                /* acima do conteúdo seguinte */
  margin-top: -60px;           /* puxa sobre o final do hero */
  pointer-events: auto;
}

.adv-grid-inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.adv-item{
  padding: 20px 15px;
  text-align: center;
  position: relative;
}

.adv-item + .adv-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(0,0,0,.1);
}

.adv-number{
  display: block;
  color: var(--brand);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 6px;
}

.adv-text{
  display: block;
  color: #243047;
  font-size: 15px;
  line-height: 1.3;
}

/* ——— MOBILE (≤767px) ——— */
@media (max-width: 767px){
  .adv-overlay{
    position: relative;
    z-index: 3;
    margin-top: 12px; 
    margin-bottom: 40px;         /* visível no mobile */
    padding: 0 16px;
  }

  .adv-grid-inner{
    display: flex;               /* carrossel lateral simples */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    background: transparent;
    box-shadow: none;
  }

  .adv-item{
    flex: 0 0 80%;
    min-width: 260px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }

  .adv-item + .adv-item::before{ display: none; }
}