/* ── Villa login (#637) — page-scoped on top of site tokens ─────────────── */
    /* ya dentro: fuera el título de la puerta; y la dirección larga no hace falta para entrar (27-sep-2026) */
    body.in-villa .v-title, body.in-villa .v-sub{display:none}
    #login-ss58{display:none}
    .villa-wrap{max-width:680px;margin:0 auto;padding:6.5rem 1.25rem 6rem}
    @media (max-width:700px){.villa-wrap{padding-top:7.5rem}}  /* clear the two-row nav (2026-09-27) */
    .villa-card{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
      padding:2rem 1.75rem;margin:1.5rem 0}
    .villa-card h2{font-family:var(--serif);color:var(--gold);font-weight:normal;
      font-size:1.35rem;margin:0 0 .75rem;letter-spacing:.02em}
    .villa-card p{color:var(--muted);line-height:1.65;margin:.5rem 0}
    .v-label{display:block;color:var(--muted);font-size:.8rem;letter-spacing:.08em;
      text-transform:uppercase;margin:1.1rem 0 .35rem}
    .v-input, .v-area{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;
      color:var(--ink);padding:.65rem .8rem;font-size:1rem;font-family:var(--sans)}
    .v-area{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;min-height:4.5rem;resize:vertical}
    .v-input:focus,.v-area:focus{outline:none;border-color:var(--gold-soft)}
    .v-btn{display:inline-block;background:transparent;border:1px solid var(--gold);color:var(--gold);
      font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;border-radius:6px;
      padding:.6rem 1.6rem;margin-top:1.2rem;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
    .v-btn:hover:not(:disabled){background:var(--gold);color:var(--bg)}
    .v-btn:disabled{opacity:.35;cursor:not-allowed}
    .v-btn--ghost{border-color:var(--line);color:var(--muted);font-size:.9rem;padding:.45rem 1.1rem}
    .v-btn--ghost:hover{background:transparent;border-color:var(--gold-soft);color:var(--gold-soft)}
    .v-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
    .v-note{font-size:.85rem;color:var(--muted);margin-top:.9rem;line-height:1.55}
    .v-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--ink);
      word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius:6px;
      padding:.6rem .8rem;margin:.4rem 0}
    .v-phrase{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem;margin:.8rem 0}
    .v-phrase span{background:var(--bg);border:1px solid var(--line);border-radius:5px;
      padding:.35rem .5rem;font-size:.85rem;color:var(--ink)}
    .v-phrase b{color:var(--gold-soft);font-weight:normal;margin-right:.35rem;font-size:.75rem}
    .v-status{margin-top:1rem;padding:.7rem .9rem;border-radius:6px;font-size:.9rem;display:none;line-height:1.5;overflow-wrap:anywhere}
    .v-status.ok{display:block;border:1px solid rgba(120,180,120,.4);color:#a8d5a8;background:rgba(60,120,60,.08)}
    .v-status.err{display:block;border:1px solid rgba(155,35,53,.5);color:#e0a3ad;background:rgba(155,35,53,.1)}
    .v-status.info{display:block;border:1px solid var(--line);color:var(--muted);background:var(--bg)}
    .v-warn{border:1px solid rgba(155,35,53,.5);border-radius:8px;background:rgba(155,35,53,.07);
      padding:1rem 1.2rem;margin:1rem 0;color:var(--ink);font-size:.92rem;line-height:1.6}
    .v-warn strong{color:#e0a3ad}
    .v-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.8rem;color:var(--muted);font-size:.9rem}
    .v-check input{margin-top:.25rem;accent-color:var(--gold)}
    .v-handle{font-family:var(--serif);color:var(--gold);font-size:1.4rem;letter-spacing:.03em;word-break:break-all}
    .v-screen{display:none}
    .v-screen.active{display:block}
    .v-tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
    .v-tab{background:none;border:none;color:var(--muted);font-family:var(--serif);font-size:1rem;
      padding:.5rem .9rem;cursor:pointer;border-bottom:2px solid transparent}
    .v-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
    .v-divider{border:none;border-top:1px solid var(--line);margin:1.6rem 0}
    .v-kicker{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;text-align:center}
    .v-title{font-family:var(--serif);color:var(--ink);font-weight:normal;text-align:center;
      font-size:2rem;margin:.4rem 0 .2rem}
    .v-sub{text-align:center;color:var(--muted);font-size:.95rem}
/* CSP: utilidades que sustituyen a los style= inline (el VPS sirve style-src 'self') */
.v-hide{display:none!important}   /* 8-oct-2026: «.place-card .v-btn--gold{display:inline-block}» pesaba más y el botón de sellar no se ocultaba nunca */
.v-center{text-align:center}
.v-left{text-align:left}
.v-handle--sm{font-size:1.05rem}
.v-row--center{justify-content:center;margin-top:.8rem}
    .v-note a{color:var(--gold);text-decoration:underline}

/* ══ 1-oct-2026 — LA PUERTA Y EL MUNDO ══════════════════════════════════════════════════════════════════
   Chief: «cuando inicias sesión debes entrar como a otro mundo, como si traspasases una puerta»; «casi como un
   juego en el navegador: una villa, un lugar donde va creciendo una sociedad, no cajetines».
   Fuera: la puerta (zona-entrada) al fondo. Al firmar: dos hojas se abren con luz (.portal). Dentro: la plaza
   (villa-hero) a pantalla completa, lugares = faroles sobre la escena, viñeta ilustrada al tocarlos, y la vida
   real de la cadena (campana por bloque, crónica, ventanas que se encienden con los vecinos). */

/* fuera: la puerta al fondo */
.door-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,6,13,.55), rgba(5,6,13,.15) 40%, rgba(5,6,13,.6)),
    url(/cueva-entrada.jpg) 68% 60% / cover no-repeat, #05060d}  /* 7-oct-2026: la boca de la cueva (antes paso-montana.svg) */
