/* ═══════════════════════════════════════════════
   fernando_ · Bonito que funciona.
   Sistema verde-menta — tokens oficiais da marca
   Todos os pares de contraste verificados em WCAG AA.
   ═══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
    --bg: #010f0c;          /* verde-preto profundo, dominante */
    --bg-2: #04241e;        /* elevado: seção alternada, gradiente */
    --surface: #0a1711;     /* cards */
    --surface-2: #10231b;   /* chips, avatares, superfície interna */
    --text: #ffffff;        /* 19,54:1 */
    --muted: #c8d5cd;       /* apoio — 12,89:1 */
    --muted-2: #c8d5cd;
    --dim: #7d8f86;         /* rebaixado — 5,72:1 (era 2,79:1) */
    --dim-2: #7d8f86;       /* mantido como alias; não usar em texto novo */
    --serif-muted: #8fa39a; /* última linha da headline — 7,32:1 */
    --teal: #2fd6a6;        /* acento secundário: glow, hover, gradiente */
    --accent-2: #2fd6a6;
    --accent: #9ff690;      /* mint — destaque pontual, CTA, cursor */
    --accent-ink: #010f0c;  /* texto sobre mint — 14,94:1 */
    --accent-dark: #14503c; /* texto rebaixado sobre mint — 7,16:1 */
    --amber: #e8b96a;       /* semântico: aviso de conceito fictício */
    --line: rgba(255, 255, 255, .12);
    --line-soft: rgba(255, 255, 255, .08);

    --font-display: "Lora", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --wall: clamp(24px, 8.333vw, 120px);
    --radius-card: 20px;
    --radius-img: 24px;
}

/* Tema claro — re-escopo por seção.
   Sobre claro o destaque é VERDE, nunca mint (mint sobre branco = 1,31:1).
   Dois verdes: #409d3e só em elemento grande/UI, #2f7a2e em texto pequeno. */
.theme-light {
    --bg: #f7f7f7;
    --surface: #ffffff;
    --surface-2: #ececec;
    --text: #010f0c;          /* 17,14:1 */
    --muted: #4f5c55;         /* 5,62:1 sobre branco */
    --muted-2: #4f5c55;
    --dim: #5c6b63;           /* 5,24:1 */
    --serif-muted: #5c6b63;
    --accent: #409d3e;        /* elemento grande e componente de interface */
    --accent-2: #2f7a2e;      /* texto pequeno — 5,32:1 sobre branco */
    --accent-ink: #ffffff;
    --line: rgba(10, 23, 17, .14);
    --line-soft: rgba(10, 23, 17, .08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: #010f0c;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Parede de alinhamento: 1200px de conteúdo, 120px de margem em 1440 ── */
.wrap { width: min(1200px, 100% - 2 * var(--wall)); margin-inline: auto; }
@media (max-width: 767px) { :root { --wall: 24px; } }
@media (max-width: 359px) { :root { --wall: 16px; } }

section { background: var(--bg); color: var(--text); }

/* ── Tipografia utilitária ── */
.mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; }
.h-display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    color: var(--text);
    letter-spacing: -.01em;
}
.h-display .alt {
    display: block;
    font-weight: 400;
    font-style: italic;
    color: var(--serif-muted);
}
.h-hero    { font-size: clamp(42px, 6.6vw, 88px); }
.h-page    { font-size: clamp(38px, 6vw, 84px); }
.h-cta     { font-size: clamp(36px, 5.4vw, 72px); }
.h-section { font-size: clamp(32px, 4.8vw, 64px); }

.lead { font-size: clamp(17px, 1.6vw, 22px); color: var(--muted); max-width: 46em; }
.sub  { font-size: clamp(16px, 1.5vw, 20px); color: var(--muted); max-width: 40em; }

