/* =========================================================
   BEXIE ENERGY · PARTNERS
========================================================= */

.bx-partners,
.bx-partners *{
  box-sizing:border-box;
}

.bx-partners{
  --navy:#1B3761;
  --teal:#2395A5;
  --cyan:#61C4E3;
  --soft:#E3EAEC;
  --muted:#718096;

  position:relative;
  overflow:hidden;

  padding:110px 5% 90px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfe 60%,
      #f5f9fa 100%
    );

  font-family:Montserrat,Arial,sans-serif;
  color:var(--navy);
}


/* =========================================================
   DECORACIÓN
========================================================= */

.bx-partners__glow{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.bx-partners__glow--one{
  width:500px;
  height:500px;

  left:-260px;
  top:-280px;

  background:
    radial-gradient(
      circle,
      rgba(97,196,227,.13),
      transparent 68%
    );
}

.bx-partners__glow--two{
  width:600px;
  height:600px;

  right:-350px;
  bottom:-400px;

  background:
    radial-gradient(
      circle,
      rgba(35,149,165,.09),
      transparent 68%
    );
}


.bx-partners__wrap{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1500px;

  margin:auto;
}


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

.bx-partners__head{
  max-width:900px;

  margin:0 auto 70px;

  text-align:center;
}

.bx-partners__eyebrow{
  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-bottom:18px;

  padding:9px 15px;

  border-radius:100px;

  background:
    rgba(35,149,165,.08);

  color:var(--teal);

  font-size:10px;

  font-weight:850;

  letter-spacing:.14em;
}

.bx-partners__eyebrow span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--teal);

  box-shadow:
    0 0 0 5px rgba(35,149,165,.10);
}


.bx-partners__head h2{
  margin:0;

  color:var(--navy);

  font-size:
    clamp(45px,5vw,70px);

  line-height:1.02;

  letter-spacing:-3px;

  font-weight:900;
}


.bx-partners__head h2 span{
  color:var(--teal);
}


.bx-partners__head p{
  max-width:760px;

  margin:22px auto 0;

  color:var(--muted);

  font-size:16px;

  line-height:1.7;
}


/* =========================================================
   STAGE
========================================================= */

.bx-partners__stage{
  position:relative;

  width:100%;

  padding:25px 0 35px;
}


/* =========================================================
   LÍNEA
========================================================= */

.bx-partners__line{
  position:absolute;

  z-index:0;

  left:2%;
  top:45px;

  width:96%;
  height:240px;

  overflow:visible;
}


.bx-partners__line path{
  fill:none;

  stroke:
    rgba(27,55,97,.13);

  stroke-width:1.3;

  stroke-linecap:round;
}


/* =========================================================
   GRID
========================================================= */

.bx-partners__grid{
  position:relative;
  z-index:2;

  display:grid;

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

  gap:15px;

  align-items:center;
}


/* Movimiento alternado para darle dinamismo */

.bx-partners__item:nth-child(even){
  transform:translateY(25px);
}


/* =========================================================
   ITEM
========================================================= */

.bx-partners__item{
  position:relative;

  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:center;
}


/* =========================================================
   DOT
========================================================= */

.bx-partners__dot{
  width:10px;
  height:10px;

  margin-bottom:13px;

  border-radius:50%;

  background:var(--teal);

  box-shadow:
    0 0 0 6px rgba(35,149,165,.08);
}


/* =========================================================
   CARD
========================================================= */

.bx-partners__card{
  position:relative;

  width:100%;

  aspect-ratio:1/1;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:25px;

  overflow:hidden;

  border-radius:50%;

  background:
    rgba(255,255,255,.96);

  border:
    1px solid rgba(27,55,97,.09);

  box-shadow:
    0 18px 50px rgba(27,55,97,.09),
    inset 0 0 0 7px rgba(227,234,236,.25);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* aro interior */

.bx-partners__card:before{
  content:"";

  position:absolute;

  inset:9px;

  border-radius:50%;

  border:
    1px solid rgba(35,149,165,.055);

  pointer-events:none;
}


.bx-partners__item:hover .bx-partners__card{
  transform:
    translateY(-8px)
    scale(1.025);

  border-color:
    rgba(35,149,165,.25);

  box-shadow:
    0 27px 65px rgba(27,55,97,.14),
    inset 0 0 0 7px rgba(97,196,227,.08);
}


/* =========================================================
   LOGOS
========================================================= */

.bx-partners__card img{
  position:relative;
  z-index:2;

  display:block;

  width:100%;
  height:100%;

  max-width:150px;
  max-height:95px;

  object-fit:contain;

  object-position:center;

  transition:
    transform .3s ease;
}


.bx-partners__item:hover img{
  transform:scale(1.045);
}


/* Algunos logos son muy horizontales */

.bx-partners__item:nth-child(2) img,
.bx-partners__item:nth-child(4) img,
.bx-partners__item:nth-child(6) img{
  max-width:165px;
}


/* =========================================================
   LABEL
========================================================= */

.bx-partners__country{
  margin-top:16px;

  color:#9aa6b4;

  font-size:8px;

  font-weight:800;

  letter-spacing:.13em;

  text-transform:uppercase;

  opacity:0;

  transform:translateY(-5px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.bx-partners__item:hover
.bx-partners__country{
  opacity:1;

  transform:translateY(0);
}


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

.bx-partners__footer{
  max-width:850px;

  margin:75px auto 0;

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  gap:20px;
}


.bx-partners__footer-line{
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(27,55,97,.15)
    );
}


.bx-partners__footer-line:last-child{
  background:
    linear-gradient(
      90deg,
      rgba(27,55,97,.15),
      transparent
    );
}


.bx-partners__footer p{
  margin:0;

  color:#8997a8;

  font-size:11px;

  text-align:center;

  letter-spacing:.02em;
}


.bx-partners__footer strong{
  color:var(--teal);

  font-weight:800;
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px){

  .bx-partners__grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:35px;
  }


  .bx-partners__item:nth-child(even){
    transform:none;
  }


  .bx-partners__line{
    display:none;
  }


  .bx-partners__card{
    max-width:260px;
  }

}


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

@media(max-width:800px){

  .bx-partners{
    padding:90px 5%;
  }


  .bx-partners__head{
    margin-bottom:50px;
  }


  .bx-partners__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:22px;
  }


  .bx-partners__dot{
    display:none;
  }


  .bx-partners__country{
    opacity:1;

    transform:none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:520px){

  .bx-partners{
    padding:70px 18px;
  }


  .bx-partners__head{
    margin-bottom:38px;
  }


  .bx-partners__head h2{
    font-size:39px;

    line-height:1.04;

    letter-spacing:-1.8px;
  }


  .bx-partners__head p{
    font-size:14px;

    line-height:1.65;
  }


  .bx-partners__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:13px;
  }


  .bx-partners__card{
    padding:18px;

    box-shadow:
      0 12px 30px rgba(27,55,97,.07);
  }


  .bx-partners__card img{
    max-width:115px;
    max-height:70px;
  }


  .bx-partners__country{
    margin-top:10px;

    font-size:7px;
  }


  .bx-partners__footer{
    margin-top:45px;

    grid-template-columns:1fr;

    gap:10px;
  }


  .bx-partners__footer-line{
    display:none;
  }

}