/* =========================================================
   Robson Pontes — Portfólio · clean & editorial
   Tipografia: Fraunces (display) + Space Grotesk (texto)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* Paleta Solutta — azul royal + roxo sobre branco */
    --paper:      #ffffff;
    --paper-2:    #f4f7fd;
    --card:       #ffffff;
    --ink:        #0f1b3d;
    --ink-soft:   #4b5571;
    --ink-faint:  #8b93a9;
    --accent:     #2456e6;
    --accent-2:   #6d28d9;
    --accent-soft:#e7edfe;
    --line:       #e4e9f4;
    --line-soft:  #eef2fa;
    --grad:       linear-gradient(120deg, #2456e6 0%, #4b46e5 45%, #7c3aed 100%);
    --shadow-sm:  0 1px 2px rgba(15, 27, 61, 0.06);
    --shadow-md:  0 10px 30px -12px rgba(36, 86, 230, 0.20);
    --shadow-lg:  0 24px 60px -20px rgba(36, 86, 230, 0.28);
}

.brand-gradient { background: var(--grad); }

/* Faixa azul do hero (estilo Solutta) */
.hero-banner {
    background:
        radial-gradient(60% 80% at 88% 8%, rgba(124, 58, 237, 0.45), transparent 60%),
        radial-gradient(50% 60% at 100% 100%, rgba(125, 211, 252, 0.20), transparent 55%),
        linear-gradient(105deg, #142a86 0%, #1d3fb8 48%, #2456e6 100%);
}
.hero-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1px, transparent 0);
    background-size: 26px 26px;
}
.hero-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.85), transparent);
}
.text-gradient {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

* { scroll-behavior: smooth; }

body {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Display serifado, editorial */
.font-display {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
}

h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Texto monoespaçado discreto (labels) */
.mono { font-family: 'Space Grotesk', monospace; font-feature-settings: "tnum"; }

/* Ocultar scrollbar horizontal no menu mobile */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Scrollbar vertical discreta */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #c2ccdf; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---- Animações ---- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.24s; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 22s linear infinite; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
.float-y { animation: float-y 5s ease-in-out infinite; }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cursor { animation: blink 1.05s steps(2, start) infinite; }

/* ---- Navegação ---- */
.nav-btn {
    color: var(--ink-soft);
    position: relative;
    border-color: transparent;
}
.nav-btn:not(.active):hover { color: var(--ink); }
.nav-btn.active { color: var(--ink); font-weight: 600; }
.nav-btn.active::after,
.nav-btn:hover::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.nav-btn:not(.active)::after { opacity: 0.35; }

/* ---- Cartões ---- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: #d9d0bf;
}

/* ---- Chips / tags ---- */
.chip {
    display: inline-flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
    transition: all 0.18s ease;
}
.chip:hover {
    color: var(--accent-2);
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
/* Chip de IA — destaque permanente */
.chip-ai {
    color: var(--accent);
    border-color: rgba(36, 86, 230, 0.35);
    background: var(--accent-soft);
    font-weight: 600;
}
.chip-ai:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}

/* ---- Rótulo "eyebrow" numerado das seções ---- */
.eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ---- Linha do tempo ---- */
.timeline-dot { box-shadow: 0 0 0 4px var(--paper); }

/* ---- Texto destacado (marker) ---- */
.mark {
    background: linear-gradient(transparent 62%, var(--accent-soft) 62%);
    padding: 0 2px;
}

/* ---- Fundo pontilhado decorativo ---- */
.dotgrid {
    background-image: radial-gradient(circle at 1px 1px, rgba(27, 26, 24, 0.10) 1px, transparent 0);
    background-size: 22px 22px;
}

/* ---- Link sublinhado animado ---- */
.link-underline {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
}
.link-underline:hover { background-size: 100% 2px; }