/* ── Badge de seção (pill) ── */
.badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    white-space: nowrap;
}
/* ── Ilha escura dentro de seção clara ──
   Badge, botão escuro e card em destaque têm fundo escuro mesmo vivendo numa
   seção clara. Se herdassem os tokens do modo claro, o verde #409d3e e o texto
   #010f0c cairiam sobre fundo escuro e o contraste desabaria. Aqui o conjunto
   inteiro volta ao modo escuro, não só o acento. */
.theme-light .badge,
.theme-light .btn-dark {
    --text: #ffffff;
    --muted: #c8d5cd;
    --muted-2: #c8d5cd;
    --dim: #7d8f86;
    --accent: #9ff690;
    --accent-2: #9ff690;
    --accent-ink: #010f0c;
    --line: rgba(255, 255, 255, .12);
    --line-soft: rgba(255, 255, 255, .08);
}
.theme-light .badge { background: #010f0c; border-color: #010f0c; color: var(--accent); }

/* ── Botões ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { box-shadow: 0 8px 30px rgba(159, 246, 144, .28); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-dark { background: #010f0c; color: var(--accent); }
.btn-lg { height: 60px; padding: 0 42px; font-size: 16px; }
.btn-md { height: 50px; padding: 0 25px; font-size: 13px; }
.btn-nav { height: 46px; padding: 0 26px; font-size: 14px; }
.btn-xl { height: 64px; padding: 0 42px; font-size: 17px; }
.btn-ghost .dot {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--teal);
    display: grid; place-items: center;
    /* tinta escura sobre o teal: 10,50:1 (com branco dava 1,86:1) */
    color: #010f0c; font-family: var(--font-body); font-weight: 700; font-size: 18px;
    margin-right: -22px;
}

.link-mono {
    font-family: var(--font-mono); font-weight: 700;
    font-size: 14px; letter-spacing: .04em; color: var(--accent);
    display: inline-block;
    transition: transform .2s ease;
}
.link-mono:hover { transform: translateX(4px); }
.theme-light .link-mono { color: var(--accent-2); }

