/* ux-familiar.css (25-oct-2026, renglón 18 «UX a la que la gente ya está acostumbrada», Ciclonsejo) ─────────────
   Capa COMPARTIDA que cargan todas las páginas, DESPUÉS de pantalla.css y hoja.css (y del <style> de cada página),
   para ganar en empate. No cambia ninguna API ni ningún HTML: solo tokens y reglas por selector.

   POR QUÉ (Manuel, 25-oct 12:10): «un análisis de lo que la gente ya está acostumbrada a usar como UX, como un iPhone
   o como los botones de un Safari… para que hagamos algo que no canse a la gente visualmente y que ya esté
   acostumbrada, pues es algo que queremos que usen todos los días». Análisis, focus group, propuesta y consejo en
   docs/UX_FAMILIAR_25oct2026.md.

   LA REGLA EN UNA LÍNEA: el MUNDO sigue siendo NTL (pergamino, madera en el 3D, Cinzel en el título de pantalla y en
   los nombres de lugar); la INTERFAZ (botones, hojas, listas, formularios, navegación) se siente como una app de
   iPhone que ya conoces: tipografía del sistema a 17 px, un acento, bordes de 1 px, sombras suaves, radios iguales,
   grabber y detents de la hoja como en Apple Maps, chevron atrás arriba a la izquierda, 44 pt de toque, `:active`
   como en iOS (se atenúa), respeto a «reducir movimiento» y al modo oscuro del teléfono.

   Convenciones citadas: Apple Human Interface Guidelines (Typography: body 17 pt SF; Buttons; Sheets; Navigation
   bars; Layout: 44×44 pt; Dark Mode; Accessibility: Reduce Motion, 4.5:1), Safari iOS 17–26 (barra inferior, un botón
   de acciones), Apple Maps / Google Maps (hoja inferior, pin → tarjeta, chips de filtro).
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ========== 1. Tokens ========== */
:root{
  --ux-font:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ux-display:"Cinzel",Georgia,serif;      /* SOLO título de pantalla y nombres de lugar */
  --ux-size:17px;                            /* HIG: body 17 pt */
  --ux-size-2:15px;                          /* HIG: subheadline — segunda línea de una fila, notas */
  --ux-size-3:13px;                          /* HIG: footnote — sellos y pies, nunca para leer de corrido */
  --ux-bg:#f3e9d2;                           /* pergamino: fondo agrupado (como el gris de Ajustes) */
  --ux-card:#fbf6ea;                         /* celda / tarjeta */
  --ux-fg:#2b1d0e;                           /* texto (contraste 13.4:1 sobre card) */
  --ux-fg2:#6b5739;                          /* texto secundario (5.6:1 sobre card, 5.0:1 sobre bg) */
  --ux-sep:rgba(74,46,20,.16);               /* separador hairline */
  --ux-borde:rgba(74,46,20,.28);             /* borde de 1 px de un control */
  --ux-acento:#8a4b1f;                       /* UN acento (5.9:1 con texto crema) */
  --ux-acento-fg:#fff7e6;
  --ux-press:rgba(74,46,20,.08);             /* relleno de un control secundario / celda presionada */
  --ux-press-2:rgba(74,46,20,.14);
  --ux-radio:12px;                           /* botones, campos, tarjetas */
  --ux-radio-hoja:16px;                      /* hoja inferior */
  --ux-sombra:0 1px 2px rgba(40,24,8,.10),0 6px 20px rgba(40,24,8,.12);
  --ux-sombra-flota:0 2px 6px rgba(40,24,8,.18),0 10px 28px rgba(40,24,8,.22);
  --ux-grabber:rgba(74,46,20,.30);
  --ux-dur:.18s;
}
/* modo oscuro: mismos tokens; se respeta data-theme="light" si una página lo fija a mano */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ux-bg:#1b150e; --ux-card:#272019; --ux-fg:#f1e7d3; --ux-fg2:#bfae91; --ux-sep:rgba(255,235,200,.14); --ux-borde:rgba(255,235,200,.26);
    --ux-acento:#e0944f; --ux-acento-fg:#1b150e; --ux-press:rgba(255,235,200,.09); --ux-press-2:rgba(255,235,200,.16);
    --ux-sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.45); --ux-sombra-flota:0 2px 6px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.55); --ux-grabber:rgba(255,235,200,.34);
  }
}
:root[data-theme="dark"]{
  --ux-bg:#1b150e; --ux-card:#272019; --ux-fg:#f1e7d3; --ux-fg2:#bfae91; --ux-sep:rgba(255,235,200,.14); --ux-borde:rgba(255,235,200,.26);
  --ux-acento:#e0944f; --ux-acento-fg:#1b150e; --ux-press:rgba(255,235,200,.09); --ux-press-2:rgba(255,235,200,.16);
  --ux-sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.45); --ux-sombra-flota:0 2px 6px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.55); --ux-grabber:rgba(255,235,200,.34);
}

