/* Peregrina — identidad Egeria: dorado #C9A227, terracota #B5482B. Glass + dual theme. */
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;
  src:url(fonts/atkinson-400.woff2) format("woff2");}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;
  src:url(fonts/atkinson-700.woff2) format("woff2");}

:root{
  --bg:#1A1A18; --panel:#26251f; --panel2:#2e2d26; --line:rgba(201,162,39,.35);
  --gold:#C9A227; --terra:#B5482B; --ink:#efece2; --mut:#a9a698;
  --glass:rgba(30,29,25,.68); --glass-line:rgba(201,162,39,.28);
  --shadow:0 8px 28px rgba(0,0,0,.5); --on-gold:#1A1A18;
  --safe-b:env(safe-area-inset-bottom,0px);
}
body[data-theme=light]{
  --bg:#F5F1E6; --panel:#FFFDF7; --panel2:#efe8d6; --line:rgba(154,120,20,.35);
  --gold:#9A7814; --terra:#B5482B; --ink:#2B2820; --mut:#6f6a5c;
  --glass:rgba(250,247,238,.72); --glass-line:rgba(154,120,20,.25);
  --shadow:0 8px 28px rgba(80,65,20,.18);
}
*{box-sizing:border-box;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--ink);display:flex;flex-direction:column;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:1rem;line-height:1.55;
  transition:background .35s,color .35s;}

/* ── header (glass) ── */
.top{display:flex;align-items:center;gap:8px;padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--glass-line);background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  position:relative;z-index:20;}
.top h1{font-size:1.1rem;margin:0;flex:1;letter-spacing:.5px;color:var(--gold);font-weight:700;}
.shell{filter:drop-shadow(0 0 2px rgba(201,162,39,.5));}
.iconbtn{background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--gold);
  font-size:1.05rem;width:44px;height:44px;min-width:44px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:transform .15s,background .25s;}
.iconbtn:active{transform:scale(.92);}
select.iconbtn{width:auto;min-width:64px;padding:0 8px;font:inherit;font-size:.85rem;
  color:var(--ink);font-weight:700;appearance:none;-webkit-appearance:none;text-align:center;}

/* ── drawer (glass) ── */
.drawer{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));right:10px;z-index:30;
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--glass-line);border-radius:16px;padding:8px;
  box-shadow:var(--shadow);min-width:240px;
  animation:pop .22s cubic-bezier(.2,1.2,.4,1);transform-origin:top right;}
.drawer a{display:block;color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:10px;min-height:44px;}
.drawer a:hover,.drawer a:focus-visible{background:var(--panel2);color:var(--gold);}
.drawer .credits{font-size:.7rem;color:var(--mut);padding:8px 14px 4px;margin:0;border-top:1px solid var(--glass-line);}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(-6px);}to{opacity:1;transform:none;}}

/* ── main + views ── */
main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;}
.view{padding:18px 16px calc(20px + var(--safe-b));max-width:640px;margin:0 auto;
  animation:viewin .3s cubic-bezier(.2,.9,.3,1);}
@keyframes viewin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.view h2{color:var(--gold);font-size:1.05rem;letter-spacing:.5px;margin:4px 0 16px;}
#view-map{padding:0;max-width:none;height:100%;display:flex;flex-direction:column;animation:none;}
/* display:flex le gana al atributo hidden — gotcha F20; con ID para superar #view-map */
#view-map[hidden],.view[hidden]{display:none;}
.muted{color:var(--mut);}
.label{font-size:.8rem;color:var(--mut);margin:12px 0 6px;}

.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:16px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:background .35s;}
.card h3{margin:0 0 8px;font-size:1rem;color:var(--ink);}
.hint{font-size:.78rem;color:var(--mut);margin:10px 0 0;}

