@font-face {
    font-family: "Gotham";
    src: local("Gotham Bold"), local("Gotham-Bold"), url("fonts/gotham/gotham_bold.otf") format("opentype");
    font-weight: bold;      
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham Light"), local("Gotham-Light"), url("fonts/gotham/gotham_light.otf") format("opentype");
    font-weight: 100;      
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham Light"), local("Gotham-Light"), url("fonts/gotham/gotham_lightitalic.otf") format("opentype");
    font-weight: 100;
    font-style:italic;
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham Italic"), local("Gotham-Italic"), url("fonts/gotham/gotham_bookitalic.otf") format("opentype");
    font-weight:normal;
    font-style:italic;      
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham"), local("Gotham"), url("fonts/gotham/gotham_book.otf") format("opentype");
    font-weight: normal;      
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham Italic"), local("Gotham-Italic"), url("fonts/gotham/gotham_bookitalic.otf") format("opentype");
    font-weight:normal;
    font-style:italic;      
}

@font-face {
    font-family: "Gotham";
    src: local("Gotham Bold Italic"), local("Gotham-Bold-Italic"), url("fonts/gotham/gotham_bolditalic.otf") format("opentype");
    font-weight:bold;
    font-style:italic;      
}

:root {
    --color-primary:#2882bd;
    --color-secondary: #0f5270;
}

body {padding:0; margin:0; background-color:#FFFFFF; color:var(--color-primary); font-family: 'Poppins', sans-serif; font-size:14px;}

#landing { margin:0 auto; min-height:100dvh;}
#landing section {width:100%;}

#landing .integrarnos {background-color:var(--color-secondary); color:#FFF; height:50dvh; display:flex; justify-content:end; flex-direction:column;}
#landing .contenido {max-width:600px; margin:0 auto;}
#landing .integrarnos .contenido {background:url(img/daniel-amoroso.png) no-repeat left bottom; background-size:contain; text-align:left; height:85%; width:100%; display:flex; align-items:center;}
#landing h1 { font-weight:100; line-height:0.9; padding-left:300px; padding-bottom:70px; font-size:40px; margin:0; font-family: 'Gotham', sans-serif; text-transform:uppercase;}
#landing h1 strong {font-weight:bold; display:block;}
#landing a {color:var(--color-primary); text-decoration:none;}
#landing a:hover {text-decoration:underline;}

#landing article {display:flex; flex-direction:row; justify-content:space-evenly; margin:30px 0;}
#landing article .logo {text-indent:-9999px; background:url(img/daniel-amoroso.svg) no-repeat center; background-size:contain; max-width:205px; height:78px; width:25%;}
#landing article .integrar {text-indent:-9999px; background:url(img/integrar.svg) no-repeat center; background-size:contain; max-width:191px; height:63px; width:25%;}
#landing footer {display:flex; flex-direction: column; align-items:center; justify-content:center;}

#landing .redes { display: flex; flex-flow: row wrap; gap: 0.5em; justify-content:center; align-items: center; padding: 1em;}
#landing .redes a {display: block; text-indent: -9999px; overflow:hidden; padding:10px; box-sizing: border-box; background-color:var(--color-primary); border-radius:10em;transition: transform 0.2s ease;}
#landing .redes a:hover, #landing .redes a:focus { transform: scale(1.1);background-color: var(--color-secondary);}
#landing .redes a span {display:block; width:20px; height: 20px; background-size: contain; background-position:center center; background-repeat:no-repeat;}
#landing .redes a.facebook span {background-image: url(img/facebook.svg);}
#landing .redes a.email span {background-image: url(img/email.svg);}
#landing .redes a.twitter span {background-image: url(img/twitter.svg); }
#landing .redes a.instagram span {background-image: url(img/instagram.svg); }
#landing .redes a.tiktok span {background-image: url(img/tiktok.svg); }

#landing .link {font-size:1.2em; margin-top:10px;}

@media (max-width: 650px) {
    #landing h1 {font-size:35px;}
}

@media (max-width: 550px) {
    #landing h1 {font-size:30px; padding-left:45%;}
    #landing article {margin:15px 0; padding-bottom:25px;}
    #landing .redes {padding-top:0.5em;}
    #landing .redes a {padding:10px;}
    #landing .redes a span {width:27px; height:27px;}
    
}

@media (max-width: 500px) {
    #landing h1 {font-size:27px; padding-bottom:20px;}
    #landing article {font-size:19px;}
    #landing .redes a {padding:9px;}
    #landing .redes a span {width:26px; height:26px;}
}

@media (max-width: 450px) {
    #landing .integrarnos .contenido {background-size:60%;}
    #landing h1 {font-size:25px; padding-bottom:15px;}
    #landing article {font-size:18px;}
    #landing .redes a {padding:8px;}
    #landing .redes a span {width:25px; height:25px;}
}

@media (max-width: 400px) {
    #landing h1 {font-size:20px; padding-bottom:10px;}
    
    #landing article {font-size:17px; margin:0;} 
    #landing .redes a {padding:8px;}
    #landing .redes a span {width:24px; height:24px;}
}