/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --bg-color: #ffffff;
    --bg-secondary: #f5f5f7;

    --text-color: #1d1d1f;
    --text-muted: #86868b;

    --nav-bg: #333333;
    --nav-text: #f5f5f7;

    --border-color: #d2d2d7;

    --accent: #0071e3;

    --card-shadow:
        rgba(0, 0, 0, 0.15);

    --transition-speed: 0.3s;
}


/* =========================================================
   DARK MODE
========================================================= */

:root[data-theme="dark"] {

    --bg-color: #1c1c1e;
    --bg-secondary: #2c2c2e;

    --text-color: #f5f5f7;
    --text-muted: #a1a1a6;

    --nav-bg: #000000;
    --nav-text: #f5f5f7;

    --border-color: #3a3a3c;

    --card-shadow:
        rgba(0, 0, 0, 0.45);
}


/* =========================================================
   PREFERÊNCIA DO SISTEMA
========================================================= */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) {

        --bg-color: #1c1c1e;
        --bg-secondary: #2c2c2e;

        --text-color: #f5f5f7;
        --text-muted: #a1a1a6;

        --nav-bg: #000000;
        --nav-text: #f5f5f7;

        --border-color: #3a3a3c;

        --card-shadow:
            rgba(0, 0, 0, 0.45);
    }
}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Verdana,
        sans-serif;
}


html {

    scroll-behavior: smooth;
}


body {

    background-color:
        var(--bg-color);

    color:
        var(--text-color);

    transition:
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease;
}


ul {

    list-style: none;
}


a {

    text-decoration: none;
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

a:focus-visible,
button:focus-visible,
li:focus-visible {

    outline:
        2px solid var(--accent);

    outline-offset:
        2px;
}


.visually-hidden {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.skip-link {

    position: absolute;

    top: -40px;
    left: 0;

    background:
        var(--accent);

    color: white;

    padding:
        .75rem 1.2rem;

    z-index: 1000;

    transition:
        top .2s ease;
}


.skip-link:focus {

    top: 0;
}


/* =========================================================
   NAVBAR
========================================================= */

header {

    position: relative;

    z-index: 100;
}


header nav {

    position: relative;

    min-height: 48px;

    background:
        var(--nav-bg);

    transition:
        background-color var(--transition-speed) ease;
}


#navbar {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 1.2rem;

    max-width: 1100px;

    min-height: 48px;

    margin: 0 auto;

    padding:
        0 4rem;

    font-size:
        .75rem;
}


#navbar a {

    color:
        var(--nav-text);

    transition:
        color .3s ease;
}


#navbar a:hover {

    color: #ffffff;
}


/* =========================================================
   LOGO NAVBAR
========================================================= */

#logo {

    display: flex;

    align-items: center;

    justify-content: center;
}


#logo a {

    display: flex;

    align-items: center;
}


#logo img {

    width: 24px;

    height: 24px;

    object-fit: contain;

    display: block;
}


/* =========================================================
   HAMBURGER
========================================================= */

#hamburger {

    display: none;

    position: absolute;

    top: 50%;
    left: 1rem;

    transform:
        translateY(-50%);

    background:
        transparent;

    border: none;

    width: 2rem;
    height: 2rem;

    cursor: pointer;

    z-index: 200;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;
}


#hamburger .bar {

    display: block;

    width: 1.5rem;
    height: 2px;

    background:
        var(--nav-text);

    border-radius: 2px;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


#hamburger.is-open .bar:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


#hamburger.is-open .bar:nth-child(2) {

    opacity: 0;
}


#hamburger.is-open .bar:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   THEME BUTTON
========================================================= */

#theme-toggle {

    position: absolute;

    top: 50%;
    right: 1rem;

    transform:
        translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        transparent;

    border:
        1px solid
        var(--nav-text);

    color:
        var(--nav-text);

    border-radius:
        50%;

    cursor: pointer;

    z-index: 200;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


#theme-toggle:hover {

    background:
        rgba(255, 255, 255, .15);
}


#theme-toggle:active {

    transform:
        translateY(-50%)
        scale(.9);
}


#theme-icon {

    width: 17px;
    height: 17px;
}


/* =========================================================
   SUBNAV
========================================================= */

#bottom-header {

    font-size:
        .8rem;

    padding:
        1rem;

    border-bottom:
        1px solid
        var(--border-color);

    background:
        var(--bg-color);

    transition:
        background-color var(--transition-speed) ease,
        border-color var(--transition-speed) ease;
}


