:root {
    --fi-bg: #f6f2f2;
    --fi-ink: #2f2f3a;
    --fi-muted: #ffffff;
    --fi-border: #d9dbe6;
    --fi-accent: #3b5bdb;
    --fi-accent-dark: 2f49b3;

    /* uma cor paa cada ferramenta */
    --c-comprimir: #2f9e63;
    --c-redimensionar: #3b5bdb;
    --c-converter: #f08c2e;
    --c-pdf: #e5484d;

}

body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    background: #fff;
    color: var(--fi-ink);
}


/* navbar */
.fi-navbar {
    background: #fff;
    border-bottom: 1px solid var(--fi-border);
    padding-block: .6rem;
}
.fi-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -.02em; /*reduzindo o espacamentto entre letras*/
    color: var(--fi-ink);
    text-decoration: none;
}
.fi-brand:hover { color: var(--fi-ink); }
.fi-brand .fi-brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--fi-accent);
    display: grid; place-items: center;
}
.fi-brand-mark-icon{
    object-fit: contain; 
    background: transparent; 
    vertical-align: middle;
}
        .fi-brand .fi-brand-mark svg { width: 20px; height: 20px; stroke: #fff; }
        .fi-brand span.accent { color: var(--fi-accent); }

        .fi-navbar .nav-link {
            font-weight: 700;
            font-size: .88rem;
            text-transform: uppercase;
            color: var(--fi-ink);
            padding: .6rem 1rem;
        }
        .fi-navbar .nav-link:hover,
        .fi-navbar .nav-link.active { color: var(--fi-accent); }

        .fi-login { font-weight: 600; font-size: .9rem; color: var(--fi-ink); text-decoration: none; }
        .fi-login:hover { color: var(--fi-accent); }

        .btn-fi {
            background: var(--fi-accent);
            border-color: var(--fi-accent);
            color: #fff;
            font-weight: 700;
            font-size: .9rem;
            padding: .5rem 1rem;
            border-radius: 10px;
        }
        .btn-fi:hover { background: var(--fi-accent-dark); border-color: var(--fi-accent-dark); color: #fff; }

        /*  HERO  */
        .fi-hero { padding: 3.5rem 0 2.5rem; text-align: center; }
        .fi-hero h1 {
            font-weight: 800;
            font-size: clamp(2rem, 5vw, 3.2rem);
            letter-spacing: -.02em;
        }
        .fi-hero p {
            max-width: 46rem;
            margin: 1rem auto 0;
            font-size: 1.35rem;
            color: var(--fi-ink);
        }

        /*  CARDS DAS FERRAMENTAS  */
        .fi-main{
            background: var(--fi-bg);
            padding-bottom: 4rem;
            overflow-x: hidden;
            max-width: 100%;
        }
        .fi-main iframe {
            max-width: 100%;
        }
        
        .tool-card {
            display: block;
            height: 100%;
            padding: 1.5rem;
            background: #fff;
            border: 1px solid var(--fi-border);
            border-radius: 20px;
            color: var(--fi-ink);
            text-decoration: none;
            transition: border-color .15s, box-shadow .15s;
        }
        .tool-card:hover {
            color: var(--fi-ink);
            border-color: var(--tool-color);
            box-shadow: 0 8px 24px rgba(30, 35, 70, .08);
        }
        .tool-card:focus-visible { outline: 3px solid var(--tool-color); outline-offset: 3px; }

        .tool-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            display: grid; place-items: center;
            background: color-mix(in srgb, var(--tool-color) 14%, white);
            margin-bottom: 1.25rem;
        }
        .tool-icon svg { width: 26px; height: 26px; stroke: var(--tool-color); }

        .tool-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
        .tool-card p  { font-size: .92rem; color: var(--fi-ink); margin: 0; }

        .tool-comprimir    { --tool-color: var(--c-comprimir); }
        .tool-redimensionar{ --tool-color: var(--c-redimensionar); }
        .tool-converter    { --tool-color: var(--c-converter); }
        .tool-pdf          { --tool-color: var(--c-pdf); }

        /*  RODAPÉ  */
        .fi-footer {
            margin-top: 0rem;
            padding: 1.5rem 0;
            border-top: 1px solid var(--fi-border);
            background: #3b5bdb;
            font-size: .88rem;
            color: var(--fi-muted);
        }
        .fi-footer a { color: var(--fi-muted); text-decoration: none; margin-left: 1rem; }
        .fi-footer a:hover { color: var(--fi-border); }