/* ==========================================================
   ECOSISTEMA BL
   Módulo transparente para HubSpot
========================================================== */

.bl-ecosystem {
  --bl-text: #182536;
  --bl-muted: #6f7884;
  --bl-accent: #ef3f64;

  --bl-card-width: 256px;
  --bl-card-height: 336px;
  --bl-scene-height: 480px;

  position: relative;

  width: 100%;

  padding:
    85px
    20px
    80px;

  /*
    IMPORTANTE:
    El módulo no impone ningún fondo.
    Se verá el background de la sección
    de HubSpot donde esté colocado.
  */
  background: transparent;

  /*
    Evitamos scroll horizontal generado
    por las cards 3D, pero permitimos
    que las sombras respiren verticalmente.
  */
  overflow-x: clip;
  overflow-y: visible;

  color: var(--bl-text);

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-weight: 400;
}


/* ==========================================================
   HEADER
========================================================== */

.bl-ecosystem__header {
  position: relative;

  z-index: 20;

  max-width: 780px;

  /*
    Separación amplia entre
    encabezado y carrusel.
  */
  margin:
    0
    auto
    180px;

  text-align: center;
}


/* Eyebrow */

.bl-ecosystem__eyebrow {
  display: block;

  margin-bottom: 14px;

  color: var(--bl-accent);

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* Título principal */

.bl-ecosystem__title {
  margin: 0;

  /* TÍTULO EN BLANCO */
  color: #ffffff;

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size:
    clamp(
      34px,
      5vw,
      58px
    );

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -0.035em;
}


/* Texto introductorio */

.bl-ecosystem__intro {
  max-width: 640px;

  margin:
    24px
    auto
    0;

  color: var(--bl-muted);

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 1.7;
}


/* ==========================================================
   CARRUSEL
========================================================== */

.bl-carousel {
  position: relative;

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

  margin: 0 auto;

  user-select: none;
}


/* Escena 3D */

.bl-carousel__scene {
  position: relative;

  height:
    var(--bl-scene-height);

  perspective: 950px;

  perspective-origin:
    50% 50%;

  cursor: grab;

  touch-action: pan-y;
}


.bl-carousel__scene:active {
  cursor: grabbing;
}


/* Cilindro 3D */

.bl-carousel__track {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    var(--bl-card-width);

  height:
    var(--bl-card-height);

  transform-style:
    preserve-3d;

  -webkit-transform-style:
    preserve-3d;

  will-change:
    transform;
}


/* ==========================================================
   CARDS
========================================================== */

.bl-card {
  position: absolute;

  inset: 0;

  width:
    var(--bl-card-width);

  height:
    var(--bl-card-height);

  overflow: hidden;

  border-radius: 23px;

  color: #ffffff;

  /*
    Colores configurables desde
    los campos de HubSpot.
  */
  background:
    linear-gradient(
      145deg,
      var(--card-color-inicial, #433184),
      var(--card-color-final, #866fd1)
    );

  box-shadow:
    0 22px 50px
    rgba(19, 32, 51, 0.18);

  transform-style:
    preserve-3d;

  -webkit-transform-style:
    preserve-3d;

  /*
    La superficie de la card continúa
    visible cuando pasa por detrás.
  */
  backface-visibility: visible;

  -webkit-backface-visibility:
    visible;

  cursor: pointer;

  isolation: isolate;

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  transition:
    box-shadow
    250ms
    ease;

  will-change:
    transform,
    opacity,
    filter;
}


/*
  Evitamos mostrar textos e iconos
  invertidos cuando una card está
  detrás del cilindro.
*/

.bl-card__top,
.bl-card__content {
  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


/* ==========================================================
   IMAGEN DE LA CARD
========================================================== */

.bl-card__image {
  position: absolute;

  inset: 0;

  z-index: -3;

  overflow: hidden;

  pointer-events: none;
}


.bl-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.03);

  transition:
    transform
    600ms
    ease;
}


/* Zoom sutil */

.bl-card:hover
.bl-card__image img,
.bl-card.is-active
.bl-card__image img {
  transform:
    scale(1.08);
}


/* ==========================================================
   OVERLAY SOBRE IMAGEN
========================================================== */

.bl-card__overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  /*
    Mezclamos los colores configurados
    en HubSpot con la fotografía.
  */

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--card-color-inicial, #433184) 45%,
        transparent
      )
      0%,

      rgba(0, 0, 0, 0.12)
      42%,

      color-mix(
        in srgb,
        var(--card-color-final, #866fd1) 75%,
        rgba(0, 0, 0, 0.45)
      )
      100%
    );

  pointer-events: none;
}


