/* Navegação móvel Aroldo Barber. A barra de desktop conserva a estrutura existente. */
.nav-brand, .nav-links > a > svg { display: none; }
.nav-links { display: contents; }

@media (max-width: 1000px) {
  body.menu-open { overflow: hidden; }
  body.menu-open .app-bottom-nav { visibility: hidden; }
  body[data-route="servicos-precos"]:not(.services-detail-open) .site-header { display: block; }
  .site-header.menu-open {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    border: 0;
    background: #080808;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
  }
  .site-header.menu-open .menu-toggle {
    position: fixed;
    z-index: 3;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    padding: 11px;
    border: 1.5px solid #d4a43c;
    border-radius: 12px;
    background: linear-gradient(145deg, #111, #050505);
    box-shadow: inset 0 1px #ffd36b30, 0 5px 18px #0009;
    transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
  }
  .site-header.menu-open .menu-toggle:hover,
  .site-header.menu-open .menu-toggle:focus-visible {
    border-color: #ffd36b;
    box-shadow: inset 0 1px #ffd36b55, 0 0 16px #d4a43c55;
  }
  .site-header.menu-open .menu-toggle:active { transform: scale(.94); }
  .site-header.menu-open .nav.open {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(55px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border: 0;
    background:
      radial-gradient(ellipse at 50% 7%, #8b5a132b, transparent 41%),
      radial-gradient(ellipse at 95% 85%, #8b5a131c, transparent 36%),
      repeating-linear-gradient(115deg, #ffffff03 0 1px, transparent 1px 10px),
      #080808;
    animation: menu-reveal .3s ease both;
  }
  .site-header.menu-open .nav.open::after {
    content: '';
    position: fixed;
    inset: auto -10% 0;
    height: 23vh;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, #8b5a1328, transparent 68%);
  }
  .nav-brand {
    display: flex;
    width: min(68vw, 310px);
    height: clamp(110px, 31vw, 156px);
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    animation: menu-item-in .36s .03s backwards;
  }
  .nav-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .nav-links {
    display: grid;
    width: min(100%, 490px);
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    flex: none;
  }
  .site-header.menu-open .nav.open .nav-links > a {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    align-items: center;
    justify-content: normal;
    gap: clamp(10px, 3vw, 18px);
    overflow: hidden;
    padding: 10px 18px;
    border: 1px solid #b9842c;
    border-radius: 13px;
    background: linear-gradient(115deg, #18130ccc, #111111ed 48%, #0a0a0af5);
    box-shadow: inset 0 1px #ffd36b25, inset 0 -12px 24px #0007, 0 5px 15px #0008;
    color: #f5f5f5;
    font: 700 clamp(13px, 3.6vw, 17px)/1.2 'Inter', sans-serif;
    letter-spacing: .12em;
    text-align: left;
    text-shadow: 0 1px 3px #000;
    transform: translateY(0);
    transition: transform .26s cubic-bezier(.2,.7,.2,1), border-color .26s ease, box-shadow .26s ease, background .26s ease;
    animation: menu-item-in .33s backwards;
  }
  .nav-links > a:nth-child(1) { animation-delay: .04s !important; }
  .nav-links > a:nth-child(2) { animation-delay: .065s !important; }
  .nav-links > a:nth-child(3) { animation-delay: .09s !important; }
  .nav-links > a:nth-child(4) { animation-delay: .115s !important; }
  .nav-links > a:nth-child(5) { animation-delay: .14s !important; }
  .nav-links > a:nth-child(6) { animation-delay: .165s !important; }
  .nav-links > a:nth-child(7) { animation-delay: .19s !important; }
  .site-header.menu-open .nav.open .nav-links > a::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 18%, #ffd36b00 37%, #ffd36b2b 50%, #ffd36b00 63%, transparent 82%);
    transform: translateX(-130%);
    transition: transform .48s ease;
  }
  .site-header.menu-open .nav.open .nav-links > a::after {
    content: '';
    position: absolute;
    left: calc(18px + 54px + clamp(10px, 3vw, 18px));
    bottom: 12px;
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, #d4a43c, #ffd36b);
    transform: none;
    transition: width .26s ease;
  }
  .site-header.menu-open .nav.open .nav-links > a > svg {
    display: block;
    width: 35px;
    height: 35px;
    color: #e7b44f;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px #d4a43c55);
    transition: filter .26s ease, transform .26s ease;
  }
  .site-header.menu-open .nav.open .nav-links > a > .nav-arrow {
    width: 19px;
    height: 19px;
    color: #ffd36b;
  }
  .site-header.menu-open .nav.open .nav-links > a > span { min-width: 0; padding-bottom: 3px; }
  .site-header.menu-open .nav.open .nav-links > a:hover,
  .site-header.menu-open .nav.open .nav-links > a:focus-visible {
    border-color: #ffd36b;
    background: linear-gradient(115deg, #322109dd, #19140d, #0a0a0a);
    box-shadow: inset 0 1px #ffe2a166, inset 0 0 25px #d4a43c20, 0 8px 22px #000b, 0 0 11px #d4a43c33;
    transform: translateY(-2px);
  }
  .site-header.menu-open .nav.open .nav-links > a:hover::before,
  .site-header.menu-open .nav.open .nav-links > a:focus-visible::before,
  .site-header.menu-open .nav.open .nav-links > a:active::before { transform: translateX(130%); }
  .site-header.menu-open .nav.open .nav-links > a:hover > svg:first-child,
  .site-header.menu-open .nav.open .nav-links > a:focus-visible > svg:first-child { filter: drop-shadow(0 0 7px #ffd36b); }
  .site-header.menu-open .nav.open .nav-links > a:hover > .nav-arrow,
  .site-header.menu-open .nav.open .nav-links > a:focus-visible > .nav-arrow { transform: translateX(4px); }
  .site-header.menu-open .nav.open .nav-links > a:active {
    border-color: #ffd36b;
    background: linear-gradient(115deg, #35240d, #17110a 58%, #0b0b0b);
    box-shadow: inset 0 0 22px #d4a43c44, 0 1px 5px #000;
    transform: scale(.985);
  }
  .site-header.menu-open .nav.open .nav-links > a[aria-current="page"] {
    border-color: #ffd36b;
    background: linear-gradient(115deg, #30200d, #17130d 50%, #0b0b0b);
    box-shadow: inset 0 0 22px #d4a43c22, 0 5px 17px #0008;
    color: #f5f5f5;
  }
  .site-header.menu-open .nav.open .nav-links > a[aria-current="page"]::before {
    inset: 9px auto 9px 0;
    width: 3px;
    background: #ffd36b;
    transform: none;
    box-shadow: 0 0 8px #ffd36b;
  }
  .site-header.menu-open .nav.open .nav-links > a[aria-current="page"] > svg:first-child { color: #ffd36b; }
  .site-header.menu-open .nav.open .nav-links > a:focus-visible {
    outline: 3px solid #f5f5f5;
    outline-offset: 2px;
  }
  .site-header.menu-open .nav.open .nav-links > .nav-contact {
    border-color: #ffd36b;
    background: linear-gradient(115deg, #8b5a13, #51330d 40%, #221606 100%);
    box-shadow: inset 0 1px #ffe6aa88, inset 0 0 23px #ffd36b25, 0 6px 18px #000a;
  }
  .site-header.menu-open .nav.open .nav-links > .nav-contact > svg { color: #ffe6a5; }
  .site-header.menu-open .nav.open .nav-links > .nav-contact:hover,
  .site-header.menu-open .nav.open .nav-links > .nav-contact:focus-visible {
    background: linear-gradient(115deg, #a77219, #624011 45%, #281a07);
    box-shadow: inset 0 1px #fff0bd, inset 0 0 26px #ffd36b44, 0 0 14px #d4a43c66;
  }
}

@media (max-width: 1000px) and (max-height: 720px) {
  .site-header.menu-open .nav.open { padding-top: calc(48px + env(safe-area-inset-top)); }
  .nav-brand { width: min(56vw, 250px); height: 102px; margin-bottom: 10px; }
  .nav-links { gap: 6px; }
  .site-header.menu-open .nav.open .nav-links > a { min-height: 60px; }
}

@media (max-width: 360px) {
  .site-header.menu-open .nav.open { padding-right: 12px; padding-left: 12px; }
  .site-header.menu-open .nav.open .nav-links > a { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 9px; padding-inline: 13px; letter-spacing: .08em; }
  .site-header.menu-open .nav.open .nav-links > a::after { left: 64px; }
  .site-header.menu-open .nav.open .nav-links > a > svg { width: 31px; height: 31px; }
}

@keyframes menu-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .site-header.menu-open .nav.open,
  .site-header.menu-open .nav.open .nav-brand,
  .site-header.menu-open .nav.open .nav-links > a { animation: none !important; }
  .site-header.menu-open .nav.open .nav-links > a::before { display: none; }
}

/* Continuidade visual da página Contato: fotografia, vidro grafite e luz dourada. */
@media (max-width: 1000px) {
  .site-header.menu-open { background: #090907; }
  .site-header.menu-open .nav.open {
    background:
      linear-gradient(180deg, #070706db 0%, #070706ea 35%, #090806f2 70%, #090806f8 100%),
      url('./assets/concept-ambiente.jpg') center 22% / cover no-repeat;
  }
  .site-header.menu-open .nav.open::after {
    inset: auto -8% 0;
    height: 50vh;
    background: radial-gradient(ellipse at 50% 100%, #a3722445 0%, #a3722400 69%);
  }
  .site-header.menu-open .menu-toggle {
    border-color: #e0b44c;
    background: linear-gradient(145deg, #3a2a14eb, #080807f5 65%);
    box-shadow: inset 0 1px #ffebad5c, 0 0 18px #c9952b4a, 0 8px 22px #000b;
  }
  .nav-brand {
    width: min(60vw, 280px);
    height: clamp(100px, 27vw, 140px);
    margin-bottom: clamp(8px, 1.5vh, 16px);
    filter: drop-shadow(0 7px 18px #000c) drop-shadow(0 0 12px #d4a43c38);
  }
  .nav-links { gap: clamp(7px, 1vh, 10px); }
  .site-header.menu-open .nav.open .nav-links > a {
    min-height: clamp(62px, 8.2vh, 77px);
    grid-template-columns: 50px minmax(0, 1fr) 35px;
    gap: clamp(11px, 3vw, 18px);
    padding: 8px clamp(12px, 3vw, 19px);
    border-color: #d4af37a6;
    border-radius: 15px;
    background-color: #0a0908;
    background-position: center, 66% center;
    background-size: cover;
    box-shadow: inset 0 1px #ffebad35, inset 0 -10px 22px #0006, 0 9px 24px #0009;
    font-size: clamp(13px, 3.5vw, 17px);
    letter-spacing: .105em;
  }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(1) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/barbearia-ambiente-fundo.webp'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(2) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/contact/contato-horarios.webp'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(3) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/concept-corte.jpg'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(4) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/cortes-ferramentas-fundo.webp'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(5) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/concept-protese.jpg'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(6) { background-image: linear-gradient(90deg, #080807ed 0%, #090807dc 55%, #18130c7a 100%), url('./assets/contact/contato-instagram.webp'); }
  .site-header.menu-open .nav.open .nav-links > a:nth-child(7) { background-image: linear-gradient(90deg, #080807ec 0%, #090807c8 52%, #35230f78 100%), url('./assets/contact/contato-whatsapp.webp'); }
  .site-header.menu-open .nav.open .nav-links > a::after {
    left: calc(clamp(12px, 3vw, 19px) + 50px + clamp(11px, 3vw, 18px));
    bottom: 12px;
    height: 1px;
    background: linear-gradient(90deg, #f2c052, #f2c05200);
  }
  .site-header.menu-open .nav.open .nav-links > a > svg:first-child {
    width: 50px;
    height: 50px;
    padding: 11px;
    border: 1px solid #b48a3e;
    border-radius: 13px;
    background: linear-gradient(145deg, #443119dd, #080807e9 64%);
    box-shadow: inset 0 1px #ffe5a130, 0 5px 15px #000b;
    color: #f7cb68;
    stroke-width: 2.1;
  }
  .site-header.menu-open .nav.open .nav-links > a > .nav-arrow {
    width: 34px;
    height: 34px;
    padding: 9px;
    border: 1px solid #f2c052;
    border-radius: 50%;
    background: #0b0b0bc9;
    box-shadow: 0 0 15px #e3a82e50;
    color: #ffdc81;
  }
  .site-header.menu-open .nav.open .nav-links > a:hover,
  .site-header.menu-open .nav.open .nav-links > a:focus-visible {
    border-color: #ffe29b;
    box-shadow: inset 0 1px #ffebad65, 0 12px 28px #000b, 0 0 19px #c9952b5c;
  }
  .site-header.menu-open .nav.open .nav-links > a[aria-current="page"] {
    border-color: #ffe29b;
    box-shadow: inset 3px 0 #ffd76a, inset 0 1px #ffebad55, 0 9px 24px #0009, 0 0 11px #c9952b45;
  }
  .site-header.menu-open .nav.open .nav-links > a[aria-current="page"]::before { display: none; }
  .site-header.menu-open .nav.open .nav-links > .nav-contact { border-color: #d4af37c9; }
}

@media (max-width: 360px) {
  .site-header.menu-open .nav.open { padding-top: calc(49px + env(safe-area-inset-top)); }
  .nav-brand { width: min(55vw, 220px); height: 96px; margin-bottom: 6px; }
  .site-header.menu-open .nav.open .nav-links > a { min-height: 61px; grid-template-columns: 42px minmax(0, 1fr) 30px; gap: 9px; padding-inline: 11px; font-size: 12px; letter-spacing: .07em; }
  .site-header.menu-open .nav.open .nav-links > a > svg:first-child { width: 42px; height: 42px; padding: 9px; }
  .site-header.menu-open .nav.open .nav-links > a > .nav-arrow { width: 30px; height: 30px; padding: 7px; }
  .site-header.menu-open .nav.open .nav-links > a::after { left: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.menu-open .menu-toggle,
  .site-header.menu-open .nav.open .nav-links > a,
  .site-header.menu-open .nav.open .nav-links > a > svg { transition-duration: .01ms; }
}