
.contenedor {
    position: relative; /* referencia para lo  que esta adentro*/
}
.imagen {
    width: 1000px;
    height:auto;
}
.texto {
    position: absolute; /* le dice al texto que se coloque en las cordenadas exactas dentro del contenedor */
    font-size: 28px;
    top: 200px;
    right: 90px;
    width: 420px; /*hace que el texto se ponga en  un bloque */
    color: white;
}
.boton {
    position: absolute;
    width: 350px; /*tamano de ancho de el boton*/
    height:50px; /*tamano de alto de el boton*/
    top: 420px;
    right:140px; 
    background-color: red;
    color: white; 
    font-size: 25px; /* tamano del texto*/
    border-radius: 40px;
    font-weight: bold; /*para que se escriba en negrita */

}

.titulo{
  text-align: center;
  font-size: 32px;
  color:grey;
  
}
.parrafo{
  text-align: center;
  font-size: 25px;
  color:rgb(0, 0, 0);

}
.T{
  background-color:black;
  text-align: center;
  font-size: 32px;
  color:white;
}
.carrusel {
    background-color: black;
    width: auto;       /* ancho visible del carrusel */
    height: 500px;      /* alto del carrusel */
    overflow: hidden;   /* oculta lo que se sale del contenedor */
    margin: auto;
}

.imagenes {
    display: flex;                 /* fila horizontal de imágenes */
    gap: 25px; /* espacio entre imagen y imagen */
    width: calc(600px * 3);        /* 3 imágenes de 600px cada una */
    animation: mover 40s linear infinite; /* animación automática */
}

.imagenes img {
    width: 600px;
    height: 400px;
    object-fit: cover;
}

/* Keyframes para mover la fila de imágenes */
@keyframes mover {
    0%   { transform: translateX(0); }
    33%  { transform: translateX(-600px); }
    66%  { transform: translateX(-1200px); }
    100% { transform: translateX(0); }
}
.memoria {
    position: relative;
}
.imagen {
      background-color: black;
     width: auto;
     height:auto;
}
.barra{
 position: relative; /* referencia para lo  que esta adentro*/
}

.imagen {
    width: auto;
     height:auto;
}
.titulo2{
    position: absolute; /* le dice al texto que se coloque en las cordenadas exactas dentro del contenedor */
    font-size: 40px;
    top: 40px;
    left: 20px;
    right: 90px;
    width:auto; 
    color: white;
    font-weight: bold;
}
.no{
    font-size: 40px;
    padding: 0 8px;
    border-radius: 5px;
    color: black;
    font-weight: bold;
}
.notas {
  display: flex;             /* Las pone una al lado de la otra */
  justify-content: center;   /* Centra todo horizontalmente */
  align-items: flex-start;   /* Alinea arriba las notas */
  gap: 40px;                 /* Espacio entre las notas */
  margin-top: -5px;          /* Un poco de espacio arriba */
  background-color: black;   /* Fondo negro */
  padding: 80px;           /* Espacio arriba y abajo */
}
.nota, .nota1, .nota2  {
  background-color: #f5c660;
  width: 420px;  
  height: 380px;
  padding: 25px;
  margin-top: 20px;
}
footer {
    width: auto;            /* ocupa todo el ancho */
  height: auto; 
  background-color: red;    /* Mismo fondo que las notas */
  color: white;               /* Texto blanco */
  text-align: center;         /* Centrado */
  padding: 30px 0;            /* Espaciado arriba y abajo */
  font-size: 25px;

}