/*
  Fallback para navegadores que no
  soporten color-mix.
*/

@supports not (
  color:
  color-mix(
    in srgb,
    red,
    blue
  )
) {

  .bl-card__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08)
        0%,

        rgba(0, 0, 0, 0.2)
        45%,

        rgba(0, 0, 0, 0.72)
        100%
      );
  }

}


/*
  Cuando NO hay imagen, dejamos
  simplemente el gradiente de color.
*/

.bl-card:not(:has(.bl-card__image))
.bl-card__overlay {
  background:
    linear-gradient(
      145deg,
      var(--card-color-inicial, #433184),
      var(--card-color-final, #866fd1)
    );
}


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

.bl-card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  top: -130px;
  right: -105px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  z-index: -1;

  pointer-events: none;
}


.bl-card::after {
  content: "";

  position: absolute;

  width: 185px;
  height: 185px;

  left: -95px;
  bottom: -95px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius: 50%;

  z-index: -1;

  pointer-events: none;
}


.bl-card__glow {
  position: absolute;

  width: 175px;
  height: 175px;

  top: 40%;
  right: -88px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.09
    );

  filter:
    blur(3px);

  pointer-events: none;
}


/* ==========================================================
   PARTE SUPERIOR DE CARD
========================================================== */

.bl-card__top {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  position: relative;

  z-index: 5;

  padding:
    24px
    24px
    0;
}


/* Número */

.bl-card__number {
  align-self:
    flex-start;

  color:
    rgba(
      255,
      255,
      255,
      0.6
    );

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing:
    0.1em;
}


/* ==========================================================
   ICONO
========================================================== */

.bl-card__icon {
  display: grid;

  place-items: center;

  width: 50px;
  height: 50px;

  flex-shrink: 0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.38
    );

  border-radius: 15px;

  background:
    rgba(
      255,
      255,
      255,
      0.13
    );

  color: #ffffff;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* Iconos SVG de HubSpot */

.bl-card__icon svg {
  display: block;

  width: 23px;
  height: 23px;

  max-width: 23px;
  max-height: 23px;

  fill:
    currentColor;

  color:
    #ffffff;
}


/* Si posteriormente usamos
   iconos personalizados */

.bl-card__icon img {
  display: block;

  width: 23px;
  height: 23px;

  object-fit:
    contain;
}


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

.bl-card__content {
  display: flex;

  flex-direction:
    column;

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 5;

  padding: 24px;
}


/* Categoría */

.bl-card__category {
  margin-bottom: 9px;

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 400;

  line-height: 1.3;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


/* Título de las cards */

.bl-card__title {
  max-width: 220px;

  margin:
    0
    0
    20px;

  /* TÍTULOS DE CARDS EN BLANCO */
  color: #ffffff;

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 21px;

  font-weight: 700;

  line-height: 1.17;

  letter-spacing:
    -0.025em;
}


/* ==========================================================
   BOTÓN / FLECHA
========================================================== */

.bl-card__arrow {
  display: grid;

  place-items: center;

  width: 39px;
  height: 39px;

  padding: 0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.4
    );

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.13
    );

  color:
    #ffffff;

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    Arial,
    sans-serif;

  font-size: 18px;

  font-weight: 400;

  line-height: 1;

  text-decoration: none;

  transition:
    background
      220ms ease,
    color
      220ms ease,
    transform
      220ms ease;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


.bl-card:hover
.bl-card__arrow,
.bl-card.is-active
.bl-card__arrow {
  background:
    #ffffff;

  color:
    #202630;

  transform:
    translateX(3px);
}


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

.bl-card.is-active {
  box-shadow:
    0 30px 68px
    rgba(
      19,
      32,
      51,
      0.27
    );
}


/* Cards traseras */

.bl-card.is-behind {
  cursor: default;
}


/* ==========================================================
   SELECTORES INFERIORES
========================================================== */

.bl-carousel__dots {
  display: flex;

  justify-content:
    center;

  align-items:
    center;

  flex-wrap:
    nowrap;

  gap: 10px;

  /*
    Separación amplia respecto
    a las cards.
  */
  margin-top: 100px;

  position: relative;

  z-index: 30;
}


.bl-carousel__dot {
  width: 32px;
  height: 5px;

  flex-shrink: 0;

  padding: 0;

  border: 0;

  border-radius:
    100px;

  background:
    #d6d9de;

  cursor: pointer;

  transition:
    width
      260ms ease,
    background
      260ms ease,
    transform
      260ms ease;
}