/* ── Nav ── */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(1, 15, 12, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
    height: 80px;
    display: flex; align-items: center; gap: 40px;
}
.logo {
    font-family: var(--font-mono); font-weight: 700;
    font-size: 24px; color: #ffffff;
}
.logo em { font-style: normal; color: #9ff690; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Gap e recuo fluidos: com o item SITE EXPRESS a régua fixa de 44px + 96px
   estourava a largura entre 900px e 1100px. */
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 44px); margin-left: clamp(24px, 5vw, 96px); }
.nav-links a {
    position: relative;
    font-family: var(--font-mono); font-weight: 700;
    font-size: 14px; letter-spacing: .05em; color: #ffffff;
    padding: 8px 0;
}
.nav-links a:hover { color: #9ff690; }
.nav-links a.active { color: #9ff690; }
.nav-links a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: #9ff690;
}
.nav-cta { margin-left: auto; }
.nav-burger {
    display: none;
    margin-left: auto;
    height: 46px; padding: 0 20px;
    border-radius: 23px;
    background: #0a1711; color: #ffffff;
    border: 1px solid var(--line);
    font-family: var(--font-mono); font-weight: 700; font-size: 15px;
    cursor: pointer;
}
@media (max-width: 1080px) {
    .nav-links, .nav-cta { display: none; }
    .nav-burger { display: inline-flex; align-items: center; gap: 10px; }
    /* Painel único e opaco: links + CTA no mesmo container, posicionados pelo
       fluxo. A versão anterior posicionava o CTA por calc() fixo em px, o que
       o deixava flutuando sobre o hero sem fundo e quebrava a cada item novo. */
    .nav.open .nav-panel {
        display: flex; flex-direction: column; gap: 4px;
        position: absolute; left: 0; right: 0; top: 80px;
        padding: 12px var(--wall) 24px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 48px rgba(1, 15, 12, .6);
    }
    .nav.open .nav-links {
        display: flex; flex-direction: column; gap: 2px;
        margin: 0;
    }
    .nav.open .nav-links a { padding: 14px 0; font-size: 16px; }
    .nav.open .nav-cta { display: flex; margin: 14px 0 0; width: 100%; }
    .nav.open { background: var(--bg); }
}
.nav-panel { display: contents; }

/* ── Hero ── */
.hero {
    position: relative;
    background: linear-gradient(180deg, #010f0c 0%, #04241e 100%);
    overflow: hidden;
    padding: clamp(80px, 12vh, 120px) 0 clamp(90px, 12vh, 120px);
}
.hero-grid {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255,.03) 0 1px, transparent 1px 120px);
    pointer-events: none;
}
.hero-glow {
    position: absolute;
    width: clamp(400px, 53vw, 760px); height: clamp(400px, 53vw, 760px);
    right: -6%; top: 6%;
    border-radius: 50%;
    /* Teal é coadjuvante: glow sempre em opacidade baixa (regra da marca ≤12%). */
    background: radial-gradient(circle, rgba(47, 214, 166, .12) 0%, rgba(47, 214, 166, 0) 68%);
    pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-badge {
    display: inline-flex; align-items: center;
    height: 46px; padding: 0 26px;
    border-radius: 23px;
    background: #0a1711; border: 1px solid var(--line);
    font-family: var(--font-mono); font-weight: 700; font-size: clamp(12px, 1vw, 15px);
    letter-spacing: .02em; color: #ffffff;
    margin-bottom: clamp(40px, 6vh, 74px);
}
.hero-badge b { color: #9ff690; font-weight: 700; margin-left: 8px; }
.hero-badge b::after { content: "_"; animation: blink 1.1s steps(1) infinite; }
.hero h1 { margin-bottom: clamp(28px, 4.5vh, 48px); }
.hero .lead { margin-bottom: clamp(40px, 7vh, 96px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 30px); }

/* ── Marquee ── */
.marquee {
    background: #04241e;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    padding: 36px 0;
}
.marquee-track {
    display: flex; gap: 70px; width: max-content;
    animation: marquee 28s linear infinite;
}
.marquee span {
    font-family: var(--font-mono); font-weight: 700;
    font-size: 19px; letter-spacing: .02em;
    color: #2fd6a6; white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Cabeçalho de seção ── */
.sec { padding: clamp(72px, 9vw, 120px) 0; }
.sec-head { margin-bottom: clamp(44px, 6vw, 100px); }
.sec-head .badge { margin-bottom: clamp(32px, 5vw, 80px); }
.sec-head .ref {
    font-family: var(--font-mono); font-weight: 700; font-size: 16px;
    color: var(--dim-2); margin-left: 20px; letter-spacing: .04em;
}
.theme-light .sec-head .ref { color: var(--dim); }
/* No mobile o REF:// quebrava no meio da string e caía por cima da headline.
   Abaixo de 700px ele vai para a própria linha, sob o badge. */
@media (max-width: 700px) {
    .sec-head .ref { display: block; margin: 16px 0 0; white-space: nowrap; }
    .sec-head .badge { margin-bottom: 0; }
    .sec-head > .rv:first-child { margin-bottom: clamp(28px, 5vw, 60px); }
}
.sec-head .sub { margin-top: clamp(24px, 3vw, 40px); }

/* ── Pilares ── */
.pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pilar-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 30px;
    min-height: 236px;
    transition: transform .3s ease, border-color .3s ease;
}
.pilar-card:hover { transform: translateY(-4px); border-color: rgba(159, 246, 144,.4); }
.pilar-card .cursor { font-family: var(--font-mono); font-weight: 700; font-size: 34px; color: var(--accent); line-height: 1; }
.pilar-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; margin: 22px 0 14px; }
.pilar-card p { font-size: 16px; color: var(--muted); }

.pilares-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}
.card-metrics {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
}
.card-metrics .tag { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--accent); letter-spacing: .04em; }
.card-metrics h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; margin: 14px 0 12px; }
.card-metrics p { font-size: 15px; color: var(--muted); max-width: 30em; }
.metrics { display: grid; align-content: center; gap: 22px; min-width: 210px; }
.metric { display: flex; align-items: baseline; gap: 18px; font-size: 15px; }
.metric .k { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--dim); width: 34px; }
.metric .v { font-weight: 700; min-width: 52px; }
.metric .s { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); }
.card-highlight {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-card);
    padding: 32px;
    display: flex; flex-direction: column;
}
.card-highlight h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; }
.card-highlight p { font-size: 16px; color: #14503c; margin-top: 16px; max-width: 32em; }
.card-highlight a {
    margin-top: auto; padding-top: 24px;
    font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .04em;
    color: var(--accent-ink);
}
.card-highlight a:hover { text-decoration: underline; }

/* ── Sobre ── */
.sobre-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
}
.sobre-foto {
    border-radius: var(--radius-img);
    overflow: hidden;
    aspect-ratio: 380 / 520;
}
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre-body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); }
.sobre-role {
    font-family: var(--font-mono); font-weight: 700; font-size: 16px;
    letter-spacing: .1em; color: var(--accent-2);
    margin: 18px 0 28px;
}
.sobre-body > p { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 34em; }
.sobre-stats {
    display: flex; flex-wrap: wrap;
    gap: clamp(28px, 4vw, 64px);
    margin: clamp(32px, 4vw, 56px) 0;
}
.stat b { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.2vw, 46px); display: block; }
.stat span { font-size: 15px; color: var(--muted); }

