/* Ajustes responsivos complementares — mobile-first refinements */

html,
body {
  max-width: 100%;
}

.mobile-admin-link {
  display: none;
}

@media (max-width: 1080px) {
  .mobile-nav {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .mobile-nav .mobile-admin-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 14px 16px;
    border: 0;
    border-radius: 2px;
    background: var(--navy2);
    color: #fff;
  }

  .mobile-nav .mobile-admin-link::after {
    content: '↗';
    color: var(--gold);
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  :root {
    --container: min(100% - 28px, 1180px);
  }

  body {
    overflow-x: clip;
  }

  .site-header,
  .site-header.is-scrolled {
    height: 66px;
    padding-inline: 14px;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    gap: 9px;
  }

  .brand__seal {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 20px;
  }

  .brand__text {
    min-width: 0;
  }

  .brand__text strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .98rem;
  }

  .header-actions {
    gap: 4px;
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    padding: 11px;
  }

  .mobile-nav {
    top: 66px;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
    background: rgba(246, 243, 236, .99);
  }

  .mobile-nav a {
    padding: 13px 10px;
    font-size: .84rem;
  }

  .hero {
    min-height: 700px;
  }

  .hero-content {
    min-height: 620px;
    padding-top: 106px;
    padding-bottom: 120px;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4.4rem);
    line-height: .96;
    overflow-wrap: anywhere;
  }

  .hero-lead {
    max-width: 94%;
    margin: 22px 0 26px;
    font-size: .9rem;
    line-height: 1.65;
  }

  .hero-actions {
    width: 100%;
    gap: 14px;
  }

  .hero-actions .button--gold {
    width: min(100%, 330px);
  }

  .hero-building {
    width: 112vw;
    height: 58%;
    right: -52%;
    bottom: -3%;
    opacity: .3;
  }

  .hero-orbit--one {
    width: 430px;
    height: 430px;
    right: -260px;
  }

  .hero-orbit--two {
    width: 320px;
    height: 320px;
    right: -190px;
  }

  .booking-wrap {
    margin-top: -34px;
    padding-bottom: 12px;
  }

  .booking-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 2px;
    overflow: hidden;
  }

  .booking-panel__title,
  .booking-submit {
    grid-column: auto;
  }

  .booking-panel__title {
    min-height: auto;
    padding: 20px;
  }

  .booking-field,
  .booking-field--compact {
    min-height: 76px;
    padding: 13px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .booking-field input,
  .booking-field select {
    height: 34px;
    font-size: .95rem;
  }

  .booking-submit {
    min-height: 58px;
    justify-content: space-between;
    padding-inline: 20px;
  }

  .booking-response {
    margin-top: 12px;
    padding: 16px;
    line-height: 1.55;
  }

  .intro-section,
  .rooms-section,
  .experience-section,
  .contact-section {
    padding: 66px 0;
  }

  .intro-grid {
    gap: 14px;
  }

  .section-number {
    font-size: 2.7rem;
  }

  .intro-heading h2,
  .section-head h2,
  .experience-copy h2,
  .contact-copy h2 {
    font-size: clamp(2.55rem, 11vw, 3.65rem);
    line-height: .98;
  }

  .intro-copy__lead {
    font-size: 1.16rem;
  }

  .section-head {
    margin-bottom: 28px;
  }

  .rooms-grid {
    gap: 16px;
  }

  .room-card,
  .room-card--lift,
  .room-card--lift:hover,
  .room-card:hover {
    transform: none;
  }

  .room-visual {
    height: 235px;
  }

  .room-card__body {
    padding: 21px 19px 23px;
  }

  .room-card h3 {
    font-size: 2rem;
  }

  .room-card p {
    min-height: 0;
  }

  .experience-layout {
    gap: 34px;
  }

  .experience-item {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 20px 0;
  }

  .experience-item > span {
    font-size: 1.25rem;
  }

  .gallery-section {
    padding: 58px 0;
  }

  .gallery-grid {
    grid-template-rows: 300px 210px 210px;
  }

  .gallery-caption {
    padding: 18px;
  }

  .stats-section {
    padding: 58px 0 64px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat,
  .stat--quote {
    min-height: 132px;
    grid-column: auto;
    padding: 22px;
  }

  .stat strong {
    font-size: 3rem;
  }

  .stat--quote p {
    font-size: 1.25rem;
  }

  .contact-layout {
    gap: 30px;
  }

  .contact-card__top,
  .contact-row {
    padding-inline: 20px;
  }

  .contact-row--split {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .footer-layout {
    gap: 20px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .reserve-dialog {
    width: calc(100vw - 18px);
    max-width: none;
    max-height: calc(100dvh - 18px);
    margin: auto;
    overflow-y: auto;
  }

  .dialog-content {
    padding: 44px 18px 22px;
  }

  .dialog-content h2 {
    padding-right: 36px;
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .dialog-close {
    top: 10px;
    right: 10px;
  }

  .guest-form {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .form-field--full {
    grid-column: auto;
  }

  .guest-form .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  :root {
    --container: min(100% - 22px, 1180px);
  }

  .brand__text strong {
    max-width: 126px;
    font-size: .9rem;
  }

  .hero {
    min-height: 660px;
  }

  .hero-content {
    min-height: 590px;
    padding-top: 98px;
  }

  .hero h1 {
    font-size: clamp(2.72rem, 13.6vw, 3.45rem);
  }

  .hero-lead {
    max-width: 100%;
    font-size: .86rem;
  }

  .hero-actions .button--gold {
    width: 100%;
  }

  .hero-building {
    right: -66%;
    opacity: .25;
  }

  .booking-panel__title strong {
    font-size: 1.25rem;
  }

  .intro-heading h2,
  .section-head h2,
  .experience-copy h2,
  .contact-copy h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .room-visual {
    height: 215px;
  }

  .room-card__footer {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }

  .gallery-grid {
    grid-template-rows: 260px 190px 190px;
  }

  .contact-row a,
  .contact-row strong {
    overflow-wrap: anywhere;
  }

  .marquee__track {
    gap: 18px;
    font-size: 1.1rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button:hover,
  .room-card:hover,
  .gallery-card:hover .gallery-art {
    transform: none;
  }
}