/* ==========================================================================
   Arapyaú 2026 — estilos
   Escala: desktop/telas grandes usam --u = 1/1920 da largura da viewport
   (tudo proporcional à largura). Abaixo de 1024px usa a base mobile 540.
   ========================================================================== */

/* Fonte da marca: Seiva (variável). Um arquivo cobre todos os estilos:
   eixo wght 90–1000 (Regular 400 · Medium 550 · Bold 770) e
   eixo opsz 12–48 (Texto 12 · Display 24 · Poster 48).
   woff2 = navegadores atuais; woff = navegadores antigos. Fallback: fonte do sistema. */
@font-face { font-family: "Seiva"; src: url("../assets/fonts/SeivaVariable.woff2") format("woff2"), url("../assets/fonts/SeivaVariable.woff") format("woff"); font-weight: 90 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Seiva"; src: url("../assets/fonts/SeivaVariable-Italic.woff2") format("woff2"), url("../assets/fonts/SeivaVariable-Italic.woff") format("woff"); font-weight: 90 1000; font-style: italic; font-display: swap; }

:root {
  /* Cores da marca */
  --laranja: #ED7102;
  --vinho: #8A264F;
  --verde: #00745D;
  --lima: #C1D83F;
  --violeta: #443D91;
  --vermelho: #E74124;
  --azul: #1D1E55;
  --fundo: #EFF5CF;
  --pessego: #FAD4B3; /* laranja + branco 70% (fundo editorial da Homepage) */
  --branco: #FFFFFF;
  --preto: #000000;

  --f-text: "Seiva", system-ui, sans-serif;
  --f-display: "Seiva", system-ui, sans-serif;
  --w-medium: 550; /* Seiva Medium */
  --w-bold: 770;   /* Seiva Bold */

  /* Unidade de layout (1 px do Figma) */
  --u: min(calc(100vw / 540), 1.25px);
  --side: calc(30 * var(--u));      /* margem editorial mobile */
  --bleed: calc(15 * var(--u));     /* near-bleed de imagens mobile */

  /* Tipografia mobile (540) */
  --t-display: calc(48 * var(--u));
  --lh-display: 1.042;
  --t-h2: calc(40 * var(--u));
  --t-card: max(18px, calc(27 * var(--u)));
  --t-body: max(16px, calc(20 * var(--u)));
  --t-small: max(14px, calc(15 * var(--u)));
  --header-h: calc(135 * var(--u));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
}

@media (min-width: 1024px) {
  :root {
    --u: calc(100vw / 1920);
    --side: calc(60 * var(--u));
    --bleed: calc(30 * var(--u));
    --t-display: calc(80 * var(--u));
    --lh-display: 1.0375;           /* 80/83 */
    --t-h2: calc(52 * var(--u));    /* 52/54 */
    --t-card: max(17px, calc(27 * var(--u)));
    --t-body: max(15px, calc(20 * var(--u)));
    --t-small: max(14px, calc(20 * var(--u)));
    --header-h: calc(120 * var(--u));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--laranja); }
body {
  margin: 0;
  background: var(--laranja);
  color: var(--preto);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.3;
  font-feature-settings: "onum" 1, "pnum" 1;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 12;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
b, strong { font-weight: var(--w-bold); }
h1, h2, h3 { margin: 0; font-weight: var(--w-medium); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: var(--side); top: -100px; z-index: 1000;
  background: var(--azul); color: var(--branco); padding: 12px 18px; font-weight: var(--w-bold);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .on-dark :focus-visible { outline-color: var(--branco); }

/* Tipos ------------------------------------------------------------------ */
.display {
  font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium);
  font-size: var(--t-display); line-height: var(--lh-display);
  text-transform: uppercase; color: var(--vinho);
}
.h2 {
  font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium);
  font-size: var(--t-h2); line-height: 1.04; text-transform: uppercase; color: var(--vinho);
}
.eyebrow {
  font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: var(--t-small);
  text-transform: uppercase; color: var(--vinho); display: block;
}
.cta {
  font-weight: var(--w-bold); text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
}
.cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--laranja); color: var(--branco);
}
.header-bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--side);
}
.logo { display: block; width: calc(216 * var(--u)); min-width: 150px; line-height: 0; }
.logo img { width: 100%; height: auto; }

.nav { display: none; }
.menu-toggle {
  appearance: none; background: none; border: 0; color: var(--branco); cursor: pointer;
  width: 48px; height: 48px; margin-right: -10px; display: grid; place-items: center;
}
.menu-toggle svg { width: 30px; height: 30px; overflow: visible; }
.menu-toggle line { stroke: currentColor; stroke-width: 2; transition: transform .45s var(--ease-out), opacity .2s; transform-origin: 15px 15px; }
.menu-open .menu-toggle .l1 { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle .l2 { opacity: 0; }
.menu-open .menu-toggle .l3 { transform: translateY(-8px) rotate(-45deg); }

/* Menu mobile: abre como uma onda que nasce no botão */
.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--laranja); color: var(--branco);
  padding: calc(var(--header-h) + 30 * var(--u)) var(--side) 40px;
  overflow-y: auto; visibility: hidden;
  clip-path: circle(0px at calc(100% - var(--side) - 14px) calc(var(--header-h) / 2));
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { margin-bottom: calc(36 * var(--u)); }
.mobile-menu a { text-decoration: none; display: inline-block; padding: 2px 0; font-size: calc(30 * var(--u)); line-height: 1.17; }
.mobile-menu span.top { display: inline-block; padding: 2px 0; font-size: calc(30 * var(--u)); line-height: 1.17; }
.mobile-menu .group > a, .mobile-menu .top { font-weight: var(--w-bold); }
.mobile-menu .lang b { font-weight: var(--w-bold); }

