/* ============================================================
       DESIGN TOKENS — alinhados ao VexInc Core (azul → violeta)
    ============================================================ */
    :root {
      --bg:#05070f;
      --bg-2:#080a1a;
      --panel:#0a0f22;
      --panel-2:#101533;
      --panel-3:#181e45;
      --text:#eef2ff;
      --text-2:#c6cee8;
      --muted:#8a93b8;
      --muted-2:#5c6490;
      --cyan:#5B9EFF;
      --cyan-2:#B5D4FF;
      --cyan-3:#2563EB;
      --copper:#C084FC;
      --copper-2:#9333EA;
      --line:rgba(140,160,255,.14);
      --line-2:rgba(140,160,255,.26);
      --ok:#61dfb0;
      --warn:#f1c47d;
      --danger:#ff8f8f;
      --stage-index:0;
      --radius-sm:6px;
      --radius:10px;
      --radius-lg:14px;
      font-family:'Inter',Arial,Helvetica,sans-serif;
      color-scheme:dark;
      -webkit-font-smoothing:antialiased;
    }

    * { box-sizing:border-box; }
    html, body { width:100%; height:100%; margin:0; }
    html { background:var(--bg); }
    body { overflow:hidden; background:var(--bg); color:var(--text); }
    button,a,input,select,textarea { font:inherit; color:inherit; }
    button,a { -webkit-tap-highlight-color:transparent; }
    button { cursor:pointer; border:0; background:none; padding:0; }
    a { color:inherit; text-decoration:none; }
    :focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

    /* ============================================================
       HEADER
    ============================================================ */
    .site-header {
      position:fixed;
      z-index:80;
      inset:0 0 auto;
      height:72px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,rgba(5,7,15,.9),rgba(5,7,15,.72));
      backdrop-filter:blur(18px) saturate(160%);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
    }
    .header-inner {
      width:min(1440px,calc(100% - 64px));
      height:100%;
      margin:auto;
      display:flex;
      align-items:center;
      gap:28px;
    }
    .brand {
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-family:'Space Grotesk',sans-serif;
      font-size:22px;
      letter-spacing:-.06em;
      font-weight:700;
      white-space:nowrap;
      transition:opacity .25s;
    }
    .brand:hover { opacity:.85; }
    .brand svg { width:28px; height:29px; flex:none; }
    .brand b { color:var(--cyan); font-weight:700; }
    .brand-caption {
      padding-left:22px;
      border-left:1px solid var(--line);
      color:var(--muted);
      font-size:10px;
      text-transform:uppercase;
      font-weight:700;
      letter-spacing:.2em;
      line-height:1.6;
    }

    .brand-logo {
    width: 45px;
    height: 45px;
    flex: none;

    display: block;
    object-fit: contain;

    /* Mantém a logo nítida e sem deformação */
    object-position: center;

    /* Um brilho bem discreto, combina com o site */
    filter:
        drop-shadow(0 0 8px rgba(91, 158, 255, .12))
        drop-shadow(0 0 12px rgba(192, 132, 252, .08));
}

.brand-name {
    display: inline-flex;
    align-items: baseline;
}

