:root{
  --primary:#2e78c7;
  --bg:#f3f6fb;
  --text:#1d2a3b;
  --muted:#6b7a90;
  --card:#ffffff;
  --shadow: 0 10px 24px rgba(18,38,63,.10);
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
a{color:inherit; text-decoration:none}
.app{min-height:100vh}
.container{max-width:520px; margin:0 auto; padding:14px}
.hero{
  background: linear-gradient(180deg, var(--primary), #1f5da3);
  color:#fff;
  padding:22px 16px 18px;
}
.hero-inner{max-width:520px; margin:0 auto}
.badge{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.18);
  font-weight:700; letter-spacing:.2px; font-size:13px;
}
.hero h1{margin:14px 0 6px; font-size:28px}
.hero p{margin:0; opacity:.9}

.grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:520px){
  .grid{grid-template-columns:1fr 1fr;}
}
.cat-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  display:flex; align-items:center; gap:12px;
  border: 1px solid rgba(46,120,199,.08);
}
.cat-icon{font-size:26px}
.cat-title{font-weight:800}
.cat-sub{font-size:12px; color:var(--muted)}

.topbar{
  position:sticky; top:0; z-index:5;
  background: linear-gradient(180deg, var(--primary), #1f5da3);
  padding:10px 10px;
  display:flex; align-items:center; gap:10px;
  color:#fff;
}
.topbar-title{
  flex:1; text-align:center; font-weight:900; letter-spacing:.2px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; background: rgba(255,255,255,.16);
  font-size:18px; font-weight:900;
}

.list{display:flex; flex-direction:column; gap:10px}
.place-row{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:10px;
  display:flex; align-items:center; gap:12px;
  border: 1px solid rgba(0,0,0,.05);
}
.place-thumb{
  width:74px; height:54px; border-radius:12px; overflow:hidden; flex:0 0 auto;
}
.place-thumb img{width:100%; height:100%; object-fit:cover}
.place-name{font-weight:900}
.place-sub{font-size:12px; color:var(--muted); margin-top:2px}
.chev{margin-left:auto; font-size:22px; opacity:.6}

.place-hero img{width:100%; height:260px; object-fit:cover; display:block}
.place-head{
  max-width:520px; margin:0 auto;
  background:#fff; padding:14px 14px 12px;
  border-radius: 0 0 22px 22px;
  margin-top:-14px;
  box-shadow: var(--shadow);
}
.place-head h1{margin:0 0 6px; font-size:20px}
.place-pill{
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin:12px 0;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.05);
}
.card-title{
  font-weight:900;
  padding:12px 14px;
  background: #e9f2ff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.card-body{padding:12px 14px; color:var(--text); line-height:1.45}
.card-green .card-title{background:#e8f6e8}
.card-yellow .card-title{background:#fff1bf}
.card-tabs .card-title{background:#e9f2ff}

.checks{margin:0; padding-left:18px}
.checks li{margin:6px 0}
.dots{margin:0; padding-left:18px}
.dots li{margin:6px 0}
.muted{color:var(--muted); font-size:14px}

.tabs{
  display:flex; gap:8px; padding:10px 12px 0;
}
.tab{
  border:0; background:#eef3fb; color:#355; padding:10px 12px;
  border-radius:12px; font-weight:800; cursor:pointer; flex:1;
}
.tab.active{background: var(--primary); color:#fff}
.tabpanels{padding:10px 14px 14px}
.panel{display:none}
.panel.active{display:block}

.map-preview{
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  margin-bottom:10px;
}
.map-preview img{width:100%; height:120px; object-fit:cover; display:block}

.btn{
  display:block; text-align:center;
  padding:12px 14px; border-radius:14px; font-weight:900;
}
.btn-green{background:#2e9b52; color:#fff}
.btn-blue{background: var(--primary); color:#fff}
.btn-install{background: rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35)}

/* Informativo */
.info-row{display:flex; gap:12px; align-items:flex-start}
.info-thumb{width:78px; height:78px; border-radius:14px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(0,0,0,.08)}
.info-thumb img{width:100%; height:100%; object-fit:cover}
.info-meta{flex:1}
.info-text{margin-bottom:10px}

.info-head{width:100%; display:flex; align-items:center; gap:12px; border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:16px; padding:10px; cursor:pointer; text-align:left}
.info-head:active{transform:scale(0.99)}
.info-head-meta{flex:1; min-width:0}
.info-head-title{font-weight:900; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.info-head-date{margin-top:4px; font-size:12px; color:var(--muted)}
.info-head-chevron{color:var(--muted); font-size:18px; padding:0 4px}
.info-card.open .info-head-chevron{transform:rotate(180deg)}

.info-list{margin-top:10px}
.info-item{width:100%; display:flex; align-items:center; gap:12px; border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:16px; padding:10px; cursor:pointer; text-align:left}
.info-item + .info-item{margin-top:10px}
.info-item:active{transform:scale(0.99)}
.info-item-title{font-weight:900; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.info-item-date{margin-top:4px; font-size:12px; color:var(--muted)}

/* Modal (informativos) */
.modal{position:fixed; inset:0; z-index:9998}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-dialog{position:relative; margin:6vh auto; width:min(560px, 92vw); background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden}
.modal-body{padding:14px}
.modal-x{position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background:#fff; cursor:pointer}
.modal-imgwrap{border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,.10); margin-bottom:10px}
.modal-imgwrap img{width:100%; height:190px; object-fit:cover; display:block}
.modal-title{font-weight:900; font-size:18px; line-height:1.25}
.modal-text{margin-top:10px; white-space:pre-wrap; color:#111827}

/* Ads */
.ad-row{display:flex; gap:12px; align-items:flex-start}
.ad-thumb{width:96px; height:72px; border-radius:14px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(0,0,0,.08)}
.ad-thumb img{width:100%; height:100%; object-fit:cover}
.ad-meta{flex:1}
.ad-text{margin-bottom:10px}


.ad-link{display:block; color:inherit; text-decoration:none}
.ad-link:active{transform: scale(0.99)}
/* Player */
.rp-player{display:flex; align-items:center; gap:12px}
.rp-play{width:50px; height:50px; border-radius:14px; border:0; background: var(--primary); color:#fff; font-weight:900; font-size:18px; cursor:pointer; flex:0 0 auto}
.rp-meta{flex:1; min-width:0}
.rp-name{font-weight:900}
.rp-sub{font-size:12px; color:var(--muted); margin-top:2px}
.rp-vol{width:92px}
.rp-player.playing .rp-play{filter:brightness(.95)}

@media (max-width:360px){
  .rp-vol{width:72px}
  .ad-thumb{width:86px; height:64px}
}
.empty{
  background:#fff; border-radius:var(--radius); padding:16px; color:var(--muted);
  box-shadow: var(--shadow);
}


/* Toast (PWA install hints) */
.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(12px); opacity:0; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.85); color:#fff; font-size:14px; z-index:9999; transition:all .22s ease; max-width:92vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}