/* Los tokens que YA existen en cada página (index, mundo, base, conexiones, ux, juegos, a/*, expediciones) toman los
   valores de la capa: con esto la mayor parte de la interfaz cambia sin tocar una sola regla de esas páginas. */
:root{
  --font-ui:var(--ux-font);
  --radius:var(--ux-radio);
  --shadow:var(--ux-sombra);
  --line:var(--ux-sep);
  /* la hoja única (hoja.css) */
  --hn-ui:var(--ux-font); --hn-bg:var(--ux-bg); --hn-bg2:var(--ux-card); --hn-fg:var(--ux-fg); --hn-muted:var(--ux-fg2);
  --hn-line:var(--ux-sep); --hn-acento:var(--ux-acento); --hn-acento-fg:var(--ux-acento-fg); --hn-radio:var(--ux-radio-hoja);
  --hn-sombra:0 -2px 10px rgba(40,24,8,.10),0 -10px 30px rgba(40,24,8,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ux-bg); --fg:var(--ux-fg); --muted:var(--ux-fg2); --panel:rgba(39,32,25,.96); --panel-solid:var(--ux-card); --chip:#33291f;
    --accent:var(--ux-acento); --accent-fg:var(--ux-acento-fg); --paper:var(--ux-card); --code:#33291f; --hn-tinta:#e8d9bd;
    --hn-sombra:0 -2px 10px rgba(0,0,0,.4),0 -10px 30px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--ux-bg); --fg:var(--ux-fg); --muted:var(--ux-fg2); --panel:rgba(39,32,25,.96); --panel-solid:var(--ux-card); --chip:#33291f;
  --accent:var(--ux-acento); --accent-fg:var(--ux-acento-fg); --paper:var(--ux-card); --code:#33291f; --hn-tinta:#e8d9bd;
  --hn-sombra:0 -2px 10px rgba(0,0,0,.4),0 -10px 30px rgba(0,0,0,.5); color-scheme:dark;
}

/* ========== 2. Reglas de base (todas las páginas) ========== */
html{-webkit-text-size-adjust:100%}
/* Dynamic Type: si el teléfono pide letra más grande, la interfaz crece con él (HIG: Typography → Dynamic Type) */
@supports (font: -apple-system-body){ html{font:-apple-system-body} }
/* toque: nada «pegajoso» */
button,[role=button],a,summary,label,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,[role=button],.hn-fila,.hn-chip,.hn-r,.hn-uno{touch-action:manipulation}
/* estado presionado como en iOS: el control se atenúa, no se hunde */
button:active:not([disabled]),[role=button]:active,a[class]:active,summary:active{opacity:.72;transition:opacity 60ms}
button[disabled],.grande[disabled]{opacity:.4;cursor:default}
/* foco visible solo con teclado */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ux-acento);outline-offset:2px}
/* reducir movimiento: la animación no es la UX */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* El chevron «atrás» estándar (HIG Navigation bar: arriba a la izquierda, color de acento, 44 pt).
   Se usa como clase propia (.ux-atras) y se aplica a los «atrás» que ya existen (.atras, .volver de expedición, .sitio .inicio). */
.ux-atras,.atras,a.atras,.exp-cab .atras,#cab .atras{
  appearance:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:44px;padding:0 10px 0 2px;margin-left:-6px;
  border:0;background:transparent;box-shadow:none;border-radius:var(--ux-radio);color:var(--ux-acento);
  font:400 var(--ux-size)/1 var(--ux-font);text-decoration:none;cursor:pointer}
