/* =========================================================
   ALFREDO FM + BUGABA INFÓRMATE
   INTEGRACIÓN INSTITUCIONAL V17

   IMPORTANTE:
   - NO conecta con Supabase.
   - NO lee noticias de la app BI.
   - NO cambia styles.css v16.
   - Solo agrega presencia visual/institucional de BI.
========================================================= */

:root {
  --bi-red: #e31b23;
  --bi-red-bright: #ff3540;
  --bi-red-dark: #7e0b11;
  --bi-black: #070708;
  --bi-surface: #111214;
  --bi-surface-2: #17191c;
  --bi-text: #f8f8f8;
  --bi-muted: #a3a6ab;
}


/* =========================================================
   SECCIÓN GENERAL
========================================================= */

.bi-news-section {
  width:
    min(
      1280px,
      calc(100% - 32px)
    );

  margin: auto;

  padding:
    72px 0 15px;

  scroll-margin-top: 95px;
}


.bi-news-shell {
  position: relative;

  overflow: hidden;

  padding: 27px;

  border-radius: 32px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(227,27,35,.20),
      transparent 31%
    ),

    radial-gradient(
      circle at 100% 100%,
      rgba(36,246,91,.045),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(19,20,22,.99),
      rgba(5,6,7,.995)
    );

  box-shadow:

    0 28px 60px
    rgba(0,0,0,.38),

    0 7px 0
    rgba(0,0,0,.45),

    inset 0 1px 0
    rgba(255,255,255,.06);
}


.bi-news-shell::before {
  content: "";

  position: absolute;

  top: 0;
  left: 9%;
  right: 9%;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255,65,74,.55),
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   CABECERA / MARCA
========================================================= */

.bi-news-top {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


.bi-brand {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 17px;
}


.bi-brand-logo {
  position: relative;

  width: 92px;
  height: 92px;

  flex:
    0 0 92px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.11);

  background:

    radial-gradient(
      circle,
      rgba(227,27,35,.25),
      rgba(0,0,0,.18) 68%
    );

  box-shadow:

    0 10px 25px
    rgba(0,0,0,.42),

    0 0 30px
    rgba(227,27,35,.12),

    inset 0 1px 0
    rgba(255,255,255,.08);
}


.bi-brand-logo img {
  position: relative;

  z-index: 2;

  width: 82px;
  height: 82px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 10px 15px
      rgba(0,0,0,.44)
    );
}


.bi-logo-fallback-text {
  display: none;

  color: white;

  font-size: 2rem;

  font-weight: 950;

  letter-spacing: -.05em;
}


.bi-brand-logo.bi-logo-fallback
.bi-logo-fallback-text {
  display: block;
}


.bi-brand-copy {
  min-width: 0;
}


.bi-kicker {
  display: block;

  color:
    var(--bi-red-bright);

  font-size: .62rem;

  font-weight: 950;

  letter-spacing: .17em;
}


.bi-brand-copy h2 {
  margin-top: 6px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.35rem
    );

  line-height: .98;

  letter-spacing: -.055em;
}


.bi-brand-copy h2 strong {
  color:
    var(--bi-red-bright);
}


.bi-brand-copy p {
  max-width: 720px;

  margin-top: 11px;

  color:
    var(--bi-muted);

  font-size: .86rem;

  line-height: 1.58;
}


/* =========================================================
   TARJETAS
========================================================= */

.bi-institutional-grid {
  position: relative;
  z-index: 2;

  margin-top: 24px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 13px;
}


.bi-institutional-card {
  position: relative;

  min-height: 245px;

  padding: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  border-radius: 23px;

  border:
    1px solid
    rgba(255,255,255,.075);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(227,27,35,.075),
      transparent 37%
    ),

    linear-gradient(
      145deg,
      rgba(28,29,32,.99),
      rgba(8,9,10,.995)
    );

  box-shadow:

    0 8px 0
    rgba(0,0,0,.54),

    0 18px 30px
    rgba(0,0,0,.28),

    inset 0 1px 0
    rgba(255,255,255,.045);

  transition:

    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.bi-institutional-card::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  right: -70px;
  bottom: -70px;

  border-radius: 50%;

  background:
    rgba(227,27,35,.045);

  pointer-events: none;
}


.bi-institutional-icon {
  width: 53px;
  height: 53px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  color:
    #ff7279;

  background:

    linear-gradient(
      145deg,
      rgba(227,27,35,.18),
      rgba(75,5,9,.30)
    );

  border:
    1px solid
    rgba(227,27,35,.12);

  box-shadow:

    0 5px 0
    #5c090e,

    0 11px 19px
    rgba(0,0,0,.27),

    inset 0 1px 0
    rgba(255,255,255,.08);

  font-size: 1.1rem;
}


