@tailwind base;
@tailwind components;
@tailwind utilities;

/* Opcional: Estilos personalizados */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white rounded-lg;
  }
}


.typing {
  overflow: hidden; /* Ocultar el contenido que se sale */
  white-space: nowrap; /* Mantener el texto en una línea */
  border-right: 4px solid white; /* Simular el cursor */
  width: 100%; /* Ajusta según tu necesidad */
  max-width: 650px; /* Cambia a un valor adecuado */
  animation: typing 3s steps(26, end) forwards, blink 0.75s infinite step-end alternate;
}
.boton-click{

  background-color: #ef4444;


}

.rotate-45 {
  transform: rotate(45deg); /* Rota 90 grados */
}

@keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%; /* Muestra todo el texto */
  }
  100% {
    width: 100%; /* Mantiene el ancho al final */
  }
}

@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}


.slider{


  overflow-y: scroll;
  scroll-snap-type: mandatory;


}

html {
  scroll-behavior: smooth;
}

footer {
  flex-shrink: 0; /* Evita que el footer se comprima */
}

/* CSS */


.texto-negro {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  /* animación */
  animation: slideIn 1.5s ease-out forwards;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 1rem;

}

@keyframes slideIn {
  from {
    transform: translate(-100%, -50%);
  }
  to {
    transform: translate(0px, -50%); /* mueve 20px desde el borde izquierdo */
  }
}