/* FONTE DO ESTILO — editar aqui, não no site.html antigo.
   Nasceu extraído dos 3 blocos <style> do site.html em 28/08/2026, mas a partir
   dali seguiu sozinho: o filtro de projetos e o menu de 44px só existem aqui. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}img{max-width:100%;display:block}

@font-face{font-family:"Josefin Slab";src:url("/static/fontes/JosefinSlab-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("/static/fontes/JosefinSlab-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("/static/fontes/JosefinSlab-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("/static/fontes/JosefinSlab-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Walkway";src:url("/static/fontes/Walkway-SemiBold.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Walkway";src:url("/static/fontes/Walkway-Bold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Walkway";src:url("/static/fontes/Walkway-Black.ttf") format("truetype");font-weight:800;font-display:swap}

:root {
    --brand-deep:   #1A2E2E;
    --brand-deep-2: #224040;
    --brand-green:  #004B68;
    --brand-green-l:#0A6E93;
    --brand-brass:  #B19A7B;

    --surface:      #EFEDE7;
    --surface-2:    #E4E2DA;
    --ink:          #191C1A;
    --ink-2:        #5A615B;
    --rule:         #D2D0C7;
    --on-deep:      #EDEFEA;
    --on-deep-2:    #9DAAA1;

    --note:         #7A5AA8;
    --note-bg:      #EDE7F5;
    --todo:         #A6521F;
    --todo-bg:      #F4E5DA;

    --display: "Josefin Slab", Georgia, "Times New Roman", serif;
    --body: "Walkway", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

    --fs-xs: 0.83rem;
    --fs-sm: 1rem;
    --fs-base: 1.24rem;
    --fs-lg: 1.42rem;
    --fs-xl: 1.8rem;
    --fs-2xl: 2.45rem;
    --fs-3xl: clamp(2.6rem, 6vw, 4.4rem);

    --measure: 62ch;
    --gutter: clamp(1.15rem, 5vw, 4rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --surface: #14100D; --surface-2: #1D1915; --ink: #EDEAE3;
      --ink-2: #A29B90; --rule: #322C26;
      --note: #B79BE0; --note-bg: #241C33; --todo: #DD9663; --todo-bg: #2E1F14;
    }
  }
  :root[data-theme="dark"] {
    --surface: #14100D; --surface-2: #1D1915; --ink: #EDEAE3;
    --ink-2: #A29B90; --rule: #322C26;
    --note: #B79BE0; --note-bg: #241C33; --todo: #DD9663; --todo-bg: #2E1F14;
  }
  :root[data-theme="light"] {
    --surface: #EFEDE7; --surface-2: #E4E2DA; --ink: #191C1A;
    --ink-2: #5A615B; --rule: #D2D0C7;
    --note: #7A5AA8; --note-bg: #EDE7F5; --todo: #A6521F; --todo-bg: #F4E5DA;
  }

  body {
    background: var(--surface); color: var(--ink);
    font-family: var(--body); font-size: var(--fs-base); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* ══════ chrome do mockup ══════ */

  .note {
    display: none;
    font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
    color: var(--note); background: var(--note-bg);
    border-left: 3px solid var(--note);
    padding: 0.75rem 1rem; margin: 0 var(--gutter) 1.5rem;
  }

  /* Campo aguardando o dado real da loja. Discreto de propósito: o site já
     está de pé, mas quem lê precisa saber que ali falta informação. */
  .todo {
    display: inline-block; font-style: italic;
    color: var(--ink-2); opacity: 0.75;
    border-bottom: 1px dotted var(--ink-2);
  }
  .band-deep .todo { color: var(--on-deep-2); border-bottom-color: var(--on-deep-2); }
  /* o selo do card de ambiente continua visível: ali é ausência de foto, não de texto */
  /* Valor tipico do setor, preenchido para o mockup ler completo. NAO e dado da
     Projetart: prazo e garantia sao compromisso comercial, entao a marca fica
     visivel ate a Solange confirmar. Trocar o <span> pelo texto puro na hora. */
  .estimativa { border-bottom: 1px dotted var(--brand-brass); }
  .estimativa::after {
    content: " estimativa";
    font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.06em;
    color: var(--brand-brass); vertical-align: 0.15em; margin-left: 0.35em;
    white-space: nowrap;
  }
  .band-deep .estimativa::after { color: var(--brand-brass); }

  /* Foto de banco de imagem, temporaria ate a Projetart fotografar o ambiente.
     Visivel de proposito: sem isso a cliente aprova o layout achando que e obra dela. */
  .ilustrativa { position: relative; }
  .ilustrativa::after {
    content: "foto ilustrativa";
    position: absolute; top: 0.55rem; left: 0.55rem;
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
    color: var(--on-deep); background: rgba(15,22,19,0.6);
    padding: 0.2em 0.5em; backdrop-filter: blur(2px); pointer-events: none;
  }
  figure.shot.ilustrativa::after { top: 0.55rem; }

  .module .todo {
    font-style: normal; font-family: var(--mono); font-size: var(--fs-xs);
    letter-spacing: 0.04em; color: var(--on-deep); opacity: 1;
    background: rgba(15,22,19,0.55); border: 0;
    padding: 0.2em 0.5em; backdrop-filter: blur(2px);
  }

  /* ══════ router ══════ */

  .page { display: none; }
  .page.is-active { display: block; }

  /* ══════ estrutura ══════ */

  .band { padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
  .band-deep { background: var(--brand-deep); color: var(--on-deep); }
  .band-alt { background: var(--surface-2); }
  .wrap { max-width: 76rem; margin: 0 auto; }

  .eyebrow {
    font-family: var(--mono); font-size: var(--fs-xs);
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-green);
  }
  .band-deep .eyebrow { color: var(--brand-brass); }
  /* o hero e escuro como .band-deep, mas nao carrega a classe: sem isto o verde
     da 2.91:1 e a legenda 2.87:1 sobre o fundo escuro (Lighthouse, mobile) */
  .hero .eyebrow, .subhero .eyebrow { color: var(--brand-brass); }
  .hero figure.shot figcaption, .subhero figure.shot figcaption { color: var(--on-deep-2); }

  h2.sec-title {
    font-family: var(--display); font-size: var(--fs-2xl); font-weight: 500;
    letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; margin-top: 0.5rem;
  }
  .sec-head { margin-bottom: 2.5rem; max-width: 36ch; }
  .sec-head p { color: var(--ink-2); margin-top: 0.8rem; max-width: var(--measure); }
  .band-deep .sec-head p { color: var(--on-deep-2); }

  .prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1rem; }
  .prose p { color: var(--ink-2); }
  .band-deep .prose p { color: var(--on-deep-2); }

  /* ══════ nav ══════ */

  /* No celular o menu rola junto com a pagina. Fixo, ele ocupava 144px —
     17% da tela — o tempo todo. A acao (WhatsApp) fica no botao flutuante,
     que continua sempre visivel. Volta a ser fixo a partir de 54rem. */
  .sitenav {
    position: static; z-index: 70;
    background: var(--brand-deep); color: var(--on-deep);
    padding: 0.9rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  .logo {
    font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.22em;
    text-transform: uppercase; font-weight: 500; cursor: pointer;
    background: none; border: 0; color: inherit; text-align: left; padding: 0;
  }
  .logo small {
    display: block; font-family: var(--mono); font-size: 0.48rem;
    letter-spacing: 0.34em; color: var(--brand-brass); margin-top: 0.15rem;
  }
  .sitenav ul {
    display: flex; gap: clamp(0.7rem, 2vw, 1.6rem); list-style: none;
    font-family: var(--display); font-size: var(--fs-sm);
    letter-spacing: 0.04em; flex-wrap: wrap;
  }
  /* Alvo de toque de 44px, o minimo recomendado. Antes eram 16px sem
     espacamento, e o dedo acertava o link vizinho. */
  .sitenav a {
    color: var(--on-deep-2); text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; min-height: 44px;
    padding-inline: 0.3rem;
  }
  @media (min-width: 54rem) {
    .sitenav { position: sticky; top: 0; }
    .sitenav a { min-height: 0; padding-inline: 0; }
  }
  .sitenav a:hover { color: var(--on-deep); }
  .sitenav a.is-current { color: var(--brand-brass); }

  /* ══════ ilustrações de elevação ══════ */

  /* Uma proporção só para tudo que é ambiente — antes havia cinco
     (300×220, 260×200, 400×260, 300×170, 800×260). Os desenhos continuam
     com o viewBox original e se encaixam centralizados dentro do 3:2. */
  .art {
    background: var(--brand-deep-2);
    border: 1px solid rgba(176,138,79,0.3);
    display: block; width: 100%; height: auto;
    aspect-ratio: 3 / 2;
  }
  /* o mapa é faixa, não ambiente: proporção própria e declarada */
  .art--banner { aspect-ratio: 3 / 1; }
  .mapa {
    display: block; width: 100%; aspect-ratio: 3 / 1; border: 0;
    background: var(--brand-deep-2);
  }
  @media (max-width: 46rem) { .mapa { aspect-ratio: 4 / 3; } }
  .art-line { stroke: var(--brand-brass); stroke-width: 1.4; fill: none; opacity: 0.85; }
  .art-fill { fill: rgba(176,138,79,0.1); stroke: var(--brand-brass); stroke-width: 1.2; opacity: 0.9; }
  .art-solid { fill: rgba(176,138,79,0.22); stroke: none; }
  .art-faint { stroke: var(--brand-brass); stroke-width: 0.7; fill: none; opacity: 0.35; }
  .art-label {
    fill: var(--brand-brass); font-family: var(--mono);
    font-size: 9px; letter-spacing: 0.18em; opacity: 0.8;
  }

  figure.shot { display: flex; flex-direction: column; gap: 0.5rem; }
  figure.shot figcaption {
    font-family: var(--mono); font-size: var(--fs-xs);
    color: var(--ink-2); line-height: 1.5;
  }
  .band-deep figure.shot figcaption { color: var(--on-deep-2); }

  /* ══════ hero ══════ */

  .hero {
    background: var(--brand-deep); color: var(--on-deep);
    padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr; align-items: center;
  }
  @media (min-width: 62rem) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

  .hero-copy { display: flex; flex-direction: column; gap: 1.4rem; max-width: 34rem; }
  .hero h1 {
    font-family: var(--display); font-size: var(--fs-3xl); font-weight: 500;
    line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
  }
  .hero h1 em { font-style: normal; color: var(--brand-brass); }
  .hero p { color: var(--on-deep-2); font-size: var(--fs-lg); max-width: 40ch; }

  .hero-proof {
    display: flex; align-items: center; gap: 0.7rem;
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
    color: var(--on-deep-2);
    border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.1rem;
  }
  .stars { color: var(--brand-brass); letter-spacing: 0.1em; }

  /* página interna: hero menor */
  .subhero {
    background: var(--brand-deep); color: var(--on-deep);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  }
  .subhero .wrap { display: flex; flex-direction: column; gap: 1.2rem; }
  .subhero h1 {
    font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 500; line-height: 1.08; letter-spacing: -0.02em;
    text-wrap: balance; max-width: 20ch;
  }
  .subhero p { color: var(--on-deep-2); font-size: var(--fs-lg); max-width: var(--measure); }

  .crumbs {
    font-family: var(--mono); font-size: var(--fs-xs);
    letter-spacing: 0.1em; color: var(--brand-brass);
  }
  .crumbs a { color: var(--on-deep-2); text-decoration: none; cursor: pointer; }
  .crumbs a:hover { color: var(--on-deep); }

  /* ══════ botões ══════ */

  .cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
  .btn {
    font-family: var(--display); font-size: var(--fs-base); letter-spacing: 0.03em;
    padding: 0.9rem 1.6rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 1px solid transparent; cursor: pointer;
  }
  .btn-primary { background: var(--brand-green); color: #fff; }
  .btn-primary:hover { background: var(--brand-green-l); }
  .btn-ghost { background: transparent; color: var(--on-deep); border-color: rgba(255,255,255,0.35); }
  .btn-ghost:hover { border-color: var(--brand-brass); color: var(--brand-brass); }

  /* ══════ grades ══════ */

  /* 6 ambientes: 3 colunas fecham a grade sem sobra. auto-fit deixava buraco. */
  .modules {
    display: grid; grid-template-columns: 1fr;
    gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  }
  @media (min-width: 34rem) { .modules { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 58rem) { .modules { grid-template-columns: repeat(3, 1fr); } }

  /* card de ambiente: o card inteiro é o link, o texto fica sobre a imagem */
  .module {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--brand-deep-2);
    border: 0; padding: 0; text-align: left; font: inherit;
    color: var(--on-deep); cursor: pointer;
  }
  .module-media { position: absolute; inset: 0; }
  .module-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .module:hover .module-media img { transform: scale(1.05); }
  /* ambiente ainda sem foto: entra o desenho de elevação, inteiro, sem corte */
  .module-media--art { padding: 7% 8%; box-sizing: border-box; }
  .module-media--art .art {
    width: 100%; height: 100%; aspect-ratio: auto;
    background: none; border: 0;
  }

  /* camada de contraste — sem ela o texto sobre foto fica ilegível */
  .module-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(15,22,19,0.90) 0%, rgba(15,22,19,0.62) 34%,
      rgba(15,22,19,0.18) 66%, rgba(15,22,19,0.06) 100%);
  }
  /* o desenho já está sobre fundo escuro — o véu cheio apagaria o traço */
  .module-media--art ~ .module-scrim {
    background: linear-gradient(to top,
      rgba(15,22,19,0.85) 0%, rgba(15,22,19,0.45) 30%, rgba(15,22,19,0) 60%);
  }
  .module-body {
    position: absolute; right: 0; bottom: 0; left: 0;
    padding: 1.2rem 1.3rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.35rem;
  }
  .module-body b {
    font-family: var(--display); font-size: var(--fs-lg);
    font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  }
  .module-body p { font-size: var(--fs-sm); color: rgba(237,239,234,0.84); }
  .module:focus-visible { outline: 2px solid var(--brand-brass); outline-offset: -3px; }
  .module .todo {
    position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .module-media img { transition: none; }
    .module:hover .module-media img { transform: none; }
  }

