/***  apartado para fonts ****/

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }


@font-face {
    font-family: 'MavenPro';
    src: url('/fonts/MavenPro-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: 'MavenPro-Bold';
    src: url('/fonts/MavenPro-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: 'MavenPro-SemiBold';
    src: url('/fonts/MavenPro-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }



body { margin: 0; font-size: 16px; font-family: 'MavenPro' }
.site-header { background: linear-gradient(to bottom, #002b7a 24%, #1e5fd6 35%, #4088d0 59%, #1e5fd6 78%, #002b7a 328%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 999; }
.logo { max-width: 12rem;}
.top-socials { display: flex; justify-content: flex-end; background: #003a7d; padding: 6px 20px; transition: all 0.4s ease; }
.top-socials a { width: 30px; height: 30px; margin-left: 8px; border-radius: 50%; background: #fff; color: #004a99; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.header-main { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }
.mod-menu {    text-transform: uppercase; }
.main-menu ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-menu li { margin-left: 20px; }
.main-menu a { color: #fff; text-decoration: none; font-weight: 600; }
.main-menu a:hover { text-decoration: underline; }
.site-footer { background: #e60000; color: #fff; padding: 20px; text-align: center; }
.footer-socials { margin-top: 10px; display: flex; justify-content: center; gap: 10px; }
.footer-socials a { width: 32px; height: 32px; background: #fff; color: #e60000; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 768px) { .main-menu ul { flex-direction: column; align-items: center; } }