@font-face {
  font-family: "Statos";
  src: url("assets/fonts/Statos-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #1d3a50;
  --paper: #eee8d9;
  --paper-2: #fbf7ec;
  --sun: #ffaa00;
  --green: #424d25;
  --rust: #7c3c1d;
  --line: rgba(29, 58, 80, 0.22);
  --pousada-blue: #00249c;
  --pousada-beige: #e5d9cd;
  --planet-night: #201636;
  --planet-violet: #40355a;
  --radius: 14px;
  --page: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Roboto Mono", ui-monospace, monospace;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  padding: 10px var(--page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--paper);
  background: var(--ink);
}
.site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo img { width: 58px; height: 48px; object-fit: contain; }
.site-logo span, .site-nav a {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-nav { display: flex; gap: clamp(16px, 3vw, 42px); }
.site-nav a { color: var(--paper); text-decoration: none; }
.site-nav a:hover { color: var(--sun); }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.display {
  font-family: "Statos", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .92;
}
.section-title { font-size: clamp(2rem, 4.8vw, 4.4rem); }
.section-head {
  padding: clamp(48px, 7vw, 96px) var(--page) clamp(24px, 3vw, 42px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.section-head p { max-width: 46ch; font-size: .86rem; line-height: 1.6; }

.home-hero {
  min-height: 84vh;
  padding: clamp(38px, 5vw, 72px) var(--page);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  color: var(--paper);
  background: var(--green);
}
.home-hero h1 { font-size: clamp(3.8rem, 10vw, 9rem); text-transform: uppercase; }
.home-hero h1 span { color: var(--sun); }
.home-hero__foot { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.home-hero__foot p { max-width: 48ch; font-size: clamp(.98rem, 1.25vw, 1.16rem); }
.round-link {
  width: clamp(126px, 11vw, 164px);
  aspect-ratio: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sun);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .78rem;
}
.round-link b { align-self: end; font-size: 2rem; }

.work-heading { padding: clamp(48px, 7vw, 96px) var(--page) clamp(24px, 3vw, 40px); }
.work-heading h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }

.work-showcase { padding: 0 var(--page) clamp(72px, 9vw, 130px); display: grid; gap: clamp(64px, 8vw, 120px); }
.work-card { color: var(--ink); text-decoration: none; }
.work-card__visual { overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); }
.work-card__meta { padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.work-card__meta h3 { font-size: clamp(1.9rem, 3vw, 3.1rem); }
.work-card__meta p { margin-top: 6px; font-size: .72rem; text-transform: uppercase; }
.work-card__meta span { white-space: nowrap; font-size: .72rem; text-transform: uppercase; }
.system-preview { padding: clamp(16px, 3vw, 48px); background: var(--ink); }
.system-preview img { width: 100%; max-width: 1360px; margin: auto; border-radius: 8px; }
.preview-caption { display: block; margin-top: 18px; color: var(--paper); font-size: .8rem; }
.mini-pousada { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 420px; background: var(--pousada-blue); }
.mini-pousada__brand { display: grid; place-items: center; padding: 40px; }
.mini-pousada__brand img { max-width: 82%; }
.mini-pousada__site { margin: 28px 28px 28px 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: white; }
.mini-pousada__site img { width: 100%; }
.home-image { width: 100%; height: clamp(320px, 52vw, 700px); object-fit: cover; }
.home-image--artwork { height: auto; padding: clamp(14px, 3vw, 40px); background: white; }

.home-about {
  padding: clamp(64px, 9vw, 132px) var(--page);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  color: var(--paper);
  background: var(--rust);
}
.home-about h2 { font-size: clamp(3rem, 6vw, 6rem); }
.home-about p { max-width: 48ch; align-self: end; font-size: clamp(1rem, 1.2vw, 1.15rem); }

.case-hero { padding: clamp(42px, 6vw, 88px) var(--page); color: var(--paper); background: var(--ink); }
.case-hero--green { background: var(--green); }
.case-hero--planet { background: var(--planet-night); }
.case-hero h1 { margin-top: 18px; font-size: clamp(3.2rem, 8vw, 8rem); text-transform: uppercase; }
.case-hero__bottom { margin-top: clamp(30px, 5vw, 68px); display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.case-hero__bottom p { max-width: 58ch; font-size: clamp(.95rem, 1.2vw, 1.12rem); }
.case-count { display: grid; grid-template-columns: repeat(2, auto); gap: 18px 28px; flex: none; }
.case-count strong { font-family: "Roboto Mono", ui-monospace, monospace; color: var(--sun); font-size: 3rem; font-weight: 700; line-height: .8; letter-spacing: -.06em; }
.case-count span { max-width: 12ch; font-size: .66rem; text-transform: uppercase; }

.gallery-section { padding: clamp(32px, 5vw, 72px) var(--page) clamp(80px, 9vw, 140px); display: grid; gap: clamp(56px, 8vw, 112px); }
.screen-block { display: grid; gap: 14px; min-width: 0; }
.screen-label { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.screen-label p { font-size: .7rem; text-transform: uppercase; }
.screen-label strong { font-family: "Statos", Arial, sans-serif; font-size: clamp(1.5rem, 3vw, 2.8rem); font-weight: 400; }
.screen-note { max-width: 56ch; font-size: .78rem; line-height: 1.55; }
.browser {
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: 10px 12px 0 rgba(29, 58, 80, .1);
}
.browser--blue { border-color: var(--pousada-blue); box-shadow: 10px 12px 0 rgba(0, 36, 156, .12); }
.browser__bar {
  height: 40px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #dcd4bd;
  border-bottom: 1px solid var(--line);
}
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e0664f; }
.browser__bar i:nth-child(2) { background: #e0b04f; }
.browser__bar i:nth-child(3) { background: #5fa06a; }
.browser__bar span { margin-left: 8px; font-size: .62rem; opacity: .62; }
.browser__scroll { overflow-x: auto; }
.browser__canvas { min-width: 760px; }

.app-top {
  min-height: 84px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--paper);
  background: var(--ink);
}
.app-top img { width: 52px; height: 42px; object-fit: contain; }
.app-top__title { flex: 1; }
.app-top__title small { display: block; font-size: .6rem; text-transform: uppercase; opacity: .68; }
.app-top__title strong { font-family: "Statos", Arial, sans-serif; font-size: 1.28rem; font-weight: 400; }
.app-top__status { font-size: .65rem; text-transform: uppercase; }
.app-nav { padding: 0 20px; display: flex; overflow: hidden; color: var(--paper); background: var(--ink); border-top: 1px solid rgba(238, 232, 217, .16); }
.app-nav span { padding: 10px 11px 8px; white-space: nowrap; font-size: .62rem; border-bottom: 3px solid transparent; }
.app-nav .active { color: var(--sun); border-color: var(--sun); }
.ui-band { padding: 24px; background: var(--sun); }
.ui-band--paper { background: var(--paper-2); }
.ui-band--green { color: var(--paper); background: var(--green); }
.ui-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.ui-head small { display: block; font-size: .62rem; text-transform: uppercase; }
.ui-head h3 { font-family: "Statos", Arial, sans-serif; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 400; }
.ui-action { padding: 9px 12px; color: var(--paper); background: var(--ink); border-radius: 5px; font-size: .66rem; }
.kpi-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { min-height: 112px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); }
.kpi small { font-size: .62rem; text-transform: uppercase; }
.kpi strong { font-size: 1.2rem; }
.kpi p { font-size: .62rem; opacity: .7; }
.alert-list { margin-top: 16px; display: grid; gap: 8px; }
.alert-row { padding: 11px 13px; display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; background: white; border: 1px solid var(--line); }
.alert-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); }
.alert-row strong { font-size: .72rem; }
.alert-row span { font-size: .62rem; opacity: .66; }

.kanban { padding: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--paper-2); }
.kanban-col { padding: 10px; background: #e5dfcf; border-radius: 7px; }
.kanban-col h4 { margin-bottom: 9px; font-size: .64rem; text-transform: uppercase; }
.kanban-card { margin-top: 8px; padding: 12px; min-height: 92px; display: grid; align-content: space-between; background: white; border-left: 4px solid var(--sun); }
.kanban-card strong { font-size: .72rem; }
.kanban-card p, .kanban-card span { font-size: .58rem; opacity: .65; }
.kanban-card span { justify-self: end; padding: 4px 7px; background: var(--paper); border-radius: 999px; }

.project-list { padding: 22px; display: grid; gap: 12px; background: var(--paper-2); }
.project-card { padding: 16px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.project-card__top { display: flex; justify-content: space-between; gap: 16px; }
.project-card__top strong { font-size: .78rem; }
.project-card__top span { font-size: .6rem; opacity: .64; }
.phase-row { margin-top: 13px; display: flex; gap: 7px; }
.phase { flex: 1; padding: 7px 5px; text-align: center; font-size: .56rem; background: #d7e1cb; border-radius: 999px; }
.phase.current { color: var(--paper); background: var(--ink); }
.phase.waiting { background: #f0c9b4; }
.project-detail { margin-top: 12px; padding-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--line); }
.project-detail small { display: block; font-size: .55rem; opacity: .6; }
.project-detail b { font-size: .68rem; }

.capture-box { margin-top: 18px; padding: 17px; display: grid; grid-template-columns: 1fr auto; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.capture-box span { font-size: .68rem; opacity: .62; }
.capture-box b { padding: 8px 12px; color: var(--paper); background: var(--ink); font-size: .64rem; }
.opportunity-grid { padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--paper-2); }
.opportunity-card { padding: 14px; display: grid; gap: 10px; background: white; border: 1px solid var(--line); border-top: 5px solid var(--sun); }
.opportunity-card strong { font-size: .72rem; }
.opportunity-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 9px; font-size: .58rem; }
.opportunity-card dt { opacity: .58; }
.opportunity-card dd { margin: 0; }
.opportunity-card em { justify-self: start; padding: 4px 7px; color: var(--paper); background: var(--green); font-size: .56rem; font-style: normal; }

.dropzone { margin-top: 16px; padding: 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border: 2px dashed rgba(238, 232, 217, .48); border-radius: 7px; }
.dropzone strong { font-size: .72rem; }
.dropzone span { padding: 6px 10px; font-size: .58rem; background: rgba(238, 232, 217, .14); border-radius: 999px; }
.record-grid { padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--paper-2); }
.record-card { padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); background: white; }
.record-card strong { font-size: .72rem; }
.record-card p { font-size: .58rem; opacity: .68; }
.record-card footer { padding-top: 8px; display: flex; justify-content: space-between; font-size: .56rem; border-top: 1px solid var(--line); }

.project-tabs { padding: 14px 20px 0; display: flex; gap: 6px; background: #e3dcc8; }
.project-tabs span { padding: 9px 10px; font-size: .58rem; background: var(--paper); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.project-tabs .active { color: var(--paper); background: var(--ink); }
.goal-grid { padding: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--paper-2); }
.goal { padding: 14px; border-left: 4px solid var(--sun); background: white; }
.goal small { font-size: .55rem; text-transform: uppercase; opacity: .58; }
.goal strong { min-height: 36px; margin: 6px 0 12px; display: block; font-size: .66rem; }
.progress { height: 8px; overflow: hidden; background: #d7d0be; border-radius: 99px; }
.progress i { display: block; height: 100%; background: var(--green); }

.budget { padding: 22px; background: var(--paper-2); }
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.budget-summary div { padding: 14px; background: white; border: 1px solid var(--line); }
.budget-summary small { display: block; font-size: .58rem; opacity: .62; }
.budget-summary strong { font-size: .9rem; }
.budget-table { margin-top: 14px; }
.budget-row { display: grid; grid-template-columns: 1.6fr .7fr .7fr .7fr; gap: 10px; padding: 10px 12px; align-items: center; background: white; border-bottom: 1px solid var(--line); font-size: .62rem; }
.budget-row.head { color: var(--paper); background: var(--ink); text-transform: uppercase; }
.budget-row b { text-align: right; }

.finance-grid { padding: 22px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; background: var(--paper-2); }
.finance-panel { padding: 16px; background: white; border: 1px solid var(--line); }
.finance-panel h4 { margin-bottom: 13px; font-size: .72rem; }
.finance-row { padding: 9px 0; display: grid; grid-template-columns: 1fr auto; gap: 14px; font-size: .62rem; border-bottom: 1px solid var(--line); }
.invoice-import { padding: 16px; display: grid; gap: 10px; color: var(--paper); background: var(--green); }
.invoice-import strong { font-size: .72rem; }
.invoice-import p { font-size: .6rem; opacity: .78; }
.invoice-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.invoice-fields span { padding: 9px; color: var(--ink); background: var(--paper); font-size: .56rem; }

.export-area { padding: 26px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; background: var(--green); color: var(--paper); }
.export-actions { display: grid; align-content: center; gap: 10px; }
.export-actions h3 { font-family: "Statos", Arial, sans-serif; font-size: 2rem; font-weight: 400; }
.export-actions p { font-size: .7rem; opacity: .8; }
.export-actions span { padding: 12px 14px; display: block; color: var(--ink); background: var(--sun); font-size: .65rem; font-weight: 700; }
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doc { min-height: 330px; padding: 24px 22px; color: #20242a; background: white; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.doc small { font-size: .52rem; text-transform: uppercase; color: #666; }
.doc h4 { margin: 14px 0 18px; font-family: Arial, sans-serif; font-size: 1rem; }
.doc i { height: 5px; margin: 9px 0; display: block; background: #d8d8d8; }
.doc i:nth-of-type(2n) { width: 78%; }

/* Sistema Sankofa: a linguagem abaixo replica a interface real do produto. */
.system-case {
  --sys-sol: #ffaa00;
  --sys-agua: #1d3a50;
  --sys-cerrado: #424d25;
  --sys-sempre-viva: #eee8d9;
  --sys-papel: #fbf7ec;
  --sys-verde: #159447;
  --sys-azul: #65c7ff;
  background: var(--sys-sempre-viva);
}
.system-case .case-hero { color: var(--sys-agua); background: var(--sys-sol); }
.system-case .case-hero .case-count strong { color: var(--sys-verde); }
.system-case .section-head, .system-case .gallery-section { background: var(--sys-sempre-viva); }
.system-case .browser { border-color: var(--sys-agua); background: var(--sys-papel); box-shadow: 10px 12px 0 rgba(29,58,80,.12); }
.system-case .browser__bar { background: #d8d4c8; }
.system-case .browser__canvas { min-width: 920px; }
.sys-shell {
  color: var(--sys-agua);
  background: var(--sys-sempre-viva);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}
.sys-shell strong, .sys-shell b { font-family: inherit; }
.sys-top {
  min-height: 74px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--sys-papel);
  background: var(--sys-agua);
}
.sys-top img { width: 48px; height: 42px; object-fit: contain; }
.sys-top div { flex: 1; }
.sys-top small { display: block; font-size: 9px; text-transform: uppercase; opacity: .74; }
.sys-top strong { display: block; font-size: 19px; line-height: 1; }
.sys-top > span { padding: 7px 9px; font-size: 9px; border: 1px solid rgba(251,247,236,.24); border-radius: 5px; }
.sys-nav {
  padding: 0 28px;
  display: flex;
  gap: 22px;
  overflow: hidden;
  color: var(--sys-papel);
  background: var(--sys-agua);
  border-top: 1px solid rgba(251,247,236,.42);
}
.sys-nav span { padding: 10px 0 8px; white-space: nowrap; font-size: 9px; border-bottom: 3px solid transparent; }
.sys-nav .active { border-color: var(--sys-sol); }
.sys-hero { padding: 22px 28px 26px; background: var(--sys-sol); }
.sys-eyebrow { display: block; margin-bottom: 4px; font-size: 9px; text-transform: uppercase; }
.sys-title { font-family: Arial, "Helvetica Neue", sans-serif; font-size: 34px; font-weight: 800; line-height: .94; letter-spacing: -.035em; text-transform: uppercase; }
.sys-title-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.sys-title-row > span { font-size: 9px; }
.sys-kpis { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sys-kpis--five { grid-template-columns: repeat(5, 1fr); }
.sys-kpis--six { grid-template-columns: repeat(3, 1fr); }
.sys-kpi { min-height: 112px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: var(--sys-papel); border: 1px solid var(--sys-agua); border-radius: 7px; }
.sys-kpi.is-dark { color: var(--sys-papel); background: var(--sys-agua); }
.sys-kpi small { font-size: 9px; text-transform: uppercase; }
.sys-kpi strong { color: var(--sys-verde); font-family: Arial, sans-serif; font-size: 22px; font-weight: 800; }
.sys-kpi.is-dark strong { color: var(--sys-sol); }
.sys-kpi p { font-size: 9px; opacity: .72; }
.sys-section { padding: 24px 28px; background: var(--sys-sempre-viva); }
.sys-section--navy { color: var(--sys-papel); background: var(--sys-agua); }
.sys-section--green { color: var(--sys-papel); background: var(--sys-cerrado); }
.sys-section--paper { background: var(--sys-papel); }
.sys-section-head { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.sys-section-head small { display: block; font-size: 9px; text-transform: uppercase; }
.sys-section-head h4 { font-family: Arial, sans-serif; font-size: 24px; line-height: 1; text-transform: uppercase; }
.sys-button { padding: 8px 11px; align-self: end; color: var(--sys-agua); background: var(--sys-sol); border: 1px solid var(--sys-agua); border-radius: 5px; font-size: 9px; font-weight: 700; }
.sys-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sys-field { min-height: 56px; display: grid; align-content: end; gap: 5px; }
.sys-field small { font-size: 9px; font-weight: 700; }
.sys-field span { min-height: 31px; padding: 8px; color: rgba(29,58,80,.58); background: var(--sys-papel); border: 1px solid rgba(29,58,80,.28); border-radius: 5px; font-size: 9px; }
.sys-field--wide { grid-column: span 2; }
.sys-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sys-card { padding: 13px; background: var(--sys-papel); border: 1px solid rgba(29,58,80,.18); border-radius: 7px; }
.sys-card strong { display: block; font-size: 12px; }
.sys-card p { margin-top: 5px; font-size: 9px; opacity: .72; }
.sys-card-meta { margin-top: 13px; padding-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(29,58,80,.22); }
.sys-card-meta small { display: block; font-size: 8px; opacity: .65; }
.sys-card-meta b { font-size: 9px; }
.sys-list { display: grid; gap: 8px; }
.sys-row { padding: 12px 13px; display: grid; grid-template-columns: 1.25fr .8fr .8fr .7fr; gap: 12px; align-items: center; background: var(--sys-papel); border: 1px solid rgba(29,58,80,.18); border-radius: 6px; }
.sys-row strong { font-size: 11px; }
.sys-row span, .sys-row small { font-size: 9px; }
.sys-tag { justify-self: start; padding: 4px 7px; color: #14552d; background: #d9efdd; border: 1px solid #87bd91; border-radius: 999px; font-size: 8px; }
.sys-input-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.sys-input-line span { min-height: 58px; padding: 13px; color: rgba(29,58,80,.58); background: var(--sys-papel); border: 1px solid rgba(29,58,80,.28); border-radius: 5px; }
.sys-radar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sys-alert { padding: 12px; color: var(--sys-agua); background: var(--sys-papel); border-radius: 6px; }
.sys-alert + .sys-alert { margin-top: 8px; }
.sys-bars { display: grid; gap: 10px; }
.sys-bar { font-size: 9px; }
.sys-bar i { margin-top: 4px; display: block; width: var(--w, 72%); height: 7px; background: var(--sys-azul); border-radius: 999px; }
.sys-project-table { display: grid; gap: 3px; }
.sys-project-row { display: grid; grid-template-columns: 1.4fr .7fr 1.3fr .7fr; gap: 12px; padding: 10px 0; align-items: center; border-bottom: 1px solid rgba(29,58,80,.24); font-size: 9px; }
.sys-progress { height: 7px; overflow: hidden; background: white; border: 1px solid rgba(29,58,80,.18); border-radius: 99px; }
.sys-progress i { display: block; width: var(--w, 72%); height: 100%; background: var(--sys-verde); }
.sys-tabs { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.sys-tabs span { padding: 7px 10px; background: var(--sys-papel); border: 1px solid var(--sys-agua); border-radius: 5px; font-size: 9px; }
.sys-tabs .active { color: var(--sys-papel); background: var(--sys-agua); }
.sys-columns { display: grid; grid-template-columns: .72fr 1.25fr 1fr; gap: 10px; align-items: start; }
.sys-column { padding: 13px; background: var(--sys-papel); border: 1px solid rgba(29,58,80,.18); border-radius: 7px; }
.sys-column h5 { margin: 0 0 10px; font-family: Arial, sans-serif; font-size: 15px; }
.sys-entry { margin-top: 7px; padding: 9px; background: #f5f0e4; border: 1px solid rgba(29,58,80,.14); border-radius: 5px; }
.sys-entry strong { font-size: 9px; }
.sys-entry p { margin-top: 4px; font-size: 8px; opacity: .72; }
.sys-entry b { display: block; margin-top: 6px; color: var(--sys-verde); font-size: 9px; }
.sys-credentials { display: grid; grid-template-columns: .6fr 1fr; gap: 20px; align-items: end; }
.sys-credentials h4 { font-family: Arial, sans-serif; font-size: 29px; line-height: .9; text-transform: uppercase; }
.sys-export { padding: 22px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: var(--sys-papel); background: var(--sys-agua); }
.sys-export div { padding: 18px; border: 1px solid rgba(251,247,236,.35); border-radius: 7px; }
.sys-export small { font-size: 9px; text-transform: uppercase; }
.sys-export strong { margin-top: 8px; display: block; font-family: Arial, sans-serif; font-size: 18px; }
.sys-export span { margin-top: 12px; padding: 9px 11px; display: inline-block; color: var(--sys-agua); background: var(--sys-sol); font-size: 9px; font-weight: 700; }
.manager-map { padding: 22px 28px; color: var(--sys-papel); background: var(--sys-agua); }
.manager-map small { display: block; margin-bottom: 10px; font-size: 9px; text-transform: uppercase; opacity: .68; }
.manager-map div { display: flex; flex-wrap: wrap; gap: 7px; }
.manager-map span { padding: 7px 9px; border: 1px solid rgba(251,247,236,.36); border-radius: 999px; font-size: 9px; }
.sys-back { padding: 12px 28px 0; background: var(--sys-sempre-viva); font-size: 9px; text-decoration: underline; }
.sys-subtabs { padding: 0 28px 18px; display: flex; flex-wrap: wrap; gap: 7px; background: var(--sys-sol); }
.sys-subtabs span { padding: 7px 9px; background: var(--sys-papel); border: 1px solid var(--sys-agua); border-radius: 5px; font-size: 9px; }
.sys-subtabs .active { color: var(--sys-papel); background: var(--sys-agua); }
.sys-data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sys-data { padding: 11px; background: var(--sys-papel); border-top: 1px solid rgba(29,58,80,.28); }
.sys-data small { display: block; font-size: 8px; opacity: .65; }
.sys-data strong { display: block; margin-top: 4px; font-size: 10px; }
.sys-record-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.sys-record { padding: 13px; background: var(--sys-papel); border: 1px solid rgba(29,58,80,.18); border-radius: 7px; }
.sys-record header { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; }
.sys-record h5 { margin: 0; font-size: 12px; }
.sys-record .sys-fields { grid-template-columns: repeat(2, 1fr); }
.sys-checklist { display: grid; gap: 7px; }
.sys-check { padding: 10px 12px; display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: center; background: var(--sys-papel); border: 1px solid rgba(29,58,80,.18); border-radius: 6px; }
.sys-check i { width: 14px; height: 14px; border: 1px solid var(--sys-agua); border-radius: 3px; background: #d9efdd; }
.sys-check strong { font-size: 10px; }
.sys-check span { font-size: 8px; opacity: .68; }
.sys-manager-note { padding: 15px; background: #fff2cc; border-left: 4px solid var(--sys-sol); font-size: 9px; }

.brand-stage { padding: clamp(44px, 7vw, 100px) var(--page); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--pousada-beige); }
.brand-panel { min-height: min(50vw, 580px); padding: clamp(34px, 6vw, 84px); display: grid; place-items: center; background: var(--pousada-blue); }
.brand-panel img { max-width: 78%; }
.brand-panel--beige { background: var(--pousada-beige); }
.brand-panel--beige img { filter: none; }
.swatches { grid-column: 1 / -1; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: .7rem; text-transform: uppercase; }
.swatches span { display: inline-flex; align-items: center; gap: 9px; }
.swatches i { width: 30px; height: 30px; display: inline-block; border: 1px solid rgba(0,0,0,.16); }

.pousada-top { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; color: white; background: var(--pousada-blue); }
.pousada-top img { height: 36px; width: auto; }
.pousada-nav { display: flex; gap: 16px; font-size: .6rem; }
.pousada-content { padding: 28px; background: white; color: #17181c; }
.pousada-content .ui-head h3 { color: var(--pousada-blue); font-family: Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.02em; }
.booking-fields { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.booking-fields label { font-size: .6rem; }
.booking-fields span { margin-top: 5px; padding: 12px; display: block; border: 1px solid #dedad3; }
.booking-fields b { padding: 12px; align-self: end; text-align: center; color: white; background: var(--pousada-blue); font-size: .65rem; }
.room-results { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.room-card { padding: 14px; background: #eef0fa; border: 1px solid rgba(0,36,156,.22); }
.room-card strong { color: var(--pousada-blue); font-size: .72rem; }
.room-card p { margin-top: 5px; font-size: .58rem; color: #4a4b52; }
.room-card b { margin-top: 12px; display: block; font-size: .78rem; }
.whatsapp-preview { margin-top: 16px; padding: 12px; display: flex; align-items: center; gap: 12px; background: #f4efe8; font-size: .62rem; }
.whatsapp-preview strong { padding: 9px 11px; color: #073c1b; background: #25d366; border-radius: 999px; }

.admin-top { padding: 16px 22px; display: flex; justify-content: space-between; color: white; background: var(--pousada-blue); }
.admin-top strong { font-size: .8rem; }
.admin-top span { font-size: .58rem; }
.admin-body { padding: 22px; background: #fafafa; color: #17181c; }
.admin-body h3 { color: var(--pousada-blue); font-size: .82rem; }
.admin-table { margin-top: 12px; }
.admin-row { display: grid; grid-template-columns: .7fr 1.1fr 1fr .8fr .65fr .65fr .55fr; gap: 9px; padding: 9px 7px; font-size: .58rem; border-bottom: 1px solid #ddd; }
.admin-row.head { color: white; background: var(--pousada-blue); text-transform: uppercase; }
.occupancy { margin-top: 22px; }
.occupancy-row { display: grid; grid-template-columns: 84px repeat(10, 1fr); gap: 3px; margin-top: 3px; }
.occupancy-row strong { font-size: .58rem; }
.occupancy-row span { min-height: 24px; display: grid; place-items: center; color: #1e6b3c; background: #ddefd3; font-size: .5rem; }
.occupancy-row .busy { color: white; background: var(--pousada-blue); }
.occupancy-row .pending { color: #17181c; background: var(--pousada-beige); }

.sync-flow { padding: 28px; display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: center; gap: 12px; color: #17181c; background: var(--pousada-beige); }
.sync-node { min-height: 125px; padding: 16px; display: grid; align-content: center; gap: 6px; background: white; border: 2px solid var(--pousada-blue); }
.sync-node strong { color: var(--pousada-blue); font-size: .72rem; }
.sync-node span { font-size: .58rem; }
.sync-arrow { color: var(--pousada-blue); font-size: 1.6rem; }

.real-site { padding: clamp(56px, 8vw, 110px) var(--page); background: var(--paper-2); }
.real-site--blue { color: white; background: var(--pousada-blue); }
.real-site--planet { color: var(--paper); background: #071b54; }
.real-site__head { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.real-site__head h2 { font-size: clamp(2.5rem, 5vw, 5rem); }
.real-site__head p { max-width: 46ch; font-size: .8rem; }
.capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.capture-card { min-width: 0; }
.capture-card--wide { grid-column: 1 / -1; }
.capture-card figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 18px; font-size: .68rem; text-transform: uppercase; }
.capture-frame { overflow: hidden; border: 2px solid currentColor; border-radius: var(--radius); background: white; box-shadow: 10px 12px 0 rgba(0,0,0,.13); }
.capture-chrome { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 7px; color: #1d3a50; background: #d8d4c8; border-bottom: 1px solid rgba(29,58,80,.22); }
.capture-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #e0664f; }
.capture-chrome i:nth-child(2) { background: #e0b04f; }
.capture-chrome i:nth-child(3) { background: #5fa06a; }
.capture-chrome span { margin-left: 7px; font-size: .58rem; opacity: .65; }
.capture-viewport { height: clamp(390px, 48vw, 720px); overflow-y: auto; background: white; }
.capture-card:not(.capture-card--wide) .capture-viewport { height: clamp(360px, 42vw, 620px); }
.capture-viewport img { width: 100%; height: auto; }
.capture-viewport--booking { background: #f4efe8; }
.capture-viewport--booking img { height: 100%; object-fit: contain; }

.planet-photo-hero { position: relative; background: var(--planet-night); }
.planet-photo-hero img { width: 100%; height: min(72vw, 800px); object-fit: cover; object-position: center; }
.planet-photo-hero figcaption { position: absolute; inset: auto var(--page) 28px; max-width: 40ch; color: white; font-size: .7rem; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.planet-facts { padding: 22px var(--page); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; color: var(--paper); background: var(--planet-night); }
.planet-facts div { padding: 20px; border: 1px solid rgba(238,232,217,.22); }
.planet-facts strong { display: block; color: var(--sun); font-family: "Roboto Mono", ui-monospace, monospace; font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -.06em; }
.planet-facts span { font-size: .62rem; text-transform: uppercase; }
.planet-concept { padding: clamp(64px, 8vw, 126px) var(--page); display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; color: var(--paper); background: var(--planet-violet); }
.planet-concept h2 { font-size: clamp(2.8rem, 5.5vw, 5.8rem); }
.planet-concept p { max-width: 56ch; align-self: end; font-size: clamp(1rem, 1.25vw, 1.15rem); }
.planet-process { background: white; }
.planet-process img { width: 100%; }
.planet-tags { padding: 20px var(--page) 46px; display: flex; flex-wrap: wrap; gap: 8px; background: white; }
.planet-tags span { padding: 8px 11px; border: 1px solid var(--ink); border-radius: 999px; font-size: .62rem; text-transform: uppercase; }
.planet-photos { padding: var(--page); display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: repeat(2, minmax(260px, 36vw)); gap: 8px; background: var(--planet-night); }
.planet-photos img { width: 100%; height: 100%; object-fit: cover; }
.planet-photos img:first-child { grid-row: 1 / 3; }
.planet-dome-art { background: #071b54; }
.planet-dome-art img { width: 100%; }
.planet-applications { padding: var(--page); display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; background: #13162a; color: var(--paper); isolation: isolate; }
.planet-application { min-width: 0; }
.planet-application img { width: 100%; }
.planet-application--uniform img, .planet-application--lanyard img { mix-blend-mode: lighten; }
.planet-application figcaption { padding-top: 12px; font-size: .8rem; }
.planet-application--uniform { grid-row: span 2; }
.planet-application--button img { width: min(100%, 310px); margin: auto; }
.planet-application--button figcaption { text-align: center; }
.petrobras-cover { padding: clamp(20px, 4vw, 64px); background: white; }
.petrobras-cover img { width: 100%; max-width: 1600px; margin: auto; }
.petrobras-cover figcaption { margin: 18px auto 0; max-width: 1600px; font-size: .8rem; }
.petrobras-applications { display: grid; grid-template-columns: 1fr 1fr .65fr; gap: 24px; align-items: center; }
.petrobras-applications img { width: 100%; border-radius: 6px; }
.petrobras-applications img:last-child { max-width: 320px; justify-self: center; }
.petrobras-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(24px, 5vw, 80px); margin-top: 40px; }
.petrobras-pages img { width: auto; max-width: 100%; max-height: 520px; border-radius: 6px; }
.planet-site { padding: clamp(48px, 7vw, 96px) var(--page); color: var(--paper); background: var(--planet-night); }
.planet-site .section-head { padding: 0 0 28px; border-color: rgba(238,232,217,.26); }
.planet-site .section-head p { color: rgba(238,232,217,.8); }
.planet-web { margin-top: 34px; border-color: var(--sun); box-shadow: 10px 12px 0 rgba(255,170,0,.2); }
.planet-web-top { padding: 16px 22px; display: flex; justify-content: space-between; color: var(--paper); background: var(--planet-night); }
.planet-web-top strong { font-family: "Statos", Arial, sans-serif; font-size: 1.1rem; }
.planet-web-top nav { display: flex; gap: 15px; font-size: .58rem; }
.planet-web-body { padding: 26px; color: var(--paper); background: #312647; }
.planet-web-body h3 { font-family: "Statos", Arial, sans-serif; font-size: 2.1rem; font-weight: 400; }
.session-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.session-card { min-height: 150px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: #473a60; border-top: 4px solid var(--sun); }
.session-card small { font-size: .56rem; color: var(--sun); text-transform: uppercase; }
.session-card strong { font-size: .72rem; }
.session-card span { font-size: .58rem; opacity: .72; }
.session-card b { padding: 7px 9px; align-self: start; color: var(--planet-night); background: var(--sun); font-size: .56rem; }
.cinemateca { margin-top: 20px; padding-top: 18px; display: grid; grid-template-columns: .65fr 1.35fr; gap: 18px; border-top: 1px solid rgba(238,232,217,.24); }
.cinemateca p { font-size: .68rem; color: rgba(238,232,217,.76); }
.film-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.film { aspect-ratio: .8; padding: 10px; display: flex; align-items: end; background: linear-gradient(135deg, #6e5b8a, #1b1428); font-size: .55rem; border: 1px solid rgba(255,255,255,.18); }

.footer {
  min-height: 320px;
  padding: clamp(52px, 7vw, 100px) var(--page) 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
  background: var(--ink);
}
.footer a { color: var(--paper); text-decoration: none; }
.footer__mail { font-family: "Statos", Arial, sans-serif; font-size: clamp(2rem, 5vw, 5rem); line-height: .95; }
.footer__bottom { padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; font-size: .68rem; text-transform: uppercase; border-top: 1px solid rgba(238,232,217,.3); }

@media (max-width: 840px) {
  .site-logo span { display: none; }
  .home-hero__foot, .case-hero__bottom, .section-head, .work-card__meta { align-items: flex-start; flex-direction: column; }
  .round-link { width: 118px; }
  .mini-pousada, .home-about, .planet-concept { grid-template-columns: 1fr; }
  .mini-pousada__site { margin: 0 18px 18px; }
  .mini-pousada__brand img { max-width: 340px; width: 80%; }
  .planet-applications { grid-template-columns: 1fr; gap: 36px; }
  .planet-application--uniform { grid-row: auto; }
  .planet-application--button img { max-width: 260px; }
  .petrobras-applications { grid-template-columns: 1fr; }
  .petrobras-applications img { max-width: 560px; margin: auto; }
  .brand-stage { grid-template-columns: 1fr; }
  .brand-panel { min-height: 68vw; }
  .swatches { grid-column: 1; flex-direction: column; }
  .case-count { align-self: stretch; justify-content: start; }
  .planet-facts { grid-template-columns: repeat(2, 1fr); }
  .planet-photos { grid-template-columns: 1fr 1fr; grid-template-rows: 55vw 45vw; }
  .planet-photos img:first-child { grid-column: 1 / 3; grid-row: 1; }
  .planet-photos img:nth-child(2), .planet-photos img:nth-child(3) { grid-row: 2; }
  .real-site__head { align-items: flex-start; flex-direction: column; }
  .capture-grid { grid-template-columns: 1fr; }
  .capture-card--wide { grid-column: 1; }
  .footer__bottom { flex-direction: column; }
}

@media (max-width: 540px) {
  .site-header { min-height: 64px; }
  .site-nav { gap: 16px; }
  .home-hero h1 { font-size: clamp(3.2rem, 18vw, 5.2rem); }
  .case-hero h1 { font-size: clamp(3rem, 15vw, 5.2rem); }
  .planet-facts { grid-template-columns: 1fr 1fr; padding: 12px; }
  .planet-facts div { padding: 14px; }
  .planet-photos { padding: 12px; }
  .screen-label { align-items: flex-start; flex-direction: column; }
}

/* Keep portfolio captions readable without changing the product demos. */
.site-logo span, .site-nav a, .work-card__meta p,
.work-card__meta span, .screen-label p, .screen-note, .capture-card figcaption,
.planet-facts span, .footer__bottom, .eyebrow { font-size: .8rem; }
.capture-card figcaption { flex-wrap: wrap; }
.capture-chrome span, .browser__bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer__mail { overflow-wrap: anywhere; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sun); outline-offset: 5px; }
[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}