/* Id */

#CLeche{
  opacity: 0;
  animation-delay: 2.5s
}

#CCaramelo{
  opacity: 0;
  animation-delay: 1.2s;
}

#CPistacho{
  opacity: 0;
}

/* class*/
/* A*/ 
.Apartado{
  margin-top: 10px;
  width: auto;
  height: auto;
  
}

/* B*/
.Bajar{
  animation: Bajar 2s ease-in-out forwards;
  pointer-events: all;
  
}

.barra {
  background: linear-gradient(to left, #170202, #542211);
  width: auto;
  height: auto;
  border-radius: 40px 40px 0 0;
  
}

.barra h1 {
  margin: 0;               
  text-align: left;
  padding: 20px;
}

body {
    background: linear-gradient(-45deg, #3FAB93, #61ED55, #5785BD, #5FBD57);
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
    font-family: Arial, sans-serif;
}

.boton{
  width: 200px;
  height: auto;
  margin: 10px;
  line-height: 20px;
  padding: 10px;
  border-radius: 20px;
  background-position: 0% 250%;

  background: linear-gradient(270deg, rgb(65,20,9), rgb(224,53,11), rgb(104,206,118), rgb(65,20,9));
  background-size: 800% 100%; 
  animation: boton 40s linear infinite;
  border-style: solid;
  cursor: pointer;
  transition: 0.3s;
}

.boton:hover{
  transform: scale(0.9);
}

/*C */
.cafe {
  height: 300px;
  width: 100%;
  position: absolute;
  bottom: 0;    
  margin-top: 50px;
  color: black;
  z-index: 1;
    
}

.caja {
    opacity: 1;
    padding: 20px;
    text-align: center;
    border: 0px solid #333;
}

.caja_A {
  padding: 10px;
  margin-bottom: auto;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: larger;
  margin: 5%;
}

.caja_B{
  padding: 10px;

}


.Ccolor {
  position: relative;
  height: 200px;
  width: 200px;
  transform: translate(-7px, 0px);
  text-align: center;
  padding-top: 10px;
  color: white;
  font-family: 'Courier New', Courier, monospace;
  animation: colorcafe 8s linear infinite;

}

.columna{

  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2em;
  height: auto;
  width: auto;
  margin: 5%;
  
}

.items {

  padding: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: auto;
  height: auto;
  width: auto;

}


/* D */

.Derecha_float {
  justify-self: right;
}

/* E */

.encabezado{
  width: auto;
  height: auto;
  background-color: #DCDDDE;
  border-radius: 40px;
  overflow: hidden;
  padding: 0px;
}

.esfera{
    
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 30%;
  animation: ola 4s ease-in-out infinite;
    
}
  
.esfera:nth-child(2) { animation-delay: 0s; }
.esfera:nth-child(3) { animation-delay: 0.3s; }
.esfera:nth-child(4) {animation-delay: 0.6s;}
.esfera:nth-child(5) { animation-delay: 0.9s; }
  
.espacioboton{
    position: relative;
  width: 200px;
  height: 80px;
  text-align: center;
  padding-top: 30px;
  overflow: hidden;
}

/* F */

.Fondo_Blanco{
  background-color: white;
  color: black;
  border-radius: 10px;
  padding: 1px;
  margin-left: 10px;
  padding-left: 10px;
}

footer{
  width: auto;
  height: auto;
  background-color: #542211;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 
}

.flex_box{
  display: flex;
  gap: 5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

}

.flex_column{
  display: flex;
  flex-direction: column;
  
  justify-content: space-between;
  
  
  
}


.content{
  color: white;

  padding: 15px;
  text-align: center;
  margin: auto;
  height: auto;
  width: auto;
  font-size:xx-large;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 5%;

}




/* G */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 3 columnas iguales */
    gap: 1px; /* espacio entre cajas */
    border-color: black;
    border-width: thin;
}

.grid_espacio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}


/* H */
  
html {
  scroll-behavior:smooth;
}

h1 {
    color: black;
    text-align: center;
    font-family: "TipografiaTitulo", cursive, sans-serf;
  }

h3 {
    font-size: xx-large;
  }
  
  /* I */
  
.ImagenTamaño {
  height: auto;
  width: 150px;
}
  
  /* O */
  
.ola {
  position: absolute;
  width: 400px;
  height: 70px;
  
  clip-path: polygon(
    100% 0%,     /* esquina superior izquierda */
    100% 0%,   /* esquina superior derecha */
    100% 100%, /* esquina inferior derecha */
    0% 100%,   /* esquina inferior izquierda */

    /* onda arriba */
    0% 65%,
    5% 67%,
    10% 70%,
    15% 75%,
    20% 80%,
    25% 82%,
    30% 85%,
    35% 82%,
    40% 80%,
    45% 75%,
    50% 70%,
    55% 67%,
    60% 65%,
    65% 67%,
    70% 70%,
    75% 75%,
    80% 80%,
    85% 82%,
    90% 85%,
    95% 82%,
    100% 80%
  );
  transform: translate(-7px, -70px);
  animation: avance 5s linear infinite;
  
}
  
  
  
