/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================
   CitySense Tech Custom Styles
   ========================================================== */
:root {
  --bg-dark: #0a0f1f;
  --bg-alt: #0f162b;
  --bg-light: #ffffff;
  --gradient-hero: linear-gradient(135deg,#0a0f1f 0%,#17294d 60%,#1f3d66 100%);
  --primary: #2da2ff;
  --primary-accent: #55b7ff;
  --primary-rgb: 45,162,255;
  --text: #e6eaf2;
  --text-muted: #a7b1c6;
  --border: #24324b;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 12px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.3);
  --transition: .28s cubic-bezier(.4,0,.2,1);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--bg-dark);
  color: var(--text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {font-weight:600; line-height:1.15; margin:0 0 .6em}

p {margin:0 0 1em; max-width: 68ch;}

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

a {color: var(--primary); text-decoration:none;}
a:hover, a:focus {color: var(--primary-accent);}

.container {width:100%; max-width:1180px; margin:0 auto; padding:0 1.6rem;}

/* Header & Nav */
.topo {position:relative; background: var(--gradient-hero); overflow: hidden;}
.nav-wrapper {display:flex; align-items:center; justify-content:space-between; padding:1rem 0;}
.logo-area {display:flex; align-items:center; gap:.75rem; font-weight:600;}
/* Removido margin-left global anterior e aplicado apenas quando flush-left */
.logo-area.flush-left {margin-left:0;}
.logo-area.flush-left .logo-img {display:block;}
/* Evita qualquer scroll horizontal indesejado */
body {overflow-x:hidden;}
.logo-img {width:48px; height:auto; border-radius:var(--radius-sm); box-shadow:0 4px 12px rgba(0,0,0,.4); object-fit:initial;}
.logo-text {display:flex; flex-direction:column; line-height:1.05; font-size:1.05rem; letter-spacing:.5px; font-weight:600;}
.logo-text .logo-main {display:block;}
.logo-text .logo-sub {display:block; font-size:.55rem; letter-spacing:2.5px; margin-top:2px; text-align:center; font-weight:600; color:var(--primary-accent);}
.menu ul {list-style:none; padding:0; margin:0; display:flex; gap:1.5rem; align-items:center;}
.menu a {color: var(--text); font-size:.95rem; position:relative; padding:.35rem .2rem;}
.menu a::after {content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--primary); transition:var(--transition); opacity:.8;}
.menu a:hover::after, .menu a:focus::after, .menu a.active::after {width:100%;}

/* Hero */
.hero {display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; gap:2.5rem; padding:2rem 0 4rem;}
.hero-content h1 {font-size:clamp(1.6rem,2.8vw,2.35rem); background:linear-gradient(90deg,#fff,#8ec9ff); -webkit-background-clip:text; color:transparent; line-height:1.28; margin-bottom: 0.35rem;}
/* Bloco explicativo dos hubs abaixo do h1 */
.hub-explainer {margin:-.2rem 0 1.2rem; font-size:.82rem; line-height:1.4; color:var(--text-muted); max-width:62ch;}
.hub-explainer.align-right {text-align: right; margin-left: auto;}
.hub-explainer.align-left { text-align: left; margin-left: 0; }
.hub-explainer.align-center { text-align: center; margin-left: auto; margin-right: auto; }
.hub-explainer.align-justify { text-align: justify; }
.hub-item {margin:0 0 .45rem; display:block;}
.hub-item:last-child {margin-bottom:0;}
.hub-link {font-weight:600; color:#fff; text-decoration:none; background:linear-gradient(90deg,#fff,#8ec9ff); -webkit-background-clip:text; color:transparent;}
.hub-link:hover, .hub-link:focus {text-decoration:underline;}
.hub-desc {display:block; margin:.35rem 0 0; color:var(--text-muted);}
@media (min-width:700px){
  .hub-explainer {display:block; max-width:68ch;}
}
@media (min-width:900px){
  .hub-explainer {font-size:.85rem;}
}
/* Ajuste extra: fonte maior e melhor legibilidade para textos justificados */
.hub-explainer { font-size: 1rem; }
@media (min-width:900px){
  .hub-explainer { font-size: 1.06rem; }
}
.hub-explainer.align-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* Em navegadores que suportam, melhora a quebra e o equilíbrio das linhas */
.hub-explainer.align-justify .hub-desc {
  hyphens: auto;
}
.subhead {color: var(--text-muted); font-size:1.05rem;}
.hero-media {text-align:center; animation: float 9s ease-in-out infinite;}
@keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Buttons */
.btn {display:inline-block; border:1px solid var(--primary); color:#fff; padding:.75rem 1.2rem; border-radius:var(--radius-sm); font-size:.9rem; letter-spacing:.5px; font-weight:500; background:rgba(45,162,255,.08); backdrop-filter: blur(4px); transition:var(--transition); position:relative; overflow:hidden;}
.btn.primary {background: linear-gradient(90deg,rgba(45,162,255,.9),rgba(45,162,255,.65));}
.btn.outline {background:transparent;}
.btn.small {padding:.55rem .85rem; font-size:.75rem;}
.btn:hover, .btn:focus {box-shadow:0 4px 18px rgba(var(--primary-rgb),.35); transform:translateY(-2px);}
.btn.primary:hover {background: linear-gradient(90deg,rgba(45,162,255,1),rgba(45,162,255,.75));}

/* Sections */
.section {padding:4rem 0; position:relative;}
.section.alt {background: var(--bg-alt);}
.section h2 {font-size:clamp(1.5rem,2.8vw,2.2rem); margin-bottom:1.2rem;}
.lead {color:var(--text-muted); font-size:1.05rem; margin-bottom:2rem;}

.grid-2 {display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start;}

/* Sobre */
.ilustracao-cidade {position:relative; min-height:280px; border:1px solid var(--border); border-radius:var(--radius-lg); background:radial-gradient(circle at 30% 30%,#183055,#0b1426); overflow:hidden;}
.ilustracao-cidade .layer {position:absolute; inset:0; background: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px, transparent 2px 60px); mix-blend-mode: overlay; animation: gridmove 30s linear infinite;}
.ilustracao-cidade .layer-2 {animation-direction: reverse; opacity:.35;}
.ilustracao-cidade .layer-3 {animation-duration: 50s; opacity:.15;}
@keyframes gridmove {0%{transform:translateY(0)}100%{transform:translateY(400px)}}

/* Cards Serviços */
.cards {display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:1.5rem;}
.card {background: linear-gradient(160deg,#142239,#0d1626); border:1px solid var(--border); padding:1.3rem 1.2rem 1.4rem; border-radius:var(--radius-md); position:relative; overflow:hidden; isolation:isolate; transition:var(--transition);}
.card::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 10%,rgba(45,162,255,.25),transparent 60%); opacity:0; transition:var(--transition); z-index:-1;}
.card:hover {transform:translateY(-4px); box-shadow:0 6px 20px -4px rgba(0,0,0,.55);}
.card:hover::before {opacity:1;}
.card h3 {margin-top:0; font-size:1.05rem;}
.card p {color:var(--text-muted); font-size:.85rem;}

/* Produtos - Pipeline */
.pipeline {display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch; justify-content:space-between; margin:2.2rem 0 2.8rem;}
.pipeline .stage {flex:1 1 180px; min-width:180px; background:linear-gradient(155deg,#13233a,#0d1628); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem .9rem 1.1rem; position:relative; display:flex; flex-direction:column; gap:.35rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);}
.pipeline .stage .icon {font-size:1.4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.pipeline .stage h3 {margin:.2rem 0 .15rem; font-size:.9rem; letter-spacing:.5px;}
.pipeline .stage p {font-size:.7rem; line-height:1.3; color:var(--text-muted); margin:0;}
.pipeline .arrow {align-self:center; font-size:1.8rem; opacity:.5;}

.solucoes-complementares {margin-top:2rem;}
.solucoes-complementares h3 {margin:0 0 .8rem; font-size:1.05rem;}
.bullets {padding-left:1.1rem; margin:0 0 1.2rem; display:grid; gap:.4rem; font-size:.85rem;}
.bullets li {line-height:1.35;}
.cta-inline {margin-top:.5rem;}

/* Storytelling */
.storyline {display:grid; gap:1.5rem; margin-top:2rem;}
.story-block {background: linear-gradient(150deg,#13233a,#0c1526); border:1px solid var(--border); padding:1.2rem 1rem 1.25rem; border-radius:var(--radius-md); position:relative; overflow:hidden; transition:var(--transition);}
.story-block::after {content: attr(data-step); position:absolute; top:-10px; right:-5px; font-size:4.5rem; font-weight:700; line-height:1; color:rgba(255,255,255,.02);}
.story-block h3 {margin:.1rem 0 .5rem; font-size:1rem;}
.story-block p {margin:0; font-size:.8rem; color:var(--text-muted);}
.story-block.active, .story-block:hover {border-color:rgba(45,162,255,.6); box-shadow:0 0 0 1px rgba(45,162,255,.35),0 10px 32px -8px rgba(0,0,0,.6);}
.story-block.active {background:linear-gradient(150deg,#17375f,#0c1526);}

/* Contato */
.form {display:grid; gap:1rem; background:linear-gradient(155deg,#132239,#0c1526); border:1px solid var(--border); padding:1.5rem 1.25rem 1.75rem; border-radius:var(--radius-md);}
.field {display:flex; flex-direction:column; gap:.45rem;}
.field label {font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted);}
.field input, .field textarea {background:#0c1628; border:1px solid #1e2c44; padding:.7rem .75rem; border-radius:var(--radius-sm); color:#fff; font:inherit; font-size:.85rem; transition:var(--transition);}
.field input:focus, .field textarea:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 1px rgba(45,162,255,.4);}
.error {color:#ff6b6b; font-size:.65rem; min-height:1em;}
.form-status {font-size:.7rem; color:var(--text-muted);}

.info-contato {list-style:none; padding:0; margin:1rem 0 0; font-size:.8rem; display:grid; gap:.4rem;}
.info-contato a {font-weight:500;}

/* Blog preview */
.placeholder-cards {display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1.2rem;}
.placeholder {background: linear-gradient(155deg,#14243b,#0d1729); border:1px solid var(--border); padding:.9rem .85rem 1rem; border-radius:var(--radius-md); font-size:.7rem; letter-spacing:.5px; color:var(--text-muted); position:relative; min-height:80px; display:flex; align-items:flex-end;}
.placeholder::before {content:"EM BREVE"; position:absolute; top:.6rem; left:.6rem; font-size:.55rem; font-weight:600; letter-spacing:1px; background:rgba(45,162,255,.15); color:var(--primary-accent); padding:.25rem .45rem; border-radius:var(--radius-sm);}

/* Footer */
.footer {background:#060a12; padding:2.5rem 0 2.2rem; font-size:.7rem; color:var(--text-muted); border-top:1px solid #142032;}
.foot-flex {display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start;}
.foot-links {display:flex; flex-wrap:wrap; gap:.9rem; font-size:.65rem;}
.copy {opacity:.7;}

/* Utilities */
.text-link {color:var(--primary); font-size:.75rem; letter-spacing:.5px;}
.text-link:hover {text-decoration:underline;}
.mini-ctas {margin-top:.8rem;}

/* Scroll active nav */
.menu a.active {color: var(--primary-accent);}

/* Focus visible */
:focus-visible {outline:2px solid var(--primary); outline-offset:2px;}

/* Responsive refinements */
@media (max-width: 880px) {
  .hero {padding-top:1rem;}
  .nav-wrapper {flex-wrap:wrap; gap:.75rem;}
  .menu ul {flex-wrap:wrap; gap:.9rem 1.2rem;}
}
@media (min-width: 680px) {
  .storyline {grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation:none!important; transition:none!important;}
}

/* Print overrides custom */
@media print {
  body {background:#fff; color:#000;}
  .topo, .section.alt, .card, .story-block, .form {background:#fff !important; box-shadow:none;}
  .menu, .hero-media, .cta-group, .mini-ctas, .pipeline .arrow {display:none !important;}
}

/* === Ajuste alternativo para colar logo à esquerda sem mover menu === */
.topo .nav-wrapper {padding-left:0; padding-right:0;} /* remove padding horizontal do wrapper */
.logo-area.flush-left {margin-left:0;} /* remove hack de margem negativa */
.topo .nav-wrapper .menu {margin-left:1.6rem;} /* recoloca o menu onde estava visualmente */
@media (max-width: 600px){
  .topo .nav-wrapper .menu {margin-left:1rem;}
}

/* === Fix: logo realmente colada à borda esquerda independente do container === */
.nav-wrapper {position:relative; justify-content:flex-end;}
.logo-area.flush-left {position:absolute; left:0; top:50%; transform:translateY(-50%); margin:0; padding:0 .4rem 0 .4rem;}
.logo-area.flush-left .logo-img {width:48px;}
/* Ajuste de espaçamento para não encostar menu demais na esquerda em telas menores */
@media (max-width:880px){
  .nav-wrapper {justify-content:center; padding-top:3.2rem;} /* empurra menu abaixo se faltar espaço */
  .logo-area.flush-left {top:0; transform:none; padding-top:.6rem;}
}

/* === Overrides header reestruturação === */
.header-bar {display:flex; align-items:center; gap:0; width:100%;}
.header-bar > .logo-area {flex:0 0 auto;}
.header-bar > .nav-wrapper {flex:1 1 auto;}
.nav-wrapper.container, .header-bar > .nav-wrapper {display:flex; justify-content:flex-end;}
/* Garante que somente conteúdo do menu siga largura central padrão */
.header-bar > .nav-wrapper.container {max-width:1180px; margin:0 0 0 auto; padding:0 1.6rem;}
.logo-area.flush-left {margin:0; padding:0 .9rem 0 .4rem;}
.logo-area.flush-left .logo-img {width:48px;}
/* Remove posicionamentos absolutos anteriores se ainda existirem carregados */
.logo-area.flush-left {position:static; transform:none;}
.nav-wrapper {position:static; padding:0;}
/* Evita deslocamento vertical em telas menores */
@media (max-width:880px){
  .header-bar {flex-wrap:wrap;}
  .header-bar > .nav-wrapper.container {justify-content:center; padding:0 1rem 0.5rem;}
  .logo-area.flush-left {padding:.5rem .75rem 0 .4rem;}
}

/* Urban Data Hub diagram sizing */
.produtos .produto-diagrama {margin:2rem auto 2.5rem; max-width:680px; text-align:center; padding:0 1rem;}
.produtos .produto-diagrama img {width:100%; max-width:520px; height:auto; margin:0 auto; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); border-radius:12px;}
.produtos .produto-diagrama figcaption {margin-top:.7rem; font-size:.7rem; letter-spacing:.5px; color:var(--text-muted);}
/* Compacta pipeline um pouco para equilibrar com diagrama menor */
.pipeline {margin:1.5rem 0 2rem;}
.pipeline .stage {padding:.85rem .7rem .9rem;}
.pipeline .stage h3 {font-size:.8rem;}
.pipeline .stage p {font-size:.65rem;}
@media (max-width:700px){
  .produtos .produto-diagrama {max-width:95%;}
  .produtos .produto-diagrama img {max-width:420px;}
  .pipeline {gap:.75rem;}
}
@media (max-width:480px){
  .produtos .produto-diagrama img {max-width:340px;}
  .pipeline .stage {min-width:150px;}
}

/* --- City Payments Hub Styles --- */
.payments {position:relative;}
.payments h2 {margin-bottom:.75rem;}
.payments .lead {margin-bottom:2.2rem;}
.payments-grid {display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:2.5rem;}
.p-card {background:linear-gradient(155deg,#142238,#0d1627); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.05rem .95rem 1.15rem; position:relative; overflow:hidden; transition:var(--transition);}
.p-card::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(45,162,255,.22),transparent 70%); opacity:0; transition:var(--transition);}
.p-card h3 {margin:.1rem 0 .5rem; font-size:.85rem; letter-spacing:.5px;}
.p-card p {margin:0; font-size:.7rem; line-height:1.35; color:var(--text-muted);}
.p-card:hover {transform:translateY(-4px); box-shadow:0 8px 26px -8px rgba(0,0,0,.55);}
.p-card:hover::before {opacity:1;}

.integration-panel {background:linear-gradient(155deg,#132239,#0c1526); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem 1.3rem 1.9rem; margin:0 0 2.8rem; position:relative; overflow:hidden;}
.integration-panel h3 {margin:0 0 1.2rem; font-size:1.05rem;}
.integration-flow {display:flex; flex-wrap:wrap; gap:1.5rem; align-items:stretch; justify-content:center;}
.hub-block {flex:1 1 240px; min-width:220px; background:#0e1827; border:1px solid #1e324b; padding:1rem .9rem 1.1rem; border-radius:var(--radius-md); position:relative;}
.hub-block.accent {background:linear-gradient(155deg,#143652,#0c1928); border-color:#25527a; box-shadow:0 0 0 1px rgba(45,162,255,.25);}
.hub-block h4 {margin:.1rem 0 .6rem; font-size:.8rem; letter-spacing:.6px; text-transform:uppercase; color:#8ec9ff;}
.hub-block ul {list-style:none; margin:0; padding:0; display:grid; gap:.35rem; font-size:.65rem; color:var(--text-muted);}
.arrow-flow {font-size:2rem; align-self:center; opacity:.55;}
.integration-panel .note {margin:1.4rem 0 0; font-size:.65rem; letter-spacing:.4px; color:var(--text-muted); text-align:center; white-space: nowrap;}

.example-case {background:linear-gradient(160deg,#142238,#0d1626); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem 1.3rem 2rem;}
.example-case h3 {margin:0 0 1.1rem; font-size:1rem;}
.example-content {display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:1.4rem;}
.ex-step {background:#0e1829; border:1px solid #1e2f44; padding:.75rem .7rem .85rem; border-radius:var(--radius-md); position:relative; font-size:.7rem; line-height:1.35; display:flex; gap:.6rem; align-items:flex-start;}
.ex-step .badge {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; font-size:.7rem; font-weight:600; border-radius:50%; background:linear-gradient(135deg,#2da2ff,#1b63a3); color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.07),0 4px 10px -2px rgba(0,0,0,.55);}
.ex-step p {margin:0; color:var(--text-muted);}
.example-case .cta-inline {display:flex; flex-wrap:wrap; gap:.8rem;}

/* Ajustes responsivos específicos Payments */
@media (max-width:880px){
  .integration-flow {flex-direction:column;}
  .arrow-flow {transform:rotate(90deg);}
}
@media (max-width:560px){
  .p-card h3 {font-size:.78rem;}
  .p-card p {font-size:.64rem;}
  .hub-block h4 {font-size:.75rem;}
  .hub-block ul {font-size:.6rem;}
  .ex-step {font-size:.65rem;}
}

/* === Override: Alinhar diagrama Urban Data Hub à direita === */
.produtos .produto-diagrama {width:100%; max-width:100%; margin:0.5rem 0 2.5rem; text-align:center;}
.produtos .produto-diagrama img {display:block; width:100%; max-width:100%; margin:0 auto;}
.produtos .produto-diagrama figcaption {text-align:center;}
/* Ajusta espaçamento pipeline -> diagrama */
.produtos .pipeline {margin-bottom:0.5rem;}
@media (max-width:700px){
  .produtos .produto-diagrama {margin:0.75rem 0 2rem;}
}

/* === Override: ampliar diagrama na seção Sobre === */
.sobre .grid-2 {grid-template-columns: 40% 60%; align-items:stretch;}
@media (min-width:1100px){
  .sobre .grid-2 {grid-template-columns: 38% 62%;}
}
.sobre .sobre-media {display:flex; align-items:center;}
.sobre .sobre-diagrama {width:100%; margin:0;}
.sobre .sobre-diagrama img {width:100%; height:auto; display:block;}
@media (max-width:820px){
  .sobre .grid-2 {grid-template-columns:1fr;}
  .sobre .sobre-media {margin-top:1.5rem;}
}

/* === Override: layout final seção Sobre (ajuste após revert SVG) === */
.sobre .grid-2 {grid-template-columns:1fr 1fr; align-items:start; gap:2.5rem;}
@media (min-width:1100px){
  .sobre .grid-2 {grid-template-columns:52% 48%;}
}
.sobre .sobre-media {display:flex; flex-direction:column; align-items:flex-start;}
.sobre .sobre-diagrama {width:100%; max-width:560px; margin:0;}
.sobre .sobre-diagrama img {display:block; width:100%; height:auto;}
@media (max-width:820px){
  .sobre .grid-2 {grid-template-columns:1fr;}
  .sobre .sobre-media {margin-top:1.5rem; align-items:center;}
  .sobre .sobre-diagrama {max-width:640px;}
}
/* Ajuste título diagrama */
.sobre-diagrama-titulo {margin:0 0 .9rem;}
/* === Override: alinhamento título diagrama Urban Data Hub === */
@media (min-width:680px){
  .sobre .sobre-media .sobre-diagrama-titulo {margin-left:2.5%;}
}
/* Ajuste fino em telas muito largas */
@media (min-width:1200px){
  .sobre .sobre-media .sobre-diagrama-titulo {margin-left:30px;}
}

/* === Lightbox Diagrama Urban Data Hub === */
.udhub-lightbox {position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem; z-index:1200; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;}
.udhub-lightbox.open {opacity:1; visibility:visible;}
.udhub-lightbox__inner {position:relative; max-width:1000px; width:85vw;}
.udhub-lightbox__img {display:block; width:100%; height:auto; max-height:75vh; object-fit:contain; border:1px solid #2a3a52; border-radius:14px; box-shadow:0 10px 44px -10px rgba(0,0,0,.8);}
.udhub-lightbox__close {position:absolute; top:-46px; right:0; background:#13263d; color:#fff; border:1px solid #25415f; font:600 .7rem/1 Inter,Arial,sans-serif; padding:.55rem .9rem; border-radius:6px; cursor:pointer; letter-spacing:.6px; display:inline-flex; align-items:center; gap:.4rem;}
.udhub-lightbox__close:hover {background:#18324f;}
.udhub-lightbox__close:focus-visible {outline:2px solid var(--primary); outline-offset:2px;}
.sobre-diagrama {cursor:zoom-in; position:relative;}
.sobre-diagrama::after {content:'Clique para ampliar'; position:absolute; bottom:6px; right:10px; font-size:.55rem; background:rgba(0,0,0,.55); padding:.3rem .45rem; border-radius:4px; letter-spacing:.5px; color:#8ec9ff; text-transform:uppercase; pointer-events:none;}
@media (max-width:680px){
  .udhub-lightbox__close {top:-50px;}
  .sobre-diagrama::after {font-size:.5rem;}
}

/* === Insights (substitui placeholders) === */
.insights-grid {display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:1.6rem;}
.insight {background:linear-gradient(155deg,#14243b,#0d1729); border:1px solid var(--border); padding:1.1rem 1rem 1.25rem; border-radius:var(--radius-md); position:relative; display:flex; flex-direction:column; gap:.6rem; transition:var(--transition);}
.insight::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(45,162,255,.22),transparent 70%); opacity:0; transition:var(--transition);}
.insight:hover {transform:translateY(-4px); box-shadow:0 8px 26px -8px rgba(0,0,0,.55);}
.insight:hover::before {opacity:1;}
.insight h3 {margin:.1rem 0 .2rem; font-size:1rem; line-height:1.2;}
.insight .meta {margin:0; font-size:.55rem; letter-spacing:.8px; font-weight:600; text-transform:uppercase; color:#8ec9ff; opacity:.9;}
.insight .excerpt {margin:0; font-size:.75rem; line-height:1.35; color:var(--text-muted);}
.insight .key-points {margin:.2rem 0 .3rem; padding-left:1rem; display:grid; gap:.3rem; font-size:.62rem; line-height:1.25; color:var(--text-muted);}
.insight .key-points li {list-style:disc;}
.insight .cta-inline {margin-top:auto; font-size:.65rem;}
@media (max-width:560px){
  .insight h3 {font-size:.9rem;}
  .insight .excerpt {font-size:.7rem;}
  .insight .key-points {font-size:.58rem;}
}

/* === Modal Recurso === */
.resource-modal {position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem; z-index:1400; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;}
.resource-modal.open {opacity:1; visibility:visible;}
.resource-modal__dialog {background:linear-gradient(155deg,#132239,#0c1526); border:1px solid var(--border); border-radius:14px; width:100%; max-width:480px; padding:1.6rem 1.4rem 1.9rem; position:relative; box-shadow:0 20px 48px -12px rgba(0,0,0,.7);}
.resource-modal__close {position:absolute; top:.7rem; right:.7rem; background:#13263d; color:#fff; border:1px solid #25415f; font:600 .65rem/1 Inter,Arial,sans-serif; padding:.4rem .55rem; border-radius:6px; cursor:pointer; letter-spacing:.6px;}
.resource-modal__close:hover {background:#18324f;}
.resource-modal__desc {font-size:.75rem; color:var(--text-muted); margin:.2rem 0 1rem;}
.form-compact .field label {font-size:.6rem;}
.form-compact .field input, .form-compact .field textarea {font-size:.75rem; padding:.55rem .6rem;}
.form-compact .actions {margin-top:.2rem;}
.form-compact .btn.small {font-size:.68rem; padding:.5rem .85rem;}
.resource-modal .form-status {font-size:.6rem; margin-top:.6rem;}
.resource-modal.success .resource-modal__dialog {animation: pulse-ok 1s ease;}
@keyframes pulse-ok {0%{box-shadow:0 0 0 0 rgba(45,162,255,.4);}70%{box-shadow:0 0 0 12px rgba(45,162,255,0);}100%{box-shadow:0 0 0 0 rgba(45,162,255,0);}}
/* === Nova logo registrada: overrides layout + degradê de integração === */
.header-bar {position:relative;}
/* Degradê base (escuro até branco) ocupando área da logo */
.header-bar::before {content:""; position:absolute; inset:0 auto 0 0; width:clamp(260px,30vw,400px); background:linear-gradient(90deg,#0a0f1f 0%, #0e2f4f 48%, #1d6fb5 72%, #ffffff 92%, #ffffff 100%); pointer-events:none; z-index:0;}
.header-bar::after {content:""; position:absolute; top:0; bottom:0; left:clamp(250px,29vw,390px); width:68px; background:linear-gradient(90deg,#ffffff 0%, rgba(255,255,255,0) 100%); pointer-events:none; z-index:0;}
@media (max-width:900px){
  .header-bar::before {width:clamp(240px,54vw,360px); background:linear-gradient(90deg,#0a0f1f 0%, #0e2f4f 54%, #1d6fb5 78%, #ffffff 95%, #ffffff 100%);}
  .header-bar::after {left:clamp(230px,52vw,350px); width:55px;}
}
@media (max-width:640px){
  .header-bar::before {width:clamp(220px,70vw,330px); background:linear-gradient(90deg,#0a0f1f 0%, #0e2f4f 60%, #1d6fb5 84%, #ffffff 98%, #ffffff 100%);}
  .header-bar::after {left:clamp(210px,68vw,320px); width:40px;}
}
@media (prefers-contrast: more){
  .header-bar::before {background:linear-gradient(90deg,#0a0f1f 0%, #ffffff 100%);}
  .header-bar::after {background:linear-gradient(90deg,#ffffff 0%, rgba(255,255,255,0) 100%);}
}
@media print {
  .header-bar::before, .header-bar::after {display:none !important;}
  .logo-area.flush-left .logo-img {box-shadow:none; background:#fff;}
}

/* === HEADER / LOGO RESET & NOVO DEGRADÊ === */
/* Remove posicionamentos absolutos antigos */
.logo-area.flush-left {position:relative; top:auto; left:auto; transform:none; padding:0 .9rem 0 .6rem; margin:0; display:flex; align-items:center;}
/* Força menu a não herdar estilos antigos de justify-end se não necessário */
.nav-wrapper {justify-content:flex-end;}
/* Exibe logo maior e nítida */
.logo-area.flush-left .logo-img {width:170px; height:auto; background:#ffffff; border-radius:8px; padding:6px 10px 6px 8px; box-shadow:0 4px 14px -4px rgba(0,0,0,.45);}
@media (max-width:900px){.logo-area.flush-left .logo-img {width:155px; padding:5px 9px 5px 7px;}}
@media (max-width:640px){.logo-area.flush-left .logo-img {width:145px;}}
/* Remove texto de logo se ainda existir invisível */
.logo-text, .logo-text * {display:none !important;}
/* Novo degradê invertido: branco na área da logo -> azul claro -> azul intermediário -> azul escuro (fundo padrão) sem cinza */
.header-bar {position:relative; z-index:0;}
.logo-area, .nav-wrapper {position:relative; z-index:1;}
.header-bar::before {content:""; position:absolute; inset:0 auto 0 0; width:clamp(240px,32vw,420px); pointer-events:none; z-index:0; background:linear-gradient(90deg,#ffffff 0%, #d5e9f9 24%, #8cc3ec 48%, #2b6ea7 70%, #0a0f1f 100%);}
/* Sem after para evitar efeito cinza / fade translúcido */
/* Alta preferência de contraste: simplifica transição */
@media (prefers-contrast: more){
  .header-bar::before {background:linear-gradient(90deg,#ffffff 0%, #0a0f1f 100%);}
}
@media (max-width:900px){
  .header-bar::before {width:clamp(220px,60vw,380px); background:linear-gradient(90deg,#ffffff 0%, #d5e9f9 28%, #8cc3ec 54%, #2b6ea7 78%, #0a0f1f 100%);}
}
@media (max-width:640px){
  .header-bar::before {width:clamp(200px,78vw,340px); background:linear-gradient(90deg,#ffffff 0%, #d5e9f9 35%, #8cc3ec 62%, #2b6ea7 85%, #0a0f1f 100%);}
}
@media print { .header-bar::before {display:none !important;} }

/* === OVERRIDES: Barra superior branca + menu azul escuro === */
.header-bar {background:#ffffff !important; box-shadow:0 2px 6px -2px rgba(0,0,0,.15);}
/* Desativa quaisquer pseudo-elementos de degradê anteriores */
.header-bar::before, .header-bar::after {display:none !important;}
/* Logo sobre fundo branco: remover fundo branco adicional para integrar ou manter? Aqui removo padding/borda para ficar natural */
.logo-area.flush-left .logo-img {background:transparent; box-shadow:none; padding:0; border-radius:0; width:170px;}
@media (max-width:900px){.logo-area.flush-left .logo-img {width:155px;}}
@media (max-width:640px){.logo-area.flush-left .logo-img {width:145px;}}
/* Menu links azul escuro */
:root {--menu-dark:#0a2f4f;}
.header-bar .menu a {color:var(--menu-dark) !important;}
.header-bar .menu a.active {color:#144d7a !important;}
.header-bar .menu a::after {background:#2da2ff;}
.header-bar .menu a:hover, .header-bar .menu a:focus {color:#144d7a !important;}
/* Botão Contato adaptado ao fundo branco */
.header-bar .btn {background:transparent; color:var(--menu-dark); border-color:var(--menu-dark); box-shadow:none;}
.header-bar .btn:hover, .header-bar .btn:focus {background:rgba(13,88,140,.08); color:#0a3d66;}
/* Garantir contraste do restante do header (hero) mantém gradiente original */
.topo {background:var(--gradient-hero);} /* hero já incluído dentro; se quiser só barra branca + hero gradiente, separar seria refator maior */
/* Limpa regras antigas de posicionamento absoluto da logo que possam reaparecer */
.nav-wrapper {justify-content:flex-end;}
.logo-area.flush-left {position:relative; top:auto; left:auto; transform:none; padding:0 .9rem 0 .6rem;}
/* --- Ajustes seção técnica (tech-bridge) --- */
.tech-bridge {margin:1.6rem 0 2rem;}
.tech-bridge .payments-grid {margin-top:1rem;}
.tech-bridge .p-card h3 {font-size:.78rem;}
.tech-bridge .p-card ul {margin:.4rem 0 0; padding-left:1.1rem; font-size:.62rem; line-height:1.35;}
.tech-bridge-notes {margin:.6rem 0 2rem; color:var(--text-muted);}
.tech-bridge-notes h4 {margin:0 0 .6rem; font-size:.9rem; color:#8ec9ff;}
.tech-bridge-notes .bullets {font-size:.72rem;}
.tech-bridge-notes .sub-bullets {padding-left:1.1rem; display:grid; gap:.3rem; margin:.4rem 0 0; font-size:.68rem;}

/* --- Padronização tipografia caixinhas (seguir padrão .card) --- */
@media (min-width: 561px){
  /* Títulos dos cards/caixas */
  .p-card h3,
  .story-block h3,
  .pipeline .stage h3,
  .hub-block h4,
  .tech-bridge .p-card h3,
  .tech-bridge-notes h4 { font-size: 1.05rem; }

  /* Texto interno/descrições/listas */
  .p-card p,
  .story-block p,
  .pipeline .stage p,
  .hub-block ul,
  .tech-bridge .p-card ul,
  .tech-bridge-notes .bullets,
  .tech-bridge-notes .sub-bullets,
  .example-case .ex-step,
  .example-case .ex-step p { font-size: .85rem; }
}

/* Alinhamento à esquerda para a seção Sobre */
.section.sobre, .sobre .container, .sobre .grid-2, .sobre .grid-2 > div { text-align: left; }