.ux-atras::before,.atras::before{content:"";display:block;width:12px;height:21px;margin:0 2px 0 4px;background:currentColor;font-size:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2 2 10.5 10 19'/%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 12 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2 2 10.5 10 19'/%3E%3C/svg%3E") center/contain no-repeat}
.ux-atras:hover,.atras:hover{background:var(--ux-press)}

/* Una sola familia de botones (HIG Buttons: filled = acción principal, gray = secundaria, plain = terciaria). */
.ux-btn,.ux-btn-2,.ux-btn-3{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border:0;border-radius:var(--ux-radio);font:600 var(--ux-size)/1.2 var(--ux-font);text-decoration:none;cursor:pointer;box-shadow:none}
.ux-btn{background:var(--ux-acento);color:var(--ux-acento-fg)}
.ux-btn-2{background:var(--ux-press);color:var(--ux-acento)}
.ux-btn-3{background:transparent;color:var(--ux-acento);padding:0 8px}

/* ========== 3. La hoja única, el botón único y el radial (hoja.css) ========== */
.hoja-ntl{border-width:1px;border-color:var(--ux-borde);box-shadow:var(--hn-sombra);font-family:var(--ux-font);font-size:var(--ux-size);line-height:1.3}
.hn-asa{flex:0 0 44px}
.hn-asa i{width:36px;height:5px;background:var(--ux-grabber);opacity:1}
.hn-cab{min-height:52px;padding:2px 8px 6px 14px;border-bottom-color:var(--ux-sep)}
.hn-tit b{font-family:var(--ux-display);font-size:18px;letter-spacing:.005em}     /* nombre del lugar / título: Cinzel */
.hn-tit span{font-family:var(--ux-font);font-size:var(--ux-size-2);opacity:1;color:var(--hn-cab-fg,var(--ux-fg2))}
.hn-cab .hn-ic{width:36px;height:36px;background:var(--ux-press)}
.hn-cab .hn-ic svg{width:22px;height:22px}
.hn-cab .hn-ic img{width:36px;height:36px}
.hn-x{background:var(--ux-press)}
.hn-x svg,.hn-atras svg{width:20px;height:20px}
.hn-accion{border:0;background:var(--ux-acento);color:var(--ux-acento-fg);box-shadow:none;font-family:var(--ux-font);font-weight:600;font-size:var(--ux-size);min-height:40px;padding:0 16px}
.hn-accion:active{transform:none;box-shadow:none}
/* pieles de la cabecera: la madera, la cartelera y la nieve siguen (identidad), pero con borde fino */
.hoja-ntl[data-piel="madera"] .hn-cab,.hoja-ntl[data-piel="cartelera"] .hn-cab,.hoja-ntl[data-piel="tabla"] .hn-cab,
.hoja-ntl[data-piel="nieve"] .hn-cab,.hoja-ntl[data-piel="noche"] .hn-cab{border-bottom-width:1px}
.hoja-ntl[data-piel="madera"] .hn-cab{text-shadow:none}
.hoja-ntl[data-piel="madera"] .hn-tit span,.hoja-ntl[data-piel="cartelera"] .hn-tit span,.hoja-ntl[data-piel="noche"] .hn-tit span{opacity:.85}
.hn-vista{padding:10px 16px 20px}
/* la lista: celdas de iOS (52 pt, separador fino, icono en caja redondeada, acción con nombre a la derecha) */
.hn-fila{min-height:52px;gap:12px;padding:6px 0;border-bottom:1px solid var(--ux-sep);font-family:var(--ux-font)}
.hn-fila:active{opacity:1;background:var(--ux-press)}
.hn-fila .hn-fi{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:10px;background:var(--ux-press);color:var(--ux-acento)}
.hn-fila .hn-fi svg{width:24px;height:24px}
.hn-fila .hn-ft b{font-weight:600;font-size:var(--ux-size)}
.hn-fila .hn-ft span{font-size:var(--ux-size-2)}
.hn-fila .hn-fa{border:0;background:var(--ux-press);color:var(--ux-acento);font-weight:600;font-size:var(--ux-size-2);min-height:34px;min-width:44px;padding:0 14px;border-radius:999px}
.hn-fila .hn-fa svg{width:18px;height:18px}
.hn-fila .hn-fa.primaria,.hn-fila[aria-pressed="true"] .hn-fa{background:var(--ux-acento);color:var(--ux-acento-fg)}
/* chips: cápsulas de Apple Maps (relleno gris, sin borde; la elegida en acento) */
.hn-chips{gap:8px;padding:2px 0 10px;margin:0}
.hn-chip{border:0;background:var(--ux-press);color:var(--ux-fg);font-family:var(--ux-font);font-size:var(--ux-size);font-weight:600;min-height:44px;padding:0 15px}
.hn-chip svg{width:18px;height:18px}
.hn-chip[aria-pressed="true"],.hn-chip.on{background:var(--ux-acento);color:var(--ux-acento-fg)}
.hn-chip.acento{background:var(--ux-acento);color:var(--ux-acento-fg)}
.hn-sec{font-family:var(--ux-font);font-size:var(--ux-size-2);letter-spacing:.04em;font-weight:600;margin:16px 0 4px}
.hn-nota,.hn-pista{font-family:var(--ux-font);font-size:var(--ux-size-2)}
.hn-pista{border:1px solid var(--ux-sep);background:var(--ux-press)}
/* el botón único: redondo, flotante, UN acento, sombra suave (ya no «de madera con sombra dura») */
.hn-uno{border:1px solid var(--ux-borde);background:var(--ux-card);color:var(--ux-acento);box-shadow:var(--ux-sombra-flota)}
.hn-uno svg{width:26px;height:26px}
.hn-uno:active,.hn-uno.hn-presionado{transform:scale(.94);opacity:1}
.hn-uno.hn-presionado{background:var(--ux-acento);color:var(--ux-acento-fg)}
.hn-uno.hn-presionado::after{border-color:var(--ux-acento)}
.hn-pista-uno{font:var(--ux-size-2)/1.25 var(--ux-font)}
/* el radial */
.hn-r{border:1px solid var(--ux-borde);background:var(--ux-card);color:var(--ux-acento);box-shadow:var(--ux-sombra-flota)}
.hn-r svg{width:26px;height:26px}
.hn-r.hn-sobre,.hn-r:hover,.hn-r[aria-pressed="true"]{background:var(--ux-acento);color:var(--ux-acento-fg)}
.hn-r .hn-rt{font:600 var(--ux-size-2)/1.1 var(--ux-font)}
/* lo adoptado dentro de la hoja hereda la letra del sistema */
.hn-vista>.hn-adoptado,.hn-base>#panel{font-family:var(--ux-font)}
.hn-vista>.hn-adoptado .sub{font-size:var(--ux-size-2)!important}
.hn-vista>.hn-adoptado .mo-foto{border-width:1px}
/* escritorio: panel lateral con borde fino */
@media (min-width:900px){
  .hoja-ntl{border:1px solid var(--ux-borde);box-shadow:var(--ux-sombra)}
}

/* ========== 4. pantalla.css ========== */
#pc-btn{border-width:1px;border-color:var(--ux-borde);box-shadow:var(--ux-sombra);font-family:var(--ux-font);font-size:var(--ux-size-2);border-radius:var(--ux-radio)}
#pc-salir{border-width:1px;box-shadow:var(--ux-sombra);font:600 var(--ux-size-2)/1 var(--ux-font)}
#pc-aviso .hoja{border:1px solid var(--ux-borde);font:var(--ux-size)/1.4 var(--ux-font);border-radius:var(--ux-radio-hoja)}
#pc-aviso h3{font:600 18px/1.2 var(--ux-font)}
#pc-aviso button{border:0;border-radius:var(--ux-radio);background:var(--ux-acento);color:var(--ux-acento-fg);box-shadow:none;font:600 var(--ux-size) var(--ux-font);height:48px}

/* ========== 5. index.html / mundo.html / base.html — SIN tocar su HTML (reglas que ganan por orden y especificidad).
   El orquestador aplica la lista exacta del doc cuando los renglones 15, 16 y 17 terminen; mientras, esto ya se ve. ========== */
/* mapa: barra superior y buscador (escritorio; en teléfono la hoja manda) */
#barra .logo,#barra .pills,#barra .enlace,#barra .bus-caja,#barra .mi-ubic,#pulgar .mi-ubic,#pulgar .btn{border-width:1px;border-color:var(--ux-borde);box-shadow:var(--ux-sombra)}
#barra .logo{font-family:var(--ux-display)}                /* el logo es el nombre: Cinzel se queda */
#barra .pill,#barra .enlace,#barra .bus-caja input{font-family:var(--ux-font)}
#bus-res{border-width:1px;border-color:var(--ux-borde);box-shadow:var(--ux-sombra)}
#bus-res li[role=option]{min-height:44px}
#bus-res b{font-family:var(--ux-font)}
#panel{border-width:1px;border-color:var(--ux-borde)}
#panel .tab{font-family:var(--ux-font);font-size:12px;min-height:50px}  /* HIG tab bar: 10–12 pt bajo el icono */
#panel .btn,.mo-acc .btn{border:0;border-radius:var(--ux-radio);box-shadow:none;font-family:var(--ux-font);font-weight:600;font-size:var(--ux-size);min-height:44px;padding:0 16px}
#panel .btn.sec{background:var(--ux-press);color:var(--ux-acento)}
#panel .btn[aria-pressed="true"].sec{background:var(--ux-acento);color:var(--ux-acento-fg)}
#panel h2{font-family:var(--ux-font);font-weight:700;font-size:20px;letter-spacing:0}   /* «Explora lo que hay cerca» es un encabezado, no un letrero */
#panel h3{font-family:var(--ux-font);font-size:var(--ux-size-2);letter-spacing:.04em}
#panel .nota,#panel p{font-size:var(--ux-size)}
.ex-q{border:1px solid var(--ux-borde);border-radius:var(--ux-radio);background:var(--ux-card);min-height:44px;font-family:var(--ux-font);font-size:var(--ux-size);padding:8px 12px}
.chip-ex{border:0;background:var(--ux-press);font-family:var(--ux-font);font-size:var(--ux-size-2);font-weight:600;min-height:40px}
.chip-ex.on{background:var(--ux-acento);color:var(--ux-acento-fg)}
.ev-card{border:1px solid var(--ux-sep);border-radius:var(--ux-radio);background:var(--ux-card);min-height:60px}
.ev-card:hover,.ev-card:focus-visible{box-shadow:var(--ux-sombra);background:var(--ux-card)}
.ev-txt b{font-family:var(--ux-font);font-size:var(--ux-size)}
.ev-txt span{font-size:var(--ux-size-2)}
.ev-foto{border:0;border-radius:10px}
.arq,.medio{font-family:var(--ux-font)}
.mo-caja{border:1px solid var(--ux-borde);border-radius:var(--ux-radio-hoja);box-shadow:var(--ux-sombra-flota)}
.mo-x{border:0;background:var(--ux-press)}
.mo-foto{border-bottom-width:1px}
.mo-cat{font-family:var(--ux-font);font-size:var(--ux-size-2)}
.mo-cuerpo h2{font-family:var(--ux-display)}             /* el nombre del evento/lugar: Cinzel */
.maplibregl-popup.pop-ntl .maplibregl-popup-content{border:1px solid var(--ux-borde);border-radius:var(--ux-radio);box-shadow:var(--ux-sombra);font-family:var(--ux-font)}
.maplibregl-popup.pop-ntl .maplibregl-popup-tip{border-top-color:var(--ux-borde)}
.mini-ev b{font-family:var(--ux-font);font-size:var(--ux-size-2)}
#hora-lugar{border-width:1px;border-color:var(--ux-borde);box-shadow:var(--ux-sombra);font-family:var(--ux-font);font-size:var(--ux-size-2)}
#hora-lugar b{font-family:var(--ux-font);font-size:var(--ux-size-2)}
#hora-lugar .ir-cielo{font-size:var(--ux-size-3)}
#ubic-aviso{font-family:var(--ux-font)}
#ubic-aviso p{font-size:var(--ux-size)}
#ubic-aviso button{border:0;background:var(--ux-press);color:var(--ux-acento);font-family:var(--ux-font);font-size:var(--ux-size);font-weight:600;border-radius:var(--ux-radio)}
#ubic-aviso #ubic-si{background:var(--ux-acento);color:var(--ux-acento-fg);border:0}
#cinta-av{font-family:var(--ux-font)}
#toast{font-family:var(--ux-font);font-size:var(--ux-size-2)}
/* plaza: las fichas de madera son identidad (se quedan), pero sin la línea dura de 3 px debajo */
body:has(#sup) .ficha{box-shadow:0 6px 18px rgba(24,12,2,.35);border-width:1px}
#sup .btn,#sup .reloj,#sup .seg button,#sup .lugar span,#sup .cuenta{font-family:var(--ux-font)}
#sup .lugar b{font-family:var(--ux-display)}              /* el nombre del lugar: Cinzel */
#ayuda{font-family:var(--ux-font);font-size:var(--ux-size-2);border-width:1px}
.pz-peek .pz-tx b,#pz-nombre{font-family:var(--ux-display);font-size:var(--ux-size)}
.pz-peek .pz-tx span,#pz-sub{font-family:var(--ux-font);font-size:var(--ux-size-2)}
.pz-peek .pz-cal{font:600 var(--ux-size-2)/1 var(--ux-font);min-height:44px;border:0;background:var(--ux-press);color:var(--ux-acento)}
.etq .b{border-width:1px;font-family:var(--ux-font)}
.etq .n{font-family:var(--ux-font)}
/* base: botones planos de una familia, selector y leyenda con letra del sistema */
#arriba .btn,#selector button,#leyenda button,#tarjeta .btn,.hn-base #selector button{font-family:var(--ux-font);box-shadow:none;border-radius:var(--ux-radio)}
#arriba .btn.sec,#tarjeta .btn.sec{background:var(--ux-press);color:var(--ux-acento);border-color:transparent}
#t-aconsejar{min-height:44px;font-size:var(--ux-size)}
#selector button{font-size:var(--ux-size-2);min-height:40px}
#tarjeta{border:1px solid var(--ux-borde);box-shadow:var(--ux-sombra)}
#tarjeta h2{font-family:var(--ux-display)}                 /* nombre del objeto: Cinzel */
#tarjeta p{font-size:var(--ux-size-2)}
#inv-mascota{border:1px solid var(--ux-borde);box-shadow:var(--ux-sombra);font-family:var(--ux-font);font-size:var(--ux-size)}
.chip .e{font-size:22px}
body.hn-movil #toast{font-size:var(--ux-size-2)}

/* ========== 6. Páginas documento (conexiones, ux, libro, juegos, ideas): la navegación como fila de chips deslizable ========== */
header.top{box-shadow:none;border-bottom:1px solid var(--ux-sep);gap:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
header.top .logo{font-family:var(--ux-display);font-size:18px}
header.top .logo small{font-family:var(--ux-font);font-size:var(--ux-size-2)}
header.top nav.sitios{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;margin:0 calc(-1*max(14px,env(safe-area-inset-left,0px)));padding:0 max(14px,env(safe-area-inset-left,0px)) 2px;scroll-snap-type:x proximity}
header.top nav.sitios::-webkit-scrollbar{display:none}
header.top nav.sitios a{flex:0 0 auto;scroll-snap-align:start;border:0;background:var(--ux-press);color:var(--ux-fg);font:600 var(--ux-size)/1 var(--ux-font);min-height:44px;padding:0 14px;border-radius:999px}
header.top nav.sitios a[aria-current]{background:var(--ux-acento);color:var(--ux-acento-fg)}
header.top nav.sitios a.contar{background:var(--ux-acento);color:var(--ux-acento-fg);border:0}
@media (min-width:700px){ header.top nav.sitios{flex:0 1 auto;margin-left:auto;margin-right:0;padding:0} }
main h2{font-family:var(--ux-font);font-weight:700;font-size:22px;letter-spacing:0;border-bottom:0;padding-bottom:0}
main h3{font-family:var(--ux-font)}
main .meta,main .cita,main .regla,main .gm-nota{font-family:var(--ux-font)}
main .meta{font-size:var(--ux-size-2)}
.tj,.pila,.grupo,.subir,nav.indice,details.ficha,.tabla-wrap,.regla{border:1px solid var(--ux-sep);border-radius:var(--ux-radio);box-shadow:none;background:var(--ux-card)}
.tj h3{font-family:var(--ux-font);font-size:var(--ux-size)}
.tj p{font-size:var(--ux-size-2);font-family:var(--ux-font)}
main .btn,.tj .btn,.subir label{border:0;border-radius:var(--ux-radio);font:600 var(--ux-size)/1.2 var(--ux-font);min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;box-shadow:none}
main .btn.sec,.tj .btn.sec{background:var(--ux-press);color:var(--ux-acento);border:0}
.grupo>summary{font-family:var(--ux-font);font-size:var(--ux-size);min-height:52px}
.grupo>summary .cuenta{font-family:var(--ux-font);font-size:var(--ux-size-3)}
.estado{font-family:var(--ux-font);font-size:var(--ux-size-3);letter-spacing:.02em}
.gm-cab{border:1px solid var(--ux-sep);box-shadow:none;background:var(--ux-card)}
.gm-cuenta,.gm-fila .tx b,.gm-fila .marca,.conteo,.cat-ntl{font-family:var(--ux-font)}
.gm-fila{border:1px solid var(--ux-sep);background:var(--ux-card)}
.gm-fila .tx b{font-size:var(--ux-size)}.gm-fila .tx span{font-size:var(--ux-size-2)}
#accion-fija{box-shadow:0 -1px 0 var(--ux-sep)}
#accion-fija label,#accion-fija #btn-traer{border:0;border-radius:var(--ux-radio);font:600 var(--ux-size)/1.2 var(--ux-font)}
#accion-fija .volver{border:1px solid var(--ux-borde);background:var(--ux-card);color:var(--ux-acento);font-size:22px}
a.volver{box-shadow:var(--ux-sombra-flota)}
footer{font-family:var(--ux-font);font-size:var(--ux-size-2)}
code{font-size:var(--ux-size-2)}

/* ========== 7. Formularios y listas de las páginas de aventura/expedición (aventura.css, ver-aventura.css, expediciones.css)
   Los detalles finos viven en esos archivos; aquí solo lo transversal. ========== */
.campo{font-family:var(--ux-font)}
.grande,.pill2,.pill3,.chip,.mini,.tipo,.arq,.tarjeta-opc,.tarjetona,.linkish,.etq{font-family:var(--ux-font)}

/* ========== 8. Ajustes medidos en la segunda corrida (25-oct 13:10) ========== */
.hn-accion{min-height:44px}                                   /* HIG: 44 pt; «Presentar» medía 40 */
body>a.volver{box-shadow:var(--ux-sombra-flota)}              /* solo el botón flotante de escritorio; la flecha de la ficha de expedición no */
.hoja-enc .volver{box-shadow:none}
#hora-lugar{min-height:44px}
#hora-lugar span:not(.ir-cielo){font-size:var(--ux-size-2)}
#ayuda,#ayuda.ficha,body #ayuda{font-size:var(--ux-size-2)}
#pz-ctxt,.pz-peek .pz-cal span{font-size:var(--ux-size-2)}
.cuenta span,.exp-cont span{font-size:var(--ux-size-3)}
/* Dynamic Type: con letra grande del sistema, lo fijo en píxeles no crece; lo que importa sí (hoja, listas, botones) */
@supports (font: -apple-system-body){
  .hoja-ntl,.hn-fila,.hn-chip,.ux-btn,.ux-btn-2,.ux-btn-3,.grande,.pill3,.campo{font-size:max(var(--ux-size),1em)}
}
/* escritorio: el botón flotante «Contar una aventura» (boton-contar.js) y «Pantalla completa» entran a la familia */
#bt-contar{font-family:var(--ux-font);font-weight:600;letter-spacing:0}
#pc-btn{background:var(--ux-card);color:var(--ux-acento)}
.pz-peek .pz-cal{min-width:44px}   /* el reto de temporada mide 21 px mientras carga su texto */