/* VigIA Detect — page shell CSS shared by every page (home, rastreamento,
   legal). Lives in one file so the two pages cannot drift apart; the mobile
   type and layout overrides at the bottom are the load-bearing part. */
html{scroll-behavior:smooth}
  html,body{max-width:100%;overflow-x:hidden}
  body{margin:0;background:var(--navy-900);font-family:var(--font-body);color:var(--white);-webkit-font-smoothing:antialiased}
  #root,#root section,#root header,#root footer{max-width:100vw;overflow-x:clip}
  img,canvas,svg{max-width:100%}
  a{color:var(--blue-300);text-decoration:none}a:hover{color:var(--blue-cyan)}
  ::selection{background:rgba(0,128,255,.35)}
  :root{--container:1200px}
  @keyframes vgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @keyframes vgPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
  @keyframes vgScan{0%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:96%;opacity:0}}
  @keyframes vgSweep{0%{transform:translateY(-115%)}100%{transform:translateY(300%)}}
  @keyframes vgDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6%,-4%,0) scale(1.15)}}

  .pre{max-width:var(--container);margin:0 auto;padding:78px 24px 40px}
  .pre nav{display:flex;flex-wrap:wrap;gap:24px;font-size:.875rem;margin-bottom:52px}
  .pre section{padding:6px 0 10px;border-top:1px solid rgba(255,255,255,.08)}
  .pre section:first-of-type{border-top:0}
  .pre h1{font-family:var(--font-display);font-size:clamp(2.3rem,4.6vw,3.8rem);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:8px 0 18px}
  .pre h2{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:52px 0 12px}
  .pre h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin:26px 0 4px}
  .pre p,.pre li{color:var(--text-body);font-size:1.02rem;line-height:1.6;margin:8px 0;max-width:660px;text-wrap:pretty}
  .pre ul{padding-left:20px}
  .pre a{margin-right:20px;font-weight:600}
  .pre img{display:block;width:100%;max-width:520px;height:auto;border-radius:18px;margin:22px 0}
  .pre footer{margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.875rem;color:var(--gray-500)}
  @media (prefers-reduced-motion: reduce){*{animation:none!important}html{scroll-behavior:auto}}
  @media (max-width:1040px){#root section [style*="grid-template-columns"]{grid-template-columns:1fr!important}#root header [data-desktop-nav],#root header [data-desktop-cta]{display:none!important}#root header [data-mobile-toggle]{display:inline-flex!important}#root section [style*="order: 2"],#root section [style*="order: 1"]{order:0!important}}
  @media (min-width:1041px){#root header [data-mobile-drawer]{display:none!important}}
  @media (max-width:1040px) and (min-width:769px){#root section [style*="repeat(3"],#root section [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
  @media (max-width:1040px){
    #root section [style*="position: absolute"][style*="right: -"],#root section [style*="position: absolute"][style*="left: -"]{right:6px!important;left:auto!important}
    #root [style*="white-space: nowrap"]:not([data-nowrap]):not(a):not(button){white-space:normal!important}
    #root [data-nowrap]{white-space:nowrap!important}
    #root section{padding-left:22px!important;padding-right:22px!important}
    /* More air between stacked cards, and a touch more body size, so the page
       reads like a phone layout instead of a squeezed desktop one. */
    #root section [style*="grid-template-columns"]{gap:20px!important}
    /* Type scale matched to the reference build that reads well on a phone.
       Its numbers, measured: hero h1 41.6px, section h2 32px, eyebrow 11px on
       one line, pill buttons 48px tall with a 15px label in a wrapping ROW.
       Earlier revisions here shrank the headline to force the whole hero above
       the fold — the reference does the opposite (120px hero top band, buttons
       below the fold) and still reads better, because presence beats fitting. */
    #root h1{font-size:2.6rem!important;line-height:1.04!important;letter-spacing:-.03em!important;text-wrap:balance!important}
    #root h2{font-size:2rem!important;line-height:1.1!important}
    /* Two h3 scales exist: card sub-titles (--fs-h4, 20px) and the section-scale
       detection headings (clamp, 25.6px+). A blanket rule flattens both and would
       SHRINK the detection headings, so each gets its own mobile size. */
    #root section h3[style*="fs-h4"]{font-size:1.3rem!important;line-height:1.25!important}
    #root section h3[style*="clamp"]{font-size:1.7rem!important;line-height:1.18!important}
    /* :not(fs-xs) spares the deliberately-small fine print (LGPD note, source
       citation) from being blown up to body size. */
    #root section p:not([style*="fs-xs"]){font-size:1.06rem!important;line-height:1.65!important}
    #root section li{font-size:1.06rem!important;line-height:1.6!important}
    /* Buttons stay a wrapping row, never a forced column: a stacked pair of
       label-width pills reads as a list, a wrapping row reads as a choice. */
    #root [data-hero-cta]{flex-wrap:wrap!important;gap:14px!important;margin-top:32px!important}
    #root [data-hero-cta] > a{width:auto!important;min-height:48px!important;padding:0 26px!important;font-size:15px!important}
    /* The eyebrow was 14px and wrapped to two lines, spending 53px of the first
       screen on a label. At 11px it sits on one line. */
    #root section#top span[style*="tracking-caps"]{font-size:11px!important;line-height:1.5!important}
  }
  /* ---- Phone (<=768px) ---- */
  @media (max-width:768px){
    /* Vertical rhythm from the reference: 64px section bands, generous hero. */
    #root section{padding-top:64px!important;padding-bottom:64px!important}
    #root section#top{padding-top:40px!important;padding-bottom:64px!important}
    #root section > div > div[style*="grid-template-columns"]{gap:36px!important}
    /* The home hero carries min-height 92vh and its padding on an inner grid
       div — a desktop hero shape. Normalise it to the same band as the other. */
    html[data-page="home"] #root section#top{min-height:0!important;padding-top:0!important}
    html[data-page="home"] #root section#top > div[style*="grid-template-columns"]{padding-top:40px!important;padding-bottom:64px!important}
    #root [data-hero-chips]{margin-top:28px!important}
    #root [data-hero-panel]{margin-top:34px!important}
    /* Header: real touch area on the menu, mark large enough to read. */
    #root header{padding-top:0!important;padding-bottom:0!important}
    #root header > div{padding-top:10px!important;padding-bottom:10px!important}
    #root header picture img{height:48px!important}
    #root header [data-mobile-toggle]{width:48px!important;height:48px!important;background:rgba(255,255,255,.07)!important}
  }
  @media (max-width:380px){
    #root h2{font-size:1.85rem!important}
    #root header picture img{height:44px!important}
    #root [data-hero-cta] > a{padding:0 20px!important}
  }


  /* Leaflet inside the hero panel: the default attribution is a white bar that
     breaks the dark panel, so it is restyled rather than removed (OSM/CARTO
     tiles require the credit to stay visible). */
  .leaflet-container{background:#0c1524!important;font-family:var(--font-body)}
  .leaflet-control-attribution{background:rgba(6,10,20,.72)!important;color:var(--gray-500)!important;font-size:9px!important;padding:1px 6px!important}
  .leaflet-control-attribution a{color:var(--gray-400)!important}