/* RutaFV 0.46.0 · portada aprobada: Portal + App */

.pro-public-page{
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto auto auto!important;
  column-gap:18px!important;
  align-content:start!important;
  padding:0 18px 18px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 73%,#edf3f9 100%)!important;
  color:#0b2857!important;
}

.pro-public-hero{
  grid-column:1/-1!important;
  width:min(100%,1440px)!important;
  max-width:1440px!important;
  height:clamp(300px,31vw,445px)!important;
  margin:0 auto!important;
  border-radius:0!important;
  clip-path:none!important;
  transform:none!important;
  background-image:url('/rutafv-portada-cliente.png')!important;
  background-size:100% auto!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}

/* La envoltura desaparece visualmente para poder colocar sus hijos en la rejilla principal. */
.pro-public-bottom{display:contents!important}

/* Tarjeta Portal del Cliente */
.pro-public-card{
  grid-column:1!important;
  justify-self:end!important;
  align-self:start!important;
  width:min(420px,100%)!important;
  min-height:164px!important;
  margin:-48px 0 0!important;
  padding:22px 20px 16px!important;
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  column-gap:14px!important;
  align-items:center!important;
  background:#fff!important;
  border:1px solid #dfe7ef!important;
  border-radius:14px!important;
  box-shadow:0 16px 34px rgba(14,42,78,.16)!important;
  text-align:left!important;
  z-index:3!important;
}

.pro-public-card-icon{
  position:static!important;
  grid-column:1!important;
  grid-row:1/3!important;
  transform:none!important;
  width:58px!important;
  height:58px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#eef5ff!important;
  color:#1268df!important;
  border:0!important;
  box-shadow:none!important;
}

.pro-public-card h1{
  grid-column:2!important;
  grid-row:1!important;
  margin:0!important;
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:-.25px!important;
  color:#102b54!important;
}

.pro-public-card>p{
  grid-column:2!important;
  grid-row:2!important;
  margin:3px 0 0!important;
  max-width:none!important;
  font-size:11px!important;
  line-height:1.4!important;
  color:#74839a!important;
}

.pro-public-main-action{
  grid-column:1/-1!important;
  grid-row:3!important;
  width:100%!important;
  height:45px!important;
  margin:16px 0 0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#0c73f2 0%,#0757d8 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(8,91,214,.22)!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* Tarjeta Acceso a la app */
.pro-public-internal{
  grid-column:2!important;
  justify-self:start!important;
  align-self:start!important;
  width:min(420px,100%)!important;
  min-height:164px!important;
  margin:-48px 0 0!important;
  padding:22px 20px 16px!important;
  display:grid!important;
  grid-template-rows:1fr auto!important;
  gap:12px!important;
  background:#fff!important;
  border:1px solid #dfe7ef!important;
  border-radius:14px!important;
  box-shadow:0 16px 34px rgba(14,42,78,.16)!important;
  z-index:3!important;
}

.pro-public-internal>div{
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
}

.pro-public-internal .pro-public-action-icon{
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#eff9e9!important;
  color:#57a52c!important;
}

.pro-public-internal strong{
  display:block!important;
  font-size:20px!important;
  line-height:1.1!important;
  font-weight:800!important;
  color:#102b54!important;
}

.pro-public-internal small{
  display:block!important;
  margin-top:5px!important;
  font-size:11px!important;
  line-height:1.4!important;
  color:#74839a!important;
}

.pro-public-internal>button{
  width:100%!important;
  height:45px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:0!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#70bd3f 0%,#4e9f27 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(75,151,36,.20)!important;
  font-size:12px!important;
  font-weight:800!important;
}

.pro-public-internal>button svg:last-child{margin-left:auto!important}

/* Beneficios */
.pro-public-benefits{
  grid-column:1/-1!important;
  width:min(900px,100%)!important;
  margin:28px auto 0!important;
  padding:0 0 18px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  align-items:stretch!important;
  border-bottom:1px solid #dde6ef!important;
}

.pro-public-benefits>div{
  min-height:64px!important;
  padding:8px 24px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:12px!important;
  color:#0865df!important;
  border-right:1px solid #dce5ef!important;
}
.pro-public-benefits>div:last-child{border-right:0!important}
.pro-public-benefits span{text-align:left!important}
.pro-public-benefits strong{display:block!important;font-size:11px!important;color:#102b54!important}
.pro-public-benefits small{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.35!important;color:#7b899c!important}

.pro-public-footer{
  grid-column:1/-1!important;
  width:min(900px,100%)!important;
  margin:0 auto!important;
  padding:10px 0 0!important;
  border:0!important;
  text-align:center!important;
  font-size:8px!important;
  color:#78879a!important;
}

@media(max-width:820px){
  .pro-public-page{
    grid-template-columns:1fr!important;
    padding:0 14px 18px!important;
  }
  .pro-public-hero{
    grid-column:1!important;
    height:250px!important;
    background-size:auto 100%!important;
    background-position:center top!important;
  }
  .pro-public-card,
  .pro-public-internal{
    grid-column:1!important;
    justify-self:center!important;
    width:min(520px,100%)!important;
  }
  .pro-public-card{margin:-34px 0 0!important}
  .pro-public-internal{margin:14px 0 0!important}
  .pro-public-benefits,
  .pro-public-footer{grid-column:1!important}
  .pro-public-benefits{
    grid-template-columns:1fr!important;
    margin-top:22px!important;
  }
  .pro-public-benefits>div{
    justify-content:flex-start!important;
    border-right:0!important;
    border-bottom:1px solid #e4eaf1!important;
  }
  .pro-public-benefits>div:last-child{border-bottom:0!important}
}

@media(max-width:540px){
  .pro-public-hero{height:210px!important}
  .pro-public-card,
  .pro-public-internal{padding:18px 16px 15px!important}
  .pro-public-card h1,
  .pro-public-internal strong{font-size:18px!important}
}