/*
  Temporada Real — experiência mobile (até 720px)

  Aqui o celular NÃO é o desktop comprimido: a mesma marcação e os mesmos dados
  ganham outra composição (ordem, densidade e navegação). Nada abaixo deste
  arquivo afeta o desktop: todas as regras estão dentro de @media.

  Identidade preservada: verde escuro, dourado, creme, serif editorial e o
  brasão. A referência de UX é a maturidade mobile dos grandes marketplaces;
  a referência visual continua sendo a Temporada Real.
*/

:root {
  --mob-nav-h: 64px;
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mob-gutter: 18px;
  /* Prateleiras (carrosséis de hospedagem). O recuo é o mesmo da régua da
     página no celular — `--rr-page-inline` cai neste ramo abaixo de 720px —
     para o primeiro card nascer alinhado com os títulos. */
  --mob-shelf-inline: clamp(1rem, 5vw, 4rem);
  --mob-shelf-gap: 14px;
  /* 1 card inteiro + prévia clara do próximo, com teto para telas largas. */
  --mob-shelf-card: min(82%, 340px);
}

/* ====================================================================
   1. Base
   ==================================================================== */
@media (max-width: 720px) {
  /* Espaço para a barra de navegação inferior (fixa) e a área segura do iPhone. */
  body.has-mobile-nav {
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom));
  }

  /* iOS: nunca dar zoom automático ao focar um campo. */
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* ====================================================================
   2. Navegação inferior (Início · Hospedagens · Empresas)
   ==================================================================== */
.mobile-nav {
  display: none;
}

@media (max-width: 720px) {
  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-bottom: var(--mob-safe-bottom);
    background: rgba(10, 34, 26, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(214, 178, 92, 0.24);
    box-shadow: 0 -10px 30px rgba(9, 24, 19, 0.28);
  }

  .mobile-nav a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    /* -1px: a borda superior da nav entra na altura reservada pelo body. */
    min-height: calc(var(--mob-nav-h) - 1px);
    padding: 8px 4px;
    color: rgba(247, 243, 236, 0.72);
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .mobile-nav a svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav a[aria-current="page"] {
    color: #e7c579;
  }

  .mobile-nav a:focus-visible {
    outline: 2px solid #e7c579;
    outline-offset: -3px;
  }
}

/* ====================================================================
   3. Header compacto (todas as páginas públicas)
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page:not(.listing-airbnb-page) .site-header,
  body.listing-airbnb-page:not(.photo-tour-page) .site-header,
  body.corporate-page .site-header {
    top: 8px;
    padding: 10px 14px;
    border-radius: 18px;
  }

  /* Os links de navegação vivem na barra inferior: o topo fica só com marca e menu. */
  body.home-page:not(.listing-airbnb-page) .site-header .main-nav,
  body.listing-airbnb-page:not(.photo-tour-page) .site-header .main-nav,
  body.corporate-page .site-header .main-nav {
    display: none;
  }

  .site-header .brand-logo img,
  .site-header .header-logo img {
    max-height: 34px;
  }
}

