/**
 * hero.css
 * Header fixo e seção hero da página de vendas do Método 3M.
 * Localização: cursos/online/compreometodo3m/css/hero.css
 */

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  height:          var(--header-h);
  background:      rgba(21, 42, 33, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:   1px solid rgba(191,160,106,0.15);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             22px;
  height:          100%;
}

.header-marca {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  align-items:    center;
}

.header-nome {
  font-family:    var(--fonte-titulo);
  font-size:      17px;
  color:          var(--algodao-claro);
  letter-spacing: 0.5px;
  align-items:    center;
}

.header-cargo {
  font-size:      10px;
  color:          var(--dourado);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  align-items:    center;
}

.header-urgencia {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  min-width:      0;
  text-align:     center;
}

.header-urgencia-texto {
  font-size:      11px;
  font-weight:    800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          var(--dourado-brilho);
}

.header-timer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}

.header-timer span {
  min-width:      56px;
  padding:        7px 9px;
  border:         1px solid rgba(191,160,106,0.28);
  border-radius:  8px;
  background:     rgba(255,255,255,0.05);
  color:          rgba(245,242,236,0.68);
  font-size:      10px;
  line-height:    1.1;
  text-transform: uppercase;
}

.header-timer strong {
  display:     block;
  color:       var(--algodao-claro);
  font-size:   16px;
  line-height: 1;
}

.header-cta {
  flex-shrink:     0;
  padding:         11px 18px;
  border-radius:   8px;
  background:      linear-gradient(135deg, var(--dourado-brilho), var(--dourado));
  color:           var(--verde-escuro);
  font-size:       12px;
  font-weight:     800;
  letter-spacing:  0.6px;
  text-transform:  uppercase;
  text-decoration: none;
  box-shadow:      0 6px 22px rgba(191,160,106,0.30);
}

.header-cta:hover {
  filter: brightness(1.06);
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  padding-top:    calc(var(--header-h) + 56px);
  padding-bottom: 72px;
  background:     rgba(10, 22, 15, 0.70);
}

.hero-layout {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  max-width:      980px;
  margin:         0 auto;
}

/* ── Coluna de texto ── */
.hero-texto {
  max-width: 840px;
}

.hero-badge {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--dourado);
  border:         1px solid rgba(191,160,106,0.38);
  border-radius:  40px;
  padding:        6px 18px;
  margin-bottom:  28px;
}

.hero-urgencia {
  display:        inline-block;
  font-size:      12px;
  font-weight:    800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color:          var(--verde-escuro);
  background:     linear-gradient(135deg, var(--dourado-brilho), var(--dourado));
  border-radius:  40px;
  padding:        8px 18px;
  margin-bottom:  24px;
  box-shadow:     0 8px 28px rgba(191,160,106,0.25);
}

.hero-titulo {
  font-family:   var(--fonte-titulo);
  font-size:     clamp(29px, 4vw, 52px);
  line-height:   1.14;
  color:         var(--algodao-claro);
  margin-bottom: 20px;
}

.hero-titulo em {
  font-style: italic;
  color:      var(--dourado-brilho);
}

.hero-sub {
  font-size:     clamp(15px, 1.8vw, 18px);
  line-height:   1.68;
  color:         var(--algodao-medio);
  max-width:     780px;
  margin:        0 auto 18px;
}

.hero-apoio {
  font-size:      clamp(15px, 1.7vw, 17px);
  font-weight:    800;
  letter-spacing: 0.4px;
  color:          var(--dourado-brilho);
  margin-bottom:  28px;
}

.hero-comparacao {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   18px;
  width:                 100%;
  max-width:             900px;
  margin-bottom:         28px;
}

.hero-comparacao-card {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        12px;
  background:     rgba(245, 242, 236, 0.07);
  border:         1px solid rgba(191,160,106,0.22);
  border-radius:  var(--raio);
  box-shadow:     0 18px 48px rgba(0,0,0,0.18);
}

.hero-comparacao-card-destaque {
  border-color: rgba(232,201,140,0.48);
  background:   rgba(191,160,106,0.10);
}

.hero-comparacao-label {
  display:        flex;
  align-items:    center;
  justify-content: center;
  min-height:     38px;
  font-size:      12px;
  font-weight:    800;
  line-height:    1.25;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color:          var(--algodao-claro);
}

.hero-comparacao-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      190px;
  aspect-ratio:    16 / 10;
  border:          1px dashed rgba(232,201,140,0.42);
  border-radius:   8px;
  background:
    linear-gradient(135deg, rgba(245,242,236,0.10), rgba(191,160,106,0.07)),
    rgba(21,42,33,0.42);
}

.hero-comparacao-placeholder span {
  max-width:      150px;
  font-size:      12px;
  font-weight:    700;
  line-height:    1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(245,242,236,0.58);
}

.hero-comparacao-img {
  width:         100%;
  aspect-ratio:  16 / 10;
  object-fit:    cover;
  border-radius: 8px;
  border:        1px solid rgba(232,201,140,0.20);
  box-shadow:    0 12px 34px rgba(0,0,0,0.22);
}

.hero-acao {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
}

.hero-microcopy {
  font-size:   13px;
  line-height: 1.45;
  color:       rgba(245,242,236,0.68);
}

