/* tokens e resets foram movidos para assets/css/tokens.css */

/* Página específica - scroll permitido */
body.page-abrir-conta {
  overflow: auto !important;
}

/* Força a NAV sempre visível (exceto página abrir conta) */
body.page-home .nav,
body.page-investimentos .nav,
body.page-empresas .nav,
body.page-banking .nav,
body.page-sobre .nav{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;           /* Acima de qualquer seção */
  background: #fff;        /* Evita transparência sobre o hero */
  border-bottom: 1px solid var(--border);
}

/* Compensa a altura da barra em todas as páginas com navbar fixa */
body.page-home,
body.page-investimentos,
body.page-empresas,
body.page-banking,
body.page-sobre{
  padding-top: 72px; /* ajuste fino conforme altura da navbar */
}

/* Remove padding-top em mobile para evitar espaço branco */
@media (max-width: 768px) {
  body.page-home,
  body.page-investimentos,
  body.page-empresas,
  body.page-banking,
  body.page-sobre{
    padding-top: 0 !important;
  }
}

/* Container & headings */
.container{ width:min(1180px, 92%); margin-inline:auto }
h1,h2,h3{ margin:0 0 .55rem; color:var(--black); letter-spacing:.2px; font-weight:800 }
h1{ font-size:clamp(2.2rem, 1.4rem + 2.8vw, 3.4rem); line-height:1.06 }
h2{ font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem) }
h3{ font-size:1.06rem; letter-spacing:.8px }

/* Responsividade global para dispositivos muito pequenos */
@media (max-width: 400px) {
  .container{ width:min(1180px, 95%); padding: 0 12px; }
  h1{ font-size:1.6rem !important; line-height:1.1 !important; }
  h2{ font-size:1.2rem !important; }
  h3{ font-size:1rem !important; letter-spacing:.6px !important; }
}

/* Navbar */
.nav{ 
  position: var(--nav-position); 
  top: 0; 
  z-index: var(--nav-z-index); 
  background: var(--nav-background); 
  opacity: var(--nav-opacity);
  border-bottom: var(--nav-border-width) solid var(--border);
  transition: transform var(--nav-transition-speed) ease, opacity var(--nav-transition-speed) ease;
}

/* Estados da navbar baseados no scroll */
.nav--hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.nav--scroll {
  opacity: var(--nav-scroll-opacity);
}

.nav--shadow {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav__inner{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--nav-padding-y) 0;
  justify-content: space-between;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--black) }

