.videoport-section,
    .portada-section {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }

    #portada-wrapper img {
      width: 100%;
      height: 100vh;
      display: block;
      object-fit: cover;
      margin-top: 50px;
    }

    .video-text {
      position: absolute;
      /* Cambiar de fixed a absolute */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
      padding: 2rem;
      background: rgba(0, 0, 0, 0.4);
      z-index: 2;
      pointer-events: none;
    }

    .video-text.fade-out {
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    #mensaje-rotativo {
      text-align: center;
      transition: opacity 0.5s ease;
      font-size: 2rem;
      font-weight: 200;
      margin: 0;
    }

    .full {
      padding: 0 !important;
      object-position: bottom !important;
    }

    /* VIDEO DE FONDO */
    .video-section {
      min-height: 100vh !important;
      height: auto !important;
    }

    #video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    #video-background video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      display: block;
    }

    /* AUDIO */
    .snd-ctrl-mid {
      position: relative;
      top: 50%;
      left: 15px;
      z-index: 20;
    }

    .snd-ctrl {
      position: absolute;
      bottom: 20px;
      left: 20px;
      z-index: 20;
    }

    .audio-button svg {
      width: 36px;
      height: 36px;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .audio-button.pulsar {
      animation: pulso 1.5s infinite;
    }

    @keyframes pulso {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }

      100% {
        opacity: 1;
      }
    }

    /* CARRUSEL INFINITO*/
    .carrusel-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #fff;
      height: 70vh;
      padding: 0;
    }

    .carrusel {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 100%;
      gap: 2%;
      will-change: transform;
    }

    .carrusel-slide {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: hidden;
    }

    .carrusel-slide:hover img {
      transform: scale(1.05);
    }

    .carrusel-slide img {
      height: 100%;
      width: auto;
      object-fit: cover;
      display: block;
      transition: transform 0.9s ease;
    }

    .carrusel-slide picture {
      height: 100%;
      display: block;
    }

    .carrusel-slide picture>img {
      height: 100%;
      width: auto;
      object-fit: cover;
      display: block;
    }

    .carrusel-slide:hover img,
    .carrusel-slide:hover picture>img {
      transform: scale(1.05);
    }

    .invertir {
      transform: scaleX(-1);
    }

    .byn {
      filter: invert();
    }

    /* BLOQUE TEXTO */
    .divtexto {
      width: 100%;
    }

    .divtexto-container {
      height: auto;
      padding-left: 30%;
      padding-right: 30%;
      padding-top: 100px;
      padding-bottom: 100px;
      font-weight: 300;
    }

    /* BLOQUE SECCIÓN DOS COLUMNAS */
    .seccion-doble {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 100px;
      padding-bottom: 100px;
      width: 100%;
      gap: 60px;

    }

    .divtexto-col {
      flex: 1 1 400px;
      max-width: 550px;
    }

    .vidcontainer-col,
    .imgcontainer-col {
      flex: 1 1 400px;
      max-width: 600px;
    }

    .vidcontainer-col video {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    .videoport-section #portada-wrapper {
      position: relative;
    }

    .videoport-section #portada-wrapper img {
      position: relative;
      z-index: 1;
      margin-top: 0;
    }

    .videoport-section .snd-ctrl {
      z-index: 3;
    }

    /* BLOQUE SECCIONES IMG VID TXT */
    .imgsec,
    .vidsec,
    .divtexto {
      display: block;
      width: 100% !important;
      margin: 0 auto;
      overflow: visible;
    }

    .vidsec {
      transition: height 0.9s ease-in-out;
    }

    .trim {
      height: 500px;
      overflow: hidden !important;
    }

    .portada-recortada {
      width: 100%;
      height: 532px;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .vidsec.fullscreen {
      height: 100vh;
      /* se expande a fullscreen */
    }

    .vidsec video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .last {
      width: calc(100vh - 253px) !important;
    }

    .videowrapper {
      overflow: hidden;
    }

    .videowrapper img {
      transition: transform 12s ease-in-out;
    }

    .videowrapper img:hover {
      transform: scale(2);
    }

    /* GALERIA RESPONSIVA */
    .galeria {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.6em;
      width: 100%;
      margin: auto;
    }

    .galeria .creditos {
      background-color: #101010;
      color: white;
      padding: 3px;
    }

    .referencia {
      padding: 30px;
      white-space: normal;
      word-break: normal;
      overflow-wrap: normal;
    }

    .referencia b {
      white-space: nowrap;
    }

    /* mantén número + nombre pegados (además del  ) */
    .break-before-numbers b {
      white-space: nowrap;
    }

    .img-wrap {
      overflow: hidden;
      width: 100%;
      aspect-ratio: 1 / 1;
      /* cuadrado adaptable */
      display: flex;
    }

    .img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.9s ease;
    }

    .img-wrap:hover img {
      transform: scale(1.1);
    }

    .img-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: none;
    }

    /* LIGHTBOX (ampliación de la galería) */
    .lightbox-wrapper {
      width: 100%;
      height: 100%;
      position: fixed;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(1px);
    }

    #lightbox.oculto {
      display: none;
    }

    #lightbox img {
      max-width: 500px;
      height: auto;
    }

    #lightbox .cerrar {
      position: absolute;
      top: 50px;
      right: 50px;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 0rem;
      cursor: pointer;
      z-index: 10;
      font-size: 1.1rem;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* MAPA NATURALEZA */
    #mapa-naturaleza-full {
      width: 100%;
      margin-top: 50px;
    }

    #mapaNaturaleza {
      width: 100%;
      height: 500px;
      z-index: 5;
    }

    /* MAPA ECOREGGIONES */
    #tooltip {
      position: absolute;
      padding-bottom: 10px;
      background: rgb(255 255 255);
      padding: 6px 12px;
      font-size: 14px;
      pointer-events: none;
      display: none;
      z-index: 10;
      white-space: nowrap;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      text-align: center;
    }

    #marker {
      transition: all 0.2s ease;
      fill: #fec304;
      stroke: none;
    }

    #marker.active {
      transform: scale(1.3);
    }

    #container {
      position: relative;
      z-index: 0;
      display: flex;
      justify-content: center;
    }

    #ecosvg {
      width: 70%;
      height: auto;

    }

    #lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      backdrop-filter: blur(8px);
      transition: opacity 0.3s ease;
    }


    /* Botonera Naturaleza */
    #botonera-capas {
      position: absolute;
      width: 410px;
      font-size: 1em !important;
      padding: 50px;
      max-height: 80vh;
      overflow-y: auto;
      left: 60px;
      top: 0;
      background: rgba(255, 255, 255, 0.95);
      z-index: 10;
    }

    .layer-toggle {
      width: 15px !important;
      height: 15px !important;
      appearance: none;
      background: #fff;
      border: 1.7px solid #000;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
      margin-right: 10px;
    }

    .layer-toggle:checked {
      background: #000;
    }

    .layer-toggle:hover {
      background: #5d5d5d;
    }

    /* === CARRUSEL DE CONTENIDO (100vh) === */
    .carrusel-info-container {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      background: #ffffff;
    }

    .carrusel-info {
      display: flex;
      height: 100%;
      transition: transform 0.6s ease-in-out;
      will-change: transform;
    }

    /* slide */
    .carrusel-info-item {
      flex: 0 0 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .carrusel-info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      gap: 2rem;
      max-width: 1200px;
      margin: auto;
      padding: 3rem 4rem;
    }

    .img-carrusel {
      width: 100%;
      max-height: 80%;
      overflow: hidden;
      position: relative;
      margin: 0;
      padding: 0;
    }

    .carrusel-info-grid img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }


    .txt-carrusel {
      padding: 2em;
    }

    @media (max-width: 1024px) {
      .galeria {
        grid-template-columns: repeat(2, 1fr);

      }
    }

    @media (max-width: 768px) {

      .carrusel-slide {
        flex: 0 0 100%;
      }

      .carrusel-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .carrusel-info-grid {
        grid-template-columns: 1fr;
        padding: 2rem;
      }

      .seccion-doble {
        flex-direction: column;
      }

      @media (max-width: 600px) {
        .galeria {
          grid-template-columns: 1fr;
        }
      }
    }