/* ============================================================
   QGP — Quem Ganha com o PSQ
   ============================================================ */

/* ---- HERO PANEL ---- */
.qgp-hero {
    padding: 50px 0 40px;
}

.qgp-hero-panel {
    background: #66589e;
    border-radius: 24px;
    padding: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 40px;
}

.qgp-hero-text-col {
    flex: 1;
    min-width: 0;
}

.qgp-hero-logo-col {
    flex-shrink: 0;
}

.qgp-hero-logo {
    height: 257px;
    width: auto;
    display: block;
}

.qgp-hero-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #b2c3dd;
    letter-spacing: 0.52px;
    margin-bottom: 16px;
}

.qgp-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 16px;
}

.qgp-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    max-width: 880px;
}

.qgp-hero-desc p {
    margin-bottom: 20px;
}

.qgp-hero-desc p:last-child {
    margin-bottom: 0;
}

/* ---- SECTION HEADER ---- */
.qgp-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.qgp-section-title-wrap::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-color: #66589e;
    border-radius: 50%;
    position: relative;
    top: -10px;
    flex-shrink: 0;
}

.qgp-section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #58536f;
    letter-spacing: -0.32px;
    margin: 0;
    line-height: 1.2;
}

.qgp-section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #58536f;
    opacity: 0.85;
    max-width: 630px;
    margin: 0 0 30px;
}

/* ---- STATS ---- */
.qgp-stats {
    padding: 50px 0 40px;
}

.qgp-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.qgp-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 0 7px rgba(0,0,0,0.15);
    width: calc(25% - 15px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.qgp-stat-badge {
    width: 48px;
    height: 48px;
    background: #66589e;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
}

.qgp-stat-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #58536f;
    margin: 0;
    line-height: 1.2;
}

.qgp-stat-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #707070;
    margin: 0;
}

/* ---- ELOS ---- */
.qgp-elos {
    padding: 40px 0 70px;
}

.qgp-elos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.qgp-elo-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 0 7px rgba(0,0,0,0.15);
    width: calc(33.333% - 14px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.qgp-elo-badge-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qgp-elo-badge {
    width: 48px;
    height: 48px;
    background: #66589e;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
}

.qgp-elo-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.qgp-elo-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #58536f;
    letter-spacing: 0.32px;
    margin: 0;
    flex: 1;
}

.qgp-elo-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: #707070;
    margin: 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1200px) {
    .qgp-stat-card { width: calc(50% - 10px); }
    .qgp-elo-card  { width: calc(50% - 10px); }
}

@media (max-width: 991px) {
    .qgp-hero-panel  { flex-direction: column; align-items: flex-start; }
    .qgp-hero-logo   { height: 160px; }
}

@media (max-width: 768px) {
    .qgp-hero-panel  { padding: 24px 20px; }
    .qgp-hero-title  { font-size: 22px; }
    .qgp-hero-desc   { font-size: 15px; }
    .qgp-section-title { font-size: 22px; }
    .qgp-section-subtitle { font-size: 16px; }
    .qgp-stat-card   { width: 100%; }
    .qgp-elo-card    { width: 100%; }
    .qgp-hero        { padding: 30px 0 24px; }
    .qgp-stats       { padding: 30px 0 24px; }
    .qgp-elos        { padding: 24px 0 40px; }
}
/* =============================================================
   QUEM GANHA COM O PSQ
   ============================================================= */


/* MAIN WRAPPER */
#qgp-main {
  padding-bottom: 80px;
}

/* PAINT DECORATIONS */
.qgp-paint-left {
  position: absolute;
  left: -74px;
  top: 715px;
  pointer-events: none;
  transform: scaleX(-1);
  z-index: 0;
}
.qgp-paint-right {
  position: absolute;
  right: -100px;
  top: 76px;
  pointer-events: none;
  transform: rotate(180deg);
  z-index: 0;
}

/* BANNER HERO */
.qgp-banner-wrap {
  position: relative;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  height: 444px;
}
.qgp-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qgp-banner-overlay {
  position: absolute;
  left: 38px;
  top: 141px;
  color: #fff;
}
.qgp-banner-title {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  max-width: 392px;
}
.qgp-banner-desc {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  letter-spacing: -0.32px;
  max-width: 460px;
  margin: 0;
}
.qgp-banner-desc p {
  margin: 0;
}

/* CARDS SECTION */
.qgp-cards-section {
  padding-top: 68px; /* espaço para o badge sobrepor acima do card */
}