/* Brand row no header */
.nav__inner .brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink: 0;
}
.nav__inner .brand-row__sep{
  color: #000000;
  font-weight: 400;
  opacity: 1;
  line-height: 0.5;
  font-size: 2rem;
  margin: 0;
}
.nav__inner .brand-row__logo{
  height: 24px;
  width: auto;
  display: block;
}
.brand__logo{ width:30px;height:30px;border-radius:6px;display:grid;place-items:center;background:var(--deep);color:#fff;font-weight:800 }
.brand__logo-img{ height:40px; width:auto; }
.brand__name{ font-weight:800 }
.nav__links{ display:flex; gap:22px; margin-left: auto; margin-right: 20px; }
.nav__links a{ text-decoration:none; color:#333; font-weight:700 }
.nav__links a:hover{ color:var(--green) }
.nav__ctas{ margin-left:auto; display:flex; gap:10px }
.nav__menu{ 
  display:none; 
  margin-left:auto; 
  background:none; 
  border:0; 
  font-size:24px; 
  color: var(--deep);
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}
.nav__menu:hover {
  background-color: rgba(65, 111, 64, 0.1);
  color: var(--green);
}
.nav__menu:active {
  background-color: rgba(65, 111, 64, 0.2);
}
@media (max-width:940px){
  .nav__links{ display:none !important }
  .nav__menu{ display:flex !important }
  .nav.nav--open .nav__links{
    position:absolute !important; 
    left:0 !important; 
    right:0 !important; 
    top:100% !important; 
    display:flex !important; 
    flex-direction:column !important; 
    gap:12px !important;
    background:#fff !important; 
    border-bottom:1px solid var(--border) !important; 
    padding:20px !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    border-radius: 0 0 8px 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .nav.nav--open .nav__links a {
    padding: 12px 16px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
    font-weight: 600 !important;
    color: var(--deep) !important;
    display: block !important;
    text-decoration: none !important;
  }
  .nav.nav--open .nav__links a:hover {
    background-color: rgba(65, 111, 64, 0.08) !important;
    color: var(--green) !important;
  }
}

/* Buttons */
.btn{
  --bg:#f4f3f1; --fg:#222; --bd:var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.78rem 1.05rem; border-radius:10px; text-decoration:none; font-weight:800;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg); transition: .18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn--cta:hover{ transform:translate(var(--btn-cta-x), calc(var(--btn-cta-y) - 1px)); }
.btn--primary{ --bg:var(--green); --fg:#fff; --bd:transparent }
.btn--outline{ --bg:transparent; --fg:var(--green); --bd:var(--green) }
.hero .btn--outline{ --bg:#ffffff; --fg:#263d29; --bd:#ffffff }
.btn--ghost{ --bg:transparent; --fg:#333 }
.btn--lg{ padding:1rem 1.25rem }
.btn--xl{ 
  padding: var(--btn-hero-padding-y) var(--btn-hero-padding-x); 
  font-size: var(--btn-hero-font-size); 
  border-radius: var(--btn-hero-border-radius); 
  min-width: var(--btn-hero-width); 
}
.btn--cta{ 
  padding: var(--btn-cta-padding-y) var(--btn-cta-padding-x); 
  font-size: var(--btn-cta-font-size); 
  border-radius: var(--btn-cta-border-radius); 
  min-width: var(--btn-cta-width);
  transform: translate(var(--btn-cta-x), var(--btn-cta-y));
}

/* Botões responsivos para dispositivos muito pequenos */
@media (max-width: 400px) {
  .btn{ 
    padding: .65rem .9rem !important; 
    font-size: 0.9rem !important; 
    gap: .4rem !important;
    border-radius: 8px !important;
  }
  .btn--lg{ padding: .85rem 1.1rem !important; }
  .btn--xl, .btn--cta{ 
    padding: 0.9rem 1.8rem !important; 
    font-size: 1.4rem !important; 
    min-width: 240px !important; 
    max-width: 90vw !important;
  }
}

/* Mobile médio - iPhone 14 Pro Max e similares (430-476px) */
@media (max-width: 476px) and (min-width: 430px) {
  .btn--xl, .btn--cta{ 
    padding: 0.9rem 2rem !important; 
    font-size: 1.5rem !important; 
    min-width: 320px !important;
    max-width: 85vw !important;
  }
}

/* Mobile pequeno-médio (401-429px) */
@media (max-width: 429px) and (min-width: 401px) {
  .btn--xl, .btn--cta{ 
    padding: 0.8rem 1.8rem !important; 
    font-size: 1.4rem !important; 
    min-width: 280px !important;
    max-width: 80vw !important;
  }
}

/* Botões para dispositivos extremamente pequenos */
@media (max-width: 400px) and (max-height: 900px) {
  .btn{ 
    padding: .55rem .8rem !important; 
    font-size: 0.85rem !important; 
    gap: .3rem !important;
    border-radius: 6px !important;
  }
  .btn--lg{ padding: .7rem 1rem !important; }
  .btn--xl, .btn--cta{ 
    padding: 0.8rem 1.5rem !important; 
    font-size: 1.2rem !important; 
    min-width: 200px !important; 
    max-width: 85vw !important;
  }
}
/* Home hero movido para assets/css/pages/index.css */

/* Página Sobre movida para assets/css/pages/sobre.css */

/* Lista de produtos movida para assets/css/pages/index.css */

/* Seção Abrir Conta */
.cta{ padding:64px 0 84px; background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.cta__inner{ text-align:center }

.cta__inner p{ color:#58625c; transform: translate(var(--frase-x), var(--frase-y)); }
.cta__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 20px 0; }

/* CTA responsiva para dispositivos muito pequenos */
@media (max-width: 400px) {
  .cta{ padding:48px 0 64px !important; }
  .cta__inner p{ font-size: 14px !important; line-height: 1.4 !important; }
  .cta__actions{ gap: 8px !important; margin: 0 0 16px 0 !important; }
}

/* CTA para dispositivos extremamente pequenos */
@media (max-width: 400px) and (max-height: 900px) {
  .cta{ padding:32px 0 48px !important; }
  .cta__inner p{ font-size: 12px !important; line-height: 1.3 !important; }
  .cta__actions{ gap: 6px !important; margin: 0 0 12px 0 !important; }
}

/* CTA Brokers - EDIT MODE */
:root {
  /* HERO - Controles de layout */
  --hero-text-width: 40ch;      /* Largura da caixa de texto - ajustada para nova frase */
  --hero-titulo-x: 0px;
  --hero-titulo-y: 50px;
  --hero-paragrafo-x: 0px;
  --hero-paragrafo-y: 50px;
  --hero-botoes-x: 0px;
  --hero-botoes-y: 50px;
  --hero-nota-x: 0px;
  --hero-nota-y: 50px;
  
  /* BOTÃO HERO - Controles de tamanho */
  --btn-hero-width: 390px;       /* Largura do botão */
  --btn-hero-padding-y: 1rem;  /* Altura (padding vertical) */
  --btn-hero-padding-x: 2.5rem;  /* Padding horizontal */
  --btn-hero-font-size: 1.7rem;  /* Tamanho da fonte */
  --btn-hero-border-radius: 14px; /* Bordas arredondadas */
  
  /* BOTÃO CTA - Controles de tamanho */
  --btn-cta-width: 390px;        /* Largura do botão CTA */
  --btn-cta-padding-y: 1rem;     /* Altura (padding vertical) CTA */
  --btn-cta-padding-x: 2.5rem;   /* Padding horizontal CTA */
  --btn-cta-font-size: 1.7rem;   /* Tamanho da fonte CTA */
  --btn-cta-border-radius: 14px; /* Bordas arredondadas CTA */
  --btn-cta-x: 0px;              /* Posição X do botão CTA */
  --btn-cta-y: -35px;              /* Posição Y do botão CTA */
  
  /* CTA - Controles de posição */
  --frase-x: 0px;
  --frase-y: -15px;
  --agora-x: -35px;
  --agora-y: 10px;
  --separator-x: -35px;
  --separator-y: 10px;
  --genial-x: -35px;
  --genial-y: 10px;
  
  /* NAVBAR - Controles de exibição */
  --nav-z-index: 100;            /* Z-index da navbar */
  --nav-opacity: 1;              /* Opacidade da navbar */
  --nav-background: #fff;        /* Cor de fundo da navbar */
  --nav-position: sticky;        /* Posição da navbar (sticky/fixed) */
  --nav-padding-y: 14px;         /* Padding vertical da navbar */
  --nav-border-width: 1px;       /* Espessura da borda inferior */
  
  /* NAVBAR - Controles de scroll */
  --nav-hide-at-scroll: 1000px;  /* Posição do scroll onde navbar some (em pixels) */
  --nav-show-at-scroll: 1000px;     /* Posição do scroll onde navbar aparece */
  --nav-transition-speed: 0.3s;  /* Velocidade da transição */
  --nav-scroll-opacity: 1;       /* Opacidade quando fazendo scroll */
}

.cta__brokers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.broker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--deep);
  font-weight: 600;
  font-size: 1.1rem;
}

.broker-logo {
  height: 65px;
  width: auto;
}

.broker-logo--agora {
  transform: translate(var(--agora-x), var(--agora-y));
}

.broker-logo--genial {
  height: 65px;
  width: auto;
  transform: translate(var(--genial-x), var(--genial-y));
}

.broker-separator {
  font-size: 2rem;
  color: var(--muted);
  font-weight: 300;
  opacity: 0.7;
  display: flex;
  align-items: center;
  line-height: 1;
  transform: translate(var(--separator-x), var(--separator-y));
}

@media (max-width: 768px) {
  .cta__brokers {
    flex-direction: column;
    gap: 20px;
  }
  
  .broker-separator {
    display: none;
  }
}

/* Footer Institucional - Escuro */
.footer-institutional{ background:var(--ink); color:#dae1dc; padding:40px 0; border-top:1px solid #10231b; min-height:80px; }
.footer-institutional a{ color:#ffffff; text-decoration:none; }
.footer-institutional a:hover{ text-decoration:underline; }

/* Footer Disclaimer - Preto */
.footer-disclaimer{ background:#000000; color:#dae1dc; padding:30px 0; text-align:justify; }
.footer-disclaimer a{ color:#d7e8de; text-decoration:none } 
.footer-disclaimer a:hover{ text-decoration:underline }
.footer-disclaimer small{ color:#9fb1a8; font-size:0.8rem; line-height:1.5; display:block; }
.footer-disclaimer strong{ color:#ffffff; }
@media (max-width:520px){ 
  .footer__disclaimer{ text-align:left; }
}

/* ==========================
   PÁGINA ABRIR CONTA
   ========================== */

.abrir-conta {
  height: auto !important;
  min-height: 100dvh !important;
  background: #fff !important;
  overflow: visible !important;
  display: block !important;
}



.abrir-conta__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
  align-items: stretch !important;
}

.abrir-conta__visual {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.abrir-conta__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

.abrir-conta__form {
  background: #fff;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
}

.abrir-conta__header {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.abrir-conta__logo {
  height: 45px;
  width: auto;
  margin-bottom: 15px;
}

.abrir-conta__header h1 {
  font-size: 2.6rem;
  color: var(--deep);
  margin-bottom: 10px;
  font-weight: 800;
  text-align: center;
}

.abrir-conta__header p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 400px;
  margin: 0 auto;
}

.abrir-conta__form-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  flex: 1;
  justify-content: flex-start;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 8px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-icon {
  color: var(--muted);
  font-size: 0.9rem;
  cursor: help;
}

.form-group input {
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  color: var(--deep);
  background: #fff;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(65, 111, 64, 0.1);
}

/* Estados de validação */
.form-group input.success {
  border-color: #27ae60;
  background-color: #f8fff9;
}

.form-group input.error {
  border-color: #e74c3c;
  background-color: #fff8f8;
}

.form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Mensagens de erro */
.error-message {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 5px;
  font-weight: 500;
  animation: fadeIn 0.3s ease-in;
}

/* Mensagens do formulário */
.form-message {
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  animation: slideIn 0.3s ease-out;
}

.form-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-group input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.form-group--consent {
  margin-top: 10px;
}

.consent-text {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.link-privacidade {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}

.link-privacidade:hover {
  text-decoration: underline;
}

.btn--full {
  width: 100%;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Logos no rodapé do formulário */
.abrir-conta__footer-logos {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.abrir-conta__footer-logos .brand-row {
  justify-content: center;
  gap: 16px;
}

.abrir-conta__footer-logos .brand__logo-img {
  height: 50px !important;
  width: auto !important;
}

.abrir-conta__footer-logos .brand-row__logo {
  height: 40px !important;
  width: auto !important;
  border-radius: 8px;
}

/* Responsividade */
@media (max-width: 1024px) {
  .abrir-conta__form {
    padding: 25px 25px;
    height: 100vh;
    justify-content: space-between;
  }
  
  .abrir-conta__header h1 {
    font-size: 2rem;
  }
  
  .abrir-conta__header {
    margin-bottom: 20px;
  }
  
  .abrir-conta__form-fields {
    gap: 15px;
    flex: 1;
    justify-content: flex-start;
  }
  
  .abrir-conta__logo {
    height: 40px;
    margin-bottom: 15px;
  }
  
  .btn--full {
    margin-top: 20px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* Media query específica para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
  }
  
  .abrir-conta__visual {
    height: 40vh !important;
    min-height: 250px;
  }
  
  .abrir-conta__form {
    padding: 30px 35px !important;
    justify-content: space-between !important;
    height: 60vh !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .abrir-conta__form-fields {
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .btn--full {
    margin-top: 25px;
    margin-bottom: 10px;
    padding: 18px 24px;
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
    gap: 0 !important;
  }
  
  .abrir-conta__visual {
    height: 35vh !important;
    min-height: 200px;
  }
  
  .abrir-conta__form {
    padding: 20px 20px !important;
    max-width: none !important;
    margin: 0 !important;
    height: 65vh !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
    padding-top: 25px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .abrir-conta__header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  
  .abrir-conta__header p {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  
  .abrir-conta__form-fields {
    gap: 8px;
    margin-bottom: 15px;
  }
  
  .abrir-conta__logo {
    height: 35px;
    margin-bottom: 12px;
  }
  
  .btn--full {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 14px 20px;
    font-size: 0.95rem;
  }
  
  .form-group--consent {
    margin-top: 8px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
  }
  
  .abrir-conta__visual {
    height: 30vh !important;
    min-height: 150px;
  }
  
  .abrir-conta__form {
    padding: 15px 15px !important;
    height: 70vh !important;
    padding-bottom: 25px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .abrir-conta__form-fields {
    gap: 12px !important;
    margin-bottom: 15px !important;
  }
  
  .btn--full {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 14px 18px;
    font-size: 0.9rem;
  }
  
  .form-group--consent {
    margin-top: 6px;
    margin-bottom: 8px;
  }
}

/* Estilos para o checkbox de consentimento */
.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.consent-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.consent-checkbox .consent-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.consent-checkbox .link-privacidade {
  color: var(--green);
  text-decoration: underline;
}

.consent-checkbox .link-privacidade:hover {
  color: var(--deep);
}

/* ==========================
   CORREÇÕES DE RESPONSIVIDADE
   ========================== */

/* ===== SCROLL POR BREAKPOINT ===== */

/* Notebook/Tablet/Desktop: página COM scroll habilitado */
@media (min-width: 769px) {
  body.page-abrir-conta { 
    overflow: auto !important; /* HABILITA scroll da página */
  }
  /* Libera a seção para altura natural e permite scroll */
  .abrir-conta,
  .abrir-conta__grid {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  /* Formulário sem scroll interno */
  .abrir-conta__form {
    height: auto !important;
    overflow: visible !important;
  }
}

/* Mobile: página com scroll normal */
@media (max-width: 768px) {
  body.page-abrir-conta { 
    overflow: auto !important; 
  }
  .abrir-conta,
  .abrir-conta__grid {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  .abrir-conta__form {
    height: auto !important;
    overflow-y: visible !important;
  }
  
  /* Responsividade mobile específica */
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  
  .abrir-conta__visual {
    height: 35vh !important;
    min-height: 200px !important;
    flex-shrink: 0 !important;
  }
  
  .abrir-conta__form{
    padding: 20px 20px !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 65vh !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    padding-top: 25px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .abrir-conta__form-fields {
    gap: 15px !important;
    margin-bottom: 20px !important;
  }
  
  .btn--full {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  
  .abrir-conta__visual {
    height: 30vh !important;
    min-height: 150px !important;
    flex-shrink: 0 !important;
  }
  
  .abrir-conta__header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
  }
  
  .abrir-conta__form {
    padding: 15px 15px !important;
    height: auto !important;
    min-height: 70vh !important;
    padding-bottom: 25px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .abrir-conta__form-fields {
    gap: 12px !important;
    margin-bottom: 15px !important;
  }
  
  .btn--full {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
  }
}

/* ===== Abrir Conta – ajustes mobile ===== */
@media (max-width: 768px) {
  /* deixa o grid com 1 coluna e o formulário ocupando tudo */
  .abrir-conta__grid {
    grid-template-columns: 1fr !important;
  }

  /* garante altura confortável pro form */
  .abrir-conta__form {
    height: auto !important;
    min-height: 100dvh !important;
  }
}

/* ===== Abrir Conta – centralizar a logo ===== */
.abrir-conta__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center !important;
}

.abrir-conta__header .brand{
  justify-content: center !important;
  margin: 0 auto !important;
  width: 100%;
}

/* ===== Logo da página Abrir Conta - tamanho aumentado em 15% ===== */
.abrir-conta__header .brand__logo-img {
  height: 46px !important; /* 40px + 15% = 46px */
  width: auto !important;
}

/* Navbar – ajustes do CTA no mobile */
@media (max-width: 940px){
  .nav__inner{ gap:12px; justify-content: space-between; }
  .nav__ctas{ margin-left:0; }

  /* Deixa o botão menor e sem quebrar em 2 linhas */
  .nav__ctas .btn{
    padding: .55rem .8rem;
    font-size: .95rem;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* Garante o menu (☰) com margem adequada para não ser cortado */
  .nav__menu{ 
    margin-left:auto; 
    margin-right: 8px; /* Evita corte na lateral direita */
    flex-shrink: 0; /* Impede que seja comprimido */
  }
}

/* Remove completamente o CTA button em todas as telas mobile */
@media (max-width: 768px) {
  .nav__ctas{ 
    display: none !important; 
  }
  .nav__inner{
    gap: 12px !important;
  }
}

/* Telas muito estreitas: garante que CTA está escondido e ajusta hambúrguer */
@media (max-width: 480px){
  .nav__ctas{ display:none !important; }
  .nav__menu{
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
    font-size: 22px !important;
    display: flex !important;
    margin-right: 12px !important; /* Mais espaço para evitar corte */
    flex-shrink: 0 !important;
  }
  .nav__inner{
    padding: 12px 0 !important;
    justify-content: space-between !important;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 8px !important; /* Menos padding à direita para dar espaço ao hambúrguer */
  }
}

/* Proteção extra para dispositivos muito pequenos */
@media (max-width: 320px){
  .nav__ctas{ display:none !important; }
  .nav__menu{
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px !important;
    font-size: 20px !important;
    margin-right: 16px !important; /* Ainda mais espaço em telas muito pequenas */
    display: flex !important;
    flex-shrink: 0 !important;
  }
  .brand__logo-img{
    height: 36px !important;
  }
  .container{
    padding-left: 12px !important;
    padding-right: 4px !important; /* Mínimo padding à direita */
  }
  .nav__inner{
    justify-content: space-between !important;
  }
}

/* Fix específico para iPhone 12 Pro e similares (390x844) */
@media (max-width: 395px) and (min-width: 385px) and (min-height: 840px) {
  .nav__menu {
    display: flex !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 22px !important;
    padding: 7px !important;
    margin-right: 14px !important; /* Espaço adequado para iPhone 12 Pro */
    flex-shrink: 0 !important;
  }
  .nav__inner {
    padding: 13px 0 !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }
  .nav__ctas {
    display: none !important;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 6px !important;
  }
}

/* Fix específico para iPhone 12 Pro e similares (375-400px geral) */
@media (max-width: 400px) and (min-width: 375px) {
  .nav__menu {
    display: flex !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 23px !important;
    margin-right: 12px !important; /* Espaço adequado */
    flex-shrink: 0 !important;
  }
  .nav__inner {
    padding: 14px 0 !important;
    justify-content: space-between !important;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 6px !important;
  }
}

/* Fix específico para resolução 430x932 e similares */
@media (max-width: 440px) and (min-width: 420px) {
  .nav__menu {
    display: flex !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
    font-size: 20px !important;
    margin-right: 10px !important; /* Espaço adequado para telas maiores */
    flex-shrink: 0 !important;
  }
  .nav__inner {
    padding: 12px 0 !important;
    justify-content: space-between !important;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 6px !important;
  }
}

/* Fix para garantir hambúrguer visível em todos os móveis */
@media (max-width: 940px) {
  .nav__menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* === CTA · Logos das corretoras (mobile) === */
@media (max-width: 768px){
  /* zera deslocamentos aplicados por tokens */
  :root{
    --agora-x: 0px; --agora-y: 0px;
    --genial-x: 0px; --genial-y: 0px;
    --separator-x: 0px; --separator-y: 0px;
  }

  .cta__brokers{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .broker-item{ justify-content: center; }

  /* tamanhos consistentes e centralização */
  .broker-logo{
    display: block;
    margin: 0 auto;
    height: 55px;           /* 46px + 20% = 55px */
    max-width: 80vw;        /* evita imagem extrapolar */
    width: auto;
    transform: none !important;
  }

  /* ligeiro ajuste para leitura do logotipo Genial */
  .broker-logo--genial{ height: 62px; }  /* 52px + 20% = 62px */
}

/* === PATCH · Abrir Conta: foto visível + scroll habilitado === */

/* 2.1 — Define altura equilibrada para a foto no mobile */
@media (max-width: 768px){
  .abrir-conta__visual{
    height: 35vh !important;   /* altura fixa para cortar a foto adequadamente */
    min-height: 200px !important;
  }
  .abrir-conta__image{
    object-fit: cover !important;
    object-position: center 50% !important; /* foca o meio da imagem */
  }
}

/* 2.2 — DESABILITA o scroll da página mas permite scroll apenas no formulário */
@media (min-width: 769px){
  body.page-abrir-conta{
    overflow: hidden !important;  /* BLOQUEIA scroll da página */
  }
  .abrir-conta,
  .abrir-conta__grid{
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }
  .abrir-conta__form{
    height: 100vh !important;
    overflow-y: scroll !important; /* FORÇA scrollbar visível no formulário */
    overflow-x: hidden !important; /* bloqueia scroll horizontal */
    scrollbar-width: thin !important; /* scrollbar fina para Firefox */
    scrollbar-color: var(--muted) transparent !important; /* cor da scrollbar */
    /* Garante que a scrollbar seja sempre visível */
    scrollbar-gutter: stable !important;
  }
  /* Estiliza scrollbar para Webkit (Chrome, Safari, Edge) */
  .abrir-conta__form::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
  }
  .abrir-conta__form::-webkit-scrollbar-track {
    background: transparent !important;
    display: block !important;
  }
  .abrir-conta__form::-webkit-scrollbar-thumb {
    background: var(--muted) !important;
    border-radius: 4px !important;
    display: block !important;
    min-height: 40px !important;
  }
  .abrir-conta__form::-webkit-scrollbar-thumb:hover {
    background: var(--deep) !important;
  }
  .abrir-conta__visual{
    height: 100vh !important;     /* altura fixa para cortar a foto */
    min-height: 100vh !important;
    overflow: hidden !important; /* foto sem scroll */
  }
  .abrir-conta__image{
    object-fit: cover !important;
    object-position: center 45% !important; /* ajusta foco para área pai/filho */
  }
}

/* Ajustes do hero movidos para assets/css/pages/index.css */

/* ===== Abrir Conta · logos no header ===== */
.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 4px; /* aproxima do h1 */
}
.brand-row__sep{
  color: var(--muted);
  font-weight: 700;
  opacity: .75;
  line-height: 1;
}
.brand-row__logo{
  height: 28px;     /* ajuste fino do tamanho das corretoras */
  width: auto;
  display: block;
}
@media (max-width: 520px){
  .brand-row{ gap:10px }
  .brand-row__logo{ height: 24px }
}

/* Abrir Conta — manter Efrata | Ágora Genial na MESMA linha */
.abrir-conta__header .brand{
  width: auto !important;          /* antes: 100% — causava quebra de linha */
  flex-shrink: 0;                  /* evita "apertar" a logo da Efrata */
}

.brand-row{
  flex-wrap: nowrap;               /* força ficar tudo na mesma linha */
  gap: 14px;
}

.brand-row__logo{
  height: 32px;                    /* aumenta um pouco as logos */
  width: auto;
}

.brand-row__sep{
  margin: 0 4px;                   /* aproxima o separador */
  opacity: .6;
  font-weight: 600;
  font-size: 2rem;               /* aumenta o tamanho do separador */
  line-height: 1;
}

/* quando a tela ficar muito estreita, pode quebrar em 2 linhas com tamanhos menores */
@media (max-width: 560px){
  .brand-row{ flex-wrap: wrap; }
  .brand-row__logo{ height: 26px; }
}

/* ===== Abrir Conta · header no estilo da 2ª imagem ===== */

/* 1) Logo Efrata maior */
.abrir-conta__header .brand__logo-img{
  height: 60px !important;   /* antes ~40–46px */
  width: auto !important;
}

/* 2) Linha vertical grossa entre Efrata e as corretoras */
.brand-row{
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Estilo removido para evitar conflito com header */

/* 3) Logos Ágora/Genial maiores, com cantos levemente arredondados */
.brand-row__logo{
  height: 44px !important;    /* ajuste fino aqui (42–50px) */
  width: auto !important;
  border-radius: 10px;        /* visual de "ícone" arredondado */
  display: block;
}

/* 4) Quebra e redução no mobile para não estourar layout */
@media (max-width: 560px){
  .brand-row{ flex-wrap: wrap; gap: 12px; }
  .brand-row__sep::before{ 
    height: 36px; 
    top: 50%;
    transform: translateY(-50%);
  }
  .brand-row__logo{ height: 36px !important; border-radius: 8px; }
}

/* ==========================
   CORREÇÕES DE ESPAÇAMENTO
   ========================== */

/* 1) Empilhamento normal dos elementos do formulário */
.abrir-conta__form{
  justify-content: flex-start !important; /* em vez de space-between */
  gap: 20px;                               /* espaço consistente entre header, form e logos */
}

/* 2) Dá "respiro" abaixo do botão */
.btn--full{
  margin-bottom: 30px !important; /* Aumentado para dar mais espaço */
}

/* 3) Mantém distância das logos em relação ao botão */
.abrir-conta__footer-logos{
  margin-top: 0 !important; /* Remove margem extra pois o botão já tem margin-bottom */
  padding-top: 20px !important; /* Mantém o padding superior */
}

/* Título mais "esticado" e compacto */
.abrir-conta__header h1{
  letter-spacing: .3px;
  line-height: 1.08;
}

/* Em telas menores, controla o tamanho pra não quebrar em 3 linhas */
@media (max-width: 480px){
  .abrir-conta__header h1{ font-size: 2.3rem; }
}

/* ==========================
   FORÇA SCROLLBAR VISÍVEL
   ========================== */

/* Garante que a scrollbar seja sempre visível no formulário */
.abrir-conta__form {
  /* Força scrollbar sempre visível */
  scrollbar-gutter: stable !important;
}

/* Para Firefox */
.abrir-conta__form {
  scrollbar-width: thin !important;
  scrollbar-color: var(--muted) transparent !important;
}

/* Para Webkit (Chrome, Safari, Edge) */
.abrir-conta__form::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}

.abrir-conta__form::-webkit-scrollbar-track {
  background: transparent !important;
  display: block !important;
}

.abrir-conta__form::-webkit-scrollbar-thumb {
  background: var(--muted) !important;
  border-radius: 4px !important;
  display: block !important;
  min-height: 40px !important;
}

.abrir-conta__form::-webkit-scrollbar-thumb:hover {
  background: var(--deep) !important;
}

/* === Abrir conta: scroll só no painel direito QUANDO precisar (desktop) === */
@media (min-width: 769px){
  body.page-abrir-conta{
    overflow: hidden !important;                 /* página sem scroll */
  }

  .abrir-conta,
  .abrir-conta__grid{
    height: 100vh !important;
    overflow: hidden !important;
  }

  .abrir-conta__visual{
    height: 100vh !important;
    overflow: hidden !important;                 /* foto sem scroll */
  }

  .abrir-conta__form{
    height: 100vh !important;
    overflow-y: auto !important;                 /* só aparece quando "pede" */
    overflow-x: hidden !important;
    scrollbar-gutter: auto !important;           /* não reserva espaço fixo */
    justify-content: flex-start !important;      /* evita "space-between" */
    gap: 20px !important;
    min-height: 0 !important;                    /* evita bug de flex overflow */
  }
}

/* Neutraliza regras que forçam a barra visível o tempo todo */
.abrir-conta__form{
  scrollbar-gutter: auto !important;
}

/* ==========================
   ESTILIZAÇÃO DO CAMPO SELECT
   ========================== */

/* aplica o mesmo estilo dos inputs ao select */
.form-group input,
.form-group select{
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  color: var(--deep);
  background: #fff;
  transition: all .2s ease;
}

/* remove setinhas nativas onde possível, mantendo aspecto clean */
.form-group select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* foco e estados de validação também no select */
.form-group select:focus{
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(65,111,64,.1);
}

.form-group select.success{
  border-color:#27ae60;
  background:#f8fff9;
}

.form-group select.error{
  border-color:#e74c3c;
  background:#fff8f8;
}

/* === Abrir Conta (desktop): foto fixa à esquerda + scroll só no miolo do formulário === */
@media (min-width: 769px){
  /* trava o layout em 100vh e bloqueia scroll da página */
  body.page-abrir-conta{ overflow: hidden !important; }

  .abrir-conta__grid{
    height: 100vh !important;
    overflow: hidden !important;
  }

  .abrir-conta__visual{
    height: 100vh !important;
    overflow: hidden !important;   /* foto não rola */
  }

  /* painel direito em 3 linhas: header | MIolo rolável | logos */
  .abrir-conta__form{
    height: 100vh !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto;  /* topo / meio / rodapé */
    gap: 18px !important;
    overflow: hidden !important;        /* quem rola é só o miolo */
    max-width: 540px !important;        /* um pouquinho mais largo, opcional */
  }

  /* miolo rolável (campos + checkbox + botão) */
  .abrir-conta__form-fields{
    min-height: 0 !important;          /* libera o overflow no grid */
    overflow-y: auto !important;        /* <- scrollbar aparece só quando precisa */
    overflow-x: hidden !important;
    padding-right: 8px;                 /* respiro pro trilho da scrollbar */
  }

  /* espaçamentos seguros entre botão e logos */
  .btn--full{ margin-top: 16px !important; }
  .abrir-conta__footer-logos{
    border-top: 1px solid var(--border);
    padding-top: 16px !important;
    margin-top: 0 !important;
  }
}

/* Combobox elegante – mesmo visual dos inputs */
.form-group select{
  width:100%;
  padding:14px 44px 14px 16px;            /* espaço p/ a seta */
  border:2px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  color:var(--deep);
  font-size:1rem;
  font-weight:500;
  line-height:1.2;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23416F40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}

.form-group select:hover{ border-color:#b8c8b8; }
.form-group select:focus{
  outline:0;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(65,111,64,.12);
}

/* Placeholder "Selecione…" em cinza até escolher */
.form-group select:invalid{ color:#8c8c8c; }
.form-group select option[disabled][value=""]{ color:#8c8c8c; }

/* Remove a seta do IE/Edge antigo, se aparecer */
select::-ms-expand{ display:none; }

/* ==========================
   Páginas Legais – esquema CTA (texto escuro, fundo claro)
   ========================== */
.page-legal .about-title{ background: var(--light); }
.page-legal .about-title h1{ color:#1a1a1a; }
.page-legal .about-content{ background: var(--light); }
.page-legal .about-content h2,
.page-legal .about-content p,
.page-legal .about-content li{ color:#1a1a1a; }

/* === Abrir Conta (mobile): logo sempre visível e scroll só no miolo === */
@media (max-width: 768px){
	.abrir-conta__form{
		display: grid !important;
		grid-template-rows: auto 1fr auto !important; /* header | campos | logos */
		height: 65vh !important;
		overflow: hidden !important; /* quem rola é só o miolo */
	}
	.abrir-conta__form-fields{
		min-height: 0 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding-right: 8px; /* respiro da barra de rolagem */
	}
	.abrir-conta__footer-logos{
		border-top: 1px solid var(--border);
		padding-top: 16px !important;
	}
}

/* === Abrir Conta (mobile): logos aparecem ao final e ficam “fixas” no rodapé === */
@media (max-width: 768px){
	/* deixa a página rolar normalmente */
	.abrir-conta__grid,
	.abrir-conta__form{
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		display: block !important;
	}
	/* o miolo não rola sozinho; dá espaço para as logos sticky */
	.abrir-conta__form-fields{
		overflow: visible !important;
		padding-bottom: 90px !important; /* espaço para não sobrepor o botão */
	}
	/* logos “congelam” no rodapé quando alcançadas */
	.abrir-conta__footer-logos{
		position: sticky !important;
		bottom: 0 !important;
		background: #fff !important;
		border-top: 1px solid var(--border) !important;
		padding-top: 16px !important;
		z-index: 3 !important;
	}
}

/* Remover faixa branca inferior (mobile): usa 100svh e safe-area */
@media (max-width: 768px){
	.abrir-conta{ min-height: 100svh !important; }
	.abrir-conta__footer-logos{ padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
	.abrir-conta__footer-logos .brand-row{ margin-bottom: 0 !important; }
}

/* === Abrir conta (mobile) — reduzir espaço verde após o formulário === */
@media (max-width: 768px){
	/* altura aproximada das logos no rodapé */
	.abrir-conta__footer-logos{
		height: 68px !important;
		display: flex !important;
		align-items: center !important;
		padding-top: 10px !important;
		padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
	}
	/* reserva somente o necessário para não sobrepor o botão */
	.abrir-conta__form-fields{ padding-bottom: 68px !important; }
	/* margem menor no botão para não acumular com a área reservada */
	.btn--full{ margin-bottom: 6px !important; }
}