
<style>

body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: #2c3e50;
  }
  p {
    font-size: 16px;
    color: #34495e;
  }

/* Estilos para los iconos */

.social-icons {
  display: flex;
  gap: 20px;
}
.social-icons a img {
  width: 40px; /* Ajusta el tamaño según necesites */
  height: 40px;
  transition: transform 0.3s;
}
.social-icons a img:hover {
  transform: scale(1.1); /* Efecto al pasar el ratón */
}

/* Estilo del Header */

header {
    background-image:'Header.jpg'/* Ruta a tu imagen de fondo */
    background-size: cover; width="1440" height="130"/* Ajusta la imagen al tamaño del header */
    background-position: center; /* Centra la imagen en el header */
    padding: 20px 0; /* Espaciado interno */
    text-align: center; /* Centra el texto dentro del header */
    color: white; /* Color del texto */
  }

  /* Estilo para el título del header */
  header h1 {
    margin: 0;
    font-size: 3em;
    font-weight: bold;
  }

  /* Estilos del menú de navegación */
  nav {
    margin-top: 20px;
  }

  nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
  }

  nav ul li {
    display: inline-block;
    margin: 0 15px;
  }

  nav ul li a {
    text-decoration: none;
    color: rgb(190, 8, 8); /* Color del texto */
    font-size: 1.2em;
    text-transform: uppercase;
    transition: color 0.3s ease;
  }

  nav ul li a:hover {
    color: #f39c12; /* Color al pasar el ratón */
  }

   /* Estilo general del botón */
   
   .btn-more {
    padding: 10px 20px; /* Espaciado dentro del botón */
    font-size: 16px; /* Tamaño del texto */
    font-family: Arial, sans-serif; /* Fuente del texto */
    color: white; /* Color del texto */
    background-color: #3498db; /* Color de fondo del botón */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor cuando pasa sobre el botón */
    transition: background-color 0.3s ease, transform 0.2s; /* Transiciones suaves */
  }

  /* Efecto cuando el mouse pasa sobre el botón */
  .btn-more:hover {
    background-color: #2980b9; /* Cambio de color al pasar el mouse */
    transform: scale(1.05); /* Agrandar ligeramente el botón */
  }

  /* Efecto cuando el botón está presionado */
  .btn-more:active {
    transform: scale(1); /* El botón vuelve a su tamaño normal */
  }
  
</style>
