/* ==========================================================
   NOSTALBIT
   STYLE.CSS - VERSÃO 1.0
   Portal exclusivo de videogames
   ========================================================== */


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background: #0b0b0b;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

img {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #00ccff;
    outline-offset: 3px;
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.cabecalho {
    width: 100%;
    background: #050505;
    border-bottom: 2px solid #00ccff;

    padding: 16px 4%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    position: sticky;
    top: 0;
    z-index: 1000;
}


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

.logo {
    color: #00ccff;

    font-size: 34px;
    font-weight: 800;

    letter-spacing: 3px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.logo:hover {
    color: #ffffff;

    text-shadow:
        0 0 15px
        rgba(0, 204, 255, 0.7);
}


/* ==========================================================
   MENU PRINCIPAL
   ========================================================== */

.cabecalho nav {
    display: flex;

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

    gap: 5px;

    flex-wrap: wrap;
}

.cabecalho nav a {
    color: #ffffff;

    text-decoration: none;

    padding: 8px 10px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.cabecalho nav a:hover {
    background: #00ccff;
    color: #000000;

    transform: translateY(-1px);
}

.cabecalho nav a[aria-current="page"] {
    background: #00ccff;
    color: #000000;
}


/* ==========================================================
   CONTEÚDO PRINCIPAL
   ========================================================== */

main {
    min-height: 60vh;
}


/* ==========================================================
   BANNER
   ========================================================== */

.banner {
    width: 90%;
    max-width: 1400px;

    margin: 30px auto;
}

.banner img {
    width: 100%;

    display: block;

    border-radius: 18px;

    box-shadow:
        0 0 30px
        rgba(0, 204, 255, 0.3);
}


/* ==========================================================
   APRESENTAÇÃO
   ========================================================== */

.apresentacao {
    width: 90%;
    max-width: 1100px;

    margin: 70px auto;

    text-align: center;
}

.apresentacao h1 {
    color: #00ccff;

    font-size: 42px;

    line-height: 1.2;

    margin-bottom: 15px;
}

.apresentacao h2 {
    color: #00ccff;

    font-size: 32px;

    line-height: 1.3;

    margin-bottom: 18px;
}

.apresentacao h3 {
    color: #ffffff;

    margin-bottom: 12px;
}

.apresentacao p {
    color: #cccccc;

    font-size: 19px;

    max-width: 900px;

    margin:
        0 auto
        22px;
}


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

.botao {
    display: inline-block;

    background: #00ccff;
    color: #000000;

    text-decoration: none;

    font-weight: 700;

    padding: 12px 25px;

    border: 1px solid #00ccff;
    border-radius: 8px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao:hover {
    background: #0099cc;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0, 204, 255, 0.2);
}


/* ==========================================================
   DESTAQUES
   ========================================================== */

.destaques {
    width: 92%;
    max-width: 1400px;

    margin: 80px auto;
}

.destaques h2,
.categorias h2 {
    text-align: center;

    color: #00ccff;

    font-size: 34px;

    margin-bottom: 40px;
}


/* ==========================================================
   CARDS
   ========================================================== */

.cards {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 22px;
}

.card {
    min-width: 0;

    background: #171717;

    border: 1px solid #444444;
    border-radius: 15px;

    overflow: hidden;

    text-align: center;

    padding-bottom: 25px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-8px);

    border-color: #00ccff;

    box-shadow:
        0 0 25px
        rgba(0, 204, 255, 0.25);
}

.card img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    display: block;
}

.card h3 {
    color: #00ccff;

    font-size: 23px;

    margin:
        20px 10px
        10px;
}

.card p {
    color: #cccccc;

    padding:
        0 15px;

    margin-bottom: 20px;
}


/* ==========================================================
   CATEGORIAS
   ========================================================== */

.categorias {
    width: 90%;
    max-width: 1200px;

    margin: 80px auto;
}

.categorias-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}

.categorias-grid a {
    min-width: 0;

    background: #171717;

    border: 2px solid #00ccff;
    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    padding: 35px 20px;

    text-align: center;

    font-size: 42px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.categorias-grid a:hover {
    background: #00ccff;
    color: #000000;

    transform: translateY(-8px);

    box-shadow:
        0 10px 25px
        rgba(0, 204, 255, 0.2);
}

.categorias-grid strong {
    display: block;

    font-size: 19px;

    margin-top: 10px;
}


/* ==========================================================
   PÁGINAS DE FABRICANTES
   ========================================================== */

.hero {
    width: 90%;
    max-width: 1200px;

    margin: 50px auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

    align-items: center;
}

.hero-text h2 {
    color: #00ccff;

    font-size: 42px;

    margin-bottom: 15px;
}

.hero-text p {
    color: #cccccc;

    font-size: 18px;

    margin-bottom: 25px;
}

.hero-image {
    width: 100%;
}

.hero-image img {
    width: 100%;

    max-height: 420px;

    object-fit: cover;

    display: block;

    border: 2px solid #00ccff;
    border-radius: 15px;
}


/* ==========================================================
   TABELAS
   ========================================================== */

.table-container {
    width: 100%;

    overflow-x: auto;

    border-radius: 10px;
}

table {
    width: 100%;

    border-collapse: collapse;

    background: #171717;
}

th {
    background: #00ccff;
    color: #000000;

    padding: 15px;
}

td {
    padding: 15px;

    border-bottom: 1px solid #333333;

    text-align: center;
}

tbody tr:hover {
    background: #222222;
}


/* ==========================================================
   TABELA DE PREÇOS
   ========================================================== */

.tabela-precos {
    width: 90%;
    max-width: 1200px;

    margin: 60px auto;
}

.filtros {
    display: flex;

    gap: 15px;

    margin-bottom: 30px;

    flex-wrap: wrap;
}

.filtros input,
.filtros select {
    flex: 1;

    min-width: 220px;

    padding: 14px;

    background: #171717;
    color: #ffffff;

    border: 1px solid #444444;
    border-radius: 8px;

    font-size: 16px;
}


/* ==========================================================
   LOGIN E CADASTRO
   ========================================================== */

.auth-area {
    min-height: 650px;

    display: flex;

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

    padding: 60px 20px;
}

.auth-card {
    width: 100%;
    max-width: 450px;

    background: #171717;

    border: 1px solid #333333;
    border-radius: 16px;

    padding: 35px;

    box-shadow:
        0 0 25px
        rgba(0, 204, 255, 0.18);
}

.auth-card h1 {
    text-align: center;

    color: #00ccff;

    margin-bottom: 10px;
}

.auth-card > p {
    text-align: center;

    color: #aaaaaa;

    margin-bottom: 30px;
}

.auth-card form {
    display: flex;

    flex-direction: column;
}

.auth-card label {
    margin-bottom: 8px;

    color: #dddddd;
}

.auth-card input {
    padding: 14px;

    margin-bottom: 20px;

    border: 1px solid #444444;
    border-radius: 8px;

    background: #0f0f0f;
    color: #ffffff;

    font-size: 16px;
}

.auth-card input:focus {
    outline: none;

    border-color: #00ccff;
}

.botao-form {
    border: none;
    border-radius: 8px;

    padding: 14px;

    background: #00ccff;
    color: #000000;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.botao-form:hover {
    background: #0099cc;
    color: #ffffff;

    transform: translateY(-1px);
}

.botao-form:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}

.auth-link {
    display: block;

    text-align: center;

    margin-top: 20px;

    color: #00ccff;

    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-footer {
    margin-top: 25px;

    text-align: center;

    color: #aaaaaa;
}

.auth-footer a {
    color: #00ccff;

    text-decoration: none;

    font-weight: 700;
}


/* ==========================================================
   FAVORITOS
   ========================================================== */

.favoritos-area {
    width: 90%;
    max-width: 1200px;

    margin:
        50px auto
        100px;
}

.favoritos-vazio {
    grid-column:
        1 / -1;

    text-align: center;

    background: #171717;

    border: 1px solid #333333;
    border-radius: 16px;

    padding: 50px 25px;
}

.favoritos-vazio h2 {
    color: #00ccff;

    margin-bottom: 10px;
}

.favoritos-vazio p {
    color: #aaaaaa;

    margin-bottom: 20px;
}

.favorito-btn {
    margin-top: 15px;

    border: 1px solid #00ccff;
    border-radius: 8px;

    background: transparent;
    color: #00ccff;

    padding: 10px 16px;

    cursor: pointer;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.favorito-btn:hover {
    background: #00ccff;
    color: #000000;
}


/* ==========================================================
   CONTATO
   ========================================================== */

.contato-area {
    width: 90%;
    max-width: 700px;

    margin:
        40px auto
        100px;
}

.contato-card {
    background: #171717;

    border: 1px solid #333333;
    border-radius: 16px;

    padding: 35px;

    box-shadow:
        0 0 25px
        rgba(0, 204, 255, 0.08);
}

.contato-card form {
    display: flex;

    flex-direction: column;
}

.contato-card label {
    margin-bottom: 8px;

    color: #dddddd;
}

.contato-card input,
.contato-card textarea {
    width: 100%;

    padding: 14px;

    margin-bottom: 20px;

    border: 1px solid #444444;
    border-radius: 8px;

    background: #0f0f0f;
    color: #ffffff;

    font-family: inherit;
    font-size: 16px;
}

.contato-card input:focus,
.contato-card textarea:focus {
    outline: none;

    border-color: #00ccff;
}

.contato-card textarea {
    resize: vertical;

    min-height: 150px;
}


/* ==========================================================
   RESULTADOS DA PESQUISA
   ========================================================== */

#resultadoPesquisa {
    margin-top: 20px;
}

#resultadoPesquisa p {
    color: #aaaaaa;
}

.resultado-item {
    display: block;

    max-width: 550px;

    margin: 8px auto;

    padding: 12px 16px;

    background: #171717;

    border: 1px solid #333333;
    border-radius: 8px;

    color: #00ccff;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.resultado-item:hover {
    background: #222222;

    border-color: #00ccff;

    transform: translateY(-2px);
}


/* ==========================================================
   CATÁLOGO DINÂMICO
   ========================================================== */

.catalogo-pesquisa {
    width: 90%;
    max-width: 800px;

    margin:
        30px auto
        60px;
}

.catalogo-pesquisa label {
    display: block;

    color: #cccccc;

    margin-bottom: 8px;
}

.catalogo-pesquisa input {
    width: 100%;

    padding: 16px 20px;

    background: #171717;
    color: #ffffff;

    border: 2px solid #333333;
    border-radius: 10px;

    font-size: 17px;
}

.catalogo-pesquisa input:focus {
    outline: none;

    border-color: #00ccff;
}

.catalogo-dinamico {
    width: 92%;
    max-width: 1400px;

    margin: auto;
}

.fabricante-catalogo {
    margin-bottom: 80px;
}

.fabricante-catalogo > h2 {
    color: #00ccff;

    font-size: 32px;

    margin-bottom: 30px;

    border-bottom: 1px solid #333333;

    padding-bottom: 15px;
}

.consoles-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(290px, 1fr)
        );

    gap: 25px;
}