/* ====================================================================
   4. Home — hero compacto
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-showcase {
    min-height: 0;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-carousel {
    /* Altura enxuta: o hero apresenta, não ocupa a dobra inteira. */
    height: clamp(300px, 46svh, 380px);
    min-height: 0;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide-content {
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    justify-content: flex-end;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h1,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h2 {
    font-size: clamp(1.95rem, 8.4vw, 2.5rem);
    line-height: 1.06;
    /* No celular a medida útil já é estreita: limitar em 16ch deixava o título
       em quatro linhas curtas com um vazio grande à direita. */
    max-width: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-kicker {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-copy {
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 34ch;
  }

  /* A busca sai do hero: no celular ela é uma pílula logo abaixo. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-search-shell,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-trust-strip {
    display: none;
  }

  /* O arrasto horizontal do hero é nosso (troca de destaque); o vertical e o
     zoom continuam do navegador. Sem isso, arrastar para a direita vira o
     gesto de "voltar". */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-carousel {
    touch-action: pan-y pinch-zoom;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-carousel-controls {
    bottom: 0.75rem;
  }
}

/* ====================================================================
   5. Home — barra de busca compacta + chips
   ==================================================================== */
.mobile-quickbar {
  display: none;
}

@media (max-width: 720px) {
  .mobile-quickbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    gap: 10px;
    padding: 12px var(--mob-gutter) 10px;
    background: linear-gradient(180deg, #f7f3ec 78%, rgba(247, 243, 236, 0));
  }

  .mobile-search-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 9px 16px;
    border: 1px solid rgba(28, 25, 23, 0.1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(28, 25, 23, 0.1);
    text-align: left;
    cursor: pointer;
  }

  .mobile-search-pill svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: #b98020;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .mobile-search-pill span {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .mobile-search-pill strong {
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c1917;
  }

  .mobile-search-pill small {
    overflow: hidden;
    color: #6f6860;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-search-pill:focus-visible {
    outline: 2px solid #b98020;
    outline-offset: 2px;
  }

  /* Chips: filtros populares definidos no Admin (dados reais).
     O `body.home-page` na frente é para vencer a regra que esconde a faixa
     fora do catálogo (home-search.css), sem recorrer a !important. */
  body.home-page .mobile-quickbar .popular-filter-strip {
    position: static;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    background: none;
    border: 0;
  }

  .mobile-quickbar .popular-filter-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-quickbar .popular-filter-strip > span {
    display: none;
  }

  body.home-page .mobile-quickbar .popular-filter-strip button {
    flex: none;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(28, 25, 23, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #1c1917;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .mobile-quickbar .popular-filter-strip button.is-active {
    border-color: #b98020;
    background: #1f3d31;
    color: #f4e7cd;
  }
}

/* ====================================================================
   6. Busca expandida = bottom sheet
   ==================================================================== */
@media (max-width: 720px) {
  body.mobile-search-open {
    overflow: hidden;
  }

  body.mobile-search-open .search-component {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: block;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 14px 16px calc(18px + var(--mob-safe-bottom));
    border-radius: 22px 22px 0 0;
    background: #fdfbf7;
    box-shadow: 0 -18px 48px rgba(9, 24, 19, 0.3);
    overscroll-behavior: contain;
    animation: mobile-sheet-in 0.2s ease;
  }

  @keyframes mobile-sheet-in {
    from {
      transform: translateY(14px);
      opacity: 0.6;
    }
  }

  body.mobile-search-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(12, 28, 22, 0.55);
  }

  /* Segmentos empilhados, cada um com alvo confortável. */
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-bar,
  body.mobile-search-open .search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  body.mobile-search-open .search-segment {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    border: 1px solid rgba(28, 25, 23, 0.12);
    border-radius: 16px;
    background: #fff;
    text-align: left;
  }

  /* Com a página rolada o site troca a busca pela versão compacta (sem
     "Tipo", sem rótulos e com botão redondo). Dentro da folha isso não vale:
     ela é sempre a busca completa. */
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-segment[data-search-open="what"],
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-segment[data-search-open="who"] {
    display: flex;
  }

  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-segment-label {
    display: block;
  }

  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-segment {
    min-height: 60px;
    padding: 10px 16px;
    border: 1px solid rgba(28, 25, 23, 0.12);
    border-radius: 16px;
  }

  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-segment-value {
    color: #1c1917;
    font-size: 0.95rem;
    white-space: normal;
  }

  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-submit,
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-bar:not(.has-active-filters) .search-submit {
    width: 100%;
    min-height: 52px;
    padding: 0 1.1rem;
    border-radius: 14px;
  }

  /* Na folha o botão volta a dizer "Buscar" (no modo compacto é só a lupa). */
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-bar:not(.has-active-filters) .search-submit .search-submit-label {
    display: inline;
  }

  body.mobile-search-open .search-segment.is-active {
    border-color: #b98020;
    box-shadow: 0 0 0 2px rgba(185, 128, 32, 0.18);
  }

  body.mobile-search-open .search-segment-copy {
    display: grid;
    gap: 2px;
  }

  body.mobile-search-open .search-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border-radius: 14px;
  }

  /* Estático, o painel fechado continuaria reservando a própria altura e a
     folha nasceria do tamanho da tela. Fechado = fora do fluxo. */
  body.mobile-search-open .search-popover[aria-hidden="true"] {
    display: none;
  }

  body.mobile-search-open.home-page:not(.listing-airbnb-page) .search-popover,
  body.mobile-search-open .search-popover {
    position: static;
    width: 100%;
    /* Cabe na folha; o que passar disso rola dentro do próprio painel. */
    max-height: 46dvh;
    overflow-y: auto;
    margin-top: 10px;
    border-radius: 16px;
    box-shadow: none;
    transform: none;
  }

  body.mobile-search-open .search-overlay {
    display: none;
  }

  .mobile-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -14px -16px 12px;
    padding: 12px 16px;
    background: #fdfbf7;
  }

  .mobile-sheet-head h2 {
    margin: 0;
    font-family: "Forum", serif;
    font-size: 1.25rem;
    font-weight: 400;
  }

  .mobile-sheet-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(28, 25, 23, 0.12);
    border-radius: 50%;
    background: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* ====================================================================
   7. Home — ordem das seções (hospedagens primeiro)
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content {
    display: flex;
    flex-direction: column;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .hero-showcase {
    order: 1;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .mobile-quickbar {
    order: 2;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > #hospedagens {
    order: 3;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .destination-listings-section {
    order: 4;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .trust-section {
    order: 5;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .section-ornament {
    order: 6;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .benefits-section {
    order: 7;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .route-collection {
    order: 8;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .brand-story {
    order: 9;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .corporate-callout {
    order: 10;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) main.page-content > .final-cta-section {
    order: 11;
  }
}

/* ====================================================================
   8. Home — vitrine de hospedagens em carrossel
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) #hospedagens {
    padding-top: 6px;
  }

  /* A barra lateral de filtros é do catálogo; na Home ela não aparece. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .listings-filter-sidebar,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .listings-view-controls,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .listings-trust-panel {
    display: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-copy {
    gap: 6px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-copy h2 {
    font-size: clamp(1.75rem, 7.4vw, 2.1rem);
    line-height: 1.1;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .listings-results-toolbar {
    padding: 0;
    border: 0;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-result-count {
    font-size: 0.8rem;
  }

  /* Prateleira: 1 card + prévia do próximo, com snap. O mesmo gesto vale para
     a vitrine editorial e para os blocos por destino — só o cabeçalho muda. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) #listings-grid,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .destination-grid {
    display: flex;
    gap: var(--mob-shelf-gap);
    /* Sangra até a borda e devolve o recuo por dentro: o primeiro card começa
       na régua e o último mantém o mesmo respiro no fim. */
    margin-inline: calc(-1 * var(--mob-shelf-inline));
    padding: 4px var(--mob-shelf-inline) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mob-shelf-inline);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) #listings-grid::-webkit-scrollbar,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .destination-grid::-webkit-scrollbar {
    display: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) #listings-grid > .listing-card,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .destination-grid > .listing-card {
    flex: 0 0 var(--mob-shelf-card);
    max-width: var(--mob-shelf-card);
    scroll-snap-align: start;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-prev-btn,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-next-btn {
    display: none !important;
  }
}

/* ====================================================================
   9. Cards de hospedagem (Home e catálogo)
   ==================================================================== */
@media (max-width: 720px) {
  .listing-card {
    border-radius: 18px;
  }

  .listing-card .listing-media {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .listing-card .listing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .listing-card .listing-content {
    gap: 4px;
    padding: 12px 4px 6px;
  }

  .listing-card .listing-title {
    /* Título inteiro, sem reticência: os cards da prateleira se alinham pela
       mesma altura, então um título de três linhas não desalinha a fileira. */
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .listing-card .listing-city,
  .listing-card .listing-meta {
    font-size: 0.85rem;
  }

  /* Bairro e cidade: quebra em vez de cortar. */
  .listing-card .listing-city {
    display: block;
    overflow-wrap: anywhere;
  }

  .listing-card .listing-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ====================================================================
   10. Home — seções editoriais com ritmo mobile
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefits-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefit-card {
    padding: 18px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .editorial-section-header {
    gap: 10px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .editorial-aside,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-header-meta p {
    font-size: 0.92rem;
  }

  /* Pontos da rota: um destino por vez, deslizando. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-grid {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--mob-gutter));
    padding-inline: var(--mob-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-grid::-webkit-scrollbar {
    display: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-grid > .route-card {
    flex: 0 0 86%;
    max-width: 86%;
    min-height: 330px;
    scroll-snap-align: center;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .brand-story-layout {
    gap: 18px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .brand-story-panels {
    gap: 10px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-inner {
    gap: 14px;
    padding: 20px 18px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-divider {
    display: none;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-action .rr-btn,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .final-cta-btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .section-ornament {
    padding-block: 18px;
  }
}

/* ====================================================================
   11. Catálogo (/hospedagens) — resultados primeiro
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page.listing-index-page .listings-hero-content {
    padding-top: 14px;
    padding-bottom: 4px;
  }

  body.home-page.listing-index-page .listings-hero-content h1 {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
  }

  body.home-page.listing-index-page .listings-hero-content p {
    font-size: 0.92rem;
  }

  body.home-page.listing-index-page .listings-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.home-page.listing-index-page .filter-jump-link {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(28, 25, 23, 0.14);
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
  }

  body.home-page.listing-index-page #listings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ====================================================================
   12. Detalhe da hospedagem
   ==================================================================== */
@media (max-width: 720px) {
  body.listing-airbnb-page:not(.photo-tour-page) .listing-title-row {
    gap: 8px;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-title-row h1 {
    font-size: clamp(1.55rem, 6.6vw, 1.95rem);
    line-height: 1.15;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-title-actions {
    justify-content: flex-start;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .title-action-btn {
    min-height: 44px;
  }

  /* Galeria: swipe com foto grande e contador. */
  body.listing-airbnb-page:not(.photo-tour-page) .gallery {
    position: relative;
    display: block;
    margin-inline: calc(-1 * var(--mob-gutter));
    border-radius: 0;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .gallery .thumbs,
  body.listing-airbnb-page:not(.photo-tour-page) .gallery .gallery-primary {
    display: none;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mobile-gallery {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mobile-gallery::-webkit-scrollbar {
    display: none;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mobile-gallery button {
    flex: 0 0 100%;
    padding: 0;
    border: 0;
    background: none;
    scroll-snap-align: center;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mobile-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mobile-gallery-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(12, 28, 22, 0.72);
    color: #f7f3ec;
    font-size: 0.78rem;
    font-weight: 700;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .show-all-photos-btn {
    right: auto;
    bottom: 14px;
    left: 14px;
    min-height: 40px;
  }

  /* Uma coluna, sem cartão flutuante. */
  body.listing-airbnb-page:not(.photo-tour-page) .listing-layout {
    display: block;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .booking-column {
    margin-top: 18px;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mvp-contact-sticky {
    position: static;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .section-card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .highlight-card {
    padding: 14px;
  }
}

/* CTA fixo de WhatsApp (canal principal do MVP). */
.listing-cta-bar {
  display: none;
}

@media (max-width: 720px) {
  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar {
    position: fixed;
    right: 0;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom));
    left: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid rgba(28, 25, 23, 0.1);
    background: rgba(253, 251, 247, 0.98);
    box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.12);
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar p {
    display: grid;
    gap: 1px;
    min-width: 0;
    margin: 0;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar strong {
    font-size: 0.95rem;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar small {
    color: #6f6860;
    font-size: 0.76rem;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: #1f7a4d;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar a img {
    width: 20px;
    height: 20px;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-cta-bar a[aria-disabled="true"] {
    background: #6f6860;
  }

  body.listing-airbnb-page:not(.photo-tour-page).has-cta-bar {
    padding-bottom: calc(var(--mob-nav-h) + 76px + var(--mob-safe-bottom));
  }
}

/* ====================================================================
   13. Mapa (detalhe) — ajustes de celular
   O desenho da seção mora em listing.css; aqui ficam só as medidas de tela
   pequena e o diálogo em tela cheia.
   ==================================================================== */
@media (max-width: 720px) {
  body.listing-airbnb-page:not(.photo-tour-page) .map-surface {
    height: clamp(340px, 46svh, 420px);
  }

  body.listing-airbnb-page:not(.photo-tour-page) .map-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Tela cheia de verdade, respeitando as áreas seguras do aparelho. */
  .map-dialog-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(12px + var(--mob-safe-bottom));
  }

  .map-dialog-canvas {
    border-radius: 14px;
  }
}

/* ====================================================================
   14. Tour por fotos
   ==================================================================== */
@media (max-width: 720px) {
  body.photo-tour-page .photo-tour-index {
    display: flex;
    gap: 10px;
    margin-inline: calc(-1 * var(--mob-gutter));
    padding-inline: var(--mob-gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.photo-tour-page .photo-tour-index::-webkit-scrollbar {
    display: none;
  }

  body.photo-tour-page .photo-tour-index-card {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }

  body.photo-tour-page .photo-tour-photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.photo-tour-page .photo-tour-photo-button img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .photo-viewer-modal {
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: var(--mob-safe-bottom);
  }
}

/* ====================================================================
   15. Tablet (721–1100px): composição intermediária
   ==================================================================== */
@media (min-width: 721px) and (max-width: 1100px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-carousel {
    height: clamp(420px, 52svh, 520px);
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-layout {
    display: block;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .mvp-contact-sticky {
    position: static;
  }
}

/* ====================================================================
   16. Catálogo: mesma busca compacta da Home
   ==================================================================== */
@media (max-width: 720px) {
  body.home-page.listing-index-page .hero-search-shell,
  body.home-page.listing-index-page .hero-trust-strip {
    display: none;
  }

  body.home-page.listing-index-page .mobile-quickbar {
    padding-top: 8px;
  }
}

/* ====================================================================
   17. Detalhe e tour: sem busca no topo
   ==================================================================== */
@media (max-width: 720px) {
  /* Buscar hospedagem não é a tarefa de quem já está numa hospedagem. */
  body.listing-airbnb-page .header-search-slot,
  body.listing-airbnb-page .hero-showcase {
    display: none;
  }

  body.listing-airbnb-page .site-header {
    padding: 10px 14px;
  }
}

/* ====================================================================
   18. Ajustes finais (catálogo compacto e folha de busca)
   ==================================================================== */
@media (max-width: 720px) {
  /* Catálogo: o topo apresenta em poucas linhas; a lista começa logo. */
  body.home-page.listing-index-page .hero-carousel {
    height: auto;
    min-height: 0;
    padding-bottom: 14px;
  }

  body.home-page.listing-index-page .hero-slide {
    height: 210px;
  }

  body.home-page.listing-index-page .listings-hero-content {
    gap: 4px;
  }

  body.home-page.listing-index-page .listings-hero-content h1 {
    font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  }

  body.home-page.listing-index-page .listings-results-toolbar {
    flex-wrap: nowrap;
    padding-block: 8px;
  }

  body.home-page.listing-index-page .listings-view-controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* Modo mapa e ordenação: o essencial no celular é filtrar. */
  body.home-page.listing-index-page .view-mode-toggle {
    display: none;
  }

  body.home-page.listing-index-page .listings-view-controls label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0;
  }

  body.home-page.listing-index-page .listings-view-controls select {
    min-height: 44px;
    font-size: 0.85rem;
  }

  /* Datas seguem desligadas pela configuração do site, também na folha. */
  body.mobile-search-open .search-bar:not(.has-date-search) [data-search-open="when"] {
    display: none;
  }

  /* Especificidade equivalente à do CSS do desktop, sem !important. */
  body.mobile-search-open.search-compact:not(.search-expanded):not(.listing-airbnb-page) .search-bar .search-submit,
  body.mobile-search-open .search-bar .search-submit {
    width: 100%;
    max-width: none;
    min-height: 52px;
    border-radius: 14px;
  }
}

/* ====================================================================
   19. Catálogo: título no fluxo e barra de resultados enxuta
   ==================================================================== */
@media (max-width: 720px) {
  /* No desktop o título fica sobre a imagem; no celular ele entra no fluxo. */
  body.home-page.listing-index-page .listings-hero-content {
    position: static;
    max-width: none;
    /* 74px: o título começa abaixo do header flutuante, sem passar por trás. */
    padding: 74px var(--mob-gutter) 0;
    background: none;
  }

  body.home-page.listing-index-page .hero-carousel {
    padding-bottom: 0;
  }

  /* A pílula substitui a busca do topo: uma busca só por tela. */
  body.home-page.listing-index-page .header-search-slot {
    display: none;
  }

  body.home-page.listing-index-page .listings-results-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 10px;
  }

  body.home-page.listing-index-page .featured-result-count {
    flex: none;
    width: 100%;
    font-size: 0.85rem;
  }

  /* Ordenação e Filtros ocupam uma linha própria, cada um podendo encolher. */
  body.home-page.listing-index-page .listings-view-controls {
    flex: none;
    width: 100%;
    justify-content: space-between;
  }

  body.home-page.listing-index-page .listings-view-controls > * {
    min-width: 0;
  }

  body.home-page.listing-index-page .filter-jump-link {
    flex: none;
  }
}

@media (max-width: 720px) {
  /* Ordenar e Filtros lado a lado, numa linha só. */
  body.home-page.listing-index-page .listings-view-controls label {
    flex: 0 1 auto;
    width: auto;
    max-width: 170px;
  }

  body.home-page.listing-index-page .listings-view-controls select {
    width: 100%;
    max-width: 170px;
  }
}

/* ====================================================================
   20. Polimento visual (rodada pós-aprovação da arquitetura)
   Ajustes de proporção, densidade e ritmo. Sem mudar estrutura.
   ==================================================================== */
@media (max-width: 720px) {
  :root {
    --mob-nav-h: 58px;
  }

  /* --- Header mais leve ------------------------------------------- */
  body.home-page .site-header,
  body.listing-airbnb-page .site-header,
  body.corporate-page .site-header {
    top: 6px;
    padding: 7px 12px;
    border-radius: 16px;
  }

  .site-header .brand-logo img,
  .site-header .header-logo img {
    max-height: 30px;
  }

  /* A marca escrita é padrão no celular, inclusive com o header compacto:
     só o emblema não identificava o site ao rolar. Vence as regras que a
     escondiam abaixo de 480px e no topo da Home. */
  body.home-page:not(.listing-airbnb-page) .site-header .logo .brand-copy,
  body.listing-airbnb-page:not(.photo-tour-page) .site-header .logo .brand-copy,
  body.corporate-page .site-header .logo .brand-copy {
    display: grid;
  }

  .site-header .brand-text {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .site-header .brand-subtitle {
    /* O brand.css esconde a segunda linha abaixo de 720px; no header novo
       ela cabe e faz parte da marca. */
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }

  /* Sobre a foto, as duas linhas são douradas — o mesmo par da página de
     hospedagem. No header compacto (vidro claro) valem as cores de lá,
     senão o dourado sumiria no branco. */
  body.home-page:not(.listing-airbnb-page):not(.is-compact):not(.search-open) .site-header .brand-subtitle,
  body.corporate-page .site-header .brand-subtitle {
    color: #c99135;
    opacity: 1;
  }

  /* No vidro claro o par continua dourado, em tom mais escuro para ter
     contraste (o preto ao lado do título dourado destoava). */
  body.home-page:not(.listing-airbnb-page).is-compact:not(.search-open) .site-header .brand-subtitle,
  body.home-page:not(.listing-airbnb-page).search-open .site-header .brand-subtitle {
    color: #8f5f1b;
    opacity: 1;
  }

  /* Uma barra de busca por vez: a pílula é a busca do celular, então o
     header nunca mostra a busca acoplada (nem no estado compacto). */
  body.home-page .header-search-slot {
    display: none;
  }

  /* O mesmo "liquid glass" do desktop, um pouco mais denso: no celular os
     títulos grandes passavam legíveis por trás do header. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.home-page:not(.listing-airbnb-page).is-compact:not(.search-open) .site-header,
    body.home-page:not(.listing-airbnb-page).search-open .site-header {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.9) 100%);
    }
  }

  /* --- Busca: descritiva no topo, discreta ao rolar ----------------- */
  .mobile-quickbar {
    top: 74px; /* header flutuante termina em 70px: 4px de respiro */
    gap: 8px;
    padding: 10px var(--mob-gutter) 8px;
  }

  .mobile-search-pill {
    min-height: 52px;
    padding: 8px 14px;
  }

  .mobile-quickbar.is-stuck {
    padding-block: 6px;
    box-shadow: 0 8px 20px rgba(28, 25, 23, 0.08);
  }

  .mobile-quickbar.is-stuck .mobile-search-pill {
    min-height: 46px;
  }

  /* Ao rolar, a pílula mostra só o resumo (destino · hóspedes). */
  .mobile-quickbar.is-stuck .mobile-search-pill strong {
    display: none;
  }

  .mobile-quickbar.is-stuck .mobile-search-pill small {
    color: #1c1917;
    font-size: 0.9rem;
    font-weight: 700;
  }

  body.home-page .mobile-quickbar.is-stuck .popular-filter-strip {
    display: none;
  }

  /* --- Hospedagens que encantam ------------------------------------ */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-copy {
    gap: 4px;
    margin-bottom: 2px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-copy h2 {
    font-size: clamp(1.6rem, 6.8vw, 1.95rem);
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-copy > p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-all-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) #listings-grid {
    padding-block: 2px 8px;
  }

  /* O cabeçalho da vitrine já é alto: os cards não precisam de outro respiro. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .featured-listings-shell {
    margin-top: 16px;
  }

  /* --- Planeje sua estadia: mais densidade -------------------------- */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefits-section {
    padding-block: var(--rr-section-space-compact, 2rem);
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefit-card {
    gap: 8px;
    padding: 16px;
    min-height: 0;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefit-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefit-card p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefit-card .feature-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .benefits-grid {
    gap: 10px;
  }

  /* --- Escolha o clima: texto respirando dentro do card ------------- */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-grid > .route-card {
    min-height: 300px;
    padding: 16px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-card h3 {
    font-size: 1.28rem;
    line-height: 1.18;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-card p {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .route-card-cta {
    min-height: 40px;
  }

  /* --- Corporativo: mesma composição, menos altura ------------------ */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-inner {
    gap: 10px;
    padding: 18px 16px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-icon {
    width: 42px;
    height: 42px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-copy h2 {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-copy p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .corporate-callout-action {
    gap: 6px;
  }

  /* --- Frase de destaque e CTA final -------------------------------- */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .section-ornament {
    padding-block: 14px;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .final-cta-card {
    gap: 12px;
    padding: 22px 18px calc(22px + var(--mob-safe-bottom));
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .final-cta-copy {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* --- Rodapé: sem repetir a navegação que já está fixa ------------- */
  .site-footer nav[aria-label="Navegação do rodapé"] {
    display: none;
  }

  .site-footer-inner {
    gap: 22px;
  }

  /* --- Navegação inferior mais enxuta ------------------------------- */
  .mobile-nav a {
    gap: 2px;
    padding: 6px 4px;
    font-size: 10.5px;
  }

  .mobile-nav a svg {
    width: 21px;
    height: 21px;
  }

  /* --- Tipografia: sem palavra órfã nem título gigante -------------- */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h1,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h2 {
    font-size: clamp(1.85rem, 7.8vw, 2.35rem);
    text-wrap: balance;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) h2,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) h3 {
    text-wrap: balance;
  }

  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .editorial-lead {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* A quebra escrita para o desktop deixa "Mais do" sozinho no celular;
     sem ela o balanceamento distribui as três linhas. */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .brand-story-copy h2 br {
    display: none;
  }
}

/* Telas bem estreitas (360px): só o essencial encolhe. */
@media (max-width: 380px) {
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h1,
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .hero-slide h2 {
    font-size: 1.72rem;
  }

  .mobile-search-pill small {
    font-size: 0.74rem;
  }

  .mobile-nav a {
    font-size: 10px;
  }
}

/* ====================================================================
   21. Hospedagens por destino (bloco dinâmico do CMS)
   ==================================================================== */
.destination-listings {
  display: grid;
  gap: var(--rr-section-space-compact, 2.5rem);
}

.destination-listings:empty {
  display: none;
}

/* O bloco usa o chrome do card da vitrine, mas não é uma seção da régua:
   o recuo já vem da seção que o contém. Os ornamentos de canto também ficam
   só nas seções de cima e de baixo — repetidos a cada cidade, poluem. */
body.home-page:not(.listing-airbnb-page):not(.listing-index-page) .destination-block.featured-section {
  width: auto;
  padding: 0;
  background-image: none;
}

.destination-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: var(--rr-stack-content, 1.5rem);
}

.destination-block-head h2 {
  margin: 0;
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  line-height: 1.12;
}

.destination-block-head p {
  flex: 1 1 100%;
  margin: 0;
  max-width: 60ch;
  color: var(--rr-muted, #6f6860);
}

.destination-block-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--rr-accent-dark, #8f5f1b);
  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.destination-block-link:hover {
  color: var(--rr-highlight, #b98020);
}

/* Desktop: mesmas colunas da vitrine, para o card ter sempre o mesmo porte
   (duas hospedagens não podem virar dois blocos gigantes). */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rr-grid-gap, 1.25rem);
}

@media (min-width: 901px) and (max-width: 1100px) {
  .destination-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: prateleira horizontal, como a vitrine. Rolar a página troca de
   destino; deslizar o trilho explora as hospedagens daquele destino. */
@media (max-width: 720px) {
  /* Prateleiras em sequência: o respiro entre elas é menor que entre seções,
     porque a leitura é contínua (rolar = trocar de destino). */
  body.home-page:not(.listing-index-page):not(.listing-airbnb-page) .destination-listings-section {
    padding-block: 18px;
  }

  .destination-listings {
    /* Sem `minmax(0, …)` a coluna acompanha o conteúdo do trilho e a página
       inteira passa a rolar de lado. */
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .destination-block {
    min-width: 0;
  }

  /* O trilho (display, snap, sangria e largura do card) vem da regra
     compartilhada das prateleiras, na seção 8. */

  /* Cabeçalho empilhado: título, descrição curta e depois o link. */
  .destination-block-head {
    display: grid;
    justify-items: start;
    gap: 2px;
    margin-bottom: 10px;
  }

  .destination-block-head h2 {
    order: 1;
    font-size: 1.5rem;
  }

  .destination-block-head p {
    order: 2;
    /* A descrição vem do Admin: aqui ela só é limitada visualmente a duas
       linhas, para a Home não voltar a ficar comprida. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Três linhas: sobra margem para descrições maiores do Admin sem cortar
       a frase e sem alongar a Home. */
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .destination-block-link {
    order: 3;
    font-size: 0.75rem;
  }
}

/* ====================================================================
   22. Alvos de toque remanescentes (rodapé e pontos do hero)
   Só aumenta a área tocável; o desenho continua o mesmo.
   ==================================================================== */
@media (max-width: 720px) {
  .site-footer-bottom a,
  .site-footer-contact a,
  .route-header-meta a,
  .listings-breadcrumb a,
  .photo-tour-breadcrumb a,
  .photo-tour-back {
    display: inline-flex;
    align-items: center;
    /* O flex descarta o espaço em branco antes da seta: devolvido no gap. */
    gap: 0.35em;
    min-height: 40px;
  }

  /* A bolinha continua com 10px: a folga de toque vem do pseudo-elemento. */
  .hero-dot {
    position: relative;
  }

  .hero-dot::after {
    content: "";
    position: absolute;
    inset: -14px -7px;
  }
}

/* ====================================================================
   23. Detalhe: faixa do topo mais curta e meta sem separador órfão
   ==================================================================== */
@media (max-width: 720px) {
  /* A galeria é o que interessa: a faixa de abertura encurta. */
  body.listing-airbnb-page:not(.photo-tour-page) main.page-detail {
    padding-top: 132px;
  }

  /* Empilhado, o "•" do fim da linha fica solto. */
  body.listing-airbnb-page:not(.photo-tour-page) .listing-title-meta {
    display: grid;
    justify-items: start;
    gap: 2px;
  }

  body.listing-airbnb-page:not(.photo-tour-page) .listing-title-meta .inline-divider {
    display: none;
  }
}