/* =========================================================================
   GNAFOR — sistema visual
   Fundo branco, tipografia sem serifa encorpada, alto contraste.
   Riqueza vem das SECOES: areia, verde-mata, marrom e foto com filtro.
   ========================================================================= */

/* Manrope VARIAVEL, subset latin: um unico arquivo de 24 KB cobre 400 a 800.
   As quatro fontes estaticas da versao anterior custavam 139 KB. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("manrope-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* superficies */
  --white:      #FFFFFF;
  --sand:       #F5F0E5;
  --sand-2:     #EBE3D3;
  --sand-line:  #DCD1BC;

  /* verde-mata: fundo de secao escura */
  --forest:     #102A1A;
  --forest-2:   #0A1D12;
  --forest-3:   #17381F;
  --forest-line:#22452C;

  /* marrom: terra, calor, acento secundario */
  --bark:       #5A3F2C;
  --bark-soft:  #8A6A50;
  --bark-pale:  #E7DACB;

  /* verde vivo: os pontos de cor */
  --lime:       #35C45F;
  --lime-2:     #26A94D;
  --lime-ink:   #12752F;   /* verde legivel como texto sobre branco */
  --lime-wash:  #E6F7EC;

  /* ambar: destaque quente, usado com parcimonia */
  --amber:      #D08A22;
  --amber-wash: #FCF2E0;

  /* tinta */
  --ink:        #111A14;
  --ink-2:      #3D4C43;
  --ink-3:      #6B7A70;
  --line:       #E3E7E1;
  --line-2:     #F0F3EF;

  /* sobre fundo escuro */
  --on-dark:      #F3F8F1;
  --on-dark-2:    #B7CDBB;
  --on-dark-line: #2A4E34;

  /* tipografia */
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  /* escala fluida */
  --t-hero:  clamp(2.7rem, 7.2vw, 5.4rem);
  --t-h1:    clamp(2.2rem, 5.4vw, 4rem);
  --t-h2:    clamp(1.75rem, 3.6vw, 2.8rem);
  --t-h3:    clamp(1.1rem, 1.7vw, 1.4rem);
  --t-lede:  clamp(1.08rem, 1.5vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* geometria */
  --r:      18px;
  --r-sm:   12px;
  --r-lg:   30px;
  --r-pill: 999px;
  --pad:    clamp(1.15rem, 4.5vw, 4rem);
  --band:   clamp(3.5rem, 7.5vw, 7rem);
  --wrap:   1220px;
  --nav-h:  72px;

  /* sombras: leves, em camadas */
  --sh-1: 0 1px 2px rgba(17,26,20,.05), 0 2px 8px rgba(17,26,20,.04);
  --sh-2: 0 2px 4px rgba(17,26,20,.06), 0 12px 28px rgba(17,26,20,.09);
  --sh-3: 0 6px 12px rgba(17,26,20,.08), 0 26px 56px rgba(17,26,20,.14);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
/* NAO colocar overflow-x:hidden no body. Ele esconde o transbordamento em vez
   de evitar, e faz scrollWidth parar de acusar — ou seja, cega o proprio teste
   de QA. Se algo transbordar, o certo e consertar o elemento culpado. */

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--lime); color: #06210F; }

:focus-visible {
  outline: 3px solid var(--lime-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- estrutura */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 880px; }

.sec { padding-block: var(--band); position: relative; }

/* as quatro peles de secao */
.sec--white  { background: var(--white); }
.sec--sand   { background: var(--sand); }
.sec--forest { background: var(--forest); color: var(--on-dark); }
.sec--bark   { background: var(--bark); color: #FBF6F0; }

.sec--forest h1, .sec--forest h2, .sec--forest h3,
.sec--bark h1, .sec--bark h2, .sec--bark h3 { color: inherit; }

/* costura entre secoes claras */
.sec--sand + .sec--white, .sec--white + .sec--sand { border-top: 0; }

/* --------------------------------------------------------- rotulo/eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.1rem;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--lime); flex: 0 0 auto;
}
/* O hero nao e .sec--forest, entao escapava desta regra e ficava com o verde
   ESCURO (--lime-ink, feito para fundo branco) sobre o fundo quase preto do
   topo: 3,02:1 medido. E a primeira linha de texto da home. */
.hero .eyebrow { color: var(--lime); }
.hero .eyebrow::before { background: var(--lime); }
.sec--forest .eyebrow, .sec--bark .eyebrow { color: var(--lime); }
.sec--forest .eyebrow::before, .sec--bark .eyebrow::before { background: var(--lime); }
/* .phead tambem tem fundo escuro com foto e tambem nao e .sec--forest. Sao os
   TRES contextos escuros do site: .hero, .phead e .sec--forest/.sec--bark. */
.phead .eyebrow { color: var(--lime); }
.phead .eyebrow::before { background: var(--lime); }

/* ------------------------------------------------------------ tipos de bloco */
.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  font-weight: 400;
}
.sec--forest .lede, .sec--bark .lede { color: var(--on-dark-2); }

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.25; }

