:root{
      /* ATM look (como captura) */
      --navy-0:#0f1030;
      --navy-1:#17183A;   /* barra principal */
      --navy-2:#1F2150;   /* hover/active */
      --cyan:#18A7D8;     /* acento (TRANSPARENCIA) */
      --white:#ffffff;
      --text:#0A1A33;
      --muted:#6B7A99;
      --line: rgba(255,255,255,.14);
      --line2: rgba(10,26,51,.12);

      /* cards */
      --card:#ffffff;
      --cardStroke: rgba(10,26,51,.12);
      --shadow: 0 18px 60px rgba(11,43,92,.12);
      --radius: 18px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--font);
      color: var(--text);
      background: linear-gradient(180deg, #ECF3FF 0%, #F7FAFF 50%, #FFFFFF 100%);
      overflow-x:hidden;
    }

    .container{ width:min(1200px, 92vw); margin:0 auto; }
    a{color:inherit; text-decoration:none}
    button,input{font:inherit}

    /* =======================
       HEADER (IGUALITO)
       1) top bar blanco
       2) nav azul oscuro
    ======================= */
    .topbar{
      background:#fff;
      border-bottom:1px solid var(--line2);
      font-size:14px;
      color:#1a1a1a;
    }
    .topbar .wrap{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:18px;
      padding:10px 0;
      flex-wrap:wrap;
    }
    .topbar .item{
      display:inline-flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
    }
    .topbar svg{ width:16px; height:16px; color:#0B2B5C; }

    .navbar{
      background: linear-gradient(180deg, var(--navy-0), var(--navy-1));
      color:#fff;
      position:sticky;
      top:0;
      z-index:50;
      box-shadow: 0 12px 40px rgba(0,0,0,.12);
    }
    .navbar .wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 0;
    }

    .nav-left{
      display:flex;
      align-items:center;
      gap:18px;
      min-width: 320px;
    }
    .burger{
      width:44px;height:44px;
      border:0;
      border-radius:10px;
      background: rgba(255,255,255,.08);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.2s ease;
    }
    .burger:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .brand img{
      height:55px;
      width:auto;
      display:block;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
    }
    .brandStars{
      margin-left:2px;
      opacity:.9;
    }

    .nav-menu{
      display:flex;
      align-items:center;
      gap:22px;
      flex:1;
      justify-content:center;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size:14px;
      white-space:nowrap;
    }
    .nav-menu a{
      color:#fff;
      opacity:.9;
      padding:10px 6px;
      border-radius:10px;
      transition: .2s ease;
    }
    .nav-menu a:hover{ opacity:1; background: rgba(255,255,255,.08); }
    .nav-menu .active{ color: var(--cyan); opacity:1; }
    .nav-menu .sep{ opacity:.35; }

    .nav-right{
      min-width: 320px;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:12px;
    }
    .icon-btn{
      width:44px;height:44px;
      border:0;
      border-radius:12px;
      background: rgba(255,255,255,.08);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.2s ease;
    }
    .icon-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

    /* =======================
       MAIN (login + fondo bonito)
       - SIN rayas verticales
       - SIN rastro amarillo a carros
    ======================= */
