:root {
  --azul: #159BD7;
  --azul-vivo: #38B4E8;
  --azul-claro: #E7F4FB;
  --azul-escuro: #0E7AAD;
  --azul-profundo: #0A5A80;
  --azul-texto: #0C6E9B;
  --cinza-marca: #A7A9AC;
  --preto-marca: #231F20;
  --papel: #FFFFFF;
  --papel-2: #F2F6F9;
  --linha: #DBE4EA;
  --texto: #3B444C;
  --texto-forte: #231F20;
  --texto-fraco: #5C666F;
  --amber: #8A6D1F;
  --amber-bg: #F6F1E2;

  --f-titulo: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* ---------- marca ---------- */

.marca { display: inline-flex; align-items: center; }
.logo {
  display: block; width: 128px; aspect-ratio: 660 / 199;
  background-position: left center; background-size: contain; background-repeat: no-repeat;
}
.logo--cor { background-image: url("../img/logo-pdvone.webp"); }
.logo--branco { background-image: url("../img/logo-pdvone-branco.webp"); display: none; aspect-ratio: 660 / 230; }

/* ---------- navbar ---------- */

.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.55rem var(--pad);
  background: var(--papel);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.navbar .logo { width: 128px; }
.navbar__links { display: flex; gap: 0.15rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.navbar__links::-webkit-scrollbar { display: none; }
.navbar__links a {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco); text-decoration: none;
  padding: 0.45rem 0.6rem; border-radius: 4px; white-space: nowrap;
}
.navbar__links a:hover { color: var(--azul-texto); background: var(--azul-claro); }

/* ---------- selos ---------- */

.selo { display: block; background-position: left center; background-size: contain; background-repeat: no-repeat; }
.selo--alloc { width: 128px; aspect-ratio: 420 / 165; }
.selo--sap   { width: 178px; aspect-ratio: 520 / 110; }
.selo--alloc { background-image: url("../img/selo-alloc.webp"); }
.selo--sap   { background-image: url("../img/selo-sap.webp"); }

/* ---------- faixas ---------- */

.faixa { padding: clamp(2.75rem, 6vw, 4.5rem) var(--pad); scroll-margin-top: 3.6rem; }
.faixa--cinza { background: var(--papel-2); }

.envelope { max-width: var(--maxw); margin: 0 auto; }

.faixa + .faixa { border-top: 1px solid var(--linha); }

.t-secao {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.65rem, 3.6vw, 2.4rem); color: var(--azul-texto);
  margin-bottom: 1.5rem; letter-spacing: -0.01em;
}

.txt { color: var(--texto); }
.txt + .txt { margin-top: 1rem; }
.txt b { color: var(--texto-forte); font-weight: 600; }

/* ---------- manifesto ---------- */

.manifesto {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1.7rem, 4.2vw, 2.75rem); line-height: 1.1;
  letter-spacing: -0.022em; color: var(--texto-forte); max-width: 20ch;
  margin-bottom: 1.1rem;
}
.manifesto em { font-style: normal; color: var(--azul-texto); display: block; }

/* ---------- mockup ---------- */