.prose { max-width: 68ch; }

/* destaque em verde dentro de titulo */
.hi { color: var(--lime-ink); }
.sec--forest .hi, .sec--bark .hi, .hero .hi { color: var(--lime); }

/* ------------------------------------------------------------------ botoes */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .82rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--lime-ink);
  color: #fff;
  font: inherit; font-weight: 800; font-size: .95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow: var(--sh-1);
}
.btn:hover { background: var(--lime-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--white); border-color: var(--lime); color: var(--lime-ink); }

.btn--on-dark { background: var(--lime); color: #06210F; }
.btn--on-dark:hover { background: #4BD973; }
.btn--ghost-dark {
  background: transparent; color: var(--on-dark);
  border-color: rgba(255,255,255,.28); box-shadow: none;
}
.btn--ghost-dark:hover { background: rgba(255,255,255,.09); border-color: var(--lime); color: #fff; }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* link com seta que desliza */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--lime-ink); font-weight: 800; font-size: .95rem;
  text-decoration: none;
}
.arrow-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.sec--forest .arrow-link, .sec--bark .arrow-link { color: var(--lime); }

/* ================================================================= NAVBAR */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  /* sem backdrop-filter: cria containing block e quebra position:fixed dos filhos */
}
.nav__in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 1.16rem; letter-spacing: -0.03em;
  flex: 0 0 auto;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }

.menu {
  display: flex; align-items: center; gap: .15rem;
  margin-inline-start: auto;
  list-style: none; padding: 0; margin-block: 0;
  min-width: 0;      /* item flex nao encolhe abaixo do conteudo sem isto */
}
.menu > li { position: relative; }

