/* /a/<id> — la aventura dibujándose sobre el mundo (renglones 0d y 0e). */
body.ver{overflow:hidden;height:100%;background:#0a1030}
#mapa{position:fixed;inset:0}
#clima-capa{position:fixed;inset:0;pointer-events:none;z-index:2}
#clima-capa.niebla{background:radial-gradient(ellipse at 50% 60%,rgba(236,232,220,.1),rgba(236,232,220,.62) 95%)}
#clima-capa.lluvia::after,#clima-capa.nieve::after{content:"";position:absolute;inset:-10%;opacity:.5}
#clima-capa.lluvia::after{background:repeating-linear-gradient(104deg,rgba(255,255,255,0) 0 7px,rgba(220,235,255,.5) 7px 8px);animation:caer 1s linear infinite}
#clima-capa.nieve::after{background:radial-gradient(circle,rgba(255,255,255,.85) 1.2px,rgba(255,255,255,0) 2px) 0 0/34px 34px;animation:nevar 7s linear infinite}
@keyframes caer{to{transform:translateY(90px)}}
@keyframes nevar{to{transform:translate(18px,220px)}}
@media (prefers-reduced-motion:reduce){#clima-capa::after{animation:none}}

/* rótulo de apertura */
#rotulo{position:fixed;inset:0;z-index:12;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(10,16,48,.1),rgba(10,16,48,.55));animation:abre .9s ease both}
#rotulo.cierra{animation:cierra .9s ease both}
@keyframes abre{from{opacity:0}to{opacity:1}}
@keyframes cierra{to{opacity:0;transform:scale(1.06)}}
.rot-caja{background:linear-gradient(#fff6e0,#f0dfb6);border:4px solid #4a2e14;border-radius:18px;padding:22px 26px;
  max-width:min(88vw,520px);text-align:center;box-shadow:0 8px 0 #7a5326,0 22px 50px rgba(0,0,0,.5);transform:rotate(-1deg)}
.rot-caja h1{font-family:var(--font-display);font-size:clamp(23px,6.4vw,38px);margin:6px 0 8px;line-height:1.1}
.rot-autor{font-size:16px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.rot-cuando{font-size:18px;color:var(--muted);font-style:italic}

/* narración */
#narra{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:11;text-align:center;pointer-events:none}
#narra span{display:inline-block;background:rgba(30,20,8,.74);color:#fff6e0;font-size:17px;padding:9px 16px;border-radius:14px;
  max-width:88vw;backdrop-filter:blur(3px)}
/* «Saltar ›» vivía arriba a la derecha, que es justo donde `pantalla.css` pone el botón de pantalla completa
   (#pc-btn.flotante): se encimaban y sólo se leía «Sal…». Además, arriba a la derecha es la esquina más lejos
   del pulgar en una pantalla de 844 px. Se baja al pulgar, y la narración sube para no quedar debajo. */
#saltar{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(48px + env(safe-area-inset-bottom,0px));z-index:13;
  appearance:none;border:2px solid #4a2e14;background:rgba(247,238,217,.92);color:#33230f;font:inherit;font-size:16px;
  border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer}

/* polaroids */
.pol{width:106px;transform:translate(var(--ox,0px),var(--oy,0px)) rotate(calc(var(--g,-4deg) + var(--gk,0deg))) scale(.2);opacity:0;transition:transform .5s cubic-bezier(.2,1.5,.4,1),opacity .4s;
  background:#fffdf5;padding:6px 6px 22px;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.45);cursor:pointer}
.pol.ver{transform:translate(var(--ox,0px),var(--oy,0px)) rotate(calc(var(--g,-4deg) + var(--gk,0deg))) scale(var(--s,1));opacity:1}
.pol.mini{z-index:1}
.pol.mini b{display:none}
.pol.mini{padding-bottom:8px}
.pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e6d3a8}
.pol b{display:block;font-family:var(--font-body);font-size:12px;line-height:1.15;color:#5a3a1c;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viajero{width:46px;height:46px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));animation:brinca .62s ease-in-out infinite alternate}
@keyframes brinca{to{transform:translateY(-5px)}}
.amiguito{width:34px;height:34px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));opacity:.95}
@media (prefers-reduced-motion:reduce){.viajero{animation:none}}

/* hoja de abajo */
/* Tres alturas, y abre en la de en medio. Abría en 86vh: de los 844 px del teléfono le dejaba 118 px al
   mapa, así que la aventura que uno acaba de ver dibujarse quedaba tapada justo al terminar de dibujarse.
   54vh (456 px) casa con el hueco que `encuadrar()` ya reserva abajo (innerHeight·0.36) para encuadrar la
   ruta: la ruta cae en la mitad de arriba y la hoja ocupa la de abajo, sin pisarse. El asa va rotando
   medio → alto → mínimo. */
#hoja{position:fixed;left:0;right:0;bottom:0;z-index:14;background:var(--panel-solid);border-top:3px solid #4a2e14;
  border-radius:20px 20px 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.4);max-height:54vh;overflow:auto;
  animation:sube .5s cubic-bezier(.2,.9,.3,1) both;padding-bottom:env(safe-area-inset-bottom,0px);
  transition:max-height .28s ease}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
