@font-face {
    font-family: "Gotham Light";
    src: url("/fonts/gotham-light/gotham-light.otf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Gotham Light";
    src: url("/fonts/gotham-light/gotham-medium.otf");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Gotham Light";
    src: url("/fonts/gotham-light/gotham-light-italic.otf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Gotham Light";
    src: url("/fonts/gotham-light/gotham-medium-italic.otf");
    font-weight: 700;
    font-style: italic;
}

:root {
    --color-link: #528dcb;
    --color-primary: #6fbd43;
    --color-primary-light: rgba(111,189,67,.25);
    --color-bg-input: #eff0f1;

    --bs-link-color-rgb: #528dcb;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #6fbd43;
    --bs-dropdown-font-size: 1.3em;
}

body {padding:0; margin:0; background-color:#eff1f7; color:#000000; font-family: 'Gotham Light', Arial; font-size:14px; font-weight:400;}

#landing { max-width:1100px; margin:0 auto; min-height:100dvh;}
#landing .contenido {padding:1.5em; display:flex; flex-direction:column; justify-content: center;}
/* ## Header ## */
#landing .contenido > header {display:flex; align-items:center; justify-content:flex-start; gap:1em; }
#landing h1 {text-indent:-9999px; overflow:hidden; margin:0; height:1px;}
#landing h2 {text-transform:uppercase; font-weight:100; font-size:1.2em; margin-top:-1em;}
#landing .logo {width:250px;}

#landing .contenido > main {display:flex; align-items:top; gap:1em; }

#landing article {width:35%; margin-top:1.5em;}
#landing article h3 { font-family: "Comfortaa", serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size:2em;}
#landing article p {margin:0.25em 0; font-size:1.7em;}
#landing article strong {font-weight:bold; color:var(--color-primary);}

#landing .iconos {display:flex; gap:1em; justify-content:center; align-items:center; margin-top:1em; }
#landing .iconos img {width:4em;}
#landing .iconos .plus {font-size:4em; color:var(--color-primary);}

#landing aside {width:65%;}
#landing aside img {max-width:800px; width:100%;} 

#landing .redes { display: flex; flex-flow: row wrap; gap: 1.5em; justify-content:center; align-items: center; padding: 1em; margin:2em 0 0;}
#landing .redes .link {cursor:pointer; 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 .link:hover, #landing .redes .link:focus { transform: scale(1.15); filter: brightness(105%); }
#landing .redes .link .icon {display:block; width:2.5em; height: 2.5em; background-color:#FFF; mask-size: contain; mask-position:center center; mask-repeat:no-repeat;}
#landing .redes .link.facebook .icon {mask-image: url(img/facebook.svg);}
#landing .redes .link.email .icon {mask-image: url(img/email.svg);}
#landing .redes .link.twitter .icon {mask-image: url(img/twitter.svg); }
#landing .redes .link.instagram .icon {mask-image: url(img/instagram.svg); }
#landing .redes .link.tiktok .icon {mask-image: url(img/tiktok.svg); }
#landing .redes .link.download .icon {mask-image: url(img/download.svg); }

.tooltip {--bs-tooltip-max-width:auto;}

@media (max-width: 800px) {
    #landing .contenido > header {justify-content:center; gap:0.5em;}
    #landing .contenido > header > a {width:40%;}
    #landing .logo {width:100%;}

    #landing .contenido > main {flex-direction:column;}
    #landing article {width:100%; text-align:center;}
    #landing aside {width:100%; text-align:center;}
    #landing aside img {width:75%;}
}

@media (max-width: 500px) {
    body {font-size:12px;}
    /*
    #landing h2 {font-size:1em;}

    #landing article h3 {font-size:1.5em;}
    #landing article p {font-size:1.2em;}
    #landing .redes .link .icon {width:27px; height:27px;}
    */
}

@media (max-width: 425px) {
    body {font-size:11px;}
}

@media (max-width: 350px) {
    body {font-size:10px;}
}

@media (max-width: 300px) {
    body {font-size:9px;}
}

@media (max-width: 250px) {
    body {font-size:8px;}
}