/* tarjetas con foto de fondo */
.card-photo{position:relative;overflow:hidden;isolation:isolate;border-color:transparent;}
.card-photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--photo);background-size:cover;background-position:center;}
.card-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,19,15,.55) 0%,rgba(20,19,15,.82) 55%,rgba(20,19,15,.94) 100%);}
.card-photo,.card-photo .muted,.card-photo h3{color:#f3efe4;}
.card-photo .muted{color:#cfcaba;}
.card-photo .hint{color:#b8b3a2;}
.card-photo-soft::after{background:linear-gradient(180deg,rgba(20,19,15,.72),rgba(20,19,15,.9));}
body[data-theme=light] .card-photo::after{
  background:linear-gradient(180deg,rgba(20,19,15,.45) 0%,rgba(20,19,15,.75) 60%,rgba(20,19,15,.9) 100%);}

/* variantes de camino */
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid rgba(255,255,255,.25);
  border-radius:12px;margin-bottom:8px;cursor:pointer;min-height:44px;
  background:rgba(20,19,15,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;}
.opt input{accent-color:#C9A227;margin-top:5px;width:18px;height:18px;}
.opt small{color:#cfcaba;}
.opt-soon{opacity:.55;}
.opt:has(input:checked){border-color:#C9A227;background:rgba(201,162,39,.16);}
.cta{display:block;width:100%;background:#C9A227;color:#1A1A18;border:none;border-radius:12px;
  padding:14px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;margin-top:10px;min-height:48px;
  transition:transform .15s,filter .2s;box-shadow:0 4px 14px rgba(201,162,39,.3);}
.cta:hover{filter:brightness(1.08);}
.cta:active{transform:scale(.98);}

/* ── mapa ── */
#map{flex:1;min-height:0;}
.hud{position:absolute;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);z-index:6;
  background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--glass-line);border-radius:16px;padding:10px 18px;
  text-align:center;min-width:210px;box-shadow:var(--shadow);}
.hud[hidden]{display:none;}
.hud .big{font-size:1.35rem;font-weight:700;color:var(--gold);}
.hud .sub{font-size:.75rem;color:var(--mut);}
.hud .warn{font-size:.75rem;color:#e0885f;display:none;}
.hud.offroute .warn{display:block;}

/* hint "tocá un pueblo" */
.map-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:8px;max-width:88%;
  background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-line);border-radius:999px;padding:8px 16px;
  font-size:.8rem;color:var(--ink);box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,1.2,.4,1);}
.map-hint[hidden]{display:none;}
.map-hint .dot{width:12px;height:12px;border-radius:50%;background:#C9A227;flex-shrink:0;
  animation:pulse 2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.55);}70%{box-shadow:0 0 0 10px rgba(201,162,39,0);}100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}}
/* eco visual en los marcadores: mismo pulso dorado */
.maplibregl-marker{cursor:pointer;}
.maplibregl-marker::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:14px;
  transform:translateX(-50%);border-radius:50%;animation:pulse 2.6s ease-out infinite;pointer-events:none;}

/* panel contextual de área (glass sheet) */
.area{position:absolute;left:0;right:0;bottom:0;z-index:7;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border-top:1.5px solid var(--gold);border-radius:20px 20px 0 0;padding:16px 18px calc(16px + var(--safe-b));
  max-height:45%;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.4);
  animation:sheetup .32s cubic-bezier(.2,1,.3,1);}
@keyframes sheetup{from{transform:translateY(30%);opacity:.4;}to{transform:none;opacity:1;}}
.area[hidden]{display:none;}
.area::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:var(--mut);opacity:.5;margin:0 auto 10px;}
.area h3{margin:0 30px 2px 0;color:var(--gold);font-size:1.1rem;}
.area-close{position:absolute;top:12px;right:10px;background:none;border:none;color:var(--mut);
  font-size:1rem;min-width:44px;min-height:44px;cursor:pointer;}
.area-link{display:block;color:var(--gold);text-decoration:none;padding:9px 0;font-size:.9rem;
  border-top:1px solid var(--glass-line);min-height:44px;display:flex;align-items:center;}
.area-link:hover,.area-link:focus-visible{text-decoration:underline;}
.sleep-item{border-top:1px solid var(--glass-line);padding:9px 0;font-size:.9rem;}
.sleep-item b{color:var(--ink);}
.sleep-item small{color:var(--mut);display:block;}

/* ── hoy ── */
.stage-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
.stage-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.stage-nums div{text-align:center;background:var(--panel2);border-radius:14px;padding:10px 6px 9px;}
.stage-nums b{display:block;font-size:1.25rem;color:var(--gold);line-height:1.25;}
.stage-nums small{color:var(--mut);font-size:.7rem;}
/* llegar es lo importante: el botón de llegada es el protagonista dorado */
.donebtn{border-radius:12px;padding:12px;font:inherit;width:100%;cursor:pointer;min-height:48px;
  margin-top:9px;transition:transform .15s;}