/* ── Grid de cards de portfólio (LP) ── */
.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.work-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    min-height: 245px;
    display: flex; flex-direction: column;
    transition: transform .3s ease, border-color .3s ease;
}
.work-card:hover { transform: translateY(-4px); border-color: rgba(47, 214, 166, .5); }
.work-card .tag { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent-2); }
.work-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 10px 0 14px; }
.work-card p { font-size: 16px; color: var(--muted); }
.work-card .link-mono { margin-top: auto; padding-top: 20px; }

/* ── Conceitos (LP, light) ── */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.concepts-grid .wide-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.concept-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    min-height: 240px;
    display: flex; flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}
.concept-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10, 23, 17, .10); }
.concept-head { display: flex; gap: 20px; align-items: flex-start; }
.concept-swatch {
    width: 64px; height: 64px; flex: none;
    border-radius: 16px;
    border: 1px solid var(--line);
    display: grid; place-items: center;
}
.concept-swatch i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.concept-head .tag { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent-2); }
.concept-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-top: 6px; }
.concept-card > p { margin-top: 22px; font-size: 16px; color: var(--muted); }
.concept-card .link-mono { margin-top: auto; padding-top: 22px; }

/* ── Depoimentos ── */
.depo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.depo-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 30px;
    min-height: 320px;
    display: flex; flex-direction: column;
}
.depo-card .stars { color: #ffc83f; font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.depo-card blockquote { margin: 26px 0; font-size: 18px; line-height: 1.55; color: var(--muted-2); }
.depo-author { margin-top: auto; display: flex; gap: 16px; align-items: center; }
.depo-author .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); flex: none; }
.depo-author b { display: block; font-size: 16px; }
.depo-author span { font-size: 14px; color: var(--muted); }

/* ── Serviços · índice + painel ──
   Substitui os quatro cards iguais em linha, que liam como tabela de preço de
   SaaS. Aqui a seção respira: lista à esquerda, um serviço por vez à direita.
   No mobile o índice some e os quatro painéis aparecem inteiros, empilhados —
   sem clique obrigatório para ler o que está sendo vendido. */
