/*@font-face {*/
/*    font-family: 'avenir-next-regular';*/
/*    src: url('/static/fonts/avenir-next-regular/avenir-next-regular.ttf') format('truetype');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'avenir-next-medium-italic';*/
/*    src: url('/static/fonts/avenir-next-medium-italic/avenir-next-medium-italic.ttf') format('truetype');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

 Para producción:
@font-face {
    font-family: 'avenir-next-regular';
    src: url('../fonts/avenir-next-regular/avenir-next-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenir-next-medium-italic';
    src: url('../fonts/avenir-next-medium-italic/avenir-next-medium-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root{
    --primary-color:rgba(0, 0, 0, 0.925);
    --background-color:rgb(0, 0, 0);
    --text-color: #b7b7b7;
    --text-color-light: #ffffff; 
    --secondary-text-color:#b5b5b5b5;
    --primary-font-family: 'avenir-next-regular', 'Arial', sans-serif;
    --secondary-font-family: 'avenir-next-medium-italic', 'Space Mono', monospace;
    --danger-btn-color: rgb(165, 3, 3) ;
}

html{
    scroll-behavior: smooth;
}

body, h1, h2, h3, p, ul, ol {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}


body {
    font-family: var(--primary-font-family);
    line-height: 1.6;
    background-color: var(--primary-color);    
    color: var(--text-color);
}

.main-content{
    padding-top: 70px;
    min-height: 90dvh;
    overflow: hidden;
    flex: 1;
}

.shadow1{
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}

a{
    color: var(--text-color);
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: var(--secondary-text-color);
}

ul{
    list-style: none;
}

.secondar-font{
    font-family: var(--secondary-font-family);
}

.h1 {
    font-size: clamp(30px, 3vw, 64px);
}
.h2 {
    font-size: clamp(22px, 2vw, 58px);  
}


.p1 {
    font-size: clamp(20px, 1.6vw, 34px);
}
.p2{
    font-size: clamp(18px, 1.2vw, 30px);
}
.p3{
    font-size: clamp(12px, 1vw, 28px);
} 
.p4{
    font-size: clamp(10px, 0.85vw, 24px);
} 

.border{
    border: 2px solid #000000;
}

@media (max-width: 991px) {
    .h1 {
    font-size: clamp(28px, 4vw, 64px);
    }
    .h2 {
    font-size: clamp(22px, 3vw, 58px);  
}

}