:root{
    --bg:#F2F6F3; --surface:#FFFFFF; --surface-alt:#EAF0EB;
    --ink:#0E1712; --muted:#5B6E63; --line:#DCE5DD; --line-strong:#C3D0C4;
    --accent:#0E8F5B; --accent-ink:#0B6E46; --accent-soft:#E1F5E9;
    --amber:#DD7A22; --amber-soft:#FBEADB;
    --coral:#C9432A; --coral-soft:#FBE7E1;
    --blue:#2563A6; --blue-soft:#E4EEF8;
    --shadow:0 20px 46px rgba(14,23,18,.10); --shadow-soft:0 8px 22px rgba(14,23,18,.07);
    --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --font-display:'Space Grotesk',ui-sans-serif,sans-serif;
    --font-body:'Inter',ui-sans-serif,-apple-system,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
    --safe-b:env(safe-area-inset-bottom,0px);
  }
  html[data-theme="dark"]{
    --bg:#081310; --surface:#0F1E18; --surface-alt:#13251D;
    --ink:#EAF6EF; --muted:#87A599; --line:#1D362A; --line-strong:#2A4A3A;
    --accent:#39E39B; --accent-ink:#39E39B; --accent-soft:#123528;
    --amber:#FFB25E; --amber-soft:#2B2013;
    --coral:#FF8B70; --coral-soft:#33170F;
    --blue:#7EB6F2; --blue-soft:#112438;
    --shadow:0 24px 60px rgba(0,0,0,.4); --shadow-soft:0 10px 26px rgba(0,0,0,.3);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; min-width:320px; background:var(--bg); color:var(--ink);
    font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }
  body.no-scroll{overflow:hidden;}
  button,input,select{font:inherit; color:inherit;}
  button,select,.tap{cursor:pointer;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display); margin:0;}
  :focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px;}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .skip-link{
    position:fixed; top:-100px; left:12px; z-index:999; padding:10px 16px; border-radius:10px;
    background:var(--ink); color:var(--bg); font-weight:700; font-size:13px; text-decoration:none;
    transition:top .2s var(--ease);
  }
  .skip-link:focus{top:12px;}
  .icon{width:18px; height:18px; display:block; flex:0 0 auto;}
  .shell{width:min(calc(100% - 28px), 1360px); margin-inline:auto;}
  .mono{font-family:var(--font-mono); letter-spacing:.06em;}
  .eyebrow{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

  /* ---------- header ---------- */
  header.topbar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
  .topbar-inner{display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 0;}
  .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto;}
  .brand-mark{width:34px; height:34px; border-radius:10px; background:var(--ink); display:grid; place-items:center; position:relative; overflow:hidden;}
  .brand-mark::before{content:""; width:16px; height:16px; border-radius:50%; border:2px solid var(--accent); box-shadow:inset 0 0 0 3px var(--ink);}
  .brand-mark::after{content:""; position:absolute; inset:0; background:conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--accent) 65%, transparent) 100%); animation:spin 3.2s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .brand strong{font-family:var(--font-display); font-size:16px; letter-spacing:.02em;}
  .brand small{display:none;}
  .main-nav{display:none;}
  .top-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
  .icon-btn{width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--surface); display:grid; place-items:center;}
  .lang-switch{display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt);}
  .lang-switch button{min-width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:10px; font-weight:700; font-family:var(--font-mono);}
  .lang-switch button.active{background:var(--surface); color:var(--ink);}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px;
    border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink);
    font-size:13px; font-weight:700; text-decoration:none; transition:transform .15s var(--ease), box-shadow .15s, background .15s, border-color .15s;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--accent); border-color:var(--accent); color:#04140C;}
  html[data-theme="dark"] .btn-primary{color:#04140C;}
  .btn-primary:hover{box-shadow:var(--shadow-soft);}
  .btn-ghost{background:transparent;}
  .btn-block{width:100%;}
  .btn-sm{min-height:38px; padding:0 12px; font-size:12px;}
  .desktop-only{display:none;}

  /* ---------- search console (sempre visível, topo) ---------- */
  .search-console{position:sticky; top:60px; z-index:45; padding:10px 0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px);}
  .search-console-inner{display:flex; gap:8px;}
  .search-field{position:relative; flex:1; min-width:0;}
  .search-field .icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--accent); pointer-events:none;}
  input[type="search"]{
    width:100%; min-height:48px; padding:0 14px 0 42px; border:1px solid var(--line); border-radius:12px;
    background:var(--surface); color:var(--ink); font-size:14px; font-weight:500;
  }
  input[type="search"]::placeholder{color:var(--muted);}
  input[type="search"]:focus{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); outline:none;}
  .filters-trigger{position:relative; flex:0 0 auto; min-width:48px; padding:0 14px;}
  .filters-badge[hidden]{display:none;}
  .filters-badge{
    position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding-inline:3px; display:grid; place-items:center;
    border-radius:999px; background:var(--amber); color:#2A1300; font-size:9px; font-weight:800; font-family:var(--font-mono);
  }
  .filters-badge[hidden]{display:none;}

  /* ---------- hero radar ---------- */
  main{padding-bottom:96px;}
  .hero{
    margin-top:14px; padding:26px 18px 22px; border-radius:var(--radius-lg);
    background:linear-gradient(165deg, #071108 0%, #0C1E15 62%, #0F2A1C 100%);
    color:#EFFBF3; position:relative; overflow:hidden;
  }
  html[data-theme="dark"] .hero{background:linear-gradient(165deg,#050B08,#0A1712,#0D2118);}
  .hero-grid{display:flex; flex-direction:column; gap:22px; align-items:center;}
  .hero-copy{text-align:center;}
  .hero-copy .eyebrow{color:#8FE8B8;}
  .hero-copy h1{font-size:clamp(28px,7vw,40px); line-height:1.04; letter-spacing:-.01em; margin:10px 0 0; font-weight:700;}
  .hero-copy p{margin:12px auto 0; max-width:44ch; color:rgba(239,251,243,.72); font-size:14px; line-height:1.6;}

  .radar-scope{position:relative; width:min(78vw,300px); aspect-ratio:1; margin:4px auto 0; flex:0 0 auto;}
  .radar-ring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(143,232,184,.22);}
  .radar-ring.r2{inset:16.5%;}
  .radar-ring.r3{inset:33%;}
  .radar-cross{position:absolute; inset:0;}
  .radar-cross::before,.radar-cross::after{content:""; position:absolute; background:rgba(143,232,184,.14);}
  .radar-cross::before{left:0; right:0; top:50%; height:1px;}
  .radar-cross::after{top:0; bottom:0; left:50%; width:1px;}
  .radar-sweep{
    position:absolute; inset:0; border-radius:50%; overflow:hidden;
    background:conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 75%, transparent) 0deg, transparent 46deg 360deg);
    animation:radarspin 4.5s linear infinite; opacity:.85;
  }
  @keyframes radarspin{to{transform:rotate(360deg);}}
  .radar-center{position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#8FE8B8; box-shadow:0 0 0 5px rgba(143,232,184,.18);}
  .radar-count{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none;
  }
  .radar-count strong{display:block; font-family:var(--font-display); font-size:clamp(30px,9vw,40px); line-height:1; color:#fff;}
  .radar-count span{display:block; margin-top:4px; font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:rgba(239,251,243,.62);}
  .radar-blip{
    position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border:0; background:transparent; padding:0;
    display:grid; place-items:center; cursor:pointer;
  }
  .radar-blip-dot{width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px color-mix(in srgb, var(--amber) 30%, transparent);}
  .radar-blip-label{
    position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); white-space:nowrap;
    font-family:var(--font-mono); font-size:8px; letter-spacing:.05em; color:rgba(239,251,243,.72);
  }
  .radar-blip:hover .radar-blip-dot, .radar-blip:focus-visible .radar-blip-dot{background:#fff; box-shadow:0 0 0 6px color-mix(in srgb, var(--amber) 45%, transparent);}

  .hero-readout{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:20px; border-radius:12px; overflow:hidden; background:rgba(143,232,184,.16);}
  .hero-readout div{background:rgba(5,15,10,.55); padding:12px 8px; text-align:center;}
  .hero-readout strong{display:block; font-family:var(--font-display); font-size:18px; color:#fff;}
  .hero-readout span{display:block; margin-top:3px; font-family:var(--font-mono); font-size:8px; letter-spacing:.07em; text-transform:uppercase; color:rgba(239,251,243,.6);}

  /* ---------- how it works ---------- */
  .how-strip{margin-top:16px; display:grid; grid-template-columns:1fr; gap:8px;}
  .how-step{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface);}
  .how-step b{font-family:var(--font-mono); font-size:11px; color:var(--accent); flex:0 0 auto; width:20px;}
  .how-step span{font-size:12.5px; color:var(--muted);}

  /* ---------- location banner ---------- */
  .location-banner{margin-top:14px; display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));}
  .location-icon{width:32px; height:32px; flex:0 0 auto; border-radius:9px; background:var(--accent); color:#04140C; display:grid; place-items:center;}
  .location-copy{min-width:0; flex:1;}
  .location-copy strong{display:block; font-size:12.5px;}
  .location-copy span{display:block; margin-top:2px; color:var(--muted); font-size:11px;}
  .location-banner .btn{margin-left:auto; flex:0 0 auto;}

  /* ---------- chip scroller (tipo) ---------- */
  .chip-scroller{margin-top:16px; display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
  .chip-scroller::-webkit-scrollbar{display:none;}
  .chip{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px;
    border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted);
    font-size:12px; font-weight:700; white-space:nowrap;
  }
  .chip span.count{font-family:var(--font-mono); font-size:10px; opacity:.7;}
  .chip.active{background:var(--ink); border-color:var(--ink); color:var(--bg);}
  html[data-theme="dark"] .chip.active{background:var(--accent); border-color:var(--accent); color:#04140C;}

  /* ---------- results header ---------- */
  .results-header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 2px 12px;}
  .results-header h2{font-size:19px;}
  .results-header p{margin:4px 0 0; color:var(--muted); font-size:11.5px;}
  .results-sort{display:flex; align-items:center; gap:8px;}
  .results-sort select{min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:11.5px; font-weight:600;}

  /* ---------- cards ---------- */
  .results-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start;}
  .cards-grid{display:grid; grid-template-columns:1fr; gap:12px;}
  .market-card{
    position:relative; display:flex; flex-direction:column; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md);
    background:var(--surface); box-shadow:var(--shadow-soft); animation:cardIn .4s both; text-align:left;
  }
  @keyframes cardIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .market-card.selected{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}
  .card-top{display:flex; align-items:flex-start; gap:11px;}
  .avatar{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:linear-gradient(150deg, var(--blue), var(--accent)); color:#fff; font-family:var(--font-mono); font-size:12px; font-weight:700;}
  .avatar.need{background:linear-gradient(150deg, var(--coral), var(--amber));}
  .avatar.organization{background:linear-gradient(150deg,#3E6FA6,#5A8FC2);}
  .card-heading{min-width:0; flex:1;}
  .card-kind{display:block; margin-bottom:3px; font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--blue);}
  .card-kind.need{color:var(--coral);}
  .card-kind.organization{color:var(--blue);}
  .card-heading h3{font-size:16.5px; font-weight:600; letter-spacing:-.01em;}
  .card-heading p{margin:3px 0 0; color:var(--muted); font-size:11.5px;}
  .save-button{width:40px; height:40px; margin-left:auto; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); color:var(--muted);}
  .save-button.saved{background:var(--amber-soft); border-color:color-mix(in srgb, var(--amber) 40%, var(--line)); color:var(--amber);}
  .save-button.saved .icon{fill:currentColor;}
  .meta-row{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:13px; color:var(--muted); font-size:10.5px; font-family:var(--font-mono);}
  .meta-row span{display:inline-flex; align-items:center; gap:4px;}
  .meta-row .icon{width:13px; height:13px;}
  .local-tag{color:var(--accent) !important;}
  .card-description{margin:12px 0 0; color:var(--ink); opacity:.78; font-size:12.5px; line-height:1.58;}
  .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:13px;}
  .tag{padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:var(--surface-alt); color:var(--muted); font-size:9.5px; font-weight:600;}
  .trust-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
  .trust-pill{padding:5px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--font-mono); font-size:9px; font-weight:700;}
  html[data-theme="dark"] .trust-pill{color:var(--accent);}
  .trust-pill.neutral{background:var(--blue-soft); color:var(--blue);}
  .card-footer{margin-top:13px; padding-top:11px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .card-footer small{color:var(--muted); font-size:9.5px; text-transform:capitalize; font-family:var(--font-mono);}
  .card-link{border:0; background:transparent; color:var(--blue); font-size:11px; font-weight:700;}
  .card-link.need-link{color:var(--coral);}
  .empty-state{grid-column:1/-1; min-height:240px; display:grid; place-items:center; padding:30px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--surface-alt); text-align:center;}
  .empty-state h3{font-size:19px;}
  .empty-state p{max-width:38ch; margin:8px auto 16px; color:var(--muted); font-size:12.5px;}

  .load-more{display:flex; justify-content:center; margin-top:20px;}

  /* ---------- detail panel (bottom-sheet mobile / side desktop) ---------- */
  .detail-panel{
    position:fixed; inset:auto 0 0; z-index:85; display:none; max-height:88dvh; overflow:auto;
    padding:20px 18px calc(20px + var(--safe-b)); border-radius:22px 22px 0 0; background:var(--surface);
    box-shadow:var(--shadow); transform:translateY(105%); transition:transform .32s var(--ease);
    pointer-events:none;
  }
  .results-layout.detail-open .detail-panel{display:block; transform:translateY(0); pointer-events:auto;}
  .detail-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .detail-toolbar span{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .close-button{width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); color:var(--ink); font-size:16px;}
  .detail-profile{display:flex; align-items:center; gap:12px; margin-top:16px;}
  .detail-profile .avatar{width:52px; height:52px; border-radius:14px;}
  .detail-profile h3{font-size:20px;}
  .detail-profile p{margin:3px 0 0; color:var(--muted); font-size:11.5px;}
  .relevance-box{margin-top:16px; padding:15px; border-radius:14px; background:var(--ink); color:var(--bg);}
  html[data-theme="dark"] .relevance-box{background:#04120B;}
  .relevance-box small{display:block; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 55%, transparent);}
  .relevance-box strong{display:block; margin-top:6px; font-family:var(--font-display); font-size:20px; color:var(--amber);}
  .relevance-box p{margin:8px 0 0; font-size:11px; line-height:1.55; color:color-mix(in srgb, var(--bg) 72%, transparent);}
  .reason-list{display:grid; gap:6px; margin-top:11px;}
  .reason-list span{display:flex; align-items:center; gap:7px; font-size:10px; color:color-mix(in srgb, var(--bg) 78%, transparent);}
  .reason-list i{width:6px; height:6px; border-radius:50%; background:var(--accent);}
  .detail-description{margin:16px 0 0; color:var(--muted); font-size:12.5px; line-height:1.62;}
  .detail-facts{margin-top:14px; border-top:1px solid var(--line);}
  .detail-fact{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:10.5px;}
  .detail-fact span{color:var(--muted); font-family:var(--font-mono);}
  .detail-fact strong{text-align:right;}
  .detail-actions{display:grid; gap:8px; margin-top:16px;}
  .detail-actions .btn svg{width:16px; height:16px;}
  .btn.is-saved{border-color:color-mix(in srgb, var(--amber) 50%, var(--line)); background:var(--amber-soft); color:var(--amber);}
  .btn.is-saved svg{fill:currentColor;}

  /* ---------- overlay / drawer / modal / filter-sheet ---------- */
  .overlay{position:fixed; inset:0; z-index:80; display:none; background:rgba(4,10,7,.55); backdrop-filter:blur(4px);}
  .overlay.open{display:block; animation:fadeIn .2s both;}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  .drawer{
    position:fixed; top:0; right:0; z-index:90; width:min(420px,100%); height:100dvh; padding:22px;
    overflow:auto; background:var(--surface); box-shadow:-24px 0 60px rgba(0,0,0,.2);
    transform:translateX(103%); transition:transform .3s var(--ease);
  }
  .drawer.open{transform:translateX(0);}
  .drawer-header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line);}
  .drawer-header h2{font-size:22px;}
  .drawer-header p{margin:4px 0 0; color:var(--muted); font-size:11px;}
  .saved-list{display:grid; gap:9px; margin-top:16px;}
  .saved-item{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-alt);}
  .saved-item .avatar{width:40px; height:40px; border-radius:10px;}
  .saved-item h3{margin:0; font-size:12px;}
  .saved-item p{margin:3px 0 0; color:var(--muted); font-size:9.5px;}
  .saved-empty{padding:50px 16px; text-align:center; color:var(--muted);}
  .saved-empty svg{width:38px; height:38px; margin:0 auto 12px;}
  .drawer-note{margin-top:16px; padding:13px; border-radius:12px; background:var(--blue-soft); color:var(--blue); font-size:10px; line-height:1.55;}

  .modal{
    position:fixed; left:50%; top:50%; z-index:95; width:min(480px,calc(100% - 28px)); padding:22px;
    border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 26px 80px rgba(0,0,0,.28);
    opacity:0; visibility:hidden; transform:translate(-50%,-46%) scale(.98); transition:opacity .2s, visibility .2s, transform .2s var(--ease);
  }
  .modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}
  .modal-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
  .modal h2{font-size:24px;}
  .modal .lead{margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.55;}
  .modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px;}
  .modal-actions{display:flex; flex-direction:column-reverse; gap:8px; margin-top:20px;}
  .modal-actions .btn{width:100%;}
  .google-button{width:100%; min-height:48px; margin-top:20px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:700;}
  .google-dot{width:19px; height:19px; display:inline-grid; place-items:center; margin-right:7px; border-radius:50%; background:conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); color:#fff; font-size:9px;}
  .auth-divider{display:flex; align-items:center; gap:10px; margin:15px 0; color:var(--muted); font-size:9px; font-family:var(--font-mono);}
  .auth-divider::before,.auth-divider::after{content:""; height:1px; flex:1; background:var(--line);}
  .auth-copy{padding:13px; border-radius:12px; background:var(--surface-alt); color:var(--muted); font-size:10.5px; line-height:1.55;}

  /* filter sheet: off-canvas no mobile, inline no desktop */
  .filter-sheet{
    position:fixed; inset:0 0 0 auto; z-index:92; width:min(400px,100%); height:100dvh; overflow:auto;
    padding:20px 20px calc(20px + var(--safe-b)); background:var(--surface); box-shadow:-24px 0 60px rgba(0,0,0,.2);
    transform:translateX(103%); transition:transform .3s var(--ease);
  }
  .filter-sheet.open{transform:translateX(0);}
  .filter-sheet-header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line);}
  .filter-sheet-header h2{font-size:20px;}
  .field{margin-top:16px;}
  .field label{display:block; margin:0 0 6px 1px; font-family:var(--font-mono); color:var(--muted); font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;}
  select{width:100%; min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:600;}
  select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);}
  .toggle-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
  .toggle{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:12.5px; font-weight:600;}
  .toggle input{position:absolute; opacity:0; pointer-events:none;}
  .toggle-track{width:38px; height:22px; padding:3px; border-radius:999px; background:var(--line-strong); transition:background .2s;}
  .toggle-track::after{content:""; display:block; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .2s var(--ease);}
  .toggle input:checked + .toggle-track{background:var(--accent);}
  .toggle input:checked + .toggle-track::after{transform:translateX(16px);}
  .filter-sheet-actions{position:sticky; bottom:0; display:grid; gap:8px; margin-top:24px; padding-top:16px; background:var(--surface); border-top:1px solid var(--line);}
  .clear-link{border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:700; padding:6px 0;}

  .toast{
    position:fixed; left:50%; bottom:calc(78px + var(--safe-b)); z-index:120; max-width:calc(100% - 28px); padding:12px 16px;
    border-radius:12px; background:var(--ink); color:var(--bg); box-shadow:0 16px 40px rgba(0,0,0,.25);
    font-size:11.5px; font-weight:600; opacity:0; pointer-events:none; transform:translate(-50%,14px); transition:opacity .2s, transform .2s var(--ease);
  }
  .toast.show{opacity:1; transform:translate(-50%,0);}

  /* ---------- bottom nav ---------- */
  .bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:60; padding:6px 8px calc(6px + var(--safe-b));
    border-top:1px solid var(--line); background:color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter:blur(16px);
    box-shadow:0 -8px 26px rgba(14,23,18,.08);
  }
  .bottom-nav-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
  .bottom-nav-item{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:52px; padding:6px 4px; border:0; border-radius:12px; background:transparent; color:var(--muted);
    font-size:9.5px; font-weight:700; text-decoration:none; text-align:center;
  }
  .bottom-nav-item .icon{width:19px; height:19px;}
  .bottom-nav-item:active{background:var(--surface-alt);}
  .bottom-nav-item.primary{color:var(--accent);}
  .bottom-nav-item .nav-badge{position:absolute; top:2px; right:22%; min-width:14px; height:14px; padding-inline:3px; display:grid; place-items:center; border-radius:999px; background:var(--amber); color:#2A1300; font-size:8px; font-family:var(--font-mono); font-weight:800;}
  .bottom-nav-item .nav-badge[hidden]{display:none;}

  .footer{margin-top:56px; padding:24px 0 24px; border-top:1px solid var(--line);}
  .footer-inner{display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:10.5px;}

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

  /* =====================================================
     TABLET / DESKTOP (min-width) — progressive enhancement
     ===================================================== */
  @media (min-width:720px){
    .shell{width:min(calc(100% - 48px),1360px);}
    main{padding-bottom:40px;}
    .bottom-nav{display:none;}
    .filters-trigger{display:none;}
    .search-console{position:static; backdrop-filter:none; background:transparent; padding-top:16px;}
    .search-console-inner{gap:10px;}
    .hero{padding:44px 40px;}
    .hero-grid{flex-direction:row; align-items:center; gap:40px; text-align:left;}
    .hero-copy{text-align:left; flex:1.1;}
    .hero-copy p{margin-left:0;}
    .radar-scope{width:min(30vw,260px); margin:0;}
    .how-strip{grid-template-columns:repeat(4,1fr);}
    .how-step{flex-direction:column; align-items:flex-start; text-align:left;}
    .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .results-layout.detail-open{grid-template-columns:minmax(0,1fr) 380px; gap:18px;}
    .results-layout.detail-open .cards-grid{grid-template-columns:1fr;}
    .detail-panel{
      position:sticky; inset:auto; top:130px; max-height:calc(100vh - 150px); border-radius:20px;
      transform:none !important; display:none; box-shadow:var(--shadow); pointer-events:auto;
    }
    .results-layout.detail-open .detail-panel{display:block;}
    .filter-sheet{position:sticky; inset:auto; top:130px; width:auto; height:auto; transform:none; box-shadow:none; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:18px;}
    .filter-sheet-header .close-button{display:none;}
    .filter-sheet-actions{position:static; border-top:0; padding-top:10px; margin-top:16px;}
    .filter-sheet-actions .btn-primary{display:none;}
    .toast{bottom:26px;}
  }
  @media (min-width:980px){
    .brand small{display:block; margin-top:2px; font-family:var(--font-mono); font-size:9px; color:var(--muted); letter-spacing:.04em;}
    .main-nav{display:flex; align-items:center; gap:20px; margin-left:28px;}
    .main-nav a{text-decoration:none; font-size:13px; font-weight:700; color:var(--muted);}
    .main-nav a:hover{color:var(--accent);}
    .desktop-only{display:inline-flex;}
    .results-layout{grid-template-columns:260px minmax(0,1fr); align-items:start;}
    .filter-sheet{display:block !important;}
    .results-layout.detail-open{grid-template-columns:260px minmax(0,1fr) 380px;}
    .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .results-layout.detail-open .cards-grid{grid-template-columns:1fr;}
  }
  @media (min-width:1240px){
    .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .results-layout.detail-open .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
:root{
    --bg:#F4F2EF;
    --surface:#FFFFFF;
    --surface-alt:#FAF8F5;
    --ink:#17141C;
    --muted:#746F77;
    --line:#DFDAD4;
    --line-strong:#CEC6BD;
    --accent:#FF5537;
    --accent-ink:#D93620;
    --accent-soft:#FFF0EC;
    --amber:#9D6713;
    --amber-soft:#FFF4DD;
    --coral:#FF5537;
    --coral-soft:#FFF0EC;
    --blue:#7A42ED;
    --blue-soft:#EEE7FF;
    --green:#0B7456;
    --green-soft:#E9F7F0;
    --purple:#7A42ED;
    --purple-soft:#EEE7FF;
    --shadow:0 20px 50px rgba(30,20,22,.08);
    --shadow-soft:0 10px 28px rgba(30,20,22,.06);
    --radius-lg:22px;
    --radius-md:15px;
    --radius-sm:11px;
    --font-display:Georgia,"Times New Roman",serif;
    --font-body:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:'Inter',ui-sans-serif,sans-serif;
  }
  html[data-theme="dark"]{
    --bg:#0F0D12;
    --surface:#1C181F;
    --surface-alt:#242027;
    --ink:#FBF8F3;
    --muted:#B8B0BA;
    --line:#37303B;
    --line-strong:#4A404E;
    --accent:#FF704E;
    --accent-ink:#FF8A70;
    --accent-soft:#3B201B;
    --amber:#E7B564;
    --amber-soft:#3A2C16;
    --coral:#FF765C;
    --coral-soft:#3B201B;
    --blue:#A980FF;
    --blue-soft:#2B2140;
    --green:#62C9A2;
    --green-soft:#14362C;
    --purple:#A980FF;
    --purple-soft:#2B2140;
    --shadow:0 24px 60px rgba(0,0,0,.28);
    --shadow-soft:0 12px 32px rgba(0,0,0,.22);
  }
  body{
    background:
      radial-gradient(circle at 12% 8%, rgba(122,66,237,.08), transparent 28rem),
      radial-gradient(circle at 88% 32%, rgba(255,85,55,.06), transparent 30rem),
      var(--bg);
  }
  h1,h2,h3{font-family:var(--font-display);}
  .mono,.eyebrow,.field label,.card-kind,.meta-row,.trust-pill,.card-footer small,.detail-toolbar span,.relevance-box small,.detail-fact span,.auth-divider,.lang-switch button,.brand small{font-family:var(--font-body);}

  /* Premium static mark: no radar sweep, no scanning animation. */
  .brand-mark{
    width:38px;height:38px;border-radius:12px;position:relative;overflow:hidden;
    background:linear-gradient(145deg,#171419,#2B2230);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px rgba(23,20,28,.12);
  }
  .brand-mark::before{
    content:"R";width:auto;height:auto;border:0;box-shadow:none;background:none;border-radius:0;
    color:#fff;font:700 21px/1 Georgia,"Times New Roman",serif;letter-spacing:-.06em;
  }
  .brand-mark::after{
    content:"";position:absolute;right:7px;bottom:7px;width:7px;height:7px;border-radius:50%;
    background:linear-gradient(135deg,var(--purple),var(--coral));animation:none;
    box-shadow:0 0 0 2px rgba(255,255,255,.08);
  }
  .brand strong{font-family:var(--font-body);font-size:15px;font-weight:800;letter-spacing:.14em;}
  .brand small{color:var(--muted);font-size:9px;letter-spacing:.03em;}

  header.topbar{
    background:color-mix(in srgb,var(--surface) 91%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);
    box-shadow:0 8px 28px rgba(25,18,23,.045);
  }
  .icon-btn,.btn{border-radius:12px;}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  html[data-theme="dark"] .btn-primary{color:#fff;}
  .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);}
  :focus-visible{outline-color:color-mix(in srgb,var(--accent) 45%,transparent);}

  /* Search is the persistent command point on mobile AND desktop. */
  .search-console{
    position:sticky !important;top:60px !important;z-index:45 !important;
    padding:10px 0 9px;
    background:color-mix(in srgb,var(--bg) 90%,transparent) !important;
    backdrop-filter:blur(16px) !important;
  }
  .search-console-inner{align-items:flex-end;gap:8px;}
  .search-field{display:block;}
  .search-field>label{
    display:block;margin:0 0 6px 2px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  }
  .search-input-wrap{position:relative;}
  .search-input-wrap .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--accent);pointer-events:none;}
  input[type="search"]{
    min-height:50px;border-radius:13px;background:var(--surface);border-color:var(--line);
    box-shadow:0 8px 24px rgba(30,20,22,.04);font-size:14px;font-weight:550;
  }
  input[type="search"]:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,85,55,.10),0 10px 28px rgba(30,20,22,.06);}

  /* V1 visual language on the V2 hero structure. */
  .hero{
    margin-top:12px;padding:28px 20px 20px;border-radius:22px;color:#fff;
    background:
      radial-gradient(circle at 76% 28%,rgba(255,91,49,.58),transparent 24%),
      radial-gradient(circle at 86% 62%,rgba(128,65,239,.82),transparent 42%),
      linear-gradient(120deg,#17121E 0%,#24152B 46%,#5B1F4A 100%);
    box-shadow:0 24px 64px rgba(31,15,31,.16);
  }
  html[data-theme="dark"] .hero{
    background:
      radial-gradient(circle at 76% 28%,rgba(255,91,49,.42),transparent 24%),
      radial-gradient(circle at 86% 62%,rgba(128,65,239,.58),transparent 42%),
      linear-gradient(120deg,#130F18 0%,#1E1224 48%,#432039 100%);
  }
  .hero-grid{gap:18px;align-items:stretch;}
  .hero-copy{text-align:left;}
  .hero-copy .eyebrow{margin:0;color:#FFB5A5;font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;}
  .hero-copy h1{margin:9px 0 0;font-size:clamp(34px,10.2vw,48px);line-height:.98;letter-spacing:-.045em;font-weight:700;}
  .hero-copy p{margin:13px 0 0;max-width:58ch;color:rgba(255,255,255,.76);font-size:13.5px;line-height:1.58;}
  .hero-signal{
    width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.17);border-radius:16px;
    background:rgba(255,255,255,.10);backdrop-filter:blur(14px);
  }
  .signal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .hero-signal small{color:rgba(255,255,255,.67);font-size:9px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;}
  .signal-dot{width:8px;height:8px;border-radius:50%;background:#FF8A70;box-shadow:0 0 0 4px rgba(255,138,112,.13);}
  .hero-signal>strong{display:block;margin-top:10px;font:700 30px/1 Georgia,"Times New Roman",serif;color:#fff;}
  .hero-signal>p{margin:4px 0 0;color:rgba(255,255,255,.70);font-size:10px;}
  .signal-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);}
  .signal-breakdown span{color:rgba(255,255,255,.66);font-size:8.5px;}
  .signal-breakdown b{display:block;margin-bottom:2px;color:#fff;font-size:12px;}

  /* Semantic location uses green; green is not the brand. */
  .location-banner{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 24%,var(--line));border-radius:14px;}
  .location-icon{background:var(--green);color:#fff;}
  .local-tag{color:var(--green)!important;font-weight:800;}

  .chip.active{background:#1B171E;border-color:#1B171E;color:#fff;}
  html[data-theme="dark"] .chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  .results-header h2{font:700 24px/1.12 Georgia,"Times New Roman",serif;}

  .filter-sheet,.market-card,.detail-panel,.drawer,.modal{border-color:var(--line);}
  .market-card{border-radius:18px;box-shadow:var(--shadow-soft);}
  .market-card:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 18px 42px rgba(31,20,25,.10);}
  .market-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,85,55,.08),var(--shadow);}
  .avatar{
    position:relative;overflow:hidden;background:linear-gradient(145deg,var(--purple),#E64F91 68%,var(--accent));
    color:#fff;font-family:var(--font-body);font-weight:850;box-shadow:0 8px 18px rgba(122,66,237,.17);
  }
  .avatar.need{background:linear-gradient(145deg,#0B513E,#148060);box-shadow:none;}
  .avatar.organization{background:linear-gradient(145deg,#1F6A94,#258EAC);box-shadow:none;}
  .avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
  .avatar-fallback{display:grid;place-items:center;width:100%;height:100%;}
  .avatar.has-photo .avatar-fallback{visibility:hidden;}
  .card-kind{color:var(--purple);font-weight:850;}
  .card-kind.need{color:var(--green);}
  .card-kind.organization{color:#147898;}
  .card-heading h3{font:700 19px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.018em;}
  .trust-pill{background:var(--green-soft);color:var(--green);font-weight:800;}
  html[data-theme="dark"] .trust-pill{color:var(--green);}
  .trust-pill.neutral{background:var(--purple-soft);color:var(--purple);}
  .card-link{color:var(--purple);font-weight:850;}
  .card-link.need-link{color:var(--green);}
  .save-button.saved{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));color:var(--accent);}
  .relevance-box{background:#1B171E;color:#fff;}
  html[data-theme="dark"] .relevance-box{background:#100D13;}
  .relevance-box strong{color:#FF765C;font-family:var(--font-display);}
  .reason-list i{background:#67DDA5;}
  .clear-link{color:var(--accent);}
  .drawer-note{background:var(--purple-soft);color:var(--purple);}

  .bottom-nav{background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 -8px 26px rgba(31,20,25,.08);}
  .bottom-nav-item.primary{color:var(--accent);}
  .filters-badge,.bottom-nav-item .nav-badge{background:var(--accent);color:#fff;}

  .footer-inner{color:var(--muted);}

  @media (max-width:719px){
    main{padding-bottom:96px;}
    .hero{margin-top:8px;}
    .hero-signal{margin-top:0;}
    .location-banner{margin-top:12px;}
  }

  @media (min-width:720px){
    .search-console{position:sticky !important;top:60px !important;padding-top:10px !important;background:color-mix(in srgb,var(--bg) 90%,transparent) !important;backdrop-filter:blur(16px) !important;}
    .hero{padding:44px 40px 38px;border-radius:28px;}
    .hero-grid{flex-direction:row;align-items:end;gap:44px;}
    .hero-copy{flex:1.2;}
    .hero-copy h1{font-size:clamp(48px,5.8vw,78px);max-width:860px;}
    .hero-copy p{font-size:15px;line-height:1.68;max-width:700px;}
    .hero-signal{width:min(100%,330px);flex:0 0 330px;padding:20px;}
    .hero-signal>strong{font-size:44px;margin-top:14px;}
    .hero-signal>p{font-size:11px;}
    .signal-breakdown{margin-top:18px;padding-top:14px;}
    .signal-breakdown span{font-size:9px;}
    .signal-breakdown b{font-size:13px;}
  }

  @media (min-width:980px){
    .main-nav{margin-left:28px;}
    .hero{min-height:380px;padding:58px 58px 52px;}
    .hero-grid{gap:50px;}
    .hero-copy h1{font-size:clamp(48px,6vw,88px);line-height:.94;letter-spacing:-.055em;}
    .hero-copy p{margin-top:25px;font-size:16px;line-height:1.7;}
    .hero-signal{width:min(100%,340px);flex-basis:340px;padding:24px;border-radius:22px;}
    .hero-signal>strong{font-size:48px;margin-top:18px;}
    .signal-breakdown{margin-top:22px;padding-top:17px;}
    .market-card{min-height:315px;}
  }

  @media (prefers-reduced-motion:reduce){
    .brand-mark::after{animation:none!important;}
  }
/* ==============================================================
   RESPONSIVE FINAL — MARKETPLACE
   No redesign: only touch, viewport, overflow, sheet/drawer/modal
   hardening around the already-approved marketplace.
   ============================================================== */
html,body{max-width:100%;overflow-x:hidden}
.drawer,.filter-sheet,.detail-panel,.modal{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.market-card,.card-heading,.results-layout,.cards-grid{min-width:0}

@media(max-width:719px){
  :root{--mobile-topbar:56px}
  header.topbar .topbar-inner{min-height:var(--mobile-topbar)}
  .shell{width:min(calc(100% - 20px),1360px)}
  .search-console{top:var(--mobile-topbar)}
  .search-input input{font-size:16px}
  .btn,.icon-btn{min-height:44px}
  .close-button{width:44px;height:44px;min-width:44px;min-height:44px}
  .filters-trigger{min-width:44px}
  .results-header{align-items:flex-start;flex-wrap:wrap}
  .location-banner{align-items:flex-start;flex-wrap:wrap}
  .location-banner .btn{margin-left:0}
  .card-footer{align-items:flex-start;flex-wrap:wrap}
  .card-link{min-height:40px;display:inline-flex;align-items:center}

  .detail-panel{
    max-height:calc(100dvh - var(--mobile-topbar));
    padding:18px 16px calc(22px + var(--safe-b))
  }
  .drawer{
    width:100%;height:100dvh;
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(22px + var(--safe-b))
  }
  .filter-sheet{
    width:100%;height:100dvh;
    padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + var(--safe-b))
  }
  .modal{
    width:calc(100% - 20px);max-height:calc(100dvh - 20px);overflow:auto;
    padding:18px;border-radius:17px
  }
  .modal-grid{grid-template-columns:1fr}
  .modal-actions{margin-top:16px}
  .bottom-nav-item{min-height:56px}
  .toast{bottom:calc(82px + var(--safe-b))}
}

@media(max-width:390px){
  .shell{width:min(calc(100% - 16px),1360px)}
  .hero{padding-left:16px;padding-right:16px}
  .hero-copy h1{font-size:clamp(29px,9.5vw,38px)}
  .hero-copy p{font-size:12.5px}
  .hero-signal{padding:15px}
  .search-console-inner{gap:6px}
  .market-card{padding:15px}
  .drawer-header h2,.modal h2{font-size:20px}
}

@media(max-width:340px){
  .saved-item{grid-template-columns:36px minmax(0,1fr);align-items:start}
  .saved-item .avatar{width:36px;height:36px}
  .saved-item>button{grid-column:2;justify-self:start}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:900px){
  .detail-panel{max-height:92dvh}
  .modal{max-height:calc(100dvh - 12px)}
}


/* ============================================================
   RADAR MARKETPLACE V3.1 — CONTINUOUS DESKTOP MARKET
   Lapidação comportamental. Sem alteração de arquitetura.
   ============================================================ */

@media (min-width:980px){

  :root{
    --market-fixed-topbar:60px;
    --market-fixed-search:72px;
    --market-fixed-stack:132px;
  }

  /* Header + idiomas permanecem sempre acessíveis */
  header.topbar{
    position:fixed !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
    width:min(calc(100% - 28px),1360px) !important;
    z-index:120 !important;
  }

  /* Pesquisa permanece imediatamente abaixo do header */
  .search-console{
    position:fixed !important;
    top:var(--market-fixed-topbar) !important;
    left:50% !important;
    transform:translateX(-50%);
    width:min(calc(100% - 28px),1360px) !important;
    z-index:115 !important;
    margin:0 !important;
    padding:10px 0 9px !important;
    background:color-mix(in srgb,var(--bg) 94%,transparent) !important;
    backdrop-filter:blur(16px) !important;
  }

  /* Compensa o espaço ocupado pelas duas barras fixas */
  main.shell{
    padding-top:var(--market-fixed-stack) !important;
  }

  /* Hero mais compacto */
  .hero{
    min-height:280px !important;
    padding:32px 36px 30px !important;
    margin-top:8px !important;
  }

  .hero-grid{
    gap:32px !important;
  }

  .hero-copy h1{
    max-width:720px !important;
    font-size:clamp(36px,4.4vw,60px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
  }

  .hero-copy p{
    margin-top:14px !important;
    max-width:650px !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .hero-signal{
    width:min(100%,300px) !important;
    flex:0 0 300px !important;
    padding:18px !important;
  }

  .hero-signal>strong{
    margin-top:12px !important;
    font-size:38px !important;
  }

  /*
   * Quando os resultados chegam à área útil,
   * a estrutura fica estável e somente os cards rolam.
   */
  .results-layout{
    position:sticky !important;
    top:calc(var(--market-fixed-stack) + 8px) !important;
    height:calc(100vh - var(--market-fixed-stack) - 18px);
    align-items:stretch !important;
  }

  /* Filtros permanecem visíveis */
  .filter-sheet{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    height:100% !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  /* Drawer do card permanece visível */
  .detail-panel{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    height:100%;
    max-height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  /* Somente a coluna dos resultados faz scroll */
  .cards-grid{
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    align-content:start;
    padding-right:6px;
  }

  .market-card.is-active-detail{
    border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
    box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 10%,transparent);
  }

  /*
   * Desktop usa carregamento automático.
   * O botão continua no DOM como mecanismo de paginação/fallback JS.
   */
  .load-more{
    display:none !important;
  }
}

/* Regra aprovada: 3 cards; com detalhe aberto, 2 cards + painel */
@media (min-width:1240px){
  .cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .results-layout.detail-open .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   RADAR MARKETPLACE V3.2 — FEED DESKTOP
   ============================================================ */

@media (min-width:980px){

  :root{
    --market-header-height:60px;
    --market-search-height:56px;
    --market-stack-height:116px;
  }

  /*
   * STICKY EM VEZ DE FIXED
   * Continua permanentemente disponível,
   * mas permanece no fluxo do documento.
   * Isso elimina o corte do hero.
   */
  header.topbar{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:min(calc(100% - 28px),1360px) !important;
    z-index:120 !important;
  }

  .topbar-inner{
    min-height:var(--market-header-height) !important;
  }

  .search-console{
    position:sticky !important;
    top:var(--market-header-height) !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:auto !important;
    z-index:115 !important;

    margin:0 !important;
    padding:6px 0 7px !important;

    background:
      color-mix(in srgb,var(--bg) 95%,transparent) !important;

    backdrop-filter:blur(16px) !important;
  }

  .search-console input[type="search"]{
    min-height:42px !important;
  }

  main.shell{
    padding-top:0 !important;
  }

  html{
    scroll-padding-top:calc(var(--market-stack-height) + 12px);
  }

  #resultados{
    scroll-margin-top:calc(var(--market-stack-height) + 12px);
  }

  /* ---------------------------------------------------------
     HERO — MAIS COMPACTO
     --------------------------------------------------------- */

  .hero{
    min-height:240px !important;
    margin-top:10px !important;
    padding:25px 32px 24px !important;
  }

  .hero-grid{
    gap:30px !important;
    align-items:center !important;
  }

  .hero-copy{
    flex:1.25 !important;
  }

  .hero-copy h1{
    max-width:700px !important;
    margin-top:7px !important;

    font-size:clamp(34px,3.9vw,54px) !important;
    line-height:.99 !important;
    letter-spacing:-.032em !important;
  }

  .hero-copy p{
    max-width:620px !important;
    margin-top:12px !important;

    font-size:13.5px !important;
    line-height:1.55 !important;
  }

  .hero-signal{
    width:min(100%,280px) !important;
    flex:0 0 280px !important;

    padding:16px 18px !important;
    border-radius:18px !important;
  }

  .hero-signal>strong{
    margin-top:9px !important;
    font-size:34px !important;
  }

  .signal-breakdown{
    margin-top:13px !important;
    padding-top:12px !important;
  }

  /* ---------------------------------------------------------
     A PARTIR DOS RESULTADOS A ESTRUTURA FICA "TRAVADA"
     --------------------------------------------------------- */

  .results-layout{
    position:sticky !important;

    top:calc(var(--market-stack-height) + 8px) !important;

    height:
      calc(100dvh - var(--market-stack-height) - 18px) !important;

    min-height:0 !important;
    align-items:start !important;
  }

  /*
   * Filtros permanecem visíveis,
   * mas NÃO esticam até ao fundo com área branca inútil.
   */
  .filter-sheet{
    position:relative !important;

    inset:auto !important;
    top:auto !important;

    height:auto !important;

    max-height:
      calc(100dvh - var(--market-stack-height) - 18px) !important;

    overflow-y:auto !important;

    align-self:start !important;

    overscroll-behavior:contain;
  }

  /*
   * Painel de detalhes fica permanentemente visível
   * ao lado dos cards.
   */
  .detail-panel{
    position:relative !important;

    inset:auto !important;
    top:auto !important;

    height:auto !important;

    max-height:
      calc(100dvh - var(--market-stack-height) - 18px) !important;

    overflow-y:auto !important;

    align-self:start !important;

    overscroll-behavior:contain;
  }

  /* ---------------------------------------------------------
     FEED DOS CARDS
     --------------------------------------------------------- */

  .cards-grid{
    height:
      calc(100dvh - var(--market-stack-height) - 18px) !important;

    max-height:none !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    align-content:start !important;

    gap:10px !important;

    padding:2px 8px 18px 2px !important;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;

    scroll-behavior:smooth;

    transition:
      opacity .22s ease,
      filter .22s ease;
  }

  /*
   * Cards um pouco mais compactos:
   * cabem aproximadamente 3–3.5 filas
   * dependendo da resolução.
   */
  .market-card{
    min-height:205px !important;

    padding:13px 14px !important;

    border-radius:14px !important;
  }

  .card-top{
    gap:10px !important;
  }

  .card-heading h3{
    margin-top:3px !important;

    font-size:16.5px !important;
    line-height:1.12 !important;
  }

  .card-heading p{
    margin-top:2px !important;
    line-height:1.35 !important;
  }

  .meta-row{
    margin-top:8px !important;
  }

  .card-description{
    margin-top:9px !important;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    line-height:1.45 !important;
  }

  .tags{
    margin-top:8px !important;
    padding-top:0 !important;
  }

  .card-footer{
    margin-top:9px !important;
    padding-top:8px !important;
  }

  /*
   * Feedback visual do card aberto.
   */
  .market-card.is-active-detail{
    border-color:
      color-mix(in srgb,var(--accent) 55%,var(--line)) !important;

    box-shadow:
      0 10px 26px
      color-mix(in srgb,var(--accent) 11%,transparent) !important;
  }

  /* ---------------------------------------------------------
     FADE DO FEED
     --------------------------------------------------------- */

  .cards-grid.feed-fade-bottom{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 46px),
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 46px),
        transparent 100%
      );
  }

  .cards-grid.feed-fade-top{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 38px,
        #000 100%
      );

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 38px,
        #000 100%
      );
  }

  .cards-grid.feed-fade-top.feed-fade-bottom{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 38px,
        #000 calc(100% - 46px),
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 38px,
        #000 calc(100% - 46px),
        transparent 100%
      );
  }

  /* AJAX */
  .results-layout.is-filter-loading .cards-grid{
    opacity:.42;
    filter:blur(.7px);
    pointer-events:none;
  }

  .results-layout.is-filter-loading::after{
    content:"A atualizar resultados…";

    position:absolute;
    z-index:30;

    left:50%;
    top:18px;

    transform:translateX(-50%);

    padding:8px 13px;

    border:1px solid var(--line);
    border-radius:999px;

    background:var(--surface);
    color:var(--muted);

    box-shadow:var(--shadow-soft);

    font-size:11px;
    font-weight:600;
  }

  /*
   * O botão deixa de fazer parte da experiência desktop.
   * A paginação passa a ser automática.
   */
  .load-more{
    display:none !important;
  }
}

/* Desktop amplo:
   3 cards normais / 2 cards + detalhes */
@media (min-width:1240px){

  .cards-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

  .results-layout.detail-open{
    grid-template-columns:
      260px minmax(0,1fr) 380px !important;
  }

  .results-layout.detail-open .cards-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   RADAR MARKETPLACE V3.3 — CARD INTEGRITY
   Restaura conteúdo completo e protege os CTAs.
   ============================================================ */

@media (min-width:980px){

  /*
   * Aproveitar praticamente toda a altura restante do viewport.
   */
  .results-layout{
    top:calc(var(--market-stack-height) + 2px) !important;

    height:
      calc(100dvh - var(--market-stack-height) - 4px) !important;

    min-height:0 !important;
  }

  .cards-grid{
    height:
      calc(100dvh - var(--market-stack-height) - 4px) !important;

    max-height:none !important;

    /*
     * Cada linha deve respeitar a altura natural do conteúdo.
     * O grid nunca pode comprimir um card.
     */
    grid-auto-rows:max-content !important;

    gap:14px !important;

    padding:
      4px
      8px
      38px
      2px !important;

    scroll-padding-top:28px;
    scroll-padding-bottom:46px;

    align-content:start !important;
  }

  /*
   * CARD
   * A altura de 225px é apenas mínima.
   * Se o conteúdo precisar de mais espaço,
   * o card cresce naturalmente.
   */
  .market-card{
    min-height:225px !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    align-self:start;

    padding:
      15px
      15px
      14px !important;

    overflow:hidden;

    border-radius:15px !important;
  }

  /*
   * Cabeçalho mantém espaço natural.
   */
  .card-top{
    flex:0 0 auto;
    gap:11px !important;
  }

  .card-heading{
    min-width:0;
  }

  .card-heading h3{
    margin:3px 0 0 !important;

    font-size:17px !important;
    line-height:1.14 !important;

    overflow-wrap:anywhere;
  }

  .card-heading p{
    margin:3px 0 0 !important;

    font-size:11.5px !important;
    line-height:1.4 !important;
  }

  /*
   * Metadados não podem ser comprimidos.
   */
  .meta-row{
    flex:0 0 auto;

    margin-top:9px !important;

    row-gap:5px;
  }

  /*
   * RESTAURAR A DESCRIÇÃO / DOR DO MERCADO.
   *
   * A V3.2 limitava esta área a duas linhas.
   * Agora o resumo volta a usar o espaço necessário.
   */
  .card-description{
    display:block !important;

    margin:
      10px
      0
      0 !important;

    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;

    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;

    font-size:12px !important;
    line-height:1.5 !important;
  }

  /*
   * Tags ocupam o espaço inferior disponível,
   * mantendo o footer sempre no fundo do card.
   */
  .tags{
    flex:0 0 auto;

    margin-top:auto !important;

    padding-top:12px !important;

    gap:6px !important;
  }

  /*
   * FOOTER PROTEGIDO.
   *
   * Nunca pode sair do card nem ser sobreposto
   * pelo resultado seguinte.
   */
  .card-footer{
    position:relative !important;
    z-index:2;

    flex:0 0 auto !important;

    width:100%;

    min-height:36px;

    margin-top:11px !important;

    padding-top:9px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    border-top:1px solid var(--line);

    background:var(--surface);
  }

  .card-footer small{
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /*
   * CTA sempre clicável e completamente dentro do card.
   */
  .card-link{
    position:relative !important;

    flex:0 0 auto;

    min-height:32px;

    display:inline-flex !important;
    align-items:center;
    justify-content:flex-end;

    padding:4px 0 !important;

    white-space:nowrap;

    line-height:1.25 !important;

    z-index:3;

    cursor:pointer;
  }

  /*
   * Um pouco mais de separação entre os cards:
   * impede a sensação visual de sobreposição.
   */
  .market-card + .market-card{
    margin-top:0 !important;
  }

  /*
   * Filtro e drawer acompanham toda a nova altura útil.
   */
  .filter-sheet,
  .detail-panel{
    max-height:
      calc(100dvh - var(--market-stack-height) - 4px) !important;
  }

  /*
   * Fade mais suave.
   * O CTA só começa a desaparecer quando o card
   * efetivamente está saindo da área visível.
   */
  .cards-grid.feed-fade-bottom{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 30px),
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 30px),
        transparent 100%
      ) !important;
  }

  .cards-grid.feed-fade-top{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 26px,
        #000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 26px,
        #000 100%
      ) !important;
  }

  .cards-grid.feed-fade-top.feed-fade-bottom{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 26px,
        #000 calc(100% - 30px),
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 26px,
        #000 calc(100% - 30px),
        transparent 100%
      ) !important;
  }
}


/* ============================================================
   DESKTOP AMPLO
   3 cards normais / 2 cards + drawer
   ============================================================ */

@media (min-width:1240px){

  .cards-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

  .results-layout.detail-open{
    grid-template-columns:
      260px minmax(0,1fr) 380px !important;
  }

  .results-layout.detail-open .cards-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   RADAR MARKETPLACE V3.4 — SCROLL CHAIN
   ============================================================ */

@media (min-width:980px){

  /*
   * O feed continua sendo uma viewport própria,
   * mas não aprisiona mais a roda do rato.
   *
   * Quando chega ao limite, o navegador pode
   * continuar naturalmente o scroll da página.
   */
  .cards-grid{
    overscroll-behavior-y:auto !important;
    overscroll-behavior-x:hidden !important;
  }

  /*
   * Área vazia fora dos cards não interfere
   * com o scroll global.
   */
  .results-layout{
    overscroll-behavior:auto !important;
  }

  /*
   * Botões de ação sempre recebem clique.
   */
  .card-footer,
  .card-link{
    pointer-events:auto !important;
  }

  .card-link{
    touch-action:manipulation;
  }

  /*
   * Drawer continua com o próprio scroll,
   * sem interferir com os cards.
   */
  .detail-panel{
    overscroll-behavior-y:contain !important;
  }
}


/* ============================================================
   RADAR MARKETPLACE V3.7 — CANONICAL INTERACTION

   Regra definitiva:
   - header permanece acessível;
   - pesquisa é FIXED real;
   - cards usam openDetail(card) original;
   - mobile mantém Mostrar mais;
   - desktop mantém infinite scroll.
   ============================================================ */


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

header.topbar{
  position:-webkit-sticky !important;
  position:sticky !important;

  top:0 !important;

  z-index:250 !important;

  background:
    color-mix(
      in srgb,
      var(--surface) 96%,
      transparent
    ) !important;

  backdrop-filter:
    blur(16px) !important;

  -webkit-backdrop-filter:
    blur(16px) !important;
}


/* ------------------------------------------------------------
   PESQUISA — FIXED REAL
   ------------------------------------------------------------ */

#marketSearchForm.search-console{
  position:fixed !important;

  top:60px !important;

  left:50% !important;
  right:auto !important;

  transform:
    translateX(-50%) !important;

  width:
    min(
      calc(100% - 28px),
      1360px
    ) !important;

  margin:0 !important;

  padding:
    7px
    0
    8px !important;

  z-index:240 !important;

  background:
    color-mix(
      in srgb,
      var(--bg) 96%,
      transparent
    ) !important;

  backdrop-filter:
    blur(16px) !important;

  -webkit-backdrop-filter:
    blur(16px) !important;
}


/*
 * Ocupa no documento o espaço da pesquisa fixed.
 * O hero não sobe nem fica cortado.
 */
.market-search-fixed-spacer-v37{
  display:block !important;

  width:100% !important;

  height:76px !important;

  flex:0 0 76px !important;

  pointer-events:none;
}


/* ------------------------------------------------------------
   CARDS — INTERAÇÃO
   ------------------------------------------------------------ */

.cards-grid,
.market-card,
.card-footer,
.card-link{
  pointer-events:auto !important;
}

.card-footer{
  position:relative !important;

  z-index:4 !important;
}

.card-link{
  position:relative !important;

  z-index:6 !important;

  cursor:pointer !important;

  touch-action:manipulation;
}


/*
 * Card selecionado.
 */
.market-card.is-active-detail{
  border-color:
    color-mix(
      in srgb,
      var(--accent) 55%,
      var(--line)
    ) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:719px){

  #marketSearchForm.search-console{
    top:
      var(
        --mobile-topbar,
        56px
      ) !important;

    width:
      calc(100% - 20px) !important;

    padding:
      6px
      0
      7px !important;
  }

  .market-search-fixed-spacer-v37{
    height:72px !important;

    flex-basis:72px !important;
  }

  /*
   * O botão original do Laravel/JS V3
   * permanece disponível no mobile.
   */
  .load-more{
    display:flex !important;

    justify-content:center !important;
  }

  #loadMore{
    min-height:44px;

    pointer-events:auto !important;

    touch-action:manipulation;
  }
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width:720px) and (max-width:979px){

  #marketSearchForm.search-console{
    top:60px !important;
  }

  .load-more{
    display:flex !important;

    justify-content:center !important;
  }
}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width:980px){

  /*
   * Desktop continua usando infinite scroll.
   */
  .load-more{
    display:none !important;
  }
}


