/* ==========================================================================
   dev.diogoroehrs.com
   Direção: painel de operação em papel. Tipografia serifada com peso,
   dados em mono, e o sistema de status (no ar / em uso / protótipo)
   como estrutura da página, não como enfeite.
   ========================================================================== */

:root{
  /* superfícies */
  --paper:      #F5F7F5;
  --paper-2:    #FFFFFF;
  --paper-deep: #101A17;

  /* tinta */
  --ink:        #16211D;
  --ink-2:      #4C5A54;
  --ink-3:      #61706A;
  --ink-inv:    #EDF2EF;

  /* linha */
  --rule:       #DCE3DF;
  --rule-soft:  #E8EDEA;

  /* status */
  --emerald:    #0B6E4F;
  --emerald-d:  #075239;
  --amber:      #946009;
  --slate:      #55676F;

  /* medidas */
  --wrap:       1180px;
  --gut:        clamp(20px, 5vw, 48px);

  /* tipos */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a{ color: inherit; }

h1,h2,h3{ margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--ink-inv);
  padding: 12px 18px; border-radius: 0 0 8px 0;
  font-family: var(--mono); font-size: 13px;
}
.skip:focus{ left: 0; }

:where(a, button, input, [tabindex]):focus-visible{
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================ TOPBAR ============================ */

.topbar{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 62px;
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
.brand-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--emerald) 15%, transparent);
}
.topnav{ display: flex; align-items: center; gap: 26px; }
.topnav a{
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--ink-2); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.topnav a:hover{ color: var(--ink); border-bottom-color: var(--emerald); }
.topnav a[aria-current]:not(.topnav-cta){ color: var(--ink); border-bottom-color: var(--emerald); }
.topnav .topnav-cta{
  color: var(--emerald); font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--emerald) 35%, transparent);
  border-radius: 999px; padding: 6px 15px;
}
.topnav .topnav-cta:hover{
  background: var(--emerald); color: var(--paper-2); border-color: var(--emerald);
}
@media (max-width: 800px){
  .topnav a:not(.topnav-cta){ display: none; }
}

/* ============================ HERO ============================ */

.hero{ padding-block: clamp(64px, 11vw, 132px) clamp(40px, 6vw, 64px); }

.eyebrow{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 26px;
}

.hero-title{
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 26px;
  max-width: 19ch;
  text-wrap: balance;
}
.hero-title em{
  font-style: italic;
  font-weight: 400;
  color: var(--emerald);
}

.hero-sub{
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 34px;
}

.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; }

/* botões */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: 15px; font-weight: 500;
  text-decoration: none; border-radius: 999px;
  padding: 13px 26px; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary{ background: var(--emerald); color: #fff; }
.btn-primary:hover{ background: var(--emerald-d); transform: translateY(-1px); }
.btn-ghost{ border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-1px); }
.btn-lg{ padding: 16px 32px; font-size: 16px; }

/* ============================ BOARD ============================ */

.board-sec{ padding-block: 0 clamp(56px, 9vw, 104px); }

