/* Modo portafolio (MCL) · plantilla «cercano»: franja, monograma, mapa neutro y aviso */
:root { --pf-h: 32px; }

/* Franja arriba: en el flujo de la página; mientras se ve, la cabecera fija baja su altura */
.pf-franja {
  position: relative; z-index: 9500; height: var(--pf-h);
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: var(--pr-h); color: #fff;
  font: 600 13px/1.2 var(--body); letter-spacing: .04em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav { transition: box-shadow .4s, top .3s var(--ease); }
.pf-arriba .nav { top: var(--pf-h); }
.pf-arriba .menu { top: calc(var(--nav-h) + var(--pf-h)); }

/* Monograma en lugar del logo */
.pf-mono {
  display: grid; place-items: center; background: var(--pr); color: #fff;
  font: 800 28px/1 var(--display); letter-spacing: .01em; user-select: none;
}
.brand-mark.pf-mono { width: 50px; height: 50px; max-width: none; border-radius: 14px; }
.intro-logo.pf-mono { width: clamp(120px, 14vw, 180px); height: auto; aspect-ratio: 1; background: #fff; color: var(--pr); font-size: clamp(64px, 8vw, 104px); }
.chat-av .pf-mono { width: 100%; height: 100%; border-radius: 50%; font-size: 22px; }
.map-pin .pf-mono { width: 56px; height: 56px; border-radius: 14px; font-size: 32px; box-shadow: 0 0 0 3px var(--ac), 0 16px 30px -10px rgba(0,0,0,.6); }

/* Mapa neutro: sin calle ni coordenadas */
.pf-map {
  background-color: var(--claro);
  background-image: linear-gradient(rgba(4,61,146,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(4,61,146,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.pf-map__label {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  background: #fff; color: var(--tinta); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 999px;
}

/* Aviso al pulsar un botón de contacto */
.pf-aviso {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 10003;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 16px;
  background: var(--pr-h); color: #fff; font: 600 15px/1.4 var(--body); text-align: center;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.pf-aviso.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 999px) { .pf-aviso { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }