@charset "utf-8";
:root{--br-banner:url('../assets/img/branding/banner.webp?v=20260908-assets-hosting-r18');--br-banner-small:url('../assets/img/branding/banner-small.webp?v=20260908-assets-hosting-r18');}

/* Landing main title.  This must stay scoped: internal section headings also
   use the class .title and must keep their translated text. */
body.brintage-landing #key > .title{
  background-image:var(--br-banner)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  color:transparent!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

/* Top bars and small branding */
.banner,
.landing-phone-logo,
#loading.start{
  background-image:var(--br-banner-small)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  color:transparent!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  display:block!important;
}

.banner{width:118px!important;height:28px!important;top:11px!important;left:24px!important;}
.landing-phone-logo{width:98px!important;height:26px!important;flex:0 0 98px!important;display:block!important;}
#loading.start{font-size:0!important;background-position:center center!important;background-size:min(220px,70vw) auto!important;}

/* Paso 1: quitar únicamente la línea curva vieja bajo el logo en escritorio */
@media (min-width:769px){
  body.brintage-landing #key > .title::after{
    content:none!important;
    display:none!important;
    border:0!important;
    width:0!important;
    height:0!important;
  }
}


/* Subtitle traducible del inicio */
.slogan{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  color:#3f5068!important;
  font-family:-apple-system,BlinkMacSystemFont,Roboto,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-style:normal!important;
  font-weight:700!important;
  letter-spacing:-0.15px!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}
.slogan::before,
.slogan::after{
  content:""!important;
  display:block!important;
  width:22px!important;
  height:2px!important;
  flex:0 0 22px!important;
  border-radius:2px!important;
  background:#2f7df6!important;
  opacity:1!important;
  transform:none!important;
}
/* Garantiza que no reaparezca ninguna curva heredada debajo del logo */
body.brintage-landing #key > .title::before,
body.brintage-landing #key > .title::after{content:none!important;display:none!important;}


/* R5 — login móvil: subtítulo traducible debajo del banner */
@media (max-width:768px){
  #key > .slogan{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:4px auto 14px!important;
    padding:0!important;
    font-size:15px!important;
    line-height:1.25!important;
    box-sizing:border-box!important;
  }
  #key > .slogan::before,
  #key > .slogan::after{
    width:18px!important;
    flex-basis:18px!important;
    height:2px!important;
  }

  /* R5 — banner visible después de iniciar sesión en móvil.
     Sobrescribe el width:auto más específico de key.css. */
  body.bt-home #bop .banner,
  body.bt-profile #bop .banner{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    height:28px!important;
    margin:0!important;
    flex:0 0 112px!important;
    background-image:var(--br-banner-small)!important;
    background-repeat:no-repeat!important;
    background-position:left center!important;
    background-size:contain!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:0!important;
    z-index:0!important;
  }
}

/* R6 — proporciones del bloque de marca según la referencia aprobada */
@media (max-width:768px){
  #key > .title{
    width:calc(100% + 44px)!important;
    height:auto!important;
    aspect-ratio:2039 / 535!important;
    margin:-8px -22px 0!important;
    padding:0!important;
    line-height:0!important;
    background-size:100% 100%!important;
  }
  #key > .slogan{
    margin:16px auto 14px!important;
    gap:10px!important;
    color:#3f5068!important;
    font-size:15px!important;
    font-weight:750!important;
    letter-spacing:-0.2px!important;
  }
  #key > .slogan::before,
  #key > .slogan::after{
    width:22px!important;
    flex:0 0 22px!important;
    height:2px!important;
  }
}


/* R7 — trazos laterales afinados como la referencia aprobada */
.slogan::before,
.slogan::after{
  width:23px!important;
  flex:0 0 23px!important;
  height:4px!important;
  border-radius:0!important;
}
.slogan::before{
  background:linear-gradient(90deg,#8fc8ff 0%,#3b86fb 58%,#0d5df6 100%)!important;
  -webkit-clip-path:polygon(0 50%,68% 25%,100% 0,100% 100%,68% 75%)!important;
  clip-path:polygon(0 50%,68% 25%,100% 0,100% 100%,68% 75%)!important;
}
.slogan::after{
  background:linear-gradient(90deg,#0d5df6 0%,#3b86fb 42%,#8fc8ff 100%)!important;
  -webkit-clip-path:polygon(0 0,32% 25%,100% 50%,32% 75%,0 100%)!important;
  clip-path:polygon(0 0,32% 25%,100% 50%,32% 75%,0 100%)!important;
}
@media (max-width:768px){
  #key > .slogan::before,
  #key > .slogan::after{
    width:23px!important;
    flex:0 0 23px!important;
    height:4px!important;
  }
}

/* R8 — igualar subtítulo a la referencia: tono, peso y centrado óptico de trazos */
#key > .slogan{
  color:#34466b!important;
  font-weight:800!important;
}
#key > .slogan::before,
#key > .slogan::after{
  transform:translateY(3px)!important;
}

