.text-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0 1rem;
}

/* Estilos base para los textos */
.text {
  font-family: var(--main-font);
  display: block;
  color: var(--white);
  line-height: 1.1;
}

/* Tamaño responsivo para "Hola," */
.hola-text {
  font-size: clamp(13rem, 8vw, 5rem);
  margin-bottom: 0.5rem;
}

/* Tamaño responsivo para "soy otto" */
.otto-text {
  font-size: clamp(13rem, 10vw, 6rem);
}

/* Animaciones para la aparición secuencial */
.hola-text {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.2s;
}

.otto-text {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 1s;
}

/* Ajustes para la sección hero */
.hero {
  height: auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15vh 1rem 0;
  box-sizing: border-box;
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  .hola-text {
    font-size: clamp(5rem, 7vw, 3rem);
  }

  .otto-text {
    font-size: clamp(5rem, 9vw, 4rem);
  }

  .hero {
    padding-top: 10vh;
  }
}


/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  .work-title {
    font-size: 4.5rem !important;
    margin-top: 6rem !important;
  }

  .work-grid {
    width: 85% !important; /* Ligeramente más estrecho */
    margin: 0 auto !important; /* Centrar el grid */
  }

  .work-item img,
  .work-item video {
    border-radius: 0.6rem !important;
  }
}

/* Estilos para el carrusel en móvil */
@media (max-width: 768px) {
  /* Asegurar que las tarjetas del carrusel sean visibles */
  .carousel-card {
    background-color: #000; /* Fondo negro para evitar transparencias */
    overflow: hidden; /* Contener el contenido */
  }

  /* Estilo para las imágenes de fondo en móvil */
  .card-overlay {
    display: block !important;
    opacity: 1 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* Ocultar videos en móvil */
  .carousel-card video {
    display: none !important;
  }

  /* Mejorar visibilidad del logo */
  .carousel-card .card-logo {
    opacity: 0.8; /* Hacer el logo visible por defecto */
    z-index: 2; /* Asegurar que esté por encima de la imagen */
  }

  /* Efecto hover para el logo */
  .carousel-card:hover .card-logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }

  /* Deshabilitar interacción con el carrusel */
    #drag-container {
      pointer-events: none !important;
    }

    /* Permitir interacción solo con los enlaces */
    .carousel-card {
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    /* Cursor normal en lugar de "grab" */
    #drag-container,
    #spin-container {
      cursor: default !important;
    }

    /* Aumentar espacio encima del título */
      .work-title {
        margin-top: 7rem !important; /* Más espacio debajo de los dots */
        margin-bottom: 4rem !important;
        font-size: 5.5rem !important; /* Ajustar tamaño para móvil */
      }

      /* Centrar los proyectos y eliminar espacios laterales innecesarios */
      .work-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Ajustar el grid para centrar los elementos */
      .work-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        width: 90% !important; /* Ancho controlado */
        margin: 0 auto !important; /* Centrar el grid */
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Ajustar los elementos individuales */
      .work-item {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }

      /* Ajustar el botón de regreso */
      .back-button-container {
        margin-top: 6rem !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        z-index: 10 !important;
      }

      /* Hacer el botón de regreso más grande y fácil de tocar en móvil */
      .back-button {
        font-size: 3.5rem !important;
        padding: 1rem !important;
        display: block !important;
        width: 60px !important;
        height: 60px !important;
        line-height: 50px !important;
        text-align: center !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        position: relative !important;
        z-index: 20 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important; /* Eliminar highlight al tocar */
        touch-action: manipulation !important; /* Mejorar respuesta táctil */
      }

      /* Ajustar el nav para móvil */
      .work-nav .nav-container {
        padding: 0 1rem !important;
        box-sizing: border-box !important;
      }

      /* Ajustar el logo */
      .work-nav .logo-image {
        height: 3.5rem !important;
        margin-bottom: 0.5rem !important;
      }

      /* Ajustar videos para que tengan la misma proporción que las imágenes */
      .work-item.video-item video {
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
      }
    }
}