.console-detalhado {
    background: #171717;

    border: 1px solid #333333;
    border-radius: 15px;

    padding: 25px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.console-detalhado:hover {
    transform: translateY(-5px);

    border-color: #00ccff;

    box-shadow:
        0 0 20px
        rgba(0, 204, 255, 0.18);
}

.console-topo {
    margin-bottom: 20px;
}

.console-topo h3 {
    color: #00ccff;

    font-size: 25px;

    margin:
        8px 0
        15px;
}

.console-topo p {
    color: #bbbbbb;

    margin: 5px 0;
}

.console-tipo {
    display: inline-block;

    background: #252525;
    color: #aaaaaa;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 13px;
}

.console-detalhado details {
    margin: 12px 0;

    background: #0e0e0e;

    border: 1px solid #292929;
    border-radius: 8px;

    padding: 12px;
}

.console-detalhado summary {
    color: #ffffff;

    font-weight: 700;

    cursor: pointer;
}

.console-detalhado ul {
    margin-top: 15px;

    padding-left: 22px;
}

.console-detalhado li {
    color: #bbbbbb;

    margin: 7px 0;
}

.sem-resultados {
    text-align: center;

    padding: 70px 20px;

    background: #171717;

    border: 1px solid #333333;
    border-radius: 15px;
}

.sem-resultados h2 {
    color: #00ccff;

    margin-bottom: 10px;
}

.sem-resultados p {
    color: #aaaaaa;
}


/* ==========================================================
   TABELA NOSTALBIT
   ========================================================== */

.precos-dinamicos {
    width: 92%;
    max-width: 1400px;

    margin:
        40px auto
        100px;
}

.produto-preco {
    margin-bottom: 70px;
}

.produto-preco h2 {
    color: #00ccff;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom: 1px solid #333333;
}

.produto-preco table {
    min-width: 850px;
}

.produto-preco td:nth-child(4) {
    color: #00ccff;

    font-weight: 700;
}


/* ==========================================================
   FILTROS DA TABELA NOSTALBIT
   ========================================================== */

.filtros-precos {
    width: 92%;
    max-width: 1200px;

    margin:
        30px auto
        50px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 15px;

    align-items: end;
}

.campo-filtro {
    min-width: 0;
}

.campo-filtro label {
    display: block;

    color: #aaaaaa;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 7px;
}

.filtros-precos input,
.filtros-precos select {
    width: 100%;

    min-height: 50px;

    padding: 14px;

    background: #171717;
    color: #ffffff;

    border: 1px solid #444444;
    border-radius: 8px;

    font-size: 16px;
}

.filtros-precos input:focus,
.filtros-precos select:focus {
    outline: none;

    border-color: #00ccff;
}


/* ==========================================================
   INFORMAÇÕES DA TABELA DE PREÇOS
   ========================================================== */

.pagina-precos {
    min-height: 60vh;
}

.apresentacao-precos {
    margin-bottom: 35px;
}

.descricao-fontes-preco {
    color: #888888 !important;

    font-size: 15px !important;

    margin-bottom: 0 !important;
}

.informacoes-tabela-precos {
    width: 92%;
    max-width: 1200px;

    margin:
        0 auto
        35px;

    display: grid;

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

    gap: 15px;
}

.informacoes-tabela-precos > div {
    background: #111111;

    border: 1px solid #2d2d2d;
    border-radius: 12px;

    padding: 15px;
}

.informacoes-tabela-precos strong,
.informacoes-tabela-precos span {
    display: block;
}

.informacoes-tabela-precos strong {
    color: #00ccff;

    margin-bottom: 4px;
}

.informacoes-tabela-precos span {
    color: #999999;

    font-size: 13px;
}

.mensagem-inicial-precos {
    text-align: center;

    color: #999999;

    background: #111111;

    border: 1px solid #2d2d2d;
    border-radius: 12px;

    padding: 30px 20px;
}


/* ==========================================================
   RESULTADOS EBAY
   ========================================================== */

#resultadosEbay {
    width: 92%;
    max-width: 1400px;

    margin:
        0 auto
        100px;
}

