/* MOVIPISO · Home aprobada 23-09-2026
   Desktop + mobile replican el mockup validado antes de tocar código. */

:root{
  --approved-navy:#071f3f;
  --approved-blue:#2f80ff;
  --approved-lime:#d8f52d;
  --approved-bg:#f3f8fd;
}

/* ---------- Lienzo y ancho general ---------- */
body{
  background:linear-gradient(180deg,#f7fbff 0%,#eef5fb 100%) !important;
}
.site-header,
.hero{
  width:min(1400px,calc(100% - 32px)) !important;
}
.trust-strip,
.b2b-band{
  width:min(1320px,calc(100% - 64px)) !important;
}

/* ---------- Header ---------- */
.site-header{
  margin:18px auto 0 !important;
  min-height:70px !important;
  padding:0 22px !important;
  border-radius:24px 24px 0 0 !important;
  background:linear-gradient(90deg,#061d39 0%,#072342 68%,#0a2c50 100%) !important;
  box-shadow:0 12px 34px rgba(7,31,63,.15) !important;
}
.desktop-nav{gap:30px !important}
.desktop-nav a{
  position:relative;
  font-size:14px !important;
  font-weight:800 !important;
}
.desktop-nav a:first-child::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-24px;
  height:3px;
  border-radius:3px;
  background:#2f80ff;
}
.header-contact{
  min-height:44px !important;
  padding:0 19px !important;
  border-color:rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.03) !important;
}
.header-contact span:first-child{color:#25d366 !important}

/* ---------- Hero aprobado ---------- */
.hero{
  min-height:520px !important;
  margin:0 auto !important;
  border-radius:0 0 28px 28px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 22px 50px rgba(7,31,63,.08) !important;
}
.hero-photo{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:none !important;
}
.hero-photo-stack{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-rows:repeat(4,1fr) !important;
  gap:0 !important;
}
.hero-photo-stack img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.hero-photo-mobile{display:none !important}

.hero-shade{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 27%,
      rgba(255,255,255,.90) 38%,
      rgba(255,255,255,.58) 48%,
      rgba(255,255,255,.10) 63%,
      rgba(255,255,255,0) 75%) !important;
}