/* ============================================================
   RADAR MARKETPLACE V3.9 — MODAL STACK

   Hierarquia canónica:
   conteúdo      < 70
   bottom nav    = 60
   pesquisa      = 70
   header        = 75
   overlay       = 80
   filtros       = 85
   drawers       = 90
   modais        = 95+

   A pesquisa continua FIXED.
   Apenas deixa de cobrir interfaces abertas.
   ============================================================ */

header.topbar{
  z-index:75 !important;
}

#marketSearchForm.search-console{
  z-index:70 !important;
}


/*
 * Fundo modal deve sempre cobrir header + pesquisa.
 */
.overlay{
  z-index:80 !important;
}


/*
 * Filtros mobile / sheet.
 */
.filter-sheet{
  z-index:85 !important;
}


/*
 * Guardados e drawers laterais.
 */
.drawer{
  z-index:90 !important;
}


/*
 * Painel de detalhes em modo overlay/mobile.
 */
.detail-panel{
  z-index:92 !important;
}


/*
 * Modais críticos permanecem acima de todos.
 */
.modal,
.auth-modal,
.location-modal{
  z-index:95 !important;
}


/*
 * Quando uma camada modal está ativa,
 * header/pesquisa não capturam cliques através dela.
 */
body.no-scroll header.topbar,
body.no-scroll #marketSearchForm.search-console{
  pointer-events:none !important;
}


/*
 * As próprias interfaces abertas continuam interativas.
 */
.overlay.open,
.drawer.open,
.filter-sheet.open,
.detail-panel,
.modal.open,
.auth-modal.open,
.location-modal.open{
  pointer-events:auto !important;
}