.cabecalho-ebay,
.resumo-categoria-ebay,
.resumo-mercado-ebay {
    background: #111111;

    border: 1px solid #2d2d2d;
    border-radius: 14px;

    padding: 18px;

    margin-bottom: 18px;
}

.cabecalho-ebay h2,
.resumo-categoria-ebay h3,
.resumo-mercado-ebay h3 {
    margin-top: 0;
}

.resumo-categoria-ebay {
    border-color: #f0c400;
}

.preco-referencia-nostalbit {
    font-size: 2rem;
    font-weight: 800;

    margin:
        10px 0
        16px;
}

.resumo-precos-ebay {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 12px;

    margin-top: 14px;
}

.resumo-precos-ebay > div {
    background: #181818;

    border: 1px solid #333333;
    border-radius: 10px;

    padding: 14px;
}

.resumo-precos-ebay span {
    display: block;

    font-size: 0.85rem;

    opacity: 0.75;

    margin-bottom: 6px;
}

.resumo-precos-ebay strong {
    font-size: 1.05rem;
}

.titulo-lista-ebay {
    margin:
        26px 0
        14px;
}

.ebay-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 18px;
}

.ebay-card {
    background: #111111;

    border: 1px solid #2e2e2e;
    border-radius: 14px;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.ebay-card:hover {
    transform: translateY(-3px);

    border-color: #f0c400;
}

.ebay-imagem {
    width: 100%;
    height: 190px;

    object-fit: contain;

    background: #ffffff;

    display: block;
}

.ebay-card-conteudo {
    padding: 16px;
}

.ebay-card-conteudo h3 {
    margin-top: 0;

    font-size: 1rem;

    line-height: 1.4;
}

.ebay-card-conteudo p {
    margin: 7px 0;
}

.ebay-link {
    display: inline-block;

    margin-top: 10px;

    text-decoration: none;

    font-weight: 700;

    border: 1px solid #f0c400;
    border-radius: 8px;

    padding: 9px 12px;
}

.ebay-link:hover {
    background: #f0c400;
    color: #000000;
}

.resumo-categoria-ebay hr {
    border: 0;

    border-top: 1px solid #333333;

    margin: 18px 0;
}


/* ==========================================================
   PAINEL NOSTALBIT
   ========================================================== */

.painel-nostalbit {
    background: #101010;

    border: 1px solid #f0c400;
    border-radius: 16px;

    padding: 22px;

    margin: 22px 0;
}

.painel-nostalbit-topo {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center;

    flex-wrap: wrap;
}

.painel-etiqueta {
    font-size: 0.85rem;

    opacity: 0.75;
}

.painel-nostalbit-topo h2 {
    margin:
        6px 0
        0;
}

.painel-preco-principal {
    text-align: right;
}

.painel-preco-principal span {
    display: block;

    font-size: 0.8rem;

    opacity: 0.7;

    margin-bottom: 5px;
}

.painel-preco-principal strong {
    font-size: 2rem;
}

.painel-nostalbit-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );

    gap: 12px;

    margin-top: 20px;
}

