/* Otro tipo de fuente */
.f p{
    font-size: large; 
    text-align: justify;
    color:#0d0e0d;
}

/*Selector para crear imagenes con texto */
.imagenTexto{ 
    position:relative;
    text-align: center;
    color:rgb(247, 250, 252);

}

/* Modifica el texto de la imagen */
.imagenTexto h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
}

/* Modifica la imagen */
.imagenTexto img{
    width: 100%;
    opacity: 0.7;
    filter: brightness(50%);
    border-radius: 4px;
    box-shadow: 10px 10px 15px grey;
}

/* Estilo del separador  */
.separador{
    height: 70px;
    background-color: #002b09; /*color de fondo de la barra*/
    color: #fff; /*color del texto dentro de la barra*/
    padding: 10px; /*espacio alrededor del texto dentro de la barra*/
    text-align: center;
    border-radius: 10px;
    box-shadow: 15px 15px 20px grey;
}

/* Estilo del separador de linea */
.linea {
    border-top: 3px solid rgba(47, 68, 37, 0.973);
    width: 100%;
}

/* Fuente de los enlaces  */
.enlace {
    color: rgb(0, 128, 53);
}

/* Centra los elementos de un div */
.estetica-img {
    text-align:center;
}

/* estilo de las imagenes que se insertan */
.estetica-img img{
    border: 1px solid rgb(99, 99, 99);
    border-radius: 15px;
    box-shadow: 10px 10px 15px grey;
}

/* Aparece elementos conforme avanza la pagina de abajo hacia arriba */
.animar {
    transform: translateY(100%);
    transition: transform 1s ease-in-out;
  }
/* Aparece elementos conforme avanza la pagina de manero horizontal por la derecha */
.animarh {
    transform: translateX(100%);
    transition: transform 1s ease-in-out;
}
/* Aparece elementos conforme avanza la pagina de manero horizontal por la izquierda */
.animarhi {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
}

/* Aparece elemntos al instante desde abajao */
.aparecer{
    animation-name: animacion;
    animation-duration: 1s;
}

.aparecerh{
    animation-name: horizont;
    animation-duration: 1s;
}
.aparecerhi{
    animation-name: horizontizq;
    animation-duration: 1s;
}
/* Animacion para aparecer desvanecido */
.aparecedes{
    animation-name: desvanecido;
    animation-duration: 1.5s;
}

@keyframes desvanecido{
    from{opacity: 0%;}
    to{opacity: 100%;}
}

@keyframes horizontizq{
    from{transform: translateX(-100%);}
    to{transform: translateX(0%);}
}

@keyframes horizont{
    from{transform: translateX(100%);}
    to{transform: translateX(0%);}
}


@keyframes animacion {
    from {transform: translateY(100%);}
    to {transform: translateY(0%);}
  }

  .columna {
    
    width: 40%;
    font-size: 20px;
  }

  .agrandar:hover{
        transform: scale(1.2);
        transition: transform 0.5s ease;
  }

/*Lo usamos para alinear los elemntos de un div de manera vertical, or ejemplo imagen y texto*/
.alinea-it{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.siguiente{
    text-align: right;
}
.boton {
    background-color: rgb(109, 22, 55); /* Establece el color de fondo a verde */
    color: white; /* Establece el color del texto a blanco */
    border:none; /* Quita el borde del botón */
    padding: 10px; /* Establece el relleno interno del botón */
    border-radius: 10%;
    width: 120px;
    box-shadow: 10px 10px 15px grey;
  }
  
  .boton:hover {
    background-image: linear-gradient(to bottom right, rgb(109, 22, 55), rgb(165, 21, 76)); /* Cambia el color de fondo a rojo diagonalmente */
    transform: scale(1.3);
    transition: transform 0.5s ease;
  }