.board-head{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.board-title{
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.board-legend{
  display: flex; flex-wrap: wrap; gap: 16px; margin: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
}
.lg{ display: inline-flex; align-items: center; gap: 7px; }

.dot{
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink-3); display: inline-block;
}
.dot-live{  background: var(--emerald); }
.dot-use{   background: var(--emerald); opacity: .45; }
.dot-proto{ background: var(--amber); }
.dot-tool{  background: var(--slate); }

.board{ list-style: none; margin: 0; padding: 0; }

.row{
  display: grid;
  grid-template-columns: 14px minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.row:hover{ background: color-mix(in srgb, var(--paper-2) 70%, transparent); }

.row .dot{ animation: pop .5s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes pop{ from{ transform: scale(0); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.row .dot-use{ animation-name: pop-soft; }
@keyframes pop-soft{ from{ transform: scale(0); opacity: 0; } to{ transform: scale(1); opacity: .45; } }

.row-name{
  font-family: var(--body); font-weight: 500; font-size: 16px;
  text-decoration: none; letter-spacing: -0.01em;
  border-bottom: 1px solid transparent;
  justify-self: start;
  transition: border-color .18s ease;
}
.row-name:hover{ border-bottom-color: var(--emerald); }

.row-kind{ font-size: 14px; color: var(--ink-2); }

.row-stack{
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  justify-self: end; text-align: right;
}

@media (max-width: 780px){
  .row{
    grid-template-columns: 14px 1fr;
    row-gap: 4px;
    padding-block: 14px;
  }
  .row-kind{ grid-column: 2; }
  .row-stack{ grid-column: 2; justify-self: start; text-align: left; }
}

/* ============================ SEÇÕES ============================ */

.sec-eyebrow{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--emerald);
  margin: 0 0 14px;
}
.sec-title{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.16; letter-spacing: -0.024em;
  margin: 0 0 8px; max-width: 24ch;
}

.cases{ padding-block: clamp(56px, 8vw, 96px) 0; }
.cases > .wrap{ margin-bottom: clamp(36px, 5vw, 56px); }

/* ============================ CASE ============================ */

.case{ border-top: 1px solid var(--rule); padding-block: clamp(44px, 6.5vw, 76px); }

.case-in{
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px){
  .case-in{ grid-template-columns: 1fr; }
}

.pill{
  display: inline-block; margin: 0 0 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid currentColor;
}
.pill-live{  color: var(--emerald); }
.pill-use{   color: var(--emerald-d); }
.pill-proto{ color: var(--amber); }
.pill-tool{  color: var(--slate); }

.case-title{
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.14; letter-spacing: -0.026em;
  margin: 0 0 6px;
}
.case-who{
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  margin: 0 0 26px;
}

.qa{ margin-bottom: 22px; }
.qa .q{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 7px;
}
.qa p:not(.q){ color: var(--ink-2); margin: 0; font-size: 16px; }

.stack{
  list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  margin: 24px 0 0; padding: 0;
}
.stack li{
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 5px 10px; border-radius: 5px;
}

.case-link{ margin: 22px 0 0; }
.case-link a{
  font-family: var(--mono); font-size: 13px; color: var(--emerald);
  text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.case-link a::after{ content: " \2197"; }
.case-link a:hover{ color: var(--emerald-d); }

/* prints */
.case-shots{ display: grid; gap: 22px; }

.shot{ margin: 0; }
.shot img{
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(16,26,23,.04), 0 12px 28px -18px rgba(16,26,23,.35);
}
.shot figcaption{
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  margin-top: 9px;
}
/* print de celular: mantém o retrato inteiro, sem corte. A legenda vai ao lado
   pra ocupar a largura que sobra, em vez de deixar um buraco. */
.shot-phone{
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.shot-phone img{ border-radius: 20px; }
.shot-phone figcaption{ margin-top: 0; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 560px){
  .shot-phone{ grid-template-columns: 1fr; gap: 10px; }
  .shot-phone img{ max-width: 252px; }
}

.note{
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  margin: 2px 0 0; font-style: normal;
}

/* ============================ OUTROS ============================ */

.outros{
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 8vw, 96px);
}
.grid-outros{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(24px, 3.4vw, 40px);
  margin-top: clamp(32px, 4.5vw, 48px);
}
.mini h3{
  font-size: 1.16rem; letter-spacing: -0.02em; margin: 0 0 8px;
}
.mini p{ font-size: 15px; color: var(--ink-2); }
.mini-shot{ margin: 0 0 16px; }
.mini-shot img{
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  border: 1px solid var(--rule); border-radius: 9px; background: var(--paper-2);
}
.mini-stack{
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  margin: 12px 0 0 !important;
}
/* bloco de automações: sem print, então ocupa a linha inteira
   e se organiza em duas colunas pra não ficar órfão no grid */
.mini-notext{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px clamp(24px, 4vw, 48px);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  margin-top: 4px;
}
.mini-notext h3{ margin: 0; }
.mini-notext p{ grid-column: 2; margin: 0; }
.mini-notext .mini-stack{ grid-column: 2; margin-top: 12px !important; }

@media (max-width: 700px){
  .mini-notext{ grid-template-columns: 1fr; }
  .mini-notext p, .mini-notext .mini-stack{ grid-column: 1; }
}

/* ============================ SERVIÇOS ============================ */

.servicos{
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 8vw, 96px);
}
.grid-serv{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin-top: clamp(32px, 4.5vw, 48px);
}
.serv{
  background: var(--paper-2);
  padding: clamp(24px, 3vw, 34px);
}
.serv h3{ font-size: 1.16rem; letter-spacing: -0.02em; margin: 0 0 10px; }
.serv p{ font-size: 15px; color: var(--ink-2); margin: 0; }

/* ============================ PROCESSO ============================ */

.processo{
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 8vw, 96px);
}
.passos{
  list-style: none; margin: clamp(32px, 4.5vw, 48px) 0 0; padding: 0;
  display: grid; gap: 0;
  max-width: 780px;
}
.passo{
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule-soft);
}
.passo:last-child{ border-bottom: 0; }
.passo-n{
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--emerald);
  border: 1px solid color-mix(in srgb, var(--emerald) 30%, transparent);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
}
.passo h3{ font-size: 1.12rem; letter-spacing: -0.018em; margin: 4px 0 7px; }
.passo p{ font-size: 15.5px; color: var(--ink-2); margin: 0; }

@media (max-width: 620px){
  .passo{ grid-template-columns: 1fr; gap: 10px; }
}

/* ============================ SOBRE ============================ */

.sobre{
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 8vw, 96px);
}
.sobre-in{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 880px){
  .sobre-in{ grid-template-columns: 1fr; }
}
.sobre-text .sec-title{ margin-bottom: 20px; }
.sobre-text p{ color: var(--ink-2); }
.sobre-text .lead{ font-size: 1.06rem; color: var(--ink); }

