/* ==========================================================================
   No Fio da Navalha — site v2 · só composição de página.
   Tudo o resto (cores, tipos, componentes) vem de /design-system.
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.v2-skip { position: fixed; left: 1rem; top: -4rem; z-index: 1000; }
.v2-skip:focus { top: 1rem; }

/* Cabeçalho fixo por cima do hero */
.v2 .nfn-header { position: fixed; left: 0; right: 0; top: 0; }
.v2 .nfn-header:not(.is-scrolled) { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.v2 .nfn-header.is-scrolled { opacity: 1; transform: none; }
.v2 .nfn-header.is-scrolled { --logo-h: 50px; }
@media (max-width: 860px) { .v2 .nfn-header { display: none; } }

.v2-sec { padding: var(--section-y) 0; position: relative; }
.v2-sec--tight { padding-block: clamp(2rem, 5vw, 4rem); }
.v2-paper { border-radius: var(--radius-xl); margin-inline: 10px; }

/* Hero ocupa o primeiro ecrã */
.v2-hero { padding: 10px; }
.v2-hero .nfn-hero { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 0; min-height: calc(100svh - 20px); }
.v2-hero .nfn-hero__photo { grid-column: 1; grid-row: 1; min-height: calc(100svh - 20px); }
.v2-hero .nfn-hero__title-wrap { max-width: min(860px, calc(100% - 3rem)); padding-bottom: 1.5rem; }
.v2-hero .nfn-hero__cta { padding: 1.5rem 0 0; }
@media (max-width: 520px) { .v2-hero .nfn-hero__title-wrap { max-width: calc(100% - 1.5rem); } }

/* Serviços: um título e a lista a toda a largura */
.v2-svc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.v2-svc__title { max-width: 18ch; }
.v2-svc .nfn-menu-row__name { font-size: clamp(1rem, .8rem + .9vw, 1.6rem); }
.v2-svc .nfn-menu-row__price { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); text-align: right; }

/* Microinterações das linhas de serviço */
.v2-svc .nfn-menu-row { position: relative; isolation: isolate; cursor: pointer; padding: clamp(1rem, 1.6vw, 1.5rem) clamp(.5rem, 1.2vw, 1rem); margin-inline: calc(clamp(.5rem, 1.2vw, 1rem) * -1); border-radius: var(--radius-md); outline: none; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-out); }
.v2-svc .nfn-menu-row { border-bottom: 0; }
.v2-svc .nfn-menu-row::after { content: ""; position: absolute; left: clamp(.5rem, 1.2vw, 1rem); right: clamp(.5rem, 1.2vw, 1rem); bottom: 0; height: 1px; background: var(--border); }
.v2-svc .nfn-menu-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--text); opacity: .045; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.v2-svc .nfn-menu-row__name { transition: transform var(--dur-4) var(--ease-out); }
.v2-svc .nfn-menu-row__lead { transition: transform var(--dur-6) var(--ease-in-out), background-color var(--dur-3) var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms * var(--motion-scale)), 0s; }
.v2-svc__meta { position: relative; display: inline-grid; vertical-align: middle; margin-right: .75rem; overflow: hidden; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); text-align: right; }
.v2-svc__meta > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; white-space: nowrap; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.v2-svc__go { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); transform: translateY(100%); opacity: 0; }
.v2-svc__go .nfn-icon { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .v2-svc .nfn-menu-row:hover::before { transform: scaleX(1); }
  .v2-svc .nfn-menu-row:hover .nfn-menu-row__name { transform: translateX(6px); }
  .v2-svc .nfn-menu-row:hover .nfn-menu-row__lead { background: var(--text); transition-delay: 0s; }
  .v2-svc .nfn-menu-row:hover .v2-svc__dur { transform: translateY(-100%); opacity: 0; }
  .v2-svc .nfn-menu-row:hover .v2-svc__go { transform: none; opacity: 1; }
}
.v2-svc .nfn-menu-row:focus-visible::before { transform: scaleX(1); opacity: .07; }
.v2-svc .nfn-menu-row:focus-visible { box-shadow: inset 0 0 0 1.5px var(--focus); }
.v2-svc .nfn-menu-row:active { transform: scale(.985); }
.v2-svc .nfn-menu-row:active::before { transform: scaleX(1); opacity: .07; transition-duration: var(--dur-1); }
@media (max-width: 480px) { .v2-svc__meta { display: grid; margin: 0 0 .2rem; } }
@media (prefers-reduced-motion: reduce) { .v2-svc .nfn-menu-row__name { transform: none !important; } }

/* Galeria */
.v2-gal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }

.v2-about__line { display: block; white-space: nowrap; }