@media (min-width: 1024px) {
  .menu-toggle, .mobile-menu { display: none; }
  .nav { display: flex; align-items: flex-start; flex: 1; justify-content: space-between; margin-left: calc(607 * var(--u)); }
  .nav > ul { display: flex; gap: calc(50 * var(--u)); list-style: none; margin: 0; padding: 0; }
  .nav a, .nav button {
    font: 770 var(--t-small)/1.3 var(--f-text); color: inherit; text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .nav .lang { font-weight: 400; }
  .nav .lang b { font-weight: var(--w-bold); }
  .nav a:hover, .nav button:hover { text-decoration: underline; text-underline-offset: 4px; }
  /* painel do menu desktop: o header cresce e revela as colunas */
  .sub {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: calc(26 * var(--u));
    height: 0; overflow: hidden;
  }
  .sub a { font-weight: 400 !important; display: block; max-width: calc(130 * var(--u)); }
  .nav-col { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
  .header-drawer { height: 0; overflow: hidden; }
}

/* Main / páginas --------------------------------------------------------- */
main { display: block; }
.transition-main { transform-origin: 50% 0; }

.hero {
  margin: 0 var(--bleed);
  height: calc(990 * var(--u));
  overflow: hidden; position: relative;
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .hero { height: calc(842 * var(--u)); } }

.hero-title {
  color: var(--branco); padding: calc(20 * var(--u)) var(--side) calc(18 * var(--u));
}
@media (min-width: 1024px) {
  .hero-title { padding: calc(21 * var(--u)) var(--side) calc(17 * var(--u)); line-height: 1; }
}
.hero-title .display { color: var(--branco); line-height: 1; }

.panel { background: var(--pessego); margin: 0 var(--bleed); }
.panel--fundo { background: var(--fundo); }
.wrap { padding: 0 calc(var(--side) - var(--bleed)); }

.divider { border: 0; border-top: max(1px, calc(2 * var(--u))) solid var(--vinho); margin: 0; }

/* Intro */
.intro { display: grid; padding-top: calc(30 * var(--u)); padding-bottom: calc(60 * var(--u)); gap: calc(30 * var(--u)); }
.intro .art { width: calc(288 * var(--u)); justify-self: end; }
@media (min-width: 1024px) {
  .intro { grid-template-columns: calc(1068 * var(--u)) 1fr; padding-bottom: calc(122 * var(--u)); }
  .intro .art { width: calc(370 * var(--u)); margin: calc(126 * var(--u)) calc(131 * var(--u)) 0 0; }
}

/* Mais recentes (carrossel) */
.recent { padding: calc(60 * var(--u)) 0 calc(60 * var(--u)); }
.recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(60 * var(--u)); }
.arrows { display: flex; gap: calc(4 * var(--u)); }
.arrows button {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; color: var(--vinho); font-size: calc(40 * var(--u)); line-height: 1;
}
.arrows button:disabled { opacity: .35; cursor: default; }
.arrows svg { width: max(22px, calc(30 * var(--u))); height: auto; }
.cards {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(428 * var(--u));
  gap: calc(30 * var(--u));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * (var(--side) - var(--bleed))); padding: 0 calc(var(--side) - var(--bleed));
  scroll-padding: 0 calc(var(--side) - var(--bleed));
}
.cards::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; }
.card a { text-decoration: none; display: block; }
.card .thumb { aspect-ratio: 428 / 270; overflow: hidden; margin-bottom: calc(30 * var(--u)); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; margin: 0 0 calc(30 * var(--u)); }
.card p { font-size: var(--t-body); line-height: 1.3; }
.card a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) { .cards { grid-auto-columns: calc(480 * var(--u)); } .card .thumb { aspect-ratio: 480/600; } }

/* Nosso olhar */
.olhar { display: grid; gap: calc(30 * var(--u)); padding: calc(45 * var(--u)) 0 calc(60 * var(--u)); }
.olhar .links { list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0; }
.olhar .links li { border-top: max(1px, calc(2 * var(--u))) solid var(--vinho); }
.olhar .links a { display: block; padding: calc(12 * var(--u)) 0; min-height: 44px; font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: var(--t-card); text-decoration: none; }
.olhar .links a:hover { color: var(--vinho); }
@media (min-width: 1024px) {
  .olhar { grid-template-columns: calc(914 * var(--u)) calc(581 * var(--u)); padding: calc(79 * var(--u)) 0 calc(90 * var(--u)); }
  .olhar .links a { padding: calc(14 * var(--u)) 0 calc(16 * var(--u)); }
}

.photo { height: calc(498 * var(--u)); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .photo { height: calc(900 * var(--u)); } }

