/* ═══════════════════════════════════════════════════════════
   TOSALET RESIDENCES — Mobile Styles
   Breakpoints: 768px (tablet/phone), 480px (small phone)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── CURSOR: native pointer on touch ── */
  body { cursor: auto !important; }
  .cursor { display: none !important; }

  /* ── SMOOTH SCROLL: native on mobile ── */
  html { scroll-behavior: smooth; }

  /* ── PROGRESS DOTS / PROGRESS BAR / SIDENAV: hide ── */
  .sidenav,
  .progress-dots,
  .progress-bar { display: none !important; }

  /* ═══════════════════════════════════════════════════
     NAV
  ═══════════════════════════════════════════════════ */
  .nav {
    top: 40px;
    padding: 1rem 1.25rem;
    background: rgba(13,11,8,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav.scrolled {
    background: rgba(13,11,8,0.95);
  }
  .nav__logo img { height: 28px; }
  .nav__links { gap: 1.25rem; }
  .nav__link {
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    opacity: 0.75;
  }
  /* Hide the redundant "Explorar" link on mobile */
  .nav__link:last-child { display: none; }

  /* ═══════════════════════════════════════════════════
     LANDING — COVER HERO
  ═══════════════════════════════════════════════════ */

  /* iOS Safari full-height fix — target only the upper logo portion */
  .cover__upper {
    height: 100svh;
    min-height: 100svh;
  }
  @supports not (height: 100svh) {
    .cover__upper {
      height: -webkit-fill-available;
      min-height: -webkit-fill-available;
    }
  }

  .cover__bg {
    inset: 0;
  }
  .cover__bg img {
    object-position: center 40%;
  }

  /* Mobile veil: slightly darker at top for logo legibility, fades to solid below */
  .cover__veil {
    background: linear-gradient(
      to bottom,
      rgba(13,11,8,0.18) 0%,
      rgba(13,11,8,0.32) 45%,
      rgba(13,11,8,0.78) 68%,
      rgba(13,11,8,1.00) 80%,
      rgba(13,11,8,1.00) 100%
    ) !important;
  }

  .cover__content {
    gap: 1rem !important;
    padding: 0 1.5rem;
  }

  .cover__jb-logo {
    width: clamp(90px, 22vw, 130px) !important;
    margin-bottom: 0.75rem !important;
    opacity: 0.82 !important;
  }

  .cover__wordmark-tosalet {
    font-size: clamp(44px, 18vw, 80px) !important;
  }

  .cover__eyebrow {
    font-size: 0.5rem !important;
    letter-spacing: 0.28em !important;
  }

  .cover__sub {
    font-size: 0.52rem !important;
    letter-spacing: 0.26em !important;
    max-width: 80vw !important;
    opacity: 0.65;
  }

  .cover__scroll {
    bottom: 2rem;
    font-size: 0.48rem !important;
    letter-spacing: 0.3em !important;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — STATEMENT (now inside cover)
  ═══════════════════════════════════════════════════ */
  .cover__statement {
    grid-template-columns: 1fr;
  }
  .statement__left {
    border-right: none;
    border-bottom: 1px solid rgba(212,168,106,0.1);
    padding: 4rem 1.5rem 3rem;
  }
  .statement__quote {
    font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }
  .statement__right {
    padding: 3rem 1.5rem 4rem;
  }
  .statement__body {
    font-size: 0.88rem !important;
    line-height: 1.85 !important;
  }
  .statement__stats {
    gap: 1.75rem;
    flex-wrap: wrap;
  }
  .statement__stat-value {
    font-size: 1.2rem !important;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — HOUSE SCENES (fullscreen)
  ═══════════════════════════════════════════════════ */
  .house-scene {
    height: 100svh;
    min-height: 100svh;
  }
  @supports not (height: 100svh) {
    .house-scene { height: 100vh; min-height: 100vh; }
  }

  .house-scene__content {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 4rem;
    align-items: end;
  }

  .house-scene__name {
    font-size: clamp(3.2rem, 14vw, 5.5rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.03em !important;
  }

  .house-scene__num {
    font-size: 0.52rem !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 0.5rem;
  }

  .house-scene__right {
    align-items: flex-start;
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .house-scene__meta { text-align: left; }

  .house-scene__type {
    font-size: 0.52rem !important;
    letter-spacing: 0.2em !important;
  }

  .house-scene__cta {
    padding: 0.85rem 1.25rem !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.22em !important;
    min-height: 44px;
    align-items: center;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — STAT STRIP
  ═══════════════════════════════════════════════════ */
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-strip__item {
    padding: 2rem 1.25rem;
    border-bottom: 1px solid rgba(212,168,106,0.1);
  }
  .stat-strip__item:nth-child(even) { border-right: none !important; }
  .stat-strip__item:nth-last-child(-n+2) { border-bottom: none !important; }
  .stat-strip__value {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
  }
  .stat-strip__label {
    font-size: 0.5rem !important;
    letter-spacing: 0.22em !important;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — TERRITORY SECTION
  ═══════════════════════════════════════════════════ */
  .territory {
    height: auto !important;
    min-height: 70vw;
    padding: 4rem 0;
  }
  .territory__content {
    padding: 0 1.5rem !important;
    max-width: 100% !important;
  }
  .territory__title {
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
    margin-bottom: 1.5rem !important;
  }
  .territory__text {
    font-size: 0.85rem !important;
    line-height: 1.85 !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
  }
  .btn {
    min-height: 44px;
    align-items: center;
    padding: 0.9rem 1.5rem !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.22em !important;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — GRID CLOSER
  ═══════════════════════════════════════════════════ */
  .grid-closer {
    padding: 3rem 0 !important;
  }
  .grid-closer__header {
    padding: 0 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
  }
  .grid-closer__title {
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
  }
  .grid-closer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
  .grid-card {
    aspect-ratio: 3/4 !important;
  }
  .grid-card__name {
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .grid-card__num {
    font-size: 0.5rem !important;
  }

  /* ═══════════════════════════════════════════════════
     LANDING — FOOTER
  ═══════════════════════════════════════════════════ */
  .footer {
    padding: 3.5rem 1.5rem 2.5rem !important;
  }
  .footer__top {
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
    gap: 1rem !important;
  }
  .footer__jb-logo {
    width: clamp(120px, 38vw, 180px) !important;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 1.5rem !important;
  }
  .footer__copy {
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.52rem !important;
  }

  /* ═══════════════════════════════════════════════════
     HOUSE DETAIL PAGES
  ═══════════════════════════════════════════════════ */

  /* Hero */
  .house-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
  @supports not (height: 100svh) {
    .house-hero { height: 100vh !important; min-height: 100vh !important; }
  }
  .house-hero__content {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0 1.5rem 3.5rem !important;
  }
  .house-hero__title {
    font-size: clamp(3rem, 13vw, 5rem) !important;
    line-height: 0.9 !important;
  }
  .house-hero__meta {
    border-top: 1px solid rgba(212,168,106,0.15) !important;
    padding-top: 1rem !important;
  }

  /* Intro */
  .intro,
  .h-intro {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem !important;
  }

  /* Spec bar */
  .spec-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 2rem !important;
    padding: 2rem 1.5rem !important;
  }
  .spec-bar__value {
    font-size: 1.1rem !important;
  }

  /* Photo layouts — stack single column */
  .photo-split,
  .photo-split--asymm,
  .photo-split--3,
  .photo-split--wide {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 0 !important;
  }

  .photo-item--tall  { height: clamp(280px, 72vw, 440px) !important; }
  .photo-item--med   { height: clamp(240px, 62vw, 380px) !important; }
  .photo-item--short { height: clamp(200px, 52vw, 320px) !important; }
  .photo-full--tall img { height: clamp(280px, 68vw, 440px) !important; }
  .photo-full--med  img { height: clamp(240px, 60vw, 380px) !important; }
  .photo-full img { max-height: 72vw !important; }

  /* Text blocks */
  .intermezzo,
  .h-text {
    padding: clamp(2.5rem, 7vw, 4rem) 1.5rem !important;
    max-width: 100% !important;
  }
  .intermezzo--right,
  .h-text--right { margin-left: 0 !important; }

  /* Pull quotes */
  .h-pullquote,
  .pull-quote {
    padding: clamp(3rem, 8vw, 5rem) 1.5rem !important;
  }
  .pull-quote__text {
    font-size: clamp(1.6rem, 6.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  /* Materials */
  .h-materials {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: clamp(2.5rem, 7vw, 4rem) 1.5rem !important;
  }
  .h-materials__list {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Next house */
  .next-house {
    grid-template-columns: 1fr !important;
    grid-template-rows: 58vw auto !important;
    min-height: 0 !important;
  }
  .next-house__photo { height: 58vw !important; }
  .next-house__content {
    padding: 2.5rem 1.5rem !important;
    justify-content: flex-start !important;
  }
  .next-house__name {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
    margin-bottom: 1rem !important;
  }

  /* ═══════════════════════════════════════════════════
     EL CLUB PAGE
  ═══════════════════════════════════════════════════ */
  .club-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
  @supports not (height: 100svh) {
    .club-hero { height: 100vh !important; }
  }
  .club-hero__content {
    padding: 0 1.5rem 4rem !important;
    justify-content: flex-end !important;
  }
  .club-hero__meta {
    max-width: 100% !important;
    text-align: left !important;
    font-size: 0.78rem !important;
    border-top: 1px solid rgba(212,168,106,0.2) !important;
    padding-top: 1rem !important;
  }

  .essay { padding: clamp(3rem, 7vw, 6rem) 0 !important; }
  .essay-text {
    padding: clamp(3rem, 8vw, 5rem) 1.5rem !important;
    max-width: 100% !important;
  }
  .essay-text__heading {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .essay-duo {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    margin-block: 0 !important;
  }
  .essay-trio {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .essay-duo__item,
  .essay-trio__item {
    height: clamp(280px, 72vw, 460px) !important;
  }
  .essay-full {
    height: clamp(320px, 75vw, 520px) !important;
  }

  .club-cta {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem !important;
  }
  .club-cta__title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  /* ═══════════════════════════════════════════════════
     FILMSTRIP — disable on mobile, stack vertically
  ═══════════════════════════════════════════════════ */
  .filmstrip-pin {
    height: auto !important;
    overflow: visible !important;
  }
  .filmstrip-active {
    display: grid !important;
    flex-wrap: unset !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .filmstrip-active .filmstrip-frame,
  .filmstrip-active .photo-item,
  .filmstrip-active .essay-trio__item {
    width: 100% !important;
    height: clamp(260px, 68vw, 440px) !important;
    flex-shrink: unset !important;
  }
  .filmstrip-img {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* ═══════════════════════════════════════════════════
     MISC
  ═══════════════════════════════════════════════════ */
  .caramel-break {
    height: clamp(260px, 50vw, 400px) !important;
  }
  .marquee__item { padding: 0 1.5rem; }

  /* iOS: prevent callout on long-press images */
  img { -webkit-touch-callout: none; }

  /* Ensure all interactive elements have min tap target */
  a, button, [role="button"] { min-height: 44px; }

}

/* ══════════════════════════════════════════════════════════
   SMALL PHONE (480px and below)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Nav — ultra compact */
  .nav {
    padding: 0.85rem 1.1rem;
  }
  .nav__logo img { height: 24px; }
  .nav__links { gap: 0.9rem; }

  /* Cover logo tighter */
  .cover__jb-logo {
    width: clamp(70px, 18vw, 100px) !important;
  }
  .cover__wordmark-tosalet {
    font-size: clamp(38px, 16vw, 68px) !important;
  }
  .cover__content {
    gap: 0.85rem !important;
  }

  /* Statement */
  .statement__quote {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  /* House scene names */
  .house-scene__name {
    font-size: clamp(2.8rem, 13vw, 4.5rem) !important;
  }
  .house-scene__content {
    padding: 1.25rem 1.25rem 3.5rem !important;
  }

  /* House detail hero */
  .house-hero__title {
    font-size: clamp(2.6rem, 13vw, 4.5rem) !important;
  }

  /* Spec bar */
  .spec-bar {
    gap: 1.25rem 1rem !important;
    padding: 1.75rem 1.25rem !important;
  }
  .spec-bar__value { font-size: 1rem !important; }

  /* Footer */
  .footer {
    padding: 3rem 1.25rem 2rem !important;
  }
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Club CTA */
  .club-cta__title {
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
  }

  /* Grid closer */
  .grid-closer__header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

}