/* Vista pública (sin sesión): mapa como héroe, navegación con candados y muro suave */

/* ---------- Botones de acceso ---------- */
.pub-topbar { position: fixed; top: 1rem; right: 1.25rem; z-index: 70; display: none; align-items: center; gap: 0.6rem; }
@media (min-width: 48rem) { .pub-topbar { display: flex; } }
.pub-login {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.05rem; border-radius: 999px;
  font: 600 0.9rem/1 var(--font-display); color: var(--foreground); text-decoration: none;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--border), 0 6px 18px -10px rgb(0 0 0 / 0.5);
  transition: background-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), scale 0.18s var(--ease-out);
}
.pub-login:active { scale: 0.96; }
@media (hover: hover) { .pub-login:hover { background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 0 0 1px var(--border-strong), 0 8px 22px -10px rgb(0 0 0 / 0.6); } }

.pub-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.6rem; padding: 0 1.2rem; border-radius: 999px;
  font: 700 0.92rem/1 var(--font-display); color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, rgb(var(--a-500)), rgb(var(--a-400)));
  box-shadow: 0 1px 2px rgb(var(--a-700) / 0.6), 0 10px 26px -10px rgb(var(--a-500) / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: box-shadow 0.25s var(--ease-out), scale 0.18s var(--ease-out);
  will-change: transform;
}
.pub-cta::after { /* destello que cruza el botón al pasar el ratón */
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.38) 50%, transparent 70%);
  transition: transform 0.7s var(--ease-out);
}
.pub-cta svg { transition: transform 0.25s var(--ease-out); }
.pub-cta:active { scale: 0.96; }
.pub-cta:focus-visible, .pub-login:focus-visible, .pw-secondary:focus-visible, .pw-back:focus-visible, .pw-close:focus-visible { outline: 2px solid rgb(var(--a-400)); outline-offset: 3px; }
@media (hover: hover) {
  .pub-cta:hover { box-shadow: 0 1px 2px rgb(var(--a-700) / 0.6), 0 14px 34px -8px rgb(var(--a-500) / 1), inset 0 1px 0 rgb(255 255 255 / 0.35); }
  .pub-cta:hover::after { transform: translateX(120%); }
  .pub-cta:hover svg { transform: translateX(3px); }
}
.pub-cta-sm { min-height: 2.25rem; padding: 0 0.95rem; font-size: 0.82rem; margin-right: 0.35rem; }
.pub-cta-block { width: 100%; min-height: 3rem; font-size: 1rem; }

/* ---------- Navegación: lo libre arriba, lo privado con candado ---------- */
.rail-caption { margin: 0.9rem 0 0.25rem; padding: 0 0.9rem; font: 700 0.64rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); opacity: 0.7; }
.rail-caption:first-of-type { margin-top: 0; }
.rail-link.is-locked { color: color-mix(in srgb, var(--muted-foreground) 82%, transparent); }
.rail-link.is-locked:hover { color: var(--foreground); }
.rail-link.is-viewing { background: var(--muted); color: var(--foreground); }
.rail-lock { margin-left: auto; display: inline-flex; opacity: 0.45; transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); }
.rail-link.is-locked:hover .rail-lock { opacity: 0.9; transform: rotate(-8deg); }
.rail-lock svg { width: 0.85rem; height: 0.85rem; }
.rail-link.is-locked:hover svg:not(.rail-lock svg) { transform: translateX(2px); }

.bottom-nav-guest .bottom-nav-link.is-locked { color: #6f7a89; }
.bn-lock { position: absolute; top: 0.3rem; left: calc(50% + 0.55rem); opacity: 0.6; }

/* ---------- Muro suave ---------- */
.pw-stage { position: relative; min-height: calc(100dvh - 2 * var(--page-pad, 1.5rem)); display: grid; place-items: center; overflow: hidden; border-radius: 1.5rem; isolation: isolate; }
.pw-mock { position: absolute; inset: 0; padding: 1.25rem; filter: blur(7px) saturate(0.9); opacity: 0.9; transform: scale(1.03); pointer-events: none; user-select: none; }
.pw-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 70% at 50% 45%, transparent 0%, rgb(0 0 0 / 0.38) 100%); }
.pw-card {
  position: relative; z-index: 2; width: min(29rem, calc(100% - 2rem)); margin: 2rem 0; padding: 2.1rem 1.75rem 1.5rem; text-align: center;
  border-radius: 1.6rem;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--border), 0 40px 90px -30px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.pw-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 999px; color: var(--muted-foreground); transition: background-color 0.16s, color 0.16s; }