#hoja.alto{max-height:88vh}
#hoja.min{max-height:116px;overflow:hidden}
/* El asa es el único control de la hoja: tiene que tener blanco de toque de verdad (antes era un div de
   6 px de alto, imposible de pegarle con el pulgar y sin teclado). */
.asa{display:block;width:100%;height:30px;border:0;background:none;padding:0;cursor:grab;appearance:none}
.asa::before{content:"";display:block;width:56px;height:6px;border-radius:4px;background:#c9b48c;margin:12px auto 0}
.asa:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.hoja-dentro{padding:4px 16px 18px;max-width:620px;margin:0 auto}
.enc{display:flex;gap:12px;align-items:center}
.enc-txt{flex:1;min-width:0}
.enc h2{font-family:var(--font-display);font-size:22px;margin:0;line-height:1.15}
.enc p{margin:2px 0 0;color:var(--muted);font-size:16px}
.av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:2px solid #4a2e14;background:#e6d3a8;display:grid;place-items:center;overflow:hidden}
.av svg{width:34px;height:34px}
.anillo{position:relative;width:48px;height:48px;flex:0 0 48px;appearance:none;background:none;border:0;cursor:pointer}
.anillo svg{width:48px;height:48px;transform:rotate(-90deg)}
.anillo .pista{fill:none;stroke:#ddcba3;stroke-width:5}
.anillo .arco{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .6s}
.anillo b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:13px}
#h-frase{margin:12px 0 0;font-size:19px;font-style:italic}
#h-datos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0}
#h-datos li{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:16px}
#h-insignia{margin-top:14px;border:3px solid #4a2e14;background:linear-gradient(#fff6e0,#f3e3bd);border-radius:16px;padding:12px 14px;
  display:flex;gap:12px;align-items:center}
#h-insignia svg{width:46px;height:46px;flex:0 0 46px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.pill3{appearance:none;border:2px solid #4a2e14;background:var(--panel);color:var(--fg);font:inherit;font-size:17px;
  border-radius:13px;min-height:48px;padding:0 16px;box-shadow:var(--shadow);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center}
.grande.chica{min-height:52px;font-size:19px;max-width:none}
#pie{margin:12px 0 0}

/* tarjetas de detalle */
#cartas{position:fixed;inset:0;z-index:20;background:rgba(20,13,4,.55);display:grid;place-items:end center;padding:0}
.carta{position:relative;width:100%;max-width:620px;background:var(--panel-solid);border-top:3px solid #4a2e14;
  border-radius:20px 20px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow:auto;
  animation:sube .36s cubic-bezier(.2,.9,.3,1) both}
