/* shared-cro.css — CRO phase fixes extracted from inline */

h1,h2,h3,h4,h5,h6,.hero h1,.section-title,.sec-head h2,.faq-q,.how-card h3,.benefit-card h3,.prod-card h3,.blog-card h3{font-family:"Plus Jakarta Sans",'Plus Jakarta Sans',sans-serif!important}


button.qf-submit, input.qf-submit, .form-card button, .form-steps button, .qform-body button {
  border-radius: 100px !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}



/* FASE 10: CONVERTENDO BTN-COTAR PARA PILULA REDONDA */
button.btn-cotar, a.btn-cotar, .form-steps button.btn-cotar {
  border-radius: 100px !important;
  padding: 14px 24px !important; /* Garantindo um padding elegante pra pill */
}



/* FIX: Garantir contraste dos ícones nos formulários e cards */
.form-card-head iconify-icon, .form-card-head svg {
  color: #ffffff !important;
}
.prod-card-ico {
  color: #1b2438 !important; /* Navy Deep */
}
.prod-card-ico iconify-icon, .prod-card-ico svg {
  color: #1b2438 !important;
}
.benefit-ico iconify-icon, .benefit-ico svg {
  color: #ffffff !important;
}



/* FASE 9: CORRECAO DO BOTAO FANTASMA NA SECÃO CTA-BOX */
/* O container .cta-section é escuro por predefinição mas não carregava a classe .sec-dark. Forçando Branco: */
.cta-section .btn-cta-out, .cta-box .btn-cta-out {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.cta-section .btn-cta-out:hover, .cta-box .btn-cta-out:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}



.faq-q{position:relative}
.faq-q .faq-ic{display:none!important}
.faq-q::after{content:''!important;width:20px!important;height:20px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D507C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-size:20px!important;background-repeat:no-repeat!important;background-position:center!important;flex-shrink:0!important;transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)!important}
.faq-q.on::after,.faq-item.open .faq-q::after{transform:rotate(180deg)!important}
.faq-a{display:none!important;max-height:none!important;overflow:visible!important}
.faq-a.on{display:block!important}



/* FASE 7: CORREÇÕES DE HIERARQUIA E BUGS VISUAIS */

/* 1. Múltiplos Vermelhos (Re-Harmonização de Cores) */
/* Cabeçalho Volta para Navy Elegante */
.hdr .btn-nav, .mob-cta .btn-nav {
  background: #1b2438 !important;
  box-shadow: 0 4px 14px rgba(27, 36, 56, 0.25) !important;
}
.hdr .btn-nav:hover, .mob-cta .btn-nav:hover {
  background: #2C3A5A !important;
  box-shadow: 0 8px 24px rgba(27, 36, 56, 0.45) !important;
}

/* 2. Botão de Avanço de Formulário (Cotar/Próximo) vira Verde Sucesso */
button.btn-cotar, a.btn-cotar {
  background: #15803D !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
}
button.btn-cotar:hover, a.btn-cotar:hover {
  background: #15803d !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4) !important;
}