.bi-institutional-card > span {
  margin-top: 24px;

  color:
    var(--bi-red-bright);

  font-size: .56rem;

  font-weight: 950;

  letter-spacing: .14em;
}


.bi-institutional-card h3 {
  margin-top: 7px;

  font-size: 1.25rem;

  line-height: 1.12;
}


.bi-institutional-card p {
  margin-top: 10px;

  color:
    var(--bi-muted);

  font-size: .75rem;

  line-height: 1.62;
}


/* =========================================================
   PRÓXIMAMENTE
========================================================= */

.bi-coming-soon {
  position: relative;
  z-index: 2;

  margin-top: 15px;

  min-height: 145px;

  padding:
    21px 23px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  overflow: hidden;

  border-radius: 24px;

  border:
    1px solid
    rgba(227,27,35,.16);

  background:

    radial-gradient(
      circle at 0% 50%,
      rgba(227,27,35,.14),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(66,7,11,.42),
      rgba(13,8,9,.90)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.045);
}


.bi-coming-soon-copy {
  max-width: 720px;
}


.bi-coming-soon-label {
  color:
    #ff7c82;

  font-size: .58rem;

  font-weight: 950;

  letter-spacing: .16em;
}


.bi-coming-soon h3 {
  margin-top: 6px;

  font-size:
    clamp(
      1.35rem,
      2.4vw,
      2rem
    );

  line-height: 1.08;

  letter-spacing: -.03em;
}


.bi-coming-soon p {
  margin-top: 9px;

  color:
    #a5a7ab;

  font-size: .76rem;

  line-height: 1.55;
}


.bi-coming-soon-badge {
  min-width: 230px;

  min-height: 83px;

  padding: 14px 16px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  border-radius: 18px;

  color: white;

  text-align: center;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:

    linear-gradient(
      145deg,
      rgba(227,27,35,.18),
      rgba(15,16,18,.90)
    );

  box-shadow:

    0 6px 0
    rgba(82,6,10,.78),

    0 14px 24px
    rgba(0,0,0,.28),

    inset 0 1px 0
    rgba(255,255,255,.07);
}


.bi-coming-soon-badge > i {
  color:
    var(--bi-red-bright);

  font-size: 1.3rem;
}


.bi-coming-soon-badge span {
  font-size: .66rem;

  font-weight: 950;

  line-height: 1.4;

  letter-spacing: .04em;
}


.bi-coming-soon-badge strong {
  margin:
    0 5px;

  color:
    var(--bi-red-bright);
}


/* =========================================================
   FOOTER BI
========================================================= */

.bi-news-footer {
  position: relative;
  z-index: 2;

  margin-top: 18px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.bi-powered {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    #81858b;

  font-size: .64rem;
}


.bi-powered img {
  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  object-fit: contain;
}


.bi-powered strong {
  color:
    #d9dbde;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

  .bi-institutional-card:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(227,27,35,.20);

    box-shadow:

      0 9px 0
      rgba(66,4,8,.70),

      0 24px 38px
      rgba(0,0,0,.36),

      inset 0 1px 0
      rgba(255,255,255,.055);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .bi-institutional-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .bi-institutional-card:last-child {
    grid-column:
      1 / -1;
  }


  .bi-coming-soon {
    align-items: stretch;

    flex-direction: column;
  }


  .bi-coming-soon-badge {
    width: 100%;

    min-width: 0;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 760px) {

  .bi-news-section {
    width:
      calc(100% - 20px);

    padding-top: 49px;

    scroll-margin-top: 78px;
  }


  .bi-news-shell {
    padding:
      18px 13px;

    border-radius: 27px;
  }


  .bi-brand {
    gap: 12px;
  }


  .bi-brand-logo {
    width: 72px;
    height: 72px;

    flex:
      0 0 72px;
  }


  .bi-brand-logo img {
    width: 64px;
    height: 64px;
  }


  .bi-brand-copy h2 {
    font-size:
      clamp(
        1.75rem,
        9vw,
        2.45rem
      );
  }


  .bi-brand-copy p {
    font-size: .73rem;
  }


  .bi-institutional-grid {
    grid-template-columns:
      1fr;

    gap: 12px;
  }


  .bi-institutional-card,
  .bi-institutional-card:last-child {
    grid-column: auto;

    min-height: 220px;

    border-radius: 20px;
  }


  .bi-coming-soon {
    min-height: 0;

    padding:
      18px 16px;

    border-radius: 21px;
  }


  .bi-powered {
    justify-content: center;

    text-align: center;
  }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 370px) {

  .bi-brand-logo {
    width: 62px;
    height: 62px;

    flex:
      0 0 62px;
  }


  .bi-brand-logo img {
    width: 56px;
    height: 56px;
  }


  .bi-brand-copy h2 {
    font-size: 1.63rem;
  }


  .bi-kicker {
    font-size: .53rem;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .bi-institutional-card {
    transition: none;
  }

}