/* Página Banking – estilos específicos */

/* Hero com carrossel de backgrounds */
.page-banking .hero{
	position:relative; padding:80px 0 75px; overflow:hidden;
	border-bottom:1px solid var(--border); min-height:650px;
	display:flex; align-items:center;
}

/* Backgrounds do carrossel - Elementos sobrepostos para transição suave */
.page-banking .hero-bg {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	z-index: 1;
}

.page-banking .hero-bg.active { opacity: 1; }

.page-banking .hero-bg.bg-1 { background-image: url('../../img/pexels-karolina-grabowska-5717809.jpg'); background-position: center 70%; }
.page-banking .hero-bg.bg-2 { background-image: url('../../img/pexels-olly-840996.jpg'); background-position: center 50%; }
.page-banking .hero-bg.bg-3 { background-image: url('../../img/pexels-pavel-danilyuk-7191166.jpg'); background-position: center 70%; transform: scaleX(-1); }

.page-banking .hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(38, 61, 41, 0.7);
	z-index: 2;
}

/* Grid do hero (replicado do index.css) */
.page-banking .hero__grid{
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 56px;
	align-items: center;
	padding-top: 120px;
}

.page-banking .hero__text{
	max-width: 1800px;
	color: var(--black);
}

.page-banking .hero__text h1{ 
	color: #ffffff; 
	font-weight: 800;
	margin-bottom: 1.2rem;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	transform: translate(var(--hero-titulo-x), var(--hero-titulo-y));
}

.page-banking .hero__text p{ 
	color: #ffffff; 
	max-width: 1600px; 
	margin: .6rem 0 1.4rem;
	font-size: 1.1rem;
	line-height: 1.6;
	text-align: justify;
	transform: translate(var(--hero-paragrafo-x), var(--hero-paragrafo-y));
}

.page-banking .hero__actions{ 
	display: flex; 
	gap: 12px; 
	flex-wrap: wrap; 
	margin: 1.5rem 0;
	transform: translate(var(--hero-botoes-x), var(--hero-botoes-y));
}

.page-banking .hero__note{ 
	margin-top: 1rem; 
	color: #ffffff; 
	font-size: .95rem; 
	font-weight: 600;
	transform: translate(var(--hero-nota-x), var(--hero-nota-y));
}

/* Overlay do hero para melhor legibilidade do texto - removido, usa estrutura padrão */
/* Estilos antigos removidos - agora usa a estrutura padrão do hero__grid */
.page-banking .btn-primary{ 
	background:var(--light); 
	color:var(--deep); 
	border:none; 
	font-weight:800; 
	padding: var(--btn-hero-padding-y) var(--btn-hero-padding-x); 
	border-radius: var(--btn-hero-border-radius); 
	box-shadow:var(--shadow); 
	text-decoration: none; 
	font-size: var(--btn-hero-font-size);
	min-width: var(--btn-hero-width);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-banking .btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); padding:12px 20px; border-radius:12px; font-weight:700 }

.page-banking .section{ padding: clamp(23.99px, 3.427vw, 41.126px) 0 }
.page-banking .section-header{ margin-bottom:26px }
.page-banking .eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--green); font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:12px }
.page-banking .title{ font-weight:800; font-size:clamp(26px,3.4vw,40px); margin:6px 0 10px; text-wrap:balance }
.page-banking .sub{ color:var(--muted); max-width:720px }

.page-banking .cards{ 
  display: flex; 
  gap: 18px; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
  padding: 20px 0 40px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  position: relative;
  min-height: 280px;
}

.page-banking .cards::-webkit-scrollbar {
  height: 6px;
}

.page-banking .cards::-webkit-scrollbar-track {
  background: transparent;
}