.gallery {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem;
  }

  /* ══════ faixa em loop ══════ */
  /* Sangra até a borda de propósito: é a única seção da página que não obedece
     ao .wrap, e é isso que quebra o ritmo de "toda seção é a mesma caixa". */

  .faixa {
    overflow: hidden; background: var(--brand-deep);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    display: flex; width: 100%;
  }
  .faixa-grupo {
    display: flex; flex: 0 0 auto; gap: 1px; padding-right: 1px;
    animation: faixa-correr 64s linear infinite;
  }
  .faixa:hover .faixa-grupo { animation-play-state: paused; }
  .faixa-item {
    flex: 0 0 clamp(14rem, 22vw, 26rem);
    aspect-ratio: 3 / 2; position: relative; overflow: hidden;
  }
  .faixa-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes faixa-correr { to { transform: translateX(-100%); } }

  .faixa-legenda {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.9rem var(--gutter) 0;
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
    color: var(--ink-2);
  }

  @media (prefers-reduced-motion: reduce) {
    .faixa { overflow-x: auto; }
    .faixa-grupo { animation: none; }
    .faixa-grupo + .faixa-grupo { display: none; }
  }

  .filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
  .chip {
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.42rem 0.85rem;
    border: 1px solid var(--rule); color: var(--ink-2);
    background: transparent; cursor: pointer;
  }
  .chip[aria-pressed="true"] {
    background: var(--brand-green); border-color: var(--brand-green); color: #fff;
  }

  /* ══════ listas de benefício ══════ */

  .checks { display: flex; flex-direction: column; gap: 1.2rem; max-width: var(--measure); list-style: none; }
  .checks li { display: flex; gap: 0.9rem; align-items: flex-start; }
  .checks li::before {
    content: "▸"; color: var(--brand-green); font-size: 1.1rem; line-height: 1.4;
  }
  .checks b { font-family: var(--display); font-weight: 500; }
  .checks span { color: var(--ink-2); }
  .band-deep .checks span { color: var(--on-deep-2); }

  .specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  }
  .spec { background: var(--surface); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .spec dt {
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--brand-green);
  }
  .spec dd { font-size: var(--fs-sm); color: var(--ink-2); }

  /* ══════ depoimentos ══════ */

  .reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
  .review {
    background: var(--surface); border-top: 2px solid var(--brand-brass);
    padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
  }
  .band-deep .review { background: var(--brand-deep-2); color: var(--on-deep); }
  .review blockquote { font-size: var(--fs-sm); line-height: 1.65; }
  .review footer {
    font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2);
    letter-spacing: 0.04em; border-top: 1px solid var(--rule);
    padding-top: 0.75rem; margin-top: auto;
  }
  .band-deep .review footer { color: var(--on-deep-2); border-top-color: rgba(255,255,255,0.13); }
  .verified { color: var(--brand-green); }
  /* sobre o fundo escuro dos depoimentos o verde claro nao alcanca 4.5:1 */
  .band-deep .verified { color: #7FBF9C; }

  /* ══════ FAQ ══════ */

  .faq { display: flex; flex-direction: column; max-width: 52rem; }
  .faq details { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
  .faq summary {
    font-family: var(--display); font-size: var(--fs-lg); font-weight: 500;
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--mono); color: var(--brand-green); font-size: 1.2rem; }
  .faq details[open] summary::after { content: "–"; }
  .faq p { margin-top: 0.8rem; color: var(--ink-2); max-width: var(--measure); }

  /* ══════ contato ══════ */

  .contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
  @media (min-width: 54rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }

  .infolist { display: flex; flex-direction: column; gap: 1.3rem; }
  .infoitem { display: flex; flex-direction: column; gap: 0.25rem; }
  .infoitem dt {
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--brand-brass);
  }

  /* ══════ equipe ══════ */

  .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem; }
  .member {
    display: flex; flex-direction: column; gap: 0.6rem;
    border-top: 2px solid var(--brand-brass); padding-top: 1rem;
  }
  .member b { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; }
  .member span { font-size: var(--fs-sm); color: var(--ink-2); }
  .band-deep .member span { color: var(--on-deep-2); }

  .steps { display: flex; flex-direction: column; gap: 0; max-width: 54rem; }
  .step {
    display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.2rem;
    padding: 1.3rem 0; border-bottom: 1px solid var(--rule); align-items: baseline;
  }
  .step-n {
    font-family: var(--mono); font-size: var(--fs-sm);
    color: var(--brand-green); font-variant-numeric: tabular-nums;
  }
  .step b { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; display: block; }
  .step p { color: var(--ink-2); margin-top: 0.3rem; font-size: var(--fs-sm); }

  /* ══════ mapa do site ══════ */

  .sitemap-list { border-top: 1px solid var(--rule); }
  .sitemap-row {
    display: flex; align-items: baseline; gap: 1rem; padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule); flex-wrap: wrap;
  }
  .sitemap-row code {
    font-family: var(--mono); font-size: var(--fs-sm);
    color: var(--brand-green); white-space: nowrap;
  }
  .sitemap-row span { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; min-width: 12rem; }

  .sitemap-count {
    display: flex; gap: clamp(1.5rem, 5vw, 3.5rem); flex-wrap: wrap;
    margin-top: 2.5rem; padding-top: 1.7rem; border-top: 2px solid var(--brand-green);
  }
  .sitemap-count div { display: flex; flex-direction: column; gap: 0.15rem; }
  .sitemap-count b {
    font-family: var(--display); font-size: 2.4rem; font-weight: 500; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--brand-green);
  }
  .sitemap-count div.is-now b { color: var(--todo); }
  .sitemap-count small {
    font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-2);
  }

  /* ══════ rodapé ══════ */

  .sitefoot {
    background: var(--brand-deep); color: var(--on-deep-2);
    padding: 2.75rem var(--gutter);
    display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
    font-size: var(--fs-sm); border-top: 1px solid rgba(255,255,255,0.09);
  }
  .sitefoot nav { display: flex; flex-direction: column; gap: 0.4rem; }
  .sitefoot a { color: var(--on-deep-2); text-decoration: none; cursor: pointer; }
  .sitefoot a:hover { color: var(--on-deep); }

  .float-cta {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    z-index: 80; background: var(--brand-green); color: #fff; text-decoration: none;
    font-family: var(--display); font-size: var(--fs-sm); letter-spacing: 0.04em;
    padding: 0.85rem 1.25rem; box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    display: inline-flex; align-items: center; gap: 0.5rem;
  }
  .float-cta:hover { background: var(--brand-green-l); }

  *:focus-visible { outline: 2px solid var(--brand-brass); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ══════ filtro da página de projetos ══════ */
.filtros {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0 0 2rem;
}
.filtro {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1rem;
  font-family: var(--display); font-size: var(--fs-sm); letter-spacing: 0.04em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 2rem;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filtro:hover { border-color: var(--brand-deep); }
.filtro.is-ativo {
  background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-deep);
}
.filtro-n {
  font-family: var(--mono); font-size: 0.72em; opacity: 0.7;
}
.filtro-vazio {
  color: var(--ink-2); font-style: italic; margin-bottom: 2rem;
}