/* Blocos com ilustração */
.feature { position: relative; overflow: hidden; min-height: calc(498 * var(--u)); display: grid; }
.feature > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .txt { position: relative; padding: calc(45 * var(--u)) var(--side) calc(45 * var(--u)); max-width: calc(380 * var(--u)); align-self: start; }
.feature .txt p { margin: calc(26 * var(--u)) 0; }
.feature--verde { background: #4F7552; color: var(--branco); }
.feature--verde .display { color: var(--branco); }
.feature--lima { background: var(--lima); color: var(--azul); }
.feature--lima .display { color: var(--azul); }
.feature--lima .txt { justify-self: end; }
@media (min-width: 1024px) {
  .feature { min-height: calc(540 * var(--u)); }
  .feature .txt { padding: calc(72 * var(--u)) calc(30 * var(--u)); max-width: none; width: calc(628 * var(--u)); }
  .feature--lima .txt { justify-self: start; margin-left: calc(915 * var(--u)); width: calc(640 * var(--u)); padding-top: calc(117 * var(--u)); }
}

/* Artigo */
.article { display: grid; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) 0 calc(60 * var(--u)); }
.article .hero-art { margin: 0 calc(-1 * (var(--side) - var(--bleed))); aspect-ratio: 882 / 630; overflow: hidden; }
.article .hero-art img { width: 100%; height: 100%; object-fit: cover; }
.article .lead { font-size: max(18px, calc(27 * var(--u))); line-height: 1.11; margin-top: calc(26 * var(--u)); }
.article .by { color: var(--vermelho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: max(18px, calc(27 * var(--u))); margin-top: calc(30 * var(--u)); }
.article time { color: var(--vermelho); display: block; margin-top: calc(20 * var(--u)); font-size: var(--t-small); }
.article .body p + p { margin-top: 1.3em; }
.article .body { margin-top: calc(40 * var(--u)); }
.article .meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: calc(60 * var(--u)); flex-wrap: wrap; }
.article .tags { color: var(--laranja); color: #B85600; } /* laranja escurecido p/ contraste AA no fundo claro */
.article .more { color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: max(18px, calc(27 * var(--u))); font-weight: var(--w-medium); text-transform: uppercase; }
@media (min-width: 1024px) {
  .article { grid-template-columns: calc(882 * var(--u)) calc(733 * var(--u)); gap: calc(30 * var(--u)); padding: calc(60 * var(--u)) 0 calc(60 * var(--u)); }
  .article .hero-art { margin: 0 0 0 calc(3 * var(--u)); align-self: start; }
  .article .display { font-size: var(--t-h2); line-height: 1.04; }
}

/* Footer ----------------------------------------------------------------- */
.site-footer { color: var(--branco); padding: 0 var(--side) calc(40 * var(--u)); font-size: var(--t-small); line-height: 1.3; }
.site-footer .rule { border: 0; border-top: max(1px, calc(4 * var(--u))) solid var(--branco); margin: 0 0 calc(30 * var(--u)); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(30 * var(--u)); }
.foot-grid .logo { grid-column: 1 / -1; }
.social { display: flex; gap: calc(20 * var(--u)); grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.social img { height: calc(28 * var(--u)); min-height: 22px; width: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer b { font-weight: var(--w-bold); }
.copy { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .site-footer { padding: calc(60 * var(--u)) var(--side) calc(52 * var(--u)); }
  .foot-grid { grid-template-columns: calc(915 * var(--u)) calc(305 * var(--u)) calc(305 * var(--u)) 1fr; row-gap: calc(46 * var(--u)); column-gap: 0; }
  .foot-grid .logo { grid-column: auto; }
  .social { grid-column: auto; align-self: start; gap: calc(16 * var(--u)); }
  .copy { grid-column: 1 / 3; }
}

/* Revelação de imagens em máscara (js/reveal.js) ------------------------- */
.rv { position: relative; overflow: hidden; }
.rv > img { will-change: transform; }

/* Hero da home: floresta em shader --------------------------------------- */
.hero--forest { background: #41389a; }
.hero--forest > img { image-rendering: pixelated; transition: opacity .4s; }
.hero--forest .forest-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hero--forest .forest-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hero--forest.is-live > img { opacity: 0; }
/* primeira dobra: banner + título preenchem a tela (o JS mede o título em --hero-title-h) */
.hero--forest {
  height: calc(100vh - var(--header-h) - var(--hero-title-h, 120px));
  height: calc(100svh - var(--header-h) - var(--hero-title-h, 120px));
  min-height: 260px;
}
@media (max-width: 1023px) { .hero--forest { margin: 0; } }

/* Popup newsletter -------------------------------------------------------- */
.popup { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.popup[hidden] { display: none; }
.popup-backdrop { position: absolute; inset: 0; background: rgba(237, 113, 2, .3); }
.popup-box {
  position: relative; width: min(100%, max(320px, calc(640 * var(--u)))); max-height: calc(100svh - 32px); overflow: auto;
  background: var(--vermelho); color: var(--branco);
  padding: max(16px, calc(30 * var(--u))) max(16px, calc(30 * var(--u))) max(24px, calc(40 * var(--u)));
}
.popup-img { width: 100%; aspect-ratio: 580 / 295; object-fit: cover; margin-bottom: max(16px, calc(35 * var(--u))); }
.popup-t { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: max(20px, calc(27 * var(--u))); line-height: 1.11; margin-bottom: max(12px, calc(26 * var(--u))); }
.popup-box p { font-size: var(--t-body); line-height: 1.3; }
.popup-cta { display: inline-block; margin-top: max(16px, calc(26 * var(--u))); font-weight: var(--w-bold); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.popup-close {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 0; color: var(--branco); cursor: pointer;
}
.popup-close svg { width: 16px; height: 16px; }
.popup :focus-visible { outline-color: var(--branco); }

/* Fade up do conteúdo ---------------------------------------------------- */
.js [data-fade] { opacity: 0; }

/* Overlay de transição (persistente, fora do container do swup) ---------- */
.tx {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden;
}
.tx.is-active { visibility: visible; pointer-events: auto; cursor: progress; }
.tx-bg { position: absolute; inset: 0; background: var(--laranja); opacity: 0; }
.tx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .menu-toggle line { transition: none; }
}

/* Design system ---------------------------------------------------------- */
.ds code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.ds-sec { padding: calc(60 * var(--u)) 0 calc(90 * var(--u)); }
.ds-sec > .h2 { margin-bottom: calc(30 * var(--u)); }
.ds-lead { max-width: calc(885 * var(--u)); min-width: min(100%, 320px); margin-bottom: calc(60 * var(--u)); }
.ds-note { margin-top: calc(60 * var(--u)); max-width: calc(885 * var(--u)); min-width: min(100%, 320px); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, calc(275 * var(--u))), 1fr)); gap: calc(30 * var(--u)); }
.sw { display: grid; gap: 4px; }
.sw .chip { aspect-ratio: 275 / 180; display: block; margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sw span:last-child { font-size: var(--t-small); opacity: .75; }
.type-grid, .cols2 { display: grid; gap: calc(60 * var(--u)); }
.type-grid .h2, .type-grid .card-t { margin-top: calc(30 * var(--u)); }
.type-grid .h2:first-child { margin-top: 0; }
.card-t { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; }
.spec { font-size: var(--t-small); color: var(--vinho); margin: 8px 0 calc(30 * var(--u)); }
.scale { list-style: none; margin: calc(60 * var(--u)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(30 * var(--u)); align-items: flex-end; }
.scale li { display: grid; gap: 6px; font-size: var(--t-small); }
.scale span { width: calc(var(--s) * var(--u) * 1.5); height: calc(var(--s) * var(--u) * 1.5); min-width: 12px; min-height: 12px; background: var(--laranja); display: block; }
.scale b { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); }
.gridviz { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(30 * var(--u)); height: calc(180 * var(--u)); min-height: 80px; }
.gridviz span { background: rgba(237,113,2,.18); border-inline: 1px solid rgba(237,113,2,.5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(30 * var(--u)); grid-template-columns: repeat(auto-fill, minmax(max(220px, calc(275 * var(--u))), 1fr)); }
.step { border-top: max(1px, calc(2 * var(--u))) solid var(--vinho); padding-top: calc(15 * var(--u)); }
.step .n { font-family: var(--f-display); font-variation-settings: "opsz" 24; color: var(--laranja); font-size: var(--t-h2); display: block; color: #B85600; }
.step h3 { font-family: var(--f-display); font-variation-settings: "opsz" 24; text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; margin: 6px 0; }
.step .t { color: var(--vinho); font-size: var(--t-small); font-weight: var(--w-bold); display: block; margin-bottom: 8px; }
.try { color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(30 * var(--u)); }
.demo { aspect-ratio: 428 / 270; overflow: hidden; }
.demo img { width: 100%; height: 100%; object-fit: cover; }
.download { background: var(--laranja); color: var(--branco); padding: calc(90 * var(--u)) var(--side); margin-top: calc(30 * var(--u)); }
.download .display { color: var(--branco); }
.download p { max-width: calc(733 * var(--u)); min-width: min(100%, 300px); margin: calc(30 * var(--u)) 0; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 22px; background: var(--azul); color: var(--branco); font-weight: var(--w-bold); text-decoration: none; font-size: var(--t-body); overflow-wrap: anywhere; }
.btn:hover { background: var(--vinho); }
.download .size { display: block; margin-top: 12px; font-size: var(--t-small); }
@media (min-width: 1024px) {
  .type-grid { grid-template-columns: calc(885 * var(--u)) 1fr; }
  .cols2 { grid-template-columns: calc(733 * var(--u)) calc(733 * var(--u)); column-gap: calc(152 * var(--u)); }
  .demo-grid { grid-template-columns: repeat(3, 1fr); }
  .download { padding-left: calc(30 * var(--u)); }
}

/* recorte exato da ilustração de Fellows (Figma: imagem ocupa 45,81% à esquerda) */
.feature > .bg--fel { width: 45.81%; right: auto; object-fit: cover; }
@media (max-width: 1023px) {
  .feature > .bg--fel { position: relative; inset: auto; order: 2; width: 78%; height: auto; aspect-ratio: 916 / 580; }
  .feature--lima .txt { justify-self: start; }
  /* mobile: texto e ilustração empilhados — nada de texto sobre a imagem */
  .feature--verde > .bg { position: relative; inset: auto; order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 88% 50%; }
}

/* Header desktop: altura fixa no fluxo; a barra cresce por cima do conteúdo ao abrir */
@media (min-width: 1024px) {
  .site-header { height: var(--header-h); }
  .header-bar { height: auto; min-height: var(--header-h); align-items: flex-start; background: var(--laranja); }
  .header-bar .logo { margin-top: calc(30 * var(--u)); }
  .nav { padding-top: calc(41 * var(--u)); }
}

/* Hover de links: linha de 2px em nuvem de pixels (js/hover-line.js) */
.hl { position: relative; text-decoration: none !important; }
.hl-canvas { position: absolute; left: 0; bottom: -4px; height: 2px; pointer-events: none; image-rendering: pixelated; }
.nav a:hover, .nav button:hover, .site-footer a:hover, .on-dark .cta:hover { text-decoration: none; }

/* Ícones sociais: ícone como máscara (cor controlável) + fundo em nuvem de pixels */
.social a { position: relative; width: max(44px, calc(48 * var(--u))); height: max(44px, calc(48 * var(--u))); display: grid; place-items: center; color: var(--branco); }
.social .ico { position: relative; z-index: 1; display: block; width: max(22px, calc(30 * var(--u))); height: max(22px, calc(30 * var(--u)));
  background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: background-color .45s ease; }
.ico--linkedin { --ico: url("../assets/svg/linkedin.svg"); }
.ico--instagram { --ico: url("../assets/svg/instagram.svg"); }
.ico--youtube { --ico: url("../assets/svg/youtube.svg"); }
.social .ico--youtube { width: max(30px, calc(40 * var(--u))); }
.social a.is-filled { color: var(--laranja); }
.hl-canvas.hl-box { inset: 0; bottom: auto; height: 100%; }

/* ==========================================================================
   Páginas internas
   ========================================================================== */
.page-panel { background: var(--fundo); margin: 0 var(--bleed); padding: calc(60 * var(--u)) calc(var(--side) - var(--bleed)) calc(60 * var(--u)); }
.page-panel--pessego { background: var(--pessego); }
.hero + .hero-title + .page-panel, .hero-title + .page-panel { padding-top: calc(60 * var(--u)); }
.t-red { color: var(--vermelho); }
.lead-vinho { color: var(--vinho); font-size: max(18px, calc(27 * var(--u))); line-height: 1.26; }
.text-27 { font-size: max(18px, calc(27 * var(--u))); line-height: 1.26; }
.text-27 p + p, .prose p + p { margin-top: 1em; }
.prose { font-size: var(--t-body); line-height: 1.3; }
.prose h3 { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); margin: 1.6em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: .6em 0; }
.prose strong, .text-27 strong { font-weight: var(--w-bold); }
.section { padding: calc(60 * var(--u)) 0; }
.section + .divider, .divider + .section { }
.down-arrow { color: var(--vinho); font-size: max(22px, calc(40 * var(--u))); line-height: 1; text-decoration: none; display: inline-block; }

/* Intro duas colunas: título (vermelho) | texto */
.intro2 { display: grid; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) 0 calc(90 * var(--u)); }
.intro2 > .h2 { color: var(--vermelho); }
@media (min-width: 1024px) { .intro2 { grid-template-columns: calc(763 * var(--u)) calc(885 * var(--u)); } }

/* Imagem + texto (quem somos) */
.split { display: grid; gap: calc(30 * var(--u)); padding: calc(60 * var(--u)) 0; }
.split .media { display: grid; gap: calc(30 * var(--u)); }
.split .media .rv { aspect-ratio: 1190 / 840; }
.split .media .rv.half { aspect-ratio: 1190 / 405; }
.split .media img, .split .media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.split .txt { display: flex; flex-direction: column; }
.split .txt .h2 { margin-bottom: calc(30 * var(--u)); }
.split .txt .down-arrow { margin-top: auto; padding-top: 20px; }
.split .doc-links { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: .6em; }
.split .doc-links a { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .5em; min-height: 32px; align-items: center; }
.split .doc-links a span { color: var(--vinho); }
.split .doc-links a:hover { color: var(--vinho); }
@media (min-width: 1024px) { .split { grid-template-columns: calc(1190 * var(--u)) 1fr; column-gap: calc(30 * var(--u)); } }

/* Publicações (capa sobre cor) */
.pubs { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, calc(580 * var(--u))); gap: calc(30 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pubs::-webkit-scrollbar { display: none; }
.pub { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: calc(30 * var(--u)); scroll-snap-align: start; }
.pub .rv { aspect-ratio: 428 / 450; }
.pub .rv img { width: 100%; height: 100%; object-fit: cover; }
.pub .langs { list-style: none; margin: 0; padding: 0; color: var(--vinho); font-size: max(16px, calc(27 * var(--u))); line-height: 1.1; text-transform: uppercase; }
.pub .langs a { text-decoration: none; display: inline-block; min-height: 32px; }
.pub .langs a:hover { text-decoration: underline; }

/* Cards genéricos com tags */
.card .tags { color: #B85600; font-size: var(--t-small); margin-top: calc(20 * var(--u)); }
.card .eyebrow + h3 { margin-top: 4px; }
.cards--grid { display: grid; grid-template-columns: 1fr; gap: calc(60 * var(--u)) calc(30 * var(--u)); }
@media (min-width: 600px) { .cards--grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards--grid { grid-template-columns: repeat(4, 1fr); } }
.cards--grid .card .thumb { aspect-ratio: 428 / 270; }

/* Conteúdos: destaque e duas grandes */
.featured { display: grid; gap: calc(30 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.featured .rv { aspect-ratio: 1190 / 840; }
.featured .rv img { width: 100%; height: 100%; object-fit: cover; }
.featured .txt { display: flex; flex-direction: column; }
.featured .txt .more { margin-top: auto; color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); text-transform: uppercase; text-decoration: none; padding-top: 20px; }
@media (min-width: 1024px) { .featured { grid-template-columns: calc(1190 * var(--u)) 1fr; } }
.big2 { display: grid; gap: calc(30 * var(--u)); padding: calc(90 * var(--u)) 0 calc(60 * var(--u)); }
.big2 .card .thumb { aspect-ratio: 885 / 814; }
.big2 .card h3 { color: var(--vinho); }
@media (min-width: 768px) { .big2 { grid-template-columns: 1fr 1fr; } }
.pager { display: flex; justify-content: flex-end; gap: calc(20 * var(--u)); padding-top: calc(30 * var(--u)); }
.pager a { color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); text-decoration: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.pager a[aria-current] { color: var(--vermelho); }
.filters { display: grid; gap: calc(30 * var(--u)); align-items: center; padding: calc(30 * var(--u)) 0 calc(60 * var(--u)); }
.filters label { display: block; }
.filters select, .filters input { width: 100%; min-height: 48px; border: 0; border-bottom: 2px solid var(--vinho); background: transparent; color: var(--vinho); font: inherit; font-size: var(--t-body); text-transform: uppercase; padding: 8px 0; border-radius: 0; }
.filters select { appearance: none; background: linear-gradient(var(--vinho), var(--vinho)) no-repeat; background-size: 0 0; }
@media (min-width: 1024px) { .filters { grid-template-columns: 1fr calc(458 * var(--u)) calc(425 * var(--u)) calc(428 * var(--u)); } }

/* Equipe */
.team { list-style: none; margin: 0; padding: calc(30 * var(--u)) 0 calc(60 * var(--u)); display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(40 * var(--u)) calc(30 * var(--u)); text-align: center; }
@media (min-width: 600px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(6, 1fr); row-gap: calc(60 * var(--u)); } }
.team .rv { border-radius: 50%; aspect-ratio: 1; margin-bottom: calc(30 * var(--u)); }
.team img { width: 100%; height: 100%; object-fit: cover; }
.team b { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; }
.team span { font-size: var(--t-small); }
.board { display: grid; gap: calc(20 * var(--u)) calc(30 * var(--u)); grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(275 * var(--u))), 1fr)); list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0; }
.board b { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; }
.board span { font-size: var(--t-small); }

/* Linha do tempo */
.timeline { position: relative; padding: calc(60 * var(--u)) 0 calc(90 * var(--u)); }
.timeline .bg { position: absolute; inset: 0 calc(-1 * (var(--side) - var(--bleed))); width: calc(100% + 2 * (var(--side) - var(--bleed))); height: 100%; object-fit: cover; opacity: .9; pointer-events: none; }
.timeline .h2 { position: relative; margin-bottom: calc(60 * var(--u)); }
.timeline ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: calc(40 * var(--u)); }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .5em; width: 15px; height: 15px; border-radius: 50%; background: var(--vinho); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 1.4em; bottom: calc(-40 * var(--u)); border-left: 2px solid var(--vinho); }
.timeline li:last-child::after { display: none; }
.timeline .year { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); color: var(--vinho); font-size: var(--t-h2); display: block; margin-bottom: 6px; }
.timeline p { font-size: max(17px, calc(27 * var(--u))); line-height: 1.26; }
.timeline .flor { position: absolute; mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 1023px) { .timeline .flor { display: none; } }
/* linha do tempo: setas acima; no desktop a trilha rola na horizontal */
.tl-head { position: relative; }
.timeline .tl-head .h2 { margin-bottom: 0; }
.tl-head .arrows { display: none; }
.tl-wrap { position: relative; }
@media (min-width: 1024px) {
  .timeline { min-height: calc(1000 * var(--u)); }
  .tl-head { margin-bottom: calc(60 * var(--u)); }
  .tl-head .arrows { display: flex; }
  .tl-track {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 calc(-1 * (var(--side) - var(--bleed))); padding: 0 calc(var(--side) - var(--bleed));
    scroll-padding: 0 calc(var(--side) - var(--bleed));
  }
  .tl-track::-webkit-scrollbar { display: none; }
  .timeline ol { display: flex; align-items: flex-start; width: max-content; gap: 0; height: auto; min-height: calc(760 * var(--u)); --tl-line: calc(330 * var(--u)); padding-right: calc(var(--side) - var(--bleed)); }
  .timeline ol::before { content: ""; position: absolute; left: 0; right: 0; top: var(--tl-line); border-top: 2px solid var(--vinho); }
  .timeline li { flex: none; padding: 0; width: calc(440 * var(--u)); margin-right: calc(-130 * var(--u)); scroll-snap-align: start; }
  .timeline li:last-child { margin-right: 0; }
  .timeline li::after { display: none; }
  .timeline li.up { height: var(--tl-line); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(30 * var(--u)); box-sizing: border-box; }
  .timeline li.up::before { top: auto; bottom: -7px; }
  .timeline li.down { margin-top: var(--tl-line); padding-top: calc(40 * var(--u)); }
  .timeline li.down::before { top: -7px; }
}
.longread { display: grid; gap: calc(60 * var(--u)); padding: calc(60 * var(--u)) 0; }
.longread .quotes { display: grid; align-content: start; gap: calc(60 * var(--u)); }
.longread .quotes .h2 { color: var(--vermelho); }
/* cada título laranja acompanha o próprio bloco de texto */
.longread .lr-row { display: grid; gap: calc(60 * var(--u)); }
.longread .lr-row + .lr-row { padding-top: calc(60 * var(--u)); }
@media (min-width: 1024px) {
  .longread .lr-row { grid-template-columns: calc(733 * var(--u)) calc(885 * var(--u)); column-gap: calc(30 * var(--u)); justify-content: space-between; }
  .longread .quotes { align-self: start; }
}
.longread .prose > p:first-child, .longread .prose .big { font-size: max(18px, calc(27 * var(--u))); line-height: 1.26; font-weight: var(--w-medium); }