.split {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.idx { display: grid; gap: 0; border-top: 1px solid var(--line); align-content: start; }
.idx-item {
    display: flex; align-items: baseline; gap: 16px;
    width: 100%; padding: clamp(16px, 1.8vw, 22px) 4px;
    border: 0; border-bottom: 1px solid var(--line);
    background: none; text-align: left; cursor: pointer;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(18px, 1.9vw, 24px); color: var(--muted);
    transition: color .25s ease, padding-left .25s ease;
}
.idx-n {
    font-family: var(--font-mono); font-weight: 700; font-size: 11px;
    letter-spacing: .14em; color: var(--dim); flex: none;
}
.idx-item:hover { color: var(--text); padding-left: 10px; }
.idx-item.on { color: var(--text); }
.idx-item.on .idx-n { color: var(--accent-2); }
.idx-note {
    font-size: 13.5px; color: var(--dim); line-height: 1.7;
    margin-top: 24px; max-width: 26em;
}

.panels { position: relative; }
.pn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: clamp(28px, 3.4vw, 44px);
}
.pn[hidden] { display: none; }
/* a animação só entra na troca de aba, nunca no carregamento: assim não há
   risco de a seção aparecer meio transparente em quem chega rolando */
.pn.anim { animation: pn-in .35s ease both; }
@keyframes pn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pn.anim { animation: none; } }

.pn-k { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: .2em; color: var(--accent-2); }
.pn h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); margin-top: 16px; }
.pn-d { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); margin-top: 16px; line-height: 1.7; max-width: 46em; }
.pn-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
    margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.pn-grid b { font-size: 14.5px; display: block; }
.pn-grid span { font-size: 13px; color: var(--muted); display: block; margin-top: 3px; }
.pn-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.pn-foot > span { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; color: var(--dim); }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .idx [role="tab"] { display: none; }
    .idx { border-top: 0; }
    .idx-note { margin: 0 0 8px; max-width: none; }
    .panels { display: grid; gap: 18px; }
    /* no mobile todo painel aparece: ler os quatro não pode depender de clique */
    .pn[hidden] { display: block; }
    .pn.anim { animation: none; }
}
@media (max-width: 560px) {
    .pn-grid { grid-template-columns: 1fr; gap: 14px; }
    .pn-foot .btn { width: 100%; }
}

/* ── FAQ ── */
.faq-list { display: grid; gap: 22px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 24px 30px;
    font-weight: 700; font-size: 19px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; font-size: 26px; font-weight: 400; color: var(--muted);
    transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 30px 26px; font-size: 16px; color: var(--muted); max-width: 60em; }
.faq-cta a { color: var(--accent); }

/* ── CTA final + Footer ── */
.cta-footer {
    background: linear-gradient(180deg, #010f0c 0%, #04241e 100%);
    padding-top: clamp(90px, 12vw, 140px);
}
.cta-footer .btn { margin-top: clamp(44px, 6vw, 90px); }
.footer-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .10); margin: clamp(64px, 8vw, 116px) 0 0; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding: clamp(48px, 6vw, 70px) 0 0;
}
.footer-brand .logo { font-size: 24px; }
.footer-brand p { font-family: var(--font-display); font-style: italic; font-size: 16px; color: #8fa39a; margin-top: 12px; }
.footer-col h3 {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    letter-spacing: .08em; color: #7d8f86; margin-bottom: 22px;
}
.footer-col ul { display: grid; gap: 14px; }
.footer-col a, .footer-col li { font-size: 15px; color: #c8d5cd; }
.footer-col a:hover { color: #9ff690; }
.footer-copy { padding: clamp(48px, 6vw, 80px) 0 40px; font-size: 15px; color: #7d8f86; }

/* ── Página Portfólio ── */
.page-head { padding: clamp(64px, 9vw, 100px) 0 clamp(48px, 6vw, 60px); }
.page-head .badge { margin-bottom: clamp(36px, 6vw, 80px); }
.page-head .lead { margin-top: clamp(24px, 4vw, 40px); }

.featured-case {
    display: grid;
    grid-template-columns: 680fr 520fr;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-img);
    overflow: hidden;
    margin-bottom: 80px;
}
.featured-case .fc-img { min-height: 320px; }
.featured-case .fc-img img { width: 100%; height: 100%; object-fit: cover; }
.fc-body { padding: clamp(32px, 4vw, 60px) clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.fc-body .tag { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--accent); }
.fc-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.2vw, 44px); margin: 16px 0 20px; }
.fc-body > p { font-size: 17px; color: var(--muted); max-width: 30em; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.fc-chips span {
    height: 38px; padding: 0 20px;
    display: inline-flex; align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 19px;
    font-size: 14px; font-weight: 700;
}
.fc-body .link-mono { margin-top: auto; font-size: 15px; }

.cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.case-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .3s ease, border-color .3s ease;
}
.case-card:hover { transform: translateY(-4px); border-color: rgba(47, 214, 166, .5); }
.case-card .cc-img { aspect-ratio: 16 / 9; overflow: hidden; }
.case-card .cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case-card:hover .cc-img img { transform: scale(1.04); }
.cc-body { padding: 26px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.cc-body .tag { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent-2); }
.cc-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: 10px 0 12px; }
.cc-body p { font-size: 16px; color: var(--muted); }
.cc-body .link-mono { margin-top: 26px; }