.hero-ctas {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            14px;
  margin-bottom:  52px;
}

.hero-garantia {
  font-size: 13px;
  color:     rgba(245,242,236,0.58);
}

/* ── Selos de credibilidade ── */
.hero-selos {
  display: flex;
  gap:     32px;
}

.hero-selo {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  border-left:    2px solid rgba(191,160,106,0.3);
  padding-left:   16px;
}

.hero-selo-num {
  font-family: var(--fonte-titulo);
  font-size:   22px;
  color:       var(--dourado);
  line-height: 1;
}

.hero-selo-txt {
  font-size:   11px;
  color:       var(--algodao-escuro);
  line-height: 1.4;
  max-width:   90px;
}

/* ════════════════════════════════════════
   CAIXA DE OFERTA (coluna direita do hero)
════════════════════════════════════════ */
.hero-oferta {
  position: relative;
}

.oferta-card {
  background:    rgba(245, 242, 236, 0.97);
  border:        1px solid rgba(191,160,106,0.28);
  border-radius: 20px;
  padding:       36px 32px;
  box-shadow:    0 28px 80px rgba(0,0,0,0.48), 0 0 0 1px rgba(191,160,106,0.08);
}

/* Cabeçalho */
.oferta-header {
  text-align:     center;
  margin-bottom:  20px;
  padding-bottom: 20px;
  border-bottom:  1px solid rgba(191,160,106,0.2);
}

.oferta-lancamento {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--verde-escuro);
  background:     linear-gradient(135deg, var(--dourado-brilho), var(--dourado));
  border-radius:  40px;
  padding:        5px 14px;
  margin-bottom:  12px;
}

.oferta-nome {
  font-family:   var(--fonte-titulo);
  font-size:     24px;
  color:         var(--verde-escuro);
  margin-bottom: 5px;
}

.oferta-descricao {
  font-size: 13px;
  color:     var(--verde-musgo);
  opacity:   0.78;
}

/* Linha de bônus */
.oferta-bonus-linha {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    rgba(21,42,33,0.06);
  border-radius: 10px;
  padding:       12px 16px;
  margin-bottom: 10px;
}

.oferta-bonus-qtd {
  font-family: var(--fonte-titulo);
  font-size:   28px;
  color:       var(--dourado);
  line-height: 1;
  flex-shrink: 0;
}

.oferta-bonus-txt {
  font-size:   13px;
  color:       var(--verde-musgo);
  line-height: 1.4;
}

/* Aviso de super bônus */
.oferta-superbonus-aviso {
  font-size:     12px;
  color:         var(--verde-musgo);
  background:    rgba(191,160,106,0.10);
  border:        1px solid rgba(191,160,106,0.25);
  border-radius: 8px;
  padding:       10px 14px;
  text-align:    center;
  line-height:   1.55;
  margin-bottom: 20px;
}

.oferta-superbonus-aviso strong {
  color: var(--verde-escuro);
}

/* Separador interno */
.oferta-sep {
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(191,160,106,0.35), transparent);
  margin:     0 0 20px;
}

/* Preço */
.oferta-preco {
  text-align:    center;
  margin-bottom: 18px;
}

.oferta-parcela {
  display:       block;
  font-size:     13px;
  color:         var(--verde-musgo);
  margin-bottom: 4px;
}

.oferta-valor-wrap {
  display:     inline-flex;
  align-items: flex-start;
  gap:         3px;
  line-height: 1;
}

.oferta-cifrao {
  font-size:   22px;
  font-weight: 700;
  color:       var(--verde-escuro);
  margin-top:  6px;
}

.oferta-valor {
  font-size:      72px;
  font-weight:    800;
  color:          var(--verde-escuro);
  line-height:    1;
  letter-spacing: -2px;
}

.oferta-centavos {
  font-size:   26px;
  font-weight: 700;
  color:       var(--verde-escuro);
  margin-top:  10px;
}

.oferta-total {
  display:    block;
  font-size:  13px;
  color:      var(--verde-musgo);
  margin-top: 5px;
  opacity:    0.78;
}

/* Formas de pagamento */
.oferta-pgtos {
  display:         flex;
  gap:             6px;
  flex-wrap:       wrap;
  justify-content: center;
  margin-bottom:   18px;
}

.oferta-pgto-badge {
  font-size:     11px;
  font-weight:   600;
  color:         var(--verde-musgo);
  background:    rgba(21,42,33,0.06);
  border:        1px solid rgba(191,160,106,0.2);
  border-radius: 6px;
  padding:       6px 11px;
}

/* Botão de compra */
.oferta-btn {
  display:       block;
  width:         100%;
  text-align:    center;
  margin-bottom: 16px;
}

/* Trust badges */
.oferta-trust {
  text-align: center;
}

.oferta-hotmart {
  font-size:     12px;
  line-height:   1.55;
  color:         var(--verde-musgo);
  opacity:       0.72;
  margin-bottom: 5px;
}

.oferta-hotmart strong {
  color:   var(--verde-escuro);
  opacity: 1;
}

.oferta-seguranca {
  font-size: 12px;
  color:     var(--verde-musgo);
  opacity:   0.65;
}