.menu__top {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem;
  border: 0; background: transparent;
  font: inherit; font-weight: 600; font-size: .94rem;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.menu__top:hover { color: var(--ink); background: var(--line-2); }
.menu__top[aria-current="page"], .menu li.is-active > .menu__top { color: var(--lime-ink); }
.menu__top .chev { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.menu li.is-open > .menu__top .chev { transform: rotate(180deg); }

/* sublinhado que cresce */
.menu__top::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .18rem;
  height: 2.5px; border-radius: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.menu__top:hover::after,
.menu li.is-active > .menu__top::after { transform: scaleX(1); }

/* submenu */
.submenu {
  position: absolute; top: calc(100% + .45rem); left: 0;
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  padding: .5rem;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.menu li.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

/* O ultimo submenu ancora pela DIREITA. Ancorado a esquerda com min-width de
   260px ele passava ~7px da borda da janela em telas de ~1180px e criava barra
   de rolagem horizontal no site inteiro — o menu esta em todas as paginas. */
.menu > li:last-child > .submenu { left: auto; right: 0; }

/* Abertura SEM JavaScript. O submenu comeca em opacity 0 e, se dependesse so
   da classe .is-open, um JS que nao carregasse deixaria aqueles links
   inalcançáveis. :hover cobre o mouse e :focus-within cobre o teclado — o JS
   passa a ser conveniencia (toque e clique), nao requisito. No celular o
   rodape carrega a navegacao inteira, que e a rede de seguranca de la. */
@media (min-width: 961px) {
  .menu li:hover > .submenu,
  .menu li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}

.submenu a {
  display: block; padding: .62rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .93rem;
  transition: background .18s, color .18s;
}
.submenu a small {
  display: block; font-weight: 500; font-size: var(--t-small);
  color: var(--ink-3); margin-top: .12rem; letter-spacing: 0;
}
.submenu a:hover { background: var(--lime-wash); color: var(--lime-ink); }
.submenu a[aria-current="page"] { background: var(--lime-wash); color: var(--lime-ink); }

/* idioma */
/* Sao LINKS entre duas URLs, nao um botao de JavaScript: cada idioma tem
   pagina propria, e e isso que permite hreflang e indexacao separada. */
.lang { display: flex; gap: 2px; background: var(--line-2); border-radius: var(--r-pill); padding: 3px; flex: 0 0 auto; }
/* idem: o idioma INATIVO ficava em 4,04:1 sobre o trilho cinza. --ink-3 nao
   alcanca o minimo da WCAG AA (4,5:1) para texto pequeno. */
.lang a {
  text-decoration: none;
  font-weight: 800; font-size: .78rem;
  padding: .3rem .62rem; border-radius: var(--r-pill);
  color: var(--ink-2); transition: background .18s, color .18s;
}
.lang a:hover { color: var(--ink); }
/* aceita qualquer valor: o marcador de "pagina atual" do menu tambem escreve
   aria-current nestes links, e prender a regra a um valor exato fazia o
   idioma ativo perder o realce justamente na home */
.lang a[aria-current] { background: var(--ink); color: #fff; }

/* hamburguer */
.burger {
  display: none;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 19px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2.5px;
  background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------ nav no celular */
@media (max-width: 960px) {
  .burger { display: flex; margin-inline-start: auto; order: 3; }
  .lang { order: 2; margin-inline-start: auto; }
  .burger { margin-inline-start: .5rem; }

  .menu {
    position: fixed; inset: var(--nav-h) 0 0 0;
    display: block;
    margin: 0; padding: .75rem var(--pad) 3rem;
    background: var(--white);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    border-top: 1px solid var(--line);
  }
  body.menu-open .menu { transform: translateX(0); }
  body.menu-open { overflow: hidden; }

  .menu > li { border-bottom: 1px solid var(--line-2); }
  .menu__top {
    width: 100%; justify-content: space-between;
    padding: 1.05rem .2rem; font-size: 1.12rem; font-weight: 800;
    color: var(--ink); border-radius: 0;
  }
  .menu__top::after { display: none; }

  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 .7rem .2rem;
    min-width: 0;
    display: none;
  }
  .menu li.is-open > .submenu { display: block; }
  .submenu a { padding: .6rem .2rem; }
}

/* =================================================================== HERO */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  /* minmax(0,1fr) e obrigatorio, nao enfeite: uma coluna de grade tem largura
     minima 'auto', ou seja, o max-content do conteudo. Sem o 0 explicito, a
     faixa de numeros empurra a coluna para ~660px num celular de 375px, e o
     overflow:hidden abaixo ESCONDE o estrago em vez de mostrar — inclusive do
     scrollWidth, que e como o QA mede. E o mesmo erro do min-width:0 em flex. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  background: var(--forest-2);
  color: var(--on-dark);
}
.hero__in, .phead__in { min-width: 0; }
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }

/* o filtro: escurece e puxa para o verde, para o texto branco sobreviver */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(8,26,15,.93) 0%, rgba(8,26,15,.78) 42%, rgba(8,26,15,.35) 78%, rgba(8,26,15,.25) 100%),
    linear-gradient(to top, rgba(8,26,15,.75) 0%, rgba(8,26,15,0) 45%);
}
.hero__in { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 6rem); }

.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: -0.045em;
  max-width: 17ch;
  margin-bottom: 1.4rem;
}
.hero .lede { color: #DCEAD9; max-width: 54ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }

/* faixa de numeros do hero */
.stats {
  display: grid; gap: clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.22);
  max-width: 780px;
}
.stat__n {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--lime);
}
.stat__l {
  margin-top: .45rem; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #A9C4A8;
}

/* ---------------------------------------------------- cabecalho de pagina */
.phead {
  position: relative; overflow: hidden;
  background: var(--forest-2); color: var(--on-dark);
  padding-block: clamp(3.25rem, 8vw, 6rem);
}
.phead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.phead__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,26,15,.94) 0%, rgba(8,26,15,.8) 55%, rgba(8,26,15,.5) 100%);
}
.phead__in { position: relative; z-index: 2; }
.phead h1 { font-size: var(--t-h1); max-width: 20ch; }
.phead .lede { color: #D3E5D2; margin-top: 1.1rem; }

/* migalhas */
.crumbs {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; font-size: var(--t-small); color: #9FBBA1;
}
.crumbs a { color: #9FBBA1; text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--lime); }
.crumbs span { opacity: .5; }

/* ================================================================= CARDS */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position: relative;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--sand-line); }

.sec--sand .card { background: var(--white); border-color: var(--sand-line); }
.sec--forest .card {
  background: var(--forest-3); border-color: var(--on-dark-line); color: var(--on-dark);
}
.sec--forest .card:hover { border-color: var(--lime); }

.card p { color: var(--ink-2); font-size: .97rem; }
.sec--forest .card p { color: var(--on-dark-2); }
.card h3 { margin-bottom: .55rem; }

