:root{
  --blue:#003399;
  --blue-dark:#00266e;
  --blue-light:#e8edfb;
  --orange:#ec7000;
  --orange-dark:#c95e00;
  --text:#0a0a0a;
  --text-muted:#555;
  --text-dim:#888;
  --border:#e2e2e2;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --radius:5px;
  --radius-lg:14px;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
h1,h2,h3,h4{font-weight:800; letter-spacing:-0.01em;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--blue); display:inline-block;}
.section-title{font-size:clamp(26px,4vw,40px); margin-bottom:16px;}
.section-sub{color:var(--text-muted); font-size:16px; max-width:620px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius); font-weight:700; font-size:14px;
  letter-spacing:0.01em; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px -8px rgba(0,51,153,.5);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{background:transparent; border-color:var(--blue); color:var(--blue);}
.btn-outline:hover{background:var(--blue); color:#fff;}
.btn-whatsapp{background:#25D366; color:#fff; box-shadow:0 8px 20px -8px rgba(37,211,102,.5);}
.btn-whatsapp:hover{background:#20bd5c;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}

/* Header — laranja (#EC7000), igual ao site original: barra de contato + logo duplo (AJ Capital
   + selo "Representante Autorizado Itaú") + menu com dropdown "Consórcio" */
header{position:fixed; top:0; left:0; right:0; z-index:100; background:var(--orange);}
.top-bar{background:var(--orange-dark); padding:6px 0;}
.top-bar-inner{display:flex; justify-content:flex-end; align-items:center; gap:20px;}
.top-link{font-size:12px; color:#fff; opacity:.92; display:inline-flex; align-items:center; gap:5px; transition:opacity .2s;}
.top-link:hover{opacity:1;}
.main-header-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0;}
.logo-group{display:flex; align-items:center; gap:14px;}
.logo{display:flex; align-items:center;}
.logo img{height:34px; width:auto; display:block;}
.itau-badge{display:flex; align-items:center;}
.itau-badge img{height:46px; width:auto; display:block;}
nav.main-nav{display:flex; align-items:center; gap:22px;}
nav.main-nav a{font-size:14px; color:#fff; font-weight:600; transition:opacity .2s;}
nav.main-nav a:hover{opacity:.8;}
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:inherit; font-size:14px; color:#fff; font-weight:600; padding:0;}
.nav-dropdown-list{
  display:none; position:absolute; top:100%; left:0; background:var(--orange); min-width:200px;
  border-radius:6px; overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,.18); margin-top:12px; padding:6px 0;
}
.nav-dropdown:hover .nav-dropdown-list, .nav-dropdown.open .nav-dropdown-list{display:block;}
.nav-dropdown-list a{display:block; padding:10px 16px; color:#fff; font-size:13px; font-weight:500;}
.nav-dropdown-list a:hover{background:var(--orange-dark);}
.header-actions{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}
nav.main-nav.open{
  display:flex; flex-direction:column; align-items:flex-start; position:fixed; top:96px; left:0; right:0;
  background:var(--orange); padding:20px 24px; gap:4px; z-index:99;
  box-shadow:0 12px 24px rgba(0,0,0,.15);
}
nav.main-nav.open a{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.2); width:100%;}
nav.main-nav.open .nav-dropdown{width:100%;}
nav.main-nav.open .nav-dropdown-toggle{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.2); width:100%; justify-content:space-between;}
nav.main-nav.open .nav-dropdown-list{position:static; box-shadow:none; margin-top:0; padding-left:14px; background:var(--orange-dark);}
@media (max-width:900px){ .hide-mobile{display:none;} }

/* Hero */
.hero{
  position:relative; padding:170px 0 90px; overflow:hidden;
  background:#0a1128;
  color:#fff;
}
.hero-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:1; transition:opacity .3s;}
.hero-video{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:none;}
.hero-fade{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(3,10,35,.78) 0%, rgba(3,10,35,.42) 42%, rgba(3,10,35,.08) 70%, rgba(3,10,35,0) 100%);}
.hero .wrap{position:relative; z-index:2;}
.hero-content{max-width:640px;}
.hero h1{font-size:clamp(32px,5vw,52px); line-height:1.1; margin-bottom:18px; text-shadow:1px 1px 8px rgba(0,0,0,.75);}
.hero p{font-size:17px; color:#fff; max-width:520px; margin-bottom:32px; text-shadow:1px 1px 6px rgba(0,0,0,.75);}

/* Simulador (hero form card) */
.sim-card{
  background:#fff; border-radius:var(--radius-lg); padding:32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35); color:var(--text);
  max-width:420px; width:100%;
}
.sim-card h3{font-size:19px; margin-bottom:18px;}
.tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.tab-btn{
  flex:1; padding:10px 10px; border-radius:var(--radius); border:1px solid var(--border);
  background:#fff; color:var(--text-muted); font-weight:700; font-size:12.5px; cursor:pointer;
  transition:all .2s; min-width:70px;
}
.tab-btn.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:6px; font-weight:700;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:inherit; font-size:14px; outline:none; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical; min-height:90px;}
.field.has-error input{border-color:#e0433c;}
.field-error{display:none; color:#e0433c; font-size:12px; margin-top:5px;}
.field.has-error .field-error{display:block;}
.form-status{font-size:13px; margin-top:12px; min-height:16px;}
.form-status.ok{color:#1a8f4c;}
.form-status.err{color:#e0433c;}

/* Cards / grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; box-shadow:0 6px 20px -12px rgba(0,0,0,.12);}
.card h3{font-size:18px; margin-bottom:10px;}
.card p{color:var(--text-muted); font-size:14.5px;}
.card .icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-light); color:var(--blue); font-size:22px; margin-bottom:16px;
}

/* Benefícios / lista com check */
.benefit-list{margin-top:18px;}
.benefit-list li{font-size:15px; color:var(--text-muted); padding-left:28px; position:relative; margin-bottom:12px;}
.benefit-list li::before{content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:900;}

/* Catálogo (créditos disponíveis) */
.catalog-controls{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:32px;}
.catalog-sort{display:flex; align-items:center; gap:10px;}
.catalog-sort label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:700;}
.catalog-sort select{
  background:#fff; border:1px solid var(--border); color:var(--text); padding:10px 14px;
  border-radius:var(--radius); font-family:inherit; font-size:13px; font-weight:600; outline:none; cursor:pointer;
}
.catalog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.catalog-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; box-shadow:0 6px 20px -14px rgba(0,0,0,.12);}
.catalog-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.catalog-badge-cat{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue);}
.catalog-badge-status{font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#0d5c33; background:#d3f5e2; padding:4px 10px; border-radius:100px;}
.catalog-credit-lbl{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.catalog-credit-val{font-size:24px; font-weight:800; color:var(--text); margin-bottom:14px;}
.catalog-parcela{border-top:1px solid var(--border); padding-top:14px; margin-bottom:18px;}
.catalog-parcela .lbl{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}
.catalog-parcela .val{font-size:16px; font-weight:700; color:var(--blue); margin-top:4px;}
.catalog-ctas{display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.catalog-ctas .btn{width:100%; font-size:13px; padding:12px 18px;}

/* Nav categorias (grade de imagem) */
.nav-cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.nav-cat-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4;
  border:1px solid var(--border); cursor:pointer; background:none; padding:0; text-align:left; display:block;
}
.nav-cat-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.nav-cat-card:hover img{transform:scale(1.08);}
.nav-cat-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,10,40,0) 35%, rgba(0,10,40,.55) 70%, rgba(0,10,40,.9) 100%);}
.nav-cat-label{position:absolute; left:16px; bottom:18px; z-index:2; color:#fff; font-weight:800; font-size:16px; text-shadow:0 2px 8px rgba(0,0,0,.5);}
.nav-cat-arrow{
  position:absolute; right:14px; bottom:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(0,10,40,.5); border:1px solid rgba(255,255,255,.4); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .25s, transform .25s;
}
.nav-cat-card:hover .nav-cat-arrow{background:var(--blue); transform:translateX(3px);}

/* Parceiros */
.partners-grid{display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:center;}
.partners-grid img{height:36px; width:auto; filter:grayscale(100%); opacity:.7; transition:filter .25s, opacity .25s;}
.partners-grid img:hover{filter:grayscale(0%); opacity:1;}

/* Footer */
footer{background:#0a1128; color:#c7cee6; padding:60px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px;}
.footer-grid h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#7d89b3; margin-bottom:16px;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:#c7cee6; font-size:14px; transition:color .2s;}
.footer-grid a:hover{color:#fff;}
.footer-logo{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.footer-logo img.main-logo{height:34px; filter:brightness(0) invert(1);}
.footer-logo img.itau-badge-footer{height:48px;}
.footer-social{display:flex; gap:12px; margin-top:16px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:16px; transition:background .2s;
}
.footer-social a:hover{background:rgba(255,255,255,.18);}
.footer-bottom{border-top:1px solid #1c274d; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#7d89b3; font-size:12px;}

/* Carrossel do herói (setas + dots, igual ao original) */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px;
  border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:background .2s;
}
.hero-arrow:hover{background:rgba(255,255,255,.28);}
.hero-arrow.prev{left:16px;}
.hero-arrow.next{right:16px;}
.hero-dots{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; border:none; padding:0;}
.hero-dot.active{background:#fff; width:22px; border-radius:4px;}

/* Widget de WhatsApp (balão + foto, igual ao original) */
.wa-widget{position:fixed; bottom:24px; right:24px; z-index:90; display:flex; align-items:flex-end; gap:10px;}
.wa-widget-bubble{
  background:#fff; border-radius:14px; padding:12px 16px; max-width:220px; font-size:13px; color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.15); cursor:pointer; line-height:1.4;
}
.wa-widget-bubble .name{display:block; font-size:11px; color:var(--text-dim); margin-top:6px; font-weight:700;}
.wa-widget-avatar{
  width:54px; height:54px; border-radius:50%; overflow:hidden; border:3px solid #25D366; flex-shrink:0; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.2); position:relative;
}
.wa-widget-avatar img{width:100%; height:100%; object-fit:cover;}
.wa-widget-dot{position:absolute; bottom:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#25D366; border:2px solid #fff;}
@media (max-width:560px){ .wa-widget-bubble{display:none;} }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,10,30,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:26px; max-width:340px; width:100%; position:relative;
  animation:modalIn .25s ease;
}
@keyframes modalIn{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer;}
.modal-close:hover{color:var(--text);}
#modalOverlay .modal-box h3{text-align:center; font-size:17px; margin-bottom:12px;}
.modal-wa-badge{
  width:40px; height:40px; border-radius:50%; background:#25D366; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -6px rgba(37,211,102,.5);
}
.modal-wa-badge svg{width:20px; height:20px;}
.modal-wa-steps{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  font-size:9.5px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em;
  margin:0 0 16px;
}
.modal-wa-steps .arrow{color:var(--border);}
.modal-wa-steps .step.done{color:var(--blue);}
#modalOverlay .field{margin-bottom:10px;}
#modalOverlay .field label{margin-bottom:4px;}
#modalOverlay .field input{padding:11px 14px;}

/* Reveal (sempre visível — sem depender de JS) */
.reveal{}

@media (max-width:900px){
  nav.main-nav{display:none;}
  .menu-toggle{display:block;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .catalog-grid{grid-template-columns:repeat(2,1fr);}
  .nav-cat-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .partners-grid img{height:28px;}
  section{padding:60px 0;}
  .hero{padding:150px 0 60px;}
  .hero-content{max-width:100%;}
}
@media (max-width:560px){
  .catalog-grid{grid-template-columns:1fr;}
  .nav-cat-grid{grid-template-columns:1fr 1fr; gap:12px;}
}