.sobre-side{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 30px);
}
.side-h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px; font-weight: 500;
}
.side-h + .side-list + .side-h{ margin-top: 28px; }

.side-list{ list-style: none; margin: 0; padding: 0; }
.side-list li{
  padding-bottom: 13px; margin-bottom: 13px;
  border-bottom: 1px solid var(--rule-soft);
}
.side-list li:last-child{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.side-list strong{ display: block; font-weight: 600; font-size: 15px; }
.side-list span{ font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.side-tags{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.side-tags li{
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 5px; padding: 4px 9px;
}

/* ============================ CONTATO ============================ */

.contato{
  background: var(--paper-deep);
  color: var(--ink-inv);
  padding-block: clamp(64px, 9vw, 112px);
}
.contato-in{ text-align: center; }
.contato-title{
  font-size: clamp(2rem, 4.8vw, 3.3rem);
  line-height: 1.1; letter-spacing: -0.028em;
  margin: 0 0 18px;
}
.contato-sub{
  color: color-mix(in srgb, var(--ink-inv) 66%, transparent);
  max-width: 46ch; margin: 0 auto 34px; font-size: 1.04rem;
}
.contato-actions{
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 34px;
}
.contato .btn-ghost{
  border-color: color-mix(in srgb, var(--ink-inv) 26%, transparent);
  color: var(--ink-inv);
}
.contato .btn-ghost:hover{ border-color: var(--ink-inv); }
.contato .btn-primary{ background: var(--emerald); }
.contato .btn-primary:hover{ background: #0d8560; }

.contato-meta{
  font-family: var(--mono); font-size: 12.5px;
  color: color-mix(in srgb, var(--ink-inv) 50%, transparent);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0;
}
.contato-meta a{ color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.contato-meta a:hover{ color: var(--ink-inv); }

/* ============================ RODAPÉ ============================ */

.rodape{ background: var(--paper-deep); border-top: 1px solid rgba(237,242,239,.1); padding-block: 22px; }
.rodape-in{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px;
  color: color-mix(in srgb, var(--ink-inv) 55%, transparent);
}
.rodape p{ margin: 0; }

/* ============================ MOTION ============================ */

.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-in{
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
}