.hero-copy{
  position:relative !important;
  z-index:4 !important;
  width:53% !important;
  padding:50px 24px 30px 46px !important;
  color:#071b34 !important;
}
.eyebrow{
  margin:0 0 18px !important;
  color:#1267df !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:.10em !important;
}
.hero h1{
  max-width:700px !important;
  margin:0 !important;
  font-size:clamp(46px,4.45vw,66px) !important;
  line-height:.99 !important;
  letter-spacing:-.05em !important;
  color:#071b34 !important;
  font-weight:950 !important;
}
.hero h1 span{color:#2f80ff !important}
.hero-lead{
  max-width:650px !important;
  margin:23px 0 0 !important;
  font-size:17px !important;
  line-height:1.55 !important;
  color:#455b76 !important;
}
.hero-ctas{
  display:flex !important;
  margin-top:24px !important;
  max-width:420px !important;
}
.hero-ctas .btn{
  min-width:390px !important;
  min-height:58px !important;
  padding:0 30px !important;
  font-size:17px !important;
  font-weight:950 !important;
  box-shadow:0 13px 24px rgba(191,227,19,.22) !important;
}
.hero-benefits{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:24px;
  max-width:515px;
}
.hero-benefit{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 20px;
  border-right:1px solid #d9e3ef;
}
.hero-benefit:first-child{padding-left:0}
.hero-benefit:last-child{border-right:0}
.hero-benefit-icon{
  flex:0 0 31px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  color:#2f80ff;
}
.hero-benefit-icon svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-benefit span{
  color:#334c6b;
  font-size:12px;
  line-height:1.15;
  font-weight:720;
}

/* Banner aprobado: una sola pieza, sin doble caja */
.calc-banner{
  position:absolute !important;
  z-index:5 !important;
  right:30px !important;
  bottom:24px !important;
  width:min(370px,31vw) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:0 20px 44px rgba(7,27,52,.18) !important;
  transform:translateY(8px);
  opacity:0;
  animation:approvedBannerIn .46s cubic-bezier(.2,.7,.2,1) .18s forwards;
  transition:transform .22s ease,box-shadow .22s ease !important;
}
.calc-banner:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 28px 60px rgba(7,27,52,.24) !important;
}
.calc-banner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border:0 !important;
}
@keyframes approvedBannerIn{
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 4 compromisos ---------- */
.trust-strip{
  margin:18px auto 0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.trust-strip .trust-item{
  min-height:154px !important;
  padding:18px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  border:1px solid #e2eaf3 !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 10px 28px rgba(11,45,82,.05) !important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease !important;
}
.trust-strip .trust-item:hover{
  transform:translateY(-6px) !important;
  border-color:#d3e2f3 !important;
  box-shadow:0 18px 38px rgba(11,45,82,.12) !important;
}
.trust-strip .trust-item img{
  width:74px !important;
  height:74px !important;
  flex:0 0 74px !important;
  object-fit:contain !important;
  background:#fff !important;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 8px 12px rgba(31,91,165,.10)) !important;
  transition:transform .24s ease !important;
}
.trust-strip .trust-item:hover img{transform:translateY(-2px) scale(1.05)}
.trust-strip .trust-item p{
  margin:0 !important;
  color:#52667d !important;
  font-size:13px !important;
  line-height:1.3 !important;
}
.trust-strip .trust-item strong{
  color:#071f3f !important;
  font-size:15px !important;
  font-weight:950 !important;
}

/* ---------- B2B ---------- */
.b2b-band{
  position:relative !important;
  overflow:hidden !important;
  margin:22px auto 28px !important;
  padding:27px 30px !important;
  min-height:126px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:30px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 68% 130%,rgba(47,128,255,.18),transparent 34%),
    linear-gradient(135deg,#072342,#0b3769) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(7,31,63,.13) !important;
}
.b2b-band::after{
  content:"";
  position:absolute;
  right:28%;
  bottom:-8px;
  width:150px;
  height:78px;
  opacity:.14;
  background:
    linear-gradient(#62a7ff,#62a7ff) 0 42px/28px 36px no-repeat,
    linear-gradient(#62a7ff,#62a7ff) 43px 10px/38px 68px no-repeat,
    linear-gradient(#62a7ff,#62a7ff) 95px 30px/34px 48px no-repeat;
}
.b2b-band>div{position:relative;z-index:2}
.b2b-band span{
  color:#77b6ff !important;
  font-size:11px !important;
  letter-spacing:.09em !important;
}
.b2b-band strong{
  font-size:22px !important;
  line-height:1.16 !important;
}
.b2b-band p{
  max-width:700px !important;
  margin-top:7px !important;
  color:#e3eef8 !important;
  font-size:13px !important;
}
.btn-business{
  position:relative !important;
  z-index:2 !important;
  min-width:315px !important;
  min-height:52px !important;
  background:linear-gradient(135deg,#2f80ff,#1368e8) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.16) !important;
}

/* ---------- Tablet ---------- */
@media (max-width:1050px){
  .site-header,.hero{width:calc(100% - 24px) !important}
  .trust-strip,.b2b-band{width:calc(100% - 40px) !important}
  .desktop-nav{gap:18px !important}
  .hero-copy{width:59% !important;padding-left:34px !important}
  .hero h1{font-size:52px !important}
  .hero-lead{font-size:16px !important}
  .calc-banner{right:20px !important;width:min(340px,34vw) !important}
  .hero-ctas .btn{min-width:330px !important}
}

/* ---------- Mobile aprobado ---------- */
@media (max-width:760px){
  body{background:#fff !important}

  .site-header{
    width:100% !important;
    margin:0 !important;
    min-height:66px !important;
    padding:0 14px !important;
    border-radius:0 !important;
  }
  .brand-mark{width:34px !important;height:34px !important}
  .brand-word{font-size:20px !important}
  .desktop-nav{display:none !important}
  .header-actions{
    margin-left:auto !important;
    gap:8px !important;
  }
  .header-contact{
    display:flex !important;
    min-height:40px !important;
    padding:0 13px !important;
    font-size:13px !important;
  }
  .menu-toggle{display:block !important}
  .mobile-menu{top:72px !important;left:10px !important;right:10px !important}

  .hero{
    width:100% !important;
    min-height:840px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }
  .hero-photo-desktop{display:none !important}
  .hero-photo-mobile{display:grid !important}
  .hero-shade{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.97) 42%,
        rgba(255,255,255,.70) 63%,
        rgba(255,255,255,.20) 83%,
        rgba(255,255,255,.06) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,.05) 48%,
        rgba(255,255,255,.48) 68%,
        rgba(255,255,255,.92) 100%) !important;
  }
  .hero-copy{
    width:100% !important;
    padding:40px 20px 265px !important;
    color:#071b34 !important;
  }
  .eyebrow{
    margin-bottom:14px !important;
    color:#1267df !important;
    font-size:10.5px !important;
    letter-spacing:.10em !important;
  }
  .hero h1{
    max-width:360px !important;
    font-size:43px !important;
    line-height:1.00 !important;
    color:#071b34 !important;
  }
  .hero h1 span{color:#2f80ff !important}
  .hero-lead{
    max-width:355px !important;
    margin-top:18px !important;
    font-size:15px !important;
    line-height:1.42 !important;
    color:#405976 !important;
  }
  .hero-ctas{
    max-width:none !important;
    margin-top:20px !important;
  }
  .hero-ctas .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    font-size:16px !important;
  }
  .hero-benefits{
    width:100%;
    max-width:none;
    margin-top:20px;
    justify-content:space-between;
  }
  .hero-benefit{
    flex:1 1 0;
    gap:7px;
    padding:0 8px;
  }
  .hero-benefit:first-child{padding-left:0}
  .hero-benefit:last-child{padding-right:0}
  .hero-benefit-icon{flex-basis:26px;width:26px;height:26px}
  .hero-benefit span{font-size:10px;line-height:1.12}

  .calc-banner{
    left:12px !important;
    right:12px !important;
    bottom:14px !important;
    width:auto !important;
    border-radius:20px !important;
    box-shadow:0 16px 38px rgba(7,27,52,.18) !important;
  }

  .trust-strip{
    width:calc(100% - 24px) !important;
    margin:14px auto 0 !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .trust-strip .trust-item{
    min-height:122px !important;
    padding:12px 8px !important;
    border-radius:17px !important;
  }
  .trust-strip .trust-item img{
    width:58px !important;
    height:58px !important;
    flex-basis:58px !important;
  }
  .trust-strip .trust-item p{font-size:11px !important}
  .trust-strip .trust-item strong{font-size:12.5px !important}

  .b2b-band{
    width:calc(100% - 24px) !important;
    margin:18px auto 22px !important;
    padding:22px 18px !important;
    display:block !important;
    min-height:0 !important;
    border-radius:20px !important;
  }
  .b2b-band::after{right:12px;bottom:38px;opacity:.12}
  .b2b-band strong{font-size:24px !important;max-width:320px}
  .b2b-band p{font-size:13px !important;max-width:320px}
  .b2b-band .btn{
    width:100% !important;
    min-width:0 !important;
    margin-top:18px !important;
  }
}

@media (max-width:430px){
  .header-contact{padding:0 11px !important;font-size:12px !important}
  .hero{min-height:820px !important}
  .hero-copy{padding:34px 16px 252px !important}
  .hero h1{font-size:39px !important;max-width:335px !important}
  .hero-lead{font-size:14px !important;max-width:330px !important}
  .hero-benefit span{font-size:9.5px}
  .calc-banner{left:10px !important;right:10px !important;bottom:10px !important}
}

@media (prefers-reduced-motion:reduce){
  .calc-banner{animation:none !important;opacity:1 !important;transform:none !important}
  .trust-strip .trust-item,
  .trust-strip .trust-item img{transition:none !important}
}