.mockup { margin: 0; }
.mockup__tela {
  border-radius: 14px; overflow: hidden;
  background: #414C58;                       /* bisel grafite, mais escuro que a tela */
  padding: 0.7rem 0.7rem 0.9rem;
  border: 1px solid #2C353F;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 22px 48px -26px rgba(4,20,32,0.7);
}
.mockup__barra {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.7rem; background: #E9EEF3;
  border-radius: 6px 6px 0 0;
}
.mockup__barra i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #B9C3CD; display: block; }
.mockup__img { display: block; width: 100%; height: auto; border-radius: 0 0 6px 6px; }
.mockup__pe { width: 26%; height: 0.6rem; margin: 0 auto; background: #414C58; }
.mockup__base { width: 44%; height: 0.45rem; margin: 0 auto; background: #2C353F; border-radius: 3px; }
.mockup figcaption {
  margin-top: 0.9rem; text-align: center;
  font-size: 0.8rem; color: var(--texto-fraco);
}

/* ---------- provas ---------- */

.provas {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3.25rem;
  padding: 1.6rem 0 0; margin: 2rem 0 2.75rem;
  border-top: 1px solid var(--linha);
}
.prova { display: flex; flex-direction: column; gap: 0.1rem; }
.prova b {
  font-family: var(--f-titulo); font-weight: 700; color: var(--azul);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.prova span { font-size: 0.9rem; color: var(--texto-fraco); }

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.15rem; }
.chip {
  font-family: var(--f-titulo); font-weight: 600; font-size: 0.83rem;
  color: var(--azul-texto); background: var(--azul-claro);
  border: 1px solid var(--linha); border-radius: 5px; padding: 0.34rem 0.72rem;
}

.selo-sap {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.34); border-radius: 6px;
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.selo-sap svg { flex: none; color: #fff; }
.selo-sap div { display: flex; flex-direction: column; line-height: 1.2; font-family: var(--f-titulo); color: #fff; }
.selo-sap b { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; }
.selo-sap span { font-size: 0.7rem; color: rgba(255,255,255,0.82); }

/* ---------- atributos ---------- */

.atributos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
}
.atributo {
  border-top: 3px solid var(--azul); padding-top: 1.05rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.atributo__cab { display: flex; align-items: center; gap: 0.6rem; }
.atributo__cab svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--azul); }
.atributo h3 { font-size: 1.06rem; color: var(--texto-forte); font-weight: 600; }
.atributo p { font-size: 0.93rem; color: var(--texto); }

/* ---------- diagrama da arquitetura ---------- */

.diagrama {
  margin: 2.25rem 0 0;
  border: 1px solid var(--linha); border-radius: 10px; overflow: hidden;
  background: var(--papel-2); line-height: 0;
}
.diagrama img { width: 100%; height: auto; }
.diagrama__legenda {
  line-height: 1.5; font-size: 0.82rem; color: var(--texto-fraco);
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--linha); background: var(--papel);
}

.pilares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem;
}
.pilar { display: flex; flex-direction: column; gap: 0.4rem; }
.pilar__cab { display: flex; align-items: center; gap: 0.6rem; }
.pilar__cab svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--azul); }
.pilar h3 { font-size: 1.02rem; color: var(--texto-forte); font-weight: 600; }
.pilar p { font-size: 0.92rem; color: var(--texto); }

.destaque-offline {
  margin-top: 2.5rem; border-left: 4px solid var(--azul);
  background: var(--azul-claro); border-radius: 0 8px 8px 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.destaque-offline h3 {
  font-family: var(--f-titulo); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--texto-forte); font-weight: 600; margin-bottom: 0.55rem;
}
.destaque-offline p { color: var(--texto); }
@media (min-width: 900px) {
  .destaque-offline p { columns: 2; column-gap: clamp(2rem, 4vw, 3.25rem); }
}

/* ---------- tiras do ciclo ---------- */

.tiras { display: flex; flex-direction: column; }
.tira {
  display: grid; grid-template-columns: 420px 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 1.9rem) 0; border-top: 1px solid var(--linha);
}
.tira:last-of-type { border-bottom: 1px solid var(--linha); }
.tira--inv { grid-template-columns: 1fr 420px; }
.tira--inv .tira__arte { order: 2; }
.tira--inv .tira__txt { order: 1; }

.tira__arte {
  background: #F1F5F9; border: 1px solid #E1E8EE; border-radius: 12px;
  padding: clamp(1rem, 2.4vw, 1.5rem); display: flex; align-items: center; justify-content: center;
}
.tira__arte svg { display: block; width: 100%; height: auto; max-width: 340px; }
.tira__arte--foto { padding: 0; overflow: hidden; }
.tira__arte--foto img { display: block; width: 100%; height: auto; }

.tira__txt { display: flex; flex-direction: column; gap: 0.7rem; }
.tira__eta {
  font-family: var(--f-titulo); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-texto);
}
.tira__txt h3 {
  font-family: var(--f-titulo); font-weight: 600; line-height: 1.2;
  font-size: clamp(1.2rem, 2.6vw, 1.48rem); color: var(--texto-forte);
}
.tira__txt p { color: var(--texto); }

/* ---------- segmentos ---------- */

