@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:#FFFFFF; color:#0575bb; 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 .logo {width:72.5%; max-width:300px;}
#landing .whatsapp {font-size:1.25em; margin: 1.5em 0; display:inline-block; padding:0.5em; color:#0575bb; border:1px solid #0575bb; text-decoration:none; transition: transform 0.2s ease;}
#landing .whatsapp:hover, #landing .whatsapp:focus {background-color: #0575bb; color:#FFFFFF; transform: scale(1.05); }
#landing .qr {width:50%; max-width:200px; display:block; margin:0 auto;}
#landing .telefono {font-weight:bold; font-size:1.3em; margin-top:0;}
#landing article {padding:1.5em 0; font-size:26px;}
#landing article p {margin:0.25em 0;}
#landing article .bold {font-weight:bold;}
#landing footer {display:flex; flex-direction: row; align-items:center; justify-content:center;}
#landing .direccion {display:flex; flex-direction: row; align-items:center; justify-content:center; gap:0.5em; border-right:1px solid #0575bb; padding-right:1em; font-weight:bold; text-align:left; font-size:1.2em;}
#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:#0575bb; border-radius:10em;transition: transform 0.2s ease;}
#landing .redes a:hover, #landing .redes a:focus { transform: scale(1.1);background-color: #6fbc45;}
#landing .redes a span {display:block; width:27px; height: 27px; 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 footer { flex-direction: column;}
    #landing .whatsapp {margin-bottom:0.75em;}
    #landing .telefono {margin-bottom:0.75em;}
    #landing .direccion {border-right:none; padding-right:0; padding-bottom:0.75em;}
    #landing .redes {padding-top:0.5em;}
    #landing .redes a {padding:9px;}
    #landing .redes a span {width:26px; height:26px;}
}

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

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

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