.pw-close:hover { background: var(--muted); color: var(--foreground); }
.pw-icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 1.1rem; color: rgb(var(--a-400)); background: rgb(var(--a-500) / 0.14); box-shadow: inset 0 0 0 1px rgb(var(--a-500) / 0.25); }
.pw-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font: 700 0.7rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.pw-card h1 { margin: 0 0 0.6rem; font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem)/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.pw-text { margin: 0 auto 1.3rem; max-width: 24rem; color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
.pw-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; text-align: left; }
.pw-points li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.4; }
.pw-points svg { flex: none; margin-top: 0.1rem; color: rgb(var(--a-400)); }
.pw-actions { display: grid; gap: 0.75rem; justify-items: center; }
.pw-secondary { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.6rem; font-size: 0.88rem; font-weight: 600; color: var(--muted-foreground); text-decoration: none; border-radius: 0.6rem; transition: color 0.16s; }
.pw-secondary:hover { color: var(--foreground); }
.pw-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; min-height: 2.5rem; font-size: 0.8rem; color: var(--muted-foreground); text-decoration: none; opacity: 0.85; }
.pw-back:hover { color: var(--foreground); opacity: 1; }

/* Maqueta decorativa (todo son bloques de relleno) */
.mk { max-width: 64rem; margin: 0 auto; display: grid; gap: 1rem; }
.mk-head { display: flex; align-items: center; justify-content: space-between; }
.mk-head b { width: 11rem; height: 1.5rem; border-radius: 0.5rem; background: var(--foreground); opacity: 0.85; }
.mk-head span { width: 7rem; height: 2.2rem; border-radius: 999px; background: rgb(var(--a-500)); }
.mk-grid { display: grid; gap: 1rem; }
.mk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-card { padding: 1.1rem; border-radius: 1.1rem; background: var(--card); box-shadow: 0 0 0 1px var(--border); display: grid; gap: 0.7rem; align-content: start; }
.mk-card b { display: block; width: 45%; height: 0.7rem; border-radius: 0.4rem; background: var(--muted-foreground); opacity: 0.45; }
.mk-card strong { font: 800 1.6rem/1 var(--font-display); }
.mk-tall { min-height: 12rem; } .mk-hero { min-height: 13rem; position: relative; overflow: hidden; }
.mk-hero strong { font-size: 2.4rem; }
.mk-hero svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 55%; } .mk-hero path { fill: rgb(var(--a-500) / 0.35); stroke: rgb(var(--a-400)); stroke-width: 2; }
.mk-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 8rem; } .mk-bars-s { height: 4.5rem; }
.mk-bars i { flex: 1; border-radius: 0.4rem 0.4rem 0 0; background: linear-gradient(rgb(var(--a-400)), rgb(var(--a-600, var(--a-500)))); }
.mk-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.mk-row:last-child { border-bottom: 0; }
.mk-av { width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.mk-lines { display: grid; gap: 0.35rem; } .mk-lines b { height: 0.55rem; border-radius: 0.3rem; background: var(--muted-foreground); opacity: 0.4; } .mk-lines b:last-child { width: 55%; opacity: 0.25; }
.mk-row em { font: 700 0.95rem/1 var(--font-display); font-style: normal; } .mk-row u { text-decoration: none; font-size: 0.78rem; color: var(--muted-foreground); }
.mk-tabs { display: flex; gap: 1.4rem; } .mk-tabs span { width: 5.5rem; height: 0.85rem; border-radius: 0.4rem; background: var(--muted-foreground); opacity: 0.4; } .mk-tabs span:first-child { opacity: 0.9; background: rgb(var(--a-400)); }
.mk-photo { height: 7rem; border-radius: 0.8rem; background: linear-gradient(135deg, var(--muted), rgb(var(--a-500) / 0.25)); }
.mk-veh .mk-photo { height: 9rem; } .mk-feed b:last-child { width: 70%; }
@media (max-width: 47.99rem) { .mk-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-3 { grid-template-columns: minmax(0, 1fr); } .mk-2 { grid-template-columns: minmax(0, 1fr); } .pw-stage { min-height: calc(100dvh - 10rem); } }

@media (prefers-reduced-motion: reduce) {
}



.mk-card { background: color-mix(in srgb, var(--foreground) 6%, var(--card)); }
.pw-mock { filter: blur(5px) saturate(0.95); }

.bn-lock svg { width: 0.7rem; height: 0.7rem; }