
.xs\:title_s {
  font-family: var(--font-family-1-smbold);
  font-size: var(--size-font-175);
  line-height: var(--size-font-line-height-xl);
  font-style: var(--font-style-normal);
}


#carrusel-planes-plan-supertranquilidad .swiper-pagination-custom, #carrusel-planes-plan-supertranquilidad .swiper-pagination, #carrusel-planes-plan-supertranquilidad .swiper-pagination-clickable{
  width: fit-content !important;
    padding: 8px;
    border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
  background: var(--Color-Surface-General-1, #FFF);
    margin-left: auto !important;
    margin-right:auto !important;
  }
  #carrusel-planes-plan-supertranquilidad .swiper-pagination {
      width: fit-content !important;
      padding: 14px 8px;
      border-radius: 100px;
      border: 1px solid #C8D9D0;
      background: #FFF;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;    /* Reseteamos posibles traslaciones de Swiper */
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 8px; /* Espacio entre los puntos */
    position: static !important;
    margin: 0 !important;
  }
  .puntitos-swiper div.swiper-prev::after {
    content: "";
  }
  
  .puntitos-swiper div.swiper-prev.swiper-button-disabled{
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Disabled, #BFBFBF) !important;
  background: var(--Color-Surface-General-1, #FFF);
  }
  
  .puntitos-swiper div.swiper-next.swiper-button-disabled{
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Disabled, #BFBFBF) !important;
  background: var(--Color-Surface-General-1, #FFF);
  }
  
  .puntitos-swiper div.swiper-prev {
   height: 40px; /* Tu alto deseado */
    pointer-events: all;
    position: static !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
  background: var(--Color-Surface-General-1, #FFF);
  }
  .puntitos-swiper div.swiper-next {
    height: 40px; /* Tu alto deseado */
    pointer-events: all;
    position: static !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
  background: var(--Color-Surface-General-1, #FFF);
    
  }
  .imagen-siguiente, .imagen-anterior{
    width: 24px;
    height: 24px;
    
  }
  .puntitos-swiper div.swiper-prev.swiper-button-disabled .imagen-anterior{
    background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Left-Disabled.svg");
  }
  .puntitos-swiper div.swiper-next.swiper-button-disabled .imagen-siguiente{
    background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Right-Disabled.svg");
  }
  .imagen-siguiente{
    background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Right.svg");
  }
  
  .imagen-anterior{
    background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Left.svg");
    
  }
  div.swiper-next, div.swiper-prev  {
      width: 40px !important;  
    
  }
  
  div.swiper-next::after {
    content: "";
    
  }
  

#cards-solares .swiper-horizontal>.swiper-pagination-bullets,
#cards-solares .swiper-pagination-bullets.swiper-pagination-horizontal,
#cards-solares .swiper-pagination-custom,
#cards-solares .swiper-pagination-fraction {
  pointer-events:all;
  bottom:-50px;
  
}

#cards-solares .swiper-pagination-bullet {
  background: #fff;
  width: 10px;
  height: 10px;
  opacity: 1;
  border: 1px solid rgb(47, 104, 82) !important;
  margin: 0px 8px !important;
  
}

#cards-solares .swiper-pagination-bullet-active {
   background-color: var(--Color-Surface-Interactive-Active, #007f33) !important;
}

div.swiper-button-prev::after {
  display: none;
  content: url("/documents/20122/22203520/left_arrow.svg");
}

div.swiper-button-next::after {
  display: none;
  content: url("/documents/20122/22203520/right_arrow.svg");
}

.cards-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 16px 82px;
  overflow: hidden;

  & .title-container {
    color: var(--Color-Content-General-1, #2C2C2C);
    text-align: center;
    font-feature-settings: "liga" 0, "clig" 0;
    margin: 0px;
    padding: 0px;
  }

  & .swiper {
    width: 100%;
    height: auto;
    padding-top: 32px;
    overflow: visible;

    & .item {
      min-width: 304px;
      width: 304px;
      max-width: 304px;
      min-height: 588px;
      height: 100%;
      max-height: 588px;
      box-sizing: content-box;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      border-radius: var(--border-radius-l, 16px);
      border: var(--border-width-l, 2px) solid var(--Color-Border-General-1, #C8D9D0);
      background: var(--Color-Surface-General-1, #FFF);
      overflow: hidden;

      & .item__section-primary {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;

        & .img-placas {
          width: 100%;
          height: 312px;
          object-fit: cover;
        }

        & .cintillo-cards {
          width: 100%;
          height: 36px;
          padding: 0px;
          background-color: rgb(0, 122, 203);
          display: flex;
          place-items: center;
          color: white;
          flex-direction: column;
          justify-content: center;
          gap: 0px;
          align-self: stretch;
        }
      }

      & .item__section-secondary {
        display: flex;
        flex: 1 0 0px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        padding-bottom: 35px;

        & .container-middle {
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          padding: 16px;
          align-items: center;
          gap: 16px;
          align-self: stretch;

          & .titulo-card {
            text-align: center;
            padding: 0px;
            margin: 0px;
          }

          & .subtitulo-card {
            padding: 0px;
            margin: 0px;
            text-align: center;
            align-self: stretch;
            font-feature-settings: "liga" 0, "clig" 0;
          }

          & .lista-subtitulo {
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;

            & .item-lista {
              display: flex;
              align-items: center;

              & .text-list {
                text-align: center;
                margin: 0px;
              }
            }
          }
        }

        & .card-btn {
          padding-bottom: 24px;
          text-decoration: underline;
        }
      }
    }
  }
}

@media (min-width: 576px) {
  .cards-container {
    padding: 40px 48px 82px;
  }
}

@media(min-width: 768px){
    div.swiper-button-prev::after {
    display: block;
  }

  div.swiper-button-next::after {
    display: block;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 53%) !important;
    left: 25px !important;
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 53%) !important;
    right: 25px !important;
    left: auto;
  }

}

@media (min-width: 992px) {
  div.swiper-button-prev::after {
    display: none;
  }

  div.swiper-button-next::after {
    display: none;
  }

   #cards-solares .swiper-wrapper{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 24px;
   }

  .cards-container{
  
  & .swiper{
    
    & .item{
    min-width: 402px;
      width: 402px;
  }
  }
}
  

  .lg\:title_m {
    font-family: var(--font-family-1-smbold);
    font-size: var(--size-font-200);
    line-height: var(--size-font-line-height-2xl);
    font-style: var(--font-style-normal);
  }
}


  @media (min-width: 1200px) {
    .swiper-pagination {
      display: none;
    }
    .cards-container{
  
  & .swiper{
    
    & .item{
    min-width: 316px;
      width: 316px;
  }
  }
}
  
  

    .cards-container {
      width: 100%;
      padding: 40px 102px;


      & .swiper {
        & .swiper-wrapper {
          display: flex;
          width: 100%;
          gap: 24px;
          justify-content: center;
        }

        & .item {
          width: 316px;
          max-width: 316px;
          box-sizing: border-box;
          margin: 0px !important;

          & .item__section-secondary {
            & .container-middle {
              padding-top: 38px;
            }
          }
        }
      }
    }

    div.swiper-button-prev::after {
      display: none;
    }

    div.swiper-button-next::after {
      display: none;
    }
  }

  @media (min-width: 1920px) {
    .cards-container {
      padding: var(--size-space-40, 40px) var(--14001920-page-margin, 324px);
      min-width: 1920px;


      & .swiper {
        & .swiper-wrapper {
          overflow: hidden;
        }

        & .item {
          width: 408px;
          max-width: 408px;
        }
      }
    }
  }

  .no-select {
    user-select: none;
    cursor: default;
  }



/***/




#contenedor-total-swiper-pasos .title-container{
    text-align: center;
    display: flex;
    margin: 0;
    padding: var(--size-space-0, 0);
    
    flex-direction: column;
    
    align-items: center;
    
    gap: var(--size-space-16, 16px);
    
    align-self: stretch;
      
    }
    #contenedor-total-swiper-pasos{
      display: flex;
    
    padding: var(--size-space-40, 40px) var(--360-575-page-margin, 16px) var(--size-space-20, 20px) var(--360-575-page-margin, 16px);
    
    flex-direction: column;
    
    align-items: center;
    
    gap: var(--size-space-24, 24px);
    
    align-self: stretch;
     background: var(--Color-Background-General-1, #FFF);
     
    }
    .contenedorFechaTarjeta, .minutosVersionCorta, .minutosVersionLarga  {
      color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.80)) !important;
    }
    
    .puntitos-swiper{
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }
    
    #carrusel-planes-plan-supertranquilidad .contenedorTarjetaConParteGris{
    display: flex;
    width: 304px;
    padding: var(--size-space-0, 0);
    align-items: flex-start;
    gap: var(--size-space-0, 0);
      border-radius: var(--border-radius-l, 16px);
    border: var(--border-width-s, 1px) solid var(--Color-Border-Interactive-Active, #699282);
    background: var(--Color-Background-General-1, #FFF);
    }
    
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-custom, #carrusel-planes-plan-supertranquilidad .swiper-pagination, #carrusel-planes-plan-supertranquilidad .swiper-pagination-clickable{
    width: fit-content !important;
      padding: 8px;
      border-radius: var(--border-radius-xxl, 100px);
    border: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    background: var(--Color-Surface-General-1, #FFF);
      margin-left: auto !important;
      margin-right:auto !important;
    }
    #carrusel-planes-plan-supertranquilidad .swiper-pagination {
        width: fit-content !important;
        padding: 14px 8px;
        border-radius: 100px;
        border: 1px solid #C8D9D0;
        background: #FFF;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;    /* Reseteamos posibles traslaciones de Swiper */
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px; /* Espacio entre los puntos */
      position: static !important;
      margin: 0 !important;
    }
    .puntitos-swiper div.swiper-prev::after {
      content: "";
    }
    
    .puntitos-swiper div.swiper-prev.swiper-button-disabled{
    border-radius: var(--border-radius-xxl, 100px);
    border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Disabled, #BFBFBF) !important;
    background: var(--Color-Surface-General-1, #FFF);
    }
    
    .puntitos-swiper div.swiper-next.swiper-button-disabled{
    border-radius: var(--border-radius-xxl, 100px);
    border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Disabled, #BFBFBF) !important;
    background: var(--Color-Surface-General-1, #FFF);
    }
    
    .puntitos-swiper div.swiper-prev {
     height: 40px; /* Tu alto deseado */
      pointer-events: all;
      position: static !important;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius-xxl, 100px);
    border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
    background: var(--Color-Surface-General-1, #FFF);
    }
    .puntitos-swiper div.swiper-next {
      height: 40px; /* Tu alto deseado */
      pointer-events: all;
      position: static !important;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius-xxl, 100px);
    border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
    background: var(--Color-Surface-General-1, #FFF);
      
    }
    .imagen-siguiente, .imagen-anterior{
      width: 24px;
      height: 24px;
      
    }
    .puntitos-swiper div.swiper-prev.swiper-button-disabled .imagen-anterior{
      background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Left-Disabled.svg");
    }
    .puntitos-swiper div.swiper-next.swiper-button-disabled .imagen-siguiente{
      background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Right-Disabled.svg");
    }
    .imagen-siguiente{
      background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Right.svg");
    }
    
    .imagen-anterior{
      background-image: url("/ibdmedia/Iconos y Pictogramas/Icon/Chevron/Left.svg");
      
    }
    div.swiper-next, div.swiper-prev  {
        width: 40px !important;  /* El ancho total que quieras */
      
    }
    
    div.swiper-next::after {
      content: ""; /* Obligatorio para que aparezca el pseudo-elemento */
      
    }
    
    #carrusel-planes-plan-supertranquilidad .swiper-wrapper {
    margin-bottom: 24px;
    }
    
    
    #carrusel-planes-plan-supertranquilidad .swiper-horizontal>.swiper-pagination-bullets,
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-bullets.swiper-pagination-horizontal,
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-custom,
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-fraction {
      pointer-events:all;
      
    }
    
    
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-bullet {
      background: #fff;
      width: 10px;
      height: 10px;
      opacity: 1;
      border: 1px solid rgb(47, 104, 82) !important;
      margin: 0px 8px !important;
      
    }
    #carrusel-planes-plan-supertranquilidad .item {
      height: auto;
    }
    
    #carrusel-planes-plan-supertranquilidad .swiper-pagination-bullet-active {
       background-color: var(--Color-Surface-Interactive-Active, #007f33) !important;
    }
    
    .seccion-boton{
      display: flex;
    padding: var(--size-space-16, 16px) var(--360-575-page-margin, 16px) var(--size-space-40, 40px) var(--360-575-page-margin, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    }
    
    
    #contenedorCarruselArticulos .owl-carousel{
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap:32px;
    }
    
    .contenedorTituloModuloInteresa{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .contenedorTituloModuloInteresa__container{
      min-width: 328px;
      max-width: 328px;
    }
    
    .contenedorTituloModuloInteresa .title-carousel {
        text-align: center;
        margin-top: 40px;
    }
    
    .contenedorInfoTarjeta{
    display: flex;
    
    padding: var(--size-space-0, 0);
    
    justify-content: space-between;
    
    align-items: center;
    
    align-self: stretch;
     
    }
    .contenedorInfoTarjeta .contenedorFechaTarjeta,
    .contenedorInfoTarjeta .minutosVersionLarga,
    .contenedorInfoTarjeta, .contenedorDescripcionArticuloInteresa .body_regular_s{
        color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.80)) !important;
     
    }
    .contenedorFechaTarjeta{
        width: 50%;
    }
    
    .contenedorMinutosLecturaTarjeta{
        width: 50%;
        text-align: right;
    }
    .minutosVersionCorta{
        color: #707070;
    }
    .parteGrisTarjeta {
        width: 14px;
    
    flex-shrink: 0;
    
    align-self: stretch;
     border-radius: var(--border-radius-l, 16px) var(--border-radius-none, 0) var(--border-radius-none, 0) var(--border-radius-l, 16px);
    
    background: var(--Color-Border-General-1, #C8D9D0);
     
    }
    
    .itemArticulos{
    display: flex;
    padding: var(--size-space-16, 16px) var(--size-space-24, 24px) var(--size-space-24, 24px) var(--size-space-12, 12px);
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    gap: var(--size-space-24, 24px);
    align-self: stretch;
    }
    
    .contenedorTituloArticuloInteresa{
        height: 48px;
        margin-bottom: 10px;
        color: #2C2C2C;
        font-family: 'IberPangeaText-Regular',sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .contenedorDescripcionArticuloInteresa{
        height: auto;
        color:#707070;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .botonLeerMas{
        color: #2F6852;
        text-align: center;
      font-family: "IberPangeaText-Regular",sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        text-decoration: underline !important;
    }
    .botonLeerMas:hover{
        opacity: .6
    }
    
    .contenedorTarjetaConParteGris{
        display: flex;
        flex-direction: row;
    }
    .contenedorTarjetaConParteGris:hover {
        border: 1px solid var(--Color-Border-Interactive-Selected, #008c39);
      boerdr-radius: 16px;
    }
    
    
    .contenedorTarjetaConParteGris:hover .parteGrisTarjeta {
        background-color: var(--Color-Border-Interactive-Selected, #008c39);
    }
    
    .minutosVersionLarga{
        display: none;
    }
    
    #contenedorCarruselArticulos .contenedor-boton {
      margin: 24px auto 0px;
      display: flex;
    }
    
    #contenedorCarruselArticulos .btn.contratalo {
      text-transform: none;
      color: #ffffff;
      font-size: 19px;
      margin: 0;
      background-color: #2F6852;
      border-color: #2F6852;
      height: 56px;
      margin-right: auto;
      margin-left: auto;
      min-width: 200px;
      max-width: 328px;
    }
    
    #contenedorCarruselArticulos .btn.contratalo:active,
    #contenedorCarruselArticulos .btn.contratalo:hover,
    #contenedorCarruselArticulos .btn.contratalo:focus {
      background: #2f6852ab !important;
      border: 1px solid #2f6852ab !important;
    }
    
    
        .minutosVersionLarga{
            display: block;
        }
    
        .minutosVersionCorta{
            display: none;
        }
        .contenedorTarjetaConParteGris{
            margin-left: 10px;
        }
    
        .itemArticulos{
            width: 290px;
        }
    
        #contenedorCarruselArticulos .owl-carousel{
            flex-direction: column;
            gap:12px;
            justify-content: initial;
            align-items: initial;
        }
    
    
    @media(min-width: 576px){
      #contenedor-total-swiper-pasos{
    padding: var(--size-space-40, 40px) var(--576-767-page-margin, 42px) var(--size-space-20, 20px) var(--576-767-page-margin, 42px);
    gap: var(--size-space-32, 32px);
     
      }
    .seccion-boton{
    padding: var(--size-space-16, 16px) var(--576-767-page-margin, 42px) var(--size-space-40, 40px) var(--576-767-page-margin, 42px);
    }
      
      
    }
    
    
    @media(min-width: 768px){
      #contenedor-total-swiper-pasos{
    padding: var(--size-space-16, 16px) var(--768-991-page-margin, 48px) var(--size-space-40, 40px) var(--768-991-page-margin, 48px);
     
     
     
      }
    .seccion-boton{
    padding: var(--size-space-16, 16px) var(--768-991-page-margin, 48px) var(--size-space-40, 40px) var(--768-991-page-margin, 48px);
     
     
    }
      
      
    }
    
    
    
    
    @media(min-width: 992px){
      #contenedor-total-swiper-pasos{
    padding: var(--size-space-40, 40px) var(--992-1199-page-margin, 82px) var(--size-space-20, 20px) var(--992-1199-page-margin, 82px);
     
     
     
     
      }
    .seccion-boton{
    padding: var(--size-space-16, 16px) var(--992-1199-page-margin, 82px) var(--size-space-40, 40px) var(--992-1199-page-margin, 82px);
    
     
     
     
     
    }
      
      
    }
    
    
    @media(min-width: 1200px){
      #contenedor-total-swiper-pasos{
    padding: var(--size-space-40, 40px) var(--1200-1399-page-margin, 102px) var(--size-space-20, 20px) var(--1200-1399-page-margin, 102px);
      }
      .itemArticulos{
        flex: none;
      }
     
     
     
     
      
    .seccion-boton{
    padding: var(--size-space-16, 16px) var(--1200-1399-page-margin, 102px) var(--size-space-40, 40px) var(--1200-1399-page-margin, 102px);
    
     
    
     
     
     
     
    }
    .puntitos-swiper{
      display: none;
    }
    
    #carrusel-planes-plan-supertranquilidad .swiper-wrapper {
    margin-bottom: 0;
      display: flex;
      gap: 24px;
      justify-content: space-between;
    }
    
    
    #carrusel-planes-plan-supertranquilidad .contenedorTarjetaConParteGris{
    width: 316px;
    }	
      
    }
    
    
    @media(min-width: 1920px){
    #contenedor-total-swiper-pasos{
    padding: var(--size-space-40, 40px) var(--14001920-page-margin, 324px) var(--size-space-20, 20px) var(--14001920-page-margin, 324px);
      }
    .seccion-boton{
    padding: var(--size-space-16, 16px) var(--14001920-page-margin, 324px) var(--size-space-40, 40px) var(--14001920-page-margin, 324px);
     
    }
    #carrusel-planes-plan-supertranquilidad .contenedorTarjetaConParteGris{
    width: 408px;
      margin: 0 !important;
    }	
    
      #carrusel-planes-plan-supertranquilidad .card-blog {
          width: 408px !important;
        }
  
      .itemArticulos{
        flex: 1 0 0;
      }
    }