:root{
  --blue:#003b73;
  --blue-2:#005bbb;
  --cyan:#00a6d6;
  --green:#0f766e;
  --bg:#f3f7fc;
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --shadow:0 24px 70px rgba(15,23,42,.12);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 10% 25%, rgba(0,166,214,.12), transparent 32%),
    radial-gradient(circle at 90% 30%, rgba(0,91,187,.10), transparent 28%),
    var(--bg);
  color:var(--text);
}

.topbar{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 44px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(15,23,42,.07);
  position:sticky;
  top:0;
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:300px;
}

.brand-icon{
  width:58px;
  height:58px;
  border-radius:10px;
  background:linear-gradient(150deg,#0f766e,#134e4a);
  color:white;
  display:grid;
  place-items:center;
  font-size:36px;
  font-weight:800;
  font-style:italic;
  box-shadow:0 10px 25px rgba(15,118,110,.25);
}

.brand-title{font-size:14px;font-weight:800;color:#134e4a;letter-spacing:.4px}
.brand-name{font-size:28px;font-weight:900;color:#134e4a;line-height:1}
.brand-sub{font-size:13px;font-weight:700;color:#134e4a;margin-top:5px}

.nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.nav a{
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  padding:14px 4px;
  border-bottom:3px solid transparent;
}

.nav a.active,
.nav a:hover{
  color:var(--blue-2);
  border-bottom-color:var(--blue-2);
}

.it-logo{
  min-width:110px;
  text-align:center;
  color:#0f766e;
  font-size:40px;
  font-weight:900;
  line-height:.9;
  letter-spacing:2px;
}

.it-logo span{
  font-size:15px;
  letter-spacing:5px;
  font-weight:500;
}

.page{
  max-width:1240px;
  margin:auto;
  padding:0 28px 48px;
}

.hero{
  text-align:center;
  padding:72px 20px 40px;
  position:relative;
  overflow:hidden;
}

.hero h1{
  margin:0;
  color:var(--blue);
  font-size:42px;
  font-weight:900;
}

.hero p{
  max-width:760px;
  margin:18px auto 0;
  font-size:18px;
  line-height:1.55;
  color:#334155;
}

.line{
  width:74px;
  height:5px;
  background:var(--blue-2);
  border-radius:999px;
  margin:24px auto 0;
}

.store-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  max-width:970px;
  margin:0 auto;
  background:var(--card);
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.app-info{
  padding:34px 34px 28px;
}

.pill{
  display:inline-block;
  background:#e0f2fe;
  color:#075985;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
}

.app-info h2{
  margin:18px 0 10px;
  font-size:31px;
  color:#0b2f5b;
}

.meta{
  color:#475569;
  font-size:15px;
  margin:0 0 20px;
}

.description{
  font-size:16.5px;
  line-height:1.65;
  margin:0 0 20px;
}

.features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0;
}

.features div{
  background:#f1f5f9;
  border-radius:12px;
  padding:13px 14px;
  font-weight:700;
  font-size:14px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:22px 0;
}

.btn{
  border:0;
  border-radius:12px;
  padding:15px 24px;
  text-decoration:none;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
}

.btn.primary{
  background:linear-gradient(135deg,var(--blue-2),#0045a8);
  color:#fff;
  box-shadow:0 12px 22px rgba(0,91,187,.25);
}

.btn.primary::before{
  content:"⬇";
  margin-right:8px;
}

.btn.light{
  background:#eef2f7;
  color:#0f172a;
}

.instructions{
  background:#fff7ed;
  border-left:5px solid #f97316;
  border-radius:14px;
  padding:16px 18px;
  margin-top:12px;
}

.instructions h3{
  margin:0 0 8px;
  font-size:16px;
}

.instructions ol{
  margin:0;
  padding-left:20px;
  line-height:1.65;
  font-size:14px;
}

.download-panel{
  background:linear-gradient(160deg,#003b73,#00a6d6);
  color:white;
  padding:38px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.phone-icon{
  width:62px;
  height:78px;
  border:4px solid white;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:34px;
  margin-bottom:18px;
  box-shadow:inset 0 -10px 0 rgba(255,255,255,.15);
}

.download-panel h3{
  margin:0 0 12px;
  font-size:22px;
}

.download-panel p{
  margin:0;
  line-height:1.45;
  font-size:15px;
}

.qr{
  background:white;
  padding:14px;
  border-radius:16px;
  margin:24px 0 16px;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.qr img{
  display:block;
  width:180px;
  height:180px;
}

.android-only{
  background:rgba(0,59,115,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:12px 18px;
  font-weight:900;
}

.security{
  max-width:970px;
  margin:24px auto 0;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:24px 30px;
}

.security h2{
  margin:0 0 8px;
  color:var(--blue);
}

.security p{
  margin:0;
  color:#334155;
  line-height:1.55;
}

.footer{
  text-align:center;
  color:#475569;
  padding:28px 18px 38px;
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.65);
}

@media (max-width:1000px){
  .topbar{
    flex-wrap:wrap;
    padding:16px 22px;
  }

  .nav{
    order:3;
    width:100%;
    justify-content:center;
    gap:18px;
    overflow:auto;
  }

  .it-logo{
    min-width:auto;
  }
}

@media (max-width:760px){
  .brand{
    min-width:0;
  }

  .brand-name{
    font-size:21px;
  }

  .brand-title,
  .brand-sub{
    font-size:11px;
  }

  .it-logo{
    display:none;
  }

  .page{
    padding:0 14px 32px;
  }

  .hero{
    padding:42px 12px 26px;
  }

  .hero h1{
    font-size:32px;
  }

  .hero p{
    font-size:16px;
  }

  .store-card{
    grid-template-columns:1fr;
  }

  .app-info{
    padding:26px 20px;
  }

  .app-info h2{
    font-size:26px;
  }

  .features{
    grid-template-columns:1fr;
  }

  .actions .btn{
    width:100%;
  }

  .download-panel{
    padding:30px 20px;
  }
}
.brand-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:10px;
  background:white;
}

.it-logo-img{
  max-width:120px;
  max-height:74px;
  object-fit:contain;
}

.screenshots{
  display:flex;
  gap:14px;
  margin:22px 0;
  overflow-x:auto;
  padding-bottom:8px;
}

.screenshots img{
  height:320px;
  width:auto;
  border-radius:18px;
  background:#f1f5f9;
  box-shadow:0 10px 28px rgba(15,23,42,.16);
  border:1px solid rgba(15,23,42,.08);
}

@media (max-width:760px){
  .screenshots img{
    height:260px;
  }

  .it-logo-img{
    display:none;
  }
}

.platform-note{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0;
}

.platform{
  border-radius:14px;
  padding:15px 16px;
  font-size:14px;
  line-height:1.45;
}

.platform strong{
  display:block;
  font-size:16px;
  margin-bottom:5px;
}

.platform.android{
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#14532d;
}

.platform.ios{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
}

.platform.ios a{
  color:#005bbb;
  font-weight:900;
}

@media (max-width:760px){
  .platform-note{
    grid-template-columns:1fr;
  }
}

/* Integración con el Portal Apps INTESUD */
a.brand {
  color: inherit;
  text-decoration: none;
}

a.brand:hover {
  opacity: 0.96;
}