/* Fellows */
.cycles { display: flex; flex-wrap: wrap; gap: 12px calc(40 * var(--u)); align-items: center; color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); text-transform: uppercase; }
.cycles [role="tablist"] { display: flex; gap: calc(30 * var(--u)); flex-wrap: wrap; }
.cycles button { font: inherit; color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer; min-height: 44px; }
.cycles button[aria-selected="true"] { color: var(--vermelho); }
.fellow-list { list-style: none; margin: 0; padding: calc(40 * var(--u)) 0; display: grid; gap: calc(60 * var(--u)) calc(30 * var(--u)); }
.fellow { display: grid; grid-template-columns: max(110px, calc(276 * var(--u))) 1fr; gap: calc(30 * var(--u)); align-items: start; }
.fellow .rv { border-radius: 50%; aspect-ratio: 1; }
.fellow img { width: 100%; height: 100%; object-fit: cover; }
.fellow h3 { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); line-height: 1.11; }
.fellow .mem { font-style: italic; display: block; }
.fellow p { margin-top: .8em; }
.fellow .note { font-style: italic; font-size: .8em; }
.fellow .more { display: inline-block; margin-top: .8em; color: var(--vinho); font-weight: var(--w-medium); text-transform: uppercase; }
.fellow-wrap { display: grid; gap: calc(30 * var(--u)); padding: calc(40 * var(--u)) 0 calc(60 * var(--u)); }
.fellow-wrap .ciclo { color: var(--vermelho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); text-transform: uppercase; line-height: 1.11; }
@media (min-width: 1024px) {
  .fellow-wrap { grid-template-columns: calc(275 * var(--u)) 1fr; }
  .fellow-list { grid-template-columns: 1fr 1fr; }
}
.book { display: grid; gap: calc(30 * var(--u)); padding: calc(60 * var(--u)) 0; align-items: start; }
.book .rv { width: min(60%, calc(317 * var(--u))); aspect-ratio: 317/448; }
.book img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .book { grid-template-columns: calc(610 * var(--u)) calc(581 * var(--u)); } .book .rv { width: calc(317 * var(--u)); margin-left: calc(131 * var(--u)); } }
.quote-band { position: relative; color: var(--branco); background: #4F7552; display: grid; overflow: hidden; }
.quote-band > img { width: 100%; height: auto; display: block; }
.quote-band .quotes2 { display: grid; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) var(--side); }
.quote-band blockquote { margin: 0; font-size: max(17px, calc(27 * var(--u))); line-height: 1.26; }
.quote-band cite { display: block; margin-top: 1em; font-style: normal; font-family: var(--f-display); font-variation-settings: "opsz" 24; text-transform: uppercase; }
@media (min-width: 1024px) {
  .quote-band > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: left center; }
  .quote-band { min-height: calc(540 * var(--u)); }
  .quote-band .quotes2 { position: relative; grid-template-columns: calc(428 * var(--u)) calc(428 * var(--u)); column-gap: calc(181 * var(--u)); margin-left: calc(793 * var(--u)); padding: calc(46 * var(--u)) 0; }
  .quote-band .q2 { align-self: center; }
}