/* escritorio: la tarjeta va en el centro y tapaba la luz de la cueva → fondo más grande, anclado a la izquierda:
   la boca (≈70 % del ancho de la imagen) cae a la derecha de la tarjeta. */
@media (min-width:900px) and (min-aspect-ratio:4/3){
  .door-bg{background-size:auto, 135% auto, auto;background-position:0 0, 0% 55%, 0 0}
}
.villa-page .villa-wrap{position:relative;z-index:2}
.villa-page .topbar{z-index:20}
.villa-page .villa-card{background:rgba(14,13,20,.9);
  border-color:rgba(212,175,106,.28);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.door-card{padding-top:1.6rem}
.door-crest{display:block;margin:0 auto .4rem;width:64px;height:64px;filter:drop-shadow(0 6px 20px rgba(212,175,106,.35))}
.door-card h2{text-align:center;font-size:1.6rem;margin-bottom:.2rem}
.door-who{margin:.2rem 0 0 !important;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.villa-page .v-handle{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.02em;
  color:var(--gold);overflow-wrap:anywhere;word-break:normal;margin:.5rem 0 .2rem}
.v-btn--gold{background:linear-gradient(180deg,#e6c26a,#d4af6a);color:#0a0a0f;border:0;font-family:var(--sans);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.88rem;padding:.95rem 2rem;border-radius:3px;
  box-shadow:0 12px 36px rgba(212,175,106,.25)}
.v-btn--gold:hover:not(:disabled){background:linear-gradient(180deg,#f0d07c,#e0bb70);color:#0a0a0f}
.door-card .v-btn--gold{display:block;width:100%;margin-top:1.4rem}
@media (max-width:520px){.villa-wrap{padding-left:1rem;padding-right:1rem}.villa-card{padding:1.6rem 1.15rem}}

/* dentro: fuera la cáscara pública, el mundo ocupa la pantalla */
body.in-villa{overflow:hidden;background:#07070b}
body.in-villa .topbar, body.in-villa .door-bg, body.in-villa .v-kicker{display:none !important}
body.in-villa .villa-wrap{max-width:none;padding:0;margin:0}
.world{position:fixed;inset:0;z-index:5;background:#07070b;color:var(--ink)}
.scene-scroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.scene-scroll::-webkit-scrollbar{display:none}
/* 9-oct-2026: la escena cabe SIEMPRE entera en alto (antes se medía por el ancho y en pantallas 16:9 o más anchas se
   cortaba arriba y abajo). Más estrecha que el dibujo (móvil): se desliza a los lados. Más ancha: los lados enseñan el
   mismo valle desenfocado y el dibujo se funde con ellos. */
.scene{position:relative;flex:none;height:100%;width:auto;aspect-ratio:1920/1097;margin:auto}
@media (min-aspect-ratio:1750/1000){
  /* el fondo de los lados es una imagen YA desenfocada (240 px, 6 KB): un filter:blur a pantalla completa junto al
     backdrop-filter de la hoja de Lugares colgaba el render (medido 9-oct-2026) y pesaría en un móvil flojo */
  .world::before{content:"";position:absolute;inset:0;background:url(/villa-valle-fondo.jpg) center / cover no-repeat}
  .scene-img{-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
}
.scene-img{position:absolute;inset:0;background:url(/villa-valle.jpg) center / 100% 100% no-repeat}  /* 7-oct-2026: el VALLE REDONDO (antes villa-hero.jpg, la plaza) */
.scene-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 55%, transparent 50%, rgba(4,4,8,.75) 100%),
    linear-gradient(to bottom, rgba(4,4,8,.55), transparent 16%, transparent 86%, rgba(4,4,8,.45))}
.world.arrive .scene-img{animation:arrive 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{transform:scale(1.07);filter:brightness(1.35) saturate(1.1)}to{transform:none;filter:none}}

/* faroles que titilan sobre las lámparas de la ilustración */
.glow{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,130,.55), rgba(255,180,80,.18) 40%, transparent 70%);
  mix-blend-mode:screen;animation:flicker 3.2s ease-in-out infinite}
.g1{left:28.6%;top:50%}.g2{left:75.8%;top:50%;animation-delay:-.7s}.g3{left:91.1%;top:66%;animation-delay:-1.3s}
.g4{left:93.8%;top:20%;animation-delay:-2s}.g5{left:59.7%;top:45.6%;animation-delay:-.4s}.g6{left:14%;top:92%;width:16%;animation-delay:-1.7s}
@keyframes flicker{0%,100%{opacity:.75}20%{opacity:.95}35%{opacity:.6}55%{opacity:1}70%{opacity:.7}85%{opacity:.9}}
/* ventanas que se encienden con los vecinos (las pone villa.js) */
.win{position:absolute;width:.9%;aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:2px;pointer-events:none;
  background:radial-gradient(circle, rgba(255,232,165,.95), rgba(255,190,90,.45) 50%, transparent 72%);mix-blend-mode:screen;
  opacity:0;transition:opacity 1.6s ease;animation:flicker 4.5s ease-in-out infinite}
.win.lit{opacity:1}
/* brasas que suben */
.embers i{position:absolute;bottom:-2%;width:4px;height:4px;border-radius:50%;background:#ffd27a;
  box-shadow:0 0 8px 2px rgba(255,190,90,.7);opacity:0;animation:ember 9s linear infinite}
.embers i:nth-child(1){left:8%;animation-delay:0s}.embers i:nth-child(2){left:16%;animation-delay:-2s}
.embers i:nth-child(3){left:24%;animation-delay:-4.5s}.embers i:nth-child(4){left:33%;animation-delay:-1s}
.embers i:nth-child(5){left:41%;animation-delay:-6s}.embers i:nth-child(6){left:50%;animation-delay:-3s}
.embers i:nth-child(7){left:58%;animation-delay:-7.5s}.embers i:nth-child(8){left:66%;animation-delay:-5s}
.embers i:nth-child(9){left:74%;animation-delay:-.5s}.embers i:nth-child(10){left:82%;animation-delay:-8s}
.embers i:nth-child(11){left:90%;animation-delay:-3.7s}.embers i:nth-child(12){left:96%;animation-delay:-6.6s}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}60%{opacity:.6}100%{transform:translate(30px,-75vh);opacity:0}}

/* los lugares (9-oct-2026, mapa limpio): solo el farol que late. El nombre sale al pasar, al enfocar con el teclado, al tocar
   (.sel), cuando la lista «Lugares» señala uno (.lit) y unos segundos al llegar (.reveal). El halo ilumina el sitio. */
.spot{position:absolute;transform:translate(-50%,-50%);display:block;background:none;border:0;padding:14px;cursor:pointer;
  color:#f6ecd4;font-family:var(--serif);font-size:15px;letter-spacing:.03em;text-shadow:0 2px 8px #000, 0 0 2px #000;z-index:3;
  -webkit-tap-highlight-color:transparent}
.spot::before{content:"";display:block;width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  background:radial-gradient(circle,#fffaf0 0 28%,#f3d27a 46%,#b8862f 74%);border:2px solid rgba(255,244,214,.95);
  box-shadow:0 0 0 3px rgba(8,6,4,.6), 0 0 18px 6px rgba(240,200,110,.7);animation:beacon 2.2s ease-out infinite;
  position:relative;z-index:1;transition:transform .3s}
.spot::after{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;background:radial-gradient(circle, rgba(255,226,150,.30), rgba(255,200,110,.10) 45%, transparent 70%);
  opacity:0;transition:opacity .35s, transform .35s;pointer-events:none}
.spot > span{position:absolute;left:50%;top:calc(100% - 4px);transform:translate(-50%,-6px);opacity:0;pointer-events:none;
  background:rgba(8,8,12,.86);border:1px solid rgba(212,175,106,.5);border-radius:999px;padding:5px 13px;white-space:nowrap;
  transition:opacity .25s, transform .25s}
.spot:hover > span, .spot:focus-visible > span, .spot.sel > span, .spot.lit > span, .scene.reveal .spot > span{opacity:1;transform:translate(-50%,0)}
.spot:hover::after, .spot:focus-visible::after, .spot.sel::after, .spot.lit::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.spot:hover::before, .spot:focus-visible::before, .spot.sel::before, .spot.lit::before{transform:scale(1.35)}
.spot.sel > span, .spot.lit > span{background:rgba(212,175,106,.94);color:#0a0a0f;border-color:#e6c26a;text-shadow:none}
.spot:focus-visible{outline:none}
.spot > span small{display:block;max-width:240px;white-space:normal;font-style:italic;font-size:12px;line-height:1.3;
  opacity:.85;margin-top:2px;text-align:center}
.spot > span{text-align:center;width:max-content;max-width:250px;white-space:normal}
.spot.sel > span small{display:none}   /* con el dedo, la frase ya sale en la ficha de abajo */
.spot.sel > span small, .spot.lit > span small{opacity:.8}
.scene.reveal .spot > span small{display:none}
.scene.reveal .spot > span{transition-delay:.9s}
@keyframes beacon{0%{box-shadow:0 0 0 3px rgba(8,6,4,.6),0 0 18px 6px rgba(240,200,110,.7),0 0 0 3px rgba(255,226,150,.65)}100%{box-shadow:0 0 0 3px rgba(8,6,4,.6),0 0 18px 6px rgba(240,200,110,.7),0 0 0 22px rgba(255,226,150,0)}}
.spot-banco{left:7.5%;top:49%}.spot-forja{left:28.6%;top:49%}.spot-red{left:37.6%;top:32%}.spot-foro{left:49.5%;top:57.5%}
.spot-campana{left:51.2%;top:22%}.spot-mercado{left:75.8%;top:52.4%}.spot-camerino{left:93.8%;top:18.2%}
.spot-corro{left:14%;top:86%}.spot-consejo{left:91.1%;top:59.2%}.spot-notario{left:59.7%;top:43.8%}
/* los de los BORDES abren el nombre hacia DENTRO para que no se corte (el farol no se mueve) */
.spot-banco > span{left:0;transform:translate(0,-6px)}
.spot-camerino > span{left:auto;right:0;transform:translate(0,-6px)}
.spot-banco:hover > span,.spot-banco:focus-visible > span,.spot-banco.sel > span,.spot-banco.lit > span,.scene.reveal .spot-banco > span,
.spot-camerino:hover > span,.spot-camerino:focus-visible > span,.spot-camerino.sel > span,.spot-camerino.lit > span,.scene.reveal .spot-camerino > span{transform:translate(0,0)}
.spot-corro > span{top:auto;bottom:calc(100% - 4px)}
.scene.ring .spot-campana::before{animation:ring 1.4s ease-out 2}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,236,170,.9),0 0 30px 10px rgba(230,194,106,.8)}100%{box-shadow:0 0 0 46px rgba(255,236,170,0),0 0 30px 10px rgba(230,194,106,.4)}}

/* HUD: arriba la villa, tu máscara y salir; abajo la crónica */
.hud{position:absolute;left:0;right:0;z-index:8;display:flex;align-items:center;gap:12px;padding:12px clamp(12px,3vw,28px)}
.hud-top{top:0;justify-content:space-between;background:linear-gradient(to bottom, rgba(5,5,9,.85), transparent)}
.hud-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;color:var(--gold);letter-spacing:.04em;text-shadow:0 2px 8px #000}
.hud-brand img{filter:drop-shadow(0 2px 8px rgba(212,175,106,.4))}
.hud-mask{display:flex;align-items:center;gap:8px;min-width:0;max-width:46vw;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  color:#f0e4c4;background:rgba(8,8,12,.6);border:1px solid rgba(212,175,106,.3);border-radius:999px;padding:6px 12px}
.hud-mask #shell-handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#7fd18b;box-shadow:0 0 8px #7fd18b}
.hud-leave{flex:none;background:rgba(8,8,12,.6);color:var(--muted);border:1px solid rgba(233,228,214,.2);border-radius:999px;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer}
.hud-leave:hover{color:var(--ink);border-color:var(--gold-soft)}
.world-exp{display:none}
.chronicle{position:absolute;left:50%;bottom:max(14px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;max-width:min(680px, calc(100vw - 24px));padding:10px 18px;border-radius:999px;
  background:rgba(8,8,12,.85);border:1px solid rgba(212,175,106,.3);
  font-family:var(--serif);font-style:italic;font-size:14.5px;color:#e9dcc0;text-align:center;line-height:1.4}
.chr-bell{font-style:normal;font-size:15px;opacity:.85}
.chronicle.ring .chr-bell{animation:swing .5s ease-in-out 4}
@keyframes swing{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg)}75%{transform:rotate(-18deg)}}
.pan-hint{display:none;position:absolute;left:50%;top:66px;transform:translateX(-50%);z-index:7;margin:0;font-family:var(--sans);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,228,196,.75);text-shadow:0 1px 6px #000;
  animation:fadeHint 6s ease 1.5s both}
@keyframes fadeHint{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}

/* la viñeta de un lugar */
.place{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(3,3,6,.72)}   /* sin blur: los faroles animados debajo lo recalculaban en cada fotograma (9-oct-2026) */
.place[hidden]{display:none}
.place-card{position:relative;width:min(520px,100%);max-height:calc(100svh - 32px);overflow:auto;border-radius:14px;
  background:#0f0d15;border:1px solid rgba(212,175,106,.35);box-shadow:0 40px 100px -20px #000;animation:unfold .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes unfold{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.place-img{aspect-ratio:16/9;background:center / cover no-repeat;border-bottom:1px solid rgba(212,175,106,.25);position:relative}
.place-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, transparent 55%, #0f0d15)}
.pi-banco{background-image:url(/zona-banco.jpg)}.pi-mercado{background-image:url(/zona-mercado.jpg)}
.pi-foro{background-image:url(/zona-foro.jpg)}.pi-red{background-image:url(/zona-tablon.jpg)}
.pi-corro{background-image:url(/zona-chat.jpg)}.pi-consejo{background-image:url(/zona-consejo-h.png)}
/* 7-oct-2026: forja, campana y camerino recortan el VALLE (la misma escena que pisas), no la plaza vieja */
.pi-camerino{background-image:url(/villa-valle.jpg);background-position:99% 13%;background-size:420%}.pi-forja{background-image:url(/villa-valle.jpg);background-position:25.5% 48%;background-size:380%}
.pi-campana{background-image:url(/villa-valle.jpg);background-position:51.5% 18%;background-size:520%}
.place-body, .forja-body{padding:4px 22px 22px;text-align:center}
.forja-body{text-align:left}
.forja-body[hidden], .place-body[hidden]{display:none}
.place-card h2{font-family:var(--serif);font-weight:normal;color:var(--gold);font-size:1.6rem;margin:0 0 .4rem;text-align:center}
.place-card p{color:var(--muted);line-height:1.6;margin:.4rem 0}
.place-live{font-style:italic;color:#e9dcc0 !important;font-size:.92rem}
.place-live:empty{display:none}
.place-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,175,106,.4);
  background:rgba(8,8,12,.7);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.place-card .v-btn--gold{display:inline-block;margin-top:1rem;min-width:200px}
.forja-body code{font-size:.8rem;color:var(--gold-soft);overflow-wrap:anywhere}
.forja-body .v-row .v-btn{margin-top:.8rem}

/* el paso de la cueva (9-oct-2026, rehecho: Chief vio fea la de degradados). Con las ilustraciones de verdad: la imagen de
   la cueva avanza hacia su boca de luz (la boca está en el 68 % / 52 % de la imagen; con background-position en esos mismos
   porcentajes cae en ese punto de CUALQUIER pantalla, así que el zoom va justo hacia ella), la luz cálida de dentro te
   envuelve y debajo se asienta el valle. 2,2 s, sin destello blanco. */
.portal{position:fixed;inset:0;z-index:100000;pointer-events:none;overflow:hidden;display:none;background:#05060d}
.portal-img{position:absolute;inset:0;background:url(/cueva-entrada.jpg) 68% 52% / cover no-repeat;transform-origin:68% 52%}
.portal-glow{position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at 68% 52%, rgba(255,214,140,.95) 0, rgba(240,170,80,.75) 22%, rgba(120,70,25,.55) 55%, rgba(20,12,6,.0) 85%)}
.portal.go{display:block;animation:portalOut 2.3s ease both}
.portal.go .portal-img{animation:intoCave 1.75s cubic-bezier(.5,0,.8,.4) .1s both}
.portal.go .portal-glow{animation:caveGlow 1.1s ease-in 1s both}
@keyframes intoCave{0%{transform:scale(1);filter:brightness(.85)}100%{transform:scale(3.4);filter:brightness(1.35) blur(1.5px)}}
@keyframes caveGlow{0%{opacity:0}70%{opacity:1}100%{opacity:1}}
@keyframes portalOut{0%{opacity:0}10%{opacity:1}72%{opacity:1}100%{opacity:0}}

/* HUD derecha: Lugares + Salir */
.hud-right{display:flex;align-items:center;gap:8px;flex:none}
.hud-places{flex:none;background:rgba(8,8,12,.6);color:#f0e4c4;border:1px solid rgba(212,175,106,.38);border-radius:999px;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer}
.hud-places:hover,.hud-places[aria-expanded="true"]{border-color:#e6c26a;color:var(--gold)}
.hud-lang{flex:none;background:rgba(8,8,12,.6);color:#f0e4c4;border:1px solid rgba(212,175,106,.3);border-radius:999px;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;padding:7px 10px;cursor:pointer}
.hud-lang:hover{border-color:#e6c26a;color:var(--gold)}

/* Lista «Lugares» (9-oct-2026): panel a la derecha en pantalla grande, hoja desde abajo en el móvil */
.places{position:absolute;z-index:9;top:64px;right:clamp(12px,3vw,28px);width:min(360px, calc(100vw - 24px));max-height:calc(100% - 140px);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(212,175,106,.45) transparent;background:rgba(10,9,12,.97);border:1px solid rgba(212,175,106,.35);border-radius:16px;padding:14px 10px 10px;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}   /* sin backdrop-filter: con los faroles animados debajo se recalculaba en
  cada fotograma (colgó la captura del móvil, 9-oct-2026) */
.places-h{margin:0 8px 8px;font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.places ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pb{display:grid;gap:2px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:9px 10px;cursor:pointer;color:#f6ecd4;white-space:normal}
.pb-name{font-family:var(--serif);font-size:16px;letter-spacing:.02em}
.pb-tag{font-family:var(--serif);font-style:italic;font-size:13px;color:#b8ab90;line-height:1.35}
.pb:hover,.pb:focus-visible{background:rgba(212,175,106,.14);outline:none}
.pb:hover .pb-name,.pb:focus-visible .pb-name{color:var(--gold)}

/* Ficha del farol tocado (dedo) */
.peek{position:absolute;z-index:9;left:12px;right:12px;bottom:calc(max(12px, env(safe-area-inset-bottom)) + 58px);
  background:rgba(10,9,12,.94);border:1px solid rgba(212,175,106,.45);border-radius:16px;padding:14px 16px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.peek[hidden]{display:none}
.peek-name{margin:0;font-family:var(--serif);font-size:18px;color:var(--gold)}
.peek-desc{margin:0;grid-column:1;font-family:var(--serif);font-style:italic;font-size:13.5px;color:#d8ccb0;line-height:1.35}
.peek-go{grid-column:2;grid-row:1 / span 2;background:linear-gradient(#e6c26a,#c69a43);color:#0a0a0f;border:0;border-radius:999px;
  padding:10px 18px;font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer}

@media (max-width:700px){
  .places{top:auto;right:0;left:0;bottom:0;width:auto;max-height:72svh;border-radius:18px 18px 0 0;
    padding-bottom:max(14px, env(safe-area-inset-bottom))}
  .hud-places{padding:7px 11px}
  .pan-hint{display:block}
  .hud-brand span{display:none}
  .hud-mask{max-width:56vw}
  .spot{font-size:14px}
  .chronicle{font-size:13px;padding:9px 14px;border-radius:14px}
  .place{align-items:flex-end;padding:0}
  .place-card{width:100%;border-radius:16px 16px 0 0;max-height:88svh}
}
@media (prefers-reduced-motion:reduce){
  .glow,.win,.embers i,.spot::before,.world.arrive .scene-img,.pan-hint,.portal-img,.portal-glow{animation:none !important}
  .embers{display:none}
  .portal{display:none !important}
}

/* El Notario (1-oct-2026): pactos firmados sin que el texto salga del dispositivo */
.pi-notario{background-image:url(/zona-tablon.jpg);background-position:center 30%}
.notario-body .v-tabs{margin-top:1rem}
.notario-body .v-tab{font-size:.95rem}
.pact-sig{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;overflow-wrap:anywhere;color:var(--ink)}
.pact-ok{color:#a8d5a8}.pact-bad{color:#e0a3ad}