/* card que é link inteiro */
a.card { text-decoration: none; color: inherit; display: block; }
a.card::after {
  content: ""; position: absolute; inset-inline-end: 1.15rem; inset-block-end: 1.15rem;
  width: 22px; height: 22px; opacity: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312752F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: opacity .25s, transform .25s var(--ease);
  transform: translateX(-6px);
}
a.card:hover::after { opacity: 1; transform: translateX(0); }

/* icone do card */
.ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--lime-wash); color: var(--lime-ink);
  margin-bottom: 1rem;
  transition: background .3s, transform .3s var(--ease);
}
.ico svg { width: 23px; height: 23px; stroke-width: 2; }
.card:hover .ico { transform: scale(1.07) rotate(-4deg); }
.ico--bark  { background: var(--bark-pale);  color: var(--bark); }
.ico--amber { background: var(--amber-wash); color: #96631A; }
.sec--forest .ico { background: rgba(53,196,95,.16); color: var(--lime); }

/* numero grande de card ordenado */
.card__n {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em;
  color: var(--lime-ink); margin-bottom: .5rem;
}
.sec--forest .card__n { color: var(--lime); }

/* ------------------------------------------------------------ card destaque */
.feature {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.feature__img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.feature__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* ------------------------------------------------------------------ listas */
.ilist { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.ilist li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .72rem 0; border-bottom: 1px solid var(--line);
}
.ilist li:last-child { border-bottom: 0; }
.ilist .tick { flex: 0 0 auto; width: 21px; height: 21px; color: var(--lime-ink); margin-top: .2rem; }
.sec--forest .ilist li { border-color: var(--on-dark-line); }
.sec--forest .ilist .tick { color: var(--lime); }

/* lista de links externos */
.linklist { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .35rem; }
.linklist a {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 700; font-size: .93rem;
  color: var(--ink); background: var(--line-2);
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.linklist a:hover { background: var(--lime-wash); color: var(--lime-ink); transform: translateX(4px); }
.linklist .src {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: -.02em;
}
.linklist a:hover .src { color: var(--lime-2); }

/* ------------------------------------------------------------------ tabela */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .82rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
th {
  background: var(--sand); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: var(--line-2); }

/* ------------------------------------------------------------------- selos */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .02em;
  background: var(--line-2); color: var(--ink-2);
}
.tag--lime  { background: var(--lime-wash);  color: var(--lime-ink); }
.tag--amber { background: var(--amber-wash); color: #8A5B15; }
.tag--bark  { background: var(--bark-pale);  color: var(--bark); }
.sec--forest .tag { background: rgba(255,255,255,.1); color: var(--on-dark-2); }
.sec--forest .tag--lime { background: rgba(53,196,95,.18); color: var(--lime); }

/* --------------------------------------------------------------- citacao */
.quote {
  border-left: 4px solid var(--lime);
  padding: .3rem 0 .3rem 1.4rem;
  font-size: var(--t-lede); font-weight: 600; line-height: 1.5;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- rodape */
.foot { background: var(--forest-2); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Com 4 colunas iguais a primeira fica com 234px, e as duas pilulas de perfil
   somam 240px — quebravam por 5px, empilhadas no desktop e lado a lado no
   celular, que e o contrario do que se espera. A primeira coluna carrega marca,
   descricao e perfis; as outras tres so listas curtas de links.
   960px e nao 1020px de proposito: o auto-fit ja consegue espremer 4 colunas de
   ~211px por volta de 1010px, e nessa faixa estreita as pilulas voltariam a
   quebrar. Entrar antes cobre o vao. */
@media (min-width: 960px) {
  .foot__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
}
.foot h2 {
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime); margin-bottom: .9rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot a { color: var(--on-dark-2); text-decoration: none; font-size: .93rem; font-weight: 600; transition: color .18s; }
.foot a:hover { color: var(--lime); }

/* perfis sociais do grupo.
   Prefixo `.foot ` obrigatorio: `.foot ul` (0,1,1) tem especificidade MAIOR que
   `.social` (0,1,0) e venceria mesmo estando antes no arquivo — a grade do
   rodape sobrescreveria o flex e os dois botoes empilhariam. */
.foot .social {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 1.25rem 0 0;
}
.foot .social a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .78rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid var(--on-dark-line);
  color: var(--on-dark); font-size: var(--t-small); font-weight: 700;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.foot .social svg { width: 17px; height: 17px; flex: none; }
.foot .social a:hover {
  background: rgba(53,196,95,.14); border-color: var(--lime);
  color: var(--lime); transform: translateY(-2px);
}

/* identificadores externos */
.ids-ext { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--on-dark-line); }
.ids-ext ul {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; padding: 0; margin: 0;
}
.ids-ext a {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .42rem .85rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid var(--on-dark-line);
  color: var(--on-dark); font-size: var(--t-small); font-weight: 700;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.ids-ext a span { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; color: var(--on-dark-2); }
.ids-ext a:hover { background: rgba(53,196,95,.14); border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.ids-ext a:hover span { color: var(--lime); }

.foot__bar {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: var(--t-small); color: #86A28A;
}
.foot__brand { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.foot__brand img { width: 42px; height: 42px; border-radius: 10px; }
.foot__brand b { font-size: 1.1rem; letter-spacing: -.03em; }

/* ============================================================== ANIMACAO */
/* Revelacao SO por transform. Se o JS falhar, o conteudo continua visivel —
   apenas 22px deslocado. Nunca usar opacity aqui. */
:root.js-anim .reveal {
  transform: translateY(22px);
  transition: transform .7s var(--ease);
}
:root.js-anim .reveal.is-in { transform: none; }

:root.js-anim .stagger > * {
  transform: translateY(26px);
  transition: transform .65s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
:root.js-anim .stagger.is-in > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root.js-anim .reveal, :root.js-anim .stagger > * { transform: none; transition: none; }
}

/* barra de progresso de leitura */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
  background: var(--lime); width: 0;
  transition: width .1s linear;
}

/* ------------------------------------------------------------- utilitarios */
.u-center { text-align: center; }
.u-center .lede, .u-center .prose { margin-inline: auto; }
.u-mt   { margin-top: clamp(2rem, 4vw, 3.25rem); }
.u-mt-s { margin-top: 1.25rem; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================== IDIOMA
   BLOCO FINAL DE PROPOSITO. Regras transversais precisam vencer empate por
   ordem — se alguem "organizar" o CSS e mover isto para cima, PT e EN passam
   a aparecer juntos. Ja aconteceu. */
:root [data-l] { display: none; }
:root[data-lang="pt"] [data-l="pt"],
:root[data-lang="en"] [data-l="en"] { display: revert; }

/* ------------------------------------------------ pular para o conteudo */
/* Fica fora da tela ate receber foco — nao usa display:none nem
   visibility:hidden, que tirariam o link da ordem de tabulacao e o tornariam
   inalcancavel justamente para quem precisa dele. */
.skip {
  position: absolute; left: .75rem; top: -100px; z-index: 100;
  padding: .8rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--ink); color: #fff;
  font-weight: 800; font-size: .95rem; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus-visible { top: 0; }

/* ------------------------------------------------------------ impressao */
/* Papel nao tem menu, rodape de navegacao nem botao. O que importa numa
   impressao e o texto e os identificadores — por isso o href dos links de
   conteudo e revelado ao lado do texto: no papel, "clique aqui" nao leva a
   lugar nenhum. */
@media print {
  .nav, .foot, .skip, .progress, .btn, .btn-row,
  .phead__bg, .phead__veil, .hero__bg, .lang, .burger { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .sec, .stratum, .phead { padding-block: 0 !important; background: #fff !important; color: #000 !important; }
  .wrap { max-width: none; padding-inline: 0; }
  .phead { min-height: 0 !important; }
  .phead h1 { color: #000 !important; }

  /* a revelacao por scroll nunca dispara na impressao: sem isto, tudo sai
     deslocado 22px para baixo */
  .reveal, :root.js-anim .reveal { transform: none !important; }

  /* mostra o destino dos links de conteudo, mas nao o de ancoras internas */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }

  .card, .linha, .projlist li, .pub, .person {
    break-inside: avoid; box-shadow: none !important; border-color: #bbb !important;
  }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 60mm !important; }
}


/* =========================================================================
   GNAFOR — conteúdo migrado
   O texto das páginas internas vem do site anterior, extraído inteiro pelo
   build. Isso preserva DOIs, nomes de projeto e números já verificados: nada
   foi redigitado. Este arquivo veste aquelas classes com a linguagem nova.
   ========================================================================= */

/* -------------------------------------------------------- grade de cartões */
.cards {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.cards .card { margin: 0; }

/* ------------------------------------------------------ linhas de pesquisa */
.linhas { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); display: grid; gap: .6rem; }
.linha {
  display: grid; gap: .35rem 1.75rem;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  padding: 1.35rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.linha:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--sand-line); }
/* A marcacao usa .num e h3.h3 — nao .n/.t. Estilizar os nomes errados deixava
   o numero sem a pastilha verde e ninguem percebia, porque a grade sozinha ja
   posicionava tudo. */
.linha .num {
  grid-row: span 2;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--lime-ink); line-height: 1;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--lime-wash);
}
.linha h3 { line-height: 1.25; }
.linha p { color: var(--ink-2); font-size: .97rem; margin-bottom: 0; }
.linha a { color: var(--lime-ink); font-weight: 700; text-underline-offset: 3px; }
.linha a:hover { color: var(--lime-2); }
.sec--sand .linha { border-color: var(--sand-line); }

@media (min-width: 880px) {
  .linha { grid-template-columns: 62px minmax(0, 22ch) minmax(0, 1fr); align-items: center; }
  .linha .num { grid-row: 1; }
  .linha p { grid-column: 3; }
}

/* --------------------------------------------------------------- projetos */
.projgrid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.projyear {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 1rem; padding-bottom: .7rem;
  border-bottom: 3px solid var(--lime);
  display: flex; align-items: baseline; gap: .5rem;
}
.projyear span { font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.projlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.projlist li {
  display: grid; gap: .3rem;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--lime);
  border-radius: var(--r-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.projlist li:hover { transform: translateX(3px); box-shadow: var(--sh-1); }
.sec--sand .projlist li { border-color: var(--sand-line); border-inline-start-color: var(--lime); }

.ptipo {
  justify-self: start;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime-ink); padding: .18rem .55rem; border-radius: var(--r-pill);
  background: var(--lime-wash);
}
.ptit { font-weight: 700; letter-spacing: -.015em; line-height: 1.35; font-size: .99rem; }
.pmeta { font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; }

.projnote {
  margin-top: 1.75rem; padding: 1.1rem 1.3rem;
  background: var(--amber-wash); border-radius: var(--r-sm);
  font-size: var(--t-small); color: #7A5314; max-width: 78ch;
}
.projnote strong { color: #5E3F0D; }

/* ---------------------------------------- nota de rodape de secao */
/* Para o que precisa constar mas nao precisa ser lido primeiro: regra de
   consentimento, ressalva de metodo, aviso de escopo. Fica separada por um
   filete, em corpo menor — presente sem disputar atencao com o conteudo. */
.notarodape {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 78ch;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-3);
}
.sec--sand .notarodape { border-top-color: var(--sand-line); }
.sec--forest .notarodape { border-top-color: var(--on-dark-line); color: var(--on-dark-2); }

/* ------------------------------------- campo agrostologico: fotos reais */
/* minmax(min(100%, 320px), 1fr) e nao minmax(320px, 1fr): sem o min() a faixa
   nao encolhe abaixo de 320px e a grade estoura em tela de 360px. Mesma
   armadilha do .vagas e do .hero. */
.fotos {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.fotos figure { margin: 0; }
.fotos img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1344 / 768; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line);
}
.fotos figcaption {
  margin-top: .6rem; line-height: 1.5;
  font-size: var(--t-small); color: var(--ink-3);
}

/* citacao da placa da propria unidade — e fonte primaria, nao enfeite */
.citaplaca {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 4px solid var(--lime); max-width: 68ch;
}
.citaplaca p {
  font-size: var(--t-lede); line-height: 1.5;
  letter-spacing: -.015em; color: var(--ink);
}
.citaplaca cite {
  display: block; margin-top: .7rem; font-style: normal;
  font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3);
}

/* ------------------------------------------------- alunos: vagas no grupo */
.vagas {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  /* minmax(0,...) nas DUAS faixas: o numero grande e o paragrafo tem largura
     minima automatica maior que a tela do celular, e sem o 0 explicito a
     grade estoura para fora do wrap. Mesmo motivo do .hero. */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 1.1rem 1.5rem; align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--lime);
  border-radius: var(--r);
}
.sec--sand .vagas { border-color: var(--sand-line); border-left-color: var(--lime); }

.vagas__num {
  display: grid; justify-items: center; gap: .2rem;
  padding-right: 1.4rem; border-right: 1px solid var(--line);
}
.vagas__num b {
  font-size: clamp(2.3rem, 6vw, 3.1rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; color: var(--lime-ink);
}
.vagas__num span {
  font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); text-align: center;
}
.vagas__txt p { font-size: var(--t-small); color: var(--ink-2); max-width: 64ch; }
.vagas__txt strong { color: var(--ink); font-weight: 800; }
.vagas__txt .btn { margin-top: 1rem; }

@media (max-width: 620px) {
  .vagas { grid-template-columns: minmax(0, 1fr); }
  .vagas__num {
    grid-auto-flow: column; justify-items: start; align-items: baseline; gap: .5rem;
    padding-right: 0; border-right: 0;
    padding-bottom: .85rem; border-bottom: 1px solid var(--line);
  }
  .vagas__num span { text-align: left; }
}

/* ------------------------------------------------------------------ equipe */
.team-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.team {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.person {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.portrait {
  aspect-ratio: 4/5; background: var(--sand-2);
  display: grid; place-items: center; overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.initials { font-size: 2rem; font-weight: 800; color: var(--bark-soft); letter-spacing: -.03em; }
.person .nome { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; padding: 1rem 1.1rem .2rem; line-height: 1.3; }
.person .papel {
  padding: 0 1.1rem; margin: 0;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lime-ink);
}
.person .tema { padding: .5rem 1.1rem 0; margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.person .ids { list-style: none; display: flex; gap: .4rem; padding: .85rem 1.1rem 1.1rem; margin: 0; }
.person .ids a {
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .04em;
  text-decoration: none; color: var(--ink-2);
  background: var(--line-2); padding: .28rem .6rem; border-radius: var(--r-pill);
  transition: background .2s, color .2s;
}
.person .ids a:hover { background: var(--lime-wash); color: var(--lime-ink); }

/* ------------------------------------------------------ produção: gráfico */
.chartwrap { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.chartbox {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.15rem, 2.5vw, 1.9rem);
  overflow-x: auto;
}
.sec--sand .chartbox { border-color: var(--sand-line); }
.chartbox { position: relative; }
.chart { display: block; width: 100%; min-width: 560px; height: auto; }

/* Barras desenhadas por JS: produção do GRUPO por tipo, com 2025 e 2026
   empilhados. Mexer nos nomes de classe quebra o gráfico. */
.chart .bar { transition: fill .18s; }
.chart .bar--a { fill: var(--lime-2); }   /* 2025 */
.chart .bar--b { fill: var(--lime-ink); } /* 2026 */
.chart .bar:hover { fill: var(--amber); }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .baseline { stroke: var(--ink-3); stroke-width: 1.5; }
.chart text { font-family: var(--sans); font-weight: 700; }
.chart .xtick { font-size: 11.5px; fill: var(--ink-3); }
.chart .rotulo { font-size: 13.5px; font-weight: 700; fill: var(--ink); letter-spacing: -.015em; }
.chart .dlabel { font-size: 14px; font-weight: 800; fill: var(--lime-ink); }
/* barras horizontais: o quadro nao precisa de largura minima de 560px */
.chart { min-width: 520px; }

.chartnote { margin-top: .9rem; font-size: var(--t-small); color: var(--ink-3); max-width: 74ch; }
.charttip {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--ink); color: #fff;
  padding: .32rem .6rem; border-radius: 8px;
  font-size: var(--t-micro); font-weight: 700; white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.charttip.is-on { opacity: 1; }

.tabletoggle {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); background: var(--white);
  padding: .5rem 1rem; border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: var(--t-small); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.tabletoggle:hover { background: var(--lime-wash); border-color: var(--lime); color: var(--lime-ink); }
.charttable { margin-top: 1rem; }

/* ------------------------------------------------- produção: publicações */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: clamp(1.5rem,3vw,2.25rem) 0 1.5rem; }
.filters button {
  border: 1px solid var(--line); background: var(--white);
  padding: .48rem 1rem; border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: var(--t-small); color: var(--ink-2);
  cursor: pointer; transition: all .2s;
}
.filters button:hover { border-color: var(--lime); color: var(--lime-ink); }
.filters button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.pubs { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
/* Sem coluna reservada para o ano: o ano vive no cabecalho .yearblock, nao
   dentro do item. Uma grade de 62px aqui espremia o titulo em ~60px e o
   quebrava letra a letra no celular. */
.pub {
  display: grid; gap: .3rem;
  padding: 1rem 1.15rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.pub:hover { transform: translateX(3px); box-shadow: var(--sh-1); border-color: var(--sand-line); }
.pub > * { min-width: 0; }
.pub .t { font-weight: 700; line-height: 1.4; letter-spacing: -.012em; font-size: .99rem; }
.pub .venue { font-size: var(--t-small); color: var(--ink-2); font-style: normal; }
.pub .meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: var(--t-micro); }
/* --ink-2 e nao --ink-3: medido em 18/08/2026, ink-3 sobre line-2 da 4,04:1 e
   o minimo da WCAG AA para texto pequeno e 4,5:1. A 12px em caixa alta este
   rotulo e o caso mais dificil de ler da pagina. */
.pub .kind {
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); background: var(--line-2);
  padding: .16rem .5rem; border-radius: var(--r-pill);
}
.pub .doi {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--lime-ink); text-decoration: none; font-weight: 700;
  word-break: break-all;
}
.pub .doi:hover { text-decoration: underline; }
.pub .nodoi { font-size: var(--t-micro); color: var(--ink-3); font-style: italic; }
.pub .fullname { font-size: var(--t-micro); color: var(--ink-3); }

/* filtro de publicações: o JS marca is-hidden / is-empty */
.pub.is-hidden { display: none; }
.yearblock.is-empty { display: none; }

/* .yearblock e o AGRUPADOR (contem .y e a lista .pubs), nao o rotulo. Estilizar
   o agrupador como se fosse o rotulo jogava o ano e a lista lado a lado. */
.yearblock { margin-top: 2rem; }
.yearblock:first-child { margin-top: 0; }
.yearblock .y {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: .75rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--lime-ink);
}
.yearblock .y::after {
  content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--line);
}

.record { margin-top: clamp(2rem, 4vw, 3rem); }
.mark {
  display: grid; gap: .2rem;
  padding: 1.05rem 1.2rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mark--xl { border-inline-start: 3px solid var(--amber); }
.mark .k { font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mark .v { font-weight: 700; letter-spacing: -.015em; }
.related { margin-top: 1.25rem; font-size: var(--t-small); color: var(--ink-3); }

/* ------------------------------------------------ ferramentas: demo do app */
.appdemo {
  display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.phone {
  justify-self: center;
  width: min(300px, 82vw);
  padding: 12px;
  background: #10160F;
  border-radius: 38px;
  box-shadow: var(--sh-3), inset 0 0 0 1.5px #2C3A2C;
}
.phone-screen {
  border-radius: 27px; overflow: hidden; background: #000;
  aspect-ratio: 460 / 940;
}
/* mostrar/esconder no MESMO nivel de especificidade, e a de esconder por
   ultimo. Se a regra de dimensionar declarar display sozinha, ela vence e as
   seis telas aparecem empilhadas. Ja aconteceu. */
.phone-screen .appshot { width: 100%; height: 100%; object-fit: cover; display: none; }
.phone-screen .appshot.is-on { display: block; }

.appsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: passo; }
.appsteps li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem 1.1rem; border-radius: var(--r-sm);
  background: var(--white); border: 1px solid var(--line);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.appsteps li:hover { transform: translateX(3px); border-color: var(--lime); }
/* o JS marca is-on E aria-pressed; aceitar os dois evita que uma mudanca de
   um lado apague o destaque sem ninguem perceber */
.appsteps li.is-on,
.appsteps li[aria-pressed="true"] { background: var(--lime-wash); border-color: var(--lime); }
.appsteps li::before {
  counter-increment: passo; content: counter(passo);
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
  background: var(--ink); color: #fff;
}
.appsteps li.is-on::before,
.appsteps li[aria-pressed="true"]::before { background: var(--lime-ink); }
.appsteps .st { font-weight: 700; font-size: .96rem; letter-spacing: -.015em; }
.appsteps .sn { display: block; font-weight: 500; font-size: var(--t-small); color: var(--ink-2); margin-top: .1rem; }
.appnote { margin-top: 1.25rem; font-size: var(--t-small); color: var(--ink-3); max-width: 70ch; }

/* ------------------------------------------------------------------ contato */
.contact-grid {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact-line { display: grid; gap: .2rem; }
.contact-line .k { font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.contact-line .v { font-weight: 700; letter-spacing: -.015em; }
.contact-line a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.contact-line a:hover { color: var(--lime); border-color: var(--lime); }

/* ------------------------------------------------------------------ marca */
.brandplate {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.brandplate img { margin-inline: auto; max-width: min(420px, 100%); }
.brandplate .note {
  margin-top: 1rem; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

/* selos por tema: no site claro so o claro aparece */
.seal-d { display: none; }

/* --------------------------------------------------------------- diversos */
.figure { margin: clamp(1.5rem,3vw,2.25rem) 0 0; }
.figure img { border-radius: var(--r); }
.note { font-size: var(--t-small); color: var(--ink-3); }
.doi { font-family: var(--mono); }

/* o antigo dossel em canvas foi aposentado: agora o lugar dele é a fotografia */
.sward-band, .sward, .hero-figures, .hero-lockup { display: none; }