.donebtn:active{transform:scale(.98);}
.donebtn.go{background:var(--gold);color:var(--on-gold);border:none;font-weight:700;font-size:1rem;
  box-shadow:0 4px 14px rgba(201,162,39,.3);}
body[data-theme=light] .donebtn.go{color:#fff;}
.donebtn.undo{background:transparent;border:1px dashed var(--line);color:var(--mut);font-size:.85rem;}

/* barra del camino con estaciones + patito peregrino */
.cbar{position:relative;height:64px;margin:2px 0 14px;}
.cbar-track{position:absolute;left:4%;right:4%;bottom:22px;height:3px;border-radius:2px;
  background:var(--panel2);}
body[data-theme=light] .cbar-track{background:#ddd4bc;}
.cbar-trail{position:absolute;left:6%;bottom:22px;height:3px;border-radius:2px;background:var(--gold);
  transition:width .9s cubic-bezier(.4,0,.3,1);}
.cbar-stop{position:absolute;bottom:8px;transform:translateX(-50%);text-align:center;width:52px;}
.cbar-dot{display:block;width:9px;height:9px;border-radius:50%;margin:0 auto 3px;
  background:var(--panel2);border:1.5px solid var(--mut);transition:background .4s,border-color .4s;
  position:relative;bottom:-3px;}
.cbar-stop.is-done .cbar-dot{background:var(--gold);border-color:var(--gold);}
.cbar-stop:last-child .cbar-dot{background:none;border:none;width:16px;height:16px;color:var(--mut);bottom:6px;margin-bottom:-4px;}
.cbar-stop.is-done:last-child .cbar-dot{color:var(--terra);}
.cbar-label{font-size:.58rem;color:var(--mut);letter-spacing:.2px;}
.cbar-duck{position:absolute;bottom:26px;transform:translateX(-50%);
  transition:left .9s cubic-bezier(.4,0,.3,1);will-change:left;}
.cbar-duck .pduck{overflow:visible;display:block;transform:scaleX(-1);} /* que camine hacia Santiago */
/* el patito SIEMPRE camina (como en el index); .is-running = trote */
.pduck__body{animation:pduckWaddle .55s ease-in-out infinite;transform-origin:22px 34px;}
.is-running .pduck__body{animation-duration:.26s;}
@keyframes pduckWaddle{0%,100%{transform:rotate(-3.5deg) translateY(0);}50%{transform:rotate(3.5deg) translateY(-1.4px);}}
.pduck__foot--a{animation:pduckStepA .55s ease-in-out infinite;transform-origin:17px 39px;}
.pduck__foot--b{animation:pduckStepB .55s ease-in-out infinite;transform-origin:26px 39px;}
.is-running .pduck__foot--a,.is-running .pduck__foot--b{animation-duration:.26s;}
@keyframes pduckStepA{0%,100%{transform:translate(0,0);}50%{transform:translate(-2px,-2.4px);}}
@keyframes pduckStepB{0%,100%{transform:translate(0,-2.4px);}50%{transform:translate(2px,0);}}

/* íconos custom de secciones */
.acc-title{display:inline-flex;align-items:center;gap:10px;}
.cico{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.cico-sos{stroke:var(--terra);}
.sos h3{display:flex;}

/* acordeones */
.card-acc{padding:6px 16px;}
.acc-h{margin:0;}
.acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;
  background:none;border:none;color:var(--ink);font:inherit;font-size:1rem;font-weight:700;
  cursor:pointer;padding:8px 0;text-align:left;}
.acc .chev{color:var(--gold);transition:transform .25s cubic-bezier(.2,1.2,.4,1);font-size:.9rem;}
.acc[aria-expanded=true] .chev{transform:rotate(180deg);}
.acc-panel{overflow:hidden;padding-bottom:10px;animation:accin .25s ease-out;}
@keyframes accin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.acc-panel[hidden]{display:none;}

.checklist,.tips{list-style:none;margin:0;padding:0;}
.checklist li{padding:2px 0;}
.checklist label{display:flex;gap:10px;align-items:center;min-height:40px;cursor:pointer;}
.checklist input{accent-color:var(--gold);width:19px;height:19px;flex-shrink:0;}
.checklist input:checked + span{color:var(--mut);text-decoration:line-through;}
.tips li{padding:7px 0 7px 24px;position:relative;font-size:.92rem;}
/* vieira propia (el emoji 🐚 es un caracol, no la concha del Camino) */
.tips li::before{content:"";position:absolute;left:0;top:10px;width:15px;height:15px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 4.8 10.4a8.6 8.6 0 0 1 14.4 0Z M12 20.5 8.2 8.3M12 20.5V6.6M12 20.5l3.8-12.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 4.8 10.4a8.6 8.6 0 0 1 14.4 0Z M12 20.5 8.2 8.3M12 20.5V6.6M12 20.5l3.8-12.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.wx-day{display:flex;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--glass-line);}
.wx-day:first-child{border-top:none;}
.wx-day .t{margin-left:auto;color:var(--ink);}
.sos-num{color:var(--gold);font-weight:700;font-size:1.2rem;text-decoration:none;margin-right:8px;}
.sos{border-color:rgba(181,72,43,.55);}

/* ── tabs (glass) ── */
.tabs{display:flex;border-top:1px solid var(--glass-line);background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  padding-bottom:var(--safe-b);position:relative;z-index:20;}
.tab{flex:1;background:none;border:none;color:var(--mut);font:inherit;font-size:.72rem;
  padding:8px 4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;
  transition:transform .15s,color .2s;}
.tab .ico{font-size:1.25rem;transition:transform .2s cubic-bezier(.2,1.4,.4,1);}
.tab:active .ico{transform:scale(1.2);}
.tab.active{color:var(--gold);}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px;}

/* maplibre popups en tema */
.maplibregl-popup-content{background:var(--panel);color:var(--ink);border-radius:12px;font-size:.85rem;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;}
.maplibregl-popup-tip{border-top-color:var(--panel)!important;}

/* ── vista Mi camino: hero + explorar ── */
.hero{position:relative;border-radius:22px;overflow:hidden;padding:18px;isolation:isolate;
  box-shadow:0 10px 30px rgba(0,0,0,.25);min-height:290px;display:flex;flex-direction:column;
  justify-content:flex-end;animation:viewin .35s cubic-bezier(.2,.9,.3,1);}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--photo);
  background-size:cover;background-position:center;
  animation:kenburns 26s ease-in-out infinite alternate;} /* la foto respira */
