/* Modo portafolio: franja de aviso, aviso de datos ocultos y monograma neutro en lugar del logo del negocio */
:root { --franja: 30px; --nav-h: calc(64px + var(--franja)); }
@media (min-width: 900px) { :root { --nav-h: calc(72px + var(--franja)); } }
html { scroll-padding-top: calc(90px + var(--franja)); }

.franja {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: var(--franja); margin: 0; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  background: #070809; color: var(--ink); border-bottom: 1px solid var(--red-hi);
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
}
@media (max-width: 420px) { .franja { font-size: 10.5px; letter-spacing: .04em; } }
.nav { top: calc(var(--franja) + 10px); height: calc(var(--nav-h) - var(--franja)); }
.progress { top: var(--franja); }

.aviso-oculto {
  position: fixed; left: 50%; bottom: 96px; z-index: 140; margin: 0; width: max-content; max-width: calc(100vw - 32px);
  padding: 14px 20px; background: var(--surface2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--red-hi), 0 24px 50px -16px rgba(0,0,0,.8);
  font: 600 15px/1.35 var(--f); text-align: center;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease);
}
.aviso-oculto.ver { opacity: 1; transform: translate(-50%, 0); }

/* monograma tipográfico (en lugar del logo) */
.nav-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.mono-logo {
  display: inline-grid; place-items: center; height: 40px; padding: 0 10px;
  background: var(--red); color: #fff; font: 800 20px/1 var(--f); font-stretch: 125%; letter-spacing: .02em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.mono-txt { font: 600 11px/1.15 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
@media (max-width: 420px) { .mono-txt { display: none; } }
.intro-mono { margin: 0; font: 800 88px/1 var(--f); font-stretch: 125%; letter-spacing: -.02em; color: var(--ink); }
.intro-mono::first-letter { color: var(--red-hi); }
.av-mono { font: 800 34px/1 var(--f); font-stretch: 125%; color: var(--ink); }
.chat-av .av-mono { font-size: 13px; }
.foot-mono { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink); font-weight: 700; }

/* mapa neutro: sin dirección */
.map-oculto {
  display: grid; place-items: center; align-content: center; gap: 44px;
  background:
    repeating-linear-gradient(0deg, rgba(244,242,238,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(244,242,238,.05) 0 1px, transparent 1px 40px),
    var(--surface2);
}
.map-oculto .pin { position: relative; left: auto; top: auto; margin: 0; }
.mo-txt { font: 600 13px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); padding: 0 16px; text-align: center; }