/* Additions for UN PASS 2026 refactor (safe overrides). Loaded after blue.css + inline-extracted.css */

:root{
  --unpass-card-bg: rgba(255,255,255,0.05);
  --unpass-card-border: rgba(255,255,255,0.10);
}

.unpass-guarantee-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
}

.unpass-guarantee-card{
  background: var(--unpass-card-bg);
  border:1px solid var(--unpass-card-border);
  border-radius:16px;
  padding:20px 18px;
}

.unpass-guarantee-card__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#00C3FF;
  background: rgba(0,195,255,0.08);
  border:1px solid rgba(0,195,255,0.18);
  margin-bottom:12px;
}

.unpass-guarantee-card--gold .unpass-guarantee-card__icon{
  color:#FFD700;
  background: rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.18);
}

.unpass-guarantee-card__title{
  font-size:1.25rem;
  font-weight:900;
  line-height:1.25;
  margin:0 0 10px 0;
}

.unpass-guarantee-card__text{
  color:#c9d2de;
  margin:0 0 12px 0;
}

.unpass-guarantee-card__bullets{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#e8eef8;
}

.unpass-guarantee-card__bullets li{
  position:relative;
  padding-left:18px;
  line-height:1.35;
  font-size:0.95rem;
}

.unpass-guarantee-card__bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#00ED7B;
}