/* Avaliação Google sobre as fotos da barbearia */
.v2-google-rating { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; gap: .15rem; padding: .65rem .85rem; border: 1px solid rgba(244,241,234,.24); border-radius: var(--radius-md); background: rgba(13,13,13,.88); color: var(--bone-100); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.v2-google-rating__score { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.v2-google-rating__score span { color: var(--ornament); font-family: var(--font-sans); font-size: .9rem; letter-spacing: .02em; }
.v2-google-rating small { color: var(--bone-300); font-size: .7rem; white-space: nowrap; }
.v2-google-rating:hover, .v2-google-rating:focus-visible { border-color: var(--ornament); }
@media (max-width: 520px) { .v2-google-rating { top: .65rem; right: .65rem; padding: .5rem .6rem; } .v2-google-rating__score { font-size: 1.4rem; gap: .25rem; } .v2-google-rating__score span { font-size: .68rem; } .v2-google-rating small { font-size: .6rem; } }

/* Onde */
.v2-where { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.v2-where__info { display: grid; gap: 1.75rem; align-content: start; }
.v2-where .nfn-map__addr, .v2-where .nfn-map__addr strong { color: var(--bone-100); }
.v2-contacts { display: grid; gap: .5rem; }
.v2-contacts a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-subtle); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.v2-contacts a span { display: flex; align-items: center; gap: .75rem; }
.v2-contacts a small { color: var(--text-3); font-size: var(--text-sm); }
@media (hover: hover) { .v2-contacts a:hover { border-color: var(--border-strong); } }
.v2-contacts a:active { transform: scale(.99); }
@media (max-width: 900px) { .v2-where { grid-template-columns: 1fr; } }

/* Marcação em modal */
.v2-book-modal .nfn-modal__card { --w: 1120px; }
.v2-book-modal .nfn-book { min-height: 0; }
.v2-book-modal .nfn-book__head { padding-right: 4rem; }
@media (max-width: 860px) {
  .v2-book-modal { padding: 0; }
  .v2-book-modal .nfn-modal__card { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .v2-book-modal .nfn-book { border-radius: 0; min-height: 100dvh; border: 0; }
}

/* Acesso em modal (vidro escuro) */
.v2-access .nfn-modal__card { --w: 420px; text-align: center; background: rgba(13,13,13,.72); color: var(--bone-100); }
.v2-access .nfn-modal__title { margin-right: 0; font-weight: 400; }
.v2-access .nfn-modal__text { color: var(--bone-400); }
.v2-access__views { display: grid; gap: .75rem; }
.v2-access .nfn-pin { --text: var(--bone-100); --text-2: var(--bone-400); --text-3: var(--bone-500); --border: rgba(255,255,255,.12); --surface-2: rgba(255,255,255,.06); --surface-hover: rgba(255,255,255,.14); }
.v2-access .nfn-otp { justify-content: center; --surface-1: rgba(255,255,255,.05); --border: rgba(255,255,255,.16); --text: var(--bone-100); --focus: var(--bone-100); }

/* As tuas marcações (gaveta) */
.v2-mine { display: grid; gap: .75rem; }
.v2-mine__empty { display: grid; justify-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; color: var(--text-2); }

/* Espaço para a tab bar no telemóvel */
@media (max-width: 860px) { body.v2 { padding-bottom: 96px; } }
@media (min-width: 861px) { .v2 .nfn-tabbar--fixed { display: none; } }
@media (max-width: 860px) { .v2 .nfn-fab { display: none; } }

/* Rodapé: só a linha de base */
.v2-footer { padding: 0 var(--gutter) 1.5rem; border-radius: 0; background: transparent; }
.v2-footer .nfn-footer__base { margin-top: 0; justify-content: center; align-items: center; gap: .5rem clamp(1.5rem, 5vw, 5rem); text-align: center; }

/* Hero: o Fábio fica visível.
   Desktop: a foto é ampliada a partir da esquerda, o Fábio (≈55% da imagem) vai para ≈70% do ecrã, à direita do título.
   Telemóvel: foto em cima (cara inteira) e título por baixo, só a sobrepor a orla da foto. */
@media (min-width: 961px) {
  .v2-hero .nfn-hero__photo .nfn-photo > img { transform: scale(1.32); transform-origin: 0% 42%; object-position: 50% 40%; }
  .v2-hero .nfn-hero__title-wrap { max-width: min(760px, 52%); }
}
@media (max-width: 960px) {
  .v2-hero .nfn-hero { min-height: 0; }
  .v2-hero .nfn-hero__photo { min-height: 0; }
  .v2-hero .nfn-hero__photo { display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
  .v2-hero .nfn-hero__photo > .nfn-photo { position: relative; inset: auto; height: min(66svh, 560px); flex: none; border-radius: var(--radius-xl); }
  .v2-hero .nfn-hero__photo > .nfn-photo > img { object-position: 57% 42%; }
  .v2-hero .nfn-hero__photo > .nfn-photo .nfn-photo__veil { background: linear-gradient(180deg, rgba(13,13,13,.35), transparent 22%, transparent 75%, rgba(13,13,13,.6)); }
  .v2-hero .nfn-hero__title-wrap { position: relative; margin-top: -2rem; max-width: calc(100% - 2rem); padding-bottom: .5rem; }
  .v2-hero .nfn-hero__title { font-size: clamp(2.25rem, 9.2vw, 3.4rem); }
  .v2-hero .nfn-hero__title-wrap::after { display: block; }
}
@media (min-width: 700px) and (max-width: 960px) {
  .v2-hero .nfn-hero__photo { display: block; min-height: calc(100svh - 20px); overflow: hidden; border-radius: var(--radius-xl); }
  .v2-hero .nfn-hero__photo > .nfn-photo { position: absolute; inset: 0; height: 100%; border-radius: 0; }
  .v2-hero .nfn-hero__title-wrap { position: absolute; margin-top: 0; width: max-content; max-width: calc(100% - 3rem); padding-bottom: 1.5rem; }
  .v2-hero .nfn-hero__title { font-size: clamp(4.4rem, 9vw, 5.5rem); }
  .v2-hero .nfn-hero__cta .nfn-btn { --btn-h: 72px; font-size: 1rem; }
}
@media (min-width: 700px) and (max-width: 960px) and (min-height: 900px) {
  .v2-hero .nfn-hero__title { font-size: clamp(5rem, 11vw, 6.5rem); }
  .v2-hero .nfn-hero__cta .nfn-btn { --btn-h: 80px; font-size: 1.125rem; }
}
@media (min-width: 521px) and (max-width: 699px) {
  .v2-hero .nfn-hero__title-wrap { width: max-content; }
}

/* Barra do topo do hero */
.v2-hero .nfn-hero__photo-top .nfn-logo { --logo-h: 82px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.v2-hero__right { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 520px) { .v2-hero .nfn-hero__photo-top { left: 1rem; right: 1rem; top: 1rem; } .v2-hero .nfn-hero__photo-top .nfn-logo { --logo-h: 60px; } .v2-hero__right .nfn-open small { display: none; } }

/* Sombra curta no canto do logótipo, para se destacar da foto */
.v2-hero .nfn-hero__photo::before { content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: min(520px, 70%); height: 230px; pointer-events: none; background: radial-gradient(ellipse 100% 100% at 0 0, rgba(7,7,6,.9) 0%, rgba(7,7,6,.72) 32%, rgba(7,7,6,.3) 58%, rgba(7,7,6,0) 80%); }
@media (max-width: 520px) { .v2-hero .nfn-hero__photo::before { width: 85%; height: 170px; } }

/* iPhone 15 Pro Max e Pixel 8: primeira dobra com a composição completa. */
@media (min-width: 400px) and (max-width: 440px) and (min-height: 850px) {
  .v2-hero .nfn-hero__photo > .nfn-photo { height: min(42svh, 400px); }
  .v2-hero .nfn-hero__title { font-size: clamp(3.35rem, 14vw, 4rem); }
  .v2-hero .nfn-hero__title .nfn-mask-line:first-child > span { width: 6.4ch; }
  .v2-hero .nfn-hero__title .nfn-mask-line:last-child .nfn-serif-i { display: block; margin-top: .04em; }
  .v2-hero .nfn-hero__cta { padding-top: 1.25rem; }
  .v2-hero .nfn-hero__cta .nfn-btn--lg { width: min(100%, 320px); min-height: 96px; justify-content: center; }
  .v2-hero .nfn-hero__cta .nfn-btn--lg > span:first-child { max-width: 14ch; text-align: center; line-height: 1.15; font-size: 1.05rem; }
}

/* Telemóvel: tab bar só depois do hero; sem o botão redondo do menu no hero */
.v2 .nfn-tabbar--fixed { transition: transform var(--dur-5) var(--ease-out), opacity var(--dur-4) var(--ease-out); }
.v2 .nfn-tabbar--fixed.is-hidden { transform: translate(-50%, calc(100% + 28px)); opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .v2-hero .nfn-hero__photo-top [data-nfn-menu-open] { display: none; } body.v2 { padding-bottom: 0; } .v2 #onde, .v2 .v2-footer { scroll-margin-bottom: 96px; } .v2-footer { padding-bottom: calc(1.5rem + 84px); } }

/* Acesso: voltar no canto, simétrico ao fechar */
.v2-access .v2-access__back { position: absolute; top: 1rem; left: 1rem; z-index: 5; color: var(--bone-100); }
.v2-access .nfn-modal__close { color: var(--bone-100); }
.v2-access [data-v="pin"] .nfn-pin { margin-top: .75rem; }