.strip-github {
    margin-top: 60px;
    background: #04241e;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 36px 40px 40px;
}
.strip-github .tag { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--accent); }
.strip-links {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 28px;
}
.strip-links a { font-size: 16px; font-weight: 700; color: #ffffff; }
.strip-links a:hover { color: var(--accent); }

/* ── Páginas de case ── */
.case-hero { padding: clamp(56px, 8vw, 100px) 0 0; }
.breadcrumb {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    letter-spacing: .08em; color: var(--muted);
    margin-bottom: clamp(28px, 4vw, 60px);
}
.breadcrumb a:hover { color: var(--accent); }
.case-meta {
    display: flex; flex-wrap: wrap;
    gap: clamp(28px, 6vw, 130px);
    margin-top: clamp(32px, 5vw, 52px);
}
.case-meta .k { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--dim); display: block; margin-bottom: 8px; }
.case-meta .v { font-size: 17px; font-weight: 700; }
.chip-fic {
    display: inline-flex; align-items: center;
    height: 42px; padding: 0 22px;
    margin-top: clamp(32px, 5vw, 52px);
    background: var(--surface);
    border: 1px solid rgba(232, 185, 106, .35);
    border-radius: 21px;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .04em; color: var(--amber);
}
.case-img {
    margin-top: clamp(36px, 5vw, 60px);
    border-radius: var(--radius-img);
    overflow: hidden;
    /* proporção igual à das peças (1600×900) — antes era 1200/560 e cortava
       a arte em cima e embaixo */
    aspect-ratio: 16 / 9;
}
.case-img img { width: 100%; height: 100%; object-fit: cover; }

.case-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: clamp(64px, 8vw, 100px) 0 0;
}
.case-cols .k { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--accent); display: block; margin-bottom: 20px; }
.case-cols p { font-size: 17px; color: var(--muted); }

.case-label {
    font-family: var(--font-mono); font-weight: 700; font-size: 15px;
    letter-spacing: .06em; color: var(--accent);
    display: block;
    margin: clamp(64px, 8vw, 100px) 0 0;
}
.palette-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 150px));
    gap: 20px;
    margin-top: 44px;
}
.palette-row figure { display: grid; gap: 14px; }
.palette-row i { display: block; height: 90px; border-radius: 16px; border: 1px solid var(--line); }
.palette-row figcaption { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--muted); }

.apps-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 50px;
}
.app-slot {
    aspect-ratio: 588 / 340;
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--dim);
    text-align: center; padding: 20px;
}
.app-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.chips-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.chips-row span {
    height: 46px; padding: 0 22px;
    display: inline-flex; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 23px;
    font-size: 15px; font-weight: 700;
}

.proj-list { margin-top: 48px; }
.proj-row {
    display: flex; align-items: center; gap: 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-soft);
}
.proj-row .idx { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--accent); width: 32px; flex: none; }
.proj-row .name { font-size: 22px; font-weight: 700; }
.proj-row .go {
    margin-left: auto;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--muted);
    white-space: nowrap;
}
.proj-row:hover .go { color: var(--accent); }

