/* Modo portafolio (MCL) · plantilla «editorial»: 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: 10002; height: var(--pf-h);
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: var(--night); color: var(--on-night);
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .05em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav { transition: background .4s, box-shadow .4s, transform .5s var(--ease), top .3s var(--ease); }
.pf-arriba .nav { top: var(--pf-h); }
.pf-arriba .menu { padding-top: calc(var(--nav-h) + var(--pf-h) + 2rem); }

/* Monograma en lugar del logo */
.pf-mono {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1; letter-spacing: .02em;
  user-select: none;
}
.intro .pf-mono { font-size: 2.9rem; }
.phone__head .pf-mono { font-size: 1.3rem; }
.foot__brand .pf-mono { font-size: 1.9rem; }

/* Mapa neutro: sin calle ni coordenadas */
.pf-map {
  display: grid; place-items: center;
  background-color: var(--blush);
  background-image: linear-gradient(rgb(var(--ink-rgb) / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink-rgb) / .07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.pf-map__pin {
  display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 3rem; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 0 0 10px rgb(var(--gold-rgb) / .18), 0 14px 30px -12px rgba(0,0,0,.45);
}
.pf-map__pin svg { width: 30px; height: 30px; }

/* 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(--night); color: var(--on-night); font: 600 14px/1.4 var(--sans); text-align: center;
  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: 899px) { .pf-aviso { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* Móvil estrecho: que «Restaurante» quepa entero junto al botón de reservar */
@media (max-width: 420px) { .brand__name { font-size: 1.08rem; } }