/* ===== Base ===== */
body{
  margin:0;
  background:#F4F5F7;
  font-family:'Montserrat', Arial, sans-serif;
  color:#203040;
}

/* ===== Header ===== */
.banamex-header{
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  padding:.5rem 0;
}
.banamex-navbar{
  display:flex; align-items:center; justify-content:space-between;
  max-width:600px; margin:0 auto; padding:0 1rem; gap:1rem; min-height:56px;
}
.logo-header{ height:40px; width:auto; margin-right:12px; }
.navbar-title{ font-size:.95rem; color:#7b8a93; flex:1; text-align:center; letter-spacing:.01em; }
.menu-btn{
  background:#ffd6e3; border:none; border-radius:14px; width:40px; height:40px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.10); cursor:pointer;
}
.menu-btn span{ width:18px; height:2px; background:#fff; margin:2.5px 0; border-radius:2px; }

/* ===== HERO ===== */
.hero-section{
  /* degradado oscuro como referencia */
  background:linear-gradient(160deg,#1f2428 0%,#101317 100%);
  color:#fff; max-width:600px; margin:0 auto; border-radius:20px 20px 0 0;
  box-shadow:0 4px 28px rgba(0,0,0,.18);
  padding:2rem 1rem 2.2rem; position:relative; overflow:hidden;
}

/* Sticker Momentos: rectángulo redondeado + "pestaña" curva a la izquierda */
.hero-logo-wrap{
  position:absolute; top:.9rem; right:.7rem;     /* más pegado a la derecha */
  background:#fff; border-radius:16px;
  padding:.55rem .95rem;
  box-shadow:0 6px 18px rgba(2,24,31,.14);
  display:flex; align-items:center; min-width:120px; z-index:2;
}
.hero-logo-wrap::before{
  content:"";
  position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; background:#fff;
  border-top-left-radius:16px; border-bottom-left-radius:16px;
  box-shadow:0 6px 18px rgba(2,24,31,.14);      /* simula la pestaña curva */
}
.momentos-logo{ width:118px; height:auto; display:block; }

/* Layout interior del hero */
.hero-flex{
  display:flex; flex-direction:row; align-items:center; /* centrado vertical */
  justify-content:space-between; width:100%; gap:1.4rem; position:relative; z-index:1;
}
.hero-left{ flex:1 1 60%; display:flex; flex-direction:column; gap:.8rem; min-width:240px; }

/* Etiqueta con línea roja */
.hero-tag{
  display:inline-block; font-size:1rem; font-weight:600; opacity:.95;
  border-left:4px solid #fa218c; padding-left:.55rem;
}

.hero-title{
  font-size:2.6rem; line-height:1.06; font-weight:700;
  margin:0 0 1rem 0; letter-spacing:-.01em;
}

/* Botón blanco con texto rojo */
.cta-btn{
  padding:.85rem 1.4rem; background:#fff; color:#e7333f; font-size:1.02rem;
  border:none; border-radius:18px; font-weight:700;
  box-shadow:0 10px 22px rgba(0,0,0,.28), 0 2px 0 rgba(8,34,52,.05) inset;
  cursor:pointer; transition:transform .08s ease, background .18s ease;
}
.cta-btn:hover{ background:#ffe9ee; }
.cta-btn:active{ transform:translateY(1px); }

/* Tarjetas a la derecha alineadas con el título (centradas verticalmente) */
.hero-right{ flex:1 1 40%; display:flex; align-items:center; justify-content:flex-end; }
.momentos-img{
  width:210px; max-width:100%; display:block; margin:0;
  background:transparent; border:0;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
}

/* ===== Sección Experiencias ===== */
.experiencias-section{ max-width:600px; margin:0 auto; padding:2.3rem 1rem 1.6rem; text-align:center; }
.experiencias-title{ font-size:1.62rem; color:#0b6a79; font-weight:700; margin-bottom:1.4rem; line-height:1.2; }

.experiencias-card{
  background:#eef5f7; border-radius:18px; box-shadow:0 1px 0 rgba(5,39,54,.02);
  padding:1.2rem 1rem; max-width:520px; margin:0 auto; text-align:left; color:#16323c;
}
.experiencias-card strong{ font-size:1.08rem; font-weight:700; color:#07232c; display:block; margin-bottom:.45rem; }
.experiencias-card hr{ border:none; border-top:1px solid #c9d6db; margin:.55rem 0 .9rem; }
.experiencias-card p{ margin:0 0 .6rem; line-height:1.6; }
.experiencias-blue{ color:#0a6e8a; font-weight:600; }

/* ===== Responsive ===== */
@media (max-width:700px){
  .banamex-navbar,.hero-section,.experiencias-section{ max-width:98vw; padding-left:.5rem; padding-right:.5rem; }
  .hero-section{ border-radius:0; padding-top:1.1rem; padding-bottom:1.1rem; }
  /* En móvil mantenemos disposición en fila para que las tarjetas sigan a la derecha */
  .hero-flex{ flex-direction:row; align-items:center; }
  .hero-left{ min-width:0; }
  .hero-title{ font-size:2.28rem; }
  .momentos-logo{ width:104px; }
  .momentos-img{ width:160px; }
  .experiencias-card{ padding:1rem .7rem; border-radius:14px; }
  .experiencias-title{ font-size:1.34rem; }
}

/* ===== PANTALLA 3 (Acceso) ===== */
.bnx-body { background:#fff; color:#132a35; font-family:'Montserrat', Arial, sans-serif; }

.bnx-topbar { height:22px; display:flex; align-items:center; padding:12px 16px 0; }
.bnx-burger { background:none; border:0; padding:0; width:28px; height:20px; display:flex; flex-direction:column; justify-content:space-between; }
.bnx-burger span{display:block; height:2.4px; background:#214b5a; border-radius:3px}

/* Hero con flor recortada arriba-derecha */
.welcome-hero{
  --flower-size: 78vw;        /* tamaño de la flor */
  --flower-top: -8vw;          /* sube/baja la flor */
  --flower-right: -6vw;        /* empuja hacia la derecha */
  position:relative;
  padding: min(5vw,28px) 16px 0;
  overflow: visible;
}
.welcome-hero::before{
  content:"";
  position:absolute;
  top: var(--flower-top);
  right: var(--flower-right);
  width: var(--flower-size);
  height: var(--flower-size);
  background: url("/static/img/LogoBanamex2.png") no-repeat 100% 0 / contain;
  pointer-events:none;
  z-index:0; /* detrás del texto */
  opacity:1;
}

/* Copys y layout bajo la flor */
.welcome-copy{ position:relative; z-index:1; max-width: 680px; margin: clamp(24px, 20vw, 33vw) 0 0 0; }
.welcome-title{ font-size: clamp(20px, 4.5vw, 26px); line-height:1.15; margin: 0 0 6px; font-weight:700; color:#1f3842; }
.welcome-sub{ font-size: clamp(14px, 3.5vw, 18px); color:#2e6a80; margin:0 0 20px; font-weight:600; }

.welcome-label{ display:flex; align-items:center; gap:10px; font-weight:600; color:#233a45; margin:0 0 8px; }
.help-dot{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #c8d7de; color:#2a5160; font-weight:700;
}

.input-wrap{
  background:#fff; border:2px solid #cfe1e7; border-radius:16px;
  box-shadow: 0 2px 0 0 rgba(33, 77, 92, .18) inset;
  height:48px; display:flex; align-items:center; padding:0 12px; max-width: 640px;
}
.bnx-input{
  width:100%; height:100%; border:none; outline:none; font-size:18px; letter-spacing:1px;
  color:#1f3842; background:transparent;
}
.bnx-input::placeholder{ color:#9fb2bb; }

/* Hint bajo el input */
.hint{ margin: 10px 0 20px; color:#264e5d; font-weight:500; }
.welcome-link{ color:#0092ae; text-decoration:none; font-weight:700; }

/* Botón Continuar */
.btn-continue{
  width:100%;
  max-width:640px;
  height:48px;
  border:none; border-radius:14px;
  font-weight:700; font-size:18px;
  background:#d6dde2; color:#7f8e96;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  margin: 10px 0 22px;
}
.btn-continue.enabled{
  background:#0b3948; color:#fff;
  box-shadow: 0 6px 0 0 rgba(11,57,72,.28);
}

/* Acciones rápidas (abajo): más pequeñas y alineadas */
.quick-actions{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap: 8px 12px;
  max-width: 780px;
  margin: 18px auto 26px;
  padding: 0 8px 8px;
}
.qa-item{
  background:transparent; border:0; padding:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.qa-icon{
  width:66px; height:66px; border-radius:18px;
  background: #ffecee;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
.qa-icon img{ width:28px; height:28px; display:block; }
.qa-label{ font-size:15px; line-height:1.15; color:#1f3842; font-weight:600; }

/* Pequeños ajustes responsivos */
@media (min-width:480px){
  .bnx-burger{ width:30px; height:22px; }
  .welcome-hero{ --flower-size: 70vw; --flower-top: -7vw; --flower-right:-5vw; }
  .qa-icon{ width:70px; height:70px; }
  .qa-icon img{ width:30px; height:30px; }
}
@media (min-width:768px){
  .welcome-hero{ --flower-size: 56vw; --flower-top: -6vw; --flower-right:-5vw; }
  .welcome-copy{ margin-top: clamp(40px, 18vw, 320px); }
}