@keyframes kenburns{from{transform:scale(1.02) translate(0,0);}to{transform:scale(1.12) translate(-1.5%,1.5%);}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,17,13,.25) 0%,rgba(18,17,13,.55) 45%,rgba(18,17,13,.92) 100%);}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto;}
.hero-label{font-size:.68rem;letter-spacing:.24em;color:#e9c64a;font-weight:700;
  background:rgba(20,19,15,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(233,198,74,.4);border-radius:999px;padding:7px 13px;}
.hero-name{margin:8px 0 2px;font-size:1.7rem;line-height:1.15;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);}
.hero-sub{margin:0 0 12px;color:#d9d4c4;font-size:.9rem;}
.hero .cta{box-shadow:0 6px 18px rgba(201,162,39,.45);}
.hero .off-btn{background:rgba(20,19,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:rgba(233,198,74,.5);}
.hero .hint{color:#b8b3a2;}
/* anillo de progreso con el patito adentro */
.ring-wrap{position:relative;width:80px;height:80px;display:grid;place-items:center;}
.ring{position:absolute;inset:0;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:5;}
.ring-fg{fill:none;stroke:#e9c64a;stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(233,198,74,.7));transition:stroke-dasharray .8s cubic-bezier(.4,0,.3,1);}
.ring-wrap .pduck{width:38px;height:38px;overflow:visible;transform:scaleX(-1);}

.explore-h{color:var(--gold);font-size:1.05rem;letter-spacing:.5px;margin:22px 0 4px;}
/* fila de datos: qué es esto, de un vistazo */
.stats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 20px;
  padding:2px 16px 6px;}
.stats::-webkit-scrollbar{display:none;}
.stat{flex-shrink:0;font-size:.74rem;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap;}
.rgroup{margin-bottom:18px;}
.rghead{display:flex;align-items:baseline;gap:8px;color:var(--ink);font-size:1.02rem;
  font-weight:700;margin:8px 2px 12px;}
.rgemoji{font-size:1.05rem;}
.rcount{font-size:.68rem;font-weight:700;color:var(--gold);background:rgba(201,162,39,.13);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;letter-spacing:.03em;}
.rrow{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 16px;margin:0 -16px;position:relative;
  scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;}
.rrow::-webkit-scrollbar{display:none;}
.rcard{position:relative;flex:0 0 164px;height:224px;border-radius:20px;overflow:hidden;
  border:2px solid transparent;background:var(--panel);cursor:pointer;padding:0;
  scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;
  font-family:inherit;text-align:left;text-decoration:none;isolation:isolate;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1),border-color .2s,box-shadow .25s;
  box-shadow:0 4px 14px rgba(0,0,0,.18);}
.rcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28);}
.rcard:active{transform:scale(.96);}
.rcard:hover .rcard-img{transform:scale(1.07);}
.rcard.is-active{border-color:var(--gold);box-shadow:0 6px 22px rgba(201,162,39,.4);}
.rcard.is-soon{opacity:.55;cursor:default;}
.rcard-img{position:absolute;inset:0;z-index:-2;background-image:var(--photo);
  background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.rcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,17,13,.03) 26%,rgba(18,17,13,.6) 62%,rgba(18,17,13,.92) 100%);}
