@font-face {
  font-family: 'kids';
  src: url('../fonts/kids.otf') format('truetype');
}

body {
  background-image: url('../image/papel_arrugado.jpg'); /* Ruta de la imagen */
  background-size: cover; /* Hace que la imagen cubra toda la pantalla */
  background-position: center; /* Centra la imagen en la pantalla */
  background-attachment: fixed; /* Hace que la imagen quede fija cuando el usuario haga scroll */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /*background-color: #f4f4f4;
  color: #333;*/
}

/* TEO - Animación de aparición secuencial */
text.teo {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 10vw;
    fill: none; /* Inicialmente sin relleno */
    stroke: none;
    stroke-width: 2;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
  }

  /* Animación para colorear las letras de TEO */
  text.t {
    animation: fillColorT 0.5s ease-in forwards 1.3s, drawT 1s linear forwards;
  }

  text.e {
    animation: fillColorE 0.5s ease-in forwards 2s, drawE 1s linear forwards;
  }

  text.o {
    animation: fillColorO 0.5s ease-in forwards 2.7s, drawO 1s linear forwards;
  }


  /* Animaciones de las letras de "no puede más" */
  text.no-puede-mas {
    font-family: 'Kids', sans-serif;
    font-size: 8vw;
    fill: transparent;
    stroke: #555;
    stroke-width: 1;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    /*animation: animation-delay 20s, draw 3s linear forwards;*/
    animation: drawFill 2s ease-out forwards;

  }


  /* Control de las letras de "no puede más" */
  text.no-puede-mas.no { animation-delay: 4.5s; transition-delay: 0.0001s;}
  text.no-puede-mas.puede{ animation-delay: 5s; transition-delay: 0.0001s;}
  text.no-puede-mas.mas { animation-delay: 5.5s; transition-delay: 0.0001s;}


  /* Animación de escritura */
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* Animación de color por letra */
  @keyframes fillColorT {
    to {
      fill: #C27576; /* Naranja para T */
    }
  }

  @keyframes fillColorE {
    to {
      fill: #5391A9; /* Verde para E */
    }
  }

  @keyframes fillColorO {
    to {
      fill: #DCBE81; /* Azul para O */
    }
  }

  @keyframes drawFill {
    from {
      fill: transparent; /* Comienza sin relleno */
    }
    to {
      fill: black; /* Se rellena por completo */
    }
  }


  /* Medias Queries */
  @media (min-width: 768px) {
    text.teo {
      font-size: 4.5vw;
    }

    text.no-puede-mas {
      font-size: 2.5vw;
    }
  }

  @media (min-width: 992px) {
    text.teo {
      font-size: 4vw;
    }

    text.no-puede-mas {
      font-size: 2vw;
    }
  }

  @media (min-width: 1200px) {
    text.teo {
      font-size: 3.5vw;
    }

    text.no-puede-mas {
      font-size: 1.8vw;
    }
  }