.lista-seg { display: flex; flex-direction: column; }
.seg-linha {
  display: grid; grid-template-columns: 3rem minmax(170px, 14rem) 1fr;
  gap: 0.5rem 1.5rem; align-items: baseline;
  padding: clamp(1.25rem, 2.6vw, 1.7rem) 0; border-top: 1px solid var(--linha);
}
.seg-linha:last-child { border-bottom: 1px solid var(--linha); }
.seg-ico {
  align-self: start; width: 44px; height: 44px; border-radius: 10px;
  background: var(--azul-claro); display: flex; align-items: center; justify-content: center;
}
.seg-ico svg { width: 22px; height: 22px; color: var(--azul); }
.seg-linha h3 {
  font-family: var(--f-titulo); font-weight: 600; line-height: 1.15;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--texto-forte);
}
.seg-linha p { font-size: 1rem; line-height: 1.6; color: var(--texto); }

.seg-linha--outros .seg-ico { background: transparent; border: 1px dashed var(--azul); }
.seg-linha--outros h3 { color: var(--azul-texto); }

/* ---------- fechamento ---------- */

.convite { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.convite h2 {
  font-family: var(--f-titulo); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem); color: var(--texto-forte); margin-bottom: 1rem; max-width: 20ch;
}
.convite h2 em { font-style: normal; color: var(--azul); }
.convite__sub { font-size: clamp(1.02rem, 2vw, 1.12rem); line-height: 1.55; color: var(--texto); max-width: 46ch; margin-bottom: 2rem; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.botao {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--azul); color: #fff; text-decoration: none;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.05rem;
  padding: 0.9rem 1.6rem; border-radius: 7px;
}
.botao:hover { filter: brightness(1.07); }
.zap { background: #0E7C36; color: #FFFFFF; }
.zap:hover { background: #0B6E30; filter: none; }
.fone { font-family: var(--f-titulo); font-size: 1.05rem; color: var(--texto); }

.credenciais {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: 1.3rem;
}
.credencial { display: flex; flex-direction: column; gap: 0.15rem; }
.credencial b {
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.45rem, 3vw, 1.7rem); line-height: 1.05;
  color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.credencial span { font-size: 0.88rem; color: var(--texto-fraco); }

.validacao { border-top: 1px solid var(--linha); padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.validacao .selo--sap { width: 152px; }
.validacao p { font-size: 0.88rem; line-height: 1.5; color: var(--texto-fraco); }

.contatos-pe {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem;
  border-top: 1px solid var(--linha); font-size: 0.95rem; color: var(--texto-fraco);
}

.rodape { background: var(--papel-2); border-top: 1px solid var(--linha); padding: 2rem var(--pad) 2.75rem; }
.rodape__int { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; }
.rodape__legal { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.rodape__legal p { font-size: 0.78rem; color: var(--texto-fraco); line-height: 1.6; max-width: 92ch; }

/* ---------- movimento ---------- */

.rv { opacity: 0; transform: translateY(16px); }
.rv-on { transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
.rv.vis { opacity: 1; transform: none; }

.botao { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.botao:hover { transform: translateY(-2px); }
.zap:hover { box-shadow: 0 12px 26px -14px rgba(4, 40, 20, 0.55); }
.capa .botao:hover { box-shadow: 0 16px 34px -16px rgba(4, 32, 48, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.vis { opacity: 1; transform: none; }
  .rv-on { transition: none; }
  .botao { transition: none; }
  .botao:hover { transform: none; }
}

/* ---------- impressao / PDF ---------- */

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .navbar { display: none !important; }
  .rv, .rv.vis { opacity: 1 !important; transform: none !important; transition: none !important; }
  .botao { transition: none !important; }
  .rodape { break-inside: avoid; padding: 1.6rem 3rem 2rem; }
  a { text-decoration: none; }
  .zap { background: #0E7C36 !important; color: #FFFFFF !important; }
}

@media (max-width: 820px) {
  .navbar { gap: 0.75rem; }
  .navbar .logo { width: 108px; }
  .convite { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .seg-linha { grid-template-columns: 3rem 1fr; }
  .seg-linha h3, .seg-linha p { grid-column: 2 / -1; }
  .tira, .tira--inv { grid-template-columns: 1fr; }
  .tira--inv .tira__arte, .tira--inv .tira__txt { order: 0; }
}