*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',sans-serif;background:#F2F4F7;color:#1F2937}

/* styles unchanged, section removed only */

.topbar{display:flex;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:100}
.menu-btn{font-size:22px;background:none;border:none;color:#1D4ED8}
.logo-small{width:26px}
.brand-name-small{font-weight:600;font-size:14px}

.drawer{position:fixed;top:0;left:0;width:260px;height:100%;background:#111827;color:#fff;transform:translateX(-100%);transition:.3s;z-index:101}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;justify-content:space-between;padding:18px}
.drawer-menu .item{padding:14px;border-radius:8px;margin:6px;font-size:15px}
.drawer-menu .item.active,.drawer-menu .item:hover{background:#1D4ED8}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none}
.overlay.show{opacity:1;pointer-events:auto}

.hero{text-align:center;padding:36px 20px}
.hero-logo{width:90px}
.hero-title{font-size:36px;font-weight:800;color:#1D4ED8}
.hero-text{font-size:17px;font-weight:600;color:#374151;max-width:800px;margin:auto}

.carousel-wrapper{position:relative;max-width:1000px;margin:24px auto 2px;overflow:hidden}
.carousel-track{display:flex;transition:transform .6s ease}
.slide-inner{background:#fff;border-radius:20px;overflow:hidden}
.slide-inner img{width:100%;height:260px;object-fit:cover}
.slide-content{padding:22px;text-align:center}
.slide-content h3{font-size:24px;color:#1D4ED8}
.btn.primary{padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,#1D4ED8,#2563EB);border:none;color:#fff;font-weight:600}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#1D4ED8;color:#fff;font-size:28px;border:none;cursor:pointer}
.prev{left:12px}.next{right:12px}

.features{background:#F8FAFC;padding:14px 20px}
.features-wrapper{max-width:1000px;margin:auto;background:#fff;border-radius:24px;padding:28px 28px;box-shadow:0 16px 32px rgba(0,0,0,.08)}
.features h2{text-align:center;color:#1D4ED8;margin-top:0}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:600px;margin:18px auto 0}

.feature{background:#F9FAFB;border-radius:16px;padding:18px;text-align:center;font-size:22px}
.feature span{display:block;font-size:14px;font-weight:600}


footer{text-align:center;padding:24px;color:#6B7280}


/* Lista banca digital */
.banca-list{
  list-style:none;
  padding-left:0;
  margin:16px 0 24px 0;
}
.banca-list li{
  margin-bottom:8px;
  font-weight:500;
}

/* Simulador de divisas */
.simulator{
  max-width:520px;
  margin:24px auto 0;
  display:grid;
  gap:16px;
}

.sim-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sim-group label{
  font-size:14px;
  font-weight:600;
  color:#374151;
}

.sim-group select,
.sim-group input{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #D1D5DB;
  font-size:15px;
}

.sim-group select:focus,
.sim-group input:focus{
  outline:none;
  border-color:#1D4ED8;
}

/* Botón calcular simulador */
.sim-btn{
  margin-top:16px;
}

/* Botón Cambiar Divisas */
.sim-action-btn{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Botón Cambiar Divisas – estilo compacto */
.sim-action-btn{
  display: inline-flex !important;
  width: fit-content !important;
  padding: 12px 26px;
  font-size: 14px;
  border-radius: 999px;
}


.finex-card-carousel{
  position:relative;
  max-width:520px;
  margin:40px auto;
  overflow:hidden;
}

.card-track{
  display:flex;
  transition:transform .6s ease;
}

.card-slide{
  min-width:100%;
  display:flex;
  justify-content:center;
}

.card-slide img{
  width:100%;
  max-width:420px;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.card-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:#1D4ED8;
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

.card-btn.prev{left:10px}
.card-btn.next{right:10px}


/* ===== Carrusel 3D uniforme Finex (estable) ===== */
.finex-3d{
  perspective:1200px;
}

.finex-3d .card-track{
  transform-style:preserve-3d;
}

.finex-3d .card-slide{
  min-width:100%;
  display:flex;
  justify-content:center;
  transform:scale(.92) rotateY(-10deg);
  opacity:.85;
  transition:transform .6s ease, opacity .6s ease;
}

.finex-3d .card-slide:nth-child(2){
  transform:scale(.92) rotateY(0deg);
}

.finex-3d .card-slide:nth-child(3){
  transform:scale(.92) rotateY(10deg);
}

.finex-3d .card-slide img{
  box-shadow:0 28px 60px rgba(0,0,0,.35);
}


/* Título carrusel tarjetas */
.finex-card-title{
  text-align:center;
  font-size:26px;
  font-weight:800;
  color:#1D4ED8;
  margin:40px 0 20px;
}


/* Bloque negro tarjetas Finex */
.finex-card-block{
  max-width:1100px;
  margin:40px auto;
  padding:40px 24px;
  background:#ffffff;
  border-radius:28px;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

/* Ajuste título sobre fondo oscuro */
.finex-card-block .finex-card-title{
  color:#a3a126;
}


/* Ajuste ancho para igualar bloques superiores */
.finex-card-block{
  max-width:1000px;
}


/* Corrección final de alineación con bloques blancos */
.finex-card-block{
  max-width:1000px;
  margin:auto;
  padding:28px 28px;
}


/* Botón Elegir debajo del carrusel */
.finex-card-action{
  display:flex;
  justify-content:center;
  margin-top:28px;
}

/* ===== Sección ABD independiente ===== */
.abd-independent{
  padding:60px 20px;
  text-align:center;
}

.abd-title{
  font-size:26px;
  font-weight:800;
  color:#1D4ED8;
  margin-bottom:12px;
}

.abd-subtitle{
  font-size:15px;
  color:#374151;
  max-width:420px;
  margin:0 auto 28px;
  line-height:1.5;
}

.abd-cards{
  max-width:520px;
  margin:0 auto;
  display:grid;
  gap:20px;
}

.abd-card{
  background:#ffffff;
  border-radius:20px;
  padding:22px;
  text-align:left;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.abd-icon{
  width:44px;
  height:44px;
  background:#1D4ED8;
  color:#fff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:14px;
}

.abd-card h3{
  margin:0 0 6px;
  font-size:17px;
  color:#1F2937;
}

.abd-card p{
  margin:0;
  font-size:14px;
  color:#4B5563;
  line-height:1.4;
}


/* === FIX DEFINITIVO CARRUSEL HERO (CSS-first) === */
.carousel-track{
  display:flex;
  width:100%;
}

.slide{
  min-width:100%;
}

/* Reserva espacio para imágenes */
.slide-inner{
  aspect-ratio:16/9;
}

/* ===== Footer ABD visible y cercano ===== */
.abd-footer{
  padding:12px 20px 40px;
  background:transparent;
}

.abd-footer-box{
  max-width:520px;
  margin:0 auto;
  background:#fff;
  border-radius:22px;
  padding:28px 22px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}


/* === FIX REAL DEFINITIVO carrusel HERO (sin overlays, sin hacks) === */

/* Quitar restricción que rompe el flujo */
.slide-inner{
  aspect-ratio:auto;
  display:block;
}

/* Imagen controla su altura */
.slide-inner img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* Contenido vuelve a flujo normal */
.slide-content{
  position:static;
  padding:22px;
  background:#ffffff;
  text-align:center;
}

.slide-content h3{
  color:#1D4ED8;
}

.slide-content p{
  color:#374151;
}


/* === FIX FINAL botón retroceso carrusel HERO (sin mover layout) === */
.carousel-btn{
  z-index:20;
  pointer-events:auto;
}

.slide-content{
  pointer-events:auto;
}


/* === FIX botón retroceso carrusel TARJETAS === */
.finex-card-carousel .card-btn{
  z-index:20;
  pointer-events:auto;
}

.finex-card-carousel .card-track{
  pointer-events:auto;
}