.rcard-body{padding:10px 12px;color:#fff;}
.rcard-body b{display:block;font-size:.9rem;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.6);}
.rcard-body small{color:#d5d0bf;font-size:.66rem;line-height:1.3;display:block;margin-top:2px;}
.rcard-meta{display:block;color:#e9c64a;font-size:.7rem;font-weight:700;margin-top:5px;
  letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.rchip{position:absolute;top:8px;right:8px;font-size:.6rem;font-weight:700;letter-spacing:.04em;
  background:rgba(20,19,15,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#e6e2d4;border-radius:999px;padding:4px 9px;border:1px solid rgba(255,255,255,.2);
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rchip-dl{color:#9fe0af;border-color:rgba(159,224,175,.4);}
.rchip-web{color:#e9c64a;border-color:rgba(233,198,74,.4);}
.rchip-active{color:#1A1A18;background:rgba(233,198,74,.95);border-color:transparent;}

/* perfil de altura de la etapa */
.prof{display:block;width:100%;height:auto;margin:6px 0 4px;}
.prof-area{fill:rgba(201,162,39,.16);stroke:none;}
.prof-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.prof-txt{fill:var(--mut);font-size:9px;font-family:inherit;}
#prof-me[hidden]{display:none;} /* hidden no es nativo en SVG */
.prof-me{fill:var(--terra);stroke:var(--panel);stroke-width:1.5;}
.prof-me-halo{fill:none;stroke:var(--terra);stroke-width:1.5;opacity:.5;animation:pulse 2s ease-out infinite;}

/* celebración de llegada */
.cel{text-align:center;padding:8px 4px 4px;}
.cel h3{font-size:1.25rem;color:var(--gold);margin:10px 0 6px;}
.cel-shell{width:64px;height:64px;color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(201,162,39,.55));animation:celglow 2.4s ease-in-out infinite;}
@keyframes celglow{0%,100%{filter:drop-shadow(0 0 6px rgba(201,162,39,.35));transform:scale(1);}
  50%{filter:drop-shadow(0 0 16px rgba(201,162,39,.8));transform:scale(1.06);}}
.cel-nums{color:var(--ink);font-weight:700;margin:4px 0;}

/* descarga offline */
.offline-box{margin-top:12px;}
.off-btn{display:block;width:100%;background:var(--panel2);border:1px solid var(--gold);
  color:#f3efe4;border-radius:12px;padding:12px;font:inherit;font-weight:700;cursor:pointer;min-height:48px;}
.card-photo .off-btn{background:rgba(20,19,15,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.off-btn:disabled{opacity:.85;cursor:progress;}
.off-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin-top:8px;overflow:hidden;}
.off-fill{height:100%;width:0;border-radius:3px;background:var(--gold);transition:width .3s;}
.off-done{color:#8fd0a0;font-weight:700;font-size:.9rem;margin:4px 0 6px;}
.off-del{background:none;border:1px dashed rgba(255,255,255,.35);color:#cfcaba;border-radius:10px;
  padding:8px 12px;font:inherit;font-size:.8rem;cursor:pointer;min-height:40px;}

/* fuegos artificiales de llegada */
.fw{position:fixed;width:7px;height:7px;border-radius:50%;z-index:98;pointer-events:none;
  animation:fwfly 1.5s cubic-bezier(.15,.6,.4,1) forwards;
  box-shadow:0 0 8px rgba(201,162,39,.8);}
@keyframes fwfly{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  70%{opacity:1;}
  100%{transform:translate(var(--dx),calc(var(--dy) + 70px)) scale(.25);opacity:0;}}

/* intro / splash */
.intro{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 20%, #2e2c22 0%, #1A1A18 70%);
  transition:opacity .45s;cursor:pointer;}
/* foto random de un camino, sutil bajo la viñeta */
.intro::before{content:"";position:absolute;inset:0;background-image:var(--splash);
  background-size:cover;background-position:center;opacity:.35;}
.intro::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 25%, rgba(26,26,24,.25) 0%, rgba(26,26,24,.9) 75%);}
.intro-inner,.intro-duck{position:relative;z-index:2;}
.intro.out{opacity:0;pointer-events:none;}
.intro-inner{text-align:center;color:#efece2;animation:introfade 1s ease-out both;}
.intro-inner h2{color:#C9A227;letter-spacing:1px;margin:14px 0 4px;font-size:1.6rem;}
.intro-inner p{color:#a9a698;margin:0;}
.intro-shell{filter:drop-shadow(0 0 14px rgba(201,162,39,.6));animation:celglow 2.4s ease-in-out infinite;}
@keyframes introfade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.intro-duck{position:absolute;bottom:calc(12% + var(--safe-b));left:-60px;animation:introwalk 4.4s linear forwards;}
.intro-duck .pduck{overflow:visible;transform:scaleX(-1);width:44px;height:44px;}
@keyframes introwalk{to{left:calc(100% + 60px);}}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;}
  .intro-duck{left:50%;transform:translateX(-50%);}
}

/* ── navegador de etapas (planificación) ── */
.snavs{display:flex;gap:6px;margin-left:auto;}
.snav{width:36px;height:36px;border-radius:10px;border:none;background:var(--gold);
  color:var(--on-gold);font-size:1.2rem;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.25);}
.snav:disabled{opacity:.35;cursor:default;box-shadow:none;}
.snav:not(:disabled):active{transform:scale(.92);}
.plan-tag{font-size:.66rem;font-weight:700;color:var(--gold);background:rgba(201,162,39,.14);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;vertical-align:2px;margin-left:6px;}

/* ── diario del peregrino ── */
.diary{list-style:none;margin:0;padding:0;}
.diary li+li{border-top:1px solid var(--line);}
.diary-empty{padding:10px 2px;font-size:.86rem;}
.diary-item{display:block;width:100%;background:none;border:none;padding:10px 2px;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--ink);}
.diary-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.diary-head b{font-size:.86rem;}
.diary-head small{color:var(--mut);font-size:.7rem;white-space:nowrap;}
.diary-txt{display:block;font-size:.84rem;margin-top:3px;line-height:1.45;white-space:pre-wrap;}
.diary-txt.muted{font-style:italic;}

/* hoja modal de nota (aparece al marcar etapa) */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(15,14,11,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;animation:sheetbg .25s ease-out;}
.sheet.out{opacity:0;transition:opacity .25s;}
.sheet-card{width:min(560px,100%);background:var(--bg);border-radius:22px 22px 0 0;
  border:1px solid var(--line);border-bottom:none;padding:20px 18px calc(18px + var(--safe-b));
  animation:sheetup .3s cubic-bezier(.2,1.1,.4,1);}
.sheet-card h3{margin:0 0 2px;color:var(--gold);font-size:1.05rem;}
.sheet-card textarea{width:100%;box-sizing:border-box;margin-top:12px;padding:12px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:inherit;
  font-size:.95rem;line-height:1.5;resize:vertical;}
.sheet-card textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.sheet-btns{display:flex;gap:10px;margin-top:12px;}
.sheet-btns .donebtn{flex:1;margin:0;}
@keyframes sheetbg{from{opacity:0;}}
@keyframes sheetup{from{transform:translateY(40%);opacity:.4;}}

/* ── compostela: nombre ── */
.cert-name{display:block;width:100%;box-sizing:border-box;margin:12px 0 2px;padding:11px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-family:inherit;font-size:.95rem;text-align:center;}
.cert-name:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}

/* ── insignia de camino completado ── */
.rchip-done{color:#1A1A18;background:linear-gradient(135deg,#F5D03C,#C9A227);border-color:transparent;}
.rcard.is-finished{border-color:#E9C64A;box-shadow:0 6px 24px rgba(233,198,74,.45);}

/* ── instalación (drawer) ── */
.drawer-install{display:block;width:100%;text-align:left;background:none;border:none;
  border-top:1px solid var(--line);color:var(--gold);font-family:inherit;font-size:.98rem;
  font-weight:700;padding:12px 2px;cursor:pointer;}

/* ── rendimiento: no pintar regiones fuera de pantalla ── */
.rgroup{content-visibility:auto;contain-intrinsic-size:auto 300px;}

/* lamparita de tema (misma del sitio) */
.bulb{display:block;}
.bulb path{fill:none;stroke:currentColor;stroke-width:1.6;}
body[data-theme=light] .bulb-glass{fill:#F5D03C;stroke:#9A7814;}
body[data-theme=light] #theme-btn{box-shadow:0 0 12px rgba(233,198,74,.5);}

/* ── "sobre este camino" + modo explorar ── */
#explore-head{display:flex;align-items:center;gap:10px;margin:2px 0 6px;}
#explore-head[hidden]{display:none;}
#explore-head .explore-h{margin:0;}
.backbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--gold);font-size:1.25rem;line-height:1;cursor:pointer;
  font-family:inherit;flex-shrink:0;}
.backbtn:active{transform:scale(.92);}
.explore-cta{margin-top:2px;} /* sólido dorado (hereda .cta): tiene que verse sin scrollear con fe */
.about-p{margin:0;font-size:.92rem;line-height:1.6;}
.about-list li{font-size:.9rem;}
#about .card-acc{margin-bottom:10px;}

/* lamparita con texto, como en el sitio */
#theme-btn{width:auto;min-width:44px;padding:0 12px;gap:6px;}
.bulb-txt{font-size:.72rem;font-weight:700;letter-spacing:.02em;}
@media (max-width:379px){.bulb-txt{display:none;}#theme-btn{padding:0;width:44px;}}

/* ── GPX ── */
.hero-gpx{display:block;width:100%;margin-top:10px;background:none;border:none;color:#d5d0bf;
  font-family:inherit;font-size:.78rem;cursor:pointer;padding:8px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(233,198,74,.5);}
.hero-gpx:hover{color:#E9C64A;}

/* ── compartir avance ── */
.sharebtn{border-style:solid;}

/* ── banner "seguime" ── */
.follow{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;isolation:isolate;
  border-color:var(--gold);padding:14px 40px 14px 14px;}
.follow .rcard-img{position:absolute;inset:0;z-index:-2;opacity:.35;}
.follow::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--panel) 30%,transparent 130%);}
.follow-body{flex:1;min-width:0;}
.follow-body b{display:block;font-size:.92rem;line-height:1.3;}
.follow-body small{color:var(--mut);font-size:.74rem;}
.follow-bar{height:8px;border-radius:99px;background:var(--panel2);margin:8px 0 4px;overflow:hidden;}
.follow-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#C9A227,#F5D03C);}
.follow .area-close{position:absolute;top:8px;right:8px;}

/* ── filtros: buscador pill + chips con aire ── */
.fbar{margin-bottom:18px;}
.fbar input{width:100%;box-sizing:border-box;padding:13px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:inherit;
  font-size:.95rem;margin-bottom:12px;
  transition:border-color .2s,box-shadow .2s;}
.fbar input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.fbar input::placeholder{color:var(--mut);}
.fchips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 14px;}
.fchips::-webkit-scrollbar{display:none;}
.fchip{flex-shrink:0;font-size:.78rem;font-weight:700;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;min-height:38px;cursor:pointer;font-family:inherit;
  transition:background .2s,color .2s,transform .15s;}
.fchip:active{transform:scale(.95);}
.fchip.on{background:var(--gold);color:var(--on-gold);border-color:transparent;
  box-shadow:0 3px 10px rgba(201,162,39,.35);}
.quiz-cta{display:block;width:100%;background:var(--panel);border:1px solid var(--line);
  color:var(--gold);border-radius:16px;padding:14px;font-family:inherit;font-weight:700;
  font-size:.94rem;cursor:pointer;margin-bottom:2px;transition:border-color .2s,background .2s;}
.quiz-cta:hover{background:var(--panel2);border-color:var(--gold);}
#rnone{margin:10px 2px 0;font-size:.85rem;}

/* ── quiz ── */
.quiz-opts{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.quiz-opts .donebtn{margin:0;text-align:left;border-style:solid;background:var(--panel);
  color:var(--ink);font-size:.95rem;min-height:52px;padding:12px 16px;}
.quiz-opts .donebtn:hover{border-color:var(--gold);color:var(--gold);}
.quiz-res{display:flex;gap:12px;margin:14px 0;}
.quiz-card{flex:1;height:190px;border:2px solid var(--line);}
.quiz-card.rcard:hover{transform:none;}

/* ── cuándo ir (temporada) ── */
.sea-row{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:10px 0 10px;}
.sea-m{text-align:center;font-size:.68rem;font-weight:700;border-radius:9px;padding:8px 0 7px;
  color:var(--mut);background:var(--panel2);position:relative;border:1px solid transparent;}
.sea-2{background:var(--gold);color:var(--on-gold);}
body[data-theme=light] .sea-2{color:#fff;}
.sea-1{background:rgba(201,162,39,.2);color:var(--ink);}
.sea-0{background:transparent;border:1px dashed var(--line);opacity:.55;}
.sea-now::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;
  border-radius:50%;background:var(--terra);transform:translateX(-50%);}
.sea-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;color:var(--mut);margin:0;}
.sea-leg i{font-style:normal;display:inline-flex;align-items:center;gap:6px;}
.sea-leg i::before{content:"";width:11px;height:11px;border-radius:4px;display:inline-block;flex-shrink:0;}
.sea-leg .l2::before{background:var(--gold);}
.sea-leg .l1::before{background:rgba(201,162,39,.25);}
.sea-leg .l0::before{border:1px dashed var(--line);}
.sea-warn{margin:12px 0 0;font-size:.86rem;line-height:1.5;color:#e0885f;
  background:rgba(181,72,43,.1);border:1px solid rgba(181,72,43,.4);border-radius:12px;padding:10px 13px;}
body[data-theme=light] .sea-warn{color:#96401f;}
.sea-card{margin-top:12px;}

/* ── tu vida peregrina (estadísticas) ── */
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.ms-grid div{text-align:center;background:var(--panel2);border-radius:14px;padding:13px 4px 11px;}
.ms-grid b{display:block;font-size:1.3rem;color:var(--gold);line-height:1.2;}
.ms-grid .ms-tr{font-size:.85rem;}
.ms-grid small{color:var(--mut);font-size:.66rem;letter-spacing:.02em;}
@media (max-width:400px){.ms-grid{grid-template-columns:repeat(2,1fr);}}
#mystats[hidden]{display:none;}
#mystats .card{margin-top:14px;}

/* ── luces de albergue: vieiras 1–5 ── */
.stay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
  font-size:.76rem;color:var(--mut);}
.stay-rate{display:inline-flex;gap:0;}
.scal{width:34px;height:34px;min-width:34px;background:none;border:none;cursor:pointer;
  padding:0;position:relative;}
.scal::before{content:"";position:absolute;inset:6px;background:var(--mut);opacity:.35;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 4.8 10.4a8.6 8.6 0 0 1 14.4 0Z M12 20.5 8.2 8.3M12 20.5V6.6M12 20.5l3.8-12.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 4.8 10.4a8.6 8.6 0 0 1 14.4 0Z M12 20.5 8.2 8.3M12 20.5V6.6M12 20.5l3.8-12.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background .15s,opacity .15s,transform .15s;}
.scal.on::before{background:var(--gold);opacity:1;}
.scal:active::before{transform:scale(1.25);}

/* ── exportar diario ── */
.exportbtn{border-style:solid;color:var(--gold);border-color:var(--line);}
.diary-exp{padding:10px 0 4px;border-top:none!important;}
.diary-exp .donebtn{margin:0;}