/* Modo portafolio: franja de aviso arriba + aviso de datos ocultos (colores de la propia web) */
:root { --pf-h: 30px; }
.pf-franja {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: var(--pf-h);
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.nav { top: calc(var(--pf-h) + 8px); }
.progress { top: var(--pf-h); }
html { scroll-padding-top: calc(90px + var(--pf-h)); }
.hero { padding-top: calc(var(--nav-h) + 226px + var(--pf-h)); }
.hero-firma { top: calc(var(--nav-h) + 26px + var(--pf-h)); }
.map-none { cursor: pointer; text-align: center; padding: 0 16px; }
.pf-aviso {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 140;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px;
  background: var(--surface2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand), 0 14px 40px rgba(0,0,0,.5);
  font-family: var(--f); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.pf-aviso.on { opacity: 1; transform: translate(-50%, 0); }
/* En móvil el logo de texto se queda en la categoría para no chocar con el botón de llamar */
@media (max-width: 639px) {
  .nav-logo .logo-txt b { display: none; }
}
@media (min-width: 640px) {
  .pf-franja { font-size: 11px; letter-spacing: .14em; }
}
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--nav-h) + 60px + var(--pf-h)); }
  .hero-firma { top: auto; }
  .pf-aviso { bottom: 32px; }
}