.bl-carousel__dot:hover {
  background:
    #bfc4cb;
}


.bl-carousel__dot.is-active {
  width: 52px;

  background:
    var(--bl-accent);
}


/* ==========================================================
   ACCESIBILIDAD / FOCUS
========================================================== */

.bl-card:focus-visible,
.bl-carousel__dot:focus-visible {
  outline:
    3px solid
    rgba(
      239,
      63,
      100,
      0.32
    );

  outline-offset:
    5px;
}


/* ==========================================================
   TABLET
   <= 900px
========================================================== */

@media (max-width: 900px) {

  .bl-ecosystem {
    --bl-card-width:
      230px;

    --bl-card-height:
      305px;

    --bl-scene-height:
      430px;

    padding:
      65px
      15px
      65px;
  }


  .bl-ecosystem__header {
    margin-bottom:
      140px;
  }


  .bl-ecosystem__title {
    font-size:
      clamp(
        32px,
        6vw,
        46px
      );
  }


  .bl-ecosystem__intro {
    font-size:
      15px;
  }


  .bl-card__top {
    padding:
      21px
      21px
      0;
  }


  .bl-card__content {
    padding:
      21px;
  }


  .bl-card__icon {
    width:
      46px;

    height:
      46px;

    border-radius:
      14px;
  }


  .bl-card__icon svg,
  .bl-card__icon img {
    width:
      21px;

    height:
      21px;
  }


  .bl-card__title {
    max-width:
      195px;

    font-size:
      19px;
  }


  .bl-carousel__dots {
    margin-top:
      85px;
  }

}


/* ==========================================================
   MOBILE
   <= 600px
========================================================== */

@media (max-width: 600px) {

  .bl-ecosystem {
    --bl-card-width:
      190px;

    --bl-card-height:
      260px;

    --bl-scene-height:
      370px;

    padding:
      50px
      8px
      55px;
  }


  .bl-ecosystem__header {
    max-width:
      460px;

    margin-bottom:
      105px;

    padding-inline:
      14px;
  }


  .bl-ecosystem__eyebrow {
    margin-bottom:
      10px;

    font-size:
      11px;
  }


  .bl-ecosystem__title {
    font-size:
      clamp(
        28px,
        8.5vw,
        36px
      );

    font-weight:
      700;

    line-height:
      1.1;

    letter-spacing:
      -0.025em;
  }


  .bl-ecosystem__intro {
    max-width:
      390px;

    margin-top:
      18px;

    font-size:
      14px;

    font-weight:
      400;

    line-height:
      1.6;
  }


  .bl-card {
    border-radius:
      20px;
  }


  .bl-card__top {
    padding:
      17px
      17px
      0;
  }


  .bl-card__content {
    padding:
      17px;
  }


  .bl-card__icon {
    width:
      42px;

    height:
      42px;

    border-radius:
      12px;
  }


  .bl-card__icon svg,
  .bl-card__icon img {
    width:
      19px;

    height:
      19px;
  }


  .bl-card__number {
    font-size:
      9px;
  }


  .bl-card__category {
    margin-bottom:
      7px;

    font-size:
      8px;
  }


  .bl-card__title {
    max-width:
      165px;

    margin-bottom:
      14px;

    font-size:
      16px;

    font-weight:
      700;

    line-height:
      1.18;
  }


  .bl-card__arrow {
    width:
      34px;

    height:
      34px;

    font-size:
      16px;
  }


  /*
    Selectores suficientemente
    alejados de las cards.
  */

  .bl-carousel__dots {
    gap:
      7px;

    margin-top:
      70px;
  }


  .bl-carousel__dot {
    width:
      24px;

    height:
      4px;
  }


  .bl-carousel__dot.is-active {
    width:
      38px;
  }

}


/* ==========================================================
   MOBILE PEQUEÑO
   <= 380px
========================================================== */

@media (max-width: 380px) {

  .bl-ecosystem {
    --bl-card-width:
      175px;

    --bl-card-height:
      245px;

    --bl-scene-height:
      345px;

    padding:
      45px
      6px
      50px;
  }


  .bl-ecosystem__header {
    margin-bottom:
      90px;
  }


  .bl-ecosystem__title {
    font-size:
      27px;

    line-height:
      1.1;
  }


  .bl-ecosystem__intro {
    font-size:
      13px;
  }


  .bl-card__title {
    font-size:
      15px;
  }


  .bl-carousel__dots {
    margin-top:
      65px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

  .bl-card,
  .bl-card__image img,
  .bl-card__arrow,
  .bl-carousel__dot {
    transition-duration:
      0.01ms !important;
  }

}