.carta h3{font-family:var(--font-display);font-size:23px;margin:4px 0 4px}
.carta-paso{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cerrar{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:2px solid #4a2e14;
  background:var(--panel);font-size:22px;line-height:1;cursor:pointer}
.carta-pie{display:flex;gap:10px;align-items:center;margin-top:18px}
.carta-pie .grande{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{appearance:none;border:2px solid #4a2e14;background:var(--panel);font:inherit;font-size:17px;border-radius:999px;
  min-height:46px;padding:0 15px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.estrellas{display:flex;gap:6px;margin:10px 0}
.estrellas button{appearance:none;border:0;background:none;font-size:34px;line-height:1;cursor:pointer;color:#c9b48c;padding:2px 4px}
.estrellas button.on{color:#d79a2b}
.minifotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin:10px 0}
.minifotos figure{margin:0;position:relative}
.minifotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:2px solid #4a2e14;display:block}
.minifotos figure[aria-pressed="true"] img{outline:3px solid var(--accent);outline-offset:2px}
.minifotos input{width:100%;margin-top:4px;font:inherit;font-size:15px;border:2px solid #4a2e14;border-radius:8px;padding:6px 8px;background:#fffaec}
.grabar{display:flex;gap:10px;align-items:center;margin:10px 0}
.grabar .pill3.rec[aria-pressed="true"]{background:#c0392b;color:#fff6e0}

/* Renglón 14 (25-oct): #hoja y #cartas viven dentro de la hoja única (assets/hoja.js) cuando está presente. */
.hn-vista>#hoja.hn-adoptado>.asa{display:none}
.hn-vista>#hoja.hn-adoptado .hoja-dentro{padding:0 2px 10px;max-width:none}
.hn-vista>#hoja.hn-adoptado .enc{display:none}   /* el título y el autor ya van en la cabecera de la hoja */
.hn-vista>#hoja.hn-adoptado #h-frase{margin-top:4px}
.hn-vista>#cartas.hn-adoptado{display:block!important;place-items:unset}
.hn-vista>#cartas.hn-adoptado .carta{max-width:none;border:0;border-radius:0;padding:4px 2px 10px;max-height:none;animation:none;box-shadow:none;background:transparent}
.hn-vista>#cartas.hn-adoptado .carta .cerrar,.hn-vista>#cartas.hn-adoptado .carta h3,.hn-vista>#cartas.hn-adoptado .carta-paso{display:none}

/* ══ UX familiar (renglón 18, 25-oct-2026) ══ botones de una familia dentro de la hoja final y las tarjetas:
   cápsulas grises sin borde (HIG «gray button»), chips de filtro como Apple Maps, bordes de 1 px. El rótulo de
   apertura (.rot-caja) se queda tal cual: es el letrero del sendero, identidad del mundo, no interfaz. */
.pill3{border:0;background:var(--ux-press,rgba(74,46,20,.08));color:var(--ux-acento,var(--accent));box-shadow:none;border-radius:var(--ux-radio,12px);font:600 17px/1.2 var(--ux-font,system-ui);min-height:44px;padding:0 16px}
.chip{border:0;background:var(--ux-press,rgba(74,46,20,.08));color:var(--ux-fg,var(--fg));font:600 17px/1 var(--ux-font,system-ui);min-height:44px}
.chip[aria-pressed="true"]{background:var(--ux-acento,var(--accent));color:var(--ux-acento-fg,var(--accent-fg))}
#h-frase{font-family:var(--font-body)}            /* la frase de la persona: serif, es lectura */
#h-datos li{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,var(--chip));font:17px/1.2 var(--ux-font,system-ui);min-height:36px;display:inline-flex;align-items:center}
#h-insignia{border:1px solid var(--ux-acento,var(--accent));background:var(--ux-card,#fff6e0);border-radius:var(--ux-radio,12px)}
.av{border-width:1px}
.anillo b{font-family:var(--ux-font,system-ui);font-weight:700}
.enc p,#pie,.chico{font-family:var(--ux-font,system-ui)}
#saltar{font:600 17px/1 var(--ux-font,system-ui)}
.cerrar{border-width:1px}
.carta h3{font-family:var(--ux-font,system-ui);font-weight:700}
.carta-paso{font-family:var(--ux-font,system-ui);font-size:13px}
.minifotos img{border-width:1px}
.minifotos input{border:1px solid var(--ux-borde,#4a2e14);font:17px var(--ux-font,system-ui);min-height:44px}
.estrellas button{min-width:44px;min-height:44px}