/* =========================================================
   VISUAL DO SITE — limpo e com vidro, inspirado no estilo da Apple
   Carregado por último em todas as páginas, por cima do CSS de cada parte.
   Fonte do sistema (nenhum arquivo de fonte da Apple é usado),
   mais respiro, títulos limpos e vidro fosco, mantendo os efeitos
   do site (cursor, ímã, faixa, letras acendendo, brilho nos cartões). As cores do tema claro ficam em css/tema-claro.css.
   ========================================================= */

:root {
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  --cream: #f5f5f7;
  --dark: #000;
  --card-bg: #1c1c1e;
  --mid: #1c1c1e;
  --gray: #a1a1a6;
  --accent: #e5a963;
  --accent-glow: rgba(229, 169, 99, .22);
  --border: rgba(255, 255, 255, .1);
  --nav-bg: rgba(22, 22, 23, .72);
  --nav-scroll: rgba(22, 22, 23, .8);
  --services-bg: transparent;
}

body { letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- menu de vidro, fino ---------- */
nav { padding: .6rem max(1.5rem, calc((100% - 1120px) / 2)); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav-logo { font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.nav-logo span { color: var(--accent); }
.nav-links { gap: 2rem; }
.nav-links a { font-size: .8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cream); opacity: .8; transition: opacity .2s; }
.nav-links a:hover { color: var(--cream); opacity: 1; }
.nav-cta { padding: .4rem .95rem; font-size: .78rem; font-weight: 500; letter-spacing: 0; border-radius: 980px; }
.nav-cta:hover { transform: none; box-shadow: none; opacity: .85; }
.lang-btn, .theme-btn { font-family: var(--sans); font-weight: 500; font-size: .74rem; border: 0 !important; border-radius: 980px; padding: .35rem .6rem; margin-left: 0; }
.theme-btn { font-size: .85rem; }

/* ---------- hero: a cena 3D continua, o texto fica limpo ---------- */
#hero { --hero-ink: #f5f5f7; --hero-bg: #000; }
#hero *:not(svg):not(path) { font-family: var(--sans); }
.city-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 52%), linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 30%); }
.city-tag { font-size: calc(19 * var(--u)); font-weight: 500; letter-spacing: -.01em; text-transform: none; color: #e5a963; margin-bottom: calc(14 * var(--u)); }
.city-tag svg { display: none; }
.city-copy h1 { font-size: calc(92 * var(--u)); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; text-transform: none; text-shadow: none; }
.city-copy p { font-size: calc(24 * var(--u)); font-weight: 400; line-height: 1.35; letter-spacing: -.015em; color: rgba(245, 245, 247, .86); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.city-copy p strong { font-weight: 500; }
.vhero-btn { padding: .72rem 1.35rem; border-radius: 980px; border: 0; font-size: .94rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: #000; background: #f5f5f7; transition: background .2s; }
.vhero-btn:hover { background: #fff; border-color: transparent; }
.vhero-btn.ghost { color: #f5f5f7; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vhero-btn.ghost:hover { background: rgba(255, 255, 255, .24); }
.city-stats strong { font-weight: 600; letter-spacing: -.03em; text-shadow: none; }
.city-stats span { font-size: calc(13 * var(--u)); letter-spacing: -.005em; text-transform: none; color: rgba(245, 245, 247, .72); }
.city-cue { font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: -.01em; text-transform: none; }
.cs-num { font-weight: 500; border-radius: 50%; }
.cs-title { letter-spacing: -.01em; text-transform: none; font-weight: 500; }
.city-steps li.is-active .cs-title { font-weight: 600; letter-spacing: -.02em; }
.cs-body p { border-left: 0; padding-left: 0; }

/* ---------- seções com largura contida e mais respiro ---------- */
body > section:not(#hero), #services {
  max-width: 1184px; margin-inline: auto; padding: 7.5rem 2rem;
}
#services { border: 0; border-radius: 0; }
.contact-section { padding-bottom: 8rem; }
.section-label { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; text-transform: none; color: var(--accent); margin-bottom: .4rem; }
.section-label::before { display: none; }
h2.section-title, .contact-info h2 { font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -.032em; }
.services-header, .work-header, .ferramentas-header { margin-bottom: 3rem; }
.about-text p, .ferramentas-header p, .conteudo-noticias > p, .contact-info p { font-size: 1.15rem; line-height: 1.5; letter-spacing: -.015em; }

/* ---------- botões em pílula ---------- */
.btn-primary, .btn-ghost { border-radius: 980px; padding: .72rem 1.35rem; font-size: .94rem; font-weight: 500; letter-spacing: -.01em; }
.btn-primary:hover { transform: none; box-shadow: none; opacity: .86; }
.btn-ghost { border: 0; color: var(--accent); padding-inline: 0; background: none; }
.btn-ghost:hover { background: none; text-decoration: underline; }

/* ---------- cartões sem borda ---------- */
.service-card, .project-card, .exp-card, .testimonial-card, .tool-card, .contact-card, .contact-container, .skill-chip {
  border: 0; border-radius: 1.4rem;
}
body.light-theme .service-card, body.light-theme .project-card, body.light-theme .exp-card,
body.light-theme .testimonial-card, body.light-theme .tool-card, body.light-theme .contact-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.service-card h3, .tool-content h3, .project-info h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -.022em; }
.service-card p, .tool-content p, .project-info p { font-size: .98rem; line-height: 1.45; letter-spacing: -.01em; }
.exp-role { font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; }
.exp-company { font-size: .95rem; }
.exp-year, .project-number { font-family: var(--sans); font-size: .85rem; font-weight: 500; letter-spacing: -.005em; }

/* painéis das ilustrações sem grade nem moldura */
.art { border: 0; border-radius: 1rem; background: color-mix(in srgb, var(--gray) 9%, transparent); }
.project-thumb .thumb-label { font-style: normal; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }

/* etiquetas e habilidades */
.tag { font-family: var(--sans); font-size: .76rem; letter-spacing: -.005em; border: 0; background: color-mix(in srgb, var(--gray) 16%, transparent); padding: .25rem .7rem; }
.skills-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.skill-chip { font-family: var(--sans); font-size: .88rem; letter-spacing: -.01em; color: var(--cream); padding: .45rem .9rem; border-radius: 980px; }
.skill-chip::before { display: none; }
.tool-status { font-family: var(--sans); font-size: .75rem; letter-spacing: -.005em; text-transform: none; }
span.tool-link { font-family: var(--sans); font-size: .95rem; color: var(--accent); letter-spacing: -.01em; }
.tool-card:hover span.tool-link { text-decoration: underline; }

/* janela do terminal com cara de janela do sistema */
.about-visual { border: 0; border-radius: 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.av-bar i:nth-child(1) { background: #ff5f57; }
.av-bar i:nth-child(2) { background: #febc2e; }
.av-bar i:nth-child(3) { background: #28c840; }

/* princípios */
.testimonial-card blockquote { font-style: normal; font-size: 1.12rem; line-height: 1.45; letter-spacing: -.015em; }
.author-info strong { font-weight: 600; letter-spacing: -.02em; }

/* contato */
.contact-container { padding: 4.5rem; background: transparent; overflow: visible; transform-style: flat; } /* flat: preserve-3d atrapalha o desfoque dos cartões */
.card-icon { border: 0; border-radius: 50%; }
.card-bottom strong { font-weight: 600; letter-spacing: -.02em; }
.card-bottom span { font-family: var(--sans); font-size: .95rem; letter-spacing: -.01em; }

/* notícias */
.radar-ticker { font-family: var(--sans); }

/* popups */
.detail-overlay { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
body.light-theme .detail-overlay { background: rgba(243, 241, 234, .55); }
.detail-dialog { border: 0; border-radius: 1.6rem; }
.detail-visual { border-right: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%), color-mix(in srgb, var(--gray) 7%, transparent); }
.detail-body h3 { font-weight: 600; letter-spacing: -.03em; }
.detail-kind, .detail-body h4 { font-family: var(--sans); font-size: .85rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; }
.detail-count { font-family: var(--sans); letter-spacing: 0; }
.detail-list li { border: 0; background: color-mix(in srgb, var(--gray) 11%, transparent); }
.detail-callout { border: 0; }
.detail-period strong { font-weight: 600; letter-spacing: -.04em; }
.detail-period small { font-family: var(--sans); font-size: .9rem; letter-spacing: -.01em; text-transform: none; }

/* rodapé */
footer { max-width: 1184px; margin-inline: auto; padding-inline: 2rem; font-size: .75rem; border-top: 1px solid var(--border); }

/* =========================================================
   VIDRO — vidro fosco com reflexo e borda de luz.
   Atenção: um elemento com backdrop-filter (ou opacidade < 1) impede
   o desfoque dos filhos de "enxergar" o que está atrás dele; por isso o
   desfoque dos popups fica numa camada ao lado da janela, não no pai.
   html.perf-low (js/hero-cena.js): aparelho sem folga, sem desfoque.
   ========================================================= */
:root {
  --glass-tint: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .08));
  --glass-line: rgba(255, 255, 255, .16);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .22);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  --glass-solid: rgba(38, 38, 42, .82);
  --blob-a: rgba(229, 130, 60, .3);
  --blob-b: rgba(60, 190, 190, .2);
}

/* manchas de cor atrás das seções: é o que o vidro desfoca */
body > section:not(#hero), #services { position: relative; }
body > section:not(#hero)::before, #services::before {
  content: ''; position: absolute; inset: -4% -14vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 34%, var(--blob-a), transparent 72%),
    radial-gradient(34% 38% at 84% 68%, var(--blob-b), transparent 72%);
}
#services::before, #ferramentas::before {
  background:
    radial-gradient(36% 40% at 82% 26%, var(--blob-a), transparent 72%),
    radial-gradient(38% 42% at 14% 74%, var(--blob-b), transparent 72%);
}

/* cartões */
.service-card, .exp-card, .testimonial-card, .tool-card, .contact-card, .project-card {
  background: var(--glass-tint);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
body.light-theme .service-card, body.light-theme .project-card, body.light-theme .exp-card,
body.light-theme .testimonial-card, body.light-theme .tool-card, body.light-theme .contact-card { box-shadow: var(--glass-shine), var(--glass-shadow); }
/* os cartões de Formações se empilham: mais opacos para o de trás não atrapalhar o texto */
.work-grid.is-stack .project-card { background: var(--glass-solid); box-shadow: var(--glass-shine), 0 -18px 40px rgba(0, 0, 0, .3); }
.skill-chip, .art { background: color-mix(in srgb, var(--gray) 14%, transparent); }
.skill-chip { border: 1px solid var(--glass-line); }

/* menu: pílula de vidro flutuando sobre tudo, também sobre a cena 3D */
nav {
  top: 12px; left: 12px; right: 12px; max-width: 1120px; margin-inline: auto;
  padding: .42rem .55rem .42rem 1.3rem; border: 1px solid var(--glass-line); border-radius: 980px;
  box-shadow: var(--glass-shine), 0 10px 30px rgba(0, 0, 0, .2);
}
body.on-hero nav {
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
body.on-hero nav .lang-btn, body.on-hero nav .theme-btn { background: rgba(255, 255, 255, .12); }
/* o menu do celular fica dentro da pílula, onde o desfoque não funciona: fundo sólido */
.nav-links { border-radius: 1.3rem; }
@media (max-width: 900px) {
  nav { padding: .42rem .55rem .42rem 1.1rem; }
  .nav-links { top: calc(100% + 8px); background: var(--card-bg); border: 1px solid var(--glass-line); padding: 1.4rem; gap: 1.1rem; }
  body.on-hero .nav-links { background: #1c1c1e; }
}

/* hero: painel de vidro nas etapas, com a cidade passando atrás */
.city-copy { will-change: transform; }
.city-steps {
  padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(26 * var(--u));
  background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .09));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 24px 60px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.cs-num { background: rgba(255, 255, 255, .08); }
.cs-title, .cs-body p { text-shadow: none; }

/* popups: a janela é o vidro; o fundo desfocado fica numa camada ao lado dela */
.detail-overlay { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.light-theme .detail-overlay { background: none; }
.detail-overlay::before {
  content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.light-theme .detail-overlay::before { background: rgba(243, 241, 234, .4); }
.detail-dialog {
  background: var(--glass-tint), rgba(28, 28, 30, .5);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 40px 100px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  will-change: transform;
}
body.light-theme .detail-dialog { background: var(--glass-tint), rgba(255, 255, 255, .35); box-shadow: var(--glass-shine), 0 30px 80px rgba(30, 50, 45, .18); }
.detail-actions { background: none; border-top-color: var(--glass-line); }
.detail-main::after { display: none; }
.detail-visual { background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%); border-right: 1px solid var(--glass-line); }
.detail-close { background: rgba(255, 255, 255, .12); border-color: var(--glass-line); }

/* vidro líquido (js/vidro-liquido.js, só Chromium no computador): as bordas curvam o fundo.
   Com a lente, o vidro fica mais limpo: menos tinta e um brilho de borda mais forte. */
body.on-hero nav.is-liquido { background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important; }
.city-steps.is-liquido { background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(20, 20, 24, .28) 50%, rgba(255, 255, 255, .06)); }
.is-liquido { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .1), inset 0 0 14px rgba(255, 255, 255, .06), 0 18px 44px rgba(0, 0, 0, .3); }
html.perf-low .vhero-btn.ghost { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* sem desfoque: aparelho sem folga ou telas de toque (só nos cartões).
   O vidro aparece mesmo com a opção "reduzir transparência" do sistema ligada: decisão de projeto. */
html.perf-low nav, html.perf-low .city-steps, html.perf-low .service-card, html.perf-low .exp-card,
html.perf-low .testimonial-card, html.perf-low .tool-card, html.perf-low .contact-card, html.perf-low .project-card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.perf-low body.on-hero nav, html.perf-low .city-steps { background: rgba(28, 28, 30, .82) !important; }
html.perf-low .service-card, html.perf-low .exp-card, html.perf-low .testimonial-card,
html.perf-low .tool-card, html.perf-low .contact-card, html.perf-low .project-card { background: var(--glass-solid); }
@media (max-width: 760px), (pointer: coarse) {
  .service-card, .exp-card, .testimonial-card, .tool-card, .contact-card, .project-card {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid);
  }
  .city-steps { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
/* ---------- páginas internas (notícias, legais e projetos) ---------- */
.news-page, .ss-page, .legal-page { position: relative; }
.news-page::before, .ss-page::before, .legal-page::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 520px at 16% 420px, var(--blob-a), transparent 72%),
    radial-gradient(560px 560px at 86% 980px, var(--blob-b), transparent 72%);
}
.news-hero h1, .ss-hero h1, .legal-page h1 { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
/* os títulos sobem de dentro de uma máscara: folga para o ç e o g não serem cortados */
.ss-hero h1 .ss-line, .news-hero h1 .ss-line, .news-hero h1 .news-line { padding-bottom: .16em; margin-bottom: -.1em; }
.ss-hero .ss-intro { font-size: 1.2rem; line-height: 1.45; letter-spacing: -.015em; }
.ss-project h2 { font-weight: 600; letter-spacing: -.03em; }

/* painéis de vidro (os cartões de dentro ficam só translúcidos: desfoque dentro de desfoque não funciona) */
.ss-project, .ss-block {
  background: var(--glass-tint);
  border: 1px solid var(--glass-line); border-radius: 1.6rem;
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
body.light-theme .ss-block { box-shadow: var(--glass-shine), var(--glass-shadow); }
.ss-next { border: 1px solid var(--glass-line); background: var(--glass-tint); box-shadow: var(--glass-shine); }
.news-card, .mk-card, .news-skel, .mk-skel { background: var(--glass-tint); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine); border-radius: 1.3rem; }
.legal-summary { background: var(--glass-tint); border: 1px solid var(--glass-line); border-radius: 1.2rem; box-shadow: var(--glass-shine); }
.legal-page h2 { font-weight: 600; font-size: 1.4rem; letter-spacing: -.022em; }
.legal-page h3 { font-weight: 600; letter-spacing: -.015em; }
.legal-page p, .legal-page li { font-size: 1.02rem; line-height: 1.6; letter-spacing: -.01em; }
.tm-col { background: color-mix(in srgb, var(--gray) 8%, transparent); border: 1px solid var(--glass-line); }
.tm-card { background: var(--glass-tint); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine); }
.tm-new input, .tm-new select, .tm-bar input { background: color-mix(in srgb, var(--gray) 12%, transparent); border-color: var(--glass-line); }

/* rótulos sem caixa alta */
.ss-status, .ss-steps li span, .ss-block span, .tm-col h3, .tm-chip, .tm-reset, .tm-prio, .tm-card time, .tm-progress span,
.news-chip, .news-tab, .news-source, .news-time, .news-meta, .news-tags span, .news-refresh, .news-statusbar,
.mk-label, .mk-change, .mk-unit, .mk-range, .legal-updated, .legal-page h2 span {
  font-family: var(--sans); text-transform: none; letter-spacing: -.005em;
}

html.perf-low .ss-project, html.perf-low .ss-block { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
@media (max-width: 760px), (pointer: coarse) {
  .ss-project, .ss-block { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  body > section:not(#hero), #services { padding: 4.5rem 1.25rem; }
  .contact-container { padding: 1rem 0; }
  footer { padding: 1.5rem 1.25rem; }
  .nav-links a { font-size: 1.05rem; }
}
@media (max-width: 760px) {
  .city-copy h1 { font-size: clamp(2.5rem, 11.5vw, 3.2rem); }
  .city-copy p { font-size: 1.1rem; }
  .city-tag { font-size: .95rem; }
  .vhero-btn { padding: .65rem 1.1rem; font-size: .88rem; }
  .city-stats span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up.from-left, .fade-up.from-right { transform: none; transition: none; }
}