/* 3. Correção do Menu Quebrado (Produtos) */
/* A classe .mega-btn foi afetada pela Fase 6. Resetando ao Padrão Original Escrito no index.html (linha 442) */
a.mega-btn, button.mega-btn {
  background: transparent !important;
  color: #3D507C !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  height: 80px !important;
  border-bottom: 2px solid transparent !important;
  transform: none !important;
  width: auto !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
}
a.mega-btn:hover, button.mega-btn:hover, a.mega-btn.open, button.mega-btn.open {
  color: #1b2438 !important;
  border-bottom-color: #1b2438 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
@media (max-width:900px) {
  a.mega-btn, button.mega-btn { width: 100% !important; text-align: left !important; justify-content: flex-start !important; }
}

/* 4. Correção do Botão Fantasma Invisível em Fundo Escuro */
/* Se qualquer ghost-button estiver dentro de sec-dark, forçar a cor Branca */
.sec-dark .btn-hero-out, .sec-dark .btn-cta-out, .sec-dark .btn-outline-purple {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.sec-dark .btn-hero-out:hover, .sec-dark .btn-cta-out:hover, .sec-dark .btn-outline-purple:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}



/* FASE 4: CRO & UI Upgrades Globais */
/* 1. Remover Moldura do Hero nas Internas */
.hero-microcopy {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 24px !important;
  max-width: 520px !important;
}
@media (max-width: 900px) {
  .hero-microcopy { max-width: 100% !important; font-size: 0.9rem !important; }
}

/* 2. Botão de Conversão (Próximo / Enviar) Alto Contraste */
.btn-cotar {
  background: #D32F2F !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(232, 57, 43, 0.3) !important;
  transform: translateY(0);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border: none !important;
}
.btn-cotar:hover {
  background: #D32F2F !important;
  box-shadow: 0 8px 24px rgba(232, 57, 43, 0.4) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}
/* Ignorar btn-outline se houver uma classe conflitante e manter secundário */
.btn-outline-purple {
  background: transparent !important;
  border: 2px solid #D32F2F !important;
  color: #D32F2F !important;
  box-shadow: none !important;
}
.btn-outline-purple:hover {
  background: rgba(232, 57, 43, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* 3. Inputs - Efeito Focus Ring Magnético */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #D32F2F !important; 
  box-shadow: 0 0 0 4px rgba(232, 57, 43, 0.1) !important;
  outline: none !important;
}

/* 4. Gamificação do Progresso (Passos) */
.cp-step { z-index: 2; position: relative; }
.cp-step.active .cp-num {
  background: #1b2438 !important;
  box-shadow: 0 0 0 4px rgba(27, 36, 56, 0.15) !important;
  color: #fff !important;
  transform: scale(1.15);
  transition: all .2s;
}
.cp-step.done .cp-num {
  background: #15803D !important;
  color: transparent !important;
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2) !important;
}
.cp-step.done .cp-num::after {
  content: '✓';
  position: absolute;
  color: #fff;
  font-size: 1.2rem;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.cp-step.done .cp-lbl {
  color: #15803D !important;
  font-weight: 800 !important;
}
.cp-line.done {
  background: #15803D !important;
}



/* FASE 6: PADRONIZACAO DEFINITIVA DE BOTOES (FAMILIAS) */

/* Familia Primaria: Heróis de Conversão (Preenchidos) */
.btn-hero, .btn-cta, .btn-big, .mega-btn, .mob-sticky-btn {
  background: #D32F2F !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(232, 57, 43, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  gap: 8px !important;
}
.btn-hero:hover, .btn-cta:hover, .btn-big:hover, .mega-btn:hover, .mob-sticky-btn:hover {
  background: #D32F2F !important;
  box-shadow: 0 8px 24px rgba(232, 57, 43, 0.45) !important;
  transform: translateY(-3px) !important;
  color: #ffffff !important;
}

/* Familia Secundaria: Fantasmas (Contorno Translucido) */
.btn-hero-out, .btn-cta-out, .btn-outline-purple, .btn-more {
  background: transparent !important;
  color: currentColor !important;
  border: 1.5px solid currentColor !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  gap: 8px !important;
  opacity: 0.9 !important;
}
.btn-hero-out:hover, .btn-cta-out:hover, .btn-outline-purple:hover, .btn-more:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important;
}

/* Fallback de cor pro btn-outline-purple especificamente quando color:inherit puxar cinza escuro */
.sec-pale .btn-outline-purple, .sec-bg .btn-cta-out {
  color: #1b2438 !important; /* Em fundo claro, puxe Azul Escuro */
  border-color: rgba(27,36,56, 0.4) !important;
}
.sec-pale .btn-outline-purple:hover, .sec-bg .btn-cta-out:hover {
  background: rgba(27,36,56, 0.04) !important;
  border-color: #1b2438 !important;
}

/* Responsividade de botes largos no Celular */
@media (max-width: 900px) {
  .btn-hero, .btn-hero-out, .btn-cta, .btn-cta-out, .btn-big, .mega-btn {
    width: 100% !important;
  }
}


.btn-hero-main,.btn-cta-red{border-radius:100px!important}.btn-cta-red{background:#D32F2F!important;color:#fff!important;font-weight:800!important;border:none!important;box-shadow:0 4px 14px rgba(232,57,43,.25)!important;display:inline-flex!important;align-items:center!important;gap:8px!important;text-decoration:none!important;border-radius:100px!important}.btn-hero-sec{border-radius:100px!important}.hero-kicker iconify-icon,.btn-hero iconify-icon,.btn-nav-wa iconify-icon,.mega-tab iconify-icon,.mega-ico iconify-icon,.mob-section-btn iconify-icon,.benefit-ico iconify-icon,.cov-ico iconify-icon,.prod-ico iconify-icon,.cot-disclaimer iconify-icon{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;font-size:22px!important}.prod-icon iconify-icon{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important}.ff-intent-btn{display:flex!important;background:#fff!important;border-radius:12px!important;border:1.5px solid #e5e7eb!important;box-shadow:none!important;color:#1b2438!important}.ff-intent-btn:hover{transform:none!important;background:#f8fafc!important}.ff-btn-add{background:transparent!important;border:1px dashed #2c3a5a!important;border-radius:8px!important;color:#2c3a5a!important;box-shadow:none!important}.ff-btn-rem{background:transparent!important;border:none!important;color:#ef4444!important;box-shadow:none!important}.cta-strip .btn-cta-out{color:#fff!important;border-color:rgba(255,255,255,.6)!important}@keyframes lgpdSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#lgpd-banner{bottom:20px!important;left:20px!important;right:auto!important;max-width:420px!important;border-radius:16px!important;background:rgba(255,255,255,.95)!important;backdrop-filter:blur(12px)!important;color:#1b2438!important;box-shadow:0 8px 32px rgba(0,0,0,.12)!important;padding:24px!important;animation:lgpdSlideUp .4s ease!important}#lgpd-banner>div{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}#lgpd-banner p{color:#3D507C!important;font-size:13px!important}#lgpd-banner p a{color:#1b2438!important;font-weight:700!important}#lgpd-banner button:first-of-type{background:#1b2438!important;color:#fff!important;border:none!important;border-radius:100px!important;padding:10px 24px!important;font-weight:700!important}#lgpd-banner button:nth-of-type(2){background:transparent!important;color:#1b2438!important;border:1.5px solid rgba(27,36,56,.3)!important;border-radius:100px!important;padding:9px 18px!important}@media(max-width:600px){#lgpd-banner{left:12px!important;right:12px!important;bottom:12px!important;max-width:none!important}}


/* NOVO MEGA MENU FUNIL AGIL v4 - FIX VAZAMENTO BRANCO */
.mega-panel {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  background: #fff !important;
  box-shadow: 0 20px 40px rgba(27, 36, 56, 0.08), 0 1px 3px rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(27,36,56,0.05) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 900px) {
  .mega-wrap { display: none !important; }
}
.mega-opt1 {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  width: max-content !important;
}
.opt1-col { width: 330px !important; padding: 18px 24px !important; }
.opt1-col.opt1-pj { background: #f8fafc !important; border-left: 1px solid #e2e8f0 !important; }
.opt1-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.72rem !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #64748b !important;
  margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.opt1-grid { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.opt1-item {
  display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important;
  padding: 6px 10px !important; margin: 0 -10px !important; border-radius: 12px !important; transition: all 0.2s ease !important; border: 1px solid transparent !important;
}
.opt1-item:hover { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
.opt1-col:not(.opt1-pj) .opt1-item:hover { background: #f8fafc !important; border-color: #f1f5f9 !important; }
.opt1-item.whatsapp-item:hover { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.opt1-ico {
  width: 32px !important; height: 32px !important; border-radius: 10px !important; display: flex !important;
  align-items: center !important; justify-content: center !important; font-size: 16px !important; flex-shrink: 0 !important;
}
/* PF Icons */
.opt1-col:not(.opt1-pj) .opt1-item:nth-child(1) .opt1-ico { background: #ebf3ff !important; color: #2563eb !important; }
.opt1-col:not(.opt1-pj) .opt1-item:nth-child(2) .opt1-ico { background: #fef2f2 !important; color: #dc2626 !important; }
.opt1-col:not(.opt1-pj) .opt1-item:nth-child(3) .opt1-ico { background: #f0fdf4 !important; color: #15803D !important; }
/* PJ Icons */
.pf-ico1 { background: #e0e7ff !important; color: #4338ca !important; }
.pf-ico2 { background: #fef08a !important; color: #854d0e !important; }
.pf-ico3 { background: #dbeafe !important; color: #1d4ed8 !important; }
.opt1-text .mega-h {
  margin: 0 0 2px 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #1b2438 !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.1 !important;
}
.opt1-text p { margin: 0 !important; color: #64748b !important; font-size: 0.72rem !important; line-height: 1.2 !important; }



/* �� THE ELITE FORM DESIGN V2 (UX COLORS) 💎 */
/* 1. Muted Inputs + Pearl Background + Focus Aura Glow */
.field input, .field select, .field textarea, 
.qf-input, .qf-select {
  border: 1.5px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
}
/* FOCO: Azul Marinho (Profissional) em vez de Vermelho (Erro) */
.field input:focus, .field select:focus, .field textarea:focus,
.qf-input:focus, .qf-select:focus {
  background-color: #ffffff !important;
  border-color: #1B2438 !important; /* Navy */
  box-shadow: 0 0 0 4px rgba(27, 36, 56, 0.1) !important; /* Navy Glow */
  transform: translateY(-1px);
}

/* Validação Sofisticada (Success/Error) */
.field.has-err input, .field.has-err select, .field.has-err textarea {
   border-color: #EF4444 !important; /* Vermelho real de erro */
   box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
   background-color: #FEF2F2 !important;
}
.field.has-ok input, .field.has-ok select, .field.has-ok textarea {
   border-color: #10B981 !important; /* Esmeralda Premium */
   background-color: #F0FDF4 !important; /* Fundo leve esmeralda */
   padding-right: 44px !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
   background-repeat: no-repeat !important;
   background-position: right 14px center !important;
   background-size: 18px 18px !important;
}

/* Esconder qualquer checkmark artesanal em texto adicionado pelo JS legado na label */
.field.has-ok label::after { content: none !important; }
.field label .check-icon { display: none !important; }
.field.has-ok label { color: #10B981 !important; }

/* 2. Uppercase Navy Labels with Tracking */
.field label, .qf-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #1B2438 !important; /* Deep Navy */
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  transition: color 0.3s ease !important;
}
.field label .req { color: #D32F2F !important; }

/* 3. Glass Credit-Card Radios (Selecoes em Bloco) */
.radio-opt, .det-card {
  border: 1.5px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 2px 8px rgba(27,36,56,0.02) !important;
}
.radio-opt:hover {
  border-color: rgba(27, 36, 56, 0.3) !important; /* Navy Hover */
  box-shadow: 0 6px 16px rgba(27, 36, 56, 0.06) !important;
  transform: translateY(-2px);
}
/* Opção Ativa: Usamos Navy invés de Vermelho para dar ar prémium e evitar percepção de erro */
.radio-opt.checked {
  background-color: #1B2438 !important;
  border-color: #1B2438 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(27, 36, 56, 0.15) !important;
}

/* 4. Luxury Stepper Gamification */
.cp-step {
  transition: all 0.3s ease !important;
}
.cp-step .cp-num {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.cp-step.active .cp-num {
  background: #1B2438 !important;
  color: #ffffff !important;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(27, 36, 56, 0.15) !important;
}
.cp-step.done .cp-num {
  background: #10B981 !important; /* Usando Emerald combinando c/ forms */
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
  transform: scale(1.05);
}
.cp-line {
  transition: background 0.4s ease, height 0.4s ease !important;
}
.cp-line.done {
  background: #10B981 !important;
  height: 3px !important;
}

/* 5. Master Shadows for Form Wrappers */
.qform-wrap, .form-container, #hub-form-container {
  box-shadow: 0 24px 80px rgba(27, 36, 56, 0.08) !important;
  border: 1px solid rgba(27,36,56,0.04) !important;
  border-radius: 20px !important;
}