h1{font-size: 4.0em;}
h2{font-size: 2.5em;}
h3{font-size: 2.0em;}
p{font-size: 0.5em;}

/* Estilo para el fondo completo de la página */
body {
    background: linear-gradient(#282829, #1f1f20); /* Fondo degradado de dos colores */
    font-family: 'roboto', sans-serif;
}

header{
    height: 8vh;
}

/* Estilo para la imagen en el encabezado */
header img {
    width: 70px; /* Ancho deseado para la imagen */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    margin-right: 5px; /* Espacio entre la imagen y el texto */
    margin-left: 65px;
    margin-top: 40px;

}

/* Estilo para el texto que dice "Inicio" */
.logo{

    display:inline;
    font-family: 'roboto', sans-serif;
    font-size: 2.5em;
    color:  #747d8c9f;
    position: relative; /* Agrega posición relativae independiente de la imagen */
    top: -20px; /* mueve vertical el texto */


}


/* Estilo para los textos del principio */
.parrafo{
    display: flex; /* Activa las carateristicas de "flex-direction","align-items" */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #837F7F;
    .color-acento{ color: #16D298;}
    margin-top: 100px;
    text-align: center;
}

/* Estilo para los textos del principio */
.parrafo2{
    display: flex; /* Activa las carateristicas de "flex-direction","align-items" */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #837F7F;
    margin-top: 100px;

}

h3{
    text-align: center;
}

/* Estilo para el textos h2 del principio */
.parrafo h2 {
    margin-top: 0px; /* quita margen */
}

/* estilo para los botones con link de etiqueta <a> */
a.custom-button {
    text-decoration: none;
    cursor:pointer;
    display: flex; /* estilo lineal entre letra-Imagen dentro de todos los botones */
    align-items: center;/* Texto dentro de botones centrado en eje vertical */
    justify-content: space-between;
    width: 750px; /* todos los botones Ancho fijo */
    border-radius: 20px; /* todos los botones radio de borde  */
    background-color: #ffffff;
    border: none;
    color: #111110;
    margin: 20px auto; /* todos los botones1 espacio entre si  */
}

/* estilo de todos los botones 1 */
.custom-button{
    cursor:pointer;
    display: flex; /* estilo lineal entre letra-Imagen dentro de todos los botones */
    align-items: center;/* Texto dentro de botones centrado en eje vertical */
    justify-content: space-between;
    width: 750px; /* todos los botones Ancho fijo */
    border-radius: 20px; /* todos los botones radio de borde  */
    background-color: #ffffff;
    border: none;
    color: #111110;
    margin: 20px auto; /* todos los botones1 espacio entre si  */
}

/* estilo de textos dentro de botones */
.custom-button span {
    margin-left: 95px; /* separa la letra del margen izquiero del boton*/
    font-family: 'roboto', sans-serif;  /* estilo de letra de los botones*/
    font-size: 35px;

}

/* Estilo para la imagen dentro del botón */
.custom-button img{
    width: 150px; /* Tamaño de la imagen */
    margin: 20px 90px; /* Espacio para separar la imagen de bordes de boton */
}

/* contenedor botones 1 */
.botones-columna1 {
    height: 66,5vh;
    display: flex;
    flex-direction: column; /* Botones1 en columna */
    justify-content: flex-start; /* Botones1 al centro (en eje verical) */
    align-items: center; /* Botones1 al centro (en eje Horizontal) (solo porque flex-direction = column) */
    margin-top: 5%; /* contenedor1 Margen Superior */

}


/* botones funcionando*/
a.custom-button:hover{
    background-color: #16D298;
    color: #ffffff;
}

footer {
	background-image: linear-gradient(180deg, #282829 0%, #16D298 10000%);
	margin-top: 200px;
	padding-top: 30px;
}


/* ------------------------INICIO Estilos de nimación--------------------------- */
/* Estilo para la animación */
.custom-button {
    opacity: 0; /* Inicialmente, los botones están ocultos */
    transform: translateY(20px); /* Desplazar los botones hacia abajo */

    animation: fade-in 1s ease-in-out forwards, slide-up 1s ease-in-out forwards; /* Aplicar dos animaciones: aparecer y desplazar */
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1; /* Al final de la animación, los botones estarán completamente visibles */
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(600px);
    }
    100% {
        transform: translateY(0); /* Al final de la animación, los botones estarán en su posición original */
    }
}
/* ------------------------FIN Estilos de nimación--------------------------- */


/* Estilo para el fondo de la barra de estado en dispositivos móviles */
@media screen and (min-width: 576px) {
    body {
        background-color: #282829; /* Reemplaza "tu-color-aqui" con el color deseado */
    }
}


/* Estilos generales que aplicarán en todas las pantallas */

/* Estilos para pantallas más grandes, como computadoras portátiles */
@media (min-width: 1000px) {
    h1 {
      font-size: 2.5em;
    }
  
    h2 {
        font-size: 1.6em;
    }
  
    h3 {
        font-size: 1.3em;
    }

    p {
      font-size: 0.5em;
    }
  
    header {
      height: 5vh;
    }

    /* Estilo para la imagen en el encabezado */
    header img {
        width: 30px; /* Ancho deseado para la imagen */
        height: auto; /* Permite que la altura se ajuste automáticamente */
        margin-right: 1px; /* Espacio entre la imagen y el texto */
        margin-left: 65px;
        margin-top: 10px;
    }

    /* Estilo para el texto que dice "Inicio" */
    .logo{
        font-size: 1em;
        top: -10px; /* mueve vertical el texto */
        text-decoration: none;
    }    

    /* Estilo para los textos del principio */
    .parrafo{
        margin-top: 70px;
    }

    /* Estilo para los textos del principio */
    .parrafo2{
        margin-top: 20px;
    }

    /* estilo de textos dentro de botones */
    .custom-button span {
        font-size: 20px;
    }

    /* Estilo para la imagen dentro del botón */
        .custom-button img{
        width: 70px; /* Tamaño de la imagen */
        margin: 10px 90px; /* Espacio para separar la imagen de bordes de boton */
    }

    /* estilo para los botones con link de etiqueta <a> */
    a.custom-button {
        width: 500px; /* todos los botones Ancho fijo */
        margin: 5px auto; /* todos los botones1 espacio entre si  */
    }

}