﻿/* Portada con mas presencia visual, botones grandes y hero estable */
html,body{overflow-x:hidden}
body .tbTopbar{
  min-height:86px !important;
  padding:16px clamp(18px,3vw,34px) !important;
  background:rgba(12,25,43,.92) !important;
}
body .tbBrand{
  gap:12px !important;
}
body .tbLogo{
  width:52px !important;
  height:52px !important;
  border-radius:13px !important;
}
body .tbBrandName{
  font-size:23px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}
body .tbBrandSub{
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.15em !important;
}
body .tbNav{
  gap:12px !important;
}
body .tbNav a{
  min-height:42px !important;
  padding:11px 16px !important;
  border-radius:12px !important;
  font-size:15px !important;
  font-weight:900 !important;
  color:#f3f8ff !important;
  border:1px solid transparent !important;
}
body .tbNav a:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(190,212,255,.18) !important;
}
body .tbActions{
  gap:12px !important;
}
body .tbBtn{
  min-height:48px !important;
  padding:13px 20px !important;
  border-radius:10px !important;
  font-size:15.5px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}
body .tbBtnPrimary,
body .tbBtnGreen{
  box-shadow:0 16px 34px rgba(37,99,235,.24) !important;
}
body .tbBtnGreen{
  box-shadow:0 16px 34px rgba(18,168,105,.22) !important;
}
body .tbBtnDark{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(190,212,255,.25) !important;
  color:#f8fbff !important;
}
body .tbHero{
  width:100% !important;
  max-width:1480px !important;
  margin:0 auto !important;
  grid-template-columns:minmax(460px,0.98fr) minmax(430px,0.92fr) !important;
  gap:clamp(34px,5vw,76px) !important;
  padding:clamp(58px,7vw,92px) clamp(30px,5vw,72px) 48px !important;
  align-items:center !important;
  overflow:visible !important;
}
body .tbHero > *{min-width:0 !important}
body .tbKicker{
  font-size:13px !important;
  font-weight:900 !important;
  padding:9px 13px !important;
}
body .tbHero h1{
  max-width:760px !important;
  margin:22px 0 18px !important;
  font-size:clamp(50px,5.6vw,82px) !important;
  line-height:.98 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
}
body .tbLead{
  max-width:680px !important;
  font-size:clamp(17px,1.35vw,20px) !important;
  line-height:1.62 !important;
  color:#c1d0e5 !important;
}
body .tbHeroActions{
  margin-top:30px !important;
  gap:12px !important;
}
body .tbHeroVisual{
  width:100% !important;
  max-width:640px !important;
  min-height:auto !important;
  margin-left:auto !important;
  padding:18px !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  background:linear-gradient(180deg,rgba(10,22,40,.78),rgba(10,22,40,.46)) !important;
  border:1px solid rgba(190,212,255,.22) !important;
  box-shadow:0 28px 70px rgba(2,8,23,.36) !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:370px !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
body .tbHeroVisualBadge{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  margin-top:14px !important;
  padding:16px 18px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(14,31,54,.96),rgba(18,42,72,.80)) !important;
  border:1px solid rgba(190,212,255,.24) !important;
  color:#fff !important;
  font-size:clamp(17px,1.6vw,23px) !important;
  font-weight:900 !important;
  line-height:1.22 !important;
  text-shadow:none !important;
}
body .tbSection{
  max-width:1480px !important;
  margin:0 auto !important;
  padding-left:clamp(30px,5vw,72px) !important;
  padding-right:clamp(30px,5vw,72px) !important;
}
body .tbSectionTitle h2{
  font-size:clamp(31px,3vw,42px) !important;
  font-weight:900 !important;
}

@media(max-width:1260px){
  body .tbHero{
    grid-template-columns:minmax(0,1fr) !important;
    max-width:920px !important;
    padding-top:42px !important;
  }
  body .tbHeroVisual{
    max-width:760px !important;
    margin:0 auto !important;
  }
  body .tbHero h1{
    font-size:clamp(44px,7vw,70px) !important;
  }
}
@media(max-width:860px){
  body .tbTopbar{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  body .tbNav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  body .tbNav a{
    text-align:center !important;
    justify-content:center !important;
  }
  body .tbActions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:620px){
  body .tbTopbar{min-height:auto !important}
  body .tbNav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .tbHero{
    padding:30px 16px 34px !important;
  }
  body .tbHero h1{
    font-size:clamp(38px,12vw,54px) !important;
  }
  body .tbLead{
    font-size:16px !important;
  }
  body .tbHeroActions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  body .tbHeroActions .tbBtn{
    width:100% !important;
  }
  body .tbHeroVisual{
    padding:12px !important;
  }
  body .tbHeroVisual img{
    max-height:250px !important;
  }
  body .tbHeroVisualBadge{
    font-size:15px !important;
    padding:13px !important;
  }
  body .tbSection{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}
