/* ═══════════════════════════════════════════════════════════
   FORNECEDOR NACIONAL 3 — Design System "Selo Nacional"
   Creme + verde-bandeira + tinta + dourado.
   Sensação: registro oficial brasileiro encontra fintech de dados.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Papel */
    --fn3-paper:      #FAF7F2;
    --fn3-paper-2:    #F3EEE4;
    --fn3-paper-card: #FFFFFF;

    /* Tinta */
    --fn3-ink:        #1B1712;
    --fn3-ink-soft:   #5C544A;
    --fn3-ink-faint:  #948A7C;

    /* Verde-bandeira */
    --fn3-green:       #0A5C3E;
    --fn3-green-dark:  #07452E;
    --fn3-green-deep:  #053221;
    --fn3-green-tint:  #E4EFE7;

    /* Selo dourado */
    --fn3-gold:       #B98A2F;
    --fn3-gold-soft:  #F0E3C6;

    /* Carimbo vermelho (alerta / saturado) */
    --fn3-red:        #B3372B;
    --fn3-red-tint:   #F7E4E1;

    /* Linhas */
    --fn3-line:       #E5DDCD;
    --fn3-line-soft:  #EFE9DC;

    /* Tipografia */
    --fn3-font:       'Archivo', system-ui, sans-serif;
    --fn3-mono:       'IBM Plex Mono', ui-monospace, monospace;

    /* Sombra de papel */
    --fn3-shadow:     0 1px 2px rgba(27,23,18,.05), 0 8px 24px rgba(27,23,18,.06);
    --fn3-shadow-lg:  0 2px 4px rgba(27,23,18,.06), 0 20px 48px rgba(27,23,18,.12);
}

#fn3-landing-root, #fn3-app-root {
    font-family: var(--fn3-font);
    color: var(--fn3-ink);
    background: var(--fn3-paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#fn3-landing-root *, #fn3-landing-root *::before, #fn3-landing-root *::after,
#fn3-app-root *, #fn3-app-root *::before, #fn3-app-root *::after {
    box-sizing: border-box;
}
/* Reset de margens/paddings só para elementos SEM classe de componente:
   o seletor com ID pesa mais que .fn3-*, então excluí-los aqui é o que
   permite que o padding dos componentes (botões, badges, chips…) exista. */
#fn3-landing-root *:not([class*="fn3-"]),
#fn3-app-root *:not([class*="fn3-"]) {
    margin: 0;
    padding: 0;
}

/* Textura sutil de papel */
.fn3-paper-texture {
    background-color: var(--fn3-paper);
    background-image:
        repeating-linear-gradient(0deg, rgba(27,23,18,.014) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 20% 0%, rgba(185,138,47,.05), transparent 55%);
}

/* ─── Tipografia ─── */
.fn3-display {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--fn3-ink);
}
.fn3-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fn3-green);
}
.fn3-mono { font-family: var(--fn3-mono); }

/* Palavra com marcação de caneta verde */
.fn3-mark {
    background-image: linear-gradient(180deg, transparent 62%, rgba(10,92,62,.22) 62%);
    padding: 0 2px;
}
.fn3-mark-gold {
    background-image: linear-gradient(180deg, transparent 62%, rgba(185,138,47,.32) 62%);
    padding: 0 2px;
}

/* ─── Botões ─── */
.fn3-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.2;
    font-family: var(--fn3-font);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 15px 30px;
    cursor: pointer;
    text-decoration: none !important;
    border: none;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}
.fn3-btn:active { transform: translateY(1px); }

.fn3-btn-primary {
    background: var(--fn3-green);
    color: #FDFCF9 !important;
    box-shadow: 0 2px 0 var(--fn3-green-deep), 0 10px 26px rgba(10,92,62,.28);
}
.fn3-btn-primary:hover {
    background: var(--fn3-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--fn3-green-deep), 0 14px 30px rgba(10,92,62,.34);
}

.fn3-btn-ink {
    background: var(--fn3-ink);
    color: var(--fn3-paper) !important;
    box-shadow: 0 2px 0 #000;
}
.fn3-btn-ink:hover { background: #2A241C; transform: translateY(-1px); }

.fn3-btn-ghost {
    background: transparent;
    color: var(--fn3-ink) !important;
    border: 1.5px solid var(--fn3-line);
}
.fn3-btn-ghost:hover { border-color: var(--fn3-green); color: var(--fn3-green) !important; }

.fn3-btn-gold {
    background: transparent;
    color: var(--fn3-gold) !important;
    border: 1.5px solid var(--fn3-gold);
}
.fn3-btn-gold:hover { background: rgba(185,138,47,.08); }

.fn3-btn-sm { padding: 10px 18px; font-size: 12.5px; }

/* ─── Cards / Ficha ─── */
.fn3-card {
    background: var(--fn3-paper-card);
    border: 1px solid var(--fn3-line);
    border-radius: 14px;
    box-shadow: var(--fn3-shadow);
}
.fn3-card-hover { transition: transform .18s ease, box-shadow .22s ease, border-color .2s; }
.fn3-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--fn3-shadow-lg);
    border-color: #D8CFBB;
}

/* Linha de ficha cadastral (label pontilhado + valor) */
.fn3-ficha-row {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--fn3-line);
    font-size: 13.5px;
}
.fn3-ficha-row:last-child { border-bottom: none; }
.fn3-ficha-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fn3-ink-faint);
    flex-shrink: 0;
    min-width: 92px;
}
.fn3-ficha-value { color: var(--fn3-ink); font-weight: 600; }

