:root{
  --cream:#f3ecdf;--paper:#fffaf0;--navy:#07365b;--navy2:#0b4f7a;--gold:#b8862f;
  --green:#2f8f5b;--rust:#aa4c27;--ink:#19324a;--muted:#6f7a84;--line:#d8cdbc;
  --shadow:0 10px 30px rgba(7,54,91,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f6f0e6,#efe5d4);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
button,input,select,textarea{font:inherit}
.app{max-width:520px;margin:0 auto;min-height:100vh;background:rgba(255,250,240,.94);box-shadow:0 0 40px rgba(0,0,0,.08)}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,250,240,.92);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(184,134,47,.18)}
.brand{font-family:Georgia,serif;letter-spacing:.06em;color:var(--navy);font-weight:700}.brand span{font-size:1.42rem}
.iconbtn{border:0;background:transparent;font-size:1.25rem}
.hero{padding:20px 18px 16px;background:
 radial-gradient(circle at 75% 15%,rgba(47,143,91,.18),transparent 22%),
 radial-gradient(circle at 92% 35%,rgba(184,134,47,.22),transparent 26%),
 linear-gradient(135deg,#fffaf0 0%,#eef5f8 55%,#f2e5ca 100%);border-bottom:1px solid #e2d6c3}
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:800}
.hero h1{font-family:Georgia,serif;color:var(--navy);font-size:2.8rem;line-height:.92;margin:8px 0 8px}
.hero p{margin:0;color:#526575}.trencadis{height:11px;border-radius:999px;margin:18px 0 6px;background:linear-gradient(90deg,#0c4d7d 0 12%,#d59c39 12% 22%,#2c8066 22% 36%,#e0c58d 36% 49%,#0a588a 49% 65%,#b76731 65% 79%,#e5d1a8 79% 90%,#0c4d7d 90%)}
.section{padding:18px}.section h2{font-family:Georgia,serif;color:var(--navy);margin:0 0 12px;font-size:1.55rem}
.card{background:rgba(255,255,255,.78);border:1px solid rgba(184,134,47,.18);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.progress-wrap{display:grid;grid-template-columns:1fr 92px;gap:14px;align-items:center}
.big{font-family:Georgia,serif;font-size:2rem;color:var(--navy);font-weight:700}
.progress{height:12px;background:#e5e1d9;border-radius:99px;overflow:hidden;margin:8px 0}.progress>div{height:100%;background:linear-gradient(90deg,var(--green),#72b88d);width:0}
.ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0deg,#e6e1d7 0);position:relative}.ring:after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;background:var(--paper)}.ring b{z-index:1;color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.stat{padding:10px 6px;border-radius:14px;background:#f7f2e8;text-align:center}.stat b{display:block;color:var(--navy);font-family:Georgia,serif;font-size:1.3rem}.stat span{font-size:.68rem;color:#6a737b}
.cta{display:flex;gap:10px;margin-top:14px}.btn{border:0;border-radius:12px;padding:12px 14px;font-weight:800}.primary{background:var(--navy);color:white}.ghost{background:#efe8db;color:var(--navy)}
.nav{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,250,240,.96);backdrop-filter:blur(16px);border-top:1px solid #ddd1bd}.nav button{padding:10px 4px 9px;border:0;background:transparent;color:#65717a;font-size:.68rem}.nav button.active{color:var(--navy);font-weight:800}.nav i{display:block;font-style:normal;font-size:1.15rem;margin-bottom:3px}
.view{display:none}.view.active{display:block}
.toolbar{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.chip{white-space:nowrap;border:1px solid #d8cdbc;border-radius:99px;padding:8px 11px;background:white;color:#526575;font-size:.78rem}.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.search{width:100%;padding:12px 14px;border:1px solid #d8cdbc;border-radius:14px;background:#fff;margin:6px 0 12px}
.work{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #e6ddcf}.work:last-child{border-bottom:0}.work h3{font-family:Georgia,serif;margin:0 0 4px;color:var(--navy);font-size:1rem}.meta{font-size:.75rem;color:#6b7780}.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.tag{font-size:.66rem;padding:4px 7px;border-radius:99px;background:#edf3f6;color:#315a75}.tag.gold{background:#f2e5c6;color:#7d5b16}.tag.green{background:#e4f3ea;color:#28734c}.tag.rust{background:#f5e4dc;color:#9b4526}
.check{width:28px;height:28px;border-radius:50%;border:2px solid #c9c3b8;display:grid;place-items:center;background:white}.check.visited{background:var(--green);border-color:var(--green);color:white}
.route{margin-bottom:12px}.route h3{font-family:Georgia,serif;color:var(--navy);margin:0}.route .routehead{display:flex;justify-content:space-between;gap:12px}.route small{color:#73808a}
.passport-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.badge{border-radius:18px;background:#f8f3e9;border:1px solid #e0d3bd;padding:14px;text-align:center;min-height:122px;display:grid;place-items:center}.badge .medal{font-size:2rem}.badge.locked{filter:grayscale(1);opacity:.45}
.modal{position:fixed;inset:0;background:rgba(4,30,50,.45);display:none;align-items:flex-end;justify-content:center;z-index:100}.modal.open{display:flex}.sheet{width:min(520px,100%);max-height:88vh;overflow:auto;background:var(--paper);border-radius:24px 24px 0 0;padding:18px;box-shadow:0 -10px 40px rgba(0,0,0,.2)}.sheet h2{font-family:Georgia,serif;color:var(--navy);margin-top:0}.sheet .close{float:right;border:0;background:#eee4d4;border-radius:50%;width:34px;height:34px}.field{margin:12px 0}.field label{display:block;font-size:.76rem;color:#65717a;margin-bottom:5px}.field textarea,.field input{width:100%;padding:11px;border:1px solid #d7ccbb;border-radius:12px;background:#fff}
.mapfake{position:relative;height:430px;border-radius:22px;background:
linear-gradient(30deg,rgba(62,126,96,.18),transparent 36%),
linear-gradient(#dceaf1,#c8dfea 45%,#d9e5d7 46%,#eae5d6);overflow:hidden;border:1px solid #d7ccbb}
.mapfake:before{content:"ESPAÑA";position:absolute;left:24px;bottom:22px;letter-spacing:.25em;color:#778993;font-family:Georgia,serif}
.pin{position:absolute;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:white;border:3px solid white;box-shadow:0 4px 10px rgba(0,0,0,.18);font-size:.72rem;font-weight:800}
.notice{font-size:.76rem;color:#6c7780;background:#f4eee2;border-radius:12px;padding:10px;margin-top:10px}
.footer-note{font-size:.7rem;color:#7d878e;padding:14px 18px 28px}
@media(min-width:700px){body{padding:24px}.app{border-radius:28px;overflow:hidden;min-height:calc(100vh - 48px)}}

/* Identidad oficial Pasaporte Gaudí */
.brand-logo{display:flex;align-items:center;justify-content:center;flex:1}
.brand-logo img{display:block;height:34px;width:auto;max-width:220px;object-fit:contain}
.hero-logo-wrap{display:flex;justify-content:center;align-items:center;padding:4px 0 8px}
.hero-logo{display:block;width:min(360px,92%);height:auto;filter:drop-shadow(0 10px 22px rgba(7,54,91,.08))}
@media(max-width:390px){
  .brand-logo img{height:30px;max-width:190px}
  .hero-logo{width:96%}
}