/* R9 — fondo aprobado del inicio. Solo index.htm. */
html body.brintage-landing{
  min-height:100vh!important;
  background-color:#f7fbff!important;
  background-image:url('../assets/img/branding/landing-background.webp?v=20260908-assets-hosting-r18')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
body.brintage-landing::before,
body.brintage-landing::after,
body.brintage-landing #key::before{
  content:none!important;
  display:none!important;
}

/* R10 — fondo a viewport completo + proporción móvil corregida */
body.brintage-landing{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
body.brintage-landing #app{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

@media (max-width:768px){
  /* El mismo logo aprobado, con escala propia para móvil. */
  body.brintage-landing #key > .title{
    width:min(72vw,260px)!important;
    max-width:260px!important;
    height:auto!important;
    aspect-ratio:2039 / 535!important;
    margin:0 auto!important;
    padding:0!important;
    background-size:contain!important;
    background-position:center center!important;
  }

  body.brintage-landing #key > .slogan{
    width:auto!important;
    margin:9px auto 11px!important;
    gap:8px!important;
    font-size:14px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  body.brintage-landing #key > .slogan::before,
  body.brintage-landing #key > .slogan::after{
    width:19px!important;
    flex:0 0 19px!important;
    height:4px!important;
    transform:translateY(2px)!important;
  }
}

/* R11 — detalles finos del inicio aprobados sobre R10 */
body.brintage-landing #key > .slogan{
  font-weight:400!important;
}

@media (min-width:769px){
  /* La tarjeta conserva exactamente sus medidas de R10; solo cambia el acabado interno. */
  body.brintage-landing .mods{
    color:#5f6d87!important;
  }
  body.brintage-landing .mods > .link,
  body.brintage-landing .mods .reg .link{
    color:#0d5df6!important;
  }
  body.brintage-landing .mods .reg{
    color:#5f6d87!important;
  }
  body.brintage-landing .mods .lang,
  body.brintage-landing .mods .lang select,
  body.brintage-landing .mods .selectbox{
    color:#5f6d87!important;
  }

  /* Separador suave: dos trazos que se afinan hacia el centro + aro central. */
  body.brintage-landing .mods .line{
    position:relative!important;
    height:20px!important;
    margin:19px 0!important;
    background:none!important;
    overflow:visible!important;
  }
  body.brintage-landing .mods .line::before,
  body.brintage-landing .mods .line::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    width:calc(50% - 24px)!important;
    height:1px!important;
    transform:translateY(-50%)!important;
    pointer-events:none!important;
  }
  body.brintage-landing .mods .line::before{
    left:0!important;
    background:linear-gradient(90deg,rgba(190,205,226,.78) 0%,rgba(205,217,234,.62) 72%,rgba(221,230,242,0) 100%)!important;
  }
  body.brintage-landing .mods .line::after{
    right:0!important;
    background:linear-gradient(90deg,rgba(221,230,242,0) 0%,rgba(205,217,234,.62) 28%,rgba(190,205,226,.78) 100%)!important;
  }
  body.brintage-landing .mods .line .or{
    left:50%!important;
    top:50%!important;
    width:18px!important;
    height:18px!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    transform:translate(-50%,-50%)!important;
    border:3px solid #c8d4e5!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 0 0 2px rgba(200,212,229,.10)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
  }

  /* Footer y textos secundarios con el azul grisáceo de la referencia. */
  body.brintage-landing .copyright{
    color:#6f788f!important;
  }
  body.brintage-landing .copyright .br-legal-footer{
    color:#6f788f!important;
  }
  body.brintage-landing .copyright .br-legal-link{
    color:#0d5df6!important;
  }
}