.hero {
  background: #fff;
  position: relative;
  z-index: 1;
}
.hero-grid {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding: 0 10px;
  display: flex;
  min-height: 1078px;
  align-items: center;
}

.hero-grid h1 {
  color: var(--bleu-1-vivactis, #000082);
  font-family: "Unica One";
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 94%; /* 112.8px */
  text-transform: uppercase;
}

.hero-content {
  width: 100%;
  max-width: 995px;
}

.hero-p {
  width: 100%;
  max-width: 709px;
  margin: auto;
  margin-top: 24px;
}

.hero-p p strong {
  color: var(--bleu-1-vivactis, #000082);
  font-family: "Quicksand", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 80%;
  margin-bottom: 20px;
  display: block;
}

.hero-p p {
  color: var(--bleu-1-vivactis, #000082);
  font-family: "Quicksand", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 140.069%;
}

.hero-content .cta-row {
  margin-top: 131px;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 10px;
}

/** video **/
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* crea contexto de apilamiento propio */
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 113%;
  height: 101%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  transform: scale(1.01);
  transform-origin: center;
  pointer-events: none;
}

/* Safari: sin botón de play encima si bloquea el autoplay (se ve el poster) */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Overlay opcional para mejorar la legibilidad del texto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.stats-section {
  position: relative;
  padding: 0 10px;
  margin: 136px auto 90px;
}

.stats-container {
  max-width: 1544px;
  width: 100%;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.6);
  margin: 0 auto;
  padding: 0 52px 46px;
  position: relative;
  z-index: 1;
}

.stats-section .stats-head {
  transform: translateY(-40px);
}

.stats-section .stats-head h2 {
  color: var(--blanc, #fff);
  text-align: justify;
  font-family: "Unica One", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 83%; /* 83px */
  text-transform: uppercase;
}

.stats-section .stats-head p {
  color: var(--bleu-1-vivactis, #000082);
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  text-transform: uppercase;
}

.stats-section .stats-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.stats-section .stats-panel .stat-card {
  background-color: var(--bleu-1-vivactis, #000082);
  padding: 20px;
  width: calc(100% / 4);
  border-radius: 24px 24px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  min-height: 286px;
}

.stats-section .stat-card .num {
  margin-bottom: 15px;
}

.stats-section .stat-card .num .count-num {
  color: var(--blanc, #fff);
  text-align: right;
  font-family: "Quicksand", sans-serif;
  font-size: 128px;
  font-style: normal;
  font-weight: 700;
  line-height: 0.7;
}

.stats-section .stat-card .num span {
  color: var(--blanc, #fff);
  font-family: "Quicksand", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
}

.stats-section .stat-card .label {
  display: inline-flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--bleu-1-vivactis, #000082);

  /* texte */
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140.069%; /* 28.014px */
  border-radius: 48px;
  background: var(--blanc, #fff);
  margin-bottom: 20px;
}

.stats-section .stat-card svg {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

/** bkg-sections **/
.img--1 {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 100%;
}

.img--3 {
  position: absolute;
  max-width: 129px;
  top: -192px;
  left: -68px;
}

.img--4 {
  position: absolute;
  bottom: -152px;
  left: -163px;
  max-width: 379px;
  transform: rotate(15.32deg);
}

.img--5 {
  position: absolute;
  bottom: -72px;
  right: 50px;
  max-width: 67px;
}

.slides-section {
  position: relative;
  padding: 0 10px;
}

.img--6 {
  position: absolute;
  bottom: -42px;
  right: 30px;
  max-width: 260px;
}

.slides-section {
  margin-top: 150px;
}

.support-swiper {
  max-width: 1540px;
  width: 100%;
  margin: auto;
  position: relative;
  z-index: 1;
}

.support-swiper img {
  width: 100%;
}

/* Transición más suave al deslizar o pulsar los bullets */
.support-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Escritorio: el slider se ancla mientras el scroll lo hace avanzar (ver index.js) */
.slides-section.is-pinned .slides-track {
  height: var(--slides-track-height, auto);
}

.slides-section.is-pinned .slides-pin {
  position: sticky;
  top: var(--slides-pin-top, 0px);
}

.slides-section .swiper-pagination {
  position: relative;
  margin-top: 69px;
}

.slides-section .swiper-pagination-bullet {
  width: 21px !important;
  height: 21px !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.slides-section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1) !important;
}

.chain-section {
  position: relative;
  overflow: hidden;
}

.chain-section .chain-content {
  max-width: 1509px;
  margin: 180px auto 200px;
  width: 100%;
  padding: 0 10px;
  z-index: 1;
  position: relative;
}

.chain-section .chain-content h2 {
  color: var(--blanc, #fff);
  font-family: "Unica One";
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 83%; /* 83px */
  text-transform: uppercase;
  margin-bottom: 85px;
}

.chain-section .img-value-chain {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

.img--7 {
  position: absolute;
  left: -400px;
  top: 37px;
  max-width: 723px;
  rotate: 219deg;
}

.chain-section .chain-more {
  display: flex;
  justify-content: end;
  margin-top: 70px;
}

.img--8 {
  position: absolute;
  left: -272px;
  bottom: 50px;
  max-width: 535px;
  rotate: 15deg;
}

.partners-section {
  position: relative;
  padding: 0 10px;
  margin-top: -40px;
  overflow: hidden;
}

.partners-section .partners-content {
  max-width: 1544px;
  margin: auto;
  width: 100%;
  z-index: 1;
  position: relative;
}

.partners-section .partners-content h2 {
  color: var(--blanc, #fff);
  font-family: "Unica One";
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 83%; /* 83px */
  text-transform: uppercase;
  margin-left: 48px;
}

.partners-section .partners-content p {
  max-width: 431px;
  width: 100%;
  display: inline-flex;
  padding: 53.487px 43px 54.117px 48px;
  justify-content: flex-end;
  align-items: center;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.6);

  color: var(--bleu-1-vivactis, #000082);
  text-align: justify;

  /* texte */
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140.069%; /* 28.014px */
  margin-top: -30px;
}

.partners-section .partners-content .partners-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.br {
  border-right: 1px solid #fff;
}

.bb {
  border-bottom: 1px solid #fff;
}

.partners-grid {
  margin-top: 56px;
}

.partners-grid .row-logos {
  display: flex;
}

.partners-grid .row-logos .item-logo {
  width: 165px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img--9 {
  position: absolute;
  top: 372px;
  left: 143px;
  max-width: 150px;
}

.map-section {
  padding: 0 10px;
  margin-top: 230px;
  position: relative;
  margin-bottom: 230px;
  overflow-x: clip;
}

.map-section .map-panel {
  position: relative;
  display: flex;
  max-width: 1544px;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.4);
  margin: auto;
  padding-left: 52px;
  min-height: 786px;
  z-index: 1;
}

.map-section .map-panel .map-copy {
  margin-top: -62px;
  position: relative;
  z-index: 1;
}

.map-section h2 {
  color: var(--blanc, #fff);
  font-family: "Unica One", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 83%; /* 83px */
  text-transform: uppercase;
  max-width: 894px;
}

.map-section .map-panel p.subtitle {
  color: var(--bleu-1-vivactis, #000082);
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.map-section .map-panel img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.map-section .map-panel p {
  color: var(--bleu-1-vivactis, #000082);

  /* texte */
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140.069%; /* 28.014px */
  margin-bottom: 27px;
  max-width: 512px;
}

.img--10 {
  position: absolute;
  top: -114px;
  left: 128px;
  rotate: 70deg;
  max-width: 360px;
}

.img--11 {
  position: absolute;
  bottom: -308px;
  left: -151px;
  max-width: 500px;
  rotate: -50deg;
}

.img--12 {
  position: absolute;
  bottom: -93px;
  right: -58px;
  transform: translateY(200px);
  max-width: 178px;
}

@media (max-width: 1455px) {
  .partners-section .partners-content .partners-info {
    align-items: center;
    flex-direction: column;
  }

  .partners-section .partners-content p {
    max-width: 718px;
  }
}

@media (max-width: 1300px) {
  .hero-grid {
    min-height: 800px;
  }

  .hero-grid h1 {
    font-size: 80px;
  }

  .hero-p {
    max-width: 600px;
  }

  .hero-p p,
  .hero-p p strong {
    font-size: 20px;
  }

  .hero-content .cta-row {
    margin-top: 80px;
  }

  .stats-container {
    padding: 0 32px 32px;
  }

  .stats-section .stats-head h2 {
    font-size: 70px;
  }

  .stats-section .stat-card .num {
    font-size: 90px;
  }

  .stats-section .stat-card .num span {
    font-size: 44px;
  }

  .chain-section .chain-content h2,
  .partners-section .partners-content h2,
  .map-section h2 {
    font-size: 70px;
  }

  .chain-section .chain-content {
    margin: 130px auto 150px;
  }

  .img--7 {
    max-width: 280px;
    transform: translateY(-180px);
  }

  .map-section {
    margin-top: 150px;
    margin-bottom: 150px;
  }

  .map-section .map-panel {
    min-height: 600px;
    padding-left: 32px;
  }

  .contact-row {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .contact-copy {
    max-width: 707px !important;
  }
}

@media (max-width: 1100px) {
  .contact-grid h2 {
    text-align: left !important;
  }
}

@media (max-width: 992px) {
  .hero-grid {
    min-height: auto;
    padding: 60px 10px;
  }

  .hero-grid h1 {
    font-size: 56px;
    line-height: 1.05;
  }

  .hero-p {
    margin-top: 16px;
  }

  .hero-content .cta-row {
    margin-top: 48px;
    align-items: center;
  }

  .stats-section .stats-head {
    transform: none;
    padding-top: 20px;
  }

  .stats-section .stats-head h2 {
    font-size: 48px;
  }

  .stats-section .stats-panel {
    flex-wrap: wrap;
  }

  .stats-section .stats-panel .stat-card {
    width: calc(50% - 12px);
    min-height: 220px;
  }

  .chain-section .chain-content h2,
  .partners-section .partners-content h2,
  .map-section h2 {
    font-size: 48px;
    margin-bottom: 48px;
  }

  .partners-section .partners-content h2 {
    margin-left: 0;
  }

  .partners-grid .row-logos {
    flex-wrap: wrap;
    justify-content: center;
  }

  .partners-grid .row-logos .item-logo {
    width: 154px;
    padding: 10px;
    height: 160px;
  }

  .partners-grid .row-logos .item-logo img {
    width: 100%;
    max-width: 130px;
  }

  .map-section .map-panel {
    padding: 32px;
    min-height: auto;
  }

  .map-section .map-panel img {
    display: none;
  }

  .map-section .map-panel .map-copy {
    margin-top: 0;
    width: 100%;
  }

  .map-section .map-panel p {
    max-width: 100% !important;
  }

  .br,
  .bb {
    border: 0 !important;
  }

  .contact-grid {
    transform: none !important;
    padding: 10px 0;
  }

  .contact-grid h2 {
    font-size: 36px !important;
  }
}

@media (max-width: 768px) {
  .hero-grid h1 {
    font-size: 40px;
  }

  .hero-p p,
  .hero-p p strong {
    font-size: 18px;
  }

  .stats-section .stats-panel .stat-card {
    width: 100%;
  }

  .stats-section .stat-card .num {
    font-size: 64px;
  }

  .stats-section .stat-card .num span {
    font-size: 32px;
  }

  .chain-section .chain-content h2,
  .partners-section .partners-content h2,
  .map-section h2 {
    font-size: 36px;
  }

  .chain-section .chain-content {
    margin: 80px auto 100px;
  }

  .chain-section .chain-more {
    justify-content: center;
  }

  .partners-section .partners-content p {
    max-width: 100%;
    padding: 32px 24px;
    text-align: left;
    margin-top: 0;
  }

  .map-section {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

@media (max-width: 480px) {
  .hero-grid {
    padding: 40px 16px;
  }

  .hero-grid h1 {
    font-size: 30px;
  }

  .hero-p p,
  .hero-p p strong {
    font-size: 16px;
  }

  .stats-container {
    padding: 0 16px 24px;
    border-radius: 24px;
  }

  .stats-section .stats-head h2 {
    font-size: 32px;
  }

  .stats-section .stat-card .num {
    font-size: 48px;
  }

  .stats-section .stat-card .num span {
    font-size: 24px;
  }

  .stats-section .stat-card .label {
    font-size: 16px;
    padding: 8px 12px;
  }

  .chain-section .chain-content h2,
  .partners-section .partners-content h2,
  .map-section h2 {
    font-size: 28px;
  }

  .partners-grid .row-logos .item-logo {
    width: 100px;
    height: 70px;
  }

  .map-section .map-panel {
    border-radius: 24px;
    padding: 24px;
  }

  .map-section .map-panel p {
    font-size: 16px;
    max-width: 100%;
  }
}

.img--13 {
  position: absolute;
  right: -242px;
  bottom: 259px;
  max-width: 430px;
}

.img--14 {
  position: absolute;
  right: -280px;
  bottom: -73px;
  max-width: 440px;
}