/* ══════════════════════════════════════════════════
   WORKFLOWGEO — PUBLIC BASE  (tipo_sistema 3)
   Styles for public pages (about, contact, terms, faq, privacy)
   that extend maplibre_public_base.html.
   Uses wfg-* prefix.
   ══════════════════════════════════════════════════ */

/* ── Reset / Base ──────────────────────────────── */

:root {
    --bg: #0b1929;
    --surface: #0f2035;
    --card: #122540;
    --border: rgba(40, 114, 196, 0.2);
    --accent: #2872c4;
    --accent2: #3db843;
    --green: #3db843;
    --danger: #e74c3c;
    --text: #e8edf5;
    --muted: #7a8fa6;
    --navy: #1a3461;
}

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

body {
    background: #0a1628;
    color: #c8d6e5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content grows to push footer to the bottom */
body > .wfg-footer { flex-shrink: 0; }

a { color: #2872c4; text-decoration: none; transition: color .2s; }
a:hover { color: #3d9bff; }


/* ── Topbar (clean navbar) ────────────────────── */

.topbar-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(10,22,40,.92);
    border-bottom: 1px solid rgba(40,114,196,.15);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-clean .topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.topbar-clean .topbar-brand svg {
    stroke: #2872c4;
}

.topbar-clean .brand-workflow {
    font-size: 20px;
    font-weight: 800;
    color: white;
    letter-spacing: -.3px;
}

.topbar-clean .brand-geo {
    font-size: 20px;
    font-weight: 800;
    color: #3db843;
    letter-spacing: -.3px;
}

/* ── Topbar auth buttons ──────────────────────── */

.topbar-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}


.btn-signin {
    padding: 7px 18px;
    background: transparent;
    color: var(--accent);

    border: 1px solid rgba(0, 212, 255, .35);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;

    white-space: nowrap;

}

.btn-signin:hover {
    background: rgba(0, 212, 255, .1);
}

.btn-signup {

    padding: 7px 18px;
    background: var(--accent);
    color: #000;

    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;

}

.btn-signup:hover {
    background: #fff;
}


/* ── Page Content Wrapper ─────────────────────── */

.wfg-public-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 32px 64px;
}

.wfg-public-content h1,
.wfg-public-content h2,
.wfg-public-content h3,
.wfg-public-content h4 {
    color: #e8edf5;
}

.wfg-public-content h1 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 24px;
}

.wfg-public-content p,
.wfg-public-content li {
    color: #8fa3ba;
    line-height: 1.75;
}

.wfg-public-content img {
    max-width: 100%;
    border-radius: 10px;
}

/* ── Bootstrap-like container helpers ─────────── */

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-lg-12, .col-sm-8, .col-sm-12, .col-sm-2,
.col-md-12, .col-md-4, .col-xl-4, .col-lg-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

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

.justify-content-center { justify-content: center; }

/* ── Section spacing ──────────────────────────── */

section {
    padding-top: 32px;
    padding-bottom: 32px;
}

section.container {
    margin-top: 24px;
}

/* ── Contact page boxes ───────────────────────── */

.icon-box {
    background: rgba(18,37,64,.6);
    border: 1px solid rgba(40,114,196,.2);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    transition: border-color .2s, transform .2s;
    margin-bottom: 16px;
}

.icon-box:hover {
    border-color: rgba(40,114,196,.5);
    transform: translateY(-2px);
}

.icon-box .icon-styled {
    font-size: 36px;
    color: #2872c4;
    margin-bottom: 12px;
}

.icon-box p {
    color: #8fa3ba;
    font-size: 14px;
}

.icon-box p a {
    color: #8fa3ba;
}

.icon-box p a:hover {
    color: #2872c4;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .wfg-public-content {
        padding: 32px 20px 48px;
    }

    .topbar-clean {
        padding: 12px 16px;
    }

    .topbar-auth {
        gap: 6px;
    }

    .topbar-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .row {
        flex-direction: column;
    }

    .col-sm-8 {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .topbar-btn {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }
}