/* ─── Carimbos ─── */
@keyframes fn3-stamp-in {
    0%   { opacity: 0; transform: scale(1.9) rotate(-14deg); }
    60%  { opacity: 1; transform: scale(.94) rotate(-7deg); }
    100% { opacity: 1; transform: scale(1) rotate(-7deg); }
}
.fn3-carimbo {
    margin: 0;
    display: inline-block;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 2.5px solid currentColor;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px var(--fn3-paper-card), inset 0 0 0 3px currentColor;
    transform: rotate(-7deg);
    user-select: none;
    line-height: 1.5;
}
.fn3-carimbo-anim { animation: fn3-stamp-in .5s cubic-bezier(.2,1.4,.4,1) both; }
.fn3-carimbo-green { color: var(--fn3-green); }
.fn3-carimbo-red   { color: var(--fn3-red); }
.fn3-carimbo-gold  { color: var(--fn3-gold); }
.fn3-carimbo-ink   { color: var(--fn3-ink-faint); }

/* ─── Badges ─── */
.fn3-badge {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.fn3-badge-green { background: var(--fn3-green-tint); color: var(--fn3-green); }
.fn3-badge-gold  { background: var(--fn3-gold-soft);  color: #8A6620; }
.fn3-badge-red   { background: var(--fn3-red-tint);   color: var(--fn3-red); }
.fn3-badge-ink   { background: var(--fn3-paper-2);    color: var(--fn3-ink-soft); }

/* ─── Inputs ─── */
.fn3-input, .fn3-select, .fn3-textarea {
    margin: 0;
    width: 100%;
    font-family: var(--fn3-font);
    font-size: 14.5px;
    color: var(--fn3-ink);
    background: var(--fn3-paper-card);
    border: 1.5px solid var(--fn3-line);
    border-radius: 10px;
    padding: 12px 15px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.fn3-input:focus, .fn3-select:focus, .fn3-textarea:focus {
    border-color: var(--fn3-green);
    box-shadow: 0 0 0 3px rgba(10,92,62,.12);
}
.fn3-input::placeholder, .fn3-textarea::placeholder { color: var(--fn3-ink-faint); }
.fn3-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fn3-ink-soft);
    margin-bottom: 6px;
}

/* ─── Animações ─── */
@keyframes fn3-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fn3-fade-up { opacity: 0; animation: fn3-fade-up .6s ease-out forwards; }
.fn3-stagger > *:nth-child(1) { animation-delay: 0s; }
.fn3-stagger > *:nth-child(2) { animation-delay: .1s; }
.fn3-stagger > *:nth-child(3) { animation-delay: .2s; }
.fn3-stagger > *:nth-child(4) { animation-delay: .3s; }

@keyframes fn3-spin { to { transform: rotate(360deg); } }
.fn3-spinner {
    width: 22px; height: 22px;
    border: 2.5px solid var(--fn3-line);
    border-top-color: var(--fn3-green);
    border-radius: 50%;
    animation: fn3-spin .7s linear infinite;
}

/* Selo circular girando devagar (elemento de marca) */
@keyframes fn3-selo-rotate { to { transform: rotate(360deg); } }
.fn3-selo-rotating { animation: fn3-selo-rotate 24s linear infinite; transform-origin: center; }

/* ─── Modal ─── */
.fn3-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(27,23,18,.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fn3-overlay-in .2s ease;
}
@keyframes fn3-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.fn3-modal {
    position: relative;
    background: var(--fn3-paper);
    border: 1px solid var(--fn3-line);
    border-radius: 18px;
    box-shadow: var(--fn3-shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    animation: fn3-fade-up .3s ease-out;
}

/* ─── Chips de nicho ─── */
.fn3-chip {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--fn3-line);
    background: var(--fn3-paper-card);
    color: var(--fn3-ink-soft);
    font-family: var(--fn3-font);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .12s;
}
.fn3-chip:hover { border-color: var(--fn3-green); color: var(--fn3-green); transform: translateY(-1px); }
.fn3-chip.active {
    background: var(--fn3-green);
    border-color: var(--fn3-green);
    color: #FDFCF9;
    box-shadow: 0 6px 16px rgba(10,92,62,.25);
}

/* ─── Imagem de produto (marketplace clean) ─── */
.fn3-prod-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid var(--fn3-line-soft);
    overflow: hidden;
}
.fn3-prod-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .25s ease;
}
.fn3-card-hover:hover .fn3-prod-img img { transform: scale(1.05); }

/* ─── Clamp de 2 linhas ─── */
.fn3-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Nav do app ─── */
.fn3-nav-item {
    margin: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    color: var(--fn3-ink-soft);
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    border: none; background: transparent;
    font-family: var(--fn3-font);
    width: 100%;
    text-align: left;
}
.fn3-nav-item:hover { background: var(--fn3-paper-2); color: var(--fn3-ink); }
.fn3-nav-item.active {
    background: var(--fn3-green);
    color: #FDFCF9;
    box-shadow: 0 6px 16px rgba(10,92,62,.25);
}

/* Blur de conteúdo bloqueado (plano free) */
.fn3-locked {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
}

/* ─── Scrollbar discreta ─── */
#fn3-app-root ::-webkit-scrollbar { width: 10px; height: 10px; }
#fn3-app-root ::-webkit-scrollbar-thumb { background: #D8CFBB; border-radius: 6px; }
#fn3-app-root ::-webkit-scrollbar-track { background: transparent; }

/* ─── Responsivo ─── */
@media (max-width: 768px) {
    .fn3-btn { padding: 13px 22px; font-size: 13px; }
    .fn3-modal { padding: 24px; }
    .fn3-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .fn3-hide-desktop { display: none !important; }
}