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

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

@font-face {
    font-family: "GothamRounded";
    src: local("Gotham Rounded Light"), local("GothamRounded-Light"), url("fonts/gotham-rounded/gothamrnd_light.otf") format("opentype");
    font-weight:lighter;      
}

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

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

body {padding:0; margin:0; background-color:#FFF; font-family: 'GothamRounded', sans-serif; font-size:14px;}

#landing { max-width:600px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; justify-content: center;}
#landing .contenido {padding:1em; text-align:center;}
#landing h1 {text-indent:-9999px; overflow:hidden; margin:0; height:1px;}
#landing h2 {text-indent:-9999px; overflow:hidden; margin:0; height:1px;}
#landing .logo {width:72.5%;}
#landing article {padding:1.5em 0; font-size:26px;}
#landing article p {margin:0.25em 0;}
#landing article .bold {font-weight:bold;}
#landing .redes { display: flex; flex-flow: row wrap; gap: 0.75em; 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:#000; border-radius:10em;transition: transform 0.2s ease;}
#landing .redes a:hover { transform: scale(1.1);background-color: #f27b3d;}
#landing .redes a span {display:block; width:30px; height: 30px; 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); }

@media (max-width: 550px) {
    #landing article {font-size:19px;}
    #landing .redes a {padding:9px;}
    #landing .redes a span {width:29px; height:29px;}
}

@media (max-width: 500px) {
    #landing article {font-size:18px;}
    #landing .redes a {padding:9px;}
    #landing .redes a span {width:28px; height:28px;}
}

@media (max-width: 450px) {
    #landing article {font-size:17px;}
    #landing .redes a {padding:8px;}
    #landing .redes a span {width:27px; height:27px;}
}

@media (max-width: 400px) {
    #landing article {font-size:16px;}
    #landing .redes a {padding:8px;}
    #landing .redes a span {width:26px; height:26px;}
}