#bottom-header-inner {

    max-width:
        1100px;

    margin:
        0 auto;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        .5rem;

    flex-wrap:
        wrap;
}


#bottom-header h3 {

    font-size:
        1.2rem;
}


#bottom-header a {

    color:
        var(--text-color);
}


#bottom-header-inner a {

    margin:
        0 .5rem;
}


/* =========================================================
   BOTÕES
========================================================= */

.btn {

    background:
        var(--accent);

    border-radius:
        10rem;

    padding:
        .5rem 1.2rem;

    color:
        #ffffff !important;

    display:
        inline-block;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.btn:hover {

    opacity:
        .85;

    transform:
        translateY(-1px);
}


.btn-outline {

    background:
        transparent;

    border:
        1px solid
        var(--accent);

    color:
        var(--accent) !important;
}


.btn-outline:hover {

    background:
        var(--accent);

    color:
        white !important;

    opacity:
        1;
}


/* =========================================================
   RIBBON
========================================================= */

#ribbon {

    text-align:
        center;

    padding:
        1rem;

    background:
        var(--bg-secondary);

    color:
        var(--text-color);

    font-size:
        .8rem;

    transition:
        background-color var(--transition-speed) ease;
}


#ribbon a {

    color:
        var(--accent);
}


/* =========================================================
   MAIN
========================================================= */

#main-content {

    text-align:
        center;

    background:
        var(--bg-color);

    color:
        var(--text-color);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-bottom:
        4rem;

    overflow:
        hidden;

    transition:
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease;
}


#title {

    margin:
        1rem;

    font-size:
        1.2rem;
}


#subtitle {

    margin:
        1rem;

    font-size:
        4rem;

    font-weight:
        700;
}


#description {

    max-width:
        600px;

    margin:
        1rem auto;

    padding:
        0 1rem;

    font-size:
        1.1rem;

    line-height:
        1.6rem;

    color:
        var(--text-muted);
}


#price {

    font-size:
        1.3rem;

    color:
        var(--text-muted);

    margin:
        2rem;
}


#main-content > .btn {

    align-self:
        center;
}


/* =========================================================
   IMAGEM PRINCIPAL
========================================================= */

#product-image {

    display:
        block;

    max-width:
        1000px;

    width:
        100%;

    height:
        auto;

    margin:
        3rem auto;

    background:
        transparent;

    object-fit:
        contain;

    opacity:
        1;

    transition:
        opacity .3s ease;
}


#product-image.changing {

    opacity:
        0;
}


/* =========================================================
   SELETOR DE CORES
========================================================= */

#image-picker {

    margin-bottom:
        4rem;
}


#image-picker ul {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;
}


#image-picker li {

    margin:
        1rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    cursor:
        pointer;
}


#image-picker li .color {

    width:
        2rem;

    height:
        2rem;

    border-radius:
        50%;

    box-shadow:
        1px 1px 3px
        var(--card-shadow);

    border:
        4px solid
        var(--bg-color);

    transition:
        border-color var(--transition-speed) ease;
}


#image-picker li .description {

    font-size:
        .7rem;

    color:
        var(--text-color);

    margin-top:
        .6rem;
}


#green .color {
    background-color: #394c38;
}

#silver .color {
    background-color: #f1f2ed;
}

#golden .color {
    background-color: #fae7cf;
}

#grafite .color {
    background-color: #44524f;
}

#blue .color {
    background-color: #a7c1d9;
}


.selected {

    outline:
        2px solid
        #43a1ff;

    outline-offset:
        2px;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(32px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}


.reveal.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.section-title {

    text-align:
        center;

    font-size:
        1.8rem;

    margin:
        3rem auto 2rem;

    max-width:
        700px;

    padding:
        0 1rem;
}


/* =========================================================
   COMPARADOR
========================================================= */

#compare {

    padding:
        2rem 1rem 4rem;

    background:
        var(--bg-color);

    transition:
        background-color var(--transition-speed) ease;
}


#compare-grid {

    display:
        grid;

    /*
       5 modelos em uma linha
    */

    grid-template-columns:
        repeat(5, minmax(170px, 1fr));

    gap:
        1rem;

    max-width:
        1250px;

    margin:
        0 auto;
}