@media (min-width: 992px){
  .unpass-guarantee-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Garantias: no mobile, ícone maior e central */
@media (max-width: 991px){
  .unpass-guarantee-card__icon{
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin: 0 auto 14px auto;
  }
  .unpass-guarantee-card__icon svg{
    width: 30px;
    height: 30px;
  }
  .unpass-guarantee-card{
    text-align: center;
  }
  .unpass-guarantee-card__bullets{
    align-items: center;
  }
  .unpass-guarantee-card__bullets li{
    text-align: left;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }


  .pre-offer-section .headline-group{
        margin-bottom: 0rem;
  }

  .cta-main-offer { 
    width: 100% !important; 
    margin-bottom: 0rem !important;
    padding: 20px !important;
    line-height: 110% !important ;
        font-size: 1.1rem !important;
    
   }

}

/* ======================================================
   Utilitários: Desktop vs Mobile (o style.css não é carregado)
   ====================================================== */
.only-desktop { display: block !important; }
.only-mobile  { display: none !important; }
@media (max-width: 991px) {
  .only-desktop { display: none !important; }
  .only-mobile  { display: block !important; }
}

/* ======================================================
   Slider interno dos cursos (Swiper)
   - Centralizar imagem ativa
   - Sem opacidade no slide ativo
   - Setinhas esquerda/direita
   ====================================================== */
.course-internal-slider-section{ position: relative; }

/* garante centralização vertical/visual */
.internal-course-slider .swiper-wrapper{
  align-items: center !important;
}
.internal-course-slider .swiper-slide{
  display:flex;
  justify-content:center;
  align-items:center;
  opacity: 0.55;
  transition: opacity .2s ease, transform .2s ease;
}
.internal-course-slider .swiper-slide img{
  display:block;
  width:100%;
  height:auto;
  opacity:1 !important;
  filter:none !important;
}
.internal-course-slider .swiper-slide-active{
  opacity: 1 !important;
  transform: scale(1.02);
}

/* Mobile: 1 slide por vez (não cortar) */
@media (max-width: 767px) {
  .internal-course-slider .swiper-slide{ width: 100% !important; }
  .course-internal-slider-section::before,
  .course-internal-slider-section::after{ display:none !important; } /* remove fade que “corta” */
}

/* Setinhas */
.unpass-internal-prev,
.unpass-internal-next{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color:#fff;
  display:grid;
  place-items:center;
  z-index: 5;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.unpass-internal-prev{ left: 6px; }
.unpass-internal-next{ right: 6px; }
.unpass-internal-prev:hover,
.unpass-internal-next:hover{
  background: rgba(0,0,0,0.55);
}
@media (max-width: 767px){
  .unpass-internal-prev, .unpass-internal-next{ display:none; }
}

/* ======================================================
   GPQ: grids e comparativos mais legíveis no mobile
   ====================================================== */
@media (max-width: 991px){
  .gpq-checklist-grid{
    grid-template-columns: 1fr !important;
  }
  .gpq-method-grid{
    grid-template-columns: 1fr !important;
  }
  /* Toolkit: tirar recuo lateral no mobile */
  .gpq-toolkit-item{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* Comparativo (Banco de Questões vs GPQ)
   - Desktop: ocupa 100% do container
   - Mobile: vira “tabela horizontal” com scroll
*/
.gpq-compare-wrapper{
  overflow: visible;
}
.gpq-compare{
  width: 100%;
  min-width: 0;
}
@media (max-width: 991px){


  .course-title-large{
    font-size: 1.8rem;
  }


  .header-price{
        text-align: center;
  }

  .features-v3-panel .gpq-toolkit-item{
        display: contents;
  }
  .features-v3-panel .gpq-check{
    gap: 20px;
  }

  .features-v3-panel .gpq-toolkit-title{
        margin-bottom: 30px;
  }

  .gpq-compare-wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gpq-compare{
    /* min-width: 720px; */
    
  }
  .gpq-compare__row {
    display: block;
  }
}

/* ======================================================
   Transição visual na seção Vitalícia (fitas de alerta)
   ====================================================== */
.vitalicia-explainer-section{
  position: relative;
  overflow: hidden;
}
.vitalicia-explainer-section::before,
.vitalicia-explainer-section::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  height:84px;
  pointer-events:none;
  z-index: 0;
  opacity: 0.95;
  background: repeating-linear-gradient(
    45deg,
    #ffd300 0 14px,
    #111111 14px 28px
  );
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.vitalicia-explainer-section::before{
  top:-28px;
  transform: rotate(-1.5deg);
}
.vitalicia-explainer-section::after{
  bottom:-28px;
  transform: rotate(1.5deg);
}
.vitalicia-explainer-section .container{ position: relative; z-index: 1; }

/* ======================================================
   Cursos: lista mais visual (estilo “legend item”)
   ====================================================== */
.lista_detalhes_curso{
  list-style: none;
  counter-reset: uncourse;
  padding-left: 0;
  margin: 14px 0 0 0;
  display: grid;
  gap: 10px;
}
.lista_detalhes_curso li{
  counter-increment: uncourse;
  position: relative;
  padding: 14px 14px 14px 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  line-height: 1.35;
}
.lista_detalhes_curso li::before{
  content: counter(uncourse);
  position:absolute;
  left: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #061c10;
  background: #00ED7B;
  box-shadow: 0 8px 20px rgba(0,237,123,0.18);
}
@media (max-width: 991px){
  .lista_detalhes_curso li{ padding-left: 52px; }
}

/* ======================================================
   Botão WhatsApp (verde oficial)
   ====================================================== */
.cta-button.cta-whatsapp{
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #062d16 !important;
  font-weight: 900;
}
.cta-button.cta-whatsapp:hover{
  filter: brightness(0.95);
}

/* Mobile sticky CTA */
.mobile-sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(6,34,65,0.82);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,0.10);
}

.mobile-sticky-cta[hidden]{ display:none; }

.mobile-sticky-cta__inner{ max-width: 540px; margin:0 auto; }

.mobile-sticky-cta__btn{
  display:block;
  text-align:center;
  font-weight:900;
  padding:14px 16px;
  border-radius:12px;
  background: linear-gradient(90deg, #33d9a3 0%, #00ffcc 100%);
  color:#03121f;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.mobile-sticky-cta__btn:focus-visible{
  outline:3px solid rgba(255,255,255,0.85);
  outline-offset:3px;
}

@media (min-width: 981px){
  .mobile-sticky-cta{ display:none !important; }
}
