/* =========================================================
   INVASÃO AUTORIZADA
   FERRAMENTAS DE REDE
   ========================================================= */

:root {

    --bg:
        #080d14;

    --panel:
        #0d1524;

    --panel-2:
        #101a2d;

    --border:
        #1d3048;

    --text:
        #e2e8f0;

    --muted:
        #8da2bd;

    --green:
        #34d399;

    --cyan:
        #06b6d4;

    --purple:
        #a78bfa;

    --blue:
        #60a5fa;

    --orange:
        #fb923c;

    --pink:
        #f472b6;

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}


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

* {

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;
}


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

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(8, 13, 20, 0.94);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid #1b2637;
}


.header-inner {

    max-width:
        1280px;

    margin:
        0 auto;

    padding:
        18px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        inherit;

    text-decoration:
        none;
}


.brand-logo {

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;

    padding:
        5px;

    border:
        1px solid rgba(52, 211, 153, 0.4);

    border-radius:
        12px;

    background:
        #0b1421;
}


.brand h1 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        clamp(18px, 2vw, 25px);

    letter-spacing:
        0.08em;
}


.brand p {

    margin:
        4px 0 0;

    color:
        var(--cyan);

    font-size:
        13px;
}


.back-link {

    color:
        var(--muted);

    text-decoration:
        none;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        12px;
}


.back-link:hover {

    color:
        var(--green);
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.site-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
    background: #020617;
    border-top: 1px solid #1e293b;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 0;
    color: #cbd5e1;
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
}


.site-nav a:hover {

    color:
        var(--cyan);
}


.site-nav a.active {

    color:
        var(--green);

    border-bottom:
        2px solid var(--green);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.tools-container {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        0 auto;

    padding:
        52px 0 80px;
}


/* =========================================================
   INTRODUÇÃO
   ========================================================= */

.page-intro {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin-bottom:
        30px;
}


.intro-icon {

    width:
        70px;

    height:
        70px;

    flex:
        0 0 70px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(52, 211, 153, 0.4);

    border-radius:
        16px;

    background:
        #0b1e26;

    color:
        var(--green);

    font-size:
        28px;
}


.eyebrow {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;
}


.page-intro h2 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        clamp(26px, 3vw, 36px);
}


.page-intro p {

    max-width:
        760px;

    margin:
        10px 0 0;

    color:
        #9eafc6;

    line-height:
        1.7;
}


/* =========================================================
   AVISO
   ========================================================= */

.privacy-notice {

    display:
        flex;

    gap:
        14px;

    padding:
        16px 18px;

    margin-bottom:
        30px;

    border:
        1px solid rgba(6, 182, 212, 0.25);

    border-radius:
        12px;

    background:
        rgba(6, 182, 212, 0.05);

    color:
        #9bdbe5;
}


.privacy-notice > i {

    margin-top:
        2px;

    color:
        var(--cyan);
}


.privacy-notice strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #d8f6fa;
}


.privacy-notice p {

    margin:
        0;

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   GRID
   ========================================================= */

.tools-grid {

    display:
        grid;

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

    gap:
        20px;
}


/* =========================================================
   CARD
   ========================================================= */

.tool-card {

    min-width:
        0;

    padding:
        22px;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #0d1524,
            #0a111d
        );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);

    transition:
        transform 160ms ease,
        border-color 160ms ease;
}


.tool-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #2b4664;
}


.tool-card-featured {

    border-color:
        rgba(52, 211, 153, 0.35);
}


.tool-card-header {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        16px;
}


.tool-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    font-size:
        20px;
}


.tool-icon.green {

    color:
        var(--green);

    background:
        rgba(52, 211, 153, 0.09);

    border:
        1px solid rgba(52, 211, 153, 0.25);
}


.tool-icon.cyan {

    color:
        var(--cyan);

    background:
        rgba(6, 182, 212, 0.09);

    border:
        1px solid rgba(6, 182, 212, 0.25);
}


.tool-icon.purple {

    color:
        var(--purple);

    background:
        rgba(167, 139, 250, 0.09);

    border:
        1px solid rgba(167, 139, 250, 0.25);
}


.tool-icon.blue {

    color:
        var(--blue);

    background:
        rgba(96, 165, 250, 0.09);

    border:
        1px solid rgba(96, 165, 250, 0.25);
}


.tool-icon.orange {

    color:
        var(--orange);

    background:
        rgba(251, 146, 60, 0.09);

    border:
        1px solid rgba(251, 146, 60, 0.25);
}


.tool-icon.pink {

    color:
        var(--pink);

    background:
        rgba(244, 114, 182, 0.09);

    border:
        1px solid rgba(244, 114, 182, 0.25);
}


.tool-category {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.tool-card h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        20px;
}