.compare-card {

    position:
        relative;

    background:
        var(--bg-secondary);

    border-radius:
        1.2rem;

    padding:
        1.5rem .8rem 2rem;

    text-align:
        center;

    transition:
        background-color var(--transition-speed) ease,
        transform .2s ease;
}


.compare-card:hover {

    transform:
        translateY(-4px);
}


.compare-card.is-current {

    outline:
        2px solid
        var(--accent);
}


.compare-badge {

    position:
        absolute;

    top:
        -.75rem;

    left:
        50%;

    transform:
        translateX(-50%);

    background:
        var(--accent);

    color:
        white;

    font-size:
        .7rem;

    padding:
        .3rem .8rem;

    border-radius:
        10rem;

    white-space:
        nowrap;
}


/* =========================================================
   IMAGENS DOS CARDS
========================================================= */

.compare-card img {

    display:
        block;

    width:
        100%;

    max-width:
        170px;

    height:
        190px;

    object-fit:
        contain;

    margin:
        0 auto 1rem;

    background:
        transparent;
}


.compare-card h3 {

    font-size:
        1rem;

    margin-bottom:
        .3rem;
}


.compare-price {

    color:
        var(--text-muted);

    font-size:
        .85rem;

    margin-bottom:
        1rem;
}


.compare-card ul {

    text-align:
        left;

    font-size:
        .78rem;

    color:
        var(--text-color);

    margin:
        0 auto 1.5rem;

    max-width:
        220px;
}


.compare-card li {

    padding:
        .3rem 0;

    border-bottom:
        1px solid
        var(--border-color);
}


.compare-card li:last-child {

    border-bottom:
        none;
}


/* =========================================================
   TABLE
========================================================= */

#specs {

    padding:
        1rem 1rem 4rem;

    background:
        var(--bg-color);
}


.table-scroll {

    max-width:
        1000px;

    margin:
        0 auto;

    overflow-x:
        auto;
}


table {

    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        .85rem;

    min-width:
        700px;
}


th,
td {

    padding:
        .8rem 1rem;

    text-align:
        left;

    border-bottom:
        1px solid
        var(--border-color);
}


thead th {

    color:
        var(--text-muted);

    font-weight:
        600;

    font-size:
        .75rem;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


tbody th {

    color:
        var(--text-color);

    font-weight:
        600;

    white-space:
        nowrap;
}


tbody tr:hover {

    background:
        var(--bg-secondary);
}


/* =========================================================
   FOOTER
========================================================= */

#site-footer {

    text-align:
        center;

    padding:
        1.5rem;

    font-size:
        .75rem;

    color:
        var(--text-muted);

    border-top:
        1px solid
        var(--border-color);

    background:
        var(--bg-color);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    #compare-grid {

        grid-template-columns:
            repeat(3, minmax(190px, 1fr));

        max-width:
            750px;
    }

}


/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 800px) {

    #hamburger {

        display:
            flex;
    }


    #navbar {

        justify-content:
            center;

        padding:
            0 3.5rem;

        gap:
            0;
    }


    #navbar li:not(#logo) {

        max-height:
            0;

        overflow:
            hidden;

        opacity:
            0;

        transition:
            max-height .35s ease,
            opacity .25s ease;

        width:
            100%;

        text-align:
            center;
    }


    #navbar.is-open {

        position:
            absolute;

        top:
            48px;

        left:
            0;

        flex-direction:
            column;

        width:
            100%;

        background:
            var(--nav-bg);

        padding:
            .5rem 0 1rem;

        z-index:
            150;
    }


    #navbar.is-open li:not(#logo) {

        max-height:
            3rem;

        opacity:
            1;

        padding:
            .6rem 0;
    }


    #bottom-header-links a:not(.btn) {

        display:
            none;
    }


    #main-content {

        padding:
            2rem 1rem;
    }


    #compare-grid {

        grid-template-columns:
            repeat(2, minmax(180px, 1fr));

        max-width:
            600px;
    }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 480px) {

    #subtitle {

        font-size:
            2.5rem;
    }


    #title {

        font-size:
            1rem;
    }


    #description {

        font-size:
            1rem;
    }


    #compare-grid {

        grid-template-columns:
            1fr;

        max-width:
            320px;
    }


    .compare-card img {

        max-width:
            190px;

        height:
            210px;
    }

}


/* =========================================================
   REDUZIR ANIMAÇÕES
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}