html {
    font-size: 62.5%;
    height: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
}
*, *:before, *:after { box-sizing: inherit; }
body {    
    font-family: "Montserrat", serif; /* Segoe UI', Tahoma */
    font-size: 1.5rem;
    min-height: 100vh;
    background-color: var(--sec); /* Footer y botones And/iOS */
    scrollbar-color: var(--pri) transparent;
}
a { text-decoration: none; }
img { width: 100%; } /* height: auto; */ 
svg { color: var(--sec); }
p, label { color: var(--sec); }
h1, h2 {
    text-align: center;
    color: var(--sec);
    padding: 2rem 0;
    margin: 0;
}

header {

    background-color: var(--bg1);
    .barra {
        width: min(100%, 120rem);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (width > 768px) { padding: 1rem 5rem; }
    }
    
    .logos {
        margin: .5rem 1rem;
        padding: 1rem;
        position: relative;
        overflow: hidden;
        
        .titulos {
            position: absolute;
            margin: auto;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        svg {
            color: var(--bg3);
            width: 85%;
        }
    }
    .logo {
        display: inline-block;
        font-size: clamp(1rem, 10vw - 0.8rem, 5rem);
        text-transform: uppercase;
        padding: 0;
        margin: 0;
        span { font-weight: 300 }
        background: linear-gradient(to right, var(--pri), var(--sec));
        background-clip: text;
        /* -webkit-background-clip: text; */
        color: transparent;
    }
    .slogan {
        font-style: italic; 
        font-size: 1.2rem;
    }
    .botones {
        display: flex;

        flex-direction: column;

        justify-content: space-between;
        padding: 1rem 1rem 1rem 0;
        gap: 1rem; @media (width > 768px) { gap: 3rem }
        .boton {
            display: flex;
            flex-direction: column;
            align-items: center;
            &:hover { cursor: pointer; }
            @media (width > 768px) { transform: scale(110%) }
        }
        svg {
            /* transform: scale(140%); */
            margin: 0;
            color: var(--sec);
        }
    }

    p {
        font-size: 1.1rem;
        text-transform: uppercase;
        margin: .5rem 0;
        text-align: center;
    }
    .boton:hover {
        svg, p {
            color: var(--pri);
        }
    }
    .menu-temas {
        z-index: 2;
        position: fixed;
        background-color: rgba(66, 66, 66, 0.432);
        backdrop-filter: blur(.75rem);
        inset: 0;
        padding: 1rem;
        /* overflow: scroll; */
        .temas {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-left: auto;
            width: min(75%, 35rem);
        }
    }
    .temas button {
        font-size: 2rem;
        text-align: right;
        border: none;
        padding: 1rem 2rem;
        border-start-end-radius: 2rem;
        border-end-end-radius: 2rem;

        &[name='1'] { color: #e7e7e7; background: linear-gradient(to left, #3b3b3b, transparent); }
        &[name='2'] { color: #f3dea3; background: linear-gradient(to left, #721d03, transparent); }
        &[name='3'] { color: #e1bef1; background: linear-gradient(to left, #544161, transparent); }
        &[name='4'] { color: #caf3f5; background: linear-gradient(to left, #342a64, transparent); }
        &[name='5'] { color: #f3dea3; background: linear-gradient(to left, #f07f34, transparent); }
        &[name='6'] { color: #ccf5d4; background: linear-gradient(to left, #408850, transparent); }
        &[name='7'] { color: #f8c7c7; background: linear-gradient(to left, #a30909, transparent); }
        &[name='8'] { color: #d7dffa; background: linear-gradient(to left, #2d3279, transparent); }
        &[name='9'] { color: #ddcf0e; background: linear-gradient(to left, #2e2e2e, transparent); }
        &[name='10'] { color: #fcc7e0; background: linear-gradient(to left, #e66ac0, transparent); }
        &[name='11'] { color: #e7e7e7; background: linear-gradient(to left, #525252, transparent); }

        transition: all .5s;
        &:hover {
            cursor: pointer;
            font-weight: bold;
        }
    }
}

nav {
    background-color: var(--sec);
    width: 100%;
    box-shadow: var(--sec) 0px 0px 1rem;

    .navegacion {
        width: min(100%, 80rem);
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
    }
    a {
        display: flex;
        gap: .5rem;
        justify-content: center;
        align-items: center;

        color: var(--bg1);
        flex: 1;
        padding: 1rem 0;
        svg { color: var(--bg1); }

        transition: 400ms all ease;
        &:hover, &.actual {
            background-color: var(--bg1);
            color: var(--sec);
            svg { color: var(--sec); }
        }
        @media (width > 768px) {
            font-size: 1.7rem;
            svg { width: 1.7rem; }
        }
    }
}

main {
    background-color: var(--bg3);
    padding-bottom: 5rem;
}

footer {
    width: 100%;
    background-color: var(--sec);
    p {
        color: var(--bg1);
        text-align: center;
        margin: 0;
        padding: 2rem 2rem;
        @media (width < 768px) { padding: 2rem 1rem 0; }
    }
}

.hidden { display: none }
.no-scroll { overflow: hidden }
.center { margin: 0 auto }