body {
    font-family: 'Gelvetica', sans-serif;

}
        
        /* Estilos para el encabezado alineado a la izquierda tabla tipo de cambio */
        .h1-TIPO {
    font-size: 35px; /* Tamaño del texto del encabezado */
    color: #fff; /* Color del texto blanco */
    font-weight: bold; /* Texto en negritas */
    text-align: left; /* Alinea el texto a la izquierda */
    padding: 0 20px; /* Relleno horizontal para alejar el texto de los bordes */
    margin-bottom: 0; /* Eliminar margen inferior */
}

.p-TIPO {
    font-size: 15px; /* Tamaño del texto del encabezado */
    color: #fff; /* Color del texto blanco */
    text-align: left; /* Alinea el texto a la izquierda */
    padding: 0 20px 8px 10px; /* Relleno horizontal para alejar el texto de los bordes */
    font-style: italic; /* Aplica estilo cursivo */
    margin-top: -5px; /* Margen superior negativo para acercar más el texto */
}

/* Estilos para el boton del blog */
.button {
    display: inline-block; /* Hace que el enlace se comporte como un bloque en línea */
    padding: 10px 20px; /* Espaciado interno del botón */
    font-size: 16px; /* Tamaño del texto del botón */
    color: #fff; /* Color del texto del botón */
    background-color: #234f1E; /* Color de fondo del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Centra el texto en el botón */
    text-decoration: none; /* Elimina el subrayado del enlace */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s; /* Efecto de transición para el color de fondo */
}

.button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el ratón */
}

.fondo-div {
    background-image: url('imagenes/fondos/fondo3.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el div */
    background-position: center; /* Centra la imagen en el div */
    width: 60%; /* Ajusta el ancho del div */
    height: 400px; /* Ajusta la altura del div según tus necesidades */
    display: flex; /* Usa flexbox para centrar el contenido */
    flex-direction: column; /* Alinea los elementos en columna */
    justify-content: center; /* Centra los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
}

/* Estilos para la swxion de informacion*/
.background-div {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    background-image: url('imagenes/imagen5.jpg'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para cubrir todo el div */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding: 20px; /* Espacio alrededor del contenido */
    height: 200px; /* Altura del div */
    text-align: center; /* Centra el texto horizontalmente */
    overflow: hidden; /* Evita que el pseudo-elemento salga del div */
}

.background-div h1 {
    position: relative; /* Asegura que el texto esté por encima de la capa semitransparente */
    z-index: 2; /* Asegura que el texto esté por encima del pseudo-elemento */
}

.h1-texto {
    font-size: 35px; /* Tamaño del texto del encabezado */
    color: #fff; /* Color del texto blanco */
    font-weight: bold; /* Texto en negritas */
    text-align: left; /* Alinea el texto a la izquierda */
    padding: 0 20px; /* Relleno horizontal para alejar el texto de los bordes */
}

.h1-texto_2 {
    font-size: 35px; /* Tamaño del texto del encabezado */
    color: #ffff; /* Color del texto blanco */
    font-weight: bold; /* Texto en negritas */
    text-align: left; /* Alinea el texto a la izquierda */
    padding: 0 20px; /* Relleno horizontal para alejar el texto de los bordes */
}

.panel-difuinado{
    background: linear-gradient(135deg, #003731, #cc0c00);
    backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}