/* Copia «modo portafolio»: franja, monograma neutro, mapa oculto y aviso de datos ocultos */
:root { --franja-h: 28px; }
html { scroll-padding-top: calc(84px + var(--franja-h)); }
body { padding-top: var(--franja-h); }

/* Franja fija arriba: tinta + champán (10,4:1) */
.franja {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10002; height: var(--franja-h); margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 1rem;
  background: var(--ink); color: var(--champ); border-bottom: 1px solid rgba(216,190,140,.35);
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav { top: var(--franja-h); }
.progress { top: var(--franja-h); }
.menu { padding-top: calc(var(--nav-h) + var(--franja-h) + 2rem); }

/* Monograma neutro (en lugar del logo): disco negro con aro dorado y «p» en cursiva champán */
.mono {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  width: 40px; height: 40px; background: var(--night); color: var(--champ);
  box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 3.5px var(--night), inset 0 0 0 4.5px rgba(216,190,140,.45);
  font-family: var(--serif); font-style: italic; line-height: 1;
}
.mono > span { font-size: 1.55em; transform: translateY(-.06em); }
.mono--nav { font-size: 16px; }
@media (min-width: 900px) { .mono--nav { width: 44px; height: 44px; font-size: 18px; } }
.intro .mono { font-size: 44px; }
.mono--phone { width: 48px; height: 48px; font-size: 19px; }
.mono--pin { width: 56px; height: 56px; font-size: 22px; }
.mono--foot { width: 72px; height: 72px; font-size: 28px; }

/* Mapa oculto: bloque neutro con calles abstractas */
.map--oculto {
  background-color: #ECE5DA;
  background-image:
    linear-gradient(28deg, transparent 47%, rgba(255,255,255,.9) 47.5%, rgba(255,255,255,.9) 50.5%, transparent 51%),
    linear-gradient(118deg, transparent 58%, rgba(255,255,255,.75) 58.5%, rgba(255,255,255,.75) 60.5%, transparent 61%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(176,141,87,.16) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(176,141,87,.16) 62px 64px);
}
.map--oculto .map__pin { display: block; line-height: 0; }

/* Aviso al pulsar un botón de contacto */
.aviso-portafolio {
  position: fixed; left: 50%; bottom: 6.5rem; z-index: 10003; width: max-content; max-width: calc(100vw - 2rem);
  transform: translate(-50%, 1rem); opacity: 0; visibility: hidden; pointer-events: none;
  background: var(--ink); color: #fff; border: 1px solid rgba(216,190,140,.45); border-radius: 14px;
  padding: .85rem 1.1rem; font: 600 .92rem/1.4 var(--sans); text-align: center;
  box-shadow: 0 18px 40px -14px rgba(27,22,19,.55);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.aviso-portafolio.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@media (min-width: 900px) { .aviso-portafolio { bottom: 2rem; } }