/* ── Próximo projeto ──
   Era um bloco sólido em mint, do tamanho de um CTA de venda, no fim de cada
   case — chamava mais atenção que o próprio trabalho. Agora é o que deveria
   ser: navegação discreta, com o mint só na seta. */
.next-strip {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 28px;
    margin: clamp(64px, 8vw, 100px) 0 0;
    padding: clamp(24px, 3vw, 32px) 0 0;
    border-top: 1px solid var(--line);
    color: var(--text);
    transition: opacity .25s ease;
}
.next-strip:hover { opacity: .75; }
.next-strip .k {
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .16em; color: var(--dim);
    flex: none; min-width: 150px;
}
.next-strip .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.9vw, 25px); }
.next-strip .t::after { content: " ↗"; color: var(--accent); }

/* ── Prazo curto: a oferta express em tom editorial ──
   Substitui a seção de compra direta com carrinho. Sem preço em vitrine,
   sem flag piscando, sem botão de comprar — uma nota que abre conversa. */
.express-note {
    margin-top: clamp(48px, 6vw, 72px);
    padding: clamp(28px, 3.5vw, 40px) clamp(26px, 3.5vw, 44px);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--surface);
    display: grid; gap: 16px;
    max-width: 64em;
}
.express-note .k {
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .16em; color: var(--accent-2);
}
.express-note p { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); }
.express-note a {
    justify-self: start;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .06em; color: var(--accent-2);
    border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

.case-footer { padding: clamp(72px, 9vw, 110px) 0 44px; }
.case-footer .logo { font-size: 22px; }
.case-footer p { margin-top: 22px; font-size: 15px; color: var(--muted); }
.case-footer .copy { margin-top: 40px; font-size: 14px; color: var(--dim); }

/* ── Reveal on scroll ── */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .marquee-track { animation: none; }
    .logo em, .hero-badge b::after { animation: none; }
    html { scroll-behavior: auto; }
}

/* ── Galeria de aplicações (cases) ── */
.app-fig { margin: 0; display: grid; gap: 14px; }
.app-fig .frame {
    aspect-ratio: 1400 / 788;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: zoom-in;
}
.app-fig img { width: 100%; height: 100%; object-fit: cover; }
.app-fig figcaption { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--muted); }

/* Lightbox simples */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(1, 15, 12,.94); display: none; place-items: center; padding: 4vmin; cursor: zoom-out; }
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: 92vh; border-radius: 12px; }

/* ── Parallax ── */
.plx-inner { height: 118%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .plx-inner { height: 100%; transform: none !important; } }

/* ── A11y ── */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Pular para o conteúdo — primeiro elemento tabulável da página */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    padding: 14px 22px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Ícones em SVG — substituem os emojis, que renderizavam
   com desenho e cor diferentes em cada sistema operacional. */
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 20px; height: 20px; }

/* Zoom suave na miniatura do card, no hover */
.case-card:hover .cc-img img,
.concept-card:hover .cc-img img { transform: scale(1.04); }

/* ── Entregáveis por serviço ── */
.service-note {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono); font-weight: 700;
    font-size: 12px; letter-spacing: .06em; color: var(--dim);
}

/* ── Faixa discreta de projetos web na home ── */
.aside-strip {
    margin-top: 44px; padding-top: 30px;
    border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
}
.aside-strip p { font-size: 16px; color: var(--muted); max-width: 46em; }

/* ── Linha de apoio do hero ── */
.hero-alt {
    margin-top: clamp(28px, 4vh, 44px);
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .04em;
    color: var(--muted);
}
.hero-alt a { color: var(--accent); border-bottom: 1px solid rgba(159, 246, 144, .35); padding-bottom: 2px; }
.hero-alt a:hover { border-bottom-color: var(--accent); }


/* ── O card sólido da marca continua em mint mesmo na seção clara ──
   O mint proibido é o mint COMO TEXTO sobre branco. Como preenchimento
   sólido, com tinta escura por cima, dá 14,94:1 — é a aplicação correta. */
.theme-light .card-highlight { background: #9ff690; color: #010f0c; }
.theme-light .card-highlight p,
.theme-light .card-highlight a { color: #14503c; }

/* Texto mono pequeno usa sempre o acento secundário: mint no escuro,
   verde-escuro no claro. O acento primário do modo claro (#409d3e) só
   passa em AA para texto grande e componente de interface. */
.faq-cta a,
.metric .s,
.card-metrics .tag,
.service-prazo a { color: var(--accent-2); }
.faq-cta { margin: clamp(40px, 5vw, 60px) 0 0; font-size: 16px; }

/* ── Selo de case real, contraparte do aviso de conceito fictício ──
   Antes só os conceitos eram sinalizados; o case real ficava sem marcação
   e a diferença entre trabalho de cliente e exercício autoral só existia
   pela ausência de aviso. */
.chip-real {
    display: inline-flex; align-items: center;
    height: 42px; padding: 0 22px;
    margin-top: clamp(32px, 5vw, 52px);
    background: var(--surface);
    border: 1px solid rgba(159, 246, 144, .4);
    border-radius: 21px;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .04em; color: var(--accent);
}
.case-hero .chip-real + .case-meta { margin-top: clamp(28px, 4vw, 40px); }

.link-live { color: var(--accent); border-bottom: 1px solid rgba(159, 246, 144, .35); }
.link-live:hover { border-bottom-color: var(--accent); }
.case-meta .link-live { border-bottom: 0; }

/* O título do card em destaque é h3 quando vive dentro de uma seção
   que já tem h2 — a regra vale para os dois casos. */
.fc-body h2, .fc-body h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(32px, 3.2vw, 44px); margin: 16px 0 20px;
}

/* ═══ Responsivo ═══ */
@media (max-width: 1100px) {
    .works-grid { grid-template-columns: repeat(2, 1fr); }
    .concepts-grid { grid-template-columns: repeat(2, 1fr); }
    .concepts-grid .wide-row { grid-template-columns: 1fr 1fr; }
    .pilares-grid { grid-template-columns: repeat(2, 1fr); }
    .depo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .sobre-grid { grid-template-columns: 1fr; }
    .sobre-foto { max-width: 420px; }
    .featured-case { grid-template-columns: 1fr; }
    .featured-case .fc-img { aspect-ratio: 16 / 9; min-height: 0; }
    .pilares-row2 { grid-template-columns: 1fr; }
    .card-metrics { grid-template-columns: 1fr; }
    .case-cols { grid-template-columns: 1fr; gap: 44px; }
    .strip-links { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .pilares-grid, .depo-grid, .works-grid,
    .concepts-grid, .concepts-grid .wide-row,
    .cases-grid, .apps-row { grid-template-columns: 1fr; }
    .palette-row { grid-template-columns: repeat(2, 1fr); }
    .hero-actions .btn { width: 100%; }
    .proj-row { flex-wrap: wrap; gap: 12px; }
    .proj-row .name { font-size: 18px; }
    .proj-row .go { margin-left: auto; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .fc-chips span { font-size: 13px; padding: 0 14px; }
}

/* ── Decisões de projeto ──
   Os cases contavam só o "o quê". Este bloco conta o "por quê", que é o que
   diferencia portfólio de designer de galeria de imagem. */
.dec-list { margin-top: 44px; display: grid; gap: 0; }
.dec {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(24px, 3vw, 34px) 0;
    border-top: 1px solid var(--line-soft);
}
.dec:last-child { border-bottom: 1px solid var(--line-soft); }
.dec .n {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    letter-spacing: .1em; color: var(--accent-2); padding-top: 5px;
}
.dec h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 25px); }
.dec p { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); margin-top: 12px; max-width: 60em; line-height: 1.7; }
@media (max-width: 640px) {
    .dec { grid-template-columns: 1fr; gap: 10px; }
    .dec .n { padding-top: 0; }
}