.ola2 {
  position: absolute;
  width: 400px;
  height: 70px;
  
  clip-path: polygon(
    100% 0%,     /* esquina superior izquierda */
    100% 0%,   /* esquina superior derecha */
    100% 100%, /* esquina inferior derecha */
    0% 100%,   /* esquina inferior izquierda */
  
    /* onda arriba */
  0% 70%,
  5% 72%,
  10% 75%,
  20% 80%,
  30% 83%,
  40% 82%,
  50% 78%,
  60% 74%,
  70% 72%,
  80% 74%,
  90% 78%,
  100% 82%
  
  );
  transform: translate(-7px, -70px);
  animation-delay: 2s;
  animation: avance 5s linear infinite;
}
  
.ola3 {
  position: absolute;
  width: 400px;
  height: 70px;
    
  clip-path: polygon(
    100% 0%,     /* esquina superior izquierda */
    100% 0%,   /* esquina superior derecha */
    100% 100%, /* esquina inferior derecha */
    0% 100%,   /* esquina inferior izquierda */
  
    /* onda arriba */
  0% 60%,
  5% 68%,
  10% 78%,
  15% 85%,
  20% 88%,
  25% 86%,
  30% 80%,
  35% 70%,
  40% 65%,
  45% 70%,
  50% 80%,
  55% 88%,
  60% 92%,
  65% 88%,
  70% 80%,
  75% 72%,
  80% 65%,
  90% 60%,
  100% 65%
  
  );
  transform: translate(-7px, -70px);
  animation-delay: 1s;
  animation: avance 5s linear infinite;
}
  

/* S */
.nopoint{
  pointer-events: none;
}

.SinFondo {
  background-color: rgba(0, 0, 0, 1);
}

.Subir{
  animation: Subir 2s ease-in-out forwards;
  pointer-events: none;
}

/* T */

.tapa {
    background-color: rgb(68, 12, 12);
    height: 100px;
    width: 290px;
    transform: perspective(200px) rotateX(10deg) translateX(1%);
    box-shadow: 8px 0px 10px rgba(0, 0, 0, 0.6);
    
    
}

.todo {
  opacity: 0;
  animation: aparecer 2s forwards;
}

.texto{
      box-sizing: border-box;   /* incluye padding dentro del ancho */
  
  word-wrap: break-word;    /* permite romper palabras largas */
  word-break: break-word;   /* compatible con todos los navegadores */
  white-space: normal;
  font-size:x-large;      /* permite saltos de línea automáticos */
}

.texto2{
      box-sizing: border-box;   /* incluye padding dentro del ancho */
  
  word-wrap: break-word;    /* permite romper palabras largas */
  word-break: break-word;   /* compatible con todos los navegadores */
  white-space: normal;
  font-size:xx-large;      /* permite saltos de línea automáticos */
}

/* V */

.Vaso_generico {
    margin-left: 20px;
}

.vaso {
  background-color: grey;
  width: 300px;
  height: 500px;
  transform: perspective(200px) rotateX(-10deg);
  transform-origin: top;
  margin-top: 20px;
  position: relative;
  box-shadow: 10px 20px 40px rgba(0,0,0,0.7);
  background: linear-gradient(to bottom, #b1afaf, #818181);
    
    
}


/*Animaciones */

@keyframes avance{
  0%{
    transform: translate(-10px, -70px);
  }
  25%{
    transform: translate(-100px, -60px);
  }
  50%{
    transform: translate(-200px, -65px);
  }

  100%{
    transform: translate(-10px, -70px);
  }


}



@keyframes ola{
    0%{
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-15px);
    }
    50%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(-30px);
    }
    100%{
        transform: translateY(0px);
    }
}

@keyframes Subir{
    0%{opacity: 1;
        top: 0px;

    }

    50%{
        
        
    }

    100%{
        opacity: 0;
        top: -100px;
    }
}

@keyframes aparecer {

  to {
    opacity: 1
  }

}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes boton{
  0% {
    background-position: 0% 250%;
  }
  25% {
    background-position: 250% 500%;
  }

  50%{
    background-position: 500% 750%;
  }
  100% {
    background-position: 750% 1000%;
  }
}

@keyframes Bajar{
    0%{
        top: -100px;
        opacity: 0.2;
    }

    50%{
        top: 10px;
    }

    100%{
        top: 0px;
        opacity: 1;
    }
}


/*Fuentes */

@font-face {
    font-family: 'TipografiaTitulo'; /* nombre que usarás en CSS */
    src: url('fonts/StretchPro.otf') format('truetype'); /* ruta y formato */
    font-weight: normal; /* normal, bold, etc. */
    font-style: normal;  /* normal, italic, etc. */
}