/* Inicio: reserve the fixed navigation and keep the editorial hero readable on phones. */
@media (max-width:700px) {
  .scene-screen[data-scene="inicio"] .fade-page { width:100%; overflow:hidden; }
  .fade-experience .hero {
    --hero-gutter:clamp(20px,6vw,32px);
    width:100%; height:max(calc(1030px + env(safe-area-inset-bottom)),100svh);
    min-height:calc(1030px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .fade-experience .hero .masthead {
    top:90px; left:var(--hero-gutter); right:var(--hero-gutter);
    gap:14px; align-items:flex-start; font-size:9px; line-height:1.45;
  }
  .fade-experience .hero .masthead>span:nth-child(2) {
    max-width:45%; padding-top:0; text-align:center; font-size:9px;
  }
  .fade-experience .hero .masthead .location { text-align:right; max-width:30%; }
  .fade-experience .hero .wordmark {
    top:151px; left:3%; width:94%; max-width:94%; margin:0;
    font-size:29.4vw; letter-spacing:-.075em; line-height:1;
    transform:scaleY(1.25); transform-origin:center top;
  }
  .fade-experience .hero .barber {
    top:211px; bottom:auto; left:22%; width:94%; height:479px;
    object-fit:contain; object-position:center bottom;
  }
  .fade-experience .hero .slogan {
    top:300px; left:var(--hero-gutter); font-size:clamp(37px,10.75vw,52px);
    line-height:.98; max-width:70%; transform:rotate(-11deg);
  }
  .fade-experience .hero .slogan span:nth-child(2) { margin-left:20px; }
  .fade-experience .hero .slogan .slogan-ink {
    width:145px; height:43px; margin-left:20px; margin-top:-1px;
  }
  .fade-experience .hero .left-note {
    top:621px; bottom:auto; left:var(--hero-gutter); width:38%;
    font-size:10px; line-height:1.5;
  }
  .fade-experience .hero .left-note p { margin:0; font-size:10px; line-height:1.5; }
  .fade-experience .hero .crosshair,
  .fade-experience .hero .small-dash { display:none; }
  .fade-experience .hero .work-strip { height:53px; margin-top:14px; width:100%; }
  .fade-experience .hero .work-strip .red-cross {
    width:35px; height:35px; right:-13px; bottom:-17px;
  }
  .fade-experience .hero .walkin {
    width:94px; height:94px; margin-top:20px; padding:14px 8px 0;
    font-size:8px; line-height:1.3;
  }
  .fade-experience .hero .walkin.city-badge {
    width:100px; height:100px; margin-top:20px; padding:0;
  }
  .fade-experience .hero .walkin.city-badge .city-signature {
    width:100px; height:100px; margin:0;
  }
  .fade-experience .hero .walkin.city-badge .city-badge-image { width:100%; height:100%; }
  .fade-experience .hero .walkin .wire-globe {
    width:73px; height:37px; margin:4px 0 0; stroke-width:1.1;
  }
  .fade-experience .hero .walkin .badge-underline {
    width:97px; height:22px; left:6px; bottom:-7px; margin:0;
  }
  .fade-experience .hero .barcode-lockup { width:94px; margin-top:19px; gap:5px; }
  .fade-experience .hero .barcode-lockup .barcode { display:block; width:94px; height:25px; }
  .fade-experience .hero .barcode-lockup .serial {
    display:block; margin:0; line-height:11px; font-size:8px; letter-spacing:1px;
  }
  .fade-experience .hero .right-note {
    top:621px; bottom:auto; right:var(--hero-gutter); left:auto;
    width:42%; padding:0; min-width:0;
  }
  /* The fixed navbar provides direct access to the same service categories. */
  .fade-experience .hero .right-note .service-list { display:none; }
  .fade-experience .hero .book {
    width:100%; height:48px; margin-top:0; font-size:10px;
    border-color:#8d8579; background:#151515a8;
  }
  .fade-experience .hero .book>span:first-of-type { padding:0 8px; min-width:0; }
  .fade-experience .hero .book .arrow { width:30px; flex:0 0 30px; font-size:25px; }
  .fade-experience .hero .book-star { width:33px; height:33px; left:-15px; top:-18px; }
  .fade-experience .hero .book-underline { left:7px; bottom:-11px; width:107px; height:24px; }
  .fade-experience .hero .hours { margin-top:35px; gap:10px; }
  .fade-experience .hero .hours>span { font-size:9px; line-height:1.5; }
  .fade-experience .hero .hours strong {
    font-size:19px; white-space:normal; line-height:1.2; letter-spacing:0;
  }
  .fade-experience .hero .hours small {
    font-size:9px; line-height:1.6; overflow-wrap:anywhere;
  }
  .fade-experience .hero .bottom-cross,
  .fade-experience .hero .ruler { display:none; }
  .fade-experience .hero .hero-footer {
    left:var(--hero-gutter); right:var(--hero-gutter); bottom:calc(90px + env(safe-area-inset-bottom));
    gap:18px; align-items:flex-end; font-size:6px; letter-spacing:.55px;
  }
  .fade-experience .hero .hero-footer>span { max-width:48%; line-height:1.6; }
  .scene-screen[data-scene="inicio"] .modal-backdrop {
    padding:calc(76px + env(safe-area-inset-top)) 20px calc(70px + env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  .scene-screen[data-scene="inicio"] .modal {
    width:100%; max-height:100%; overflow-y:auto; padding:40px 24px 28px;
  }
  .scene-screen[data-scene="inicio"] .modal h2 { font-size:clamp(26px,8vw,38px); overflow-wrap:anywhere; }
  .scene-screen[data-scene="inicio"] .modal-book { min-height:44px; }
  .scene-screen[data-scene="inicio"] .modal .close {
    width:44px; height:44px; display:grid; place-items:center; padding:0;
  }
}

@media (max-width:700px) and (max-height:780px) {
  .fade-experience .hero .right-note {
    top:clamp(460px,calc(100svh - 140px - env(safe-area-inset-bottom)),621px);
  }
}

@media (min-width:701px) and (max-width:1100px) {
  .fade-experience .hero {
    height:max(calc(980px + env(safe-area-inset-bottom)),100svh);
    min-height:calc(980px + env(safe-area-inset-bottom));
  }
  .fade-experience .hero .masthead { top:103px; left:5%; right:5%; font-size:11px; }
  .fade-experience .hero .wordmark {
    top:169px; left:4.5%; width:91%; max-width:91%;
    font-size:min(29.5vw,280px); transform:scaleY(1.08); transform-origin:top center;
  }
  .fade-experience .hero .barber {
    top:245px; bottom:auto; left:14%; width:72%; height:calc(100% - 140px);
    object-fit:contain; object-position:center bottom;
  }
  .fade-experience .hero .slogan {
    top:35%; left:5.5%; font-size:clamp(44px,6.2vw,67px);
  }
  .fade-experience .hero .slogan span:nth-child(2) { margin-left:35px; }
  .fade-experience .hero .slogan .slogan-ink { width:190px; height:57px; margin-left:35px; }
  .fade-experience .hero .left-note { top:auto; bottom:calc(126px + env(safe-area-inset-bottom)); width:21%; left:5%; }
  .fade-experience .hero .right-note { top:auto; bottom:calc(126px + env(safe-area-inset-bottom)); width:23%; right:5%; padding-bottom:0; }
  .fade-experience .hero .left-note p { font-size:10px; margin-left:12px; }
  .fade-experience .hero .work-strip { height:57px; }
  .fade-experience .hero .walkin { width:100px; height:100px; margin-top:19px; padding-top:14px; }
  .fade-experience .hero .walkin.city-badge { width:100px; height:100px; padding:0; margin-top:19px; }
  .fade-experience .hero .walkin.city-badge .city-signature { width:100px; height:100px; margin:0; }
  .fade-experience .hero .walkin.city-badge .city-badge-image { width:100%; height:100%; }
  .fade-experience .hero .walkin .wire-globe { width:81px; height:41px; margin-left:-5px; }
  .fade-experience .hero .walkin .badge-underline { width:107px; height:24px; left:8px; }
  .fade-experience .hero .barcode-lockup { margin-top:17px; width:100px; }
  .fade-experience .hero .barcode-lockup .barcode { width:100px; height:28px; }
  .fade-experience .hero .service-list h2 { font-size:11px; margin-bottom:15px; }
  .fade-experience .hero .service-list button {
    min-height:44px; width:100%; font-size:12px; margin-bottom:0;
    display:flex; align-items:center;
  }
  .fade-experience .hero .book { height:48px; margin-top:30px; font-size:10px; background:#15151580; }
  .fade-experience .hero .book>span:first-of-type { padding:0 8px; }
  .fade-experience .hero .book .arrow { width:35px; flex:0 0 35px; }
  .fade-experience .hero .book-underline { width:120px; }
  .fade-experience .hero .hours { margin-top:30px; gap:10px; }
  .fade-experience .hero .hours strong { font-size:23px; white-space:normal; line-height:1.2; }
  .fade-experience .hero .hours small { font-size:9px; line-height:1.6; overflow-wrap:anywhere; }
  .fade-experience .hero .bottom-cross { display:none; }
  .fade-experience .hero .hero-footer { bottom:calc(94px + env(safe-area-inset-bottom)); font-size:7px; letter-spacing:.6px; }
  .scene-screen[data-scene="inicio"] .modal .close {
    width:44px; height:44px; display:grid; place-items:center; padding:0;
  }
}