.ai-img{
    background-image: url('./img/ai.png');
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-size: cover; /* Ajusta la imagen para que cubra toda la pantalla */
    background-position: center; /* Centra la imagen */
    margin: 0; /* Elimina márgenes predeterminados */
    }
.imagen-contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}

.texto-superpuesto{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');


.portico{
    font-family: "Russo One", sans-serif;
    font-size: 430%;
    color: black;
}
@media screen and (max-width:576px) {
  .portico{
    font-size: 200%;
    }
  }
  @media (min-width:577px) and (max-width:768px) {
    .portico{
      font-size: 240%;
    }
  }
  @media (min-width:769px) and (max-width:992px) { 
    .portico{
      font-size: 250%;
    }
  }
  @media (min-width:993px) and (max-width:1200px) { 
    .portico{
      font-size: 260%;
    }
  }
  @media screen and (min-width:1201px) {
    .portico{
      font-size: 300%;
    }
  }
.portico-h2{
    font-family: "Russo One", sans-serif;
    font-size: 200%;
    color: black;
}

.ai-degradado{
    text-transform: uppercase;
    background-size: 200% 100%; /* Duplica el tamaño del fondo */
    background-image: linear-gradient(to right, #34E89E,#00DBDE,#0F3857,#FFA400,#FF377F, #ff9900, #ff0099, #0099ff, #ff0099);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientShift 7s ease infinite; /* Duración total de la animación */
    
}
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }

  .texto-con-borde {
  -webkit-text-stroke-width: 1px; /* Grosor del borde (2 píxeles) */
  -webkit-text-stroke-color: white; /* Color del borde (blanco) */
  font-weight: 100;
}

.ai-h1{
  font-size: 23px;
  color: #e08e00;
  font-weight: bold;
}
.ai-h2{
  font-size: 20px;
}
.ai-color-text{
  font-size: 17px;
  color: #e08e00;
  font-weight: bold;
}


    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); /* Código de Google Fonts */

    body {
        font-family: 'Roboto', sans-serif; /* Aplica la fuente Roboto al body */
    }

    h1 {
        font-family: 'Lobster', cursive; /* Otra fuente para h1 */
    }