/* Correccion final responsive TwisterBoost */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}

/* PORTADA: evita que la imagen y el texto se monten */
body .tbHero{
  width:100% !important;
  max-width:100vw !important;
  grid-template-columns:minmax(0,1fr) minmax(320px,0.82fr) !important;
  gap:clamp(18px,3vw,42px) !important;
  overflow:hidden !important;
}
body .tbHero > *{min-width:0 !important}
body .tbHero h1{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  font-size:clamp(34px,5.2vw,70px) !important;
}
body .tbHeroVisual{
  min-width:0 !important;
  width:100% !important;
  min-height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  padding:14px !important;
  overflow:hidden !important;
}
body .tbHeroVisual::before,
body .tbHeroVisualShade{
  display:none !important;
}
body .tbHeroVisual img{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  max-height:360px !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  filter:saturate(1.08) contrast(1.04) brightness(.98) !important;
}
body .tbHeroVisualBadge{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2 !important;
  margin-top:10px !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(9,19,34,.92),rgba(16,36,62,.70)) !important;
  border:1px solid rgba(190,212,255,.20) !important;
  color:#f5fbff !important;
  font-size:clamp(15px,1.6vw,21px) !important;
  line-height:1.25 !important;
  text-shadow:none !important;
}

@media(max-width:1180px){
  body .tbHero{
    grid-template-columns:1fr !important;
    padding-left:clamp(16px,4vw,38px) !important;
    padding-right:clamp(16px,4vw,38px) !important;
  }
  body .tbHeroVisual{
    max-width:760px !important;
    margin:0 auto !important;
  }
  body .tbHeroVisual img{max-height:330px !important}
}
@media(max-width:620px){
  body .tbHero h1{font-size:clamp(32px,11vw,46px) !important}
  body .tbHeroVisual{padding:10px !important;border-radius:16px !important}
  body .tbHeroVisual img{max-height:240px !important}
  body .tbHeroVisualBadge{font-size:14px !important;padding:12px !important}
}

/* CLIENTE: evita corte horizontal en laptop y pantallas medianas */
body .container,
body #app,
body .tbShell,
body .tbMain,
body .tbContent,
body .tbTopbar,
body .card{
  max-width:100% !important;
}
body .tbShell{
  width:100% !important;
  grid-template-columns:minmax(220px,252px) minmax(0,1fr) !important;
  overflow-x:hidden !important;
}
body .tbSidebar{
  width:auto !important;
  min-width:0 !important;
  padding:18px !important;
}
body .tbMain{
  min-width:0 !important;
  overflow-x:hidden !important;
}
body .tbContent{
  width:100% !important;
  max-width:none !important;
  padding:22px clamp(14px,2vw,24px) 96px !important;
  margin:0 !important;
}
body .tbTopbar{
  width:auto !important;
  margin:16px clamp(14px,2vw,24px) 0 !important;
  overflow:hidden !important;
}
body .tbTopLeft{
  min-width:0 !important;
}
body .tbTopTitle{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  font-size:clamp(26px,3.6vw,38px) !important;
}
body .tbTopSaldo{
  min-width:190px !important;
  max-width:260px !important;
  flex:0 1 auto !important;
}
body .quickGrid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body .quickBtn,
body .menuBtn{
  min-width:0 !important;
  overflow:hidden !important;
}

@media(max-width:1280px){
  body .tbShell{
    grid-template-columns:minmax(205px,232px) minmax(0,1fr) !important;
  }
  body .quickGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .tbTopbar{
    align-items:flex-start !important;
  }
}
@media(max-width:980px){
  body .tbShell{grid-template-columns:1fr !important}
  body .tbSidebar{display:none !important}
  body .tbTopbar{
    flex-direction:column !important;
    margin:12px 12px 0 !important;
  }
  body .tbTopSaldo{
    width:100% !important;
    max-width:none !important;
  }
  body .tbContent{
    padding:14px 12px 96px !important;
  }
  body .quickGrid,
  body .grid,
  body .entregasGrid,
  body .clienteAlertGrid,
  body .accountGrid{
    grid-template-columns:1fr !important;
  }
}