/* Contato */
.contact-form { display: grid; gap: 20px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: max(17px, calc(27 * var(--u))); }
.contact-form input, .contact-form textarea { font: inherit; font-size: var(--t-body); color: var(--vinho); background: transparent; border: 0; border-bottom: 2px solid var(--vinho); padding: 10px 0; min-height: 44px; border-radius: 0; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.contact-form button { justify-self: start; font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: max(17px, calc(27 * var(--u))); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; cursor: pointer; min-height: 44px; }
.contact-form button:hover { border-bottom-color: var(--vinho); color: var(--vinho); }
.contact-form .status { min-height: 1.3em; color: var(--verde); }
.contacts { display: grid; gap: calc(30 * var(--u)); padding: calc(60 * var(--u)) 0; }
.contacts address { font-style: normal; }
.contacts a { color: inherit; }
@media (min-width: 1024px) { .contacts { grid-template-columns: calc(915 * var(--u)) calc(457 * var(--u)) 1fr; } }
.banner { position: relative; color: var(--branco); background: #8a264f; overflow: hidden; margin: 0 calc(-1 * (var(--side) - var(--bleed))); }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.banner .txt { position: relative; padding: calc(90 * var(--u)) var(--side); max-width: max(320px, calc(780 * var(--u))); }
.banner .display { color: var(--branco); }
.banner p { margin: 1em 0; }
.banner a { color: inherit; font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: var(--t-card); text-transform: uppercase; }
@media (max-width: 1023px) { .banner > img { position: relative; height: auto; aspect-ratio: 16/9; } .banner { display: grid; } .banner .txt { order: -1; } }
.faq { display: grid; gap: calc(30 * var(--u)); padding: calc(60 * var(--u)) 0; }
.faq dl, .faq .items { margin: 0; }
.faq details { border-top: 1px solid rgba(138,38,79,.35); }
.faq details:last-child { border-bottom: 1px solid rgba(138,38,79,.35); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 18px 0; color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: max(17px, calc(27 * var(--u))); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.2em; line-height: 1; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; max-width: calc(733 * var(--u)); min-width: min(100%, 300px); }
.faq details > div p + p { margin-top: .8em; }
@media (min-width: 1024px) { .faq { grid-template-columns: calc(305 * var(--u)) 1fr; } .faq details > div { margin-left: calc(305 * var(--u)); } .faq summary { max-width: calc(560 * var(--u)); } }

/* Agenda */
.event-head { padding: calc(30 * var(--u)) 0; }
.event-head .display { font-size: var(--t-display); }
.event-head .when { color: var(--vermelho); font-weight: var(--w-bold); font-size: max(17px, calc(27 * var(--u))); margin-top: 12px; }
.event-intro { display: grid; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) 0; }
@media (min-width: 1024px) { .event-intro { grid-template-columns: calc(734 * var(--u)) calc(734 * var(--u)); column-gap: calc(182 * var(--u)); } }
.days { display: grid; gap: calc(30 * var(--u)); margin: 0 calc(-1 * (var(--side) - var(--bleed))); padding-top: calc(30 * var(--u)); }
@media (min-width: 1024px) { .days { grid-template-columns: 1fr 1fr; } }
.day h2 { background: var(--verde); color: var(--branco); font-weight: var(--w-bold); font-size: max(17px, calc(27 * var(--u))); padding: calc(30 * var(--u)) var(--side); text-transform: uppercase; }
.day--2 h2 { background: var(--vermelho); }
.day ol { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(30 * var(--u)); margin-top: calc(30 * var(--u)); }
.ev { background: var(--lima); }
.ev:nth-child(even) { background: #E0EBA3; }
.day--2 .ev { background: var(--laranja); }
.day--2 .ev:nth-child(even) { background: #F0CB8F; }
.ev .body { padding: calc(28 * var(--u)) var(--side) calc(24 * var(--u)); }
.ev h3 { font-weight: var(--w-bold); font-size: max(17px, calc(27 * var(--u))); line-height: 1.11; }
.ev .partner { font-size: max(16px, calc(27 * var(--u))); line-height: 1.11; margin-top: 4px; }
.ev .meta { margin-top: calc(26 * var(--u)); font-size: var(--t-small); }
.ev .act { border-top: 1px solid #000; padding: calc(20 * var(--u)) var(--side); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); font-size: max(17px, calc(27 * var(--u))); text-transform: uppercase; }
.ev .act a { color: inherit; text-decoration: none; display: block; }
.ev .act a:hover { text-decoration: underline; }
.ev--closed .act { opacity: .8; }

/* Termos */
.legal { display: grid; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) 0 calc(60 * var(--u)); }
.legal > .h2 { color: var(--vermelho); }
@media (min-width: 1024px) { .legal { grid-template-columns: calc(728 * var(--u)) calc(885 * var(--u)); column-gap: calc(187 * var(--u)); } .legal > .h2 { align-self: start; } }
.hover-demo { background: var(--laranja); color: var(--branco); padding: 24px var(--side); margin-top: calc(30 * var(--u)); display: flex; gap: 30px; align-items: center; }
.hover-demo > a { color: inherit; font-weight: var(--w-bold); text-decoration: none; }

.fellow-wrap { grid-template-columns: minmax(0, 1fr); }
.fellow { grid-template-columns: max(96px, calc(276 * var(--u))) minmax(0, 1fr); }
.fellow > div, .prose, .text-27 { overflow-wrap: break-word; }
@media (min-width: 1024px) { .fellow-wrap { grid-template-columns: calc(275 * var(--u)) minmax(0, 1fr); } .fellow-list { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.timeline .bg { mix-blend-mode: multiply; }

.hl-mask { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
/* o sublinhado nativo dá lugar à linha em nuvem de pixels */
.js a:not(:has(img, .thumb, .rv)):hover, .js a:not(:has(img, .thumb, .rv)):focus-visible { text-decoration: none; }

/* Rolagem suave (ScrollSmoother): header fixo fora do conteúdo rolável */
.site-header { position: fixed; top: 0; left: 0; right: 0; }
#smooth-content { padding-top: var(--header-h); }

/* "carregando" em pixels sobre a foto do card */
.card .thumb { position: relative; }
.load-px { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.tx-flyer { position: absolute; overflow: hidden; will-change: left, top, width, height; }
.tx-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Créditos no rodapé: fonte pequena, à direita; hover preenche o fundo em nuvem de pixels */
.credits { grid-column: 1 / -1; justify-self: end; text-align: right; font-size: max(12px, calc(14 * var(--u))); opacity: .95; }
.credits a { position: relative; display: inline-block; padding: 2px 6px; margin: -2px -2px; color: var(--branco); text-decoration: none; transition: color .35s ease; }
.credits a > span:first-child { position: relative; z-index: 1; }
.credits a.is-filled { color: var(--vinho); }
.credits .hl-canvas.hl-box { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1023px) { .credits { justify-self: start; text-align: left; } }

.pub-link { display: block; }
.pub .rv.thumb { margin: 0; position: relative; }

.tx-sym { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Menu desktop: cada coluna tem a largura do próprio item (o submenu quebra linha dentro dela) */
@media (min-width: 1024px) {
  .nav-col { width: min-content; align-items: flex-start; }
  .nav-col > a { white-space: nowrap; }
  .sub a { max-width: none !important; }
  .nav a, .nav button { font-variation-settings: "opsz" 12; } /* o shorthand "font" zerava o corte de texto */
}
@media (min-width: 1024px) {
  /* o submenu não alarga a coluna: pode transbordar para o lado; só a altura é recortada (animação) */
  .nav .sub { contain: inline-size; width: 100%; overflow: visible; overflow-y: clip; overflow-x: visible; }
  .nav .sub a { white-space: normal; width: calc(140 * var(--u)); }
}

/* Links: sem sublinhado nativo — a única linha é a do hover em nuvem de pixels.
   Links dentro de textos corridos ganham a cor vinho para continuarem identificáveis. */
.js a, .js a:hover, .js a:focus-visible, .js .popup-cta, .js .card a:hover h3 { text-decoration: none !important; }
.prose a, .faq a, .contacts a, .article .body a { color: var(--vinho); }

/* Depoimentos (Fellows): blocos empilhados, troca por máscara em pixels */
.testimonials { position: relative; }
.t-stage { display: grid; }
.t-stage > .quote-band { grid-area: 1 / 1; }
.t-stage > .quote-band[hidden] { display: grid; } /* JS controla visibilidade; sem JS só o 1º aparece */
.no-js .t-stage > .quote-band[hidden] { display: none; }
.t-controls { position: absolute; right: var(--side); bottom: calc(20 * var(--u)); display: flex; gap: 14px; align-items: center; z-index: 3; }
.t-controls button { background: none; border: 0; color: var(--branco); cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; font-size: 14px; }
.t-dots { display: flex; }
.t-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--branco); display: block; }
.t-dots button[aria-current]::before { background: var(--branco); }
.t-controls button:focus-visible { outline: 3px solid var(--branco); outline-offset: -6px; }

/* Formulário: sem outline; barra inferior cresce com o texto (textarea: acompanha a altura) */
.contact-form .field { position: relative; }
.contact-form input, .contact-form textarea { outline: none !important; border-bottom: 2px solid #E3C3B9; transition: border-color .3s; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: #C99A8C; }
.contact-form .field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--bar, 0px); max-width: 100%; background: var(--vinho); transition: width .18s var(--ease-out); pointer-events: none; }
.contact-form textarea { overflow: hidden; resize: none; min-height: 120px; }
.contact-form [aria-invalid="true"] { border-bottom-color: var(--vermelho); }

/* Botão Enviar: mesmo efeito dos créditos (fundo branco em nuvem, texto vinho), fonte e tamanho atuais */
.contact-form button[type="submit"] { position: relative; padding: 6px 12px; margin-left: -12px; border: 0; color: #000; transition: color .35s ease; }
.contact-form button[type="submit"] > span { position: relative; z-index: 1; }
.contact-form button[type="submit"].is-filled { color: var(--vinho); }
.contact-form button[type="submit"]:hover { border: 0; }
.contact-form button[type="submit"]:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--vinho); }

/* FAQ: hover com fundo vinho em 10% dos pixels (opacidade 100%), formado em nuvem */
.faq summary { position: relative; z-index: 0; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.faq summary > .hl-box { z-index: -1; }
.faq summary:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--vinho); }
.faq details > div { overflow: hidden; }

.tx-live { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }

/* Home · Conheça nosso olhar: mesmo hover de fundo do FAQ (vinho, 10% dos pixels, nuvem) */
.olhar .links a { position: relative; z-index: 0; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.olhar .links a > .hl-box { z-index: -1; }
.olhar .links a:hover { color: inherit; }

/* Laboratório do shader (design system) */
.shader-lab { display: grid; gap: calc(30 * var(--u)); margin-top: calc(60 * var(--u)); }
.lab-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #41389a; margin: 0; height: auto; }
.lab-stage > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.lab-title { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-card); color: var(--vinho); }
.lab-note { font-size: var(--t-small); margin: 8px 0 16px; }
.lab-panel { max-height: min(70vh, calc(760 * var(--u))); overflow: auto; padding-right: 8px; }
.lab-panel fieldset { border: 0; border-top: 2px solid var(--vinho); margin: 0 0 14px; padding: 10px 0 0; }
.lab-panel legend { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; color: var(--vinho); padding-right: 8px; font-size: var(--t-small); }
.lab-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.3fr) 56px; gap: 10px; align-items: center; min-height: 36px; font-size: var(--t-small); }
.lab-row input[type=range] { width: 100%; accent-color: var(--vinho); min-height: 28px; }
.lab-row input[type=color] { width: 100%; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.lab-row output { text-align: right; font-variant-numeric: tabular-nums; }
.lab-status { min-height: 1.3em; font-size: var(--t-small); margin-top: 10px; }
.shader-lab .btn { margin-top: 12px; }
@media (min-width: 1024px) { .shader-lab { grid-template-columns: calc(1190 * var(--u)) 1fr; align-items: start; } }

/* Ciclos de fellows: só o painel ativo aparece; na troca os dois se sobrepõem */
.fellow-panels { position: relative; display: grid; }
.fellow-panels > .fellow-wrap { grid-area: 1 / 1; }
.fellow-panels > .fellow-wrap[hidden] { display: none; }
.cycle-sweep { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 2; }

/* Anel de autoplay dos depoimentos (em volta do botão pausar) */
.t-pause { position: relative; width: 44px; height: 44px; }
.t-ring { position: absolute; inset: 0; width: 44px; height: 44px; pointer-events: none; }

/* Fundo claro dos blocos: entra num gradiente de pixels subindo (laranja → cor do bloco).
   Sem JS ou se algo falhar, a cor aparece sozinha depois de 5 s. */
.panel { --panel-bg: var(--pessego); }
.panel--fundo { --panel-bg: var(--fundo); }
.page-panel { --panel-bg: var(--fundo); }
.page-panel--pessego { --panel-bg: var(--pessego); }
.js .panel:not(.bg-on), .js .page-panel:not(.bg-on) { background-color: transparent; animation: panel-bg-safe 0s 5s forwards; }
@keyframes panel-bg-safe { to { background-color: var(--panel-bg); } }
.bg-sweeping { position: relative; }
.bg-sweeping > :not(.bg-sweep) { position: relative; z-index: 1; }
.bg-sweep { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }

/* Listas de cards/publicações: sem marcador de lista */
.cards, .cards--grid, .pubs, .big2, .team, .board, .fellow-list { list-style: none; margin-top: 0; margin-bottom: 0; }
.cards > li, .cards--grid > li, .pubs > li, .big2 > li { list-style: none; }
.big2, .cards--grid { padding-left: 0; padding-right: 0; }

/* Selects personalizados (Conteúdos › todos), como no Figma:
   fundo claro, texto vinho em caixa alta, linhas vinho, item ativo em lima, seta ↓ */
.filters { position: relative; z-index: 5; }
.dd { position: relative; }
.dd-btn, .dd-list [role="option"], .filters .search {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: max(48px, calc(71 * var(--u))); padding: 0 max(14px, calc(30 * var(--u)));
  background: var(--fundo); color: var(--vinho); border: 0; border-bottom: 2px solid var(--vinho);
  font: inherit; font-size: var(--t-body); text-transform: uppercase; text-align: left; width: 100%; cursor: pointer;
}
.dd-btn:focus-visible, .dd-list:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--vinho); }
.dd-ico { width: 16px; height: 18px; flex: none; transition: transform .35s var(--ease-out); }
.dd[data-open] .dd-btn .dd-ico { transform: rotate(180deg); }
.dd-list { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; z-index: 10; }
.dd-list[hidden] { display: none; }
.dd-list [role="option"] { cursor: pointer; transition: background-color .2s; }
.dd-list [role="option"]:hover, .dd-list [role="option"].is-active, .dd-list [role="option"][aria-selected="true"] { background: var(--lima); }
.filters .search { cursor: text; }
.filters .search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--vinho); font: inherit; text-transform: uppercase; padding: 0; outline: none; }
.filters .search input::placeholder { color: var(--vinho); opacity: 1; }
.filters .search:focus-within { box-shadow: inset 0 0 0 3px var(--vinho); }
.filter-empty { padding: calc(60 * var(--u)) 0; color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; text-transform: uppercase; font-size: var(--t-card); }

