/* tipografía usada en animación */
@media screen and (min-width: 1360px) {
  .titles-items {
    color: var(--Grey-Scale-900);
    font: var(--subtitle-bold);
  }
  .number-anim {
    color: var(--Grey-Scale-700);
    font: var(--text-overline);
    text-transform: uppercase;
  }
  .number-pag {
    color: var(--Grey-Scale-900);
    font: var(--text-body-2);
  }
  .number-total-pag {
    color: var(--Grey-Scale-400);
    font: var(--text-body-2);
  }
  .text-cell {
    color: var(--Grey-Scale-700);
    font: var(--text-body-1);
  }
}
@media screen and (min-width: 768px) and (max-width: 1359px) {
  .titles-items {
    color: var(--Grey-Scale-900);
    font: var(--subtitle-bold);
  }
  .number-anim {
    color: var(--Grey-Scale-700);
    font: var(--text-overline);
    text-transform: uppercase;
  }
  .number-pag {
    color: var(--Primary-Brand-Colour-700);
    font: var(--text-body-2);
  }
  .number-total-pag {
    color: var(--Grey-Scale-400);
    font: var(--text-body-2);
  }
  .text-cell {
    color: var(--Grey-Scale-700);
    font: var(--text-body-1);
  }
}
@media screen and (min-width: 200px) and (max-width: 767px) {
  .titles-items {
    color: var(--Grey-Scale-900);
    font: var(--subtitle-bold);
  }
  .number-anim {
    color: var(--Grey-Scale-700);
    font: var(--text-overline);
    text-transform: uppercase;
  }
  .number-pag {
    color: var(--Primary-Brand-Colour-700);
    font: var(--text-body-2);
  }
  .number-total-pag {
    color: var(--Grey-Scale-400);
    font: var(--text-body-2);
  }
  .text-cell {
    color: var(--Grey-Scale-700);
    font: var(--text-body-1);
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.flex {
  display: flex;
  gap: 12px;
}
.flex-column {
  flex-direction: column;
}
.color-blue {
  color: var(--Primary-Brand-Colour-700);
}
.border-8 {
  border-radius: 8px;
}
.video-container {
  transform-origin: center;
  width: 100%;
  height: auto;
}
.video-container-anim {
  transform-origin: center;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.button-up {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: var(--radius-radius-8, 8px);
  border: var(--border-border-stroke-border-1, 1px) solid
    var(--border-border-color-border-brand, #bdbdbd);
}
.button-down {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: var(--radius-radius-8, 8px);
  border: var(--border-border-stroke-border-1, 1px) solid
    var(--border-border-color-border-brand, #0451dd);
}
.btn-inactive {
  border: var(--border-border-stroke-border-1, 1px) solid
    var(--border-border-color-border-brand, #bdbdbd) !important;
}
.btn-active {
  border: var(--border-border-stroke-border-1, 1px) solid
    var(--border-border-color-border-brand, #0451dd) !important;
}

/* geo start */
@media screen and (min-width: 1360px) {
  .ypfcom__extraccion-geo {
    max-width: 1296px;
    width: 100%;
    height: auto;
  }
  .banner-geo-container {
    width: 100%;
    height: auto;
    /* overflow: hidden; */
  }
  .scroll-container {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1359px) {
  .ypfcom__extraccion-geo {
    /* padding: 0px 24px; */
    width: 100%;
  }
  .banner-geo-container {
    width: 100%;
    height: auto;
    /* overflow: hidden; */
  }
  .scroll-container {
    display: none;
  }
}
@media screen and (min-width: 200px) and (max-width: 767px) {
  .ypfcom__extraccion-geo {
    padding: 0px 24px;
    width: 100%;
  }
  .banner-geo-container {
    display: none;
  }

  .scroll-wrapper {
    width: 100%;
    position: relative;
  }

  .scroll-container {
    overflow-x: auto;
    width: 100%;
    height: auto;
    scrollbar-width: none;
  }
  .scroll-container::-webkit-scrollbar {
    display: none;
  }

  .scroll-content {
    width: 720px;
    /* overflow: hidden; */
  }
  .scroll-progress-bar {
    width: 100%;
    height: 4px;
    background-color: #ccc;
    position: relative; /* ahora no se mueve con el scroll */
    margin-top: 30px; /* opcional, separación con la imagen */
  }
  .scroll-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #007bff;
    transition: width 0.2s ease;
  }
}
/* geo end */

/* util start */
@media screen and (min-width: 1360px) {
  .row-potencial-1-util {
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .banner-util-container {
    width: 100%;
    height: auto;
    /* overflow: hidden; */
  }
}
@media screen and (min-width: 768px) and (max-width: 1359px) {
  .row-potencial-1-util {
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .banner-util-container {
    width: 100%;
    height: auto;
    /* overflow: hidden; */
  }
}
@media screen and (min-width: 200px) and (max-width: 767px) {
  .row-potencial-1-util {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
    gap: 40px;
  }
  .banner-util-container {
    /* width: 100%;
    height: 300px;
    background: #999999; */
    display: none;
  }
}
/* util end */

/* animacion start */
@media screen and (min-width: 1360px) {
  .ypfcom__extraccion-animacion {
    max-width: 1296px;
    width: 100%;
    justify-content: space-between;
  }
  .column-anim-izq {
    width: 45%;
    height: 494px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .column-anim-der {
    width: 50%;
    height: 100%;
  }
  .content-anim {
    border: solid 2px rgb(255, 255, 255);
    display: flex;
    align-items: end;
    width: 100%;
    height: 494px;
    border-radius: var(--radius-radius-8, 8px);
  }
  .paginator-anim {
    margin-top: 24px;
    gap: 44px;
    align-items: center;
  }
  .controlador-container {
    gap: 12px;
  }
  .ypfcom__extraccion-animacion-tablet {
    display: none;
  }
  .content-dynamic {
    gap: 40px;
  }
  .text-dynamic-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1359px) {
  .ypfcom__extraccion-animacion-tablet {
    display: none;
  }
  .ypfcom__extraccion-animacion {
    /* padding: 60px 24px; */
    width: 100%;
    min-height: 1024px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .column-anim-izq {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
  }
  .column-anim-der {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .content-anim {
    border: solid 2px white;
    display: flex;
    align-items: end;
    width: 100%;
    height: auto;
    border-radius: var(--radius-radius-8, 8px);
  }
  .paginator-anim {
    gap: 24px;
    align-items: center;
  }
  .controlador-container {
    gap: 12px;
  }
  /* .paginator-anim {
    display: none;
  }
  .button-up {
    display: none;
  }
  .button-down {
    display: none;
  } */
  .content-dynamic {
    gap: 40px;
  }
  .text-dynamic-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .barra-tablet {
    width: 20px;
    height: 4px;
    border-radius: 20px;
    background: var(--color-grey-scale-400, #bdbdbd);
  }
  .barra-tablet-active {
    width: 54px;
    height: 4px;
    border-radius: 20px;
    background: var(--color-primary-700, #0451dd);
  }
  .paginador-container-tablet {
    height: 100%;
    width: 100%;
    margin-top: 15px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  .barras-tablet {
    align-items: start;
    gap: 5px;
  }
}
@media screen and (min-width: 200px) and (max-width: 767px) {
  .ypfcom__extraccion-animacion {
    display: none;
  }
  .ypfcom__extraccion-animacion-tablet {
    /* padding: 60px 24px; */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .container-tabs {
    width: 100%;
    height: auto;
    gap: 24px;
    flex-direction: column;
  }
  .column-anim-izq {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
  }
  .column-anim-der {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .content-anim {
    border: solid 2px white;
    display: flex;
    align-items: end;
    width: 100%;
    height: auto;
    border-radius: var(--radius-radius-8, 8px);
  }
  .content-dynamic {
    gap: 40px;
  }
  .text-dynamic-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .num-tablet {
    display: block;
  }
  .tit-tablet {
    display: block;
  }
  .text-tablet {
    display: block;
  }
  .number-span-tablet {
    color: var(--Primary-Brand-Colour-700);
    font: var(--text-body-2);
  }
  .paginador-container-tablet {
    height: 100%;
    width: 100%;
    margin-top: 15px;
    align-items: center;
    gap: 15px;
  }
  .barras-tablet {
    align-items: start;
    gap: 5px;
  }
  .barra-tablet {
    width: 20px;
    height: 4px;
    border-radius: 20px;
    background: var(--color-grey-scale-400, #bdbdbd);
  }
  .barra-tablet-active {
    width: 54px;
    height: 4px;
    border-radius: 20px;
    background: var(--color-primary-700, #0451dd);
  }
  .button-up-tablet,
  .button-down-tablet {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: var(--radius-radius-8, 8px);
    border: var(--border-stroke-border-1, 1px) solid var(--border-color-border-brand, #0451dd);
  }
  .btn-inactive {
    border: var(--border-stroke-border-1, 1px) solid var(--border-color-border-brand, #bdbdbd) !important;
  }
  .btn-active {
    border: var(--border-stroke-border-1, 1px) solid var(--border-color-border-brand, #0451dd) !important;
  }
}
/* animacion mobile end */

.content-anim {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.video-fallback {
  transition: opacity 0.3s ease;
  opacity: 1;
}

.video-container-anim {
  width: 100%;
  height: auto;
}

.card-list.ypfcom__panels-cards-text .glider-track,
.card-list.ypfcom__panels-cards-text .card-list__container,
.card-list.ypfcom__panels-cards-text-1 .glider-track,
.card-list.ypfcom__panels-cards-text-1 .card-list__container,
.card-list.ypfcom__panels-cards-buckets .glider-track,
.card-list.ypfcom__panels-cards-buckets .card-list__container,
.card-list.ypfcom__panels-cards-info .glider-track,
.card-list.ypfcom__panels-cards-info .card-list__container,
.card-list.ypfcom__panels-cards-information .glider-track,
.card-list.ypfcom__panels-cards-information .card-list__container,
.card-list.ypfcom__panels-cards-information-lite .glider-track,
.card-list.ypfcom__panels-cards-information-lite .card-list__container,
.ypfcom__panel-cards-carousel-buckets-video .glider-track,
.ypfcom__panel-cards-carousel-buckets-video .card-list__container {
  padding-inline: 0;
}

.card-list.ypfcom__panels-cards-buckets .generic-image {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .card-list.ypfcom__panels-cards-buckets .card-list__pagination {
    margin-left: 0px;
  }
}

.card-list.ypfcom__panels-cards-buckets .generic-card__title {
  font: var(--subtitle-bold);
}