/*editar importante para cuadrarlo*/
.container-text {
    width: 1200px !important;
    height: 1500px !important;
    /* background-color: red; */
}

.container-model {
    position: fixed !important; /* Cambiar de relative a fixed */
    top: 50% !important; /* Centrar verticalmente */
    left: 50% !important; /* Centrar horizontalmente */
    transform: translate(-50%, -50%) !important; /* Ajustar al centro */
    width: 1000px !important; /* Tamaño más grande del modelo */
    height: 1000px !important; /* Tamaño más grande del modelo */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important; /* Asegúrate de que esté por encima de otras secciones */
}
/* Estilos para el modelo 3D */
/* Modelo 3D */
.central-item {
    position: fixed; /* Cambiar de relative a fixed */
    top: 50%; /* Centrar verticalmente */
    left: 50%; /* Centrar horizontalmente */
    transform: translate(-50%, -50%); /* Ajustar al centro */
    width: 500px; /* Tamaño del modelo */
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Asegúrate de que esté por encima de otras secciones */
}

model-viewer {
    width: 90% !important;
    height: 90% !important;
    background-color: transparent;
}



.item1,
.item2,
.item3,
.item4,
.item5,
.item6 {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 30%;
    right: 10%;
    z-index: 10;
    display: none;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transiciones suaves */
    opacity: 0; /* Inicialmente oculto */
    transform: scale(0.95); /* Inicialmente más pequeño */
    padding: 20px; /* Añadir padding */
    display: flex;
    flex-direction: column; /* Alinear elementos en columna */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center;
    text-align: center; /* Centrar el texto */
    background: rgba(34, 114, 255, 0.41);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.2px);
    -webkit-backdrop-filter: blur(9.2px);
    border: 1px solid rgba(34, 114, 255, 0.21);
}

.item-title {
    text-align: center; /* Centrar el título */
    margin-bottom: 10px; /* Espacio debajo del título */
    align-self: flex-start; /* Alinear el título en la parte superior */
    text-decoration: none; /* Quitar subrayado */
}

.item-content {
    text-align: left; /* Alinear el contenido a la izquierda */
    align-self: flex-end; /* Alinear el contenido en la parte inferior */

}
.item-content:hover {
    cursor:pointer; /* Alinear el contenido en la parte inferior */
    
}

.mostrarItem1,
.mostrarItem2,
.mostrarItem3,
.mostrarItem4,
.mostrarItem5,
.mostrarItem6 {
    display: flex; /* Cambiar a flex para mantener la alineación */
    opacity: 1; 
    transform: scale(1); 
}



.circle-container {
    position: relative;
    width: 100%;
    height: 3000px; /* Ajusta la altura para aumentar el scroll */
    display: flex;
    justify-content: center;
    align-items: center;
}
/
@media (max-width: 768px) {
  .container-model {
    width: 200px !important;
    height: 200px !important;
  }

  model-viewer {
    width: 50% !important;
    height: 50% !important;
    background-color: transparent;
}
}


/* Efecto cursor Hello */

.content {
  font-family: 'Lato', sans-serif;
  font-size: 32px;
  color: #ecf0f1;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.visible {
  display: inline-block;
}

.visible p {
  display: inline;
  margin-right: 8px;
  font-weight: bold;
}

.visible ul {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 40px;
  vertical-align: top;
}

.visible ul li {
  position: absolute;
  text-color: var(--color-primary);
  opacity: 0;
  border-right: 2px solid var(--color-primary);
  overflow: hidden;
  white-space: nowrap;
  animation: typing 9s steps(10) infinite;
}

/* Mostrar uno a uno */
.visible ul li:nth-child(1) {
  animation-delay: 0s;
}
.visible ul li:nth-child(2) {
  animation-delay: 3s;
}
.visible ul li:nth-child(3) {
  animation-delay: 6s;
}

/* Efecto escribir y borrar */
@keyframes typing {
  0% {
    opacity: 1;
    width: 0ch;
  }
  10% {
    width: 10ch;
  }
  30% {
    width: 10ch;
  }
  40% {
    width: 0ch;
  }
  41% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* Cursor parpadeante */
@keyframes blink {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: var(--color-primary);
  }
}