/* Pantallas de aventura (renglón 0): /a/nueva (contarla) y /a/<id> (verla).
   Teléfono primero: 390×844 de base, texto ≥17 px, toda acción al alcance del pulgar (abajo). */
:root{
  --bg:#eadfc3; --fg:#33230f; --muted:#7a6245; --accent:#8a4b1f; --accent-fg:#fff7e6;
  --panel:rgba(247,238,217,.95); --panel-solid:#f7eed9; --line:#c9b48c; --chip:#ecdcb4; --ok:#4f7a3a;
  --font-display:"Cinzel",Georgia,serif; --font-body:"Crimson Pro",Georgia,serif;
  --radius:14px; --shadow:0 2px 0 #b8a076, 0 8px 24px rgba(60,40,10,.25);
  --pulgar:calc(16px + env(safe-area-inset-bottom,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
/* ⛔ REGLA DE RAÍZ, no cosmética. Todo el JS de estas dos páginas prende y apaga pantallas con el atributo
   `hidden` (`el.hidden = true`), que vale `display:none` con especificidad 0-1-0 — o sea que CUALQUIER regla
   de este archivo que fije `display` sobre un #id o una .clase le gana y el elemento sigue a la vista.
   Sin esta línea quedaban visibles para siempre, entre otros: el rótulo de apertura y el fondo oscuro de las
   tarjetas de detalle ENCIMA de toda la aventura recién dibujada (#rotulo{display:grid}, #cartas{display:grid}),
   la rueda de «Buscando cómo se llama ese lugar…» ya que lo había encontrado (#leyendo{display:flex}), la
   insignia vacía (#h-insignia{display:flex}) y los tres pasos en la pantalla de entrada (.pasos{display:flex}).
   Se arregla aquí una vez y no en cada regla: cualquier `display` que se agregue mañana nace ya cubierto. */
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:18px;line-height:1.38;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
body.contar{background:
  radial-gradient(1200px 600px at 50% -10%, #f6e7c4 0%, rgba(246,231,196,0) 60%),
  var(--bg)}
h1{font-family:var(--font-display);font-size:28px;line-height:1.15;margin:4px 0 6px}
h2{font-family:var(--font-display);font-size:18px;margin:22px 0 8px;font-weight:600}
.bajada{color:var(--muted);margin:0 0 16px}
.chico{font-size:15px;color:var(--muted)}

/* ── cabecera con los tres pasos ── */
#cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:linear-gradient(#eadfc3 88%,rgba(234,223,195,0));}
.atras,.salir{appearance:none;border:2px solid #4a2e14;background:var(--panel);color:var(--fg);font:inherit;font-size:16px;
  border-radius:12px;min-height:44px;min-width:44px;padding:0 12px;box-shadow:var(--shadow);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center}
.atras::before{content:"‹";font-size:28px;line-height:1;margin-top:-4px}
.pasos{flex:1;display:flex;gap:6px;align-items:center;justify-content:center}
/* Los tres pasos hacían de separador (flex:1). En la pantalla de entrada no van, y al esconderlos «Salir»
   se pegaba al botón de atrás, los dos del lado izquierdo. Que se empuje solo. */
.salir{margin-left:auto}
.pasos i{width:34px;height:7px;border-radius:4px;background:#d6c39c;box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}
.pasos i.on{background:var(--accent)}

#lienzo{padding:4px 16px calc(156px + env(safe-area-inset-bottom,0px));max-width:620px;margin:0 auto}
/* OJO: esta animación NO puede tocar `transform`. Con `fill:both`, el fotograma final `transform:none`
   deja el valor COMPUTADO en matrix(1,0,0,1,0,0) — que no es `none` — y eso convierte a .pant en bloque
   contenedor: la barra `.fondo-accion` (position:fixed) dejaba de pegarse al borde de la pantalla y se
   quedaba flotando a media página, encima de los colores (visto el 24-oct en 390×844). El movimiento de
   entrada va en los hijos, que no contienen nada fijo. */
.pant{animation:entra .28s ease both}
@keyframes entra{from{opacity:0}to{opacity:1}}
.pant>h1,.pant>.bajada,.pant>.rejilla-tipos,.pant>.rejilla-arq,.pant>.tarjetona,.pant>.tarjeta-opc{animation:sube-poco .3s ease both}
@keyframes sube-poco{from{transform:translateY(10px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pant,.pant>*{animation:none}}

/* ── campos ── */
.campo{width:100%;font:inherit;font-size:19px;color:var(--fg);background:#fffaec;border:2px solid #4a2e14;
  border-radius:12px;padding:12px 14px;box-shadow:inset 0 2px 0 rgba(150,120,70,.12);min-height:52px}
.campo:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea.campo{resize:vertical;line-height:1.35}
.etq{display:block;font-family:var(--font-display);font-size:16px;margin:18px 0 6px}
.linkish{appearance:none;background:none;border:0;color:var(--accent);font:inherit;font-size:16px;text-decoration:underline;padding:6px 0;cursor:pointer}

/* ── acción principal, pegada al pulgar ── */
.fondo-accion{position:fixed;left:0;right:0;bottom:0;z-index:18;padding:10px 16px var(--pulgar);
  background:linear-gradient(rgba(234,223,195,0),var(--ux-bg,#eadfc3) 45%)}
.grande{display:block;width:100%;max-width:588px;margin:0 auto;appearance:none;border:2px solid #3a2410;
  background:linear-gradient(#a85c26,#8a4b1f);color:var(--accent-fg);font-family:var(--font-display);font-size:21px;
  min-height:60px;border-radius:16px;box-shadow:0 3px 0 #5e3312,0 10px 22px rgba(60,40,10,.3);cursor:pointer}
.grande:active{transform:translateY(2px);box-shadow:0 1px 0 #5e3312}
.grande[disabled]{opacity:.45;box-shadow:none;cursor:default}

/* ── arquetipos y colores ── */
.rejilla-arq{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.arq2{appearance:none;border:2px solid #4a2e14;background:var(--panel-solid);border-radius:14px;padding:8px 4px 6px;
  font:inherit;font-size:15px;color:var(--fg);cursor:pointer;display:grid;justify-items:center;gap:2px;box-shadow:var(--shadow);min-height:96px}
.arq2 svg{width:46px;height:46px}
.arq2[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:#3a2410}
.colores{display:flex;flex-wrap:wrap;gap:12px}
.col{appearance:none;width:52px;height:52px;border-radius:50%;border:3px solid #4a2e14;cursor:pointer;box-shadow:var(--shadow)}
.col[aria-pressed="true"]{outline:3px solid #33230f;outline-offset:3px}

/* ── tipos de aventura ── */
.rejilla-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.tipo{appearance:none;border:2px solid #4a2e14;background:var(--panel-solid);border-radius:16px;padding:12px 6px 10px;color:var(--fg);
  font:inherit;font-size:17px;font-family:var(--font-display);cursor:pointer;display:grid;justify-items:center;gap:6px;
  box-shadow:var(--shadow);min-height:118px}
.tipo svg{width:52px;height:52px}
.tipo span{max-width:100%;text-align:center;line-height:1.08}
/* En 390 px, tres columnas dejan 95 px de ancho útil por casilla y tres palabras del vocabulario no caben:
   «Campamento» mide 119 px en Cinzel 17, «Camioneta» 101 y «Concierto» 100 — se salían por los dos lados,
   encima del borde de su tarjeta. Bajarles la letra las dejaría en 13 px y partirlas con guion ensucia tres
   de las doce. Así que en teléfono la rejilla pasa a DOS columnas con el icono a la izquierda y la palabra
   al lado: cada casilla mide 174 px de ancho y la palabra se queda con 146 px (contra 95), así que las doce
   caben en un renglón a 17 px, el blanco de toque crece — y los doce tipos se siguen viendo de un vistazo,
   sin desplazar. La palabra va DEBAJO del icono, no a su lado: al lado, el icono y su hueco se comen 55 px y
   a «Campamento» le volverían a quedar 91 px (probado: se salía igual).
   El corte va en 479 px y no en 420: con tres columnas la palabra sólo empieza a caber a partir de 455 px
   de pantalla ((W−56)/3 − 12 ≥ 119), así que un iPhone 15 Pro Max (430 px) se quedaba del lado malo. */
@media (max-width:479px){
  .rejilla-tipos{grid-template-columns:repeat(2,1fr);gap:10px}
  /* `min-width:0` no es adorno: un hijo de rejilla mide por su contenido (min-width:auto), así que la
     casilla de «Camioneta» estiraba su columna a 198 px y la segunda columna se salía de la pantalla. */
  .tipo{min-height:96px;padding:10px 8px 8px;gap:4px;min-width:0}
  .tipo svg{width:44px;height:44px}
  .tipo span{min-width:0}
}
.tipo:active{transform:translateY(2px)}
.tipo[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:#3a2410}

/* ── las tres formas de empezar ── */
.tarjetona,.tarjeta-opc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:2px solid #4a2e14;background:var(--panel-solid);border-radius:16px;box-shadow:var(--shadow);
  padding:16px;margin-bottom:12px;cursor:pointer;font:inherit;color:inherit;appearance:none}
.tarjetona{padding:20px 16px;background:linear-gradient(#fff6e0,#f3e3bd);border-width:3px}
.tarjetona .tt b{font-size:21px}
.tt{display:grid;gap:2px}
.tt b{font-family:var(--font-display);font-size:18px;line-height:1.2}
.tt small{font-size:15px;color:var(--muted);line-height:1.3}
.emo{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#e6d3a8;border:2px solid #b8a076}
.emo svg{width:30px;height:30px}
.tarjeta-opc:active,.tarjetona:active{transform:translateY(2px)}

.leyendo{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:17px;color:var(--muted)}
.rueda{width:22px;height:22px;border:3px solid #c9b48c;border-top-color:var(--accent);border-radius:50%;animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.entendi{display:flex;gap:12px;align-items:stretch;border:3px solid #4a2e14;background:#fff6e0;border-radius:16px;
  padding:12px;box-shadow:var(--shadow);margin-top:14px;animation:entra .3s ease both}
.mini{width:104px;flex:0 0 104px;border-radius:12px;overflow:hidden;background:#e6d3a8;border:2px solid #b8a076;min-height:104px}
.entendi-txt{display:grid;gap:3px;align-content:center;min-width:0}
.entendi-txt b{font-family:var(--font-display);font-size:19px;line-height:1.2}
.entendi-txt span{font-size:16px;color:var(--muted)}

/* ── mapa para tocar el lugar ── */
.pant.llena{position:fixed;inset:0;padding:0;margin:0;max-width:none}
#mapa-toca{position:absolute;inset:0}
.sobre-mapa{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;gap:10px;
  padding:14px 16px var(--pulgar);background:linear-gradient(rgba(234,223,195,0),var(--ux-bg,#eadfc3) 40%)}
.sobre-mapa p{margin:0;font-family:var(--font-display);font-size:18px;text-shadow:0 1px 0 #fff6e0}
.fila-mapa{display:flex;gap:8px}
.pill2{appearance:none;border:2px solid #4a2e14;background:var(--panel-solid);color:var(--fg);font:inherit;font-size:16px;
  border-radius:12px;min-height:46px;padding:0 14px;box-shadow:var(--shadow);cursor:pointer}
.pill2[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
#busca-res{list-style:none;margin:0;padding:0;max-height:34vh;overflow:auto;background:var(--panel-solid);
  border:2px solid #4a2e14;border-radius:12px}
#busca-res li{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:17px}
#busca-res li:last-child{border-bottom:0}
.punto-toca{width:22px;height:22px;border-radius:50%;background:#c0392b;border:3px solid #fff6e0;box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* ── tira de fotos ── */
.tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:6px 0 12px}
.tira figure{position:relative;margin:0;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid #4a2e14;background:#e6d3a8}
.tira img{width:100%;height:100%;object-fit:cover;display:block}
.tira .quita{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:2px solid #fff6e0;
  background:rgba(40,25,10,.72);color:#fff6e0;font-size:18px;line-height:1;cursor:pointer}
.tira .sube{position:absolute;inset:0;display:grid;place-items:center;background:rgba(40,25,10,.45);color:#fff6e0;font-size:14px}
.mas-fotos{display:inline-flex;align-items:center;gap:8px;border:2px dashed #8a6a3a;border-radius:12px;padding:12px 16px;
  font-size:17px;cursor:pointer;background:rgba(255,246,224,.6)}
.mas-fotos svg{width:22px;height:22px}

#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(84px + env(safe-area-inset-bottom,0px));
  z-index:40;background:#33230f;color:#fff6e0;padding:12px 18px;border-radius:14px;font-size:17px;max-width:88vw;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 10px 24px rgba(0,0,0,.35)}
#toast.ver{opacity:1;transform:translateX(-50%)}
.invita{margin:0 0 10px;padding:10px 14px;background:#fff6e0;border:2px solid #4a2e14;border-radius:14px;font-size:17px}
.invita b{font-family:var(--font-display)}

@media (min-width:760px){
  #lienzo{padding-top:10px}
  h1{font-size:34px}
}

/* ══ UX familiar (renglón 18, 25-oct-2026 · Ciclonsejo) ══════════════════════════════════════════════════════════
   El flujo de María (/a/nueva) como un formulario de iOS: letra del sistema a 17 px, campos agrupados con borde de
   1 px, botón principal «filled» de 50 pt, casillas de 1 px que se rellenan de acento al elegirlas, chevron «atrás»
   sin caja arriba a la izquierda y «Salir» como texto de acento a la derecha (HIG: Navigation bars, Text fields,
   Buttons). Cinzel se queda SOLO en el <h1> (la pregunta de la pantalla). Tokens en assets/ux-familiar.css. */
body.contar{font-family:var(--ux-font,system-ui);font-size:17px;background:var(--ux-bg,var(--bg))}
body.contar #cab{background:linear-gradient(var(--ux-bg,#eadfc3) 88%,rgba(234,223,195,0))}
.salir{border:0;background:transparent;box-shadow:none;color:var(--ux-acento,var(--accent));font:400 17px/1 var(--ux-font,system-ui);padding:0 6px;min-height:44px}
.pasos i{width:28px;height:5px;background:var(--ux-borde,#d6c39c);box-shadow:none}
.pasos i.on{background:var(--ux-acento,var(--accent))}
.pant h2,.etq{font-family:var(--ux-font,system-ui);font-weight:600;font-size:17px;color:var(--ux-fg,var(--fg));margin:22px 0 8px}
.bajada,.chico,.leyendo,.entendi-txt span,.tt small{font-family:var(--ux-font,system-ui)}
.campo{font-family:var(--ux-font,system-ui);font-size:17px;background:var(--ux-card,#fffaec);border:1px solid var(--ux-borde,#4a2e14);border-radius:var(--ux-radio,12px);box-shadow:none;min-height:50px;padding:12px 14px}
.campo::placeholder{color:var(--ux-fg2,var(--muted));opacity:.75}
.campo:focus{outline:0;border-color:var(--ux-acento,var(--accent));box-shadow:0 0 0 3px rgba(138,75,31,.16)}
.linkish{font-family:var(--ux-font,system-ui);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--ux-acento,var(--accent))}
.grande{border:0;border-radius:var(--ux-radio,12px);background:var(--ux-acento,var(--accent));color:var(--ux-acento-fg,var(--accent-fg));box-shadow:none;font:600 17px/1.2 var(--ux-font,system-ui);min-height:50px}
.grande:active{transform:none;box-shadow:none;opacity:.75}
.grande[disabled]{opacity:.4}
.arq2,.tipo{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,var(--panel-solid));border-radius:var(--ux-radio,12px);box-shadow:none;font-family:var(--ux-font,system-ui);font-size:17px;font-weight:500}
.arq2[aria-pressed="true"],.tipo[aria-pressed="true"]{background:var(--ux-acento,var(--accent));color:var(--ux-acento-fg,var(--accent-fg));border-color:var(--ux-acento,var(--accent))}
.tipo:active,.arq2:active,.tarjeta-opc:active,.tarjetona:active,.col:active{transform:none}
.col{border:1px solid rgba(0,0,0,.12);box-shadow:none}
.col[aria-pressed="true"]{outline:3px solid var(--ux-acento,var(--accent));outline-offset:3px}
.tarjetona,.tarjeta-opc{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,var(--panel-solid));border-radius:var(--ux-radio,12px);box-shadow:none;padding:12px 14px;margin-bottom:10px;min-height:68px}
.tarjetona{border:1px solid var(--ux-acento,var(--accent));padding:14px}
.tt b,.tarjetona .tt b{font-family:var(--ux-font,system-ui);font-weight:600;font-size:17px}
.tt small{font-size:15px}
.emo{width:44px;height:44px;flex-basis:44px;border:0;border-radius:10px;background:var(--ux-press,rgba(74,46,20,.08));color:var(--ux-acento,var(--accent))}
.emo svg{width:26px;height:26px}
.entendi{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);border-radius:var(--ux-radio,12px);box-shadow:none}
.entendi-txt b{font-family:var(--ux-font,system-ui);font-weight:600;font-size:17px}
.mini{border:0;border-radius:10px}
.pill2{border:1px solid var(--ux-borde,#4a2e14);background:var(--ux-card,var(--panel-solid));box-shadow:none;border-radius:var(--ux-radio,12px);font:600 17px/1 var(--ux-font,system-ui);min-height:44px}
.pill2[aria-pressed="true"]{background:var(--ux-acento,var(--accent));color:var(--ux-acento-fg,var(--accent-fg));border-color:var(--ux-acento,var(--accent))}
.sobre-mapa p{font-family:var(--ux-font,system-ui);font-weight:600;text-shadow:none}
#busca-res{border:1px solid var(--ux-borde,#4a2e14);border-radius:var(--ux-radio,12px);background:var(--ux-card,var(--panel-solid))}
#busca-res li{min-height:44px;font-family:var(--ux-font,system-ui)}
.tira figure{border:1px solid var(--ux-sep,var(--line));border-radius:10px}
.tira .quita{border-width:1px}
.mas-fotos{border:1px dashed var(--ux-borde,#8a6a3a);background:var(--ux-card,rgba(255,246,224,.6));font:600 17px/1 var(--ux-font,system-ui);min-height:44px;border-radius:var(--ux-radio,12px)}
.invita{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);border-radius:var(--ux-radio,12px);font-family:var(--ux-font,system-ui)}
.invita b{font-family:var(--ux-font,system-ui);font-weight:700}
#toast{font-family:var(--ux-font,system-ui);border-radius:var(--ux-radio,12px)}

/* ---------- Portal · entrar con la cuenta NTL (26-oct-2026) ----------
   Pantalla completa: cielo pintado según la hora (contar.js pone --cielo-a/--cielo-b y dibuja el SVG), siluetas de
   montañas y una tarjeta de pergamino con los cuatro botones. En teléfono la tarjeta sube desde abajo; en pantalla
   grande flota centrada sobre el paisaje. Sin «solo con tu nombre»: al mundo se entra con la cuenta (Manuel, 26-oct). */
body.portal{overflow:hidden}
body.portal #cab{display:none}
body.portal #lienzo{padding:0;max-width:none}
.portal{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(var(--cielo-a,#7fb6e0),var(--cielo-b,#d9ecf7));overflow:auto;-webkit-overflow-scrolling:touch}
.portal-cielo{position:absolute;inset:0;overflow:hidden}
.portal-cielo svg{position:absolute;left:0;top:0;width:100%;height:56vh;display:block}   /* teléfono: el paisaje vive arriba de la tarjeta */
@media (min-width:720px){.portal-cielo svg{height:100%;top:auto;bottom:0}}
.portal-tarjeta{position:relative;z-index:1;margin:46vh 0 0;background:var(--ux-bg,#f3e9d2);border-radius:26px 26px 0 0;
  padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(30,20,10,.25);
  animation:sube .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.portal-marca{margin:0;font:600 13px/1 var(--ux-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ux-fg2,#6b5739)}
.portal-titulo{font-family:var(--font-display);font-size:34px;line-height:1.1;margin:6px 0 6px;color:#3a2410}
.portal-bajada{margin:0 0 16px;font:17px/1.4 var(--ux-font,system-ui);color:var(--ux-fg,#2b1d0e)}
.portal .invita{margin:0 0 14px}
.portal-pie{margin:14px 0 0;font:13px/1.4 var(--ux-font,system-ui);color:var(--ux-fg2,#6b5739);text-align:center}
@media (min-width:720px){
  .portal{justify-content:center;align-items:center}
  .portal-tarjeta{margin:0;width:min(440px,calc(100% - 48px));border-radius:22px;padding:26px 26px 22px;box-shadow:0 20px 60px rgba(30,20,10,.35)}
  .portal-titulo{font-size:38px}
}
/* ---------- Entrar con la cuenta NTL (26-oct-2026) ---------- */
.entrar-ntl{display:grid;gap:10px;margin:0 0 14px}
.entrar-ntl a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border:1px solid var(--ux-borde,rgba(74,46,20,.28));
  border-radius:var(--ux-radio,12px);background:var(--ux-card,#fbf6ea);color:var(--ux-fg,#2b1d0e);font:600 17px/1.2 var(--ux-font,system-ui);text-decoration:none}
.entrar-ntl a:active{opacity:.7}
.entrar-ntl svg{width:22px;height:22px;flex:none}
.o-bien{display:flex;align-items:center;gap:12px;margin:6px 0 10px;color:var(--ux-fg2,#6b5739);font:15px var(--ux-font,system-ui)}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--ux-sep,rgba(74,46,20,.16))}
.pant h2.pregunta{font-family:var(--font-display);font-size:22px;margin:4px 0 8px}