/* ==========================================================================
   Landing "Hazte Cliente" - Beneficios
   Estilos bajo .hc-landing para no chocar con corev15.css de SharePoint 2013.
   Requiere base.css. Breakpoints: xs <768 | sm 768-991 | md 992-1199 | lg >=1200
   ========================================================================== */

/* ==========================================================================
   BENEFICIOS
   ========================================================================== */
.hc-landing .hc-benefits {
  padding: 73px 0 74px;
  background: #012169;
}

.hc-landing .hc-benefits-title {
  margin-bottom: 40px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}

.hc-landing .hc-benefit-col {
  margin-bottom: 30px;
}

.hc-landing .hc-benefit {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

.hc-landing .hc-benefit img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.hc-landing .hc-benefit-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 30px 22px 0;
  text-align: center;
}

.hc-landing .hc-benefit-text h3 {
  color: #00c1d5;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.12;
  text-transform: none;
}

.hc-landing .hc-benefit-text p {
  margin-top: 14px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

/* Puntos del carrusel (solo xs) */
.hc-landing .hc-dots {
  font-size: 0;
  text-align: center;
}

.hc-landing .hc-dot {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin: 0 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e6e6e6;
  cursor: pointer;
  outline: 0;
}

.hc-landing .hc-dot.active {
  background: #00c1d5;
}

/* md (992 - 1199) */
@media (max-width: 1199px) {
  .hc-landing .hc-benefits {
    padding-top: 60px;
    padding-bottom: 50px;
  }
}

/* lg: columnas con medianil reducido como en el diseño */
@media (min-width: 1200px) {
  .hc-landing .hc-benefits-row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .hc-landing .hc-benefits-row>.hc-benefit-col {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0;
  }

  .hc-landing .hc-benefit {
    max-width: none;
  }

  .hc-landing .hc-benefit img {
    border-radius: 0;
  }

  .hc-landing .hc-benefit-text {
    padding: 40px 34px 0;
  }

  .hc-landing .hc-benefit-text p {
    margin-top: 12px;
    color: #e4e4e4;
  }
}

/* xs (< 768): carrusel horizontal */
@media (max-width: 767px) {

  /* Beneficios: carrusel horizontal */
  .hc-landing .hc-benefits {
    padding: 53px 0 33px;
  }

  .hc-landing .hc-benefits-title {
    margin-bottom: 43px;
  }

  .hc-landing .hc-benefits-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 -15px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 8px;
    scrollbar-width: none;
  }

  .hc-landing .hc-benefits-row::-webkit-scrollbar {
    display: none;
  }

  .hc-landing .hc-benefits-row:before,
  .hc-landing .hc-benefits-row:after {
    display: none;
  }

  .hc-landing .hc-benefits-row>.hc-benefit-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 326px;
    flex: 0 0 326px;
    max-width: 85vw;
    margin-bottom: 0;
    padding: 0 8px;
    scroll-snap-align: start;
  }

  .hc-landing .hc-benefit {
    max-width: 310px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .45s cubic-bezier(.22, .61, .36, 1);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  .hc-landing .hc-benefit img {
    border-radius: 0;
  }

  /* La tarjeta activa queda a tamaño completo; las demás se reducen */
  .hc-landing .hc-benefits-row.hc-is-ready>.hc-benefit-col:not(.hc-is-active) .hc-benefit {
    -webkit-transform: scale(.94);
    transform: scale(.94);
  }

  /* Sin snap mientras se anima con los puntos, para que no "salte" */
  .hc-landing .hc-benefits-row.hc-is-animating {
    -ms-scroll-snap-type: none;
    scroll-snap-type: none;
  }

  .hc-landing .hc-dots-wrap {
    margin-top: 22px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hc-landing .hc-benefit {
      -webkit-transition: none;
      transition: none;
    }
  }
}