.tool-description {

    min-height:
        65px;

    margin:
        0 0 18px;

    color:
        #91a3bb;

    font-size:
        13px;

    line-height:
        1.65;
}


/* =========================================================
   INPUT
   ========================================================= */

.input-group {

    margin-bottom:
        12px;
}


.input-group label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #aebbd0;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        700;
}


.input-group input {

    width:
        100%;

    height:
        42px;

    padding:
        0 12px;

    border:
        1px solid #20334b;

    border-radius:
        9px;

    outline:
        none;

    background:
        #060c15;

    color:
        #e2e8f0;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        13px;
}


.input-group input:focus {

    border-color:
        rgba(52, 211, 153, 0.6);

    box-shadow:
        0 0 0 2px rgba(52, 211, 153, 0.08);
}


/* =========================================================
   BOTÃO
   ========================================================= */

.tool-button {

    width:
        100%;

    min-height:
        42px;

    border:
        1px solid rgba(52, 211, 153, 0.35);

    border-radius:
        9px;

    background:
        #123a35;

    color:
        var(--green);

    cursor:
        pointer;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        background 150ms ease,
        border-color 150ms ease;
}


.tool-button:hover {

    background:
        #164941;

    border-color:
        rgba(52, 211, 153, 0.65);
}


.cyan-button {

    color:
        var(--cyan);

    border-color:
        rgba(6, 182, 212, 0.35);

    background:
        #102d38;
}


.cyan-button:hover {

    background:
        #123b49;
}


.purple-button {

    color:
        var(--purple);

    border-color:
        rgba(167, 139, 250, 0.35);

    background:
        #251d3d;
}


.purple-button:hover {

    background:
        #30244d;
}


.blue-button {

    color:
        var(--blue);

    border-color:
        rgba(96, 165, 250, 0.35);

    background:
        #142c48;
}


.blue-button:hover {

    background:
        #19395b;
}


/* =========================================================
   DNS RECORD SELECTOR
   ========================================================= */



/* DNS Lookup — barra horizontal sempre visível */
.record-selector {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #a3a3a3 #18202d;
    -webkit-overflow-scrolling: touch;
}

/* Barra de rolagem em navegadores WebKit */
.record-selector::-webkit-scrollbar {
    height: 7px;
    -webkit-appearance: none;
}

.record-selector::-webkit-scrollbar-track {
    background: #18202d;
    border-radius: 10px;
}

.record-selector::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 10px;
    border: 1px solid #18202d;
}

.record-selector::-webkit-scrollbar-thumb:hover {
    background-color: #c5c5c5;
}

/* Chrome, Edge e Safari */
.record-selector::-webkit-scrollbar {
    height: 6px;
}

.record-selector::-webkit-scrollbar-track {
    background: #18202d;
    border-radius: 10px;
}

.record-selector::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 10px;
}

.record-selector::-webkit-scrollbar-thumb:hover {
    background-color: #c5c5c5;
}


.record-button {

    flex:
        0 0 auto;

    padding:
        6px 10px;

    border:
        1px solid #223650;

    border-radius:
        7px;

    background:
        #0a111d;

    color:
        #8397b1;

    cursor:
        pointer;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        700;
}


.record-button:hover {

    color:
        var(--cyan);
}


.record-button.active {

    border-color:
        rgba(6, 182, 212, 0.55);

    background:
        rgba(6, 182, 212, 0.12);

    color:
        var(--cyan);
}


/* =========================================================
   RESULTADO
   ========================================================= */

.tool-result {

    margin-top:
        14px;

    padding:
        13px;

    border:
        1px solid #1b2b42;

    border-radius:
        10px;

    background:
        #060c15;

    overflow:
        hidden;
}


.result-grid {

    display:
        grid;

    grid-template-columns:
        120px minmax(0, 1fr);

    gap:
        8px 12px;
}


.result-label {

    color:
        #71849d;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        700;
}


.result-value {

    min-width:
        0;

    color:
        #dce7f5;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;

    word-break:
        break-word;
}


.result-highlight {

    color:
        var(--green);

    font-size:
        15px;

    font-weight:
        700;
}


.result-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    max-height:
        250px;

    overflow-y:
        auto;
}


.result-record {

    padding:
        9px;

    border:
        1px solid #182943;

    border-radius:
        8px;

    background:
        #09111e;
}


.result-record strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;
}


.result-record span {

    color:
        #cbd7e6;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;

    word-break:
        break-all;
}


/* =========================================================
   ESTADO DE CARREGAMENTO
   ========================================================= */

.loading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        15px;

    color:
        var(--green);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;
}


/* =========================================================
   ERRO
   ========================================================= */