/* Laboratório: controles minimalistas do vídeo */
.lab-transport { display: flex; gap: 6px; margin-top: 10px; }
.lab-transport button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 2px solid var(--vinho); color: var(--vinho); cursor: pointer; transition: background-color .2s, color .2s; }
.lab-transport button:hover { background: var(--vinho); color: var(--fundo); }
.lab-transport button:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.lab-transport svg { width: 18px; height: 18px; }
.lab-transport .i-play { display: none; }
.lab-transport .is-paused .i-play { display: inline; }
.lab-transport .is-paused .i-pause { display: none; }
.shader-lab > .lab-transport { grid-column: 1; }
@media (min-width: 1024px) {
  .shader-lab > .lab-stage { grid-column: 1; grid-row: 1; }
  .shader-lab > .lab-transport { grid-column: 1; grid-row: 2; margin-top: 0; }
  .shader-lab > .lab-side { grid-column: 2; grid-row: 1 / span 3; }
}
/* ajustes finos dos selects (Figma): seta não gira; lima só no selecionado; foco/hover com contorno vinho */
.dd[data-open] .dd-btn .dd-ico { transform: none; }
.dd-list [role="option"]:hover, .dd-list [role="option"].is-active { background: var(--fundo); box-shadow: inset 0 0 0 2px var(--vinho); }
.dd-list [role="option"][aria-selected="true"] { background: var(--lima); }