.page-banking .cards::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.page-banking .cards::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}
.page-banking .card{ 
  background:#fff; 
  border:1px solid var(--border); 
  padding:20px; 
  border-radius:14px; 
  box-shadow:var(--shadow); 
  display:grid; 
  gap:12px; 
  transition:transform .2s ease, box-shadow .2s ease;
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.page-banking .card:hover{ transform:translateY(-8px); box-shadow:0 16px 32px rgba(0,0,0,.15) }
.page-banking .card .badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--green); background:#edf4ef; padding:6px 10px; border-radius:999px; border:1px solid #dfe9e3 }
.page-banking .card h3{ margin:4px 0 0; font-size:20px; font-weight:800; color:var(--deep) }
.page-banking .card p{ margin:0; color:#1a1a1a; opacity:.86 }
/* Responsividade do hero (replicada do index.css) */
@media (max-width: 820px) {
	.page-banking .hero__grid { 
		grid-template-columns: 1fr !important; 
		gap: 20px !important; 
		text-align: center !important;
	}
}

@media (max-width: 768px) {
	.page-banking .hero { 
		padding: 120px 0 90px !important; 
		min-height: 500px !important; 
		margin-top: 0 !important;
	}
	.page-banking .hero .container {
		padding: 0 20px !important;
	}
	.page-banking .hero__text h1 { 
		font-size: 2.2rem !important; 
	}
	.page-banking .hero__text p { 
		font-size: 1rem !important;
		text-align: center !important;
		max-width: 100% !important;
	}
	.page-banking .hero__text {
		max-width: 100% !important;
		width: 100% !important;
	}
	.page-banking .hero__actions {
		justify-content: center !important;
	}
	.page-banking .hero__note {
		text-align: center !important;
	}
}

@media (max-width: 480px) {
	.page-banking .hero { 
		padding: 90px 0 70px; 
		min-height: 400px; 
	}
}

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

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

@media (max-width: 400px) {
	.page-banking .hero {
		padding: 80px 0 60px;
		min-height: 350px;
	}
}

/* Responsividade mobile simplificada */
@media (max-width: 768px) {
	.page-banking .hero { 
		padding: 80px 0 80px; 
		min-height: 450px; 
	}
	
	.page-banking .hero__grid {
		gap: 16px !important;
	}
	
	.page-banking .hero__text {
		text-align: center !important;
	}
	
	.page-banking .hero__actions {
		justify-content: center !important;
		width: 100% !important;
	}
}

/* HERO — largura do bloco de texto (título + parágrafo) */
.page-banking .hero__text{
	max-width: 1200px !important;
	width: 1200px !important;
}
@media (max-width: 820px){
	.page-banking .hero__text{
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width:1024px){ 
  .page-banking .cards{ 
    gap: 16px; 
  }
  .page-banking .card{ 
    min-width: 300px; 
    max-width: 300px; 
  }
}
@media (max-width:640px){ 
  .page-banking .cards{ 
    gap: 14px; 
  }
  .page-banking .card{ 
    min-width: 280px; 
    max-width: 280px; 
  }
}

/* Cards responsivos para dispositivos muito pequenos */
@media (max-width: 400px) {
  .page-banking .cards{ 
    gap: 12px !important; 
    padding: 16px 0 32px 0 !important;
  }
  .page-banking .card{ 
    min-width: 260px !important; 
    max-width: 260px !important; 
    padding: 16px !important;
  }
  .page-banking .card h3 {
    font-size: 18px !important;
    margin: 2px 0 0 !important;
  }
  .page-banking .card p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .page-banking .card .badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

.page-banking .band{ background: var(--deep); border-top:1px solid #d9cdb3; border-bottom:1px solid #d9cdb3 }
.page-banking .band-inner{ display:grid; gap:18px; grid-template-columns:1.4fr .9fr; align-items:center }
.page-banking .band .actions{ display: flex; justify-content: flex-end; }
.page-banking .band .btn-primary{ padding: 18px 32px; font-size: 18px; border-radius: 14px; font-weight: 800; }
.page-banking .band .title{ color: #fff; font-size: 2.5rem; font-weight: 800; }
.page-banking .band .sub{ color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.6; }
@media (max-width:960px){ .page-banking .band-inner{ grid-template-columns:1fr } }

/* Responsividade geral para < 400px */
@media (max-width: 400px) {
  .page-banking .section { padding: 20px 0 !important; }
  .page-banking .title { font-size: 24px !important; }
  .page-banking .sub { font-size: 14px !important; line-height: 1.4 !important; }
}

.page-banking .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px }
.page-banking .step{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 8px 20px rgba(0,0,0,.06); position:relative }
.page-banking .step-number{ position:absolute; top:-12px; left:-12px; background:var(--green); color:#fff; font-weight:800; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; box-shadow:var(--shadow) }
.page-banking .step h4{ margin:12px 0 6px; font-weight:800 }
.page-banking .step p{ margin:0; color:var(--muted) }
@media (max-width:1024px){ .page-banking .steps{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .page-banking .steps{ grid-template-columns:1fr } }

.page-banking .cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.page-banking .case{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:grid }
.page-banking .case .cover{ height:180px; background:#dfe7df center/cover no-repeat }
.page-banking .case .body{ padding:18px; display:grid; gap:10px }
.page-banking .case h4{ margin:0; font-weight:800; color:var(--deep) }
.page-banking .case p{ margin:0; color:#1a1a1a; opacity:.88 }
@media (max-width:1024px){ .page-banking .cases{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .page-banking .cases{ grid-template-columns:1fr } }

.page-banking .cta{ background: linear-gradient(180deg, #f7f6f3, #f1efe9); border:1px solid var(--border) }
.page-banking .cta-inner{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center }
.page-banking .cta .title{ margin:0 }
.page-banking .cta-actions{ display:inline-grid; grid-auto-flow:column; gap:12px }
@media (max-width:800px){ .page-banking .cta-inner{ grid-template-columns:1fr } }

.page-banking .partners{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; align-items:center }
.page-banking .partner{ height:60px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--border) }
.page-banking .partner img{ max-height:40px; width:auto }
@media (max-width:960px){ .page-banking .partners{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:560px){ .page-banking .partners{ grid-template-columns:repeat(2,1fr) } }

.page-banking .faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:900px){ .page-banking .faq-grid{ grid-template-columns:1fr } }
.page-banking .accordion{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden }
.page-banking .acc-item + .acc-item{ border-top:1px solid var(--border) }
.page-banking .acc-trigger{ width:100%; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:18px; background:transparent; border:none; text-align:left; font-weight:800; color:var(--deep) }
.page-banking .acc-panel{ display:grid; transition:grid-template-rows .25s ease; grid-template-rows:0fr }
.page-banking .acc-panel[aria-hidden="false"]{ grid-template-rows:1fr }
.page-banking .acc-content{ overflow:hidden; padding:0 18px 0 18px }
.page-banking .acc-content > div{ padding:10px 0 18px; color:#1a1a1a }