.painel-dado {
    background: #181818;

    border: 1px solid #333333;
    border-radius: 10px;

    padding: 14px;
}

.painel-dado span {
    display: block;

    font-size: 0.8rem;

    opacity: 0.7;

    margin-bottom: 6px;
}

.painel-dado strong {
    font-size: 1rem;
}

.painel-nostalbit-fontes {
    display: grid;

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

    gap: 12px;

    margin-top: 20px;
}

.painel-nostalbit-fontes > div {
    border-top: 1px solid #333333;

    padding-top: 12px;
}

.painel-nostalbit-fontes strong,
.painel-nostalbit-fontes span {
    display: block;
}

.painel-nostalbit-fontes span {
    font-size: 0.8rem;

    opacity: 0.7;

    margin-top: 3px;
}


/* ==========================================================
   RODAPÉ INSTITUCIONAL
   ========================================================== */

footer {
    width: 100%;

    background: #050505;

    border-top: 1px solid #222222;

    margin-top: 100px;

    padding:
        55px 5%
        25px;

    color: #999999;
}

.footer-conteudo {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 50px;

    text-align: left;
}

.footer-marca h3,
footer > h3 {
    color: #00ccff;

    font-size: 28px;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.footer-marca p {
    color: #aaaaaa;

    max-width: 420px;
}

.footer-links h4,
.footer-redes h4 {
    color: #ffffff;

    font-size: 17px;

    margin-bottom: 15px;
}

.footer-links,
.footer-redes {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-links a,
.footer-redes a {
    display: inline-block;

    color: #aaaaaa;

    text-decoration: none;

    margin-bottom: 9px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-links a:hover,
.footer-redes a:hover {
    color: #00ccff;

    transform: translateX(3px);
}

footer > p {
    color: #999999;
}

.copyright {
    width: 100%;
    max-width: 1200px;

    margin:
        35px auto
        0;

    padding-top: 20px;

    border-top: 1px solid #222222;

    color: #777777;

    font-size: 14px;

    text-align: center;
}


/* ==========================================================
   RODAPÉ ANTIGO
   Compatibilidade com páginas que ainda serão atualizadas
   ========================================================== */

footer:not(:has(.footer-conteudo)) {
    text-align: center;
}

footer:not(:has(.footer-conteudo)) h3 {
    color: #00ccff;

    font-size: 28px;

    margin-bottom: 10px;
}

footer:not(:has(.footer-conteudo)) p {
    color: #999999;
}


/* ==========================================================
   REDES SOCIAIS
   ========================================================== */

.redes-sociais {
    display: flex;

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

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;
}

.redes-sociais a {
    display: inline-flex;

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

    gap: 7px;

    min-height: 44px;

    padding:
        9px 14px;

    background: #171717;

    border: 1px solid #333333;
    border-radius: 8px;

    color: #ffffff;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.redes-sociais a:hover {
    color: #00ccff;

    border-color: #00ccff;

    transform: translateY(-2px);
}


/* ==========================================================
   ESTADOS E MENSAGENS
   ========================================================== */

.mensagem-sucesso {
    color: #7ee787;
}

.mensagem-erro {
    color: #ff7b72;
}

.mensagem-aviso {
    color: #f0c400;
}

.texto-secundario {
    color: #999999;
}

.oculto {
    display: none !important;
}


/* ==========================================================
   RESPONSIVIDADE - NOTEBOOK / MENU GRANDE
   ========================================================== */

@media (max-width: 1250px) {

    .cabecalho {
        padding:
            15px 3%;
    }

    .logo {
        font-size: 30px;
    }

    .cabecalho nav a {
        padding:
            7px 8px;

        font-size: 13px;
    }

}


/* ==========================================================
   RESPONSIVIDADE - TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .cabecalho {
        flex-direction: column;

        justify-content: center;

        gap: 12px;

        padding:
            15px 4%;
    }

    .logo {
        font-size: 32px;
    }

    .cabecalho nav {
        width: 100%;

        justify-content: center;

        gap: 6px;
    }

    .cabecalho nav a {
        padding:
            8px 10px;

        font-size: 14px;
    }

    .cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .categorias-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .filtros-precos {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .informacoes-tabela-precos {
        grid-template-columns: 1fr;
    }

    .footer-conteudo {
        grid-template-columns:
            2fr 1fr;

        gap: 35px;
    }

    .footer-redes {
        grid-column:
            1 / -1;
    }

}


/* ==========================================================
   RESPONSIVIDADE - TABLET PEQUENO
   ========================================================== */

@media (max-width: 768px) {

    .cabecalho {
        position: relative;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-text {
        text-align: center;
    }

    .hero-text h2 {
        font-size: 34px;
    }

    .apresentacao {
        margin:
            50px auto;
    }

    .apresentacao h1 {
        font-size: 34px;
    }

    .apresentacao h2 {
        font-size: 28px;
    }

    .apresentacao p {
        font-size: 17px;
    }

    .fabricante-catalogo > h2 {
        font-size: 27px;
    }

    .consoles-grid {
        grid-template-columns: 1fr;
    }

    .painel-preco-principal {
        text-align: left;
    }

    .painel-preco-principal strong {
        font-size: 1.6rem;
    }

    .painel-nostalbit-fontes {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   RESPONSIVIDADE - CELULAR
   ========================================================== */

@media (max-width: 600px) {

    .cabecalho {
        padding:
            14px 12px;

        gap: 12px;
    }

    .logo {
        font-size: 29px;

        letter-spacing: 2px;
    }

    .cabecalho nav {
        display: grid;

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

        width: 100%;

        gap: 6px;
    }

    .cabecalho nav a {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;

        padding:
            9px 6px;

        background: #111111;

        border: 1px solid #222222;
        border-radius: 7px;

        font-size: 14px;

        text-align: center;

        white-space: normal;
    }

    .cabecalho nav a:hover {
        transform: none;
    }

    .banner {
        width: 94%;

        margin:
            20px auto;
    }

    .banner img {
        border-radius: 12px;
    }

    .apresentacao {
        width: 92%;

        margin:
            45px auto;
    }

    .apresentacao h1 {
        font-size: 29px;
    }

    .apresentacao h2 {
        font-size: 25px;
    }

    .apresentacao p {
        font-size: 16px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .categorias-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .categorias-grid a {
        padding:
            25px 15px;

        font-size: 36px;
    }

    .destaques h2,
    .categorias h2 {
        font-size: 27px;
    }

    .destaques {
        width: 94%;

        margin:
            55px auto;
    }

    .categorias {
        width: 92%;

        margin:
            55px auto;
    }

    .auth-area {
        min-height: auto;

        padding:
            40px 15px;
    }

    .auth-card {
        padding:
            25px 20px;
    }

    .contato-area {
        width: 94%;
    }

    .contato-card {
        padding:
            25px 18px;
    }

    .catalogo-pesquisa {
        width: 94%;
    }

    .catalogo-dinamico {
        width: 94%;
    }

    .filtros-precos {
        width: 94%;

        grid-template-columns: 1fr;
    }

    .pagina-precos .apresentacao {
        margin-top: 45px;

        margin-bottom: 30px;
    }

    .precos-dinamicos,
    #resultadosEbay {
        width: 94%;
    }

    .painel-nostalbit {
        padding: 17px;
    }

    .painel-nostalbit-topo {
        align-items: flex-start;
    }

    .painel-nostalbit-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .preco-referencia-nostalbit {
        font-size: 1.5rem;
    }

    .ebay-grid {
        grid-template-columns: 1fr;
    }

    .resumo-precos-ebay {
        grid-template-columns: 1fr;
    }

    footer {
        margin-top: 70px;

        padding:
            45px 20px
            22px;
    }

    .footer-conteudo {
        grid-template-columns: 1fr;

        gap: 30px;

        text-align: center;
    }

    .footer-marca p {
        margin:
            0 auto;
    }

    .footer-links,
    .footer-redes {
        align-items: center;
    }

    .footer-redes {
        grid-column: auto;
    }

    .footer-links a:hover,
    .footer-redes a:hover {
        transform: none;
    }

}


/* ==========================================================
   RESPONSIVIDADE - CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 480px) {

    .logo {
        font-size: 27px;
    }

    .cabecalho nav a {
        font-size: 14px;

        padding:
            8px 4px;
    }

    .apresentacao h1 {
        font-size: 27px;
    }

    .apresentacao h2 {
        font-size: 23px;
    }

    .painel-nostalbit-grid {
        grid-template-columns: 1fr;
    }

    .card img {
        height: 190px;
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/* Foco visível para navegação por teclado */
.auth-card input:focus-visible,
.contato-card input:focus-visible,
.contato-card textarea:focus-visible,
.catalogo-pesquisa input:focus-visible,
.filtros-precos input:focus-visible,
.filtros-precos select:focus-visible {
    outline: 2px solid #00ccff;
    outline-offset: 3px;
}

/* Cabeçalho das páginas que usam site-header e menu */
.site-header {
    width: 100%;
    background: #050505;
    border-bottom: 2px solid #00ccff;
    padding: 16px 4%;
}

.site-header .header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-header .header-inner > a {
    color: #00ccff !important;
    text-decoration: none;
}

.site-header .header-inner > a h1 {
    margin: 0;
    font-size: 34px;
    letter-spacing: 3px;
}

.site-header .menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.site-header .menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
}

.site-header .menu a:hover,
.site-header .menu a:focus-visible {
    background: #00ccff;
    color: #000000;
}

@media (max-width: 1000px) {
    .site-header .header-inner {
        flex-direction: column;
        gap: 12px;
    }

    .site-header .menu {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .site-header {
        padding: 14px 12px;
    }

    .site-header .header-inner > a h1 {
        font-size: 29px;
    }

    .site-header .menu {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .site-header .menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 9px 6px;
        background: #111111;
        border: 1px solid #222222;
        text-align: center;
        white-space: normal;
    }
}

/* Texto legível nas caixas de acesso */
.bloqueio {
    color: #171717;

    .sugestoes-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 20px 70px;
    color: #171717;
}
}

/* Espaçamento dos artigos em telas pequenas e grandes */
main.container > article {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding: 24px clamp(20px, 5vw, 40px) 48px;
}

/* Páginas de conteúdo com seções dentro do contêiner */
main.container > section {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding: 24px clamp(20px, 5vw, 40px);
}