.faq details > div { box-sizing: border-box; }
/* FAQ: o título ocupa a linha inteira (o hover ilumina tudo); o texto mantém a largura de leitura e o ícone vai para a ponta */
@media (min-width: 1024px) {
  .faq summary { max-width: none; grid-template-columns: minmax(0, calc(560 * var(--u))) auto; justify-content: space-between; }
}

/* Popup: 3 versões do Figma (sorteadas) */
.popup--vermelho .popup-box { background: var(--vermelho); }
.popup--vinho .popup-box { background: var(--vinho); }
.popup--verde .popup-box { background: var(--verde); }

/* Banner de newsletter acima do rodapé (modelo das faixas de depoimento dos fellows) */
.news-band { margin: calc(60 * var(--u)) var(--bleed) 0; background: #41389a; }
.news-band .news-txt { position: relative; display: grid; gap: calc(22 * var(--u)); justify-items: start; padding: calc(40 * var(--u)) var(--side) calc(46 * var(--u)); }
.news-band .h2 { color: var(--branco); margin: 0; }
.news-band p { margin: 0; font-size: max(17px, calc(27 * var(--u))); line-height: 1.26; max-width: 34em; }
.news-band .cta { color: var(--lima); font-weight: var(--w-bold); }
@media (min-width: 1024px) {
  .news-band .news-txt { margin-left: calc(793 * var(--u)); max-width: calc(940 * var(--u)); padding: calc(60 * var(--u)) 0; align-content: center; min-height: calc(540 * var(--u)); box-sizing: border-box; }
}
.cta-band { background: #E74C25; }
.cta-band[hidden] { display: none; }

/* Quem somos: blocos empilhados — o próximo sobe por cima do anterior (js: stack) */
[data-stack] .stack-card {
  background: var(--panel-bg, var(--fundo));
  margin: 0 calc(-1 * (var(--side) - var(--bleed)));
  padding-left: calc(var(--side) - var(--bleed)); padding-right: calc(var(--side) - var(--bleed));
  position: relative; transform-origin: 50% 0;
}
[data-stack] .stack-card + .stack-card { border-top: max(1px, calc(2 * var(--u))) solid var(--vinho); }
.page-panel:not(.bg-on) [data-stack] .stack-card, .page-panel[data-stack]:not(.bg-on) .stack-card { background: transparent; }

/* Equipe: respiro entre o título e os nomes (Figma: 60 da linha ao título, 36 do título aos nomes, 60 até a próxima linha) */
.section > .h2 + .board { margin-top: calc(36 * var(--u)) !important; }
.section:has(> .board) { padding: calc(60 * var(--u)) 0 !important; }
.board { row-gap: calc(30 * var(--u)) !important; }
/* "Ver mais" (Conteúdos): texto e seta na mesma linha */
.pager a.more { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.pager a.more svg { flex: none; width: 1.1em; height: auto; }
[data-random-one] [data-slide][hidden] { visibility: hidden; }

/* Publicação: leitor de PDF na própria página (js/flipbook.js) */
.pub-col { display: grid; gap: calc(30 * var(--u)); align-self: start; min-width: 0; }
.pub-stage { position: relative; background: var(--verde); aspect-ratio: 882 / 630; overflow: hidden; display: grid; place-items: center; margin: 0 calc(-1 * (var(--side) - var(--bleed))); }
.pub-cover { height: 85%; width: auto; max-width: 90%; object-fit: contain; box-shadow: 20px 20px 30px rgba(0, 0, 0, .25); }
.pub-open { position: absolute; inset: 0; background: none; border: 0; padding: 0; cursor: zoom-in; display: flex; align-items: flex-end; justify-content: flex-end; }
.pub-open span { margin: 0 calc(30 * var(--u)) calc(24 * var(--u)) 0; color: var(--branco); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; font-size: var(--t-small); letter-spacing: .04em; background: rgba(0, 0, 0, .18); padding: 6px 10px; }
.pub-open:hover span, .pub-open:focus-visible span { background: var(--vinho); }
.pub-open:focus-visible { outline: 3px solid var(--lima); outline-offset: -3px; }
.pub-book { position: absolute; inset: 0; perspective: 2400px; }
.pub-leaf { position: absolute; box-shadow: 20px 20px 30px rgba(0, 0, 0, .25); background: #fff; backface-visibility: hidden; will-change: transform; }
.pub-leaf canvas { width: 100%; height: 100%; display: block; }
.pub-ctrl { position: absolute; right: calc(30 * var(--u)); bottom: calc(18 * var(--u)); display: flex; align-items: center; gap: 14px; color: var(--branco); z-index: 3; }
.pub-ctrl button, .pub-close { appearance: none; background: none; border: 0; color: var(--branco); cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.pub-ctrl button svg { width: 28px; height: 22px; }
.pub-ctrl button:disabled { opacity: .35; cursor: default; }
.pub-count { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-size: max(18px, calc(27 * var(--u))); min-width: 2.6em; text-align: center; }
.pub-close { position: absolute; top: calc(12 * var(--u)); right: calc(18 * var(--u)); z-index: 3; }
.pub-close svg { width: 20px; height: 20px; }
.pub-col.is-loading .pub-stage::after { content: "Carregando…"; position: absolute; color: var(--branco); font-size: var(--t-small); }
.pub-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); }
.pub-thumbs button { appearance: none; border: 0; padding: 0; background: #fff; cursor: zoom-in; display: block; width: 100%; overflow: hidden; }
.pub-thumbs img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease-out); }
.pub-thumbs button:hover img, .pub-thumbs button:focus-visible img { transform: scale(1.06); }
.pub-dl { color: var(--vinho); font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: var(--w-medium); text-transform: uppercase; justify-self: start; }
/* lendo: o palco ocupa a largura do artigo; o texto segue embaixo, na coluna da direita */
.article--pub.is-reading .pub-col { grid-column: 1 / -1; }
.article--pub.is-reading .pub-thumbs { display: none; }
.article--pub.is-reading .pub-stage { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .pub-stage { margin: 0 0 0 calc(3 * var(--u)); }
  .article--pub.is-reading .pub-stage { aspect-ratio: 1800 / 840; margin: 0; }
  .article--pub.is-reading > div:last-child { grid-column: 2; }
}
.pub-col [hidden] { display: none !important; }
.pub-cover { position: absolute; top: 7.5%; left: 50%; height: 85%; width: auto; max-width: 90%; transform: translateX(-50%); }
@media (min-width: 1024px) {
  .article--pub.is-reading { grid-template-columns: calc(882 * var(--u)) minmax(0, 1fr); }
  .article--pub.is-reading > div:last-child { max-width: calc(733 * var(--u)); }
}