.brand-name b {
    color: var(--cyan);
    font-weight: 700;
}
    .top-status {
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:10px;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-weight:600;
    }
    .top-status i {
      width:6px;height:6px;border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 12px var(--cyan);
      animation:statusPulse 2.4s ease-in-out infinite;
    }
    @keyframes statusPulse {
      0%,100% { opacity:1; box-shadow:0 0 12px var(--cyan); }
      50% { opacity:.55; box-shadow:0 0 4px var(--cyan); }
    }

    .top-nav-links { display:flex; align-items:center; gap:6px; }
    .top-nav-links a {
      padding:10px 13px;
      border:1px solid transparent;
      color:var(--muted);
      font-size:10px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      border-radius:8px;
      transition:color .22s, border-color .22s, background .22s, transform .22s;
    }
    .top-nav-links a:hover {
      color:var(--text);
      border-color:var(--line-2);
      background:rgba(91,158,255,.06);
      transform:translateY(-1px);
    }
    .top-nav-links a.primary {
      color:var(--cyan);
      border-color:rgba(91,158,255,.42);
      background:rgba(91,158,255,.07);
    }
    .top-nav-links a.primary:hover {
      background:rgba(91,158,255,.14);
      border-color:rgba(91,158,255,.72);
      box-shadow:0 0 20px rgba(91,158,255,.18);
    }

    /* ============================================================
       EXPERIENCE STAGE
    ============================================================ */
    .experience {
      position:fixed;
      inset:0;
      overflow:hidden;
      isolation:isolate;
      background:var(--bg);
    }

    .ambient {
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 78% 42%,rgba(59,130,246,.16),transparent 32%),
        radial-gradient(circle at 22% 78%,rgba(192,132,252,.075),transparent 34%),
        radial-gradient(circle at 50% 50%,rgba(40,60,160,.13),transparent 60%),
        linear-gradient(120deg,#040610 0%,#0a0e24 50%,#060918 100%);
      transition:opacity .9s ease;
    }
    .ambient::before {
      content:"";
      position:absolute;
      inset:0;
      opacity:.24;
      background-image:
        linear-gradient(to right,transparent calc(20% - .5px),rgba(150,170,255,.09) 20%,transparent calc(20% + .5px)),
        linear-gradient(to right,transparent calc(50% - .5px),rgba(150,170,255,.11) 50%,transparent calc(50% + .5px)),
        linear-gradient(to right,transparent calc(80% - .5px),rgba(150,170,255,.09) 80%,transparent calc(80% + .5px)),
        linear-gradient(to bottom,transparent calc(50% - .5px),rgba(150,170,255,.08) 50%,transparent calc(50% + .5px));
    }
    .ambient::after {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(ellipse at 62% 45%,transparent 16%,rgba(2,3,10,.32) 62%,rgba(2,3,10,.82) 100%);
    }

    .star-field {
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:.55;
      background-image:
        radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.5),transparent),
        radial-gradient(1px 1px at 78% 14%,rgba(255,255,255,.4),transparent),
        radial-gradient(1.4px 1.4px at 34% 68%,rgba(255,255,255,.35),transparent),
        radial-gradient(1px 1px at 56% 88%,rgba(255,255,255,.4),transparent),
        radial-gradient(1px 1px at 88% 44%,rgba(255,255,255,.3),transparent),
        radial-gradient(1.2px 1.2px at 22% 84%,rgba(255,255,255,.35),transparent),
        radial-gradient(1px 1px at 62% 34%,rgba(255,255,255,.3),transparent);
      animation:starDrift 80s linear infinite;
    }
    @keyframes starDrift {
      from { transform:translate3d(0,0,0); }
      to { transform:translate3d(-40px,-30px,0); }
    }

    /* ============================================================
       GLOBE
    ============================================================ */
    .globe-layer {
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      transition:transform 1.05s cubic-bezier(.16,.82,.22,1),opacity .85s ease,filter .85s ease;
      transform-origin:72% 48%;
      will-change:transform,opacity,filter;
    }
    #globe {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }
    .stage-orbit {
      position:absolute;
      width:min(42vw,680px);
      aspect-ratio:1;
      left:79%;
      top:45%;
      transform:translate(-50%,-50%) rotate(var(--orbit-spin,0deg));
      border:1px solid rgba(150,170,255,.10);
      border-radius:50%;
      box-shadow:
        0 0 110px rgba(90,140,255,.08),
        inset 0 0 90px rgba(120,100,255,.06);
      transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity .8s;
    }
    .stage-orbit::before, .stage-orbit::after {
      content:"";
      position:absolute;
      border-radius:50%;
    }
    .stage-orbit::before {
      inset:12%;
      border:1px dashed rgba(160,180,255,.09);
    }
    .stage-orbit::after {
      inset:-11%;
      border:1px solid rgba(160,180,255,.06);
    }
    .stage-coordinate {
      position:absolute;
      right:42px;
      top:100px;
      color:var(--muted-2);
      font-size:9px;
      line-height:1.8;
      text-transform:uppercase;
      letter-spacing:.2em;
      text-align:right;
      font-weight:600;
    }
    .stage-coordinate b {
      color:var(--cyan);
      display:block;
      font-weight:700;
      margin-bottom:2px;
    }

    .globe-tooltip {
      position:absolute;
      z-index:22;
      left:0;
      top:0;
      width:max-content;
      max-width:250px;
      padding:13px 16px 12px 17px;
      border:1px solid rgba(91,158,255,.34);
      border-left-color:var(--cyan);
      border-radius:4px;
      background:rgba(5,8,20,.92);
      box-shadow:
        0 20px 56px rgba(0,0,0,.36),
        0 0 40px rgba(91,158,255,.10);
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
      opacity:0;
      transform:translate3d(var(--tip-x,0px),var(--tip-y,0px),0) translateY(-50%) scale(.94);
      transform-origin:left center;
      transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), filter .3s;
      will-change:transform,opacity;
    }
    .globe-tooltip.visible {
      opacity:1;
      transform:translate3d(var(--tip-x,0px),var(--tip-y,0px),0) translateY(-50%) scale(1);
      filter:drop-shadow(0 0 14px rgba(91,158,255,.14));
    }
    .globe-tooltip::before {
      content:"";
      position:absolute;
      right:100%;
      top:50%;
      width:var(--tip-leader,18px);
      height:1px;
      background:linear-gradient(90deg,rgba(91,158,255,.10),rgba(91,158,255,.85));
    }
    .globe-tooltip::after {
      content:"";
      position:absolute;
      width:5px;height:5px;
      right:calc(100% + var(--tip-leader,18px) - 2px);
      top:calc(50% - 2px);
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 14px var(--cyan);
    }
    .globe-tooltip[data-side="left"] {
      border-left-color:rgba(91,158,255,.34);
      border-right-color:var(--cyan);
      transform-origin:right center;
    }
    .globe-tooltip[data-side="left"]::before {
      right:auto;
      left:100%;
      background:linear-gradient(90deg,rgba(91,158,255,.85),rgba(91,158,255,.10));
    }
    .globe-tooltip[data-side="left"]::after {
      right:auto;
      left:calc(100% + var(--tip-leader,18px) - 2px);
    }
    .globe-tooltip-kicker {
      display:block;
      margin-bottom:6px;
      color:var(--cyan);
      font-size:8.5px;
      font-weight:900;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    .globe-tooltip strong {
      display:block;
      color:#f4f8ff;
      font-size:13.5px;
      letter-spacing:-.02em;
      line-height:1.2;
      font-weight:700;
    }
    .globe-tooltip small {
      display:block;
      margin-top:5px;
      color:#9eb0cc;
      font-size:9.5px;
      line-height:1.45;
      letter-spacing:.03em;
    }

    .data-link {
      position:absolute;
      z-index:3;
      right:14%;
      top:46%;
      width:24%;
      height:1px;
      transform:rotate(-5deg);
      transform-origin:right center;
      background:linear-gradient(90deg,transparent,rgba(91,158,255,.22),rgba(91,158,255,.02));
      opacity:.5;
      transition:opacity .8s;
    }
    .data-link::after {
      content:"";
      position:absolute;
      width:80px;height:1px;
      right:0;
      background:linear-gradient(90deg,transparent,var(--cyan));
      animation:beam 3.2s ease-in-out infinite;
    }
    @keyframes beam {
      0% { transform:translateX(-240px); opacity:0; }
      30% { opacity:1; }
      80%,100% { transform:translateX(0); opacity:0; }
    }

    /* ============================================================
       STAGE GRID
    ============================================================ */
    .stage {
      position:absolute;
      z-index:10;
      inset:72px 0 62px;
      display:grid;
      grid-template-columns:minmax(330px,.76fr) minmax(620px,1.34fr);
      gap:36px;
      align-items:center;
      width:min(1440px,calc(100% - 64px));
      margin:auto;
      transition:transform 1s cubic-bezier(.16,.82,.22,1), opacity .72s ease, filter .9s ease;
      will-change:transform,opacity,filter;
    }

    .story-copy {
      position:relative;
      min-height:440px;
      z-index:5;
    }
    .chapter-copy {
      position:absolute;
      inset:0 auto auto 0;
      width:min(520px,100%);
      opacity:0;
      transform:translateY(28px);
      filter:blur(5px);
      pointer-events:none;
      transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
    }
    .chapter-copy.active {
      opacity:1;
      transform:none;
      filter:none;
      pointer-events:auto;
    }
    .chapter-index {
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:26px;
      color:var(--cyan);
      font-size:10px;
      font-weight:900;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    .chapter-index::before {
      content:"";
      width:36px;
      height:1px;
      background:currentColor;
    }
    .chapter-copy h1,
    .chapter-copy h2 {
      margin:0 0 24px;
      max-width:520px;
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(3rem,4.4vw,5.4rem);
      line-height:.98;
      letter-spacing:-.065em;
      font-weight:700;
    }
    .chapter-copy h1 em,
    .chapter-copy h2 em {
      color:var(--cyan);
      font-style:normal;
    }
    .chapter-copy p {
      margin:0 0 26px;
      max-width:470px;
      color:var(--text-2);
      font-size:clamp(.96rem,1.1vw,1.06rem);
      line-height:1.72;
      font-weight:400;
    }
    .feature-strip {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .feature-strip span {
      border:1px solid rgba(160,180,255,.16);
      background:rgba(10,14,32,.7);
      border-radius:100px;
      padding:7px 12px;
      color:#b7c0d8;
      font-size:9.5px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:color .3s, border-color .3s, background .3s;
    }
    .feature-strip span:hover {
      color:var(--cyan);
      border-color:rgba(91,158,255,.4);
      background:rgba(91,158,255,.07);
    }
    .chapter-action {
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:28px;
      padding:12px 0;
      border-top:1px solid var(--line);
      color:var(--copper);
      font-size:10px;
      font-weight:900;
      letter-spacing:.16em;
      text-transform:uppercase;
      transition:color .25s, gap .25s;
      cursor:pointer;
    }
    .chapter-action:hover {
      color:var(--cyan);
      gap:12px;
    }
    .chapter-copy.intro h1 {
      font-size:clamp(3.5rem,4.9vw,6.2rem);
    }
    .chapter-copy.final h2 {
      max-width:560px;
    }

    /* ============================================================
       TABLET DEVICE
    ============================================================ */
    .device-zone {
      position:relative;
      min-height:600px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:4;
    }
    .device-glow {
      position:absolute;
      width:88%;
      height:64%;
      border-radius:50%;
      background:radial-gradient(circle,rgba(100,160,255,.16),rgba(140,100,255,.05) 48%,transparent 74%);
      filter:blur(18px);
      transform:translateY(18px);
      animation:glowBreath 8s ease-in-out infinite;
    }
    @keyframes glowBreath {
      0%,100% { opacity:.85; transform:translateY(18px) scale(1); }
      50% { opacity:1; transform:translateY(14px) scale(1.02); }
    }
    .laptop {
      position:relative;
      width:min(830px,100%);
      transform:none;
      transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .screen-shell {
      position:relative;
      padding:11px;
      border:1px solid #333a5c;
      border-radius:20px;
      background:
        linear-gradient(145deg,#1e2445 0%,#0d1028 40%,#141838 70%,#1e2445 100%);
      box-shadow:
        0 32px 90px rgba(0,0,0,.55),
        0 0 90px rgba(100,160,255,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
    }
    .screen-shell::before {
      content:"";
      position:absolute;
      left:50%;
      top:4.5px;
      transform:translateX(-50%);
      width:44px;
      height:3px;
      border-radius:4px;
      background:linear-gradient(90deg,transparent,rgba(150,170,225,.3),transparent);
      opacity:.7;
    }
    .screen-shell::after {
      content:"";
      position:absolute;
      right:-2px;
      top:64px;
      width:2px;
      height:44px;
      border-radius:2px;
      background:linear-gradient(180deg,rgba(150,170,225,.22),rgba(150,170,225,.05));
    }
    .camera {
      position:absolute;
      z-index:4;
      left:50%;
      top:3px;
      width:5px;
      height:5px;
      margin-left:-2.5px;
      border-radius:50%;
      background:#333a58;
      box-shadow:0 0 0 1px #060916, inset 0 0 2px rgba(91,158,255,.4);
    }
    .screen {
      position:relative;
      height:475px;
      overflow:hidden;
      border-radius:12px;
      border:1px solid rgba(130,150,220,.16);
      background:#06091a;
      isolation:isolate;
    }
    .screen::after {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg,rgba(255,255,255,.055) 0%,transparent 28%),
        radial-gradient(ellipse at 100% 0%,rgba(91,158,255,.06),transparent 40%);
      box-shadow:inset 0 0 32px rgba(0,0,0,.32);
      z-index:2;
    }
    .screen, .screen * { text-rendering:geometricPrecision; }

    .app {
      position:absolute;
      inset:0;
      display:grid;
      grid-template-columns:132px 1fr;
      background:#080b1e;
      opacity:0;
      transform:translateY(14px) scale(.99);
      transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
      pointer-events:none;
    }
    .app.active {
      opacity:1;
      transform:none;
      pointer-events:auto;
    }
    .app-sidebar {
      padding:16px 10px;
      border-right:1px solid rgba(150,165,230,.10);
      background:linear-gradient(180deg,#090c22,#070a1c);
    }
    .app-logo {
      display:flex;
      align-items:center;
      gap:6px;
      margin:1px 4px 18px;
      font-family:'Space Grotesk',sans-serif;
      font-size:12.5px;
      font-weight:700;
      letter-spacing:-.04em;
    }
    .app-logo b { color:var(--cyan); font-weight:700; }
    .app-nav { display:grid; gap:5px; }
    .nav-item {
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 9px;
      border-radius:6px;
      color:#8090b5;
      font-size:8.5px;
      font-weight:800;
      letter-spacing:.05em;
      transition:background .25s, color .25s;
    }
    .nav-item i {
      width:5px;height:5px;border-radius:50%;
      background:#4a5680;
      transition:background .25s, box-shadow .25s;
    }
    .nav-item.active {
      background:rgba(91,158,255,.12);
      color:#dbe6ff;
    }
    .nav-item.active i {
      background:var(--cyan);
      box-shadow:0 0 8px var(--cyan);
    }
    .app-main {
      min-width:0;
      display:flex;
      flex-direction:column;
    }
    .app-topbar {
      height:44px;
      flex:none;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 14px;
      border-bottom:1px solid rgba(150,165,230,.10);
      background:linear-gradient(180deg,#0e1230,#0c1028);
    }
    .crumb {
      color:#8a97bc;
      font-size:8.5px;
      font-weight:700;
      letter-spacing:.05em;
    }
    .crumb strong { color:#d8e0f5; font-weight:800; }
    .app-topbar .spacer { flex:1; }
    .top-chip {
      border:1px solid rgba(91,158,255,.24);
      padding:5px 8px;
      border-radius:4px;
      color:#9eb0d4;
      font-size:7.5px;
      letter-spacing:.06em;
      font-weight:700;
    }
    .avatar {
      width:23px;height:23px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(135deg,#1a2050,#101640);
      color:var(--cyan);
      font-size:7.5px;
      font-weight:900;
      border:1px solid rgba(91,158,255,.22);
    }
    .app-body {
      position:relative;
      flex:1;
      overflow:hidden;
      padding:15px;
      background:linear-gradient(140deg,#0b0f28,#0a0e22);
    }
    .app-title {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .app-title h3 {
      margin:0;
      color:#eaf0ff;
      font-family:'Space Grotesk',sans-serif;
      font-size:15.5px;
      letter-spacing:-.03em;
      font-weight:700;
    }
    .app-title p {
      margin:4px 0 0;
      color:#7080a8;
      font-size:8px;
      letter-spacing:.02em;
    }
    .primary-btn {
      background:var(--cyan);
      color:#061023;
      padding:8px 11px;
      border-radius:5px;
      font-size:7.5px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      transition:transform .25s, box-shadow .25s, background .25s;
      font-family:inherit;
    }
    .primary-btn:hover {
      background:var(--cyan-2);
      transform:translateY(-1px);
      box-shadow:0 8px 18px -6px rgba(91,158,255,.55);
    }
    .panel {
      border:1px solid rgba(150,170,240,.12);
      border-radius:8px;
      background:linear-gradient(160deg,rgba(12,18,42,.92),rgba(10,14,32,.88));
      box-shadow:0 10px 26px rgba(0,0,0,.14);
    }
    .panel-head {
      height:32px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 11px;
      border-bottom:1px solid rgba(150,170,240,.10);
      color:#bcc5dd;
      font-size:7.5px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .panel-head .dot {
      width:5px;height:5px;border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 8px rgba(91,158,255,.75);
    }

    .form-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:9px;
      padding:11px;
    }
    .field { min-width:0; }
    .field.wide { grid-column:span 2; }
    .field label {
      display:block;
      margin-bottom:4px;
      color:#8190b0;
      font-size:6.5px;
      font-weight:800;
      letter-spacing:.07em;
      text-transform:uppercase;
    }
    .fake-input {
      min-height:30px;
      display:flex;
      align-items:center;
      padding:0 9px;
      border:1px solid rgba(140,160,230,.18);
      border-radius:4px;
      background:#080b20;
      color:#d9e0f0;
      font-size:7.5px;
      position:relative;
      overflow:hidden;
    }
    .fake-input.fill::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(91,158,255,.14),transparent);
      transform:translateX(-100%);
      animation:fieldFlash .7s ease forwards;
    }
    @keyframes fieldFlash { to { transform:translateX(100%); } }

    .mini-tabs {
      display:flex;
      gap:4px;
      margin:8px 0 10px;
    }
    .mini-tabs span {
      padding:5px 9px;
      border:1px solid rgba(140,160,230,.14);
      border-radius:4px;
      color:#6d7ba0;
      font-size:6.5px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .mini-tabs span.active {
      color:#dbe6ff;
      border-color:rgba(91,158,255,.30);
      background:rgba(91,158,255,.09);
    }

    .transport-flow {
      display:grid;
      grid-template-columns:1.35fr .65fr;
      gap:11px;
      height:calc(100% - 44px);
    }
    .transport-main {
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .transport-side {
      display:grid;
      grid-template-rows:auto 1fr;
      gap:11px;
    }
    .workflow {
      padding:11px;
      display:grid;
      gap:8px;
    }
    .flow-step {
      display:grid;
      grid-template-columns:22px 1fr auto;
      gap:9px;
      align-items:center;
      padding:8px;
      border:1px solid rgba(150,170,240,.10);
      border-radius:6px;
      background:#0a0e28;
      color:#7080a8;
      font-size:7.5px;
      opacity:.6;
      transition:all .35s ease;
    }
    .flow-step .n {
      width:19px;height:19px;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1px solid #3a4270;
      font-size:6.5px;
      font-weight:900;
      transition:all .35s ease;
    }
    .flow-step b {
      display:block;
      color:#9faecb;
      margin-bottom:2px;
      font-weight:700;
    }
    .flow-step small { font-size:6.5px; }
    .flow-step .status {
      color:#5c688c;
      text-transform:uppercase;
      letter-spacing:.07em;
      font-weight:700;
    }
    .flow-step.running {
      opacity:1;
      border-color:rgba(91,158,255,.30);
      background:rgba(91,158,255,.07);
      box-shadow:0 0 20px -6px rgba(91,158,255,.32);
    }
    .flow-step.running .n {
      border-color:var(--cyan);
      color:var(--cyan);
      box-shadow:0 0 14px rgba(91,158,255,.28);
    }
    .flow-step.done { opacity:1; }
    .flow-step.done .n {
      border-color:var(--ok);
      background:rgba(97,223,176,.12);
      color:var(--ok);
    }
    .flow-step.done .status { color:var(--ok); }

    .sefaz-result {
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-height:150px;
      padding:13px;
      text-align:center;
    }
    .sefaz-icon {
      width:58px;height:58px;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1px solid #3a4270;
      color:#6472a0;
      font-size:24px;
      transition:all .5s ease;
    }
    .sefaz-result.running .sefaz-icon {
      border-color:var(--cyan);
      color:var(--cyan);
      box-shadow:0 0 26px rgba(91,158,255,.22);
      animation:spin 1.1s linear infinite;
    }
    .sefaz-result.approved .sefaz-icon {
      border-color:var(--ok);
      background:rgba(97,223,176,.10);
      color:var(--ok);
      box-shadow:0 0 30px rgba(97,223,176,.2);
      animation:none;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .sefaz-result strong {
      margin-top:11px;
      font-size:9.5px;
      color:#dbe0f0;
      font-weight:700;
    }
    .sefaz-result small {
      margin-top:4px;
      color:#7180a4;
      font-size:6.5px;
      line-height:1.5;
    }

    .kpis {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:9px;
      margin-bottom:11px;
    }
    .kpi {
      padding:11px;
      border:1px solid rgba(150,170,240,.11);
      border-radius:7px;
      background:linear-gradient(160deg,#0d1230,#0a0e26);
    }
    .kpi small {
      color:#7583a8;
      font-size:6.5px;
      text-transform:uppercase;
      letter-spacing:.07em;
      font-weight:700;
    }
    .kpi strong {
      display:block;
      margin-top:6px;
      font-family:'Space Grotesk',sans-serif;
      font-size:16px;
      letter-spacing:-.04em;
      color:#eef2ff;
      font-weight:700;
    }

    .wms-grid {
      display:grid;
      grid-template-columns:1.3fr .7fr;
      gap:11px;
      height:calc(100% - 78px);
    }
    .warehouse {
      position:relative;
      padding:13px;
      overflow:hidden;
    }
    .rack {
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:5px;
      margin-top:8px;
    }
    .bin {
      height:32px;
      border:1px solid rgba(140,160,230,.14);
      border-radius:3px;
      background:#0e1432;
      position:relative;
      transition:all .3s;
    }
    .bin::after {
      content:"";
      position:absolute;
      inset:5px;
      border-radius:2px;
      background:rgba(91,158,255,.04);
      transition:background .3s;
    }
    .bin.active {
      border-color:rgba(91,158,255,.62);
      box-shadow:0 0 18px rgba(91,158,255,.16);
    }
    .bin.active::after { background:rgba(91,158,255,.18); }
    .pick-card {
      margin-top:11px;
      padding:11px;
      border:1px solid rgba(91,158,255,.20);
      border-radius:6px;
      background:rgba(91,158,255,.06);
    }
    .pick-card b {
      display:block;
      font-size:8.5px;
      color:#dbe6ff;
      font-weight:700;
    }
    .pick-card span {
      display:block;
      margin-top:4px;
      color:#8090b0;
      font-size:6.5px;
    }
    .timeline {
      display:grid;
      gap:9px;
      padding:11px;
    }
    .timeline-item {
      display:grid;
      grid-template-columns:10px 1fr;
      gap:9px;
      align-items:start;
      color:#6f7ea2;
      font-size:6.5px;
      line-height:1.5;
    }
    .timeline-item i {
      width:9px;height:9px;
      border-radius:50%;
      border:1px solid #485080;
      margin-top:1px;
      transition:all .3s;
    }
    .timeline-item.done { color:#bcc8e0; }
    .timeline-item.done i {
      border-color:var(--ok);
      background:rgba(97,223,176,.18);
      box-shadow:0 0 10px rgba(97,223,176,.2);
    }

    .tracking-grid {
      display:grid;
      grid-template-columns:1.32fr .68fr;
      gap:11px;
      height:calc(100% - 46px);
    }
    .map-panel {
      position:relative;
      overflow:hidden;
      min-height:310px;
      background:#080b1e;
    }
    .map-panel::before {
      content:"";
      position:absolute;
      inset:0;
      opacity:.4;
      background-image:
        linear-gradient(rgba(140,160,230,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(140,160,230,.07) 1px,transparent 1px);
      background-size:28px 28px;
    }
    .road {
      position:absolute;
      height:2px;
      background:linear-gradient(90deg,rgba(91,158,255,.22),var(--cyan),rgba(91,158,255,.18));
      transform-origin:left center;
      box-shadow:0 0 10px rgba(91,158,255,.2);
      border-radius:2px;
    }
    .road.r1 { width:190px; left:45px; top:225px; transform:rotate(-30deg); }
    .road.r2 { width:165px; left:208px; top:131px; transform:rotate(14deg); }
    .road.r3 { width:134px; left:363px; top:171px; transform:rotate(-35deg); }
    .map-node {
      position:absolute;
      width:11px;height:11px;
      border-radius:50%;
      border:2px solid #080b1e;
      background:var(--cyan);
      box-shadow:0 0 18px var(--cyan);
    }
    .map-node.a { left:42px; top:222px; }
    .map-node.b { left:205px; top:128px; }
    .map-node.c { left:365px; top:167px; }
    .truck-dot {
      position:absolute;
      left:48px;top:218px;
      width:14px;height:14px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#dbe6ff;
      color:#0a0e28;
      font-size:7px;
      box-shadow:0 0 20px var(--cyan);
      animation:truckMove 5.6s ease-in-out infinite;
    }
    @keyframes truckMove {
      0%,10% { transform:translate(0,0); }
      48% { transform:translate(161px,-93px); }
      72%,100% { transform:translate(319px,-51px); }
    }
    .map-label {
      position:absolute;
      padding:4px 7px;
      border:1px solid rgba(140,160,230,.16);
      border-radius:4px;
      background:rgba(5,8,20,.9);
      color:#9aabcb;
      font-size:6.5px;
      font-weight:700;
    }
    .map-label.la { left:29px; top:241px; }
    .map-label.lb { left:191px; top:104px; }
    .map-label.lc { left:349px; top:184px; }
    .event-list {
      padding:11px;
      display:grid;
      gap:9px;
    }
    .event {
      position:relative;
      padding:8px 8px 8px 22px;
      border-left:1px solid #2c3458;
      color:#7888ac;
      font-size:6.5px;
      line-height:1.5;
      transition:color .3s, border-color .3s;
    }
    .event::before {
      content:"";
      position:absolute;
      left:-4px;top:10px;
      width:7px;height:7px;
      border-radius:50%;
      background:#2c3458;
      transition:all .3s;
    }
    .event.active { color:#cdd5e8; }
    .event.active::before {
      background:var(--cyan);
      box-shadow:0 0 10px var(--cyan);
    }
    .event b {
      display:block;
      margin-bottom:2px;
      color:inherit;
      font-size:7.5px;
      font-weight:700;
    }

    .docs-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:11px;
      height:calc(100% - 44px);
    }
    .docs-list {
      padding:9px;
      display:grid;
      gap:6px;
      align-content:start;
    }
    .doc-row {
      display:grid;
      grid-template-columns:30px 1fr auto;
      gap:9px;
      align-items:center;
      padding:8px;
      border:1px solid rgba(140,160,230,.11);
      border-radius:5px;
      background:#080b1e;
      color:#7c8cb0;
      font-size:6.5px;
      transition:all .3s ease;
    }
    .doc-row .icon {
      width:29px;height:29px;
      display:grid;
      place-items:center;
      border:1px solid #343c68;
      border-radius:4px;
      color:#8290b2;
      font-size:6.5px;
      font-weight:900;
      transition:all .3s;
    }
    .doc-row b {
      display:block;
      color:#abb8d0;
      font-size:7.5px;
      font-weight:700;
    }
    .doc-row small {
      display:block;
      margin-top:2px;
      color:#6a78a0;
      font-size:6.5px;
    }
    .doc-row .badge {
      padding:4px 6px;
      border:1px solid rgba(140,160,230,.14);
      border-radius:3px;
      color:#8290b2;
      font-size:6px;
      font-weight:800;
      letter-spacing:.05em;
    }
    .doc-row.active {
      border-color:rgba(91,158,255,.32);
      background:rgba(91,158,255,.06);
      box-shadow:0 0 22px -10px rgba(91,158,255,.45);
    }
    .doc-row.active .icon {
      border-color:var(--cyan);
      color:var(--cyan);
    }
    .doc-row.active .badge {
      border-color:rgba(97,223,176,.3);
      color:var(--ok);
    }
    .xml-preview {
      padding:12px;
      overflow:hidden;
    }
    .xml-preview .doc-title {
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      margin-bottom:11px;
    }
    .xml-preview .doc-title b {
      font-size:8.5px;
      color:#d5def0;
      font-weight:700;
    }
    .xml-preview .doc-title span {
      font-size:6.5px;
      color:var(--ok);
      font-weight:700;
    }
    .xml-code {
      height:230px;
      overflow:hidden;
      padding:11px;
      border:1px solid rgba(140,160,230,.10);
      border-radius:6px;
      background:#060818;
      color:#8090b0;
      font:7px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;
    }
    .xml-code i { color:#5B9EFF; font-style:normal; }
    .xml-code b { color:#C084FC; font-weight:400; }

    .finance-grid {
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:11px;
      height:calc(100% - 46px);
    }
    .chart {
      position:relative;
      min-height:240px;
      padding:11px;
      overflow:hidden;
    }
    .chart-bars {
      height:160px;
      display:flex;
      align-items:flex-end;
      gap:13px;
      padding:12px 8px 20px;
      border-bottom:1px solid rgba(140,160,230,.12);
    }
    .bar {
      flex:1;
      position:relative;
      height:var(--h);
      max-width:34px;
      border-radius:4px 4px 0 0;
      background:linear-gradient(180deg,rgba(91,158,255,.78),rgba(160,120,255,.10));
      border-top:1px solid var(--cyan);
      animation:barRise 1.3s cubic-bezier(.2,.8,.2,1) both;
      transform-origin:bottom;
    }
    @keyframes barRise {
      from { transform:scaleY(.05); opacity:.2; }
    }
    .bar:nth-child(2){animation-delay:.08s}
    .bar:nth-child(3){animation-delay:.16s}
    .bar:nth-child(4){animation-delay:.24s}
    .bar:nth-child(5){animation-delay:.32s}
    .bar:nth-child(6){animation-delay:.40s}
    .chart-labels {
      display:flex;
      justify-content:space-around;
      color:#5a6890;
      font-size:6px;
      margin-top:7px;
      font-weight:700;
      letter-spacing:.05em;
    }
    .margin-card {
      display:grid;
      place-items:center;
      min-height:120px;
      padding:11px;
      text-align:center;
    }
    .margin-card strong {
      font-family:'Space Grotesk',sans-serif;
      font-size:30px;
      letter-spacing:-.05em;
      color:#dbe6ff;
      font-weight:700;
    }
    .margin-card small {
      color:#7583a8;
      font-size:6.5px;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-weight:700;
    }
    .margin-card .trend {
      margin-top:7px;
      color:var(--ok);
      font-size:7.5px;
      font-weight:700;
    }

    /* ============================================================
       CHAPTER NAV
    ============================================================ */
    .chapter-nav {
      position:fixed;
      z-index:40;
      right:26px;
      top:50%;
      transform:translateY(-50%);
      display:grid;
      gap:14px;
    }
    .chapter-dot {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      color:#7c8ab2;
      transition:color .25s;
    }
    .chapter-dot span {
      opacity:0;
      transform:translateX(6px);
      font-size:9px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      transition:opacity .25s, transform .25s;
    }
    .chapter-dot i {
      width:7px;height:7px;
      border:1px solid #8290b5;
      border-radius:50%;
      background:#0a0d22;
      transition:all .3s;
    }
    .chapter-dot:hover span,
    .chapter-dot.active span {
      opacity:1;
      transform:none;
    }
    .chapter-dot.active { color:#ccd6ee; }
    .chapter-dot.active i {
      background:var(--cyan);
      border-color:var(--cyan);
      transform:scale(1.4);
      box-shadow:0 0 14px var(--cyan);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    .stage-footer {
      position:fixed;
      z-index:50;
      left:0;right:0;bottom:0;
      height:62px;
      display:flex;
      align-items:center;
      border-top:1px solid var(--line);
      background:rgba(5,7,15,.86);
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
    }
    .stage-footer-inner {
      width:min(1440px,calc(100% - 64px));
      margin:auto;
      display:flex;
      align-items:center;
      gap:18px;
    }
    .stage-footer-label {
      color:var(--muted);
      font-size:9.5px;
      font-weight:900;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .stage-count {
      color:var(--cyan);
      font-size:10.5px;
      font-weight:900;
      min-width:52px;
      font-family:'Space Grotesk',sans-serif;
      letter-spacing:.04em;
    }
    .stage-progress {
      position:relative;
      flex:1;
      height:2px;
      border-radius:2px;
      background:rgba(238,242,255,.10);
      overflow:hidden;
    }
    .stage-progress::after {
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:var(--progress,0%);
      border-radius:2px;
      background:linear-gradient(90deg,var(--cyan-3),var(--cyan),var(--copper));
      box-shadow:0 0 14px var(--cyan);
      transition:width .7s cubic-bezier(.2,.8,.2,1);
    }
    .stage-next {
      color:#b8c0d8;
      font-size:9.5px;
      text-transform:uppercase;
      letter-spacing:.14em;
      white-space:nowrap;
      font-weight:600;
    }
    .wheel {
      width:18px;height:28px;
      border:1px solid #8290b5;
      border-radius:12px;
      position:relative;
      opacity:.7;
    }
    .wheel::after {
      content:"";
      position:absolute;
      left:7px;top:6px;
      width:2px;height:5px;
      border-radius:4px;
      background:var(--cyan);
      animation:nudge 1.7s infinite;
    }
    @keyframes nudge {
      50% { transform:translateY(7px); opacity:.3; }
    }

    /* ============================================================
       FINAL STAGE
    ============================================================ */
    .experience.final-stage .laptop { opacity:.68; }
    .experience.final-stage .data-link { opacity:.15; }
    .experience.final-stage .stage-orbit {
      transform:translate(-50%,-50%) rotate(var(--orbit-spin,0deg)) scale(1.14);
    }

    /* ============================================================
       INSTITUTIONAL MODE
    ============================================================ */
    .institutional-shell {
      position:absolute;
      z-index:16;
      inset:72px 0 62px;
      width:min(1440px,calc(100% - 64px));
      margin:auto;
      opacity:0;
      pointer-events:none;
      transform:translateX(106vw);
      transition:transform 1.05s cubic-bezier(.16,.82,.22,1), opacity .6s ease;
      will-change:transform,opacity;
    }
    .experience.institutional-mode .stage {
      transform:translateX(-108vw) scale(.96);
      opacity:.14;
      filter:blur(7px);
      pointer-events:none;
    }
    .experience.institutional-mode .institutional-shell {
      transform:none;
      opacity:1;
      pointer-events:auto;
    }
    .experience.institutional-mode .globe-layer {
      transform:translateX(-13vw) scale(.92);
      opacity:.6;
      filter:saturate(.82);
    }
    .experience.institutional-mode .data-link { opacity:0; }
    .experience.institutional-mode .globe-tooltip { opacity:0 !important; }

    .institution-panel {
      position:absolute;
      inset:0;
      display:grid;
      align-items:center;
      opacity:0;
      transform:translateX(80px);
      filter:blur(5px);
      pointer-events:none;
      transition:opacity .55s ease, transform .72s cubic-bezier(.2,.8,.2,1), filter .55s ease;
    }
    .institution-panel.active {
      opacity:1;
      transform:none;
      filter:none;
      pointer-events:auto;
    }
    .institution-kicker {
      display:flex;
      align-items:center;
      gap:13px;
      margin-bottom:20px;
      color:var(--cyan);
      font-size:9.5px;
      font-weight:900;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    .institution-kicker::before {
      content:"";
      width:36px;
      height:1px;
      background:currentColor;
    }
    .institution-panel h2 {
      margin:0;
      color:#f4f7ff;
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(3rem,4.8vw,5.8rem);
      line-height:.98;
      letter-spacing:-.065em;
      font-weight:700;
    }
    .institution-panel h2 em { color:var(--cyan); font-style:normal; }
    .institution-lead {
      margin:22px 0 0;
      max-width:660px;
      color:#b5bed6;
      font-size:clamp(.98rem,1.1vw,1.08rem);
      line-height:1.75;
    }
    .institution-card {
      border:1px solid rgba(150,170,240,.14);
      border-radius:10px;
      background:linear-gradient(145deg,rgba(12,18,42,.86),rgba(6,9,22,.78));
      box-shadow:0 24px 70px rgba(0,0,0,.24);
      backdrop-filter:blur(15px);
      -webkit-backdrop-filter:blur(15px);
    }

    /* About */
    .about-layout {
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:56px;
      align-items:center;
    }
    .about-copy { max-width:620px; }
    .about-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:30px;
    }
    .institution-button {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-height:44px;
      padding:0 18px;
      border:1px solid rgba(91,158,255,.38);
      border-radius:8px;
      background:rgba(91,158,255,.06);
      color:var(--cyan);
      font-size:9.5px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      transition:all .25s ease;
    }
    .institution-button:hover {
      background:rgba(91,158,255,.14);
      border-color:rgba(91,158,255,.72);
      transform:translateY(-1px);
      box-shadow:0 10px 24px -12px rgba(91,158,255,.65);
    }
    .institution-button.secondary {
      color:var(--text-2);
      border-color:var(--line-2);
      background:rgba(11,15,34,.55);
    }
    .institution-button.secondary:hover {
      color:var(--text);
      border-color:rgba(160,180,255,.35);
      box-shadow:none;
    }
    .about-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .about-card {
      min-height:190px;
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .about-card::after {
      content:"";
      position:absolute;
      width:110px;height:110px;
      right:-50px;bottom:-50px;
      border:1px solid rgba(91,158,255,.12);
      border-radius:50%;
      transition:all .6s ease;
    }
    .about-card:hover::after {
      border-color:rgba(91,158,255,.28);
      transform:scale(1.12);
    }
    .about-card.wide {
      grid-column:1/-1;
      min-height:160px;
    }
    .about-card .n {
      display:block;
      margin-bottom:30px;
      color:#5a6490;
      font-size:9px;
      font-weight:900;
      letter-spacing:.15em;
    }
    .about-card h3 {
      margin:0 0 10px;
      color:#e3e8f5;
      font-family:'Space Grotesk',sans-serif;
      font-size:18px;
      letter-spacing:-.03em;
      font-weight:700;
    }
    .about-card p {
      margin:0;
      color:#8fa0be;
      font-size:12.5px;
      line-height:1.7;
    }
    .values {
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:16px;
    }
    .values span {
      padding:7px 10px;
      border:1px solid rgba(91,158,255,.18);
      border-radius:100px;
      color:#a9b5d0;
      background:rgba(91,158,255,.045);
      font-size:8.5px;
      font-weight:800;
      letter-spacing:.07em;
      text-transform:uppercase;
    }

    /* Form */
    .form-layout {
      display:grid;
      grid-template-columns:.74fr 1.26fr;
      gap:56px;
      align-items:center;
    }
    .form-intro { max-width:540px; }
    .form-intro .aside-note {
      margin-top:28px;
      padding-left:16px;
      border-left:1px solid rgba(91,158,255,.45);
      color:#8290b0;
      font-size:11.5px;
      line-height:1.7;
    }
    .institution-form { padding:26px; }
    .institution-form-head {
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
      margin-bottom:20px;
    }
    .institution-form-head strong {
      color:#e7ecf5;
      font-family:'Space Grotesk',sans-serif;
      font-size:16.5px;
      letter-spacing:-.03em;
      font-weight:700;
    }
    .institution-form-head small {
      max-width:280px;
      color:#7180a4;
      font-size:9.5px;
      line-height:1.55;
      text-align:right;
    }
    .web-form-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:11px;
    }
    .web-field { min-width:0; }
    .web-field.full { grid-column:1/-1; }
    .web-field label {
      display:block;
      margin-bottom:6px;
      color:#8190b0;
      font-size:8.5px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .web-field input,
    .web-field select,
    .web-field textarea {
      width:100%;
      border:1px solid rgba(140,160,230,.16);
      outline:0;
      background:rgba(8,12,28,.84);
      color:#e3e8f5;
      padding:11px 13px;
      font-size:12px;
      border-radius:8px;
      transition:border-color .2s, box-shadow .2s, background .2s;
    }
    .web-field input,
    .web-field select { height:42px; }
    .web-field select {
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 13px center;
      background-size:15px;
      padding-right:38px;
    }
    .web-field textarea {
      min-height:94px;
      resize:none;
      line-height:1.55;
    }
    .web-field input:focus,
    .web-field select:focus,
    .web-field textarea:focus {
      border-color:rgba(91,158,255,.58);
      box-shadow:0 0 0 3px rgba(91,158,255,.08);
      background:#0a0e24;
    }
    .web-field input::placeholder,
    .web-field textarea::placeholder { color:#4d5680; }

    .interest-title {
      margin:18px 0 9px;
      color:#8190b0;
      font-size:8.5px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .interest-grid {
      display:flex;
      flex-wrap:wrap;
      gap:7px;
    }
    .interest-chip { position:relative; }
    .interest-chip input {
      position:absolute;
      opacity:0;
      pointer-events:none;
    }
    .interest-chip span {
      display:block;
      padding:9px 12px;
      border:1px solid rgba(140,160,230,.16);
      border-radius:100px;
      background:#0a0e28;
      color:#8295b8;
      font-size:9px;
      font-weight:800;
      letter-spacing:.06em;
      cursor:pointer;
      transition:all .25s ease;
      text-transform:uppercase;
    }
    .interest-chip:hover span {
      color:#cce0ff;
      border-color:rgba(91,158,255,.48);
      background:rgba(91,158,255,.07);
      transform:translateY(-1px);
      box-shadow:0 8px 20px -14px rgba(91,158,255,.9);
    }
    .interest-chip input:focus-visible + span {
      border-color:rgba(91,158,255,.72);
      box-shadow:0 0 0 3px rgba(91,158,255,.12);
    }
    .interest-chip input:checked + span {
      color:#dbe6ff;
      border-color:rgba(91,158,255,.62);
      background:rgba(91,158,255,.12);
      box-shadow:0 0 0 1px rgba(91,158,255,.16), 0 0 26px -10px rgba(91,158,255,.85);
    }

    .form-actions {
      display:flex;
      align-items:center;
      gap:14px;
      margin-top:20px;
      flex-wrap:wrap;
    }
    .form-submit {
      min-height:46px;
      padding:0 24px;
      border:1px solid var(--cyan);
      border-radius:100px;
      background:linear-gradient(135deg,var(--cyan),var(--copper));
      color:#061023;
      font-size:11px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
      transition:all .25s ease;
      font-family:inherit;
    }
    .form-submit:hover:not(:disabled) {
      transform:translateY(-2px);
      box-shadow:0 14px 34px -10px rgba(91,158,255,.8);
      background:linear-gradient(135deg,var(--cyan-2),var(--cyan));
    }
    .form-submit:disabled { opacity:.6; cursor:not-allowed; }
    .form-note {
      color:#6070a0;
      font-size:9px;
      line-height:1.5;
      max-width:220px;
    }
    .form-feedback {
      min-height:18px;
      margin-top:12px;
      color:var(--ok);
      font-size:10px;
      font-weight:800;
      letter-spacing:.03em;
      line-height:1.5;
    }
    .form-feedback[data-state="error"] { color:var(--danger); }

    .human-check {
      grid-column:1/-1;
      display:grid;
      grid-template-columns:1fr 140px auto;
      gap:11px;
      align-items:end;
      padding:13px;
      border:1px solid rgba(91,158,255,.16);
      border-radius:8px;
      background:rgba(8,12,28,.55);
      margin-top:12px;
    }
    .human-check__question {
      min-height:42px;
      display:flex;
      align-items:center;
      padding:0 13px;
      border:1px solid rgba(140,160,230,.13);
      border-radius:6px;
      color:#c8d0e8;
      background:rgba(8,12,28,.8);
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
    }
    .human-check__refresh {
      height:42px;
      padding:0 14px;
      border:1px solid rgba(91,158,255,.26);
      border-radius:6px;
      background:transparent;
      color:var(--cyan);
      font-size:8.5px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
      transition:all .25s;
    }
    .human-check__refresh:hover {
      background:rgba(91,158,255,.09);
      border-color:rgba(91,158,255,.55);
    }
    .web-honeypot {
      position:absolute!important;
      left:-99999px!important;
      width:1px!important;
      height:1px!important;
      overflow:hidden!important;
      opacity:0!important;
      pointer-events:none!important;
    }

    /* Contact */
    .contact-layout {
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:52px;
      align-items:center;
    }
    .contact-channels {
      display:grid;
      gap:10px;
      margin-top:28px;
      max-width:540px;
    }
    .contact-channel {
      display:grid;
      grid-template-columns:40px 1fr auto;
      gap:13px;
      align-items:center;
      padding:15px 16px;
      border:1px solid rgba(140,160,230,.13);
      border-radius:10px;
      background:rgba(9,13,30,.72);
      transition:border-color .25s, box-shadow .3s, transform .25s, background .25s;
    }
    .contact-channel i {
      width:40px;height:40px;
      display:grid;
      place-items:center;
      border:1px solid rgba(91,158,255,.26);
      border-radius:9px;
      color:var(--cyan);
      font-style:normal;
      font-size:12px;
      font-weight:900;
    }
    .contact-channel b {
      display:block;
      color:#d8dff0;
      margin-bottom:3px;
      font-size:12px;
      font-weight:700;
    }
    .contact-channel span {
      color:#7180a4;
      font-size:9.5px;
    }
    .contact-channel small {
      color:#6980b5;
      font-size:15px;
      transition:transform .25s, color .25s;
    }
    .contact-channel[href]:hover {
      border-color:rgba(91,158,255,.42);
      background:rgba(12,18,40,.84);
      box-shadow:0 0 26px -10px rgba(91,158,255,.55);
      transform:translateX(4px);
    }
    .contact-channel[href]:hover small {
      transform:translate(2px,-2px);
      color:var(--cyan);
    }
    .contact-value {
      display:block;
      margin-top:5px;
      color:var(--cyan)!important;
      font-size:12.5px!important;
      font-weight:800;
      letter-spacing:.02em;
    }
    .social-box {
      padding:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      min-height:150px;
    }
    .social-copy small {
      display:block;
      color:#7180a4;
      font-size:9px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .social-copy strong {
      color:#dce1f0;
      font-family:'Space Grotesk',sans-serif;
      font-size:17px;
      letter-spacing:-.03em;
      font-weight:700;
    }
    .social-icons { display:flex; gap:10px; }
    .social-icon {
      width:48px;height:48px;
      display:grid;
      place-items:center;
      border:1px solid rgba(91,158,255,.18);
      border-radius:10px;
      color:#8ea0c0;
      background:rgba(8,12,28,.62);
      transition:all .25s ease;
    }
    .social-icon:hover {
      color:var(--cyan);
      border-color:rgba(91,158,255,.55);
      box-shadow:0 0 24px -10px rgba(91,158,255,.85);
      transform:translateY(-2px);
    }
    .social-icon svg {
      width:18px;height:18px;
      fill:none;
      stroke:currentColor;
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .social-icon.is-unconfigured {
      opacity:.42;
      cursor:default;
    }
    .social-icon.is-unconfigured:hover {
      transform:none;
      box-shadow:none;
      border-color:rgba(91,158,255,.18);
      color:#8ea0c0;
    }

    .experience.institutional-mode .chapter-nav { z-index:45; }
    .experience.institutional-mode .stage-coordinate { opacity:.42; }

    /* ============================================================
       CHAPTER COPY — AUTO-FIT
    ============================================================ */
    @media (min-width:901px) {
      .story-copy {
        height:100%;
        min-height:0;
        align-self:stretch;
      }
      .chapter-copy {
        top:50%;
        bottom:auto;
        transform:translateY(calc(-50% + 28px));
      }
      .chapter-copy.active {
        transform:translateY(-50%);
      }
      .chapter-copy.copy-compact .chapter-index { margin-bottom:18px; }
      .chapter-copy.copy-compact h1,
      .chapter-copy.copy-compact h2 {
        margin-bottom:18px;
        font-size:clamp(2.65rem,3.8vw,4.75rem);
        line-height:.97;
      }
      .chapter-copy.intro.copy-compact h1 {
        font-size:clamp(3rem,4.3vw,5.4rem);
      }
      .chapter-copy.copy-compact p {
        margin-bottom:18px;
        font-size:clamp(.92rem,1vw,1.02rem);
        line-height:1.6;
      }
      .chapter-copy.copy-compact .chapter-action {
        margin-top:16px;
        padding:9px 0;
      }
      .chapter-copy.copy-tight .chapter-index {
        margin-bottom:13px;
        font-size:9px;
      }
      .chapter-copy.copy-tight h1,
      .chapter-copy.copy-tight h2 {
        margin-bottom:14px;
        font-size:clamp(2.35rem,3.4vw,4.35rem);
        line-height:.96;
      }
      .chapter-copy.intro.copy-tight h1 {
        font-size:clamp(2.75rem,3.85vw,4.85rem);
      }
      .chapter-copy.copy-tight p {
        margin-bottom:14px;
        font-size:clamp(.87rem,.94vw,.98rem);
        line-height:1.5;
      }
      .chapter-copy.copy-tight .chapter-action {
        margin-top:12px;
        padding:8px 0;
        font-size:9px;
      }
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width:1180px) {
      .header-inner,
      .stage,
      .stage-footer-inner { width:calc(100% - 48px); }
      .stage { grid-template-columns:minmax(300px,.7fr) minmax(560px,1.3fr); gap:22px; }
      .chapter-copy h1,
      .chapter-copy h2 { font-size:clamp(2.8rem,4.2vw,4.7rem); }
      .screen { height:440px; }
      .device-zone { min-height:540px; }
      .app { grid-template-columns:118px 1fr; }
      .stage-orbit { left:82%; width:min(47vw,620px); }
      .institutional-shell { width:calc(100% - 48px); }
      .about-layout,.form-layout,.contact-layout { gap:32px; }
      .institution-panel h2 { font-size:clamp(2.8rem,4.8vw,4.9rem); }
      .about-card { padding:20px; }
      .institution-form { padding:20px; }
    }

    @media (max-width:900px) {
      .brand-caption,
      .top-status { display:none; }
      .top-nav-links { margin-left:auto; }
      .top-nav-links a { padding:9px 10px; font-size:9px; }
      .stage {
        inset:68px 0 52px;
        width:calc(100% - 32px);
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
        gap:8px;
        align-items:stretch;
        padding-top:16px;
      }
      .story-copy { min-height:210px; }
      .chapter-copy { width:100%; max-width:720px; }
      .chapter-copy h1,
      .chapter-copy h2,
      .chapter-copy.intro h1 {
        max-width:720px;
        font-size:clamp(2.4rem,6.6vw,4.2rem);
        margin-bottom:14px;
      }
      .chapter-copy p {
        max-width:720px;
        font-size:.92rem;
        line-height:1.55;
        margin-bottom:14px;
      }
      .feature-strip { display:none; }
      .chapter-action { margin-top:10px; }
      .device-zone { min-height:0; align-items:start; }
      .laptop { width:min(760px,94vw); }
      .screen { height:min(48vh,410px); }
      .stage-orbit { left:76%; top:61%; width:64vw; opacity:.55; }
      .globe-tooltip { max-width:200px; }
      .chapter-nav { display:none; }
      .stage-coordinate { display:none; }
      .data-link { display:none; }
      .stage-footer { height:52px; }
      .stage-footer-inner { width:calc(100% - 32px); }
      .stage-footer-label,
      .stage-next { display:none; }
      .stage-count { min-width:auto; }
      .institutional-shell { inset:68px 0 52px; width:calc(100% - 32px); }
      .institution-panel {
        align-items:start;
        padding-top:30px;
        overflow:auto;
        scrollbar-width:none;
      }
      .institution-panel::-webkit-scrollbar { display:none; }
      .about-layout,
      .form-layout,
      .contact-layout { grid-template-columns:1fr; gap:22px; }
      .institution-panel h2 { font-size:clamp(2.6rem,7.6vw,4.3rem); }
      .institution-lead { margin-top:14px; line-height:1.6; }
      .about-grid { grid-template-columns:repeat(3,1fr); }
      .about-card,.about-card.wide { grid-column:auto; min-height:150px; }
      .about-card .n { margin-bottom:16px; }
      .form-intro .aside-note { display:none; }
      .institution-form { margin-bottom:26px; }
      .contact-channels { grid-template-columns:repeat(3,1fr); max-width:none; }
      .contact-channel { grid-template-columns:34px 1fr; }
      .contact-channel i { width:34px; height:34px; }
      .contact-channel small { display:none; }
      .experience.institutional-mode .globe-layer { transform:translateX(-22vw) scale(.88); opacity:.44; }
    }

    @media (max-width:620px) {
      .site-header { height:62px; }
      .header-inner { width:calc(100% - 24px); }
      .top-nav-links { display:none; }
      .stage { inset:62px 0 48px; width:calc(100% - 20px); padding-top:12px; }
      .story-copy { min-height:190px; }
      .chapter-index { margin-bottom:12px; font-size:8.5px; }
      .chapter-copy h1,
      .chapter-copy h2,
      .chapter-copy.intro h1 { font-size:clamp(2.1rem,9.6vw,3.4rem); }
      .chapter-copy p { font-size:.84rem; line-height:1.5; }
      .chapter-action { font-size:8.5px; }
      .laptop { width:100%; }
      .screen-shell { padding:6px 6px 8px; border-radius:12px; }
      .screen { height:42vh; min-height:300px; border-radius:8px; }
      .app { grid-template-columns:80px 1fr; }
      .app-sidebar { padding:8px 5px; }
      .app-logo { font-size:9.5px; margin-bottom:10px; }
      .nav-item { gap:4px; padding:5px; font-size:5.5px; }
      .app-topbar { height:34px; padding:0 8px; }
      .app-body { padding:9px; }
      .app-title h3 { font-size:11.5px; }
      .app-title p,.crumb,.top-chip { font-size:5.5px; }
      .primary-btn { padding:5px 7px; font-size:5.5px; }
      .avatar { width:17px; height:17px; font-size:5.5px; }
      .transport-flow,.wms-grid,.tracking-grid,.docs-grid,.finance-grid { gap:7px; }
      .transport-flow { grid-template-columns:1.2fr .8fr; }
      .form-grid { gap:5px; padding:6px; }
      .field label { font-size:5px; }
      .fake-input { min-height:22px; padding:0 5px; font-size:5.5px; }
      .workflow { padding:6px; gap:4px; }
      .flow-step { grid-template-columns:16px 1fr auto; gap:5px; padding:4px; font-size:5.5px; }
      .flow-step .n { width:15px; height:15px; font-size:5.5px; }
      .flow-step small,.event,.doc-row,.xml-code { font-size:5.5px; }
      .sefaz-icon { width:40px; height:40px; font-size:17px; }
      .kpis { gap:5px; }
      .kpi { padding:7px; }
      .kpi strong { font-size:12px; }
      .road.r3 { display:none; }
      .stage-orbit { left:79%; top:70%; width:80vw; }
      .globe-tooltip { max-width:170px; padding:9px 10px; }
      .globe-tooltip strong { font-size:11px; }
      .globe-tooltip small { font-size:7.5px; }
      .stage-footer { height:48px; }
      .wheel { display:none; }
      .institutional-shell { inset:62px 0 48px; width:calc(100% - 20px); }
      .institution-panel { padding-top:18px; padding-bottom:18px; }
      .institution-kicker { margin-bottom:12px; font-size:8.5px; }
      .institution-panel h2 { font-size:clamp(2.1rem,10.5vw,3.2rem); }
      .institution-lead { font-size:.86rem; }
      .about-actions { margin-top:18px; }
      .about-grid { grid-template-columns:1fr; gap:8px; }
      .about-card,.about-card.wide { min-height:auto; padding:16px; }
      .about-card .n { display:none; }
      .about-card h3 { font-size:14.5px; }
      .about-card p { font-size:10.5px; }
      .values { margin-top:10px; }
      .values span { padding:5px 8px; font-size:7.5px; }
      .form-layout,.contact-layout { gap:18px; }
      .institution-form { padding:15px; }
      .institution-form-head { margin-bottom:13px; }
      .institution-form-head small { display:none; }
      .web-form-grid { gap:7px; }
      .web-field input,
      .web-field select { height:38px; padding:8px 10px; font-size:10.5px; }
      .web-field textarea { min-height:70px; padding:8px 10px; font-size:10.5px; }
      .interest-title { margin-top:12px; }
      .interest-grid { gap:5px; }
      .interest-chip span { padding:6px 8px; font-size:7.5px; }
      .form-actions { margin-top:12px; }
      .form-submit { min-height:40px; padding:0 16px; font-size:9px; }
      .contact-channels { grid-template-columns:1fr; gap:7px; margin-top:14px; }
      .human-check { grid-template-columns:1fr; }
      .social-box { align-items:flex-start; flex-direction:column; min-height:auto; }
      .contact-channel { padding:10px; }
      .experience.institutional-mode .globe-layer { transform:translateX(-31vw) scale(.82); opacity:.32; }
    }

    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
      }
    }

    /* ============================================================
       PATCH DE NITIDEZ — FORMULÁRIO / INSTITUCIONAL
       Corrige o efeito de texto e inputs aparentemente borrados.
       Aplicado apenas no painel de orçamento (stage 08).
    ============================================================ */

    /* 1) Remover backdrop-filter dos cards: é a principal causa do
          "blur" em textos e campos em navegadores Chromium. */
    .institution-card,
    .institution-form {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    /* Compensa a remoção aumentando levemente a opacidade do fundo,
       preservando o visual vítreo sem sacrificar a nitidez. */
    .institution-card {
      background:
        linear-gradient(145deg, rgba(12,18,42,.96), rgba(6,9,22,.94));
      isolation: isolate;
    }

    /* 2) Inputs / selects / textarea: fundo OPACO + renderização nítida.
          Fundos semitransparentes aqui somam "névoa" ao texto. */
    .web-field input,
    .web-field select,
    .web-field textarea {
      background-color: #0a0e24;
      color: #eaf0ff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: geometricPrecision;
      filter: none;
      transform: none;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }

    .web-field input:focus,
    .web-field select:focus,
    .web-field textarea:focus {
      background-color: #0b1028;
    }

    /* 3) Controles nativos não herdam font-smoothing do :root em todos
          os motores — reforçamos explicitamente em todo o form. */
    .institution-form label,
    .institution-form small,
    .institution-form strong,
    .institution-form .interest-title,
    .institution-form .form-note,
    .institution-form .form-feedback,
    .institution-form .human-check__question,
    .institution-form .institution-form-head strong,
    .institution-form .institution-form-head small {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      filter: none;
    }

    /* 4) Painel ativo: garantir que nenhum filtro residual permaneça
          após as transições de entrada. */
    .institution-panel.active,
    .institutional-shell {
      filter: none;
    }

    /* 5) Placeholders sem véu sobre o fundo — leitura mais limpa. */
    .web-field input::placeholder,
    .web-field textarea::placeholder {
      color: #58618c;
      opacity: 1;
    }

    /* 6) Reforço para telas HiDPI: composição em pixel inteiro,
          evitando rasterização em meio-pixel. */
    .institution-form {
      transform: translateZ(0);
      will-change: auto;
    }

/* ============================================================
   RESPONSIVIDADE REAL — 14/10/2026
   Preserva os capítulos e o tablet demonstrativo, mas remove a
   obrigação de caber tudo simultaneamente em uma tela pequena.
   O scroll pertence ao capítulo ativo; os botões trocam de etapa.
   ============================================================ */

/* Medidas flexíveis: grades, texto e formulários podem encolher
   sem empurrar irmãos para além da borda da tela. */
.stage,
.story-copy,
.device-zone,
.laptop,
.institutional-shell,
.institution-panel,
.about-layout,
.form-layout,
.contact-layout,
.institution-form,
.app-main,
.app-body {
  min-width:0;
}

.chapter-copy h1,
.chapter-copy h2,
.institution-panel h2,
.institution-lead,
.contact-value {
  overflow-wrap:break-word;
}

/* dvh acompanha o espaço útil quando barras do navegador aparecem. */
.experience {
  height:100vh;
  height:100dvh;
}

/* Nunca deixe o conteúdo alto cortar os campos na parte superior.
   A regra também protege desktops com zoom ou janela baixa. */
.institution-panel {
  align-items:safe center;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,160,255,.34) transparent;
  padding-block:20px;
}
.institution-panel > * { min-width:0; }
.form-layout,
.about-layout,
.contact-layout { width:100%; }
.web-field input,
.web-field select,
.web-field textarea { max-width:100%; }

/* Disponível apenas em telas menores; no computador a navegação
   lateral e o rodapé originais continuam intactos. */
.stage-mobile-controls,
.mobile-menu-toggle,
.mobile-main-nav[hidden] { display:none; }
.mobile-main-nav[hidden] { display:none!important; }

/* Desktop de baixa altura: o tablet responde à altura da janela;
   os painéis longos são roláveis sem sobrepor cabeçalho/rodapé. */
@media (min-width:1101px) {
  .stage {
    grid-template-columns:minmax(0,.76fr) minmax(0,1.34fr);
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(140,160,255,.28) transparent;
    padding-block:12px;
    align-items:safe center;
  }
  .device-zone { min-height:0; }
  .screen { height:clamp(270px,calc(100dvh - 220px),475px); }
  .story-copy { min-height:min(440px,calc(100dvh - 175px)); }
}

/* Tablet, notebooks estreitos e celulares: texto e demonstração
   passam a ocupar linhas independentes e podem rolar naturalmente. */
@media (max-width:1100px) {
  .brand-caption,
  .top-status { display:none; }
  .top-nav-links { margin-left:auto; }
  .header-inner { gap:12px; }

  .stage {
    inset:72px 0 60px;
    width:min(820px,calc(100% - 36px));
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:clamp(18px,3.5vw,34px);
    padding:clamp(20px,3vh,32px) 0 30px;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(140,160,255,.24) transparent;
  }
  .story-copy {
    position:relative;
    flex:0 0 auto;
    width:100%;
    height:auto;
    min-height:0;
    align-self:stretch;
  }
  .chapter-copy,
  .chapter-copy.active {
    position:relative;
    inset:auto;
    width:100%;
    max-width:820px;
    height:auto;
    min-height:0;
    transform:none;
    filter:none;
    transition:none;
  }
  .chapter-copy { display:none; opacity:0; pointer-events:none; }
  .chapter-copy.active { display:block; opacity:1; pointer-events:auto; }
  .chapter-copy h1,
  .chapter-copy h2,
  .chapter-copy.intro h1 {
    max-width:740px;
    margin-bottom:16px;
    font-size:clamp(2.4rem,6.3vw,4.4rem);
    line-height:1.06;
    letter-spacing:-.055em;
  }
  .chapter-copy p {
    max-width:720px;
    font-size:clamp(.9rem,1.9vw,1rem);
    line-height:1.6;
    margin-bottom:16px;
  }
  .feature-strip { display:flex; gap:6px; }
  .feature-strip span { padding:6px 9px; font-size:9px; }
  .chapter-action { margin-top:12px; }
  .device-zone {
    flex:0 0 auto;
    width:100%;
    min-height:0;
    align-items:center;
    justify-content:center;
  }
  .laptop { width:min(760px,100%); }
  .screen {
    height:auto;
    min-height:0;
    aspect-ratio:16 / 9.5;
    max-height:none;
  }
  .globe-tooltip,
  .stage-coordinate,
  .data-link,
  .chapter-nav { display:none!important; }
  .stage-orbit { opacity:.28; }

  .institutional-shell {
    inset:72px 0 60px;
    width:min(820px,calc(100% - 36px));
    min-height:0;
  }
  .institution-panel {
    padding:22px 0 30px;
    display:block;
    scrollbar-width:thin;
  }
  .institution-panel:not(.active) { visibility:hidden; }
  .institution-panel.active { visibility:visible; }
  .about-layout,
  .form-layout,
  .contact-layout {
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:26px;
  }
  .institution-panel h2 { font-size:clamp(2.35rem,6.5vw,4.2rem); }
  .institution-lead { font-size:clamp(.9rem,1.7vw,1.04rem); }
  .institution-form { padding:clamp(16px,3vw,26px); margin-bottom:0; }
  .about-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-card,
  .about-card.wide { grid-column:auto; min-height:0; }
  .contact-channels { grid-template-columns:1fr; max-width:none; }
  .contact-channel { grid-template-columns:42px minmax(0,1fr) auto; }
  .contact-channel small { display:block; }

  .stage-footer { height:60px; }
  .stage-footer-inner {
    width:calc(100% - 36px);
    gap:12px;
  }
  .stage-footer-label,
  .stage-next,
  .stage-footer .wheel { display:none; }
  .stage-count { min-width:48px; }
  .stage-mobile-controls {
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
  }
  .stage-mobile-controls button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:39px;
    padding:7px 11px;
    border:1px solid rgba(140,160,255,.3);
    border-radius:9px;
    color:var(--text);
    background:rgba(91,158,255,.08);
    font-size:12px;
    font-weight:700;
    line-height:1.25;
  }
  .stage-mobile-controls button:disabled {
    opacity:.3;
    cursor:not-allowed;
  }
  .stage-mobile-controls button:focus-visible { outline-offset:2px; }
}

@media (max-width:620px) {
  .site-header { height:62px; }
  .header-inner { width:calc(100% - 24px); }
  .brand { font-size:21px; }
  .brand-logo { width:40px; height:40px; }
  .top-nav-links { display:none; }

  .mobile-menu-toggle {
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    min-width:84px;
    justify-content:center;
    border:1px solid rgba(140,160,255,.3);
    border-radius:9px;
    padding:8px 10px;
    color:var(--cyan-2);
    background:rgba(91,158,255,.08);
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
  }
  .menu-bars { display:grid; gap:3px; }
  .menu-bars i {
    width:15px;
    height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .mobile-main-nav:not([hidden]) {
    display:grid;
    position:absolute;
    top:100%;
    right:12px;
    z-index:82;
    width:min(300px,calc(100vw - 24px));
    max-height:calc(100dvh - 126px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:8px;
    border:1px solid rgba(140,160,255,.3);
    border-radius:0 0 14px 14px;
    background:#0a1026;
    box-shadow:0 22px 44px rgba(0,0,0,.58);
  }
  .mobile-main-nav a {
    display:block;
    padding:12px 14px;
    border-radius:7px;
    color:var(--text-2);
    font-size:13px;
    font-weight:700;
    line-height:1.3;
  }
  .mobile-main-nav a:hover,
  .mobile-main-nav a:focus-visible { background:#182148; color:white; }

  .stage {
    inset:62px 0 58px;
    width:calc(100% - 28px);
    padding:22px 0 28px;
    gap:22px;
  }
  .chapter-index { margin-bottom:14px; font-size:9px; letter-spacing:.12em; }
  .chapter-copy h1,
  .chapter-copy h2,
  .chapter-copy.intro h1 {
    font-size:clamp(1.85rem,8.3vw,3.35rem);
    line-height:1.08;
    margin-bottom:16px;
  }
  .chapter-copy p { font-size:.9rem; line-height:1.55; margin-bottom:14px; }
  .feature-strip { display:flex; }
  .feature-strip span { font-size:8px; padding:6px 8px; }
  .chapter-action { font-size:9px; margin-top:12px; line-height:1.4; }
  .screen { height:auto; min-height:0; aspect-ratio:16 / 10; }
  .screen-shell { padding:6px 6px 8px; }
  .laptop { max-width:100%; }
  .stage-orbit { top:66%; opacity:.23; }

  .institutional-shell { inset:62px 0 58px; width:calc(100% - 28px); }
  .institution-panel { padding:22px 0 30px; }
  .institution-kicker { font-size:9px; }
  .institution-panel h2 { font-size:clamp(1.95rem,8.8vw,3.35rem); line-height:1.08; }
  .institution-lead { font-size:.9rem; line-height:1.62; }
  .about-layout,
  .form-layout,
  .contact-layout { gap:18px; }
  .about-grid { grid-template-columns:minmax(0,1fr); }
  .about-card,
  .about-card.wide { min-height:0; }
  .web-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .web-field input,
  .web-field select { font-size:16px; min-height:44px; }
  .web-field textarea { font-size:16px; min-height:110px; }
  .human-check { grid-template-columns:minmax(0,1fr); }
  .human-check__refresh { width:100%; min-height:44px; }
  .form-actions { flex-wrap:wrap; align-items:flex-start; }
  .form-note { max-width:none; }
  .contact-channel { grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .contact-channel small { display:none; }

  .stage-footer { height:58px; }
  .stage-footer-inner { width:calc(100% - 28px); gap:8px; }
  .stage-count { min-width:46px; font-size:10px; }
  .stage-progress { min-width:10px; }
  .stage-mobile-controls { gap:6px; }
  .stage-mobile-controls button {
    min-height:39px;
    padding:8px;
    font-size:11px;
  }
}

/* Formulários em telefones estreitos: impedir duas colunas apertadas. */
@media (max-width:480px) {
  .web-form-grid { grid-template-columns:minmax(0,1fr); }
  .interest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .interest-chip span { min-height:37px; display:flex; align-items:center; }
  .institution-form-head { flex-wrap:wrap; }
  .institution-form { padding:14px; }
  .form-submit { width:100%; }
}

/* Em paisagem baixa, o texto não disputa a mesma altura com o tablet.
   Basta rolar o capítulo, preservando cabeçalho e controles. */
@media (max-width:1100px) and (max-height:520px) {
  .stage { gap:18px; padding-top:16px; }
  .chapter-copy h1,
  .chapter-copy h2,
  .chapter-copy.intro h1 { font-size:clamp(1.8rem,4.8vw,2.8rem); }
  .device-zone { min-height:0; }
  .laptop { width:min(600px,100%); }
  .institution-panel { padding-top:14px; }
}

/* Instruções compatíveis com o método de navegação ativo. */
.instruction-compact { display:none; }
@media (max-width:1100px) {
  .instruction-desktop { display:none; }
  .instruction-compact { display:inline-flex; }
}

/* Área segura do rodapé em dispositivos com barra de gestos. */
@media (max-width:620px) {
  .stage-footer {
    height:calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .stage { bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
  .institutional-shell { bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
}


/* ============================================================
   TABLET DEMO — INTERNAL RESPONSIVENESS
   Ajusta a interface exibida dentro do tablet para evitar
   sobreposição em telas menores, sem mudar a identidade visual.
============================================================ */
.screen { --demo-scale: 1; }

/* A área interna mantém sua composição e encolhe de forma
   proporcional quando a tela do tablet fica apertada. */
.app {
  width: calc(100% / var(--demo-scale));
  height: calc(100% / var(--demo-scale));
  transform-origin: top left;
  transform: translateY(14px) scale(calc(.99 * var(--demo-scale)));
}
.app.active {
  transform: scale(var(--demo-scale));
}

@media (max-width:1100px) {
  .app {
    grid-template-columns: 100px 1fr;
  }
  .app-sidebar {
    padding: 12px 8px;
  }
  .app-logo {
    margin: 1px 2px 12px;
    font-size: 11px;
  }
  .app-nav { gap: 4px; }
  .nav-item {
    gap: 6px;
    padding: 6px 7px;
    font-size: 7.6px;
  }
  .nav-item i { width: 4px; height: 4px; }

  .app-topbar {
    height: 38px;
    gap: 8px;
    padding: 0 10px;
  }
  .crumb { font-size: 7.4px; }
  .top-chip { display: none; }
  .avatar {
    width: 20px;
    height: 20px;
    font-size: 6.8px;
  }

  .app-body {
    padding: 10px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .app-title {
    gap: 8px;
    margin-bottom: 10px;
  }
  .app-title h3 { font-size: 13.5px; }
  .app-title p { font-size: 7.2px; }
  .primary-btn {
    padding: 7px 9px;
    font-size: 6.9px;
  }

  .kpis {
    gap: 7px;
    margin-bottom: 10px;
  }
  .kpi { padding: 9px; }
  .kpi strong {
    margin-top: 5px;
    font-size: 13.5px;
  }

  .transport-flow,
  .wms-grid,
  .tracking-grid,
  .docs-grid,
  .finance-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 10px;
  }
  .transport-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 10px;
  }
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .field.wide { grid-column: 1 / -1; }

  .workflow,
  .timeline,
  .event-list,
  .docs-list,
  .xml-preview,
  .chart,
  .warehouse {
    padding-left: 9px;
    padding-right: 9px;
  }
  .panel-head {
    height: 29px;
    padding: 0 9px;
    font-size: 7px;
  }
  .flow-step {
    grid-template-columns: 20px 1fr auto;
    gap: 8px;
    padding: 7px;
    font-size: 7px;
  }
  .flow-step .n {
    width: 18px;
    height: 18px;
    font-size: 6px;
  }
  .flow-step small,
  .flow-step .status,
  .timeline-item,
  .event,
  .pick-card span,
  .xml-preview .doc-title span,
  .chart-labels,
  .margin-card small {
    font-size: 6.2px;
  }

  .map-panel { min-height: 220px; }
  .xml-code {
    height: 180px;
    font-size: 6.6px;
    line-height: 1.6;
  }
  .chart {
    min-height: 0;
    padding: 9px;
  }
  .chart-bars {
    height: 120px;
    gap: 10px;
    padding: 10px 6px 14px;
  }
  .margin-card strong { font-size: 24px; }
}

@media (max-width:620px) {
  .screen {
    aspect-ratio: 16 / 11;
  }
  .app {
    grid-template-columns: 72px 1fr;
  }
  .app-sidebar {
    padding: 9px 6px;
  }
  .app-logo {
    margin-bottom: 10px;
    font-size: 10px;
  }
  .nav-item {
    gap: 5px;
    padding: 5px;
    font-size: 6.7px;
    border-radius: 5px;
  }

  .app-topbar {
    height: 34px;
    gap: 6px;
    padding: 0 8px;
  }
  .crumb { font-size: 6.8px; }
  .avatar {
    width: 18px;
    height: 18px;
    font-size: 6px;
  }

  .app-body {
    padding: 8px;
  }
  .app-title {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 8px;
  }
  .app-title h3 { font-size: 11.5px; }
  .app-title p { font-size: 6.6px; }
  .primary-btn {
    width: 100%;
    padding: 7px 8px;
    font-size: 6.3px;
  }

  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
  }
  .kpi { padding: 8px; }
  .kpi small,
  .field label,
  .timeline-item,
  .event,
  .pick-card span,
  .xml-preview .doc-title span,
  .xml-code,
  .chart-labels,
  .margin-card small,
  .doc-row,
  .doc-row small,
  .doc-row .badge,
  .map-label,
  .fake-input,
  .mini-tabs span {
    font-size: 6px;
  }
  .kpi strong {
    font-size: 11px;
    margin-top: 4px;
  }

  .mini-tabs {
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 8px;
  }
  .mini-tabs span { padding: 4px 6px; }

  .transport-flow,
  .wms-grid,
  .tracking-grid,
  .docs-grid,
  .finance-grid {
    gap: 8px;
  }
  .transport-side,
  .finance-grid > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .fake-input {
    min-height: 26px;
    padding: 0 7px;
  }

  .panel-head {
    height: 26px;
    gap: 6px;
    font-size: 6.4px;
  }
  .flow-step {
    grid-template-columns: 16px 1fr auto;
    gap: 6px;
    padding: 6px;
    font-size: 6.3px;
  }
  .flow-step .n {
    width: 16px;
    height: 16px;
    font-size: 5.8px;
  }

  .doc-row {
    grid-template-columns: 22px 1fr;
    gap: 7px;
    align-items: start;
  }
  .doc-row .icon {
    width: 22px;
    height: 22px;
    font-size: 5.8px;
  }
  .doc-row .badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .xml-preview { padding: 8px; }
  .xml-code {
    height: 135px;
    padding: 8px;
    line-height: 1.5;
  }

  .warehouse,
  .chart,
  .workflow,
  .timeline,
  .event-list,
  .docs-list,
  .xml-preview {
    padding-left: 8px;
    padding-right: 8px;
  }
  .rack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .bin {
    height: 24px;
  }

  .map-panel {
    min-height: 170px;
  }
  .map-panel::before { background-size: 20px 20px; }
  .road.r1 { width: 112px; left: 18px; top: 119px; }
  .road.r2 { width: 92px; left: 114px; top: 67px; }
  .road.r3 { width: 72px; left: 204px; top: 89px; }
  .map-node.a { left: 16px; top: 116px; }
  .map-node.b { left: 112px; top: 64px; }
  .map-node.c { left: 203px; top: 85px; }
  .truck-dot { left: 21px; top: 112px; width: 12px; height: 12px; font-size: 6px; }
  .map-label { padding: 3px 5px; }
  .map-label.la { left: 10px; top: 132px; }
  .map-label.lb { left: 102px; top: 48px; }
  .map-label.lc { left: 186px; top: 98px; }

  .chart-bars {
    height: 96px;
    gap: 8px;
    padding: 8px 2px 10px;
  }
  .bar { max-width: 24px; }
  .margin-card {
    min-height: 96px;
    padding: 8px;
  }
  .margin-card strong { font-size: 20px; }
}


/* ============================================================
   V3 — NAVEGAÇÃO POR GESTOS EM TELAS COMPACTAS
   Versão desktop preservada. Instruções substituem os botões.
============================================================ */
.stage-swipe-hint { display:none; }

@media (max-width:1100px) {
  .stage-swipe-hint {
    display:inline-flex;
    align-items:center;
    margin-left:auto;
    flex:0 0 auto;
    color:#b8c6e6;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    letter-spacing:.015em;
  }
  .stage-mobile-controls { display:none!important; }
  .stage-progress { min-width:24px; }
}

@media (max-width:420px) {
  .stage-swipe-hint { font-size:9.8px; }
  .stage-footer-inner { gap:9px; }
}


/* ============================================================
   MOBILE HARMONIZATION — large phones / premium portrait
   Foco em leitura, conversão e melhor uso da largura útil.
============================================================ */
@media (max-width:900px) {
  .site-header { height:62px; }
  .header-inner,
  .stage-footer-inner { width:calc(100% - 18px); }
  .top-nav-links { display:none; }
  .mobile-menu-toggle {
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    min-width:84px;
    justify-content:center;
    border:1px solid rgba(140,160,255,.3);
    border-radius:9px;
    padding:8px 10px;
    color:var(--cyan-2);
    background:rgba(91,158,255,.08);
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
  }
  .menu-bars { display:grid; gap:3px; }
  .menu-bars i { width:15px; height:2px; border-radius:2px; background:currentColor; }
  .mobile-main-nav:not([hidden]) {
    display:grid;
    position:absolute;
    top:100%;
    right:9px;
    z-index:82;
    width:min(320px,calc(100vw - 18px));
    max-height:calc(100dvh - 126px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:8px;
    border:1px solid rgba(140,160,255,.3);
    border-radius:0 0 14px 14px;
    background:#0a1026;
    box-shadow:0 22px 44px rgba(0,0,0,.58);
  }
  .mobile-main-nav a {
    display:block;
    padding:12px 14px;
    border-radius:7px;
    color:var(--text-2);
    font-size:13px;
    font-weight:700;
    line-height:1.3;
  }
  .mobile-main-nav a:hover,
  .mobile-main-nav a:focus-visible { background:#182148; color:white; }

  .stage {
    inset:62px 0 calc(52px + env(safe-area-inset-bottom, 0px));
    width:calc(100% - 18px);
    padding:16px 0 20px;
    gap:16px;
  }
  .chapter-copy h1,
  .chapter-copy h2,
  .chapter-copy.intro h1 {
    font-size:clamp(1.95rem,8vw,3rem);
    line-height:1.06;
    letter-spacing:-.05em;
    margin-bottom:14px;
  }
  .chapter-copy p {
    font-size:.94rem;
    line-height:1.58;
    margin-bottom:14px;
  }
  .feature-strip { gap:5px; flex-wrap:wrap; }
  .feature-strip span { font-size:8px; padding:6px 8px; }
  .chapter-action {
    font-size:9px;
    line-height:1.45;
    margin-top:10px;
  }
  .device-zone { justify-content:center; }
  .laptop { width:100%; }
  .screen-shell { padding:6px 6px 8px; }
  .screen { aspect-ratio:16 / 10.4; }

  .institutional-shell {
    inset:62px 0 calc(52px + env(safe-area-inset-bottom, 0px));
    width:calc(100% - 18px);
  }
  .institution-panel {
    padding:16px 0 22px;
    align-content:start;
  }
  .about-layout,
  .form-layout,
  .contact-layout {
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .institution-panel h2 {
    font-size:clamp(2rem,8vw,3.05rem);
    line-height:1.05;
  }
  .institution-lead {
    font-size:.94rem;
    line-height:1.58;
    margin-top:12px;
  }
  .institution-kicker { font-size:9px; }

  /* Etapa 08: o formulário vira a estrela da página em mobile. */
  .institution-panel[data-institution-stage="8"] .form-layout {
    gap:14px;
  }
  .institution-panel[data-institution-stage="8"] h2 {
    font-size:clamp(2rem,8.4vw,3rem);
    line-height:1.03;
    letter-spacing:-.045em;
    margin-bottom:0;
  }
  .institution-panel[data-institution-stage="8"] .institution-lead {
    font-size:.95rem;
    line-height:1.56;
    margin-top:12px;
  }
  .institution-panel[data-institution-stage="8"] .aside-note {
    margin-top:12px;
    padding:12px 13px;
    border-radius:12px;
    font-size:.82rem;
    line-height:1.48;
  }
  .institution-panel[data-institution-stage="8"] .institution-form {
    width:100%;
    max-width:none;
    margin:0;
    padding:16px;
    border-radius:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .institution-panel[data-institution-stage="8"] .institution-form-head {
    display:block;
    margin-bottom:14px;
  }
  .institution-panel[data-institution-stage="8"] .institution-form-head strong {
    display:block;
    font-size:1rem;
    margin-bottom:6px;
  }
  .institution-panel[data-institution-stage="8"] .institution-form-head small {
    display:block;
    font-size:.78rem;
    line-height:1.42;
    color:#8b96bb;
  }
  .institution-panel[data-institution-stage="8"] .web-form-grid {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .institution-panel[data-institution-stage="8"] .web-field label {
    font-size:10px;
    margin-bottom:6px;
  }
  .institution-panel[data-institution-stage="8"] .web-field input,
  .institution-panel[data-institution-stage="8"] .web-field select {
    min-height:48px;
    height:48px;
    padding:10px 12px;
    font-size:16px;
    border-radius:11px;
  }
  .institution-panel[data-institution-stage="8"] .web-field textarea {
    min-height:126px;
    padding:12px;
    font-size:16px;
    border-radius:11px;
  }
  .institution-panel[data-institution-stage="8"] .interest-title {
    margin:16px 0 10px;
    font-size:10px;
  }
  .institution-panel[data-institution-stage="8"] .interest-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .institution-panel[data-institution-stage="8"] .interest-chip span {
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    text-align:center;
    font-size:10px;
    line-height:1.25;
  }
  .institution-panel[data-institution-stage="8"] .human-check {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    margin-top:14px;
  }
  .institution-panel[data-institution-stage="8"] .human-check__question {
    min-height:48px;
    padding:0 12px;
    font-size:15px;
    border-radius:11px;
  }
  .institution-panel[data-institution-stage="8"] .human-check__refresh {
    width:100%;
    min-height:46px;
    border-radius:11px;
    font-size:12px;
  }
  .institution-panel[data-institution-stage="8"] .form-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    align-items:stretch;
    margin-top:14px;
  }
  .institution-panel[data-institution-stage="8"] .form-submit {
    width:100%;
    min-height:50px;
    font-size:12px;
    border-radius:999px;
  }
  .institution-panel[data-institution-stage="8"] .form-note {
    max-width:none;
    font-size:.78rem;
    line-height:1.45;
  }
  .institution-panel[data-institution-stage="8"] .form-feedback {
    font-size:.83rem;
    line-height:1.45;
    margin-top:10px;
  }

  .stage-footer {
    height:calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .stage-count { min-width:42px; font-size:10px; }
}

@media (max-width:520px) {
  .header-inner,
  .stage-footer-inner,
  .stage,
  .institutional-shell { width:calc(100% - 14px); }

  .institution-panel[data-institution-stage="8"] .interest-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .institution-panel[data-institution-stage="8"] .interest-chip span {
    justify-content:flex-start;
    padding-inline:12px;
  }
  .institution-panel[data-institution-stage="8"] .institution-form {
    padding:14px;
  }
}

/* SEO: acesso a URLs reais no rodapé da experiência sem alterar os capítulos. */
.seo-home-link { position:static; flex:none; margin-right:12px; font-size:10px; letter-spacing:.02em; color:var(--cyan-2); text-decoration:underline; text-underline-offset:3px; }
.seo-home-link:hover { color:#fff; }
@media (max-width:1100px) { .seo-home-link { display:none; } }