.qgp-cards-row--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.qgp-cards-row--2 {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
}
.qgp-cards-row--2 .qgp-card-wrap {
  width: 412px;
  flex: 0 0 412px;
}

/* CARD */
.qgp-card-wrap {
  position: relative;
  padding-top: 41px;
}
.qgp-card-body {
  background: #66589e;
  border-radius: 20px;
  height: 356px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 36px 30px;
}
.qgp-card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 299px;
  height: 86px;
  background: #7e71b3;
  border: 2px solid #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1;
  padding: 0 16px;
}
.qgp-badge-icon {
  flex-shrink: 0;
}
.qgp-badge-label {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.32px;
  line-height: 1.2;
  text-align: center;
}
.qgp-card-list {
  list-style: disc;
  padding-left: 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.32px;
  text-align: left;
  margin: 0;
}
.qgp-card-list li + li {
  margin-top: 12px;
}

/* RESPONSIVO */
@media (max-width: 991px) {
  .qgp-banner-wrap {
    height: 280px;
  }
  .qgp-banner-overlay {
    left: 20px;
    top: 80px;
  }
  .qgp-banner-title {
    font-size: 22px;
    max-width: 90%;
  }
  .qgp-banner-desc {
    font-size: 14px;
    max-width: 80%;
  }
  .qgp-cards-row--3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qgp-cards-row--2 {
    flex-direction: column;
    align-items: center;
  }
  .qgp-cards-row--2 .qgp-card-wrap {
    width: 100%;
    flex: none;
  }
  .qgp-card-badge {
    left: 50%;
  }
}

@media (max-width: 575px) {
  .qgp-banner-wrap {
    height: 240px;
  }
  .qgp-banner-overlay {
    left: 16px;
    top: 60px;
  }
  .qgp-banner-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .qgp-banner-desc {
    font-size: 13px;
  }
  .qgp-card-body {
    height: auto;
    min-height: 280px;
    padding: 55px 24px 24px;
  }
  .qgp-card-list {
    font-size: 15px;
  }
  .qgp-badge-label {
    font-size: 15px;
  }
}

#ds-main ds-text-icon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

/* =============================================
   RESPONSIVE FIX — 1360x768
   Adicionado em: 2026-06-19
   NÃO modifique regras fora deste bloco
   ============================================= */

@media screen and (max-width: 1360px) and (min-width: 993px) {

  /* ── HOME: Seção Award ──────────────────────────────────────────────────
     Padding-right de 205px comprime o texto a ~365px dentro da col-md-6
     de 570px (Bootstrap xl, container 1140px). Reduzido para 80px para
     manter o alinhamento decorativo sem esmagar o conteúdo. */
  #award .content {
    padding: 60px 80px 0 0;
  }

  /* ── QUALIDADE: Coluna de título ────────────────────────────────────────
     padding-top de 183px cria área vazia excessiva no viewport de 768px.
     A regra de 992px já cuida dos breakpoints menores (40px). */
  #qualidade-content .qf-title-col {
    padding-top: 80px;
  }

  /* ── QUALIDADE: Caixa de texto ──────────────────────────────────────────
     min-height de 810px é desproporcional ao viewport de 768px nesta faixa;
     nenhum breakpoint cobre o intervalo 993px–1400px. */
  #qualidade-content .qf-text-box {
    min-height: auto;
  }

  /* ── ABRAFATI SHOW: Fundo da intro ─────────────────────────────────────
     min-height de 779px ultrapassa os ~700px de viewport útil em 768px de
     altura de tela. Removido para que o elemento cresça conforme conteúdo. */
  #as-intro .as-intro-bg {
    min-height: auto;
  }

  /* ── MANUAL TÉCNICO DE TINTAS: Hero ────────────────────────────────────
     min-height de 1042px sem breakpoint entre 992px e 1400px: a seção fica
     ~35% mais alta que o viewport de 768px nesta faixa específica. */
  #mtn-hero {
    min-height: 700px;
  }

  /* ── A ABRAFATI: Coluna destaque ────────────────────────────────────────
     O inline <style> em page-a-abrafati.php define .aab-col-destaque com
     padding-top: 226px — em 768px de viewport isso empurra o texto para além
     da dobra. O seletor composto (#aab-about .aab-col-destaque) tem
     especificidade (1,1,0) vs (0,1,0) do inline <style>, garantindo a
     sobreposição sem !important. */
  #aab-about .aab-col-destaque {
    padding-top: 100px;
  }

}