main{
  position:relative;
  min-height: calc(100vh - 210px);
  padding: 0;              /* <-- clave */
  overflow:hidden;
  isolation:isolate;
}

    /* fondo city soft */
    .bg{
      position:absolute; inset:0; z-index:0;
      background:
        radial-gradient(900px 520px at 65% 18%, rgba(13,74,163,.10), transparent 62%),
        radial-gradient(900px 520px at 25% 10%, rgba(11,43,92,.08), transparent 62%),
        radial-gradient(900px 520px at 50% 110%, rgba(24,167,216,.08), transparent 62%),
        linear-gradient(180deg, #ECF3FF, #F7FAFF 55%, #FFFFFF);
    }
    .haze{
      position:absolute; inset:-18%; z-index:0;
      background:
        radial-gradient(circle at 20% 30%, rgba(13,74,163,.10), transparent 60%),
        radial-gradient(circle at 75% 35%, rgba(23,24,58,.10), transparent 60%),
        radial-gradient(circle at 50% 75%, rgba(24,167,216,.10), transparent 62%);
      filter: blur(26px);
      opacity:.40;
      animation: haze 18s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes haze{
      0%,100%{ transform: translate(-1.1%, -1%); }
      50%{ transform: translate(1.1%, 1%); }
    }

    /* skyline svg suave */
    .skyline{
      position:absolute; left:0; right:0; top: 80px;
      height: 340px;
      z-index:0;
      opacity:.18;
      pointer-events:none;
      filter: blur(.25px);
    }

    /* calle */
    .street{
      position:absolute; left:0; right:0; bottom:-2px;
      height: 260px;
      z-index:0;
      background:
        linear-gradient(180deg, rgba(23,24,58,.10), rgba(23,24,58,0) 25%),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(23,24,58,.10) 46%, rgba(23,24,58,.14));
    }

    /* carros (sin glow raro) */
    .traffic{
      position:absolute; left:0; right:0; bottom: 86px;
      height: 120px;
      z-index:1;
      pointer-events:none;
      opacity:.95;
    }
    .car{
      position:absolute;
      bottom: 6px;
      width: 86px;
      animation: drive 22s linear infinite;
      filter: drop-shadow(0 10px 14px rgba(11,43,92,.16));
    }
    .car.small{ width: 66px; bottom: 22px; opacity:.85; animation-duration: 28s; }
    .car.tiny{ width: 52px; bottom: 36px; opacity:.70; animation-duration: 34s; }
    .d1{ animation-delay: -6s; }
    .d2{ animation-delay: -14s; }
    .d3{ animation-delay: -20s; }
    .d4{ animation-delay: -28s; }

    @keyframes drive{
      from{ transform: translateX(-160px); }
      to{ transform: translateX(calc(100vw + 220px)); }
    }

    /* shell */
    .auth-shell{
      width: min(1040px, 92vw);
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items:stretch;
      position:relative;
      z-index:2;
    }
    .panel{
      border-radius: var(--radius);
      border: 1px solid var(--cardStroke);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .story{
      padding: 26px 26px 22px;
      display:flex;
      flex-direction:column;
      gap: 16px;
      min-height: 420px;
    }
    .story h1{
      margin:0;
      font-size: 38px;
      line-height: 1.05;
      letter-spacing: -.6px;
      color: #0B2B5C;
    }
    .story p{
      margin:0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.6;
      max-width: 58ch;
    }

    .quote{
      margin-top: 10px;
      padding: 16px 16px;
      border-radius: 14px;
      border: 1px solid rgba(10,26,51,.12);
      background: rgba(255,255,255,.95);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .quote-kicker{
      font-size: 11px;
      letter-spacing:.35px;
      text-transform: uppercase;
      color: #526489;
    }
    #quoteText{
      font-size: 16px;
      font-weight: 900;
      letter-spacing:.2px;
      line-height:1.2;
      color: #0B2B5C;
    }
    .fade{ animation: fade .45s ease; }
    @keyframes fade{
      from{ opacity:.0; transform: translateY(3px); }
      to{ opacity:1; transform: translateY(0); }
    }

    .status{
      margin-top:auto;
      padding-top: 12px;
      border-top: 1px dashed rgba(10,26,51,.14);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color: var(--muted);
      font-size: 12.5px;
    }
    .good{ color:#0A9B61; font-weight:900; }

    .auth{
      padding: 22px 22px 20px;
      display:flex;
      flex-direction:column;
      gap: 14px;
    }
    .auth h2{
      margin:0;
      font-size: 18px;
      letter-spacing:.2px;
      color: #0B2B5C;
    }
    .auth small{
      display:block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.4;
    }

    .form{
      display:flex;
      flex-direction:column;
      gap: 12px;
      margin-top: 6px;
    }
    .field{
      position:relative;
      border-radius: 16px;
      border: 1px solid rgba(10,26,51,.14);
      background: #fff;
      padding: 12px 12px 12px 44px;
      transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .field:focus-within{
      transform: translateY(-1px);
      border-color: rgba(13,74,163,.30);
      box-shadow: 0 10px 26px rgba(13,74,163,.08);
    }
    .field input{
      width:100%;
      border:none;
      outline:none;
      background: transparent;
      color: var(--text);
      font-size: 14px;
      padding: 2px 2px;
    }
    .field label{
      display:block;
      font-size: 11px;
      color: #526489;
      margin-bottom: 3px;
      letter-spacing:.3px;
      text-transform: uppercase;
    }
    .in-ico{
      position:absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width:24px;height:24px;
      border-radius: 10px;
      border: 1px solid rgba(10,26,51,.14);
      display:grid;
      place-items:center;
      background: rgba(11,43,92,.03);
      color: #0B2B5C;
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-top: 2px;
      font-size: 12.5px;
      color: var(--muted);
    }
    .row .links{ display:flex; gap:14px; }
    .chk{ display:flex; align-items:center; gap: 8px; user-select:none; }
    .chk input{ width:16px; height:16px; accent-color: #0D4AA3; }

    .link{ color:#0B2B5C; opacity:.85; }
    .link:hover{ opacity:1; text-decoration: underline; text-underline-offset: 3px; }

    .btn{
      margin-top: 4px;
      border:none;
      cursor:pointer;
      border-radius: 16px;
      padding: 12px 14px;
      color: #FFFFFF;
      font-weight: 900;
      letter-spacing:.4px;
      background: linear-gradient(90deg, #14335F, #2C6BB4);
      box-shadow: 0 14px 40px rgba(11,43,92,.16);
      transition: transform .15s ease, filter .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .toast{
      display:none;
      margin-top: 10px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(13,74,163,.22);
      background: rgba(13,74,163,.08);
      color: #0B2B5C;
      font-size: 12.5px;
      line-height: 1.4;
    }
    .toast.show{ display:block; }

    /* =======================
       FOOTER (IGUALITO)
    ======================= */
    footer{
      background: linear-gradient(180deg, #13143A, #0F1030);
      color:#fff;
    }
    .foot-main{
      padding: 54px 0 38px;
    }
    .foot-grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap: 28px;
      align-items:start;
    }

    .foot-brand img{
      height: 64px;
      width:auto;
      display:block;
      margin-bottom: 10px;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
    }
    .foot-brand p{
      margin: 12px 0 22px;
      color: rgba(255,255,255,.82);
      line-height: 1.7;
      font-size: 13.5px;
      max-width: 44ch;
    }

    .foot-title{
      font-weight: 900;
      letter-spacing:.4px;
      text-transform: uppercase;
      margin: 8px 0 14px;
      font-size: 18px;
    }
    .foot-list{
      display:flex;
      flex-direction:column;
      gap:10px;
      color: rgba(255,255,255,.86);
      font-size: 14px;
    }
    .foot-list a{
      color: rgba(255,255,255,.86);
      display:inline-flex;
      gap:10px;
      align-items:center;
    }
    .foot-list a:hover{ color:#fff; }
    .chev{ color: var(--cyan); font-weight:900; }

    .subscribe{
      margin-top: 14px;
      display:flex;
      align-items:center;
      gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,.40);
      padding: 10px 0 12px;
      max-width: 360px;
    }
    .subscribe input{
      flex:1;
      border:0;
      outline:0;
      background: transparent;
      color:#fff;
      font-size: 14px;
    }
    .subscribe input::placeholder{ color: rgba(255,255,255,.55); }
    .send{
      width:38px;height:38px;
      border:0;
      border-radius: 10px;
      background: rgba(255,255,255,.10);
      color:#fff;
      cursor:pointer;
      transition:.2s ease;
    }
    .send:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }

    .contact-item{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color: rgba(255,255,255,.86);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 10px;
    }
    .contact-item svg{ width:16px; height:16px; margin-top: 2px; color: var(--cyan); }

    .social{
      margin-top: 14px;
      display:flex;
      gap: 10px;
    }
    .social a{
      width:36px;height:36px;
      border-radius: 50%;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.10);
      transition:.2s ease;
    }
    .social a:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }
    .social svg{ width:16px; height:16px; color:#fff; }

    .foot-bottom{
      background:#fff;
      color:#000;
      border-top: 1px solid rgba(0,0,0,.08);
      padding: 14px 0;
      font-size: 13px;
    }
    .bottom-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .bottom-wrap a{ color:#000; }
    .bottom-wrap a:hover{ text-decoration: underline; text-underline-offset: 3px; }

    /* Responsive */
    @media (max-width: 1080px){
      .nav-left,.nav-right{ min-width: auto; }
      .nav-menu{ gap:16px; font-size:13px; }
    }
    @media (max-width: 980px){
      .nav-menu{ display:none; }
      .auth-shell{ grid-template-columns: 1fr; }
      .story{ min-height: auto; }
      .foot-grid{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px){
      .topbar .wrap{ gap:10px; }
      .brand img{ height:38px; }
      .foot-grid{ grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce){
      .haze, .car { animation:none !important; }
    }

/* ===== Botonera de servicios ===== */
.services-bar{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 520px){
  .services-bar{ grid-template-columns: 1fr; }
}

.service-btn{
  border: 1px solid rgba(10,26,51,.14);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  text-align:left;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11,43,92,.10);
  border-color: rgba(13,74,163,.25);
}
.service-btn.active{
  border-color: rgba(13,74,163,.45);
  box-shadow: 0 18px 34px rgba(13,74,163,.12);
}
.service-btn .t{
  font-weight: 900;
  color:#0B2B5C;
  font-size: 13.5px;
}
.service-btn .s{
  margin-top:4px;
  color: #526489;
  font-size: 12px;
  line-height: 1.35;
}

.content-host{
  margin-top: 12px;
  border-top: 1px dashed rgba(10,26,51,.14);
  padding-top: 12px;
}

.iframe-wrap{
  border: 1px solid rgba(10,26,51,.14);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  height: 420px;
}
.iframe-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}

.services-loading{ color:#526489; font-size:13px; }
.empty-state{ color:#526489; font-size:13px; padding:12px 0; }


.services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* ===== Botón tipo ATM (bonito desde el inicio) ===== */
.service-tile{
  display:flex;
  align-items:center;
  gap: 18px;
  text-align:left;
  padding: 18px 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #08309a 0%, #04257d 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;

  /* base bonita sin hover */
  box-shadow: 0 12px 24px rgba(3, 18, 70, .18);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
  min-height: 82px;
}

.service-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(3, 18, 70, .24);
  filter: brightness(1.03);
}

.service-ico{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(0, 255, 255, .08);
  border: 1px solid rgba(0, 255, 255, .12);
}

.service-ico img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.18));
}

.service-name{
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Viewer (modal) ===== */
.viewer{
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.viewer.hidden{ display:none; }

.viewer-card{
  width: min(980px, 96vw);
  background: #fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.25);
  text-align:left;
}

.viewer-title{
  padding: 14px 18px;
  font-weight: 900;
  color:#0B2B5C;
  border-bottom: 1px solid rgba(10,26,51,.10);
}

.viewer-body{
  padding: 0px;
}

.viewer-close{
  position:absolute;
  right: 26px;
  top: 18px;
  border:0;
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor:pointer;
}
.viewer-card{ position:relative; }

.viewer-iframe{
  width:100%;
  height: 70vh;
  border:0;
  border-radius: 12px;
}


/* ===== Modal elegante ===== */
.viewer{
  position: fixed;
  inset: 0;
  background: rgba(12,18,35,.58);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.viewer.hidden{ display:none; }

.viewer-card{
  width: min(440px, 92vw);
  background: #fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  text-align:center;
  position:relative;
}

.viewer-close{
  position:absolute;
  right: 14px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(10,26,51,.10);
  background: #fff;
  cursor:pointer;
  font-size: 18px;
  color: #7b8aa3;
}
.viewer-close:hover{ color:#0B2B5C; }

.login-head{
  padding: 0px;
}
.login-logo{
  width: 140px;
  height: auto;
  margin: 0 auto 10px;
  display:block;
}
.login-title{
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
  color:#0B2B5C;
}
.login-sub{
  margin: 6px 0 0;
  color:#6b7a90;
  font-size: 14px;
}

.login-body{
  padding: 14px 22px 22px;
}

.login-field{
  text-align:left;
  margin-top: 12px;
}
.login-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.2px;
  color:#4a5c7a;
  margin-bottom: 6px;
  display:block;
}
.login-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(10,26,51,.16);
  background: #f3f7ff;
  outline: none;
  font-size: 14px;
}
.login-input:focus{
  border-color: rgba(13,74,163,.45);
  box-shadow: 0 0 0 4px rgba(13,74,163,.10);
  background:#fff;
}

.login-links{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color:#6b7a90;
}
.login-links a{
  color:#0d4aa3;
  text-decoration:none;
  font-weight:700;
}
.login-links a:hover{ text-decoration:underline; }

.login-btn{
  margin-top: 16px;
  width: 160px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #08309a 0%, #04257d 100%);
  color: #fff;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 14px 26px rgba(3,18,70,.22);
}
.login-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.login-foot{
  margin-top: 16px;
  color:#6b7a90;
  font-size: 13px;
}


/* ===== FIX: capas (carros/fondo) no deben tapar el contenido ===== */
main { position: relative; }

.bg, .haze, .skyline, .street, .traffic{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0 !important;  /* fondo */
}

/* el contenido REAL encima */
.services-page{
  position: relative;
  z-index: 5 !important;
}

/* ===== FIX: título/subtítulo visibles SIEMPRE ===== */
.services-title{
  color: #0aa6d6 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.06);
  display:block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.services-subtitle{
  color: #6b7a90 !important;
  display:block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== FIX: el botón con fondo sí o sí (aunque otra regla lo pise) ===== */
.service-tile{
  background: linear-gradient(180deg, #08309a 0%, #04257d 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 24px rgba(3,18,70,.18) !important;
}
/* baja la sección de servicios para que quede debajo del banner visual */
.services-page{ padding-top: 140px !important; }

@media (max-width: 980px){
  .services-page{ padding-top: 110px !important; }
}
@media (max-width: 560px){
  .services-page{ padding-top: 90px !important; }
}

/* ===== Layout principal ===== */
.home-main{
  position: relative;
  min-height: calc(100vh - 160px);
}

/* Fondo/animaciones siempre detrás */
.bg, .haze, .skyline, .street, .traffic{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0 !important;
}

/* ===== HERO BANNER ===== */
.hero-banner{
  position: relative;
  z-index: 2;
  height: 320px;                 /* altura del banner */
  display:flex;
  align-items:flex-end;          /* texto hacia abajo del banner */
  justify-content:center;
  padding: 0 16px 46px;          /* baja el título dentro del banner */
}

.hero-inner{
  width: min(980px, 92vw);
  text-align:center;
}

.hero-title{
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  color: #151638;
  letter-spacing: .2px;
  text-shadow: 0 3px 18px rgba(0,0,0,.10);
}

.hero-subtitle{
  margin: 10px auto 0;
  max-width: 780px;
  color: rgba(63, 78, 101, .78);
  font-size: 15px;
}

/* ===== SECCIÓN BOTONES (debajo del banner) ===== */
.services-section{
  position: relative;
  z-index: 3;
  padding: 28px 16px 60px;
}

.services-section .services-grid{
  max-width: 1120px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 980px){
  .hero-banner{ height: 280px; padding-bottom: 34px; }
  .hero-title{ font-size: 38px; }
}
@media (max-width: 560px){
  .hero-banner{ height: 240px; padding-bottom: 28px; }
  .hero-title{ font-size: 32px; }
  .hero-subtitle{ font-size: 14px; }
}




.home-main{ position: relative; }

/* fondo siempre atrás */
.bg, .haze, .skyline, .street, .traffic{
  position:absolute;
  pointer-events:none;
  z-index:0;
}

/* banner arriba */
.hero-banner{
  position: relative;
  z-index: 2;
  height: 330px;
  display:flex;
  align-items:center;        /* <-- centrado vertical dentro del banner */
  justify-content:center;
  text-align:center;
  padding: 0 16px;
}

.hero-inner{
  width: min(980px, 92vw);
  transform: translateY(35px); /* baja el texto dentro del banner (ajusta 20-60) */
}

.hero-title{
  margin:0;
  font-size: 44px;
  font-weight: 900;
  color: #151638;
  text-shadow: 0 3px 18px rgba(0,0,0,.10);
}

.hero-subtitle{
  margin: 10px auto 0;
  max-width: 780px;
  color: rgba(63, 78, 101, .78);
  font-size: 15px;
}

/* botones abajo (zona blanca) */
.services-section{
  position: relative;
  z-index: 3;
  padding: 34px 16px 70px;
}
.services-section .services-grid{
  max-width: 1120px;
  margin: 0 auto;
}


/* ===== Modal tamaños ===== */

/* modal normal (login) */
.viewer-card{
  width: min(440px, 92vw);
}

/* modal ancho para iframes */
.viewer-card.wide{
  width: min(1280px, 96vw);
  max-height: 86vh;
}

/* cuerpo del modal iframe */
.viewer-card.wide .viewer-body{
  padding: 0;
}

/* iframe grande y cómodo */
.viewer-iframe{
  width: 100%;
  height: 78vh;
  border: 0;
  display: block;
}
.user-menu{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:12px;
}

.user-name{
  color:#fff;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.logout-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

.logout-btn:hover{
  background:rgba(255,255,255,.12);
}

.nav-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

.user-pill{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#fff !important;
  max-width:420px;
}

.user-pill__name{
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:260px;
}

.user-pill__form{ margin:0 !important; }

.user-pill__logout{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25) !important;
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.user-pill__logout:hover{
  background:rgba(255,255,255,.22) !important;
}



/* ===========================
   FIX RESPONSIVE HEADER
   - evita que nav-right (session) se vaya fuera
   - menú tipo drawer en móvil
=========================== */

/* 1) Quitar rigidez: esos min-width rompen el layout */
.nav-left{ min-width: 0 !important; }
.nav-right{ min-width: 0 !important; }

/* 2) Deja que el contenedor pueda encoger */
.navbar .wrap{
  flex-wrap: nowrap;
  min-width: 0;
}

/* 3) Prioridad: izquierda y derecha visibles siempre */
.nav-left, .nav-right{ flex: 0 0 auto; }

/* 4) El user-pill no debe desaparecer por overflow */
.user-pill{
  max-width: 46vw;           /* se adapta */
}
.user-pill__name{
  max-width: 28vw;           /* evita empujar todo */
}

/* ===== MÓVIL / TABLET: menú drawer ===== */
@media (max-width: 980px){
  /* El menú ya no desaparece sin opción: pasa a drawer */
  .nav-menu{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    padding: 88px 16px 18px;
    background: linear-gradient(180deg, var(--navy-0), var(--navy-1));
    box-shadow: 20px 0 60px rgba(0,0,0,.25);
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 9999;
    overflow-y: auto;

    /* deja de romper con nowrap */
    white-space: normal !important;
  }

  .nav-menu.is-open{
    transform: translateX(0);
  }

  /* Links en columna */
  .nav-menu a{
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    margin-bottom: 6px;
  }

  /* Separadores fuera en móvil */
  .nav-menu .sep{ display:none !important; }

  /* Burger siempre visible */
  .burger{ display:grid !important; }

  /* Ajusta padding del header para que no se vea enorme en móvil */
  .navbar .wrap{ padding: 12px 0; }

  /* Asegura que la sesión se vea (derecha) */
  .nav-right{
    gap: 10px !important;
  }
}

/* Extra pequeño */
@media (max-width: 560px){
  .brand img{ height: 34px; }
  .user-pill{ max-width: 54vw; }
  .user-pill__name{ max-width: 32vw; }
}


/* ===========================
   FIX MENU + SESIÓN (DESKTOP)
=========================== */

/* el contenedor puede encoger sin desbordar */
.navbar .wrap{
  min-width: 0;
}

/* quita rigidez que empuja a la derecha */
.nav-left,
.nav-right{
  min-width: 0 !important;
}

/* ✅ Desktop: deja que el menú se PARTA en 2 líneas si falta espacio */
.nav-menu{
  white-space: normal !important;      /* antes estaba nowrap */
  flex-wrap: wrap;                      /* permite salto de línea */
  gap: 10px 16px;                       /* gap vertical/horizontal */
  justify-content: center;
  line-height: 1.1;
}

/* separadores más suaves y no rompen */
.nav-menu .sep{
  opacity: .25;
}

/* ✅ La sesión NO debe empujar todo */
.user-pill{
  max-width: 360px;
}
.user-pill__name{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================
   TABLET/MÓVIL: drawer y sesión visible
=========================== */
@media (max-width: 980px){
  .navbar .wrap{
    padding: 12px 0 !important;
  }

  /* menu drawer (ya lo tienes, pero lo aseguramos) */
  .nav-menu{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    padding: 88px 16px 18px;
    background: linear-gradient(180deg, var(--navy-0), var(--navy-1));
    box-shadow: 20px 0 60px rgba(0,0,0,.25);
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 9999;
    overflow-y: auto;
    white-space: normal !important;
  }

  .nav-menu.is-open{ transform: translateX(0); }

  .nav-menu .sep{ display:none !important; }

  .nav-menu a{
    display:block;
    padding: 12px 10px;
    border-radius: 12px;
    margin-bottom: 6px;
  }

  /* sesión compacta para que no se salga */
  .user-pill{ max-width: 54vw; }
  .user-pill__name{ max-width: 32vw; }
}


.auth-link {
    background-color: #fff;
    color: #072e94;
    padding: 10px;
    border: 2px solid;
    border-radius: 10px;
    font-weight: 900;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.user-menu{ position:relative; display:flex; align-items:center; }
.user-menu__btn{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer;
}
.user-menu__caret{ opacity:.9; transform: translateY(-1px); }

.user-menu__dropdown{
  position:absolute; right:0; top:calc(100% + .5rem);
  min-width:180px;
  background:#0f1235;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:.4rem;
  display:none;
  z-index:9999;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.user-menu.is-open .user-menu__dropdown{ display:block; }

.user-menu__item{
  width:100%; text-align:left;
  padding:.6rem .7rem;
  border-radius:10px;
  background:transparent;
  border:0; color:#fff; cursor:pointer;
}
.user-menu__item:hover{ background:rgba(255,255,255,.10); }
.user-menu__item--danger:hover{ background:rgba(255,0,0,.14); }
.user-menu__form{ margin:0; }




.atm-modal{ position:fixed; inset:0; display:none; z-index:99999; }
.atm-modal.is-open{ display:block; }
.atm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.atm-modal__panel{
  position:relative;
  width:min(920px, 92vw);
  margin:6vh auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.atm-modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:#f6f7fb;
}
.atm-modal__x{ border:0; background:transparent; font-size:18px; cursor:pointer; }
.atm-modal__body{ padding:16px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field--full{ grid-column:1 / -1; }
.field label{ display:block; font-weight:600; margin-bottom:6px; }
.field input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #d8dbe7; }

.atm-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.btn{ padding:10px 14px; border-radius:10px; border:0; cursor:pointer; }
.btn-primary{ background:#1f3fd6; color:#fff; }
.btn-secondary{ background:#e9ecf7; }
.atm-modal__msg{ margin-top:10px; padding:10px 12px; border-radius:10px; background:#eef6ff; }


.user-menu { position:relative; }

.user-menu__btn{
  padding:.55rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
}

.user-menu__dropdown{
  position:absolute;
  right:0;
  top:calc(100% + .4rem);
  background:#0f1235;
  border-radius:12px;
  display:none;
  min-width:160px;
  z-index:9999;
}

.user-menu.is-open .user-menu__dropdown{
  display:block;
}

.user-menu__item{
  width:100%;
  padding:.6rem .8rem;
  background:none;
  border:0;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.user-menu__item:hover{
  background:rgba(255,255,255,.12);
}



/* Overlay */
.atm-modal{ position:fixed; inset:0; display:none; z-index:99999; }
.atm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

/* Caja */
.atm-box{
  position:relative;
  width:min(920px, 94vw);
  max-height:95vh;      /* un poco más alto */
  margin:4vh auto;      /* menos margen arriba */
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Header */
.atm-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0px 18px;
  border-bottom:1px solid #eef0f6;
}
.atm-header h3{ margin:0; font-size:18px; font-weight:700; color:#1f2a44; }
.atm-close{
  width:36px; height:36px; border-radius:10px;
  border:1px solid #e7eaf2; background:#fff;
  cursor:pointer; font-size:18px; line-height:1;
}

/* Scroll interno (aquí ahora sí puedes bajar) */
.atm-scroll{
  padding:10px 16px 6px;
  overflow:hidden;   /* quitamos scroll */
}

/* fila superior tipo ATM */
.atm-toprow{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.atm-chip input{
  width:320px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #dfe3ee;
  background:#f3f4f8;
  text-align:center;
}

/* Form estilo “label izquierda / campo derecha” */
.atm-form{
  display:flex;
  flex-direction:column;
  gap:6px;  /* menos separación */
}

.atm-row{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:12px;
  align-items:center;
}
.atm-row.two{
  grid-template-columns: 160px 1fr 160px 1fr;
}

.atm-label{
  text-align:right;
  font-weight:700;
  color:#2b3550;
  font-size:14px;
  padding-right:6px;
}

.atm-control input,
.atm-control select{
  width:100%;
  padding:7px 10px;           /* ✅ más compacto */
  border-radius:10px;
  border:1px solid #d7dbe8;
  font-size:13px;
  background:#fff;
}

.atm-control input:focus,
.atm-control select:focus{
  outline:none;
  border-color:#1f3fd6;
  box-shadow:0 0 0 2px rgba(31,63,214,.15);
}

/* Footer fijo */
.atm-footer{
  display:flex; justify-content:flex-end; gap:12px;
  padding:10px 16px;
  border-top:1px solid #eef0f6;
  background:#fff;
}

/* Botones */
.atm-btn{
  padding:10px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
}
.atm-btn-primary{ background:#1136d4; color:#fff; box-shadow:0 8px 18px rgba(17,54,212,.25); }
.atm-btn-primary:hover{ filter:brightness(.95); }
.atm-btn-secondary{ background:#eef1f8; color:#1f2a44; }
.atm-btn-verify{
  background:linear-gradient(180deg,#6f7be8,#4d59cf);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-weight:800;
}
.atm-btn-verify[disabled]{ opacity:.85; cursor:not-allowed; }

/* Responsive: en pantallas pequeñas, 2 columnas pasa a 1 */
@media (max-width: 860px){
  .atm-row{ grid-template-columns: 120px 1fr; }
  .atm-row.two{ grid-template-columns: 120px 1fr; }
  .atm-label{ text-align:left; padding-right:0; }
  .atm-chip input{ width:100%; }
  .atm-toprow{ justify-content:stretch; }
}

.atm-control {
    padding: 5px;
}