.result-error {

    color:
        #fda4af;

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   EM DESENVOLVIMENTO
   ========================================================= */

.tool-card-disabled {

    opacity:
        0.68;
}


.tool-card-disabled:hover {

    transform:
        none;

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


.coming-soon {

    display:
        inline-block;

    padding:
        6px 9px;

    border:
        1px solid #2b3d55;

    border-radius:
        6px;

    color:
        #71849d;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


/* =========================================================
   BLOCO DIDÁTICO
   ========================================================= */

.learning-box {

    display:
        flex;

    gap:
        18px;

    margin-top:
        28px;

    padding:
        24px;

    border:
        1px solid rgba(52, 211, 153, 0.25);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(52, 211, 153, 0.06),
            rgba(6, 182, 212, 0.03)
        );
}


.learning-icon {

    width:
        50px;

    height:
        50px;

    flex:
        0 0 50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        var(--green);

    background:
        #0b2926;

    font-size:
        20px;
}


.learning-box h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        20px;
}


.learning-box p {

    max-width:
        800px;

    margin:
        8px 0 0;

    color:
        #91a3bb;

    font-size:
        13px;

    line-height:
        1.7;
}


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

.site-footer {

    padding:
        28px 20px;

    border-top:
        1px solid #182638;

    text-align:
        center;

    color:
        #61738b;

    font-size:
        11px;
}


.site-footer p {

    margin:
        4px;
}


.footer-mono {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 800px) {

    .header-inner {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .back-link {

        align-self:
            flex-end;
    }


    .tools-grid {

        grid-template-columns:
            1fr;
    }


    .tool-description {

        min-height:
            auto;
    }
}


@media (max-width: 600px) {

    .tools-container {

        width:
            calc(100% - 20px);

        padding-top:
            30px;
    }


    .page-intro {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .privacy-notice {

        align-items:
            flex-start;
    }


    .learning-box {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .result-grid {

        grid-template-columns:
            1fr;
    }


    .brand h1 {

        font-size:
            18px;
    }
}

/* =========================================================
   RESPONSIVIDADE MOBILE — FERRAMENTAS DE REDE
   Menu mobile independente do menu horizontal desktop.
   ========================================================= */

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

.mobile-menu-bar {
    display: none;
}

.mobile-menu-button {
    appearance: none;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #1d3048;
    border-radius: 0;
    background: #020617;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
    color: var(--green);
    border-color: rgba(52, 211, 153, 0.45);
    outline: none;
}

.mobile-menu-button-icon {
    font-size: 14px;
}

.site-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
    white-space: nowrap;
}


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

@media (max-width: 767px) {

    .header-inner {
        padding: 14px 14px;
        gap: 10px;
    }

    .brand {
        width: 100%;
        gap: 11px;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .brand h1 {
        font-size: 17px;
        letter-spacing: 0.055em;
    }

    .brand p {
        margin-top: 3px;
        font-size: 12px;
    }

    .back-link {
        align-self: flex-end;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 0;
        font-size: 12px;
    }

    .mobile-menu-bar {
        display: block;
        background: #020617;
        border-top: 1px solid #111d2d;
    }

    .site-nav {
        display: none;
        max-width: none;
        padding: 0 14px;
        border-top: 1px solid #1d3048;
        background: #020617;
        overflow: visible;
    }

    .site-nav.mobile-menu-open {
        display: block;
    }

    .site-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav a {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(29, 48, 72, 0.7);
        white-space: normal;
        font-size: 12px;
    }

    .site-nav a:last-child {
        border-bottom: 0;
    }

    .site-nav a:hover {
        padding-left: 8px;
    }

    .tools-container {
        width: calc(100% - 20px);
        padding: 28px 0 60px;
    }

    .page-intro {
        gap: 15px;
        margin-bottom: 22px;
    }

    .intro-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 14px;
        font-size: 23px;
    }

    .page-intro h2 {
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.15;
    }

    .page-intro p {
        font-size: 14px;
        line-height: 1.65;
    }

    .privacy-notice {
        padding: 14px;
        gap: 10px;
        margin-bottom: 22px;
    }

    .privacy-notice p {
        font-size: 12px;
    }

    .tools-grid {
        gap: 14px;
    }

    .tool-card {
        padding: 18px;
        border-radius: 14px;
    }

    .tool-card-header {
        gap: 10px;
        margin-bottom: 13px;
    }

    .tool-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 10px;
        font-size: 18px;
    }

    .tool-card h3 {
        font-size: 18px;
    }

    .tool-description {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .input-group input {
        height: 44px;
        font-size: 16px;
    }

    .tool-button {
        min-height: 44px;
        font-size: 11px;
    }

    .record-selector {
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    .record-button {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 10px;
    }

    .tool-result {
        padding: 11px;
        overflow-x: auto;
    }

    .result-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .result-label {
        margin-top: 4px;
    }

    .result-value {
        overflow-wrap: anywhere;
    }

    .learning-box {
        gap: 14px;
        margin-top: 22px;
        padding: 18px;
    }

    .learning-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 18px;
    }

    .learning-box h3 {
        font-size: 18px;
    }

    .learning-box p {
        font-size: 13px;
        line-height: 1.65;
    }

    .site-footer {
        padding: 24px 14px;
    }
}


/* =========================================================
   CELULAR MUITO PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    .header-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .brand h1 {
        font-size: 16px;
    }

    .brand p {
        font-size: 11px;
    }

    .site-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tools-container {
        width: calc(100% - 16px);
    }

    .tool-card {
        padding: 15px;
    }

    .privacy-notice {
        padding: 12px;
    }
}


/* =========================================================
   DNS LOOKUP — INTERPRETAÇÃO DOS RESULTADOS
   ========================================================= */
.dns-record-hint,
.dns-record-description,
.dns-ttl-note,
.dns-caveat {
    color: #8397b1;
    font-size: 11px;
    line-height: 1.6;
    margin: 8px 0 12px;
}
.dns-result-heading { margin-bottom: 12px; }
.dns-result-domain { color: #8da2bd; font-size: 11px; overflow-wrap: anywhere; }
.dns-result-type { color: var(--cyan); font-size: 12px; font-weight: 700; margin-top: 5px; }
.dns-record-description { margin: 5px 0 0; }
.dns-status { border: 1px solid #223650; border-radius: 8px; padding: 10px 12px; margin: 10px 0 12px; }
.dns-status strong { display: block; font-size: 12px; }
.dns-status p { color: #a8b7ca; font-size: 11px; line-height: 1.6; margin: 5px 0; }
.dns-status small { color: #71849d; font-size: 10px; overflow-wrap: anywhere; }
.dns-status-success { border-color: rgba(34, 197, 94, .35); }
.dns-status-success strong { color: #4ade80; }
.dns-status-info strong { color: #7dd3fc; }
.dns-status-error { border-color: rgba(248, 113, 113, .35); }
.dns-status-error strong { color: #fca5a5; }
.dns-answer-record { gap: 12px; }
.dns-answer-record > div { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.dns-answer-record > div small { color: #71849d; font-size: 10px; }
.dns-answer-record > span { overflow-wrap: anywhere; word-break: break-word; }
.dns-ttl-note { margin-top: 8px; }
.dns-caveat { border-top: 1px solid #182943; padding-top: 9px; margin-top: 12px; margin-bottom: 0; }


/* =========================================================
   AJUSTE PONTUAL DO CABEÇALHO — ALINHADO AO CAMPO DE BATALHA
   Não altera os estilos das ferramentas nem do DNS Lookup.
   ========================================================= */

.site-header {
    background: rgba(8, 13, 20, 0.94);
    border-bottom: 1px solid #1e293b;
}

.header-inner {
    max-width: 1280px;
    padding: 16px 24px;
    gap: 20px;
}

.brand {
    gap: 14px;
    flex-shrink: 0;
}

.brand-logo {
    width: 54px;
    height: 54px;
}

.brand h1 {
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: 0.045em;
    line-height: 1.25;
}

.brand p {
    font-size: 13px;
    letter-spacing: 0.02em;
}

.site-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    overflow-x: visible;
    background: #020617;
    border-top: 1px solid #1e293b;
}

.site-nav-links {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav-links::-webkit-scrollbar {
    display: none;
}

.site-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 0 11px;
    color: #cbd5e1;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: #06b6d4;
}

.site-nav a.active {
    color: #34d399;
    border-bottom-color: #34d399;
}

.site-nav a i {
    font-size: 12px;
}

@media (max-width: 767px) {
    .header-inner {
        padding: 14px;
        gap: 10px;
    }

    .brand {
        width: 100%;
        gap: 11px;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .brand h1 {
        font-size: 17px;
        letter-spacing: 0.04em;
    }

    .brand p {
        margin-top: 3px;
        font-size: 12px;
    }

    .site-nav {
        padding: 0 14px;
        overflow: visible;
    }

    .site-nav-links {
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
        overflow: visible;
        align-items: stretch;
    }

    .site-nav a {
        display: flex;
        width: 100%;
        min-height: 48px;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(29, 48, 72, 0.7);
        font-size: 12px;
        white-space: normal;
    }

    .site-nav a.active {
        border-bottom-color: rgba(52, 211, 153, 0.45);
        border-left: 2px solid #34d399;
        padding-left: 8px;
    }
}

@media (max-width: 380px) {
    .header-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-nav {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Ajuste tipográfico do menu para aproximar do Campo de Batalha */
.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.site-nav a i {
    font-size: 12px;
    line-height: 1;
}